my-durable 0.0.0-stage → 0.0.2

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

@@ -0,0 +1,433 @@
+<script setup lang="ts">
+/**
+ * P2-24 — PairDeviceWizard: create code → device proof → FULL fingerprint
+ * approval → issued → (monitor probe) online.
+ *
+ * Security contract (P-8/P-14, plan §P2-24):
+ * - Approve is enabled ONLY after proofVerified AND the operator ticks the
+ *   explicit confirmation; approval always sends the hub-computed fingerprint
+ *   from the codeState DTO — never the device-declared one.
+ * - Name/UID/code alone can never enable approval.
+ * - Key change (re-pair with a different key) requires replaceKey=true and a
+ *   separate warning; 409 already_issued leads to an explicit Revoke offer,
+ *   never a "cancelled" toast.
+ * - The code is RAM-only: closing/cancelling the wizard cancels the code and
+ *   clears every secret-adjacent field.
+ * - /pair handoff: reads ?code/&origin once, replaces the URL (no query left),
+ *   pre-fills — never auto-approves.
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { CheckCircle2, Copy, RefreshCw, ShieldAlert, X } from "lucide-vue-next";
+import { createPairingSession, pairingAdmin, pollCode, type PairingSession } from "../client/pair";
+import { qrSvg } from "../client/qrcode";
+import type { PairCodeIssue, PairCodeState } from "@sdk/api";
+import { DpiError } from "@sdk/errors";
+import { settledPairPath, type PairHandoff } from "../client/pair-handoff";
+import { CANCEL_TIMEOUT_MS, closeWizard, type CancelResult } from "../client/pair-close";
+import { notify, network } from "../client/store";
+
+const emit = defineEmits<{ close: [] }>();
+const props = defineProps<{ handoff?: PairHandoff }>();
+
+type Step = "boot" | "code" | "proof" | "approve" | "issued" | "cancelled" | "expired";
+
+const step = ref<Step>("boot");
+const session = ref<PairingSession>();
+const issue = ref<PairCodeIssue>();
+const state = ref<PairCodeState>();
+const error = ref("");
+const busy = ref(false);
+const closing = ref(false);
+const confirmed = ref(false);
+const replaceKey = ref(false);
+const copied = ref(false);
+const watcher = ref<(() => void) | undefined>();
+
+const grouped = computed(() => {
+  const code = issue.value?.code ?? "";
+  return code.length === 8 ? `${code.slice(0, 4)}-${code.slice(4)}` : code;
+});
+const qrData = computed(() => {
+  if (!issue.value) return "";
+  return issue.value.pairUrl;
+});
+const qr = computed(() => (qrData.value ? qrSvg(qrData.value, 148) : ""));
+const fingerprint = computed(() => state.value?.enrollment?.keyFingerprint ?? "");
+const deviceId = computed(() => state.value?.deviceId ?? "");
+
+/** Online toast fires only after the MONITOR probe succeeds — never on WSS alone. */
+watch(deviceId, (id) => {
+  watcher.value?.();
+  if (!id) return;
+  watcher.value = watch(
+    () => network.devices.value.find((d) => d.id === id)?.status,
+    (status) => {
+      if (status === "online") {
+        notify("Device paired and online.");
+        // F12: the STOP HANDLE is what watch() RETURNS — the callback's third
+        // argument is the onCleanup REGISTRAR (needs a function argument).
+        watcher.value?.();
+        watcher.value = undefined;
+      }
+    },
+    { immediate: true },
+  );
+});
+
+async function createCode(handoffCode?: string): Promise<void> {
+  step.value = "boot";
+  error.value = "";
+  confirmed.value = false;
+  replaceKey.value = false;
+  state.value = undefined;
+  issue.value = undefined;
+  session.value?.close();
+  const s = createPairingSession();
+  session.value = s;
+  try {
+    const created = handoffCode
+      ? await pairingAdmin.resolveCode(handoffCode)
+      : await pairingAdmin.createCode();
+    if (s.closed()) {
+      await pairingAdmin.cancel(created.codeId).catch(() => {
+        notify(
+          "The late pairing code could not be cancelled. Check device credentials before retrying.",
+        );
+      });
+      return;
+    }
+    issue.value = created;
+    step.value = "code";
+    if (handoffCode) {
+      const path = settledPairPath(new URL(window.location.href));
+      if (path) window.history.replaceState(window.history.state, "", path);
+    }
+    void pollCode(s, created.codeId, {
+      intervalMs: 1_000,
+      onState: (st) => {
+        state.value = st;
+        if (st.phase === "awaiting_proof") step.value = "proof";
+        else if (st.phase === "awaiting_approval" || st.phase === "approved")
+          step.value = "approve";
+        else if (st.phase === "issued" || st.phase === "connected") step.value = "issued";
+        else if (st.phase === "cancelled") step.value = "cancelled";
+        else if (st.phase === "expired") step.value = "expired";
+      },
+    }).catch((e) => {
+      if (s.closed()) return;
+      error.value = e instanceof Error ? e.message : String(e);
+      step.value = "expired";
+    });
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : String(e);
+    step.value = "expired";
+  }
+}
+
+async function approve(): Promise<void> {
+  const st = state.value;
+  const s = session.value;
+  if (!st?.enrollment || !s || busy.value) return;
+  // P-8: the tuple must be exactly what the hub verified; P-14: key change
+  // needs the explicit replaceKey confirmation.
+  busy.value = true;
+  error.value = "";
+  try {
+    const next = await pairingAdmin.approve(issue.value!.codeId, {
+      enrollmentId: st.enrollment.enrollmentId,
+      deviceUid: st.enrollment.deviceUid,
+      keyFingerprint: st.enrollment.keyFingerprint,
+      ...(replaceKey.value ? { replaceKey: true } : {}),
+    });
+    state.value = next;
+    if (next.phase === "issued" || next.phase === "connected") step.value = "issued";
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : String(e);
+  } finally {
+    busy.value = false;
+  }
+}
+
+/** Cancel before issuance; 409 already_issued → explicit Revoke path. */
+async function cancelLive(keepalive: boolean): Promise<CancelResult> {
+  if (!issue.value) return "cancelled";
+  try {
+    const next = await pairingAdmin.cancel(issue.value.codeId, undefined, keepalive);
+    state.value = next;
+    if (session.value) session.value.state = next;
+    step.value = next.phase === "expired" ? "expired" : "cancelled";
+    session.value?.close();
+    return "cancelled";
+  } catch (e) {
+    if (e instanceof DpiError && e.status === 409 && String(e.code) === "already_issued") {
+      const latest = await pairingAdmin.codeState(issue.value.codeId).catch(() => undefined);
+      if (latest) {
+        state.value = latest;
+        if (session.value) session.value.state = latest;
+      }
+      step.value = "issued";
+      error.value =
+        "Credential already issued. Closing does not revoke it; choose Revoke explicitly if needed.";
+      return "issued";
+    }
+    error.value = e instanceof Error ? e.message : String(e);
+    return "failed";
+  }
+}
+const cancelCode = () => cancelLive(false);
+
+const settled = () =>
+  ["issued", "connected", "cancelled", "expired"].includes(state.value?.phase ?? "");
+
+async function revokeIssued(): Promise<void> {
+  const id = deviceId.value;
+  if (!id) return;
+  busy.value = true;
+  try {
+    await pairingAdmin.revoke(id, "user");
+    notify("Issued credential revoked.");
+    emit("close");
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : String(e);
+  } finally {
+    busy.value = false;
+  }
+}
+
+async function copyCode(): Promise<void> {
+  if (!issue.value) return;
+  try {
+    await navigator.clipboard.writeText(issue.value.code); // canonical, ungrouped
+    copied.value = true;
+    setTimeout(() => (copied.value = false), 1500);
+  } catch {
+    error.value = "Clipboard unavailable; copy the code manually.";
+  }
+}
+
+async function close(): Promise<void> {
+  if (closing.value) return;
+  closing.value = true;
+  busy.value = true;
+  try {
+    const outcome = await closeWizard({
+      needsCancel: !!issue.value && !settled(),
+      cancel: cancelCode,
+      timeoutMs: CANCEL_TIMEOUT_MS,
+    });
+    if (!outcome.closed) return;
+    session.value?.close();
+    watcher.value?.();
+    if (!outcome.confirmed)
+      notify(
+        "Pairing cancellation was not confirmed. The code expires on its own; check device credentials before retrying.",
+      );
+    emit("close");
+  } finally {
+    closing.value = false;
+    busy.value = false;
+  }
+}
+
+defineExpose({ close });
+
+onMounted(() => {
+  if (props.handoff && "error" in props.handoff) {
+    error.value = props.handoff.error;
+    step.value = "expired";
+    return;
+  }
+  void createCode(props.handoff?.code);
+});
+onBeforeUnmount(() => {
+  const s = session.value;
+  if (s && !s.closed() && issue.value && !settled()) {
+    void cancelLive(true).then((result) => {
+      if (result !== "cancelled")
+        notify("Pairing cancellation was not confirmed. Check device credentials before retrying.");
+    });
+  }
+  s?.close();
+  watcher.value?.();
+});
+</script>
+
+<template>
+  <div class="modal-backdrop" @click.self="close">
+    <div class="modal pair-wizard" role="dialog" aria-modal="true" aria-labelledby="pair-title">
+      <header>
+        <h2 id="pair-title">Pair a device</h2>
+        <button type="button" class="icon-button" aria-label="Close dialog" @click="close">
+          <X :size="18" />
+        </button>
+      </header>
+
+      <p v-if="step === 'boot'" class="hint">Minting a pairing code…</p>
+
+      <template v-else-if="issue">
+        <ol class="pair-steps" aria-label="Pairing progress">
+          <li :class="{ on: true }">Code</li>
+          <li :class="{ on: ['proof', 'approve', 'issued'].includes(step) }">Proof</li>
+          <li :class="{ on: ['approve', 'issued'].includes(step) }">Fingerprint</li>
+          <li :class="{ on: step === 'issued' }">Online</li>
+        </ol>
+
+        <div class="pair-grid">
+          <div class="pair-code-box">
+            <div class="pair-code" aria-label="Pairing code">{{ grouped }}</div>
+            <button type="button" class="small" @click="copyCode">
+              <Copy :size="14" /> {{ copied ? "Copied" : "Copy code" }}
+            </button>
+            <p class="hint">
+              Run the device pairing command and scan, or enter this code on the device. Expires in
+              5 minutes.
+            </p>
+            <div class="pair-qr" aria-label="Pairing QR code" v-html="qr" />
+          </div>
+
+          <div class="pair-side">
+            <template v-if="step === 'code' || step === 'proof'">
+              <p class="hint">
+                <RefreshCw :size="14" class="spin" /> Waiting for the device to submit its signing
+                proof…
+              </p>
+            </template>
+
+            <template v-else-if="step === 'approve'">
+              <div class="pair-fingerprint">
+                <h3>Device key fingerprint</h3>
+                <code class="fp">{{ fingerprint }}</code>
+                <p class="hint">
+                  Compare ALL 64 hex characters with the fingerprint shown on the device screen.
+                </p>
+              </div>
+              <label class="pair-confirm">
+                <input v-model="confirmed" type="checkbox" />
+                The fingerprint matches the device display exactly
+              </label>
+              <label v-if="state?.enrollment?.keyChanged" class="pair-confirm warn">
+                <input v-model="replaceKey" type="checkbox" />
+                <ShieldAlert :size="14" />
+                Device is already paired with a DIFFERENT key — replace the stored key (replaceKey)
+              </label>
+              <button
+                type="button"
+                class="primary"
+                :disabled="
+                  !confirmed || busy || (state?.enrollment?.keyChanged === true && !replaceKey)
+                "
+                @click="approve"
+              >
+                Approve device
+              </button>
+              <button type="button" class="small" :disabled="busy" @click="cancelCode">
+                Cancel pairing
+              </button>
+            </template>
+
+            <template v-else-if="step === 'issued'">
+              <p class="hint">
+                <CheckCircle2 :size="14" /> Credential issued. The device is connecting through the
+                tunnel — you will get a toast once the monitor probe reports it online.
+              </p>
+              <button type="button" class="small" @click="close">Close</button>
+              <button
+                type="button"
+                class="small danger"
+                :disabled="!deviceId || busy"
+                title="Mistaken approval? Revoke the credential now."
+                @click="revokeIssued"
+              >
+                Revoke this credential
+              </button>
+            </template>
+
+            <template v-else-if="step === 'cancelled'">
+              <p class="hint">Pairing was cancelled (or the signature failed too many times).</p>
+              <button type="button" class="small" @click="createCode()">Start over</button>
+            </template>
+
+            <template v-else-if="step === 'expired'">
+              <p class="hint">The pairing code expired.</p>
+              <button type="button" class="small" @click="createCode()">New code</button>
+            </template>
+
+            <p v-if="error" class="error" role="alert">{{ error }}</p>
+          </div>
+        </div>
+      </template>
+      <div v-else>
+        <p class="error" role="alert">{{ error || "This pairing link is unavailable." }}</p>
+        <button type="button" class="small" @click="createCode()">New code</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.pair-wizard .pair-steps {
+  display: flex;
+  gap: 0.5rem;
+  list-style: none;
+  padding: 0;
+  margin: 0.25rem 0 0.75rem;
+  font-size: 0.78rem;
+  color: var(--muted, #888);
+}
+.pair-wizard .pair-steps li {
+  padding: 0.15rem 0.6rem;
+  border: 1px solid transparent;
+  border-radius: 999px;
+}
+.pair-wizard .pair-steps li.on {
+  color: var(--fg, #eee);
+  border-color: currentColor;
+}
+.pair-wizard .pair-grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 1rem;
+  align-items: start;
+}
+.pair-wizard .pair-code {
+  font-size: 1.7rem;
+  letter-spacing: 0.18em;
+  font-family: var(--mono, monospace);
+  margin-bottom: 0.35rem;
+}
+.pair-wizard .pair-qr svg {
+  border: 1px solid var(--border, #333);
+  border-radius: 6px;
+}
+.pair-wizard .pair-side {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  min-width: 0;
+}
+.pair-wizard .fp {
+  display: block;
+  word-break: break-all;
+  font-size: 0.78rem;
+  background: var(--bg2, #222);
+  padding: 0.4rem;
+  border-radius: 6px;
+}
+.pair-wizard .pair-confirm {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  font-size: 0.85rem;
+}
+.pair-wizard .pair-confirm.warn {
+  color: var(--warn, #e0b040);
+}
+.pair-wizard .spin {
+  animation: pair-spin 1.2s linear infinite;
+}
+@keyframes pair-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

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

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { nextTick, onMounted, ref } from "vue";
+import { X } from "lucide-vue-next";
+import { message } from "../client/hub";
+import type { Dialog } from "../client/store";
+
+// One dialog for every name/note/confirm prompt: rename, fork, reset, archive, remove.
+const props = defineProps<{ dialog: Extract<Dialog, { kind: "prompt" }> }>();
+const emit = defineEmits<{ close: [] }>();
+const value = ref(props.dialog.value ?? "");
+const busy = ref(false);
+const error = ref("");
+const input = ref<HTMLInputElement | HTMLTextAreaElement>();
+const hasInput = !!props.dialog.label;
+
+async function submit() {
+  if (busy.value) return;
+  if (hasInput && !props.dialog.optional && !value.value.trim()) return;
+  busy.value = true;
+  error.value = "";
+  try {
+    await props.dialog.run(value.value.trim());
+    emit("close");
+  } catch (e) {
+    error.value = message(e);
+  } finally {
+    busy.value = false;
+  }
+}
+onMounted(() => void nextTick(() => (input.value?.focus(), input.value?.select())));
+</script>
+
+<template>
+  <div class="modal-backdrop" @click.self="!busy && emit('close')">
+    <form
+      class="modal"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="prompt-title"
+      @submit.prevent="submit"
+    >
+      <header>
+        <h2 id="prompt-title">{{ dialog.title }}</h2>
+        <button
+          type="button"
+          class="icon-button"
+          aria-label="Close dialog"
+          :disabled="busy"
+          @click="emit('close')"
+        >
+          <X :size="18" />
+        </button>
+      </header>
+      <p v-if="dialog.hint" class="hint">{{ dialog.hint }}</p>
+      <label v-if="hasInput"
+        >{{ dialog.label }}
+        <span v-if="dialog.optional" class="muted">(optional)</span>
+        <textarea
+          v-if="dialog.multiline"
+          ref="input"
+          v-model="value"
+          rows="4"
+          :placeholder="dialog.placeholder"
+          :disabled="busy" /><input
+          v-else
+          ref="input"
+          v-model="value"
+          maxlength="100"
+          :required="!dialog.optional"
+          :placeholder="dialog.placeholder"
+          :aria-label="dialog.label"
+          :disabled="busy"
+      /></label>
+      <p v-if="error" class="message-error" role="alert">{{ error }}</p>
+      <footer>
+        <button type="button" class="secondary" :disabled="busy" @click="emit('close')">
+          Cancel
+        </button>
+        <button
+          class="primary"
+          :class="{ danger: dialog.danger }"
+          :disabled="busy || (hasInput && !dialog.optional && !value.trim())"
+        >
+          {{ busy ? "Working…" : dialog.submit }}
+        </button>
+      </footer>
+    </form>
+  </div>
+</template>

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

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { Plus, Minus, Trash2 } from "lucide-vue-next";
+import { statePath, type JsonValue, type StateChange } from "@sdk/app-state";
+
+const props = withDefaults(
+  defineProps<{ value: JsonValue; path?: string; label?: string; disabled?: boolean }>(),
+  { path: "", label: "App State" },
+);
+const emit = defineEmits<{ change: [change: StateChange] }>();
+const kind = computed(() =>
+  props.value === null ? "null" : Array.isArray(props.value) ? "array" : typeof props.value,
+);
+const container = computed(() => kind.value === "object" || kind.value === "array");
+const children = computed(() =>
+  container.value ? Object.entries(props.value as Record<string, JsonValue>) : [],
+);
+const draft = ref("");
+const editing = ref(false);
+const key = ref("");
+const newType = ref("string");
+const adding = ref(false);
+const types = ["string", "number", "boolean", "object", "array", "null"];
+const defaults: Record<string, () => JsonValue> = {
+  string: () => "",
+  number: () => 0,
+  boolean: () => false,
+  object: () => ({}),
+  array: () => [],
+  null: () => null,
+};
+watch(
+  () => props.value,
+  (value) => {
+    if (!editing.value) draft.value = String(value ?? "");
+  },
+  { immediate: true },
+);
+function change(operation: StateChange["operation"], value?: JsonValue) {
+  emit("change", { operation, path: props.path, value });
+}
+function save() {
+  editing.value = false;
+  const value = kind.value === "number" ? Number(draft.value) : draft.value;
+  if (kind.value === "number" && (!String(draft.value).trim() || !Number.isFinite(value))) {
+    draft.value = String(props.value);
+    return;
+  }
+  if (value !== props.value) change("update", value);
+}
+function add() {
+  const name = kind.value === "array" ? "-" : key.value.trim();
+  if (!name) return;
+  emit("change", {
+    operation: "create",
+    path: statePath(props.path, name),
+    value: defaults[newType.value]!(),
+  });
+  key.value = "";
+  adding.value = false;
+}
+</script>
+
+<template>
+  <div class="state-field" :class="{ 'state-root': path === '' }" :data-state-path="path">
+    <div v-if="path !== ''" class="state-field-heading">
+      <strong>{{ label }}</strong>
+      <select
+        :value="kind"
+        :aria-label="`Type of ${path}`"
+        :disabled="disabled"
+        @change="change('update', defaults[($event.target as HTMLSelectElement).value]!())"
+      >
+        <option v-for="type in types" :key="type" :value="type">{{ type }}</option>
+      </select>
+      <button
+        class="icon-button"
+        :aria-label="`Delete ${path}`"
+        title="Delete field"
+        :disabled="disabled"
+        @click="change('delete')"
+      >
+        <Trash2 :size="18" />
+      </button>
+    </div>
+    <template v-if="container">
+      <StateEditor
+        v-for="[childKey, child] in children"
+        :key="childKey"
+        :value="child"
+        :path="statePath(path, childKey)"
+        :label="childKey"
+        :disabled="disabled"
+        @change="emit('change', $event)"
+      />
+      <form v-if="adding && kind === 'array'" class="state-add" @submit.prevent="add">
+        <input
+          v-if="kind !== 'array'"
+          v-model="key"
+          placeholder="Field name"
+          :aria-label="`New field name in ${path || '/'}`"
+          required
+          :disabled="disabled"
+        />
+        <select
+          v-model="newType"
+          :aria-label="`New field type in ${path || '/'}`"
+          :disabled="disabled"
+        >
+          <option v-for="type in types" :key="type" :value="type">{{ type }}</option>
+        </select>
+        <button class="secondary small" :disabled="disabled || (kind !== 'array' && !key.trim())">
+          Add
+        </button>
+        <button type="button" class="text-button" @click="adding = false">Cancel</button>
+      </form>
+      <button
+        v-else-if="kind === 'array'"
+        class="text-button state-add-button"
+        :disabled="disabled"
+        :aria-label="`Add ${kind === 'array' ? 'item' : 'field'} to ${path || '/'}`"
+        @click="adding = true"
+      >
+        <Plus :size="18" />{{ kind === "array" ? "Add item" : "Add field" }}
+      </button>
+    </template>
+    <div v-else-if="kind === 'number'" class="state-number">
+      <button
+        class="secondary"
+        :aria-label="`Decrement ${path}`"
+        :disabled="disabled"
+        @click="change('increment', -1)"
+      >
+        <Minus :size="18" />
+      </button>
+      <input
+        v-model="draft"
+        type="number"
+        step="any"
+        :aria-label="`Value of ${path}`"
+        :disabled="disabled"
+        @focus="editing = true"
+        @blur="save"
+        @keydown.enter="($event.target as HTMLInputElement).blur()"
+      />
+      <button
+        class="secondary"
+        :aria-label="`Increment ${path}`"
+        :disabled="disabled"
+        @click="change('increment', 1)"
+      >
+        <Plus :size="18" />
+      </button>
+    </div>
+    <div v-else-if="kind === 'boolean'" class="state-boolean">
+      <button
+        class="switch"
+        role="switch"
+        :aria-label="`Value of ${path}`"
+        :aria-checked="value === true"
+        :class="{ on: value === true }"
+        :disabled="disabled"
+        @click="change('update', !value)"
+      >
+        <span /></button
+      ><span>{{ value }}</span>
+    </div>
+    <textarea
+      v-else-if="kind === 'string'"
+      v-model="draft"
+      rows="2"
+      :aria-label="`Value of ${path}`"
+      :disabled="disabled"
+      @focus="editing = true"
+      @blur="save"
+    />
+    <span v-else class="muted">null</span>
+  </div>
+</template>