@scrylog/cli 0.3.0 → 0.3.2

package/src/tui/components/DashboardHeader.tsx

@@ -1,256 +0,0 @@
-import { TextAttributes } from "@opentui/core";
-import type { SessionListItem } from "../../shared/session-view";
-import { BRAND, BRAND_MARK } from "../theme";
-import { STATE_COLORS, stateGlyph } from "../model";
-import type { DaemonVersionMismatch } from "../../shared/version";
-
-interface DashboardHeaderProps {
-  sessions: SessionListItem[];
-  connected: boolean;
-  spinnerFrame: number;
-  width: number;
-  versionMismatch?: DaemonVersionMismatch;
-}
-
-export function dashboardHeaderHeight(_width?: number): number {
-  return 6;
-}
-
-function countStates(sessions: SessionListItem[]): Record<string, number> {
-  const counts: Record<string, number> = { working: 0, idle: 0, "waiting-input": 0, error: 0, shell: 0, unknown: 0 };
-  for (const session of sessions) {
-    if (session.state in counts) counts[session.state]! += 1;
-    else counts.unknown! += 1;
-  }
-  return counts;
-}
-
-const TILE_WIDTH = 13;
-/** Right column usable width required to render a full 3-tile row (3*13 + 2 gaps) with room. */
-const TILE_MIN_USABLE_FOR_IDLE = 42;
-/** two tiles + gap: the narrow fallback that needs no separator or idle tile. */
-const TILE_MIN_USABLE_FOR_INPUT = 27;
-/** Brand column width in narrow layouts. */
-const HEADER_NARROW_LEFT_WIDTH = 16;
-/** Narrow terminals keep the brand mark whenever working/input tiles still fit next to it. */
-const HEADER_NARROW_LOGO_MIN = 46;
-
-interface StatusTileProps {
-  state: string;
-  label: string;
-  count: number;
-  spinnerFrame: number;
-  tileWidth?: number;
-}
-
-interface StatusBlockProps {
-  sessions: SessionListItem[];
-  spinnerFrame: number;
-  showSeparator: boolean;
-  narrow: boolean;
-  usable: number;
-  /** Idle tile may only render when the brand mark is reserved beside 3 tiles. */
-  allowIdle: boolean;
-  /** Brand mark is hidden: working/input stretch to fill the full row. */
-  stretch: boolean;
-}
-
-function StatusBlock({ sessions, spinnerFrame, showSeparator, narrow, usable, allowIdle, stretch }: StatusBlockProps) {
-  const counts = countStates(sessions);
-  let tiles: StatusTileProps[] = [
-    { state: "working", label: "working", count: counts.working ?? 0, spinnerFrame },
-    { state: "waiting-input", label: "input", count: (counts["waiting-input"] ?? 0) + (counts.error ?? 0), spinnerFrame },
-    { state: "idle", label: "idle", count: counts.idle ?? 0, spinnerFrame },
-  ];
-  if (narrow) {
-    // working/input are always visible (tinted when inactive); idle only shows
-    // when the full 3-tile row fits next to the brand mark.
-    tiles = tiles.filter((tile) => {
-      if (tile.state === "working") return true;
-      if (tile.state === "waiting-input") return usable >= TILE_MIN_USABLE_FOR_INPUT;
-      return allowIdle && tile.count > 0;
-    });
-  }
-  if (tiles.length === 0) {
-    return null;
-  }
-  const blockWidth = stretch
-    ? usable
-    : tiles.length * TILE_WIDTH + (tiles.length - 1);
-  const tileWidth = stretch ? Math.floor((usable - 1) / 2) : TILE_WIDTH;
-  return (
-    <box flexDirection="column" height={showSeparator ? 5 : 4}>
-      <box flexDirection="row" height={4} gap={1}>
-        {tiles.map((tile) => (
-          <StatusTile key={tile.state} {...tile} tileWidth={tileWidth} />
-        ))}
-      </box>
-      {showSeparator && <TileSeparator width={blockWidth} />}
-    </box>
-  );
-}
-
-function StatusTile({ state, label, count, spinnerFrame, tileWidth = TILE_WIDTH }: StatusTileProps) {
-  const active = count > 0;
-  const bg = active ? STATE_COLORS[state] : undefined;
-  const fg = active ? BRAND.bgDark : STATE_COLORS[state];
-  const spinner = active ? stateGlyph(state, spinnerFrame) : stateGlyph(state);
-  return (
-    <box
-      width={tileWidth}
-      height={4}
-      backgroundColor={bg}
-      flexDirection="column"
-      justifyContent="center"
-      alignItems="center"
-    >
-      <text attributes={TextAttributes.BOLD} fg={fg} content={`${count}`} maxWidth={tileWidth} />
-      <text fg={fg} content={`${spinner} ${label}`} maxWidth={tileWidth} />
-    </box>
-  );
-}
-
-function TileSeparator({ width }: { width: number }) {
-  return (
-    <box height={1}>
-      <text fg={BRAND.border} content={"─".repeat(width)} />
-    </box>
-  );
-}
-
-function StatusItem({ state, count, spinnerFrame, width }: { state: string; count: number; spinnerFrame: number; width?: number }) {
-  const label = state === "waiting-input" ? "input" : state;
-  return (
-    <text
-      width={width}
-      fg={STATE_COLORS[state] ?? BRAND.grey}
-      content={`${stateGlyph(state, spinnerFrame)} (${label}): ${count}`}
-    />
-  );
-}
-
-function StatusFooterRow({ sessions, spinnerFrame, narrow, usable }: { sessions: SessionListItem[]; spinnerFrame: number; narrow: boolean; usable: number }) {
-  const counts = countStates(sessions);
-  let avail = usable - 1;
-  const fits = (size: number) => {
-    if (!narrow) return true;
-    if (avail < size) return false;
-    avail -= size;
-    return true;
-  };
-  const showShell = fits(15);
-  const showUnknown = fits(14);
-  const showTotal = fits(10);
-  return (
-    <box flexDirection="row" height={1} paddingLeft={1}>
-      {showShell && <StatusItem state="shell" count={counts.shell ?? 0} spinnerFrame={spinnerFrame} width={15} />}
-      {showUnknown && <StatusItem state="unknown" count={counts.unknown ?? 0} spinnerFrame={spinnerFrame} width={14} />}
-      {showTotal && <text width={12} content={`  total: ${sessions.length}`} />}
-    </box>
-  );
-}
-
-function BrandMark() {
-  return (
-    <box flexDirection="column" height={5}>
-      {BRAND_MARK.art.map((line, index) => (
-        <text key={index} fg={line.fg} content={line.content} />
-      ))}
-    </box>
-  );
-}
-
-const SCRY_BLOCKS = " █▀ █▀▀ █▀█ █▄█\n ▄█ █▄▄ █▀▄ ░█░";
-const LOG_BLOCKS = " █░ █▀█ █▀▀\n █▄ █▄█ █▄█";
-
-function Wordmark({ width }: { width: number }) {
-  if (width < 72) {
-    return (
-      <box flexDirection="row">
-        <text attributes={TextAttributes.BOLD} fg={BRAND.primary} content=" SCRY" />
-        <text attributes={TextAttributes.BOLD} content="LOG" />
-      </box>
-    );
-  }
-  return (
-    <box flexDirection="row">
-      <text height={2} fg={BRAND.primary} content={SCRY_BLOCKS} />
-      <text height={2} fg={BRAND.grey} content={LOG_BLOCKS} />
-    </box>
-  );
-}
-
-function DaemonWarning({ connected, mismatch, narrow, width }: { connected: boolean; mismatch?: DaemonVersionMismatch; narrow: boolean; width: number }) {
-  if (!connected) {
-    return (
-      <box height={1}>
-        <text fg={BRAND.danger} content=" ● daemon disconnected" />
-      </box>
-    );
-  }
-  if (!mismatch) return null;
-  const content = width < 26
-    ? " restart daemon"
-    : narrow
-    ? " scrylog daemon restart"
-    : mismatch.daemonVersion
-    ? ` daemon ${mismatch.daemonVersion} != CLI ${mismatch.cliVersion} · scrylog daemon restart`
-    : " old daemon · scrylog daemon restart";
-  return (
-    <box height={1}>
-      <text fg={BRAND.warning} content={content} />
-    </box>
-  );
-}
-
-export function DashboardHeader(props: DashboardHeaderProps) {
-  const narrow = props.width < 110;
-  const leftWidth = Math.floor(Math.max(20, props.width - 2) / 2);
-  const showLogo = !narrow || props.width >= HEADER_NARROW_LOGO_MIN;
-  const usable = narrow
-    ? Math.max(0, props.width - (showLogo ? HEADER_NARROW_LEFT_WIDTH + 1 : 0) - 2)
-    : props.width;
-  const allowIdle = showLogo && usable >= TILE_MIN_USABLE_FOR_IDLE;
-  const showWarning = !props.connected || Boolean(props.versionMismatch);
-  return (
-    <box height={dashboardHeaderHeight(props.width)} flexDirection="column">
-      <box flexDirection="row" height={6}>
-        {showLogo && (
-          <box
-            width={narrow ? HEADER_NARROW_LEFT_WIDTH : leftWidth}
-            flexShrink={0}
-            flexDirection="row"
-            gap={1}
-            paddingLeft={1}
-          >
-            <BrandMark />
-            {!narrow && (
-              <box flexDirection="column" justifyContent="center">
-                <Wordmark width={props.width} />
-              </box>
-            )}
-          </box>
-        )}
-        <box
-          {...(narrow ? { width: Math.max(0, props.width - (showLogo ? HEADER_NARROW_LEFT_WIDTH : 0)) } : { flexGrow: 1 })}
-          flexDirection="column"
-          justifyContent="flex-start"
-          alignItems="flex-end"
-          paddingRight={2}
-        >
-          <DaemonWarning connected={props.connected} mismatch={props.versionMismatch} narrow={narrow} width={props.width} />
-          <StatusBlock
-            sessions={props.sessions}
-            spinnerFrame={props.spinnerFrame}
-            showSeparator={!showWarning}
-            narrow={narrow}
-            usable={usable}
-            allowIdle={allowIdle}
-            stretch={narrow && !showLogo}
-          />
-          <StatusFooterRow sessions={props.sessions} spinnerFrame={props.spinnerFrame} narrow={narrow} usable={usable} />
-        </box>
-      </box>
-    </box>
-  );
-}

package/src/tui/components/KeyBar.tsx

@@ -1,67 +0,0 @@
-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

@@ -1,169 +0,0 @@
-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

@@ -1,184 +0,0 @@
-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>
-  );
-}