workspaces 0.1.21 → 0.1.22

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2aca45b37e744578006f9b80c3b42a8d664d3b989e9443c10505e357b739338d
-  data.tar.gz: cdfb7b28c2fb5f66ace3e778cceb9654a07271fbad73321768829a498248feb5
+  metadata.gz: 9b215ed643db37f770915a5da966e4afd5c052ccf8a1bc271ae371f95aed5851
+  data.tar.gz: a6c97523fd83b4ccfa72e1d007c60fce8f98e16bcf0ecfcbe6fb7891bc4ae4f0
 SHA512:
-  metadata.gz: 764c88c9ebb620cace6381b7e95b1ba32e2cb6e4e80da503a28f68ec1acb783a84a99bf4eb7213cb97e2d4787ce9117bee0c09504649367517b56bb593821a1d
-  data.tar.gz: dab1db619647ee35bdcd731c6072b762e9788a42877eb684411368d1e7461230267adedbf8a875354f9d0ec50f91f3a81e4654b75f6c29e14c6b0a0f7d0b8896
+  metadata.gz: 54a95866acd2a0b6ec251e06996ff1b366d72d885ac7d87ae4cb2e3c68af2a19f59dc92c435ed61a0aac8278f9e816451cb6c4f7fa866cd0748242d7059f2644
+  data.tar.gz: 469c1c9aaed1ff6aabbbe3d515d8b6bd99b0e1e1089f6c7a8f7d90278e37c23a07aea8f0cc067d1b6107fd25f234794c145d358cb56ebcbd6116bba6f5ac06f5

data/DESIGN.md

@@ -8,17 +8,39 @@ GET is read-only. All creation and lifecycle controls submit same-origin POST fo
 
 ## Visual direction
 
-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.
+Restrained tooling UI built on the **Arb design system, Native v1** (`~/code/arb-design-system`, commit `88765ca`): a deep-teal page in the dark theme and limestone in the light one, 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, and `spec/workspaces/arb_design_system_spec.rb` measures each one in both themes.
+
+Only colour changed in this migration. Type, spacing, radii and motion timing are the ones the dashboard already had, because the Arb kit defines none of them. No state, label, handler, route or permission changed.
 
 ## Tokens used
 
 ### Color
 
-- `--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.
+`dashboard/arb-palette.css` is the kit's `tokens/palette.css` copied unchanged (a two-line note on top says where from). It defines 28 `--arb-*` tokens per theme, selected by `data-theme` on `<html>`. **The theme follows the visitor's operating-system setting, with dark as the default**; a one-line script in the `<head>` sets it before anything paints, and a page without script stays dark. There is no theme switch, because the kit says to follow the host's existing behaviour and the dashboard had none.
+
+`styles.css` names no colour of its own, which a spec enforces (no hex, `rgb`, `hsl`, `color-mix` or faded opacity). Its `:root` maps a short list of roles onto the palette, and everything below uses the roles or `--arb-*` directly:
+
+| Role in `styles.css` | Arb token | Used for |
+|---|---|---|
+| `--bg` | `bg` | the page |
+| `--bg-elevated` | `surface` | panels, the card, inputs, log blocks |
+| `--arb-elevated` | `elevated` | the progress track, neutral pill fill |
+| `--text`, `--muted` | `text`, `muted` | body and supporting text (the old strong, cell and placeholder greys are gone: one text colour, one muted) |
+| `--border` | `border` | every edge and divider, including control edges, so controls now meet 3:1 (the old control edge was about 2:1) |
+| `--accent`, `--accent-hover`, `--accent-pressed`, `--on-accent` | `accent`, `action_hover`, `action_pressed`, `on_accent` | primary buttons and links |
+| `--focus` | `focus` | the focus ring |
+| `--danger` / `--arb-error*`, `--arb-on-error` | `error`, `error_hover`, `error_pressed`, `on_error` | Delete, the setup error callout, the danger zone, failed steps |
+| `--warning`, `--success` | `warning`, `success` | slow-progress fill, vault note, completed step icon |
+| `--arb-selected-bg`, `--arb-selected-border` | `selected_bg`, `selected_border` | the chosen preset, the preset badge, the log tab you are on |
+| `--arb-surface-hover`, `--arb-surface-pressed` | `surface_hover`, `surface_pressed` | hover and pressed on subtle buttons, rows, tabs |
+| `--arb-disabled-*` | `disabled_bg`, `disabled_fg`, `disabled_border` | disabled buttons and fields, at full opacity |
+
+- **Focus** is a 2px `focus` ring with a 2px gap, as the kit specifies. The gap is the outline's own offset, which is transparent and so shows the surface actually behind the control.
+- **Selected** is never colour alone: the chosen preset and the current log tab carry a check mark, because the light theme's selected and pressed fills are the same colour.
+- **Disabled** controls use the disabled tokens at full opacity, not a faded copy of the enabled style.
+- **Status pills** pair a glyph with the word the server already sends: ready is a check on `success_bg`, error a cross on `error_bg`, interrupted an exclamation mark on `warning_bg` (a run that was cut off, not one that failed), preparing a ringed dot in `accent`. Idle, stopped and sleeping have no palette role of their own, so they are told apart by glyph and word (empty ring, filled square, half ring) in `steel` on a neutral fill. The earlier design gave each its own hue; the palette has no roles to carry that, and the guide forbids inventing near-matches.
+- **Motion**: the dots that pulsed forever (next to the current step, and on a busy pill) are gone, because a pulse that never stops says "working" whether or not anything is. The bar, the step name and its number carry progress. The step status icon no longer pulses either.
+- **Forced colors**: shapes that carry meaning get a real border so they survive the system palette.
 
 ### Radius and depth
 
@@ -39,7 +61,7 @@ Restrained tooling UI: a near-black page, one slightly lighter card surface with
 
 - **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. Rows are ordered by last startup, newest first; workspaces that never started (or whose start time cannot be read) come last, and ties fall back to the id so the list never shuffles between loads. Moments are compared as moments, not text. 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.
+- **Status pill**: a glyph and one word (13px, 600, fully rounded), never colour alone. A busy workspace adds "(busy)" to the word; nothing pulses.
 - **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.
@@ -79,12 +101,14 @@ Restrained tooling UI: a near-black page, one slightly lighter card surface with
 - **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.
-- **Workspace favicon**: a small two-pane workspace mark served by the dashboard host. Use `--accent` blue for localhost and `--warning` gold for hosted origins so browser tabs signal the environment without relying on page text. The icon contains no workspace-specific data.
+- **Workspace favicon**: the Arb Previews icon (`dashboard/arb-previews-favicon.svg`, copied unchanged from the design system's `arb-previews/favicon.svg`), served by the dashboard host for local and hosted origins alike. The earlier blue-for-localhost, gold-for-hosted tab signal is gone: the icon is one mark and is not recoloured.
 
 ## Accessibility constraints
 
 - Semantic sections/headings for all regions
-- Focus-visible outlines on actionable controls
+- Focus-visible outlines on actionable controls: a 2px ring with a 2px gap, in the palette's focus colour
+- Selected controls carry a check mark as well as a fill; statuses carry a glyph as well as a colour
+- Forced-colors and reduced-motion are handled
 - `aria-live` limited to phase-change and connection warnings (not full log stream)
 - No-JS refresh path always available
 

data/README.md

@@ -95,6 +95,27 @@ workspace's directory with the workspace's environment, and exits with the comma
   restart, rebuild, PR update or removal holding the lock still takes the preview offline, since
   those replace the server or its files.
 
+### Log tails
+
+The dashboard shows the end of each log, not all of it. Normally that is the last 6 KB or 80
+lines of a step's output, and 8 KB or 100 lines of the setup and web server logs, which keeps
+every poll small.
+
+When something has failed (a step failed, or a run was interrupted) the page gets far more of
+what matters: the failed step's output, and the setup and server logs, are sent as the last
+**128 KB or 2000 lines**. That is enough for the error and the backtrace after it, which the
+everyday tail would cut off. Steps that did not fail keep the small tail, and a step that is
+merely running does too. The full files stay on disk under the workspaces home (`logs/`), and
+every tail is secret-scrubbed first.
+
+### Copying from a log
+
+The page refreshes itself, and replacing a log's text drops any selection inside it. So it never
+rewrites a log whose text has not changed, and while part of a log (a step's output, the full
+setup log, the web server log or the error panel) is selected, its new text waits and is applied
+once, when the selection ends. Only the log being read waits; everything else keeps updating. A
+step that finishes while you have text selected in it stays open until you let go.
+
 ### Step timings
 
 Per-step durations are persisted in seconds in workspace step status JSON, so they

data/lib/workspaces/config.rb

@@ -13,6 +13,13 @@ module Workspaces
     # 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
+    # What the page gets once something has failed. The error is at the end of the output, but a failing
+    # command prints a backtrace of a hundred lines or more after it, and bundler, yarn and rails print
+    # their progress before it, so the everyday tail cuts the message off. Only the step that failed (and
+    # the setup and server logs of a workspace that failed) get this; everything else stays small, because
+    # every poll sends these.
+    FAILURE_LOG_BYTES = 128 * 1024
+    FAILURE_LOG_LINES = 2000
     DEFAULT_HOME = File.expand_path('~/.workspaces')
     DEFAULT_SUBDOMAIN_PREFIX = 'ws-'
     DEFAULT_FRONT_DOOR_PORT = 4747
@@ -144,6 +151,12 @@ module Workspaces
       "#{public_origin}/workspaces/#{validate_id!(id)}"
     end
 
+    # The list of every workspace. A card on a preview host is a different origin from the dashboard, so it
+    # needs the whole URL; a card on the dashboard host can use the path.
+    def self.index_url
+      "#{public_origin}/workspaces"
+    end
+
     def self.settings_url(id)
       "#{dashboard_url(id)}/settings"
     end

data/lib/workspaces/coordinator.rb

@@ -274,9 +274,10 @@ module Workspaces
         'steps' => entry.fetch('steps', []), 'total_seconds' => entry['total_seconds'],
         'resume' => resume_info(id, entry),
         'estimates' => entry.fetch('estimates', {}),
-        'step_logs' => include_log && log == 'setup' ? step_logs(id, entry.fetch('steps', [])) : {},
+        'step_logs' => include_log && log == 'setup' ? step_logs(id, entry.fetch('steps', []), status) : {},
         'backend_log_available' => backend_log_available?(id),
-        'log_tail' => include_log ? log_tail(id, log) : '', 'log_source' => log, 'port' => entry['port'],
+        'log_tail' => include_log ? log_tail(id, log, failed: failed_status?(status)) : '', 'log_source' => log,
+        'port' => entry['port'],
         'environment_keys' => environment_keys(id),
         'editable_environment' => editable_environment(id),
         'secret_names' => secret_names(id),
@@ -434,30 +435,42 @@ module Workspaces
       WorkspaceLock.held?(id)
     end
 
-    def log_tail(id, log)
+    # Something went wrong, so the logs are worth reading in full: the larger tail is for these states.
+    def failed_status?(status)
+      %w(error interrupted).include?(status)
+    end
+
+    def log_tail(id, log, failed: false)
       path = log == 'backend' ? Config.backend_log_path(id, create: false) : Config.setup_log_path(id, create: false)
       return '' unless path.file?
 
-      raw = File.open(path, 'rb') do |file|
-        file.seek(-Config::SAFE_LOG_BYTES, IO::SEEK_END) if file.size > Config::SAFE_LOG_BYTES
-        file.read
-      end
-      scrub(raw, id: id).lines.last(Config::SAFE_LOG_LINES).join
+      bytes = failed ? Config::FAILURE_LOG_BYTES : Config::SAFE_LOG_BYTES
+      lines = failed ? Config::FAILURE_LOG_LINES : Config::SAFE_LOG_LINES
+      tail_file(path, id, bytes: bytes, lines: lines).fetch('text')
     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)
+    def step_logs(id, steps, status = nil)
       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)
+        failed = failed_step?(step, status)
+        logs[step['key']] = tail_file(path, id, bytes: failed ? Config::FAILURE_LOG_BYTES : Config::STEP_LOG_BYTES,
+                                                lines: failed ? Config::FAILURE_LOG_LINES : Config::STEP_LOG_LINES)
       end
     rescue ArgumentError
       {}
     end
 
+    # The step that failed, or the one a run was cut off in. A step that is merely running is not one.
+    def failed_step?(step, status)
+      return true if step['state'] == 'failed'
+
+      status == 'interrupted' && step['state'] == 'active'
+    end
+
     def backend_log_available?(id)
       path = Config.backend_log_path(id, create: false)
       path.file? && !path.zero?

data/lib/workspaces/dashboard/app.js

@@ -107,7 +107,7 @@
       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);
+      if (entry) writeLog(output, entry.text);
       applyStepOpenState(details, step);
     });
   }
@@ -164,11 +164,11 @@
         : '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';
+  // A step that finished is closed by the page, which hides its log, and text selected inside a hidden
+  // element is lost. So a close waits while part of that step is selected, and happens when the selection ends.
+  const pendingClose = new Set();
+
+  function setStepOpen(details, shouldOpen) {
     if (details.open === shouldOpen) return;
     details.dataset.programmatic = 'true';
     details.open = shouldOpen;
@@ -176,13 +176,63 @@
     setTimeout(() => { details.dataset.programmatic = 'false'; }, 0);
   }
 
+  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 (shouldOpen) pendingClose.delete(details);
+    if (!shouldOpen && details.open && hasSelectionIn(details)) {
+      pendingClose.add(details);
+      return;
+    }
+    pendingClose.delete(details);
+    setStepOpen(details, shouldOpen);
+  }
+
+  // Replacing a log's text drops any selection inside it, which made copying out of a log that keeps
+  // updating a race against the next poll. So: text that has not changed is never rewritten, and while
+  // part of a log is selected its new text is held back and applied, once, when the selection ends.
+  // Only the log being read waits; every other element keeps updating.
+  const heldText = new Map();
+
+  function hasSelectionIn(element) {
+    const selection = window.getSelection && window.getSelection();
+    if (!selection || selection.isCollapsed) return false;
+    if (element.contains(selection.anchorNode) || element.contains(selection.focusNode)) return true;
+    // A selection that starts above a log and ends below it contains the log without either end in it.
+    return typeof selection.containsNode === 'function' && selection.containsNode(element, true);
+  }
+
   // Writing a log must not yank a reader who scrolled up; follow the tail only if already there.
   function writeLog(pre, text) {
+    const next = text || '';
+    if (pre.textContent === next) {
+      heldText.delete(pre);
+      return;
+    }
+    if (hasSelectionIn(pre)) {
+      heldText.set(pre, next);
+      return;
+    }
+    heldText.delete(pre);
     const atBottom = pre.scrollTop + pre.clientHeight >= pre.scrollHeight - 18;
-    pre.textContent = text || '';
+    pre.textContent = next;
     if (atBottom) pre.scrollTop = pre.scrollHeight;
   }
 
+  // When the selection moves or is cleared, catch up any log that was waiting on it.
+  document.addEventListener('selectionchange', () => {
+    heldText.forEach((text, pre) => {
+      if (!hasSelectionIn(pre)) writeLog(pre, text);
+    });
+    pendingClose.forEach((details) => {
+      if (hasSelectionIn(details)) return;
+      pendingClose.delete(details);
+      if (!userToggled.has(details.dataset.stepLog)) setStepOpen(details, false);
+    });
+  });
+
   // 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) {
@@ -258,6 +308,8 @@
   }
 
   function renderLead(view) {
+    const lead = node('lead');
+    if (lead && view.state) lead.dataset.state = view.state;
     node('status').textContent = view.headline || view.title;
     node('summary').textContent = view.summary || '';
     const note = node('sleep-note');
@@ -335,7 +387,7 @@
   function renderStatus(view) {
     node('preview').hidden = !view.ready;
     reloadWhenReady(view);
-    node('error').textContent = view.error || '';
+    writeLog(node('error'), view.error || '');
     node('error-panel').hidden = !view.error;
     if (window.WorkspaceEnvironment)
       window.WorkspaceEnvironment.updateStatus(view.busy);

data/lib/workspaces/dashboard/arb-palette.css

@@ -0,0 +1,82 @@
+/* Arb design system, Native v1: tokens/palette.css from ~/code/arb-design-system (commit 88765ca), copied unchanged below this note.
+   Do not edit by hand. To update, copy the new palette.css over everything after this comment. */
+/* Source: palette.tokens.json. Opaque sRGB pairings only; see README.md. */
+:root {
+  --arb-mark-shell: #123A3D;
+  --arb-mark-river: #58D9C4;
+  --arb-mark-brackets: #F4F1E8;
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+  --arb-bg: #0B171A;
+  --arb-surface: #12262B;
+  --arb-elevated: #1B343B;
+  --arb-text: #F4F1E8;
+  --arb-muted: #B4C3C8;
+  --arb-accent: #58D9C4;
+  --arb-on-accent: #073A35;
+  --arb-steel: #ABC8D2;
+  --arb-border: #6F8991;
+  --arb-focus: #76CCE5;
+  --arb-success: #9DD48E;
+  --arb-warning: #F1C56B;
+  --arb-error: #FF9B96;
+  --arb-action-hover: #78E3D0;
+  --arb-action-pressed: #3CBDA9;
+  --arb-surface-hover: #1B343B;
+  --arb-surface-pressed: #203A41;
+  --arb-selected-bg: #173E40;
+  --arb-selected-border: #58D9C4;
+  --arb-disabled-bg: #1B343B;
+  --arb-disabled-fg: #91A5AC;
+  --arb-disabled-border: #6F8991;
+  --arb-success-bg: #173322;
+  --arb-warning-bg: #3E321A;
+  --arb-error-bg: #40262A;
+  --arb-error-hover: #FFB4AE;
+  --arb-error-pressed: #EE817D;
+  --arb-on-error: #351415;
+}
+
+[data-theme="light"] {
+  color-scheme: light;
+  --arb-bg: #F5F2E9;
+  --arb-surface: #FFFFFF;
+  --arb-elevated: #E8EEEC;
+  --arb-text: #123A3D;
+  --arb-muted: #4B676E;
+  --arb-accent: #0A766F;
+  --arb-on-accent: #FFFFFF;
+  --arb-steel: #496B79;
+  --arb-border: #71868B;
+  --arb-focus: #246C89;
+  --arb-success: #2D6D45;
+  --arb-warning: #8A5A10;
+  --arb-error: #B64344;
+  --arb-action-hover: #08655F;
+  --arb-action-pressed: #07554F;
+  --arb-surface-hover: #E8EEEC;
+  --arb-surface-pressed: #E1EFEA;
+  --arb-selected-bg: #E1EFEA;
+  --arb-selected-border: #0A766F;
+  --arb-disabled-bg: #E1E7E5;
+  --arb-disabled-fg: #4E656B;
+  --arb-disabled-border: #71868B;
+  --arb-success-bg: #E5F1E6;
+  --arb-warning-bg: #FBF0D7;
+  --arb-error-bg: #FBE9E7;
+  --arb-error-hover: #A03638;
+  --arb-error-pressed: #8B2C2E;
+  --arb-on-error: #FFFFFF;
+}
+
+/* Optional descriptive aliases. Canonical names mirror JSON keys. */
+[data-theme] {
+  --arb-canvas: var(--arb-bg);
+  --arb-raised: var(--arb-elevated);
+  --arb-text-secondary: var(--arb-muted);
+  --arb-river: var(--arb-accent);
+  --arb-on-river: var(--arb-on-accent);
+  --arb-boundary: var(--arb-border);
+}

data/lib/workspaces/dashboard/arb-previews-favicon.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" role="img" aria-labelledby="title desc">
+  <title id="title">Arb Previews</title>
+  <desc id="desc">A browser window with two preview panes. Original vector artwork in the Arb Native palette. Optically tuned for 16 pixels.</desc>
+  <rect id="tile" width="16" height="16" rx="4" fill="#123A3D"/>
+  <g id="preview-window" fill="none" stroke-linejoin="round">
+    <rect id="window-frame" x="2.5" y="3.5" width="11" height="9" rx="1.5" stroke="#F4F1E8" stroke-width="1.5"/>
+    <path id="browser-header" d="M2.5 6.5H13.5" stroke="#F4F1E8" stroke-width="1.5"/>
+    <path id="preview-divider" d="M8 7.25V11.75" stroke="#58D9C4" stroke-width="1.5"/>
+    <g id="browser-controls" fill="#58D9C4"><circle cx="4.5" cy="5" r="0.5"/><circle cx="6.5" cy="5" r="0.5"/></g>
+  </g>
+</svg>

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

@@ -2,7 +2,8 @@
   <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>
+      <span class="card__links"><a class="icon-link" href="<%= escape(index_href) %>" aria-label="All workspaces" title="All workspaces"><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="M4 6h16M4 12h16M4 18h16"/></svg></a>
+      <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></span>
     </header>
     <div class="card__text">
       <h1 id="status" role="status"><%= escape(@presentation['headline']) %></h1>

data/lib/workspaces/dashboard/environment.js

@@ -86,8 +86,8 @@
     presetButtons.forEach((button) => {
       const isSelected = !!selectedPreset && button.dataset.environmentPreset === selectedPreset;
       button.setAttribute('aria-pressed', isSelected ? 'true' : 'false');
-      if (isSelected) button.classList.add('button--success');
-      else button.classList.remove('button--success');
+      if (isSelected) button.classList.add('button--selected');
+      else button.classList.remove('button--selected');
     });
   }
 

data/lib/workspaces/dashboard/styles.css

@@ -1,29 +1,23 @@
 :root {
-  /* 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;
+  /* Colours come from the Arb palette (arb-palette.css), per theme, and only through these roles. Nothing
+     below this block names a colour: add a role here, never a literal. A role the palette lacks is a gap to
+     raise with the palette's owner, not something to approximate with a mix or an opacity. */
+  --bg: var(--arb-bg);
+  --bg-elevated: var(--arb-surface);
+  --border: var(--arb-border);
+  --text: var(--arb-text);
+  --muted: var(--arb-muted);
+  --accent: var(--arb-accent);
+  --accent-hover: var(--arb-action-hover);
+  --accent-pressed: var(--arb-action-pressed);
+  --on-accent: var(--arb-on-accent);
+  --success: var(--arb-success);
+  --danger: var(--arb-error);
+  --warning: var(--arb-warning);
+  --focus: var(--arb-focus);
   --radius: 12px;
   --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;
@@ -37,6 +31,12 @@
   --panel-padding: 28px;
 }
 
+/* Focus: a 2px ring in the palette's focus colour, with a 2px gap. The gap is required: the ring is only approved
+   against surfaces, not directly against a button's fill. It is the outline's own offset, which is transparent, so
+   it shows whatever surface the control actually sits on (the page or a panel) and needs no colour of its own. The
+   ring takes no space and moves nothing. */
+:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+
 * {
   box-sizing: border-box;
 }
@@ -45,7 +45,7 @@
    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); }
+h2 { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--text); }
 label { font-size: 14px; font-weight: 600; }
 ol, ul { padding-inline-start: var(--space-6); }
 legend { padding: 0; }
@@ -67,27 +67,27 @@ 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);
+  color: var(--text);
   background: var(--bg);
-  border: 1px solid var(--control-border);
+  border: 1px solid var(--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; }
+::placeholder { color: var(--muted); opacity: 1; }
 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); }
 /* The server-rendered action forms live in a wrapper; let them flow with the sibling button. */
 #actions { display: contents; }
-.setup-error { --panel-padding: var(--space-4); padding: var(--panel-padding); border-color: var(--danger); box-shadow: none; }
-.setup-error h3 { color: var(--danger); margin-block-start: 0; }
+/* Two classes, so it beats the shared panel rule further down, which would otherwise put the full outline back. */
+.error-panel.setup-error { --panel-padding: var(--space-4); padding: var(--panel-padding); border: 0; border-inline-start: 4px solid var(--arb-error); border-radius: var(--radius-control); background: var(--arb-error-bg); }
+.setup-error h3, .setup-error h2 { color: var(--arb-error); margin-block-start: 0; }
+.setup-error pre { background: var(--bg); }
 .step-outcome { margin-inline-start: auto; font-size: 12px; }
-.activity-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: workspace-pulse 1.5s infinite; }
-@keyframes workspace-pulse { 50% { opacity: 0.3; } }
-@media (prefers-reduced-motion: reduce) { .activity-dot { animation: none; } }
+/* The dot beside the current step is dropped: a pulse that never stops says "working" whether or not anything is
+   happening. The step's name, its number and the bar are what show progress. */
+.activity-dot { display: none; }
 dd, h1, code { overflow-wrap: anywhere; }
 dt + dd { margin-block-start: var(--space-1); }
 dd + dt { margin-block-start: var(--space-3); }
@@ -115,6 +115,8 @@ a {
   gap: var(--space-6);
 }
 
+.dashboard--narrow { inline-size: min(100% - var(--space-6), 60rem); }
+
 .dashboard__header {
   display: flex;
   flex-wrap: wrap;
@@ -134,7 +136,7 @@ a {
 
 h1 {
   margin: 0;
-  color: var(--text-strong);
+  color: var(--text);
   font-size: 32px;
   font-weight: 700;
   line-height: 1.2;
@@ -163,10 +165,9 @@ h1 {
 .log-panel,
 .noscript-note {
   background: var(--bg-elevated);
-  border: 1px solid var(--border);
+  border: 1px solid var(--arb-elevated);
   border-radius: var(--radius);
   padding: var(--panel-padding);
-  box-shadow: var(--shadow);
 }
 
 /* Disclosure panels keep their native layout; only the open state adds spacing below. */
@@ -189,13 +190,36 @@ h1 {
 .lead { gap: var(--space-4); padding-block: var(--space-8); }
 .lead__text { display: grid; gap: var(--space-2); }
 .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__summary { max-inline-size: 38rem; color: var(--text); font-size: 16px; line-height: 1.5; }
+/* A run that failed or was cut off says so three ways: the words, a glyph beside the headline, and an accent
+   bar on the panel. The colour is the accent, never the only signal. Interrupted is a warning, not an error. */
+.lead[data-state='error'], .lead[data-state='interrupted'] { border-inline-start: 4px solid var(--arb-error); }
+.lead[data-state='interrupted'] { border-inline-start-color: var(--arb-warning); }
+.lead[data-state='error'] h2::before, .lead[data-state='interrupted'] h2::before {
+  content: '!';
+  content: '!' / '';
+  display: inline-grid;
+  place-items: center;
+  inline-size: 1.2em;
+  block-size: 1.2em;
+  margin-inline-end: var(--space-3);
+  border: 2px solid currentColor;
+  border-radius: 999px;
+  color: var(--arb-error);
+  font-size: 0.8em;
+  font-weight: 800;
+  line-height: 1;
+  vertical-align: 0.08em;
+}
+.lead[data-state='interrupted'] h2::before { color: var(--arb-warning); }
+.lead[data-state='interrupted'] .error-panel.setup-error { border-inline-start-color: var(--arb-warning); background: var(--arb-warning-bg); }
+.lead[data-state='interrupted'] .setup-error h3, .lead[data-state='interrupted'] .setup-error h2 { color: var(--arb-warning); }
 .lead__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
 .lead__actions:empty { display: none; }
 
 /* The build progress bar: a plain track and fill, then one line saying which step and how long. */
 .build-progress { display: grid; gap: var(--space-3); }
-.progress-bar { block-size: 10px; border-radius: 999px; background: color-mix(in oklab, var(--muted) 22%, transparent); overflow: hidden; }
+.progress-bar { block-size: 10px; border-radius: 999px; background: var(--arb-elevated); border: 1px solid var(--border); overflow: hidden; }
 .progress-bar__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--accent); transition: inline-size 600ms ease; }
 .progress-bar[data-slow='true'] .progress-bar__fill { background: var(--warning); }
 .progress-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-4); }
@@ -214,31 +238,31 @@ h1 {
   align-items: baseline;
   gap: var(--space-1) var(--space-3);
   padding-block-end: var(--space-4);
-  border-block-end: 1px solid var(--border);
+  border-block-end: 1px solid var(--arb-elevated);
 }
-.section-heading h2 { margin: 0; font-size: 1.125rem; }
-.section-heading p { margin: 0; font-size: 13px; }
+.section-heading h2 { margin: 0; font-size: 1.25rem; font-weight: 700; }
+.section-heading p { margin: 0; font-size: 14px; }
 /* Which preset is active, readable at a glance. Same tint as a pressed preset button. */
 .badge {
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-1) var(--space-3);
-  border: 1px solid color-mix(in oklab, var(--success) 55%, var(--border));
+  border: 1px solid var(--arb-selected-border);
   border-radius: 999px;
-  background: color-mix(in oklab, var(--success) 22%, transparent);
+  background: var(--arb-selected-bg);
   color: var(--text);
   font-size: 12px;
   font-weight: 600;
   line-height: 1.4;
   white-space: nowrap;
 }
-.badge::before { content: ''; inline-size: 6px; block-size: 6px; border-radius: 999px; background: var(--success); }
+.badge::before { content: ''; inline-size: 6px; block-size: 6px; border-radius: 999px; background: var(--arb-selected-border); }
 #technical-section .technical > section:not(.danger-zone) { padding: 0; border: 0; box-shadow: none; background: none; }
-#technical-section .danger-zone { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--danger); border-radius: var(--radius); }
+#technical-section .danger-zone { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--arb-error); background: var(--arb-error-bg); border-radius: var(--radius); }
 #technical-section .log-panel { padding: 0; }
 .log-panel > #log { margin-block-start: 0; }
-#technical-section .danger-zone h3 { color: var(--danger); font-size: 1rem; }
+#technical-section .danger-zone h3 { color: var(--arb-error); font-size: 1rem; }
 #technical-section h3 { font-size: 1rem; }
 
 .status-row {
@@ -265,8 +289,10 @@ h1 {
 
 /* Step logs, in the style of GitHub Actions: one row per recipe step with a status icon,
    its name, how long it took, and a chevron. Open a row to read just that step's output. */
-.step-logs { display: grid; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
-.step-log + .step-log { border-block-start: 1px solid var(--border); }
+.step-logs { display: grid; border: 1px solid var(--arb-elevated); border-radius: 10px; overflow: hidden; }
+.step-log { border-inline-start: 4px solid transparent; }
+.step-log + .step-log { border-block-start: 1px solid var(--arb-elevated); }
+.step-log[data-step-state='failed'] { border-inline-start-color: var(--arb-error); background: var(--arb-error-bg); }
 .step-log > summary {
   display: flex;
   align-items: center;
@@ -280,8 +306,8 @@ h1 {
   transition: background-color 120ms ease;
 }
 .step-log > summary::-webkit-details-marker { display: none; }
-.step-log > summary:hover { background: color-mix(in oklab, var(--accent) 8%, transparent); }
-.step-log > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.step-log > summary:hover { background: var(--arb-surface-hover); }
+.step-log > summary:focus-visible { outline-offset: -4px; }
 .step-log > summary::after {
   content: '';
   flex: none;
@@ -295,7 +321,7 @@ h1 {
   transition: transform 160ms ease;
 }
 .step-log[open] > summary::after { margin-block-start: -3px; transform: rotate(45deg); }
-.step-log[open] > summary { border-block-end: 1px solid var(--border); }
+.step-log[open] > summary { border-block-end: 1px solid var(--arb-elevated); }
 .step-log__name { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; font-weight: 600; }
 .step-log__outcome { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
 .step-log--full > summary { color: var(--muted); }
@@ -310,17 +336,17 @@ h1 {
 
 /* The status icon: a ring for waiting, a pulsing ring while running, a check, a cross. */
 .step-log__status { flex: none; inline-size: 16px; block-size: 16px; border: 2px solid var(--muted); border-radius: 999px; position: relative; }
-.step-log[data-step-state='active'] .step-log__status { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 25%, transparent); animation: workspace-pulse 1.5s infinite; }
+.step-log[data-step-state='active'] .step-log__status { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 3px, transparent 3.5px); }
 .step-log[data-step-state='complete'] .step-log__status { border-color: var(--success); background: var(--success); }
 .step-log[data-step-state='complete'] .step-log__status::after { content: ''; position: absolute; inset-inline-start: 4px; inset-block-start: 1px; inline-size: 4px; block-size: 8px; border-inline-end: 2px solid var(--bg); border-block-end: 2px solid var(--bg); transform: rotate(40deg); }
-.step-log[data-step-state='failed'] .step-log__status { border-color: var(--danger); background: var(--danger); }
+.step-log[data-step-state='failed'] .step-log__status { border-color: var(--arb-error); background: var(--arb-error); }
 .step-log[data-step-state='failed'] .step-log__status::before,
 .step-log[data-step-state='failed'] .step-log__status::after { content: ''; position: absolute; inset-inline-start: 5px; inset-block-start: 2px; inline-size: 2px; block-size: 8px; background: var(--bg); transform: rotate(45deg); }
 .step-log[data-step-state='failed'] .step-log__status::after { transform: rotate(-45deg); }
-.step-log[data-step-state='failed'] > summary .step-log__name { color: color-mix(in oklab, var(--danger) 70%, var(--text)); }
+.step-log[data-step-state='failed'] > summary .step-log__name { color: var(--arb-error); }
 .step-log[data-step-state='pending'] > summary .step-log__name { color: var(--muted); font-weight: 400; }
 .step-log[data-step-state='unknown'] .step-log__status { border-style: dashed; }
-@media (prefers-reduced-motion: reduce) { .step-log > summary, .step-log > summary::after, .step-log[data-step-state='active'] .step-log__status { transition: none; animation: none; } }
+@media (prefers-reduced-motion: reduce) { .step-log > summary, .step-log > summary::after { transition: none; } }
 
 .env-panel {
   display: grid;
@@ -328,23 +354,25 @@ h1 {
 }
 
 .env-fieldset {
-  border: 1px solid var(--border);
-  border-radius: 10px;
+  border: 0;
   margin: 0;
-  padding: var(--space-4);
+  padding: 0;
   display: grid;
-  gap: var(--space-4);
+  gap: var(--space-5);
 }
 
 .env-legend {
-  color: var(--muted);
-  font-size: 13px;
-  padding-inline: var(--space-2);
+  color: var(--text);
+  font-size: 1rem;
+  font-weight: 700;
+  padding: 0;
+  margin-block-end: var(--space-1);
 }
 
 .env-input-label {
   display: block;
   font-size: 14px;
+  font-weight: 600;
 }
 
 .env-fieldset textarea {
@@ -353,9 +381,9 @@ h1 {
   min-block-size: 12rem;
   resize: vertical;
   padding: var(--space-3);
-  color: var(--text-strong);
+  color: var(--text);
   background: var(--bg);
-  border: 1px solid var(--control-border);
+  border: 1px solid var(--border);
   border-radius: var(--radius-control);
   font-family: var(--font-mono);
   line-height: 1.5;
@@ -378,9 +406,9 @@ h1 {
   min-inline-size: 0;
   block-size: var(--control-height);
   padding: 0 var(--space-3);
-  color: var(--text-strong);
+  color: var(--text);
   background: var(--bg);
-  border: 1px solid var(--control-border);
+  border: 1px solid var(--border);
   border-radius: var(--radius-control);
   font-family: var(--font-mono);
   font-size: 14px;
@@ -388,9 +416,40 @@ h1 {
 
 .env-row[data-secret] .env-row__value { border-style: dashed; }
 .env-row__stored { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; }
-.env-row__secret { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 13px; white-space: nowrap; }
+.env-row__secret { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--space-6); font-size: 14px; white-space: nowrap; }
+/* A checkbox drawn from the palette, so every state is one we measured and none depends on the browser's own look
+   (a disabled native one ignores the palette and fades to about 1.5:1 on a light panel). Unchecked: the control
+   edge on the field colour. Checked: the action fill with its label colour for the tick. Disabled: the disabled
+   tokens, tick included, so a stored secret still reads as checked. */
+input[type='checkbox'] {
+  appearance: none;
+  flex: none;
+  display: inline-grid;
+  place-content: center;
+  inline-size: 18px;
+  block-size: 18px;
+  margin: 0;
+  border: 2px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg);
+}
+input[type='checkbox']:checked { background: var(--accent); border-color: var(--accent); }
+input[type='checkbox']:checked::after {
+  content: '';
+  inline-size: 4px;
+  block-size: 9px;
+  margin-block-start: -2px;
+  border-inline-end: 2px solid var(--on-accent);
+  border-block-end: 2px solid var(--on-accent);
+  transform: rotate(40deg);
+}
+input[type='checkbox']:disabled, input[type='checkbox']:disabled:checked { background: var(--arb-disabled-bg); border-color: var(--arb-disabled-border); }
+input[type='checkbox']:disabled:checked::after { border-color: var(--arb-disabled-fg); }
 .env-row-actions { display: flex; gap: var(--space-2); }
 .env-vault-note { color: var(--warning); }
+/* Instructions are body copy, so they take the primary text colour; muted stays for metadata and hints. */
+.muted.env-secret-help, .muted#environment-preset-help { color: var(--text); }
+.muted.env-vault-note { color: var(--text); border-inline-start: 3px solid var(--arb-warning); padding-inline-start: var(--space-3); }
 
 @media (max-width: 560px) {
   .env-row { grid-template-columns: 1fr 1fr; }
@@ -403,8 +462,9 @@ h1 {
   gap: var(--space-3);
 }
 
-fieldset:disabled {
-  opacity: 0.7;
+fieldset:disabled { color: var(--arb-disabled-fg); }
+fieldset:disabled input, fieldset:disabled textarea, fieldset:disabled select {
+  background: var(--arb-disabled-bg); color: var(--arb-disabled-fg); border-color: var(--arb-disabled-border);
 }
 
 .controls-panel {
@@ -439,10 +499,15 @@ fieldset:disabled {
   padding-inline: var(--space-3);
 }
 
-.env-preset-button[aria-pressed='true'] {
-  border-color: color-mix(in oklab, var(--success) 55%, var(--border));
-  background: color-mix(in oklab, var(--success) 22%, transparent);
+.env-preset-button[aria-pressed='true'],
+.button--selected {
+  border-color: var(--arb-selected-border);
+  background: var(--arb-selected-bg);
+  color: var(--text);
 }
+/* The light theme's selected and pressed surfaces are the same colour, so a selected control needs its own
+   persistent marker rather than relying on the fill: a check, beside the label. */
+.env-preset-button[aria-pressed='true']::before { content: '\2713'; margin-inline-end: var(--space-2); font-weight: 700; }
 
 .button {
   justify-self: start;
@@ -459,33 +524,21 @@ fieldset:disabled {
   background: transparent;
   color: var(--text);
   cursor: pointer;
-  transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease;
+  transition: border-color 120ms ease, background-color 120ms ease;
 }
+.button:hover:not(:disabled) { background: var(--arb-surface-hover); }
+.button:active:not(:disabled) { background: var(--arb-surface-pressed); }
 
-.button:hover,
-.button:focus-visible {
-  transform: translateY(-1px);
-}
-
-.button:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 1px;
-}
 
 .button--primary {
   background: var(--accent);
   color: var(--on-accent);
 }
 .button--primary:hover:not(:disabled) { background: var(--accent-hover); }
-
-.button--primary:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-  transform: none;
-}
+.button--primary:active:not(:disabled) { background: var(--accent-pressed); }
 
 .button--subtle {
-  border-color: var(--control-border);
+  border-color: var(--border);
 }
 
 .button--small { min-block-size: 32px; padding: 4px 10px; font-size: 12px; }
@@ -495,43 +548,62 @@ fieldset:disabled {
 .step-log__actions form { margin: 0; }
 
 .button--danger {
-  background: var(--danger);
-  color: var(--bg);
+  background: var(--arb-error);
+  color: var(--arb-on-error);
 }
+.button--danger:hover:not(:disabled) { background: var(--arb-error-hover); }
+.button--danger:active:not(:disabled) { background: var(--arb-error-pressed); }
 
-.button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
+/* Disabled is its own set of colours at full opacity, never a faded version of the enabled button. */
+.button:disabled {
+  background: var(--arb-disabled-bg);
+  color: var(--arb-disabled-fg);
+  border-color: var(--arb-disabled-border);
+  cursor: not-allowed;
+}
 
-.danger-zone { border-color: var(--danger); }
-.danger-zone h2 { color: var(--danger); }
+.danger-zone { border-color: var(--arb-error); }
+.danger-zone h2 { color: var(--arb-error); }
 .danger-zone form { display: grid; justify-items: start; gap: var(--space-3); }
 
 .table-scroll { overflow-x: auto; }
 .workspace-table { inline-size: 100%; min-inline-size: 820px; border-collapse: collapse; }
 .workspace-table th,
-.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 td { padding: 16px var(--space-4); text-align: start; vertical-align: middle; border-block-end: 1px solid var(--border); 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: 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 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); }
 .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 { color: var(--text); 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 td { color: var(--text); }
 .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. */
+/* A status is a glyph and a word, never colour alone. One rule per status the product reports (the words
+   come from the server and are unchanged); the colours come from the palette's status roles.
+
+     ready        success on success_bg      check
+     error        error on error_bg          cross
+     interrupted  warning on warning_bg      exclamation   (a run that was cut off, not one that failed)
+     preparing    accent on a surface        ring with a dot
+     idle         steel on a surface         empty ring
+     stopped      steel on a surface         filled square
+     sleeping     steel on a surface         half-filled ring
+     anything else                           neutral, empty ring
+
+   idle, stopped and sleeping are told apart by their shape and their word, not by a colour the palette has no
+   role for. Where there is a tinted background it is the matching *_bg; elsewhere the pill sits on a general surface. */
 .status-pill {
-  --pill-bg: #252e41; --pill-text: #cbd5e1; --pill-dot: #94a3b8;
+  --pill-bg: var(--arb-elevated); --pill-text: var(--text); --pill-glyph: var(--arb-steel);
   display: inline-flex;
   align-items: center;
-  gap: 7px;
+  gap: var(--space-2);
   margin: 0;
-  padding: 3px 10px;
+  padding: 3px 10px 3px 8px;
   border-radius: 999px;
   background: var(--pill-bg);
   color: var(--pill-text);
@@ -540,16 +612,33 @@ fieldset:disabled {
   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; } }
+.status-dot {
+  flex: none;
+  display: inline-grid;
+  place-items: center;
+  inline-size: 14px;
+  block-size: 14px;
+  box-sizing: border-box;
+  border-radius: 999px;
+  border: 2px solid var(--pill-glyph);
+  color: var(--pill-glyph);
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1;
+}
+.status-pill[data-status='ready'] { --pill-bg: var(--arb-success-bg); --pill-text: var(--arb-success); --pill-glyph: var(--arb-success); }
+.status-pill[data-status='ready'] .status-dot { border-color: transparent; }
+.status-pill[data-status='ready'] .status-dot::before { content: '\2713'; }
+.status-pill[data-status='error'] { --pill-bg: var(--arb-error-bg); --pill-text: var(--arb-error); --pill-glyph: var(--arb-error); }
+.status-pill[data-status='error'] .status-dot { border-color: transparent; }
+.status-pill[data-status='error'] .status-dot::before { content: '\2715'; }
+.status-pill[data-status='interrupted'] { --pill-bg: var(--arb-warning-bg); --pill-text: var(--arb-warning); --pill-glyph: var(--arb-warning); }
+.status-pill[data-status='interrupted'] .status-dot { border-color: transparent; }
+.status-pill[data-status='interrupted'] .status-dot::before { content: '!'; }
+.status-pill[data-status='preparing'] { --pill-glyph: var(--arb-accent); }
+.status-pill[data-status='preparing'] .status-dot { background: radial-gradient(circle, var(--pill-glyph) 0 2px, transparent 2.5px); }
+.status-pill[data-status='stopped'] .status-dot { border-radius: 2px; background: var(--pill-glyph); }
+.status-pill[data-status='sleeping'] .status-dot { background: linear-gradient(90deg, var(--pill-glyph) 50%, transparent 50%); }
 
 /* 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); }
@@ -560,10 +649,6 @@ fieldset:disabled {
 
 ol > li + li { margin-block-start: var(--space-2); }
 
-.button--success {
-  background: color-mix(in oklab, var(--success) 22%, transparent);
-  border-color: color-mix(in oklab, var(--success) 55%, var(--border));
-}
 
 .muted {
   margin: 0;
@@ -583,9 +668,9 @@ ol > li + li { margin-block-start: var(--space-2); }
   margin: 0;
   padding: var(--space-3);
   border-radius: 10px;
-  border: 1px solid var(--border);
+  border: 0;
   background: var(--bg);
-  color: var(--text-cell);
+  color: var(--text);
   font-family: var(--font-mono);
   font-size: 12px;
   line-height: 1.4;
@@ -614,21 +699,22 @@ 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(--control-border);
+  border: 1px solid var(--border);
   border-radius: var(--radius-control);
   text-decoration: none;
 }
+.log-switch a:hover:not([aria-current='page']) { background: var(--arb-surface-hover); color: var(--text); }
 
 .log-switch a[aria-current='page'] {
   color: var(--text);
-  border-color: var(--accent);
+  background: var(--arb-selected-bg);
+  border-color: var(--arb-selected-border);
+  font-weight: 600;
 }
+/* The tab you are on says so in words for assistive technology (aria-current) and in a marker for everyone,
+   because the light theme's selected fill is the same colour as its pressed fill. */
+.log-switch a[aria-current='page']::before { content: '\2713'; margin-inline-end: var(--space-2); }
 
-.log-switch a:focus-visible,
-.detail-link:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
 
 .detail-link {
   color: var(--muted);
@@ -681,13 +767,14 @@ p:empty:not([role]):not([aria-live]) { display: none; }
 
 /* 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 { 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); }
 .card__header { display: flex; justify-content: space-between; align-items: start; gap: var(--space-3); }
+.card__links { display: flex; align-items: center; gap: var(--space-1); flex: none; }
 .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__id { overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--text); }
 .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__summary { color: var(--text); 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; }
@@ -696,5 +783,23 @@ p:empty:not([role]):not([aria-live]) { display: none; }
 .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; }
+.icon-link:hover { color: var(--text); background: var(--arb-surface-hover); }
+
+/* A selected control keeps its fill while hovered or pressed; only an unselected one takes the hover surface. */
+.env-preset-button[aria-pressed='true']:hover:not(:disabled),
+.env-preset-button[aria-pressed='true']:active:not(:disabled),
+.button--selected:hover:not(:disabled),
+.button--selected:active:not(:disabled) { background: var(--arb-selected-bg); }
+
+/* High-contrast and forced-colors modes replace our colours with the system's. Anything drawn only with a
+   background colour would then vanish, so the shapes that carry meaning get a real border. Text and focus
+   rings keep working because they were never colour-only. */
+@media (forced-colors: active) {
+  .button, .badge, .status-pill, .progress-bar, .env-preset-button { border: 1px solid ButtonText; }
+  .progress-bar__fill { background: Highlight; }
+  .step-log__status, .status-dot { forced-color-adjust: none; border-color: ButtonText; color: ButtonText; }
+  .env-preset-button[aria-pressed='true'], .button--selected { border-width: 2px; }
+  :focus-visible { outline-color: Highlight; }
+  .lead[data-state='error'], .lead[data-state='interrupted'], .setup-error, .step-log[data-step-state='failed'] { border-inline-start-color: ButtonText; }
+  .lead h2::before { forced-color-adjust: none; color: ButtonText; }
+}

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

@@ -1,9 +1,9 @@
-<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'] %>">
+<main class="dashboard dashboard--narrow" id="workspace" data-id="<%= @id %>" data-status="<%= field('status') %>" data-started="<%= field('prepare_started_at') %>" data-completed="<%= field('completed_at') %>" data-busy="<%= @presentation['busy'] %>">
   <header class="dashboard__header">
     <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') %>>
+  <section class="status-panel lead" id="lead" data-section="lead" data-state="<%= escape(@presentation['state']) %>" aria-labelledby="status" <%= 'hidden' unless section?('lead') %>>
     <div class="lead__text">
       <h2 id="status" role="status"><%= escape(@presentation['headline']) %></h2>
       <p id="summary" class="lead__summary"><%= escape(@presentation['summary']) %></p>

data/lib/workspaces/dashboard_view.rb

@@ -40,6 +40,12 @@ module Workspaces
 
     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
+    # The Arb palette (dashboard/arb-palette.css) defines its colours per theme, selected by data-theme on the root
+    # element. The theme follows the visitor's operating-system setting, with dark when there is none. A tiny script
+    # in the head sets it before anything paints, so a light-mode visitor never sees a dark flash; a page without
+    # script stays dark, which the palette and the stylesheet are both tested in.
+    THEME_SCRIPT = 'document.documentElement.dataset.theme=' \
+                   "window.matchMedia&&window.matchMedia('(prefers-color-scheme: light)').matches?'light':'dark'".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.
@@ -58,18 +64,15 @@ module Workspaces
       new({}).render_checkout_authentication_error(path)
     end
 
+    # The Arb Previews icon from the Arb design system (arb-previews/favicon.svg, unchanged), tuned for 16 pixels.
+    # It carries no environment signal: the old icon was blue on localhost and gold when hosted, and the kit
+    # forbids recolouring or badging its marks, so the page itself (the address bar, the host in the URL) is how
+    # a localhost dashboard is told from a hosted one.
+    # The Arb Previews icon, from the design system (arb-previews/favicon.svg, copied unchanged). It is the 16 px
+    # tuned vector, so it is served as it is: the kit forbids recolouring or badging it, which means the tab no
+    # longer shows whether this dashboard is the local one or a hosted one.
     def self.favicon
-      local = Config.public_uri.host.match?(/(?:\A|\.)localhost\z/i)
-      color = local ? '#4f8dff' : '#f1bb53'
-      <<~SVG
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Workspaces">
-          <rect x="3" y="3" width="58" height="58" rx="13" fill="#0f1524"/>
-          <rect x="11" y="13" width="42" height="38" rx="5" fill="none" stroke="#{color}" stroke-width="4"/>
-          <path d="M11 25h42M32 25v26" fill="none" stroke="#{color}" stroke-width="4"/>
-          <circle cx="18" cy="19" r="2" fill="#{color}"/>
-          <circle cx="25" cy="19" r="2" fill="#{color}"/>
-        </svg>
-      SVG
+      File.read(File.join(__dir__, 'dashboard/arb-previews-favicon.svg'), encoding: 'UTF-8')
     end
 
     def initialize(snapshot, preview: false)
@@ -110,11 +113,14 @@ module Workspaces
     end
 
     def document(title, body)
-      css = File.read(File.join(__dir__, 'dashboard/styles.css'), encoding: 'UTF-8')
+      palette = File.read(File.join(__dir__, 'dashboard/arb-palette.css'), encoding: 'UTF-8')
+      css = palette + File.read(File.join(__dir__, 'dashboard/styles.css'), encoding: 'UTF-8')
       script = File.read(File.join(__dir__, 'dashboard/app.js'), encoding: 'UTF-8') +
                File.read(File.join(__dir__, 'dashboard/environment.js'), encoding: 'UTF-8')
-      '<!doctype html><html lang="en"><head><meta charset="utf-8">' \
+      '<!doctype html><html lang="en" data-theme="dark"><head><meta charset="utf-8">' \
         '<meta name="viewport" content="width=device-width, initial-scale=1">' \
+        '<meta name="color-scheme" content="dark light">' \
+        "<script>#{THEME_SCRIPT}</script>" \
         '<link rel="icon" type="image/svg+xml" href="/favicon.svg">' \
         "<title>#{escape(title)}</title><style>#{css}</style></head>" \
         "<body>#{body}<script>#{script}</script></body></html>"
@@ -319,6 +325,11 @@ module Workspaces
       @preview ? Config.settings_url(@id) : "/workspaces/#{@id}/settings"
     end
 
+    # Back to the list of every workspace, from the card.
+    def index_href
+      @preview ? Config.index_url : '/workspaces'
+    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

data/lib/workspaces/version.rb

@@ -1,3 +1,3 @@
 module Workspaces
-  VERSION = '0.1.21'
+  VERSION = '0.1.22'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: workspaces
 version: !ruby/object:Gem::Version
-  version: 0.1.21
+  version: 0.1.22
 platform: ruby
 authors:
 - Workspaces contributors
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2026-11-03 00:00:00.000000000 Z
+date: 2026-11-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rack
@@ -79,6 +79,8 @@ files:
 - lib/workspaces/config.rb
 - lib/workspaces/coordinator.rb
 - lib/workspaces/dashboard/app.js
+- lib/workspaces/dashboard/arb-palette.css
+- lib/workspaces/dashboard/arb-previews-favicon.svg
 - lib/workspaces/dashboard/card.html.erb
 - lib/workspaces/dashboard/checkout_authentication_error.html.erb
 - lib/workspaces/dashboard/environment.js