my-durable 0.0.0-stage → 0.0.2

package/apps/dpi-playground/apps/dpi-playground-fe/src/client/store.ts

@@ -0,0 +1,373 @@
+// App-wide state: one hub stream, the network, the selected agent and its session/device feeds,
+// plus the command helpers every component shares.
+import { computed, reactive, ref, shallowRef, watch } from "vue";
+import type { AgentDetail, ModelInfo, NetworkDevice, TaskNode } from "@sdk/api";
+import { sumUsage } from "@sdk/transcript";
+import { lineage } from "@sdk/models";
+import { HubStream } from "./stream";
+import { iconPath } from "./icon-path";
+import { deviceClient, hub, message } from "./hub";
+import { useAgent, useDevice, useNetwork, useSession, type AgentTarget } from "./composables";
+import type { PairHandoff } from "./pair-handoff";
+
+export const stream = new HubStream();
+export const streamState = ref(stream.state);
+stream.onState((s) => (streamState.value = s));
+export const network = useNetwork(stream);
+export const configFile = ref<string>();
+
+// ------------------------------------------------------------------ selection + persisted UI state
+
+export const selected = ref<AgentTarget>();
+export const expanded = ref(new Set<string>());
+export const treeWidth = ref(300);
+/** Which side panels are expanded (persisted). Collapsed panels shrink to an icon rail. */
+export const layout = reactive({ tree: true, inspector: true });
+const uiLoaded = ref(false);
+
+export const deviceId = computed(() => selected.value?.deviceId);
+export const device = computed(() => network.devices.value.find((d) => d.id === deviceId.value));
+export const online = computed(() => device.value?.status === "online");
+export const sessionTarget = computed(() =>
+  selected.value
+    ? { deviceId: selected.value.deviceId, sessionId: selected.value.sessionId }
+    : undefined,
+);
+export const session = useSession(stream, sessionTarget);
+export const agent = useAgent(stream, selected);
+export const deviceFeed = useDevice(stream, deviceId);
+
+export const sessionSummary = computed(() =>
+  device.value?.tree?.sessions.find((s) => s.id === selected.value?.sessionId),
+);
+export const client = computed(() => (deviceId.value ? deviceClient(deviceId.value) : undefined));
+export const agentHandle = computed(() =>
+  selected.value && client.value
+    ? client.value.agent(selected.value.sessionId, selected.value.agentId)
+    : undefined,
+);
+export const sessionHandle = computed(() =>
+  selected.value && client.value ? client.value.session(selected.value.sessionId) : undefined,
+);
+
+export function select(target: AgentTarget | undefined) {
+  selected.value = target;
+  ui.drawer = false;
+  pendingReveal = !!target;
+  reveal();
+}
+
+// Expand the selected agent's device, session and ancestors once it shows up in the tree (a new
+// fork or agent appears a moment after the call that created it).
+let pendingReveal = false;
+function reveal() {
+  const t = selected.value;
+  if (!pendingReveal || !t) return;
+  const agents = network.devices.value
+    .find((d) => d.id === t.deviceId)
+    ?.tree?.sessions.find((s) => s.id === t.sessionId)?.agents;
+  const byId = new Map((agents ?? []).map((a) => [a.id, a]));
+  const keys = [
+    t.deviceId,
+    `${t.deviceId}/s/${t.sessionId}`,
+    `${t.deviceId}/s/${t.sessionId}/a/${t.agentId}`,
+  ];
+  let current = byId.get(t.agentId);
+  const seen = new Set<number>();
+  while (current && !seen.has(current.id)) {
+    seen.add(current.id);
+    const parent = current.parentId ?? current.ownerAgentId;
+    if (parent === undefined) break;
+    keys.push(`${t.deviceId}/s/${t.sessionId}/a/${parent}`);
+    current = byId.get(parent);
+  }
+  if (keys.some((k) => !expanded.value.has(k)))
+    expanded.value = new Set([...expanded.value, ...keys]);
+  if (byId.has(t.agentId)) pendingReveal = false;
+}
+watch(() => network.devices.value, reveal);
+
+export function toggle(key: string, open?: boolean) {
+  const next = new Set(expanded.value);
+  if (open ?? !next.has(key)) next.add(key);
+  else next.delete(key);
+  expanded.value = next;
+}
+
+const saveLater = (() => {
+  const timers = new Map<string, ReturnType<typeof setTimeout>>();
+  return (key: string, value: unknown) => {
+    clearTimeout(timers.get(key));
+    timers.set(
+      key,
+      setTimeout(() => void hub.uiSet(key, value).catch(() => {}), 300),
+    );
+  };
+})();
+// Selection saves at once so a quick reload restores it; drags (width) debounce.
+watch(
+  selected,
+  (v) => uiLoaded.value && void hub.uiSet("tree.selected", v ?? null).catch(() => {}),
+);
+watch(treeWidth, (v) => uiLoaded.value && saveLater("tree.width", v));
+watch(layout, (v) => uiLoaded.value && saveLater("layout.panels", { ...v }));
+
+export async function boot() {
+  stream.start();
+  try {
+    const [net, sel, width, panels] = await Promise.all([
+      hub.network(),
+      hub.uiGet<AgentTarget>("tree.selected"),
+      hub.uiGet<number>("tree.width"),
+      hub.uiGet<{ tree: boolean; inspector: boolean }>("layout.panels"),
+    ]);
+    if (panels) Object.assign(layout, panels);
+    configFile.value = net.configFile;
+    if (!network.model.devices.length)
+      network.model.apply({ type: "network", devices: net.devices });
+    // Every device starts folded; select() opens only the active device, workspace and agent.
+    expanded.value = new Set();
+    if (width) treeWidth.value = width;
+    if (sel && net.devices.some((d) => d.id === sel.deviceId)) select(sel);
+    else autoSelect(net.devices);
+  } catch (e) {
+    ui.error = message(e);
+  } finally {
+    uiLoaded.value = true;
+  }
+}
+
+/** With nothing saved, open the first agent on the first online device that has a session. */
+function autoSelect(devices: NetworkDevice[]) {
+  for (const d of devices) {
+    const s = d.status === "online" ? d.tree?.sessions[0] : undefined;
+    const a = s?.agents.find((x) => x.kind === "root") ?? s?.agents[0];
+    if (s && a) return select({ deviceId: d.id, sessionId: s.id, agentId: a.id });
+  }
+}
+
+// The device answered "not found" for the selected agent and its session left the tree: it was archived.
+watch(
+  () => [agent.status.value, sessionSummary.value] as const,
+  ([status, summary]) => {
+    if (status !== "fault" || summary || !online.value) return;
+    notify("That session was archived on its device.");
+    select(undefined);
+  },
+);
+
+// ------------------------------------------------------------------ derived agent views
+
+export const models = computed<ModelInfo[]>(() => device.value?.info?.models ?? []);
+export const agentState = agent.state;
+export const sessionAgents = computed(() =>
+  session.state.value.agents.length
+    ? session.state.value.agents
+    : (sessionSummary.value?.agents ?? []),
+);
+export const agentSummary = computed(() =>
+  sessionAgents.value.find((a) => a.id === selected.value?.agentId),
+);
+export const activeLineage = computed(() =>
+  selected.value ? lineage(sessionAgents.value, selected.value.agentId) : [],
+);
+
+/** Tasks of this agent and every subagent it owns (transitively), with inherited background. */
+export const tasks = computed(() => {
+  const id = selected.value?.agentId;
+  if (id === undefined) return [] as (TaskNode & { effectiveBackground: boolean })[];
+  const agents = sessionAgents.value;
+  const owned = new Set([id]);
+  for (let changed = true; changed;) {
+    changed = false;
+    for (const a of agents)
+      if (a.ownerAgentId !== undefined && owned.has(a.ownerAgentId) && !owned.has(a.id)) {
+        owned.add(a.id);
+        changed = true;
+      }
+  }
+  const all = session.state.value.tasks;
+  const byId = new Map(all.map((t) => [t.id, t]));
+  const ownerTask = new Map(agents.map((a) => [a.id, a.ownerTaskId]));
+  return all
+    .filter((t) => owned.has(t.conversationId))
+    .map((task) => {
+      let current: TaskNode | undefined = task;
+      let effectiveBackground = false;
+      const seen = new Set<number>();
+      while (current && !seen.has(current.id)) {
+        seen.add(current.id);
+        if (current.background) {
+          effectiveBackground = true;
+          break;
+        }
+        const ownerId: number | undefined = current.owner ?? ownerTask.get(current.conversationId);
+        current = ownerId === undefined ? undefined : byId.get(ownerId);
+      }
+      return { ...task, effectiveBackground };
+    });
+});
+export const busy = computed(
+  () =>
+    agentState.value.running ||
+    tasks.value.some((t) => !t.effectiveBackground && t.conversationId === selected.value?.agentId),
+);
+export const usage = computed(() => sumUsage(agentState.value.usage));
+export const currentModel = computed(() => {
+  const m = agentState.value.agent.model;
+  return models.value.find((x) => x.provider === m?.provider && x.id === m?.modelId);
+});
+
+/** Tools and extensions come from GET agent (not streamed); refresh on selection and config changes. */
+export const detail = shallowRef<AgentDetail>();
+let detailSeq = 0;
+export async function refreshDetail() {
+  const handle = agentHandle.value;
+  const seq = ++detailSeq;
+  if (!handle || !online.value) return void (detail.value = undefined);
+  try {
+    const d = await handle.get();
+    if (seq === detailSeq) detail.value = d;
+  } catch {
+    if (seq === detailSeq) detail.value = undefined;
+  }
+}
+watch([agentHandle, online], () => void refreshDetail(), { immediate: true });
+
+// ------------------------------------------------------------------ UI chrome
+
+export const ui = reactive({
+  error: "",
+  toast: "",
+  drawer: false,
+  /** Narrow screens: the inspector opens over the chat instead of taking a column. */
+  inspectorOverlay: false,
+  tab: "session",
+  composer: "",
+  dialog: undefined as Dialog | undefined,
+});
+
+export type Dialog =
+  | { kind: "new-session"; deviceId?: string }
+  | { kind: "pair"; handoff?: PairHandoff }
+  | { kind: "credentials"; deviceId: string }
+  | { kind: "models" }
+  | { kind: "help" }
+  | { kind: "path"; path: string }
+  | { kind: "compaction" }
+  | {
+      kind: "prompt";
+      title: string;
+      label?: string;
+      value?: string;
+      placeholder?: string;
+      hint?: string;
+      multiline?: boolean;
+      optional?: boolean;
+      submit: string;
+      danger?: boolean;
+      run: (value: string) => Promise<unknown>;
+    };
+
+let toastTimer: ReturnType<typeof setTimeout>;
+export function notify(text: string) {
+  ui.toast = text;
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => (ui.toast = ""), 4500);
+}
+
+export async function attempt<T>(fn: () => Promise<T>): Promise<T | undefined> {
+  ui.error = "";
+  try {
+    return await fn();
+  } catch (e) {
+    ui.error = message(e);
+    return undefined;
+  }
+}
+
+export function preset(text: string) {
+  ui.composer = text;
+  setTimeout(() => document.querySelector<HTMLTextAreaElement>(".composer textarea")?.focus());
+}
+
+// ------------------------------------------------------------------ formatting
+
+export const number = (n: number) =>
+  Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 }).format(n);
+export const json = (v: unknown) => JSON.stringify(v, null, 2);
+export const icon = (modelId = "") => iconPath(models.value.find((m) => m.id === modelId)?.icon);
+export const shortPath = (s = "", n = 34) => (s.length > n ? "…" + s.slice(-(n - 1)) : s);
+export function ago(ms?: number) {
+  if (!ms) return "never";
+  const s = Math.max(0, Math.round((Date.now() - ms) / 1000));
+  if (s < 60) return `${s}s ago`;
+  if (s < 3600) return `${Math.round(s / 60)}m ago`;
+  if (s < 86400) return `${Math.round(s / 3600)}h ago`;
+  return `${Math.round(s / 86400)}d ago`;
+}
+
+// ------------------------------------------------------------------ shared agent commands
+
+export const interrupting = ref(false);
+/** Escape and the Interrupt button: stop foreground work and owned subagents; background jobs continue. */
+export async function interrupt() {
+  if (!busy.value || interrupting.value || !agentHandle.value) return;
+  interrupting.value = true;
+  const done = await attempt(() => agentHandle.value!.abort(false));
+  if (done) notify("Foreground work interrupted. Background jobs continue.");
+  interrupting.value = false;
+}
+
+// ------------------------------------------------------------------ panel layout
+
+const narrowQuery = window.matchMedia("(max-width: 1100px)");
+/** Below 1100px the inspector never takes a column; it opens over the chat. */
+export const narrow = ref(narrowQuery.matches);
+narrowQuery.addEventListener("change", (e) => (narrow.value = e.matches));
+export const inspectorExpanded = computed(() =>
+  narrow.value ? ui.inspectorOverlay : layout.inspector,
+);
+
+/** Show the inspector, optionally on a tab: expand its column, or open it over the chat when narrow. */
+export function showInspector(tab?: string) {
+  if (tab) ui.tab = tab;
+  if (narrow.value) {
+    ui.drawer = false;
+    ui.inspectorOverlay = true;
+  } else layout.inspector = true;
+}
+
+export function hideInspector() {
+  if (narrow.value) ui.inspectorOverlay = false;
+  else layout.inspector = false;
+}
+
+export function toggleTree() {
+  if (!narrow.value) layout.tree = !layout.tree;
+  else if ((ui.drawer = !ui.drawer)) {
+    ui.inspectorOverlay = false;
+    layout.tree = true;
+  }
+}
+
+export function toggleInspector() {
+  if (inspectorExpanded.value) hideInspector();
+  else showInspector();
+}
+
+// Panel hotkeys. macOS browsers use Cmd for new window/tab, so Ctrl+N and Ctrl+T reach the page;
+// elsewhere browsers reserve Ctrl+N and Ctrl+T, so Alt+Shift takes their place.
+const mac = /Mac|iPhone|iPad/.test(navigator.userAgent);
+export const panelKeys = mac
+  ? { tree: "Ctrl+N", inspector: "Ctrl+T" }
+  : { tree: "Alt+Shift+N", inspector: "Alt+Shift+T" };
+
+export function panelHotkey(e: KeyboardEvent): "tree" | "inspector" | undefined {
+  const held = mac
+    ? e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey
+    : e.altKey && e.shiftKey && !e.ctrlKey && !e.metaKey;
+  if (!held || e.repeat || e.isComposing) return;
+  if (e.code === "KeyN") return "tree";
+  if (e.code === "KeyT") return "inspector";
+}

package/apps/dpi-playground/apps/dpi-playground-fe/src/client/stream.ts

@@ -0,0 +1,183 @@
+// One browser connection to the hub: EventSource('/api/stream'). The first frame names the
+// stream; named slots (device, session, agent) map to subscription keys that a debounced
+// PUT /api/stream/:id sends. Every (re)connect opens fresh upstreams, so each model restarts
+// from its server snapshot.
+import type { Frame, MuxFrame, NetworkDevice } from "@sdk/api";
+
+export type Slot = "device" | "session" | "agent";
+export type StreamState = "connecting" | "live" | "offline";
+
+const MAX_BACKOFF_MS = 30_000;
+
+/** Delay before retry number `failures` (0-based) of a rejected PUT; a numeric Retry-After (seconds) wins. */
+export function retryDelay(failures: number, retryAfter?: string | null) {
+  if (retryAfter && /^\d+$/.test(retryAfter.trim()))
+    return Math.min(MAX_BACKOFF_MS, Math.max(1000, Number(retryAfter) * 1000));
+  return Math.min(MAX_BACKOFF_MS, 1000 * 2 ** Math.min(failures, 10));
+}
+
+/** Delay before reconnect number `attempt` (0-based) after the browser gave up on the EventSource. */
+export function reconnectDelay(attempt: number) {
+  return Math.min(MAX_BACKOFF_MS, 2000 * 2 ** Math.min(attempt, 10));
+}
+
+export class HubStream {
+  state: StreamState = "connecting";
+  private source?: EventSource;
+  private streamId = "";
+  private slots = new Map<Slot, string>();
+  private fresh = new Set<string>();
+  private applied: string[] = [];
+  private routes = new Map<Slot, Set<(frame: Frame) => void>>();
+  private networkFns = new Set<(devices: NetworkDevice[]) => void>();
+  private stateFns = new Set<(state: StreamState) => void>();
+  private timer?: ReturnType<typeof setTimeout>;
+  private reconnectTimer?: ReturnType<typeof setTimeout>;
+  private reconnects = 0;
+  private failures = 0;
+  private flushing = Promise.resolve();
+
+  start() {
+    clearTimeout(this.reconnectTimer);
+    this.source?.close();
+    this.streamId = "";
+    this.source = new EventSource("/api/stream");
+    this.source.onmessage = (e) => this.receive(JSON.parse(e.data) as MuxFrame);
+    // EventSource reconnects on its own; the next hello re-sends the subscriptions.
+    this.source.onerror = () => {
+      this.streamId = "";
+      this.setState(this.source?.readyState === EventSource.CLOSED ? "offline" : "connecting");
+      if (this.source?.readyState === EventSource.CLOSED) {
+        clearTimeout(this.reconnectTimer);
+        this.reconnectTimer = setTimeout(() => this.start(), reconnectDelay(this.reconnects++));
+      }
+    };
+  }
+
+  stop() {
+    clearTimeout(this.timer);
+    clearTimeout(this.reconnectTimer);
+    this.source?.close();
+    // An in-flight PUT that settles later sees a different stream and does not retry.
+    this.streamId = "";
+  }
+
+  /** Point a slot at a subscription key (or clear it). A changed key always gets a fresh snapshot. */
+  set(slot: Slot, key?: string) {
+    if (this.slots.get(slot) === key) return;
+    if (key) {
+      this.slots.set(slot, key);
+      this.fresh.add(key);
+    } else this.slots.delete(slot);
+    this.schedule();
+  }
+
+  /** Retry a failed slot without discarding the other scopes or their cached models. */
+  reopen(slot: Slot) {
+    const key = this.slots.get(slot);
+    if (!key) return;
+    this.fresh.add(key);
+    this.schedule(0);
+  }
+
+  route(slot: Slot, fn: (frame: Frame) => void) {
+    const set = this.routes.get(slot) ?? new Set();
+    set.add(fn);
+    this.routes.set(slot, set);
+    return () => void set.delete(fn);
+  }
+
+  onNetwork(fn: (devices: NetworkDevice[]) => void) {
+    this.networkFns.add(fn);
+    return () => void this.networkFns.delete(fn);
+  }
+
+  onState(fn: (state: StreamState) => void) {
+    this.stateFns.add(fn);
+    return () => void this.stateFns.delete(fn);
+  }
+
+  private setState(state: StreamState) {
+    if (state === this.state) return;
+    this.state = state;
+    for (const fn of this.stateFns) fn(state);
+  }
+
+  private receive(m: MuxFrame) {
+    const frame = m.frame;
+    if (frame.type === "stream") {
+      if (m.sub !== "hello") return;
+      this.streamId = frame.streamId;
+      this.applied = [];
+      this.reconnects = 0;
+      this.failures = 0;
+      this.setState("live");
+      this.schedule(0);
+      return;
+    }
+    if (frame.type === "network") {
+      if (m.sub !== "network") return;
+      for (const fn of this.networkFns) fn(frame.devices);
+      return;
+    }
+    if (m.sub === "hello" || m.sub === "network") return;
+    for (const [slot, key] of this.slots)
+      if (key === m.sub) for (const fn of this.routes.get(slot) ?? []) fn(frame);
+  }
+
+  private schedule(ms = 30) {
+    clearTimeout(this.timer);
+    this.timer = setTimeout(() => {
+      this.flushing = this.flushing.then(() => this.flush());
+    }, ms);
+  }
+
+  private async flush() {
+    const streamId = this.streamId;
+    if (!streamId) return;
+    const subs = [...new Set(this.slots.values())];
+    // A key re-selected while its upstream is still open would get no new snapshot: drop it once.
+    const reopen = subs.filter((k) => this.fresh.has(k) && this.applied.includes(k));
+    this.fresh.clear();
+    if (
+      reopen.length &&
+      !(await this.put(
+        streamId,
+        subs.filter((k) => !reopen.includes(k)),
+      ))
+    ) {
+      for (const k of reopen) this.fresh.add(k);
+      return;
+    }
+    if (subs.join("\n") !== this.applied.join("\n") || reopen.length)
+      await this.put(streamId, subs);
+  }
+
+  private async put(streamId: string, subs: string[]) {
+    let retryAfter: string | null = null;
+    try {
+      const r = await fetch(`/api/stream/${streamId}`, {
+        method: "PUT",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ subs }),
+      });
+      // The reply belongs to a stream that has since been replaced or stopped.
+      if (streamId !== this.streamId) return false;
+      if (r.ok) {
+        this.applied = subs;
+        this.failures = 0;
+        return true;
+      }
+      if (r.status === 404) {
+        this.start();
+        return false;
+      }
+      console.warn("subscription rejected", r.status, await r.text());
+      retryAfter = r.headers.get("retry-after");
+    } catch {
+      if (streamId !== this.streamId) return false;
+    }
+    this.schedule(retryDelay(this.failures++, retryAfter));
+    return false;
+  }
+}