workspaces 0.1.11 → 0.1.13

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fc21704825da052eb9cde1ea64cf3ab4958242f08492cf2a5b538d6fd97ebca3
-  data.tar.gz: 46dc25654e97ef6fb461058470dcfeb56e5a82720fa6df875c5b3c34b5d273a6
+  metadata.gz: 1d730b2e0f349781b10fe24beefc003403f6709460fbe4e0420853988c05f1e5
+  data.tar.gz: '069ee33491c24526d1644a8877386a95720e8e61457a15296ba2da604067860a'
 SHA512:
-  metadata.gz: daa43e3151dd5bb2e4239ae61ca9322101eb8793d437a91782dfa71ec078ce42721d384bea49564c0929a087b9476ab8c76d44860ad806ab3dab7e4145352193
-  data.tar.gz: 61d43cac06ed0948041320abf6d0a876697241a26063f5aa3f85537580cea660c8e0c7af2e8589fad80a32c6d3ba8432140e959a9fee70ba791ca92f3c81534a
+  metadata.gz: b2174d3fa1eeb55ce8fffe1dba27a7eaab267fed9904c9b216f4c256a150006d83dfb2100768dc49e473fd54f7a3e687f2dc9f9f159cb1c1df948d128079d7a3
+  data.tar.gz: 32fbfbb3e6c5334fafa03bb2bbc74f6039b4e3d17ff5a19a58422fa3314af9be0ae0eaace1d4579f2926c5a5c156f0efa074c1e9aeb2dae04d6b19f8be08a872

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,14 @@ 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.
+- **Build progress**: while a build is being prepared the lead is the headline, a progress bar (`role="progressbar"` with a text value), and one line saying *Step n of m · name*, the percentage, the elapsed time and an estimate. The server computes the numbers from the step states and per-step averages frozen when the run began (`Progress`), and the script only draws them; the elapsed clock ticks locally between polls. A step well past its usual time turns the bar amber and the estimate reads "Taking longer than usual". Without history there is no time estimate. The bar is hidden when no build is running.
+- **Build history**: every finished run is appended to `build-history.jsonl` (`BuildHistory`). Estimates are the mean of a step's last 10 successful completions; failed runs are recorded but never counted. Recording is best-effort and cannot fail a build.
 - **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,41 @@ 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.
+
+### Build history and the progress bar
+
+While a workspace is being prepared the dashboard shows a progress bar with the current step,
+the percentage, the elapsed time and, once there is history, an estimate of what is left.
+
+Every finished run is appended to `build-history.jsonl` in the Workspaces home, one JSON
+object per line, shared by all workspaces of the project. It is written quietly and a failure
+to write it never affects the build. Each record has the time, workspace, operation
+(`prepare` or `restart`), result (`complete` or `failed`), `total_seconds`, the Workspaces
+version, and each step's id, state and seconds. To see which step is getting slower:
+
+```sh
+jq -r 'select(.result=="complete") | .at[:10] as $d | .steps[] | [$d, .id, .seconds] | @tsv' \
+  "$WORKSPACES_HOME/build-history.jsonl"
+```
+
+Estimates are the mean of each step over its last 10 successful runs. Failed runs are
+recorded for the trend but never count toward "usual". They are read once when a run starts,
+so the bar does not shift while you watch it. Percentages weigh each step by how long it
+usually takes, count the running step by how much of its usual time has passed, never reach
+100% until the run finishes, and hold a step that overruns below done. A step more than 1.5
+times its usual time is flagged as taking longer than usual. With no history yet, steps weigh
+the same and no time estimate is shown. Delete the file to start the estimates over.
 
 ## Serve the dashboard and previews
 

data/lib/workspaces/build_history.rb

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+require 'json'
+require 'time'
+require 'fileutils'
+require_relative 'version'
+
+module Workspaces
+  # A quiet, append-only record of every finished run, plus the per-step averages derived from it.
+  #
+  # One JSON object per line in `build-history.jsonl` under the Workspaces home, shared by every
+  # workspace of the project, so it can be read with jq or loaded into a spreadsheet to see how
+  # setup times trend. Only successful runs feed the progress estimates; failed runs are recorded
+  # for the trend but never skew what "usual" means.
+  #
+  # Nothing here may break a build: recording failures are swallowed with a one-line warning.
+  module BuildHistory
+    SAMPLE_SIZE = 10
+    # The estimates only need recent runs, so a long history is read from its tail.
+    READ_BYTES = 512 * 1024
+
+    module_function
+
+    def record(workspace_id:, operation:, result:, total_seconds:, steps:, now: Time.now.utc)
+      line = JSON.generate(
+        'at' => now.iso8601, 'workspace_id' => workspace_id, 'operation' => operation, 'result' => result,
+        'total_seconds' => total_seconds, 'workspaces_version' => VERSION,
+        'steps' => Array(steps).map { |step| { 'id' => step['key'], 'state' => step['state'], 'seconds' => step['duration_seconds'] } }
+      )
+      path = Config.build_history_path
+      FileUtils.mkdir_p(path.dirname)
+      File.open(path, 'a') do |file|
+        file.flock(File::LOCK_EX)
+        file.puts(line)
+      end
+      true
+    rescue StandardError => e
+      warn "[Workspaces] build history not recorded: #{e.class}"
+      false
+    end
+
+    # Mean seconds for each requested step id, over its last SAMPLE_SIZE completions in
+    # successful runs. Steps never seen succeed are omitted.
+    def estimates(step_ids)
+      wanted = step_ids.to_a
+      samples = Hash.new { |hash, key| hash[key] = [] }
+      records.reverse_each do |record|
+        next unless record['result'] == 'complete'
+
+        Array(record['steps']).each do |step|
+          id = step['id']
+          seconds = step['seconds']
+          next unless wanted.include?(id) && step['state'] == 'complete' && seconds.is_a?(Numeric) && seconds >= 0
+          next if samples[id].length >= SAMPLE_SIZE
+
+          samples[id] << seconds
+        end
+      end
+      samples.transform_values { |values| (values.sum / values.length).round(3) }
+    rescue StandardError
+      {}
+    end
+
+    # Newest last. Unreadable or half-written lines are skipped.
+    def records
+      path = Config.build_history_path
+      return [] unless path.file?
+
+      text = File.open(path, 'rb') do |file|
+        size = file.size
+        file.seek(-READ_BYTES, IO::SEEK_END) if size > READ_BYTES
+        data = file.read.force_encoding('UTF-8')
+        size > READ_BYTES ? data.sub(/\A[^\n]*\n/, '') : data
+      end
+      text.each_line.filter_map do |line|
+        parsed = JSON.parse(line)
+        parsed if parsed.is_a?(Hash)
+      rescue JSON::ParserError
+        nil
+      end
+    end
+  end
+end

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,8 @@ require_relative 'workflow'
 require_relative 'tee_log'
 require_relative 'presentation'
 require_relative 'environment_overrides'
+require_relative 'duration_format'
+require_relative 'build_history'
 
 module Workspaces
   class Coordinator
@@ -98,7 +100,10 @@ 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'],
+        'estimates' => entry.fetch('estimates', {}),
+        '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),
@@ -148,10 +153,13 @@ module Workspaces
       steps = recipe.for_operation(restart: restart).map do |step|
         { 'key' => step['id'], 'label' => step['name'], 'state' => 'pending', 'duration_seconds' => nil }
       end
+      # Frozen for the whole run, so the bar does not shift under the reader and the history file
+      # is read once per run rather than once per poll.
       update(id, 'status' => 'preparing', 'message' => restart ? 'Restarting application' : 'Preparing workspace',
-                 'steps' => steps,
+                 'steps' => steps, 'estimates' => BuildHistory.estimates(steps.map { |step| step['key'] }),
                  '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 +176,54 @@ 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)
+      total = elapsed_since(started)
+      update(id, 'status' => 'ready', 'message' => 'Workspace ready', 'completed_at' => now, 'port' => port,
+                 'total_seconds' => total)
+      record_run(id, 'complete', total)
     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}" }
+      total = started && elapsed_since(started)
       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' => total)
+      record_run(id, 'failed', total)
+    end
+
+    # Appends to the build history. A problem here must never change how the run itself ended.
+    def record_run(id, result, total_seconds)
+      entry = @state.get(id) || {}
+      BuildHistory.record(workspace_id: id, operation: entry['operation'], result: result,
+                          total_seconds: total_seconds, steps: entry['steps'])
+    rescue StandardError
+      nil
+    end
+
+    def monotonic
+      Process.clock_gettime(Process::CLOCK_MONOTONIC)
+    end
+
+    def elapsed_since(started)
+      (monotonic - started).round(3)
     end
 
     def locked?(id)
@@ -210,6 +244,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);
@@ -118,24 +206,43 @@
   function renderLead(view) {
     node('status').textContent = view.headline || view.title;
     node('summary').textContent = view.summary || '';
-    const subtitle = node('subtitle');
-    const activity = node('activity');
-    if (subtitle) {
-      const text = view.subtitle || '';
-      subtitle.hidden = !text;
-      // The text has its own element, so it can be set whether or not the server rendered any.
-      const target = node('subtitle-text');
-      if (target) target.textContent = text;
-    }
-    if (activity) activity.hidden = !view.busy;
+    renderProgress(view.progress);
     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);
   }
 
   // The lead action is a lifecycle post (start/retry) or, when ready, the preview link
   // rendered separately as #preview. Rebuild only when it actually changes.
   let leadSignature = null;
+  // The server decides the percentage, the step line and the estimate; this only draws them. The
+  // elapsed clock is ticked locally each second (see tick) so it keeps moving between polls.
+  function renderProgress(progress) {
+    const holder = node('build-progress');
+    if (!holder) return;
+    holder.hidden = !progress;
+    if (!progress) return;
+    const percent = progress.percent;
+    const bar = node('progress-bar');
+    bar.setAttribute('aria-valuenow', String(percent));
+    bar.setAttribute(
+      'aria-valuetext',
+      [progress.step_text + ' · ' + progress.step_label, progress.eta_text].filter(Boolean).join('. ')
+    );
+    bar.dataset.slow = progress.slow ? 'true' : 'false';
+    node('progress-fill').style.inlineSize = percent + '%';
+    node('progress-step').textContent = progress.step_text + ' · ' + progress.step_label;
+    node('progress-percent').textContent = percent + '%';
+    node('progress-eta').textContent = progress.eta_text ? ' · ' + progress.eta_text : '';
+    if (!Number.isFinite(started) && Number.isFinite(progress.elapsed_seconds))
+      node('elapsed').textContent = formatDuration(progress.elapsed_seconds);
+  }
+
   function renderLeadAction(action) {
     const holder = node('lead-action');
     if (!holder) return;
@@ -203,9 +310,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);
   }