@scrylog/cli 0.1.4 → 0.3.0

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`);
+  }
+}

package/src/tui/keybindings.ts

@@ -0,0 +1,49 @@
+import type { DashboardView } from "./model";
+
+export type BindingScope = "global" | DashboardView;
+
+export interface KeyBinding {
+  key: string;
+  description: string;
+  scope: BindingScope;
+  essential?: boolean;
+  footer?: boolean;
+}
+
+export const KEYBINDINGS: KeyBinding[] = [
+  { key: "Tab", description: "Switch tab", scope: "global", essential: true },
+  { key: "q", description: "Quit", scope: "global", essential: true },
+  { key: "r", description: "Refresh", scope: "global" },
+  { key: "s", description: "Open the sessions tab", scope: "global", essential: true, footer: false },
+  { key: "u", description: "Open the usage tab", scope: "global", essential: true, footer: false },
+  { key: "?", description: "Keybindings", scope: "global", essential: true },
+
+  { key: "j / Down", description: "Next session", scope: "sessions" },
+  { key: "k / Up", description: "Prev session", scope: "sessions" },
+  { key: "Enter", description: "Detail", scope: "sessions" },
+  { key: "t", description: "Attach", scope: "sessions" },
+  { key: "/", description: "Search", scope: "sessions" },
+  { key: "a", description: "Actionable filter", scope: "sessions" },
+  { key: "f", description: "Cycle filters", scope: "sessions" },
+  { key: "Esc", description: "Clear selection or close overlay", scope: "sessions" },
+
+  { key: "Click", description: "Select a session", scope: "sessions", footer: false },
+  { key: "2x Click", description: "Open session detail", scope: "sessions", footer: false },
+  { key: "Scroll", description: "Select next or previous session", scope: "sessions", footer: false },
+  { key: "Click tab", description: "Switch tabs", scope: "global", footer: false },
+];
+
+export function contextBindings(view: DashboardView): KeyBinding[] {
+  return KEYBINDINGS.filter((binding) => binding.scope === "global" || binding.scope === view);
+}
+
+export function essentialBindings(view: DashboardView): KeyBinding[] {
+  return contextBindings(view).filter((binding) => binding.essential);
+}
+
+export function bindingsForModal(): { scope: BindingScope; bindings: KeyBinding[] }[] {
+  const scopes: BindingScope[] = ["global", "sessions", "usage"];
+  return scopes
+    .map((scope) => ({ scope, bindings: KEYBINDINGS.filter((binding) => binding.scope === scope) }))
+    .filter((group) => group.bindings.length > 0);
+}