@korso/shepherd-ui 0.10.0 → 0.11.0

package/README.md

@@ -1,47 +1,50 @@
-# @korso/shepherd-ui
-
-The Shepherd dashboard: an **auth-agnostic** React app (Vite) that renders the
-workspace landscape (crew, territory, active/done work, chat) and issues operator
-actions against the hub. "Auth-agnostic" means the core holds no notion of who
-the user is or how they authenticated — it renders coordination state and issues
-operator actions, leaving authentication to the layer in front of it.
-
-## Two build outputs
-
-One source tree, two Vite builds (`npm run build` runs both):
-
-- **`dist/lib`** (`build:lib`) — a component library for **Korso** to embed in
-  the hosted product. Exposes `<Dashboard/>`, `createShepherdClient`, the React
-  context (`ShepherdClientProvider` / `useShepherdClient`), and types via the `.`
-  export. It is **token-blind**: auth lives in the BFF in front of it. The
-  stylesheet is opt-in (`@korso/shepherd-ui/styles.css`), not auto-imported.
-- **`dist/selfhost`** (`build:app`) — a self-contained SPA the **hub serves**
-  verbatim via `@fastify/static` (the hub resolves `../../ui/dist/selfhost/`).
-  It bundles its own CSS and mounts the token-gated root.
-
-Both `dist/` outputs are gitignored; `npm run build` (root) and the hub Docker
-image regenerate them.
-
-## Two mounts
-
-- **Self-host (the Hub).** The Hub serves `<SelfHostApp/>` (the `./selfhost`
-  export, mounted by `src/main.tsx`). This is the **one** place a team token is
-  handled — the named exception to the auth-agnostic core: it prompts for the
-  `TEAM_TOKEN`, persists it, builds a same-origin client that sends
-  `Authorization: Bearer <token>`, and re-gates on a 401. The token gate lives
-  **only** here, never in the `.` export or `<Dashboard/>`.
-- **Hosted (Korso).** Korso imports `<Dashboard/>` + `createShepherdClient` from
-  the `.` export and supplies its own auth layer (the BFF). No token gate.
-
-## Development
-
-```
-npm -w @korso/shepherd-ui run dev    # Vite dev server for the self-host SPA
-```
-
-Other scripts: `build` (both outputs), `build:lib`, `build:app`, `type-check`
-(`tsc --noEmit`), `test` (Vitest, jsdom).
-
-## Phase note
-
-Korso-side consumption of the `dist/lib` library is **finalized in Phase 5**.
+# @korso/shepherd-ui
+
+The Shepherd dashboard: an **auth-agnostic** React app (Vite) that renders the
+workspace landscape (crew, territory, active/done work, chat) and issues operator
+actions against the hub. "Auth-agnostic" means the core holds no notion of who
+the user is or how they authenticated — it renders coordination state and issues
+operator actions, leaving authentication to the layer in front of it.
+
+## Two build outputs
+
+One source tree, two Vite builds (`npm run build` runs both):
+
+- **`dist/lib`** (`build:lib`) — a component library for **Korso** to embed in
+  the hosted product. Exposes `<Dashboard/>`, `createShepherdClient`, the React
+  context (`ShepherdClientProvider` / `useShepherdClient`), and types via the `.`
+  export. It is **token-blind**: auth lives in the BFF in front of it. The
+  stylesheet is opt-in (`@korso/shepherd-ui/styles.css`), not auto-imported.
+- **`dist/selfhost`** (`build:app`) — a self-contained SPA the **hub serves**
+  verbatim via `@fastify/static` (the hub resolves `../../ui/dist/selfhost/`).
+  It bundles its own CSS and mounts the token-gated root.
+
+Both `dist/` outputs are gitignored; `npm run build` (root) and the hub Docker
+image regenerate them.
+
+## Two mounts
+
+- **Self-host (the Hub).** The Hub serves `<SelfHostApp/>` (the `./selfhost`
+  export, mounted by `src/main.tsx`). This is the **one** place a team token is
+  handled — the named exception to the auth-agnostic core: it prompts for the
+  `TEAM_TOKEN`, persists it, builds a same-origin client that sends
+  `Authorization: Bearer <token>`, and re-gates on a 401. The token gate lives
+  **only** here, never in the `.` export or `<Dashboard/>`.
+- **Hosted (Korso).** Korso imports `<Dashboard/>` + `createShepherdClient` from
+  the `.` export and supplies its own auth layer (the BFF). No token gate.
+  Hosted shells that embed `<ShepherdRoot/>` may pass `onLogout`; Shepherd renders
+  the Sign out action at the bottom of Config, while the host callback performs
+  the actual session cleanup and navigation (cookies, OIDC, BFF state, etc.).
+
+## Development
+
+```
+npm -w @korso/shepherd-ui run dev    # Vite dev server for the self-host SPA
+```
+
+Other scripts: `build` (both outputs), `build:lib`, `build:app`, `type-check`
+(`tsc --noEmit`), `test` (Vitest, jsdom).
+
+## Phase note
+
+Korso-side consumption of the `dist/lib` library is **finalized in Phase 5**.

package/dist/ShepherdRoot.d.ts

@@ -5,5 +5,10 @@ export interface ShepherdRootProps {
      * to the client's baseUrl, which is correct for self-host.
      */
     hubUrl?: string;
+    /**
+     * Hosted session logout hook. The embedding frontend/BFF owns cookies,
+     * session state, and OIDC cleanup; Shepherd only renders the Config action.
+     */
+    onLogout?: () => void;
 }
-export declare function ShepherdRoot({ hubUrl }: ShepherdRootProps): import("react").JSX.Element;
+export declare function ShepherdRoot({ hubUrl, onLogout }: ShepherdRootProps): import("react").JSX.Element;

package/dist/ShepherdRoot.js

@@ -1,11 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import { Dashboard } from "./components/Dashboard.js";
 import { WorkspaceSwitcher } from "./config/WorkspaceSwitcher.js";
 import { ConfigPanel } from "./config/ConfigPanel.js";
+import { SignOutAction } from "./config/SignOutAction.js";
 import { useShepherdClient } from "./context.js";
 import { describeError } from "./client.js";
-export function ShepherdRoot({ hubUrl }) {
+export function ShepherdRoot({ hubUrl, onLogout }) {
     const client = useShepherdClient();
     const [load, setLoad] = useState({ status: "loading" });
     const [selectedId, setSelectedId] = useState(null);
@@ -48,6 +49,6 @@ export function ShepherdRoot({ hubUrl }) {
     // The Config tab's content. With a workspace selected it's the sidebar
     // <ConfigPanel>; with none it's a prompt pointing at the switcher, since
     // create/join now live there (the sidebar has nothing to configure).
-    const configSection = (_jsxs("section", { className: "shepherd-config", "aria-labelledby": "config-heading", children: [_jsx("h2", { id: "config-heading", children: "Configuration" }), selected ? (_jsx(ConfigPanel, { workspace: selected, hubUrl: hubUrl, membersRefreshKey: membersRefreshKey, onMembersChanged: () => setMembersRefreshKey((k) => k + 1), onLeft: () => void fetchWorkspaces(), onDeleted: () => void fetchWorkspaces() })) : (_jsxs("p", { className: "config-none", children: ["You're not in a workspace yet. Use the ", _jsx("b", { children: "Get started \u25BE" }), " menu at the top to create one or join with an invite code."] }))] }));
+    const configSection = (_jsxs("section", { className: "shepherd-config", "aria-labelledby": "config-heading", children: [_jsx("h2", { id: "config-heading", children: "Configuration" }), selected ? (_jsx(ConfigPanel, { workspace: selected, hubUrl: hubUrl, membersRefreshKey: membersRefreshKey, onMembersChanged: () => setMembersRefreshKey((k) => k + 1), onLeft: () => void fetchWorkspaces(), onDeleted: () => void fetchWorkspaces(), onLogout: onLogout })) : (_jsxs(_Fragment, { children: [_jsxs("p", { className: "config-none", children: ["You're not in a workspace yet. Use the ", _jsx("b", { children: "Get started \u25BE" }), " menu at the top to create one or join with an invite code."] }), onLogout && _jsx(SignOutAction, { onLogout: onLogout })] }))] }));
     return (_jsx("div", { className: "shepherd-root", children: _jsx(Dashboard, { workspaceId: selected?.id, config: configSection, switcher: switcher, hasWorkspace: hasWorkspace }) }));
 }

package/dist/components/Dashboard.d.ts

@@ -28,6 +28,11 @@ export interface DashboardProps {
      * has its implicit team workspace).
      */
     hasWorkspace?: boolean;
+    /**
+     * Optional header logout seam. The dashboard only renders the control and
+     * invokes this callback; authentication side effects belong to the caller.
+     */
+    onLogout?: () => void;
 }
 /**
  * The Shepherd wallboard shell. Composes {@link useLandscapePolling} (which reads
@@ -51,4 +56,4 @@ export interface DashboardProps {
  *
  * @returns The dashboard element.
  */
-export declare function Dashboard({ workspaceId, config, switcher, hasWorkspace, }?: DashboardProps): ReactElement;
+export declare function Dashboard({ workspaceId, config, switcher, hasWorkspace, onLogout, }?: DashboardProps): ReactElement;

package/dist/components/Dashboard.js

@@ -128,7 +128,7 @@ function computeCounts(snapshot) {
  *
  * @returns The dashboard element.
  */
-export function Dashboard({ workspaceId, config, switcher, hasWorkspace, } = {}) {
+export function Dashboard({ workspaceId, config, switcher, hasWorkspace, onLogout, } = {}) {
     const hasConfig = config != null;
     // Only the hosted shell with an explicit empty account suppresses the board;
     // self-host (hasWorkspace undefined) always has its implicit team workspace.
@@ -275,7 +275,7 @@ export function Dashboard({ workspaceId, config, switcher, hasWorkspace, } = {})
     // makes sense for a live board — hide it on the Config tab and when there is
     // no workspace to poll. The brand and the tab strip stay in every state.
     const showBoardChrome = !noWorkspace && activeTab !== "config";
-    return (_jsxs("div", { id: "board", children: [_jsxs("header", { children: [_jsx("h1", { className: "brand", style: { margin: 0, font: "inherit" }, children: "Shepherd" }), switcher, showBoardChrome && (_jsxs(_Fragment, { children: [_jsx(RepoSelect, { repos: repos, counts: counts, selected: effectiveRepo, onSelect: onSelectRepo }), _jsxs("span", { className: "vitals", children: [_jsx("b", { id: "vitals-online", children: online }), " online · ", _jsx("b", { id: "vitals-active", children: active }), " active"] })] })), _jsx("span", { className: "grow" }), showBoardChrome && (_jsxs(_Fragment, { children: [_jsx("span", { id: "status", className: "status" + (statusView.kind ? ` status--${statusView.kind}` : ""), children: statusView.text }), _jsx("span", { id: "freshness", className: "freshness", children: freshness })] })), _jsx("nav", { className: "tabs", role: "tablist", "aria-label": "Shepherd views", children: tabs.map(({ id, label }, index) => (_jsx("button", { ref: (el) => {
+    return (_jsxs("div", { id: "board", children: [_jsxs("header", { children: [_jsx("h1", { className: "brand", style: { margin: 0, font: "inherit" }, children: "Shepherd" }), switcher, showBoardChrome && (_jsxs(_Fragment, { children: [_jsx(RepoSelect, { repos: repos, counts: counts, selected: effectiveRepo, onSelect: onSelectRepo }), _jsxs("span", { className: "vitals", children: [_jsx("b", { id: "vitals-online", children: online }), " online · ", _jsx("b", { id: "vitals-active", children: active }), " active"] })] })), _jsx("span", { className: "grow" }), showBoardChrome && (_jsxs(_Fragment, { children: [_jsx("span", { id: "status", className: "status" + (statusView.kind ? ` status--${statusView.kind}` : ""), children: statusView.text }), _jsx("span", { id: "freshness", className: "freshness", children: freshness })] })), onLogout && (_jsx("button", { type: "button", className: "header-signout", onClick: onLogout, children: "Sign out" })), _jsx("nav", { className: "tabs", role: "tablist", "aria-label": "Shepherd views", children: tabs.map(({ id, label }, index) => (_jsx("button", { ref: (el) => {
                                 tabRefs.current[index] = el;
                             }, className: "tab" + (activeTab === id ? " tab--active" : ""), "data-tab": id, type: "button", role: "tab", id: `tab-${id}`, "aria-controls": `panel-${id}`, "aria-selected": activeTab === id, tabIndex: activeTab === id ? 0 : -1, onClick: () => onTab(id), onKeyDown: (e) => onTabKeyDown(e, index), children: label }, id))) })] }), _jsx("section", { id: "panel-tasks", role: "tabpanel", "aria-labelledby": "tab-tasks", hidden: activeTab !== "tasks", children: noWorkspace ? (_jsx(EmptyState, { onGetStarted: () => onTab("config") })) : (_jsxs(_Fragment, { children: [_jsx(Crew, { agents: agents, tasks: tasks, selectedRepo: effectiveRepo }), _jsxs("div", { className: "board", children: [_jsxs("div", { className: "col", children: [_jsxs("div", { className: "colhead", children: [_jsx("h2", { children: "Active" }), _jsx("span", { className: "n", id: "active-count", children: activeCount })] }), _jsx(ActiveList, { tasks: tasks, nowMs: nowMs, selectedRepo: effectiveRepo })] }), _jsx("div", { className: "board__rule" }), _jsxs("div", { className: "col", children: [_jsxs("div", { className: "colhead", children: [_jsx("h2", { children: "Done" }), _jsx("span", { className: "n", id: "done-count", children: doneCount })] }), _jsx(DoneList, { tasks: tasks, nowMs: nowMs, selectedRepo: effectiveRepo, doneShown: doneShown, onLoadMore: onLoadMore })] })] })] })) }), _jsx("section", { id: "panel-chat", role: "tabpanel", "aria-labelledby": "tab-chat", hidden: activeTab !== "chat", children: noWorkspace ? (_jsx(EmptyState, { onGetStarted: () => onTab("config") })) : (_jsxs("div", { className: "chat-wrap", children: [_jsx(Chat, { announcements: announcements, selectedRepo: effectiveRepo, nowMs: nowMs }), _jsx(Composer, { agents: agents, selectedRepo: effectiveRepo, workspaceId: workspaceId, onSent: refresh })] })) }), hasConfig && (_jsx("section", { id: "panel-config", role: "tabpanel", "aria-labelledby": "tab-config", hidden: activeTab !== "config", children: config })), _jsx(FeedbackWidget, { workspaceId: workspaceId })] }));
 }

package/dist/config/ConfigPanel.d.ts

@@ -12,5 +12,10 @@ export interface ConfigPanelProps {
     onLeft?: () => void;
     /** Called after a successful delete, so the shell re-lists its workspaces. */
     onDeleted?: () => void;
+    /**
+     * Hosted session logout hook. Shepherd renders the control while the host owns
+     * the authentication side effect.
+     */
+    onLogout?: () => void;
 }
-export declare function ConfigPanel({ workspace, hubUrl, membersRefreshKey, onMembersChanged, onLeft, onDeleted, }: ConfigPanelProps): import("react").JSX.Element;
+export declare function ConfigPanel({ workspace, hubUrl, membersRefreshKey, onMembersChanged, onLeft, onDeleted, onLogout, }: ConfigPanelProps): import("react").JSX.Element;

package/dist/config/ConfigPanel.js

@@ -4,13 +4,14 @@ import { GeneralSettings } from "./GeneralSettings.js";
 import { Members } from "./Members.js";
 import { Invites } from "./Invites.js";
 import { ConnectAgent } from "./ConnectAgent.js";
+import { SignOutAction } from "./SignOutAction.js";
 const SECTIONS = [
     { id: "general", label: "General" },
     { id: "members", label: "Members" },
     { id: "agent", label: "Agent" },
 ];
-export function ConfigPanel({ workspace, hubUrl, membersRefreshKey, onMembersChanged, onLeft, onDeleted, }) {
+export function ConfigPanel({ workspace, hubUrl, membersRefreshKey, onMembersChanged, onLeft, onDeleted, onLogout, }) {
     const [section, setSection] = useState("general");
     const isAdmin = workspace.role === "admin";
-    return (_jsxs("div", { className: "config-layout", children: [_jsx("nav", { className: "config-nav", "aria-label": "Configuration sections", children: SECTIONS.map(({ id, label }) => (_jsx("button", { type: "button", className: "config-nav__item" + (section === id ? " config-nav__item--on" : ""), "aria-current": section === id ? "page" : undefined, onClick: () => setSection(id), children: label }, id))) }), _jsxs("div", { className: "config-panel", children: [section === "general" && (_jsx(GeneralSettings, { workspace: workspace, onLeft: onLeft, onDeleted: onDeleted })), section === "members" && (_jsxs(_Fragment, { children: [_jsx(Members, { workspaceId: workspace.id, refreshKey: membersRefreshKey, canRemove: isAdmin }), isAdmin && (_jsx(Invites, { workspaceId: workspace.id, onMembersChanged: onMembersChanged }))] })), section === "agent" && _jsx(ConnectAgent, { hubUrl: hubUrl })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "config-layout", children: [_jsx("nav", { className: "config-nav", "aria-label": "Configuration sections", children: SECTIONS.map(({ id, label }) => (_jsx("button", { type: "button", className: "config-nav__item" + (section === id ? " config-nav__item--on" : ""), "aria-current": section === id ? "page" : undefined, onClick: () => setSection(id), children: label }, id))) }), _jsxs("div", { className: "config-panel", children: [section === "general" && (_jsx(GeneralSettings, { workspace: workspace, onLeft: onLeft, onDeleted: onDeleted })), section === "members" && (_jsxs(_Fragment, { children: [_jsx(Members, { workspaceId: workspace.id, refreshKey: membersRefreshKey, canRemove: isAdmin }), isAdmin && (_jsx(Invites, { workspaceId: workspace.id, onMembersChanged: onMembersChanged }))] })), section === "agent" && _jsx(ConnectAgent, { hubUrl: hubUrl })] })] }), onLogout && _jsx(SignOutAction, { onLogout: onLogout })] }));
 }

package/dist/config/SignOutAction.d.ts

@@ -0,0 +1,7 @@
+/** Props for the hosted session sign out presentation control. */
+export interface SignOutActionProps {
+    /** Called immediately when the operator chooses to end this dashboard session. */
+    onLogout: () => void;
+}
+/** Renders the session-level sign out control supplied by the host shell. */
+export declare function SignOutAction({ onLogout }: SignOutActionProps): import("react").JSX.Element;

package/dist/config/SignOutAction.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+/** Renders the session-level sign out control supplied by the host shell. */
+export function SignOutAction({ onLogout }) {
+    const headingId = useId();
+    return (_jsxs("section", { className: "config-signout", "aria-labelledby": headingId, children: [_jsx("div", { className: "card-head", children: _jsx("h3", { id: headingId, children: "Session" }) }), _jsxs("div", { className: "card-body", children: [_jsx("p", { className: "helper", children: "Sign out of this Shepherd dashboard session." }), _jsx("button", { type: "button", onClick: onLogout, children: "Sign out" })] })] }));
+}