@scrylog/cli 0.1.4 → 0.3.0

package/src/tui/App.tsx

@@ -0,0 +1,240 @@
+import { useKeyboard, useTerminalDimensions } from "@opentui/react";
+import { useEffect, useReducer, useRef, useState } from "react";
+import type { ScrylogConfig } from "../shared/config";
+import type { SessionModel, StoreEvent } from "../shared/types";
+import type { SessionListItem } from "../shared/session-view";
+import { applySessionFilters, buildRows, moveSelection, sessionAttachCommand, visibleRowWindow } from "./model";
+import { dashboardReducer, INITIAL_DASHBOARD_STATE } from "./state";
+import type { DaemonClient } from "./client";
+import { SessionsView } from "./components/SessionsView";
+import { UsageView } from "./components/UsageView";
+import { TabBar } from "./components/TabBar";
+import { KeyBar } from "./components/KeyBar";
+import { BindingsModal } from "./components/BindingsModal";
+import { DashboardHeader, dashboardHeaderHeight } from "./components/DashboardHeader";
+import { isInsideTmux } from "../shared/utils";
+import type { DaemonVersionMismatch } from "../shared/version";
+
+export interface AppOptions {
+  refreshMs: number;
+  includeUnknown?: boolean;
+}
+
+export interface AppProps {
+  client: DaemonClient;
+  options: AppOptions;
+  config: ScrylogConfig;
+  versionMismatch?: DaemonVersionMismatch;
+  onExit(): void;
+  onAttach(command: string[], sessionId: string): void;
+}
+
+export function App({ client, options, config, versionMismatch, onExit, onAttach }: AppProps) {
+  const { width, height } = useTerminalDimensions();
+  const paneHeight = Math.max(1, height - dashboardHeaderHeight(width) - 2);
+  const [state, dispatch] = useReducer(dashboardReducer, INITIAL_DASHBOARD_STATE);
+  const [spinnerFrame, setSpinnerFrame] = useState(0);
+  const stateRef = useRef(state);
+  const rowsRef = useRef<ReturnType<typeof buildRows>>([]);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const knownStatesRef = useRef(new Map<string, SessionModel["state"]>());
+  stateRef.current = state;
+
+  useEffect(() => {
+    let active = true;
+    const refreshSessions = async () => {
+      const [status, sessionData] = await Promise.all([
+        client.getStatusSummary(options.includeUnknown),
+        client.getSessions(options.includeUnknown),
+      ]);
+      if (!active) return;
+      if (!status || !sessionData) {
+        dispatch({ type: "connection", connected: false });
+        return;
+      }
+      knownStatesRef.current = new Map(sessionData.sessions.map((session) => [session.id, session.state]));
+      dispatch({ type: "sessions-loaded", sessions: sessionData.sessions, counts: status.counts });
+    };
+    const refreshAll = async () => {
+      const usage = await client.getUsage();
+      if (active && usage) dispatch({ type: "usage-loaded", usage });
+      await refreshSessions();
+    };
+    const scheduleRefresh = (immediate: boolean) => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      if (immediate || config.tui.pushDebounceMs <= 0) {
+        debounceRef.current = null;
+        void refreshSessions();
+        return;
+      }
+      debounceRef.current = setTimeout(() => {
+        debounceRef.current = null;
+        void refreshSessions();
+      }, config.tui.pushDebounceMs);
+    };
+    const onStoreEvent = (event: StoreEvent | { type: "connected" } | { type: "disconnected" }) => {
+      if (event.type === "connected") {
+        dispatch({ type: "connection", connected: true });
+        void refreshAll();
+      } else if (event.type === "disconnected") {
+        dispatch({ type: "connection", connected: false });
+      } else if (event.type === "usage:updated") {
+        dispatch({ type: "usage-loaded", usage: event.usage });
+      } else if (event.type === "session:added" || event.type === "session:removed") {
+        scheduleRefresh(true);
+      } else if (event.type === "session:updated") {
+        const known = knownStatesRef.current.get(event.session.id);
+        scheduleRefresh(known === undefined || known !== event.session.state);
+      }
+    };
+
+    void refreshAll();
+    const polling = setInterval(() => void refreshAll(), options.refreshMs);
+    const unsubscribe = config.tui.usePushUpdates ? client.subscribeEvents(onStoreEvent) : undefined;
+    return () => {
+      active = false;
+      clearInterval(polling);
+      unsubscribe?.();
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = null;
+    };
+  }, [client, config.tui.pushDebounceMs, config.tui.usePushUpdates, options.includeUnknown, options.refreshMs]);
+
+  useEffect(() => {
+    if (state.view !== "sessions") return;
+    const animation = setInterval(() => setSpinnerFrame((frame) => (frame + 1) % 10), 180);
+    return () => clearInterval(animation);
+  }, [state.view]);
+
+  const filtered = applySessionFilters(state.sessions, state.filters, config.tui.standaloneMaxAgeHours);
+  const rows = buildRows(filtered, width < 110);
+  rowsRef.current = rows;
+  const usagePaneRows = state.view === "sessions" && state.usage ? 3 : 0;
+  const visibleRows = visibleRowWindow(rows, state.selectedSessionId, Math.max(4, height - dashboardHeaderHeight(width) - usagePaneRows - (state.mode === "search" ? 8 : 5)));
+
+  const openDetail = async (session: SessionListItem | undefined) => {
+    if (!session) return;
+    const detail = await client.getSessionDetail(session.id) ?? ({ ...session } as SessionModel);
+    dispatch({ type: "detail", session: detail });
+  };
+
+  const attach = (session: SessionListItem | undefined) => {
+    if (!session) return;
+    const command = sessionAttachCommand(session, isInsideTmux());
+    if (!command) {
+      dispatch({
+        type: "message",
+        message: session.source === "herdr"
+          ? "Herdr attach is unavailable because this pane has no terminal ID."
+          : "Attach is only available for sessions running inside tmux or herdr.",
+      });
+      return;
+    }
+    onAttach(command, session.id);
+  };
+
+  useKeyboard((key) => {
+    const currentState = stateRef.current;
+    const currentSelected = currentState.sessions.find((session) => session.id === currentState.selectedSessionId);
+    if ((key.ctrl && key.name === "c") || (key.name === "q" && currentState.mode === "list")) return onExit();
+    if (currentState.mode === "search") {
+      if (key.name === "escape" || key.name === "return" || key.name === "enter") dispatch({ type: "close-overlay" });
+      return;
+    }
+    if (currentState.mode === "detail" || currentState.mode === "message" || currentState.mode === "bindings") {
+      if (key.name === "escape" || key.name === "q") dispatch({ type: "close-overlay" });
+      if (key.name === "t" && currentState.detail) attach(currentState.detail as SessionListItem);
+      return;
+    }
+    if (key.name === "tab") {
+      dispatch({ type: "view", view: key.shift ? "sessions" : currentState.view === "sessions" ? "usage" : "sessions" });
+      return;
+    }
+    if (key.name === "u") return dispatch({ type: "view", view: "usage" });
+    if (key.name === "s") return dispatch({ type: "view", view: "sessions" });
+    if (key.name === "r") {
+      void Promise.all([client.getStatusSummary(options.includeUnknown), client.getSessions(options.includeUnknown), client.getUsage()])
+        .then(([status, sessions, usage]) => {
+          if (status && sessions) dispatch({ type: "sessions-loaded", sessions: sessions.sessions, counts: status.counts });
+          if (usage) dispatch({ type: "usage-loaded", usage });
+        });
+      return;
+    }
+    if (key.name === "?") return dispatch({ type: "bindings" });
+    if (currentState.view !== "sessions") return;
+    if (key.name === "up" || key.name === "k") return dispatch({ type: "select", id: moveSelection(rowsRef.current, currentState.selectedSessionId, -1) });
+    if (key.name === "down" || key.name === "j") return dispatch({ type: "select", id: moveSelection(rowsRef.current, currentState.selectedSessionId, 1) });
+    if (key.name === "escape") return dispatch({ type: "select", id: undefined });
+    if (key.name === "return" || key.name === "enter") return void openDetail(currentSelected);
+    if (key.name === "t") return attach(currentSelected);
+    if (key.name === "/") return dispatch({ type: "search" });
+    if (key.name === "a") return dispatch({ type: "toggle-actionable" });
+    if (key.name === "f") return dispatch({ type: "cycle-filters" });
+  });
+
+  const filterSummary = [
+    state.filters.query ? `q=${state.filters.query}` : null,
+    state.filters.actionableOnly ? "actionable" : null,
+    state.filters.tool !== "all" ? `tool=${state.filters.tool}` : null,
+    state.filters.state !== "all" ? `state=${state.filters.state}` : null,
+  ].filter(Boolean).join(" ");
+  const selectedSession = state.sessions.find((session) => session.id === state.selectedSessionId);
+
+  return (
+    <box width="100%" height="100%" flexDirection="column">
+      <DashboardHeader
+        sessions={state.sessions}
+        connected={state.daemonConnected}
+        spinnerFrame={spinnerFrame}
+        width={width}
+        versionMismatch={versionMismatch}
+      />
+      <TabBar
+        view={state.view}
+        onSelect={(next) => dispatch({ type: "view", view: next })}
+      />
+      <box
+        position={state.view === "sessions" ? "relative" : "absolute"}
+        top={state.view === "sessions" ? 0 : height + 2}
+        width="100%"
+        height={paneHeight}
+      >
+        <SessionsView
+          rows={visibleRows}
+          sessions={state.sessions}
+          selectedSessionId={state.selectedSessionId}
+          filters={state.filters}
+          mode={state.mode}
+          detail={state.detail}
+          message={state.message}
+          usage={state.usage}
+          iconMode={config.tui.providerIcons}
+          spinnerFrame={spinnerFrame}
+          width={width}
+          interactive={state.mode === "list" && state.view === "sessions"}
+          onQueryChange={(query) => dispatch({ type: "query", query })}
+          onSearchSubmit={() => dispatch({ type: "close-overlay" })}
+          onSelectSession={(id) => dispatch({ type: "select", id })}
+          onOpenSessionDetail={(session) => void openDetail(session)}
+          onScrollSelection={(direction) => dispatch({ type: "select", id: moveSelection(rowsRef.current, stateRef.current.selectedSessionId, direction) })}
+        />
+      </box>
+      <box
+        position={state.view === "usage" ? "relative" : "absolute"}
+        top={state.view === "usage" ? 0 : height + 2}
+        width="100%"
+        height={paneHeight}
+      >
+        <UsageView usage={state.usage} width={width} iconMode={config.tui.providerIcons} hidden={state.view !== "usage"} />
+      </box>
+      <KeyBar
+        view={state.view}
+        width={width}
+        context={state.view === "sessions"
+          ? `${selectedSession ? `${selectedSession.tool} ${selectedSession.state} ${selectedSession.project?.compactLabel ?? selectedSession.id}` : "no selection"}${filterSummary ? `   ${filterSummary}` : ""}`
+          : undefined}
+      />
+      {state.mode === "bindings" && <BindingsModal width={width} iconMode={config.tui.providerIcons} />}
+    </box>
+  );
+}

package/src/tui/assets/providers/SOURCES.md

@@ -0,0 +1,21 @@
+# Provider artwork sources
+
+Retrieved from official provider properties. The images are bundled so the dashboard never fetches artwork at runtime.
+
+| File | Official source |
+| --- | --- |
+| `claude.png` | `https://assets-proxy.anthropic.com/claude-ai/v2/assets/v1/c129d018a-0ZbJsTbu.png` |
+| `opencode.png` | `https://opencode.ai/apple-touch-icon-v3.png` |
+| `openai.png` | OpenAI official app icon (`https://cdn.oaistatic.com/assets/apple-touch-icon-mz9nytnj.webp`, white tile with black Blossom from the official brand guidelines); the standalone mono Blossom SVG (`File:OpenAI_logo_2025_(symbol).svg`, Wikimedia Commons, PD-textlogo) served as design reference. Formerly `codex.png` (OpenAI Codex app art). |
+
+The `*-terminal.svg` files are editable 8x8, square integer-grid adaptations of those marks. Their generated `*-terminal.png` counterparts map directly to a compact 8x4-cell block target with square half-block pixels (2 pixel rows per cell), avoiding destructive downsampling and aspect distortion. Hand-drawn tool glyphs (no official small-mark equivalent; used for the 2x1-cell mini column icon in image-capable modes, replaced by a brand monogram in blocks mode):
+
+| File | Source |
+| --- | --- |
+| `copilot.svg` / `copilot.png` | Original 8x8 grid drawing modelled on GitHub Copilot's goggles mark |
+| `shell.svg` / `shell.png` | Original 8x8 grid drawing of a `>_` prompt glyph |
+| `unknown.svg` / `unknown.png` | Original 8x8 grid drawing of a `?` marker |
+
+They deliberately avoid gradients and antialiasing so Claude's inverted cream spark on an orange tile, OpenCode's light "O" plate, and OpenAI's black Blossom on a white tile remain identifiable after character-cell rendering. Square official artwork uses a separate 6x3-cell fitted target.
+
+Claude, OpenCode, Codex, OpenAI, Anthropic, and their marks belong to their respective owners.

package/src/tui/assets/providers/claude-terminal.svg

@@ -0,0 +1,62 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" shape-rendering="crispEdges">
+<rect x="1" y="0" width="1" height="1" fill="#d97757"/>
+<rect x="2" y="0" width="1" height="1" fill="#d97757"/>
+<rect x="5" y="0" width="1" height="1" fill="#d97757"/>
+<rect x="6" y="0" width="1" height="1" fill="#d97757"/>
+<rect x="0" y="1" width="1" height="1" fill="#d97757"/>
+<rect x="2" y="1" width="1" height="1" fill="#d97757"/>
+<rect x="5" y="1" width="1" height="1" fill="#d97757"/>
+<rect x="7" y="1" width="1" height="1" fill="#d97757"/>
+<rect x="0" y="2" width="1" height="1" fill="#d97757"/>
+<rect x="1" y="2" width="1" height="1" fill="#d97757"/>
+<rect x="6" y="2" width="1" height="1" fill="#d97757"/>
+<rect x="7" y="2" width="1" height="1" fill="#d97757"/>
+<rect x="0" y="3" width="1" height="1" fill="#d97757"/>
+<rect x="7" y="3" width="1" height="1" fill="#d97757"/>
+<rect x="0" y="4" width="1" height="1" fill="#d97757"/>
+<rect x="7" y="4" width="1" height="1" fill="#d97757"/>
+<rect x="0" y="5" width="1" height="1" fill="#d97757"/>
+<rect x="1" y="5" width="1" height="1" fill="#d97757"/>
+<rect x="6" y="5" width="1" height="1" fill="#d97757"/>
+<rect x="7" y="5" width="1" height="1" fill="#d97757"/>
+<rect x="0" y="6" width="1" height="1" fill="#d97757"/>
+<rect x="2" y="6" width="1" height="1" fill="#d97757"/>
+<rect x="5" y="6" width="1" height="1" fill="#d97757"/>
+<rect x="7" y="6" width="1" height="1" fill="#d97757"/>
+<rect x="1" y="7" width="1" height="1" fill="#d97757"/>
+<rect x="2" y="7" width="1" height="1" fill="#d97757"/>
+<rect x="5" y="7" width="1" height="1" fill="#d97757"/>
+<rect x="6" y="7" width="1" height="1" fill="#d97757"/>
+<rect x="3" y="0" width="1" height="1" fill="#f5f1e8"/>
+<rect x="4" y="0" width="1" height="1" fill="#f5f1e8"/>
+<rect x="1" y="1" width="1" height="1" fill="#f5f1e8"/>
+<rect x="3" y="1" width="1" height="1" fill="#f5f1e8"/>
+<rect x="4" y="1" width="1" height="1" fill="#f5f1e8"/>
+<rect x="6" y="1" width="1" height="1" fill="#f5f1e8"/>
+<rect x="2" y="2" width="1" height="1" fill="#f5f1e8"/>
+<rect x="3" y="2" width="1" height="1" fill="#f5f1e8"/>
+<rect x="4" y="2" width="1" height="1" fill="#f5f1e8"/>
+<rect x="5" y="2" width="1" height="1" fill="#f5f1e8"/>
+<rect x="1" y="3" width="1" height="1" fill="#f5f1e8"/>
+<rect x="2" y="3" width="1" height="1" fill="#f5f1e8"/>
+<rect x="3" y="3" width="1" height="1" fill="#f5f1e8"/>
+<rect x="4" y="3" width="1" height="1" fill="#f5f1e8"/>
+<rect x="5" y="3" width="1" height="1" fill="#f5f1e8"/>
+<rect x="6" y="3" width="1" height="1" fill="#f5f1e8"/>
+<rect x="1" y="4" width="1" height="1" fill="#f5f1e8"/>
+<rect x="2" y="4" width="1" height="1" fill="#f5f1e8"/>
+<rect x="3" y="4" width="1" height="1" fill="#f5f1e8"/>
+<rect x="4" y="4" width="1" height="1" fill="#f5f1e8"/>
+<rect x="5" y="4" width="1" height="1" fill="#f5f1e8"/>
+<rect x="6" y="4" width="1" height="1" fill="#f5f1e8"/>
+<rect x="2" y="5" width="1" height="1" fill="#f5f1e8"/>
+<rect x="3" y="5" width="1" height="1" fill="#f5f1e8"/>
+<rect x="4" y="5" width="1" height="1" fill="#f5f1e8"/>
+<rect x="5" y="5" width="1" height="1" fill="#f5f1e8"/>
+<rect x="1" y="6" width="1" height="1" fill="#f5f1e8"/>
+<rect x="3" y="6" width="1" height="1" fill="#f5f1e8"/>
+<rect x="4" y="6" width="1" height="1" fill="#f5f1e8"/>
+<rect x="6" y="6" width="1" height="1" fill="#f5f1e8"/>
+<rect x="3" y="7" width="1" height="1" fill="#f5f1e8"/>
+<rect x="4" y="7" width="1" height="1" fill="#f5f1e8"/>
+</svg>

package/src/tui/assets/providers/copilot.svg

@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" shape-rendering="crispEdges">
+<rect x="2" y="0" width="1" height="1" fill="#c8cdd8"/>
+<rect x="3" y="0" width="1" height="1" fill="#c8cdd8"/>
+<rect x="4" y="0" width="1" height="1" fill="#c8cdd8"/>
+<rect x="5" y="0" width="1" height="1" fill="#c8cdd8"/>
+<rect x="1" y="1" width="1" height="1" fill="#c8cdd8"/>
+<rect x="2" y="1" width="1" height="1" fill="#c8cdd8"/>
+<rect x="3" y="1" width="1" height="1" fill="#c8cdd8"/>
+<rect x="4" y="1" width="1" height="1" fill="#c8cdd8"/>
+<rect x="5" y="1" width="1" height="1" fill="#c8cdd8"/>
+<rect x="6" y="1" width="1" height="1" fill="#c8cdd8"/>
+<rect x="0" y="2" width="1" height="1" fill="#c8cdd8"/>
+<rect x="1" y="2" width="1" height="1" fill="#c8cdd8"/>
+<rect x="3" y="2" width="1" height="1" fill="#c8cdd8"/>
+<rect x="4" y="2" width="1" height="1" fill="#c8cdd8"/>
+<rect x="6" y="2" width="1" height="1" fill="#c8cdd8"/>
+<rect x="7" y="2" width="1" height="1" fill="#c8cdd8"/>
+<rect x="0" y="3" width="1" height="1" fill="#c8cdd8"/>
+<rect x="1" y="3" width="1" height="1" fill="#c8cdd8"/>
+<rect x="3" y="3" width="1" height="1" fill="#c8cdd8"/>
+<rect x="4" y="3" width="1" height="1" fill="#c8cdd8"/>
+<rect x="6" y="3" width="1" height="1" fill="#c8cdd8"/>
+<rect x="7" y="3" width="1" height="1" fill="#c8cdd8"/>
+<rect x="0" y="4" width="1" height="1" fill="#c8cdd8"/>
+<rect x="1" y="4" width="1" height="1" fill="#c8cdd8"/>
+<rect x="2" y="4" width="1" height="1" fill="#c8cdd8"/>
+<rect x="3" y="4" width="1" height="1" fill="#c8cdd8"/>
+<rect x="4" y="4" width="1" height="1" fill="#c8cdd8"/>
+<rect x="5" y="4" width="1" height="1" fill="#c8cdd8"/>
+<rect x="6" y="4" width="1" height="1" fill="#c8cdd8"/>
+<rect x="7" y="4" width="1" height="1" fill="#c8cdd8"/>
+<rect x="1" y="5" width="1" height="1" fill="#c8cdd8"/>
+<rect x="2" y="5" width="1" height="1" fill="#c8cdd8"/>
+<rect x="3" y="5" width="1" height="1" fill="#c8cdd8"/>
+<rect x="4" y="5" width="1" height="1" fill="#c8cdd8"/>
+<rect x="5" y="5" width="1" height="1" fill="#c8cdd8"/>
+<rect x="6" y="5" width="1" height="1" fill="#c8cdd8"/>
+<rect x="2" y="6" width="1" height="1" fill="#c8cdd8"/>
+<rect x="3" y="6" width="1" height="1" fill="#c8cdd8"/>
+<rect x="4" y="6" width="1" height="1" fill="#c8cdd8"/>
+<rect x="5" y="6" width="1" height="1" fill="#c8cdd8"/>
+<rect x="3" y="7" width="1" height="1" fill="#c8cdd8"/>
+<rect x="4" y="7" width="1" height="1" fill="#c8cdd8"/>
+</svg>

package/src/tui/assets/providers/openai-terminal.svg

@@ -0,0 +1,62 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" shape-rendering="crispEdges">
+<rect x="1" y="0" width="1" height="1" fill="#ffffff"/>
+<rect x="2" y="0" width="1" height="1" fill="#ffffff"/>
+<rect x="3" y="0" width="1" height="1" fill="#ffffff"/>
+<rect x="4" y="0" width="1" height="1" fill="#ffffff"/>
+<rect x="5" y="0" width="1" height="1" fill="#ffffff"/>
+<rect x="6" y="0" width="1" height="1" fill="#ffffff"/>
+<rect x="0" y="1" width="1" height="1" fill="#ffffff"/>
+<rect x="1" y="1" width="1" height="1" fill="#ffffff"/>
+<rect x="6" y="1" width="1" height="1" fill="#ffffff"/>
+<rect x="7" y="1" width="1" height="1" fill="#ffffff"/>
+<rect x="0" y="2" width="1" height="1" fill="#ffffff"/>
+<rect x="3" y="2" width="1" height="1" fill="#ffffff"/>
+<rect x="4" y="2" width="1" height="1" fill="#ffffff"/>
+<rect x="7" y="2" width="1" height="1" fill="#ffffff"/>
+<rect x="0" y="3" width="1" height="1" fill="#ffffff"/>
+<rect x="2" y="3" width="1" height="1" fill="#ffffff"/>
+<rect x="5" y="3" width="1" height="1" fill="#ffffff"/>
+<rect x="7" y="3" width="1" height="1" fill="#ffffff"/>
+<rect x="0" y="4" width="1" height="1" fill="#ffffff"/>
+<rect x="2" y="4" width="1" height="1" fill="#ffffff"/>
+<rect x="5" y="4" width="1" height="1" fill="#ffffff"/>
+<rect x="7" y="4" width="1" height="1" fill="#ffffff"/>
+<rect x="0" y="5" width="1" height="1" fill="#ffffff"/>
+<rect x="3" y="5" width="1" height="1" fill="#ffffff"/>
+<rect x="4" y="5" width="1" height="1" fill="#ffffff"/>
+<rect x="7" y="5" width="1" height="1" fill="#ffffff"/>
+<rect x="0" y="6" width="1" height="1" fill="#ffffff"/>
+<rect x="1" y="6" width="1" height="1" fill="#ffffff"/>
+<rect x="6" y="6" width="1" height="1" fill="#ffffff"/>
+<rect x="7" y="6" width="1" height="1" fill="#ffffff"/>
+<rect x="1" y="7" width="1" height="1" fill="#ffffff"/>
+<rect x="2" y="7" width="1" height="1" fill="#ffffff"/>
+<rect x="3" y="7" width="1" height="1" fill="#ffffff"/>
+<rect x="4" y="7" width="1" height="1" fill="#ffffff"/>
+<rect x="5" y="7" width="1" height="1" fill="#ffffff"/>
+<rect x="6" y="7" width="1" height="1" fill="#ffffff"/>
+<rect x="2" y="1" width="1" height="1" fill="#000000"/>
+<rect x="3" y="1" width="1" height="1" fill="#000000"/>
+<rect x="4" y="1" width="1" height="1" fill="#000000"/>
+<rect x="5" y="1" width="1" height="1" fill="#000000"/>
+<rect x="1" y="2" width="1" height="1" fill="#000000"/>
+<rect x="2" y="2" width="1" height="1" fill="#000000"/>
+<rect x="5" y="2" width="1" height="1" fill="#000000"/>
+<rect x="6" y="2" width="1" height="1" fill="#000000"/>
+<rect x="1" y="3" width="1" height="1" fill="#000000"/>
+<rect x="3" y="3" width="1" height="1" fill="#000000"/>
+<rect x="4" y="3" width="1" height="1" fill="#000000"/>
+<rect x="6" y="3" width="1" height="1" fill="#000000"/>
+<rect x="1" y="4" width="1" height="1" fill="#000000"/>
+<rect x="3" y="4" width="1" height="1" fill="#000000"/>
+<rect x="4" y="4" width="1" height="1" fill="#000000"/>
+<rect x="6" y="4" width="1" height="1" fill="#000000"/>
+<rect x="1" y="5" width="1" height="1" fill="#000000"/>
+<rect x="2" y="5" width="1" height="1" fill="#000000"/>
+<rect x="5" y="5" width="1" height="1" fill="#000000"/>
+<rect x="6" y="5" width="1" height="1" fill="#000000"/>
+<rect x="2" y="6" width="1" height="1" fill="#000000"/>
+<rect x="3" y="6" width="1" height="1" fill="#000000"/>
+<rect x="4" y="6" width="1" height="1" fill="#000000"/>
+<rect x="5" y="6" width="1" height="1" fill="#000000"/>
+</svg>

package/src/tui/assets/providers/opencode-terminal.svg

@@ -0,0 +1,62 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" shape-rendering="crispEdges">
+<rect x="1" y="0" width="1" height="1" fill="#111111"/>
+<rect x="2" y="0" width="1" height="1" fill="#111111"/>
+<rect x="3" y="0" width="1" height="1" fill="#111111"/>
+<rect x="4" y="0" width="1" height="1" fill="#111111"/>
+<rect x="5" y="0" width="1" height="1" fill="#111111"/>
+<rect x="6" y="0" width="1" height="1" fill="#111111"/>
+<rect x="0" y="1" width="1" height="1" fill="#111111"/>
+<rect x="7" y="1" width="1" height="1" fill="#111111"/>
+<rect x="0" y="2" width="1" height="1" fill="#111111"/>
+<rect x="3" y="2" width="1" height="1" fill="#111111"/>
+<rect x="4" y="2" width="1" height="1" fill="#111111"/>
+<rect x="7" y="2" width="1" height="1" fill="#111111"/>
+<rect x="0" y="3" width="1" height="1" fill="#111111"/>
+<rect x="3" y="3" width="1" height="1" fill="#111111"/>
+<rect x="4" y="3" width="1" height="1" fill="#111111"/>
+<rect x="7" y="3" width="1" height="1" fill="#111111"/>
+<rect x="0" y="4" width="1" height="1" fill="#111111"/>
+<rect x="3" y="4" width="1" height="1" fill="#111111"/>
+<rect x="4" y="4" width="1" height="1" fill="#111111"/>
+<rect x="7" y="4" width="1" height="1" fill="#111111"/>
+<rect x="0" y="5" width="1" height="1" fill="#111111"/>
+<rect x="3" y="5" width="1" height="1" fill="#111111"/>
+<rect x="4" y="5" width="1" height="1" fill="#111111"/>
+<rect x="7" y="5" width="1" height="1" fill="#111111"/>
+<rect x="0" y="6" width="1" height="1" fill="#111111"/>
+<rect x="7" y="6" width="1" height="1" fill="#111111"/>
+<rect x="1" y="7" width="1" height="1" fill="#111111"/>
+<rect x="2" y="7" width="1" height="1" fill="#111111"/>
+<rect x="3" y="7" width="1" height="1" fill="#111111"/>
+<rect x="4" y="7" width="1" height="1" fill="#111111"/>
+<rect x="5" y="7" width="1" height="1" fill="#111111"/>
+<rect x="6" y="7" width="1" height="1" fill="#111111"/>
+<rect x="1" y="1" width="1" height="1" fill="#f3f3f3"/>
+<rect x="2" y="1" width="1" height="1" fill="#f3f3f3"/>
+<rect x="3" y="1" width="1" height="1" fill="#f3f3f3"/>
+<rect x="4" y="1" width="1" height="1" fill="#f3f3f3"/>
+<rect x="5" y="1" width="1" height="1" fill="#f3f3f3"/>
+<rect x="6" y="1" width="1" height="1" fill="#f3f3f3"/>
+<rect x="1" y="2" width="1" height="1" fill="#f3f3f3"/>
+<rect x="2" y="2" width="1" height="1" fill="#f3f3f3"/>
+<rect x="5" y="2" width="1" height="1" fill="#f3f3f3"/>
+<rect x="6" y="2" width="1" height="1" fill="#f3f3f3"/>
+<rect x="1" y="3" width="1" height="1" fill="#f3f3f3"/>
+<rect x="2" y="3" width="1" height="1" fill="#f3f3f3"/>
+<rect x="5" y="3" width="1" height="1" fill="#f3f3f3"/>
+<rect x="6" y="3" width="1" height="1" fill="#f3f3f3"/>
+<rect x="1" y="4" width="1" height="1" fill="#f3f3f3"/>
+<rect x="2" y="4" width="1" height="1" fill="#f3f3f3"/>
+<rect x="5" y="4" width="1" height="1" fill="#f3f3f3"/>
+<rect x="6" y="4" width="1" height="1" fill="#f3f3f3"/>
+<rect x="1" y="5" width="1" height="1" fill="#f3f3f3"/>
+<rect x="2" y="5" width="1" height="1" fill="#f3f3f3"/>
+<rect x="5" y="5" width="1" height="1" fill="#f3f3f3"/>
+<rect x="6" y="5" width="1" height="1" fill="#f3f3f3"/>
+<rect x="1" y="6" width="1" height="1" fill="#f3f3f3"/>
+<rect x="2" y="6" width="1" height="1" fill="#f3f3f3"/>
+<rect x="3" y="6" width="1" height="1" fill="#f3f3f3"/>
+<rect x="4" y="6" width="1" height="1" fill="#f3f3f3"/>
+<rect x="5" y="6" width="1" height="1" fill="#f3f3f3"/>
+<rect x="6" y="6" width="1" height="1" fill="#f3f3f3"/>
+</svg>

package/src/tui/assets/providers/shell.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" shape-rendering="crispEdges">
+<rect x="0" y="0" width="1" height="1" fill="#c8cdd8"/>
+<rect x="0" y="1" width="1" height="1" fill="#c8cdd8"/>
+<rect x="1" y="1" width="1" height="1" fill="#c8cdd8"/>
+<rect x="0" y="2" width="1" height="1" fill="#c8cdd8"/>
+<rect x="1" y="2" width="1" height="1" fill="#c8cdd8"/>
+<rect x="2" y="2" width="1" height="1" fill="#c8cdd8"/>
+<rect x="0" y="3" width="1" height="1" fill="#c8cdd8"/>
+<rect x="1" y="3" width="1" height="1" fill="#c8cdd8"/>
+<rect x="2" y="3" width="1" height="1" fill="#c8cdd8"/>
+<rect x="3" y="3" width="1" height="1" fill="#c8cdd8"/>
+<rect x="0" y="4" width="1" height="1" fill="#c8cdd8"/>
+<rect x="1" y="4" width="1" height="1" fill="#c8cdd8"/>
+<rect x="2" y="4" width="1" height="1" fill="#c8cdd8"/>
+<rect x="0" y="5" width="1" height="1" fill="#c8cdd8"/>
+<rect x="1" y="5" width="1" height="1" fill="#c8cdd8"/>
+<rect x="0" y="6" width="1" height="1" fill="#c8cdd8"/>
+<rect x="3" y="7" width="1" height="1" fill="#c8cdd8"/>
+<rect x="4" y="7" width="1" height="1" fill="#c8cdd8"/>
+<rect x="5" y="7" width="1" height="1" fill="#c8cdd8"/>
+<rect x="6" y="7" width="1" height="1" fill="#c8cdd8"/>
+<rect x="7" y="7" width="1" height="1" fill="#c8cdd8"/>
+</svg>

package/src/tui/assets/providers/unknown.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" shape-rendering="crispEdges">
+<rect x="1" y="0" width="1" height="1" fill="#8b93a7"/>
+<rect x="2" y="0" width="1" height="1" fill="#8b93a7"/>
+<rect x="3" y="0" width="1" height="1" fill="#8b93a7"/>
+<rect x="4" y="0" width="1" height="1" fill="#8b93a7"/>
+<rect x="0" y="1" width="1" height="1" fill="#8b93a7"/>
+<rect x="1" y="1" width="1" height="1" fill="#8b93a7"/>
+<rect x="4" y="1" width="1" height="1" fill="#8b93a7"/>
+<rect x="5" y="1" width="1" height="1" fill="#8b93a7"/>
+<rect x="0" y="2" width="1" height="1" fill="#8b93a7"/>
+<rect x="1" y="2" width="1" height="1" fill="#8b93a7"/>
+<rect x="4" y="2" width="1" height="1" fill="#8b93a7"/>
+<rect x="5" y="2" width="1" height="1" fill="#8b93a7"/>
+<rect x="2" y="3" width="1" height="1" fill="#8b93a7"/>
+<rect x="3" y="3" width="1" height="1" fill="#8b93a7"/>
+<rect x="4" y="3" width="1" height="1" fill="#8b93a7"/>
+<rect x="2" y="4" width="1" height="1" fill="#8b93a7"/>
+<rect x="3" y="4" width="1" height="1" fill="#8b93a7"/>
+<rect x="2" y="5" width="1" height="1" fill="#8b93a7"/>
+<rect x="3" y="5" width="1" height="1" fill="#8b93a7"/>
+<rect x="2" y="7" width="1" height="1" fill="#8b93a7"/>
+<rect x="3" y="7" width="1" height="1" fill="#8b93a7"/>
+</svg>