npm - @worca/app - Versions diffs - 1.2.0 → 1.3.0-rc.2 - Mend

@worca/app 1.2.0 → 1.3.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (104) hide show

package/README.md +42 -0
package/agents/memoryDefragmenter.meta.json +24 -0
package/agents/worca-cc-code-reviewer.md +6 -1
package/agents/worca-cc-implementer.md +6 -1
package/agents/worca-cc-memory-defragmenter.md +32 -0
package/agents/worca-cc-planner.md +5 -1
package/package.json +5 -2
package/src/cli/render.mjs +36 -0
package/src/cli/worca-cc.mjs +137 -8
package/src/core/agent-registry.mjs +12 -34
package/src/core/artifacts.mjs +132 -8
package/src/core/ask/catalog.mjs +32 -7
package/src/core/ask/comment-deps.mjs +5 -2
package/src/core/ask/events.mjs +65 -2
package/src/core/ask/limits.mjs +9 -0
package/src/core/ask/mcp-stdio.mjs +10 -0
package/src/core/ask/memory-deps.mjs +107 -0
package/src/core/ask/metrics-deps.mjs +124 -0
package/src/core/ask/metrics-proposal.mjs +175 -0
package/src/core/ask/prompt.mjs +53 -10
package/src/core/ask/proposal.mjs +49 -2
package/src/core/ask/spawn.mjs +21 -4
package/src/core/ask/store.mjs +14 -5
package/src/core/ask/tool-deps.mjs +26 -2
package/src/core/ask/tools.mjs +439 -6
package/src/core/ask/turn.mjs +163 -4
package/src/core/ask/workflow-deps.mjs +226 -0
package/src/core/auto/classify.mjs +352 -0
package/src/core/auto/fingerprint.mjs +141 -0
package/src/core/auto/match.mjs +30 -0
package/src/core/auto/model.mjs +23 -0
package/src/core/auto/proposal.mjs +132 -0
package/src/core/auto/recipes.mjs +75 -0
package/src/core/auto/repo-look.mjs +46 -0
package/src/core/claude-runner.mjs +132 -11
package/src/core/config.mjs +120 -3
package/src/core/db.mjs +44 -1
package/src/core/diff-comments.mjs +55 -9
package/src/core/frontmatter.mjs +75 -0
package/src/core/git-info.mjs +233 -26
package/src/core/graph/builtin-workflows.mjs +50 -0
package/src/core/graph/executor.mjs +11 -3
package/src/core/index-html.mjs +17 -0
package/src/core/memory-store.mjs +441 -0
package/src/core/memory-sync.mjs +300 -0
package/src/core/metrics/ledger.mjs +47 -0
package/src/core/metrics/lock.mjs +117 -0
package/src/core/metrics/read.mjs +303 -0
package/src/core/metrics/record.mjs +389 -0
package/src/core/metrics/sync.mjs +1100 -0
package/src/core/onboarding.mjs +99 -0
package/src/core/orchestrator.mjs +394 -7
package/src/core/phases.mjs +16 -3
package/src/core/pipeline-delete.mjs +1 -1
package/src/core/plugin-store.mjs +2 -10
package/src/core/preflight.mjs +2 -3
package/src/core/projects.mjs +16 -1
package/src/core/run-harness.mjs +458 -32
package/src/core/run-report.mjs +896 -0
package/src/core/settings.mjs +162 -0
package/src/core/sources.mjs +4 -1
package/src/core/store.mjs +5 -0
package/src/core/workflow-export.mjs +2 -0
package/src/core/workflow-share.mjs +1 -0
package/src/core/workflows.mjs +43 -23
package/src/core/workspaces.mjs +37 -8
package/src/shared/graph/agent-meta.mjs +5 -2
package/src/shared/graph/assemble.mjs +455 -0
package/src/shared/graph/flow-layout.mjs +249 -0
package/src/shared/graph/geometry.mjs +48 -28
package/src/shared/graph/isomorphic.mjs +101 -0
package/src/shared/report-reasons.mjs +58 -0
package/src/shared/team-metrics/aggregate.mjs +341 -0
package/src/shared/team-metrics/workspace-match.mjs +13 -0
package/ui/public/about-links.mjs +21 -0
package/ui/public/app.js +3715 -479
package/ui/public/artifact-view.mjs +135 -0
package/ui/public/ask-model.mjs +18 -1
package/ui/public/ask-panel.mjs +1359 -214
package/ui/public/ask-run-card.mjs +209 -0
package/ui/public/assets/worca-logo-mask.png +0 -0
package/ui/public/assets/worca-mark-mask.png +0 -0
package/ui/public/auto-build.mjs +95 -0
package/ui/public/auto-proposal.mjs +174 -0
package/ui/public/comment-thread.mjs +55 -0
package/ui/public/getting-started.mjs +261 -0
package/ui/public/graph/composer.mjs +41 -5
package/ui/public/graph/inspector.mjs +3 -1
package/ui/public/graph/model.mjs +1 -0
package/ui/public/graph/run-hosts.mjs +73 -12
package/ui/public/graph/view.mjs +218 -50
package/ui/public/guide-spot.mjs +215 -0
package/ui/public/index.html +423 -25
package/ui/public/memory-view.mjs +192 -0
package/ui/public/node-tunables.mjs +201 -0
package/ui/public/report-run.mjs +75 -0
package/ui/public/results-view.mjs +25 -0
package/ui/public/source-pane.mjs +16 -2
package/ui/public/stats-view.mjs +2 -2
package/ui/public/style.css +1450 -303
package/ui/public/team-metrics-surfaces.mjs +452 -0
package/ui/public/team-metrics-view.mjs +533 -0
package/ui/public/thinking-orb.mjs +46 -8
package/ui/server.mjs +1282 -193

package/ui/public/index.html CHANGED Viewed

@@ -1,8 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
     <title>Worca CC</title>
     <link rel="stylesheet" href="/style.css" />
     <meta name="theme-color" content="#ffffff" />
@@ -13,13 +14,8 @@
       <!-- ===================== Sidebar ===================== -->
       <aside class="sidebar" id="side-rail">
         <div class="brand">
-          <img class="logo" src="/assets/worca-logo.png" alt="Worca" />
-          <img class="logo-mark" src="/assets/worca-favicon.png" alt="Worca" />
-          <button type="button" class="side-toggle" id="side-toggle"
-                  aria-expanded="true" aria-controls="side-rail"
-                  title="Collapse menu" aria-label="Collapse menu">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2.5"></rect><path d="M9 3v18"></path><path class="chev" d="M16 15l-3-3 3-3"></path></svg>
-          </button>
+          <span class="logo" role="img" aria-label="Worca"></span>
+          <span class="logo-mark" role="img" aria-label="Worca"></span>
         </div>
         <nav class="nav" aria-label="Primary">
@@ -48,6 +44,10 @@
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><path d="M5 20v-7M12 20V4M19 20v-11"></path></svg>
             <span>Statistics</span>
           </button>
+          <button type="button" data-nav="team-metrics">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19h16"></path><path d="M6 15l4-5 4 3 4-6"></path><circle cx="6" cy="15" r="1.2"></circle><circle cx="10" cy="10" r="1.2"></circle><circle cx="14" cy="13" r="1.2"></circle><circle cx="18" cy="7" r="1.2"></circle></svg>
+            <span>Team metrics</span>
+          </button>
           <div class="nav-sect">Build</div>
           <button type="button" data-nav="composer">
@@ -80,6 +80,11 @@
         <div class="side-foot">
           <div id="side-spend"></div>
+          <button type="button" class="side-toggle" id="side-toggle"
+                  aria-expanded="true" aria-controls="side-rail"
+                  title="Collapse menu" aria-label="Collapse menu">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path class="chev" d="M15 6l-6 6 6 6"></path></svg>
+          </button>
         </div>
       </aside>
@@ -92,6 +97,7 @@
           <button type="button" data-nav="running">Running<span class="nav-rollup" id="topnav-running-rollup" hidden></span></button>
           <button type="button" data-nav="history">History</button>
           <button type="button" data-nav="stats">Stats<span class="topnav-amt mono" id="topnav-spend" hidden></span></button>
+          <button type="button" data-nav="team-metrics">Team metrics</button>
           <span class="topnav-sep" aria-hidden="true"></span>
           <button type="button" data-nav="composer">Composer</button>
           <button type="button" data-nav="agents">Agents</button>
@@ -198,6 +204,16 @@
                   </div>
                 </div>
+                <!-- Memory defragment only (agent memory §7.3 / B11): the scope the run restructures. -->
+                <div class="field field-compact" id="memory-scope-row" hidden>
+                  <label>Memory scope</label>
+                  <div class="seg" id="memory-scope-seg" role="group" aria-label="Memory scope">
+                    <button type="button" data-scope="global" class="on" aria-pressed="true">Global</button>
+                    <button type="button" data-scope="project" aria-pressed="false">Project</button>
+                  </div>
+                  <small class="hint">Global: the rules every project shares. Project: this project's memory. The run restructures that scope and nothing else — the task text is optional, and it runs with the Normal guardrails unless you pick another set.</small>
+                </div>
                 <!-- Task source switch; the panes below span the full width. -->
                 <div class="field field-compact">
                   <label>Task source</label>
@@ -296,6 +312,15 @@
                   </div>
                 </div>
+                    <!-- Auto only (spec §7.2 / D20): the ONE agent-level option. The .sw-input bridge
+                         (style.css:3370) paints the same switch as #mock-switch from a REAL checkbox — no JS mirror. -->
+                    <label class="switch-row" id="hitl-row" hidden>
+                      <input id="humanInLoop" class="sw-input" type="checkbox" checked aria-describedby="hitlHint">
+                      <span class="switch"></span>
+                      <span class="txt">Human in the loop — Auto shows its proposal, clarifies, and agents may ask</span>
+                    </label>
+                    <small class="hint" id="hitlHint">Off: the proposal is accepted as proposed, no clarify card, no agent questions. A loop that runs out of cycles, a recovery prompt, a cost cap or an error still pause the run.</small>
                     <!-- Guardrails picker (built-ins + named sets; the selection IS the
                          run's policy, applied uniformly to every member). app.js populates
                          from GET /api/guardrails. Applies to Project and Workspace targets
@@ -333,6 +358,20 @@
         </section>
         <!-- /view new -->
+        <!-- ===== VIEW: GETTING STARTED (docs/getting-started.md) ===== -->
+        <!-- Its own page: the sidebar pill (mounted by app.js under New pipeline) and
+             Settings › General › Getting started route here. The tile shelf is painted
+             into the host by getting-started.mjs on every entry. -->
+        <section class="view hidden" data-view="getting-started">
+          <div class="topbar">
+            <div>
+              <h1>Getting started</h1>
+              <div class="sub">Eight things to do with Worca, in order &middot; each tile opens a guided tour of the real controls</div>
+            </div>
+          </div>
+          <div id="getting-started-host" class="gs-host" hidden></div>
+        </section>
         <!-- ===== VIEW: RUNNING ===== -->
         <section class="view hidden" data-view="running">
           <div class="run-shell" id="run-shell">
@@ -399,6 +438,7 @@
                   </span>
                 </div>
                 <div class="rc-acts">
+                  <span class="auto-badge" hidden></span>
                   <span class="rc-qpill" hidden></span>
                   <button type="button" class="btn-resume" title="Resume — restart this paused pipeline where it left off" aria-label="Resume" hidden><svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M7 5l12 7-12 7z"></path></svg></button>
                   <button type="button" class="btn-pause" title="Pause — gracefully stop the session so it can be resumed" aria-label="Pause"><svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1.5"></rect><rect x="14" y="5" width="4" height="14" rx="1.5"></rect></svg></button>
@@ -436,6 +476,7 @@
                     Back
                   </button>
                   <h1 class="rd-title"></h1>
+                  <span class="auto-badge" hidden></span>
                   <span class="rd-status pill-run"><span class="pdot"></span><span class="rd-status-word"></span></span>
                 </div>
                 <div class="rd-meta mono"></div>
@@ -467,6 +508,12 @@
                     <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2"></rect></svg>
                     <span class="rd-btn-label">Stop</span>
                   </button>
+                  <!-- Report this run: hidden until the run reaches a terminal state
+                       (paintRdTerminal), because a mid-flight run has no totals to
+                       report. paintRdTerminal appends .rd-history-link after this
+                       button, so the painted row reads
+                       Stop · Report this run · View in History. -->
+                  <button type="button" class="rd-report btn-ghost" hidden>Report this run</button>
                 </div>
                 <!-- Inline error slot for failed actions, on the HEADER so it is never
                      pushed below the fold by the graph or a tab body (mirrors .hd-error). -->
@@ -583,6 +630,7 @@
                     Back
                   </button>
                   <h1 class="hd-title"></h1>
+                  <span class="auto-badge" hidden></span>
                   <span class="hist-merge" hidden></span>
                   <button type="button" class="hd-pr" hidden>Create PR</button>
                   <a class="hd-pr-link" hidden target="_blank" rel="noopener"></a>
@@ -620,10 +668,28 @@
                     <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M7 5l12 7-12 7z"></path></svg>
                     <span class="hd-btn-label">Resume</span>
                   </button>
-                  <button type="button" class="hd-archive" hidden>
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2m2 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
-                    <span class="hd-btn-label">Archive</span>
-                  </button>
+                  <!-- Archive and Report live behind one ⋯ trigger, but keep their own
+                       classes: every gate, the busy-label swap and hdSetArchiveGate all
+                       address them directly, and only their PLACEMENT moved here.
+                       Report this run: a History row is finished by definition, but a
+                       still-live row also appears here, so setupHdActions unhides both
+                       only for a deletable entry, and hides the trigger when neither is
+                       offered rather than opening onto an empty menu. -->
+                  <span class="hd-more-wrap">
+                    <button type="button" class="hd-more" hidden aria-haspopup="menu" aria-expanded="false" title="More actions" aria-label="More actions">
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.8"></circle><circle cx="12" cy="12" r="1.8"></circle><circle cx="19" cy="12" r="1.8"></circle></svg>
+                    </button>
+                    <div class="hd-menu" role="menu" hidden>
+                      <button type="button" class="hd-archive" role="menuitem" hidden>
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2m2 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
+                        <span class="hd-btn-label">Archive</span>
+                      </button>
+                      <button type="button" class="hd-report" role="menuitem" hidden>
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"></path><path d="M12 9v4.5"></path><path d="M12 17h.01"></path></svg>
+                        <span class="hd-btn-label">Report this run</span>
+                      </button>
+                    </div>
+                  </span>
                 </div>
                 <!-- The inline error lives on the HEADER, not in .hd-body, so an archive
                      failure is not pushed below the fold by a long Diff or Logs tab.
@@ -664,9 +730,39 @@
           </div>
           <div id="stats-body"><small class="hint">Loading…</small></div>
           <div id="stats-tip" class="chart-tip" hidden></div>
+          <a class="hint tm-stats-hint" id="stats-tm-hint" href="#team-metrics" hidden>Team-wide view →</a>
         </section>
         <!-- /view stats -->
+        <!-- ===== VIEW: TEAM METRICS ===== -->
+        <section class="view hidden" data-view="team-metrics">
+          <div class="topbar">
+            <div>
+              <h1>Team metrics</h1>
+              <div class="sub">Shared across the team from the <code>worca-metrics</code> branch · costs are Claude Code estimates, not billing</div>
+            </div>
+            <div class="sync-chip" id="tm-sync" hidden></div>
+          </div>
+          <div class="tm-filter">
+            <div class="select-wrap tm-scope-wrap"><select id="tm-scope" class="select" aria-label="Scope"></select></div>
+            <div class="seg" id="tm-range" role="group" aria-label="Time range">
+              <button type="button" data-range="this-month">This month</button>
+              <button type="button" data-range="last-month">Last month</button>
+              <button type="button" data-range="quarter">Quarter</button>
+              <button type="button" data-range="year">Year</button>
+              <button type="button" data-range="all">All time</button>
+              <button type="button" data-range="custom">Custom</button>
+            </div>
+            <span class="tm-custom" id="tm-custom" hidden>
+              <input type="date" id="tm-from" class="input" aria-label="From" /> – <input type="date" id="tm-to" class="input" aria-label="To" />
+            </span>
+          </div>
+          <div class="tm-active-filters" id="tm-filters" hidden></div>
+          <div id="tm-body"><small class="hint">Loading…</small></div>
+          <div id="tm-tip" class="chart-tip" hidden></div>
+        </section>
+        <!-- /view team-metrics -->
         <!-- ===== VIEW: WORKSPACES ===== -->
         <section class="view hidden" data-view="workspaces">
           <div class="topbar">
@@ -698,12 +794,22 @@
                   <button type="button" class="ws-rescan btn-ghost" title="Re-scan the project set">Re-scan</button>
                   <button type="button" class="ws-delete btn-danger" title="Delete workspace">Delete</button>
                 </div>
-                <svg class="chev" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"></path></svg>
               </div>
               <div class="ws-detail" hidden>
-                <pre class="ws-desc-view viewer"></pre>
+                <div class="ws-home" hidden></div>
+                <div class="ws-desc">
+                  <span class="tm-label">Description</span>
+                  <!-- Markdown by contract (the scanner template): rendered through the page's
+                       sanitized pipeline once it is ready, the same words as plain text before. -->
+                  <div class="ws-desc-view viewer"></div>
+                </div>
                 <div class="ws-desc-edit" hidden>
+                  <div class="md-tabs" role="tablist" aria-label="Description editor">
+                    <button type="button" class="md-tab ws-desc-tab" role="tab" data-mode="text" aria-selected="true">Text</button>
+                    <button type="button" class="md-tab ws-desc-tab" role="tab" data-mode="preview" aria-selected="false">Preview</button>
+                  </div>
                   <textarea class="ws-desc-input textarea" rows="10" spellcheck="false"></textarea>
+                  <div class="ws-desc-preview md-preview viewer" hidden></div>
                   <div class="actions" style="justify-content:flex-end;margin-top:10px">
                     <button type="button" class="ws-desc-cancel btn btn-ghost btn-mini">Cancel</button>
                     <button type="button" class="ws-desc-save btn btn-primary btn-mini">Save</button>
@@ -726,6 +832,11 @@
           </div>
           <section class="card" style="max-width:820px">
+            <ol class="wiz-track" id="wiz-track" aria-label="Create workspace steps">
+              <li data-track="1"><span>1</span> Projects</li>
+              <li data-track="2"><span>2</span> Scan</li>
+              <li data-track="3"><span>3</span> Description</li>
+            </ol>
             <!-- Step 1: name + project multi-select -->
             <div class="wiz-step" id="wiz-step-1">
               <div class="field">
@@ -745,6 +856,10 @@
               </div>
             </div>
+            <!-- Team metrics is NOT a wizard step any more: the home is adopted automatically when
+                 exactly one member already records (POST /api/workspaces), otherwise chosen on the
+                 workspace card ("Choose…"). -->
             <!-- Step 2: live scan loader -->
             <div class="wiz-step hidden" id="wiz-step-2">
               <div class="ws-loader" role="status" aria-live="polite">
@@ -765,8 +880,15 @@
             <!-- Step 3: editable description -->
             <div class="wiz-step hidden" id="wiz-step-3">
               <div class="field">
-                <label for="wiz-desc">Interconnection description <span class="opt">(editable)</span></label>
+                <div class="label-row">
+                  <label for="wiz-desc">Interconnection description <span class="opt">(editable)</span></label>
+                  <div class="md-tabs" id="wiz-desc-tabs" role="tablist" aria-label="Description editor">
+                    <button type="button" class="md-tab" role="tab" data-mode="text" aria-selected="true">Text</button>
+                    <button type="button" class="md-tab" role="tab" data-mode="preview" aria-selected="false">Preview</button>
+                  </div>
+                </div>
                 <textarea id="wiz-desc" class="textarea" rows="16" spellcheck="false" placeholder="# Workspace: ..."></textarea>
+                <div id="wiz-desc-preview" class="md-preview viewer" hidden></div>
                 <small class="hint" id="wiz-graphify-note"></small>
               </div>
               <p id="wiz-msg" class="form-msg" aria-live="polite"></p>
@@ -841,18 +963,64 @@
         <!-- ===== VIEW: PROJECTS ===== -->
         <section class="view hidden" data-view="projects">
-          <div class="topbar">
-            <div>
-              <h1>Projects</h1>
-              <div class="sub">Registered projects. Add a folder or remove one from the list — files on disk and run history are never touched.</div>
+          <!-- Two-screen slide track, twin of History's #hist-shell: the list and the project
+               page (#projects/<key>[/memory[/<name>]]) are sibling screens; .detail-open slides. -->
+          <div class="proj-shell" id="proj-shell">
+            <div class="proj-screen proj-screen-list">
+              <div class="topbar">
+                <div>
+                  <h1>Projects</h1>
+                  <div class="sub">Registered projects. Open one for its details and memory; add a folder or remove one from the list — files on disk and run history are never touched.</div>
+                </div>
+                <button type="button" id="project-add-btn" class="btn btn-primary btn-mini">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"></path></svg>
+                  Add project
+                </button>
+              </div>
+              <p id="projects-msg" class="form-msg" aria-live="polite"></p>
+              <div class="run-list" id="projects-list"></div>
             </div>
-            <button type="button" id="project-add-btn" class="btn btn-primary btn-mini">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"></path></svg>
-              Add project
-            </button>
+            <div class="proj-screen proj-screen-detail" id="proj-detail" aria-hidden="true"></div>
           </div>
-          <p id="projects-msg" class="form-msg" aria-live="polite"></p>
-          <div class="run-list" id="projects-list"></div>
+          <!-- clone target for the project page (#projects/<key>). It is a SCREEN inside this
+               section, never a routed view of its own: the page's view count is pinned. -->
+          <template id="proj-detail-tpl">
+            <div class="pd">
+              <header class="pd-header">
+                <div class="pd-row1">
+                  <button type="button" class="pd-back btn-ghost" aria-label="Back to projects">
+                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M15 6l-6 6 6 6" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+                    Back
+                  </button>
+                  <h1 class="pd-title"></h1>
+                </div>
+                <div class="pd-meta mono"><span class="pd-path"></span></div>
+                <div class="pd-actions">
+                  <button type="button" class="pd-new btn-ghost">
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"></path></svg>
+                    New pipeline
+                  </button>
+                  <button type="button" class="pd-history btn-ghost">
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="8.5"></circle><path d="M12 7.5V12l3 2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+                    Open in History
+                  </button>
+                  <span class="pd-spacer"></span>
+                  <!-- The label lives in its own span so a busy state can swap the word and keep the icon. -->
+                  <button type="button" class="pd-remove">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13M10 11v6M14 11v6"></path></svg>
+                    <span class="pd-btn-label">Remove</span>
+                  </button>
+                </div>
+                <!-- On the HEADER (like .hd-error): a remove failure must not sit below a long Memory tab. -->
+                <div class="pd-error" hidden></div>
+              </header>
+              <div class="pd-body">
+                <div class="pd-tabs" role="tablist"></div>
+                <div class="pd-sections"></div>
+              </div>
+            </div>
+          </template>
         </section>
         <!-- /view projects -->
@@ -964,6 +1132,18 @@
                 </div>
                 <div class="gv-ins-pane gv-ins-body" id="gv-ins-body"></div>
               </div>
+              <!-- The canvas nav cluster: the ONLY on-canvas controls (the
+                   rebuild spec's "gestures only" line was reversed by the user
+                   on 2026-09-10). A SIBLING of the stage, like the chip and the
+                   rail, so a pointerdown on a button can never reach the stage's
+                   gesture pipeline. It must come AFTER #gv-ins-rail: the
+                   collapsed-rail offset in style.css is a `~` sibling selector,
+                   which only looks forward. -->
+              <div class="gv-nav" id="gv-nav">
+                <button type="button" class="gv-nav-btn" id="gv-zoom-in" aria-label="Zoom in" title="Zoom in"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" aria-hidden="true"><path d="M12 5v14M5 12h14" stroke-linecap="round"></path></svg></button>
+                <button type="button" class="gv-nav-btn" id="gv-zoom-out" aria-label="Zoom out" title="Zoom out"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" aria-hidden="true"><path d="M5 12h14" stroke-linecap="round"></path></svg></button>
+                <button type="button" class="gv-nav-btn" id="gv-center" aria-label="Fit graph to view" title="Fit graph to view"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="4.5" y="4.5" width="15" height="15" rx="2.5"></rect><circle cx="12" cy="12" r="2.6" fill="currentColor" stroke="none"></circle></svg></button>
+              </div>
             </div>
             <!-- The key belongs to the whole editor, canvas AND rail — not to a
                  palette card that no longer exists. -->
@@ -1011,6 +1191,7 @@
             <button type="button" data-tab="guardrails" aria-pressed="false">Guardrails</button>
             <button type="button" data-tab="models" aria-pressed="false">Models</button>
             <button type="button" data-tab="plugins" aria-pressed="false">Plugins</button>
+            <button type="button" data-tab="memory" aria-pressed="false">Memory</button>
           </div>
           <section class="settings-pane" data-tab="general">
@@ -1021,6 +1202,23 @@
               </div>
             </div>
+            <section class="card settings-card" id="appearance-card">
+              <div class="card-head">
+                <div class="label-row">
+                  <h2>Appearance</h2>
+                  <button type="button" class="info-tip" aria-label="About appearance">i<span class="tip-content hidden">
+                    System follows your operating system. The choice applies to every browser that opens this Worca.
+                  </span></button>
+                </div>
+              </div>
+              <div class="seg" id="theme-seg" role="group" aria-label="Theme">
+                <button type="button" data-theme-mode="system" class="on" aria-pressed="true">System</button>
+                <button type="button" data-theme-mode="light" aria-pressed="false">Light</button>
+                <button type="button" data-theme-mode="dark" aria-pressed="false">Dark</button>
+              </div>
+              <small class="hint" id="themeMsg"></small>
+            </section>
             <section class="card settings-card">
               <div class="field">
                 <div class="label-row">
@@ -1189,6 +1387,33 @@
               <small class="hint" id="titleModelMsg"></small>
             </section>
+            <!-- Auto workflow model (spec D14 / §7.7): which model classifies a task into a workflow.
+                 Empty = the Sonnet-class default; WORCA_AUTO_MODEL in the environment wins. -->
+            <section class="card settings-card" id="auto-model-settings-card">
+              <div class="card-head">
+                <div class="label-row">
+                  <h2>Auto workflow model</h2>
+                  <button type="button" class="info-tip" aria-label="About the Auto workflow model">i<span class="tip-content hidden">
+                    When a run starts on <b>Auto</b>, one short model call reads the task and picks the workflow.
+                    Pick the model that makes that call; empty means the Sonnet-class default. A non-empty
+                    <code>WORCA_AUTO_MODEL</code> in the environment overrides this setting. Each call is billed to the
+                    run as a sub-agent row named "Auto workflow (round n)".
+                  </span></button>
+                </div>
+              </div>
+              <div class="field">
+                <div class="label-row"><label for="autoModel">Model</label></div>
+                <select id="autoModel" class="select" aria-label="Auto workflow model"></select>
+              </div>
+              <small class="hint" id="autoModelEnvNote"></small>
+              <div class="add-project-actions" style="margin-top:14px">
+                <button type="button" id="autoModelTest" class="btn btn-ghost btn-mini" title="Send one tiny prompt to the selected model">Test</button>
+                <button type="button" id="autoModelReset" class="btn btn-ghost btn-mini">Use default</button>
+                <button type="button" id="autoModelSave" class="btn btn-primary btn-mini">Save</button>
+              </div>
+              <small class="hint" id="autoModelMsg"></small>
+            </section>
             <!-- Spawn-debug diagnostics: the stored side of WORCA_DEBUG_SPAWN.
                  claude-runner.mjs reads the setting per spawn (UI server AND CLI);
                  a non-empty env var overrides it. This card only flips the gate —
@@ -1232,6 +1457,20 @@
               <small class="hint" id="chatSettingsMsg"></small>
             </section>
+            <!-- Getting started: the checklist's Hide is undone here. Only the checklist —
+                 the welcome dialog stays seen. No info-tip (the row explains itself);
+                 the .hint is painted by app.js like every other settings status line. -->
+            <section class="card settings-card" id="getting-started-card">
+              <div class="label-row">
+                <h2>Getting started</h2>
+              </div>
+              <div class="gs-settings-row">
+                <p class="gs-settings-text">The checklist on New pipeline walks through the first eight things to do with Worca. Hidden it, or want the guided tour back?</p>
+                <button type="button" id="gsShowAgain" class="btn btn-ghost btn-mini">Show again</button>
+              </div>
+              <small class="hint" id="gsSettingsMsg"></small>
+            </section>
             <!-- About: intentionally no info-tip and no .hint (test/ui-settings-tooltips.test.mjs pins both). -->
             <section class="card settings-card" id="about-card">
               <div class="label-row">
@@ -1250,6 +1489,22 @@
                    href="https://github.com/SinishaDjukic/worca-cc"
                    target="_blank" rel="noopener noreferrer">github.com/SinishaDjukic/worca-cc</a>
               </div>
+              <div class="about-row">
+                <span class="about-key">Feedback</span>
+                <!-- hrefs are repainted from app.bugsUrl (package.json bugs.url); the
+                     static fallback keeps the links usable before /api/settings lands.
+                     Anchors only: ui-settings-about.test.mjs forbids a control here,
+                     and neither the label nor the href carries a version string. -->
+                <a class="about-val about-link" id="aboutBugLink"
+                   href="https://github.com/SinishaDjukic/worca-cc/issues/new?labels=bug"
+                   target="_blank" rel="noopener noreferrer">Report a bug</a>
+              </div>
+              <div class="about-row">
+                <span class="about-key"></span>
+                <a class="about-val about-link" id="aboutIdeaLink"
+                   href="https://github.com/SinishaDjukic/worca-cc/issues/new?labels=enhancement"
+                   target="_blank" rel="noopener noreferrer">Suggest an improvement</a>
+              </div>
             </section>
           </section>
           <!-- /pane general -->
@@ -1318,6 +1573,19 @@
             <div class="run-list" id="marketplaces-list"></div>
           </section>
           <!-- /pane plugins -->
+          <!-- ===== TAB: MEMORY (agent-memory-design.md §10) ===== -->
+          <section class="settings-pane hidden" data-tab="memory">
+            <div class="topbar">
+              <div>
+                <h1>Memory</h1>
+                <div class="sub">What worca remembers across runs and chats — the global rules and preferences every agent sees. A project's own memory lives on its project page (Projects → open a project → Memory).</div>
+              </div>
+            </div>
+            <p id="memory-msg" class="form-msg" aria-live="polite"></p>
+            <div id="memory-host" class="mem-host"></div>
+          </section>
+          <!-- /pane memory -->
         </section>
         <!-- /view settings -->
       </main>
@@ -1374,6 +1642,58 @@
       </div>
     </div>
+    <!-- ===== Report this run ===== -->
+    <!-- The <pre> shows the EXACT payload that will leave the machine; nothing is
+         sent without a click. Follows the #viewer-card shape (scrollable monospace
+         body) plus the #export-modal checkbox rows.
+         NOTE: any new overlay must also be added to the two capture-phase Escape
+         guards in app.js (History and Running) or Escape will close it AND navigate
+         the detail screen back to its list. -->
+    <div id="report-modal" class="viewer-modal report-modal hidden" role="dialog" aria-modal="true" aria-labelledby="report-title">
+      <div class="card">
+        <!-- Sticky header: title, Close, and every action. The card is the scroll
+             container (.viewer-modal .card{overflow:auto}), so the actions stay
+             reachable while the reporter is reading the JSON preview, and an error
+             or a filed-issue link lands where they are already looking. -->
+        <div class="report-top">
+          <div class="card-head">
+            <h2 id="report-title">Report this run</h2>
+            <div class="report-head-actions">
+              <button type="button" id="report-create-issue" class="btn btn-primary btn-mini">Create GitHub issue</button>
+              <button type="button" id="report-close" class="btn btn-mini">Close</button>
+            </div>
+          </div>
+          <!-- Both outcomes of the button above them, so neither needs a scroll to read. -->
+          <div class="report-error" hidden></div>
+          <p id="report-filed" class="report-filed" hidden></p>
+        </div>
+        <div class="report-field">
+          <label for="report-reason">What went wrong?</label>
+          <select id="report-reason" class="select"></select>
+        </div>
+        <div class="report-field">
+          <label for="report-expectation">What did you expect? (optional)</label>
+          <textarea id="report-expectation" class="textarea" rows="3" placeholder="What should have happened instead?"></textarea>
+        </div>
+        <div id="report-optins"></div>
+        <div class="report-field">
+          <label for="report-preview">This is exactly what will be sent</label>
+          <pre id="report-preview" class="viewer"></pre>
+        </div>
+        <div class="confirm-actions">
+          <button type="button" id="report-copy" class="btn btn-ghost btn-mini">Copy JSON</button>
+          <button type="button" id="report-download" class="btn btn-ghost btn-mini">Download JSON</button>
+          <!-- The FALLBACK, hidden until the server says it could not file the issue
+               itself. An <a>, not a button: a real anchor gives the browser a genuine
+               user-gesture new tab. app.js strips the href while a rebuild is in
+               flight, so the link can never fire with a payload that disagrees with
+               the preview. Its prefilled body can only ASK for the JSON to be pasted
+               — a URL dies at ~8 KB and half of all runs serialize larger. -->
+          <a id="report-issue" class="btn btn-ghost btn-mini" target="_blank" rel="noopener noreferrer" hidden>Open a prefilled issue</a>
+        </div>
+      </div>
+    </div>
     <!-- ===== Export workflow → Claude Code skill modal ===== -->
     <div id="export-modal" class="viewer-modal hidden" role="dialog" aria-modal="true" aria-labelledby="export-title">
       <div class="card">
@@ -1484,6 +1804,25 @@
           <span class="shipit-arrow">→</span>
           <span class="shipit-base"></span>
         </div>
+        <!-- Fork support: where the branch is pushed and which repo the PR opens in
+             (GitHub's "compare across forks"). Filled from GET /api/pr/remotes on
+             open; hidden until the list arrives and stays hidden when it cannot be
+             loaded (the server then applies its own defaults). -->
+        <div class="shipit-remotes" hidden>
+          <div class="shipit-remote-field">
+            <label for="shipit-push-remote">Push branch to</label>
+            <div class="select-wrap">
+              <select id="shipit-push-remote" class="select shipit-push-remote" aria-label="Push remote"></select>
+            </div>
+          </div>
+          <div class="shipit-remote-field">
+            <label for="shipit-base-remote">Open PR in</label>
+            <div class="select-wrap">
+              <select id="shipit-base-remote" class="select shipit-base-remote" aria-label="Base repository"></select>
+            </div>
+          </div>
+          <small class="shipit-remotes-hint hint"></small>
+        </div>
         <!-- `hint err`, not `err`: style.css has no standalone .err rule, only
              .hint.err (:284). .hint sets display:block, so .shipit-err ships an
              explicit [hidden] twin. -->
@@ -1505,6 +1844,65 @@
          twice, and no flow opens both. Do not "fix" this with a z-index of its
          own; the .cb-override confirm on the detail page depends on #confirm-modal
          staying on top. -->
+    <!-- Welcome (docs/getting-started.md): shown once, on the first visit to New
+         pipeline, until a door or Skip marks it seen. Three doors in cognitive-load
+         order; each hands its step id to the matching guide. -->
+    <div id="welcome-modal" class="viewer-modal hidden" role="dialog" aria-modal="true" aria-labelledby="welcome-title">
+      <div class="card ob-welcome">
+        <p class="ob-eyebrow">Welcome to Worca</p>
+        <h2 id="welcome-title" class="ob-headline">Your pipelines, <em>on autopilot.</em></h2>
+        <svg class="ob-hero" viewBox="0 0 560 104" role="img" aria-label="A task becomes a chain of agents: plan, refine, implement, review — looping until the work clears its gates">
+          <circle class="gs-pop gs-node" style="--d:.1s" cx="40" cy="44" r="9"></circle>
+          <path class="gs-draw gs-wire ob-thread" pathLength="1" style="--d:.5s;--t:1.1s" d="M52 44 C 90 44, 110 44, 150 44"></path>
+          <circle class="gs-pop gs-node" style="--d:1.2s" cx="162" cy="44" r="9"></circle>
+          <path class="gs-draw gs-wire ob-thread" pathLength="1" style="--d:1.5s;--t:1s" d="M174 44 C 210 44, 230 44, 270 44"></path>
+          <circle class="gs-pop gs-node" style="--d:2.2s" cx="282" cy="44" r="9"></circle>
+          <path class="gs-draw gs-wire ob-thread" pathLength="1" style="--d:2.5s;--t:1s" d="M294 44 C 330 44, 350 44, 390 44"></path>
+          <circle class="gs-pop gs-node" style="--d:3.2s" cx="402" cy="44" r="9"></circle>
+          <path class="gs-draw gs-wire ob-loop" pathLength="1" style="--d:3.6s;--t:1.2s" d="M402 55 C 402 92, 282 92, 282 55"></path>
+          <path class="gs-draw gs-wire ob-thread gs-accent" pathLength="1" style="--d:4.4s;--t:.9s" d="M414 44 C 450 44, 470 44, 505 44"></path>
+          <circle class="gs-pop gs-ring-mark" style="--d:5s" cx="518" cy="44" r="16"></circle>
+          <circle class="gs-pop gs-node gs-accent" style="--d:5.1s" cx="518" cy="44" r="9"></circle>
+        </svg>
+        <div class="ob-doors">
+          <button type="button" class="ob-door" data-door="project">
+            <span class="ob-door-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7.5A1.5 1.5 0 0 1 4.5 6h4l2 2.2H19.5A1.5 1.5 0 0 1 21 9.7v8.3A1.5 1.5 0 0 1 19.5 19.5h-15A1.5 1.5 0 0 1 3 18z"></path></svg></span>
+            <span>Add your first project</span>
+            <span class="ob-door-arrow" aria-hidden="true">›</span>
+          </button>
+          <button type="button" class="ob-door" data-door="run">
+            <span class="ob-door-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8"></circle><path d="M10 9l5 3-5 3z"></path></svg></span>
+            <span>Watch a run end to end, offline</span>
+            <span class="ob-door-arrow" aria-hidden="true">›</span>
+          </button>
+          <button type="button" class="ob-door" data-door="realRun">
+            <span class="ob-door-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l1.7 4.3L18 9l-4.3 1.7L12 15l-1.7-4.3L6 9l4.3-1.7z"></path><path d="M18.5 15.5l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z"></path></svg></span>
+            <span>Run a real pipeline</span>
+            <span class="ob-door-arrow" aria-hidden="true">›</span>
+          </button>
+        </div>
+        <button type="button" class="ob-skip">Skip</button>
+      </div>
+    </div>
+    <!-- Connect Claude Code: the one checklist step with no control to ring. The
+         tick is derived (the CLI resolves on PATH); "Check again" refetches it. -->
+    <div id="claude-setup-modal" class="viewer-modal hidden" role="dialog" aria-modal="true" aria-labelledby="claude-setup-title">
+      <div class="card ob-claude">
+        <div class="card-head">
+          <h2 id="claude-setup-title">Connect Claude Code</h2>
+          <button type="button" id="claude-setup-close" class="btn btn-mini">Close</button>
+        </div>
+        <p class="ob-claude-lead">Worca drives the <strong>Claude Code</strong> CLI. Real runs need it on your <code>PATH</code>; mock runs need nothing.</p>
+        <pre class="ob-claude-cmd"><code>npm install -g @anthropic-ai/claude-code</code></pre>
+        <p class="ob-claude-note">On native Windows the <a href="https://docs.anthropic.com/en/docs/claude-code/setup" target="_blank" rel="noopener noreferrer">native installer</a> works too. A binary elsewhere: set <code>WORCA_CLAUDE_BIN</code> to its full path and restart the UI.</p>
+        <div class="ob-claude-status" id="claude-setup-status" aria-live="polite"></div>
+        <div class="stop-actions">
+          <button type="button" id="claude-setup-check" class="btn btn-primary btn-mini">Check again</button>
+        </div>
+      </div>
+    </div>
     <div id="stop-modal" class="viewer-modal hidden" role="dialog" aria-modal="true" aria-labelledby="stop-title">
       <div class="card stop-card">
         <h2 id="stop-title" class="stop-title">Stop this pipeline?</h2>