@scrylog/cli 0.2.0 → 0.3.0

package/src/tui/components/KeyBar.tsx

@@ -0,0 +1,67 @@
+import { TextAttributes } from "@opentui/core";
+import { truncate } from "../../shared/utils";
+import type { DashboardView } from "../model";
+import { contextBindings, essentialBindings } from "../keybindings";
+import { BRAND } from "../theme";
+
+const KEY_COLOR = BRAND.primary;
+const DESCRIPTION_COLOR = BRAND.grey;
+const SEPARATOR = " · ";
+
+function KeyBarItem({ binding, separator }: { binding: { key: string; description: string }; separator?: string }) {
+  return (
+    <box flexDirection="row" height={1} flexShrink={0} gap={1}>
+      <text fg={KEY_COLOR} attributes={TextAttributes.BOLD} content={binding.key} />
+      <text fg={DESCRIPTION_COLOR} content={binding.description} />
+      {separator && <text fg={DESCRIPTION_COLOR} content={separator} />}
+    </box>
+  );
+}
+
+export function KeyBar({
+  view,
+  width,
+  context,
+}: {
+  view: DashboardView;
+  width: number;
+  context?: string;
+}) {
+  const bindings = contextBindings(view).filter((binding) => binding.footer !== false);
+  const essentials = essentialBindings(view).filter((binding) => binding.footer !== false);
+  const narrow = width < 110;
+  const candidates = narrow ? essentials : bindings;
+  const contextSuffix = context ? `${SEPARATOR}${context}` : "";
+  const maxHidden = Math.max(0, bindings.length - essentials.length);
+  const indicatorWidth = narrow && maxHidden > 0 ? SEPARATOR.length + `+${maxHidden} more (?)`.length : 0;
+  const budget = Math.max(0, width - 2 - contextSuffix.length - indicatorWidth);
+
+  const items: { key: string; description: string }[] = [];
+  let used = 0;
+  for (const binding of candidates) {
+    const itemWidth = binding.key.length + 1 + binding.description.length + (items.length > 0 ? SEPARATOR.length : 0);
+    if (items.length > 0 && used + itemWidth > budget) break;
+    items.push(binding);
+    used += itemWidth;
+  }
+
+  const hidden = bindings.length - items.length;
+  const indicator = hidden > 0 ? `+${hidden} more (?)` : null;
+
+  return (
+    <box height={1} flexDirection="row" width={Math.max(1, width - 1)} paddingX={1} flexShrink={0}>
+      {items.map((binding, index) => (
+        <KeyBarItem key={binding.key} binding={binding} separator={index < items.length - 1 ? SEPARATOR : undefined} />
+      ))}
+      {indicator && <text fg={DESCRIPTION_COLOR} content={`${SEPARATOR}${indicator}`} />}
+      {context && (
+        <text
+          flexGrow={1}
+          fg={DESCRIPTION_COLOR}
+          content={truncate(contextSuffix, Math.max(1, width - 2 - used))}
+          truncate
+        />
+      )}
+    </box>
+  );
+}

package/src/tui/components/SessionDetailModal.tsx

@@ -0,0 +1,169 @@
+import { TextAttributes } from "@opentui/core";
+import type { SessionModel } from "../../shared/types";
+import type { TuiConfig } from "../../shared/config";
+import { formatDuration, truncate } from "../../shared/utils";
+import { BRAND } from "../theme";
+import { STATE_COLORS } from "../model";
+import { providerAccentColor, providerVisual, ProviderIcon } from "./UsageView";
+import { MINI_ICON_SIZE, isImageIconMode, toolProviderKey } from "./tool-icons";
+
+const LABEL_WIDTH = 12;
+
+interface DetailRow {
+  label: string;
+  value: string;
+  color?: string;
+}
+
+function formatRelativeTime(timestamp: number, now = Date.now()): string {
+  const seconds = Math.max(1, Math.round((now - timestamp) / 1000));
+  if (seconds > 86400) return `${Math.floor(seconds / 86400)}d ago`;
+  if (seconds > 3600) return `${Math.floor(seconds / 3600)}h ago`;
+  if (seconds > 60) return `${Math.floor(seconds / 60)}m ago`;
+  return "just now";
+}
+
+function buildInfoRows(session: SessionModel): DetailRow[] {
+  const rows: DetailRow[] = [];
+  rows.push({ label: "id", value: session.id });
+  rows.push({ label: "state", value: `${session.state} (${formatDuration(session.stableForMs ?? 0)})`, color: STATE_COLORS[session.state] ?? BRAND.fallback });
+  rows.push({ label: "tool", value: session.tool });
+  rows.push({ label: "source", value: `${session.source}${session.detectionSource ? ` / ${session.detectionSource}` : ""}` });
+  if (session.project?.displayName) rows.push({ label: "project", value: session.project.displayName });
+  if (session.project?.isGitRepository && session.project?.branch) {
+    rows.push({ label: "git", value: session.project.branch, color: BRAND.accentBlue });
+  }
+  if (session.currentPath) rows.push({ label: "path", value: session.currentPath });
+  if (session.summary) rows.push({ label: "summary", value: session.summary });
+  rows.push({ label: "activity", value: formatRelativeTime(session.lastActivity) });
+  if (session.processChain?.length) {
+    rows.push({ label: "command", value: session.processChain.join(" → "), color: BRAND.grey });
+  }
+  if (session.tmux) {
+    rows.push({ label: "tmux", value: `${session.tmux.session}:${session.tmux.window}.${session.tmux.pane}`, color: BRAND.accentBlue });
+    if (session.tmux.windowName) rows.push({ label: "window", value: session.tmux.windowName });
+  }
+  if (session.herdr) {
+    const herdr = session.herdr;
+    if (herdr.workspace) rows.push({ label: "workspace", value: herdr.workspace, color: BRAND.accentBlue });
+    if (herdr.tab) rows.push({ label: "tab", value: herdr.tab });
+    if (herdr.name) rows.push({ label: "pane", value: herdr.name });
+    if (herdr.agent) {
+      rows.push({ label: "agent", value: herdr.agent + (herdr.agentStatus ? ` (${herdr.agentStatus})` : ""), color: BRAND.accentBlue });
+    }
+  }
+  if (session.opencode) {
+    rows.push({ label: "instance", value: session.opencode.instanceUrl, color: BRAND.grey });
+  }
+  if (session.claude?.permissionMode) rows.push({ label: "perm mode", value: session.claude.permissionMode });
+  if (session.codex?.model) rows.push({ label: "model", value: session.codex.model });
+  if (session.codex?.permissionMode) rows.push({ label: "perm mode", value: session.codex.permissionMode });
+  if (session.parentSessionId) rows.push({ label: "parent", value: session.parentSessionId });
+  if (session.childSessionIds?.length) rows.push({ label: "children", value: String(session.childSessionIds.length) });
+  return rows;
+}
+
+export function SessionDetailModal(props: {
+  detail: SessionModel;
+  iconMode: TuiConfig["providerIcons"];
+  width: number;
+}) {
+  const { detail } = props;
+  const toolMode = isImageIconMode(props.iconMode) ? "icons" : props.iconMode === "text" ? "text" : "monogram";
+  const toolKey = toolProviderKey(detail.tool);
+  const stateColor = STATE_COLORS[detail.state] ?? BRAND.fallback;
+  const modalWidth = Math.max(40, Math.floor(props.width * 0.9));
+  const innerWidth = Math.max(20, modalWidth - 4);
+  const titleWidth = Math.max(10, innerWidth - 12);
+
+  const infoRows = buildInfoRows(detail);
+  const reasonRows = [
+    ...(detail.toolReasons ?? []).map((reason) => ({ kind: "tool" as const, value: `${reason.label} — ${reason.detail}` })),
+    ...(detail.stateReasons ?? []).map((reason) => ({ kind: "state" as const, value: `${reason.label} — ${reason.detail}` })),
+  ];
+  const longestValue = Math.max(
+    0,
+    ...infoRows.map((row) => row.value.length),
+    ...reasonRows.map((reason) => reason.value.length),
+  );
+  const tableWidth = Math.max(innerWidth, LABEL_WIDTH + 2 + longestValue);
+  const tableRule = `${"─".repeat(LABEL_WIDTH)}┼${"─".repeat(tableWidth - LABEL_WIDTH - 1)}`;
+
+  return (
+    <box
+      position="absolute"
+      top="5%"
+      left="5%"
+      width="90%"
+      height="90%"
+      title="Session detail"
+      border
+      borderColor={BRAND.primary}
+      backgroundColor={BRAND.surface}
+      flexDirection="column"
+      padding={1}
+      zIndex={10}
+    >
+      <box flexGrow={1} overflow="hidden" flexDirection="column">
+        <scrollbox flexGrow={1} height="100%" scrollY scrollX focused>
+          <box flexDirection="column">
+        <box flexDirection="row" height={1}>
+          {toolMode === "icons" && toolKey ? (
+            <>
+              <ProviderIcon provider={toolKey} mode={props.iconMode} size={MINI_ICON_SIZE} />
+              <text width={1} content=" " />
+              <text
+                fg={providerAccentColor(toolKey)}
+                attributes={TextAttributes.BOLD}
+                content={providerVisual(toolKey).short}
+              />
+            </>
+          ) : (
+            <text
+              fg={toolKey ? providerAccentColor(toolKey) : BRAND.fallback}
+              attributes={TextAttributes.BOLD}
+              content={toolKey ? providerVisual(toolKey).short : truncate(detail.tool, 8)}
+            />
+          )}
+          <text width={1} content=" " />
+          <text
+            fg={BRAND.fallback}
+            attributes={TextAttributes.BOLD}
+            content={truncate(detail.project?.displayName ?? detail.id, titleWidth)}
+            truncate
+          />
+          <text fg={BRAND.grey} content="  ·  " />
+          <text fg={stateColor} attributes={TextAttributes.BOLD} content={detail.state} />
+        </box>
+        <box height={1} flexDirection="row"><text fg={BRAND.border} content={tableRule} /></box>
+        {infoRows.map((row, index) => (
+          <box key={row.label} flexDirection="column">
+            <box flexDirection="row" height={1}>
+              <text width={LABEL_WIDTH} fg={BRAND.grey} content={row.label} />
+              <text width={1} fg={BRAND.border} content="│" />
+              <text width={1} content=" " />
+              <text width={row.value.length} fg={row.color ?? BRAND.fallback} content={row.value} />
+            </box>
+            <box height={1} flexDirection="row"><text fg={BRAND.border} content={tableRule} /></box>
+            {index === infoRows.length - 1 && reasonRows.length > 0 && <text content="" height={1} />}
+          </box>
+        ))}
+        {reasonRows.length > 0 && <text fg={BRAND.grey} attributes={TextAttributes.BOLD} content="Classification" />}
+        {reasonRows.map((reason, index) => (
+          <box key={`${reason.kind}:${reason.value}:${index}`} flexDirection="column">
+            <box flexDirection="row" height={1}>
+              <text width={LABEL_WIDTH} fg={BRAND.grey} content={reason.kind} />
+              <text width={1} fg={BRAND.border} content="│" />
+              <text width={1} content=" " />
+              <text width={reason.value.length} fg={BRAND.fallback} content={reason.value} />
+            </box>
+            <box height={1} flexDirection="row"><text fg={BRAND.border} content={tableRule} /></box>
+          </box>
+        ))}
+          </box>
+        </scrollbox>
+      </box>
+      <text height={1} flexShrink={0} fg={BRAND.grey} content="←→ scroll · q/Esc close · t attach" />
+    </box>
+  );
+}

package/src/tui/components/SessionsView.tsx

@@ -0,0 +1,184 @@
+import { TextAttributes, type MouseEvent } from "@opentui/core";
+import { useRef } from "react";
+import type { TuiConfig } from "../../shared/config";
+import type { SessionModel } from "../../shared/types";
+import type { SessionListItem } from "../../shared/session-view";
+import type { UsageState } from "../../usage/types";
+import { UsageSummaryPane } from "./UsageSummaryPane";
+import { providerAccentColor, providerVisual, ProviderIcon } from "./UsageView";
+import { SessionDetailModal } from "./SessionDetailModal";
+import { MINI_ICON_SIZE, isImageIconMode, toolProviderKey } from "./tool-icons";
+import { truncate } from "../../shared/utils";
+import { BRAND } from "../theme";
+import {
+  STATE_COLORS,
+  activeChildCounts,
+  formatStatusCell,
+  formatTargetLabel,
+  sessionColumnWidths,
+  type DashboardFilters,
+  type DashboardMode,
+  type DashboardRow,
+  type SessionToolMode,
+} from "../model";
+
+interface SessionsViewProps {
+  rows: DashboardRow[];
+  sessions: SessionListItem[];
+  selectedSessionId?: string;
+  filters: DashboardFilters;
+  mode: DashboardMode;
+  detail?: SessionModel;
+  message?: string;
+  usage?: UsageState;
+  iconMode: TuiConfig["providerIcons"];
+  spinnerFrame: number;
+  width: number;
+  interactive?: boolean;
+  onQueryChange(query: string): void;
+  onSearchSubmit(): void;
+  onSelectSession?(sessionId: string): void;
+  onOpenSessionDetail?(session: SessionListItem): void;
+  onScrollSelection?(direction: 1 | -1): void;
+}
+
+export function SessionsView(props: SessionsViewProps) {
+  const { width } = props;
+  const narrow = width < 110;
+  const toolMode: SessionToolMode = isImageIconMode(props.iconMode) ? "icons" : props.iconMode === "text" ? "text" : "monogram";
+  const childCounts = activeChildCounts(props.sessions);
+  // Smallest tool column that fits the widest rendered content: only relevant
+  // when the summary column is gone (width < 100).
+  let toolContentWidth = 0;
+  if (narrow && width < 100) {
+    for (const row of props.rows) {
+      if (row.kind !== "session") continue;
+      const badgeValue = childCounts.get(row.session.id) ?? 0;
+      const badgeText = badgeValue > 0 ? `[+${badgeValue}]` : "";
+      let len: number;
+      if (toolMode === "monogram") {
+        const key = toolProviderKey(row.session.tool);
+        const short = key ? providerVisual(key).short.length : row.session.tool.length;
+        len = short + (badgeText ? badgeText.length + 1 : 0);
+      } else if (toolMode === "icons") {
+        len = MINI_ICON_SIZE.width + (badgeText ? badgeText.length + 1 : 0);
+      } else {
+        len = row.session.tool.length + (badgeText ? badgeText.length + 1 : 0);
+      }
+      toolContentWidth = Math.max(toolContentWidth, len);
+    }
+  }
+  const columns = sessionColumnWidths(width, toolMode, toolContentWidth);
+  const contentWidth = Math.max(20, width - 4);
+  const lastClickRef = useRef<{ id: string; time: number } | undefined>(undefined);
+
+  const handleRowMouseUp = props.interactive && props.onSelectSession
+    ? (session: SessionListItem) => (event: MouseEvent) => {
+        if (event.button !== 0) return;
+        const now = Date.now();
+        const last = lastClickRef.current;
+        if (last && last.id === session.id && now - last.time < 500) {
+          lastClickRef.current = undefined;
+          props.onOpenSessionDetail?.(session);
+          return;
+        }
+        lastClickRef.current = { id: session.id, time: now };
+        props.onSelectSession!(session.id);
+      }
+    : undefined;
+
+  const handleMouseScroll = props.interactive && props.onScrollSelection
+    ? (event: MouseEvent) => {
+        props.onScrollSelection!(event.scroll?.direction === "down" ? 1 : -1);
+      }
+    : undefined;
+
+  return (
+    <box position="relative" flexDirection="column" flexGrow={1}>
+      {props.mode === "search" && (
+        <box height={3} border borderColor={BRAND.primary} title="Search" paddingX={1}>
+          <input
+            focused
+            value={props.filters.query}
+            placeholder="session, project, tool..."
+            onInput={props.onQueryChange}
+            onSubmit={props.onSearchSubmit}
+          />
+        </box>
+      )}
+      <box
+        border
+        borderColor={BRAND.border}
+        flexDirection="column"
+        flexGrow={1}
+        paddingX={1}
+        onMouseScroll={handleMouseScroll}
+      >
+        <box flexDirection="row" height={1}>
+          <text width={2} content="" />
+          <text width={columns.session} attributes={TextAttributes.BOLD} content="Session" />
+          <text width={columns.state} attributes={TextAttributes.BOLD} content="St" />
+          <text width={columns.tool} attributes={TextAttributes.BOLD} content={isImageIconMode(props.iconMode) ? "" : "Tool"} truncate />
+          {columns.summary > 0 && <text width={columns.summary} attributes={TextAttributes.BOLD} content="Summary" />}
+        </box>
+        {props.rows.length === 0 && <text fg={BRAND.grey} content="No sessions detected" />}
+        {props.rows.map((row) => {
+          if (row.kind === "gap") return <text key={row.projectKey} content="" />;
+          if (row.kind === "project-header") {
+            const label = truncate(row.projectName, Math.max(8, columns.session - 6));
+            return <text key={`header:${row.projectKey}`} fg={BRAND.grey} attributes={TextAttributes.BOLD} content={`  == ${label.padEnd(Math.max(8, columns.session - 6))} ==`} />;
+          }
+          const selected = row.session.id === props.selectedSessionId;
+          const status = formatStatusCell(row.session, props.spinnerFrame);
+          const childCount = narrow ? childCounts.get(row.session.id) ?? 0 : 0;
+          const badge = childCount > 0 ? `[+${childCount}]` : "";
+          const toolKey = toolProviderKey(row.session.tool);
+          const toolContent = badge
+            ? `${row.session.tool.slice(0, Math.max(1, columns.tool - badge.length - 1))} ${badge}`
+            : row.session.tool;
+          return (
+            <box
+              key={row.session.id}
+              backgroundColor={selected ? BRAND.selection : undefined}
+              flexDirection="row"
+              height={1}
+              onMouseUp={handleRowMouseUp?.(row.session)}
+            >
+              <text width={2} attributes={selected ? TextAttributes.BOLD : TextAttributes.NONE} content={selected ? "> " : "  "} />
+              <text width={columns.session} fg={STATE_COLORS[row.session.state] ?? BRAND.fallback} content={truncate(formatTargetLabel(row.session, narrow), columns.session)} truncate />
+              <text width={columns.state} fg={STATE_COLORS[row.session.state] ?? BRAND.fallback} attributes={TextAttributes.BOLD} content={truncate(status, columns.state)} truncate />
+              {toolMode === "icons" && toolKey ? (
+                <>
+                  <ProviderIcon provider={toolKey} mode={props.iconMode} size={MINI_ICON_SIZE} />
+                  <text width={columns.tool - MINI_ICON_SIZE.width} fg={STATE_COLORS[row.session.state] ?? BRAND.fallback} content={truncate(badge, columns.tool - MINI_ICON_SIZE.width)} truncate />
+                </>
+              ) : toolMode === "monogram" && toolKey ? (
+                <text
+                  width={columns.tool}
+                  fg={providerAccentColor(toolKey)}
+                  attributes={TextAttributes.BOLD}
+                  content={truncate(badge ? `${providerVisual(toolKey).short} ${badge}` : providerVisual(toolKey).short, columns.tool)}
+                  truncate
+                />
+              ) : (
+                <text width={columns.tool} fg={STATE_COLORS[row.session.state] ?? BRAND.fallback} content={truncate(toolContent, columns.tool)} truncate />
+              )}
+              {columns.summary > 0 && (
+                <text width={columns.summary} fg={STATE_COLORS[row.session.state] ?? BRAND.fallback} content={truncate(row.session.summary || "-", columns.summary)} truncate />
+              )}
+            </box>
+          );
+        })}
+      </box>
+      {props.usage && <UsageSummaryPane usage={props.usage} width={width} iconMode={props.iconMode} />}
+      {props.mode === "detail" && props.detail && (
+        <SessionDetailModal detail={props.detail} iconMode={props.iconMode} width={width} />
+      )}
+      {props.mode === "message" && props.message && (
+        <box position="absolute" top="35%" left="15%" width="70%" height={7} title="scrylog" border borderColor={BRAND.warning} backgroundColor={BRAND.surface} padding={1} alignItems="center" justifyContent="center" zIndex={10}>
+          <text fg={BRAND.warning} content={props.message} wrapMode="word" />
+        </box>
+      )}
+    </box>
+  );
+}

package/src/tui/components/TabBar.tsx

@@ -0,0 +1,40 @@
+import { TextAttributes, type MouseEvent } from "@opentui/core";
+import type { DashboardView } from "../model";
+import { BRAND } from "../theme";
+
+const ACTIVE_BACKGROUND = BRAND.primary;
+const ACTIVE_FOREGROUND = BRAND.bgDark;
+const INACTIVE_FOREGROUND = BRAND.grey;
+
+const TABS: { view: DashboardView; label: string }[] = [
+  { view: "sessions", label: " Sessions " },
+  { view: "usage", label: " Usage " },
+];
+
+export function TabBar({ view, onSelect }: { view: DashboardView; onSelect?(next: DashboardView): void }) {
+  return (
+    <box height={1} flexDirection="row">
+      {TABS.map((tab) => {
+        const active = tab.view === view;
+        return (
+          <box
+            key={tab.view}
+            backgroundColor={active ? ACTIVE_BACKGROUND : undefined}
+            flexDirection="row"
+            height={1}
+            onMouseUp={onSelect ? (event: MouseEvent) => {
+              if (event.button !== 0) return;
+              if (!active) onSelect(tab.view);
+            } : undefined}
+          >
+            <text
+              fg={active ? ACTIVE_FOREGROUND : INACTIVE_FOREGROUND}
+              attributes={active ? TextAttributes.BOLD : TextAttributes.NONE}
+              content={tab.label}
+            />
+          </box>
+        );
+      })}
+    </box>
+  );
+}