omkit 0.8.17 → 0.8.19

package/dist/cli/ui/views/OmList.d.ts

@@ -1,11 +1,15 @@
 import { type ReactElement } from "react";
 import type { DiscoveredOm } from "../../../client/registry.ts";
 /**
- * A searchable, arrow-navigable list of oms; Enter selects the highlighted one.
+ * The picker: a searchable, arrow-navigable list of oms; Enter runs the highlighted one.
  *
- * Rows are ordered by {@link byNesting} from the working directory — the same root the path
- * column is rendered from, so the order matches what the column shows: the oms nearest the
- * top of the project first, deeper ones after, and any shown as an absolute path last.
+ * Each row is the om's name and its summary (or, without one, its path); the search matches
+ * both. Under the list, the highlighted om in full: its summary, where it is defined, and the
+ * actions its body calls with their tags — the same outline the skill file shows.
+ *
+ * Rows are ordered by {@link byNesting} from the working directory — the same root the paths
+ * are rendered from, so the oms nearest the top of the project come first, deeper ones after,
+ * and any shown as an absolute path last.
  */
 export declare function OmList({ oms, onSelect, }: {
     oms: DiscoveredOm[];

package/dist/cli/ui/views/OmList.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import path from "node:path";
 import { useMemo } from "react";
-import { Text } from "ink";
+import { Box, Text, useStdout } from "ink";
 import { SearchableList } from "./SearchableList.js";
 import { byNesting } from "../../../client/order.js";
 /** Show the om's path relative to `root` when it's inside it; else the absolute path. */
@@ -9,17 +9,31 @@ function displayPath(file, root) {
     const rel = path.relative(root, file);
     return rel && !rel.startsWith("..") && !path.isAbsolute(rel) ? rel : file;
 }
+function truncate(text, max) {
+    return text.length > max ? `${text.slice(0, Math.max(0, max - 1))}…` : text;
+}
 /**
- * A searchable, arrow-navigable list of oms; Enter selects the highlighted one.
+ * The picker: a searchable, arrow-navigable list of oms; Enter runs the highlighted one.
+ *
+ * Each row is the om's name and its summary (or, without one, its path); the search matches
+ * both. Under the list, the highlighted om in full: its summary, where it is defined, and the
+ * actions its body calls with their tags — the same outline the skill file shows.
  *
- * Rows are ordered by {@link byNesting} from the working directory — the same root the path
- * column is rendered from, so the order matches what the column shows: the oms nearest the
- * top of the project first, deeper ones after, and any shown as an absolute path last.
+ * Rows are ordered by {@link byNesting} from the working directory — the same root the paths
+ * are rendered from, so the oms nearest the top of the project come first, deeper ones after,
+ * and any shown as an absolute path last.
  */
 export function OmList({ oms, onSelect, }) {
     const root = process.cwd();
     const sorted = useMemo(() => [...oms].sort(byNesting(root)), [oms, root]);
-    // Column width so paths line up; capped so one long name can't push paths off-screen.
+    const { stdout } = useStdout();
+    const columns = stdout?.columns || 100;
+    // Column width so summaries line up; capped so one long name can't push them off-screen.
     const nameWidth = Math.min(30, oms.reduce((w, o) => Math.max(w, o.name.length), 0));
-    return (_jsx(SearchableList, { items: sorted, getKey: (o) => o.name, getSearchText: (o) => o.name, onSelect: onSelect, renderRow: (o, selected) => (_jsxs(Text, { children: [_jsx(Text, { color: selected ? "cyan" : undefined, children: selected ? "❯ " : "  " }), _jsx(Text, { bold: selected, children: o.name.padEnd(nameWidth) }), "  ", _jsx(Text, { dimColor: true, children: displayPath(o.file, root) })] })) }));
+    const restWidth = Math.max(20, columns - nameWidth - 6);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "omkit" }), _jsx(Text, { dimColor: true, children: ` · ${oms.length} om${oms.length === 1 ? "" : "s"}` })] }), _jsx(SearchableList, { items: sorted, getKey: (o) => `${o.file}\0${o.name}`, getSearchText: (o) => `${o.name} ${o.summary ?? ""}`, onSelect: onSelect, alwaysShowSearch: true, searchLabel: "search \u203A ", searchPlaceholder: "type to filter by name or summary", renderRow: (o, selected) => (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: selected ? "cyan" : undefined, children: selected ? "❯ " : "  " }), _jsx(Text, { bold: selected, color: selected ? "cyan" : undefined, children: o.name.padEnd(nameWidth) }), "  ", _jsx(Text, { dimColor: true, children: truncate(o.summary ?? displayPath(o.file, root), restWidth) })] })), renderDetail: (o) => (o ? _jsx(OmDetail, { om: o, root: root }) : null) }), _jsx(Text, { dimColor: true, children: "\u2191\u2193 move \u00B7 enter run \u00B7 esc clears search \u00B7 ctrl+c quit" })] }));
+}
+/** The highlighted om in full. */
+function OmDetail({ om, root }) {
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 1, marginTop: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: om.name }), om.summary ? (_jsx(Text, { children: om.summary })) : (_jsxs(Text, { dimColor: true, italic: true, children: ["No summary. Add .describe(", "{ summary }", ") to the om."] })), _jsx(Text, { dimColor: true, children: `${displayPath(om.file, root)}:${om.line}` }), om.calls?.length ? (_jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { dimColor: true, children: "calls " }), om.calls.map((c, i) => (_jsxs(Text, { children: [i > 0 ? _jsx(Text, { dimColor: true, children: " \u2192 " }) : null, c.name, c.tag ? _jsx(Text, { dimColor: true, children: ` [${c.tag}]` }) : null] }, `${c.name}\0${c.tag ?? ""}`)))] })) : null] }));
 }

package/dist/cli/ui/views/SearchableList.d.ts

@@ -14,6 +14,12 @@ export interface SearchableListProps<T> {
     max?: number;
     /** Prefix for the search line. Default "search: ". */
     searchLabel?: string;
+    /** Keep the search line on screen even when the list fits (it shows a placeholder while empty). */
+    alwaysShowSearch?: boolean;
+    /** Dim text shown on an empty, always-visible search line. */
+    searchPlaceholder?: string;
+    /** Drawn under the list for the highlighted item (`undefined` when nothing matches). */
+    renderDetail?: (item: T | undefined) => ReactNode;
 }
 /**
  * A searchable, arrow-navigable list with a scrolling viewport. Owns search, selection, and
@@ -21,4 +27,4 @@ export interface SearchableListProps<T> {
  * `search:` line and the `+N more` footer only appear once the list overflows the viewport
  * (or the user starts typing), so short lists stay a plain arrow list.
  */
-export declare function SearchableList<T>({ items, getKey, getSearchText, renderRow, onSelect, initialIndex, max, searchLabel, }: SearchableListProps<T>): ReactElement;
+export declare function SearchableList<T>({ items, getKey, getSearchText, renderRow, onSelect, initialIndex, max, searchLabel, alwaysShowSearch, searchPlaceholder, renderDetail, }: SearchableListProps<T>): ReactElement;

package/dist/cli/ui/views/SearchableList.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { Box, Text, useInput } from "ink";
 /** Hard cap on visible rows, regardless of `max`. */
@@ -9,7 +9,7 @@ const MAX_VISIBLE = 15;
  * `search:` line and the `+N more` footer only appear once the list overflows the viewport
  * (or the user starts typing), so short lists stay a plain arrow list.
  */
-export function SearchableList({ items, getKey, getSearchText, renderRow, onSelect, initialIndex = 0, max = MAX_VISIBLE, searchLabel = "search: ", }) {
+export function SearchableList({ items, getKey, getSearchText, renderRow, onSelect, initialIndex = 0, max = MAX_VISIBLE, searchLabel = "search: ", alwaysShowSearch, searchPlaceholder, renderDetail, }) {
     // Refs hold the authoritative query/index: Ink can deliver several key events before React
     // re-renders, so the Enter handler must read refs, not a possibly-stale render closure. State
     // mirrors the refs only to drive the display.
@@ -38,6 +38,12 @@ export function SearchableList({ items, getKey, getSearchText, renderRow, onSele
             if (picked)
                 onSelect(picked);
         }
+        else if (key.escape) {
+            queryRef.current = "";
+            indexRef.current = 0;
+            setQuery("");
+            setIndex(0);
+        }
         else if (key.backspace || key.delete) {
             queryRef.current = queryRef.current.slice(0, -1);
             indexRef.current = 0;
@@ -61,6 +67,10 @@ export function SearchableList({ items, getKey, getSearchText, renderRow, onSele
     const above = start;
     const below = filtered.length - (start + window);
     const overflows = items.length > Math.min(max, MAX_VISIBLE);
-    const showSearch = overflows || query.length > 0;
-    return (_jsxs(Box, { flexDirection: "column", children: [showSearch ? (_jsxs(Text, { dimColor: true, children: [searchLabel, query] })) : null, above > 0 ? _jsx(Text, { dimColor: true, children: `↑ ${above} more` }) : null, filtered.length === 0 ? _jsx(Text, { dimColor: true, children: "no matches" }) : null, visible.map((it, vi) => (_jsx(Box, { children: renderRow(it, start + vi === selected) }, getKey(it)))), below > 0 ? _jsx(Text, { dimColor: true, children: `+${below} more` }) : null] }));
+    const showSearch = alwaysShowSearch || overflows || query.length > 0;
+    return (_jsxs(Box, { flexDirection: "column", children: [showSearch ? (_jsx(SearchLine, { label: searchLabel, query: query, placeholder: searchPlaceholder })) : null, above > 0 ? _jsx(Text, { dimColor: true, children: `↑ ${above} more` }) : null, filtered.length === 0 ? _jsx(Text, { dimColor: true, children: "no matches" }) : null, visible.map((it, vi) => (_jsx(Box, { children: renderRow(it, start + vi === selected) }, getKey(it)))), below > 0 ? _jsx(Text, { dimColor: true, children: `+${below} more` }) : null, renderDetail ? renderDetail(filtered[selected]) : null] }));
+}
+/** The search line: what has been typed so far, or a dim hint while it is empty. */
+function SearchLine({ label, query, placeholder, }) {
+    return (_jsxs(Text, { dimColor: true, children: [label, query ? _jsx(Text, { color: "cyan", children: query }) : placeholder] }));
 }

package/dist/client/check.js

@@ -1,5 +1,6 @@
 import ts from "typescript";
 import path from "node:path";
+import { checkedProgram } from "./tsCache.js";
 /** Typecheck the project (`tsc --noEmit`) and return per-file diagnostics. */
 export function runCheck(tsconfigPath) {
     const configFile = ts.readConfigFile(tsconfigPath, ts.sys.readFile);
@@ -7,24 +8,20 @@ export function runCheck(tsconfigPath) {
         return [{ file: tsconfigPath, line: 0, message: msg(configFile.error) }];
     }
     const parsed = ts.parseJsonConfigFileContent(configFile.config, ts.sys, path.resolve(path.dirname(tsconfigPath)));
-    const program = ts.createProgram({
-        rootNames: parsed.fileNames,
-        options: { ...parsed.options, noEmit: true },
-    });
+    const checked = checkedProgram(parsed, tsconfigPath);
+    const program = checked.program;
     const canonical = (f) => ts.sys.useCaseSensitiveFileNames ? path.normalize(f) : path.normalize(f).toLowerCase();
     const fileSet = new Set(parsed.fileNames.map((f) => canonical(f)));
     const out = [];
     for (const sf of program.getSourceFiles()) {
         if (!fileSet.has(canonical(sf.fileName)))
             continue;
-        for (const d of [
-            ...program.getSyntacticDiagnostics(sf),
-            ...program.getSemanticDiagnostics(sf),
-        ]) {
+        for (const d of [...program.getSyntacticDiagnostics(sf), ...checked.semanticDiagnostics(sf)]) {
             const line = d.start !== undefined ? sf.getLineAndCharacterOfPosition(d.start).line + 1 : 0;
             out.push({ file: sf.fileName, line, message: msg(d) });
         }
     }
+    checked.save();
     return out;
 }
 function msg(d) {

package/dist/client/discovery.js

@@ -6,7 +6,8 @@ import { omHash } from "../foundation/ids.js";
 import { fsSafe } from "../foundation/fsSafe.js";
 import { canonicalPath } from "../foundation/canonicalPath.js";
 import { tsxLoader } from "./runner.js";
-import { chainRoot, importedNames, outlineBody } from "./outline.js";
+import { chainRoot, importedNames, outlineBody, summaryOf } from "./outline.js";
+import { checkedProgram } from "./tsCache.js";
 /**
  * Statically scan the project described by `tsconfigPath` for runnable oms and inspectable
  * actions. Type errors in the user's oms/actions degrade to `warnings` (an editor-in-progress
@@ -19,10 +20,8 @@ export function discover(tsconfigPath) {
     const warnings = [];
     const { parsed, warnings: configWarnings } = loadProject(tsconfigPath);
     warnings.push(...configWarnings);
-    const program = ts.createProgram({
-        rootNames: parsed.fileNames,
-        options: { ...parsed.options, noEmit: true },
-    });
+    const checked = checkedProgram(parsed, tsconfigPath);
+    const program = checked.program;
     const fileSet = new Set(parsed.fileNames.map((f) => canonical(f)));
     for (const sf of program.getSourceFiles()) {
         if (!fileSet.has(canonical(sf.fileName)))
@@ -32,7 +31,7 @@ export function discover(tsconfigPath) {
         // it, `omHash` hashes it, and Node caches modules by it. Canonicalise once here so the
         // whole chain agrees with the filesystem, and with the paths a real run reports.
         const file = canonicalPath(sf.fileName);
-        for (const d of program.getSemanticDiagnostics(sf))
+        for (const d of checked.semanticDiagnostics(sf))
             warnings.push(formatDiagnostic(d));
         const names = omkitImports(sf);
         const outlines = outlinesIn(sf, names.om, importedNames(sf));
@@ -42,11 +41,12 @@ export function discover(tsconfigPath) {
                 (node.expression.text === names.om || node.expression.text === names.step)) {
                 const arg = node.arguments[0];
                 if (arg && ts.isStringLiteralLike(arg)) {
-                    const calls = outlines.get(arg.text);
+                    const { calls, summary } = outlines.get(arg.text) ?? {};
                     oms.push({
                         name: arg.text,
                         file,
                         line: lineOf(sf, node),
+                        ...(summary !== undefined ? { summary } : {}),
                         ...(calls?.length ? { calls } : {}),
                     });
                 }
@@ -73,10 +73,12 @@ export function discover(tsconfigPath) {
             }
         }
     }
+    checked.save();
     return { oms, actions, warnings };
 }
 /**
- * Outline every `om("name")…​.run(body)` chain in a file, keyed by om name.
+ * Outline every `om("name")…​.run(body)` chain in a file, keyed by om name, along with the
+ * chain's literal `.describe({ summary })`.
  *
  * Collected in its own pass rather than alongside the `om(...)` match, because a body is only
  * reachable from the `.run` end of the chain and the om name only from the other — and the
@@ -93,9 +95,12 @@ function outlinesIn(sf, omName, imported) {
             const root = chainRoot(node);
             const body = node.arguments[0];
             const name = root?.call.arguments[0];
-            if (root?.name === omName && name && ts.isStringLiteralLike(name) && body) {
-                if (ts.isFunctionLike(body))
-                    outlines.set(name.text, outlineBody(body, imported));
+            if (root?.name === omName && name && ts.isStringLiteralLike(name)) {
+                const summary = summaryOf(root);
+                outlines.set(name.text, {
+                    ...(body && ts.isFunctionLike(body) ? { calls: outlineBody(body, imported) } : {}),
+                    ...(summary !== undefined ? { summary } : {}),
+                });
             }
         }
         ts.forEachChild(node, visit);

package/dist/client/outline.d.ts

@@ -33,3 +33,10 @@ export declare function chainRoot(node: ts.CallExpression): ChainRoot | undefine
  * not follow indirection. It answers "roughly what happens in here" and nothing stronger.
  */
 export declare function outlineBody(body: ts.Node, imported: ReadonlySet<string>): OmCall[];
+/**
+ * The `.tag("…")` on a chain, taken nearest its root. `calls` is outermost-first, so the last
+ * match is the innermost — the tag attached directly to the action rather than to something
+ * further along the chain.
+ */
+/** The `summary` of a `.describe({ summary: "…" })` in the chain, when it is a string literal. */
+export declare function summaryOf(chain: ChainRoot): string | undefined;

package/dist/client/outline.js

@@ -86,6 +86,26 @@ export function outlineBody(body, imported) {
  * match is the innermost — the tag attached directly to the action rather than to something
  * further along the chain.
  */
+/** The `summary` of a `.describe({ summary: "…" })` in the chain, when it is a string literal. */
+export function summaryOf(chain) {
+    for (const call of chain.calls) {
+        const callee = call.expression;
+        if (!ts.isPropertyAccessExpression(callee) || callee.name.text !== "describe")
+            continue;
+        const arg = call.arguments[0];
+        if (!arg || !ts.isObjectLiteralExpression(arg))
+            continue;
+        for (const prop of arg.properties) {
+            if (ts.isPropertyAssignment(prop) &&
+                ts.isIdentifier(prop.name) &&
+                prop.name.text === "summary" &&
+                ts.isStringLiteralLike(prop.initializer)) {
+                return prop.initializer.text;
+            }
+        }
+    }
+    return undefined;
+}
 function tagOf(chain) {
     let tag;
     for (const call of chain.calls) {

package/dist/client/registry.d.ts

@@ -13,6 +13,12 @@ export interface DiscoveredOm {
     readonly file: string;
     /** 1-based line of the `om(...)` call (informational). */
     readonly line: number;
+    /**
+     * The `.describe({ summary })` text, read statically — present only when it is written as a
+     * string literal. The authoritative value (whatever the expression evaluates to) comes from
+     * the import-based pass, `discoverRegistrations`.
+     */
+    readonly summary?: string;
     /**
      * A static approximation of what the body calls, in source order. Absent when the walk
      * found nothing recognisable. Never a contract — see {@link import("./outline.ts").outlineBody}

package/dist/client/tsCache.d.ts

@@ -0,0 +1,27 @@
+import ts from "typescript";
+/**
+ * A type-checking view of the project that remembers the last check. Discovery and
+ * `omkit check` both build a full program and ask for every om/action file's semantic
+ * diagnostics; this keeps TypeScript's incremental state in a `.tsbuildinfo` file between
+ * processes, so a file whose content (and dependencies) didn't change isn't checked again.
+ *
+ * The program itself is still rebuilt every time — the saving is the checker's work, which
+ * grows with the project's own files. The cache is best-effort throughout: a missing,
+ * stale, or unwritable file only costs a full check, never a wrong answer (TypeScript
+ * validates the stored state against each file's content hash).
+ */
+export interface CheckedProgram {
+    readonly program: ts.Program;
+    /** Semantic diagnostics for `sf` — from the cache when nothing it depends on changed. */
+    semanticDiagnostics(sf: ts.SourceFile): readonly ts.Diagnostic[];
+    /** Persist what this check learned. Never throws. */
+    save(): void;
+}
+export declare function checkedProgram(parsed: ts.ParsedCommandLine, tsconfigPath: string): CheckedProgram;
+/**
+ * Where a project's build info lives: `node_modules/.cache/omkit/` nearest the tsconfig —
+ * the usual home for tool caches, already ignored by git — else the OS temp folder.
+ * Keyed by the tsconfig and the TypeScript version, so two projects (or a TS upgrade)
+ * never share state. `OMKIT_CACHE_DIR` moves it; `OMKIT_NO_CACHE=1` turns it off.
+ */
+export declare function buildInfoFile(tsconfigPath: string): string | undefined;

package/dist/client/tsCache.js

@@ -0,0 +1,103 @@
+import ts from "typescript";
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+import { createHash } from "node:crypto";
+import { canonicalPath } from "../foundation/canonicalPath.js";
+export function checkedProgram(parsed, tsconfigPath) {
+    const file = buildInfoFile(tsconfigPath);
+    if (!file)
+        return uncached(parsed);
+    const options = {
+        ...parsed.options,
+        noEmit: true,
+        incremental: true,
+        // TypeScript compares this against its own forward-slashed spelling of the path
+        tsBuildInfoFile: file.replace(/\\/g, "/"),
+        // the user's own composite/outDir settings describe their build, not this check
+        composite: false,
+    };
+    let builder;
+    try {
+        builder = ts.createIncrementalProgram({
+            rootNames: parsed.fileNames,
+            options,
+            host: ts.createIncrementalCompilerHost(options),
+        });
+    }
+    catch {
+        // a cache TypeScript can't read back (corrupt, foreign) — drop it and check from scratch
+        fs.rmSync(file, { force: true });
+        return uncached(parsed);
+    }
+    return {
+        program: builder.getProgram(),
+        semanticDiagnostics: (sf) => builder.getSemanticDiagnostics(sf),
+        save() {
+            try {
+                // with `noEmit`, emitting writes only the build info
+                builder.emit(undefined, (target, text) => writeAtomic(target, text));
+            }
+            catch {
+                // a cache that can't be written is just a cache miss next time
+            }
+        },
+    };
+}
+function uncached(parsed) {
+    const program = ts.createProgram({
+        rootNames: parsed.fileNames,
+        options: { ...parsed.options, noEmit: true },
+    });
+    return { program, semanticDiagnostics: (sf) => program.getSemanticDiagnostics(sf), save() { } };
+}
+/**
+ * Where a project's build info lives: `node_modules/.cache/omkit/` nearest the tsconfig —
+ * the usual home for tool caches, already ignored by git — else the OS temp folder.
+ * Keyed by the tsconfig and the TypeScript version, so two projects (or a TS upgrade)
+ * never share state. `OMKIT_CACHE_DIR` moves it; `OMKIT_NO_CACHE=1` turns it off.
+ */
+export function buildInfoFile(tsconfigPath) {
+    if (process.env.OMKIT_NO_CACHE === "1")
+        return undefined;
+    const config = canonicalPath(path.resolve(tsconfigPath));
+    const key = createHash("sha1").update(`${config}\0${ts.version}`).digest("hex").slice(0, 12);
+    const name = `${path.basename(config, ".json")}-${key}.tsbuildinfo`;
+    for (const dir of candidateDirs(path.dirname(config))) {
+        try {
+            fs.mkdirSync(dir, { recursive: true });
+            return path.join(dir, name);
+        }
+        catch {
+            // not writable — try the next place
+        }
+    }
+    return undefined;
+}
+function candidateDirs(from) {
+    if (process.env.OMKIT_CACHE_DIR)
+        return [path.resolve(process.env.OMKIT_CACHE_DIR)];
+    const out = [];
+    for (let dir = from;; dir = path.dirname(dir)) {
+        if (fs.existsSync(path.join(dir, "node_modules"))) {
+            out.push(path.join(dir, "node_modules", ".cache", "omkit"));
+            break;
+        }
+        if (path.dirname(dir) === dir)
+            break;
+    }
+    out.push(path.join(os.tmpdir(), "omkit-cache"));
+    return out;
+}
+/** Write via a temp file + rename, so a concurrent reader (a picker, a check) never sees half a file. */
+function writeAtomic(target, text) {
+    const tmp = `${target}.${process.pid}.tmp`;
+    fs.writeFileSync(tmp, text);
+    try {
+        fs.renameSync(tmp, target);
+    }
+    catch (error) {
+        fs.rmSync(tmp, { force: true });
+        throw error;
+    }
+}

package/dist/output/writers/report/report.css

@@ -164,7 +164,8 @@ button { font: inherit; color: inherit; }
 
 .chart { position: relative; min-width: 0; }
 .chart svg { display: block; overflow: hidden; }
-.chart .bar-label { font-size: 12px; fill: var(--bar-text); font-weight: 500; cursor: pointer; }
+/* the row's hit target already spans the label — letting it through keeps the marks under it hoverable */
+.chart .bar-label { font-size: 12px; fill: var(--bar-text); font-weight: 500; pointer-events: none; }
 .chart .hit { fill: transparent; cursor: pointer; }
 .chart .hit:hover + .bar { filter: brightness(1.15); }
 .chart .bar-label.outside { fill: var(--text); }
@@ -190,7 +191,7 @@ button { font: inherit; color: inherit; }
 .flow-seq.parallel { stroke-dasharray: 1 4; stroke-linecap: round; stroke-width: 2; opacity: 0.8; }
 .flow-arrowhead { fill: var(--text-3); }
 .flow-par { fill: var(--text-3); font-size: 10px; font-style: italic; }
-.flow-shot-t { fill: var(--text-3); font-size: 10.5px; pointer-events: none; }
+.flow-shot-t { fill: var(--text-3); font-size: 10.5px; pointer-events: none; stroke: var(--panel); stroke-width: 4px; paint-order: stroke; }
 .flow-card text.sub { fill: var(--text-3); font-size: 11px; }
 .flow-card .tchip text { fill: var(--text); font-size: 10.5px; }
 .flow-card .tchip.more text { fill: var(--text-3); }
@@ -224,12 +225,12 @@ button { font: inherit; color: inherit; }
 .acc-b > .params { margin-bottom: 8px; }
 .acc-b .section-title:first-child { margin-top: 0; }
 .acc-file { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--text-2); }
-.shots { display: grid; gap: 6px; }
-.shot { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 4px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
-.shot:hover { border-color: var(--accent); background: var(--accent-soft); }
-.shot .thumb { width: 64px; }
-.shot .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.shot .t { color: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
+.dshots { display: grid; gap: 6px; }
+.dshot { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 4px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
+.dshot:hover { border-color: var(--accent); background: var(--accent-soft); }
+.dshot .thumb { width: 64px; }
+.dshot .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dshot .t { color: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
 .kv { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 10px; margin: 2px 0 12px; }
 .kv .k { color: var(--text-2); }
 .kv .v { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@@ -472,18 +473,13 @@ a.icon-btn { text-decoration: none; }
 #app.hl-on .flow-card.err-path rect.box { stroke: var(--fail); stroke-width: 1.2; stroke-dasharray: 4 3; }
 #app.hl-on .tree .row.err { background: rgba(239, 68, 68, 0.1); }
 .chart g.r, .flow-card, .tree .row { transition: opacity 0.15s; }
-/* cross-node links: waits (dashed), ref calls (solid), connectors between rows / cards */
-.xl-span { stroke-width: 3; stroke-linecap: round; cursor: pointer; }
-.xl-span.once { stroke-width: 2.5; stroke-dasharray: 4 3; stroke-linecap: butt; }
-.xl-wire { fill: none; stroke-width: 1.4; stroke-dasharray: 3 3; opacity: 0.85; cursor: pointer; }
-.xl-span:hover { stroke-width: 4.5; }
-.xl-hit { fill: none; stroke: transparent; stroke-width: 10; cursor: pointer; }
-#xl-arrow path { fill: var(--text-2); }
-.flow-xlink { cursor: pointer; }
-.flow-xlink path { fill: none; stroke-width: 1.4; stroke-dasharray: 4 4; opacity: 0.8; }
-.flow-xlink path.hit { stroke: transparent; stroke-width: 12; stroke-dasharray: none; }
-.flow-xlink:hover path:not(.hit) { stroke-width: 2.6; opacity: 1; }
-.flow-xlink text { font-size: 10.5px; fill: var(--text-2); stroke: var(--panel); stroke-width: 3px; paint-order: stroke; }
+/* cross-node links: hollow points on the caller's row, chips in the flow */
+.chart circle.mark.link { stroke-width: 2; }
+.xwire { stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0.55; pointer-events: none; }
+.xwire.hot { stroke-width: 2; opacity: 1; }
+.fwire { fill: none; stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0.5; pointer-events: none; }
+.fwire.hot { stroke-width: 2; opacity: 1; }
+.flow-shots .shot rect[stroke] { stroke-width: 1.5; }
 
 @media (max-width: 1100px) {
   .bottom { grid-template-columns: minmax(0, 1fr); }