my-durable 0.0.0-stage → 0.0.2

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

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { Check, X } from "lucide-vue-next";
+import type { ModelInfo } from "@sdk/api";
+import {
+  agentHandle,
+  agentState,
+  attempt,
+  device,
+  icon,
+  models,
+  notify,
+  number,
+  refreshDetail,
+} from "../client/store";
+
+const emit = defineEmits<{ close: [] }>();
+const search = ref("");
+const filtered = computed(() =>
+  models.value.filter((m) =>
+    `${m.name} ${m.id} ${m.tier}`.toLowerCase().includes(search.value.toLowerCase()),
+  ),
+);
+const isCurrent = (m: ModelInfo) =>
+  m.id === agentState.value.agent.model?.modelId &&
+  m.provider === agentState.value.agent.model?.provider;
+
+async function choose(m: ModelInfo) {
+  const done = await attempt(() =>
+    agentHandle.value!.configure({ model: { provider: m.provider, modelId: m.id } }),
+  );
+  if (done) {
+    await refreshDetail();
+    notify("Model saved. Used on the next turn.");
+    emit("close");
+  }
+}
+</script>
+
+<template>
+  <div class="modal-backdrop" @click.self="emit('close')">
+    <section class="modal model-modal">
+      <header>
+        <div>
+          <span class="eyebrow">PER AGENT · {{ device?.id }}</span>
+          <h2>Choose a model</h2>
+        </div>
+        <button class="icon-button" aria-label="Close model picker" @click="emit('close')">
+          <X :size="18" />
+        </button>
+      </header>
+      <input v-model="search" placeholder="Search models or tiers…" aria-label="Search models" />
+      <div class="model-list">
+        <button
+          v-for="m in filtered"
+          :key="`${m.provider}/${m.id}`"
+          :class="{ selected: isCurrent(m) }"
+          @click="choose(m)"
+        >
+          <img :src="icon(m.id)" alt="" />
+          <div>
+            <strong>{{ m.name }}</strong
+            ><small>{{ m.tier }} / {{ m.provider }} / {{ number(m.contextWindow) }} context</small>
+          </div>
+          <Check v-if="isCurrent(m)" :size="18" />
+        </button>
+      </div>
+      <p class="hint">Models available on {{ device?.id }}. Provider keys stay on the device.</p>
+    </section>
+  </div>
+</template>

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

@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import { computed, nextTick, ref } from "vue";
+import { Link2, Network, PanelLeftClose, PanelLeftOpen } from "lucide-vue-next";
+import DeviceIcon from "./DeviceIcon.vue";
+import type { TreeNode } from "@sdk/models";
+import TreeRow from "./TreeRow.vue";
+import { deviceClient, hub } from "../client/hub";
+import {
+  attempt,
+  expanded,
+  layout,
+  network,
+  notify,
+  select,
+  selected,
+  toggle,
+  ui,
+  panelKeys,
+} from "../client/store";
+
+interface Row {
+  node: TreeNode;
+  depth: number;
+  parent?: string;
+}
+
+const rows = computed(() => {
+  const out: Row[] = [];
+  const walk = (nodes: TreeNode[], depth: number, parent?: string) => {
+    for (const node of nodes) {
+      out.push({ node, depth, parent });
+      if (node.children.length && expanded.value.has(node.key))
+        walk(node.children, depth + 1, node.key);
+    }
+  };
+  walk(network.tree.value, 0);
+  return out;
+});
+const focusKey = ref<string>();
+const list = ref<HTMLElement>();
+
+const deviceOf = (node: TreeNode) =>
+  network.devices.value.find(
+    (d) => d.id === (node.type === "device" ? node.device.id : node.deviceId),
+  );
+const isOnline = (node: TreeNode) => deviceOf(node)?.status === "online";
+const isSelected = (node: TreeNode) =>
+  node.type === "agent" &&
+  selected.value?.deviceId === node.deviceId &&
+  selected.value.sessionId === node.sessionId &&
+  selected.value.agentId === node.agent.id;
+
+function activate(node: TreeNode) {
+  focusKey.value = node.key;
+  if (node.type === "device") return toggle(node.key);
+  if (node.type === "agent")
+    return select({ deviceId: node.deviceId, sessionId: node.sessionId, agentId: node.agent.id });
+  const root = node.session.agents.find((a) => a.kind === "root") ?? node.session.agents[0];
+  toggle(node.key, true);
+  if (root) select({ deviceId: node.deviceId, sessionId: node.session.id, agentId: root.id });
+}
+
+async function action(node: TreeNode, name: string) {
+  const device = deviceOf(node);
+  if (!device) return;
+  const client = deviceClient(device.id);
+  if (node.type === "device") {
+    if (name === "new-session") ui.dialog = { kind: "new-session", deviceId: device.id };
+    else if (name === "check") await attempt(() => hub.check(device.id));
+    else if (name === "credentials") ui.dialog = { kind: "credentials", deviceId: device.id };
+    return;
+  }
+  if (node.type === "session") {
+    const s = node.session;
+    if (name === "new-agent") {
+      const created = await attempt(() => client.session(s.id).createAgent({}));
+      if (created) {
+        select({ deviceId: device.id, sessionId: s.id, agentId: created.id });
+        notify("New agent. Same session, same shared App State.");
+      }
+    } else if (name === "rename")
+      ui.dialog = {
+        kind: "prompt",
+        title: "Rename session",
+        label: "Session name",
+        value: s.name,
+        submit: "Save name",
+        run: (value) => client.session(s.id).rename(value),
+      };
+    else if (name === "archive")
+      ui.dialog = {
+        kind: "prompt",
+        title: `Archive ${s.name}?`,
+        hint: `Stops all of its work and moves its files to archive/ on ${device.id}. Nothing is deleted.`,
+        submit: "Archive session",
+        danger: true,
+        run: async () => {
+          await client.session(s.id).archive();
+          if (selected.value?.sessionId === s.id) select(undefined);
+        },
+      };
+    return;
+  }
+  const a = node.agent;
+  if (name === "rename")
+    ui.dialog = {
+      kind: "prompt",
+      title: "Rename agent",
+      label: "Agent name",
+      value: a.named ? a.name : "",
+      placeholder: a.name,
+      submit: "Save name",
+      run: (value) => client.agent(node.sessionId, a.id).rename(value),
+    };
+}
+
+function move(delta: number) {
+  const i = rows.value.findIndex((r) => r.node.key === focusKey.value);
+  const next = rows.value[Math.max(0, Math.min(rows.value.length - 1, (i < 0 ? 0 : i) + delta))];
+  if (!next) return;
+  focusKey.value = next.node.key;
+  void nextTick(() =>
+    list.value
+      ?.querySelector(`[data-key="${CSS.escape(next.node.key)}"]`)
+      ?.scrollIntoView({ block: "nearest" }),
+  );
+}
+
+function focusFirst() {
+  focusKey.value ??= rows.value[0]?.node.key;
+}
+
+function keydown(e: KeyboardEvent) {
+  const row = rows.value.find((r) => r.node.key === focusKey.value);
+  if (e.key === "ArrowDown") move(1);
+  else if (e.key === "ArrowUp") move(-1);
+  else if (e.key === "ArrowRight" && row) {
+    if (!row.node.children.length) return;
+    if (expanded.value.has(row.node.key)) move(1);
+    else toggle(row.node.key, true);
+  } else if (e.key === "ArrowLeft" && row) {
+    if (row.node.children.length && expanded.value.has(row.node.key)) toggle(row.node.key, false);
+    else if (row.parent) focusKey.value = row.parent;
+  } else if ((e.key === "Enter" || e.key === " ") && row) activate(row.node);
+  else return;
+  e.preventDefault();
+}
+</script>
+
+<template>
+  <aside
+    class="network-sidebar"
+    :class="{ open: ui.drawer, collapsed: !layout.tree && !ui.drawer }"
+    aria-label="Network"
+  >
+    <template v-if="layout.tree || ui.drawer">
+      <header class="tree-head">
+        <span><Network :size="16" />NETWORK</span>
+        <button
+          class="icon-button"
+          aria-label="Pair a device"
+          title="Pair a device"
+          @click="ui.dialog = { kind: 'pair' }"
+        >
+          <Link2 :size="15" />
+        </button>
+        <button
+          class="icon-button panel-toggle"
+          aria-label="Collapse network"
+          :title="`Collapse network (${panelKeys.tree})`"
+          @click="((layout.tree = false), (ui.drawer = false))"
+        >
+          <PanelLeftClose :size="18" />
+        </button>
+      </header>
+      <div
+        ref="list"
+        class="tree-list"
+        role="tree"
+        tabindex="0"
+        aria-label="Devices, sessions and agents"
+        @keydown="keydown"
+        @focus="focusFirst"
+      >
+        <TreeRow
+          v-for="row in rows"
+          :key="row.node.key"
+          :node="row.node"
+          :depth="row.depth"
+          :open="expanded.has(row.node.key)"
+          :selected="isSelected(row.node)"
+          :focused="focusKey === row.node.key"
+          :online="isOnline(row.node)"
+          @toggle="toggle(row.node.key)"
+          @activate="activate(row.node)"
+          @action="action(row.node, $event)"
+        />
+        <p v-if="!rows.length" class="hint tree-empty" data-testid="tree-empty">
+          No devices yet. Declare them in <code>dpi-network.yaml</code> (start from
+          <code>dpi-network.example.yaml</code>), then run <code>just net up &lt;id&gt;</code>.
+        </p>
+      </div>
+    </template>
+    <div v-else class="panel-rail" aria-label="Network (collapsed)">
+      <button
+        class="icon-button panel-toggle"
+        aria-label="Expand network"
+        :title="`Expand network (${panelKeys.tree})`"
+        @click="layout.tree = true"
+      >
+        <PanelLeftOpen :size="18" />
+      </button>
+      <button
+        v-for="d in network.devices.value"
+        :key="d.id"
+        class="rail-device"
+        :title="`${d.id} · ${d.status}`"
+        :aria-label="`Show ${d.id}`"
+        @click="((layout.tree = true), toggle(d.id, true))"
+      >
+        <DeviceIcon :device="d" :size="20" /><i
+          class="dot"
+          :class="
+            d.status === 'online'
+              ? 'on'
+              : d.status === 'checking'
+                ? 'chk'
+                : d.status === 'offline'
+                  ? 'off'
+                  : 'err'
+          "
+        />
+      </button>
+    </div>
+  </aside>
+</template>

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

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { Plus, X } from "lucide-vue-next";
+import DirBrowser from "./DirBrowser.vue";
+import { deviceClient, message } from "../client/hub";
+import { network, notify, select } from "../client/store";
+
+const props = defineProps<{ deviceId?: string }>();
+const emit = defineEmits<{ close: [] }>();
+
+const devices = computed(() => network.devices.value.filter((d) => d.status === "online"));
+const deviceId = ref(
+  devices.value.find((d) => d.id === props.deviceId)?.id ?? devices.value[0]?.id ?? "",
+);
+const device = computed(() => devices.value.find((d) => d.id === deviceId.value));
+const models = computed(() => device.value?.info?.models ?? []);
+const key = (m: { provider: string; id: string }) => `${m.provider}/${m.id}`;
+const draft = ref({ name: "", cwd: "", model: "" });
+const pending = ref(false);
+const error = ref("");
+
+watch(
+  device,
+  (d) => {
+    const fallback =
+      d?.info?.models.find((m) => m.id === d.info?.defaultModel) ?? d?.info?.models[0];
+    draft.value.model = fallback ? key(fallback) : "";
+    draft.value.cwd = "";
+  },
+  { immediate: true },
+);
+
+async function create() {
+  if (pending.value || !device.value) return;
+  pending.value = true;
+  error.value = "";
+  try {
+    const model = models.value.find((m) => key(m) === draft.value.model);
+    if (!model) throw Error("Choose a model");
+    const created = await deviceClient(device.value.id).createSession({
+      name: draft.value.name.trim() || "New session",
+      cwd: draft.value.cwd.trim(),
+      model: { provider: model.provider, modelId: model.id },
+    });
+    const root = created.agents.find((a) => a.kind === "root") ?? created.agents[0];
+    select({ deviceId: device.value.id, sessionId: created.id, agentId: root?.id ?? 1 });
+    notify(`Session created on ${device.value.id}.`);
+    emit("close");
+  } catch (e) {
+    error.value = message(e);
+  } finally {
+    pending.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="modal-backdrop" @click.self="emit('close')">
+    <form class="modal session-modal" @submit.prevent="create">
+      <header>
+        <div>
+          <span class="eyebrow">A PERSISTENT WORKSPACE</span>
+          <h2>New session</h2>
+        </div>
+        <button
+          type="button"
+          class="icon-button"
+          aria-label="Close new session"
+          @click="emit('close')"
+        >
+          <X :size="18" />
+        </button>
+      </header>
+      <p v-if="!devices.length" class="message-error">
+        No device is online. Start one with just backend run or just net up &lt;id&gt;, then try
+        again.
+      </p>
+      <template v-else>
+        <label
+          >Device<select v-model="deviceId" aria-label="Device">
+            <option v-for="d in devices" :key="d.id" :value="d.id">
+              {{ d.id }} · {{ d.info?.hostname ?? d.url }}
+            </option>
+          </select></label
+        >
+        <label
+          >Session name<input
+            v-model="draft.name"
+            autofocus
+            placeholder="My durable agent"
+            maxlength="100"
+        /></label>
+        <div class="field">
+          <span>Working directory on {{ deviceId }}</span>
+          <DirBrowser v-model="draft.cwd" :device-id="deviceId" />
+        </div>
+        <label
+          >Model<select v-model="draft.model" aria-label="New session model">
+            <option v-for="m in models" :key="key(m)" :value="key(m)">
+              {{ m.tier }} / {{ m.name }}
+            </option>
+          </select></label
+        >
+      </template>
+      <p v-if="error" class="message-error" role="alert">{{ error }}</p>
+      <footer>
+        <button type="button" class="secondary" @click="emit('close')">Cancel</button
+        ><button class="primary" :disabled="pending || !draft.model || !draft.cwd || !device">
+          <Plus :size="18" />{{ pending ? "Creating…" : "Create session" }}
+        </button>
+      </footer>
+    </form>
+  </div>
+</template>

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

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { Copy, RefreshCw, ShieldAlert, WifiOff, Loader } from "lucide-vue-next";
+import type { NetworkDevice } from "@sdk/api";
+import { hub, message } from "../client/hub";
+import { ago, notify } from "../client/store";
+
+const props = defineProps<{ device: NetworkDevice }>();
+const busy = ref(false);
+const error = ref("");
+
+/** The exact fix for this device's state. Device setup happens in the terminal, never in this UI. */
+const fix = computed(() => {
+  const d = props.device;
+  const config = d.source === "config";
+  switch (d.status) {
+    case "checking":
+      return {
+        title: `Checking ${d.id}…`,
+        text: "Probing the device. This view fills in as soon as it answers.",
+      };
+    case "unauthorized":
+      if (d.transport === "tunnel") {
+        // The hub never parks tunnel devices on unauthorized; if it happens,
+        // point at pairing, not at a token the browser does not hold.
+        return {
+          title: `${d.id} tunnel credentials are not valid`,
+          text: "Pair the device again — the hub will mint a fresh credential.",
+        };
+      }
+      return {
+        title: d.hasToken ? `${d.id} rejected its token` : `No token for ${d.id}`,
+        text: d.hasToken
+          ? "The device's DPI_TOKEN changed (a rotate or a rebuilt device). Copy the current token into this hub's registry, then check again."
+          : "This hub has no token for the device yet. Register it, then check again.",
+        command:
+          config && d.kind !== "url"
+            ? `just net register ${d.id}`
+            : `just net register ${d.id} --token <token>`,
+      };
+    case "mismatch":
+      return {
+        title: `${d.id} answers as a different device`,
+        text: "The URL now reaches a backend with another identity (a rebuilt VM or a new data directory). If that is expected, register it again: that trusts the identity it answers with now.",
+        command:
+          d.kind === "url"
+            ? `just net register ${d.id} --token <token>`
+            : `just net register ${d.id}`,
+      };
+    case "incompatible":
+      return {
+        title: `${d.id} speaks another API version`,
+        text: "Update the device's dpi-backend.",
+        command: config ? `just net deploy ${d.id}` : undefined,
+      };
+    default:
+      return {
+        title: `${d.id} is offline`,
+        text: `Last seen ${ago(d.lastSeenAt)}. Its agents keep their state on the device and resume when its backend starts again. The tree shows the last known sessions.`,
+        command: !config
+          ? undefined
+          : d.kind === "local"
+            ? "just backend run"
+            : d.kind === "url"
+              ? undefined
+              : `just net restart ${d.id}`,
+        alt: config && d.kind !== "local" && d.kind !== "url" ? `just net up ${d.id}` : undefined,
+      };
+  }
+});
+
+async function check() {
+  busy.value = true;
+  error.value = "";
+  try {
+    const d = await hub.check(props.device.id);
+    if (d.status === "online") notify(`${d.id} is online.`);
+  } catch (e) {
+    error.value = message(e);
+  } finally {
+    busy.value = false;
+  }
+}
+async function copy(text: string) {
+  try {
+    await navigator.clipboard.writeText(text);
+    notify("Copied.");
+  } catch {
+    notify("Clipboard needs localhost or HTTPS. Select the text to copy.");
+  }
+}
+</script>
+
+<template>
+  <section class="chat-panel offline-panel" :class="device.status" aria-live="polite">
+    <div class="chat-empty">
+      <Loader v-if="device.status === 'checking'" class="spin" :size="30" />
+      <ShieldAlert
+        v-else-if="device.status === 'mismatch' || device.status === 'unauthorized'"
+        :size="30"
+      />
+      <WifiOff v-else :size="30" />
+      <span class="eyebrow"
+        >{{ device.kind.toUpperCase() }} ·
+        {{ device.url ?? (device.transport === "tunnel" ? "tunnel" : "no endpoint") }}</span
+      >
+      <h2>{{ fix.title }}</h2>
+      <p>{{ fix.text }}</p>
+      <p v-if="device.error" class="hint offline-error">{{ device.error }}</p>
+      <div v-if="fix.command" class="offline-command">
+        <code>{{ fix.command }}</code>
+        <button class="icon-button" aria-label="Copy command" @click="copy(fix.command)">
+          <Copy :size="18" />
+        </button>
+      </div>
+      <p v-if="fix.command" class="hint">Run it in this repo's terminal, then press Check now.</p>
+      <p v-if="fix.alt" class="hint">
+        Never deployed or rebuilt? <code>{{ fix.alt }}</code> provisions it from scratch.
+      </p>
+      <div class="offline-actions">
+        <button class="secondary" :disabled="busy" @click="check()">
+          <RefreshCw :size="18" />{{ busy ? "Checking…" : "Check now" }}
+        </button>
+      </div>
+      <p v-if="error" class="message-error" role="alert">{{ error }}</p>
+    </div>
+  </section>
+</template>