paseo-bm-plugin 0.0.0-placeholder.0

package/client/dashboard-view.ts

@@ -0,0 +1,215 @@
+/**
+ * Which view the Beads Manager surface shows, and the hand-off from the
+ * Command Center (WP-211.2.1; REQ-040a, REQ-040b).
+ *
+ * The Dashboard lives on the same surface as the launcher (Q-036), so the
+ * surface needs one bit of state and one queue — the same shape
+ * `launch-manager.ts` already uses for its own Command Center item, because a
+ * workspace Command Center context can open a surface but cannot pass it
+ * anything.
+ *
+ * Pure: no React, no React Native, no JSX.
+ */
+
+import type { WorkspaceOverview } from "../shared/contracts";
+import { STATUS_TONE } from "./beads-model";
+import type { Tone } from "./dashboard-model";
+import { createSlot, type Slot } from "./slot";
+
+/**
+ * The views of the Beads Manager surface. Setup is the main screen and the
+ * workspace list is one tap away (owner decision Q1, delta 20260918e §4.2).
+ */
+export type DashboardViewName = "setup" | "workspaces" | "dashboard" | "beads";
+
+/** Where the surface opens. */
+export const SURFACE_HOME_VIEW: DashboardViewName = "setup";
+
+/** Where ← leads from a view; `null` on the main screen, which has no ←. */
+export function backOf(view: DashboardViewName): DashboardViewName | null {
+  switch (view) {
+    case "dashboard":
+    case "beads":
+      return "workspaces";
+    case "workspaces":
+      return "setup";
+    case "setup":
+      return null;
+  }
+}
+
+/**
+ * What each ← says to a screen reader: where it leads (delta 20260918f F4,
+ * owner decision Q6 a). `null` on the main screen, which has no ←.
+ */
+export function backLabelOf(view: DashboardViewName): string | null {
+  switch (backOf(view)) {
+    case "setup":
+      return "Back to Beads Manager setup";
+    case "workspaces":
+      return "Back to workspaces";
+    default:
+      return null;
+  }
+}
+
+/** How often the per-workspace figures are refreshed while the workspace list shows. */
+export const OVERVIEW_POLL_MS = 10_000;
+
+/**
+ * Whether the surface reads the per-workspace figures (`workspaces.overview`,
+ * which touches every workspace's bead store) and how often. Only the
+ * workspace list shows them (delta 20260918f F5).
+ */
+export function overviewPolling(view: DashboardViewName): { enabled: boolean; refetchInterval: number | false } {
+  return view === "workspaces" ? { enabled: true, refetchInterval: OVERVIEW_POLL_MS } : { enabled: false, refetchInterval: false };
+}
+
+/** The workspace whose Dashboard the Command Center asked for; one per loaded client bundle, like `launchRequests`. */
+export const dashboardRequests: Slot<string> = createSlot<string>();
+
+/**
+ * How a slash command says something back to the user.
+ *
+ * Paseo 0.8 gives a plugin slash command NO report channel: its context carries
+ * only `paseo`, `rpc`, `openSurface`, `openSettings` and `openPanel`, and the
+ * composer shows nothing unless `onSubmit` REJECTS — in which case the message
+ * lands in an error toast. Reporting a success by throwing would paint
+ * "Asked 2 Workers to stop" in the colour of a failure, which is a lie about
+ * what happened.
+ *
+ * So a command puts its line here and opens the Beads Manager surface, which
+ * draws it as an ordinary notice; tapping it takes it, which hides it.
+ */
+export const launcherNotices: Slot<string> = createSlot<string>();
+
+/** Body of the workspace Command Center item "Open Beads Metric". */
+export function selectDashboardFromCommandCenter(
+  context: { workspace: { id: string }; openSurface(id: string): void },
+  surfaceId: string,
+  requests: Slot<string> = dashboardRequests,
+): void {
+  requests.put(context.workspace.id);
+  context.openSurface(surfaceId);
+}
+
+/**
+ * Title of a workspace's Metric and Beads screens. A workspace is usually named
+ * after its first chat ("Build bva terminal UI…"), which does not say which
+ * repository the beads come from, so the project is named too.
+ */
+export function screenTitleOf(label: string, project: string): string {
+  return project === "" || project === label ? label : `${label} · ${project}`;
+}
+
+export interface StoredWorkspace {
+  workspaceId: string;
+  state: "live" | "archived" | "orphaned" | "unknown";
+  lastKnownName: string | null;
+  lastKnownDirectory: string | null;
+  lastSeenAt: string | null;
+  bytes: number;
+}
+
+/**
+ * Workspaces with trace history that the launcher does not list any more —
+ * archived or removed from Paseo — newest activity first. Their history stays
+ * on disk, so this is how it is reached again; after the project is reopened
+ * (a new workspace id), its Metric screen offers to move the history onto it.
+ */
+export function closedWorkspaces(
+  stored: readonly StoredWorkspace[],
+  listedIds: readonly string[],
+): Array<{ workspaceId: string; label: string; detail: string }> {
+  const listed = new Set(listedIds);
+  return stored
+    .filter((entry) => !listed.has(entry.workspaceId) && entry.state !== "unknown")
+    .sort((a, b) => ((a.lastSeenAt ?? "") < (b.lastSeenAt ?? "") ? 1 : -1))
+    .map((entry) => ({
+      workspaceId: entry.workspaceId,
+      label: entry.lastKnownName ?? entry.workspaceId,
+      detail: [
+        entry.state === "archived" ? "archived" : "no longer in Paseo",
+        entry.lastKnownDirectory,
+        entry.lastSeenAt === null ? null : `last active ${entry.lastSeenAt.slice(0, 10)}`,
+        `${Math.max(1, Math.round(entry.bytes / 1024))} KB of history`,
+      ]
+        .filter((part) => part !== null)
+        .join(" · "),
+    }));
+}
+
+/** One figure under a workspace name: a small icon, a number, and what it means. */
+export interface WorkspaceStat {
+  key: "total" | "inProgress" | "blocked" | "running";
+  icon: string;
+  value: string;
+  label: string;
+  tone: Tone;
+}
+
+/**
+ * The four figures of a workspace row: beads in total, in progress, blocked,
+ * and Workers running now. A figure that is zero stays grey so the ones that
+ * need attention stand out; a workspace without a bead store says so once.
+ * In progress and blocked take the bead status colours (`STATUS_TONE`), so a
+ * row reads like the Beads screen it opens (delta 20260918e, REQ-060 n).
+ */
+export function workspaceStats(overview: WorkspaceOverview | undefined): WorkspaceStat[] {
+  if (overview === undefined) return [];
+  const running: WorkspaceStat = {
+    key: "running",
+    icon: "Hammer",
+    value: String(overview.runningWorkers),
+    label: `${overview.runningWorkers} Worker(s) running`,
+    tone: overview.runningWorkers > 0 ? "success" : "muted",
+  };
+  const beads = overview.beads;
+  if (beads === null) {
+    return [{ key: "total", icon: "Layers", value: "–", label: "no beads in this workspace", tone: "muted" }, running];
+  }
+  return [
+    { key: "total", icon: "Layers", value: String(beads.total), label: `${beads.total} beads in total`, tone: "muted" },
+    {
+      key: "inProgress",
+      icon: "CircleDot",
+      value: String(beads.inProgress),
+      label: `${beads.inProgress} in progress`,
+      tone: beads.inProgress > 0 ? STATUS_TONE.in_progress : "muted",
+    },
+    {
+      key: "blocked",
+      icon: "Ban",
+      value: String(beads.blocked),
+      label: `${beads.blocked} blocked`,
+      tone: beads.blocked > 0 ? STATUS_TONE.blocked : "muted",
+    },
+    running,
+  ];
+}
+
+/** The three actions of a workspace row, in order, with their icons. */
+export const WORKSPACE_ACTIONS = [
+  { key: "manager", label: "Go to", icon: "Bot" },
+  { key: "metric", label: "Metric", icon: "ChartColumn" },
+  { key: "beads", label: "Beads", icon: "ListChecks" },
+] as const;
+
+// ---------------------------------------------------------------------------
+// The "Beads" tab of a workspace (delta 20260918e §4.1): one entry in the "+"
+// menu of the tab bar, with the Beads and Metric screens as two sub-tabs.
+// ---------------------------------------------------------------------------
+
+/** Workspace panel id; Paseo lists every workspace panel in the "+" menu. */
+export const BEADS_TAB_PANEL_ID = "bm-beads";
+
+/** The two sub-tabs, in the order they are drawn. */
+export const BEADS_TAB_VIEWS = [
+  { key: "beads", label: "Beads" },
+  { key: "metric", label: "Metric" },
+] as const;
+
+export type BeadsTabView = (typeof BEADS_TAB_VIEWS)[number]["key"];
+
+/** The sub-tab a new "Beads" tab opens on (owner decision Q2). */
+export const DEFAULT_BEADS_TAB_VIEW: BeadsTabView = "beads";

package/client/dashboard.tsx

@@ -0,0 +1,318 @@
+/**
+ * The Beads Dashboard (WP-211.2.1; REQ-040 → REQ-046, REQ-048d, REQ-055).
+ *
+ * Layout, top to bottom:
+ * 1. overview cards — requests, beads, agents, messages, tokens, cost;
+ * 2. three small bar charts — requests per day, the five heaviest Workers
+ *    (press one to open it), tokens by model × role;
+ * 3. requests as graphs — Manager → Workers → Reviewers, each marked with a
+ *    small role icon; tap a request to open its graph, tap a node to expand
+ *    what it sent, got back and cost;
+ * 4. storage and the privacy note.
+ *
+ * The destructive flows live in `dashboard-actions.tsx`. All wording and
+ * numbers come from `dashboard-model.ts`, tested without a renderer.
+ *
+ * Client rules: React Native primitives only, colours from `theme.colors`, no
+ * Node import, no `server/` import.
+ */
+import { type PluginSurfaceProps, useRpc, useSettings } from "@getpaseo/plugin/client";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
+import { ActivityIndicator, Pressable, ScrollView, Text, View } from "react-native";
+import { beadsStatsRpc, tracesGetRpc, tracesListRpc, type TraceSummary } from "../shared/contracts";
+import { DEFAULT_WARN_ABOVE_BYTES, dashboardSettings } from "../shared/settings";
+import { TraceActions } from "./dashboard-actions";
+import {
+  PRIVACY_NOTICE,
+  dashboardStyles,
+  groupTraces,
+  heaviestWorkers,
+  overviewCards,
+  tokensByModelRole,
+  requestGraph,
+  requestsPerDay,
+  storageView,
+  toneColor,
+  type Badge,
+  type ChipGroup,
+  type GraphNode,
+} from "./dashboard-model";
+import { errorMessageOf } from "./launch-manager";
+import { BarChart, Chip, RoleLegend, RoleMark, StatCards, WorkspaceScreenHeader, type Styles, type Theme, type WorkspaceScreenProps } from "./ui";
+
+
+function BadgeText({ badge, styles, theme }: { badge: Badge; styles: Styles; theme: Theme }) {
+  return <Text style={[styles.badge, { color: toneColor(theme, badge.tone) }]}>{badge.text}</Text>;
+}
+
+function Chips({ group, styles, theme }: { group: ChipGroup; styles: Styles; theme: Theme }) {
+  return (
+    <View style={{ gap: 4 }}>
+      <Text style={styles.body}>{group.label}</Text>
+      <View style={styles.chipRow}>
+        {group.chips.map((chip) => (
+          <Chip key={chip.text} badge={chip} styles={styles} theme={theme} />
+        ))}
+      </View>
+      {group.note === undefined ? null : <Text style={[styles.body, { fontSize: 11 }]}>{group.note}</Text>}
+    </View>
+  );
+}
+
+interface NodeViewProps {
+  node: GraphNode;
+  open: boolean;
+  onToggle: (id: string) => void;
+  styles: Styles;
+  theme: Theme;
+  navigation: PluginSurfaceProps["navigation"];
+}
+
+function NodeView({ node, open, onToggle, styles, theme, navigation }: NodeViewProps) {
+  const label = node.kind === "request" ? "Manager · request details" : `${node.title} · ${node.subtitle}`;
+  return (
+    <View style={styles.node}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={label}
+        accessibilityState={{ expanded: open }}
+        onPress={() => onToggle(node.id)}
+      >
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+          <Text style={styles.body}>{open ? "▾" : "▸"}</Text>
+          <RoleMark kind={node.kind} theme={theme} />
+          <Text style={[styles.body, { flex: 1 }]}>{label}</Text>
+          {node.kind === "request" ? null : <BadgeText badge={node.badge} styles={styles} theme={theme} />}
+        </View>
+      </Pressable>
+      {open ? (
+        <View style={{ gap: 2 }}>
+          {node.details.length === 0 && node.chipGroups.length === 0 ? <Text style={styles.body}>Loading…</Text> : null}
+          {node.chipGroups.map((group) => (
+            <Chips key={group.label} group={group} styles={styles} theme={theme} />
+          ))}
+          {node.details.map((line, index) => (
+            <Text key={`${node.id}-${index}`} style={styles.body} selectable>
+              {line}
+            </Text>
+          ))}
+          {node.agentId !== null && navigation?.openAgent !== undefined ? (
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel={`Open ${node.title}`}
+              onPress={() => navigation.openAgent({ agentId: node.agentId! })}
+              style={[styles.secondaryButton, { alignSelf: "flex-start" }]}
+            >
+              <Text style={styles.secondaryButtonText}>Open agent</Text>
+            </Pressable>
+          ) : null}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+interface RequestCardProps {
+  trace: TraceSummary;
+  workspaceId: string;
+  styles: Styles;
+  theme: Theme;
+  layout: PluginSurfaceProps["layout"];
+  navigation: PluginSurfaceProps["navigation"];
+  onChanged: () => void;
+}
+
+function RequestCard({ trace, workspaceId, styles, theme, layout, navigation, onChanged }: RequestCardProps) {
+  const getTrace = useRpc(tracesGetRpc);
+  const [open, setOpen] = useState(false);
+  const [expanded, setExpanded] = useState<ReadonlySet<string>>(new Set());
+
+  // The detail is fetched only once the request is opened.
+  const detail = useQuery({
+    queryKey: ["paseo-bm", "trace", workspaceId, trace.traceId],
+    queryFn: () => getTrace({ workspaceId, traceId: trace.traceId }),
+    enabled: open,
+  });
+
+  const [root, ...children] = requestGraph(trace, detail.data?.trace ?? null, new Date());
+  const toggle = (id: string) =>
+    setExpanded((current) => {
+      const next = new Set(current);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+
+  return (
+    <View style={styles.card}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={`Request: ${root!.title}`}
+        accessibilityState={{ expanded: open }}
+        onPress={() => setOpen(!open)}
+      >
+        <View style={{ flexDirection: "row", justifyContent: "space-between", gap: 8 }}>
+          <View style={{ flex: 1, gap: 2 }}>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+              <RoleMark kind="request" theme={theme} />
+              <Text style={[styles.mono, { flex: 1 }]} numberOfLines={open ? undefined : 1}>
+                {`${open ? "▾" : "▸"} ${root!.title}`}
+              </Text>
+            </View>
+            <Text style={styles.body}>{root!.subtitle}</Text>
+          </View>
+          <BadgeText badge={root!.badge} styles={styles} theme={theme} />
+        </View>
+      </Pressable>
+
+      {open ? (
+        <View style={{ gap: 2 }}>
+          {detail.isPending ? <ActivityIndicator color={styles.spinner.color} /> : null}
+          {detail.isError ? (
+            <Text style={[styles.body, { color: toneColor(theme, "danger") }]}>{errorMessageOf(detail.error)}</Text>
+          ) : null}
+          <NodeView node={root!} open={expanded.has(root!.id)} onToggle={toggle} styles={styles} theme={theme} navigation={navigation} />
+          {children.map((node) => (
+            <View key={node.id} style={{ marginLeft: node.depth * (layout.compact ? 12 : 20) }}>
+              <NodeView node={node} open={expanded.has(node.id)} onToggle={toggle} styles={styles} theme={theme} navigation={navigation} />
+            </View>
+          ))}
+          {expanded.has(root!.id) ? (
+            <TraceActions
+              theme={theme}
+              layout={layout}
+              styles={styles}
+              workspaceId={workspaceId}
+              scope="trace"
+              traceId={trace.traceId}
+              onDone={onChanged}
+            />
+          ) : null}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export function DashboardPanel({ theme, layout, navigation, workspaceId, workspaceLabel, onBack, backLabel, status }: WorkspaceScreenProps) {
+  const styles = useMemo(() => dashboardStyles(theme, layout.compact), [theme, layout.compact]);
+  const listTraces = useRpc(tracesListRpc);
+  const beadStats = useRpc(beadsStatsRpc);
+  const settings = useSettings(dashboardSettings);
+  const [showStorage, setShowStorage] = useState(false);
+
+  const traces = useQuery({
+    queryKey: ["paseo-bm", "traces", workspaceId],
+    queryFn: () => listTraces({ workspaceId }),
+  });
+  const beads = useQuery({
+    queryKey: ["paseo-bm", "beads", workspaceId],
+    queryFn: () => beadStats({ workspaceId }),
+  });
+
+  const rows = traces.data?.traces ?? [];
+  const warnAboveBytes =
+    settings.status === "ready" ? settings.values.warnAboveBytes : DEFAULT_WARN_ABOVE_BYTES;
+  const storage = traces.data === undefined ? null : storageView(traces.data.store, warnAboveBytes);
+  const refresh = () => {
+    void traces.refetch();
+    void beads.refetch();
+  };
+
+  return (
+    <ScrollView style={styles.screen} contentContainerStyle={styles.content}>
+      <WorkspaceScreenHeader
+        title={workspaceLabel === undefined ? null : `Metric · ${workspaceLabel}`}
+        onBack={onBack}
+        backLabel={backLabel ?? "Back to Beads Manager"}
+        status={status}
+        styles={styles}
+        right={
+          <Pressable accessibilityRole="button" accessibilityLabel="Refresh" onPress={refresh} style={styles.secondaryButton}>
+            <Text style={styles.secondaryButtonText}>Refresh</Text>
+          </Pressable>
+        }
+      />
+
+      {/* 1. Overview */}
+      <StatCards cards={overviewCards(rows, beads.data?.stats ?? null)} styles={styles} />
+      {storage?.warning != null ? (
+        <Text style={[styles.body, { color: toneColor(theme, storage.warning.tone) }]}>{storage.warning.text}</Text>
+      ) : null}
+
+      {/* 2. Charts */}
+      {rows.length > 0 ? (
+        <View style={styles.cards}>
+          {/* The list has one row per question; this chart counts requests (Q27). */}
+          <BarChart
+            title="Requests, last 7 days — each request counted once"
+            bars={requestsPerDay(rows, new Date())}
+            styles={styles}
+          />
+          <BarChart
+            title="Top 5 heaviest Workers (tokens)"
+            bars={heaviestWorkers(rows)}
+            styles={styles}
+            onOpen={navigation?.openAgent === undefined ? undefined : (agentId) => navigation.openAgent({ agentId })}
+          />
+          {/* Which model each role actually ran on (delta 20260918, REQ-058e). */}
+          <BarChart title="Tokens by model × role" bars={tokensByModelRole(rows)} styles={styles} labelWidth={180} />
+        </View>
+      ) : null}
+
+      {/* 3. Requests as graphs */}
+      {rows.length > 0 ? <RoleLegend styles={styles} theme={theme} /> : null}
+      {traces.isPending ? <ActivityIndicator color={styles.spinner.color} /> : null}
+      {traces.isError ? (
+        <Text style={[styles.body, { color: toneColor(theme, "danger") }]}>{errorMessageOf(traces.error)}</Text>
+      ) : null}
+      {traces.data !== undefined && rows.length === 0 ? (
+        <Text style={styles.body}>No requests recorded yet. They appear once you ask the Beads Manager for something.</Text>
+      ) : null}
+      {traces.data?.notices.map((notice) => (
+        <Text key={notice} style={[styles.body, { color: toneColor(theme, "warning") }]}>
+          {notice}
+        </Text>
+      ))}
+      {groupTraces(rows).map((group) => (
+        <View key={group.key} style={{ gap: layout.compact ? 6 : 8 }}>
+          <Text style={styles.sectionTitle}>{group.title}</Text>
+          {group.hint === null ? null : <Text style={styles.body}>{group.hint}</Text>}
+          {group.traces.map((trace) => (
+            <RequestCard
+              key={`${trace.traceId}#${trace.turn?.index ?? 1}`}
+              trace={trace}
+              workspaceId={workspaceId}
+              styles={styles}
+              theme={theme}
+              layout={layout}
+              navigation={navigation}
+              onChanged={refresh}
+            />
+          ))}
+        </View>
+      ))}
+      {traces.data?.truncated === true ? <Text style={styles.body}>Older requests are not shown.</Text> : null}
+
+      {/* 4. Storage, folded away */}
+      <Pressable accessibilityRole="button" accessibilityState={{ expanded: showStorage }} onPress={() => setShowStorage(!showStorage)}>
+        <Text style={styles.body}>{`${showStorage ? "▾" : "▸"} Storage${storage === null ? "" : ` · ${storage.summary}`}`}</Text>
+      </Pressable>
+      {showStorage ? (
+        <View style={styles.card}>
+          <TraceActions
+            theme={theme}
+            layout={layout}
+            styles={styles}
+            workspaceId={workspaceId}
+            scope="workspace"
+            workspaceState={rows[0]?.workspaceState}
+            onDone={refresh}
+          />
+        </View>
+      ) : null}
+      <Text style={[styles.body, { color: toneColor(theme, "muted") }]}>{PRIVACY_NOTICE}</Text>
+    </ScrollView>
+  );
+}