my-durable 0.0.0-stage → 0.0.2

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

@@ -0,0 +1,254 @@
+<script setup lang="ts">
+// The selected agent's context window: how full it is, where automatic compaction starts in the background, and
+// where the next request waits for a summary. Both markers drag (or take arrow keys) and save the session's
+// thresholds, which pi-durable reads at its next request.
+import { computed, onUnmounted, ref, watch } from "vue";
+import { Info, X } from "lucide-vue-next";
+import {
+  compactionThresholds,
+  defaultCompaction,
+  type CompactionSettings,
+  type WireAssistantMessage,
+} from "@sdk/api";
+import {
+  agentState,
+  attempt,
+  currentModel,
+  sessionHandle,
+  sessionSummary,
+  ui,
+} from "../client/store";
+
+const STEP = 512;
+const MIN_AUTO = 4096;
+const GAP = 1024;
+
+const k = (n: number) =>
+  n >= 1_000_000
+    ? `${(n / 1_000_000).toFixed(2)}M`
+    : n >= 1000
+      ? `${(n / 1000).toFixed(1)}k`
+      : String(n);
+const window = computed(() => currentModel.value?.contextWindow ?? 0);
+
+/** The last reply's prompt plus output: what the next request starts from. */
+const used = computed(() => {
+  const entries = agentState.value.entries;
+  for (let i = entries.length - 1; i >= 0; i--) {
+    if (entries[i].kind !== "pi.assistant") continue;
+    const reply = entries[i].model?.find((m) => m.role === "assistant") as
+      | WireAssistantMessage
+      | undefined;
+    const u = reply?.usage;
+    if (u) return u.totalTokens || u.input + u.output + u.cacheRead + u.cacheWrite;
+  }
+  return 0;
+});
+const compacting = computed(() => agentState.value.compactions.length > 0);
+
+// A saved value shows at once; the stream's session summary confirms it a moment later.
+const saved = ref<CompactionSettings>();
+const settings = computed<CompactionSettings>(
+  () => saved.value ?? sessionSummary.value?.compaction ?? defaultCompaction(window.value),
+);
+watch(
+  () => JSON.stringify(sessionSummary.value?.compaction),
+  (now) => {
+    if (saved.value && now === JSON.stringify(saved.value)) saved.value = undefined;
+  },
+);
+
+const draft = ref<{ auto?: number; wait: number }>();
+// The details live in an app dialog, so Escape closes them instead of interrupting the agent.
+const detailsOpen = computed(() => ui.dialog?.kind === "compaction");
+const closeDetails = () => void (ui.dialog = undefined);
+onUnmounted(() => detailsOpen.value && closeDetails());
+const marks = computed(() => draft.value ?? compactionThresholds(window.value, settings.value));
+const pct = (n: number) => `${Math.min(100, Math.max(0, (100 * n) / (window.value || 1)))}%`;
+const fullness = computed(() => Math.round((100 * used.value) / (window.value || 1)));
+/** Labels near either end grow inward so they stay inside the panel. */
+const align = (n: number) => {
+  const at = n / (window.value || 1);
+  return at < 0.35 ? "start" : at > 0.65 ? "end" : "center";
+};
+
+const clampWait = (w: number, auto?: number) =>
+  Math.min(window.value - GAP, Math.max((auto ?? MIN_AUTO) + GAP, w));
+const clampAuto = (a: number, wait: number) => Math.min(wait - GAP, Math.max(MIN_AUTO, a));
+
+function move(which: "auto" | "wait", tokens: number) {
+  const current = marks.value;
+  const t = Math.round(tokens / STEP) * STEP;
+  draft.value =
+    which === "wait"
+      ? { auto: current.auto, wait: clampWait(t, current.auto) }
+      : { auto: clampAuto(t, current.wait), wait: current.wait };
+}
+
+async function save(patch: Partial<CompactionSettings>) {
+  const handle = sessionHandle.value;
+  if (!handle) return;
+  const result = await attempt(() => handle.setCompaction(patch));
+  if (result) saved.value = result;
+  draft.value = undefined;
+}
+
+function commit() {
+  const d = draft.value;
+  if (!d) return;
+  void save({
+    reserveTokens: window.value - d.wait,
+    ...(d.auto !== undefined ? { backgroundTokens: d.wait - d.auto } : {}),
+  });
+}
+
+const bar = ref<HTMLElement>();
+let dragging: "auto" | "wait" | undefined;
+function down(which: "auto" | "wait", e: PointerEvent) {
+  dragging = which;
+  (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+}
+function drag(e: PointerEvent) {
+  if (!dragging || !bar.value) return;
+  const rect = bar.value.getBoundingClientRect();
+  move(dragging, ((e.clientX - rect.left) / rect.width) * window.value);
+}
+function up() {
+  if (!dragging) return;
+  dragging = undefined;
+  commit();
+}
+function key(which: "auto" | "wait", e: KeyboardEvent) {
+  const delta =
+    (e.shiftKey ? 8192 : 1024) *
+    (e.key === "ArrowRight" || e.key === "ArrowUp"
+      ? 1
+      : e.key === "ArrowLeft" || e.key === "ArrowDown"
+        ? -1
+        : 0);
+  if (!delta) return;
+  e.preventDefault();
+  const current = marks.value;
+  move(which, (which === "auto" ? (current.auto ?? MIN_AUTO) : current.wait) + delta);
+}
+</script>
+
+<template>
+  <section class="context-section" aria-labelledby="context-title">
+    <div class="section-label">
+      <span id="context-title">CONTEXT</span>
+      <button
+        v-if="window"
+        class="context-details-toggle"
+        @click="ui.dialog = { kind: 'compaction' }"
+      >
+        <Info :size="16" />Details
+      </button>
+    </div>
+    <div v-if="!window" class="hint">Pick a model to see its context window.</div>
+    <template v-else>
+      <div class="context-numbers">
+        <strong>{{ k(used) }}</strong
+        ><span>of {{ k(window) }} tokens</span><span class="context-pct">{{ fullness }}%</span>
+        <span v-if="compacting" class="context-compacting"><i />Compacting</span>
+      </div>
+      <div
+        ref="bar"
+        class="context-bar"
+        :class="{ off: !settings.enabled }"
+        @pointermove="drag"
+        @pointerup="up"
+        @pointercancel="up"
+      >
+        <div
+          class="context-fill"
+          :class="{ hot: marks.auto !== undefined && used >= marks.auto }"
+          :style="{ width: pct(used) }"
+        />
+        <div
+          class="context-reserve"
+          :style="{ left: pct(marks.wait) }"
+          title="Reserved for the answer"
+        />
+        <button
+          v-if="marks.auto !== undefined"
+          class="context-marker auto"
+          :class="`label-${align(marks.auto)}`"
+          role="slider"
+          aria-label="Automatic compaction starts at"
+          :aria-valuemin="MIN_AUTO"
+          :aria-valuemax="marks.wait - GAP"
+          :aria-valuenow="marks.auto"
+          :aria-valuetext="`${k(marks.auto)} tokens`"
+          :style="{ left: pct(marks.auto) }"
+          @pointerdown="down('auto', $event)"
+          @keydown="key('auto', $event)"
+          @keyup="commit"
+          @blur="commit"
+        >
+          <span class="context-marker-label">Auto-compact at {{ k(marks.auto) }}</span>
+        </button>
+        <button
+          class="context-marker wait"
+          :class="`label-${align(marks.wait)}`"
+          role="slider"
+          aria-label="The next request waits for a summary at"
+          :aria-valuemin="(marks.auto ?? MIN_AUTO) + GAP"
+          :aria-valuemax="window - GAP"
+          :aria-valuenow="marks.wait"
+          :aria-valuetext="`${k(marks.wait)} tokens, ${k(window - marks.wait)} reserved`"
+          :style="{ left: pct(marks.wait) }"
+          @pointerdown="down('wait', $event)"
+          @keydown="key('wait', $event)"
+          @keyup="commit"
+          @blur="commit"
+        >
+          <span class="context-marker-label">Reserve at {{ k(marks.wait) }}</span>
+        </button>
+      </div>
+      <p class="hint context-hint">
+        <template v-if="settings.enabled"
+          >Compacts in the background at <strong>{{ k(marks.auto ?? marks.wait) }}</strong> and
+          waits at <strong>{{ k(marks.wait) }}</strong
+          >.</template
+        ><template v-else>Automatic compaction is off.</template>
+      </p>
+    </template>
+  </section>
+  <Teleport to="body">
+    <div v-if="detailsOpen" class="modal-backdrop" @click.self="closeDetails">
+      <section
+        class="modal compaction-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="compaction-title"
+      >
+        <header>
+          <h2 id="compaction-title">Context compaction</h2>
+          <button class="icon-button" aria-label="Close context compaction" @click="closeDetails">
+            <X :size="18" />
+          </button>
+        </header>
+        <p>
+          A summary starts in the background at <strong>{{ k(marks.auto ?? marks.wait) }}</strong
+          >. Above <strong>{{ k(marks.wait) }}</strong> the next request waits for it, keeping
+          {{ k(window - marks.wait) }} free for the answer. Drag a marker on the bar to change
+          either point.
+        </p>
+        <p>Older entries stay stored, and <code>search_history</code> still finds them.</p>
+        <label class="context-toggle">
+          <input
+            type="checkbox"
+            :checked="settings.enabled"
+            @change="save({ enabled: ($event.target as HTMLInputElement).checked })"
+          />
+          Automatic compaction
+        </label>
+        <p class="hint">
+          Applies to every agent in this session. <code>/compact</code> works either way.
+        </p>
+        <footer><button class="secondary" @click="closeDetails">Close</button></footer>
+      </section>
+    </div>
+  </Teleport>
+</template>

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { X } from "lucide-vue-next";
+import TokenManager from "./TokenManager.vue";
+import { network } from "../client/store";
+
+const props = defineProps<{ deviceId: string }>();
+const emit = defineEmits<{ close: [] }>();
+const device = computed(() => network.devices.value.find((d) => d.id === props.deviceId));
+</script>
+
+<template>
+  <div class="modal-backdrop" @click.self="emit('close')">
+    <section
+      class="modal"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="device-credentials-title"
+    >
+      <header>
+        <h2 id="device-credentials-title">Device credentials</h2>
+        <button class="icon-button" aria-label="Close device credentials" @click="emit('close')">
+          <X :size="18" />
+        </button>
+      </header>
+      <template v-if="device">
+        <p>
+          {{ device.name }} <code>{{ device.id }}</code>
+        </p>
+        <p class="hint">
+          {{ device.status }} · tunnel {{ device.tunnel?.state ?? "disconnected" }} ·
+          {{ device.tunnel?.readerCount ?? 0 }} readers
+        </p>
+        <TokenManager :device="device" />
+      </template>
+      <p v-else class="hint">This device is no longer in the registry.</p>
+      <footer><button class="secondary" @click="emit('close')">Close</button></footer>
+    </section>
+  </div>
+</template>

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Laptop, Server } from "lucide-vue-next";
+import type { NetworkDevice } from "@sdk/api";
+
+// The platform a device runs on: exe.dev VMs, Macs (from DeviceInfo.platform), else a generic box.
+const props = withDefaults(defineProps<{ device?: NetworkDevice; size?: number }>(), { size: 16 });
+const kind = computed(() => {
+  const d = props.device;
+  if (d?.kind === "exe-dev" || d?.url?.includes(".exe.xyz")) return "exe";
+  if (d?.info?.platform.startsWith("darwin")) return "apple";
+  return d?.kind === "local" ? "laptop" : "server";
+});
+const label = computed(() => {
+  const base = { exe: "exe.dev VM", apple: "macOS", laptop: "This computer", server: "Server" }[
+    kind.value
+  ];
+  return props.device?.transport === "tunnel" ? `${base} (tunnel)` : base;
+});
+</script>
+
+<template>
+  <svg
+    v-if="kind === 'exe'"
+    class="device-icon exe"
+    viewBox="0 0 512 512"
+    :width="size"
+    :height="size"
+    role="img"
+    :aria-label="label"
+  >
+    <title>{{ label }}</title>
+    <path
+      fill="currentColor"
+      fill-rule="evenodd"
+      d="M8 332.2l.9 1.4 1.5 .5 38.5-4.1 3.1 .4 2.7 2.2 8.8 13.2 10.1 12.8 1.1 2.6-.3 3.2-16.4 35.6 0 1.7 1 1.2 2.2 0 33.8-18.2 3.1-.8 3.4 1 12.4 8.7 15.3 9.4 1.5 2.1 .5 2.5-3.1 38.9 .4 1.5 1.3 .9 2.3-.7 25.9-29.2 2.1-1.3 2.8-.4 16.3 4.4 15.7 3.2 3 1.8 1.6 2.8 9.8 37.1 1.5 1.6 1.7-.1 1.1-1.1 14.5-35.6 1.8-2.5 3.4-1.5 15.7-1.1 16.1-2.4 3.2 .5 2.3 1.8 22.4 32 2.2 .9 1.4-.7 .6-1.5 1.4-39 1-2.7 2.4-2.2 14.7-6.8 13.8-7.8 3.4-.7 3 1 32.4 21 2.3 0 1.1-1.1 0-1.6-13.4-36.6-.3-2.5 .7-2.4 12.2-13.9 8.8-12.1 2.8-2 3.1-.3 38.4 5.4 2.1-.9 .5-1.5-.6-1.4-27.5-27.4-1.6-2.7-.2-3.1 4.6-15.8 2.9-15.8 1.3-2.6 2.5-1.9 37.3-12.2 1.6-1.9-.3-1.5-1.1-1-36.8-12.5-2.4-1.4-1.8-3.3-3.1-17.7 0-2.2 .9-2.4 3.1-2.9 10.6-15.3 3.3-1.8 3.4 .3 3.8 3 4.5 6.8 8.9 11.2 12.5 12.5 6.2 4.8 7.3 4.3 6.3 2.4 3.8 .3 4-.3 5.1-2.4 6.5-7 4.8-10.6 3.3-11.9 2-14.1 1.3-3.4 0-66.6-.8-2.6-2-13.6-3.8-14.6-7.5-18.7-4.7-9.4-4-6-7.2-7.1-5-2.1-6.5 0-2.2 .7-6 3.5-12 12-13.1 17.8-11.7 18.2-3.7 1.6-11.8-.1-3.1-1.6-1.8-2.9-.3-8.8-2.8-12.7-1.5-4-7.1-13.3-5.9-7.8-10.7-9.3-8.6-4.7-5.9-2-4.1-.5-6.7-.5-4.1 .5-7 2-7.3 3.8-7.5 7-2.2 3.2-2.5 5.5-2.8 10.5-.5 3.6 .1 17.1-.3 2.2-1.1 1.9-1.7 1.5-3.7 1.5-2.6 .3-27.5-10.5-14.5-4-15.7-3.2-2.6-1.3-1.9-3-9.9-37.5-.9-1.2-1.4-.4-1.3 .4-.8 1-14.7 36.1-1.8 2.1-2.2 1.2-17.8 1.4-15 2.2-3.4-.7-2.4-2.1-22-31.5-2-.9-1.5 .5-.7 1.5-1.4 38.6-.9 3-2.5 2.5-14.7 6.8-13.8 7.8-2.8 .7-3.1-.7-32.9-21.3-2.3 0-1.1 1.1-.1 1.6 13.6 36.9 0 3.1-1.2 2.6-10.8 12-9.5 12.9-2.8 2-3.2 .3-38.4-5.4-1.5 .4-.9 1.4 .6 2.1 27.6 27.6 1.2 1.8 .5 2.2-3 10.6-1.5 2.4-2.4 1.6-5.8 1-4.4 1.8-3.8 3-3 3.8-1.7 4-.7 4.7 .4 4.7 1.5 4.2 .3 .5 30.7 0 1.7 .6 1.4 1.1 1.1 3-1.1 2.9-2.7 1.6-31.1 .1-.6 1.1-1.2 3.6-.4 4.1 .4 4.2 1.2 3.5 2.5 4 3.2 3.1 4.1 2.3 5.6 1.8 2.4 2.1 .9 2.1 5.1 21.2-.6 2.1-1.2 1.9-28.5 26.5zM283.6 189.4l6.6 .5 5.6 1.2 6.2 2.2 5.9 3.1 4.6 3.4 4.8 4.5 3.5 4.4 3.4 5.8 2.6 6.2 1.6 6.4 .6 5.6-.2 6.7-1.1 6.5-1.7 5.4-2.9 6-3.6 5.5-7.1 7.3-8.4 5.4-9.4 3.5-9.9 1.3-11-1-40.4-10.4-2.8-1.1-3.1-2.4-1.7-.6-.9-1.1-.1-2.2-1.4-2.2 1.6-6.3 18.1-38.5 4.7-7.5 7.1-7.3 8.4-5.4 9.4-3.5zM173.9 198l-1.1 5.9-2.3 5.5-3.4 5-4.2 4.3-5 3.3-5.5 2.3-5.9 1.2-6 0-5.9-1.2-5.6-2.3-5-3.3-4.2-4.3-3.3-5-2.3-5.5-1.2-5.9 0-6 1.2-5.9 2.3-5.5 3.3-5 4.2-4.3 5-3.3 5.6-2.3 5.9-1.2 6 0 5.9 1.2 5.5 2.3 5 3.3 4.2 4.3 3.4 5 2.3 5.5 1.1 5.9zM315.1 213.5l-63.1 37.7 69.5-12.9 0-6.2-1-6.5-2.1-6.1zM237.3 260l-2.6 1.5 40.6 10.5 7.4 .9 7.4-.5 5.4-1.4 5.2-2.1 8.5-5.8 3.8-4.1 3.2-4.5 2.6-5 1.6-4.9zM284.5 196.9l-7.4 .5-8.1 2.3-7.3 4.1-6.3 5.5-5.8 8.5-17.4 37.1 3-.6 76.1-45.5-5.8-5-6.5-3.7-7.1-2.3zM141.1 183.6l-1.1-2.9-2-2.3-2.8-1.3-3.1-.1-2.9 1-2.3 2.1-1.3 2.8-.1 3 1 2.9 2.1 2.3 2.7 1.3 3.1 .2 2.9-1.1 2.3-2 1.3-2.8z"
+    />
+  </svg>
+  <svg
+    v-else-if="kind === 'apple'"
+    class="device-icon apple"
+    viewBox="0 0 384 512"
+    :width="size"
+    :height="size"
+    role="img"
+    :aria-label="label"
+  >
+    <title>{{ label }}</title>
+    <path
+      fill="currentColor"
+      d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"
+    />
+  </svg>
+  <Laptop v-else-if="kind === 'laptop'" class="device-icon" :size="size" :aria-label="label" />
+  <Server v-else class="device-icon" :size="size" :aria-label="label" />
+</template>

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

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { CornerLeftUp, Folder, FolderOpen, Home } from "lucide-vue-next";
+import type { DirListing } from "@sdk/api";
+import { deviceClient, message } from "../client/hub";
+
+const props = defineProps<{ deviceId: string }>();
+const cwd = defineModel<string>({ required: true });
+const listing = ref<DirListing>();
+const loading = ref(false);
+const error = ref("");
+
+// Only the latest request may update the view: switching devices mid-load must not show the
+// previous device's listing.
+let seq = 0;
+async function open(path: string) {
+  const mine = ++seq;
+  const deviceId = props.deviceId;
+  loading.value = true;
+  error.value = "";
+  try {
+    const result = await deviceClient(deviceId).dirs(path);
+    if (mine !== seq) return undefined;
+    listing.value = result;
+    if (result.path) cwd.value = result.path;
+    return result;
+  } catch (e) {
+    if (mine === seq) error.value = message(e);
+    return undefined;
+  } finally {
+    if (mine === seq) loading.value = false;
+  }
+}
+
+watch(
+  () => props.deviceId,
+  async () => {
+    listing.value = undefined;
+    // Start inside the first root so the list is useful right away.
+    const roots = await open("");
+    const first = roots?.dirs[0];
+    if (first && !roots.path) await open(first.path);
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="dir-browser">
+    <div class="dir-path">
+      <input
+        v-model="cwd"
+        aria-label="Working directory"
+        required
+        placeholder="/path/to/project"
+        spellcheck="false"
+        autocomplete="off"
+        @keydown.enter.prevent="open(cwd)"
+      />
+      <button type="button" class="secondary small" :disabled="loading || !cwd" @click="open(cwd)">
+        Go
+      </button>
+    </div>
+    <div class="dir-list" role="listbox" aria-label="Directories" :aria-busy="loading">
+      <button type="button" class="dir-item" title="Start directories" @click="open('')">
+        <Home :size="16" /><span>Start dirs</span>
+      </button>
+      <button
+        v-if="listing?.parent"
+        type="button"
+        class="dir-item"
+        :title="listing.parent"
+        @click="open(listing.parent)"
+      >
+        <CornerLeftUp :size="16" /><span>..</span>
+      </button>
+      <button
+        v-for="d in listing?.dirs"
+        :key="d.path"
+        type="button"
+        class="dir-item"
+        role="option"
+        :aria-selected="d.path === cwd"
+        :title="d.path"
+        @click="open(d.path)"
+      >
+        <FolderOpen v-if="d.path === cwd" :size="16" /><Folder v-else :size="16" /><span>{{
+          d.name
+        }}</span>
+      </button>
+      <p v-if="listing && !listing.dirs.length" class="hint">No subdirectories.</p>
+    </div>
+    <p v-if="error" class="message-error" role="alert">{{ error }}</p>
+  </div>
+</template>

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

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+// Custom harness extensions for the selected agent: a switch per extension, and for system-prompts a checklist of
+// built-in prompts. A change edits the agent's stored selection, so the next request runs with it.
+import { ref, shallowRef, watch } from "vue";
+import { Puzzle } from "lucide-vue-next";
+import type { AgentExtensions } from "@sdk/api";
+import { agentHandle, agentState, attempt, online, refreshDetail } from "../client/store";
+
+const data = shallowRef<AgentExtensions>();
+const busy = ref(false);
+
+async function load() {
+  const handle = agentHandle.value;
+  if (!handle || !online.value) return void (data.value = undefined);
+  data.value = (await handle.extensions().catch(() => undefined)) ?? data.value;
+}
+// Reload on a new selection, and when the agent's stored extension selection changes from any client.
+watch(
+  [agentHandle, online, () => JSON.stringify(agentState.value.agent.extensions ?? null)],
+  load,
+  { immediate: true },
+);
+
+async function set(
+  patch: { name: string; enabled: boolean } | { prompt: string; enabled: boolean },
+) {
+  const handle = agentHandle.value;
+  if (!handle || busy.value) return;
+  busy.value = true;
+  try {
+    const next = await attempt(() => handle.setExtension(patch));
+    if (next) data.value = next;
+    void refreshDetail();
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="extensions-panel">
+    <div class="panel-heading">
+      <h2>Extensions</h2>
+      <Puzzle :size="18" />
+    </div>
+    <p class="hint">
+      Custom harness capabilities for this agent. Turn one on and the next request uses it. The
+      choice is stored with the agent, so it survives restarts.
+    </p>
+    <p v-if="!data" class="task-empty">Loading extensions…</p>
+    <article
+      v-for="ext in data?.extensions ?? []"
+      :key="ext.name"
+      class="ext-card"
+      :class="{ on: ext.enabled }"
+      :data-extension="ext.name"
+    >
+      <div class="ext-head">
+        <div>
+          <strong>{{ ext.title }}</strong>
+          <code>{{ ext.name }}</code>
+        </div>
+        <button
+          class="switch"
+          role="switch"
+          :class="{ on: ext.enabled }"
+          :aria-checked="ext.enabled"
+          :aria-label="ext.title"
+          :disabled="busy"
+          @click="set({ name: ext.name, enabled: !ext.enabled })"
+        >
+          <span />
+        </button>
+      </div>
+      <p>{{ ext.description }}</p>
+      <ul v-if="ext.prompts" class="ext-prompts" :class="{ off: !ext.enabled }">
+        <li v-for="p in ext.prompts" :key="p.id">
+          <label>
+            <input
+              type="checkbox"
+              :checked="p.enabled"
+              :disabled="busy"
+              @change="set({ prompt: p.id, enabled: ($event.target as HTMLInputElement).checked })"
+            />
+            <code>{{ p.id }}</code>
+          </label>
+          <span>{{ p.description }}</span>
+          <details>
+            <summary>View prompt</summary>
+            <pre>{{ p.text }}</pre>
+          </details>
+        </li>
+      </ul>
+    </article>
+  </div>
+</template>

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

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+// HelpDialog: scrim + dialog presentation around the operating-model steps.
+// Closes through the shared ui.dialog state; no local state to clone or lose.
+import { Info, X } from "lucide-vue-next";
+import { ui } from "../client/store";
+
+const steps = [
+  {
+    title: "Pick a device, start a session",
+    body: "Every device in the tree runs dpi-backend. A session gets its own SQLite database on that device, in the directory you choose.",
+  },
+  {
+    title: "Send work, then close the browser",
+    body: "The device owns the run. Reopening restores committed messages, state and live progress.",
+  },
+  {
+    title: "Change state and fork",
+    body: "Edit App State by hand or through the agent. Every session and fork on a device shares it.",
+  },
+  {
+    title: "Interrupt deliberately",
+    body: "Interrupt stops foreground work and owned subagents. Background jobs continue. Stop all includes them.",
+  },
+  {
+    title: "Explore the boundaries",
+    body: "Queue a follow-up, steer after tools, wait for approval, compact context, reset or inspect raw state.",
+  },
+  {
+    title: "Restart a device",
+    body: "Its tree dims and shows the restart command. Checkpointed jobs recover on boot. Replay-safe tools may rerun. Other interrupted tools return an error.",
+  },
+];
+</script>
+
+<template>
+  <div class="scrim" @click.self="ui.dialog = undefined">
+    <section class="dialog" role="dialog" aria-modal="true" aria-labelledby="help-title">
+      <div class="dialog-head">
+        <div>
+          <span class="dialog-eyebrow">LEARN BY DOING</span>
+          <h3 id="help-title">What makes this durable?</h3>
+        </div>
+        <button class="icon-button" aria-label="Close help" @click="ui.dialog = undefined">
+          <X :size="18" />
+        </button>
+      </div>
+      <div class="dialog-body">
+        <div v-for="(step, i) in steps" :key="step.title" class="help-step">
+          <span class="n">{{ String(i + 1).padStart(2, "0") }}</span>
+          <div>
+            <b>{{ step.title }}</b>
+            <div class="body">{{ step.body }}</div>
+          </div>
+        </div>
+        <div class="help-callout">
+          <Info :size="18" /><span
+            >Durable does not mean exactly-once external effects. Checkpoints protect progress.
+            Tools still need their own idempotency.</span
+          >
+        </div>
+      </div>
+      <div class="dialog-foot">
+        <div class="right">
+          <button class="secondary" type="button" @click="ui.dialog = undefined">Close</button>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>