workspaces 0.1.18 → 0.1.19

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8a0a1c93490624ea0d8bb2fe77ddb8e7d1ad9bf53fe7700b6eec7245cc2e031a
-  data.tar.gz: 561ec874bbbe8d1c537066b612065c23db82caea34ca8d19cc894b66245be24d
+  metadata.gz: 1663319f23323ff66ace4b0744db8bd152448d78ed38d164299bf3c8e641ef8d
+  data.tar.gz: 44dea1893b4fc1299a7bb2c064b302e556b3574baebd2b7215fad8747c6b80c6
 SHA512:
-  metadata.gz: 7c9e26c91a93c37d8ea2391a0dd1c6ed3a163ba64c37deb2d73cae6d4688c33a7d5f9573ff98a8510789820d06e3f9af36dd78e86ba66b80a13435b11526ffd4
-  data.tar.gz: d0deac511f060614b66a41e793af6a4e3c7eb64e2150681dccd65c4910f0fffb5b74d213db865f38a3cb748adfc712bcfdf0a268328d4d9aea4d3375e23f2070
+  metadata.gz: c00c46b1ac312ae72bb239d74da78fe7c8b4094e0a04d6ae0ebf44232df1050c63f0d5c8a15232daef42d7b9ba526ca71cf86c70731728878db936d98a8b939d
+  data.tar.gz: d285c6a6d3f77f94da739295120d7538babc59de94c37fa538eeb0e49c6be6eaefaefe72e2524b9ad448a41032e676fa57f445d359adf15a0bdeba55046ccecc

data/DESIGN.md

@@ -8,26 +8,22 @@ GET is read-only. All creation and lifecycle controls submit same-origin POST fo
 
 ## Visual direction
 
-Restrained tooling UI: dark elevated panels, compact spacing rhythm, clear status affordances, and no decorative animation.
+Restrained tooling UI: a near-black page, one slightly lighter card surface with a hairline border and no shadow, a compact spacing rhythm, clear status affordances, and no decorative animation. Every text pairing is at least 4.5:1 against its surface.
 
 ## Tokens used
 
 ### Color
 
-- `--bg`: shell background
-- `--bg-elevated`: panel surface
-- `--border`: panel/control borders
-- `--text`: primary text
-- `--muted`: secondary/supporting text
-- `--accent`: active status and primary action
-- `--success`: completed/ready states
-- `--danger`: failed/error states
-- `--warning`: retry/connection warning text
+- `--bg` `#0b0f17`: page. `--bg-elevated` `#141a26`: card surface. `--border` `#2a3447`: card edge. `--divider` `#252e41`: row dividers. `--border-strong` `#3f4b63`: the table header rule.
+- `--control-border`: the edge of inputs, outline buttons and tabs. Currently `#3f4b63`, about 2:1 against the card. WCAG 1.4.11 asks 3:1 for a control's boundary, so this is a known shortfall, kept to match the design handoff; `#5b6b8a` or lighter reaches 3:1. It is one token, so changing it is a one-line edit.
+- Text: `--text-strong` `#f8fafc` (headings, workspace names, input values), `--text` `#e2e8f0` (body), `--text-cell` `#cbd5e1` (table cells, logs), `--muted` `#a8b3c7` (secondary), `--placeholder` `#8a97ad`.
+- `--accent` `#6fa8ff` with `--on-accent` `#06101f` text on buttons; `--accent-hover` `#8dbbff` for link and button hover. `--success`, `--danger` and `--warning` are unchanged.
+- **Status pills** take three custom properties, `--pill-bg`, `--pill-text` and `--pill-dot`, set per `data-status`. Sleeping indigo, idle amber and stopped red come from the handoff. Ready green, preparing cyan, error deeper red and interrupted orange were chosen to the same contrast (text 8:1 or better, dot 3:1 or better). Any other status gets the neutral slate pair.
 
 ### Radius and depth
 
-- `--radius`: 12px panel corners
-- `--shadow`: single elevated panel shadow
+- `--radius`: 12px panel corners. `--radius-control`: 8px for inputs, buttons and tabs. `--control-height`: 44px.
+- `--shadow`: none. Panels are separated by their border alone.
 
 ### Spacing scale
 
@@ -35,20 +31,25 @@ Restrained tooling UI: dark elevated panels, compact spacing rhythm, clear statu
 
 ### Typography
 
-- System sans stack for body/content
-- System mono stack for logs/error text
+- Interface: Inter (`--font-sans`) at 15px body, 14px labels at 600, h1 32px at 700, panel h2 20px at 600, table column headers 12px at 600 uppercase with 0.06em tracking.
+- Workspace names, input values and logs: JetBrains Mono (`--font-mono`), 14px. Both stacks fall back to system fonts, because nothing is loaded from the network.
+- Timestamps use `font-variant-numeric: tabular-nums`.
 
 ## Component primitives
 
-- **Creation form**: labelled branch, PR, and new-branch inputs with a primary create action
-- **Workspace inventory**: one row per managed workspace with a status distinct from backend running state, creation and last startup times, and a link to its detail page. Unknown timestamps are shown as unavailable, not inferred from recent setup.
-- **Status pill**: current workspace status as text
+- **Creation form**: four labelled fields in one wrapping row (`flex: 1 1 220px`, 16px gap), each with a real `<label for>`, then a `type="submit"` button on its own line.
+- **Workspace inventory**: a centered column up to 1180px. The page header carries "N managed worktrees · none running" (or "· K running"), counted from the data. The table sits in an `overflow-x: auto` wrapper with `min-width: 820px`, so a phone scrolls it sideways instead of cramming or hiding columns. Rows have 16px padding; workspace names are monospaced links with no underline until hover. Times read "Oct 27, 10:48", are UTC (the headers say so) and keep the full ISO value in a `title`. A missing start reads "Never" and a missing creation time "Unavailable", in the muted colour.
+- **Status pill**: a dot and one word (13px, 600, fully rounded), never colour alone. A busy workspace adds "(busy)" and pulses its dot, which stops under reduced motion.
 - **Setup progress**: names and ordered states come from repository run steps; failures are highlighted. Restart shows the background launch and later readiness commands.
 - **Actions by state**: idle/stopped offers Start; active operations show progress without lifecycle buttons; failure offers Retry; ready offers Open workspace plus rebuild/restart/stop.
 - **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.
-- **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`:
+- **Workspace card**: the default page for a workspace (`/workspaces/ID`, and the same card at the visitor's own address on a preview host while the workspace is not serving). One centered card, about 26rem wide: the workspace id with a gear (an icon link to `/workspaces/ID/settings`, labelled "Settings and details"), the headline and a muted sentence, the *Preset: name* badge when the saved settings match a preset, the progress bar with its step line, elapsed time and estimate, then at most one large full-width action. Idle shows a single start form with a preset select; ready shows **Open workspace**; asleep or stopped shows **Wake workspace** or **Start workspace**; failure shows the shortened error with a link to the full log. The card never opens the preview by itself.
+  - **Shared with the settings page**: the card reuses the page's element ids and `app.js`, so polling needs no second script. `app.js` tolerates the elements the card lacks (actions, steps, logs, environment).
+  - **On a preview host** (`data-base="/__workspaces"`, `data-reload-when-ready="true"`): the card is served from the workspace's own origin, so it is the smallest surface that can work. It polls `/__workspaces/status`, posts only to `/__workspaces/start|prepare|restart|resume`, shows a fixed failure line instead of error text, and reloads the current page once when the workspace is ready. Everything else (settings, environment, secrets, logs, removal) stays on the shared dashboard origin behind its same-origin check.
+  - **Settings page**: the full page described below, with a *Back to workspace* link. It is where Update from PR, keep-awake, rebuild, restart, stop, environment editing and deletion live.
+- **Three layers** (the settings page; the card shows only the lead): 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.
@@ -89,6 +90,6 @@ Restrained tooling UI: dark elevated panels, compact spacing rhythm, clear statu
 
 ## Responsive behavior
 
-- Single-column layout with intrinsic grid sections
-- Panel padding compresses at <=640px
-- No horizontal scrolling expected at 375px viewport
+- Single-column layout with intrinsic grid sections; panel padding is 28px and compresses to 20px at <=640px
+- The workspace table is the one deliberate exception to "no horizontal scrolling": it keeps its columns and scrolls inside its own wrapper, rather than stacking rows and hiding the dates
+- Everything else fits a 375px viewport

data/README.md

@@ -120,7 +120,9 @@ A ready workspace that sees no preview traffic for a while is put to sleep: its
 managed process group, and nothing shared such as PostgreSQL or Redis) is stopped, and the
 front door keeps answering on the same preview URL. The worktree, database, dependencies, built
 assets, environment settings and build history are untouched. The first request to a sleeping
-preview wakes it, waits for readiness and then forwards that request.
+preview wakes it. A browser opening a page is shown the waiting card (below) at that address, and
+the card reloads the page once the workspace is ready. Any other request (an API call, an asset, a
+form post) waits for readiness and is then forwarded.
 
 ```sh
 WORKSPACES_SLEEP_AFTER_MINUTES=30   # default; 15 also works; 0 switches sleeping off
@@ -154,7 +156,8 @@ What counts as activity:
 How waking behaves:
 
 - Only an intentionally sleeping workspace wakes. A workspace stopped by hand, failed, or still
-  preparing is never started by traffic; a GET still lands on the dashboard as before.
+  preparing is never started by traffic. A browser opening a page is shown the waiting card; any
+  other GET is redirected to the card on the dashboard host, and other methods get `503`.
 - Simultaneous first requests share one wake and start one server. A request is sent upstream
   once, never replayed, and keeps its method and body.
 - A wake runs only the server and readiness steps. If a step before the server changed in
@@ -194,6 +197,43 @@ provides `WORKSPACE_RUN_ID`). The runner also supplies `WORKSPACE_URL` and
 `WORKSPACE_HOST` for applications that need browser-facing URLs and host settings.
 `serve` does **not** start workspace backends; use `start` or `restart` for those.
 
+### The workspace card and the settings page
+
+`/workspaces/<id>` is one small card in the middle of the screen: a headline, the progress bar
+while something is running, the preset in use, and the single next action. That action is **Open
+workspace** when ready, **Wake workspace** or **Start workspace** when asleep or stopped, and
+**Retry failed step** or **Continue setup** after a failure. A gear links to
+`/workspaces/<id>/settings`, which is the full page: environment variables and secrets, setup
+steps and logs, workspace details, lifecycle controls and removal. A new workspace starts from the
+card by choosing one preset (or the defaults); use the settings page to edit variables first.
+Update from PR lives on the settings page and returns there. Nothing opens the preview for you;
+the card only offers the button.
+
+The `/workspaces` list and the PR page are unchanged.
+
+#### The waiting card on a preview host
+
+When a browser opens a page of a workspace that is not serving (stopped, preparing, failed or
+asleep), the preview host answers `200` with the same card instead of redirecting to the
+dashboard, so the address in the bar is the one the visitor asked for. A sleeping workspace is
+woken at once. The card polls its status and, when the workspace is ready, reloads the page, so the
+visitor lands where they meant to go, query string included.
+
+- Only browser navigations see it: a `GET` that accepts `text/html`, is not an `XMLHttpRequest`
+  and, when the browser says, has `Sec-Fetch-Mode: navigate`. API calls, assets and other methods
+  behave as before.
+- The preview origin also serves the workspace's own app, so the card is deliberately small. Its
+  endpoints are `GET /__workspaces/status` and `POST /__workspaces/start|prepare|restart|resume`.
+  The prefix is reserved: any other path under it answers `404`, and it is never forwarded to the
+  app. Settings, environment, secrets, logs and removal are not reachable from it.
+- The posts accept only the workspace's own preview origin (the `Origin`, or `Referer`, must match
+  `ws-<id>…`); the shared dashboard origin and other workspaces are refused. After a post the
+  visitor returns to the page they were on.
+- The status payload carries no logs, steps, environment values or error text. A failure reads
+  "Setup failed. Open settings for the full log.", with the gear and link going to the shared
+  settings page.
+- Polling the card is not preview traffic, so it never keeps a workspace awake.
+
 ### Re-running part of a run
 
 When a run fails, or is interrupted, you do not have to start over. `resume` continues from the

data/lib/workspaces/config.rb

@@ -130,6 +130,10 @@ module Workspaces
       "#{public_origin}/workspaces/#{validate_id!(id)}"
     end
 
+    def self.settings_url(id)
+      "#{dashboard_url(id)}/settings"
+    end
+
     def self.validate_preview_subdomain_prefix!(prefix)
       parts = prefix.to_s.split('.', -1)
       raise ArgumentError, 'WORKSPACES_SUBDOMAIN_PREFIX must not be empty' if parts.empty? || parts.any?(&:empty?)

data/lib/workspaces/coordinator.rb

@@ -74,6 +74,14 @@ module Workspaces
                  })
     end
 
+    # Applies one named preset (see EnvironmentOverrides#apply_preset) and starts the workspace,
+    # restarting it if it is already up.
+    def apply_environment_preset(id, name:)
+      restart = Backend.new(id).running? || sleeping?(id)
+      launch(id, restart: restart, force: true,
+                 prelaunch: ->(_workspace) { EnvironmentOverrides.new(id).apply_preset(name) })
+    end
+
     def replace_editable_environment(id, text:)
       restart = Backend.new(id).running? || sleeping?(id)
       launch(id, restart: restart, force: true,

data/lib/workspaces/dashboard/app.js

@@ -3,7 +3,7 @@
   const root = document.getElementById('workspace');
   if (!root) return;
   const node = (id) => document.getElementById(id);
-  const base = '/workspaces/' + root.dataset.id;
+  const base = root.dataset.base || '/workspaces/' + root.dataset.id;
   const selectedLog = new URLSearchParams(window.location.search).get('log') === 'backend'
     ? 'backend'
     : 'setup';
@@ -30,7 +30,9 @@
     const signature = JSON.stringify(actions);
     if (signature === actionsSignature) return;
     actionsSignature = signature;
-    node('actions').replaceChildren();
+    const holder = node('actions');
+    if (!holder) return;
+    holder.replaceChildren();
     actions.forEach((action) => {
       if (!allowedActions.includes(action.key)) return;
       const form = document.createElement('form');
@@ -41,7 +43,7 @@
         'button ' + (action.primary ? 'button--primary' : 'button--subtle');
       button.textContent = action.label;
       form.append(button);
-      node('actions').append(form);
+      holder.append(form);
     });
     toggleBusyState(busy);
   }
@@ -213,7 +215,8 @@
       const full = node('full-log');
       if (full) writeLog(full.querySelector('pre'), data.log_tail);
     }
-    node('updated').textContent = data.updated_at || '';
+    const updated = node('updated');
+    if (updated) updated.textContent = data.updated_at || '';
   }
 
   function update(data) {
@@ -226,7 +229,8 @@
     renderStatus(view);
     renderSections(view);
     if (node('message')) node('message').textContent = data.message || '';
-    node('source-update-message').textContent = data.source_update_message || '';
+    const sourceMessage = node('source-update-message');
+    if (sourceMessage) sourceMessage.textContent = data.source_update_message || '';
     renderSteps(view, data.step_logs);
     renderActions(view.actions);
     if (window.WorkspaceEnvironment)
@@ -271,6 +275,9 @@
       badge.textContent = view.current_preset ? 'Preset: ' + view.current_preset : '';
     }
     renderLeadAction(view.lead_action);
+    root.querySelectorAll('[data-only-state]').forEach((element) => {
+      element.hidden = element.dataset.onlyState !== view.state;
+    });
   }
 
   // The lead action is a lifecycle post (start/retry) or, when ready, the preview link
@@ -334,8 +341,17 @@
     );
   }
 
+  // A card on a preview host stands in for the page the visitor asked for; reloading brings them to it.
+  let reloading = false;
+  function reloadWhenReady(view) {
+    if (!view.ready || reloading || root.dataset.reloadWhenReady !== 'true') return;
+    reloading = true;
+    window.location.reload();
+  }
+
   function renderStatus(view) {
     node('preview').hidden = !view.ready;
+    reloadWhenReady(view);
     node('error').textContent = view.error || '';
     node('error-panel').hidden = !view.error;
     if (window.WorkspaceEnvironment)

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

@@ -0,0 +1,42 @@
+<main class="card-page" id="workspace" data-id="<%= @id %>" data-base="<%= action_base %>" data-reload-when-ready="<%= @preview ? 'true' : 'false' %>" data-status="<%= field('status') %>" data-started="<%= field('prepare_started_at') %>" data-completed="<%= field('completed_at') %>" data-busy="<%= @presentation['busy'] %>" data-disclosure-state="<%= escape(@presentation['state']) %>">
+  <section class="card" aria-labelledby="status">
+    <header class="card__header">
+      <p class="card__name"><span class="eyebrow">Workspace</span><span class="card__id"><%= @id %></span></p>
+      <a class="icon-link" href="<%= escape(settings_href) %>" aria-label="Settings and details" title="Settings and details"><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" d="M10.52 5.57L10.69 2.69L13.31 2.69L13.48 5.57A6.6 6.6 0 0 1 15.50 6.40L17.66 4.49L19.51 6.34L17.60 8.50A6.6 6.6 0 0 1 18.43 10.52L21.31 10.69L21.31 13.31L18.43 13.48A6.6 6.6 0 0 1 17.60 15.50L19.51 17.66L17.66 19.51L15.50 17.60A6.6 6.6 0 0 1 13.48 18.43L13.31 21.31L10.69 21.31L10.52 18.43A6.6 6.6 0 0 1 8.50 17.60L6.34 19.51L4.49 17.66L6.40 15.50A6.6 6.6 0 0 1 5.57 13.48L2.69 13.31L2.69 10.69L5.57 10.52A6.6 6.6 0 0 1 6.40 8.50L4.49 6.34L6.34 4.49L8.50 6.40A6.6 6.6 0 0 1 10.52 5.57ZM9.20 12.00a2.8 2.8 0 1 0 5.6 0a2.8 2.8 0 1 0 -5.6 0Z"/></svg></a>
+    </header>
+    <div class="card__text">
+      <h1 id="status" role="status"><%= escape(@presentation['headline']) %></h1>
+      <p id="summary" class="card__summary"><%= escape(@presentation['summary']) %></p>
+      <p><span class="badge" id="environment-preset-badge" <%= 'hidden' unless @presentation['current_preset'] %>><%= escape(preset_badge_text) %></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>
+    <form method="post" action="<%= start_form_action %>" class="card__start stack stack--snug lead__action" data-only-state="idle" <%= 'hidden' unless @presentation['state'] == 'idle' %>>
+      <% unless environment_presets.empty? %>
+        <label class="field" for="card-preset">Preset
+          <select id="card-preset" name="preset">
+            <% environment_presets.each_key do |name| %><option value="<%= escape(name) %>"><%= escape(name) %></option><% end %>
+            <option value="">Defaults</option>
+          </select>
+        </label>
+      <% end %>
+      <button class="button button--primary button--large"><%= escape(@presentation['environment_submit']) %></button>
+    </form>
+    <div class="card__actions">
+      <a id="preview" class="button button--primary button--large" href="<%= escape(Config.preview_url(@id)) %>" <%= 'hidden' unless @presentation['ready'] %> target="_blank" rel="noopener noreferrer">Open workspace</a>
+      <div id="lead-action" class="lead__action"><%= lead_action_form(@presentation['lead_action']) %></div>
+    </div>
+    <p id="sleep-note" class="muted" <%= 'hidden' if sleep_note.empty? %>><%= escape(sleep_note) %></p>
+    <section class="error-panel setup-error" id="error-panel" role="alert" <%= 'hidden' unless @presentation['error'] %>>
+      <h2>What went wrong</h2><pre id="error"><%= escape(@presentation['error']) %></pre>
+      <a href="<%= escape(settings_href) %>">Open the full log</a>
+    </section>
+    <p id="connection" role="status"></p>
+  </section>
+  <noscript><a href="<%= @preview ? '' : "/workspaces/#{@id}" %>">Refresh status</a></noscript>
+</main>

data/lib/workspaces/dashboard/styles.css

@@ -1,15 +1,31 @@
 :root {
-  --bg: #0f1524;
-  --bg-elevated: #182035;
-  --border: #2f3a57;
-  --text: #e8edf9;
-  --muted: #9eaccd;
-  --accent: #4f8dff;
+  /* Surfaces. Page, then card, then the hairlines that divide them. */
+  --bg: #0b0f17;
+  --bg-elevated: #141a26;
+  --border: #2a3447;
+  --divider: #252e41;
+  --border-strong: #3f4b63;
+  /* The edge of an input or outline button. WCAG asks 3:1 for a control's boundary against what is
+     behind it; #3f4b63 is about 2:1 on the card. One token, so raising it is a one-line change. */
+  --control-border: #3f4b63;
+  /* Text. Every pairing with a surface is at least 4.5:1. */
+  --text-strong: #f8fafc;
+  --text: #e2e8f0;
+  --text-cell: #cbd5e1;
+  --muted: #a8b3c7;
+  --placeholder: #8a97ad;
+  --accent: #6fa8ff;
+  --accent-hover: #8dbbff;
+  --on-accent: #06101f;
   --success: #2fbf8f;
   --danger: #ff6f74;
   --warning: #f1bb53;
   --radius: 12px;
-  --shadow: 0 10px 30px rgba(8, 12, 20, 0.35);
+  --radius-control: 8px;
+  --control-height: 44px;
+  --shadow: none;
+  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
@@ -18,7 +34,7 @@
   --space-6: 24px;
   --space-8: 32px;
   --space-10: 40px;
-  --panel-padding: var(--space-6);
+  --panel-padding: 28px;
 }
 
 * {
@@ -29,6 +45,8 @@
    which tag was used. Reset them once; every gap is declared by a stack rule below
    using the --space-* scale. */
 h1, h2, h3, h4, p, ul, ol, dl, dd, pre, fieldset, figure { margin: 0; }
+h2 { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--text-strong); }
+label { font-size: 14px; font-weight: 600; }
 ol, ul { padding-inline-start: var(--space-6); }
 legend { padding: 0; }
 
@@ -45,9 +63,20 @@ legend { padding: 0; }
 .stack--loose { gap: var(--space-6); }
 
 [hidden] { display: none !important; }
-input { max-width: 100%; padding: var(--space-2); color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--space-1); }
-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+input:not([type='checkbox']):not([type='radio']), select {
+  max-inline-size: 100%;
+  block-size: var(--control-height);
+  padding-inline: var(--space-3);
+  color: var(--text-strong);
+  background: var(--bg);
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius-control);
+  font-family: var(--font-mono);
+  font-size: 14px;
+}
+select { font-family: var(--font-sans); font-size: 15px; }
+::placeholder { color: var(--placeholder); opacity: 1; }
+input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
 summary { cursor: pointer; color: var(--muted); }
 summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
 .workspace-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@@ -67,9 +96,11 @@ dd + dt { margin-block-start: var(--space-3); }
 body {
   margin: 0;
   min-block-size: 100dvb;
-  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-family: var(--font-sans);
+  font-size: 15px;
+  line-height: 1.5;
   color: var(--text);
-  background: linear-gradient(180deg, #0c1220 0%, var(--bg) 60%, #0b1020 100%);
+  background: var(--bg);
 }
 
 a {
@@ -77,7 +108,7 @@ a {
 }
 
 .dashboard {
-  inline-size: min(100% - var(--space-6), 960px);
+  inline-size: min(100% - var(--space-6), 1180px);
   margin-inline: auto;
   padding-block: var(--space-8);
   display: grid;
@@ -91,6 +122,7 @@ a {
   align-items: end;
   gap: var(--space-4);
 }
+.dashboard__note { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
 
 .eyebrow {
   margin: 0;
@@ -102,9 +134,13 @@ a {
 
 h1 {
   margin: 0;
-  font-size: clamp(1.4rem, 2vw + 1rem, 2rem);
+  color: var(--text-strong);
+  font-size: 32px;
+  font-weight: 700;
   line-height: 1.2;
 }
+/* A workspace id as the page title: long and monospaced, so smaller, and allowed to wrap. */
+.mono-title { font-family: var(--font-mono); font-size: clamp(1.1rem, 2vw + 0.5rem, 1.5rem); }
 
 .header-message {
   margin: var(--space-2) 0 0;
@@ -152,8 +188,8 @@ h1 {
 /* Lead: a friendly headline, one sentence, and at most one big button. */
 .lead { gap: var(--space-4); padding-block: var(--space-8); }
 .lead__text { display: grid; gap: var(--space-2); }
-.lead h2 { font-size: clamp(1.4rem, 2vw + 1rem, 1.9rem); line-height: 1.2; }
-.lead__summary { max-inline-size: 38rem; color: var(--muted); font-size: 1.05rem; line-height: 1.5; }
+.lead h2 { font-size: 24px; line-height: 1.25; }
+.lead__summary { max-inline-size: 38rem; color: var(--muted); font-size: 15px; line-height: 1.5; }
 .lead__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
 .lead__actions:empty { display: none; }
 
@@ -167,7 +203,7 @@ h1 {
 .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); }
+.button--large { min-block-size: 52px; padding-inline: var(--space-8); font-size: 16px; border-radius: var(--radius-control); }
 
 /* Disclosures: quiet by default, a clear label and a one-line hint of what is inside. */
 /* A disclosure has to read as a control. The native marker is lost once a summary is a flex
@@ -247,35 +283,6 @@ h1 {
   font-size: 13px;
 }
 
-.status-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-  margin: 0;
-  font-weight: 600;
-}
-
-.status-dot {
-  inline-size: 10px;
-  block-size: 10px;
-  border-radius: 999px;
-  background: var(--warning);
-}
-
-.status-pill[data-status='ready'] .status-dot {
-  background: var(--success);
-}
-
-.status-pill[data-status='sleeping'] .status-dot {
-  background: var(--muted);
-}
-
-.status-pill[data-status='error'] .status-dot,
-.status-pill[data-status='interrupted'] .status-dot,
-.status-pill[data-status='stopped'] .status-dot {
-  background: var(--danger);
-}
-
 .status-value {
   margin: 0;
   font-weight: 600;
@@ -376,11 +383,11 @@ h1 {
   min-block-size: 12rem;
   resize: vertical;
   padding: var(--space-3);
-  color: var(--text);
+  color: var(--text-strong);
   background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--space-1);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius-control);
+  font-family: var(--font-mono);
   line-height: 1.5;
   white-space: pre;
   overflow: auto;
@@ -399,12 +406,14 @@ h1 {
 .env-row input[type='password'],
 .env-row .env-row__name {
   min-inline-size: 0;
-  padding: var(--space-2) var(--space-3);
-  color: var(--text);
+  block-size: var(--control-height);
+  padding: 0 var(--space-3);
+  color: var(--text-strong);
   background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--space-1);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius-control);
+  font-family: var(--font-mono);
+  font-size: 14px;
 }
 
 .env-row[data-secret] .env-row__value { border-style: dashed; }
@@ -470,9 +479,9 @@ fieldset:disabled {
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  min-block-size: 40px;
-  padding-inline: var(--space-4);
-  border-radius: 10px;
+  min-block-size: var(--control-height);
+  padding-inline: var(--space-5);
+  border-radius: var(--radius-control);
   border: 1px solid transparent;
   text-decoration: none;
   font-size: 14px;
@@ -490,13 +499,14 @@ fieldset:disabled {
 
 .button:focus-visible {
   outline: 2px solid var(--accent);
-  outline-offset: 2px;
+  outline-offset: 1px;
 }
 
 .button--primary {
   background: var(--accent);
-  color: #ffffff;
+  color: var(--on-accent);
 }
+.button--primary:hover:not(:disabled) { background: var(--accent-hover); }
 
 .button--primary:disabled {
   opacity: 0.55;
@@ -505,10 +515,10 @@ fieldset:disabled {
 }
 
 .button--subtle {
-  border-color: var(--border);
+  border-color: var(--control-border);
 }
 
-.button--small { padding: 4px 10px; font-size: 12px; }
+.button--small { min-block-size: 32px; padding: 4px 10px; font-size: 12px; }
 
 .step-log__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-3) 0; }
 .step-log__actions[hidden] { display: none; }
@@ -525,17 +535,55 @@ fieldset:disabled {
 .danger-zone h2 { color: var(--danger); }
 .danger-zone form { display: grid; justify-items: start; gap: var(--space-3); }
 
-.workspace-table { inline-size: 100%; border-collapse: collapse; }
+.table-scroll { overflow-x: auto; }
+.workspace-table { inline-size: 100%; min-inline-size: 820px; border-collapse: collapse; }
 .workspace-table th,
-.workspace-table td { padding: var(--space-3) var(--space-4); text-align: start; vertical-align: middle; border-block-end: 1px solid var(--border); overflow-wrap: anywhere; }
+.workspace-table td { padding: 16px var(--space-4); text-align: start; vertical-align: middle; border-block-end: 1px solid var(--divider); overflow-wrap: anywhere; }
 .workspace-table th:first-child,
 .workspace-table td:first-child { padding-inline-start: 0; }
 .workspace-table th:last-child,
 .workspace-table td:last-child { padding-inline-end: 0; }
-.workspace-table thead th { padding-block-start: 0; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
-.workspace-table tbody tr:last-child > * { padding-block-end: 0; border-block-end: 0; }
-.workspace-table tbody th { font-weight: 600; }
-.workspace-table__date { color: var(--muted); font-size: 13px; white-space: nowrap; }
+.workspace-table thead th { padding-block: 0 12px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-block-end-color: var(--border-strong); }
+.workspace-table tbody tr:last-child > * { border-block-end: 0; }
+.workspace-table tbody th { font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
+.workspace-table tbody th a { color: var(--text-strong); text-decoration: none; }
+.workspace-table tbody th a:hover { color: var(--accent-hover); text-decoration: underline; }
+.workspace-table tbody th a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
+.workspace-table td { color: var(--text-cell); }
+.workspace-table__date { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.workspace-table__date .never { color: var(--muted); }
+
+/* A status is a dot and a word, never colour alone. The colours come from three custom properties so a
+   new status is one rule. Unlisted statuses fall back to the neutral pair. */
+.status-pill {
+  --pill-bg: #252e41; --pill-text: #cbd5e1; --pill-dot: #94a3b8;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  margin: 0;
+  padding: 3px 10px;
+  border-radius: 999px;
+  background: var(--pill-bg);
+  color: var(--pill-text);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.5;
+  white-space: nowrap;
+}
+.status-dot { inline-size: 7px; block-size: 7px; border-radius: 999px; background: var(--pill-dot); }
+.status-pill[data-status='sleeping'] { --pill-bg: #232c4a; --pill-text: #c7d2fe; --pill-dot: #a5b4fc; }
+.status-pill[data-status='idle'] { --pill-bg: #3a2e10; --pill-text: #fcd34d; --pill-dot: #fbbf24; }
+.status-pill[data-status='stopped'] { --pill-bg: #43191f; --pill-text: #fca5a5; --pill-dot: #f87171; }
+.status-pill[data-status='ready'] { --pill-bg: #12301f; --pill-text: #86efac; --pill-dot: #4ade80; }
+.status-pill[data-status='preparing'] { --pill-bg: #0f2f3d; --pill-text: #a5f3fc; --pill-dot: #22d3ee; }
+.status-pill[data-status='error'] { --pill-bg: #5a1a22; --pill-text: #fecaca; --pill-dot: #f87171; }
+.status-pill[data-status='interrupted'] { --pill-bg: #43250f; --pill-text: #fdba74; --pill-dot: #fb923c; }
+.status-pill[data-busy='true'] .status-dot { animation: workspace-pulse 1.5s infinite; }
+@media (prefers-reduced-motion: reduce) { .status-pill[data-busy='true'] .status-dot { animation: none; } }
+
+/* The create form: four fields in one wrapping row, the button on its own line below. */
+.create-fields { display: flex; flex-wrap: wrap; gap: var(--space-4); }
+.create-fields .field { flex: 1 1 220px; max-inline-size: none; }
 
 .field { display: grid; gap: var(--space-2); max-inline-size: 28rem; font-size: 14px; }
 .field input { inline-size: 100%; }
@@ -550,7 +598,7 @@ ol > li + li { margin-block-start: var(--space-2); }
 .muted {
   margin: 0;
   color: var(--muted);
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .error-panel h2,
@@ -566,9 +614,9 @@ ol > li + li { margin-block-start: var(--space-2); }
   padding: var(--space-3);
   border-radius: 10px;
   border: 1px solid var(--border);
-  background: #0f172a;
-  color: #d8e1f7;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  background: var(--bg);
+  color: var(--text-cell);
+  font-family: var(--font-mono);
   font-size: 12px;
   line-height: 1.4;
   white-space: pre-wrap;
@@ -596,8 +644,8 @@ ol > li + li { margin-block-start: var(--space-2); }
 .log-switch a {
   color: var(--muted);
   padding: var(--space-2) var(--space-3);
-  border: 1px solid var(--border);
-  border-radius: var(--space-1);
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius-control);
   text-decoration: none;
 }
 
@@ -641,21 +689,8 @@ ol > li + li { margin-block-start: var(--space-2); }
 p:empty:not([role]):not([aria-live]) { display: none; }
 
 @media (max-width: 640px) {
-  /* Stack each row: workspace, then status. Dates are desktop-only detail. */
-  .workspace-table,
-  .workspace-table tbody { display: block; }
-  .workspace-table thead,
-  .workspace-table th.workspace-table__date,
-  .workspace-table td.workspace-table__date { display: none; }
-  .workspace-table tr { display: grid; gap: var(--space-1); padding-block: var(--space-3); border-block-end: 1px solid var(--border); }
-  .workspace-table tbody tr:first-child { padding-block-start: 0; }
-  .workspace-table tbody tr:last-child { padding-block-end: 0; border-block-end: 0; }
-  .workspace-table th,
-  .workspace-table td { display: block; padding: 0; border: 0; }
-  .workspace-table tbody tr:last-child > * { padding-block-end: 0; }
-
   .dashboard {
-    inline-size: min(100% - var(--space-4), 960px);
+    inline-size: min(100% - var(--space-4), 1180px);
     padding-block: var(--space-6);
   }
 
@@ -664,7 +699,7 @@ p:empty:not([role]):not([aria-live]) { display: none; }
   .error-panel,
   .log-panel,
   .noscript-note {
-    --panel-padding: var(--space-4);
+    --panel-padding: var(--space-5);
     padding: var(--panel-padding);
   }
 
@@ -673,3 +708,23 @@ p:empty:not([role]):not([aria-live]) { display: none; }
     align-items: flex-start;
   }
 }
+
+/* The card: the default page for a workspace. One small square in the middle of the screen. */
+.card-page { min-block-size: 100dvb; display: grid; place-items: center; padding: var(--space-6) var(--space-3); }
+.card { inline-size: min(100%, 26rem); display: grid; gap: var(--space-5); align-content: start; padding: var(--panel-padding); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
+.card__header { display: flex; justify-content: space-between; align-items: start; gap: var(--space-3); }
+.card__name { display: grid; gap: var(--space-1); min-inline-size: 0; }
+.card__id { overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--text-strong); }
+.card__text { display: grid; gap: var(--space-2); }
+.card h1 { font-size: 24px; line-height: 1.25; }
+.card__summary { color: var(--muted); line-height: 1.5; }
+.card__actions { display: grid; gap: var(--space-3); }
+.card__actions:not(:has(*:not([hidden]))) { display: none; }
+.card__actions .button, .card__actions form, .card__start .button { inline-size: 100%; text-align: center; }
+.card__actions .button { display: inline-flex; justify-content: center; align-items: center; text-decoration: none; }
+.card .button--large { padding-inline: var(--space-4); }
+.card .setup-error pre { max-block-size: 8rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
+.card select { inline-size: 100%; }
+.icon-link { display: inline-flex; padding: var(--space-2); border-radius: var(--radius-control); color: var(--muted); }
+.icon-link:hover { color: var(--text); background: color-mix(in oklab, var(--accent) 12%, transparent); }
+.icon-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

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

@@ -1,7 +1,7 @@
 <main class="dashboard" id="workspace" data-id="<%= @id %>" data-status="<%= field('status') %>" data-started="<%= field('prepare_started_at') %>" data-completed="<%= field('completed_at') %>" data-busy="<%= @presentation['busy'] %>" data-disclosure-state="<%= escape(@presentation['state']) %>">
   <header class="dashboard__header">
-    <div class="dashboard__title"><p class="eyebrow">Managed workspace</p><h1><%= @id %></h1></div>
-    <a class="button button--subtle" href="/workspaces">All workspaces</a>
+    <div class="dashboard__title"><p class="eyebrow">Managed workspace</p><h1 class="mono-title"><%= @id %></h1></div>
+    <div class="header-actions"><a class="button button--subtle" href="/workspaces/<%= @id %>">Back to workspace</a><a class="button button--subtle" href="/workspaces">All workspaces</a></div>
   </header>
   <section class="status-panel lead" id="lead" data-section="lead" aria-labelledby="status" <%= 'hidden' unless section?('lead') %>>
     <div class="lead__text">
@@ -108,5 +108,5 @@
       </section>
     </div>
   </details>
-  <noscript><a href="/workspaces/<%= @id %>">Refresh status</a></noscript>
+  <noscript><a href="/workspaces/<%= @id %>/settings">Refresh status</a></noscript>
 </main>

data/lib/workspaces/dashboard_view.rb

@@ -1,5 +1,6 @@
 require 'erb'
 require 'json'
+require 'time'
 require_relative 'config'
 require_relative 'presentation'
 require_relative 'duration_format'
@@ -13,22 +14,42 @@ module Workspaces
     def self.index(workspaces)
       view = new({})
       view.document('Workspaces', <<~HTML)
-        <main class="dashboard"><header class="dashboard__header"><h1>Workspaces</h1></header>
-        <section class="status-panel"><h2>Create workspace</h2>
-        <p>Choose a branch, PR number, or new branch. Every submission creates a separate managed worktree.</p>
+        <main class="dashboard"><header class="dashboard__header"><h1>Workspaces</h1><p class="dashboard__note">#{view.inventory_summary(workspaces)}</p></header>
+        <section class="status-panel" aria-labelledby="create-heading"><h2 id="create-heading">Create workspace</h2>
+        <p>Pick an existing branch, a PR number, or a new branch. Each submission creates its own managed worktree.</p>
         <form method="post" action="/workspaces/create" class="stack">
-          <label class="field">Existing branch <input name="branch" placeholder="main"></label>
-          <label class="field">PR number <input name="pr" inputmode="numeric" placeholder="43828"></label>
-          <label class="field">New branch <input name="new_branch" placeholder="agent/fix-checkout"></label>
-          <label class="field">Start new branch from <input name="from" placeholder="HEAD"></label>
-          <button class="button button--primary">Create workspace</button>
+          <div class="create-fields">
+            <div class="field"><label for="create-branch">Existing branch</label><input id="create-branch" name="branch" placeholder="main" autocomplete="off" spellcheck="false"></div>
+            <div class="field"><label for="create-pr">PR number</label><input id="create-pr" name="pr" inputmode="numeric" placeholder="43828" autocomplete="off"></div>
+            <div class="field"><label for="create-new-branch">New branch</label><input id="create-new-branch" name="new_branch" placeholder="agent/fix-checkout" autocomplete="off" spellcheck="false"></div>
+            <div class="field"><label for="create-from">Start new branch from</label><input id="create-from" name="from" placeholder="HEAD" autocomplete="off" spellcheck="false"></div>
+          </div>
+          <button type="submit" class="button button--primary">Create workspace</button>
         </form></section>
-        <section class="status-panel"><h2>Managed workspaces</h2>
+        <section class="status-panel" aria-labelledby="inventory-heading"><h2 id="inventory-heading">Managed workspaces</h2>
         #{view.inventory_table(workspaces)}
         </section></main>
       HTML
     end
 
+    # The default page for a workspace: one small card with the headline, progress and the single
+    # next action. Everything else lives on the settings page.
+    def self.card(snapshot, preview: false)
+      new(snapshot, preview: preview).render_card
+    end
+
+    PREVIEW_STATUS_KEYS = %w(state busy ready headline summary progress lead_action current_preset sleep open).freeze
+    PREVIEW_ERROR = 'Setup failed. Open settings for the full log.'.freeze
+
+    # What the card polls for on a preview host, where the workspace's own pages share the origin.
+    # Only what the card draws: no log, no steps, no environment and no error text.
+    def self.preview_status(snapshot)
+      view = Presentation.new(snapshot).to_h
+      slim = view.slice(*PREVIEW_STATUS_KEYS).merge('error' => view['error'] ? PREVIEW_ERROR : '')
+      { 'presentation' => slim, 'prepare_started_at' => snapshot['prepare_started_at'],
+        'completed_at' => snapshot['completed_at'] }
+    end
+
     def self.pull_request(number, workspaces)
       new({}).render_pull_request(number, workspaces)
     end
@@ -51,8 +72,9 @@ module Workspaces
       SVG
     end
 
-    def initialize(snapshot)
+    def initialize(snapshot, preview: false)
       @snapshot = snapshot
+      @preview = preview
       @presentation = Presentation.new(snapshot).to_h
     end
 
@@ -63,6 +85,17 @@ module Workspaces
                                  encoding: 'UTF-8')).result(binding))
     end
 
+    # On a preview host the card is served from the workspace's own origin, so its controls go to the
+    # front door's reserved /__workspaces/ endpoints, it never shows error text, and it reloads the
+    # page the visitor asked for once the workspace is ready.
+    def render_card
+      @id = Config.validate_id!(@snapshot.fetch('workspace_id'))
+      @presentation = @presentation.merge('error' => PREVIEW_ERROR) if @preview && @presentation['error']
+      document("Workspace #{@id}",
+               ERB.new(File.read(File.join(__dir__, 'dashboard/card.html.erb'),
+                                 encoding: 'UTF-8')).result(binding))
+    end
+
     def render_pull_request(number, workspaces)
       @number = number
       @workspaces = workspaces
@@ -98,25 +131,56 @@ module Workspaces
       return '<p class="muted">No workspaces yet.</p>' if workspaces.empty?
 
       <<~HTML
+        <div class="table-scroll">
         <table class="workspace-table">
-          <thead><tr><th scope="col">Workspace</th><th scope="col">Status</th><th scope="col" class="workspace-table__date">Created</th><th scope="col" class="workspace-table__date">Last startup</th></tr></thead>
+          <thead><tr><th scope="col">Workspace</th><th scope="col">Status</th><th scope="col" class="workspace-table__date">Created (UTC)</th><th scope="col" class="workspace-table__date">Last startup (UTC)</th></tr></thead>
           <tbody>
         #{workspaces.map { |workspace| inventory_row(workspace) }.join}
           </tbody>
         </table>
+        </div>
       HTML
     end
 
+    # "8 managed worktrees · none running", counted from the data on the page.
+    def inventory_summary(workspaces)
+      total = workspaces.length
+      running = workspaces.count { |workspace| workspace['running'] }
+      noun = total == 1 ? 'managed worktree' : 'managed worktrees'
+      "#{total} #{noun} · #{running.zero? ? 'none running' : "#{running} running"}"
+    end
+
+    # "Oct 27, 10:48" in UTC, with the full value kept in the title. Anything that is not a timestamp is
+    # shown as it came rather than guessed at.
+    def short_time(value)
+      Time.iso8601(value.to_s).utc.strftime('%b %-d, %H:%M')
+    rescue ArgumentError
+      value.to_s
+    end
+
+    def time_cell(value, empty)
+      return "<span class=\"never\">#{empty}</span>" if value.nil? || value.to_s.empty?
+
+      "<time datetime=\"#{escape(value)}\" title=\"#{escape(value)}\">#{escape(short_time(value))}</time>"
+    end
+
+    # The word shown in a status pill. What the workspace is doing is the word; whether a server is
+    # up is the dot's job elsewhere, so there is no repeated "Not running ·" prefix.
+    def status_text(workspace)
+      status = (workspace['status'] || 'idle').to_s
+      status = status.capitalize
+      workspace['active'] ? "#{status} (busy)" : status
+    end
+
     def inventory_row(workspace)
       id = escape(Config.validate_id!(workspace.fetch('id')))
       status = escape(workspace['status'] || 'idle')
-      running = workspace['running'] ? 'Running' : 'Not running'
       <<~HTML
         <tr>
           <th scope="row"><a href="/workspaces/#{id}">#{id}</a></th>
-          <td><span class="status-pill" data-status="#{status}"><span class="status-dot" aria-hidden="true"></span>#{running} · #{status}#{workspace['active'] ? ' (busy)' : ''}</span></td>
-          <td class="workspace-table__date"><time datetime="#{escape(workspace['created_at'])}">#{escape(workspace['created_at'] || 'Unavailable')}</time></td>
-          <td class="workspace-table__date"><time datetime="#{escape(workspace['started_at'])}">#{escape(workspace['started_at'] || 'Never')}</time></td>
+          <td><span class="status-pill" data-status="#{status}" data-busy="#{workspace['active'] ? 'true' : 'false'}"><span class="status-dot" aria-hidden="true"></span>#{escape(status_text(workspace))}</span></td>
+          <td class="workspace-table__date">#{time_cell(workspace['created_at'], 'Unavailable')}</td>
+          <td class="workspace-table__date">#{time_cell(workspace['started_at'], 'Never')}</td>
         </tr>
       HTML
     end
@@ -225,10 +289,26 @@ module Workspaces
     def lead_action_form(action)
       return '' unless action && action['kind'] == 'post'
 
-      "<form method=\"post\" action=\"/workspaces/#{@id}/#{action.fetch('key')}\">" \
+      "<form method=\"post\" action=\"#{action_base}/#{action.fetch('key')}\">" \
         "<button class=\"button button--primary button--large\">#{escape(action.fetch('label'))}</button></form>"
     end
 
+    def action_base
+      @preview ? '/__workspaces' : "/workspaces/#{@id}"
+    end
+
+    def settings_href
+      @preview ? Config.settings_url(@id) : "/workspaces/#{@id}/settings"
+    end
+
+    # Where the card's start form posts. A shared card with presets saves the chosen one through the
+    # environment form; a preview card starts through its own origin.
+    def start_form_action
+      return "#{action_base}/start" if @preview || environment_presets.empty?
+
+      "/workspaces/#{@id}/environment"
+    end
+
     def action_form(action)
       style = action['primary'] ? 'button--primary' : 'button--subtle'
       "<form method=\"post\" action=\"/workspaces/#{@id}/#{action.fetch('key')}\">" \

data/lib/workspaces/front_door.rb

@@ -12,13 +12,19 @@ require_relative 'sleep_policy'
 module Workspaces
   class FrontDoor
     WORKSPACE_ROUTE = %r{\A/workspaces/([a-z0-9]+(?:-[a-z0-9]+)*)
-                          (?:/(status|start|prepare|restart|resume|stop|remove|update-pr|environment|keep-awake|allow-sleep))?\z}x
+                          (?:/(status|start|prepare|restart|resume|stop|remove|update-pr|environment|keep-awake|allow-sleep|settings))?\z}x
 
     # Rack env keys set on requests that reach a ready workspace backend, for use by
     # middleware registered with Workspaces.configure_proxy.
     WORKSPACE_ID_ENV = 'workspaces.workspace_id'.freeze
     WORKSPACE_ENV = 'workspaces.workspace'.freeze
 
+    # Paths under this prefix on a preview host belong to the front door, never to the workspace's app.
+    # They serve the waiting card's status and its few lifecycle posts (see DashboardView.card).
+    RESERVED_PREFIX = '/__workspaces/'.freeze
+    RESERVED_ROUTE = %r{\A/__workspaces/(status|start|prepare|restart|resume)\z}
+    private_constant :RESERVED_PREFIX, :RESERVED_ROUTE
+
     WAKE_POLL_SECONDS = 0.25
     RETRY_AFTER_SECONDS = 5
     private_constant :WAKE_POLL_SECONDS, :RETRY_AFTER_SECONDS
@@ -99,7 +105,7 @@ module Workspaces
 
     def action_request(request, id, action)
       return update_environment(request, id) if action == 'environment'
-      return status_response(request, id, action) if action.nil? || action == 'status'
+      return status_response(request, id, action) if action.nil? || %w(status settings).include?(action)
       return response(405, 'Use POST') unless request.post?
       return response(403, 'Actions require the configured dashboard origin') unless same_origin?(request)
       return remove(request, id) if action == 'remove'
@@ -116,8 +122,10 @@ module Workspaces
       return response(400, 'Unknown workspace log') unless %w(setup backend).include?(source)
 
       snapshot = @coordinator.snapshot(id, log: source)
-      body = action ? JSON.generate(snapshot) : DashboardView.render(snapshot)
-      response(200, body, type: action ? 'application/json' : 'text/html', head: request.head?)
+      return response(200, JSON.generate(snapshot), type: 'application/json', head: request.head?) if action == 'status'
+
+      page = action == 'settings' ? DashboardView.render(snapshot) : DashboardView.card(snapshot)
+      response(200, page, type: 'text/html', head: request.head?)
     end
 
     # Retries from the first unfinished step by default; `from=<step>` re-runs that step and every
@@ -148,7 +156,9 @@ module Workspaces
       return response(403, 'Actions require the configured dashboard origin') unless same_origin?(request)
 
       params = environment_params(request)
-      updated = if params.key?('env')
+      updated = if params.key?('preset')
+                  start_with_preset(id, params['preset'])
+                elsif params.key?('env')
                   @coordinator.replace_environment_rows(id, rows: parse_environment_rows(params))
                 elsif params.key?('editable_env')
                   @coordinator.replace_editable_environment(id, text: parse_editable_environment(params))
@@ -164,6 +174,14 @@ module Workspaces
       response(422, e.message)
     end
 
+    # The card's start form for a new workspace: one preset (or the defaults, when left blank).
+    def start_with_preset(id, preset)
+      raise EnvironmentOverrides::Invalid, 'Choose a preset by name' unless preset.is_a?(String)
+      return @coordinator.apply_environment_preset(id, name: preset) unless preset.empty?
+
+      @coordinator.start(id)
+    end
+
     def remove(request, id)
       unless request.media_type == 'application/x-www-form-urlencoded'
         return response(415, 'Deletion requires a form-encoded confirmation')
@@ -182,11 +200,12 @@ module Workspaces
       response(409, 'Workspace was not removed. Check the server logs and retry when safe.')
     end
 
+    # Update from PR is a settings-page control and reports its outcome there.
     def update_pr(id)
       @registry.update_pr(id)
-      redirect(Config.dashboard_url(id))
+      redirect(Config.settings_url(id))
     rescue Worktree::UpdateError
-      redirect(Config.dashboard_url(id))
+      redirect(Config.settings_url(id))
     end
 
     def create(request)
@@ -278,6 +297,7 @@ module Workspaces
 
     def proxy(id, request)
       return response(404, 'Unknown managed workspace') unless Worktree.new(id).exists?
+      return reserved(id, request) if request.path_info.start_with?(RESERVED_PREFIX)
 
       counted = !@sleep_policy.ignored?(request.path_info)
       lease = acquire_lease(id, counted)
@@ -298,6 +318,7 @@ module Workspaces
       phase = @coordinator.sleep_phase(id)
       if phase
         return sleeping_unavailable(id) unless counted
+        return waiting_card(id, phase) if navigation?(request)
 
         outcome = await_wake(id, phase)
         return wake_failed(id) if outcome == :failed
@@ -382,11 +403,85 @@ module Workspaces
     end
 
     def unavailable(id, request)
+      return card_response(@coordinator.snapshot(id, include_log: false)) if navigation?(request)
       return redirect(Config.dashboard_url(id)) if safe?(request)
 
       response(503, "Workspace not ready. Visit #{Config.dashboard_url(id)}")
     end
 
+    # A person opening a page in a browser, as opposed to the app's own fetches, assets and API calls.
+    # Only they are shown the card; everything else keeps the plain behaviour.
+    def navigation?(request)
+      return false unless request.get?
+      return false unless request.get_header('HTTP_ACCEPT').to_s.include?('text/html')
+      return false if request.get_header('HTTP_X_REQUESTED_WITH')
+
+      mode = request.get_header('HTTP_SEC_FETCH_MODE')
+      mode.nil? || mode == 'navigate'
+    end
+
+    # A sleeping workspace is woken at once and the visitor sees the card, not a held request, so the
+    # address they asked for stays in the bar and the card reloads it when the workspace is ready.
+    def waiting_card(id, phase)
+      @coordinator.wake(id) if phase == :sleeping
+      card_response(@coordinator.snapshot(id, include_log: false))
+    end
+
+    def card_response(snapshot)
+      response(200, DashboardView.card(snapshot, preview: true), type: 'text/html')
+    end
+
+    # The waiting card's own endpoints. Not counted as activity (polling must not keep a workspace awake),
+    # never forwarded, and limited to what the card does: report status and start, retry or continue.
+    def reserved(id, request)
+      match = RESERVED_ROUTE.match(request.path_info)
+      return response(404, 'Not found') unless match
+
+      action = match[1]
+      return preview_status(id, request) if action == 'status'
+      return response(405, 'Use POST') unless request.post?
+      return response(403, 'Actions require this workspace origin') unless preview_same_origin?(request, id)
+
+      preview_action(id, action, request)
+      redirect(preview_return_url(request, id))
+    end
+
+    def preview_status(id, request)
+      return response(405, 'Use GET or HEAD') unless safe?(request)
+
+      body = JSON.generate(DashboardView.preview_status(@coordinator.snapshot(id, include_log: false)))
+      response(200, body, type: 'application/json', head: request.head?)
+    end
+
+    def preview_action(id, action, request)
+      preset = request.POST['preset'] if action == 'start' && request.media_type == 'application/x-www-form-urlencoded'
+      return start_with_preset(id, preset) if preset.is_a?(String)
+
+      perform_action(id, action, request)
+    end
+
+    def preview_same_origin?(request, id)
+      expected = Config.preview_url(id).chomp('/')
+      origin = request.get_header('HTTP_ORIGIN')
+      return origin == expected if origin
+
+      uri = URI.parse(request.referer.to_s)
+      uri.is_a?(URI::HTTP) && uri.userinfo.nil? && "#{uri.scheme}://#{uri.authority}" == expected
+    rescue URI::InvalidURIError
+      false
+    end
+
+    # Back to the page the visitor was on, so a start or retry does not lose their place.
+    def preview_return_url(request, id)
+      base = Config.preview_url(id).chomp('/')
+      uri = URI.parse(request.referer.to_s)
+      path = uri.request_uri if uri.is_a?(URI::HTTP) && "#{uri.scheme}://#{uri.authority}" == base
+      path = '/' if path.nil? || path.start_with?(RESERVED_PREFIX)
+      "#{base}#{path}"
+    rescue URI::InvalidURIError
+      "#{base}/"
+    end
+
     # Innermost app of the proxy stack: sends the request to the workspace backend.
     def forward_to_backend(env)
       forward(env.fetch(WORKSPACE_ID_ENV), Rack::Request.new(env))

data/lib/workspaces/presentation.rb

@@ -46,7 +46,7 @@ module Workspaces
       'busy' => {
         sections: %w(lead technical log),
         headline: 'Setting things up…',
-        summary: "We'll take you to the preview as soon as it's ready.",
+        summary: 'This page keeps itself up to date. Open the preview once it is ready.',
         environment_submit: 'Save & restart', environment_title: 'Change settings',
         open_environment: false, open_technical: true
       },

data/lib/workspaces/version.rb

@@ -1,3 +1,3 @@
 module Workspaces
-  VERSION = '0.1.18'
+  VERSION = '0.1.19'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: workspaces
 version: !ruby/object:Gem::Version
-  version: 0.1.18
+  version: 0.1.19
 platform: ruby
 authors:
 - Workspaces contributors
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2026-10-27 00:00:00.000000000 Z
+date: 2026-10-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rack
@@ -79,6 +79,7 @@ files:
 - lib/workspaces/config.rb
 - lib/workspaces/coordinator.rb
 - lib/workspaces/dashboard/app.js
+- lib/workspaces/dashboard/card.html.erb
 - lib/workspaces/dashboard/checkout_authentication_error.html.erb
 - lib/workspaces/dashboard/environment.js
 - lib/workspaces/dashboard/pull_request.html.erb