feat(desktop): move process events to dedicated rail section

Give the process log its own Events rail view with a full-height table,
detail panel, and #events routing; remove the cramped table from Graph
Overview and place the workspace logo above Settings in the rail bottom.

Author: jravenel

libs/naas-abi/naas_abi/apps/desktop/AGENTS.md

@@ -125,7 +125,7 @@ desktop/
 
 A workspace is a **folder on disk** (VS Code / Cursor semantics), not a Nexus tenant.
 
-- **UI**: icon rail top (Nexus sidebar-top pattern): **logo button only** opens a glass portal dropdown to the right (square corners). Hover on the logo shows the full path; the menu lists recent workspaces with a checkmark on the active entry and **Open Folder…**. The status bar left shows the current workspace basename and git branch as read-only context (no switch action). Top bar and main body stay clean (panel toggle + section title only).
+- **UI**: icon rail bottom (above Settings): **logo button only** opens a glass portal dropdown to the right (square corners). Hover on the logo shows the full path; the menu lists recent workspaces with a checkmark on the active entry and **Open Folder…**. The status bar left shows the current workspace basename and git branch as read-only context (no switch action). Top bar and main body stay clean (panel toggle + section title only). Rail top is an empty spacer.
 - **Switch / open**: `POST /api/workspaces/open` or `PUT /api/settings` with a new `workspace_root`. Triggers `ensure_workspace`, harness restart, terminal reconnect, file index refresh, org/model context reload, and graph rescaffold.
 - **Recent list**: `recent_workspaces` setting (JSON array, max 10 paths). Updated on every open/switch.
 - **First run**: `maybe_upgrade_workspace_setting()` auto-detects `~/abi` (git + `.env`) when still on the factory default.
@@ -196,10 +196,15 @@ Scaffolded `instances.ttl` seeds concrete routing individuals:
 **Iteration 7** (current):
 
 - `GET /api/processes` — paginated event log rows (timestamp, label, type, seven bucket columns with known/shared/unknown status, `graph_node_id` for graph focus)
-- Graph Overview tab: scrollable **Process events** table above the vis-network canvas; click a row to select and focus the matching process node (and its bucket spokes)
+
+**Iteration 8** (current):
+
+- **Events rail section**: dedicated `#events` main view with full-height process events table (`GET /api/processes`); row click opens detail panel, double-click or **View in Graph** navigates to Graph Overview and focuses the process node
+- Workspace logo switcher moved to rail bottom (above Settings); rail top is spacer only
+- Graph Overview tab: vis-network canvas only (process events table removed from split view above graph)
 - Tables tab still shows raw SQLite dumps (`processes`, `process_aspects`) for debugging
 
-**Iteration 8 targets**:
+**Iteration 9 targets**:
 - Per-tool `SectionRoute` instances (terminal, file edit, SPARQL) with disposition-based routing
 - Bidirectional sync: settings UI writes back to `instances.ttl` when agents/models change
 - Visual BFO7 bucket diagram in Graph UI (seven-bucket layout, not just route summary)
@@ -443,8 +448,7 @@ The Code section explorer accepts files dragged from macOS Finder:
 
 The Graph section combines a **vis-network** canvas with search, group filters, and a right-hand detail panel (inspired by `bob/docs/ontology/bob_ontology.html` and Nexus graph explorer).
 
-- **Layout (Overview tab)**: toolbar with search + group filter chips; **process events table** (scrollable, max ~220px) above the vis-network canvas; optional left node list when search matches; center vis-network canvas; right inspector panel (~320px, square corners, slide-in on selection).
-- **Process events table**: `GET /api/processes`; columns When, Label, Type, plus seven BFO buckets; status styling (known/shared/unknown); click row focuses `graph_node_id` and connected bucket nodes in the graph below.
+- **Layout (Overview tab)**: toolbar with search + group filter chips; center vis-network canvas; right inspector panel (~320px, square corners, slide-in on selection).
 - **Search**: filters nodes by label/id/group as you type; matching nodes stay highlighted, others dim; Enter cycles matches and focuses the node; Escape clears search.
 - **Group filters**: toggle chips per node group (context, route, language_model, …); hidden groups are removed from the canvas.
 - **Right panel**: opens on node click; shows properties from `node.detail`, `can_realize` tags for language models, TTL annotations for BFO buckets, and incoming/outgoing relations (clickable to jump).
@@ -454,6 +458,15 @@ The Graph section combines a **vis-network** canvas with search, group filters,
 - **View in browser dev**: `uv run python libs/naas-abi/naas_abi/apps/desktop/run.py --browser-only` → Knowledge Graph rail icon → Overview tab → search or click a node.
 - **References**: `bob/docs/ontology/bob_ontology.html` (inspector + neighbourhood highlight), `apps/nexus/apps/web/src/components/graph/vis-network.tsx` (layout/physics), `knowledge-graph-section.tsx` (sidebar structure).
 
+### Events section (process log)
+
+Dedicated rail section (`#events`) for the SQLite process event log.
+
+- **Layout**: full-height scrollable table (When, Label, Type, seven BFO bucket columns); right detail panel (~320px) on row select; optional navigation to Graph Overview via double-click or **View in Graph**.
+- **Data**: `GET /api/processes?limit=100` (paginated; same payload as iteration 7).
+- **Row actions**: single click selects row and shows bucket detail; double-click or detail action focuses `graph_node_id` in the Graph section (loads overview if needed).
+- **Panel**: side panel shows "Process log" hint; main table fills the content area.
+
 ## Adding features
 
 - Keep the frontend dependency-free at runtime (vanilla JS + the vendored

libs/naas-abi/naas_abi/apps/desktop/gui/web/app.js

@@ -56,6 +56,8 @@ const ICONS = {
   check: '<path d="M20 6 9 17l-5-5"/>',
   "loader-circle": '<path d="M21 12a9 9 0 1 1-6.219-8.56"/>',
   "external-link": '<path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>',
+  "scroll-text":
+    '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/>',
 };
 
 function icon(name, size = 18) {
@@ -79,10 +81,11 @@ const SECTION_META = {
   chat: { title: "Chat", panel: "chat-panel" },
   code: { title: "Code", panel: "code-panel" },
   graph: { title: "Knowledge Graph", panel: "graph-panel" },
+  events: { title: "Events", panel: "events-panel" },
   settings: { title: "Settings", panel: "settings-panel" },
 };
 
-const SECTION_VIEWS = ["chat", "code", "graph", "settings"];
+const SECTION_VIEWS = ["chat", "code", "graph", "events", "settings"];
 
 const DEFAULT_SECTION = "chat";
 
@@ -249,7 +252,8 @@ const state = {
   graphView: "brain",
   graphOverview: null,
   graphEvents: null,
-  graphSelectedEventId: null,
+  selectedEventId: null,
+  pendingGraphFocus: null,
   graphNetwork: null,
   graphNodesDataset: null,
   graphEdgesDataset: null,
@@ -392,12 +396,13 @@ function switchSection(section, { updateHash = true } = {}) {
     refreshGraphStats();
     if (state.graphTab === "overview") {
       loadGraphOverview();
-      loadGraphEvents();
     } else if (state.graphTab === "sparql") {
       runActiveContextQuery();
     } else if (state.graphTab === "tables" && state.graphOverview) {
       renderGraphTables(state.graphOverview.tables);
     }
+  } else if (section === "events") {
+    loadEvents();
   } else if (section === "settings") {
     loadSettingsView();
   }
@@ -469,7 +474,10 @@ async function newChat(section) {
   renderMessagesFor(section);
   if (state.section === "graph") {
     state.graphEvents = null;
-    loadGraphEvents();
+    if (state.graphTab === "overview") loadGraphOverview();
+  } else if (state.section === "events") {
+    state.graphEvents = null;
+    loadEvents();
   }
   return chat;
 }
@@ -2741,7 +2749,9 @@ async function applyWorkspaceSwitchResult(body) {
   if (state.section === "graph" && state.graphTab === "overview") {
     state.graphEvents = null;
     loadGraphOverview();
-    loadGraphEvents();
+  } else if (state.section === "events") {
+    state.graphEvents = null;
+    loadEvents();
   }
   reconnectTerminal();
   refreshWorkspaceEnvPanel();
@@ -2858,7 +2868,6 @@ function switchGraphTab(tab) {
   $("graph-tab-tables").classList.toggle("hidden", tab !== "tables");
   if (tab === "overview") {
     loadGraphOverview();
-    loadGraphEvents();
   } else if (tab === "sparql") {
     if (!$("sparql-input").value.trim()) {
       $("sparql-input").value = ACTIVE_CONTEXT_SPARQL;
@@ -3694,7 +3703,7 @@ function renderGraphEventBucketCell(bucket) {
   return td;
 }
 
-function focusGraphProcessEvent(eventRow) {
+function focusGraphProcessNode(eventRow) {
   if (!eventRow?.graph_node_id || !state.graphNetwork || !state.graphOverview) return;
   const processNodeId = eventRow.graph_node_id;
   const nodeIds = new Set([processNodeId]);
@@ -3710,15 +3719,101 @@ function focusGraphProcessEvent(eventRow) {
     showToast("Process not visible in current graph view", "info");
     return;
   }
-  state.graphSelectedEventId = eventRow.id;
-  renderGraphEventsTable(state.graphEvents?.items || []);
   state.graphNetwork.selectNodes(visibleIds);
   focusGraphNode(processNodeId, { openPanel: true, animate: true });
 }
 
-function renderGraphEventsTable(items) {
-  const host = $("graph-events-table-host");
-  const count = $("graph-events-count");
+function selectProcessEvent(eventRow) {
+  state.selectedEventId = eventRow?.id ?? null;
+  renderEventsTable(state.graphEvents?.items || []);
+  renderEventDetail(eventRow);
+}
+
+function openProcessEventInGraph(eventRow) {
+  if (!eventRow?.graph_node_id) {
+    showToast("No graph node linked to this event", "info");
+    return;
+  }
+  state.pendingGraphFocus = eventRow;
+  if (state.section !== "graph") {
+    state.graphTab = "overview";
+    switchSection("graph");
+    return;
+  }
+  if (!state.graphOverview) {
+    loadGraphOverview();
+    return;
+  }
+  state.pendingGraphFocus = null;
+  focusGraphProcessNode(eventRow);
+}
+
+function renderEventDetail(eventRow) {
+  const host = $("events-detail-body");
+  const panel = $("events-detail-panel");
+  if (!host || !panel) return;
+  if (!eventRow) {
+    panel.classList.remove("open");
+    host.innerHTML = '<div class="graph-detail-empty">Select a row to inspect bucket values.</div>';
+    return;
+  }
+  panel.classList.add("open");
+  host.innerHTML = "";
+  const title = document.createElement("div");
+  title.className = "graph-detail-title";
+  const heading = document.createElement("h3");
+  heading.textContent = eventRow.process_label || eventRow.process_type || "Process event";
+  title.appendChild(heading);
+  const badge = document.createElement("span");
+  badge.className = "graph-detail-badge";
+  badge.textContent = eventRow.process_type || "event";
+  title.appendChild(badge);
+  host.appendChild(title);
+
+  const meta = document.createElement("div");
+  meta.className = "graph-detail-section";
+  meta.innerHTML = `<div class="graph-detail-section-title">When</div><div>${eventRow.timestamp || "—"}</div>`;
+  host.appendChild(meta);
+
+  const buckets = eventRow.buckets || {};
+  const bucketSection = document.createElement("div");
+  bucketSection.className = "graph-detail-section";
+  const bucketTitle = document.createElement("div");
+  bucketTitle.className = "graph-detail-section-title";
+  bucketTitle.textContent = "BFO buckets";
+  bucketSection.appendChild(bucketTitle);
+  const table = document.createElement("table");
+  table.className = "graph-aspects-table";
+  const head = table.insertRow();
+  ["Bucket", "Value", "Status"].forEach((label) => {
+    const th = document.createElement("th");
+    th.textContent = label;
+    head.appendChild(th);
+  });
+  for (const [bucket, data] of Object.entries(buckets)) {
+    const tr = table.insertRow();
+    const status = data?.status || "unknown";
+    tr.innerHTML = `<td>${bucket}</td><td>${data?.label || "—"}</td><td>${status}</td>`;
+  }
+  bucketSection.appendChild(table);
+  host.appendChild(bucketSection);
+
+  if (eventRow.graph_node_id) {
+    const actions = document.createElement("div");
+    actions.className = "events-detail-actions";
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "settings-btn primary";
+    btn.textContent = "View in Graph";
+    btn.onclick = () => openProcessEventInGraph(eventRow);
+    actions.appendChild(btn);
+    host.appendChild(actions);
+  }
+}
+
+function renderEventsTable(items) {
+  const host = $("events-table-host");
+  const count = $("events-count");
   if (!host) return;
   host.innerHTML = "";
   const total = state.graphEvents?.total ?? items.length;
@@ -3733,7 +3828,7 @@ function renderGraphEventsTable(items) {
     return;
   }
   const table = document.createElement("table");
-  table.className = "graph-events-table";
+  table.className = "events-table";
   const head = table.insertRow();
   const columns = [
     "timestamp",
@@ -3766,16 +3861,17 @@ function renderGraphEventsTable(items) {
   }
   for (const row of items) {
     const tr = document.createElement("tr");
-    tr.className = "graph-event-row";
-    if (row.id === state.graphSelectedEventId) {
+    tr.className = "events-row";
+    if (row.id === state.selectedEventId) {
       tr.classList.add("selected");
     }
-    tr.onclick = () => focusGraphProcessEvent(row);
+    tr.onclick = () => selectProcessEvent(row);
+    tr.ondblclick = () => openProcessEventInGraph(row);
     const buckets = row.buckets || {};
     for (const column of columns) {
       if (column === "timestamp" || column === "process_label" || column === "process_type") {
         const td = document.createElement("td");
-        td.className = "graph-event-meta";
+        td.className = "events-meta";
         td.textContent = row[column] ?? "";
         td.title = td.textContent;
         tr.appendChild(td);
@@ -3788,15 +3884,19 @@ function renderGraphEventsTable(items) {
   host.appendChild(table);
 }
 
-async function loadGraphEvents() {
-  const host = $("graph-events-table-host");
+async function loadEvents() {
+  const host = $("events-table-host");
   if (host && !state.graphEvents) {
     host.innerHTML = '<div class="graph-detail-empty">Loading events…</div>';
   }
   try {
     const payload = await api("/api/processes?limit=100");
     state.graphEvents = payload;
-    renderGraphEventsTable(payload.items || []);
+    renderEventsTable(payload.items || []);
+    if (state.selectedEventId) {
+      const selected = (payload.items || []).find((row) => row.id === state.selectedEventId);
+      renderEventDetail(selected || null);
+    }
   } catch (err) {
     if (host) {
       host.innerHTML = "";
@@ -3936,8 +4036,10 @@ async function loadGraphOverview() {
     if (state.graphTab === "tables") {
       renderGraphTables(overview.tables);
     }
-    if (state.graphSelectedEventId) {
-      renderGraphEventsTable(state.graphEvents?.items || []);
+    if (state.pendingGraphFocus) {
+      const row = state.pendingGraphFocus;
+      state.pendingGraphFocus = null;
+      focusGraphProcessNode(row);
     }
   } catch (err) {
     const host = $("graph-detail-table");
@@ -4904,6 +5006,11 @@ function init() {
     $("graph-search")?.focus();
   });
   $("graph-detail-close")?.addEventListener("click", clearGraphNodeSelection);
+  $("events-detail-close")?.addEventListener("click", () => {
+    state.selectedEventId = null;
+    renderEventsTable(state.graphEvents?.items || []);
+    renderEventDetail(null);
+  });
   document.querySelectorAll(".graph-view-btn").forEach((btn) => {
     btn.onclick = () => switchGraphView(btn.dataset.graphView);
   });