@cortexkit/aft-opencode 0.17.3 → 0.18.0

package/src/tui/index.tsx

@@ -2,8 +2,10 @@
 // @ts-nocheck
 
 import type { TuiPlugin, TuiPluginApi } from "@opencode-ai/plugin/tui";
+import packageJson from "../../package.json";
 import { AftRpcClient } from "../shared/rpc-client";
 import { coerceAftStatus, formatStatusDialogMessage } from "../shared/status";
+import { createAftSidebarSlot } from "./sidebar";
 
 // The TUI talks to the server plugin via AftRpcClient. The client reads the
 // JSON port file written by AftRpcServer ({ port, token }) and includes that
@@ -190,6 +192,17 @@ async function showStartupNotifications(api: TuiPluginApi): Promise<void> {
 }
 
 const tui: TuiPlugin = async (api) => {
+  // Sidebar slot: live status of search index, semantic index, and disk
+  // usage. See ./sidebar.tsx for the panel itself. Registered before the
+  // command palette entry so the sidebar is available immediately when the
+  // user opens their first session.
+  try {
+    api.slots.register(createAftSidebarSlot(api, packageJson.version));
+  } catch {
+    // Older OpenCode TUI hosts may not implement api.slots; fall through
+    // and keep the slash command working.
+  }
+
   api.command.register(() => [
     {
       title: "AFT: Status",

package/src/tui/sidebar.tsx

@@ -0,0 +1,331 @@
+/** @jsxImportSource @opentui/solid */
+// @ts-nocheck
+
+// AFT sidebar slot — mirrors opencode-magic-context's sidebar pattern.
+// Header with "AFT" badge + version, then live status of search and semantic
+// indexes plus their on-disk size. Refreshes on session change and on
+// session.updated/message.updated events with a small debounce, same as
+// magic-context, so the panel stays current without polling.
+
+import type { TuiPluginApi, TuiSlotPlugin, TuiThemeCurrent } from "@opencode-ai/plugin/tui";
+import { createEffect, createMemo, createSignal, on, onCleanup } from "solid-js";
+
+import { AftRpcClient } from "../shared/rpc-client";
+import { type AftStatusSnapshot, coerceAftStatus } from "../shared/status";
+
+const SINGLE_BORDER = { type: "single" } as any;
+const REFRESH_DEBOUNCE_MS = 200;
+// The sidebar polls the bridge as a backstop because not every state change
+// (e.g. semantic index transitioning from "loading" → "ready" mid-session)
+// emits a session/message event. 1.5s matches the /aft-status dialog cadence.
+const POLL_INTERVAL_MS = 1500;
+
+function formatBytes(n: number): string {
+  if (!Number.isFinite(n) || n <= 0) return "—";
+  if (n >= 1_073_741_824) return `${(n / 1_073_741_824).toFixed(1)} GB`;
+  if (n >= 1_048_576) return `${(n / 1_048_576).toFixed(1)} MB`;
+  if (n >= 1_024) return `${Math.round(n / 1_024)} KB`;
+  return `${n} B`;
+}
+
+function formatCount(n: number | null | undefined): string {
+  if (n == null || !Number.isFinite(n)) return "—";
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${Math.round(n / 1_000)}K`;
+  return String(n);
+}
+
+// Map index status → (label, theme color name). The label is what we want
+// the user to see; the color encodes severity so the eye lands on warnings.
+function statusDisplay(status: string): { label: string; tone: "ok" | "warn" | "err" | "muted" } {
+  switch (status) {
+    case "ready":
+      return { label: "ready", tone: "ok" };
+    case "loading":
+    case "building":
+      return { label: status, tone: "warn" };
+    case "failed":
+    case "error":
+      return { label: status, tone: "err" };
+    case "disabled":
+      return { label: "disabled", tone: "muted" };
+    default:
+      return { label: status || "unknown", tone: "muted" };
+  }
+}
+
+const StatRow = (props: {
+  theme: TuiThemeCurrent;
+  label: string;
+  value: string;
+  tone?: "ok" | "warn" | "err" | "muted" | "accent";
+}) => {
+  const fg = createMemo(() => {
+    switch (props.tone) {
+      case "ok":
+        return props.theme.success ?? props.theme.accent;
+      case "warn":
+        return props.theme.warning;
+      case "err":
+        return props.theme.error;
+      case "muted":
+        return props.theme.textMuted;
+      case "accent":
+        return props.theme.accent;
+      default:
+        return props.theme.text;
+    }
+  });
+
+  return (
+    <box width="100%" flexDirection="row" justifyContent="space-between">
+      <text fg={props.theme.textMuted}>{props.label}</text>
+      <text fg={fg()}>
+        <b>{props.value}</b>
+      </text>
+    </box>
+  );
+};
+
+const SectionHeader = (props: { theme: TuiThemeCurrent; title: string; marginTop?: number }) => (
+  <box width="100%" marginTop={props.marginTop ?? 1}>
+    <text fg={props.theme.text}>
+      <b>{props.title}</b>
+    </text>
+  </box>
+);
+
+// One RPC client per project directory — same pattern as the /aft-status
+// dialog handler in tui/index.tsx. Sharing the map avoids opening a second
+// connection just for the sidebar.
+const sidebarClients = new Map<string, AftRpcClient>();
+function getClient(directory: string): AftRpcClient {
+  let client = sidebarClients.get(directory);
+  if (client) return client;
+  const home = process.env.HOME || process.env.USERPROFILE || "";
+  const dataHome = process.env.XDG_DATA_HOME || `${home}/.local/share`;
+  const storageDir = `${dataHome}/opencode/storage/plugin/aft`;
+  client = new AftRpcClient(storageDir, directory);
+  sidebarClients.set(directory, client);
+  return client;
+}
+
+const SidebarContent = (props: {
+  api: TuiPluginApi;
+  sessionID: () => string;
+  theme: TuiThemeCurrent;
+  pluginVersion: string;
+}) => {
+  const [status, setStatus] = createSignal<AftStatusSnapshot | null>(null);
+  // Once a request is in flight, suppress any overlapping refresh so we
+  // don't open a thundering herd of RPCs on rapid event bursts.
+  let inflight = false;
+  let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+  let pollTimer: ReturnType<typeof setInterval> | undefined;
+
+  const refresh = async () => {
+    const sid = props.sessionID();
+    if (!sid) return;
+    if (inflight) return;
+    const directory = props.api.state.path.directory ?? "";
+    if (!directory) return;
+
+    inflight = true;
+    try {
+      const client = getClient(directory);
+      const response = await client.call("status", { sessionID: sid });
+      if (response && (response as Record<string, unknown>).success !== false) {
+        const snapshot = coerceAftStatus(response as Record<string, unknown>);
+        setStatus(snapshot);
+        try {
+          props.api.renderer.requestRender();
+        } catch {
+          // renderer may not be available during teardown; safe to ignore
+        }
+      }
+    } catch {
+      // RPC server may not be ready yet, or the bridge may be respawning
+      // after a binary swap — leave the previous snapshot visible rather
+      // than blanking the sidebar.
+    } finally {
+      inflight = false;
+    }
+  };
+
+  const scheduleRefresh = () => {
+    if (debounceTimer) clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+      debounceTimer = undefined;
+      void refresh();
+    }, REFRESH_DEBOUNCE_MS);
+  };
+
+  onCleanup(() => {
+    if (debounceTimer) clearTimeout(debounceTimer);
+    if (pollTimer) clearInterval(pollTimer);
+  });
+
+  // Refresh on session id change + initial load
+  createEffect(
+    on(props.sessionID, () => {
+      void refresh();
+    }),
+  );
+
+  // Wire live updates: session/message events are cheap signals that
+  // *something* AFT-relevant probably changed (formatted edit, lsp activity,
+  // index pre-warm completion). The status RPC is debounced so we don't
+  // recompute disk usage on every keystroke.
+  createEffect(
+    on(
+      props.sessionID,
+      (sessionID) => {
+        if (!sessionID) return;
+        const unsubs = [
+          props.api.event.on("message.updated", (event) => {
+            if (event.properties?.info?.sessionID !== sessionID) return;
+            scheduleRefresh();
+          }),
+          props.api.event.on("session.updated", (event) => {
+            if (event.properties?.info?.id !== sessionID) return;
+            scheduleRefresh();
+          }),
+        ];
+        // Background poller for state that doesn't emit session events
+        // (semantic index `loading` → `ready`, disk size growth during
+        // a background indexer rebuild). Self-cancelling on cleanup.
+        if (!pollTimer) {
+          pollTimer = setInterval(() => {
+            scheduleRefresh();
+          }, POLL_INTERVAL_MS);
+        }
+        onCleanup(() => {
+          for (const unsub of unsubs) {
+            try {
+              unsub();
+            } catch {
+              // best effort
+            }
+          }
+          if (pollTimer) {
+            clearInterval(pollTimer);
+            pollTimer = undefined;
+          }
+        });
+      },
+      { defer: false },
+    ),
+  );
+
+  const s = createMemo(() => status());
+
+  // Pre-compute display values so the JSX stays readable. createMemo for
+  // each derived field would be overkill — these are cheap derivations.
+  const searchStatus = () => statusDisplay(s()?.search_index?.status ?? "disabled");
+  const semanticStatus = () => statusDisplay(s()?.semantic_index?.status ?? "disabled");
+  const trigramBytes = () => s()?.disk?.trigram_disk_bytes ?? 0;
+  const semanticBytes = () => s()?.disk?.semantic_disk_bytes ?? 0;
+
+  return (
+    <box
+      width="100%"
+      flexDirection="column"
+      border={SINGLE_BORDER}
+      borderColor={props.theme.borderActive}
+      paddingTop={1}
+      paddingBottom={1}
+      paddingLeft={1}
+      paddingRight={1}
+    >
+      {/* Header: AFT badge + binary version */}
+      <box flexDirection="row" justifyContent="space-between" alignItems="center">
+        <box paddingLeft={1} paddingRight={1} backgroundColor={props.theme.accent}>
+          <text fg={props.theme.background}>
+            <b>AFT</b>
+          </text>
+        </box>
+        <text fg={props.theme.textMuted}>v{s()?.version ?? props.pluginVersion}</text>
+      </box>
+
+      {/* Search index */}
+      <SectionHeader theme={props.theme} title="Search Index" />
+      <StatRow
+        theme={props.theme}
+        label="Status"
+        value={searchStatus().label}
+        tone={searchStatus().tone}
+      />
+      {(s()?.search_index?.files ?? null) != null && (
+        <StatRow
+          theme={props.theme}
+          label="Files"
+          value={formatCount(s()!.search_index.files)}
+          tone="muted"
+        />
+      )}
+      <StatRow theme={props.theme} label="Disk" value={formatBytes(trigramBytes())} tone="muted" />
+
+      {/* Semantic index */}
+      <SectionHeader theme={props.theme} title="Semantic Index" />
+      <StatRow
+        theme={props.theme}
+        label="Status"
+        value={semanticStatus().label}
+        tone={semanticStatus().tone}
+      />
+      {/* When loading, magic-context-style progress hint helps users see
+          background work is making progress instead of stuck. */}
+      {s()?.semantic_index?.status === "loading" &&
+        s()?.semantic_index?.entries_total != null &&
+        s()!.semantic_index.entries_total! > 0 && (
+          <StatRow
+            theme={props.theme}
+            label="Progress"
+            value={`${formatCount(s()!.semantic_index.entries_done)} / ${formatCount(
+              s()!.semantic_index.entries_total,
+            )}`}
+            tone="warn"
+          />
+        )}
+      {(s()?.semantic_index?.entries ?? null) != null && (
+        <StatRow
+          theme={props.theme}
+          label="Entries"
+          value={formatCount(s()!.semantic_index.entries)}
+          tone="muted"
+        />
+      )}
+      <StatRow theme={props.theme} label="Disk" value={formatBytes(semanticBytes())} tone="muted" />
+
+      {/* Surface failures clearly so users know to act (install ONNX,
+          fix config, etc.) rather than silently leaving the panel "off". */}
+      {s()?.semantic_index?.status === "failed" && s()?.semantic_index?.error && (
+        <box marginTop={1} width="100%">
+          <text fg={props.theme.error}>⚠ {s()!.semantic_index.error}</text>
+        </box>
+      )}
+    </box>
+  );
+};
+
+export function createAftSidebarSlot(api: TuiPluginApi, pluginVersion: string): TuiSlotPlugin {
+  return {
+    // 150 matches magic-context's order — chosen so AFT renders below
+    // higher-priority panels but above default plugin slots. If both
+    // plugins are loaded together, magic-context will appear first.
+    order: 160,
+    slots: {
+      sidebar_content: (ctx, value) => {
+        const theme = createMemo(() => (ctx as any).theme.current);
+        return (
+          <SidebarContent
+            api={api}
+            sessionID={() => value.session_id}
+            theme={theme()}
+            pluginVersion={pluginVersion}
+          />
+        );
+      },
+    },
+  };
+}