workspaces 0.1.10 → 0.1.12

data/lib/workspaces/dashboard/styles.css

@@ -148,7 +148,81 @@ h1 {
 .log-panel,
 .danger-zone { gap: var(--space-3); }
 
-details.status-panel[open] > summary { margin-block-end: var(--space-4); }
+
+/* Lead: a friendly headline, one sentence, and at most one big button. */
+.lead { gap: var(--space-4); padding-block: var(--space-8); }
+.lead__text { display: grid; gap: var(--space-2); }
+.lead h2 { font-size: clamp(1.4rem, 2vw + 1rem, 1.9rem); line-height: 1.2; }
+.lead__summary { max-inline-size: 38rem; color: var(--muted); font-size: 1.05rem; line-height: 1.5; }
+.lead__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
+.lead__action:empty { display: none; }
+.button--large { min-block-size: 52px; padding-inline: var(--space-8); font-size: 16px; border-radius: var(--radius); }
+
+/* Disclosures: quiet by default, a clear label and a one-line hint of what is inside. */
+/* A disclosure has to read as a control. The native marker is lost once a summary is a flex
+   container, so draw our own chevron; the whole header is the click target, with a hover
+   fill and a keyboard focus ring. */
+/* Two classes so the narrow-screen panel padding below cannot re-add padding around the summary. */
+.status-panel.disclosure { padding: 0; }
+.disclosure > summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--space-1) var(--space-3);
+  padding: var(--space-4) calc(var(--space-6) + var(--space-8)) var(--space-4) var(--panel-padding);
+  position: relative;
+  list-style: none;
+  color: var(--text);
+  font-weight: 600;
+  border-radius: var(--radius);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 120ms ease;
+}
+.disclosure > summary::-webkit-details-marker { display: none; }
+.disclosure > summary::after {
+  content: '';
+  position: absolute;
+  inset-inline-end: var(--panel-padding);
+  inset-block-start: 50%;
+  inline-size: 8px;
+  block-size: 8px;
+  margin-block-start: -6px;
+  border-inline-end: 2px solid var(--muted);
+  border-block-end: 2px solid var(--muted);
+  transform: rotate(45deg);
+  transition: transform 160ms ease, border-color 120ms ease;
+}
+.disclosure[open] > summary::after { margin-block-start: -2px; transform: rotate(225deg); }
+.disclosure > summary:hover { background: color-mix(in oklab, var(--accent) 8%, transparent); }
+.disclosure > summary:hover::after { border-color: var(--text); }
+.disclosure > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.disclosure[open] > summary { border-end-start-radius: 0; border-end-end-radius: 0; border-block-end: 1px solid var(--border); margin-block-end: 0; }
+.disclosure > :not(summary) { margin: var(--panel-padding); }
+/* Which preset is active, readable without opening the section. Same tint as a pressed preset button. */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-1) var(--space-3);
+  border: 1px solid color-mix(in oklab, var(--success) 55%, var(--border));
+  border-radius: 999px;
+  background: color-mix(in oklab, var(--success) 22%, transparent);
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+.badge::before { content: ''; inline-size: 6px; block-size: 6px; border-radius: 999px; background: var(--success); }
+.disclosure__hint { color: var(--muted); font-size: 13px; font-weight: 400; }
+@media (prefers-reduced-motion: reduce) { .disclosure > summary, .disclosure > summary::after { transition: none; } }
+.disclosure .technical > section:not(.danger-zone) { padding: 0; border: 0; box-shadow: none; background: none; }
+.disclosure .danger-zone { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--danger); border-radius: var(--radius); }
+.disclosure .log-panel { padding: 0; }
+.log-panel > #log { margin-block-start: 0; }
+.disclosure .danger-zone h3 { color: var(--danger); font-size: 1rem; }
+.disclosure h3 { font-size: 1rem; }
 
 .status-row {
   display: grid;
@@ -197,60 +271,64 @@ details.status-panel[open] > summary { margin-block-end: var(--space-4); }
   color: var(--text);
 }
 
-.stepper {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: grid;
-  gap: var(--space-2);
-}
-
-.step {
+/* Step logs, in the style of GitHub Actions: one row per recipe step with a status icon,
+   its name, how long it took, and a chevron. Open a row to read just that step's output. */
+.step-logs { display: grid; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
+.step-log + .step-log { border-block-start: 1px solid var(--border); }
+.step-log > summary {
   display: flex;
   align-items: center;
   gap: var(--space-3);
-  color: var(--muted);
-}
-
-.step-bullet {
-  inline-size: 10px;
-  block-size: 10px;
-  border: 2px solid var(--muted);
-  border-radius: 999px;
-}
-
-.step[data-step-state='active'],
-.step[data-step-state='complete'] {
+  padding: var(--space-3) var(--space-4);
+  position: relative;
+  list-style: none;
   color: var(--text);
-}
-
-.step[data-step-state='active'] .step-bullet {
-  border-color: var(--accent);
-  background: color-mix(in oklab, var(--accent) 25%, transparent);
-}
-
-.step[data-step-state='complete'] .step-bullet {
-  border-color: var(--success);
-  background: var(--success);
-}
-
-.step[data-step-state='failed'] {
-  color: color-mix(in oklab, var(--danger) 70%, var(--text));
-}
-
-.step[data-step-state='failed'] .step-bullet {
-  border-color: var(--danger);
-  background: color-mix(in oklab, var(--danger) 45%, transparent);
-}
-
-.step[data-step-state='unknown'] {
-  color: color-mix(in oklab, var(--muted) 80%, var(--text));
-}
-
-.step[data-step-state='unknown'] .step-bullet {
-  border-style: dashed;
-  background: transparent;
-}
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 120ms ease;
+}
+.step-log > summary::-webkit-details-marker { display: none; }
+.step-log > summary:hover { background: color-mix(in oklab, var(--accent) 8%, transparent); }
+.step-log > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.step-log > summary::after {
+  content: '';
+  flex: none;
+  inline-size: 7px;
+  block-size: 7px;
+  margin-inline-start: var(--space-2);
+  margin-block-start: -3px;
+  border-inline-end: 2px solid var(--muted);
+  border-block-end: 2px solid var(--muted);
+  transform: rotate(-45deg);
+  transition: transform 160ms ease;
+}
+.step-log[open] > summary::after { margin-block-start: -3px; transform: rotate(45deg); }
+.step-log[open] > summary { border-block-end: 1px solid var(--border); }
+.step-log__name { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; font-weight: 600; }
+.step-log__outcome { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.step-log--full > summary { color: var(--muted); }
+.step-log--full .step-log__name { font-weight: 400; }
+.step-log > pre { margin: 0; border: 0; border-radius: 0; max-block-size: min(38dvh, 360px); overflow: auto; }
+/* An empty step reads differently by state. Only workspaces set up before step files existed
+   have a finished step with nothing recorded; their text is still in the full log below. */
+.step-log > pre:empty::before { content: 'No output yet.'; color: var(--muted); }
+.step-log[data-step-state='pending'] > pre:empty::before { content: 'Waiting to start.'; }
+.step-log[data-step-state='complete'] > pre:empty::before,
+.step-log[data-step-state='failed'] > pre:empty::before { content: 'No output was recorded for this step. See the full setup log below.'; }
+
+/* The status icon: a ring for waiting, a pulsing ring while running, a check, a cross. */
+.step-log__status { flex: none; inline-size: 16px; block-size: 16px; border: 2px solid var(--muted); border-radius: 999px; position: relative; }
+.step-log[data-step-state='active'] .step-log__status { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 25%, transparent); animation: workspace-pulse 1.5s infinite; }
+.step-log[data-step-state='complete'] .step-log__status { border-color: var(--success); background: var(--success); }
+.step-log[data-step-state='complete'] .step-log__status::after { content: ''; position: absolute; inset-inline-start: 4px; inset-block-start: 1px; inline-size: 4px; block-size: 8px; border-inline-end: 2px solid var(--bg); border-block-end: 2px solid var(--bg); transform: rotate(40deg); }
+.step-log[data-step-state='failed'] .step-log__status { border-color: var(--danger); background: var(--danger); }
+.step-log[data-step-state='failed'] .step-log__status::before,
+.step-log[data-step-state='failed'] .step-log__status::after { content: ''; position: absolute; inset-inline-start: 5px; inset-block-start: 2px; inline-size: 2px; block-size: 8px; background: var(--bg); transform: rotate(45deg); }
+.step-log[data-step-state='failed'] .step-log__status::after { transform: rotate(-45deg); }
+.step-log[data-step-state='failed'] > summary .step-log__name { color: color-mix(in oklab, var(--danger) 70%, var(--text)); }
+.step-log[data-step-state='pending'] > summary .step-log__name { color: var(--muted); font-weight: 400; }
+.step-log[data-step-state='unknown'] .step-log__status { border-style: dashed; }
+@media (prefers-reduced-motion: reduce) { .step-log > summary, .step-log > summary::after, .step-log[data-step-state='active'] .step-log__status { transition: none; animation: none; } }
 
 .env-panel {
   display: grid;
@@ -409,7 +487,7 @@ fieldset:disabled {
 .field { display: grid; gap: var(--space-2); max-inline-size: 28rem; font-size: 14px; }
 .field input { inline-size: 100%; }
 
-ol:not(.stepper) > li + li { margin-block-start: var(--space-2); }
+ol > li + li { margin-block-start: var(--space-2); }
 
 .button--success {
   background: color-mix(in oklab, var(--success) 22%, transparent);

data/lib/workspaces/dashboard/template.html.erb

@@ -1,37 +1,27 @@
-<main class="dashboard" id="workspace" data-id="<%= @id %>" data-status="<%= field('status') %>" data-started="<%= field('prepare_started_at') %>" data-completed="<%= field('completed_at') %>" data-busy="<%= @presentation['busy'] %>">
+<main class="dashboard" id="workspace" data-id="<%= @id %>" data-status="<%= field('status') %>" data-started="<%= field('prepare_started_at') %>" data-completed="<%= field('completed_at') %>" data-busy="<%= @presentation['busy'] %>" data-disclosure-state="<%= escape(@presentation['state']) %>">
   <header class="dashboard__header">
-    <div class="dashboard__title"><p class="eyebrow">Managed workspace</p><h1><%= @id %></h1><p class="muted"><%= field('branch') %></p></div>
+    <div class="dashboard__title"><p class="eyebrow">Managed workspace</p><h1><%= @id %></h1></div>
     <a class="button button--subtle" href="/workspaces">All workspaces</a>
   </header>
-  <section class="status-panel" aria-labelledby="status">
-    <div class="status-row">
-      <h2 id="status" role="status"><%= escape(@presentation['title']) %></h2>
-      <span id="activity" <%= 'hidden' unless @presentation['busy'] %>><span class="activity-dot" aria-hidden="true"></span> In progress · <span id="elapsed">—</span></span>
+  <section class="status-panel lead" id="lead" data-section="lead" aria-labelledby="status" <%= 'hidden' unless section?('lead') %>>
+    <div class="lead__text">
+      <h2 id="status" role="status"><%= escape(@presentation['headline']) %></h2>
+      <p id="summary" class="lead__summary"><%= escape(@presentation['summary']) %></p>
+      <p id="subtitle" class="muted" <%= 'hidden' unless @presentation['subtitle'] %>><span id="subtitle-text"><%= escape(@presentation['subtitle']) %></span><span id="activity" <%= 'hidden' unless @presentation['busy'] %>> · <span class="activity-dot" aria-hidden="true"></span> <span id="elapsed">—</span></span></p>
     </div>
-    <p id="hint" <%= 'hidden' unless @presentation['hint'] %>><%= escape(@presentation['hint']) %></p>
-    <p id="message" <%= 'hidden' if @presentation['state'] == 'idle' %>><%= field('message') %></p>
-    <ol class="stepper" id="progress" data-section="progress" aria-label="Setup progress" <%= 'hidden' unless section?('progress') %>>
-      <% @presentation['steps'].each do |step| %>
-        <li class="step" data-step-state="<%= step['state'] %>" <%= 'aria-current="step"' if step['state'] == 'active' %>><span class="step-bullet" aria-hidden="true"></span><span><%= escape(step['label']) %></span><span class="step-outcome"><%= escape(step_outcome(step)) %></span></li>
-      <% end %>
-    </ol>
+    <div class="lead__actions">
+      <a id="preview" class="button button--primary button--large" href="<%= escape(Config.preview_url(@id)) %>" <%= 'hidden' unless @presentation['ready'] %> target="_blank" rel="noopener noreferrer">Open workspace</a>
+      <div id="lead-action" class="lead__action"><%= lead_action_form(@presentation['lead_action']) %></div>
+    </div>
+    <p id="message" class="muted" hidden><%= field('message') %></p>
     <section class="error-panel setup-error" id="error-panel" role="alert" <%= 'hidden' unless @presentation['error'] %>>
       <h3>What went wrong</h3><pre id="error"><%= escape(@presentation['error']) %></pre>
     </section>
     <p id="connection" role="status"></p>
   </section>
-  <section class="status-panel controls-panel" id="controls" data-section-group aria-labelledby="actions-settings-title" <%= 'hidden' unless section?('actions') || section?('environment') %>>
-    <h2 id="actions-settings-title"><%= escape(@presentation['controls_title']) %></h2>
-    <div class="workspace-actions-group" data-section="actions" aria-labelledby="actions-heading" <%= 'hidden' unless section?('actions') %>>
-      <h3 id="actions-heading">Workspace actions</h3>
-      <div class="workspace-actions">
-        <a id="preview" class="button button--primary" href="<%= escape(Config.preview_url(@id)) %>" <%= 'hidden' unless @presentation['ready'] %> target="_blank" rel="noopener noreferrer">Open workspace</a>
-        <div id="actions" class="workspace-actions"><% @presentation['actions'].each do |action| %><%= action_form(action) %><% end %></div>
-      </div>
-      <p id="source-update-message" role="status"><%= field('source_update_message') %></p>
-    </div>
-    <div class="workspace-settings" data-section="environment" aria-labelledby="environment-overrides" <%= 'hidden' unless section?('environment') %>>
-      <h3 id="environment-overrides">Environment</h3>
+  <details class="status-panel disclosure" id="environment-disclosure" data-section="environment" <%= 'open' if @presentation.dig('open', 'environment') %> <%= 'hidden' unless section?('environment') %>>
+    <summary><span id="environment-title"><%= escape(@presentation['environment_title']) %></span><span class="badge" id="environment-preset-badge" <%= 'hidden' unless @presentation['current_preset'] %>><%= escape(preset_badge_text) %></span><span class="disclosure__hint">Presets and environment variables</span></summary>
+    <div class="workspace-settings" aria-labelledby="environment-title">
       <form method="post" action="/workspaces/<%= @id %>/environment" id="environment-form" class="stack" data-environment-form data-environment-presets="<%= escape(environment_presets_json) %>">
         <fieldset class="env-fieldset" data-environment-fieldset <%= 'disabled' if @presentation['busy'] %>>
           <legend class="env-legend">Workspace settings</legend>
@@ -57,25 +47,47 @@
         <p class="muted" id="environment-status" role="status" aria-live="polite"></p>
       </form>
     </div>
-  </section>
-  <section class="log-panel" data-section="log" aria-labelledby="log-title" <%= 'hidden' unless section?('log') %>>
-    <div class="log-header"><h2 id="log-title">Live <%= field('log_source') == 'backend' ? 'backend' : 'setup' %> log</h2><time id="updated"><%= field('updated_at') %></time></div>
-    <nav class="log-switch" aria-label="Log source">
-      <a href="?log=setup" data-log-source="setup" <%= 'aria-current="page"' if @snapshot['log_source'] != 'backend' %>>Setup log</a>
-      <a href="?log=backend" data-log-source="backend" <%= 'aria-current="page"' if @snapshot['log_source'] == 'backend' %>>Backend log</a>
-    </nav>
-    <pre id="log" tabindex="0" aria-label="<%= field('log_source') == 'backend' ? 'Backend' : 'Setup' %> log"><%= field('log_tail') %></pre>
-  </section>
-  <details class="status-panel" data-section="details" <%= 'hidden' unless section?('details') %>><summary>Workspace details</summary><dl><dt>Preview URL</dt><dd><a class="detail-link" href="<%= escape(Config.preview_url(@id)) %>" target="_blank" rel="noopener noreferrer"><%= escape(Config.preview_url(@id)) %></a> <span class="muted">Available when ready</span></dd><dt>Branch</dt><dd><%= field('branch') %></dd><dt>Path</dt><dd><code><%= field('path') %></code></dd><dt>Related PR</dt><dd><%= escape(@snapshot.dig('related_pr', 'number') || 'None') %></dd><dt>Created</dt><dd><%= escape(@snapshot['created_at'] || 'Unavailable') %></dd><dt>Last startup</dt><dd><%= escape(@snapshot['started_at'] || 'Never') %></dd></dl></details>
-  <section class="status-panel danger-zone" data-section="danger" aria-labelledby="danger-heading" <%= 'hidden' unless section?('danger') %>>
-    <h2 id="danger-heading">Danger Zone</h2>
-    <p>Deleting this workspace stops its server and removes its worktree. <strong>Discard uncommitted and untracked changes</strong> permanently. The branch and committed work are preserved.</p>
-    <form method="post" action="/workspaces/<%= @id %>/remove" id="remove-form">
-      <label for="confirm-id">Type <code><%= @id %></code> to confirm deletion</label>
-      <input id="confirm-id" name="confirm_id" required autocomplete="off" spellcheck="false" aria-describedby="remove-warning" <%= 'disabled' if @presentation['busy'] %>>
-      <p class="muted" id="remove-warning">This cannot restore uncommitted or untracked files.</p>
-      <button class="button button--danger" <%= 'disabled' if @presentation['busy'] %>>Delete workspace</button>
-    </form>
-  </section>
+  </details>
+  <details class="status-panel disclosure" id="technical-disclosure" data-section="technical" <%= 'open' if @presentation.dig('open', 'technical') %> <%= 'hidden' unless section?('technical') %>>
+    <summary><span>Technical details</span><span class="disclosure__hint">Setup steps, logs and workspace controls</span></summary>
+    <div class="technical stack stack--loose">
+      <div class="workspace-actions-group stack stack--snug" data-section="actions" aria-labelledby="actions-heading" <%= 'hidden' unless section?('actions') %>>
+        <h3 id="actions-heading">Workspace controls</h3>
+        <div class="workspace-actions">
+          <div id="actions" class="workspace-actions"><% @presentation['actions'].each do |action| %><%= action_form(action) %><% end %></div>
+        </div>
+        <p id="source-update-message" role="status"><%= field('source_update_message') %></p>
+      </div>
+      <section class="log-panel" data-section="log" aria-labelledby="log-title" <%= 'hidden' unless section?('log') %>>
+        <div class="log-header"><h3 id="log-title">Live <%= field('log_source') == 'backend' ? 'backend' : 'setup' %> log</h3><time id="updated"><%= field('updated_at') %></time></div>
+        <nav class="log-switch" aria-label="Log source">
+          <a href="?log=setup" data-log-source="setup" <%= 'aria-current="page"' if @snapshot['log_source'] != 'backend' %>>Setup steps</a>
+          <a href="?log=backend" id="backend-tab" data-log-source="backend" <%= 'aria-current="page"' if @snapshot['log_source'] == 'backend' %> <%= 'hidden' unless backend_tab? %>>Web server log</a>
+        </nav>
+        <div id="steps" class="step-logs" data-step-logs <%= 'hidden' if @snapshot['log_source'] == 'backend' %>>
+          <% @presentation['steps'].each do |step| %><%= step_accordion(step) %><% end %>
+          <details class="step-log step-log--full" id="full-log" data-step-log="full">
+            <summary><span class="step-log__status" aria-hidden="true"></span><span class="step-log__name">Full setup log</span><span class="step-log__outcome" id="full-log-outcome"><%= escape(full_log_outcome) %></span></summary>
+            <pre tabindex="0" aria-label="Full setup log"><%= field('log_tail') if @snapshot['log_source'] != 'backend' %></pre>
+          </details>
+        </div>
+        <pre id="log" tabindex="0" aria-label="Web server log" <%= 'hidden' unless @snapshot['log_source'] == 'backend' %>><%= field('log_tail') if @snapshot['log_source'] == 'backend' %></pre>
+      </section>
+      <section class="stack stack--snug" data-section="details" <%= 'hidden' unless section?('details') %>>
+        <h3>Workspace details</h3>
+        <dl><dt>Preview URL</dt><dd><a class="detail-link" href="<%= escape(Config.preview_url(@id)) %>" target="_blank" rel="noopener noreferrer"><%= escape(Config.preview_url(@id)) %></a> <span class="muted">Available when ready</span></dd><dt>Branch</dt><dd><%= field('branch') %></dd><dt>Path</dt><dd><code><%= field('path') %></code></dd><dt>Related PR</dt><dd><%= escape(@snapshot.dig('related_pr', 'number') || 'None') %></dd><dt>Created</dt><dd><%= escape(@snapshot['created_at'] || 'Unavailable') %></dd><dt>Last startup</dt><dd><%= escape(@snapshot['started_at'] || 'Never') %></dd></dl>
+      </section>
+      <section class="danger-zone" data-section="danger" aria-labelledby="danger-heading" <%= 'hidden' unless section?('danger') %>>
+        <h3 id="danger-heading">Danger Zone</h3>
+        <p>Deleting this workspace stops its server and removes its worktree. <strong>Discard uncommitted and untracked changes</strong> permanently. The branch and committed work are preserved.</p>
+        <form method="post" action="/workspaces/<%= @id %>/remove" id="remove-form">
+          <label for="confirm-id">Type <code><%= @id %></code> to confirm deletion</label>
+          <input id="confirm-id" name="confirm_id" required autocomplete="off" spellcheck="false" aria-describedby="remove-warning" <%= 'disabled' if @presentation['busy'] %>>
+          <p class="muted" id="remove-warning">This cannot restore uncommitted or untracked files.</p>
+          <button class="button button--danger" <%= 'disabled' if @presentation['busy'] %>>Delete workspace</button>
+        </form>
+      </section>
+    </div>
+  </details>
   <noscript><a href="/workspaces/<%= @id %>">Refresh status</a></noscript>
 </main>

data/lib/workspaces/dashboard_view.rb

@@ -2,6 +2,7 @@ require 'erb'
 require 'json'
 require_relative 'config'
 require_relative 'presentation'
+require_relative 'duration_format'
 
 module Workspaces
   class DashboardView
@@ -161,20 +162,61 @@ module Workspaces
       JSON.generate(environment_presets)
     end
 
+    # The lead's primary action. `open` is rendered separately as a link (it needs the
+    # preview URL and must stay a real anchor), so only lifecycle posts produce a form.
+    def lead_action_form(action)
+      return '' unless action && action['kind'] == 'post'
+
+      "<form method=\"post\" action=\"/workspaces/#{@id}/#{action.fetch('key')}\">" \
+        "<button class=\"button button--primary button--large\">#{escape(action.fetch('label'))}</button></form>"
+    end
+
     def action_form(action)
       style = action['primary'] ? 'button--primary' : 'button--subtle'
       "<form method=\"post\" action=\"/workspaces/#{@id}/#{action.fetch('key')}\">" \
         "<button class=\"button #{style}\">#{escape(action.fetch('label'))}</button></form>"
     end
 
+    # The Full setup log row's right-hand label: how the last run ended and how long it took.
+    def full_log_outcome
+      return 'in progress' if @presentation['busy']
+
+      total = @presentation['total']
+      text = total && DurationFormat.call(total['seconds'])
+      text ? "#{total['state']} · #{text}" : 'everything, in order'
+    end
+
+    def preset_badge_text
+      name = @presentation['current_preset']
+      name ? "Preset: #{name}" : ''
+    end
+
+    def backend_tab?
+      @snapshot['log_source'] == 'backend' || @snapshot['backend_log_available']
+    end
+
+    # One GitHub-Actions-style accordion per recipe step. A step that is running or has
+    # failed starts open; a completed or not-yet-started one starts closed.
+    def step_accordion(step)
+      key = escape(step['key'])
+      state = escape(step['state'])
+      entry = (@snapshot['step_logs'] || {})[step['key']]
+      open = %w(active failed).include?(step['state']) ? ' open' : ''
+      current = step['state'] == 'active' ? ' aria-current="step"' : ''
+      <<~HTML
+        <details class="step-log" data-step-log="#{key}" data-step-state="#{state}"#{open}#{current}>
+          <summary><span class="step-log__status" aria-hidden="true"></span><span class="step-log__name">#{escape(step['label'])}</span><span class="step-log__outcome step-outcome">#{escape(step_outcome(step))}</span></summary>
+          <pre tabindex="0" aria-label="#{escape(step['label'])} output">#{entry ? escape(entry['text']) : ''}</pre>
+        </details>
+      HTML
+    end
+
     def step_outcome(step)
       state = step['state'].to_s
       return state unless %w(complete failed).include?(state)
 
-      duration = step['duration_seconds']
-      return state unless duration.is_a?(Numeric) && duration.finite? && duration >= 0
-
-      "#{state} · #{format('%.3f', duration)}s"
+      text = DurationFormat.call(step['duration_seconds'])
+      text ? "#{state} · #{text}" : state
     end
   end
 end

data/lib/workspaces/duration_format.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Workspaces
+  # Human durations, written the way people read them: "0.5s", "12.3s", "1m 10s", "1h 5m 3s".
+  #
+  # The dashboard script (dashboard/app.js, formatDuration) implements the same rules, and a
+  # spec runs both against the same inputs so the page and the setup log cannot disagree.
+  module DurationFormat
+    module_function
+
+    # Returns nil for anything that is not a usable duration, so callers can fall back to
+    # showing no time at all instead of a wrong one.
+    def call(seconds)
+      return nil unless seconds.is_a?(Numeric) && seconds.finite? && seconds >= 0
+
+      return tenths(seconds) if seconds < 60
+
+      whole = seconds.round
+      hours, rest = whole.divmod(3600)
+      minutes, secs = rest.divmod(60)
+      return "#{hours}h #{minutes}m #{secs}s" if hours.positive?
+
+      "#{minutes}m #{secs}s"
+    end
+
+    # Under a minute a decimal is still useful (0.5s reads better than 1s), but a trailing
+    # ".0" is noise: 12.0 is "12s".
+    def tenths(seconds)
+      rounded = (seconds * 10).round / 10.0
+      # 59.96 rounds to 60.0, which belongs on the minutes side.
+      return '1m 0s' if rounded >= 60
+
+      rounded == rounded.to_i ? "#{rounded.to_i}s" : "#{rounded}s"
+    end
+  end
+end

data/lib/workspaces/paths.rb

@@ -35,6 +35,17 @@ module Workspaces
       logs_dir(create: create).join("#{workspace_id}.setup.log")
     end
 
+    # One file per recipe step, written as the step runs. The combined setup log is unchanged.
+    def step_logs_dir(workspace_id, create: true)
+      logs_dir(create: create).join("#{workspace_id}.steps").tap { |path| path.mkpath if create }
+    end
+
+    def step_log_path(workspace_id, step_id, create: true)
+      raise ArgumentError, 'Unsafe step id' unless step_id.to_s.match?(/\A[a-z][a-z0-9_-]*\z/)
+
+      step_logs_dir(workspace_id, create: create).join("#{step_id}.log")
+    end
+
     def backend_log_path(workspace_id, create: true)
       logs_dir(create: create).join("#{workspace_id}.backend.log")
     end