@pat-lewczuk/cezar 0.1.1 → 0.1.3

package/web/app.js

@@ -16,7 +16,9 @@ const state = {
   taskSource: 'workflow', // 'workflow' (a chain) | 'skill' — what taskRef names
   taskRef: null,          // selected chain/skill name (the "≡ fix-and-verify" pill)
   taskModel: '',          // model override ('' = auto; the "⊞ auto" pill)
-  modelsAvailable: false, // claude CLI detected → model menu lists Claude models
+  modelsAvailable: false, // agent CLI detected → model menu lists that runner's models
+  taskRunner: 'claude',   // selected agent backend (the "⚙ claude" pill)
+  runnersAvailable: ['claude'], // runner ids detected on the host (from /api/health)
   srcMenuTab: 'workflow', // Workflows | Skills tab inside the source pill menu
   srcMenuQuery: '',       // search box inside the source pill menu
   pendingImages: [],      // [{mediaType, data, preview}] queued for the next message
@@ -34,16 +36,22 @@ const state = {
   theme: document.documentElement.dataset.theme || 'dark',
   // GitHub tab
   gh: null,               // /api/github payload
+  ghFull: false,          // true once the "everything open" fetch landed
+  ghFullLoading: false,
   ghView: 'issues',       // 'issues' | 'prs'
   ghSel: null,            // selected item url
-  ghWorkflow: null,       // workflow chip
+  ghWorkflow: null,       // workflow chip (null = none — skills/quick-task run)
   ghSkills: new Set(),    // skill names toggled on
+  ghSkillQuery: '',       // filter over the skill chips (long catalogs)
   ghQueued: new Map(),    // item url -> run id (client-side "queued" marker)
   lastGhRun: null,
   // Skills tab
   skillsList: null,       // /api/skills payload (shared with the GitHub tab chips)
   skillSel: null,         // selected skill name, or '__bm' for the bookmarklet panel
   skillQuery: '',
+  // Workflows tab — the builder canvas (spec 012)
+  wb: null,               // {name, description, steps, query, importOpen, importText, importError, copied}
+  wbDrag: null,           // {from:'palette', skill} | {from:'step', index}
 };
 
 const STATUS_ORDER = { waiting: 0, review: 1, running: 2, queued: 3 };
@@ -100,7 +108,7 @@ function queuePosition(run) {
 
 const STATUS_LABEL = {
   waiting: 'needs you',
-  review: 'review',
+  review: 'needs review',
   running: 'running',
   queued: 'queued',
   done: 'done',
@@ -177,22 +185,130 @@ function renderDiff(text) {
   return out.join('');
 }
 
+/* Tiny markdown renderer for the handoff notes — headings, bold, inline code,
+   fenced code, lists, links, hr. Escape-first, line-based, ZERO libs. Not a
+   full parser; handoff files are simple and anything unrecognized falls
+   through as a plain paragraph. */
+function renderMarkdown(src) {
+  const lines = String(src ?? '').replace(/\r\n?/g, '\n').split('\n');
+  const out = [];
+  let list = null; // 'ul' | 'ol'
+  let code = null; // collected fenced-code lines
+  let quote = false; // inside a > blockquote
+  const closeList = () => {
+    if (list) {
+      out.push(`</${list}>`);
+      list = null;
+    }
+  };
+  const closeQuote = () => {
+    if (quote) {
+      out.push('</blockquote>');
+      quote = false;
+    }
+  };
+  const inline = (s) => {
+    let h = esc(s);
+    h = h.replace(/`([^`]+)`/g, '<code>$1</code>');
+    h = h.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    h = h.replace(/\[([^\]]+)\]\((https?:[^)\s]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+    h = h.replace(/(^|\s)(https?:\/\/[^\s<]+)/g, '$1<a href="$2" target="_blank" rel="noopener">$2</a>');
+    return h;
+  };
+  for (const line of lines) {
+    if (code) {
+      if (/^```/.test(line)) {
+        out.push(`<pre><code>${esc(code.join('\n'))}</code></pre>`);
+        code = null;
+      } else {
+        code.push(line);
+      }
+      continue;
+    }
+    if (/^```/.test(line)) {
+      closeList();
+      closeQuote();
+      code = [];
+      continue;
+    }
+    const bq = /^>\s?(.*)$/.exec(line);
+    if (bq) {
+      if (!quote) {
+        closeList();
+        out.push('<blockquote>');
+        quote = true;
+      }
+      if (bq[1].trim()) out.push(`<p>${inline(bq[1])}</p>`);
+      continue;
+    }
+    closeQuote();
+    const heading = /^(#{1,4})\s+(.*)$/.exec(line);
+    if (heading) {
+      closeList();
+      const level = heading[1].length;
+      out.push(`<h${level}>${inline(heading[2])}</h${level}>`);
+      continue;
+    }
+    if (/^\s*(---+|\*\*\*+)\s*$/.test(line)) {
+      closeList();
+      out.push('<hr>');
+      continue;
+    }
+    const ul = /^\s*[-*]\s+(.*)$/.exec(line);
+    const ol = /^\s*\d+[.)]\s+(.*)$/.exec(line);
+    if (ul || ol) {
+      const kind = ul ? 'ul' : 'ol';
+      if (list !== kind) {
+        closeList();
+        out.push(`<${kind}>`);
+        list = kind;
+      }
+      const content = (ul ?? ol)[1];
+      const task = /^\[( |x|X)\]\s+(.*)$/.exec(content);
+      out.push(
+        task
+          ? `<li class="task"><span class="cb">${task[1].trim() ? '☑' : '☐'}</span>${inline(task[2])}</li>`
+          : `<li>${inline(content)}</li>`,
+      );
+      continue;
+    }
+    closeList();
+    if (line.trim()) out.push(`<p>${inline(line)}</p>`);
+  }
+  if (code) out.push(`<pre><code>${esc(code.join('\n'))}</code></pre>`); // unclosed fence
+  closeList();
+  closeQuote();
+  return out.join('\n');
+}
+
 // ---- boot ------------------------------------------------------------------
 
 async function init() {
   bindUi();
   applyTheme(state.theme);
-  const [health, workflowsRes, runs, todos, skills] = await Promise.all([
+  const [health, workflowsRes, runs, todos, skills, uiState] = await Promise.all([
     getJson('/api/health'),
     getJson('/api/workflows'),
     getJson('/api/runs'),
     getJson('/api/todos').catch(() => []),
     getJson('/api/skills').catch(() => []), // the form's skill mode + GitHub chips
+    getJson('/api/ui-state').catch(() => ({})),
   ]);
   state.todos = todos;
   state.skillsList = skills;
   renderInboxBadge();
   renderChrome(health);
+  // Preselect what you actually run: the last-used source (persisted in
+  // .ai/cezar/ui-state.json), else the first skill, else the first workflow.
+  const last = uiState.lastTask;
+  const lastValid =
+    last &&
+    (last.source === 'skill'
+      ? skills.some((s) => s.name === last.ref)
+      : workflowsRes.workflows.some((w) => w.name === last.ref));
+  const pick = lastValid ? last : defaultTaskSource(workflowsRes.workflows);
+  state.taskSource = pick.source;
+  state.taskRef = pick.ref;
   setWorkflowOptions(workflowsRes.workflows);
   for (const run of runs) state.runs.set(run.id, run);
   renderRunList();
@@ -278,27 +394,70 @@ async function handleDeepLink() {
   return false;
 }
 
+/* Skills first (feedback 2026-07-11): the natural default is a skill, not a
+   chain — workflows stay one tab away in the picker. */
+function defaultTaskSource(workflows = state.workflows) {
+  const firstSkill = (state.skillsList ?? [])[0];
+  if (firstSkill) return { source: 'skill', ref: firstSkill.name };
+  return { source: 'workflow', ref: workflows[0]?.name ?? 'quick-task' };
+}
+
 function setWorkflowOptions(workflows) {
   state.workflows = workflows;
-  if (
-    !state.taskRef ||
-    (state.taskSource === 'workflow' && !state.workflows.some((w) => w.name === state.taskRef))
-  ) {
-    state.taskSource = 'workflow';
-    state.taskRef = state.workflows[0]?.name ?? 'quick-task';
+  const refValid =
+    state.taskRef &&
+    (state.taskSource === 'skill'
+      ? (state.skillsList ?? []).some((s) => s.name === state.taskRef)
+      : state.workflows.some((w) => w.name === state.taskRef));
+  if (!refValid) {
+    const pick = defaultTaskSource(workflows);
+    state.taskSource = pick.source;
+    state.taskRef = pick.ref;
   }
   renderTaskPills();
-  if (!state.ghWorkflow || !state.workflows.some((w) => w.name === state.ghWorkflow)) {
-    state.ghWorkflow = state.workflows[0]?.name ?? 'quick-task';
+  // GitHub's workflow chip is optional (null = run skills or quick-task) —
+  // only clear it when it names a workflow that no longer exists.
+  if (state.ghWorkflow && !state.workflows.some((w) => w.name === state.ghWorkflow)) {
+    state.ghWorkflow = null;
   }
 }
 
+/* Remember what was just run so the next session preselects it. Fire-and-
+   forget — a failed write only costs the convenience. */
+function saveLastTaskSource() {
+  if (!state.taskRef) return;
+  void fetch('/api/ui-state', {
+    method: 'PUT',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ lastTask: { source: state.taskSource, ref: state.taskRef } }),
+  }).catch(() => {});
+}
+
 /* ---- the form's pill dropdowns — "≡ fix-and-verify ⌄" and "⊞ auto ⌄" ---- */
 
 const PILL_ICONS = {
   chain: 'M4 6h16M4 12h16M4 18h10', // ≡ list
   skill: 'M4 19.5A2.5 2.5 0 016.5 17H20M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z', // book
   model: 'M9 3v3M15 3v3M9 18v3M15 18v3M3 9h3M3 15h3M18 9h3M18 15h3M6 6h12v12H6z', // chip
+  runner: 'M12 2l9 5v10l-9 5-9-5V7l9-5zM12 2v20M3 7l9 5 9-5', // 3D box (backend/engine)
+};
+
+/* Small inline icons for the run-detail action bar (design: every action has
+   a glyph, not typography like "±" / "▶"). Stroke icons by default; `fill`
+   for solid play/stop. */
+function biIcon(d, fill = false) {
+  return `<svg class="bi${fill ? ' bi-fill' : ''}" viewBox="0 0 24 24"><path d="${d}"/></svg>`;
+}
+const BI = {
+  check: biIcon('M5 12l5 5 9-11'),
+  play: biIcon('M6 4l14 8-14 8V4z', true),
+  stop: biIcon('M7 7h10v10H7z', true),
+  terminal: biIcon('M4 17l6-5-6-5M12 19h8'),
+  diff: biIcon('M9 5v6M6 8h6M6 16h6M16 5v14'),
+  notes: biIcon('M6 3h9l4 4v14H6V3zM15 3v4h4M9 12h7M9 16h5'),
+  folder: biIcon('M3 8a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8zM9 14h6'),
+  archive: biIcon('M4 5h16v4H4zM6 9v10h12V9M10 13h4'),
+  trash: biIcon('M4 7h16M10 7V5h4v2M6 7l1 13h10l1-13M10 11v6M14 11v6'),
 };
 
 function pillHtml(iconPath, label, menuHtml) {
@@ -311,10 +470,12 @@ function pillHtml(iconPath, label, menuHtml) {
     <div class="pill-menu" hidden>${menuHtml}</div>`;
 }
 
-function menuItemHtml(data, title, desc, selected) {
+function menuItemHtml(data, title, desc, selected, iconPath) {
   return `
     <div class="menu-item ${selected ? 'on' : ''}" ${data}>
-      <div class="mi-title"><span class="chk">${selected ? '✓' : ''}</span>${esc(title)}</div>
+      <div class="mi-title"><span class="chk">${selected ? '✓' : ''}</span>${
+        iconPath ? `<svg class="mi-ic" viewBox="0 0 24 24"><path d="${iconPath}"/></svg>` : ''
+      }${esc(title)}</div>
       ${desc ? `<div class="mi-desc">${esc(desc)}</div>` : ''}
     </div>`;
 }
@@ -345,6 +506,7 @@ function srcMenuItemsHtml() {
         i.name,
         i.desc,
         state.taskSource === i.source && state.taskRef === i.name,
+        i.source === 'skill' ? SKILL_ICON : PILL_ICONS.chain,
       ),
     )
     .join('');
@@ -367,10 +529,44 @@ function renderTaskPills() {
     srcMenu,
   );
 
-  const models = state.modelsAvailable ? CLAUDE_MODELS : CLAUDE_MODELS.slice(0, 1);
+  // Runner pill — only shown when more than one backend is installed, so a
+  // single-runner (claude-only) host stays as simple as before.
+  const runnerPill = $('#runner-pill');
+  if (runnerPill) {
+    const runners = RUNNERS.filter((r) => state.runnersAvailable.includes(r.id));
+    if (runners.length > 1) {
+      runnerPill.hidden = false;
+      const selected = runners.find((r) => r.id === state.taskRunner) ?? runners[0];
+      const runnerMenu = runners
+        .map((r) =>
+          menuItemHtml(
+            `data-mi="runner" data-value="${esc(r.id)}"`,
+            r.label,
+            r.desc,
+            r.id === selected.id,
+            PILL_ICONS.runner,
+          ),
+        )
+        .join('');
+      runnerPill.innerHTML = pillHtml(PILL_ICONS.runner, selected.label, runnerMenu);
+    } else {
+      runnerPill.hidden = true;
+    }
+  }
+
+  const all = modelsForRunner(state.taskRunner);
+  const models = state.modelsAvailable ? all : all.slice(0, 1);
   const selectedModel = models.find((m) => m.id === state.taskModel) ?? models[0];
   const modelMenu = models
-    .map((m) => menuItemHtml(`data-mi="model" data-value="${esc(m.id)}"`, m.label, m.desc, m.id === (selectedModel?.id ?? '')))
+    .map((m) =>
+      menuItemHtml(
+        `data-mi="model" data-value="${esc(m.id)}"`,
+        m.label,
+        m.desc,
+        m.id === (selectedModel?.id ?? ''),
+        PILL_ICONS.model,
+      ),
+    )
     .join('');
   $('#model-pill').innerHTML = pillHtml(PILL_ICONS.model, selectedModel?.label ?? 'auto', modelMenu);
 }
@@ -397,27 +593,98 @@ function renderChrome(health) {
     )
     .join('');
 
-  // Model pill fed by what's actually connected: claude CLI present → the
-  // Claude catalog; otherwise only "auto".
-  state.modelsAvailable = health.checks.some((c) => c.name === 'claude' && c.available);
+  // Which agent backends are installed → which runners the pill offers.
+  const available = RUNNERS.map((r) => r.id).filter((id) =>
+    health.checks.some((c) => c.name === id && c.available),
+  );
+  state.runnersAvailable = available.length ? available : ['claude'];
+  // Preselect the configured default when it's installed, else the first
+  // available runner.
+  const preferred = health.defaultRunner;
+  if (preferred && state.runnersAvailable.includes(preferred)) {
+    state.taskRunner = preferred;
+  } else if (!state.runnersAvailable.includes(state.taskRunner)) {
+    state.taskRunner = state.runnersAvailable[0];
+  }
+  // Model pill is populated only when the selected runner's CLI is present;
+  // otherwise it collapses to "auto".
+  state.modelsAvailable = state.runnersAvailable.includes(state.taskRunner);
   renderTaskPills();
 }
 
-/* What `claude --model` accepts: "auto" (no flag — each step decides), the
-   stable tier aliases (they track the newest release), then current pinned
-   versions for reproducible runs. */
-const CLAUDE_MODELS = [
-  { id: '', label: 'auto', desc: 'Pick the best model per step' },
-  { id: 'opus', label: 'opus', desc: 'Deep reasoning for hard tasks' },
-  { id: 'sonnet', label: 'sonnet', desc: 'Fast and cheap' },
-  { id: 'haiku', label: 'haiku', desc: 'Fastest — simple, scoped tasks' },
-  { id: 'claude-opus-4-8', label: 'Opus 4.8', desc: 'Pinned version' },
-  { id: 'claude-sonnet-5', label: 'Sonnet 5', desc: 'Pinned version' },
-  { id: 'claude-haiku-4-5', label: 'Haiku 4.5', desc: 'Pinned version' },
+/* The selectable agent backends. Only those actually installed on the host
+   (detected via /api/health checks) are offered in the pill. */
+const RUNNERS = [
+  { id: 'claude', label: 'claude', desc: 'Claude Code CLI' },
+  { id: 'codex', label: 'codex', desc: 'OpenAI Codex (app-server)' },
+  { id: 'opencode', label: 'opencode', desc: 'OpenCode (serve)' },
 ];
 
+/* Model presets per runner. `id: ''` is always "auto" — no model flag, the
+   runner decides. Claude takes tier aliases + pinned versions; Codex takes
+   gpt-*-codex ids; OpenCode takes `provider/model` ids. */
+const MODELS_BY_RUNNER = {
+  claude: [
+    { id: '', label: 'auto', desc: 'Pick the best model per step' },
+    { id: 'opus', label: 'opus', desc: 'Deep reasoning for hard tasks' },
+    { id: 'sonnet', label: 'sonnet', desc: 'Fast and cheap' },
+    { id: 'haiku', label: 'haiku', desc: 'Fastest — simple, scoped tasks' },
+    { id: 'claude-opus-4-8', label: 'Opus 4.8', desc: 'Pinned version' },
+    { id: 'claude-sonnet-5', label: 'Sonnet 5', desc: 'Pinned version' },
+    { id: 'claude-haiku-4-5', label: 'Haiku 4.5', desc: 'Pinned version' },
+  ],
+  codex: [
+    { id: '', label: 'auto', desc: 'Use your Codex default model' },
+    { id: 'gpt-5.1-codex', label: 'gpt-5.1-codex', desc: 'Codex-tuned' },
+    { id: 'gpt-5.1-codex-mini', label: 'gpt-5.1-codex-mini', desc: 'Faster, cheaper' },
+    { id: 'gpt-5-codex', label: 'gpt-5-codex', desc: 'Previous generation' },
+  ],
+  opencode: [
+    { id: '', label: 'auto', desc: 'Use your OpenCode default model' },
+    { id: 'anthropic/claude-sonnet-4-5', label: 'claude-sonnet-4.5', desc: 'via Anthropic' },
+    { id: 'openai/gpt-5.1', label: 'gpt-5.1', desc: 'via OpenAI' },
+    { id: 'openai/gpt-5.1-codex', label: 'gpt-5.1-codex', desc: 'via OpenAI' },
+  ],
+};
+
+function modelsForRunner(runner) {
+  return MODELS_BY_RUNNER[runner] ?? MODELS_BY_RUNNER.claude;
+}
+
+/* The global stream replays nothing after a drop (laptop sleep, server
+   restart) — a missed `run` event would leave a stale status in the sidebar
+   forever (seen live: a run resting at `review` still listed under Working).
+   Every (re)connect and every return to a visible tab re-syncs the full run
+   list instead. */
+let lastResyncAt = 0;
+async function resyncRuns() {
+  if (Date.now() - lastResyncAt < 2_000) return; // boot + onopen double-fire guard
+  lastResyncAt = Date.now();
+  try {
+    const runs = await getJson('/api/runs');
+    const fresh = new Set(runs.map((r) => r.id));
+    for (const id of [...state.runs.keys()]) if (!fresh.has(id)) state.runs.delete(id);
+    for (const run of runs) state.runs.set(run.id, run);
+    renderRunList();
+    const sel = state.selectedId ? state.runs.get(state.selectedId) : null;
+    if (sel) {
+      updateDetail(sel);
+    } else if (state.selectedId) {
+      state.selectedId = null;
+      $('#detail').innerHTML = '<div class="empty">Select a run — or start one.</div>';
+    }
+  } catch {
+    // offline — the next reconnect/visibility flip retries
+  }
+}
+
 function connectGlobal() {
   const es = new EventSource('/api/events');
+  es.onopen = () => void resyncRuns(); // fires on the initial connect AND every auto-reconnect
+  document.addEventListener('visibilitychange', () => {
+    // SSE can die silently across a sleep — a tab coming back re-syncs too.
+    if (!document.hidden) void resyncRuns();
+  });
   es.addEventListener('run', (e) => {
     const run = JSON.parse(e.data);
     state.runs.set(run.id, run);
@@ -458,6 +725,7 @@ function bindUi() {
     if (btn.dataset.view === 'skills') loadSkills();
     if (btn.dataset.view === 'inbox') renderInbox();
     if (btn.dataset.view === 'github') loadGithub();
+    if (btn.dataset.view === 'workflows') openWorkflowsView();
   });
 
   $('#view-inbox').addEventListener('click', async (e) => {
@@ -500,6 +768,8 @@ function bindUi() {
 
   bindGithubView();
   bindSkillsView();
+  bindWorkflowsView();
+  bindRepoView();
 
   const taskForm = $('#new-task');
 
@@ -518,6 +788,10 @@ function bindUi() {
         state.taskRef = item.dataset.value;
       } else if (item.dataset.mi === 'model') {
         state.taskModel = item.dataset.value;
+      } else if (item.dataset.mi === 'runner') {
+        // Switching backend invalidates the model list — reset to auto.
+        state.taskRunner = item.dataset.value;
+        state.taskModel = '';
       }
       closePillMenus();
       renderTaskPills();
@@ -541,9 +815,11 @@ function bindUi() {
       if (!wasOpen && menu) {
         pill.classList.add('open');
         menu.hidden = false;
-        // Fresh view on open: current kind's tab, empty query, focused search.
+        // Fresh view on open: Skills tab by default (feedback 2026-07-11 —
+        // skills are what people pick 9 times out of 10), empty query,
+        // focused search.
         if (pill.id === 'src-pill') {
-          state.srcMenuTab = state.taskSource;
+          state.srcMenuTab = 'skill';
           state.srcMenuQuery = '';
           const search = $('#src-search');
           if (search) search.value = '';
@@ -611,6 +887,23 @@ function bindUi() {
   taskBox.addEventListener('input', autosizeTask);
   taskBox.addEventListener('blur', autosizeTask);
 
+  // Drop target for GitHub rows (and any dragged text): prefill the task box
+  // with the dragged prompt, then pick a skill/workflow and press Run.
+  taskBox.addEventListener('dragover', (e) => {
+    if (e.dataTransfer?.types.includes('text/plain')) {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'copy';
+    }
+  });
+  taskBox.addEventListener('drop', (e) => {
+    const text = e.dataTransfer?.getData('text/plain');
+    if (!text) return;
+    e.preventDefault();
+    taskBox.value = text;
+    taskBox.focus();
+    taskBox.dispatchEvent(new Event('input')); // autosize to the content
+  });
+
   // Screenshots pasted into the task box travel with POST /api/runs and reach
   // the first agent step's opening message.
   taskBox.addEventListener('paste', (e) => {
@@ -643,6 +936,7 @@ function bindUi() {
     const body = {
       task: form.task.value.trim(),
       model: state.taskModel || undefined,
+      runner: state.runnersAvailable.length > 1 ? state.taskRunner : undefined,
       variants: state.variants > 1 ? state.variants : undefined,
       images: state.taskImages.length
         ? state.taskImages.map((i) => ({ mediaType: i.mediaType, data: i.data }))
@@ -670,6 +964,7 @@ function bindUi() {
       state.taskImages = [];
       renderTaskThumbs();
       form.task.dispatchEvent(new Event('blur')); // shrink the box back
+      saveLastTaskSource();
       handleStarted(data);
     } catch (err) {
       errorBox.textContent = err.message;
@@ -834,13 +1129,15 @@ function bindUi() {
         return;
       }
       panel.hidden = false;
-      $('#notes-pre').textContent = 'Loading…';
+      $('#notes-md').textContent = 'Loading…';
       try {
         const res = await fetch(`/api/runs/${id}/handoff`);
         const text = await res.text();
-        $('#notes-pre').textContent = text.trim() || '(no notes yet — the handoff file is seeded when the task starts)';
+        $('#notes-md').innerHTML = text.trim()
+          ? renderMarkdown(text)
+          : '<p class="dim">(no notes yet — the handoff file is seeded when the task starts)</p>';
       } catch (err) {
-        $('#notes-pre').textContent = `✗ ${err.message}`;
+        $('#notes-md').textContent = `✗ ${err.message}`;
       }
     } else if (btn.dataset.action === 'remove-worktree') {
       const res = await fetch(`/api/runs/${id}/remove-worktree`, { method: 'POST' });
@@ -932,9 +1229,11 @@ async function planTask() {
     return;
   }
   const btn = $('#plan-btn');
-  const label = btn.textContent;
+  const original = btn.innerHTML; // keep the star icon — no emoji swap
   btn.disabled = true;
-  btn.textContent = '⏳ Planning…';
+  btn.classList.add('busy');
+  btn.innerHTML =
+    '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M12 3l2 5.5L19.5 10 14 12l-2 5.5L10 12l-5.5-2L10 8.5 12 3z"/></svg>Planning…';
   try {
     const res = await fetch('/api/plan', {
       method: 'POST',
@@ -950,7 +1249,8 @@ async function planTask() {
     errorBox.hidden = false;
   } finally {
     btn.disabled = false;
-    btn.textContent = label;
+    btn.classList.remove('busy');
+    btn.innerHTML = original;
   }
 }
 
@@ -959,29 +1259,45 @@ function oneLine(s, max = 70) {
   return first.length > max ? `${first.slice(0, max - 1)}…` : first;
 }
 
+/* The proposed chain renders as an overlay over the main window (feedback
+   2026-07-11: the sidebar was too cramped — step names and prompts were
+   truncated to uselessness). Same bindings as before: #plan-panel, .plan-step,
+   data-plan-* — only the placement and roominess changed. */
 function renderPlan() {
+  const overlay = $('#plan-overlay');
   const panel = $('#plan-panel');
   if (!state.plan) {
-    panel.hidden = true;
+    overlay.hidden = true;
     panel.innerHTML = '';
     return;
   }
-  const { steps, rationale, fallback } = state.plan;
-  panel.hidden = false;
+  const { task, steps, rationale, fallback } = state.plan;
+  overlay.hidden = false;
   panel.innerHTML = `
+    <div class="plan-head">
+      <div style="min-width:0">
+        <div class="panel-label" style="margin-bottom:5px">Proposed chain</div>
+        <div class="plan-task" title="${esc(task)}">${esc(oneLine(task, 120))}</div>
+      </div>
+      <button type="button" class="plan-close" data-plan-action="discard" title="Discard the plan">×</button>
+    </div>
     ${fallback ? '<div class="plan-note">planner unavailable — single-step plan</div>' : ''}
-    ${rationale ? `<div class="plan-rationale dim" title="${esc(rationale)}">${esc(rationale)}</div>` : ''}
+    ${rationale ? `<div class="plan-rationale">${esc(rationale)}</div>` : ''}
     <div class="plan-steps">
       ${steps
         .map(
           (s, i) => `
         <div class="plan-step" draggable="true" data-idx="${i}">
           <span class="grip" title="Drag to reorder">≡</span>
-          <span class="num">${i + 1}.</span>
-          <span class="name">${esc(s.name ?? s.id)}</span>
-          ${s.skill ? `<span class="plan-badge skill" title="skill">${esc(s.skill)}</span>` : ''}
-          ${s.command ? '<span class="plan-badge check">check</span>' : ''}
-          <span class="hint dim" title="${esc(s.command ?? s.prompt ?? '')}">${esc(oneLine(s.command ?? s.prompt ?? ''))}</span>
+          <span class="num">${String(i + 1).padStart(2, '0')}</span>
+          <div class="plan-step-main">
+            <div class="row1">
+              <span class="name">${esc(s.name ?? s.id)}</span>
+              ${s.skill ? `<span class="plan-badge skill" title="skill">${esc(s.skill)}</span>` : ''}
+              ${s.command ? '<span class="plan-badge check">check</span>' : ''}
+            </div>
+            <div class="hint">${esc(s.command ?? s.prompt ?? '')}</div>
+          </div>
           <button type="button" class="plan-remove" data-plan-remove="${i}" title="Remove step">✕</button>
         </div>`,
         )
@@ -1247,7 +1563,7 @@ function renderRunList() {
     <button data-list="archived" class="${state.listView === 'archived' ? 'active' : ''}">
       Archived${archivedCount ? ` ${archivedCount}` : ''}
     </button>
-    ${state.listView === 'active' && finishedCount ? `<button data-list="archive-finished" title="Archive all finished runs">📥 ${finishedCount}</button>` : ''}`;
+    ${state.listView === 'active' && finishedCount ? `<button data-list="archive-finished" title="Archive all finished runs"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1.5px;margin-right:4px"><path d="M4 5h16v4H4zM6 9v10h12V9M9 13h6"/></svg>${finishedCount}</button>` : ''}`;
 
   // Variant groups (spec 010): runs sharing a groupId collapse into one
   // group tile at the position of their best-ranked member; click expands.
@@ -1359,7 +1675,7 @@ function renderDetailShell(run) {
     </div>
     <div id="review-panel" class="detail-panel" hidden></div>
     <div id="diff-panel" class="detail-panel" hidden><div class="inner"><div class="panel-label">What this task changed</div><div id="diff-body"></div></div></div>
-    <div id="notes-panel" class="detail-panel" hidden><div class="inner"><div class="panel-label">Handoff notes</div><pre id="notes-pre"></pre></div></div>
+    <div id="notes-panel" class="detail-panel" hidden><div class="inner"><div class="panel-label">Handoff notes</div><div id="notes-md" class="md"></div></div></div>
     <div class="log-wrap">
       <div id="log"><div class="log-inner" id="log-inner"></div></div>
       <button id="jump-bottom" data-action="jump-bottom" hidden>↓ jump to bottom</button>
@@ -1406,6 +1722,7 @@ function updateDetail(run) {
     run.costUsd ? esc(fmtCost(run.costUsd)) : null,
     `started ${esc(timeAgo(run.startedAt ?? run.createdAt))}`,
     run.finishedAt ? `finished ${esc(timeAgo(run.finishedAt))}` : null,
+    run.runner && run.runner !== 'claude' ? `runner ${esc(run.runner)}` : null,
     run.model ? `model ${esc(run.model)}` : null,
     run.branch ? esc(run.branch) : null,
     prLink(run) || null,
@@ -1426,15 +1743,15 @@ function updateDetail(run) {
     .join('<span style="opacity:.5">&nbsp;&nbsp;→&nbsp;&nbsp;</span>');
 
   $('#d-actions').innerHTML = `
-    ${run.status === 'waiting' || run.status === 'review' ? `<button class="btn-dark" data-action="finish" title="${run.status === 'review' ? 'Accept the changes without a PR' : 'Close the session'}">✓ Finish</button>` : ''}
-    ${!active && lastSession ? '<button class="btn-text" data-action="continue">▶ Continue</button><button class="btn-text" data-action="open-cli" title="Take over the session in a real terminal">Terminal</button>' : ''}
-    ${run.worktreePath ? '<button class="btn-text" data-action="diff" title="What this task changed (worktree vs base)">± Diff</button>' : ''}
-    <button class="btn-text" data-action="notes" title="Handoff notes — what the agent did and what's left">Notes</button>
-    ${run.archived && run.worktreePath ? '<button class="btn-text" data-action="remove-worktree" title="Remove the task worktree and its branch">Remove worktree</button>' : ''}
-    ${!active ? `<button class="btn-text" data-action="archive" title="${run.archived ? 'Unarchive' : 'Archive'}">${run.archived ? 'Unarchive' : 'Archive'}</button>` : ''}
+    ${run.status === 'waiting' || run.status === 'review' ? `<button class="btn-dark" data-action="finish" title="${run.status === 'review' ? 'Accept the changes without a PR' : 'Close the session'}">${BI.check}Finish</button>` : ''}
+    ${!active && lastSession ? `<button class="btn-text" data-action="continue">${BI.play}Continue</button><button class="btn-text" data-action="open-cli" title="Take over the session in a real terminal">${BI.terminal}Terminal</button>` : ''}
+    ${run.worktreePath ? `<button class="btn-text" data-action="diff" title="What this task changed (worktree vs base)">${BI.diff}Diff</button>` : ''}
+    <button class="btn-text" data-action="notes" title="Handoff notes — what the agent did and what's left">${BI.notes}Notes</button>
+    ${run.archived && run.worktreePath ? `<button class="btn-text" data-action="remove-worktree" title="Remove the task worktree and its branch">${BI.folder}Remove worktree</button>` : ''}
+    ${!active ? `<button class="btn-text" data-action="archive" title="${run.archived ? 'Unarchive' : 'Archive'}">${BI.archive}${run.archived ? 'Unarchive' : 'Archive'}</button>` : ''}
     ${active
-      ? '<button class="btn-text danger" data-action="cancel">■ Cancel</button>'
-      : '<button class="btn-text danger" data-action="delete">Delete</button>'}`;
+      ? `<button class="btn-text danger" data-action="cancel">${BI.stop}Cancel</button>`
+      : `<button class="btn-text danger" data-action="delete">${BI.trash}Delete</button>`}`;
 
   const errBox = $('#d-error');
   errBox.hidden = !run.error;
@@ -1483,6 +1800,10 @@ function updateDetail(run) {
 async function renderReviewPanel(runId) {
   const panel = $('#review-panel');
   if (!panel) return;
+  // A PR the agent already opened itself (skill-driven `gh pr create`, spotted
+  // in the transcript) replaces the Draft PR button — a second click would
+  // open a duplicate PR.
+  const prUrl = state.runs.get(runId)?.pullRequestUrl;
   panel.innerHTML = `
     <div class="inner">
       <div class="panel-label">Changes ready for review</div>
@@ -1490,7 +1811,11 @@ async function renderReviewPanel(runId) {
       <textarea id="review-notes" rows="2" placeholder="Notes for the agent — what should change?"></textarea>
       <div class="review-buttons">
         <button type="button" class="btn-ghost" data-action="send-back" title="Send the notes back into the agent's session">↩ Send back</button>
-        <button type="button" class="btn-dark" data-action="draft-pr" title="Push the branch and open a draft PR">Draft PR</button>
+        ${
+          prUrl
+            ? `<a class="btn-dark" style="text-decoration:none" href="${esc(prUrl)}" target="_blank" rel="noopener" title="The agent already opened this PR">PR ↗ open on GitHub</a>`
+            : '<button type="button" class="btn-dark" data-action="draft-pr" title="Push the branch and open a draft PR">Draft PR</button>'
+        }
       </div>
       <div id="review-manual" class="dim mono" hidden></div>
     </div>`;
@@ -1606,16 +1931,86 @@ async function pickVariant(btn) {
 
 /* The most telling single argument of a tool call — a command, a path, a
    pattern — shown inside the tool chip. */
+/* Design language for tool chips: a human verb, not the raw tool name —
+   "✓ Ran `npm test`", "✓ Accepted edits to `src/x.ts`". Unknown tools keep
+   their name as the verb. */
+const TOOL_VERB = {
+  Bash: 'Ran',
+  Read: 'Read',
+  Edit: 'Accepted edits to',
+  MultiEdit: 'Accepted edits to',
+  NotebookEdit: 'Accepted edits to',
+  Write: 'Created',
+  Grep: 'Searched',
+  Glob: 'Searched',
+  LS: 'Listed',
+  WebFetch: 'Fetched',
+  WebSearch: 'Searched the web for',
+  TodoWrite: 'Updated the todo list',
+  Task: 'Delegated',
+};
+
+function toolVerb(tool) {
+  return TOOL_VERB[tool] ?? tool;
+}
+
 function toolArg(input) {
   if (input == null) return null;
   if (typeof input === 'string') return input.trim() || null;
   if (typeof input !== 'object') return String(input);
-  for (const key of ['command', 'file_path', 'path', 'pattern', 'url', 'query', 'description', 'prompt']) {
+  for (const key of ['command', 'file_path', 'path', 'pattern', 'url', 'query', 'name', 'description', 'prompt']) {
     const v = input[key];
     if (typeof v === 'string' && v.trim()) return v.trim();
   }
-  const s = JSON.stringify(input);
-  return s === '{}' ? null : s;
+  // No recognizable primary argument — the design never shows raw JSON blobs.
+  return null;
+}
+
+/* Claude-Code-style collapsing for tool streaks: consecutive tool calls /
+   results stack in one group — the last few stay visible, older ones fold
+   under a "\u25b8 N earlier tool calls" toggle. Any other event breaks the
+   streak. Selecting another run clears the log, which disconnects the group —
+   the isConnected check below then starts a fresh one. */
+const STREAK_TAIL = 3;
+let toolStreak = null; // { wrap, toggle, hiddenBox, tailBox }
+
+function streakLabel(hiddenBox) {
+  const n = hiddenBox.children.length;
+  return `${hiddenBox.hidden ? '\u25b8' : '\u25be'} ${n} earlier tool call${n === 1 ? '' : 's'}`;
+}
+
+function newToolStreak(inner) {
+  const wrap = document.createElement('div');
+  wrap.className = 'ev tool-streak';
+  const toggle = document.createElement('button');
+  toggle.type = 'button';
+  toggle.className = 'streak-toggle';
+  toggle.hidden = true;
+  const hiddenBox = document.createElement('div');
+  hiddenBox.className = 'streak-box';
+  hiddenBox.hidden = true;
+  const tailBox = document.createElement('div');
+  tailBox.className = 'streak-box';
+  toggle.addEventListener('click', () => {
+    hiddenBox.hidden = !hiddenBox.hidden;
+    toggle.textContent = streakLabel(hiddenBox);
+  });
+  wrap.append(toggle, hiddenBox, tailBox);
+  inner.appendChild(wrap);
+  return { wrap, toggle, hiddenBox, tailBox };
+}
+
+function appendToStreak(inner, el) {
+  if (!toolStreak || !toolStreak.wrap.isConnected) toolStreak = newToolStreak(inner);
+  toolStreak.tailBox.appendChild(el);
+  // Overflow rolls the oldest visible chip into the folded box (order kept).
+  while (toolStreak.tailBox.children.length > STREAK_TAIL) {
+    toolStreak.hiddenBox.appendChild(toolStreak.tailBox.firstElementChild);
+  }
+  if (toolStreak.hiddenBox.children.length > 0) {
+    toolStreak.toggle.hidden = false;
+    toolStreak.toggle.textContent = streakLabel(toolStreak.hiddenBox);
+  }
 }
 
 function appendLog(evt) {
@@ -1626,16 +2021,18 @@ function appendLog(evt) {
 
   switch (evt.type) {
     case 'text':
-      el.className = 'ev text';
-      el.textContent = evt.text ?? '';
+      // Agents speak markdown — render it (bold, code, lists) instead of
+      // showing raw ** and ##.
+      el.className = 'ev text md';
+      el.innerHTML = renderMarkdown(evt.text ?? '');
       break;
     case 'tool-call': {
       el.className = 'ev tool';
       const arg = toolArg(evt.input);
-      el.innerHTML = `<span class="ok">✓</span><span>${esc(evt.tool)}</span>${
+      el.innerHTML = `<span class="ok">✓</span><span>${esc(toolVerb(evt.tool))}</span>${
         arg ? `<span class="arg">${esc(oneLine(arg, 64))}</span>` : ''
       }`;
-      if (arg && arg.length > 64) el.title = arg.slice(0, 1000);
+      el.title = arg && arg.length > 64 ? arg.slice(0, 1000) : evt.tool;
       break;
     }
     case 'tool-result': {
@@ -1654,7 +2051,7 @@ function appendLog(evt) {
       el.innerHTML = `
         <div class="check-head">
           <span class="lbl">Command</span>
-          <code>${esc(evt.stepId ?? 'check')}</code>
+          <code>${esc(evt.command ?? evt.stepId ?? 'check')}</code>
           <span class="check-pill ${ok ? 'pass' : 'fail'}">${ok ? 'passed' : `failed (exit ${esc(String(evt.exitCode))})`}</span>
         </div>
         <pre>${esc(String(evt.text ?? ''))}</pre>`;
@@ -1677,8 +2074,11 @@ function appendLog(evt) {
       el.innerHTML = `<span class="step-label">${esc(evt.name ?? evt.stepId ?? 'step')}${evt.iteration > 1 ? ` · attempt ${esc(String(evt.iteration))}` : ''}</span><div class="rule"></div>`;
       break;
     case 'step-end':
+      // Successful step ends are already told by the steps rail and the next
+      // step divider — the design keeps the transcript free of this noise.
+      if (evt.status !== 'failed') return;
       el.className = 'ev note';
-      el.textContent = `step ${evt.stepId}: ${evt.status}${evt.error ? ` — ${evt.error}` : ''}`;
+      el.textContent = `step ${evt.stepId}: failed${evt.error ? ` — ${evt.error}` : ''}`;
       break;
     case 'note':
     case 'lifecycle':
@@ -1706,7 +2106,12 @@ function appendLog(evt) {
       el.textContent = JSON.stringify(evt);
   }
 
-  inner.appendChild(el);
+  if (evt.type === 'tool-call' || evt.type === 'tool-result') {
+    appendToStreak(inner, el);
+  } else {
+    toolStreak = null; // anything else breaks the streak
+    inner.appendChild(el);
+  }
   if (state.autoScroll) log.scrollTop = log.scrollHeight;
 }
 
@@ -1800,7 +2205,9 @@ function bindGithubView() {
     }
     const wf = e.target.closest('button[data-gh-workflow]');
     if (wf) {
-      state.ghWorkflow = wf.dataset.ghWorkflow;
+      // Click the selected chip again to deselect — no workflow means the
+      // run uses the toggled skills (or quick-task).
+      state.ghWorkflow = state.ghWorkflow === wf.dataset.ghWorkflow ? null : wf.dataset.ghWorkflow;
       renderGithub();
       return;
     }
@@ -1824,8 +2231,35 @@ function bindGithubView() {
       return;
     }
   });
+
+  // Live filter over the skill chips — re-renders only the chip box so the
+  // input keeps focus (and the page keeps its scroll).
+  view.addEventListener('input', (e) => {
+    if (e.target.id !== 'gh-skill-filter') return;
+    state.ghSkillQuery = e.target.value;
+    const box = $('#gh-skill-chips');
+    if (box) box.innerHTML = ghSkillChipsHtml();
+  });
+
+  // Drag an issue/PR row into the task box — it prefills the same prompt
+  // "Run agent on this issue" uses; skill/workflow you pick in the form.
+  view.addEventListener('dragstart', (e) => {
+    const row = e.target.closest('.gh-row[data-url]');
+    if (!row) return;
+    const item = ghItems().find((i) => i.url === row.dataset.url);
+    if (!item) return;
+    try {
+      e.dataTransfer.setData('text/plain', ghTaskPrompt(item));
+      e.dataTransfer.effectAllowed = 'copy';
+    } catch {
+      // older engines — drag just won't carry the prompt
+    }
+  });
 }
 
+/* Two-shot load (feedback 2026-07-11 — the 30-item gh default hid the rest):
+   the first fast fetch paints the tab, then a background "everything open"
+   fetch (limit 1000) replaces it and fixes the counts. */
 async function loadGithub(refresh = false) {
   const view = $('#view-github');
   if (!state.gh || refresh) {
@@ -1838,12 +2272,31 @@ async function loadGithub(refresh = false) {
       ]);
       state.gh = gh;
       state.skillsList = skills;
+      state.ghFull = false;
     } catch (err) {
       view.innerHTML = `<div class="gh-unavailable">✗ ${esc(err.message)}</div>`;
       return;
     }
   }
   renderGithub();
+  if (state.gh?.available && !state.ghFull) void loadGithubFull();
+}
+
+async function loadGithubFull() {
+  if (state.ghFullLoading) return;
+  state.ghFullLoading = true;
+  try {
+    const full = await getJson('/api/github?limit=1000');
+    if (full.available) {
+      state.gh = full;
+      state.ghFull = true;
+      renderGithub();
+    }
+  } catch {
+    // the fast batch stays — counts just keep their "+"
+  } finally {
+    state.ghFullLoading = false;
+  }
 }
 
 function ghItems() {
@@ -1876,7 +2329,7 @@ function renderGithub() {
         .map((i) => {
           const queuedRun = state.ghQueued.get(i.url);
           return `
-      <div class="gh-row ${sel && i.url === sel.url ? 'selected' : ''}" data-url="${esc(i.url)}">
+      <div class="gh-row ${sel && i.url === sel.url ? 'selected' : ''}" data-url="${esc(i.url)}" draggable="true" title="Drag into the task box to prefill a task">
         <div class="row1">
           <svg viewBox="0 0 24 24" style="stroke:${i.kind === 'issue' ? 'var(--green)' : 'var(--accent)'}"><path d="${i.kind === 'issue' ? GH_ISSUE_ICON : GH_PR_ICON}"/></svg>
           <span class="t">${esc(i.title)}</span>
@@ -1892,6 +2345,15 @@ function renderGithub() {
 
   const detail = sel ? ghDetailHtml(sel) : '<div class="empty">Nothing selected.</div>';
 
+  // A full re-render must not jump the scroll (feedback 2026-07-11: toggling
+  // a skill chip yanked the detail back to the top).
+  const rowsScroll = view.querySelector('.split-rows')?.scrollTop ?? 0;
+  const detailScroll = view.querySelector('.split-detail')?.scrollTop ?? 0;
+
+  // Until the background full fetch lands, a count at the fast-batch cap is
+  // really "30 of who knows" — say so.
+  const countLabel = (n) => `${n}${!state.ghFull && n >= 30 ? '+' : ''}`;
+
   view.innerHTML = `
     <div class="split">
       <div class="split-list">
@@ -1901,18 +2363,23 @@ function renderGithub() {
             <span class="mono dim" style="font-size:10.5px">${esc(gh.repo ?? '')}</span>
             <button class="head-note" data-gh-refresh style="border:none;background:transparent;cursor:pointer" title="Refresh from GitHub">
               <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M20 11a8 8 0 10-2.3 5.7M20 11V5m0 6h-6"/></svg>
-              synced ${esc(gh.syncedAt ? shortAgo(gh.syncedAt) : '?')} ago
+              synced ${esc(gh.syncedAt ? shortAgo(gh.syncedAt) : '?')} ago${state.ghFullLoading ? ' · loading all…' : ''}
             </button>
           </div>
           <div class="sub-tabs">
-            <button data-gh-view="issues" class="${state.ghView === 'issues' ? 'active' : ''}">Issues · ${gh.issues.length}</button>
-            <button data-gh-view="prs" class="${state.ghView === 'prs' ? 'active' : ''}">Pull requests · ${gh.prs.length}</button>
+            <button data-gh-view="issues" class="${state.ghView === 'issues' ? 'active' : ''}">Issues · ${countLabel(gh.issues.length)}</button>
+            <button data-gh-view="prs" class="${state.ghView === 'prs' ? 'active' : ''}">Pull requests · ${countLabel(gh.prs.length)}</button>
           </div>
         </div>
         <div class="split-rows">${rows}</div>
       </div>
       <div class="split-detail">${detail}</div>
     </div>`;
+
+  const rowsEl = view.querySelector('.split-rows');
+  if (rowsEl) rowsEl.scrollTop = rowsScroll;
+  const detailEl = view.querySelector('.split-detail');
+  if (detailEl) detailEl.scrollTop = detailScroll;
 }
 
 function ghDetailHtml(item) {
@@ -1934,7 +2401,7 @@ function ghDetailHtml(item) {
         ${item.labels.map((l) => `<span class="gh-label">${esc(l)}</span>`).join('')}
         ${checks}
       </div>
-      <div class="gh-body">${esc(item.body || '(no description)')}</div>
+      <div class="gh-body md">${item.body ? renderMarkdown(item.body) : '<p class="dim">(no description)</p>'}</div>
       <div class="gh-hand">
         <div class="hand-label">
           <svg viewBox="0 0 24 24"><path d="M13 2L4.5 13.5h5.5L9 22l8.5-11.5H12L13 2z"/></svg>
@@ -1946,7 +2413,7 @@ function ghDetailHtml(item) {
             ${state.workflows
               .map(
                 (w) =>
-                  `<button class="chip-toggle ${state.ghWorkflow === w.name ? 'on' : ''}" data-gh-workflow="${esc(w.name)}" title="${esc(w.description ?? '')}">${esc(w.name)}</button>`,
+                  `<button class="chip-toggle ${state.ghWorkflow === w.name ? 'on' : ''}" data-gh-workflow="${esc(w.name)}" title="${esc(w.description ?? '')}${state.ghWorkflow === w.name ? ' — click again to deselect' : ''}">${esc(w.name)}</button>`,
               )
               .join('')}
           </div>
@@ -1955,13 +2422,13 @@ function ghDetailHtml(item) {
           skills.length
             ? `<div class="hand-row">
           <span class="k">skills</span>
-          <div class="chips">
-            ${skills
-              .map(
-                (name) =>
-                  `<button class="chip-toggle ${state.ghSkills.has(name) ? 'on' : ''}" data-gh-skill="${esc(name)}">${esc(name)}</button>`,
-              )
-              .join('')}
+          <div style="flex:1;min-width:0">
+            ${
+              skills.length > 10
+                ? `<input id="gh-skill-filter" class="filter-input" style="width:min(260px,100%);margin:0 0 8px" placeholder="Filter skills…" value="${esc(state.ghSkillQuery)}">`
+                : ''
+            }
+            <div class="chips" id="gh-skill-chips">${ghSkillChipsHtml()}</div>
           </div>
         </div>`
             : ''
@@ -1978,19 +2445,53 @@ function ghDetailHtml(item) {
     </div>`;
 }
 
+/* Skill chips, filterable — toggled-on chips always stay visible so the
+   filter can't hide your selection. */
+function ghSkillChipsHtml() {
+  const q = state.ghSkillQuery.trim().toLowerCase();
+  const names = (state.skillsList ?? []).map((s) => s.name);
+  const shown = names.filter((n) => state.ghSkills.has(n) || !q || n.toLowerCase().includes(q));
+  if (!shown.length) return '<span class="dim" style="font-size:11.5px">No skills match.</span>';
+  return shown
+    .map(
+      (name) =>
+        `<button class="chip-toggle ${state.ghSkills.has(name) ? 'on' : ''}" data-gh-skill="${esc(name)}">${esc(name)}</button>`,
+    )
+    .join('');
+}
+
+/* The prompt handed to the agent — shared by "Run agent on this …" and the
+   drag-into-the-task-box path. */
+function ghTaskPrompt(item, skillNames = []) {
+  let task = `${item.kind === 'pr' ? 'Address GitHub pull request' : 'Fix GitHub issue'} #${item.number}: ${item.title}\n\n${item.url}`;
+  if (item.body?.trim()) task += `\n\n---\n\n${item.body.trim()}`;
+  if (skillNames.length) task += `\n\nUse these skills where relevant: ${skillNames.join(', ')}.`;
+  return task;
+}
+
 async function runOnGithub(btn) {
   const item = ghItems().find((i) => i.url === btn.dataset.ghRun);
   if (!item) return;
   const skills = [...state.ghSkills].filter((name) => (state.skillsList ?? []).some((s) => s.name === name));
-  let task = `${item.kind === 'pr' ? 'Address GitHub pull request' : 'Fix GitHub issue'} #${item.number}: ${item.title}\n\n${item.url}`;
-  if (item.body?.trim()) task += `\n\n---\n\n${item.body.trim()}`;
-  if (skills.length) task += `\n\nUse these skills where relevant: ${skills.join(', ')}.`;
+  // Workflow chip set → that workflow (skills ride along as a prompt hint).
+  // No workflow but skills toggled → the skills ARE the chain (spec 008).
+  // Nothing selected → quick-task.
+  let body;
+  if (state.ghWorkflow) {
+    body = { workflow: state.ghWorkflow, task: ghTaskPrompt(item, skills) };
+  } else if (skills.length) {
+    const steps = [];
+    for (const name of skills.slice(0, 8)) steps.push(wbSkillStep(name, steps));
+    body = { steps, task: ghTaskPrompt(item) };
+  } else {
+    body = { workflow: 'quick-task', task: ghTaskPrompt(item) };
+  }
   btn.disabled = true;
   try {
     const res = await fetch('/api/runs', {
       method: 'POST',
       headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ workflow: state.ghWorkflow, task }),
+      body: JSON.stringify(body),
     });
     const data = await res.json();
     if (!res.ok) throw new Error(data.error ?? `HTTP ${res.status}`);
@@ -2030,6 +2531,17 @@ async function loadRepo() {
         <h1>Repository</h1>
         <p class="lead mono" style="font-size:12px">${esc(repo.info.root)} · ${esc(repo.info.branch)}${repo.info.remote ? ` · ${esc(repo.info.remote)}` : ''}</p>
 
+        <div class="section-label">Agent base branch</div>
+        <div class="base-branch-row">
+          <select id="base-branch">
+            <option value="" ${repo.baseBranch ? '' : 'selected'}>current checkout (${esc(repo.info.branch)})</option>
+            ${(repo.branches ?? [])
+              .map((b) => `<option value="${esc(b)}" ${repo.baseBranch === b ? 'selected' : ''}>${esc(b)}</option>`)
+              .join('')}
+          </select>
+          <span class="dim" style="font-size:11.5px;line-height:1.5">Task worktrees fork from this branch and draft PRs target it. Saved to <span class="mono">.ai/cezar/config.json</span>.</span>
+        </div>
+
         <div class="section-label">Working tree · ${repo.status.length ? `${repo.status.length} changed` : 'clean'}</div>
         ${
           repo.status.length
@@ -2050,16 +2562,86 @@ async function loadRepo() {
         <div class="section-label">Recent commits</div>
         ${repo.log
           .map(
-            (l) =>
-              `<div class="commit-row"><span class="hash">${esc(l.hash)}</span><span class="subj">${esc(l.subject)}</span><span class="when" title="${esc(l.author)}">${esc(l.when)}</span></div>`,
+            (l) => `
+              <div class="commit-row clickable" data-sha="${esc(l.hash)}" title="Show this commit">
+                <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>
+                <span class="hash">${esc(l.hash)}</span><span class="subj">${esc(l.subject)}</span><span class="when" title="${esc(l.author)}">${esc(l.when)}</span>
+              </div>
+              <div class="commit-diff" data-diff-for="${esc(l.hash)}" hidden></div>`,
           )
           .join('')}
       </div>`;
+    view.dataset.ghBase = githubBaseUrl(repo.info.remote) ?? '';
   } catch (err) {
     view.innerHTML = `<div class="page">✗ ${esc(err.message)}</div>`;
   }
 }
 
+/* `git@github.com:o/r.git` / `https://github.com/o/r(.git)` → https://github.com/o/r */
+function githubBaseUrl(remote) {
+  const m = /github\.com[:/]([^/\s]+)\/([^/\s]+?)(?:\.git)?$/.exec(remote ?? '');
+  return m ? `https://github.com/${m[1]}/${m[2]}` : null;
+}
+
+/* Click a commit row → expand its message + patch inline (spec: Repo view).
+   Bound once; loadRepo re-renders the innerHTML under it. */
+function bindRepoView() {
+  const view = $('#view-repo');
+
+  // Base-branch picker → PUT /api/config (empty value clears back to "current").
+  view.addEventListener('change', async (e) => {
+    if (e.target.id !== 'base-branch') return;
+    const value = e.target.value || null;
+    try {
+      const res = await fetch('/api/config', {
+        method: 'PUT',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ baseBranch: value }),
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) throw new Error(data.error ?? `HTTP ${res.status}`);
+      alertBar(value ? `New tasks will branch off "${value}" (PRs target it too).` : 'Base branch cleared — tasks follow the current checkout.');
+    } catch (err) {
+      alertBar(err.message);
+    }
+  });
+
+  view.addEventListener('click', async (e) => {
+    if (e.target.closest('a')) return; // the GitHub link inside an expanded diff
+    const row = e.target.closest('.commit-row[data-sha]');
+    if (!row) return;
+    const sha = row.dataset.sha;
+    const box = view.querySelector(`.commit-diff[data-diff-for="${CSS.escape(sha)}"]`);
+    if (!box) return;
+    if (!box.hidden) {
+      box.hidden = true;
+      row.classList.remove('open');
+      return;
+    }
+    row.classList.add('open');
+    box.hidden = false;
+    if (!box.dataset.loaded) {
+      box.innerHTML = '<div class="dim" style="padding:8px 2px;font-size:12px">Loading…</div>';
+      try {
+        const text = await fetch(`/api/repo/commit/${encodeURIComponent(sha)}`).then((r) => r.text());
+        // `git show` = message + stat, then the patch — split so renderDiff
+        // doesn't swallow the preamble.
+        const at = text.indexOf('\ndiff --git ');
+        const head = at === -1 ? text : text.slice(0, at);
+        const patch = at === -1 ? '' : text.slice(at + 1);
+        const ghBase = view.dataset.ghBase;
+        box.innerHTML = `
+          ${ghBase ? `<a class="commit-gh" href="${esc(ghBase)}/commit/${esc(sha)}" target="_blank" rel="noopener">View on GitHub ↗</a>` : ''}
+          <pre class="commit-head">${esc(head.trim())}</pre>
+          ${patch ? `<div class="diff-wrap">${renderDiff(patch)}</div>` : ''}`;
+        box.dataset.loaded = '1';
+      } catch (err) {
+        box.innerHTML = `<div class="error-text">✗ ${esc(err.message)}</div>`;
+      }
+    }
+  });
+}
+
 // ---- skills view ---------------------------------------------------------------
 
 const SKILL_ICON = 'M12 3l2 5.5L19.5 10 14 12l-2 5.5L10 12l-5.5-2L10 8.5 12 3z';
@@ -2218,6 +2800,516 @@ function skillDetailHtml() {
     </div>`;
 }
 
+// ---- workflow builder (spec 012) ---------------------------------------------
+
+/* The Workflows tab: a workflow is (usually) a portable stack of skills the
+   agent applies top to bottom. Drag skills in from the palette, reorder by
+   drag, import/export the YAML, save to `.ai/cezar/workflows/`. Workflows
+   richer than a skill stack (checks, custom prompts — YAML-land) still load,
+   reorder and save; they just serialize in the full `steps:` form instead of
+   the compact `skills:` one. */
+
+const WB_MAX_STEPS = 8; // the server's save/run step limit
+
+function wbEmpty() {
+  return {
+    name: 'my-workflow',
+    description: '',
+    steps: [],
+    query: '',
+    importOpen: false,
+    importText: '',
+    importError: '',
+    copied: false,
+  };
+}
+
+function wbFrom(w) {
+  return {
+    ...wbEmpty(),
+    name: w.name,
+    description: w.description ?? '',
+    steps: structuredClone(w.steps ?? []),
+  };
+}
+
+/* First visit seeds the canvas with the repo's first saved workflow — "open
+   the tab, see your flow". No files yet → an empty canvas + the drop hint. */
+function openWorkflowsView() {
+  if (!state.wb) {
+    const first = state.workflows.find((w) => w.source === 'file');
+    state.wb = first ? wbFrom(first) : wbEmpty();
+  }
+  renderWorkflowsView();
+}
+
+/* Client mirror of the server's skillStackOf(): a pure "apply skill to the
+   task" chain can be written in the compact `skills:` YAML form. */
+function wbSkillStack(steps) {
+  const skills = [];
+  for (const s of steps) {
+    if (s.command || !s.skill) return null;
+    if (s.prompt !== undefined && s.prompt !== '{{task}}') return null;
+    if (s.name !== undefined && s.name !== s.skill) return null;
+    if (s.model || s.runner || s.allowedTools || s.bashAllowlist || s.onFail) return null;
+    skills.push(s.skill);
+  }
+  return skills.length ? skills : null;
+}
+
+/* Quote only when the plain form would be ambiguous YAML — special characters,
+   or a scalar YAML would read as a boolean/number/null instead of a string.
+   JSON strings are valid YAML double-quoted scalars, so JSON.stringify is the
+   escape hatch. */
+function yamlScalar(v) {
+  const s = String(v);
+  const plain = /^[A-Za-z0-9._][A-Za-z0-9 ._/-]*$/.test(s) && !s.endsWith(' ');
+  const looksTyped = /^(true|false|yes|no|on|off|null|~)$/i.test(s) || /^[-+.]?\d/.test(s);
+  return plain && !looksTyped ? s : JSON.stringify(s);
+}
+
+function yamlBlock(key, text, indent) {
+  const pad = ' '.repeat(indent);
+  if (!text.includes('\n')) return [`${pad}${key}: ${yamlScalar(text)}`];
+  return [`${pad}${key}: |`, ...text.split('\n').map((l) => `${pad}  ${l}`)];
+}
+
+function wbYamlText() {
+  const wb = state.wb;
+  const lines = [`name: ${yamlScalar(wb.name.trim() || 'my-workflow')}`];
+  if (wb.description.trim()) lines.push(...yamlBlock('description', wb.description.trim(), 0));
+  const stack = wbSkillStack(wb.steps);
+  if (stack) {
+    lines.push('skills:');
+    for (const s of stack) lines.push(`  - ${yamlScalar(s)}`);
+  } else if (wb.steps.length) {
+    lines.push('steps:');
+    for (const s of wb.steps) {
+      lines.push(`  - id: ${yamlScalar(s.id)}`);
+      if (s.name && s.name !== s.id) lines.push(`    name: ${yamlScalar(s.name)}`);
+      if (s.skill) lines.push(`    skill: ${yamlScalar(s.skill)}`);
+      if (s.prompt) lines.push(...yamlBlock('prompt', s.prompt, 4));
+      if (s.model) lines.push(`    model: ${yamlScalar(s.model)}`);
+      if (s.runner) lines.push(`    runner: ${yamlScalar(s.runner)}`);
+      if (s.allowedTools) lines.push(`    allowedTools: [${s.allowedTools.map(yamlScalar).join(', ')}]`);
+      if (s.bashAllowlist) lines.push(`    bashAllowlist: [${s.bashAllowlist.map(yamlScalar).join(', ')}]`);
+      if (s.command) lines.push(...yamlBlock('command', s.command, 4));
+      if (s.onFail) {
+        lines.push('    onFail:', `      retry: ${yamlScalar(s.onFail.retry)}`, `      max: ${s.onFail.max ?? 2}`);
+      }
+    }
+  } else {
+    lines.push('skills: []');
+  }
+  return `${lines.join('\n')}\n`;
+}
+
+function wbCountLabel() {
+  const n = state.wb.steps.length;
+  const noun = wbSkillStack(state.wb.steps) ? 'skill' : 'step';
+  return `${n} ${noun}${n === 1 ? '' : 's'}`;
+}
+
+function wbGapHtml(i) {
+  return `<div class="wb-gap" data-gap="${i}"><div class="wb-gap-inner">drop to insert</div></div>`;
+}
+
+function wbStepCardHtml(s, i) {
+  const lib = (state.skillsList ?? []).find((k) => k.name === s.skill);
+  let title;
+  let desc;
+  let badge = '';
+  if (s.command) {
+    title = s.name ?? s.id;
+    desc = `$ ${s.command}${s.onFail ? ` — on fail retry from "${s.onFail.retry}" (×${s.onFail.max ?? 2})` : ''}`;
+    badge = '<span class="wb-badge check">check</span>';
+  } else if (s.skill) {
+    title = s.skill;
+    desc = lib
+      ? (lib.description ?? '')
+      : 'Not in this repo or the team skills — the step runs on its plain prompt.';
+    if (!lib) badge = '<span class="wb-badge unknown">unknown</span>';
+  } else {
+    title = s.name ?? s.id;
+    desc = oneLine(s.prompt ?? '', 90);
+    badge = '<span class="wb-badge">prompt</span>';
+  }
+  const icon = s.command
+    ? '<svg class="wb-ic" viewBox="0 0 24 24" style="stroke:var(--green)"><path d="M5 12l5 5 9-11"/></svg>'
+    : `<svg class="wb-ic" viewBox="0 0 24 24"><path d="${SKILL_ICON}"/></svg>`;
+  return `
+    ${wbGapHtml(i)}
+    <div class="wb-step" draggable="true" data-idx="${i}">
+      <svg class="grip" width="10" height="14" viewBox="0 0 10 16"><circle cx="2.5" cy="2.5" r="1.4"/><circle cx="7.5" cy="2.5" r="1.4"/><circle cx="2.5" cy="8" r="1.4"/><circle cx="7.5" cy="8" r="1.4"/><circle cx="2.5" cy="13.5" r="1.4"/><circle cx="7.5" cy="13.5" r="1.4"/></svg>
+      <span class="num mono">${String(i + 1).padStart(2, '0')}</span>
+      ${icon}
+      <div class="wb-step-main">
+        <div class="wb-step-name mono">${esc(title)}</div>
+        ${desc ? `<div class="wb-step-desc">${esc(desc)}</div>` : ''}
+      </div>
+      ${badge}
+      <button type="button" class="wb-remove" data-wb-remove="${i}" title="Remove from flow">×</button>
+    </div>`;
+}
+
+function wbStepsHtml() {
+  const steps = state.wb.steps;
+  if (!steps.length) {
+    return '<div class="wb-gap tall" data-gap="0"><div class="wb-gap-inner">drop a skill here — or Import a workflow.yaml</div></div>';
+  }
+  return `${steps.map(wbStepCardHtml).join('')}${wbGapHtml(steps.length)}
+    <div class="wb-flow-note"><svg viewBox="0 0 24 24" width="12" height="12"><path d="M12 5v14M6 13l6 6 6-6"/></svg>runs top to bottom</div>`;
+}
+
+function wbPaletteHtml() {
+  const q = state.wb.query.trim().toLowerCase();
+  const inFlow = new Set(state.wb.steps.map((s) => s.skill).filter(Boolean));
+  const skills = (state.skillsList ?? []).filter(
+    (s) => !q || s.name.toLowerCase().includes(q) || (s.description ?? '').toLowerCase().includes(q),
+  );
+  if (!skills.length) {
+    return (state.skillsList ?? []).length
+      ? '<div class="dim" style="font-size:11.5px;padding:4px 2px 8px">No skills match.</div>'
+      : '<div class="dim" style="font-size:11.5px;padding:4px 2px 8px;line-height:1.6">No skills yet — drop Markdown files into <span class="mono">.ai/skills/</span> or <span class="mono">.ai/cezar/skills/</span>.</div>';
+  }
+  return skills
+    .map(
+      (s) => `
+    <div class="wb-skill" draggable="true" data-skill="${esc(s.name)}" title="${esc(s.description ?? '')}">
+      <svg class="wb-ic" viewBox="0 0 24 24"><path d="${SKILL_ICON}"/></svg>
+      <span class="name mono">${esc(s.name)}</span>
+      <span class="wb-skill-right">
+        ${inFlow.has(s.name) ? '<svg class="in-flow" viewBox="0 0 24 24"><path d="M5 12l5 5 9-11"/></svg>' : ''}
+        <svg class="dots" viewBox="0 0 24 24"><circle cx="9" cy="5" r="1.6"/><circle cx="15" cy="5" r="1.6"/><circle cx="9" cy="12" r="1.6"/><circle cx="15" cy="12" r="1.6"/><circle cx="9" cy="19" r="1.6"/><circle cx="15" cy="19" r="1.6"/></svg>
+      </span>
+    </div>`,
+    )
+    .join('');
+}
+
+function wbLoadChipsHtml() {
+  const chips = state.workflows
+    .map(
+      (w) =>
+        `<button type="button" class="chip-toggle ${state.wb.name === w.name ? 'on' : ''}" data-wb-load="${esc(w.name)}" title="${esc(w.description ?? '')}">${esc(w.name)}</button>`,
+    )
+    .join('');
+  return `<span class="wb-k">edit</span>${chips}<button type="button" class="chip-toggle" data-wb-load="__new" title="Start an empty workflow">+ new</button>`;
+}
+
+function renderWorkflowsView() {
+  const wb = state.wb;
+  $('#view-workflows').innerHTML = `
+    <div class="wb-grid">
+      <div class="wb-main"><div class="wb-inner">
+        <div class="wb-head">
+          <h1>Workflow builder</h1>
+          ${
+            state.workflows.some((w) => w.name === wb.name.trim() && w.source === 'file')
+              ? `<button type="button" class="btn-text danger" data-wb-action="delete" title="Delete the saved workflow file">${BI.trash}Delete</button>`
+              : ''
+          }
+          <button type="button" class="btn-text" data-wb-action="import">⬆ Import</button>
+          <button type="button" class="btn-text" data-wb-action="export">⬇ Export</button>
+          <button type="button" class="btn-dark" data-wb-action="save">✓ Save</button>
+        </div>
+        <div class="wb-meta">
+          <div class="wb-name-pill">
+            <svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h10M4 18h13"/></svg>
+            <input id="wb-name" value="${esc(wb.name)}" spellcheck="false" aria-label="Workflow name">
+          </div>
+          <span class="mono dim" id="wb-count">${wbCountLabel()}</span>
+        </div>
+        <div class="wb-load" id="wb-load">${wbLoadChipsHtml()}</div>
+        <div class="wb-import" ${wb.importOpen ? '' : 'hidden'}>
+          <div class="wb-import-label">Import workflow YAML</div>
+          <textarea id="wb-import-text" rows="6" spellcheck="false" placeholder="name: my-flow&#10;skills:&#10;  - test-conventions&#10;  - commit-style">${esc(wb.importText)}</textarea>
+          <div class="error-text" style="margin-top:7px" ${wb.importError ? '' : 'hidden'}>${esc(wb.importError)}</div>
+          <div class="wb-import-actions">
+            <button type="button" class="btn-dark" data-wb-action="do-import">Import</button>
+            <button type="button" class="btn-ghost" data-wb-action="cancel-import">Cancel</button>
+          </div>
+        </div>
+        <div id="wb-steps">${wbStepsHtml()}</div>
+      </div></div>
+      <aside class="wb-aside">
+        <div class="section-label" style="margin:0 0 4px">Skills</div>
+        <div class="wb-hint">Drag into the flow. Order is execution order — the agent applies them top to bottom.</div>
+        <input id="wb-filter" class="filter-input" style="width:100%;margin:0 0 9px" placeholder="Filter skills…" value="${esc(wb.query)}">
+        <div id="wb-palette">${wbPaletteHtml()}</div>
+        <div class="wb-yaml-head">
+          <span class="section-label" style="margin:0">workflow.yaml</span>
+          <span class="spacer"></span>
+          <button type="button" class="btn-text" id="wb-copy" data-wb-action="copy">${wb.copied ? '✓ Copied' : 'Copy'}</button>
+        </div>
+        <pre class="wb-yaml" id="wb-yaml"></pre>
+        <div class="wb-note">
+          <svg viewBox="0 0 24 24" width="12" height="12"><circle cx="12" cy="12" r="9"/><path d="M12 8v.5M12 11v5"/></svg>
+          <span>Portable — export this file and import it in any repo running cezar.</span>
+        </div>
+      </aside>
+    </div>`;
+  $('#wb-yaml').textContent = wbYamlText();
+}
+
+/* Structural change (add/move/remove/save): refresh the pieces that depend on
+   the step list without touching the inputs — they keep focus. */
+function wbRefresh() {
+  $('#wb-steps').innerHTML = wbStepsHtml();
+  $('#wb-palette').innerHTML = wbPaletteHtml();
+  $('#wb-count').textContent = wbCountLabel();
+  $('#wb-load').innerHTML = wbLoadChipsHtml();
+  $('#wb-yaml').textContent = wbYamlText();
+}
+
+function wbSkillStep(skill, steps) {
+  const used = new Set(steps.map((s) => s.id));
+  let id = skill;
+  for (let n = 2; used.has(id); n++) id = `${skill}-${n}`;
+  return { id, name: skill, skill, prompt: '{{task}}' };
+}
+
+function bindWorkflowsView() {
+  const view = $('#view-workflows');
+
+  view.addEventListener('click', (e) => {
+    if (!state.wb) return;
+    const rm = e.target.closest('[data-wb-remove]');
+    if (rm) {
+      state.wb.steps.splice(Number(rm.dataset.wbRemove), 1);
+      wbRefresh();
+      return;
+    }
+    const load = e.target.closest('[data-wb-load]');
+    if (load) {
+      const name = load.dataset.wbLoad;
+      const w = state.workflows.find((x) => x.name === name);
+      state.wb = name === '__new' ? wbEmpty() : w ? wbFrom(w) : state.wb;
+      renderWorkflowsView();
+      return;
+    }
+    const btn = e.target.closest('[data-wb-action]');
+    if (!btn) return;
+    const action = btn.dataset.wbAction;
+    if (action === 'import') {
+      state.wb.importOpen = !state.wb.importOpen;
+      state.wb.importError = '';
+      renderWorkflowsView();
+      if (state.wb.importOpen) $('#wb-import-text')?.focus();
+    } else if (action === 'cancel-import') {
+      state.wb.importOpen = false;
+      state.wb.importText = '';
+      state.wb.importError = '';
+      renderWorkflowsView();
+    } else if (action === 'do-import') void wbImport(btn);
+    else if (action === 'export') wbExport();
+    else if (action === 'copy') wbCopy();
+    else if (action === 'save') void wbSave(btn);
+    else if (action === 'delete') void wbDelete(btn);
+  });
+
+  view.addEventListener('input', (e) => {
+    if (!state.wb) return;
+    if (e.target.id === 'wb-name') {
+      state.wb.name = e.target.value;
+      $('#wb-yaml').textContent = wbYamlText();
+      $('#wb-load').innerHTML = wbLoadChipsHtml();
+    } else if (e.target.id === 'wb-filter') {
+      state.wb.query = e.target.value;
+      $('#wb-palette').innerHTML = wbPaletteHtml();
+    } else if (e.target.id === 'wb-import-text') {
+      state.wb.importText = e.target.value;
+    }
+  });
+
+  // Drag & drop — palette pills copy in, step cards move; gaps between cards
+  // are the drop targets. Class flips only (no re-render mid-drag: replacing
+  // the dragged node cancels an HTML5 drag).
+  view.addEventListener('dragstart', (e) => {
+    const skill = e.target.closest('.wb-skill');
+    const step = e.target.closest('.wb-step');
+    if (!skill && !step) return;
+    try {
+      e.dataTransfer.setData('text/plain', 'x'); // Firefox needs data to drag
+      e.dataTransfer.effectAllowed = skill ? 'copyMove' : 'move';
+    } catch {
+      // older engines — the drag still works
+    }
+    state.wbDrag = skill
+      ? { from: 'palette', skill: skill.dataset.skill }
+      : { from: 'step', index: Number(step.dataset.idx) };
+    // Deferred: repainting the dragged node in the same tick aborts the drag.
+    setTimeout(() => {
+      view.classList.add('wb-dragging');
+      step?.classList.add('drag-src');
+    }, 0);
+  });
+  view.addEventListener('dragover', (e) => {
+    const gap = e.target.closest('.wb-gap');
+    if (!gap || !state.wbDrag) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = state.wbDrag.from === 'palette' ? 'copy' : 'move';
+    gap.classList.add('over');
+  });
+  view.addEventListener('dragleave', (e) => {
+    e.target.closest('.wb-gap')?.classList.remove('over');
+  });
+  view.addEventListener('drop', (e) => {
+    const gap = e.target.closest('.wb-gap');
+    const d = state.wbDrag;
+    state.wbDrag = null;
+    view.classList.remove('wb-dragging');
+    if (!gap || !d) return;
+    e.preventDefault();
+    const at = Number(gap.dataset.gap);
+    const steps = state.wb.steps;
+    if (d.from === 'step') {
+      const [moved] = steps.splice(d.index, 1);
+      steps.splice(d.index < at ? at - 1 : at, 0, moved);
+    } else {
+      if (steps.length >= WB_MAX_STEPS) {
+        alertBar(`A workflow holds at most ${WB_MAX_STEPS} steps.`);
+        wbRefresh();
+        return;
+      }
+      steps.splice(at, 0, wbSkillStep(d.skill, steps));
+    }
+    wbRefresh();
+  });
+  view.addEventListener('dragend', () => {
+    state.wbDrag = null;
+    view.classList.remove('wb-dragging');
+    for (const el of view.querySelectorAll('.over, .drag-src')) el.classList.remove('over', 'drag-src');
+  });
+}
+
+async function wbImport(btn) {
+  const text = state.wb.importText.trim();
+  if (!text) {
+    $('#wb-import-text')?.focus();
+    return;
+  }
+  btn.disabled = true;
+  try {
+    const res = await fetch('/api/workflows/parse', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ yaml: text }),
+    });
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error ?? `HTTP ${res.status}`);
+    state.wb = { ...wbEmpty(), name: data.name, description: data.description ?? '', steps: data.steps };
+    renderWorkflowsView();
+    alertBar(`Imported "${data.name}" — review, then Save.`);
+  } catch (err) {
+    state.wb.importError = err.message;
+    renderWorkflowsView();
+  } finally {
+    btn.disabled = false;
+  }
+}
+
+function wbSlug() {
+  return (
+    state.wb.name
+      .trim()
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-+|-+$/g, '') || 'workflow'
+  );
+}
+
+function wbExport() {
+  const blob = new Blob([wbYamlText()], { type: 'text/yaml' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `${wbSlug()}.yaml`;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+let wbCopyTimer = null;
+function wbCopy() {
+  void navigator.clipboard?.writeText(wbYamlText()).catch(() => {});
+  state.wb.copied = true;
+  const btn = $('#wb-copy');
+  if (btn) btn.textContent = '✓ Copied';
+  clearTimeout(wbCopyTimer);
+  wbCopyTimer = setTimeout(() => {
+    if (state.wb) state.wb.copied = false;
+    const b = $('#wb-copy');
+    if (b) b.textContent = 'Copy';
+  }, 1600);
+}
+
+async function wbSave(btn) {
+  const wb = state.wb;
+  const name = wb.name.trim();
+  if (!name) {
+    $('#wb-name')?.focus();
+    return;
+  }
+  if (!wb.steps.length) {
+    alertBar('Add at least one step first.');
+    return;
+  }
+  const stack = wbSkillStack(wb.steps);
+  const body = {
+    name,
+    ...(wb.description.trim() ? { description: wb.description.trim() } : {}),
+    ...(stack ? { skills: stack } : { steps: wb.steps }),
+  };
+  const post = (payload) =>
+    fetch('/api/workflows', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(payload),
+    });
+  btn.disabled = true;
+  try {
+    let res = await post(body);
+    let data = await res.json();
+    if (res.status === 409 && data.exists) {
+      if (!confirm(`"${name}" already exists — overwrite it?`)) return;
+      res = await post({ ...body, overwrite: true });
+      data = await res.json();
+    }
+    if (!res.ok) throw new Error(data.error ?? `HTTP ${res.status}`);
+    alertBar(`Saved — ${String(data.path).split('/').pop()}`);
+    const workflowsRes = await getJson('/api/workflows');
+    setWorkflowOptions(workflowsRes.workflows);
+    renderWorkflowsView(); // chips + the Delete button now reflect the file
+  } catch (err) {
+    alertBar(err.message);
+  } finally {
+    btn.disabled = false;
+  }
+}
+
+async function wbDelete(btn) {
+  const name = state.wb.name.trim();
+  const fileWf = state.workflows.find((w) => w.name === name && w.source === 'file');
+  if (!fileWf) return;
+  if (!confirm(`Delete workflow "${name}" (${String(fileWf.path ?? '').split('/').pop()})?`)) return;
+  btn.disabled = true;
+  try {
+    const res = await fetch(`/api/workflows/${encodeURIComponent(name)}`, { method: 'DELETE' });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) throw new Error(data.error ?? `HTTP ${res.status}`);
+    alertBar(`Deleted "${name}".`);
+    const workflowsRes = await getJson('/api/workflows');
+    setWorkflowOptions(workflowsRes.workflows);
+    state.wb = wbEmpty();
+    renderWorkflowsView();
+  } catch (err) {
+    alertBar(err.message);
+    btn.disabled = false;
+  }
+}
+
 // ---- bookmarklet generator (spec 011) ------------------------------------------
 
 /* The javascript: URL dragged to the bookmarks bar. On a GitHub PR/issue it