@shipfox/client-logs 0.2.0

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@shipfox/client-logs",
+  "license": "MIT",
+  "version": "0.2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
+    "directory": "libs/client/logs"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "imports": {
+    "#*": {
+      "types": "./src/*",
+      "workspace-source": "./src/*",
+      "development": "./src/*",
+      "default": "./dist/*"
+    }
+  },
+  "exports": {
+    ".": {
+      "development": {
+        "types": "./src/index.ts",
+        "default": "./src/index.ts"
+      },
+      "default": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "dependencies": {
+    "@swc/helpers": "^0.5.17",
+    "@shipfox/api-logs-dto": "2.0.0",
+    "@shipfox/client-api": "0.2.0",
+    "@shipfox/react-ui": "0.3.1"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.101.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@argos-ci/cli": "^5.0.0",
+    "@argos-ci/storybook": "^6.0.0",
+    "@storybook/addon-vitest": "^10.3.6",
+    "@storybook/react": "^10.0.0",
+    "@storybook/react-vite": "^10.0.0",
+    "@tailwindcss/vite": "^4.1.13",
+    "@tanstack/react-query": "^5.101.0",
+    "@testing-library/dom": "^10.0.0",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.1.11",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^6.0.0",
+    "@vitest/browser-playwright": "^4.1.5",
+    "jsdom": "^29.0.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "storybook": "^10.0.0",
+    "storybook-addon-pseudo-states": "^10.0.0",
+    "tailwindcss": "^4.1.13",
+    "vite": "^8.0.3",
+    "vitest": "^4.1.5",
+    "@shipfox/biome": "1.8.1",
+    "@shipfox/client-test-setup": "0.0.2",
+    "@shipfox/swc": "1.2.5",
+    "@shipfox/ts-config": "1.3.8",
+    "@shipfox/typescript": "1.1.6",
+    "@shipfox/vitest": "1.2.2"
+  },
+  "scripts": {
+    "build": "shipfox-swc",
+    "check": "shipfox-biome-check",
+    "check:fix": "shipfox-biome-check --write",
+    "storybook": "storybook dev -p 6008",
+    "storybook:build": "storybook build -o storybook-static",
+    "test": "shipfox-vitest-run",
+    "test:watch": "shipfox-vitest-watch",
+    "type": "shipfox-tsc-check",
+    "type:emit": "shipfox-tsc-emit"
+  }
+}

package/src/components/agent-session-rows.tsx

@@ -0,0 +1,341 @@
+'use client';
+
+import type {SessionViewRow, SessionViewRowMeta} from '@shipfox/api-logs-dto';
+import {Icon} from '@shipfox/react-ui/icon';
+import {
+  LogContent,
+  LogDisclosure,
+  LogDisclosureContent,
+  LogDisclosureTrigger,
+  LogRow,
+} from '@shipfox/react-ui/log';
+import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
+import {cn} from '@shipfox/react-ui/utils';
+import {Fragment, useState} from 'react';
+
+const PREVIEW_CHAR_LIMIT = 1200;
+const WORD_SUMMARY_CHAR_LIMIT = 5000;
+const WHITESPACE = /\s+/g;
+const WORD_SEPARATOR = /\s+/;
+
+export interface AgentSessionRowsProps {
+  rows: readonly SessionViewRow[];
+  resolvedToolCallIds: ReadonlySet<string>;
+  indent: number;
+}
+
+export function AgentSessionRows({rows, resolvedToolCallIds, indent}: AgentSessionRowsProps) {
+  return rows.map((row, index) => (
+    <AgentSessionRowView
+      // biome-ignore lint/suspicious/noArrayIndexKey: session rows are immutable and never reordered, so the index is stable; content keys would balloon to megabyte strings and collide on repeated id-less tool calls.
+      key={`${row.kind}-${index}`}
+      row={row}
+      resolvedToolCallIds={resolvedToolCallIds}
+      indent={indent}
+    />
+  ));
+}
+
+function AgentSessionRowView({
+  row,
+  resolvedToolCallIds,
+  indent,
+}: {
+  row: SessionViewRow;
+  resolvedToolCallIds: ReadonlySet<string>;
+  indent: number;
+}) {
+  switch (row.kind) {
+    case 'message':
+      return (
+        <LogRow
+          lineNumber={null}
+          timestamp={new Date(row.timestamp)}
+          indent={indent}
+          tone={row.terminalFailure ? 'error' : 'default'}
+          data-log-terminal-failure={row.terminalFailure ? 'true' : undefined}
+        >
+          <LogContent className="text-foreground-neutral-base">
+            <span className="flex min-w-0 items-start gap-8">
+              <MessageIcon role={row.role} terminalFailure={row.terminalFailure} />
+              <span className="flex min-w-0 flex-1 flex-col gap-2">
+                <span className="flex min-w-0 items-center gap-8">
+                  <MessageRoleLabel label={row.label} terminalFailure={row.terminalFailure} />
+                  <RowMetadata meta={row.meta} className="ml-auto flex-none" />
+                </span>
+                <span className="block min-w-0">
+                  <PreviewText text={row.text} />
+                </span>
+              </span>
+            </span>
+          </LogContent>
+        </LogRow>
+      );
+    case 'thinking':
+      return (
+        <LogDisclosure indent={indent}>
+          <LogDisclosureTrigger
+            summary={wordSummary(row.text)}
+            timestamp={new Date(row.timestamp)}
+            className="text-foreground-neutral-subtle"
+          >
+            thinking
+          </LogDisclosureTrigger>
+          <LogDisclosureContent className="text-foreground-neutral-subtle">
+            <LogContent className="text-foreground-neutral-subtle">
+              <PreviewText text={row.text} />
+            </LogContent>
+          </LogDisclosureContent>
+        </LogDisclosure>
+      );
+    case 'tool-call': {
+      const awaitingResult = row.id != null && !resolvedToolCallIds.has(row.id);
+      return (
+        <LogDisclosure indent={indent}>
+          <LogDisclosureTrigger
+            timestamp={new Date(row.timestamp)}
+            summary={compactPreview(row.input)}
+            trailing={
+              awaitingResult ? (
+                <span className="inline-flex items-center gap-4">
+                  <Icon
+                    name="loader4Line"
+                    className="size-12 motion-safe:animate-spin"
+                    aria-hidden="true"
+                  />
+                  awaiting result
+                </span>
+              ) : null
+            }
+          >
+            <span className="inline-flex min-w-0 items-center gap-6">
+              <Icon name="terminalBoxLine" className="size-14 flex-none" aria-hidden="true" />
+              <span className="truncate">tool {row.name}</span>
+            </span>
+          </LogDisclosureTrigger>
+          <LogDisclosureContent>
+            <LogContent variant="code">
+              <PreviewText text={row.input} />
+            </LogContent>
+          </LogDisclosureContent>
+        </LogDisclosure>
+      );
+    }
+    case 'tool-result':
+      return (
+        <LogDisclosure indent={indent}>
+          <LogDisclosureTrigger
+            timestamp={new Date(row.timestamp)}
+            summary={compactPreview(row.output)}
+            trailing={
+              <span
+                className={cn(
+                  'inline-flex items-center gap-4',
+                  row.isError ? 'text-red-600 dark:text-red-400' : 'text-foreground-neutral-muted',
+                )}
+              >
+                <Icon
+                  name={row.isError ? 'closeCircleLine' : 'checkLine'}
+                  className="size-12"
+                  aria-hidden="true"
+                />
+                {row.isError ? 'error' : 'ok'}
+              </span>
+            }
+          >
+            <span className="inline-flex min-w-0 items-center gap-6">
+              <Icon name="terminalWindowLine" className="size-14 flex-none" aria-hidden="true" />
+              <span className="truncate">result {row.toolName}</span>
+            </span>
+          </LogDisclosureTrigger>
+          <LogDisclosureContent>
+            <LogContent
+              variant="code"
+              className={cn(row.isError && 'text-red-600 dark:text-red-400')}
+            >
+              <PreviewText text={row.output} />
+            </LogContent>
+          </LogDisclosureContent>
+        </LogDisclosure>
+      );
+    case 'lifecycle':
+      return (
+        <LogRow
+          lineNumber={null}
+          timestamp={new Date(row.timestamp)}
+          indent={indent}
+          tone={row.tone}
+          data-log-terminal-failure={row.terminalFailure ? 'true' : undefined}
+        >
+          <LogContent className="text-foreground-neutral-muted">
+            <span className="inline-flex w-full items-center gap-8">
+              <Icon name="informationLine" className="size-14 flex-none" aria-hidden="true" />
+              <span className="min-w-0">
+                <span className="font-medium">{row.label}</span>
+                {row.detail != null ? (
+                  <>
+                    {' · '}
+                    <span className="text-foreground-neutral-subtle">{row.detail}</span>
+                  </>
+                ) : null}
+              </span>
+              <span
+                aria-hidden="true"
+                className="h-px flex-1 border-t border-dashed border-current opacity-30"
+              />
+              <RowMetadata meta={row.meta} />
+            </span>
+          </LogContent>
+        </LogRow>
+      );
+    case 'raw':
+      return (
+        <LogDisclosure indent={indent}>
+          <LogDisclosureTrigger
+            timestamp={new Date(row.timestamp)}
+            summary={compactPreview(row.raw)}
+            className="text-orange-600 dark:text-orange-400"
+          >
+            <span className="inline-flex min-w-0 items-center gap-6">
+              <Icon name="errorWarningLine" className="size-14 flex-none" aria-hidden="true" />
+              <span className="truncate">{row.label}</span>
+            </span>
+          </LogDisclosureTrigger>
+          <LogDisclosureContent>
+            <LogContent variant="code">
+              <PreviewText text={row.raw} />
+            </LogContent>
+          </LogDisclosureContent>
+        </LogDisclosure>
+      );
+    default:
+      return assertNever(row);
+  }
+}
+
+function MessageIcon({role, terminalFailure}: {role: string; terminalFailure: boolean}) {
+  const name = terminalFailure
+    ? 'closeCircleLine'
+    : role === 'user'
+      ? 'userLine'
+      : role === 'assistant'
+        ? 'robot2Line'
+        : 'message2Line';
+
+  return (
+    <Icon
+      name={name}
+      className={cn(
+        'mt-2 size-14 flex-none',
+        terminalFailure ? 'text-red-600 dark:text-red-400' : 'text-foreground-neutral-muted',
+      )}
+      aria-hidden="true"
+    />
+  );
+}
+
+function MessageRoleLabel({label, terminalFailure}: {label: string; terminalFailure: boolean}) {
+  return (
+    <span
+      className={cn(
+        'min-w-0 font-code text-foreground-neutral-muted',
+        terminalFailure && 'text-foreground-highlight-error',
+      )}
+    >
+      <span className="truncate">{label}</span>
+    </span>
+  );
+}
+
+function RowMetadata({meta, className}: {meta: readonly SessionViewRowMeta[]; className?: string}) {
+  if (meta.length === 0) return null;
+
+  const inlineMeta = meta.length === 1 && meta[0]?.inline !== false ? meta[0] : null;
+  if (inlineMeta != null) {
+    return (
+      <span
+        className={cn('font-code text-xs text-foreground-neutral-muted', className)}
+        title={`${inlineMeta.label}: ${inlineMeta.value}`}
+      >
+        {inlineMeta.value}
+      </span>
+    );
+  }
+
+  return (
+    <span className={className}>
+      <MetadataTrigger meta={meta} />
+    </span>
+  );
+}
+
+function MetadataTrigger({meta}: {meta: readonly SessionViewRowMeta[]}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          className="inline-flex size-20 flex-none items-center justify-center rounded-4 text-foreground-neutral-muted opacity-60 transition-opacity hover:bg-background-components-hover hover:text-foreground-neutral-base hover:opacity-100 focus-visible:opacity-100 focus-visible:shadow-[inset_0_0_0_2px_var(--color-primary-500)] group-hover/log-row:opacity-100"
+          aria-label="Show message metadata"
+        >
+          <Icon name="informationLine" className="size-12" aria-hidden="true" />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent align="end" variant="inverted" className="max-w-360 px-8 py-6">
+        <span className="grid grid-cols-[max-content_minmax(0,1fr)] gap-x-8 gap-y-2 font-code text-xs">
+          {meta.map((item) => (
+            <Fragment key={`${item.label}-${item.value}`}>
+              <span className="text-foreground-contrast-secondary">{item.label}</span>
+              <span className="min-w-0 break-all text-foreground-contrast-primary">
+                {item.value}
+              </span>
+            </Fragment>
+          ))}
+        </span>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+function PreviewText({text}: {text: string}) {
+  const [expanded, setExpanded] = useState(false);
+  const truncated = text.length > PREVIEW_CHAR_LIMIT;
+  const visible = truncated && !expanded ? `${text.slice(0, PREVIEW_CHAR_LIMIT)}…` : text;
+
+  return (
+    <>
+      {visible}
+      {truncated ? (
+        <button
+          type="button"
+          aria-expanded={expanded}
+          className="ml-8 inline-flex min-h-24 items-center rounded-4 px-6 font-display text-xs text-foreground-highlight-interactive focus-visible:shadow-[inset_0_0_0_2px_var(--color-primary-500)]"
+          onClick={() => setExpanded((value) => !value)}
+        >
+          {expanded ? 'show less' : 'show more'}
+        </button>
+      ) : null}
+    </>
+  );
+}
+
+function compactPreview(value: string): string {
+  // Normalize only a bounded head: tool output can be megabytes, and this runs
+  // per render for every disclosure trigger.
+  const head = value.length > 200 ? value.slice(0, 200) : value;
+  const singleLine = head.replace(WHITESPACE, ' ').trim();
+  if (singleLine.length <= 80) return singleLine;
+  return `${singleLine.slice(0, 80)}…`;
+}
+
+function wordSummary(value: string): string {
+  const truncated = value.length > WORD_SUMMARY_CHAR_LIMIT;
+  const head = truncated ? value.slice(0, WORD_SUMMARY_CHAR_LIMIT) : value;
+  const count = head.trim().split(WORD_SEPARATOR).filter(Boolean).length;
+  const marker = truncated ? '+' : '';
+  return `${count}${marker} ${count === 1 ? 'word' : 'words'}`;
+}
+
+function assertNever(value: never): never {
+  throw new Error(`unexpected agent session row: ${JSON.stringify(value)}`);
+}

package/src/components/index.ts

@@ -0,0 +1,15 @@
+export {LogGroup, type LogGroupProps} from './log-group.js';
+export {
+  LogView,
+  type LogViewProps,
+  LogViewSkeleton,
+  type LogViewSkeletonProps,
+} from './log-view.js';
+export {OutputLogRow, type OutputLogRowProps} from './output-log-row.js';
+export {
+  CappedMarker,
+  EndMarker,
+  type EndMarkerProps,
+  GapMarker,
+  RunnerLostMarker,
+} from './system-markers.js';

package/src/components/log-group.stories.tsx

@@ -0,0 +1,204 @@
+import {LogRows} from '@shipfox/react-ui/log';
+import type {Meta, StoryObj} from '@storybook/react';
+import {expect, userEvent, within} from 'storybook/test';
+import type {GroupLogNode, GroupStartLogRecord, OutputLogRecord} from '#core/log-tree.js';
+import {LogGroup} from './log-group.js';
+import {OutputLogRow} from './output-log-row.js';
+import {RunnerLostMarker} from './system-markers.js';
+
+const origin = new Date('2026-06-23T10:00:00.000Z').getTime();
+const at = (offsetSeconds: number) => origin + offsetSeconds * 1000;
+
+const groupStart = (groupId: string, name: string): GroupStartLogRecord => ({
+  v: 1,
+  ts: at(0),
+  type: 'group_start',
+  group_id: groupId,
+  parent_group_id: null,
+  name,
+});
+
+const out = (
+  data: string,
+  line: number,
+  stream: 'stdout' | 'stderr' = 'stdout',
+): OutputLogRecord => ({
+  v: 1,
+  ts: at(line),
+  type: 'output',
+  stream,
+  data,
+});
+
+const group = (over: Partial<GroupLogNode> & Pick<GroupLogNode, 'record'>): GroupLogNode => ({
+  kind: 'group',
+  seq: 0,
+  closed: false,
+  endTs: null,
+  hasError: false,
+  lineCount: 0,
+  children: [],
+  ...over,
+});
+
+const rows = (records: OutputLogRecord[]) =>
+  records.map((record) => (
+    <OutputLogRow key={record.ts + record.data} record={record} lineNumber={null} indent={1} />
+  ));
+
+const buildChildren = [
+  out('Compiling 1284 modules\n', 1),
+  out('Linking 318 packages\n', 2),
+  out('Done\n', 3),
+];
+
+const meta = {
+  title: 'Logs/LogGroup',
+  component: LogGroup,
+  parameters: {layout: 'padded'},
+  tags: ['autodocs'],
+} satisfies Meta<typeof LogGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const BUILD_TRIGGER = /Build/;
+
+export const Playground: Story = {
+  render: () => (
+    <div className="max-w-3xl">
+      <LogRows>
+        <LogGroup
+          node={group({
+            record: groupStart('g1', 'Build'),
+            closed: true,
+            endTs: at(3),
+            lineCount: 3,
+          })}
+          depth={0}
+          terminated={false}
+        >
+          {rows(buildChildren)}
+        </LogGroup>
+      </LogRows>
+    </div>
+  ),
+};
+
+export const Open: Story = {
+  render: () => (
+    <div className="max-w-3xl">
+      <LogRows>
+        <LogGroup
+          node={group({
+            record: groupStart('g1', 'Build'),
+            closed: true,
+            endTs: at(3),
+            lineCount: 3,
+          })}
+          depth={0}
+          terminated={false}
+          defaultOpen
+        >
+          {rows(buildChildren)}
+        </LogGroup>
+      </LogRows>
+    </div>
+  ),
+};
+
+export const Running: Story = {
+  render: () => (
+    <div className="max-w-3xl">
+      <LogRows>
+        <LogGroup
+          node={group({record: groupStart('g1', 'Build'), lineCount: 2})}
+          depth={0}
+          terminated={false}
+          defaultOpen
+        >
+          {rows([out('Compiling...\n', 1), out('still going\n', 2)])}
+        </LogGroup>
+      </LogRows>
+    </div>
+  ),
+};
+
+export const Incomplete: Story = {
+  render: () => (
+    <div className="max-w-3xl">
+      <LogRows>
+        <LogGroup
+          node={group({record: groupStart('g1', 'Build'), lineCount: 1})}
+          depth={0}
+          terminated
+          defaultOpen
+        >
+          {rows([out('Compiling...\n', 1)])}
+        </LogGroup>
+      </LogRows>
+    </div>
+  ),
+};
+
+export const Truncated: Story = {
+  render: () => (
+    <div className="max-w-3xl">
+      <LogRows>
+        <LogGroup
+          node={group({
+            record: groupStart('g1', 'Build'),
+            closed: true,
+            endTs: null,
+            lineCount: 1,
+          })}
+          depth={0}
+          terminated={false}
+          defaultOpen
+        >
+          {rows([out('Compiling...\n', 1)])}
+        </LogGroup>
+      </LogRows>
+    </div>
+  ),
+};
+
+/**
+ * A genuine subtree failure (a `runner_lost`) draws an inset red bar on the header (a
+ * border, not a fill). stderr alone never triggers it — stderr is a channel, not an error.
+ */
+export const ErrorBar: Story = {
+  render: () => (
+    <div className="max-w-3xl">
+      <LogRows>
+        <LogGroup
+          node={group({
+            record: groupStart('g1', 'Build'),
+            closed: true,
+            endTs: null,
+            hasError: true,
+            lineCount: 1,
+          })}
+          depth={0}
+          terminated
+        >
+          <OutputLogRow record={out('connecting to runner...\n', 1)} lineNumber={null} indent={1} />
+          <RunnerLostMarker record={{v: 1, ts: at(2), type: 'runner_lost'}} />
+        </LogGroup>
+      </LogRows>
+    </div>
+  ),
+};
+
+export const Toggle: Story = {
+  ...Playground,
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+    const trigger = canvas.getByRole('button', {name: BUILD_TRIGGER});
+
+    await expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    await user.click(trigger);
+    await expect(trigger).toHaveAttribute('aria-expanded', 'true');
+  },
+};

package/src/components/log-group.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import {Icon} from '@shipfox/react-ui/icon';
+import {LogDisclosure, LogDisclosureContent, LogDisclosureTrigger} from '@shipfox/react-ui/log';
+import {cn, formatDuration} from '@shipfox/react-ui/utils';
+import type {ReactNode} from 'react';
+import type {GroupLogNode} from '#core/log-tree.js';
+
+export interface LogGroupProps {
+  node: GroupLogNode;
+  depth: number;
+  terminated: boolean;
+  children: ReactNode;
+  defaultOpen?: boolean;
+}
+
+export function LogGroup({node, depth, terminated, children, defaultOpen = false}: LogGroupProps) {
+  const lineLabel = `${node.lineCount} ${node.lineCount === 1 ? 'line' : 'lines'}`;
+
+  return (
+    <LogDisclosure indent={depth} defaultOpen={defaultOpen}>
+      <LogDisclosureTrigger
+        summary={lineLabel}
+        trailing={<GroupStatus node={node} terminated={terminated} />}
+        className={cn(node.hasError && 'shadow-[inset_2px_0_0_var(--color-red-500)]')}
+      >
+        {node.record.name}
+      </LogDisclosureTrigger>
+      <LogDisclosureContent rail={false}>{children}</LogDisclosureContent>
+    </LogDisclosure>
+  );
+}
+
+function GroupStatus({node, terminated}: {node: GroupLogNode; terminated: boolean}): ReactNode {
+  if (node.closed && node.endTs != null) {
+    return (
+      <span className="font-code tabular-nums">{formatDuration(node.endTs - node.record.ts)}</span>
+    );
+  }
+
+  // No clean end: either still open under a terminated stream (runner died mid-group), or
+  // closed only because an ancestor's group_end cascaded (its own end was dropped, so endTs
+  // is null). Either way show "incomplete" rather than a blank slot or a forever spinner.
+  if (node.closed || terminated) {
+    return <span className="text-foreground-neutral-muted">incomplete</span>;
+  }
+
+  return (
+    <span className="inline-flex items-center gap-4 text-foreground-neutral-muted">
+      <Icon name="loader4Line" className="size-12 motion-safe:animate-spin" aria-hidden="true" />
+      running
+    </span>
+  );
+}