@schlessera/brain-ui-react 0.17.0 → 0.19.0

package/src/components/layout/mobile-tab-bar.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import {
+  Activity,
   Brain,
   RefreshCw,
   History,
@@ -11,7 +12,9 @@ import {
 } from "lucide-react";
 import { useUIStore } from "../../stores/ui-store.js";
 import { useChatStore } from "../../stores/chat-store.js";
+import { useActivityStore } from "../../stores/activity-store.js";
 import { cn } from "../../lib/utils.js";
+import { CountBadge } from "../activity/span-bits.js";
 
 export function MobileTabBar() {
   const activeView = useUIStore((s) => s.activeView);
@@ -21,6 +24,7 @@ export function MobileTabBar() {
   const toggleFilePanel = useUIStore((s) => s.toggleFilePanel);
   const toggleSettingsPanel = useUIStore((s) => s.toggleSettingsPanel);
   const clearMessages = useChatStore((s) => s.clearMessages);
+  const inboxCount = useActivityStore((s) => s.inbox.length);
 
   /** Chat-scoped panels live in the chat page — surface it before opening them. */
   function inChat(toggle: () => void) {
@@ -66,11 +70,15 @@ export function MobileTabBar() {
           clearMessages();
         }}
       />
+      {/* Activity holds the tab-bar slot; Graph moved into the More menu —
+          the phone glance-check ("is real work happening?") is the headline
+          flow and must stay one tap away (planning decision). */}
       <TabIcon
-        icon={Waypoints}
-        label="Graph"
-        active={activeView === "graph"}
-        onClick={() => setActiveView("graph")}
+        icon={Activity}
+        label="Activity"
+        active={activeView === "activity"}
+        badge={inboxCount}
+        onClick={() => setActiveView("activity")}
       />
       <TabIcon icon={FolderTree} label="Files" onClick={toggleFilePanel} />
       <div ref={moreRef} className="relative">
@@ -85,6 +93,14 @@ export function MobileTabBar() {
             role="menu"
             className="absolute bottom-full right-0 z-50 mb-2 min-w-[10rem] overflow-hidden rounded-xl border border-border bg-surface-overlay py-1 shadow-2xl"
           >
+            <MoreItem
+              icon={Waypoints}
+              label="Graph"
+              onClick={() => {
+                setMoreOpen(false);
+                setActiveView("graph");
+              }}
+            />
             <MoreItem
               icon={RefreshCw}
               label="Sync"
@@ -121,21 +137,25 @@ function TabIcon({
   label,
   active,
   onClick,
+  badge,
 }: {
   icon: typeof Brain;
   label: string;
   active?: boolean;
   onClick?: () => void;
+  /** Unread-count dot (the inbox badge). Hidden at 0. */
+  badge?: number;
 }) {
   return (
     <button
       onClick={onClick}
       className={cn(
-        "flex flex-col items-center gap-0.5 px-2 py-1 text-[10px]",
+        "relative flex flex-col items-center gap-0.5 px-2 py-1 text-[10px]",
         active ? "text-primary" : "text-muted-foreground"
       )}
     >
       <Icon className="h-5 w-5" />
+      {badge !== undefined && <CountBadge count={badge} className="right-0 top-0" />}
       {label}
     </button>
   );

package/src/components/layout/side-rail.tsx

@@ -1,4 +1,5 @@
 import {
+  Activity,
   Brain,
   RefreshCw,
   Newspaper,
@@ -9,9 +10,11 @@ import {
   Waypoints,
 } from "lucide-react";
 import { useConnectionStore } from "../../stores/connection-store.js";
+import { useActivityStore } from "../../stores/activity-store.js";
 import { useUIStore } from "../../stores/ui-store.js";
 import { useChatStore, activeChat } from "../../stores/chat-store.js";
 import { cn } from "../../lib/utils.js";
+import { CountBadge } from "../activity/span-bits.js";
 
 export function SideRail() {
   const wsStatus = useConnectionStore((s) => s.wsStatus);
@@ -25,6 +28,7 @@ export function SideRail() {
   const clearMessages = useChatStore((s) => s.clearMessages);
   const hasMessages = useChatStore((s) => activeChat(s).messages.length > 0);
   const isStreaming = useChatStore((s) => activeChat(s).isStreaming);
+  const inboxCount = useActivityStore((s) => s.inbox.length);
 
   /** Chat-scoped panels live in the chat page — surface it before opening them. */
   function inChat(toggle: () => void) {
@@ -79,6 +83,15 @@ export function SideRail() {
           setActiveView(activeView === "graph" ? "chat" : "graph")
         }
       />
+      <RailButton
+        icon={Activity}
+        label="Activity"
+        active={activeView === "activity"}
+        badge={inboxCount}
+        onClick={() =>
+          setActiveView(activeView === "activity" ? "chat" : "activity")
+        }
+      />
 
       {/* Spacer */}
       <div className="flex-1" />
@@ -125,12 +138,15 @@ function RailButton({
   onClick,
   disabled,
   active,
+  badge,
 }: {
   icon: typeof Brain;
   label: string;
   onClick: () => void;
   disabled?: boolean;
   active?: boolean;
+  /** Unread-count dot (the inbox badge). Hidden at 0. */
+  badge?: number;
 }) {
   return (
     <button
@@ -143,6 +159,7 @@ function RailButton({
       )}
     >
       <Icon className="h-4.5 w-4.5" />
+      {badge !== undefined && <CountBadge count={badge} className="-right-0.5 -top-0.5" />}
       {/* Tooltip */}
       <span className="pointer-events-none absolute left-full ml-2 whitespace-nowrap rounded-md bg-surface-overlay px-2.5 py-1 text-xs font-medium text-foreground opacity-0 shadow-lg transition-opacity group-hover:opacity-100 border border-border">
         {label}

package/src/hooks/use-now.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+
+/** All subscribed setters, driven by ONE shared interval. */
+const listeners = new Set<(now: number) => void>();
+let ticker: ReturnType<typeof setInterval> | null = null;
+
+/**
+ * A ticking `Date.now()` for live elapsed labels. Every consumer shares a
+ * single setInterval (created on the first subscriber's cadence, torn down
+ * with the last), so a screen full of running rows costs one timer, and all
+ * their labels tick in the same frame.
+ */
+export function useNow(intervalMs = 1000): number {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    listeners.add(setNow);
+    if (!ticker) {
+      ticker = setInterval(() => {
+        const t = Date.now();
+        for (const listener of listeners) listener(t);
+      }, intervalMs);
+    }
+    return () => {
+      listeners.delete(setNow);
+      if (listeners.size === 0 && ticker) {
+        clearInterval(ticker);
+        ticker = null;
+      }
+    };
+  }, [intervalMs]);
+  return now;
+}

package/src/hooks/use-websocket.ts

@@ -4,6 +4,7 @@ import { useConnectionStore } from "../stores/connection-store.js";
 import { useChatStore, activeChat, type ChatKey } from "../stores/chat-store.js";
 import { useProviderStore } from "../stores/provider-store.js";
 import { useMaskStore } from "../stores/mask-store.js";
+import { useActivityStore, loadSessionActivityHistory } from "../stores/activity-store.js";
 import { getWsUrl } from "../lib/backend.js";
 import type {
   ServerMessage,
@@ -121,9 +122,44 @@ function isOurDraftAnnouncement(
   return true;
 }
 
+/**
+ * Lazily open a session-scoped activity subscription (live subagent rows,
+ * server-stamped tool timing). Idempotent per connection; the subscribed set
+ * resets when a new socket's server_hello arrives.
+ */
+function ensureActivitySubscription(sessionId: string | null | undefined): void {
+  if (!sessionId) return;
+  const activity = useActivityStore.getState();
+  if (!activity.supported || activity.subscribed[sessionId]) return;
+  activity.markSubscribed(sessionId);
+  wsClient?.send({ type: "activity_subscribe", view: "session", sessionId });
+  // The subscription snapshot carries OPEN runs; finished runs (history
+  // timing, past fan-outs) come from the REST side.
+  void loadSessionActivityHistory(sessionId);
+}
+
 export function handleServerMessage(msg: ServerMessage) {
   const state = useChatStore.getState();
 
+  // Activity stream frames feed their own store and never touch chat state.
+  if (msg.type === "server_hello") {
+    useActivityStore.getState().setSupported(msg.capabilities?.activity === true);
+    // A new hello means a new connection: server-side subscriptions are gone.
+    useActivityStore.getState().resetSubscriptions();
+    // …and view-owned subscriptions (the Activity index) must re-send too.
+    useActivityStore.getState().bumpConnectionEpoch();
+    ensureActivitySubscription(state.activeSessionId);
+    return;
+  }
+  if (msg.type === "activity_snapshot") {
+    useActivityStore.getState().applySnapshot(msg);
+    return;
+  }
+  if (msg.type === "activity_delta") {
+    useActivityStore.getState().applyDelta(msg);
+    return;
+  }
+
   // Parallel-session demux (per-session buffers). Every frame is scoped by
   // sessionId; a scoped frame lands in ITS session's buffer, so a background
   // session's transcript keeps accumulating while another one is in view.
@@ -186,6 +222,10 @@ export function handleServerMessage(msg: ServerMessage) {
       break;
 
     case "tool_use_start":
+      // A tool call INSIDE a subagent nests under its Agent entry, rendered
+      // from the activity stream — putting it in the flat transcript would
+      // interleave fan-out work with the main turn's steps.
+      if (msg.parentToolUseId) break;
       state.startToolCall(key, msg.toolUseId, msg.toolName);
       break;
 
@@ -194,6 +234,9 @@ export function handleServerMessage(msg: ServerMessage) {
       break;
 
     case "tool_use_complete":
+      // Subagent tool calls render nested (activity stream), and the flat
+      // store's name-based fallback match must never see them.
+      if (msg.parentToolUseId) break;
       state.completeToolCall(key, msg.toolUseId, msg.toolName, msg.input);
       break;
 
@@ -237,6 +280,7 @@ export function handleServerMessage(msg: ServerMessage) {
       break;
 
     case "session_info": {
+      ensureActivitySubscription(msg.sessionId);
       // bindDraftSession above handled draft adoption; an info frame may still
       // re-pin the provider picker when it concerns the session in view.
       const current = useChatStore.getState();

package/src/index.ts

@@ -16,6 +16,7 @@ export { ConnectionGate } from "./components/connectivity/connection-gate.js";
 export { AppShell } from "./components/layout/app-shell.js";
 export { ChatPage } from "./components/chat/chat-page.js";
 export { GraphPage } from "./components/graph/graph-page.js";
+export { ActivityPage } from "./components/activity/activity-page.js";
 
 // Markdown renderer (also useful standalone, e.g. for a dev kitchen sink).
 export { BrainMarkdown } from "./components/chat/brain-markdown.js";

package/src/lib/api-client.ts

@@ -7,6 +7,23 @@ import type {
   ProviderInfo,
   PasskeySummary,
   ModelCatalogResponse,
+  ActivityRunSummary,
+  ActivityRunDetail,
+  ActivityRollups,
+  ActivityDigest,
+  ActivityIntent,
+} from "@schlessera/brain-ui-sdk/protocol";
+
+// Activity REST types live in the SDK protocol (shared with the server);
+// re-exported here so existing importers keep working.
+export type {
+  ActivityRunSummary,
+  ActivityRunDetail,
+  ActivityRunRollup,
+  ActivityAggregate,
+  ActivityRollups,
+  ActivityDigest,
+  ActivityIntent,
 } from "@schlessera/brain-ui-sdk/protocol";
 import type {
   AuthenticationResponseJSON,
@@ -219,4 +236,62 @@ export const api = {
     fetchJson<{ ok: true }>(`/auth/passkey/${encodeURIComponent(id)}`, {
       method: "DELETE",
     }),
+
+  // --- Activity record (read side; live updates ride the WebSocket) ---
+
+  activityRuns: (opts?: {
+    origin?: "session" | "cron";
+    job?: string;
+    session?: string;
+    status?: string;
+    limit?: number;
+    before?: number;
+  }) =>
+    fetchJson<{ live: ActivityRunSummary[]; history: ActivityRunSummary[] }>(
+      "/activity/runs?" +
+        [
+          opts?.origin && `origin=${opts.origin}`,
+          opts?.job && `job=${encodeURIComponent(opts.job)}`,
+          opts?.session && `session=${encodeURIComponent(opts.session)}`,
+          opts?.status && `status=${encodeURIComponent(opts.status)}`,
+          opts?.limit && `limit=${opts.limit}`,
+          opts?.before && `before=${opts.before}`,
+        ]
+          .filter(Boolean)
+          .join("&")
+    ),
+
+  activityRun: (runId: string) =>
+    fetchJson<ActivityRunDetail>(`/activity/runs/${encodeURIComponent(runId)}`),
+
+  activityRollups: (days?: number) =>
+    fetchJson<ActivityRollups>(`/activity/rollups${days ? `?days=${days}` : ""}`),
+
+  activityInbox: () => fetchJson<{ intents: ActivityIntent[] }>("/activity/inbox"),
+
+  activityInboxAck: (id: number) =>
+    fetchJson<{ ok: true }>(`/activity/inbox/${id}/ack`, { method: "POST" }),
+
+  activityInboxAckAll: () =>
+    fetchJson<{ acknowledged: number }>("/activity/inbox/ack-all", { method: "POST" }),
+
+  activityDigest: () =>
+    fetchJson<{ digest: ActivityDigest | null; dismissedAt: number }>("/activity/digest"),
+
+  activityDigestDismiss: () =>
+    fetchJson<{ ok: true }>("/activity/digest/dismiss", { method: "POST" }),
+
+  pushPublicKey: () => fetchJson<{ publicKey: string }>("/push/public-key"),
+
+  pushSubscribe: (subscription: unknown, label?: string) =>
+    fetchJson<{ ok: true }>("/push/subscribe", {
+      method: "POST",
+      body: JSON.stringify({ subscription, label }),
+    }),
+
+  pushUnsubscribe: (endpoint: string) =>
+    fetchJson<{ removed: boolean }>("/push/unsubscribe", {
+      method: "POST",
+      body: JSON.stringify({ endpoint }),
+    }),
 };