@aragon-agent/cli 0.6.3 → 0.6.7

package/dist/ui/composer-rows.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Composer layout (tui-paste-handling section 5.5) -- pure. No Ink, no React.
+ *
+ * THE ONE PLACE THAT MAPS A BUFFER INDEX TO A SCREEN CELL (I-9). The composer
+ * used to hand its buffer to Ink one `<Text>` per logical line and let Yoga wrap
+ * it, which is fine until the draft is taller than the frame: `AppShell` gives
+ * the bottom chrome `flexShrink={0}`, so a tall composer does not grow the frame
+ * -- Yoga takes the rows out of the transcript and `overflow: hidden` clips them
+ * away, while `layout/budget.ts` keeps telling five consumers the composer is
+ * three rows tall. Four hundred presses of `Shift+Enter` do it without pasting
+ * anything.
+ *
+ * So the wrap happens HERE, the row count is a number this module returns, and
+ * `budget.ts` is told that number (I-8).
+ *
+ * HARD WRAP BY DISPLAY COLUMN, NEVER `layout/wrap-rows.ts::wrapToRows` (D-15).
+ * That function is a PROSE wrapper: it splits on `/\s+/` and rejoins with single
+ * spaces, so it destroys indentation and makes the character-index-to-screen-cell
+ * mapping the caret depends on impossible to state, let alone compute.
+ */
+export interface ComposerSegment {
+    readonly text: string;
+    readonly kind: 'text' | 'token';
+}
+export interface ComposerRow {
+    readonly segments: ComposerSegment[];
+}
+export interface ComposerLayout {
+    /** At most `maxRows`, and always containing the caret when `active`. */
+    readonly rows: ComposerRow[];
+    /** Index into `rows`, or -1 when the composer is not focused. */
+    readonly cursorRow: number;
+    /** Display column within that row. */
+    readonly cursorCol: number;
+    /** Rows the buffer occupies BEFORE the window was applied. */
+    readonly totalRows: number;
+    readonly hiddenAbove: number;
+    readonly hiddenBelow: number;
+}
+export interface ComposerLayoutInput {
+    readonly buffer: string;
+    readonly cursor: number;
+    readonly cols: number;
+    readonly maxRows: number;
+    readonly active: boolean;
+}
+/** Total display width of a run, using the same table the layout used. */
+export declare function displayWidth(text: string): number;
+/**
+ * Wrap `buffer` into rows, locate the caret, and select a window of at most
+ * `maxRows` rows that contains it.
+ *
+ * The window is pinned to the BOTTOM -- where the user is typing -- and pulled up
+ * only far enough to keep the caret visible. That is deterministic, which matters
+ * because this function holds no state between calls: a scroll offset would have
+ * to live in the reducer and would then need its own invalidation rules.
+ */
+export declare function layoutComposer(input: ComposerLayoutInput): ComposerLayout;
+export interface RowSplit {
+    readonly before: ComposerSegment[];
+    /** The one cell the caret sits on, or `null` when it sits past the last one. */
+    readonly at: ComposerSegment | null;
+    readonly after: ComposerSegment[];
+}
+/**
+ * Split one row at a display column so the renderer can draw an inverse caret on
+ * exactly one cell.
+ *
+ * Lives here rather than in the component because it walks the SAME width table
+ * `layoutComposer` walked (I-9): a second, subtly different measurement is how
+ * the caret ends up drawn on a cell that does not hold the character it is on.
+ */
+export declare function splitRowAtColumn(row: ComposerRow, column: number): RowSplit;

package/dist/ui/composer-rows.js

@@ -0,0 +1,201 @@
+/**
+ * Composer layout (tui-paste-handling section 5.5) -- pure. No Ink, no React.
+ *
+ * THE ONE PLACE THAT MAPS A BUFFER INDEX TO A SCREEN CELL (I-9). The composer
+ * used to hand its buffer to Ink one `<Text>` per logical line and let Yoga wrap
+ * it, which is fine until the draft is taller than the frame: `AppShell` gives
+ * the bottom chrome `flexShrink={0}`, so a tall composer does not grow the frame
+ * -- Yoga takes the rows out of the transcript and `overflow: hidden` clips them
+ * away, while `layout/budget.ts` keeps telling five consumers the composer is
+ * three rows tall. Four hundred presses of `Shift+Enter` do it without pasting
+ * anything.
+ *
+ * So the wrap happens HERE, the row count is a number this module returns, and
+ * `budget.ts` is told that number (I-8).
+ *
+ * HARD WRAP BY DISPLAY COLUMN, NEVER `layout/wrap-rows.ts::wrapToRows` (D-15).
+ * That function is a PROSE wrapper: it splits on `/\s+/` and rejoins with single
+ * spaces, so it destroys indentation and makes the character-index-to-screen-cell
+ * mapping the caret depends on impossible to state, let alone compute.
+ */
+import stringWidth from 'string-width';
+import { tokenSpans } from './paste-tokens.js';
+/**
+ * Columns a TAB advances to.
+ *
+ * TABS ARE EXPANDED TO SPACES FOR DISPLAY ONLY -- the buffer keeps the tab, so
+ * the model receives exactly what was pasted. The alternative is to emit the raw
+ * tab and let the terminal expand it, which puts the terminal's tab stop (8) and
+ * this module's column arithmetic in disagreement: the row would overflow its box
+ * and the terminal would wrap it a second time, which is the corruption the whole
+ * feature exists to remove.
+ */
+const TAB_WIDTH = 4;
+/**
+ * Display width of one code point.
+ *
+ * The ASCII fast path matters: `layoutComposer` runs on every keystroke and a
+ * recalled prompt-history entry can be thousands of characters, so one
+ * `string-width` call per character would be the cost this package spent
+ * `tui-render-performance` removing.
+ */
+function charWidth(ch) {
+    const code = ch.codePointAt(0) ?? 0;
+    if (code >= 0x20 && code < 0x7f)
+        return 1;
+    return stringWidth(ch);
+}
+/** Total display width of a run, using the same table the layout used. */
+export function displayWidth(text) {
+    let w = 0;
+    for (const ch of text)
+        w += charWidth(ch);
+    return w;
+}
+/**
+ * Wrap `buffer` into rows, locate the caret, and select a window of at most
+ * `maxRows` rows that contains it.
+ *
+ * The window is pinned to the BOTTOM -- where the user is typing -- and pulled up
+ * only far enough to keep the caret visible. That is deterministic, which matters
+ * because this function holds no state between calls: a scroll offset would have
+ * to live in the reducer and would then need its own invalidation rules.
+ */
+export function layoutComposer(input) {
+    const { buffer, cursor, active } = input;
+    const cols = Math.max(1, Math.floor(input.cols));
+    const maxRows = input.maxRows >= 1 ? Math.floor(input.maxRows) : 1;
+    const spans = tokenSpans(buffer);
+    let spanIndex = 0;
+    /** Monotonic in `index`, which is why the pointer is safe. */
+    const kindAt = (index) => {
+        while (spanIndex < spans.length && spans[spanIndex].end <= index)
+            spanIndex += 1;
+        const span = spans[spanIndex];
+        return span && index >= span.start && index < span.end ? 'token' : 'text';
+    };
+    const rows = [];
+    let segments = [];
+    let col = 0;
+    let cursorRowAbs = -1;
+    let cursorCol = 0;
+    const breakRow = () => {
+        rows.push({ segments });
+        segments = [];
+        col = 0;
+    };
+    const append = (text, width, kind) => {
+        const last = segments[segments.length - 1];
+        if (last && last.kind === kind)
+            segments[segments.length - 1] = { text: last.text + text, kind };
+        else
+            segments.push({ text, kind });
+        col += width;
+    };
+    const ensureRoom = (width) => {
+        if (col > 0 && col + width > cols)
+            breakRow();
+    };
+    const length = buffer.length;
+    let i = 0;
+    while (i <= length) {
+        const atCursor = active && i === cursor && cursorRowAbs === -1;
+        if (i === length) {
+            if (atCursor) {
+                ensureRoom(1);
+                cursorRowAbs = rows.length;
+                cursorCol = col;
+            }
+            break;
+        }
+        const ch = String.fromCodePoint(buffer.codePointAt(i));
+        if (ch === '\n') {
+            if (atCursor) {
+                cursorRowAbs = rows.length;
+                cursorCol = col;
+            }
+            breakRow();
+            i += 1;
+            continue;
+        }
+        const kind = kindAt(i);
+        if (ch === '\t') {
+            let advance = TAB_WIDTH - (col % TAB_WIDTH);
+            if (col > 0 && col + advance > cols) {
+                breakRow();
+                advance = TAB_WIDTH;
+            }
+            if (atCursor) {
+                cursorRowAbs = rows.length;
+                cursorCol = col;
+            }
+            append(' '.repeat(advance), advance, kind);
+            i += 1;
+            continue;
+        }
+        const width = charWidth(ch);
+        ensureRoom(width);
+        if (atCursor) {
+            cursorRowAbs = rows.length;
+            cursorCol = col;
+        }
+        append(ch, width, kind);
+        i += ch.length;
+    }
+    rows.push({ segments });
+    const totalRows = rows.length;
+    const cap = Math.max(1, Math.min(maxRows, totalRows));
+    let start = Math.max(0, totalRows - cap);
+    if (cursorRowAbs >= 0) {
+        if (cursorRowAbs < start)
+            start = cursorRowAbs;
+        else if (cursorRowAbs >= start + cap)
+            start = Math.min(totalRows - cap, cursorRowAbs - cap + 1);
+    }
+    const windowed = rows.slice(start, start + cap);
+    return {
+        rows: windowed,
+        cursorRow: cursorRowAbs >= 0 ? cursorRowAbs - start : -1,
+        cursorCol,
+        totalRows,
+        hiddenAbove: start,
+        hiddenBelow: totalRows - start - windowed.length,
+    };
+}
+/**
+ * Split one row at a display column so the renderer can draw an inverse caret on
+ * exactly one cell.
+ *
+ * Lives here rather than in the component because it walks the SAME width table
+ * `layoutComposer` walked (I-9): a second, subtly different measurement is how
+ * the caret ends up drawn on a cell that does not hold the character it is on.
+ */
+export function splitRowAtColumn(row, column) {
+    const before = [];
+    const after = [];
+    let at = null;
+    let x = 0;
+    const push = (list, text, kind) => {
+        const last = list[list.length - 1];
+        if (last && last.kind === kind)
+            list[list.length - 1] = { text: last.text + text, kind };
+        else
+            list.push({ text, kind });
+    };
+    for (const segment of row.segments) {
+        if (at !== null) {
+            push(after, segment.text, segment.kind);
+            continue;
+        }
+        for (const ch of segment.text) {
+            if (at === null && x === column) {
+                at = { text: ch, kind: segment.kind };
+            }
+            else {
+                push(at === null ? before : after, ch, segment.kind);
+            }
+            x += charWidth(ch);
+        }
+    }
+    return { before, at, after };
+}

package/dist/ui/editor-reducer.d.ts

@@ -22,13 +22,41 @@
  *
  * Extracted from the component so it is unit-testable without mounting Ink.
  */
+import { type PasteRecord } from './paste-tokens.js';
 export interface EditorState {
     buffer: string;
     cursor: number;
     historyIndex: number | null;
     dismissed: boolean;
     sel: number;
+    /**
+     * Payloads for the collapse tokens currently in `buffer`
+     * (tui-paste-handling section 5.3).
+     *
+     * Pruned to `referencedIds(buffer)` on EVERY buffer-changing action and
+     * emptied by `clear` (I-7). Without both, a payload outlives the draft that
+     * referenced it, unbounded, for the whole session.
+     */
+    pastes: ReadonlyMap<number, PasteRecord>;
 }
+/**
+ * One run of an `input` chunk that mixed typing and pasting.
+ *
+ * THE `id` IS ALLOCATED BY THE CALLER (P1-5). React may run a reducer more than
+ * once for a single action -- eager evaluation in `dispatchSetState`, base-queue
+ * replay after a bailout, StrictMode -- so a counter read and written inside one
+ * would skip ids and produce two computed states differing in the token TEXT.
+ * `PromptInput` calls `allocatePasteId()` while building these segments, and the
+ * reducer stays a pure function of `(state, action)`.
+ */
+export type InputSegment = {
+    readonly kind: 'text';
+    readonly text: string;
+} | {
+    readonly kind: 'paste';
+    readonly text: string;
+    readonly id: number;
+};
 /**
  * A `type` and not an `interface` because it is a discriminated union — the one
  * documented exception to this package's interface-first convention.
@@ -57,6 +85,15 @@ export type EditorAction = {
     type: 'dismiss';
 } | {
     type: 'clear';
+}
+/**
+ * ONE chunk of stdin, already split into ordered runs. The only new action,
+ * and it is what keeps the one-dispatch-per-key rule true for a chunk that
+ * carried both a paste and the keystrokes beside it.
+ */
+ | {
+    type: 'input';
+    segments: InputSegment[];
 };
 export declare const INITIAL_EDITOR_STATE: EditorState;
 export declare function editorReducer(state: EditorState, action: EditorAction): EditorState;

package/dist/ui/editor-reducer.js

@@ -22,12 +22,15 @@
  *
  * Extracted from the component so it is unit-testable without mounting Ink.
  */
+import { expandRangeOverTokens, formatPasteToken, makePasteRecord, referencedIds, shouldCollapse, snapOutOfToken, } from './paste-tokens.js';
+const NO_PASTES = new Map();
 export const INITIAL_EDITOR_STATE = {
     buffer: '',
     cursor: 0,
     historyIndex: null,
     dismissed: false,
     sel: 0,
+    pastes: NO_PASTES,
 };
 /**
  * The three flags `resetDraftFlags()` used to clear with three separate
@@ -40,26 +43,99 @@ export const INITIAL_EDITOR_STATE = {
  * (the candidate list is about to be recomputed).
  */
 const DRAFT_FLAGS = { historyIndex: null, dismissed: false, sel: 0 };
+/**
+ * Drop payloads the buffer no longer references (I-7).
+ *
+ * A WRAPPER, NOT A LINE IN ONE BRANCH (P1-6). v1 of the design pruned only inside
+ * `input`, which leaves `replace` (the action behind `Ctrl+U` / `Ctrl+K` /
+ * `Ctrl+W` and every `applyEdit`), `backspace` and `recall` able to delete a token
+ * without releasing its payload. A rule the body contradicts is worse than no
+ * rule, because the next reader trusts the invariant.
+ *
+ * `moveCursor`, `select` and `dismiss` do not change the buffer and are left
+ * alone, which keeps their "return the same object so React bails out" property.
+ */
+function withPrune(next) {
+    if (next.pastes.size === 0)
+        return next;
+    const live = referencedIds(next.buffer);
+    // EVERY held id is tested, rather than `live.size === next.pastes.size`.
+    // Equal counts do not mean equal sets: `referencedIds` reads the BUFFER, which
+    // can name an id this map never held — a user who types `[Pasted text #99 +2
+    // lines]` by hand, or edits the number inside a real token. One such id
+    // balances out one deleted token and the cheap check then returns early with a
+    // payload the buffer no longer references, which is the leak I-7 forbids.
+    let stale = false;
+    for (const id of next.pastes.keys()) {
+        if (!live.has(id)) {
+            stale = true;
+            break;
+        }
+    }
+    if (!stale)
+        return next;
+    const kept = new Map();
+    for (const [id, record] of next.pastes)
+        if (live.has(id))
+            kept.set(id, record);
+    return { ...next, pastes: kept };
+}
 export function editorReducer(state, action) {
     switch (action.type) {
-        case 'insert':
-            return {
+        case 'insert': {
+            // D-8: typing can never land INSIDE a token. A no-op on a buffer with no
+            // tokens, which is every buffer until the first collapse.
+            const cursor = snapOutOfToken(state.buffer, state.cursor);
+            return withPrune({
                 ...state,
                 ...DRAFT_FLAGS,
-                buffer: state.buffer.slice(0, state.cursor) + action.text + state.buffer.slice(state.cursor),
-                cursor: state.cursor + action.text.length,
-            };
+                buffer: state.buffer.slice(0, cursor) + action.text + state.buffer.slice(cursor),
+                cursor: cursor + action.text.length,
+            });
+        }
         case 'replace':
-            return { ...state, ...DRAFT_FLAGS, buffer: action.buffer, cursor: action.cursor };
+            return withPrune({
+                ...state,
+                ...DRAFT_FLAGS,
+                buffer: action.buffer,
+                cursor: action.cursor,
+            });
         case 'backspace': {
             if (state.cursor <= 0)
                 return state;
-            return {
+            // G5: one `Backspace` immediately after `...lines]` removes the whole
+            // token and releases its payload, in ONE dispatch.
+            const range = expandRangeOverTokens(state.buffer, state.cursor - 1, state.cursor);
+            return withPrune({
+                ...state,
+                ...DRAFT_FLAGS,
+                buffer: state.buffer.slice(0, range.from) + state.buffer.slice(range.to),
+                cursor: range.from,
+            });
+        }
+        case 'input': {
+            let buffer = state.buffer;
+            let cursor = snapOutOfToken(buffer, state.cursor);
+            let pastes = null;
+            for (const segment of action.segments) {
+                const collapse = segment.kind === 'paste' && shouldCollapse(segment.text);
+                let text = segment.text;
+                if (collapse) {
+                    const record = makePasteRecord(segment.id, segment.text);
+                    text = formatPasteToken(record);
+                    pastes = pastes ?? new Map(state.pastes);
+                    pastes.set(record.id, record);
+                }
+                buffer = buffer.slice(0, cursor) + text + buffer.slice(cursor);
+                cursor += text.length;
+            }
+            return withPrune({
                 ...state,
                 ...DRAFT_FLAGS,
-                buffer: state.buffer.slice(0, state.cursor - 1) + state.buffer.slice(state.cursor),
-                cursor: state.cursor - 1,
-            };
+                buffer,
+                cursor,
+                ...(pastes ? { pastes } : {}),
+            });
         }
         case 'moveCursor':
             // NO DRAFT-FLAG RESET. Moving the caret is not an edit: clearing
@@ -74,12 +150,12 @@ export function editorReducer(state, action) {
             // an Esc-dismissed popup that reopened when the user stepped through their
             // history would be a behaviour change smuggled in by a refactor whose whole
             // claim is that input semantics are identical (K-7).
-            return {
+            return withPrune({
                 ...state,
                 buffer: action.buffer,
                 cursor: action.cursor,
                 historyIndex: action.historyIndex,
-            };
+            });
         case 'select':
             return state.sel === action.sel ? state : { ...state, sel: action.sel };
         case 'dismiss':

package/dist/ui/entries/ServiceCard.d.ts

@@ -0,0 +1,66 @@
+/**
+ * ServiceCard — one supervised background service in the transcript
+ * (background-service-supervision §3.8).
+ *
+ * ASCII ONLY: every glyph comes from `pickGlyphs`. `ui/` is inside
+ * `glyphs.test.ts::inScope`, so a literal here fails the scan.
+ *
+ * NO ANIMATED SPINNER, IN ANY STATE (D-14 / P2-7). That is STRICTER than
+ * `single-spinner-while-running` D-1, which suppresses animation only while the
+ * activity line is mounted — and a service can sit at `starting` while the agent
+ * is IDLE, where D-1's "one owner on screen" argument does not reach because
+ * there is no owner on screen. A card that animated only when the agent happened
+ * to be idle would be the worst of both. It uses `glyphs.spinnerStill`
+ * throughout and still accepts `reducedMotion` for consistency with
+ * `EntryView`'s comparator.
+ *
+ * TWO SHAPES, ONE COMPONENT. `terminal: true` is the one-row record a service's
+ * exit appends (D-11); everything else is the live card. They share a component
+ * because they share a colour ladder and a status vocabulary, and splitting them
+ * would be two places to keep those in step.
+ */
+import React from 'react';
+import type { Theme } from '../theme.js';
+import type { TermCapabilities } from '../capabilities.js';
+import { pickGlyphs } from '../glyphs.js';
+import type { ServiceStatus } from '../../proc/types.js';
+export interface ServiceCardProps {
+    serviceId: string;
+    command: string;
+    status: ServiceStatus;
+    url?: string;
+    port?: number;
+    exitCode: number | null;
+    startedAt: number;
+    readyAt?: number;
+    endedAt?: number;
+    rows: readonly string[];
+    /** The one-row record a terminal transition appends. */
+    terminal?: boolean;
+    killIncomplete?: boolean;
+    expanded?: boolean;
+    /** Accepted for comparator consistency; this card never animates (D-14). */
+    reducedMotion?: boolean;
+    theme: Theme;
+    caps: TermCapabilities;
+}
+/**
+ * The card's colour.
+ *
+ * `running` is `toolRunning` rather than the accent: it is alive and listening
+ * on nothing, which is a real third state and not a lesser `ready`. A clean
+ * `exited(0)` is muted, because a command that finished on purpose is not a
+ * failure.
+ */
+export declare function serviceCardColor(props: Pick<ServiceCardProps, 'status' | 'exitCode'>, theme: Theme): string | undefined;
+/** The status glyph, by the same ladder as the colour. */
+export declare function serviceGlyph(props: Pick<ServiceCardProps, 'status' | 'exitCode'>, glyphs: ReturnType<typeof pickGlyphs>): string;
+declare function ServiceCardImpl(props: ServiceCardProps): React.ReactElement;
+/**
+ * `React.memo` with the DEFAULT comparator (tui-render-performance L2 / R3).
+ * `mapEntry` already preserves object identity for untouched entries, so the
+ * props below are stable references on a settled card, and `theme` / `caps` are
+ * `useMemo`d in `App.tsx` (I-L2-1).
+ */
+export declare const ServiceCard: React.MemoExoticComponent<typeof ServiceCardImpl>;
+export {};

package/dist/ui/entries/ServiceCard.js

@@ -0,0 +1,116 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ServiceCard — one supervised background service in the transcript
+ * (background-service-supervision §3.8).
+ *
+ * ASCII ONLY: every glyph comes from `pickGlyphs`. `ui/` is inside
+ * `glyphs.test.ts::inScope`, so a literal here fails the scan.
+ *
+ * NO ANIMATED SPINNER, IN ANY STATE (D-14 / P2-7). That is STRICTER than
+ * `single-spinner-while-running` D-1, which suppresses animation only while the
+ * activity line is mounted — and a service can sit at `starting` while the agent
+ * is IDLE, where D-1's "one owner on screen" argument does not reach because
+ * there is no owner on screen. A card that animated only when the agent happened
+ * to be idle would be the worst of both. It uses `glyphs.spinnerStill`
+ * throughout and still accepts `reducedMotion` for consistency with
+ * `EntryView`'s comparator.
+ *
+ * TWO SHAPES, ONE COMPONENT. `terminal: true` is the one-row record a service's
+ * exit appends (D-11); everything else is the live card. They share a component
+ * because they share a colour ladder and a status vocabulary, and splitting them
+ * would be two places to keep those in step.
+ */
+import React from 'react';
+import { Box, Text } from 'ink';
+import { pickGlyphs } from '../glyphs.js';
+import { railBorderProps } from '../layout/Gutter.js';
+import { formatDuration } from '../../agent/usage.js';
+/** Tail rows the collapsed card draws. Mirrored as a NUMBER in `virtual-window.ts`. */
+const COLLAPSED_TAIL_ROWS = 2;
+/** Tail rows the expanded card draws — the snapshot's own cap. */
+const EXPANDED_TAIL_ROWS = 8;
+/**
+ * The card's colour.
+ *
+ * `running` is `toolRunning` rather than the accent: it is alive and listening
+ * on nothing, which is a real third state and not a lesser `ready`. A clean
+ * `exited(0)` is muted, because a command that finished on purpose is not a
+ * failure.
+ */
+export function serviceCardColor(props, theme) {
+    switch (props.status) {
+        case 'starting':
+            return theme.muted;
+        case 'ready':
+            return theme.accent;
+        case 'running':
+            return theme.toolRunning;
+        case 'failed':
+            return theme.toolError;
+        case 'exited':
+            return props.exitCode === 0 ? theme.muted : theme.toolError;
+        case 'stopped':
+            return theme.muted;
+        default:
+            return theme.muted;
+    }
+}
+/** The status glyph, by the same ladder as the colour. */
+export function serviceGlyph(props, glyphs) {
+    switch (props.status) {
+        case 'starting':
+            return glyphs.toolPending;
+        case 'ready':
+            return glyphs.toolDone;
+        case 'running':
+            return glyphs.toolRunning;
+        case 'failed':
+            return glyphs.toolError;
+        case 'exited':
+            return props.exitCode === 0 ? glyphs.toolDone : glyphs.toolError;
+        case 'stopped':
+            return glyphs.toolPending;
+        default:
+            return glyphs.toolPending;
+    }
+}
+/** The right-hand status clause: what happened, and how long it took. */
+function statusClause(props, dot) {
+    const { status, exitCode, startedAt, readyAt, endedAt } = props;
+    if (status === 'ready') {
+        const took = readyAt === undefined ? '' : `${dot}${formatDuration(readyAt - startedAt)}`;
+        return `ready${took}`;
+    }
+    if (status === 'running')
+        return 'running';
+    if (status === 'starting')
+        return 'starting';
+    const lived = endedAt === undefined ? '' : `${dot}${formatDuration(endedAt - startedAt)}`;
+    if (status === 'stopped')
+        return `stopped${lived}`;
+    if (status === 'failed')
+        return `failed${lived}`;
+    return `exited${exitCode === null ? '' : ` code ${exitCode}`}${lived}`;
+}
+function ServiceCardImpl(props) {
+    const { serviceId, command, url, rows, expanded, terminal, theme, caps } = props;
+    const glyphs = pickGlyphs(caps);
+    const color = serviceCardColor(props, theme);
+    const dot = `  ${glyphs.midDot}  `;
+    const clause = statusClause(props, dot);
+    // THE TERMINAL RECORD IS ONE ROW, ALWAYS. It is a SECOND event at a SECOND
+    // time — the only thing `<Static>` permits once the live card is printed — so
+    // it names what happened and nothing else (D-11).
+    if (terminal) {
+        return (_jsx(Box, { flexDirection: "row", children: _jsxs(Text, { color: color, wrap: "truncate", children: ["service ", serviceId, " ", clause, props.killIncomplete ? ' (may have left a detached child)' : ''] }) }));
+    }
+    const shown = rows.slice(-(expanded ? EXPANDED_TAIL_ROWS : COLLAPSED_TAIL_ROWS));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: theme.accent, bold: true, children: ["service ", serviceId] }), _jsxs(Text, { color: theme.muted, wrap: "truncate", children: ['  ', command] }), _jsxs(Text, { color: color, wrap: "truncate", children: [dot, clause] })] }), url !== undefined && (_jsxs(Box, { flexDirection: "row", flexShrink: 0, paddingLeft: 1, children: [_jsx(Text, { color: theme.primary, children: url }), _jsxs(Text, { color: theme.muted, children: [dot, "ctrl+c stop", dot, "ctrl+o log"] })] })), shown.length > 0 && (_jsx(Box, { flexDirection: "column", flexShrink: 0, paddingLeft: 1, ...railBorderProps(glyphs.railVertical, theme.border), children: shown.map((line, index) => (_jsx(Text, { color: theme.muted, wrap: "truncate", children: line }, index))) }))] }));
+}
+/**
+ * `React.memo` with the DEFAULT comparator (tui-render-performance L2 / R3).
+ * `mapEntry` already preserves object identity for untouched entries, so the
+ * props below are stable references on a settled card, and `theme` / `caps` are
+ * `useMemo`d in `App.tsx` (I-L2-1).
+ */
+export const ServiceCard = React.memo(ServiceCardImpl);