fix(desktop): compact artifact rows + auto-group

examples/desktop/src/renderer/artifacts.js

@@ -3,17 +3,18 @@
 // demo shell only hosts the entry point per the RFC (2026-07-13 §Deliberate
 // exclusions, "No embedded GUI pane").
 //
+// Density-spec §2 L0 shape (user-flagged 2026-07-18): each artifact renders
+// as a single ~28px row — small icon + filename + kind/version chips + live
+// dot + tiny right-aligned `open ↗` link. Clicking the row toggles a native
+// <details> L1 body that carries the full path and the ghost "Open in
+// browser" button. Consecutive .artifact-card siblings render as a visual
+// group (shared border, zero gap between rows) via CSS `:has()`.
+//
 // Two triggers:
 //   1. tool/result carrying a file write inside the artifact dir (detected
 //      by main.js and re-broadcast as `artifact:event`).
 //   2. debug menu "mock: artifact" button (window.dsh.mockArtifact).
 //
-// Card layout:
-//   [icon] filename.html · html            v3   [ Open in browser ]
-//                          (kind badge)
-// Live indicator dot: green when the shell's server has broadcast a version
-// bump within the last 2s (live reload just fired).
-//
 // De-dup: one card per artifactId per stream. If a re-declare fires the
 // existing card bumps its version + flashes.
 
@@ -26,9 +27,9 @@
   const cards = new Map()
 
   // Kind-to-SVG map — inline stroke icons (currentColor, 1.6px stroke) so
-  // artifact cards match the minimalist icon language rather than sitting
+  // artifact rows match the minimalist icon language rather than sitting
-  // on emoji glyphs. Fallback below in ensureCard() falls back to the
+  // on emoji glyphs. Fallback is the paperclip glyph used elsewhere for
-  // paperclip glyph used elsewhere for context-family cards.
+  // context-family cards.
   const ICON_SVG = {
     html:
       '<svg viewBox="0 0 20 20" width="14" height="14" aria-hidden="true">'
@@ -67,65 +68,140 @@
     const el = renderCard(entry)
     cards.set(entry.artifactId, el)
     const s = streamEl()
-    if (s) s.appendChild(el)
+    if (s) appendGrouped(s, el)
     scrollToBottom()
     return el
   }
 
+  // Fuse consecutive artifact cards into an `.artifact-group` wrapper so
+  // the list reads as one clumped block. The stream itself has a 12px
+  // flex `gap` that a plain negative margin can't undo; the wrapper owns
+  // its own zero-gap layout so grouped rows sit flush.
+  function appendGrouped(stream, el) {
+    const last = stream.lastElementChild
+    if (last && last.classList && last.classList.contains('artifact-group')) {
+      last.appendChild(el)
+      return
+    }
+    if (last && last.classList && last.classList.contains('artifact-card')) {
+      // Previous artifact is a lone card — promote it and the new one
+      // into a fresh group.
+      const group = document.createElement('div')
+      group.className = 'artifact-group'
+      stream.replaceChild(group, last)
+      group.appendChild(last)
+      group.appendChild(el)
+      return
+    }
+    stream.appendChild(el)
+  }
+
+  function invokeOpen(entry, actionEl, restoreLabel) {
+    if (!actionEl) return
+    actionEl.setAttribute('aria-disabled', 'true')
+    actionEl.classList.add('is-busy')
+    const done = (label) => {
+      actionEl.textContent = label
+      setTimeout(() => {
+        actionEl.textContent = restoreLabel
+        actionEl.removeAttribute('aria-disabled')
+        actionEl.classList.remove('is-busy')
+      }, 1500)
+    }
+    Promise.resolve()
+      .then(() => window.dsh.openArtifact(entry.artifactId))
+      .then((r) => {
+        if (r && r.ok) done('opened ↗')
+        else done('failed')
+      })
+      .catch((err) => {
+        console.error('openArtifact failed', err)
+        done('error')
+      })
+  }
+
   function renderCard(entry) {
-    const el = document.createElement('div')
+    // <details> is the L0 row shell. `open=false` keeps rows collapsed by
+    // default; clicking anywhere on the <summary> toggles the L1 body.
+    const el = document.createElement('details')
     el.className = 'artifact-card'
     el.dataset.artifactId = entry.artifactId
     el.dataset.version = String(entry.version || 1)
 
+    // ---- L0 summary row ------------------------------------------------
+    const summary = document.createElement('summary')
+    summary.className = 'artifact-row'
+
     const iconEl = document.createElement('span')
     iconEl.className = 'artifact-icon'
     iconEl.innerHTML = ICON_SVG[entry.kind] || ICON_FALLBACK
 
-    const bodyEl = document.createElement('div')
+    const nameEl = document.createElement('span')
-    bodyEl.className = 'artifact-body'
-    const nameEl = document.createElement('div')
     nameEl.className = 'artifact-name'
     nameEl.textContent = entry.artifactId
     nameEl.title = entry.path || entry.artifactId
-    const metaEl = document.createElement('div')
+
-    metaEl.className = 'artifact-meta'
-    metaEl.innerHTML = ''
     const kindEl = document.createElement('span')
     kindEl.className = 'artifact-kind'
     kindEl.textContent = entry.kind || 'file'
+
     const verEl = document.createElement('span')
     verEl.className = 'artifact-version'
     verEl.textContent = `v${entry.version || 1}`
+
     const dotEl = document.createElement('span')
     dotEl.className = 'artifact-live-dot'
     dotEl.title = 'live: SSE reload channel active'
-    metaEl.append(kindEl, verEl, dotEl)
-    bodyEl.append(nameEl, metaEl)
 
-    const openBtn = document.createElement('button')
+    // Right-side tiny "open ↗" link — density-spec §2: L0 actions are
-    openBtn.type = 'button'
+    // icon/link scale, not primary buttons.
-    openBtn.className = 'artifact-open primary'
+    const openLink = document.createElement('a')
-    openBtn.textContent = 'Open in browser'
+    openLink.className = 'artifact-open-link'
-    openBtn.addEventListener('click', async () => {
+    openLink.href = '#'
-      openBtn.disabled = true
+    openLink.textContent = 'open ↗'
-      try {
+    openLink.title = 'Open artifact in system browser'
-        const r = await window.dsh.openArtifact(entry.artifactId)
+    openLink.setAttribute('role', 'button')
-        if (r && r.ok) {
+    openLink.setAttribute('aria-label', `Open ${entry.artifactId} in system browser`)
-          openBtn.textContent = 'Opened ↗'
+    openLink.addEventListener('click', (e) => {
-          setTimeout(() => { openBtn.textContent = 'Open in browser'; openBtn.disabled = false }, 1500)
+      // Prevent both the anchor navigation and the <details> toggle so
-        } else {
+      // clicking the link opens the browser without expanding the row.
-          openBtn.textContent = 'Failed'
+      e.preventDefault()
-          setTimeout(() => { openBtn.textContent = 'Open in browser'; openBtn.disabled = false }, 1500)
+      e.stopPropagation()
-        }
+      if (openLink.getAttribute('aria-disabled') === 'true') return
-      } catch (err) {
+      invokeOpen(entry, openLink, 'open ↗')
-        openBtn.textContent = 'Error'
-        console.error('openArtifact failed', err)
-        setTimeout(() => { openBtn.textContent = 'Open in browser'; openBtn.disabled = false }, 1500)
-      }
     })
 
-    el.append(iconEl, bodyEl, openBtn)
+    summary.append(iconEl, nameEl, kindEl, verEl, dotEl, openLink)
+
+    // ---- L1 inline body (lazy content, structure is there for a11y) ----
+    const body = document.createElement('div')
+    body.className = 'artifact-body-l1'
+    const pathRow = document.createElement('div')
+    pathRow.className = 'artifact-body-path'
+    const pathLabel = document.createElement('span')
+    pathLabel.className = 'artifact-body-path-label'
+    pathLabel.textContent = 'path'
+    const pathVal = document.createElement('code')
+    pathVal.className = 'artifact-body-path-val'
+    pathVal.textContent = entry.path || entry.artifactId
+    pathRow.append(pathLabel, pathVal)
+
+    const actionRow = document.createElement('div')
+    actionRow.className = 'artifact-body-actions'
+    const openBtn = document.createElement('button')
+    openBtn.type = 'button'
+    openBtn.className = 'artifact-open ghost small'
+    openBtn.textContent = 'Open in browser'
+    openBtn.addEventListener('click', (e) => {
+      e.stopPropagation()
+      if (openBtn.getAttribute('aria-disabled') === 'true') return
+      invokeOpen(entry, openBtn, 'Open in browser')
+    })
+    actionRow.append(openBtn)
+
+    body.append(pathRow, actionRow)
+
+    el.append(summary, body)
     // Kick a fresh-flash so the arrival is noticeable.
     flash(el)
     return el
@@ -135,6 +211,8 @@
     el.dataset.version = String(entry.version || 1)
     const ver = el.querySelector('.artifact-version')
     if (ver) ver.textContent = `v${entry.version || 1}`
+    const pathVal = el.querySelector('.artifact-body-path-val')
+    if (pathVal && entry.path) pathVal.textContent = entry.path
     flash(el)
   }
 

examples/desktop/src/renderer/style.css

@@ -633,40 +633,126 @@ body.layout-monitor .stream {
   background: color-mix(in oklab, var(--muted) 4%, transparent);
 }
 
-/* --- artifact card ------------------------------------------------------ */
+/* --- artifact card (density-spec §2 L0 row form, 2026-07-18) ------------ */
+/* Each artifact renders as a compact ~28px row (native <details>) with an
+ * L1 body that expands inline on click. Consecutive rows in the stream
+ * fuse into a visual group via `:has()` (see block below). No hero button:
+ * the L0 action is a tiny `open ↗` link; the ghost "Open in browser"
+ * button lives in the L1 body. */
 
 .artifact-card {
   align-self: flex-start; max-width: 780px; width: 100%;
-  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px;
+  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
-  padding: 10px 12px;
+  padding: 0;
-  display: flex; align-items: center; gap: 12px;
+  /* <details> gets a UA margin (~12px in some Chromiums) that would
+   * fight the group's zero-gap layout. Zero it explicitly. */
+  margin: 0;
   transition: border-color 0.4s, background 0.4s;
 }
 .artifact-card.artifact-flash {
   border-color: var(--accent);
   background: color-mix(in oklab, var(--accent) 8%, var(--bg-elev));
 }
-.artifact-icon { font-size: 22px; line-height: 1; flex: 0 0 auto; }
+
-.artifact-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.artifact-row {
-.artifact-name {
-  font-family: var(--mono); font-size: 12.5px; color: var(--text);
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-}
-.artifact-meta {
   display: flex; align-items: center; gap: 8px;
-  font-size: 11px; color: var(--muted);
+  padding: 4px 12px; min-height: 28px;
+  cursor: pointer; list-style: none;
+  font-size: 12px; color: var(--text);
+}
+/* Hide the native <summary> marker; the row itself is the affordance. */
+.artifact-row::-webkit-details-marker { display: none; }
+.artifact-row::marker { content: ''; }
+.artifact-card:hover { background: var(--bg-elev-2); }
+
+.artifact-icon {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 14px; height: 14px; flex: 0 0 auto; color: var(--muted);
+}
+.artifact-icon svg { display: block; }
+.artifact-name {
+  font-family: var(--mono); font-size: 12px; color: var(--text);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  flex: 1 1 auto; min-width: 0;
 }
 .artifact-kind {
+  flex: 0 0 auto;
   text-transform: uppercase; letter-spacing: 0.05em;
-  padding: 1px 6px; border-radius: 3px;
+  font-size: 10px; padding: 1px 6px; border-radius: 3px;
   background: var(--bg-elev-2); color: var(--muted);
 }
-.artifact-version { color: var(--accent); font-family: var(--mono); }
+.artifact-version {
+  flex: 0 0 auto;
+  color: var(--accent); font-family: var(--mono); font-size: 11px;
+}
 .artifact-live-dot {
+  flex: 0 0 auto;
   width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
   animation: pulse 1.4s ease-in-out infinite;
 }
-.artifact-open { flex: 0 0 auto; font-size: 12px; padding: 6px 12px; }
+.artifact-open-link {
+  flex: 0 0 auto;
+  font-size: 11px; color: var(--muted); text-decoration: none;
+  padding: 2px 4px; border-radius: 3px;
+}
+.artifact-open-link:hover { color: var(--accent); background: var(--accent-soft); }
+.artifact-open-link[aria-disabled="true"] { pointer-events: none; opacity: 0.6; }
+.artifact-open-link.is-busy { color: var(--accent); }
+
+/* L1 body — inline expansion below the row. */
+.artifact-body-l1 {
+  padding: 8px 12px 12px 34px; /* 34 = 12 + 14 icon + 8 gap */
+  display: flex; flex-direction: column; gap: 8px;
+  font-size: 11px; color: var(--muted);
+  border-top: 1px solid var(--border);
+}
+.artifact-body-path { display: flex; align-items: baseline; gap: 8px; }
+.artifact-body-path-label {
+  text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px;
+  color: var(--text-tertiary);
+}
+.artifact-body-path-val {
+  font-family: var(--mono); font-size: 11px; color: var(--text);
+  background: var(--bg-elev-2); padding: 1px 6px; border-radius: 3px;
+  overflow-wrap: anywhere;
+}
+.artifact-body-actions { display: flex; gap: 8px; }
+.artifact-open { font-size: 12px; padding: 4px 10px; }
+
+/* Auto-group: consecutive artifact cards get wrapped in an
+ * `.artifact-group` container by the renderer so the group owns its own
+ * zero-gap layout (the stream's 12px flex-gap would otherwise dominate).
+ * Cards inside a group share a single seam — the first keeps its top
+ * corners rounded, the last keeps bottom, middles are square. The
+ * cascade order here matters: reset all radii and top-border inside a
+ * group, then re-add radii to the true first-of-type / last-of-type. */
+.artifact-group {
+  align-self: flex-start; max-width: 780px; width: 100%;
+  display: flex; flex-direction: column; gap: 0;
+}
+.artifact-group > .artifact-card {
+  max-width: none; width: 100%;
+  border-radius: 0;
+  border-top: none;
+  /* Override the shared card-family `margin: var(--space-3) 0` rule
+   * (further down the sheet) so grouped cards actually sit flush. */
+  margin: 0;
+}
+.artifact-group > .artifact-card:first-child {
+  border-top: 1px solid var(--border);
+  border-top-left-radius: 8px; border-top-right-radius: 8px;
+}
+.artifact-group > .artifact-card:last-child {
+  border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
+}
+/* Also fuse via `:has()` for the future where cards might sit as direct
+ * stream children (single-shot cases the wrapper doesn't touch). */
+.artifact-card + .artifact-card {
+  border-top-left-radius: 0; border-top-right-radius: 0;
+}
+.artifact-card:has(+ .artifact-card) {
+  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
+}
 
 /* --- tab nav (Chat / Plugins) ------------------------------------------- */