@scrylog/cli 0.2.0 → 0.3.0

package/src/tui/components/UsageSummaryPane.tsx

@@ -0,0 +1,272 @@
+import { TextAttributes } from "@opentui/core";
+import type { TuiConfig } from "../../shared/config";
+import type { UsageProviderEntry, UsageState, UsageWindow } from "../../usage/types";
+import { clampPercent, compactCostLabel, providerAccentColor, providerVisual, renderUsageBar, usageColor, ProviderIcon } from "./UsageView";
+import { MINI_ICON_SIZE, isImageIconMode } from "./tool-icons";
+import { BRAND } from "../theme";
+
+export interface ProviderUsageSummary {
+  provider: string;
+  short: string;
+  name: string;
+  percent: number;
+  windowLabel: string | null;
+  costLabel: string | null;
+  color: string;
+  hasWindows: boolean;
+  status: UsageProviderEntry["status"];
+}
+
+export function usageWindowLabel(window: UsageWindow): string {
+  const haystack = `${window.id} ${window.title}`.toLowerCase();
+  if (/\bsession\b/.test(haystack)) return "S";
+  if (/week/.test(haystack)) return "W";
+  if (/month/.test(haystack)) return "M";
+  if (/\bday\b|\bdaily\b/.test(haystack)) return "D";
+  if (/hour/.test(haystack)) return "H";
+  const first = window.title.trim()[0] ?? window.id.trim()[0];
+  return first ? first.toUpperCase() : "?";
+}
+
+export function summarizeProvider(entry: UsageProviderEntry): ProviderUsageSummary {
+  const worst = (entry.windows ?? [])
+    .filter((window) => Number.isFinite(window.usedPercent))
+    .reduce<UsageWindow | null>((acc, window) =>
+      !acc || clampPercent(window.usedPercent) > clampPercent(acc.usedPercent) ? window : acc, null);
+  const visual = providerVisual(entry.provider);
+  return {
+    provider: entry.provider,
+    short: visual.short,
+    name: visual.name,
+    percent: clampPercent(worst?.usedPercent ?? 0),
+    windowLabel: worst ? usageWindowLabel(worst) : null,
+    costLabel: compactCostLabel(entry.cost),
+    color: usageColor(worst?.usedPercent ?? 0, entry.provider),
+    hasWindows: Boolean(worst),
+    status: entry.status,
+  };
+}
+
+const NARROW_WIDTH = 110;
+/** border (2) + paddingX (2) — chrome the pane consumes from the width prop. */
+const PANE_CHROME = 4;
+const CELL_GAP = 2;
+const INNER_GAP = 1;
+const MIN_BAR_WIDTH = 4;
+const MAX_COST_WIDTH = 6;
+const MIN_STATUS_WIDTH = 6;
+/** outer gap (1) + separator (1) + gap to next cell (1) in compact mode. */
+const COMPACT_JUNCTION = INNER_GAP + 1 + INNER_GAP;
+
+export type SummaryLayoutMode = "bar" | "compact";
+
+export interface SummaryLayout {
+  mode: SummaryLayoutMode;
+  /** Shared bar width in bar mode; 0 in compact mode. */
+  barWidth: number;
+  visible: ProviderUsageSummary[];
+  hiddenCount: number;
+}
+
+/** Highest-usage providers first, but only on narrow terminals. */
+export function orderSummaries(summaries: ProviderUsageSummary[], width: number): ProviderUsageSummary[] {
+  if (width >= NARROW_WIDTH) return summaries;
+  return [...summaries].sort((a, b) => b.percent - a.percent);
+}
+
+interface CellSegment {
+  content: string;
+  width: number;
+}
+
+function pctText(summary: ProviderUsageSummary): string {
+  return `${Math.round(summary.percent)}%`;
+}
+
+function statusText(summary: ProviderUsageSummary): string {
+  return summary.status.slice(0, MIN_STATUS_WIDTH);
+}
+
+function trimCost(label: string | null | undefined): string | null {
+  if (!label || label.length <= MAX_COST_WIDTH) return label ?? null;
+  return `${label.slice(0, MAX_COST_WIDTH - 1)}…`;
+}
+
+function summarySegments(summary: ProviderUsageSummary, costLabel: string | null, barWidth: number): CellSegment[] {
+  const segments: CellSegment[] = [
+    { content: summary.short.slice(0, 2), width: 2 },
+    { content: renderUsageBar(summary.percent, barWidth), width: barWidth },
+  ];
+  if (summary.windowLabel) {
+    segments.push({ content: ` ${summary.windowLabel}`, width: summary.windowLabel.length + 1 });
+  }
+  const pct = pctText(summary);
+  segments.push({ content: pct, width: pct.length });
+  if (costLabel) {
+    segments.push({ content: costLabel, width: costLabel.length });
+  }
+  return segments;
+}
+
+function segmentsWidth(segments: CellSegment[]): number {
+  const widths = segments.reduce((acc, segment) => acc + segment.width, 0);
+  return widths + (segments.length - 1) * INNER_GAP;
+}
+
+/** Zero-bar cell width, honored by the budget solver for ok summaries. */
+function nonBarWidth(summary: ProviderUsageSummary, costLabel: string | null): number {
+  return cellWidth({ ...summary, costLabel }, 0);
+}
+
+function cellWidth(summary: ProviderUsageSummary, barWidth: number): number {
+  if (!summary.hasWindows || summary.status !== "ok") {
+    return 2 + INNER_GAP + statusText(summary).length;
+  }
+  return segmentsWidth(summarySegments(summary, summary.costLabel, barWidth));
+}
+
+/**
+ * Fit preference: maximize visible providers first (compact separators fit
+ * more providers than bars), falling back to bar rows when both show the same
+ * count. Bars share one width; costs are truncated before rows are dropped.
+ */
+export function layoutSummaries(summaries: ProviderUsageSummary[], width: number): SummaryLayout {
+  const ordered = orderSummaries(summaries, width);
+  const available = Math.max(0, width - PANE_CHROME);
+  if (ordered.length === 0) {
+    return { mode: "bar", barWidth: MIN_BAR_WIDTH, visible: [], hiddenCount: 0 };
+  }
+
+  const trimmed = ordered.map((s) => ({ ...s, costLabel: trimCost(s.costLabel) }));
+  let barLayout: SummaryLayout | null = null;
+  {
+    const allBudget = Math.floor(
+      (available - trimmed.reduce((acc, s) => acc + nonBarWidth(s, s.costLabel), 0) - (trimmed.length - 1) * CELL_GAP) / trimmed.length,
+    );
+    if (allBudget >= MIN_BAR_WIDTH) {
+      barLayout = { mode: "bar", barWidth: allBudget, visible: trimmed, hiddenCount: 0 };
+    } else {
+      for (let count = trimmed.length - 1; count >= 1; count--) {
+        const cells = trimmed.slice(0, count);
+        const gaps = (count - 1) * CELL_GAP;
+        const budget = Math.floor((available - cells.reduce((acc, s) => acc + nonBarWidth(s, s.costLabel), 0) - gaps) / count);
+        if (budget >= MIN_BAR_WIDTH) {
+          barLayout = { mode: "bar", barWidth: budget, visible: cells, hiddenCount: trimmed.length - count };
+          break;
+        }
+      }
+    }
+  }
+
+  // Compact: without bars, separators fit the most providers.
+  const widths = ordered.map(compactSegmentWidth);
+  let visibleCount = 1;
+  let total = widths[0];
+  for (let i = 1; i < widths.length; i++) {
+    const next = total + COMPACT_JUNCTION + widths[i];
+    if (next > available) break;
+    total = next;
+    visibleCount++;
+  }
+  const compactLayout: SummaryLayout = {
+    mode: "compact",
+    barWidth: 0,
+    visible: ordered.slice(0, visibleCount),
+    hiddenCount: ordered.length - visibleCount,
+  };
+
+  if (!barLayout) {
+    return compactLayout;
+  }
+  return barLayout.visible.length >= compactLayout.visible.length ? barLayout : compactLayout;
+}
+
+function compactSegmentWidth(summary: ProviderUsageSummary): number {
+  if (!summary.hasWindows && summary.status !== "ok") {
+    return 2 + INNER_GAP + statusText(summary).length;
+  }
+  return 2 + INNER_GAP + pctText(summary).length;
+}
+
+function BarCell({ summary, width, barWidth, iconMode }: { summary: ProviderUsageSummary; width: number; barWidth: number; iconMode: TuiConfig["providerIcons"] }) {
+  const shortCell = isImageIconMode(iconMode)
+    ? <ProviderIcon provider={summary.provider} mode={iconMode} size={MINI_ICON_SIZE} />
+    : <text width={2} fg={providerAccentColor(summary.provider)} attributes={TextAttributes.BOLD} content={summary.short.slice(0, 2)} />;
+  if (!summary.hasWindows || summary.status !== "ok") {
+    return (
+      <box width={width} height={1} flexDirection="row" gap={INNER_GAP}>
+        {shortCell}
+        <text fg={BRAND.grey} content={statusText(summary)} />
+      </box>
+    );
+  }
+  const segments = summarySegments(summary, summary.costLabel, barWidth);
+  const accent = providerAccentColor(summary.provider);
+  return (
+    <box width={width} height={1} flexDirection="row" gap={INNER_GAP}>
+      {shortCell}
+      <text width={barWidth} fg={accent} content={renderUsageBar(summary.percent, barWidth)} />
+      {summary.windowLabel && (
+        <text width={summary.windowLabel.length + 1} fg={BRAND.grey} attributes={TextAttributes.BOLD} content={` ${summary.windowLabel}`} />
+      )}
+      <text width={pctText(summary).length} fg={usageColor(summary.percent, summary.provider)} attributes={TextAttributes.BOLD} content={pctText(summary)} />
+      {summary.costLabel && <text width={summary.costLabel.length} fg={BRAND.grey} content={summary.costLabel} />}
+    </box>
+  );
+}
+
+function CompactCell({ summary, leadingSeparator }: { summary: ProviderUsageSummary; leadingSeparator: boolean }) {
+  const shortCell = (
+    <text width={2} fg={providerAccentColor(summary.provider)} attributes={TextAttributes.BOLD} content={summary.short.slice(0, 2)} />
+  );
+  const dim = summary.hasWindows && summary.status === "ok" ? usageColor(summary.percent, summary.provider) : BRAND.grey;
+  const label = !summary.hasWindows && summary.status !== "ok"
+    ? statusText(summary)
+    : pctText(summary);
+  return (
+    <box height={1} flexDirection="row" gap={INNER_GAP}>
+      {leadingSeparator && <text fg={BRAND.border} content="│" />}
+      {shortCell}
+      <text fg={dim} attributes={TextAttributes.BOLD} content={label} />
+    </box>
+  );
+}
+
+export function UsageSummaryPane({ usage, width, iconMode }: { usage: UsageState; width: number; iconMode: TuiConfig["providerIcons"] }) {
+  const summaries = usage.providers.filter((entry) => entry.available)
+    .map((entry) => summarizeProvider(entry));
+  const layout = layoutSummaries(summaries, width);
+  return (
+    <box
+      height={3}
+      border
+      borderColor={BRAND.border}
+      titleColor={BRAND.grey}
+      title="Usage"
+      paddingX={1}
+      flexDirection="row"
+      gap={layout.mode === "bar" ? CELL_GAP : INNER_GAP}
+    >
+      {summaries.length === 0 ? (
+        <text fg={BRAND.grey} content="no usage data" />
+      ) : layout.mode === "bar" ? (
+        layout.visible.map((summary) => (
+          <BarCell
+            key={summary.provider}
+            summary={summary}
+            width={cellWidth(summary, layout.barWidth)}
+            barWidth={layout.barWidth}
+            iconMode={iconMode}
+          />
+        ))
+      ) : (
+        layout.visible.map((summary, index) => (
+          <CompactCell key={summary.provider} summary={summary} leadingSeparator={index > 0} />
+        ))
+      )}
+      {layout.mode === "bar" && layout.hiddenCount > 0 && (
+        <text fg={BRAND.grey} content={`+${layout.hiddenCount}`} />
+      )}
+    </box>
+  );
+}

package/src/tui/components/UsageView.tsx

@@ -0,0 +1,242 @@
+import { NativeImage, TextAttributes } from "@opentui/core";
+import { useEffect, useState } from "react";
+import type { TuiConfig } from "../../shared/config";
+import type { ProviderCostSnapshot, UsageProviderEntry, UsageState, UsageWindow } from "../../usage/types";
+import { BRAND, PROVIDER_BRANDS, type ProviderVisual } from "../theme";
+
+export type { ProviderVisual };
+
+export const PROVIDER_ICON_SIZES = {
+  blocks: { width: 8, height: 4 },
+  graphics: { width: 6, height: 3 },
+  kitty: { width: 6, height: 3 },
+  sixel: { width: 6, height: 3 },
+  text: { width: 4, height: 3 },
+  mini: { width: 2, height: 1 },
+} as const;
+
+export function iconImageProtocol(mode: TuiConfig["providerIcons"]): "blocks" | "auto" | "kitty" | "sixel" {
+  if (mode === "blocks") return "blocks";
+  if (mode === "kitty" || mode === "sixel") return mode;
+  return "auto";
+}
+
+const PROVIDERS = PROVIDER_BRANDS;
+
+export function providerVisual(provider: string): ProviderVisual {
+  return PROVIDERS[provider] ?? { name: provider, short: "AI", brandColor: BRAND.grey, borderColor: BRAND.grey };
+}
+
+export function providerAccentColor(provider: string): string {
+  return providerVisual(provider).onDarkColor ?? providerVisual(provider).brandColor;
+}
+
+export function clampPercent(value: number): number {
+  return Math.max(0, Math.min(100, Number.isFinite(value) ? value : 0));
+}
+
+export function usageColor(value: number, provider?: string): string {
+  const percent = clampPercent(value);
+  if (percent >= 90) return BRAND.usageHigh;
+  if (percent >= 70) return BRAND.stateWorking;
+  if (provider) return providerAccentColor(provider);
+  return BRAND.stateIdle;
+}
+
+export function renderUsageBar(value: number, width: number): string {
+  const size = Math.max(4, width);
+  const filled = Math.round((clampPercent(value) / 100) * size);
+  return `${"█".repeat(filled)}${"░".repeat(size - filled)}`;
+}
+
+function formatUsageNumber(value: number, compact: boolean): string {
+  if (compact && Math.abs(value) >= 1_000) {
+    return `${(value / 1_000).toFixed(value >= 10_000 ? 0 : 1).replace(/\.0$/, "")}k`;
+  }
+  return value.toLocaleString("en-US", { maximumFractionDigits: 2 });
+}
+
+export function formatCostAmount(amount: number, currency: string, compact = false): string {
+  const value = formatUsageNumber(amount, compact);
+  const normalized = currency.trim().toUpperCase();
+  if (normalized === "USD") return `$${value}`;
+  if (normalized === "EUR") return `€${value}`;
+  if (normalized === "GBP") return `£${value}`;
+  if (normalized === "CREDITS") return compact ? `${value}cr` : `${value} credits`;
+  return compact ? `${value} ${currency}` : `${currency} ${value}`;
+}
+
+export function compactCostLabel(cost: ProviderCostSnapshot | null | undefined): string | null {
+  if (!cost) return null;
+  if (cost.limit > 0) return formatCostAmount(cost.used, cost.currency, true);
+  if (cost.balance !== undefined) return `${formatCostAmount(cost.balance, cost.currency, true)} left`;
+  return null;
+}
+
+export function formatCostRange(cost: ProviderCostSnapshot): string {
+  const normalized = cost.currency.trim().toUpperCase();
+  if (normalized === "CREDITS") {
+    return `${formatUsageNumber(cost.used, false)} / ${formatUsageNumber(cost.limit, false)} credits`;
+  }
+  return `${formatCostAmount(cost.used, cost.currency)} / ${formatCostAmount(cost.limit, cost.currency)}`;
+}
+
+export function formatRelativeReset(seconds: number): string {
+  const days = Math.floor(seconds / 86_400);
+  const hours = Math.floor((seconds % 86_400) / 3_600);
+  const minutes = Math.floor((seconds % 3_600) / 60);
+  if (seconds <= 0) return "now";
+  if (days > 0) return `${days}d ${hours}h`;
+  if (hours > 0) return `${hours}h ${minutes}m`;
+  return `${minutes}m`;
+}
+
+export function formatResetTime(timestamp: number): string {
+  return new Date(timestamp).toLocaleString("en-US", {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+  }).replace(":00 ", " ").replace(" AM", "am").replace(" PM", "pm");
+}
+
+export function formatReset(window: UsageWindow, now = Date.now()): string {
+  const resetsAt = window.resetsAt ? Date.parse(window.resetsAt) : undefined;
+  const seconds = resetsAt !== undefined
+    ? Math.max(0, Math.round((resetsAt - now) / 1000))
+    : Math.max(0, window.resetInSec ?? 0);
+  if (resetsAt === undefined && window.resetInSec === undefined) return "reset unknown";
+  const timestamp = resetsAt ?? now + seconds * 1000;
+  return `${formatResetTime(timestamp)} (${formatRelativeReset(seconds)})`;
+}
+
+export function ProviderIcon({ provider, mode, size }: { provider: string; mode: TuiConfig["providerIcons"]; size?: { width: number; height: number } }) {
+  const visual = providerVisual(provider);
+  const iconSize = size ?? PROVIDER_ICON_SIZES[mode];
+  const [image, setImage] = useState<NativeImage | null>(null);
+
+  useEffect(() => {
+    const asset = mode === "blocks" ? visual.terminalAsset : visual.graphicsAsset;
+    if (mode === "text" || !asset) return;
+    let active = true;
+    let loaded: NativeImage | null = null;
+    void NativeImage.load(asset).then((next) => {
+      loaded = next;
+      if (active) setImage(next);
+      else next.dispose();
+    }).catch(() => setImage(null));
+    return () => {
+      active = false;
+      loaded?.dispose();
+    };
+  }, [mode, provider]);
+
+  if (image) {
+    return <image source={image} protocol={iconImageProtocol(mode)} fit="fit" {...iconSize} />;
+  }
+  return (
+    <box {...iconSize} backgroundColor={visual.tileColor} alignItems="center" justifyContent="center">
+      <text fg={visual.brandColor} attributes={TextAttributes.BOLD} content={visual.short} />
+    </box>
+  );
+}
+
+function UsageLine({ provider, window, width }: { provider: string; window: UsageWindow; width: number }) {
+  const percent = clampPercent(window.usedPercent);
+  return (
+    <box flexDirection="column">
+      <box flexDirection="row" justifyContent="space-between">
+        <text content={window.title} />
+        <text fg={usageColor(percent, provider)} attributes={TextAttributes.BOLD} content={`${Math.round(percent)}%`} />
+      </box>
+      <text fg={usageColor(percent, provider)} content={renderUsageBar(percent, width)} />
+      <text fg={BRAND.grey} content={formatReset(window)} />
+    </box>
+  );
+}
+
+function ProviderCard({ provider, width, iconMode }: {
+  provider: UsageProviderEntry;
+  width: number;
+  iconMode: TuiConfig["providerIcons"];
+}) {
+  const visual = providerVisual(provider.provider);
+  const windows = provider.windows ?? [];
+  const subtitle = provider.metadata?.subscriptionType
+    ?? provider.metadata?.workspaceName
+    ?? provider.metadata?.accountEmail
+    ?? provider.status;
+  return (
+    <box title={visual.name} border borderColor={visual.borderColor} width={width} flexShrink={0} flexDirection="column" paddingX={1} paddingBottom={1} paddingTop={1}>
+      <box height={PROVIDER_ICON_SIZES.blocks.height} flexDirection="row" gap={1}>
+        <ProviderIcon provider={provider.provider} mode={iconMode} />
+        <box flexDirection="column" justifyContent="center">
+          <text attributes={TextAttributes.BOLD} content={visual.name} />
+          <text fg={BRAND.grey} content={subtitle ?? provider.status} />
+        </box>
+      </box>
+      <box height={1} />
+      {provider.status !== "ok" && (
+        <text
+          fg={provider.status === "error" ? BRAND.danger : BRAND.warning}
+          content={provider.errors?.[0] ?? (provider.status === "pending" ? "Waiting for first refresh" : "Credentials not available")}
+          wrapMode="word"
+        />
+      )}
+      {provider.status === "ok" && windows.map((window) => (
+        <UsageLine key={window.id} provider={provider.provider} window={window} width={width - 4} />
+      ))}
+      {provider.cost && (
+        <box flexDirection="column">
+          {provider.cost.limit > 0 && (
+            <text
+              fg={BRAND.grey}
+              content={`${provider.cost.period}: ${formatCostRange(provider.cost)}`}
+            />
+          )}
+          {provider.cost.balance !== undefined && (
+            <text fg={BRAND.grey} content={`Balance: ${formatCostAmount(provider.cost.balance, provider.cost.currency)}`} />
+          )}
+        </box>
+      )}
+    </box>
+  );
+}
+
+export function UsageView({ usage, width, iconMode, hidden = false }: { usage: UsageState; width: number; iconMode: TuiConfig["providerIcons"]; hidden?: boolean }) {
+  const rich = width >= 110;
+  const columns = rich ? Math.min(3, Math.max(1, usage.providers.length)) : 1;
+  // Narrow single-column cards reserve extra width for border + padding so the
+  // outer pane border is never painted over by scrollbox content.
+  const cardWidth = rich
+    ? Math.max(32, Math.floor((width - 4 - (columns - 1)) / columns))
+    : Math.max(20, width - 6);
+  return (
+    <box
+      border
+      borderColor={BRAND.border}
+      flexDirection="column"
+      flexGrow={1}
+      paddingX={1}
+    >
+      {usage.providers.length === 0 ? (
+        <box flexGrow={1} alignItems="center" justifyContent="center">
+          <text fg={BRAND.grey} content="No usage providers configured" />
+        </box>
+      ) : (
+        <scrollbox
+          focused={!hidden}
+          scrollX={false}
+          scrollY
+          flexGrow={1}
+          contentOptions={{ flexDirection: rich ? "row" : "column", flexWrap: rich ? "wrap" : "no-wrap", gap: 1 }}
+        >
+          {usage.providers.map((provider) => (
+            <ProviderCard key={provider.provider} provider={provider} width={cardWidth} iconMode={iconMode} />
+          ))}
+        </scrollbox>
+      )}
+    </box>
+  );
+}

package/src/tui/components/tool-icons.ts

@@ -0,0 +1,24 @@
+import type { SessionTool } from "../../shared/types";
+import type { TuiConfig } from "../../shared/config";
+import { PROVIDER_ICON_SIZES } from "./UsageView";
+
+type ToolProviderKey = "claude" | "codex" | "opencode-go" | "copilot" | "shell" | "unknown";
+
+const TOOL_PROVIDER_KEYS: Record<SessionTool, ToolProviderKey> = {
+  claude: "claude",
+  codex: "codex",
+  opencode: "opencode-go",
+  copilotcli: "copilot",
+  shell: "shell",
+  unknown: "unknown",
+};
+
+export function toolProviderKey(tool: string): ToolProviderKey | null {
+  return (TOOL_PROVIDER_KEYS as Record<string, ToolProviderKey>)[tool] ?? null;
+}
+
+export function isImageIconMode(mode: TuiConfig["providerIcons"]): boolean {
+  return mode === "graphics" || mode === "kitty" || mode === "sixel";
+}
+
+export const MINI_ICON_SIZE = PROVIDER_ICON_SIZES.mini;

package/src/tui/index.tsx

@@ -0,0 +1,106 @@
+import { createCliRenderer } from "@opentui/core";
+import type { CliRenderer } from "@opentui/core";
+import { createRoot } from "@opentui/react";
+import type { ReactNode } from "react";
+import { loadConfig } from "../shared/config";
+import type { ScrylogConfig } from "../shared/config";
+import { getServiceManagerOrThrow } from "../service/manager";
+import type { ServiceStatus } from "../service/manager";
+import { getDaemonVersionMismatch, getInstalledVersion } from "../shared/version";
+import type { DaemonVersionMismatch } from "../shared/version";
+import { App } from "./App";
+import { DaemonClient } from "./client";
+
+export async function launchTui(configPath?: string, includeUnknown = false): Promise<void> {
+  const config = loadConfig(configPath);
+  const client = new DaemonClient(config);
+  const health = await client.getHealth();
+  if (!health) {
+    printDaemonNotRunning(config, getServiceManagerOrThrow().platform);
+    process.exitCode = 1;
+    return;
+  }
+
+  const versionMismatch = getDaemonVersionMismatch(getInstalledVersion(), health.version);
+  if (versionMismatch) printDaemonVersionMismatch(versionMismatch);
+
+  const renderer = await createCliRenderer({ exitOnCtrlC: false });
+  await mountDashboard(renderer, (close) => {
+    const attach = (command: string[], sessionId: string) => {
+      close();
+      const result = Bun.spawnSync(command, { stdin: "inherit", stdout: "inherit", stderr: "inherit" });
+      if (result.exitCode !== 0) {
+        process.stderr.write(`Could not enter session ${sessionId}\n`);
+        process.exitCode = 1;
+      }
+    };
+
+    return (
+      <App
+        client={client}
+        options={{ refreshMs: config.tui.refreshMs, includeUnknown }}
+        config={config}
+        versionMismatch={versionMismatch}
+        onExit={close}
+        onAttach={attach}
+      />
+    );
+  });
+}
+
+export function printDaemonVersionMismatch(mismatch: DaemonVersionMismatch): void {
+  if (mismatch.daemonVersion) {
+    process.stderr.write(
+      `scrylog: daemon version mismatch (CLI ${mismatch.cliVersion}, daemon ${mismatch.daemonVersion}).\n` +
+      "Restart it to activate the installed version: scrylog daemon restart\n" +
+      "For a foreground or unsupported service, stop it and run: scrylogd\n" +
+      `Release notes: https://github.com/scrylog/scrylog/releases/tag/v${mismatch.cliVersion}\n\n`,
+    );
+    return;
+  }
+
+  process.stderr.write(
+    "scrylog: the running daemon is from an older version.\n" +
+    "Restart it to activate the installed version: scrylog daemon restart\n" +
+    "For a foreground or unsupported service, stop it and run: scrylogd\n" +
+    "If integrations misbehave after updating, run: scrylog setup\n\n",
+  );
+}
+
+export async function mountDashboard(renderer: CliRenderer, render: (close: () => void) => ReactNode): Promise<void> {
+  const root = createRoot(renderer);
+  await new Promise<void>((resolve) => {
+    let closed = false;
+    const close = () => {
+      if (closed) return;
+      closed = true;
+      root.unmount();
+      renderer.destroy();
+      resolve();
+    };
+    root.render(render(close));
+  });
+}
+
+export function printDaemonNotRunning(config: ScrylogConfig, platform: ServiceStatus["platform"]): void {
+  const logPath = config.daemon.logFilePath;
+  const hasService = platform === "macos" || platform === "linux";
+
+  process.stderr.write("scrylog: daemon is not running.\n\n");
+  process.stderr.write("Verify:\n  scrylog daemon status\n  scrylog doctor\n\n");
+  process.stderr.write("Start it (pick one):\n");
+  if (hasService) {
+    process.stderr.write("  scrylog daemon start      # user service\n");
+    process.stderr.write("  scrylog daemon install    # if the service is not installed yet\n");
+  }
+  process.stderr.write(`  scrylogd                  # foreground\n\nLogs:\n  scrylog logs\n  ${logPath}\n`);
+
+  if (!hasService) {
+    const note = platform === "wsl"
+      ? "Service management is unavailable (WSL without systemd). Run scrylogd directly or enable systemd in /etc/wsl.conf."
+      : platform === "linux-no-systemd"
+      ? "Service management is unavailable (no systemd user session). Run scrylogd directly."
+      : "Service management is unavailable on this platform. Run scrylogd directly or use Task Scheduler.";
+    process.stderr.write(`\n${note}\n`);
+  }
+}