my-durable 0.0.0-stage → 0.0.2

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

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { Activity, Braces, Check, GitFork, Info, Layers, Wrench } from "lucide-vue-next";
+import type { TranscriptItem, ToolCallView } from "@sdk/transcript";
+import { markdown } from "../client/markdown";
+import { json } from "../client/store";
+import { runByCall, runById } from "../client/jobs";
+import JobCard from "./JobCard.vue";
+
+defineProps<{ item: TranscriptItem }>();
+const emit = defineEmits<{ fork: [entryId: number] }>();
+const statusLabel = (call: ToolCallView) =>
+  call.status === "error" ? "Error" : call.status === "done" ? "Done" : call.status;
+const entryClass = (item: TranscriptItem) =>
+  item.kind === "user"
+    ? "pi-user"
+    : item.kind === "assistant"
+      ? item.streaming
+        ? "live-generation"
+        : "pi-assistant"
+      : item.kind === "tool-result"
+        ? "pi-tool-result"
+        : item.kind === "tool"
+          ? "live-tool-entry"
+          : item.entryKind.replaceAll(".", "-");
+</script>
+
+<template>
+  <article class="entry" :class="entryClass(item)">
+    <template v-if="item.kind === 'user'"
+      ><div class="message-label">
+        YOU <span>#{{ item.id }}</span>
+      </div>
+      <div class="user-message">{{ item.text }}</div></template
+    >
+    <template v-else-if="item.kind === 'assistant'"
+      ><div class="message-label">
+        AGENT
+        <span v-if="item.streaming" class="streaming">Working</span
+        ><span v-else>#{{ item.id }}</span
+        ><button
+          v-if="!item.streaming"
+          class="fork-button"
+          :aria-label="`Fork at entry ${item.id}`"
+          title="Fork from this entry. App State stays shared."
+          @click="emit('fork', item.id as number)"
+        >
+          <GitFork :size="18" />Fork
+        </button>
+      </div>
+      <template v-for="(b, j) in item.blocks" :key="j"
+        ><div v-if="b.type === 'text'" class="markdown" v-html="markdown(b.text)" />
+        <details v-else-if="b.type === 'thinking'" class="thinking">
+          <summary>Thinking</summary>
+          <div>{{ b.text }}</div>
+        </details>
+        <details
+          v-else
+          class="tool-call"
+          :class="{ failed: b.call.status === 'error' }"
+          :data-call-id="b.call.callId"
+        >
+          <summary>
+            <Info v-if="b.call.status === 'error'" :size="18" />
+            <Check v-else-if="b.call.status === 'done'" :size="18" />
+            <Activity v-else-if="b.call.status === 'running'" :size="18" />
+            <Wrench v-else :size="18" /><strong>{{ b.call.name }}</strong
+            ><code>{{ json(b.call.args)?.slice(0, 90) }}</code>
+            <span class="tool-status">{{ statusLabel(b.call) }}</span>
+          </summary>
+          <div class="tool-section-label">Input</div>
+          <pre>{{ json(b.call.args) }}</pre>
+          <template v-if="b.call.result !== undefined">
+            <div class="tool-section-label">
+              <span>Result</span>
+              <button
+                v-if="b.call.resultEntryId !== undefined"
+                class="fork-button"
+                :aria-label="`Fork at entry ${b.call.resultEntryId}`"
+                title="Fork after this result"
+                @click="emit('fork', b.call.resultEntryId!)"
+              >
+                <GitFork :size="18" />Fork
+              </button>
+            </div>
+            <pre>{{ b.call.result }}</pre>
+          </template>
+          <template v-else-if="b.call.output">
+            <div class="tool-section-label">Live output</div>
+            <pre>{{ b.call.output }}</pre>
+          </template>
+        </details>
+        <JobCard
+          v-if="b.type === 'tool' && b.call.name === 'run_durable_job' && runByCall(b.call.callId)"
+          :run="runByCall(b.call.callId)!"
+      /></template>
+      <div v-if="item.streaming && !item.blocks.length" class="typing"><i /><i /><i /></div>
+      <div v-if="item.error" class="message-error">{{ item.error }}</div></template
+    >
+    <template v-else-if="item.kind === 'tool-result'"
+      ><details class="tool-result" :class="{ failed: item.isError }">
+        <summary>
+          <Check v-if="!item.isError" :size="18" /><Info v-else :size="18" /><strong>{{
+            item.name
+          }}</strong
+          ><span>{{ item.isError ? "error" : "result" }}</span
+          ><button
+            class="fork-button"
+            :aria-label="`Fork at entry ${item.id}`"
+            @click.prevent="emit('fork', item.id)"
+          >
+            <GitFork :size="18" />Fork
+          </button>
+        </summary>
+        <pre>{{ item.text }}</pre>
+      </details></template
+    >
+    <div v-else-if="item.kind === 'tool'" class="live-tool">
+      <div>
+        <Activity :size="18" /><strong>{{ item.call.name }}</strong
+        ><span>{{ item.call.status }}</span>
+      </div>
+      <pre v-if="item.call.output">{{ item.call.output }}</pre>
+      <JobCard
+        v-if="item.call.name === 'run_durable_job' && runByCall(item.call.callId)"
+        :run="runByCall(item.call.callId)!"
+      />
+    </div>
+    <JobCard
+      v-else-if="item.entryKind === 'demo.job' && runById((item.data as { taskId: number }).taskId)"
+      :run="runById((item.data as { taskId: number }).taskId)!"
+    />
+    <template v-else
+      ><div class="event-line">
+        <Braces v-if="item.entryKind === 'demo.state-change'" :size="18" /><Layers
+          v-else
+          :size="18"
+        /><span>{{ item.text }}</span
+        ><button
+          class="fork-button"
+          :aria-label="`Fork at entry ${item.id}`"
+          @click="emit('fork', item.id)"
+        >
+          <GitFork :size="18" />Fork
+        </button>
+      </div>
+      <details v-if="item.note" class="raw">
+        <summary>Context note</summary>
+        <pre>{{ item.note }}</pre>
+      </details></template
+    >
+  </article>
+</template>

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

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import {
+  ChevronDown,
+  ChevronRight,
+  CornerDownRight,
+  FolderOpen,
+  GitFork,
+  MessageSquare,
+  Pencil,
+  Plus,
+  RefreshCw,
+  Archive,
+  KeyRound,
+} from "lucide-vue-next";
+import DeviceIcon from "./DeviceIcon.vue";
+import type { TreeNode } from "@sdk/models";
+import { ago } from "../client/store";
+
+const props = defineProps<{
+  node: TreeNode;
+  depth: number;
+  open: boolean;
+  selected: boolean;
+  focused: boolean;
+  online: boolean;
+}>();
+const emit = defineEmits<{ toggle: []; activate: []; action: [name: string] }>();
+
+const hasChildren = computed(() => props.node.children.length > 0);
+const device = computed(() => (props.node.type === "device" ? props.node.device : undefined));
+const session = computed(() => (props.node.type === "session" ? props.node.session : undefined));
+const agent = computed(() => (props.node.type === "agent" ? props.node.agent : undefined));
+const background = computed(() =>
+  session.value
+    ? session.value.agents.reduce((n, a) => n + a.background, 0)
+    : (agent.value?.background ?? 0),
+);
+const busy = computed(() => session.value?.busy || agent.value?.busy);
+const statusText = computed(() => {
+  const d = device.value;
+  if (!d) return "";
+  const count = d.tree?.sessions.length ?? 0;
+  switch (d.status) {
+    case "online":
+      return `${count} session${count === 1 ? "" : "s"}`;
+    case "checking":
+      return "checking…";
+    case "unauthorized":
+      return d.hasToken ? "token rejected" : "no token";
+    case "mismatch":
+      return "identity changed";
+    case "incompatible":
+      return "incompatible";
+    default:
+      return `offline · ${ago(d.lastSeenAt)}`;
+  }
+});
+const dot = computed(() => {
+  const s = device.value?.status;
+  return s === "online" ? "on" : s === "checking" ? "chk" : s === "offline" ? "off" : "err";
+});
+const label = computed(() => device.value?.id ?? session.value?.name ?? agent.value?.name ?? "");
+const title = computed(() => {
+  if (device.value)
+    return `${device.value.name} · ${device.value.url}${device.value.error ? `\n${device.value.error}` : ""}`;
+  if (session.value) return `${session.value.name}\n${session.value.cwd}`;
+  const a = agent.value!;
+  return a.kind === "fork"
+    ? `Fork of agent #${a.parentId} at entry #${a.forkedAt}`
+    : a.kind === "subagent"
+      ? `Subagent owned by agent #${a.ownerAgentId}`
+      : "Root agent";
+});
+</script>
+
+<template>
+  <div
+    class="tree-row"
+    :class="[node.type, { sel: selected, focus: focused, stale: node.stale }]"
+    :style="{ '--depth': depth }"
+    role="treeitem"
+    :aria-level="depth + 1"
+    :aria-expanded="hasChildren ? open : undefined"
+    :aria-selected="selected"
+    :data-key="node.key"
+    :title="title"
+    @click="emit('activate')"
+  >
+    <button
+      v-if="hasChildren"
+      class="chev"
+      tabindex="-1"
+      :aria-label="open ? `Collapse ${label}` : `Expand ${label}`"
+      @click.stop="emit('toggle')"
+    >
+      <ChevronDown v-if="open" :size="16" /><ChevronRight v-else :size="16" />
+    </button>
+    <span v-else class="chev" />
+    <template v-if="device">
+      <i class="dot" :class="dot" />
+      <DeviceIcon :device="device" :size="16" />
+      <b class="name">{{ label }}</b>
+      <span class="badge">{{ device.kind }}</span>
+      <span class="meta" :class="{ err: dot === 'err' }">{{ statusText }}</span>
+      <span class="acts" @click.stop>
+        <button
+          v-if="device.pairing"
+          class="icon-button"
+          :aria-label="`Manage credentials for ${label}`"
+          title="Manage device credentials, including while offline"
+          @click="emit('action', 'credentials')"
+        >
+          <KeyRound :size="16" />
+        </button>
+        <button
+          class="icon-button"
+          :disabled="!online"
+          :aria-label="`New session on ${label}`"
+          title="New session on this device"
+          @click="emit('action', 'new-session')"
+        >
+          <Plus :size="16" /></button
+        ><button
+          class="icon-button"
+          :aria-label="`Check ${label}`"
+          title="Check connection now"
+          @click="emit('action', 'check')"
+        >
+          <RefreshCw :size="16" />
+        </button>
+      </span>
+    </template>
+    <template v-else-if="session">
+      <FolderOpen class="ico" :size="16" />
+      <b class="name">{{ label }}</b>
+      <span class="path">…/{{ session.cwd.split("/").filter(Boolean).at(-1) }}</span>
+      <i v-if="busy" class="dot work" title="Working" />
+      <span v-if="background" class="bg-count" :title="`${background} background task(s)`"
+        ><i class="dot bg" />{{ background }} bg</span
+      >
+      <span class="acts" @click.stop>
+        <button
+          class="icon-button"
+          :disabled="!online"
+          :aria-label="`New agent in ${label}`"
+          title="New agent in this session"
+          @click="emit('action', 'new-agent')"
+        >
+          <Plus :size="16" /></button
+        ><button
+          class="icon-button"
+          :disabled="!online"
+          :aria-label="`Rename session ${label}`"
+          title="Rename session"
+          @click="emit('action', 'rename')"
+        >
+          <Pencil :size="16" /></button
+        ><button
+          class="icon-button"
+          :disabled="!online"
+          :aria-label="`Archive session ${label}`"
+          title="Archive session"
+          @click="emit('action', 'archive')"
+        >
+          <Archive :size="16" />
+        </button>
+      </span>
+    </template>
+    <template v-else-if="agent">
+      <GitFork v-if="agent.kind === 'fork'" class="ico" :size="16" />
+      <CornerDownRight v-else-if="agent.kind === 'subagent'" class="ico" :size="16" />
+      <MessageSquare v-else class="ico root" :size="16" />
+      <span class="name">{{ label }}</span>
+      <span v-if="agent.kind === 'fork' && agent.forkedAt !== undefined" class="meta"
+        >@ #{{ agent.forkedAt }}</span
+      >
+      <i v-if="busy" class="dot work" title="Working" />
+      <span v-if="background" class="bg-count" :title="`${background} background task(s)`"
+        ><i class="dot bg" />{{ background }}</span
+      >
+      <span class="acts" @click.stop>
+        <button
+          class="icon-button"
+          :disabled="!online"
+          :aria-label="`Rename agent ${label}`"
+          title="Rename agent"
+          @click="emit('action', 'rename')"
+        >
+          <Pencil :size="16" />
+        </button>
+      </span>
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+/**
+ * P2-25 — TunnelStatusBar: two INDEPENDENT axes, both read straight from the
+ * network DTO (no invented state):
+ *  1. transport — how the hub reaches the device: LAN (url) or tunnel (WSS),
+ *     with tunnel.state/readerCount when the hub exposes diagnostics.
+ *  2. monitor — the six-value probe status (checking/online/offline/
+ *     unauthorized/mismatch/incompatible).
+ * url === null hides any endpoint link (tunnel devices have no hub-side URL);
+ * no retry countdown is fabricated — the hub does not expose one.
+ */
+import { computed } from "vue";
+import { Cable, Wifi, WifiOff } from "lucide-vue-next";
+import type { NetworkDevice } from "@sdk/api";
+import { ago } from "../client/store";
+
+const props = defineProps<{ device: NetworkDevice }>();
+
+const online = computed(() => props.device.status === "online");
+const viaTunnel = computed(() => props.device.transport === "tunnel");
+const transportLabel = computed(() =>
+  online.value
+    ? viaTunnel.value
+      ? "online · via tunnel"
+      : "online · LAN"
+    : viaTunnel.value
+      ? "tunnel"
+      : "LAN",
+);
+const tunnelLive = computed(() => props.device.tunnel?.state === "connected");
+</script>
+
+<template>
+  <span class="tunnel-status" :data-status="device.status">
+    <span
+      class="axis transport"
+      :title="viaTunnel ? 'Hub ⇄ device over the tunnel (WSS)' : 'Hub → device over LAN'"
+    >
+      <Cable v-if="viaTunnel" :size="13" :class="{ live: tunnelLive }" />
+      <Wifi v-else :size="13" :class="{ live: online }" />
+      {{ transportLabel }}
+    </span>
+    <span class="axis monitor" :class="device.status">
+      <WifiOff v-if="device.status === 'offline'" :size="13" />
+      <template v-else>{{ device.status }}</template>
+    </span>
+    <span
+      v-if="viaTunnel && tunnelLive && device.tunnel"
+      class="axis muted"
+      :title="`tunnel last seen ${ago(device.tunnel.lastSeenAt)}`"
+    >
+      {{ device.tunnel.readerCount }} reader{{ device.tunnel.readerCount === 1 ? "" : "s" }}
+    </span>
+    <a v-if="device.url" class="axis url" :href="device.url" target="_blank" rel="noreferrer">{{
+      device.url
+    }}</a>
+    <span
+      v-if="device.lastSeenAt"
+      class="axis muted"
+      :title="`last probe ${ago(device.lastSeenAt)}`"
+      >{{ ago(device.lastSeenAt) }}</span
+    >
+  </span>
+</template>
+
+<style>
+.tunnel-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  flex-wrap: wrap;
+}
+.tunnel-status .axis {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.1rem 0.5rem;
+  border-radius: 999px;
+  border: 1px solid var(--border, #333);
+}
+.tunnel-status .axis.transport {
+  color: var(--fg, #eee);
+}
+.tunnel-status .axis.monitor.offline {
+  color: var(--muted, #888);
+}
+.tunnel-status .axis.monitor.unauthorized,
+.tunnel-status .axis.monitor.mismatch,
+.tunnel-status .axis.monitor.incompatible {
+  color: var(--warn, #e0b040);
+}
+.tunnel-status .axis.monitor.online {
+  color: var(--ok, #6cc070);
+}
+.tunnel-status .axis.muted {
+  color: var(--muted, #888);
+  border-style: dashed;
+}
+.tunnel-status .axis.url {
+  color: var(--accent, #7ab8ff);
+  text-decoration: none;
+}
+.tunnel-status .live {
+  color: var(--ok, #6cc070);
+}
+</style>

package/apps/dpi-playground/apps/dpi-playground-fe/src/extensions.css

@@ -0,0 +1,105 @@
+/* The Extensions tab: one card per custom harness extension. */
+
+.ext-card {
+  margin-top: 12px;
+  padding: 13px 14px;
+  border: 1px solid #453536;
+  border-left: 3px solid #5a3a3e;
+  border-radius: 8px;
+  background: #241819;
+}
+.ext-card.on {
+  border-left-color: var(--ok);
+}
+.ext-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.ext-head > div {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 10px;
+  min-width: 0;
+}
+.ext-head strong {
+  font-size: 16px;
+}
+.ext-head code {
+  font-family: var(--font-mono);
+  font-size: 16px;
+  color: var(--secondary);
+}
+.ext-card > p {
+  margin: 8px 0 0;
+  font-size: 16px;
+  line-height: 1.5;
+}
+.ext-prompts {
+  list-style: none;
+  margin: 12px 0 0;
+  padding: 10px 0 0;
+  border-top: 1px solid #3c2b2d;
+  display: grid;
+  gap: 10px;
+}
+.ext-prompts.off {
+  opacity: 0.6;
+}
+.ext-prompts li {
+  display: grid;
+  gap: 4px;
+  font-size: 16px;
+}
+.ext-prompts label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+.ext-prompts code {
+  font-family: var(--font-mono);
+  font-size: 16px;
+}
+.ext-prompts li > span {
+  padding-left: 26px;
+  color: var(--secondary);
+  line-height: 1.45;
+}
+.ext-prompts details {
+  padding-left: 26px;
+}
+.ext-prompts summary {
+  cursor: pointer;
+  color: var(--accent);
+}
+.ext-prompts pre {
+  max-height: 260px;
+  overflow: auto;
+  margin: 6px 0 0;
+  padding: 9px;
+  white-space: pre-wrap;
+  background: #180f10;
+  border-radius: 6px;
+  font-size: 16px;
+}
+
+/* Tools tab: tools the agent's tool filter removes (read only) fade out. */
+.tool-row.disabled summary > strong,
+.tool-row.disabled summary > svg,
+.tool-row.disabled > p,
+.tool-row.disabled > pre,
+.tool-row.disabled > small {
+  opacity: 0.45;
+}
+/* Sits right after the name; the replay tag keeps the row's right edge. */
+.tool-row summary .tag.tool-disabled {
+  margin-left: 2px;
+  margin-right: auto;
+  color: var(--warn);
+  border-color: #6b5a24;
+}
+.tool-row summary .tag.tool-disabled + .tag {
+  margin-left: auto;
+}