From e6f7ee7622a1899b73c5f6e37109d258256c8fcb Mon Sep 17 00:00:00 2001
From: homen <hshum2018@gmail.com>
Date: Fri, 17 Jul 2026 22:50:22 -0700
Subject: [PATCH] =?UTF-8?q?design(sheet):=20slim=20per-sheet=20header=20?=
 =?UTF-8?q?=E2=80=94=20identity=20+=20engine=20provenance=20promoted=20fro?=
 =?UTF-8?q?m=20footer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reference-parity slice 2: artifact title + versionedSync vN chip in a hairline
header row; footer keeps Undo + edit hint only.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/app/styles.css         |  4 ++++
 src/ui/panels/Artifact.tsx | 20 +++++++++++++-------
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/app/styles.css b/src/app/styles.css
index eeb11a39..53a33e7f 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -1163,6 +1163,10 @@ button.r-offline-pill:hover, button.r-offline-pill:focus-visible { border-color:
 .r-sheet-foot { padding: 10px 14px; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
 /* The engine badge is provenance, not a headline — quiet mono, no uppercase shout. */
 .r-dataframe-badge .kicker { text-transform: none; letter-spacing: 0; font-family: var(--font-mono); font-weight: 600; font-size: 10px; }
+/* Slim per-sheet header: artifact identity + engine provenance, one hairline row. */
+.r-sheet-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
+.r-sheet-head-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
+.r-sheet-head .grow { flex: 1; }
 .r-vpill { font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: transparent; border: 1px solid var(--line); color: var(--text-muted); }
 .r-vpill.next { background: var(--accent-tint); border-color: var(--accent-border); color: var(--accent-ink); }
 .r-cols-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-muted); font-family: var(--font-mono); font-size: 10.5px; font-weight: 800; white-space: nowrap; }
diff --git a/src/ui/panels/Artifact.tsx b/src/ui/panels/Artifact.tsx
index 4fbafd9b..9c8973d5 100644
--- a/src/ui/panels/Artifact.tsx
+++ b/src/ui/panels/Artifact.tsx
@@ -2836,6 +2836,19 @@ function Sheet({ roomId, me, art, proof, onError }: { roomId: string; me: Actor;
   const doUndo = () => { void store.undoLastEdit(roomId, me).then((f) => { if (!f.ok) onError(f); }); };
   return (
     <>
+      {/* Slim artifact header: identity + engine provenance live UP HERE (reference-parity),
+          leaving the footer for actions and hints only. */}
+      <div className="r-sheet-head">
+        <span className="r-sheet-head-title">{art.title}</span>
+        <span className="grow" />
+        <span className="r-dataframe-badge">
+          <Package size={12} aria-hidden="true" />
+          <span>
+            <span className="kicker">versionedSync</span>
+            <span className="r-vpill next">v{art.version}</span>
+          </span>
+        </span>
+      </div>
       <div className="r-art-body">
         <div className="r-sheet-wrap" ref={sheetWrapRef}>
           <AttentionOverlay boxes={overlayBoxes} resolver={overlayResolver} mode="live" />
@@ -2898,13 +2911,6 @@ function Sheet({ roomId, me, art, proof, onError }: { roomId: string; me: Actor;
         </div>
       </div>
       <div className="r-sheet-foot fx-shfoot">
-        <span className="r-dataframe-badge">
-          <Package size={12} aria-hidden="true" />
-          <span>
-            <span className="kicker">versionedSync</span>
-            <span className="r-vpill next">v{art.version}</span>
-          </span>
-        </span>
         <button className="r-mini-btn" disabled={!store.canUndo(roomId)} title="Undo last applied room edit (Ctrl+Z)" onClick={doUndo}><Undo2 size={12} /> Undo</button>
         <span className="grow" />
         <span className="mono tiny faint">click a Variance or Note cell to edit by hand</span>