my-durable 0.0.0-stage → 0.0.2

package/apps/dpi-playground/apps/dpi-playground-fe/src/components/TasksPanel.vue

@@ -0,0 +1,280 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import {
+  Activity,
+  Bot,
+  Clock3,
+  Layers,
+  Octagon,
+  Play,
+  Repeat,
+  ShieldCheck,
+  Workflow,
+  Wrench,
+} from "lucide-vue-next";
+import type { TaskNode, TaskOutcome } from "@sdk/api";
+import { jobRunDone } from "@sdk/jobs";
+import { message } from "../client/hub";
+import { agentHandle, sessionHandle, tasks } from "../client/store";
+import {
+  decide,
+  jobDef,
+  jobDefs,
+  jobRuns,
+  openAgent,
+  pending,
+  revealRun,
+  startJob,
+} from "../client/jobs";
+
+const error = ref("");
+const stopping = ref(false);
+const recent = ref<TaskOutcome[]>([]);
+const inspection = ref<unknown>();
+
+const status = (value: string) =>
+  ({
+    running: "Running",
+    waiting: "Waiting",
+    completed: "Completed",
+    aborted: "Stopped",
+    declined: "Declined",
+    failed: "Failed",
+    pending: "Queued",
+    completing: "Finishing",
+    terminal: "Finished",
+  })[value] ?? value;
+
+/** The newest run of each job, for its row in the list. */
+const latest = computed(
+  () => new Map(jobDefs.value.map((d) => [d.id, jobRuns.value.find((r) => r.job === d.id)])),
+);
+
+// ------------------------------------------------------------------ the live task tree
+
+type Row = { task: TaskNode & { effectiveBackground: boolean }; depth: number };
+const rows = computed<Row[]>(() => {
+  const all = tasks.value;
+  const ids = new Set(all.map((t) => t.id));
+  const children = new Map<number | undefined, typeof all>();
+  for (const t of all) {
+    const parent = t.owner !== undefined && ids.has(t.owner) ? t.owner : undefined;
+    children.set(parent, [...(children.get(parent) ?? []), t]);
+  }
+  const out: Row[] = [];
+  const walk = (parent: number | undefined, depth: number) => {
+    for (const task of (children.get(parent) ?? []).sort((a, b) => a.id - b.id)) {
+      out.push({ task, depth });
+      walk(task.id, depth + 1);
+    }
+  };
+  walk(undefined, 0);
+  return out;
+});
+const kindOf = (t: TaskNode) =>
+  t.kind === "pi.tool"
+    ? { icon: Wrench, name: t.label ?? "Tool call", what: "tool call" }
+    : t.kind === "pi.generation"
+      ? { icon: Bot, name: "Model response", what: "generation" }
+      : t.kind === "pi.compaction"
+        ? { icon: Layers, name: "Compaction", what: "compaction" }
+        : t.kind.startsWith("demo.job.")
+          ? {
+              icon: Workflow,
+              name: t.label ?? jobDef(t.kind.slice(9))?.title ?? t.kind,
+              what: "durable job",
+            }
+          : t.kind === "demo.job-approval"
+            ? { icon: ShieldCheck, name: "Approval", what: "waits for you" }
+            : { icon: Activity, name: t.label ?? t.kind, what: t.kind };
+const phaseOf = (t: TaskNode) => {
+  if (!t.state.phase) return "";
+  if (t.kind.startsWith("demo.job."))
+    return (
+      jobDef(t.kind.slice(9))?.phases.find((p) => p.id === t.state.phase)?.label ?? t.state.phase
+    );
+  return t.state.phase;
+};
+
+async function stopAll() {
+  if (stopping.value || !agentHandle.value) return;
+  stopping.value = true;
+  error.value = "";
+  try {
+    await agentHandle.value.abort(true);
+  } catch (e) {
+    error.value = message(e);
+  } finally {
+    stopping.value = false;
+  }
+}
+
+// Recent outcomes and recovery inspection are read on demand, not streamed.
+async function loadRuntime(e: Event) {
+  const handle = sessionHandle.value;
+  if (!(e.target as HTMLDetailsElement).open || !handle) return;
+  try {
+    const [r, i] = await Promise.all([handle.tasks("terminal", 40), handle.inspect()]);
+    recent.value = r;
+    inspection.value = i;
+  } catch (err) {
+    error.value = message(err);
+  }
+}
+const outcomes = computed(() =>
+  recent.value
+    .filter((task) => task.state.status === "terminal")
+    .slice(-12)
+    .reverse(),
+);
+</script>
+
+<template>
+  <div class="tasks-panel">
+    <div class="panel-heading">
+      <h2>Tasks</h2>
+      <span class="tag">{{ tasks.length }} active</span>
+    </div>
+    <p v-if="error" class="message-error" role="alert">{{ error }}</p>
+
+    <section class="task-section" aria-label="Durable jobs">
+      <h3><Repeat :size="18" />Durable jobs</h3>
+      <p class="hint">
+        Repeatable workflows with named phases. Every run follows the same phases and saves a
+        checkpoint after each one. Start one here, or ask your agent: it finds these with
+        <code>list_durable_jobs</code>, starts them with <code>run_durable_job</code> and checks
+        them with <code>check_durable_job</code>. Runs play out live in the chat.
+      </p>
+      <p v-if="!jobDefs.length" class="task-empty">
+        This device has no durable jobs. Deploy the latest backend to it.
+      </p>
+      <article v-for="def in jobDefs" :key="def.id" class="job-def" :data-job="def.id">
+        <div class="job-def-head">
+          <Workflow :size="18" />
+          <strong>{{ def.title }}</strong>
+          <span v-if="def.approval" class="tag">needs approval</span>
+          <span class="tag">~{{ def.seconds }}s</span>
+        </div>
+        <p>{{ def.summary }}</p>
+        <ol class="job-chain" :aria-label="`${def.title} phases`">
+          <li v-for="(phase, i) in def.phases" :key="phase.id" :title="phase.summary">
+            <span>{{ i + 1 }}</span
+            >{{ phase.label }}<Repeat v-if="phase.kind === 'repeat'" :size="13" /><ShieldCheck
+              v-if="phase.kind === 'approval'"
+              :size="13"
+            />
+          </li>
+        </ol>
+        <div class="job-def-meta">
+          <code v-for="input in def.inputs" :key="input.name" :title="input.description"
+            >{{ input.name }}={{ input.default }}</code
+          >
+          <code :title="`Each run saves its result to App State ${def.resultPath}`"
+            >→ {{ def.resultPath }}</code
+          >
+        </div>
+        <div v-if="latest.get(def.id)" class="job-def-last">
+          <span
+            >Run #{{ latest.get(def.id)!.run }}:
+            <strong>{{ status(latest.get(def.id)!.status) }}</strong
+            ><template v-if="!jobRunDone(latest.get(def.id)!)">
+              in
+              {{
+                latest.get(def.id)!.phases.find((p) => p.id === latest.get(def.id)!.phase)?.label
+              }}</template
+            ></span
+          >
+          <button class="text-button" @click="revealRun(latest.get(def.id)!.id)">
+            Show in chat
+          </button>
+          <template v-if="latest.get(def.id)!.approval === 'pending'">
+            <button
+              class="primary small"
+              :disabled="!!pending"
+              @click="decide(latest.get(def.id)!, true)"
+            >
+              Approve
+            </button>
+            <button
+              class="secondary"
+              :disabled="!!pending"
+              @click="decide(latest.get(def.id)!, false)"
+            >
+              Decline
+            </button>
+          </template>
+        </div>
+        <button
+          class="secondary job-def-run"
+          :disabled="!!pending || !agentHandle"
+          @click="startJob(def)"
+        >
+          <Play :size="16" />Run {{ def.title }}
+        </button>
+      </article>
+    </section>
+
+    <section class="task-section" aria-label="Agent activity">
+      <div class="panel-heading">
+        <h3>Agent activity</h3>
+        <Activity :size="18" />
+      </div>
+      <p class="hint">
+        Every model response and every tool call is its own durable task with an id, an owner and a
+        checkpoint. Follow them live here; after a restart each one resumes or reports how it ended.
+      </p>
+      <p v-if="!rows.length" class="task-empty">Nothing running. Send a message or run a job.</p>
+      <ul v-else class="task-tree">
+        <li
+          v-for="{ task, depth } in rows"
+          :key="task.id"
+          class="task-row"
+          :style="{ '--depth': depth }"
+          :data-task-kind="task.kind"
+        >
+          <component :is="kindOf(task).icon" :size="16" />
+          <strong>{{ kindOf(task).name }}</strong>
+          <span class="tag">{{ status(task.state.status) }}</span>
+          <span v-if="phaseOf(task)" class="task-phase">{{ phaseOf(task) }}</span>
+          <small
+            >#{{ task.id }} {{ kindOf(task).what }}, agent #{{ task.conversationId
+            }}{{ task.effectiveBackground ? ", background" : "" }}</small
+          >
+          <button
+            v-for="cid in task.conversations"
+            :key="cid"
+            class="text-button"
+            @click="openAgent(cid)"
+          >
+            Open agent #{{ cid }}
+          </button>
+        </li>
+      </ul>
+      <p class="hint">
+        Interrupt or Esc stops foreground work and what it owns. Stop all also stops background
+        runs.
+      </p>
+      <button class="secondary danger" :disabled="!tasks.length || stopping" @click="stopAll">
+        <Octagon :size="18" />Stop all
+      </button>
+    </section>
+
+    <details class="raw task-section" @toggle="loadRuntime">
+      <summary><Clock3 :size="18" />Runtime details</summary>
+      <p class="hint">
+        Recent task results and recovery records, read from the device when opened.
+      </p>
+      <details v-for="task in outcomes" :key="task.id" class="raw">
+        <summary>
+          {{ task.kind }} #{{ task.id
+          }}<span>{{ status(task.state.outcome?.status ?? task.state.status) }}</span>
+        </summary>
+        <pre>{{ JSON.stringify(task.state.outcome, null, 2) }}</pre>
+      </details>
+      <details class="raw">
+        <summary>Recovery inspection</summary>
+        <pre>{{ JSON.stringify(inspection, null, 2) }}</pre>
+      </details>
+    </details>
+  </div>
+</template>

package/apps/dpi-playground/apps/dpi-playground-fe/src/components/Toast.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// Toast: bottom-center pill, bound to the existing ui.toast / notify() timer in the store.
+import { Check } from "lucide-vue-next";
+import { ui } from "../client/store";
+</script>
+
+<template>
+  <Transition name="toast">
+    <div v-if="ui.toast" class="toast" role="status"><Check :size="18" />{{ ui.toast }}</div>
+  </Transition>
+</template>

package/apps/dpi-playground/apps/dpi-playground-fe/src/components/TokenManager.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+/**
+ * P2-25 — TokenManager: the public view of a device pairing. Only public
+ * metadata ever renders here: pairing status, key fingerprint, paired-at,
+ * credential generation, rotationPending. No token, no hash, no secret.
+ *
+ * Honesty contract:
+ * - rotate 202 = queued intent → badge "rotation queued (waiting device ACK)";
+ *   nothing says "delivered" until the device's new generation appears.
+ * - revoke asks for confirmation; a 202 says the hub committed — it does NOT
+ *   claim the device files were wiped (that is only known from the device's
+ *   own matching notice / auth failure on a later connection).
+ */
+import { computed, ref } from "vue";
+import { KeyRound, RefreshCw, ShieldOff } from "lucide-vue-next";
+import type { NetworkDevice } from "@sdk/api";
+import { pairingAdmin } from "../client/pair";
+import { message } from "../client/hub";
+import { ago, notify, ui } from "../client/store";
+
+const props = defineProps<{ device: NetworkDevice }>();
+const busy = ref(false);
+const error = ref("");
+
+const pairing = computed(() => props.device.pairing);
+
+async function rotate(): Promise<void> {
+  if (busy.value) return;
+  busy.value = true;
+  error.value = "";
+  try {
+    await pairingAdmin.rotate(props.device.id);
+    notify("Rotation queued — it completes when the device acknowledges the new credential.");
+  } catch (e) {
+    error.value = message(e);
+  } finally {
+    busy.value = false;
+  }
+}
+
+async function revoke(): Promise<void> {
+  if (busy.value) return;
+  ui.dialog = {
+    kind: "prompt",
+    title: `Revoke ${props.device.id}?`,
+    hint: "Every tunnel credential for this device dies at commit and the live tunnel is cut within a second. The device cleans its own files the next time it talks to the hub.",
+    submit: "Revoke",
+    danger: true,
+    run: async () => {
+      await pairingAdmin.revoke(props.device.id, "user");
+      notify(
+        "Revoke committed on the hub. The tunnel is cut; the device cleans up on its next contact.",
+      );
+    },
+  };
+}
+</script>
+
+<template>
+  <section v-if="pairing" class="token-manager" aria-label="Credential manager">
+    <header>
+      <KeyRound :size="15" />
+      <h3>Credential</h3>
+      <span class="pairing-status" :class="pairing.status">{{ pairing.status }}</span>
+    </header>
+    <dl>
+      <dt>Key fingerprint</dt>
+      <dd>
+        <code class="credential-fingerprint">{{ pairing.keyFingerprint }}</code>
+      </dd>
+      <dt>Paired</dt>
+      <dd :title="new Date(pairing.pairedAt).toISOString()">{{ ago(pairing.pairedAt) }}</dd>
+      <dt>Generation</dt>
+      <dd>{{ pairing.credentialGeneration }}</dd>
+    </dl>
+    <p v-if="pairing.rotationPending" class="rotation-badge" role="status">
+      <RefreshCw :size="13" class="spin" /> rotation queued — waiting for the device to ACK
+    </p>
+    <div class="token-actions">
+      <button
+        v-if="pairing.status === 'paired'"
+        class="small"
+        :disabled="busy || pairing.rotationPending"
+        @click="rotate"
+      >
+        <RefreshCw :size="14" /> Rotate credential
+      </button>
+      <button
+        v-if="pairing.status === 'paired'"
+        class="small danger"
+        :disabled="busy"
+        @click="revoke"
+      >
+        <ShieldOff :size="14" /> Revoke
+      </button>
+    </div>
+    <p v-if="error" class="message-error" role="alert">{{ error }}</p>
+  </section>
+</template>
+
+<style>
+.token-manager {
+  border: 1px solid var(--border, #333);
+  border-radius: 8px;
+  padding: 0.6rem 0.8rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-size: 0.8rem;
+}
+.token-manager header {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.token-manager h3 {
+  margin: 0;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+.token-manager .pairing-status {
+  margin-left: auto;
+  font-size: 0.7rem;
+  padding: 0.05rem 0.5rem;
+  border-radius: 999px;
+  border: 1px solid var(--border, #333);
+}
+.token-manager .pairing-status.paired {
+  color: var(--ok, #6cc070);
+}
+.token-manager .pairing-status.revoked {
+  color: var(--warn, #e0b040);
+}
+.token-manager dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.15rem 0.8rem;
+  margin: 0;
+}
+.token-manager dt {
+  color: var(--muted, #888);
+}
+.token-manager dd {
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.token-manager .credential-fingerprint {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+.token-manager .rotation-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin: 0;
+  color: var(--warn, #e0b040);
+  font-size: 0.75rem;
+}
+.token-manager .token-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.token-manager .spin {
+  animation: tm-spin 1.2s linear infinite;
+}
+@keyframes tm-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/apps/dpi-playground/apps/dpi-playground-fe/src/components/TopBar.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+// TopBar: the top strip, bound to the real client store — device/session/agent counts,
+// stream state, and the panel/new-session actions. Presentation only; all data comes
+// from client/store.ts.
+import { computed, ref } from "vue";
+import { CircleHelp, Network, PanelLeft, PanelRight, Plus } from "lucide-vue-next";
+import {
+  attempt,
+  network,
+  notify,
+  online,
+  select,
+  selected,
+  sessionHandle,
+  streamState,
+  ui,
+  showInspector,
+  hideInspector,
+} from "../client/store";
+
+const onlineCount = computed(
+  () => network.devices.value.filter((d) => d.status === "online").length,
+);
+const sessionCount = computed(() =>
+  network.devices.value.reduce((n, d) => n + (d.tree?.sessions.length ?? 0), 0),
+);
+const agentCount = computed(() =>
+  network.devices.value.reduce(
+    (n, d) => n + (d.tree?.sessions.reduce((m, s) => m + s.agents.length, 0) ?? 0),
+    0,
+  ),
+);
+const creatingAgent = ref(false);
+
+async function newAgent() {
+  const handle = sessionHandle.value;
+  const t = selected.value;
+  if (!handle || !t || creatingAgent.value) return;
+  creatingAgent.value = true;
+  const created = await attempt(() => handle.createAgent({}));
+  creatingAgent.value = false;
+  if (created) {
+    select({ ...t, agentId: created.id });
+    notify("New agent. Same session, same shared App State.");
+  }
+}
+
+const emit = defineEmits<{ newSession: [] }>();
+</script>
+
+<template>
+  <header class="topbar">
+    <div class="brand">
+      <button
+        class="icon-button tree-toggle"
+        aria-label="Toggle network"
+        title="Network"
+        @click="ui.drawer = !ui.drawer"
+      >
+        <PanelLeft :size="19" /></button
+      ><img class="brandmark" src="/icons/durable-pi.svg" alt="Durable Pi" /><strong
+        >Durable Pi</strong
+      >
+    </div>
+    <span class="topbar-sep" aria-hidden="true"></span>
+    <div class="daemon" data-testid="topbar-stats">
+      <span class="dot" :class="{ off: !onlineCount }" aria-hidden="true"></span>
+      <span
+        class="network-summary"
+        :title="`${onlineCount} of ${network.devices.value.length} devices online`"
+        ><Network :size="16" />{{ onlineCount }} of {{ network.devices.value.length }} online</span
+      ><span class="sep" aria-hidden="true">·</span
+      ><span
+        ><b>{{ sessionCount }}</b> sessions</span
+      ><span class="sep" aria-hidden="true">·</span
+      ><span
+        ><b>{{ agentCount }}</b> agents</span
+      >
+    </div>
+    <div class="top-actions">
+      <span class="chip connection" :class="{ accent: streamState === 'live' }"
+        ><span class="dot" :class="{ off: streamState !== 'live' }" aria-hidden="true" />{{
+          streamState === "live" ? "Connected" : "Reconnecting"
+        }}</span
+      ><button
+        class="icon-button"
+        title="How this works"
+        aria-label="How this works"
+        @click="ui.dialog = { kind: 'help' }"
+      >
+        <CircleHelp :size="19" /></button
+      ><button
+        class="secondary small new-agent-button"
+        :disabled="!selected || !online || creatingAgent"
+        title="Start a fresh agent in this session"
+        @click="newAgent"
+      >
+        <Plus :size="18" />New agent
+      </button>
+      <button class="primary small" @click="emit('newSession')">
+        <Plus :size="18" />New session
+      </button>
+      <button
+        class="icon-button inspector-toggle"
+        aria-label="Toggle inspector"
+        title="Inspector"
+        :disabled="!selected || !online"
+        @click="ui.inspectorOverlay ? hideInspector() : showInspector()"
+      >
+        <PanelRight :size="19" />
+      </button>
+    </div>
+  </header>
+</template>