refine(frontend): workspace audit — thinner right pane, validation on left

De-clutter run details: Data pipeline rows without Fivetran sublines, thin
Release receipt, Skill block with replay-safe built-in list and live-only
upload. Move Approve & release to the conversation ValidationCard; goal-as-
title topbar with pane rails and overflow actions.

Author: samartho4

frontend/src/App.tsx

@@ -1,21 +1,22 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { Icons } from "./components/Icons";
+import { OverflowMenu } from "./components/OverflowMenu";
 import { ThemeCtx, type Theme } from "./components/theme";
 import { LeftPane } from "./components/LeftPane";
 import { CenterPane } from "./components/CenterPane";
 import { RightPane } from "./components/RightPane";
 import { RunsDrawer } from "./components/RunsDrawer";
 import { type Activation, type DryLabView, type ExperimentRequest, emptyView } from "./lib/contract";
 import { isLive, loadView } from "./lib/loadView";
-import { recordedRunLabel } from "./lib/spine";
 import { continueLive, hasLiveSession, postExperiment } from "./lib/sse";
 import { copyToClipboard, createShare } from "./lib/share";
 import { navigate } from "./lib/router";
 import { cleanGoal } from "./lib/goal";
 
-// Capture month of the committed replay fixture (frontend/public/replay/replay.json) — see PLAN.md run log.
-// Honest: the default /app is a RECORDED run, not a live one. Bump this when the fixture is recaptured.
-const FIXTURE_DATE = "Jun 2026";
+function truncateTitle(text: string, max = 56): string {
+  if (text.length <= max) return text;
+  return text.slice(0, max - 1).trimEnd() + "…";
+}
 
 function useTheme(): [Theme, (t: Theme | ((p: Theme) => Theme)) => void] {
   const [theme, setTheme] = useState<Theme>(() => (localStorage.getItem("drylab-theme") as Theme) || "light");
@@ -143,64 +144,67 @@ export default function App({ sharedId, runId }: { sharedId?: string; runId?: st
     }
   }, [view]);
 
+  const runTitle = useMemo(() => {
+    const goal = cleanGoal(view.research_goal);
+    if (goal) return truncateTitle(goal);
+    return "Dry Lab";
+  }, [view.research_goal]);
+
+  const modeLabel = isPastRun ? "Past run" : sharedId ? "Shared" : isLive() ? "Live" : "Recorded";
+
+  const overflowItems = useMemo(() => {
+    const items: { label: string; onClick: () => void; disabled?: boolean }[] = [];
+    if (!sharedId) {
+      items.push({
+        label: shareState === "copied" ? "Link copied" : shareState === "busy" ? "Sharing…" : "Copy share link",
+        onClick: onShare,
+        disabled: shareState === "busy",
+      });
+    }
+    items.push({ label: "Print report", onClick: () => window.print() });
+    return items;
+  }, [sharedId, shareState, onShare]);
+
   return (
     <ThemeCtx.Provider value={theme}>
       <div className="app">
         <header className="topbar">
-          <button className="brand brand-home" onClick={() => navigate("/")} title="Dry Lab home">
-            <span className="brand-mark"><Icons.dna /></span>
-            <div className="brand-text">
-              <span className="brand-name">Dry Lab</span>
-              <span className="brand-project mono">
-                {isPastRun
-                  ? "Past run · read-only (from the runs index)"
-                  : sharedId
-                    ? "Shared run · read-only"
-                    : isLive()
-                      ? "Live run · /run_sse"
-                      : `Recorded run · ${recordedRunLabel(
-                          new URLSearchParams(location.search).get("fixture") || "replay",
-                          view.research_goal,
-                        )} · ${FIXTURE_DATE} — watch it replay`}
-              </span>
-            </div>
-          </button>
-          {/* Layout toggles (VS Code / Linear grammar): collapse either side pane to focus the center. The
-              buttons stay in the bar whatever the state, so a hidden pane is always one click from returning. */}
-          <div className="topbar-toggles">
-            <button className={"btn btn-ghost btn-icon" + (leftOpen ? " on" : "")} onClick={toggleLeft} aria-pressed={leftOpen} title={leftOpen ? "Hide the conversation" : "Show the conversation"}>
-              <Icons.panelLeft cls="icon-sm" />
+          <div className="topbar-left">
+            <button
+              className={"btn btn-ghost btn-icon" + (runsOpen ? " on" : "")}
+              onClick={() => setRunsOpen((o) => !o)}
+              aria-pressed={runsOpen}
+              title="History"
+              aria-label="Run history"
+            >
+              <Icons.list cls="icon-sm" />
             </button>
-            <button className={"btn btn-ghost btn-icon" + (rightOpen ? " on" : "")} onClick={toggleRight} aria-pressed={rightOpen} title={rightOpen ? "Hide the run details" : "Show the run details"}>
-              <Icons.panelRight cls="icon-sm" />
+            <button className="brand brand-home" onClick={() => navigate("/")} title="Dry Lab home">
+              <span className="brand-mark"><Icons.dna /></span>
+              <div className="brand-text">
+                <span className="brand-title serif">{runTitle}</span>
+                <span className="mode-chip mono">{modeLabel}</span>
+              </div>
             </button>
           </div>
-          <div className="topbar-right">
-            {readOnly && <span className="view-only-badge mono"><Icons.shield cls="icon-sm" />View only</span>}
-            <button className={"btn btn-ghost" + (runsOpen ? " on" : "")} onClick={() => setRunsOpen(true)} title="Run history">
-              <Icons.list cls="icon-sm" />Runs
-            </button>
-            <button className="btn btn-ghost" onClick={() => setTheme((t) => (t === "light" ? "dark" : "light"))} title="Toggle theme">
+          <div className="topbar-actions">
+            <button className="btn btn-ghost btn-icon" onClick={() => setTheme((t) => (t === "light" ? "dark" : "light"))} title="Toggle theme">
               {theme === "light" ? <Icons.moon cls="icon-sm" /> : <Icons.sun cls="icon-sm" />}
             </button>
-            {/* A reconstructed past run can be re-run live (a NEW run with the same goal) — never a faked resume. */}
+            <OverflowMenu items={overflowItems} />
             {isPastRun && view.research_goal && (
               <button className="btn btn-accent" onClick={() => navigate(`/app?live=1&goal=${encodeURIComponent(cleanGoal(view.research_goal))}`)} title="Run this goal again, live">
-                <Icons.flask cls="icon-sm" />Re-run live
+                <Icons.flask cls="icon-sm" />Re-run
               </button>
             )}
-            {/* Share is available for live/replay/past-run views, but NOT for an already-shared /r/:id snapshot. */}
-            {!sharedId && (
-              <button className="btn btn-ghost mobile-hide" onClick={onShare} disabled={shareState === "busy"} title="Create a read-only share link">
-                {shareState === "copied" ? <Icons.check cls="icon-sm" /> : <Icons.share cls="icon-sm" />}
-                {shareState === "copied" ? "Link copied" : shareState === "busy" ? "Sharing…" : "Share"}
-              </button>
-            )}
-            <button className="btn btn-ghost mobile-hide" onClick={() => window.print()}><Icons.download cls="icon-sm" />Export</button>
-            {/* This default workspace is a recorded run — make "Run it live" the first-class accent CTA. */}
             {!readOnly && !isLive() && (
               <button className="btn btn-accent" onClick={() => navigate("/app?live=1")} title="Start a live run">
-                <Icons.flask cls="icon-sm" />Run it live
+                <Icons.flask cls="icon-sm" />Run live
+              </button>
+            )}
+            {!readOnly && isLive() && (
+              <button className="btn btn-accent" onClick={() => navigate("/app?live=1")} title="Start a new run">
+                <Icons.flask cls="icon-sm" />New run
               </button>
             )}
           </div>
@@ -212,10 +216,27 @@ export default function App({ sharedId, runId }: { sharedId?: string; runId?: st
           <div className="load-state">Loading run…</div>
         ) : (
           <div className="workspace">
+            {!leftOpen && (
+              <div className="pane-rail pane-rail-left">
+                <button className="btn btn-ghost btn-icon" onClick={toggleLeft} title="Show conversation" aria-label="Show conversation">
+                  <Icons.panelLeft cls="icon-sm" />
+                </button>
+              </div>
+            )}
             {leftOpen && (
               <>
                 <div className="pane-host pane-host-left fade-in" style={{ width: leftW }}>
-                  <LeftPane view={view} live={isLive() && !readOnly} onApprovePlan={onApprovePlan} onEditPlan={onEditPlan} onSend={onSend} onOpenFile={openFile} />
+                  <LeftPane
+                    view={view}
+                    live={isLive() && !readOnly}
+                    onApprovePlan={onApprovePlan}
+                    onEditPlan={onEditPlan}
+                    onApproveExperiment={onApproveExperiment}
+                    onSend={onSend}
+                    onOpenFile={openFile}
+                    paneOpen={leftOpen}
+                    onTogglePane={toggleLeft}
+                  />
                 </div>
                 <div className="divider" onMouseDown={(e) => dragLeft(e, "left")}><span /></div>
               </>
@@ -225,10 +246,24 @@ export default function App({ sharedId, runId }: { sharedId?: string; runId?: st
               <>
                 <div className="divider" onMouseDown={(e) => dragRight(e, "right")}><span /></div>
                 <div className="pane-host pane-host-right fade-in" style={{ width: rightW }}>
-                  <RightPane view={view} onApproveExperiment={onApproveExperiment} onOpenFile={openFile} canUpload={!readOnly} />
+                  <RightPane
+                    view={view}
+                    onOpenFile={openFile}
+                    canUpload={!readOnly}
+                    live={isLive() && !readOnly}
+                    paneOpen={rightOpen}
+                    onTogglePane={toggleRight}
+                  />
                 </div>
               </>
             )}
+            {!rightOpen && (
+              <div className="pane-rail pane-rail-right">
+                <button className="btn btn-ghost btn-icon" onClick={toggleRight} title="Show run details" aria-label="Show run details">
+                  <Icons.panelRight cls="icon-sm" />
+                </button>
+              </div>
+            )}
           </div>
         )}
 

frontend/src/components/BringSkill.tsx

@@ -1,11 +1,10 @@
-// PHASE B — "Bring a skill": upload a SKILL.md and run it in the SAME governed runtime as the vetted skills.
-// Honesty (researched, calm-not-alarmist — the VS Code Workspace-Trust / GitHub-unverified register): built-in
-// skills are VETTED; an uploaded skill is marked UNVERIFIED (amber, not red) and runs in the same sandboxed,
-// network-less, credential-less kernel — the @Critic reliability review still applies. A user skill can never
-// take a vetted skill's name, so it can't masquerade as trusted.
+// Skill block — which procedure drove THIS run (SKILL.md), plus live-only BYO upload.
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Icons } from "./Icons";
+import { type DryLabView } from "../lib/contract";
+import { skillDirective } from "../lib/goal";
 import { listSkills, uploadSkill, type SkillEntry, type SkillList } from "../lib/skills";
+import { activeSkillForGoal, VETTED_SKILL_NAMES } from "../lib/vettedSkills";
 
 function SkillRow({ s }: { s: SkillEntry }) {
   return (
@@ -15,24 +14,30 @@ function SkillRow({ s }: { s: SkillEntry }) {
         {s.tier === "vetted" ? "Built-in" : "Unverified"}
       </span>
       <span className="skill-name mono">{s.name}</span>
-      {s.domain && <span className="skill-domain">{s.domain}</span>}
     </li>
   );
 }
 
-// canUpload: true on any writable workspace (the default recorded workspace OR a live run), false on read-only
-// shared / past-run views. An upload binds to the tab-stable live session id; "Run it live" reuses that session,
-// so a skill brought from the recorded workspace is available to the run the user then starts.
-export function BringSkill({ canUpload }: { canUpload: boolean }) {
+export function BringSkill({ view, canUpload, live = false }: { view: DryLabView; canUpload: boolean; live?: boolean }) {
+  const [open, setOpen] = useState(true);
   const [list, setList] = useState<SkillList | null>(null);
   const [busy, setBusy] = useState(false);
   const [errors, setErrors] = useState<string[] | null>(null);
   const [accepted, setAccepted] = useState<string | null>(null);
   const fileRef = useRef<HTMLInputElement | null>(null);
 
+  const active =
+    skillDirective(view.research_goal) ||
+    activeSkillForGoal(view.research_goal) ||
+    (view.skill_tier === "user" ? "user skill" : null);
+  const activeTier = view.skill_tier === "user" ? "Unverified" : "Built-in";
+
   const refresh = useCallback(() => {
-    listSkills().then(setList).catch(() => setList((p) => p ?? { vetted: [], user: [] }));
-  }, []);
+    if (!canUpload || !live) return;
+    listSkills()
+      .then(setList)
+      .catch(() => setList(null));
+  }, [canUpload, live]);
   useEffect(() => { refresh(); }, [refresh]);
 
   const onFile = useCallback(async (file: File) => {
@@ -54,80 +59,90 @@ export function BringSkill({ canUpload }: { canUpload: boolean }) {
   }, [refresh]);
 
   const userSkills = list?.user || [];
-  const vetted = list?.vetted || [];
+  const vettedFromApi = list?.vetted?.length ? list.vetted : null;
+  const vettedNames = vettedFromApi?.map((s) => s.name) ?? [...VETTED_SKILL_NAMES];
+  const meta = active || "—";
 
   return (
     <section className="rblock skills-block">
-      <div className="rblock-head static">
-        <Icons.spark cls="icon-sm" />
-        <span className="rblock-title">Skills</span>
-        <span className="rblock-meta mono">{vetted.length + userSkills.length}</span>
-      </div>
-      <div className="rblock-pad">
-        <p className="skills-note">
-          Built-in skills are Dry Lab's reviewed set. You can bring your own <span className="mono">SKILL.md</span> —
-          author-supplied code, not reviewed by us. It runs in the <strong>same sandboxed, network-less</strong> kernel
-          as the built-ins and is marked
-          <span className="skill-tier user inline"><Icons.shield cls="icon-sm" />Unverified</span>;
-          the reliability review still applies.
-        </p>
+      <button className="rblock-head" onClick={() => setOpen(!open)}>
+        {open ? <Icons.chevD cls="icon-sm" /> : <Icons.chevR cls="icon-sm" />}
+        <span className="rblock-title">Skill</span>
+        <span className="rblock-meta mono">{meta}</span>
+      </button>
+      {open && (
+        <div className="rblock-pad fade-in">
+          {active ? (
+            <div className="skill-active-row">
+              <span className={"skill-tier " + (view.skill_tier === "user" ? "user" : "vetted")}>
+                {view.skill_tier === "user" ? <Icons.shield cls="icon-sm" /> : <Icons.check cls="icon-sm" />}
+                {activeTier}
+              </span>
+              <span className="skill-name mono">{active}</span>
+            </div>
+          ) : (
+            <p className="skills-hint mono">Skill routes at @Investigator from your goal.</p>
+          )}
 
-        {canUpload && (
-          <div className="skills-upload">
-            <input
-              ref={fileRef}
-              type="file"
-              accept=".md,.zip,text/markdown"
-              className="skills-file"
-              id="byo-skill-file"
-              disabled={busy}
-              onChange={(e) => { const f = e.target.files?.[0]; if (f) void onFile(f); }}
-            />
-            <label htmlFor="byo-skill-file" className={"btn btn-accent skills-upload-btn" + (busy ? " is-busy" : "")}>
-              {busy ? <span className="composer-spin" /> : <Icons.plus cls="icon-sm" />}
-              {busy ? "Validating…" : "Bring a skill (SKILL.md / .zip)"}
-            </label>
-          </div>
-        )}
+          {canUpload && live && (
+            <div className="skills-upload">
+              <input
+                ref={fileRef}
+                type="file"
+                accept=".md,.zip,text/markdown"
+                className="skills-file"
+                id="byo-skill-file"
+                disabled={busy}
+                onChange={(e) => { const f = e.target.files?.[0]; if (f) void onFile(f); }}
+              />
+              <label htmlFor="byo-skill-file" className={"btn btn-accent skills-upload-btn" + (busy ? " is-busy" : "")}>
+                {busy ? <span className="composer-spin" /> : <Icons.plus cls="icon-sm" />}
+                {busy ? "Validating…" : "Bring a skill"}
+              </label>
+            </div>
+          )}
 
-        {accepted && (
-          <div className="skills-accepted">
-            <Icons.check cls="icon-sm" />
-            Added <span className="mono">{accepted}</span> — available to this run as an unverified skill.
-          </div>
-        )}
-        {errors && (
-          <div className="skills-rejected">
-            <div className="skills-rejected-head"><Icons.x cls="icon-sm" />Rejected — not stored</div>
-            <ul>{errors.map((e, i) => <li key={i} className="mono">{e}</li>)}</ul>
-          </div>
-        )}
+          {accepted && (
+            <div className="skills-accepted">
+              <Icons.check cls="icon-sm" />
+              Added <span className="mono">{accepted}</span> — unverified, this session only.
+            </div>
+          )}
+          {errors && (
+            <div className="skills-rejected">
+              <div className="skills-rejected-head"><Icons.x cls="icon-sm" />Rejected</div>
+              <ul>{errors.map((e, i) => <li key={i} className="mono">{e}</li>)}</ul>
+            </div>
+          )}
 
-        {userSkills.length > 0 && (
-          <>
-            <div className="skills-group-label">Your skills</div>
+          {userSkills.length > 0 && (
             <ul className="skill-list">{userSkills.map((s) => <SkillRow key={"u:" + s.name} s={s} />)}</ul>
-          </>
-        )}
-        <details className="skills-vetted-details">
-          <summary>Built-in skills ({vetted.length})</summary>
-          <ul className="skill-list">{vetted.map((s) => <SkillRow key={"v:" + s.name} s={s} />)}</ul>
-        </details>
-      </div>
+          )}
+
+          <details className="skills-vetted-details">
+            <summary className="mono">Built-in skills ({vettedNames.length})</summary>
+            <ul className="skill-list">
+              {vettedNames.map((name) => (
+                <li className="skill-row" key={name}>
+                  <span className="skill-tier vetted"><Icons.check cls="icon-sm" />Built-in</span>
+                  <span className="skill-name mono">{name}</span>
+                </li>
+              ))}
+            </ul>
+          </details>
+        </div>
+      )}
     </section>
   );
 }
 
-// The run-level banner: shown when an UNVERIFIED user skill actually drove the analysis (view.skill_tier).
-// One calm line — informative, not alarmist (matches the upload note above).
 export function UnverifiedRunBanner() {
   return (
     <div className="unverified-banner">
       <span className="unverified-banner-ic"><Icons.shield cls="icon-sm" /></span>
       <span>
-        This run used an <strong>unverified skill</strong> — author-supplied code, not part of Dry Lab's reviewed
-        set. It ran in the same sandboxed, network-less environment as the built-in skills; the results below are
-        shown in full with provenance recorded, and the @Critic reliability review still applied.
+        This run used an <strong>unverified skill</strong> — author-supplied procedure, not Dry Lab's reviewed set.
+        Same sandbox; @Critic still applied.
       </span>
     </div>
   );