my-durable 0.0.0-stage → 0.0.2

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

@@ -0,0 +1,425 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import {
+  Activity,
+  Braces,
+  ChevronDown,
+  FolderOpen,
+  Pencil,
+  Server,
+  ShieldCheck,
+  Wrench,
+  PanelLeftClose,
+  PanelLeftOpen,
+  Puzzle,
+} from "lucide-vue-next";
+import { THINKING_LEVELS, type ThinkingLevel } from "@sdk/api";
+import type { StateChange } from "@sdk/app-state";
+import StateEditor from "./StateEditor.vue";
+import TunnelStatusBar from "./TunnelStatusBar.vue";
+import TokenManager from "./TokenManager.vue";
+import TasksPanel from "./TasksPanel.vue";
+import ExtensionsPanel from "./ExtensionsPanel.vue";
+import ContextBar from "./ContextBar.vue";
+import { message } from "../client/hub";
+import { toolSignature } from "../client/signature";
+import {
+  agentHandle,
+  agentState,
+  attempt,
+  busy,
+  currentModel,
+  detail,
+  device,
+  deviceFeed,
+  hideInspector,
+  icon,
+  inspectorExpanded,
+  json,
+  notify,
+  number,
+  refreshDetail,
+  session,
+  sessionHandle,
+  sessionSummary,
+  showInspector,
+  tasks,
+  ui,
+  usage,
+  panelKeys,
+} from "../client/store";
+
+// Each tool's parameters as a highlighted TypeScript declaration, rebuilt only when the tools change.
+const signatures = computed(
+  () => new Map(detail.value?.tools.map((t) => [t.name, toolSignature(t.name, t.parameters)])),
+);
+
+const tabs = [
+  { id: "session", label: "Session", icon: FolderOpen },
+  { id: "state", label: "State", icon: Braces },
+  { id: "tasks", label: "Tasks", icon: Activity },
+  { id: "tools", label: "Tools", icon: Wrench },
+  { id: "extensions", label: "Extend", icon: Puzzle },
+];
+const usageRows = computed(() => [
+  { label: "Input", tokens: usage.value.input, cost: usage.value.inputCost },
+  { label: "Output", tokens: usage.value.output, cost: usage.value.outputCost },
+  { label: "Cache read", tokens: usage.value.cacheRead, cost: usage.value.cacheReadCost },
+  { label: "Cache write", tokens: usage.value.cacheWrite, cost: usage.value.cacheWriteCost },
+]);
+const background = computed(() => tasks.value.filter((t) => t.background).length);
+
+function configure(
+  patch: Parameters<NonNullable<typeof agentHandle.value>["configure"]>[0],
+  done?: string,
+) {
+  void attempt(async () => {
+    await agentHandle.value!.configure(patch);
+    await refreshDetail();
+    if (done) notify(done);
+  });
+}
+
+function renameSession() {
+  const handle = sessionHandle.value;
+  if (!handle) return;
+  ui.dialog = {
+    kind: "prompt",
+    title: "Rename session",
+    label: "Session name",
+    value: sessionSummary.value?.name ?? "",
+    submit: "Save name",
+    run: (name) => handle.rename(name),
+  };
+}
+
+// ------------------------------------------------------------ App State (device-wide document)
+
+const shared = deviceFeed.sharedState;
+const stateDraft = ref("");
+const stateBaseline = ref("");
+const stateDraftRevision = ref(0);
+const stateSaving = ref(false);
+const stateError = ref("");
+const stateDirty = computed(() => stateDraft.value !== stateBaseline.value);
+const stateConflict = computed(
+  () => stateDirty.value && shared.value?.revision !== stateDraftRevision.value,
+);
+function resetStateDraft() {
+  stateDraft.value = json(shared.value?.value ?? {});
+  stateBaseline.value = stateDraft.value;
+  stateDraftRevision.value = shared.value?.revision ?? 0;
+  stateError.value = "";
+}
+watch(shared, () => !stateDirty.value && resetStateDraft(), { immediate: true });
+
+async function editState(change: StateChange) {
+  if (stateSaving.value || !agentHandle.value) return;
+  stateSaving.value = true;
+  stateError.value = "";
+  try {
+    await agentHandle.value.demo("state", change);
+  } catch (e) {
+    stateError.value = message(e);
+  } finally {
+    stateSaving.value = false;
+  }
+}
+async function saveStateJson() {
+  if (stateSaving.value || !agentHandle.value) return;
+  stateError.value = "";
+  stateSaving.value = true;
+  try {
+    const value = JSON.parse(stateDraft.value);
+    if (!value || Array.isArray(value) || typeof value !== "object")
+      throw Error("App State must be a JSON object.");
+    const saved = await agentHandle.value.demo<{ value: unknown; revision: number }>("state", {
+      operation: "update",
+      path: "",
+      value,
+      expectedRevision: stateDraftRevision.value,
+    });
+    stateDraft.value = json(saved.value);
+    stateBaseline.value = stateDraft.value;
+    stateDraftRevision.value = saved.revision;
+    notify("Shared App State saved.");
+  } catch (e) {
+    stateError.value = message(e);
+  } finally {
+    stateSaving.value = false;
+  }
+}
+
+const readOnly = computed(() => detail.value?.config.readOnly === true);
+const offeredTools = computed(() => detail.value?.tools.filter((t) => t.offered).length ?? 0);
+</script>
+
+<template>
+  <aside class="inspector" :class="{ collapsed: !inspectorExpanded, overlay: ui.inspectorOverlay }">
+    <div v-if="!inspectorExpanded" class="panel-rail" aria-label="Inspector (collapsed)">
+      <button
+        class="icon-button panel-toggle"
+        aria-label="Expand inspector"
+        :title="`Expand inspector (${panelKeys.inspector})`"
+        @click="showInspector()"
+      >
+        <PanelLeftOpen :size="18" />
+      </button>
+      <button
+        v-for="t in tabs"
+        :key="t.id"
+        class="rail-tab"
+        :class="{ active: ui.tab === t.id }"
+        :aria-label="`Open ${t.label}`"
+        :title="t.label"
+        @click="showInspector(t.id)"
+      >
+        <component :is="t.icon" :size="20" /><span
+          v-if="t.id === 'tasks' && tasks.length"
+          class="count"
+          >{{ tasks.length }}</span
+        >
+      </button>
+    </div>
+    <template v-else>
+      <div class="inspector-tabs" role="tablist" aria-label="Session details">
+        <button
+          v-for="t in tabs"
+          :id="`inspector-tab-${t.id}`"
+          :key="t.id"
+          role="tab"
+          aria-controls="inspector-panel"
+          :aria-selected="ui.tab === t.id"
+          :class="{ active: ui.tab === t.id }"
+          @click="ui.tab = t.id"
+        >
+          <component :is="t.icon" :size="18" />{{ t.label
+          }}<span v-if="t.id === 'tasks' && tasks.length" class="count">{{ tasks.length }}</span>
+        </button>
+        <button
+          class="icon-button panel-toggle"
+          aria-label="Collapse inspector"
+          :title="`Collapse inspector (${panelKeys.inspector})`"
+          @click="hideInspector()"
+        >
+          <PanelLeftClose :size="18" />
+        </button>
+      </div>
+      <div
+        id="inspector-panel"
+        class="inspector-body"
+        :class="{ 'session-panel': ui.tab === 'session' }"
+        role="tabpanel"
+        :aria-labelledby="`inspector-tab-${ui.tab}`"
+      >
+        <template v-if="ui.tab === 'session'">
+          <section class="session-heading">
+            <h1>
+              <span>{{ sessionSummary?.name ?? "Loading session" }}</span
+              ><button
+                class="icon-button"
+                title="Rename session"
+                aria-label="Rename session"
+                @click="renameSession"
+              >
+                <Pencil :size="18" />
+              </button>
+            </h1>
+            <button
+              class="path cwd-button"
+              :title="sessionSummary?.cwd"
+              aria-label="Show full working directory"
+              @click="ui.dialog = { kind: 'path', path: sessionSummary?.cwd ?? '' }"
+            >
+              <FolderOpen :size="18" /><span class="cwd-trail" dir="rtl"
+                ><bdi dir="ltr">{{ sessionSummary?.cwd }}</bdi></span
+              >
+            </button>
+            <div class="session-status">
+              <span class="status-pill" :class="{ working: busy }"
+                ><i />{{ busy ? "Working" : "Idle" }}</span
+              ><span v-if="background" class="background-pill">{{ background }} background</span
+              ><span class="saved"><Server :size="18" />{{ device?.id }}</span>
+              <TunnelStatusBar v-if="device" :device="device" />
+            </div>
+          </section>
+          <TokenManager v-if="device" :device="device" />
+          <section class="model-section">
+            <div class="section-label">
+              <span>AGENT</span>
+            </div>
+            <button class="model-button" @click="ui.dialog = { kind: 'models' }">
+              <img :src="icon(agentState.agent.model?.modelId)" alt="" />
+              <div>
+                <strong>{{
+                  currentModel?.name ?? agentState.agent.model?.modelId ?? "Loading…"
+                }}</strong
+                ><small
+                  >{{ currentModel?.tier ?? "" }} /
+                  {{ agentState.agent.model?.provider ?? "" }}</small
+                >
+              </div>
+              <ChevronDown :size="18" />
+            </button>
+            <div class="thinking-row">
+              <span>Thinking</span
+              ><select
+                aria-label="Thinking level"
+                :value="agentState.agent.thinkingLevel ?? 'low'"
+                @change="
+                  configure(
+                    { thinkingLevel: ($event.target as HTMLSelectElement).value as ThinkingLevel },
+                    `Thinking ${($event.target as HTMLSelectElement).value}. Used on the next turn.`,
+                  )
+                "
+              >
+                <option v-for="level in THINKING_LEVELS" :key="level">{{ level }}</option>
+              </select>
+            </div>
+            <ContextBar />
+            <section class="stats-section" aria-labelledby="stats-title">
+              <div class="section-label"><span id="stats-title">STATS</span></div>
+              <div class="metrics">
+                <div :title="`${usage.tokens.toLocaleString('en-US')} total tokens`">
+                  <span>{{ number(usage.tokens) }}</span
+                  ><small>total tokens</small>
+                </div>
+                <div>
+                  <span>${{ usage.cost.toFixed(4) }}</span
+                  ><small>agent cost</small>
+                </div>
+                <div>
+                  <span>{{ detail?.tools.length ?? 0 }}</span
+                  ><small>tools</small>
+                </div>
+              </div>
+              <table class="usage-breakdown" aria-label="Agent token and cost breakdown">
+                <thead>
+                  <tr>
+                    <th scope="col">Type</th>
+                    <th scope="col">Tokens</th>
+                    <th scope="col">Cost (USD)</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="row in usageRows" :key="row.label">
+                    <th scope="row">{{ row.label }}</th>
+                    <td>{{ row.tokens.toLocaleString("en-US") }}</td>
+                    <td>${{ row.cost.toFixed(4) }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </section>
+          </section>
+        </template>
+        <template v-if="ui.tab === 'state'">
+          <div class="panel-heading">
+            <h2>App State</h2>
+            <Braces :size="18" />
+          </div>
+          <p class="hint app-state-description">
+            One shared JSON object for every agent, session and fork on {{ device?.id }}. You and
+            your agents can read, create, update or delete values and fields. Changes appear live
+            and persist across closed browsers, interrupted agents and backend restarts.
+          </p>
+          <textarea
+            v-model="stateDraft"
+            class="app-state-json"
+            aria-label="App State JSON"
+            spellcheck="false"
+            :disabled="stateSaving || !shared"
+            rows="12"
+          />
+          <div class="state-json-actions">
+            <span v-if="stateConflict" class="hint"
+              >State changed elsewhere. Load the latest JSON before saving.</span
+            >
+            <button
+              v-if="stateDirty"
+              class="secondary"
+              :disabled="stateSaving"
+              @click="resetStateDraft"
+            >
+              {{ stateConflict ? "Load latest" : "Reset" }}
+            </button>
+            <button
+              class="primary small"
+              :disabled="!stateDirty || stateSaving || stateConflict"
+              @click="saveStateJson"
+            >
+              {{ stateSaving ? "Saving…" : "Save JSON" }}
+            </button>
+          </div>
+          <p v-if="stateError" class="message-error" role="alert">{{ stateError }}</p>
+          <StateEditor
+            :value="shared?.value ?? {}"
+            :disabled="stateSaving || stateDirty || !shared"
+            @change="editState"
+          />
+        </template>
+        <TasksPanel v-if="ui.tab === 'tasks'" />
+        <ExtensionsPanel v-if="ui.tab === 'extensions'" />
+        <template v-if="ui.tab === 'tools'"
+          ><div class="panel-heading">
+            <h2>Tools</h2>
+            <span class="tag">{{ offeredTools }} / {{ detail?.tools.length ?? 0 }}</span>
+          </div>
+          <p class="hint">
+            Every tool this agent's extensions provide. Open one to see its definition.
+          </p>
+          <div class="hook-card">
+            <div>
+              <ShieldCheck :size="18" /><strong>Read only</strong
+              ><button
+                class="switch"
+                role="switch"
+                :aria-checked="readOnly"
+                aria-label="Read only"
+                :class="{ on: readOnly }"
+                @click="
+                  configure(
+                    { readOnly: !readOnly },
+                    readOnly
+                      ? 'Read only off. Every tool is back.'
+                      : 'Read only on. Tools that write are disabled.',
+                  )
+                "
+              >
+                <span />
+              </button>
+            </div>
+            <p>
+              Offers this agent only tools that read. Tools that create, update or delete leave its
+              next request, and the choice is stored with the agent.
+            </p>
+          </div>
+          <details
+            v-for="tool in detail?.tools"
+            :key="tool.name"
+            class="tool-row"
+            :class="{ disabled: !tool.offered }"
+          >
+            <summary>
+              <Wrench :size="18" /><strong>{{ tool.name }}</strong
+              ><span v-if="!tool.offered" class="tag tool-disabled">disabled</span
+              ><span class="tag">{{
+                tool.replay === "safe" ? "replay safe" : "interrupt on crash"
+              }}</span>
+            </summary>
+            <p>{{ tool.description }}</p>
+            <pre
+              v-if="tool.parameters"
+              class="tool-signature"
+              :aria-label="`${tool.name} TypeScript definition`"
+            ><code><span v-for="(t, i) in signatures.get(tool.name)" :key="i" :class="`tk-${t.kind}`">{{ t.text }}</span></code></pre>
+            <small>{{
+              tool.replay === "safe"
+                ? "An interrupted execution may run again after recovery."
+                : "A crash records an interrupted result instead of rerunning this effect."
+            }}</small>
+          </details></template
+        >
+      </div>
+    </template>
+  </aside>
+</template>

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

@@ -0,0 +1,221 @@
+<script setup lang="ts">
+// One durable job run, live: its named phases as a stepper, every step each phase took (commands, a subagent's
+// tool calls, App State writes, checkpoints), the approval when it waits, and how it is owned.
+import { computed, h, type FunctionalComponent } from "vue";
+import {
+  Bot,
+  Braces,
+  Check,
+  Flag,
+  Hand,
+  ListChecks,
+  LoaderCircle,
+  Octagon,
+  Repeat,
+  ShieldCheck,
+  Terminal,
+  Workflow,
+  Wrench,
+  X,
+} from "lucide-vue-next";
+import { jobRunDone, type JobPhaseRun, type JobRun, type JobStep } from "@sdk/jobs";
+import { decide, jobDef, now, openAgent, pending, seconds, stopRun } from "../client/jobs";
+
+const props = defineProps<{ run: JobRun }>();
+const def = computed(() => jobDef(props.run.job));
+const done = computed(() => jobRunDone(props.run));
+const elapsed = computed(() => seconds((props.run.endedAt ?? now.value) - props.run.startedAt));
+const statusText: Record<JobRun["status"], string> = {
+  running: "Running",
+  waiting: "Waiting for you",
+  completed: "Completed",
+  failed: "Failed",
+  aborted: "Stopped",
+  declined: "Declined",
+};
+const stepIcon = {
+  command: Terminal,
+  tool: Wrench,
+  agent: Bot,
+  state: Braces,
+  approval: ShieldCheck,
+  checkpoint: Flag,
+  note: ListChecks,
+};
+const stepTitle = (s: JobStep) =>
+  s.kind === "tool" ? `${s.label}: a subagent tool call, its own durable task` : s.label;
+
+/** One step: what kind, what ran, how it ended, how long it took. */
+const JobStepLine: FunctionalComponent<{ step: JobStep }> = (p) => {
+  const s = p.step;
+  const label = ["command", "tool", "state"].includes(s.kind)
+    ? h("code", { title: stepTitle(s) }, s.label)
+    : h("span", { class: "job-step-text" }, s.label);
+  const state =
+    s.status === "running"
+      ? h(LoaderCircle, { size: 15, class: "spin" })
+      : s.status === "done"
+        ? h(Check, { size: 15 })
+        : s.status === "waiting"
+          ? h(Hand, { size: 15 })
+          : h(X, { size: 15 });
+  return [
+    h(stepIcon[s.kind], { size: 16, class: "job-step-kind" }),
+    label,
+    s.kind === "tool" && s.detail
+      ? h("span", { class: "job-step-args", title: s.detail }, s.detail)
+      : null,
+    h("span", { class: "job-step-state" }, [
+      state,
+      s.ms !== undefined && s.kind !== "note" ? h("span", seconds(s.ms)) : null,
+    ]),
+  ];
+};
+JobStepLine.props = ["step"];
+const phaseSpec = (id: string) => def.value?.phases.find((p) => p.id === id);
+const phaseTime = (p: JobPhaseRun) =>
+  p.startedAt
+    ? seconds(
+        (p.endedAt ??
+          (p.status === "running" || p.status === "waiting" ? now.value : p.startedAt)) -
+          p.startedAt,
+      )
+    : "";
+const open = (p: JobPhaseRun) => p.status !== "pending" && p.status !== "skipped";
+const inputs = computed(() => Object.entries(props.run.input));
+const approvalPhase = computed(() => props.run.phases.find((p) => p.status === "waiting"));
+</script>
+
+<template>
+  <article
+    class="job-run"
+    :class="`is-${run.status}`"
+    :data-job-run="run.id"
+    :aria-label="`${run.title} run ${run.run}: ${statusText[run.status]}`"
+  >
+    <header class="job-run-head">
+      <span class="job-run-icon"><Workflow :size="22" /></span>
+      <div class="job-run-titles">
+        <div class="job-run-eyebrow">
+          <span>DURABLE JOB</span>
+          <span class="job-run-repeat"
+            ><Repeat :size="15" />Repeatable workflow, run #{{ run.run }}</span
+          >
+        </div>
+        <h3>{{ run.title }}</h3>
+      </div>
+      <span class="job-run-status" :class="run.status"><i />{{ statusText[run.status] }}</span>
+    </header>
+    <p v-if="def" class="job-run-about">{{ def.summary }}</p>
+    <div class="job-run-meta">
+      <span>task #{{ run.id }}</span>
+      <span>{{ run.startedBy === "agent" ? "started by the agent" : "started by you" }}</span>
+      <span>{{ elapsed }}</span>
+      <span v-for="[k, v] in inputs" :key="k" class="job-run-input">{{ k }}={{ v }}</span>
+      <span v-if="run.resumed" class="job-run-resumed"
+        >resumed {{ run.resumed }}× after restart</span
+      >
+    </div>
+
+    <ol class="job-stepper" aria-label="Phases">
+      <li
+        v-for="(phase, i) in run.phases"
+        :key="phase.id"
+        :class="`ph-${phase.status}`"
+        :aria-current="run.phase === phase.id && !done ? 'step' : undefined"
+      >
+        <span class="job-chip"
+          ><span class="job-step-dot">
+            <Check v-if="phase.status === 'done'" :size="15" />
+            <LoaderCircle v-else-if="phase.status === 'running'" :size="15" class="spin" />
+            <Hand v-else-if="phase.status === 'waiting'" :size="15" />
+            <X v-else-if="['failed', 'aborted'].includes(phase.status)" :size="15" />
+            <template v-else>{{ i + 1 }}</template>
+          </span>
+          <span class="job-step-label">{{ phase.label }}</span>
+          <span v-if="phase.progress" class="job-step-progress"
+            >{{ phase.progress.done }}/{{ phase.progress.total }}</span
+          ></span
+        >
+      </li>
+    </ol>
+
+    <div class="job-phases">
+      <details
+        v-for="(phase, i) in run.phases"
+        :key="phase.id"
+        class="job-phase"
+        :class="`ph-${phase.status}`"
+        :open="open(phase)"
+      >
+        <summary>
+          <span class="job-phase-n">{{ i + 1 }}</span>
+          <strong>{{ phase.label }}</strong>
+          <span class="job-phase-summary">{{
+            phase.summary ??
+            (phase.status === "pending"
+              ? phaseSpec(phase.id)?.summary
+              : phase.status === "skipped"
+                ? "Skipped"
+                : "")
+          }}</span>
+          <span class="job-phase-time">{{ phaseTime(phase) }}</span>
+        </summary>
+        <p v-if="phase.status !== 'done'" class="job-phase-about">
+          {{ phaseSpec(phase.id)?.summary }}
+        </p>
+        <ul v-if="phase.steps.length" class="job-steps">
+          <li
+            v-for="step in phase.steps"
+            :key="step.id"
+            :class="[`k-${step.kind}`, `st-${step.status}`]"
+          >
+            <details v-if="step.detail && step.kind !== 'tool'" :open="step.status === 'error'">
+              <summary><JobStepLine :step="step" /></summary>
+              <pre>{{ step.detail }}</pre>
+            </details>
+            <div v-else class="job-step-line"><JobStepLine :step="step" /></div>
+            <button
+              v-if="step.kind === 'agent' && step.conversationId"
+              class="text-button job-step-link"
+              @click="openAgent(step.conversationId)"
+            >
+              Open subagent #{{ step.conversationId }}
+            </button>
+          </li>
+        </ul>
+        <p v-else-if="phase.status === 'pending'" class="job-phase-empty">Not started yet.</p>
+      </details>
+    </div>
+
+    <div v-if="run.approval === 'pending'" class="job-approval" role="group" aria-label="Approval">
+      <div><ShieldCheck :size="20" /><strong>Approve to continue</strong></div>
+      <p>
+        {{ approvalPhase ? phaseSpec(approvalPhase.id)?.summary : "This run waits for you" }}. It is
+        paused on a saved checkpoint: close the browser or restart the device and the decision will
+        still be waiting.
+      </p>
+      <div class="job-approval-buttons">
+        <button class="primary small" :disabled="!!pending" @click="decide(run, true)">
+          <Check :size="18" />Approve &amp; continue
+        </button>
+        <button class="secondary" :disabled="!!pending" @click="decide(run, false)">Decline</button>
+      </div>
+    </div>
+    <p v-if="run.error && run.status !== 'aborted'" class="message-error">{{ run.error }}</p>
+
+    <footer class="job-run-foot">
+      <span
+        >{{
+          run.background
+            ? "Runs in the background: the conversation owns it, so Interrupt leaves it running."
+            : "Owned by this tool call: Interrupt stops it."
+        }}
+        Each phase saves a checkpoint, so a restart resumes the current phase.</span
+      >
+      <button v-if="!done" class="secondary danger" :disabled="!!pending" @click="stopRun(run)">
+        <Octagon :size="16" />Stop
+      </button>
+    </footer>
+  </article>
+</template>

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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// MobileNav: three-view phone nav (chat | details | network) mapped onto the existing
+// store state instead of a new mview field — net = the tree drawer, details = the inspector
+// overlay, chat = neither. The store keeps the overlays mutually exclusive.
+import { MessageSquare, PanelRight, Waypoints } from "lucide-vue-next";
+import {
+  inspectorExpanded,
+  tasks,
+  ui,
+  hideInspector,
+  showInspector,
+  toggleTree,
+} from "../client/store";
+
+function showChat() {
+  ui.drawer = false;
+  ui.inspectorOverlay = false;
+}
+</script>
+
+<template>
+  <nav class="mnav" aria-label="Panels">
+    <button type="button" :class="{ 'is-on': !ui.drawer && !inspectorExpanded }" @click="showChat">
+      <MessageSquare :size="18" />Chat
+    </button>
+    <button
+      type="button"
+      :class="{ 'is-on': inspectorExpanded }"
+      @click="inspectorExpanded ? hideInspector() : showInspector()"
+    >
+      <PanelRight :size="18" />Details<span v-if="tasks.length" class="badge">{{
+        tasks.length
+      }}</span>
+    </button>
+    <button type="button" :class="{ 'is-on': ui.drawer }" @click="toggleTree()">
+      <Waypoints :size="18" />Network
+    </button>
+  </nav>
+</template>