@korso/shepherd-ui 0.1.1 → 0.2.0

package/dist/components/ActiveList.d.ts

@@ -0,0 +1,22 @@
+import type { ReactElement } from "react";
+import type { WorkspaceTaskT } from "@shepherd/shared";
+/** Props for {@link ActiveList}. */
+export interface ActiveListProps {
+    /** The board's tasks; only active ones in the selected repo are shown. */
+    tasks: WorkspaceTaskT[];
+    /** The server-clock "now" in epoch ms, for relative time labels. */
+    nowMs: number;
+    /** The selected repo, or `null`/`"__all__"` for all repos. */
+    selectedRepo: string | null;
+}
+/**
+ * The Active column. Ported from app.js `renderActive`. Filters tasks to active
+ * + selected-repo, groups them by agent via {@link groupActiveClaims}, then
+ * renders a {@link PlainCard} for a lone claim or a {@link GroupCard} otherwise.
+ * Shows an empty-state message when nothing is active. In All-repos mode each
+ * card carries a repo tag; in single-repo mode it does not.
+ *
+ * @param props - The tasks, the server "now", and the repo filter.
+ * @returns The active list element.
+ */
+export declare function ActiveList({ tasks, nowMs, selectedRepo, }: ActiveListProps): ReactElement;

package/dist/components/ActiveList.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatRelative, groupActiveClaims, matchesRepo, } from "../logic.js";
+import { Territory } from "./Territory.js";
+/** Stable identity for a claim across renders (the payload has no claim id). */
+const claimKey = (t) => `${t.agentName}|${t.repo}|${t.createdAt}`;
+/** Whether the board is showing all repos (so cards carry a repo tag). */
+const isAllRepos = (selected) => selected === null || selected === "__all__";
+/**
+ * One active claim's body: intent + territory + a "started N ago" meta line.
+ * Shared by the plain card and each row of a grouped card (app.js `claimBody`).
+ */
+function ClaimBody({ task, nowMs, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "task__intent", children: task.intent }), _jsx(Territory, { globs: task.pathGlobs }), _jsx("div", { className: "task__meta", children: `started ${formatRelative(task.createdAt, nowMs)}` })] }));
+}
+/**
+ * A lone agent/claim rendered as the classic single card (app.js `plainCard`):
+ * the agent, an optional model/program tag, a live dot, then the claim body.
+ */
+function PlainCard({ task, nowMs, allRepos, }) {
+    const tag = task.model || task.program;
+    return (_jsxs("div", { className: "task", children: [_jsxs("div", { className: "task__r1", children: [_jsx("span", { className: "task__who", children: task.agentName }), allRepos && _jsx("span", { className: "task__repo", children: task.repo }), tag && _jsx("span", { className: "task__tag", children: tag }), _jsx("span", { className: "livedot", title: "active" })] }), _jsx(ClaimBody, { task: task, nowMs: nowMs })] }));
+}
+/**
+ * An agent with multiple live claims rendered grouped (app.js `groupCard`): a
+ * header, one `.claim` per primary, and a collapsible `"+N narrower claim(s)"`
+ * fold for claims a broader sibling fully covers (folded, never hidden).
+ */
+function GroupCard({ group, nowMs, allRepos, }) {
+    const tag = group.model || group.program;
+    const total = group.primaries.length + group.narrower.length;
+    const n = group.narrower.length;
+    return (_jsxs("div", { className: "grp", children: [_jsxs("div", { className: "grp__head", children: [_jsx("span", { className: "grp__who", children: group.agentName }), allRepos && _jsx("span", { className: "task__repo", children: group.repo }), tag && _jsx("span", { className: "grp__tag", children: tag }), _jsx("span", { className: "grp__count", children: `· ${total} 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, nowMs: nowMs }) }, claimKey(c)))) }), n > 0 && (_jsxs("details", { className: "fold", children: [_jsxs("summary", { children: [_jsx("span", { className: "tw", children: "\u25B6" }), ` +${n} narrower claim${n > 1 ? "s" : ""}`] }), _jsx("div", { className: "fold__body", children: group.narrower.map((c) => (_jsxs("div", { className: "claim", children: [_jsx(ClaimBody, { task: c, nowMs: nowMs }), _jsx("div", { className: "covered", children: "\u2282 covered by a claim above" })] }, claimKey(c)))) })] }))] }));
+}
+/**
+ * The Active column. Ported from app.js `renderActive`. Filters tasks to active
+ * + selected-repo, groups them by agent via {@link groupActiveClaims}, then
+ * renders a {@link PlainCard} for a lone claim or a {@link GroupCard} otherwise.
+ * Shows an empty-state message when nothing is active. In All-repos mode each
+ * card carries a repo tag; in single-repo mode it does not.
+ *
+ * @param props - The tasks, the server "now", and the repo filter.
+ * @returns The active list element.
+ */
+export function ActiveList({ tasks, nowMs, selectedRepo, }) {
+    const allRepos = isAllRepos(selectedRepo);
+    const active = tasks.filter((t) => t.status === "active" && matchesRepo(t, selectedRepo));
+    if (active.length === 0) {
+        const msg = allRepos
+            ? "Nothing active right now."
+            : `Nothing active in ${selectedRepo}.`;
+        return (_jsx("div", { id: "active-list", children: _jsx("div", { className: "empty", children: msg }) }));
+    }
+    return (_jsx("div", { id: "active-list", children: groupActiveClaims(active).map((g) => {
+            const single = g.primaries.length === 1 && g.narrower.length === 0;
+            // Key on the group's newest claim — stable across polls per agent.
+            const key = claimKey(g.primaries.concat(g.narrower)[0]);
+            return single ? (_jsx(PlainCard, { task: g.primaries[0], nowMs: nowMs, allRepos: allRepos }, key)) : (_jsx(GroupCard, { group: g, nowMs: nowMs, allRepos: allRepos }, key));
+        }) }));
+}

package/dist/components/Chat.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import type { WorkspaceAnnouncementT } from "@shepherd/shared";
+/** Props for {@link Chat}. */
+export interface ChatProps {
+    /** The workspace announcement feed, newest-first as the API returns it. */
+    announcements: WorkspaceAnnouncementT[];
+    /** The board's selected repo; `null`/`"__all__"` show every repo's messages. */
+    selectedRepo: string | null;
+    /** The server clock in epoch ms, so "N ago" matches the rest of the board. */
+    nowMs: number;
+}
+/**
+ * The group-chat view of the workspace announcement feed (the "Chat" tab).
+ *
+ * The API returns announcements newest-first, but a chat reads oldest -> newest
+ * top -> bottom, so the list is reversed before render; messages are filtered to
+ * the selected repo. Each row mirrors app.js `renderAnnouncements`: an avatar
+ * (initials + deterministic color), the sender, an optional "→ @target" /
+ * "→ admin" header, the relative time, and the body. Operator messages
+ * (`fromAdmin`) get `msg--me` (right-aligned); directed or to-admin messages get
+ * `msg--targeted`.
+ *
+ * The viewer stays pinned to the newest message UNLESS they have scrolled up to
+ * read history — measured against the scroll container before each re-render and
+ * re-applied in a layout effect so the write happens before paint (no flicker).
+ *
+ * @param props - The feed, the repo filter, and the server clock.
+ * @returns The scrollable chat element.
+ */
+export declare function Chat({ announcements, selectedRepo, nowMs }: ChatProps): ReactNode;

package/dist/components/Chat.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
+import { colorForName, formatRelative, initialsFor, matchesRepo, } from "../logic.js";
+/**
+ * How close (in px) to the bottom still counts as "pinned to the newest
+ * message". Ported verbatim from app.js `chatIsNearBottom` — a small slack so a
+ * reader who is essentially at the bottom keeps following new messages, while
+ * one who has scrolled up to read history is left where they are.
+ */
+const NEAR_BOTTOM_PX = 80;
+/**
+ * The group-chat view of the workspace announcement feed (the "Chat" tab).
+ *
+ * The API returns announcements newest-first, but a chat reads oldest -> newest
+ * top -> bottom, so the list is reversed before render; messages are filtered to
+ * the selected repo. Each row mirrors app.js `renderAnnouncements`: an avatar
+ * (initials + deterministic color), the sender, an optional "→ @target" /
+ * "→ admin" header, the relative time, and the body. Operator messages
+ * (`fromAdmin`) get `msg--me` (right-aligned); directed or to-admin messages get
+ * `msg--targeted`.
+ *
+ * The viewer stays pinned to the newest message UNLESS they have scrolled up to
+ * read history — measured against the scroll container before each re-render and
+ * re-applied in a layout effect so the write happens before paint (no flicker).
+ *
+ * @param props - The feed, the repo filter, and the server clock.
+ * @returns The scrollable chat element.
+ */
+export function Chat({ announcements, selectedRepo, nowMs }) {
+    const chatRef = useRef(null);
+    // Capture "were we near the bottom?" BEFORE React commits the new DOM, so the
+    // layout effect can decide whether to re-pin. A ref (not state) because it's a
+    // pre-paint measurement, never rendered.
+    const stickRef = useRef(true);
+    const c = chatRef.current;
+    if (c) {
+        stickRef.current = c.scrollHeight - c.scrollTop - c.clientHeight < NEAR_BOTTOM_PX;
+    }
+    // The API returns newest-first; a chat reads oldest -> newest, top -> bottom.
+    // Only show messages whose repo matches the current selection.
+    const messages = [...announcements]
+        .filter((a) => matchesRepo(a, selectedRepo))
+        .reverse();
+    // Keep the viewer pinned to the newest message unless they've scrolled up to
+    // read history. useLayoutEffect so the scroll write lands before paint.
+    useLayoutEffect(() => {
+        if (stickRef.current && chatRef.current) {
+            chatRef.current.scrollTop = chatRef.current.scrollHeight;
+        }
+    }, [messages.length]);
+    return (_jsx("div", { id: "chat", className: "chat", ref: chatRef, children: messages.length === 0 ? (_jsx("div", { className: "empty", children: "No announcements yet \u2014 agents will post here as they coordinate." })) : (messages.map((a, i) => {
+            const targeted = a.targetAgentName !== null || a.toAdmin;
+            const className = "msg" +
+                (targeted ? " msg--targeted" : "") +
+                (a.fromAdmin ? " msg--me" : "");
+            return (
+            // The feed has no stable id; index is acceptable because the list is
+            // append-only oldest->newest and rows are never reordered in place.
+            _jsxs("div", { className: className, children: [_jsx("div", { className: "msg__avatar", style: { background: colorForName(a.fromAgentName) }, children: initialsFor(a.fromAgentName) }), _jsxs("div", { className: "msg__body", children: [_jsxs("div", { className: "msg__head", children: [_jsx("span", { className: "msg__who", style: { color: colorForName(a.fromAgentName) }, children: a.fromAgentName }), a.fromHuman ? _jsx("span", { className: "msg__human", children: a.fromHuman }) : null, a.targetAgentName !== null ? (_jsx("span", { className: "msg__to", children: `→ @${a.targetAgentName}` })) : a.toAdmin ? (_jsx("span", { className: "msg__to", children: "\u2192 admin" })) : null, _jsx("span", { className: "msg__time", children: formatRelative(a.createdAt, nowMs) })] }), _jsx("div", { className: "msg__text", children: a.body })] })] }, i));
+        })) }));
+}

package/dist/components/Composer.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+import type { WorkspaceAgentT } from "@shepherd/shared";
+/** Props for {@link Composer}. */
+export interface ComposerProps {
+    /** Workspace agents; the live ones in the selected repo drive @-autocomplete. */
+    agents: WorkspaceAgentT[];
+    /** The board's selected repo; `null`/`"__all__"` broadcast to every repo. */
+    selectedRepo: string | null;
+    /**
+     * Workspace to post into. When given, submit goes through the plural
+     * `announceTo(id, …)` route; when omitted it uses the singular self-host
+     * `announce(…)` alias, so an unscoped composer is unchanged.
+     */
+    workspaceId?: string;
+    /** Invoked after a successful send so the host can refresh the feed. */
+    onSent: () => void | Promise<void>;
+}
+/**
+ * The operator's message composer (the "Chat" tab footer). A controlled input
+ * with an @-mention autocomplete and a send button, ported from app.js
+ * `setupComposer` + `renderPop`.
+ *
+ * As the operator types, the token immediately left of the caret is parsed; if
+ * it is an `@mention`, a `role="listbox"` of live agents in the selected repo
+ * opens. ArrowUp/ArrowDown move the highlight, Enter/Tab (or a mousedown on a
+ * row) accept it — inserting `"@Name "` — and Escape closes it. On submit a
+ * blank body is ignored; otherwise the first mention matching a known agent
+ * directs the message (`targetAgentName`) and the selected repo scopes a
+ * broadcast (`null` in All-repos mode). The send button is disabled in-flight;
+ * on success the input clears and `onSent` is awaited, on failure a
+ * "send failed — retry" status shows and the button re-enables. The client comes
+ * from context, keeping the composer auth-agnostic.
+ *
+ * @param props - The agents, repo filter, and post-send callback.
+ * @returns The composer element (autocomplete popup + form).
+ */
+export declare function Composer({ agents, selectedRepo, workspaceId, onSent }: ComposerProps): ReactNode;

package/dist/components/Composer.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import { useShepherdClient } from "../context.js";
+import { colorForName, extractTarget, initialsFor, mentionableAgents, parseMention, } from "../logic.js";
+/** How many autocomplete suggestions to show — ported from app.js `.slice(0, 8)`. */
+const MAX_SUGGESTIONS = 8;
+/**
+ * The operator's message composer (the "Chat" tab footer). A controlled input
+ * with an @-mention autocomplete and a send button, ported from app.js
+ * `setupComposer` + `renderPop`.
+ *
+ * As the operator types, the token immediately left of the caret is parsed; if
+ * it is an `@mention`, a `role="listbox"` of live agents in the selected repo
+ * opens. ArrowUp/ArrowDown move the highlight, Enter/Tab (or a mousedown on a
+ * row) accept it — inserting `"@Name "` — and Escape closes it. On submit a
+ * blank body is ignored; otherwise the first mention matching a known agent
+ * directs the message (`targetAgentName`) and the selected repo scopes a
+ * broadcast (`null` in All-repos mode). The send button is disabled in-flight;
+ * on success the input clears and `onSent` is awaited, on failure a
+ * "send failed — retry" status shows and the button re-enables. The client comes
+ * from context, keeping the composer auth-agnostic.
+ *
+ * @param props - The agents, repo filter, and post-send callback.
+ * @returns The composer element (autocomplete popup + form).
+ */
+export function Composer({ agents, selectedRepo, workspaceId, onSent }) {
+    const client = useShepherdClient();
+    const inputRef = useRef(null);
+    const [value, setValue] = useState("");
+    const [items, setItems] = useState([]);
+    const [active, setActive] = useState(0);
+    const [range, setRange] = useState(null);
+    const [sending, setSending] = useState(false);
+    const [failed, setFailed] = useState(false);
+    // The names addressable under the current filter — the same crew the board
+    // shows for the selected repo. Recomputed each render; cheap for board sizes.
+    // An agent with no session repo (repo === null) coalesces to "" so it never
+    // equals a real repo (mentionable only in All-repos, via matchesRepo's
+    // short-circuit) — exactly the original app.js behavior.
+    const names = mentionableAgents(agents.map((a) => ({ name: a.name, presence: a.presence, repo: a.repo ?? "" })), selectedRepo);
+    const popOpen = items.length > 0;
+    const closePop = useCallback(() => {
+        setItems([]);
+        setRange(null);
+    }, []);
+    /**
+     * Recompute the autocomplete from the caret position: open it on an active
+     * @mention (filtered by the live crew), else close it. Mirrors `refreshPop`.
+     */
+    const refreshPop = useCallback((nextValue, caret) => {
+        const mention = parseMention(nextValue, caret);
+        if (!mention) {
+            closePop();
+            return;
+        }
+        const q = mention.query.toLowerCase();
+        const next = names
+            .filter((n) => n.toLowerCase().startsWith(q))
+            .slice(0, MAX_SUGGESTIONS);
+        setItems(next);
+        setRange({ start: mention.start, end: mention.end });
+        setActive(0);
+    }, [names, closePop]);
+    /** Replace the @-token with `"@Name "` and place the caret after it. */
+    const accept = useCallback((name) => {
+        if (!range)
+            return;
+        const insert = "@" + name + " ";
+        const next = value.slice(0, range.start) + insert + value.slice(range.end);
+        const caret = range.start + insert.length;
+        setValue(next);
+        closePop();
+        // Restore focus + caret after React commits the new value.
+        requestAnimationFrame(() => {
+            const el = inputRef.current;
+            if (el) {
+                el.focus();
+                el.setSelectionRange(caret, caret);
+            }
+        });
+    }, [range, value, closePop]);
+    const onInput = useCallback((next) => {
+        setValue(next);
+        const caret = inputRef.current?.selectionStart ?? next.length;
+        refreshPop(next, caret);
+    }, [refreshPop]);
+    const onKeyDown = useCallback((e) => {
+        if (!popOpen)
+            return;
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setActive((a) => (a + 1) % items.length);
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setActive((a) => (a - 1 + items.length) % items.length);
+        }
+        else if (e.key === "Enter" || e.key === "Tab") {
+            e.preventDefault();
+            accept(items[active]);
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            closePop();
+        }
+    }, [popOpen, items, active, accept, closePop]);
+    const onSubmit = useCallback(async (e) => {
+        e.preventDefault();
+        const body = value.trim();
+        if (!body)
+            return;
+        // The first @mention matching a live agent directs the message; otherwise
+        // it broadcasts to the selected repo (null repo => fan out to all repos).
+        const targetAgentName = extractTarget(body, names);
+        const repo = selectedRepo === null || selectedRepo === "__all__" ? null : selectedRepo;
+        setSending(true);
+        setFailed(false);
+        try {
+            // A scoped composer posts to the workspace-scoped route; otherwise the
+            // singular self-host alias. Same request body either way.
+            const req = { body, targetAgentName, repo };
+            await (workspaceId !== undefined
+                ? client.announceTo(workspaceId, req)
+                : client.announce(req));
+            setValue("");
+            closePop();
+            await onSent();
+        }
+        catch {
+            // A 401 is handled by the client's onUnauthorized (self-host); the
+            // composer just shows the rejected state and keeps the body for retry.
+            setFailed(true);
+        }
+        finally {
+            setSending(false);
+        }
+    }, [value, names, selectedRepo, workspaceId, client, closePop, onSent]);
+    return (_jsxs("div", { className: "composer", children: [_jsx("div", { id: "mention-pop", className: "mention-pop", role: "listbox", "aria-label": "Agents to mention", hidden: !popOpen, children: items.map((name, i) => (_jsxs("button", { id: `mention-opt-${i}`, type: "button", role: "option", "aria-selected": i === active, className: "mention-mi" + (i === active ? " on" : ""), 
+                    // mousedown fires before the input blurs, so the click still lands.
+                    onMouseDown: (e) => {
+                        e.preventDefault();
+                        accept(name);
+                    }, children: [_jsx("div", { className: "ma", style: { background: colorForName(name) }, children: initialsFor(name) }), _jsx("span", { children: name })] }, name))) }), _jsxs("form", { id: "chat-form", className: "chat-form", onSubmit: (e) => {
+                    void onSubmit(e);
+                }, children: [_jsx("input", { id: "chat-input", className: "chat-input", type: "text", autoComplete: "off", "aria-label": "Message the team", placeholder: "Message the team\u2026 use @name to direct it", role: "combobox", "aria-expanded": popOpen, "aria-controls": "mention-pop", "aria-autocomplete": "list", "aria-activedescendant": popOpen ? `mention-opt-${active}` : undefined, ref: inputRef, value: value, onChange: (e) => onInput(e.target.value), onKeyDown: onKeyDown }), _jsx("button", { id: "chat-send", className: "chat-send", type: "submit", disabled: sending, children: "Send" })] }), failed ? (_jsx("div", { className: "chat__note", role: "status", children: "send failed \u2014 retry" })) : null] }));
+}

package/dist/components/Crew.d.ts

@@ -0,0 +1,23 @@
+import type { ReactElement } from "react";
+import type { WorkspaceAgentT, WorkspaceTaskT } from "@shepherd/shared";
+/** Props for {@link Crew}. */
+export interface CrewProps {
+    /** All known agents; only live ones in the selected repo are shown. */
+    agents: WorkspaceAgentT[];
+    /** Active/history tasks, used to mark which agents are currently working. */
+    tasks: WorkspaceTaskT[];
+    /** The selected repo, or `null`/`"__all__"` for all repos. */
+    selectedRepo: string | null;
+}
+/**
+ * The crew rail: live agents in the current repo view. Ported from app.js
+ * `renderCrew`. An agent is "active" when they own an active task in view;
+ * active agents sort first, then alphabetical, and idle (non-active) agents are
+ * greyed via `.person--idle`. Each avatar shows {@link initialsFor} on a
+ * {@link colorForName} background.
+ *
+ * @param props - The agents, the tasks that determine activity, and the repo
+ *   filter.
+ * @returns The crew rail element.
+ */
+export declare function Crew({ agents, tasks, selectedRepo }: CrewProps): ReactElement;

package/dist/components/Crew.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { colorForName, initialsFor, matchesRepo } from "../logic.js";
+/**
+ * The crew rail: live agents in the current repo view. Ported from app.js
+ * `renderCrew`. An agent is "active" when they own an active task in view;
+ * active agents sort first, then alphabetical, and idle (non-active) agents are
+ * greyed via `.person--idle`. Each avatar shows {@link initialsFor} on a
+ * {@link colorForName} background.
+ *
+ * @param props - The agents, the tasks that determine activity, and the repo
+ *   filter.
+ * @returns The crew rail element.
+ */
+export function Crew({ agents, tasks, selectedRepo }) {
+    const live = agents.filter((a) => a.presence === "live" && matchesRepo({ repo: a.repo ?? "" }, selectedRepo));
+    // An agent is "active" iff they own an active task — mirrors app.js, which
+    // builds an intent-by-agent map from the active tasks.
+    const activeAgents = new Set();
+    for (const t of tasks)
+        if (t.status === "active")
+            activeAgents.add(t.agentName);
+    const isActive = (a) => activeAgents.has(a.name);
+    const ordered = [...live].sort((x, y) => {
+        const ax = isActive(x);
+        const ay = isActive(y);
+        if (ax !== ay)
+            return ax ? -1 : 1; // active agents first
+        return x.name.localeCompare(y.name);
+    });
+    return (_jsx("div", { className: "crew", id: "crew", children: ordered.map((a) => (_jsxs("div", { className: "person" + (isActive(a) ? "" : " person--idle"), children: [_jsx("div", { className: "avatar", style: { background: colorForName(a.name) }, children: initialsFor(a.name) }), _jsx("span", { className: "person__name", children: a.name })] }, a.name))) }));
+}

package/dist/components/Dashboard.d.ts

@@ -0,0 +1,34 @@
+import type { ReactElement } from "react";
+/** Props for {@link Dashboard}. The client comes from context. */
+export interface DashboardProps {
+    /**
+     * Workspace to scope the board to. When given, the polling hook hits the
+     * workspace-scoped `landscape(id)` route and the composer posts via
+     * `announceTo(id, …)`; when omitted, both fall back to the self-host singular
+     * aliases, so a no-id render is unchanged.
+     */
+    workspaceId?: string;
+}
+/**
+ * The Shepherd wallboard shell. Composes {@link useLandscapePolling} (which reads
+ * the client from context, keeping this auth-agnostic) with the six leaf
+ * components, owning only the UI state app.js kept in module variables:
+ *
+ *  - `activeTab` — persisted to `"shepherd.tab"` (default `"tasks"`).
+ *  - `selectedRepo` — persisted to `"shepherd.repo"`; `null` derives a default on
+ *    the first render with >=2 repos (see {@link resolveSelectedRepo}).
+ *  - `doneShown` — the history page size, grown a page at a time by "Load older".
+ *
+ * Header chrome mirrors app.js: brand, the repo filter, vitals (online/active
+ * counts under the current filter), the poll status indicator, a freshness
+ * string, and the tab strip. The body shows the Tasks panel (crew + active +
+ * done) or the Chat panel (feed + composer); the composer's post-send hook is the
+ * polling hook's `refresh`, so a sent message shows up immediately.
+ *
+ * Renders the header even before the first snapshot arrives so the board never
+ * blanks — the panels simply render their own empty states off an empty
+ * landscape.
+ *
+ * @returns The dashboard element.
+ */
+export declare function Dashboard({ workspaceId }?: DashboardProps): ReactElement;