workspaces 0.1.11 → 0.1.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fc21704825da052eb9cde1ea64cf3ab4958242f08492cf2a5b538d6fd97ebca3
-  data.tar.gz: 46dc25654e97ef6fb461058470dcfeb56e5a82720fa6df875c5b3c34b5d273a6
+  metadata.gz: 1425a9356962c4990de3a5a0f5ffb1b8660325bcff165bfb8336fb7c468696ef
+  data.tar.gz: 878aff1b14d9ec8f13902a9ac3abd35e47cce3536d640d25b15a8e5a50426936
 SHA512:
-  metadata.gz: daa43e3151dd5bb2e4239ae61ca9322101eb8793d437a91782dfa71ec078ce42721d384bea49564c0929a087b9476ab8c76d44860ad806ab3dab7e4145352193
-  data.tar.gz: 61d43cac06ed0948041320abf6d0a876697241a26063f5aa3f85537580cea660c8e0c7af2e8589fad80a32c6d3ba8432140e959a9fee70ba791ca92f3c81534a
+  metadata.gz: '059361fdfac7d7328f4f50d31efeb647656375582a4d178f4f0d6f7c62affae21eaf53f67cf9590da272f29803fdefa904ebba36e18c8b570b97b12ad9c86ca3'
+  data.tar.gz: c623574a0d2105f00b22ed460c597941e09fead329a335d47f01c9967d65ec84da098e23c08c4fdb0ace7358c6d7c929f4d5fa6a228bf21fb12a960a75d4b8c8

data/DESIGN.md

@@ -50,8 +50,8 @@ Restrained tooling UI: dark elevated panels, compact spacing rhythm, clear statu
 - **PR page**: existing workspaces are primary; creating another is a collapsed secondary disclosure. Creation is primary only when none exist.
 - **Three layers**: the workspace page leads with the friendly, the deliberate, then the technical. Each layer is shown or collapsed by lifecycle state, driven by `Presentation::STATES`:
   1. **Lead** (always visible): a plain-language headline, one sentence, and at most one primary action (a large button). The setup steps never appear here.
-  2. **Settings** (a `<details>` titled *Change settings*, or *Choose what to preview* on a brand new workspace): presets first, as buttons, then the environment variables. The one submit button names what it does (Start workspace, Save & restart, Save & start, Save & retry). It starts open only for a new workspace.
-  3. **Technical details** (one `<details>`): setup steps with timings, the live log, workspace controls (rebuild, restart, stop, update from PR), preview URL, branch and path, and the Danger Zone. It starts collapsed, and opens by itself while setup runs or after a failure so a cause is never hidden.
+  2. **Settings** (a `<details>` titled *Change settings*, with a *Preset: name* badge in its header whenever the saved settings exactly match a preset, so the choice is visible while it is closed, or *Choose what to preview* on a brand new workspace): presets first, as buttons, then the environment variables. The one submit button names what it does (Start workspace, Save & restart, Save & start, Save & retry). It starts open only for a new workspace.
+  3. **Technical details** (one `<details>`): setup step logs with timings, the web server log, workspace controls (rebuild, restart, stop, update from PR), preview URL, branch and path, and the Danger Zone. It starts collapsed, and opens by itself while setup runs or after a failure so a cause is never hidden.
 - **Lead by state**:
   - `idle`: "Let's get your workspace running", with the settings open and *Start workspace* in the form.
   - `busy`: "Setting things up…", with the current step as a quiet line and the elapsed time. Technical details open so progress and the log can be watched.
@@ -63,8 +63,12 @@ Restrained tooling UI: dark elevated panels, compact spacing rhythm, clear statu
 - **Action buttons**: start, prepare/rebuild, restart server, stop server, and refresh
 - **Open workspace**: success-styled link available when the server is ready
 - **Lifecycle controls**: hidden while busy (see state machine); helper text distinguishes rebuilding from server-only restart
+- **Step logs (GitHub Actions style)**: setup output is split by recipe step. Each step is a `<details>` row with a status icon (ring, pulsing ring, check or cross), its name, how long it took and a chevron; opening it shows only that step's output. A step that is running or has failed starts open and a completed or waiting one starts closed. The script updates rows in place by step id, and applies the open preference only when a step's state changes, so a row the reader toggled is never reopened or reclosed and what they are reading is never rebuilt.
+  - **Capture**: `StepLog` wraps the combined log. Every line still goes to the combined `<id>.setup.log`; while a step is current the same scrubbed text also goes to `logs/<id>.steps/<step-id>.log`. A step's file is truncated when it begins, the files are cleared when a run starts, and a failing step records its error message in its own file.
+  - **Read**: the snapshot carries `step_logs` (the tail of each step that has output, with a `truncated` flag) for the setup view only, and `backend_log_available`.
+  - **Tabs**: *Setup steps* (the accordions) and *Web server log*. The server tab appears only once the backend log has content. The combined log stays reachable as a final, collapsed *Full setup log* row, which also covers workspaces set up before step files existed.
 - **Bounded log panel**: monospace text, fixed max height, manual-scroll-safe updates
-- **Log source switcher**: two native links inside one log panel, with current selection announced through `aria-current`; only the selected bounded log is loaded and refreshed. Setup is the default.
+- **Log source switcher**: two native links inside one log panel (Setup steps, Web server log), with current selection announced through `aria-current`; only the selected view is loaded and refreshed. Setup steps is the default.
 - **Preview destination**: a small muted URL in Technical details, visible before readiness; the large Open workspace button is reserved for ready servers.
 - **Editable environment**: labelled monospace multiline `NAME=value` control for non-secret recipe defaults and added workspace settings; busy state disables the fieldset and save button, values are escaped in HTML, other legacy overrides remain hidden. Omitted default names revert to recipe defaults; omitted added names are unset.
 - **Environment presets (JS-enhanced)**: optional preset selector is hidden by default and revealed only when JavaScript is active and presets exist. Selecting a preset replaces the entire draft editor content and announces unsaved state without submitting. Draft edits remain local until Save & restart.

data/README.md

@@ -42,13 +42,17 @@ create from a pull request with `create --pr NUMBER`, or create a new branch wit
 ### Step timings
 
 Per-step durations are persisted in seconds in workspace step status JSON, so they
-remain available after the command exits. Timings also appear in CLI progress,
-the workspace setup log, and the dashboard's step list.
+remain available after the command exits, along with the wall-clock `total_seconds` of
+the last run. Timings also appear in CLI progress, the workspace setup log, and the
+dashboard. Everywhere they are shown as `0.5s`, `12.3s`, `1m 10s` or `1h 5m 3s`, never
+as a large bare seconds count. The dashboard's Full setup log row shows the total
+(`complete · 2m 17s`).
 
 A background step measures only process launch, not the server's lifetime or
 readiness. The following readiness step measures its own wait separately.
 Interrupted steps have no recorded duration. Step timings are not the total
-workflow wall-clock time; orchestration overhead can fall outside the steps.
+workflow wall-clock time; orchestration overhead can fall outside the steps, which is
+why the total is measured separately and is usually a little larger than their sum.
 
 ## Serve the dashboard and previews
 

data/lib/workspaces/config.rb

@@ -10,6 +10,9 @@ module Workspaces
 
     SAFE_LOG_BYTES = 8 * 1024
     SAFE_LOG_LINES = 100
+    # Each step shows its own tail, so the per-step bounds are smaller than the combined log's.
+    STEP_LOG_BYTES = 6 * 1024
+    STEP_LOG_LINES = 80
     DEFAULT_HOME = File.expand_path('~/.workspaces')
     DEFAULT_SUBDOMAIN_PREFIX = 'ws-'
     DEFAULT_FRONT_DOOR_PORT = 4747

data/lib/workspaces/coordinator.rb

@@ -5,6 +5,7 @@ require_relative 'workflow'
 require_relative 'tee_log'
 require_relative 'presentation'
 require_relative 'environment_overrides'
+require_relative 'duration_format'
 
 module Workspaces
   class Coordinator
@@ -98,7 +99,9 @@ module Workspaces
         'source_update_message' => entry['source_update_message'],
         'completed_at' => entry['completed_at'], 'last_error' => entry['last_error'],
         'operation' => entry['operation'], 'failed_phase' => failure_phase(entry, status),
-        'steps' => entry.fetch('steps', []),
+        'steps' => entry.fetch('steps', []), 'total_seconds' => entry['total_seconds'],
+        'step_logs' => include_log && log == 'setup' ? step_logs(id, entry.fetch('steps', [])) : {},
+        'backend_log_available' => backend_log_available?(id),
         'log_tail' => include_log ? log_tail(id, log) : '', 'log_source' => log, 'port' => entry['port'],
         'environment_keys' => environment_keys(id),
         'editable_environment' => editable_environment(id),
@@ -151,7 +154,8 @@ module Workspaces
       update(id, 'status' => 'preparing', 'message' => restart ? 'Restarting application' : 'Preparing workspace',
                  'steps' => steps,
                  'operation' => restart ? 'restart' : 'prepare', 'failed_phase' => nil,
-                 'prepare_started_at' => now, 'completed_at' => nil, 'last_error' => nil)
+                 'prepare_started_at' => now, 'completed_at' => nil, 'last_error' => nil,
+                 'total_seconds' => nil)
     end
 
     def spawn_worker(workspace, restart, lock)
@@ -168,28 +172,41 @@ module Workspaces
 
     def run(workspace, restart:)
       id = workspace.id
+      started = monotonic
       File.open(Config.setup_log_path(id), 'a') do |file|
         file.sync = true
         log = TeeLog.new(id, file)
         log.puts "==> #{restart ? 'restarting' : 'preparing'} workspace #{id}; branch and working files unchanged"
-        prepare_and_boot(workspace, log, restart)
+        prepare_and_boot(workspace, log, restart, started)
       end
     rescue StandardError => e
-      publish_error(id, e)
+      publish_error(id, e, started)
     end
 
-    def prepare_and_boot(workspace, log, restart)
+    # The wall-clock time of the whole run, boot and readiness included. Step durations add up to
+    # less than this because orchestration between steps is not inside any step.
+    def prepare_and_boot(workspace, log, restart, started)
       id = workspace.id
       port = Workflow.new(workspace, log, state: @state).run!(restart: restart)
-      update(id, 'status' => 'ready', 'message' => 'Workspace ready', 'completed_at' => now, 'port' => port)
+      update(id, 'status' => 'ready', 'message' => 'Workspace ready', 'completed_at' => now, 'port' => port,
+                 'total_seconds' => elapsed_since(started))
     end
 
-    def publish_error(id, exception)
+    def publish_error(id, exception, started = nil)
       detail = scrub("#{exception.class}: #{exception.message}", id: id)
       $stdout.puts "[Workspace #{id}] ERROR: #{detail}"
       File.open(Config.setup_log_path(id), 'a') { |file| file.puts "ERROR: #{detail}" }
       update(id, 'status' => 'error', 'message' => 'Workspace preparation failed', 'last_error' => detail,
-                 'failed_phase' => @state.get(id)&.fetch('status', nil), 'completed_at' => now)
+                 'failed_phase' => @state.get(id)&.fetch('status', nil), 'completed_at' => now,
+                 'total_seconds' => started && elapsed_since(started))
+    end
+
+    def monotonic
+      Process.clock_gettime(Process::CLOCK_MONOTONIC)
+    end
+
+    def elapsed_since(started)
+      (monotonic - started).round(3)
     end
 
     def locked?(id)
@@ -210,6 +227,35 @@ module Workspaces
       scrub(raw, id: id).lines.last(Config::SAFE_LOG_LINES).join
     end
 
+    # Output for each recipe step, keyed by step id. Only steps that have written something
+    # appear, so a pending step has no entry and the page can show it as not started.
+    def step_logs(id, steps)
+      steps.each_with_object({}) do |step, logs|
+        path = Config.step_log_path(id, step['key'], create: false)
+        next unless path.file?
+
+        logs[step['key']] = tail_file(path, id, bytes: Config::STEP_LOG_BYTES, lines: Config::STEP_LOG_LINES)
+      end
+    rescue ArgumentError
+      {}
+    end
+
+    def backend_log_available?(id)
+      path = Config.backend_log_path(id, create: false)
+      path.file? && !path.zero?
+    end
+
+    # The tail of a log file, scrubbed, with whether earlier output was cut off.
+    def tail_file(path, id, bytes:, lines:)
+      size = path.size
+      raw = File.open(path, 'rb') do |file|
+        file.seek(-bytes, IO::SEEK_END) if size > bytes
+        file.read
+      end
+      kept = scrub(raw, id: id).lines
+      { 'text' => kept.last(lines).join, 'truncated' => size > bytes || kept.length > lines }
+    end
+
     def scrub(value, id:)
       scrubbed = value.to_s
       scrubbed = EnvironmentOverrides.new(id).scrub(scrubbed)

data/lib/workspaces/dashboard/app.js

@@ -46,43 +46,131 @@
     toggleBusyState(busy);
   }
 
-  function renderStep(step) {
-    const item = document.createElement('li');
-    item.className = 'step';
-    item.dataset.stepState = step.state;
-    if (step.state === 'active') item.setAttribute('aria-current', 'step');
-    const bullet = document.createElement('span');
-    bullet.className = 'step-bullet';
-    bullet.setAttribute('aria-hidden', 'true');
-    const label = document.createElement('span');
-    label.textContent = step.label;
+  // Each recipe step is a disclosure element. The server renders the first paint; after that the
+  // poll updates these nodes in place, keyed by step id, so nothing the user is reading
+  // is rebuilt. A step opens by itself when it starts running or fails, and closes when it
+  // completes, but only on a state change, and never after the user toggled it by hand.
+  const userToggled = new Set();
+  const stepState = {};
+
+  function ensureStep(container, step, before) {
+    const existing = container.querySelector('[data-step-log="' + step.key + '"]');
+    if (existing) return existing;
+    const details = document.createElement('details');
+    details.className = 'step-log';
+    details.dataset.stepLog = step.key;
+    const summary = document.createElement('summary');
+    const status = document.createElement('span');
+    status.className = 'step-log__status';
+    status.setAttribute('aria-hidden', 'true');
+    const name = document.createElement('span');
+    name.className = 'step-log__name';
     const outcome = document.createElement('span');
-    outcome.className = 'step-outcome';
-    outcome.textContent = stepOutcome(step);
-    item.append(bullet, label, outcome);
-    return item;
+    outcome.className = 'step-log__outcome step-outcome';
+    summary.append(status, name, outcome);
+    const output = document.createElement('pre');
+    output.tabIndex = 0;
+    details.append(summary, output);
+    details.addEventListener('toggle', () => {
+      if (details.dataset.programmatic === 'true') return;
+      userToggled.add(step.key);
+    });
+    container.insertBefore(details, before || null);
+    return details;
+  }
+
+  function renderSteps(view, stepLogs) {
+    const container = node('steps');
+    if (!container) return;
+    const steps = view.steps || [];
+    const full = node('full-log');
+    const keep = new Set(steps.map((step) => step.key).concat(['full']));
+    container.querySelectorAll('[data-step-log]').forEach((element) => {
+      if (!keep.has(element.dataset.stepLog)) container.removeChild(element);
+    });
+    renderFullLogOutcome(view);
+    steps.forEach((step) => {
+      const details = ensureStep(container, step, full);
+      details.dataset.stepState = step.state;
+      if (step.state === 'active') details.setAttribute('aria-current', 'step');
+      else details.removeAttribute('aria-current');
+      const summary = details.querySelector('summary');
+      const parts = summary.children;
+      parts[1].textContent = step.label;
+      parts[2].textContent = stepOutcome(step);
+      const output = details.querySelector('pre');
+      output.setAttribute('aria-label', step.label + ' output');
+      const entry = stepLogs && stepLogs[step.key];
+      if (entry && output.textContent !== entry.text) writeLog(output, entry.text);
+      applyStepOpenState(details, step);
+    });
+  }
+
+  // The Full setup log row reads "in progress" while running, then how the run ended and how
+  // long it took. Without a recorded total it keeps its plain label.
+  function renderFullLogOutcome(view) {
+    const label = node('full-log-outcome');
+    if (!label) return;
+    const total = view.total;
+    const text = total && formatDuration(total.seconds);
+    label.textContent = view.busy
+      ? 'in progress'
+      : text
+        ? total.state + ' · ' + text
+        : 'everything, in order';
+  }
+
+  function applyStepOpenState(details, step) {
+    const previous = stepState[step.key];
+    stepState[step.key] = step.state;
+    if (previous === step.state || userToggled.has(step.key)) return;
+    const shouldOpen = step.state === 'active' || step.state === 'failed';
+    if (details.open === shouldOpen) return;
+    details.dataset.programmatic = 'true';
+    details.open = shouldOpen;
+    // The toggle event fires asynchronously; clear the guard after it has been delivered.
+    setTimeout(() => { details.dataset.programmatic = 'false'; }, 0);
+  }
+
+  // Writing a log must not yank a reader who scrolled up; follow the tail only if already there.
+  function writeLog(pre, text) {
+    const atBottom = pre.scrollTop + pre.clientHeight >= pre.scrollHeight - 18;
+    pre.textContent = text || '';
+    if (atBottom) pre.scrollTop = pre.scrollHeight;
+  }
+
+  // Durations read the way people say them: 0.5s, 12.3s, 1m 10s, 1h 5m 3s. This mirrors
+  // Workspaces::DurationFormat in Ruby; a spec runs both over the same inputs.
+  function formatDuration(seconds) {
+    if (typeof seconds !== 'number' || !Number.isFinite(seconds) || seconds < 0) return null;
+    if (seconds < 60) {
+      const rounded = Math.round(seconds * 10) / 10;
+      if (rounded >= 60) return '1m 0s';
+      return rounded + 's';
+    }
+    const whole = Math.round(seconds);
+    const hours = Math.floor(whole / 3600);
+    const minutes = Math.floor((whole % 3600) / 60);
+    const secs = whole % 60;
+    return hours > 0 ? hours + 'h ' + minutes + 'm ' + secs + 's' : minutes + 'm ' + secs + 's';
   }
 
   function stepOutcome(step) {
     const state = step.state;
-    const rawDuration = step.duration_seconds;
-    if (typeof rawDuration !== 'number') return state;
-    const duration = rawDuration;
-    if (
-      (state === 'complete' || state === 'failed') &&
-      Number.isFinite(duration) &&
-      duration >= 0
-    )
-      return state + ' · ' + duration.toFixed(3) + 's';
-    return state;
+    if (state !== 'complete' && state !== 'failed') return state;
+    const text = formatDuration(step.duration_seconds);
+    return text ? state + ' · ' + text : state;
   }
 
   function updateLog(data) {
     if (data.log_source !== selectedLog) return;
-    const log = node('log');
-    const bottom = log.scrollTop + log.clientHeight >= log.scrollHeight - 18;
-    log.textContent = data.log_tail || '';
-    if (bottom) log.scrollTop = log.scrollHeight;
+    const tab = node('backend-tab');
+    if (tab && data.backend_log_available) tab.hidden = false;
+    if (selectedLog === 'backend') writeLog(node('log'), data.log_tail);
+    else {
+      const full = node('full-log');
+      if (full) writeLog(full.querySelector('pre'), data.log_tail);
+    }
     node('updated').textContent = data.updated_at || '';
   }
 
@@ -97,7 +185,7 @@
     renderSections(view);
     if (node('message')) node('message').textContent = data.message || '';
     node('source-update-message').textContent = data.source_update_message || '';
-    node('progress').replaceChildren(...view.steps.map(renderStep));
+    renderSteps(view, data.step_logs);
     renderActions(view.actions);
     if (window.WorkspaceEnvironment)
       window.WorkspaceEnvironment.syncFromSnapshot(data);
@@ -130,6 +218,11 @@
     if (activity) activity.hidden = !view.busy;
     const title = node('environment-title');
     if (title && view.environment_title) title.textContent = view.environment_title;
+    const badge = node('environment-preset-badge');
+    if (badge) {
+      badge.hidden = !view.current_preset;
+      badge.textContent = view.current_preset ? 'Preset: ' + view.current_preset : '';
+    }
     renderLeadAction(view.lead_action);
   }
 
@@ -203,9 +296,8 @@
     if (Number.isFinite(started)) {
       const end = busy ? Date.now() : completed;
       const seconds = Math.max(0, Math.floor((end - started) / 1000));
-      if (Number.isFinite(seconds))
-        node('elapsed').textContent =
-          Math.floor(seconds / 60) + 'm ' + (seconds % 60) + 's';
+      // The running clock counts whole seconds, so format it as one (no decimals).
+      if (Number.isFinite(seconds)) node('elapsed').textContent = formatDuration(seconds);
     }
     setTimeout(tick, 1000);
   }

data/lib/workspaces/dashboard/styles.css

@@ -199,11 +199,28 @@ h1 {
 .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; }
 
@@ -254,60 +271,64 @@ h1 {
   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);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 120ms ease;
 }
-
-.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;
-}
+.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;
@@ -466,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

@@ -20,7 +20,7 @@
     <p id="connection" role="status"></p>
   </section>
   <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="disclosure__hint">Presets and environment variables</span></summary>
+    <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'] %>>
@@ -51,11 +51,6 @@
   <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">
-      <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="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">
@@ -66,10 +61,17 @@
       <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 log</a>
-          <a href="?log=backend" data-log-source="backend" <%= 'aria-current="page"' if @snapshot['log_source'] == 'backend' %>>Backend log</a>
+          <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>
-        <pre id="log" tabindex="0" aria-label="<%= field('log_source') == 'backend' ? 'Backend' : 'Setup' %> log"><%= field('log_tail') %></pre>
+        <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>

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
@@ -176,14 +177,46 @@ module Workspaces
         "<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

data/lib/workspaces/presentation.rb

@@ -10,9 +10,10 @@ module Workspaces
     # most one primary action. `environment` (presets and variables) is the area for
     # deliberately changing something. `technical` is one disclosure holding setup steps,
     # logs, workspace details, lifecycle controls and deletion; it is never the first thing
-    # a user reads, but it opens by itself when something needs attention.
-    SECTIONS = %w(lead progress actions environment technical log details danger).freeze
-    TECHNICAL = %w(technical progress actions log details danger).freeze
+    # a user reads, but it opens by itself when something needs attention. Setup steps are
+    # not a section of their own: each is an accordion with its own log inside `log`.
+    SECTIONS = %w(lead actions environment technical log details danger).freeze
+    TECHNICAL = %w(technical actions log details danger).freeze
 
     # Workspace lifecycle state machine. Each state declares only what is usable and
     # meaningful there; everything else is hidden rather than shown disabled.
@@ -38,7 +39,7 @@ module Workspaces
         open_environment: true, open_technical: false
       },
       'busy' => {
-        sections: %w(lead technical progress log),
+        sections: %w(lead technical log),
         headline: 'Setting things up…',
         summary: "This usually takes a few minutes. We'll take you to the preview when it's ready.",
         environment_submit: 'Save & restart', environment_title: 'Change settings',
@@ -90,7 +91,8 @@ module Workspaces
         'actions' => actions, 'ready' => status == 'ready' && !busy?,
         'state' => state, 'sections' => sections,
         'headline' => definition[:headline], 'summary' => definition[:summary],
-        'subtitle' => subtitle, 'lead_action' => lead_action,
+        'subtitle' => subtitle, 'lead_action' => lead_action, 'total' => total,
+        'current_preset' => current_preset,
         'environment_title' => definition[:environment_title],
         'environment_submit' => definition[:environment_submit],
         'open' => { 'environment' => definition[:open_environment], 'technical' => definition[:open_technical] } }
@@ -117,8 +119,7 @@ module Workspaces
     end
 
     def sections
-      visible = definition[:sections].dup
-      visible.delete('progress') if steps.empty? || %w(idle stopped).include?(state)
+      visible = definition[:sections]
       SECTIONS.to_h { |name| [name, visible.include?(name)] }
     end
 
@@ -132,6 +133,32 @@ module Workspaces
       end
     end
 
+    # The preset whose values exactly equal the workspace's saved editable settings, or nil when
+    # there are no presets or the settings match none (for example after a hand edit). Presets
+    # arrive already completed with the recipe defaults, so equality is a plain comparison.
+    def current_preset
+      presets = @snapshot['environment_presets']
+      current = @snapshot['editable_environment']
+      return nil unless presets.is_a?(Hash) && current.is_a?(Hash) && !current.empty?
+
+      normalized = stringify(current)
+      presets.find { |_name, values| values.is_a?(Hash) && stringify(values) == normalized }&.first&.to_s
+    end
+
+    def stringify(values)
+      values.to_h { |name, value| [name.to_s, value.to_s] }
+    end
+
+    # How long the last run took and how it ended, or nil while one is in progress or when no
+    # total was recorded (interrupted runs, and workspaces set up before totals were persisted).
+    def total
+      seconds = @snapshot['total_seconds']
+      return nil if busy? || !seconds.is_a?(Numeric)
+
+      failed = status == 'error' || steps.any? { |step| step['state'] == 'failed' }
+      { 'state' => failed ? 'failed' : 'complete', 'seconds' => seconds }
+    end
+
     # What is happening right now, in the quiet line under the headline.
     def subtitle
       return nil unless state == 'busy'

data/lib/workspaces/step_log.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Workspaces
+  # Splits a run's output by recipe step.
+  #
+  # Wraps the combined log (a TeeLog, or anything with puts/print). Everything still goes to
+  # the combined log exactly as before; while a step is current, the same text is also written
+  # to that step's own file so the dashboard can show each step under its own heading.
+  #
+  # Text arriving through this object has already been scrubbed by the wrapped log, so we hand
+  # it the raw text and copy what it actually wrote, rather than scrubbing twice.
+  class StepLog
+    def initialize(log, workspace_id)
+      @log = log
+      @workspace_id = workspace_id
+      @file = nil
+    end
+
+    # Begins a step's file, truncating any output from an earlier run of the same step.
+    def begin_step(step_id)
+      finish_step
+      @file = File.open(Config.step_log_path(@workspace_id, step_id), 'w')
+      @file.sync = true
+    end
+
+    def finish_step
+      @file&.close
+      @file = nil
+    end
+
+    def puts(message = '')
+      text = scrubbed(message)
+      @log.puts(message)
+      @file&.puts(text)
+    end
+
+    def print(message)
+      text = scrubbed(message)
+      @log.print(message)
+      @file&.print(text)
+    end
+
+    # Clears every step file; called when a run begins so a restart never shows stale steps.
+    def self.reset(workspace_id)
+      dir = Config.step_logs_dir(workspace_id, create: false)
+      Dir.glob(dir.join('*.log')).each { |path| File.delete(path) } if dir.directory?
+    end
+
+    private
+
+    def scrubbed(message)
+      @log.respond_to?(:scrub_text) ? @log.scrub_text(message) : message.to_s
+    end
+  end
+end

data/lib/workspaces/tee_log.rb

@@ -26,10 +26,16 @@ module Workspaces
       $stdout.print(prefixed(scrubbed))
     end
 
+    # The filtering applied to everything written. Public so StepLog can copy exactly what the
+    # combined log received, instead of reimplementing the rules.
+    def scrub_text(message)
+      @overrides.scrub(message)
+    end
+
     private
 
     def scrub(message)
-      @overrides.scrub(message)
+      scrub_text(message)
     end
 
     def prefixed(message)

data/lib/workspaces/version.rb

@@ -1,3 +1,3 @@
 module Workspaces
-  VERSION = '0.1.11'
+  VERSION = '0.1.12'
 end

data/lib/workspaces/workflow.rb

@@ -3,12 +3,15 @@ require_relative 'recipe'
 require_relative 'command_runner'
 require_relative 'backend'
 require_relative 'environment_overrides'
+require_relative 'step_log'
+require_relative 'duration_format'
 
 module Workspaces
   class Workflow
     def initialize(workspace, log, state: StateStore.new(Config.state_file))
       @workspace = workspace
-      @log = log
+      @combined_log = log
+      @log = StepLog.new(log, workspace.id)
       @state = state
       @backend = Backend.new(workspace.id)
     end
@@ -18,6 +21,7 @@ module Workspaces
       overrides = EnvironmentOverrides.new(@workspace.id).load
       steps = recipe.for_operation(restart: restart)
       publish_steps(steps)
+      StepLog.reset(@workspace.id)
       @backend.stop!
       context = build_context(@backend.reserve!)
       runner = CommandRunner.new(@workspace.path, @log)
@@ -27,6 +31,8 @@ module Workspaces
     rescue StandardError
       @backend.stop!
       raise
+    ensure
+      @log.finish_step
     end
 
     private
@@ -50,6 +56,7 @@ module Workspaces
     def execute(step, recipe, context, runner, overrides)
       started_at = Process.clock_gettime(Process::CLOCK_MONOTONIC)
       progress(step, 'active')
+      @log.begin_step(step.fetch('id'))
       @log.puts "==> #{step.fetch('name')}"
       command = recipe.command(step, context)
       env = recipe.env(step, context, overrides: overrides)
@@ -60,7 +67,10 @@ module Workspaces
         @backend.ensure_alive! if @server_started
       end
       @server_started = true if step['background']
-    rescue StandardError
+    rescue StandardError => e
+      # The reason a step failed is not command output, so the step file would otherwise end
+      # without it. Record it where the step's own accordion can show it.
+      @log.puts "ERROR: #{e.message}"
       finish_step(step, 'failed', started_at)
       raise
     else
@@ -70,7 +80,7 @@ module Workspaces
     def finish_step(step, status, started_at)
       duration = (Process.clock_gettime(Process::CLOCK_MONOTONIC) - started_at).round(3)
       progress(step, status, duration_seconds: duration)
-      @log.puts format('==> %s %s (%.3fs)', step.fetch('name'), status, duration)
+      @log.puts format('==> %s %s (%s)', step.fetch('name'), status, DurationFormat.call(duration))
     end
 
     def progress(step, status, duration_seconds: nil)

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: workspaces
 version: !ruby/object:Gem::Version
-  version: 0.1.11
+  version: 0.1.12
 platform: ruby
 authors:
 - Workspaces contributors
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2026-10-15 00:00:00.000000000 Z
+date: 2026-10-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rack
@@ -83,6 +83,7 @@ files:
 - lib/workspaces/dashboard/styles.css
 - lib/workspaces/dashboard/template.html.erb
 - lib/workspaces/dashboard_view.rb
+- lib/workspaces/duration_format.rb
 - lib/workspaces/environment_overrides.rb
 - lib/workspaces/front_door.rb
 - lib/workspaces/paths.rb
@@ -92,6 +93,7 @@ files:
 - lib/workspaces/recipe.rb
 - lib/workspaces/registry.rb
 - lib/workspaces/state_store.rb
+- lib/workspaces/step_log.rb
 - lib/workspaces/tee_log.rb
 - lib/workspaces/tls.rb
 - lib/workspaces/version.rb