@scrylog/cli 0.1.4 → 0.3.0

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

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