@korso/shepherd-ui 0.1.1 → 0.2.0

package/dist/views/Tasks.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Tasks view — the wallboard ported from packages/hub/public (app.js): a crew
+// strip of live agents + two columns, Active (grouped live claims) and Done
+// (finished/dropped history). Driven by client.landscape(workspaceId) on mount
+// and on a 5s poll via useLandscape. Functional parity with the old page; visual
+// polish is deferred. Task 6.3 fixed the prop signature ({ workspaceId }); this
+// fills the body without changing it.
+import { useMemo } from "react";
+import { useLandscape } from "./useLandscape.js";
+import { formatRelative, statusLabel, formatActiveDuration, dayBucket, initialsFor, colorForName, groupActiveClaims, } from "./wallboard.js";
+/** Avatar bubble: two initials on the name's deterministic hue (as in app.js). */
+function Avatar({ name, className }) {
+    return (_jsx("div", { className: className, style: { background: colorForName(name) }, children: initialsFor(name) }));
+}
+/** A claim's body: intent + territory globs + a meta line (started/finished). */
+function ClaimBody({ task, meta }) {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "task__intent", children: task.intent }), _jsxs("div", { className: "terr", children: [_jsx("span", { className: "terr__lbl", children: "territory" }), task.pathGlobs.map((g) => (_jsx("span", { className: "glob", children: g }, g)))] }), _jsx("div", { className: "task__meta", children: meta })] }));
+}
+/** A lone agent/claim — the classic single card. */
+function PlainCard({ task, nowMs }) {
+    return (_jsxs("div", { className: "task", children: [_jsxs("div", { className: "task__r1", children: [_jsx("span", { className: "task__who", children: task.agentName }), (task.model || task.program) && (_jsx("span", { className: "task__tag", children: task.model || task.program })), _jsx("span", { className: "livedot", title: "active" })] }), _jsx(ClaimBody, { task: task, meta: `started ${formatRelative(task.createdAt, nowMs)}` })] }));
+}
+/** An agent with multiple live claims: header + primaries + folded narrower set. */
+function GroupCard({ group, nowMs }) {
+    const count = group.primaries.length + group.narrower.length;
+    return (_jsxs("div", { className: "grp", children: [_jsxs("div", { className: "grp__head", children: [_jsx("span", { className: "grp__who", children: group.agentName }), (group.model || group.program) && (_jsx("span", { className: "grp__tag", children: group.model || group.program })), _jsx("span", { className: "grp__count", children: `· ${count} active` }), _jsx("span", { className: "grp__dot", title: "live" })] }), _jsx("div", { className: "claims", children: group.primaries.map((c) => (_jsx("div", { className: "claim", children: _jsx(ClaimBody, { task: c, meta: `started ${formatRelative(c.createdAt, nowMs)}` }) }, `${c.agentName}|${c.repo}|${c.createdAt}`))) }), group.narrower.length > 0 && (_jsxs("details", { className: "fold", children: [_jsx("summary", { children: `+${group.narrower.length} narrower claim${group.narrower.length > 1 ? "s" : ""}` }), _jsx("div", { className: "fold__body", children: group.narrower.map((c) => (_jsxs("div", { className: "claim", children: [_jsx(ClaimBody, { task: c, meta: `started ${formatRelative(c.createdAt, nowMs)}` }), _jsx("div", { className: "covered", children: "\u2282 covered by a claim above" })] }, `${c.agentName}|${c.repo}|${c.createdAt}`))) })] }))] }));
+}
+/** Crew strip: live agents, those with an active claim first, then alphabetical. */
+function Crew({ agents, tasks }) {
+    const live = agents.filter((a) => a.presence === "live");
+    const active = new Set(tasks.filter((t) => t.status === "active").map((t) => t.agentName));
+    const ordered = [...live].sort((x, y) => {
+        const ax = active.has(x.name), ay = active.has(y.name);
+        if (ax !== ay)
+            return ax ? -1 : 1;
+        return x.name.localeCompare(y.name);
+    });
+    return (_jsx("div", { className: "crew", children: ordered.map((a) => (_jsxs("div", { className: "person" + (active.has(a.name) ? "" : " person--idle"), children: [_jsx(Avatar, { name: a.name, className: "avatar" }), _jsx("span", { className: "person__name", children: a.name })] }, a.name))) }));
+}
+export function Tasks({ workspaceId }) {
+    const { data, error, loading } = useLandscape(workspaceId);
+    const nowMs = data ? Date.parse(data.serverTime) : Date.now();
+    const tasks = data?.tasks ?? [];
+    const agents = data?.agents ?? [];
+    const active = tasks.filter((t) => t.status === "active");
+    const done = tasks.filter((t) => t.status !== "active");
+    // Grouping is the only non-trivial derivation here; memoise it on `data` (the
+    // sole source of `tasks`) so it recomputes only when the snapshot changes,
+    // not on unrelated re-renders.
+    const groups = useMemo(() => groupActiveClaims((data?.tasks ?? []).filter((t) => t.status === "active")), [data]);
+    return (_jsxs("section", { "aria-labelledby": "tasks-heading", children: [_jsx("h2", { id: "tasks-heading", children: "Tasks" }), _jsx("span", { "data-testid": "tasks-workspace-id", hidden: true, children: workspaceId }), error && (_jsx("p", { role: "alert", className: "status status--error", children: `Couldn't refresh the workspace — reconnecting… (${error})` })), loading && !data ? (_jsx("p", { className: "empty", children: "Loading\u2026" })) : (_jsxs(_Fragment, { children: [_jsx(Crew, { agents: agents, tasks: tasks }), _jsxs("div", { className: "board", children: [_jsxs("div", { className: "col", children: [_jsxs("div", { className: "colhead", children: [_jsx("h3", { children: "Active" }), _jsx("span", { className: "n", children: active.length })] }), _jsx("div", { id: "active-list", children: active.length === 0 ? (_jsx("div", { className: "empty", children: "Nothing active right now." })) : (groups.map((g) => {
+                                            const single = g.primaries.length === 1 && g.narrower.length === 0;
+                                            const key = `${g.agentName}|${g.repo}`;
+                                            return single ? (_jsx(PlainCard, { task: g.primaries[0], nowMs: nowMs }, key)) : (_jsx(GroupCard, { group: g, nowMs: nowMs }, key));
+                                        })) })] }), _jsxs("div", { className: "col", children: [_jsxs("div", { className: "colhead", children: [_jsx("h3", { children: "Done" }), _jsx("span", { className: "n", children: done.length })] }), _jsx("div", { id: "done-list", children: done.length === 0 ? (_jsx("div", { className: "empty", children: "No finished tasks yet." })) : (_jsx(DoneList, { tasks: done, nowMs: nowMs })) })] })] })] }))] }));
+}
+/** The Done column with day buckets + per-row status chip and meta, as in app.js. */
+function DoneList({ tasks, nowMs }) {
+    let lastDay = null;
+    const rows = [];
+    for (const t of tasks) {
+        const day = dayBucket(t.endedAt || t.createdAt, nowMs);
+        if (day !== lastDay) {
+            rows.push(_jsx("div", { className: "day", children: day }, `day|${day}|${t.createdAt}`));
+            lastDay = day;
+        }
+        const meta = t.status === "dropped"
+            ? `went offline ${formatRelative(t.endedAt ?? t.createdAt, nowMs)} — no done signal`
+            : `finished ${formatRelative(t.endedAt ?? t.createdAt, nowMs)}${formatActiveDuration(t.createdAt, t.endedAt)
+                ? " · " + formatActiveDuration(t.createdAt, t.endedAt)
+                : ""}`;
+        rows.push(_jsxs("div", { className: "task", children: [_jsxs("div", { className: "task__r1", children: [_jsx("span", { className: "task__who", children: t.agentName }), _jsx("span", { className: "task__stat" + (t.status === "dropped" ? " task__stat--drop" : ""), children: statusLabel(t.status) })] }), _jsx(ClaimBody, { task: t, meta: meta })] }, `${t.agentName}|${t.repo}|${t.createdAt}`));
+    }
+    return _jsx(_Fragment, { children: rows });
+}

package/dist/views/Tasks.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/views/Tasks.test.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, waitFor, act } from "@testing-library/react";
+import { ShepherdProvider } from "../ShepherdProvider.js";
+import { Tasks } from "./Tasks.js";
+import { makeMockClient } from "../test/mockClient.js";
+// ---------------------------------------------------------------------------
+// Tasks — the ported wallboard (crew strip + Active/Done columns), driven by
+// client.landscape(workspaceId) on mount and on a 5s poll. DB-free.
+// ---------------------------------------------------------------------------
+const WORKSPACE_ID = "ws_1";
+function landscape(over = {}) {
+    return {
+        serverTime: "2026-06-29T01:00:00.000Z",
+        agents: [],
+        tasks: [],
+        announcements: [],
+        ...over,
+    };
+}
+describe("Tasks", () => {
+    let client;
+    beforeEach(() => {
+        client = makeMockClient();
+    });
+    function renderTasks() {
+        return render(_jsx(ShepherdProvider, { client: client, children: _jsx(Tasks, { workspaceId: WORKSPACE_ID }) }));
+    }
+    it("calls landscape(workspaceId) on mount and renders agents, claims, and history", async () => {
+        client.landscape = vi.fn().mockResolvedValue(landscape({
+            agents: [
+                {
+                    name: "RedDragon",
+                    human: "daichi",
+                    program: "claude",
+                    model: "opus",
+                    repo: "acme/web",
+                    branch: "main",
+                    lastHeartbeatAt: "2026-06-29T00:59:00.000Z",
+                    presence: "live",
+                },
+            ],
+            tasks: [
+                {
+                    agentName: "RedDragon",
+                    program: "claude",
+                    model: "opus",
+                    repo: "acme/web",
+                    intent: "refactor the parser",
+                    pathGlobs: ["src/parser/**"],
+                    status: "active",
+                    createdAt: "2026-06-29T00:30:00.000Z",
+                    endedAt: null,
+                },
+                {
+                    agentName: "BlueWolf",
+                    program: "codex",
+                    model: null,
+                    repo: "acme/web",
+                    intent: "fixed the build",
+                    pathGlobs: ["build/**"],
+                    status: "done",
+                    createdAt: "2026-06-29T00:00:00.000Z",
+                    endedAt: "2026-06-29T00:20:00.000Z",
+                },
+            ],
+        }));
+        renderTasks();
+        await waitFor(() => expect(client.landscape).toHaveBeenCalledWith(WORKSPACE_ID));
+        // Live agent's name appears (crew strip + the active claim card).
+        await waitFor(() => expect(screen.getAllByText("RedDragon").length).toBeGreaterThan(0));
+        // Active claim's intent.
+        expect(screen.getByText("refactor the parser")).toBeInTheDocument();
+        expect(screen.getByText("src/parser/**")).toBeInTheDocument();
+        // Done/history entry.
+        expect(screen.getByText("fixed the build")).toBeInTheDocument();
+        expect(screen.getByText("done")).toBeInTheDocument();
+    });
+    it("re-polls landscape on the interval and stops after unmount", async () => {
+        vi.useFakeTimers();
+        try {
+            client.landscape = vi.fn().mockResolvedValue(landscape());
+            let unmount = () => { };
+            await act(async () => {
+                ({ unmount } = renderTasks());
+            });
+            // Initial mount fetch.
+            expect(client.landscape).toHaveBeenCalledTimes(1);
+            // Advance one poll interval (5s) → a second fetch.
+            await act(async () => {
+                await vi.advanceTimersByTimeAsync(5000);
+            });
+            expect(client.landscape).toHaveBeenCalledTimes(2);
+            // Unmount clears the interval: no further calls.
+            unmount();
+            await act(async () => {
+                await vi.advanceTimersByTimeAsync(15000);
+            });
+            expect(client.landscape).toHaveBeenCalledTimes(2);
+        }
+        finally {
+            vi.useRealTimers();
+        }
+    });
+    it("renders a non-crashing error state when landscape fails", async () => {
+        client.landscape = vi.fn().mockRejectedValue(new Error("boom"));
+        renderTasks();
+        await waitFor(() => expect(screen.getByRole("alert")).toBeInTheDocument());
+        // The heading still renders — the view did not crash.
+        expect(screen.getByRole("heading", { name: /tasks/i })).toBeInTheDocument();
+    });
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+});

package/dist/views/useLandscape.d.ts

@@ -0,0 +1,14 @@
+import type { WorkspaceLandscapeResponseT } from "@shepherd/shared";
+/** The wallboard poll cadence, matching app.js's POLL_MS. */
+export declare const POLL_MS = 5000;
+export interface LandscapeState {
+    /** Last good snapshot, or null before the first successful load. */
+    data: WorkspaceLandscapeResponseT | null;
+    /** A non-fatal error message from the most recent failed fetch, else null. */
+    error: string | null;
+    /** True until the first fetch settles (success or failure). */
+    loading: boolean;
+    /** Re-pull immediately (used after a mutation). Resolves when the fetch settles. */
+    refresh: () => Promise<void>;
+}
+export declare function useLandscape(workspaceId: string): LandscapeState;

package/dist/views/useLandscape.js

@@ -0,0 +1,74 @@
+import { useEffect, useRef, useState, useCallback } from "react";
+import { useShepherdClient } from "../ShepherdProvider.js";
+import { describeError } from "../client.js";
+// ---------------------------------------------------------------------------
+// useLandscape — the shared poll loop behind both Tasks and Chat. Mirrors the
+// old app.js `poll()` cadence (5s) and its "keep the last good snapshot on a
+// transient failure" behavior: a failed fetch surfaces `error` but leaves the
+// previous `data` on screen, so the board doesn't blank out while reconnecting.
+//
+// Lifecycle safety (the 6.3 review flagged the absence of guards as a footgun):
+//   - a `cancelled` ref gates every setState so a fetch that resolves after the
+//     view unmounts (or after workspaceId changes) is dropped,
+//   - the interval is cleared on unmount AND re-established when workspaceId
+//     changes (it's in the effect deps),
+//   - `refresh()` lets a mutation (e.g. Chat's announce) re-pull immediately
+//     without waiting for the next tick — the same as app.js awaiting poll().
+// ---------------------------------------------------------------------------
+/** The wallboard poll cadence, matching app.js's POLL_MS. */
+export const POLL_MS = 5000;
+export function useLandscape(workspaceId) {
+    const client = useShepherdClient();
+    const [data, setData] = useState(null);
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(true);
+    // Guards setState after unmount / workspace change. A ref (not state) so the
+    // async fetch closure reads the live value, not the value at fetch-start.
+    const cancelled = useRef(false);
+    // Stable across renders so the poll effect doesn't re-subscribe each tick.
+    // Reads `workspaceId`/`client` via the deps; `cancelled` via the live ref.
+    const load = useCallback(async () => {
+        try {
+            const snapshot = await client.landscape(workspaceId);
+            if (cancelled.current)
+                return;
+            setData(snapshot);
+            setError(null);
+        }
+        catch (err) {
+            if (cancelled.current)
+                return;
+            // Keep the last good snapshot on screen; just note the failure.
+            setError(describeError(err));
+        }
+        finally {
+            if (!cancelled.current)
+                setLoading(false);
+        }
+    }, [client, workspaceId]);
+    useEffect(() => {
+        cancelled.current = false;
+        setLoading(true);
+        void load();
+        // Skip the periodic fetch while the tab is hidden — a backgrounded wallboard
+        // doesn't need to poll. We resume below on `visibilitychange`.
+        const id = setInterval(() => {
+            if (document.visibilityState === "hidden")
+                return;
+            void load();
+        }, POLL_MS);
+        // On returning to a visible tab, re-pull immediately so the board catches up
+        // without waiting for the next tick.
+        const onVisible = () => {
+            if (document.visibilityState === "visible")
+                void load();
+        };
+        document.addEventListener("visibilitychange", onVisible);
+        return () => {
+            cancelled.current = true;
+            clearInterval(id);
+            document.removeEventListener("visibilitychange", onVisible);
+        };
+    }, [load]);
+    return { data, error, loading, refresh: load };
+}

package/dist/views/useLandscape.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/views/useLandscape.test.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { ShepherdProvider } from "../ShepherdProvider.js";
+import { useLandscape, POLL_MS } from "./useLandscape.js";
+import { makeMockClient } from "../test/mockClient.js";
+// ---------------------------------------------------------------------------
+// useLandscape — the shared 5s poll behind Tasks/Chat. This covers the subtlest
+// lifecycle behavior: cancel-on-unmount (no setState after teardown) and the
+// workspace-change re-subscribe (a new workspaceId re-pulls immediately).
+// ---------------------------------------------------------------------------
+describe("useLandscape", () => {
+    let client;
+    beforeEach(() => {
+        client = makeMockClient();
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+        vi.restoreAllMocks();
+    });
+    function wrapper({ children }) {
+        return _jsx(ShepherdProvider, { client: client, children: children });
+    }
+    it("fetches on mount, re-polls on the interval, and clears the interval on unmount", async () => {
+        vi.useFakeTimers();
+        client.landscape = vi.fn().mockResolvedValue({
+            agents: [],
+            tasks: [],
+            announcements: [],
+            serverTime: "2026-06-29T00:00:00.000Z",
+        });
+        let unmount = () => { };
+        await act(async () => {
+            ({ unmount } = renderHook(() => useLandscape("ws_1"), { wrapper }));
+        });
+        // Initial mount fetch.
+        expect(client.landscape).toHaveBeenCalledTimes(1);
+        expect(client.landscape).toHaveBeenLastCalledWith("ws_1");
+        // One poll interval → a second fetch.
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(POLL_MS);
+        });
+        expect(client.landscape).toHaveBeenCalledTimes(2);
+        // Unmount cancels the loop: no further calls.
+        act(() => unmount());
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(POLL_MS * 3);
+        });
+        expect(client.landscape).toHaveBeenCalledTimes(2);
+    });
+    it("re-subscribes (re-pulls) when workspaceId changes", async () => {
+        vi.useFakeTimers();
+        client.landscape = vi.fn().mockResolvedValue({
+            agents: [],
+            tasks: [],
+            announcements: [],
+            serverTime: "2026-06-29T00:00:00.000Z",
+        });
+        let rerender = () => { };
+        await act(async () => {
+            ({ rerender } = renderHook(({ id }) => useLandscape(id), {
+                wrapper,
+                initialProps: { id: "ws_1" },
+            }));
+        });
+        expect(client.landscape).toHaveBeenLastCalledWith("ws_1");
+        const afterMount = client.landscape.mock.calls.length;
+        // Switching workspace re-runs the effect: an immediate fetch for the new id.
+        await act(async () => {
+            rerender({ id: "ws_2" });
+        });
+        expect(client.landscape.mock.calls.length).toBeGreaterThan(afterMount);
+        expect(client.landscape).toHaveBeenLastCalledWith("ws_2");
+    });
+    it("does not poll while the tab is hidden, and refetches on becoming visible", async () => {
+        vi.useFakeTimers();
+        client.landscape = vi.fn().mockResolvedValue({
+            agents: [],
+            tasks: [],
+            announcements: [],
+            serverTime: "2026-06-29T00:00:00.000Z",
+        });
+        await act(async () => {
+            renderHook(() => useLandscape("ws_1"), { wrapper });
+        });
+        expect(client.landscape).toHaveBeenCalledTimes(1); // mount fetch
+        // Hide the tab: the interval tick should skip the fetch.
+        const visibility = vi.spyOn(document, "visibilityState", "get");
+        visibility.mockReturnValue("hidden");
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(POLL_MS);
+        });
+        expect(client.landscape).toHaveBeenCalledTimes(1);
+        // Becoming visible again re-pulls immediately.
+        visibility.mockReturnValue("visible");
+        await act(async () => {
+            document.dispatchEvent(new Event("visibilitychange"));
+        });
+        expect(client.landscape).toHaveBeenCalledTimes(2);
+    });
+});

package/dist/views/wallboard.d.ts

@@ -0,0 +1,46 @@
+import type { WorkspaceTaskT, TaskStatusT } from "@shepherd/shared";
+/** Human "N ago" for a past ISO timestamp, relative to nowMs (epoch ms). */
+export declare function formatRelative(iso: string, nowMs: number): string;
+/**
+ * Deterministic chat color for an agent name — same name always maps to the
+ * same hue, so each speaker reads consistently across the announcement thread.
+ */
+export declare function colorForName(name: string): string;
+/**
+ * Up to two initials for an avatar. Prefers the capital letters of a CamelCase
+ * agent name (RedDragon → RD); otherwise the first two letters (alice → AL).
+ */
+export declare function initialsFor(name: string): string;
+/** Human label for a history task's status. */
+export declare function statusLabel(status: TaskStatusT): string;
+/** "active Nm/Nh" for the created->ended span; "" when the task hasn't ended. */
+export declare function formatActiveDuration(createdIso: string, endedIso: string | null): string;
+/** Local-day bucket label: "Today" / "Yesterday" / "Mon D". */
+export declare function dayBucket(iso: string, nowMs: number): string;
+/**
+ * Does glob set `outer` fully cover glob set `inner`? Conservative: unsure → false,
+ * so a claim only folds when it is certainly contained. Empty `inner` is covered.
+ */
+export declare function globsCover(outer: string[], inner: string[]): boolean;
+/** One agent's grouped active claims: visible primaries + folded narrower claims. */
+export interface ClaimGroup {
+    agentName: string;
+    model: string | null;
+    program: string;
+    repo: string;
+    primaries: WorkspaceTaskT[];
+    narrower: WorkspaceTaskT[];
+}
+/**
+ * Group active claims by agent for the board. Within an agent's claims, one that
+ * is STRICTLY covered by a broader sibling folds into `narrower`; everything else
+ * stays a visible `primary`. Groups + claims are newest-first; header fields come
+ * from the group's newest claim. Pure — no DOM, no clock.
+ */
+export declare function groupActiveClaims(tasks: WorkspaceTaskT[]): ClaimGroup[];
+/**
+ * The first `@mention` in `text` matching a known agent name, returned in the
+ * name's canonical casing (`@reddragon` → `RedDragon`), or null when none match.
+ * An unmatched `@foo` is plain text and the message broadcasts.
+ */
+export declare function extractTarget(text: string, knownNames: string[]): string | null;

package/dist/views/wallboard.js

@@ -0,0 +1,209 @@
+// ---------------------------------------------------------------------------
+// wallboard — pure helpers ported from packages/hub/public/app.js, the vanilla
+// wallboard the React Tasks/Chat views replace. These mirror that module's
+// behavior exactly so the board reads the same data the same way (functional
+// parity). No DOM, no clock: every helper takes `nowMs` so countdowns/relative
+// times are computed against the server's clock (landscape.serverTime), not the
+// browser's, keeping them correct under skew — same as the old page did.
+// ---------------------------------------------------------------------------
+/** Human "N ago" for a past ISO timestamp, relative to nowMs (epoch ms). */
+export function formatRelative(iso, nowMs) {
+    const secs = Math.floor((nowMs - Date.parse(iso)) / 1000);
+    if (secs < 5)
+        return "just now";
+    if (secs < 60)
+        return `${secs}s ago`;
+    const mins = Math.floor(secs / 60);
+    if (mins < 60)
+        return `${mins}m ago`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24)
+        return `${hrs}h ago`;
+    return `${Math.floor(hrs / 24)}d ago`;
+}
+/**
+ * Deterministic chat color for an agent name — same name always maps to the
+ * same hue, so each speaker reads consistently across the announcement thread.
+ */
+export function colorForName(name) {
+    let h = 0;
+    for (let i = 0; i < name.length; i++)
+        h = (h * 31 + name.charCodeAt(i)) % 360;
+    return `hsl(${h}, 38%, 42%)`;
+}
+/**
+ * Up to two initials for an avatar. Prefers the capital letters of a CamelCase
+ * agent name (RedDragon → RD); otherwise the first two letters (alice → AL).
+ */
+export function initialsFor(name) {
+    if (!name)
+        return "?";
+    const caps = name.match(/[A-Z]/g);
+    if (caps && caps.length >= 2)
+        return caps[0] + caps[1];
+    return name.slice(0, 2).toUpperCase();
+}
+/** Human label for a history task's status. */
+export function statusLabel(status) {
+    return status === "dropped" ? "dropped" : "done";
+}
+/** "active Nm/Nh" for the created->ended span; "" when the task hasn't ended. */
+export function formatActiveDuration(createdIso, endedIso) {
+    if (!endedIso)
+        return "";
+    const secs = Math.floor((Date.parse(endedIso) - Date.parse(createdIso)) / 1000);
+    const mins = Math.floor(secs / 60);
+    if (mins < 60)
+        return `active ${mins}m`;
+    return `active ${Math.floor(mins / 60)}h`;
+}
+/** Local-day bucket label: "Today" / "Yesterday" / "Mon D". */
+export function dayBucket(iso, nowMs) {
+    const d = new Date(Date.parse(iso));
+    const now = new Date(nowMs);
+    const startOf = (x) => new Date(x.getFullYear(), x.getMonth(), x.getDate()).getTime();
+    const dayDiff = Math.round((startOf(now) - startOf(d)) / 86400000);
+    if (dayDiff <= 0)
+        return "Today";
+    if (dayDiff === 1)
+        return "Yesterday";
+    return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}
+// ---------------------------------------------------------------------------
+// Glob containment + active-claim grouping (verbatim from app.js, retyped)
+// ---------------------------------------------------------------------------
+/**
+ * Normalize a glob into a segment list. Mirrors the server's normalize
+ * (packages/hub/src/globs.ts) so the two agree on path shape.
+ */
+function normalizeGlob(pattern) {
+    let p = pattern.toLowerCase().replace(/\\/g, "/");
+    if (p.endsWith("/"))
+        p = p.replace(/\/+$/, "") + "/**";
+    const out = [];
+    for (const seg of p.split("/")) {
+        if (seg === "" || seg === ".")
+            continue;
+        if (seg === "..") {
+            if (out.length)
+                out.pop();
+            continue;
+        }
+        out.push(seg);
+    }
+    return out;
+}
+const SEG_WILDCARD = /[*?{}[\]]/;
+/** Does single-segment pattern `a` cover single-segment pattern `b`? */
+function segmentCovers(a, b) {
+    if (a === "*")
+        return true;
+    if (SEG_WILDCARD.test(a))
+        return a === b;
+    return !SEG_WILDCARD.test(b) && a === b;
+}
+/** Does pattern A (segments) cover pattern B (segments)? '**' consumes 0+ segments. */
+function patternCovers(a, b) {
+    const memo = new Map();
+    function go(i, j) {
+        if (b.length - j === 0) {
+            for (let k = i; k < a.length; k++)
+                if (a[k] !== "**")
+                    return false;
+            return true;
+        }
+        if (a.length - i === 0)
+            return false;
+        const key = i * (b.length + 1) + j;
+        const cached = memo.get(key);
+        if (cached !== undefined)
+            return cached;
+        const ah = a[i], bh = b[j];
+        let res;
+        if (ah === "**") {
+            res = go(i + 1, j) || go(i, j + 1);
+        }
+        else if (bh === "**") {
+            res = false;
+        }
+        else {
+            res = segmentCovers(ah, bh) && go(i + 1, j + 1);
+        }
+        memo.set(key, res);
+        return res;
+    }
+    return go(0, 0);
+}
+/**
+ * Does glob set `outer` fully cover glob set `inner`? Conservative: unsure → false,
+ * so a claim only folds when it is certainly contained. Empty `inner` is covered.
+ */
+export function globsCover(outer, inner) {
+    if (inner.length === 0)
+        return true;
+    const o = outer.map(normalizeGlob);
+    return inner.every((g) => {
+        const ng = normalizeGlob(g);
+        return o.some((op) => patternCovers(op, ng));
+    });
+}
+/**
+ * Group active claims by agent for the board. Within an agent's claims, one that
+ * is STRICTLY covered by a broader sibling folds into `narrower`; everything else
+ * stays a visible `primary`. Groups + claims are newest-first; header fields come
+ * from the group's newest claim. Pure — no DOM, no clock.
+ */
+export function groupActiveClaims(tasks) {
+    const byAgent = new Map();
+    for (const t of tasks) {
+        if (!byAgent.has(t.agentName))
+            byAgent.set(t.agentName, []);
+        byAgent.get(t.agentName).push(t);
+    }
+    const newestFirst = (a, b) => b.createdAt.localeCompare(a.createdAt);
+    const groups = [];
+    for (const [agentName, claims] of byAgent) {
+        const sorted = [...claims].sort(newestFirst);
+        const isNarrower = sorted.map((c) => sorted.some((o) => o !== c &&
+            globsCover(o.pathGlobs, c.pathGlobs) &&
+            !globsCover(c.pathGlobs, o.pathGlobs)));
+        const head = sorted[0];
+        groups.push({
+            agentName,
+            model: head.model,
+            program: head.program,
+            repo: head.repo,
+            primaries: sorted.filter((_, i) => !isNarrower[i]),
+            narrower: sorted.filter((_, i) => isNarrower[i]),
+        });
+    }
+    groups.sort((g1, g2) => {
+        const t1 = g1.primaries.concat(g1.narrower)[0].createdAt;
+        const t2 = g2.primaries.concat(g2.narrower)[0].createdAt;
+        return t2.localeCompare(t1);
+    });
+    return groups;
+}
+// ---------------------------------------------------------------------------
+// @mention target extraction (composer → DM direction). Ported from app.js so a
+// typed @name still directs the message, matching the old send behavior. The
+// autocomplete POPUP UI is intentionally not ported (visual polish, deferred).
+// ---------------------------------------------------------------------------
+/** Characters allowed in an agent-name mention token. */
+const MENTION_CHARS = "A-Za-z0-9_-";
+/**
+ * The first `@mention` in `text` matching a known agent name, returned in the
+ * name's canonical casing (`@reddragon` → `RedDragon`), or null when none match.
+ * An unmatched `@foo` is plain text and the message broadcasts.
+ */
+export function extractTarget(text, knownNames) {
+    const re = new RegExp(`(?:^|\\s)@([${MENTION_CHARS}]+)`, "g");
+    let m;
+    while ((m = re.exec(text)) !== null) {
+        const typed = m[1].toLowerCase();
+        const hit = knownNames.find((n) => n.toLowerCase() === typed);
+        if (hit)
+            return hit;
+    }
+    return null;
+}

package/dist/views/wallboard.test.d.ts

@@ -0,0 +1 @@
+export {};