workspaces 0.1.10 → 0.1.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1974af7e7acc6d19fe556efa4af5e2f9e05635d8df564aa6b3e7e7f8a9096370
-  data.tar.gz: d819cb05a41259c8f9b0c7e49d42155f7b072daa88bd839b44351ddec7445b51
+  metadata.gz: 1425a9356962c4990de3a5a0f5ffb1b8660325bcff165bfb8336fb7c468696ef
+  data.tar.gz: 878aff1b14d9ec8f13902a9ac3abd35e47cce3536d640d25b15a8e5a50426936
 SHA512:
-  metadata.gz: ad1115622e9f3c85fb12c63ba8268161054cca32675a081b6d43b5a11b1b5f1a55c0491a143631277c12aa2d019e10eb228acfcdb26fecce719a45f0336c8f3f
-  data.tar.gz: 236ca0df90dc5e0403fca4d494bcbeabf90117aabbd12c12175d3eecf4d2475fc36e432430e3ece7c61c651188c234daeef041ed148812d80ef71e983fda5afe
+  metadata.gz: '059361fdfac7d7328f4f50d31efeb647656375582a4d178f4f0d6f7c62affae21eaf53f67cf9590da272f29803fdefa904ebba36e18c8b570b97b12ad9c86ca3'
+  data.tar.gz: c623574a0d2105f00b22ed460c597941e09fead329a335d47f01c9967d65ec84da098e23c08c4fdb0ace7358c6d7c929f4d5fa6a228bf21fb12a960a75d4b8c8

data/DESIGN.md

@@ -48,19 +48,28 @@ Restrained tooling UI: dark elevated panels, compact spacing rhythm, clear statu
 - **PR source update**: a secondary Update from PR form only for PR-sourced workspaces; it fetches the latest PR head, fast-forwards the checkout, and preserves local edits without rebuilding or restarting. A persistent result message explains when rebuild is needed or when a retained stash needs manual recovery.
 - **Failure panel**: prominently above the log, with escaped error details and a matching retry action.
 - **PR page**: existing workspaces are primary; creating another is a collapsed secondary disclosure. Creation is primary only when none exist.
-- **Lifecycle state machine**: the workspace detail page is driven by `Presentation::STATES`. Each state (`idle`, `busy`, `ready`, `stopped`, `error`/`interrupted`, `unknown`) declares which sections exist (progress, actions, environment, log, details, danger zone) and the label of the single environment-form button. Sections that are not usable or meaningful in a state are hidden, never shown disabled. The server renders the initial state and the polling script re-applies it from `presentation.sections`, so the page transitions without a reload.
-  - `idle` (brand new): only the environment editor plus a **Start workspace** button, with a one-line hint. No log, actions, details, or delete.
-  - `busy` (setup/restart running): only progress and the live log.
-  - `ready`: everything, with **Save & restart**.
-  - `stopped`: no progress from the previous run; **Save & start**.
-  - `error`/`interrupted`: retry action, environment editor, progress, and logs; **Save & retry**.
+- **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*, 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.
+  - `ready`: "Your workspace is ready" with a large **Open workspace** button. Everything else is collapsed.
+  - `stopped`: "Your workspace is paused" with a large **Start workspace** button.
+  - `error`/`interrupted`: a plain "Something didn't go to plan" with a large **Retry** button, the error shown, and technical details open.
+  - `unknown`: a minimal view with technical details open.
+- **Disclosure behavior**: the server renders the initial open state and the polling script re-applies it from `presentation.open`, but only when the state changes. A section the user opened or closed is left alone on later polls. Sections that are not meaningful in a state are hidden, never shown disabled.
 - **Action buttons**: start, prepare/rebuild, restart server, stop server, and refresh
-- **Actions & settings panel**: status-adjacent panel that combines routine lifecycle controls, Open workspace, Refresh status, PR update messaging, and editable environment settings so routine operations stay in one keyboard-reachable region.
 - **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.
-- **Preview destination**: a small muted URL in Workspace details, visible before readiness; the primary Open workspace action remains reserved for ready servers.
+- **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.
 - **Danger Zone**: isolated section on the detail page with explicit loss-of-uncommitted-and-untracked-work copy, an exact-workspace-ID confirmation field, and a destructive action. Deletion remains possible without JavaScript, is disabled while setup is busy, and never appears as a list-row action.

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

@@ -14,7 +14,7 @@
   let actionsSignature = null;
   function toggleBusyState(nextBusy) {
     busy = !!nextBusy;
-    root.querySelectorAll('.workspace-actions button').forEach((button) => {
+    root.querySelectorAll('.workspace-actions button, .lead__action button').forEach((button) => {
       button.disabled = busy;
     });
     if (window.WorkspaceEnvironment)
@@ -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 || '';
   }
 
@@ -95,9 +183,9 @@
     completed = Date.parse(data.completed_at);
     renderStatus(view);
     renderSections(view);
-    node('message').textContent = data.message || '';
+    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);
@@ -109,25 +197,74 @@
     root.querySelectorAll('[data-section]').forEach((element) => {
       element.hidden = !sections[element.dataset.section];
     });
-    const controls = node('controls');
-    if (controls) {
-      controls.hidden = !sections.actions && !sections.environment;
-      const title = node('actions-settings-title');
-      if (title && view.controls_title) title.textContent = view.controls_title;
-    }
-    const hint = node('hint');
-    if (hint) {
-      hint.textContent = view.hint || '';
-      hint.hidden = !view.hint;
-    }
-    node('message').hidden = view.state === 'idle';
+    renderLead(view);
+    applyDisclosureState(view);
     if (window.WorkspaceEnvironment)
       window.WorkspaceEnvironment.setSubmitLabel(view.environment_submit);
   }
 
+  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;
+    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;
+  function renderLeadAction(action) {
+    const holder = node('lead-action');
+    if (!holder) return;
+    const signature = JSON.stringify(action || null);
+    if (signature === leadSignature) return;
+    leadSignature = signature;
+    holder.replaceChildren();
+    if (!action || action.kind !== 'post' || !allowedActions.includes(action.key)) return;
+    const form = document.createElement('form');
+    form.method = 'post';
+    form.action = base + '/' + action.key;
+    const button = document.createElement('button');
+    button.className = 'button button--primary button--large';
+    button.textContent = action.label;
+    form.append(button);
+    holder.append(form);
+    toggleBusyState(busy);
+  }
+
+  // A disclosure opens by itself when its state says so (a failure must never be hidden,
+  // a fresh workspace needs its settings), but we never close one the user opened, and
+  // we only apply the state's preference when the state changes, not on every poll.
+  let lastDisclosureState = root.dataset.disclosureState || null;
+  function applyDisclosureState(view) {
+    if (view.state === lastDisclosureState) return;
+    lastDisclosureState = view.state;
+    const open = view.open || {};
+    [['environment-disclosure', open.environment], ['technical-disclosure', open.technical]].forEach(
+      ([id, shouldOpen]) => {
+        const element = node(id);
+        if (element) element.open = !!shouldOpen;
+      }
+    );
+  }
+
   function renderStatus(view) {
-    node('status').textContent = view.title;
-    node('activity').hidden = !view.busy;
     node('preview').hidden = !view.ready;
     node('error').textContent = view.error || '';
     node('error-panel').hidden = !view.error;
@@ -159,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);
   }