workspaces 0.1.11 → 0.1.13

data/lib/workspaces/dashboard/styles.css

@@ -155,6 +155,17 @@ h1 {
 .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__actions:empty { display: none; }
+
+/* The build progress bar: a plain track and fill, then one line saying which step and how long. */
+.build-progress { display: grid; gap: var(--space-3); }
+.progress-bar { block-size: 10px; border-radius: 999px; background: color-mix(in oklab, var(--muted) 22%, transparent); overflow: hidden; }
+.progress-bar__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--accent); transition: inline-size 600ms ease; }
+.progress-bar[data-slow='true'] .progress-bar__fill { background: var(--warning); }
+.progress-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-4); }
+.progress-meta__step { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; min-inline-size: 0; overflow-wrap: anywhere; }
+.progress-meta__time { font-variant-numeric: tabular-nums; }
+@media (prefers-reduced-motion: reduce) { .progress-bar__fill { transition: none; } }
 .lead__action:empty { display: none; }
 .button--large { min-block-size: 52px; padding-inline: var(--space-8); font-size: 16px; border-radius: var(--radius); }
 
@@ -199,11 +210,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 +282,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 +498,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

@@ -7,7 +7,13 @@
     <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>
+    <div class="build-progress" id="build-progress" <%= 'hidden' unless @presentation['progress'] %>>
+      <div class="progress-bar" id="progress-bar" role="progressbar" aria-label="Setup progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="<%= progress_percent %>" aria-valuetext="<%= escape(progress_valuetext) %>" data-slow="<%= @presentation.dig('progress', 'slow') ? 'true' : 'false' %>"><span class="progress-bar__fill" id="progress-fill" style="inline-size: <%= progress_percent %>%"></span></div>
+      <div class="progress-meta">
+        <p class="progress-meta__step"><span class="activity-dot" aria-hidden="true"></span><span id="progress-step"><%= escape(progress_step_text) %></span></p>
+        <p class="progress-meta__time muted"><span id="progress-percent"><%= progress_percent %>%</span><span aria-hidden="true"> · </span><span id="elapsed"><%= escape(progress_elapsed_text) %></span><span id="progress-eta"><%= escape(progress_eta_suffix) %></span></p>
+      </div>
     </div>
     <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>
@@ -20,7 +26,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 +57,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 +67,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,75 @@ 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
+
+    # The bar's text, rendered on the server for the first paint; app.js keeps it current after that.
+    def progress
+      @presentation['progress'] || {}
+    end
+
+    def progress_percent
+      progress.fetch('percent', 0)
+    end
+
+    def progress_step_text
+      return '' if progress.empty?
+
+      "#{progress['step_text']} · #{progress['step_label']}"
+    end
+
+    def progress_elapsed_text
+      DurationFormat.call(progress['elapsed_seconds']) || '—'
+    end
+
+    def progress_eta_suffix
+      progress['eta_text'] ? " · #{progress['eta_text']}" : ''
+    end
+
+    def progress_valuetext
+      return '' if progress.empty?
+
+      [progress_step_text, progress['eta_text']].compact.join('. ')
+    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

@@ -27,6 +27,11 @@ module Workspaces
       home.join('state.json')
     end
 
+    # Every finished run, one JSON object per line, shared by all workspaces of this project.
+    def build_history_path
+      home.join('build-history.jsonl')
+    end
+
     def log_path(workspace_id, create: true)
       setup_log_path(workspace_id, create: create)
     end
@@ -35,6 +40,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

@@ -1,3 +1,5 @@
+require_relative 'progress'
+
 module Workspaces
   class Presentation
     TITLES = { 'idle' => 'Ready to start', 'stopped' => 'Server stopped', 'ready' => 'Workspace ready',
@@ -10,9 +12,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,9 +41,9 @@ 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.",
+        summary: "We'll take you to the preview as soon as it's ready.",
         environment_submit: 'Save & restart', environment_title: 'Change settings',
         open_environment: false, open_technical: true
       },
@@ -90,7 +93,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,
+        'lead_action' => lead_action, 'total' => total, 'progress' => progress,
+        '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 +121,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,11 +135,38 @@ module Workspaces
       end
     end
 
-    # What is happening right now, in the quiet line under the headline.
-    def subtitle
-      return nil unless state == 'busy'
+    # 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
+
+    # The progress bar's numbers, only while a build is being prepared (not for a lone command
+    # on a ready workspace, which has no steps of its own to measure).
+    def progress
+      return nil unless status == 'preparing' && !steps.empty?
 
-      @snapshot['message']
+      Progress.new(steps: steps, estimates: @snapshot['estimates'], started_at: @snapshot['prepare_started_at']).to_h
     end
 
     def title

data/lib/workspaces/progress.rb

@@ -0,0 +1,122 @@
+# frozen_string_literal: true
+
+require 'time'
+require_relative 'duration_format'
+
+module Workspaces
+  # A deliberately simple read on how far along a run is, for a progress bar.
+  #
+  # With history: each step carries weight equal to its usual duration, finished steps count in
+  # full, and the running step counts by how much of its usual time has passed. Without history
+  # every step weighs the same and only finished steps count. The bar never claims 100% while
+  # work remains, and a step that overruns its usual time is held back so the bar waits for it.
+  class Progress
+    MIN_WEIGHT = 1.0
+    MAX_PERCENT = 99
+    STEP_CAP = 0.95
+    SLOW_FACTOR = 1.5
+
+    def initialize(steps:, estimates:, started_at:, now: Time.now)
+      @steps = steps
+      @estimates = estimates || {}
+      @started_at = parse(started_at)
+      @now = now
+    end
+
+    def to_h
+      return nil if @steps.empty?
+
+      { 'percent' => percent, 'step_label' => current_step['label'], 'step_text' => "Step #{current_index + 1} of #{@steps.length}",
+        'elapsed_seconds' => elapsed, 'eta_text' => eta_text, 'slow' => slow?, 'estimated' => estimated? }
+    end
+
+    private
+
+    def percent
+      done = 0.0
+      @steps.each_with_index do |step, index|
+        case step['state']
+        when 'complete' then done += weights[index]
+        when 'active' then done += weights[index] * active_fraction(step, weights[index])
+        end
+      end
+      [(done / weights.sum * 100).floor, MAX_PERCENT].min
+    end
+
+    def active_fraction(step, weight)
+      return 0.0 unless estimated?
+
+      [step_elapsed(step) / weight, STEP_CAP].min
+    end
+
+    def estimated?
+      @steps.any? { |step| estimate(step) }
+    end
+
+    def estimate(step)
+      value = @estimates[step['key']]
+      value.is_a?(Numeric) && value.positive? ? [value, MIN_WEIGHT].max : nil
+    end
+
+    # A step with no history of its own borrows the average of the ones that have it.
+    def weights
+      @weights ||= begin
+        known = @steps.filter_map { |step| estimate(step) }
+        fallback = known.empty? ? 1.0 : known.sum / known.length
+        @steps.map { |step| estimate(step) || fallback }
+      end
+    end
+
+    def current_index
+      @current_index ||= @steps.index { |step| step['state'] == 'active' } ||
+                         @steps.index { |step| step['state'] == 'pending' } || (@steps.length - 1)
+    end
+
+    def current_step
+      @steps[current_index]
+    end
+
+    def step_elapsed(step)
+      started = parse(step['started_at'])
+      started ? [@now - started, 0].max : 0.0
+    end
+
+    def slow?
+      step = @steps.find { |item| item['state'] == 'active' }
+      estimated? && !step.nil? && step_elapsed(step) > weights[@steps.index(step)] * SLOW_FACTOR
+    end
+
+    def remaining
+      @steps.each_with_index.sum do |step, index|
+        case step['state']
+        when 'pending' then weights[index]
+        when 'active' then [weights[index] - step_elapsed(step), 0].max
+        else 0
+        end
+      end
+    end
+
+    def eta_text
+      return nil unless estimated?
+      return 'Taking longer than usual' if slow?
+      return 'Almost done' if remaining < 5
+
+      "About #{DurationFormat.call(round_eta(remaining))} left"
+    end
+
+    # A countdown that changes by single seconds reads as noise; round to what a person would say.
+    def round_eta(seconds)
+      seconds >= 60 ? (seconds / 10.0).round * 10 : (seconds / 5.0).round * 5
+    end
+
+    def elapsed
+      @started_at ? [(@now - @started_at).floor, 0].max : nil
+    end
+
+    def parse(value)
+      value && Time.parse(value.to_s)
+    rescue ArgumentError
+      nil
+    end
+  end
+end

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