clankerbend 0.1.0

package/apps/vim-nav/public/app.js

@@ -0,0 +1,276 @@
+const APP_ID = "onewill.vim-nav";
+
+const els = {
+  subtitle: document.getElementById("subtitle"),
+  openPanel: document.getElementById("open-panel"),
+  commandInput: document.getElementById("command-input"),
+  runCommand: document.getElementById("run-command"),
+  commandStatus: document.getElementById("command-status"),
+  currentIndex: document.getElementById("current-index"),
+  currentTitle: document.getElementById("current-title"),
+  currentPreview: document.getElementById("current-preview"),
+  anchorCount: document.getElementById("anchor-count"),
+  anchorList: document.getElementById("anchor-list")
+};
+
+let currentState = null;
+let search = { query: "", index: -1 };
+let lastRenderSignature = "";
+const token = readToken();
+
+els.openPanel.addEventListener("click", async () => {
+  try {
+    await postJson("/onewhack/panel/open", {});
+  } catch (err) {
+    els.commandStatus.textContent = err.message;
+  }
+});
+els.runCommand.addEventListener("click", () => runCommand(els.commandInput.value));
+els.commandInput.addEventListener("keydown", (event) => {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    runCommand(els.commandInput.value);
+  }
+});
+bootstrap();
+
+async function bootstrap() {
+  try {
+    const state = await getJson("/onewhack/state");
+    render(state, true);
+    connectEvents();
+  } catch (err) {
+    els.subtitle.textContent = "disconnected";
+    els.commandStatus.textContent = err.message;
+  }
+}
+
+function readToken() {
+  const params = new URLSearchParams(location.hash.startsWith("#") ? location.hash.slice(1) : location.hash);
+  const value = params.get("onewhack_token") || "";
+  if (value) history.replaceState(null, "", location.pathname + location.search);
+  return value;
+}
+
+function headers(extra = {}) {
+  return {
+    ...extra,
+    ...(token ? { authorization: `Bearer ${token}` } : {})
+  };
+}
+
+async function connectEvents() {
+  if (!token) {
+    const events = new EventSource("/onewhack/events");
+    events.addEventListener("state", (event) => render(JSON.parse(event.data)));
+    events.addEventListener("app-state", () => getJson("/onewhack/state").then((state) => render(state)));
+    events.addEventListener("action", () => getJson("/onewhack/state").then((state) => render(state)));
+    events.addEventListener("error", () => {
+      els.subtitle.textContent = "event stream interrupted";
+    });
+    return;
+  }
+
+  const res = await fetch("/onewhack/events", { headers: headers() });
+  if (!res.ok || !res.body) throw new Error(`events failed: ${res.status}`);
+  const reader = res.body.pipeThrough(new TextDecoderStream()).getReader();
+  let buffer = "";
+  while (true) {
+    const { value, done } = await reader.read();
+    if (done) break;
+    buffer += value;
+    let boundary;
+    while ((boundary = buffer.indexOf("\n\n")) >= 0) {
+      const chunk = buffer.slice(0, boundary);
+      buffer = buffer.slice(boundary + 2);
+      handleSseChunk(chunk);
+    }
+  }
+}
+
+function handleSseChunk(chunk) {
+  const lines = chunk.split(/\n/);
+  const event = lines.find((line) => line.startsWith("event: "))?.slice(7) || "message";
+  const data = lines.filter((line) => line.startsWith("data: ")).map((line) => line.slice(6)).join("\n");
+  if (!data || event === "heartbeat") return;
+  if (event === "state") render(JSON.parse(data));
+  if (event === "app-state" || event === "action") getJson("/onewhack/state").then((state) => render(state));
+}
+
+async function runCommand(raw) {
+  const command = String(raw || "").trim();
+  if (!command) return;
+  const anchors = currentAnchors();
+  const current = currentAnchor();
+  let result = null;
+
+  try {
+    if (/^:\d+$/.test(command)) {
+      result = await jumpToIndex(Number(command.slice(1)) - 1);
+    } else if (/^\d+$/.test(command)) {
+      result = await jumpToIndex(Number(command) - 1);
+    } else if (command === "j") {
+      result = await runAction("vim.jumpRelative", { delta: 1 });
+    } else if (command === "k") {
+      result = await runAction("vim.jumpRelative", { delta: -1 });
+    } else if (command === "gg") {
+      result = await runAction("vim.jumpIndex", { index: 0 });
+    } else if (command === "G") {
+      result = await runAction("vim.jumpIndex", { index: -1 });
+    } else if (command === "{") {
+      result = await runAction("vim.jumpRole", { role: "user", direction: -1 });
+    } else if (command === "}") {
+      result = await runAction("vim.jumpRole", { role: "user", direction: 1 });
+    } else if (command.startsWith("/")) {
+      search.query = command.slice(1).trim();
+      search.index = -1;
+      result = await runAction("vim.search", { query: search.query, direction: 1 });
+    } else if (command === "n") {
+      result = await searchAgain(1);
+    } else if (command === "N") {
+      result = await searchAgain(-1);
+    } else if (command === ":latest assistant") {
+      result = await runAction("vim.latestRole", { role: "assistant" });
+    } else if (command === ":latest user") {
+      result = await runAction("vim.latestRole", { role: "user" });
+    } else {
+      result = { ok: false, error: `unknown command: ${command}` };
+    }
+  } catch (err) {
+    result = { ok: false, error: err.message };
+  }
+
+  els.commandStatus.textContent = result?.ok ? result.message || "ok" : result?.error || "failed";
+  if (result?.ok) els.commandInput.value = "";
+}
+
+function currentAnchors() {
+  return currentState?.transcript?.anchors || [];
+}
+
+function currentApp() {
+  return (currentState?.apps || []).find((app) => app.appId === APP_ID) || null;
+}
+
+function currentAnchor() {
+  const anchors = currentAnchors();
+  const selected = currentState?.selection?.anchorId;
+  return anchors.find((anchor) => anchor.anchorId === selected) ||
+    anchors.find((anchor) => anchor.visible) ||
+    anchors[0] ||
+    null;
+}
+
+function currentIndex() {
+  const anchors = currentAnchors();
+  const current = currentAnchor();
+  return Math.max(0, anchors.findIndex((anchor) => anchor.anchorId === current?.anchorId));
+}
+
+async function jumpToIndex(index) {
+  const anchors = currentAnchors();
+  if (!anchors.length) return { ok: false, error: "no anchors" };
+  const clamped = Math.max(0, Math.min(anchors.length - 1, index));
+  return jumpToAnchor(anchors[clamped].anchorId);
+}
+
+async function jumpToAnchor(anchorId) {
+  return runAction("vim.jump", { anchorId, behavior: "smooth", block: "center" }, anchorId);
+}
+
+async function searchAgain(direction) {
+  if (!search.query) return { ok: false, error: "empty search" };
+  return runAction("vim.search", { query: search.query, direction });
+}
+
+async function runAction(type, payload = {}, anchorId) {
+  const action = {
+    actionId: `${type}:${Date.now()}:${Math.random().toString(36).slice(2)}`,
+    appId: APP_ID,
+    type,
+    anchorId: anchorId || payload.anchorId,
+    entryId: (anchorId || payload.anchorId) ? `nav:${anchorId || payload.anchorId}` : undefined,
+    payload,
+    requestedAt: new Date().toISOString()
+  };
+  const result = await postJson(`/onewhack/apps/${encodeURIComponent(APP_ID)}/actions`, { action });
+  if (result.ok) getJson("/onewhack/state").then((state) => render(state));
+  return result.ok ? { ok: true, message: result.status || "ok" } : { ok: false, error: result.error || "action failed" };
+}
+
+function render(state, force = false) {
+  if (!state) return;
+  currentState = state;
+  const app = currentApp();
+  const signature = JSON.stringify({
+    sequence: state.sequence,
+    anchors: (state.transcript?.anchors || []).map((anchor) => `${anchor.anchorId}:${anchor.visible ? 1 : 0}`),
+    selection: state.selection?.anchorId,
+    appServer: state.appServer?.status,
+    appUpdatedAt: app?.updatedAt
+  });
+  if (!force && signature === lastRenderSignature) return;
+  lastRenderSignature = signature;
+
+  const anchors = currentAnchors();
+  const current = currentAnchor();
+  const index = anchors.findIndex((anchor) => anchor.anchorId === current?.anchorId);
+  els.subtitle.textContent = `${state.desktop?.cdpStatus || "unknown"} · ${app?.status || "unknown"} · app-server ${state.appServer?.status || "unknown"}`;
+  els.anchorCount.textContent = String(anchors.length);
+  els.currentIndex.textContent = index >= 0 ? String(index + 1).padStart(2, "0") : "--";
+  els.currentTitle.textContent = current ? `${current.inferredRole || current.kind} · ${current.visible ? "visible" : "offscreen"}` : "No transcript anchor";
+  els.currentPreview.textContent = current?.textPreview || "Waiting for transcript anchors.";
+  renderAnchors(anchors, current);
+}
+
+function renderAnchors(anchors, current) {
+  els.anchorList.replaceChildren(...anchors.slice(0, 300).map((anchor) => {
+    const item = document.createElement("li");
+    item.className = anchor.anchorId === current?.anchorId ? "is-selected" : "";
+    const button = document.createElement("button");
+    button.type = "button";
+    button.addEventListener("click", () => jumpToAnchor(anchor.anchorId));
+    const idx = document.createElement("span");
+    idx.className = "idx";
+    idx.textContent = anchor.indexed === false ? "?" : String(anchor.order).padStart(2, "0");
+    const body = document.createElement("span");
+    body.className = "anchor-body";
+    const title = document.createElement("strong");
+    title.textContent = anchor.inferredRole || anchor.kind;
+    const preview = document.createElement("span");
+    preview.textContent = anchor.textPreview || "No preview";
+    body.append(title, preview);
+    button.append(idx, body);
+    item.append(button);
+    return item;
+  }));
+}
+
+function empty(text) {
+  const span = document.createElement("span");
+  span.className = "empty";
+  span.textContent = text;
+  return span;
+}
+
+async function getJson(url) {
+  const res = await fetch(url, { headers: headers() });
+  return unwrap(res);
+}
+
+async function postJson(url, body) {
+  const res = await fetch(url, {
+    method: "POST",
+    headers: headers({ "content-type": "application/json" }),
+    body: JSON.stringify(body)
+  });
+  return unwrap(res);
+}
+
+async function unwrap(res) {
+  const envelope = await res.json();
+  if (!envelope.ok) {
+    throw new Error(envelope.error?.message || `request failed: ${res.status}`);
+  }
+  return envelope.data;
+}

package/apps/vim-nav/public/index.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Vim Nav</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main class="shell">
+      <header class="topbar">
+        <div>
+          <strong>Vim Nav</strong>
+          <p id="subtitle">Transcript keyboard navigation</p>
+        </div>
+        <button id="open-panel" type="button">Panel</button>
+      </header>
+
+      <section class="command">
+        <label for="command-input">Command</label>
+        <div class="command-row">
+          <input id="command-input" autocomplete="off" spellcheck="false" placeholder=":42, /search, gg, G, j, k">
+          <button id="run-command" type="button">Run</button>
+        </div>
+        <p id="command-status"></p>
+      </section>
+
+      <section class="cheatsheet" aria-label="Vim commands">
+        <span><kbd>j</kbd>/<kbd>k</kbd> next/prev</span>
+        <span><kbd>gg</kbd>/<kbd>G</kbd> first/last</span>
+        <span><kbd>{</kbd>/<kbd>}</kbd> turns</span>
+        <span><kbd>/</kbd> search</span>
+      </section>
+
+      <section class="current">
+        <span id="current-index">--</span>
+        <div>
+          <strong id="current-title">No transcript anchor</strong>
+          <p id="current-preview">Waiting for Codex transcript anchors.</p>
+        </div>
+      </section>
+
+      <section class="anchors">
+        <div class="section-head">
+          <h1>Anchors</h1>
+          <span id="anchor-count">0</span>
+        </div>
+        <ol id="anchor-list"></ol>
+      </section>
+    </main>
+    <script src="./app.js"></script>
+  </body>
+</html>

package/apps/vim-nav/public/styles.css

@@ -0,0 +1,211 @@
+:root {
+  color-scheme: dark;
+  --bg: #080a0c;
+  --panel: #0d1318;
+  --panel-2: #111a21;
+  --text: #eef3f6;
+  --muted: #94a4ae;
+  --border: #2a3742;
+  --accent: #8fc7d4;
+  --ok: #8ccf9d;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--bg);
+  color: var(--text);
+  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+button {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: #131d25;
+  color: var(--text);
+  cursor: pointer;
+}
+
+button:hover {
+  background: #1a2933;
+}
+
+.shell {
+  display: grid;
+  gap: 12px;
+  padding: 12px;
+}
+
+.topbar,
+.section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.topbar {
+  border-bottom: 1px solid #202b33;
+  padding-bottom: 10px;
+}
+
+.topbar strong {
+  display: block;
+  font-size: 15px;
+}
+
+p,
+h1 {
+  margin: 0;
+}
+
+h1 {
+  font-size: 13px;
+}
+
+.topbar p,
+.command p,
+.current p,
+.anchor-body span,
+.empty {
+  color: var(--muted);
+}
+
+#open-panel,
+#run-command {
+  padding: 5px 8px;
+}
+
+.command,
+.current,
+.anchors {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--panel);
+  padding: 10px;
+}
+
+.command label {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--muted);
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
+.command-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 6px;
+}
+
+#command-input {
+  min-width: 0;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: #070b0e;
+  color: var(--text);
+  padding: 7px 8px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+#command-status {
+  min-height: 18px;
+  margin-top: 6px;
+}
+
+.cheatsheet {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.cheatsheet span {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted);
+  padding: 3px 7px;
+}
+
+kbd {
+  border: 1px solid #3a4a55;
+  border-radius: 4px;
+  background: #0a1014;
+  color: #d7e5eb;
+  padding: 1px 4px;
+  font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.current {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 10px;
+  align-items: center;
+}
+
+#current-index,
+.idx {
+  display: inline-grid;
+  place-items: center;
+  width: 30px;
+  height: 24px;
+  border: 1px solid rgba(143, 199, 212, .52);
+  border-radius: 999px;
+  color: #cfe6ec;
+  font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+#anchor-list {
+  display: grid;
+  gap: 4px;
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+#anchor-list li button {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 8px;
+  align-items: start;
+  width: 100%;
+  min-width: 0;
+  border: 1px solid transparent;
+  background: transparent;
+  padding: 6px;
+  text-align: left;
+}
+
+#anchor-list li.is-selected button {
+  border-color: var(--accent);
+  background: #102129;
+}
+
+.anchor-body {
+  display: grid;
+  min-width: 0;
+}
+
+.anchor-body strong,
+.anchor-body span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.anchor-body strong {
+  font-size: 12px;
+}

package/apps/vim-nav/server.mjs

@@ -0,0 +1,10 @@
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { launchOneWhackCodex } from "../../server.mjs";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+await launchOneWhackCodex({
+  mock: process.argv.includes("--mock"),
+  runDir: join(__dirname, "run")
+});