workspaces 0.1.0

data/lib/workspaces/dashboard/styles.css

@@ -0,0 +1,461 @@
+:root {
+  --bg: #0f1524;
+  --bg-elevated: #182035;
+  --border: #2f3a57;
+  --text: #e8edf9;
+  --muted: #9eaccd;
+  --accent: #4f8dff;
+  --success: #2fbf8f;
+  --danger: #ff6f74;
+  --warning: #f1bb53;
+  --radius: 12px;
+  --shadow: 0 10px 30px rgba(8, 12, 20, 0.35);
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+[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; }
+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); margin-block-start: var(--space-4); }
+.setup-error { margin-block-start: var(--space-5); border-color: var(--danger); }
+.setup-error h3 { color: var(--danger); margin-block-start: 0; }
+.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; } }
+dd, h1, code { overflow-wrap: anywhere; }
+dd { margin-inline-start: 0; margin-block-end: var(--space-3); }
+#log { max-height: 400px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
+
+body {
+  margin: 0;
+  min-block-size: 100dvb;
+  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color: var(--text);
+  background: linear-gradient(180deg, #0c1220 0%, var(--bg) 60%, #0b1020 100%);
+}
+
+a {
+  color: inherit;
+}
+
+.dashboard {
+  inline-size: min(100% - var(--space-6), 960px);
+  margin-inline: auto;
+  padding-block: var(--space-8);
+  display: grid;
+  gap: var(--space-6);
+}
+
+.dashboard__header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: end;
+  gap: var(--space-4);
+}
+
+.eyebrow {
+  margin: 0 0 var(--space-1);
+  color: var(--muted);
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+h1 {
+  margin: 0;
+  font-size: clamp(1.4rem, 2vw + 1rem, 2rem);
+  line-height: 1.2;
+}
+
+.header-message {
+  margin: var(--space-2) 0 0;
+  color: var(--muted);
+}
+
+.header-actions {
+  display: flex;
+  gap: var(--space-3);
+}
+
+.status-panel,
+.controls-panel,
+.error-panel,
+.log-panel,
+.noscript-note {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: var(--space-5);
+  box-shadow: var(--shadow);
+}
+
+.status-row {
+  display: grid;
+  gap: var(--space-4);
+  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
+}
+
+.status-label {
+  margin: 0 0 var(--space-2);
+  color: var(--muted);
+  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='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;
+}
+
+.status-message {
+  margin: var(--space-4) 0 0;
+  color: var(--text);
+}
+
+.stepper {
+  margin: var(--space-5) 0 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: var(--space-2);
+}
+
+.step {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  color: var(--muted);
+}
+
+.step-bullet {
+  inline-size: 10px;
+  block-size: 10px;
+  border: 2px solid var(--muted);
+  border-radius: 999px;
+}
+
+.step[data-step-state='active'],
+.step[data-step-state='complete'] {
+  color: var(--text);
+}
+
+.step[data-step-state='active'] .step-bullet {
+  border-color: var(--accent);
+  background: color-mix(in oklab, var(--accent) 25%, transparent);
+}
+
+.step[data-step-state='complete'] .step-bullet {
+  border-color: var(--success);
+  background: var(--success);
+}
+
+.step[data-step-state='failed'] {
+  color: color-mix(in oklab, var(--danger) 70%, var(--text));
+}
+
+.step[data-step-state='failed'] .step-bullet {
+  border-color: var(--danger);
+  background: color-mix(in oklab, var(--danger) 45%, transparent);
+}
+
+.step[data-step-state='unknown'] {
+  color: color-mix(in oklab, var(--muted) 80%, var(--text));
+}
+
+.step[data-step-state='unknown'] .step-bullet {
+  border-style: dashed;
+  background: transparent;
+}
+
+.env-panel {
+  display: grid;
+  gap: var(--space-4);
+}
+
+.env-fieldset {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  margin: 0;
+  padding: var(--space-4);
+  display: grid;
+  gap: var(--space-3);
+}
+
+.env-legend {
+  color: var(--muted);
+  font-size: 13px;
+  padding-inline: var(--space-2);
+}
+
+.env-existing-list,
+.env-add-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: var(--space-4);
+}
+
+.env-existing-item,
+.env-add-item {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: var(--space-3);
+  background: color-mix(in oklab, var(--bg) 65%, transparent);
+  display: grid;
+  gap: var(--space-3);
+}
+
+.env-existing-name,
+.env-add-grid {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.env-existing-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4);
+}
+
+.env-inline-label,
+.env-input-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: 14px;
+}
+
+.env-input-label {
+  display: block;
+  margin-block-end: var(--space-1);
+}
+
+.env-add-grid {
+  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
+}
+
+.env-add-grid p {
+  margin: 0;
+}
+
+.env-row-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.button--icon {
+  min-inline-size: 2.25rem;
+  padding-inline: var(--space-2);
+}
+
+.env-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+
+fieldset:disabled {
+  opacity: 0.7;
+}
+
+.controls-panel {
+  display: grid;
+  gap: var(--space-4);
+  align-items: start;
+}
+
+.button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  min-block-size: 40px;
+  padding-inline: var(--space-4);
+  border-radius: 10px;
+  border: 1px solid transparent;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 600;
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease;
+}
+
+.button:hover,
+.button:focus-visible {
+  transform: translateY(-1px);
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.button--primary {
+  background: var(--accent);
+  color: #ffffff;
+}
+
+.button--primary:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.button--subtle {
+  border-color: var(--border);
+}
+
+.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;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.error-panel h2,
+.log-panel h2 {
+  margin: 0 0 var(--space-3);
+  font-size: 1rem;
+}
+
+.error-panel pre,
+.log-panel pre {
+  margin: 0;
+  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;
+  font-size: 12px;
+  line-height: 1.4;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.log-panel pre {
+  max-block-size: min(38dvh, 360px);
+  overflow: auto;
+}
+
+.log-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--space-3);
+  margin-block-end: var(--space-3);
+}
+
+.log-switch {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin-block-end: var(--space-3);
+}
+
+.log-switch a {
+  color: var(--muted);
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--border);
+  border-radius: var(--space-1);
+  text-decoration: none;
+}
+
+.log-switch a[aria-current='page'] {
+  color: var(--text);
+  border-color: var(--accent);
+}
+
+.log-switch a:focus-visible,
+.detail-link:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.detail-link {
+  color: var(--muted);
+}
+
+.connection-warning {
+  margin: 0;
+  color: var(--warning);
+}
+
+.is-hidden {
+  display: none !important;
+}
+
+.visually-hidden {
+  position: absolute !important;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+@media (max-width: 640px) {
+  .dashboard {
+    inline-size: min(100% - var(--space-4), 960px);
+    padding-block: var(--space-6);
+  }
+
+  .status-panel,
+  .controls-panel,
+  .error-panel,
+  .log-panel,
+  .noscript-note {
+    padding: var(--space-4);
+  }
+
+  .log-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}

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

@@ -0,0 +1,82 @@
+<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'] %>">
+  <header class="dashboard__header">
+    <div><p class="eyebrow">Managed workspace</p><h1><%= @id %></h1><p><%= field('branch') %></p></div>
+    <a class="button button--subtle" href="/workspaces">All workspaces</a>
+  </header>
+  <section class="status-panel" aria-labelledby="status">
+    <div class="status-row">
+      <h2 id="status" role="status"><%= escape(@presentation['title']) %></h2>
+      <span id="activity" <%= 'hidden' unless @presentation['busy'] %>><span class="activity-dot" aria-hidden="true"></span> In progress · <span id="elapsed">—</span></span>
+    </div>
+    <p id="message"><%= field('message') %></p>
+    <ol class="stepper" id="progress" aria-label="Setup progress">
+      <% @presentation['steps'].each do |step| %>
+        <li class="step" data-step-state="<%= step['state'] %>" <%= 'aria-current="step"' if step['state'] == 'active' %>><span class="step-bullet" aria-hidden="true"></span><span><%= escape(step['label']) %></span><span class="step-outcome"><%= step['state'] %></span></li>
+      <% end %>
+    </ol>
+    <section class="error-panel setup-error" id="error-panel" role="alert" <%= 'hidden' unless @presentation['error'] %>>
+      <h3>What went wrong</h3><pre id="error"><%= escape(@presentation['error']) %></pre>
+    </section>
+    <div class="workspace-actions">
+      <a id="preview" class="button button--primary" href="<%= escape(Config.preview_url(@id)) %>" <%= 'hidden' unless @presentation['ready'] %> target="_blank" rel="noopener noreferrer">Open workspace</a>
+      <div id="actions" class="workspace-actions"><% @presentation['actions'].each do |action| %><%= action_form(action) %><% end %></div>
+    </div>
+    <p id="connection" role="status"></p>
+  </section>
+  <section class="log-panel" aria-labelledby="log-title">
+    <div class="log-header"><h2 id="log-title">Live <%= field('log_source') == 'backend' ? 'backend' : 'setup' %> log</h2><time id="updated"><%= field('updated_at') %></time></div>
+    <nav class="log-switch" aria-label="Log source">
+      <a href="?log=setup" data-log-source="setup" <%= 'aria-current="page"' if @snapshot['log_source'] != 'backend' %>>Setup log</a>
+      <a href="?log=backend" data-log-source="backend" <%= 'aria-current="page"' if @snapshot['log_source'] == 'backend' %>>Backend log</a>
+    </nav>
+    <pre id="log" tabindex="0" aria-label="<%= field('log_source') == 'backend' ? 'Backend' : 'Setup' %> log"><%= field('log_tail') %></pre>
+  </section>
+  <section class="status-panel env-panel" aria-labelledby="environment-overrides">
+    <h2 id="environment-overrides">Environment overrides</h2>
+    <p class="muted">Set workspace-only environment overrides for this managed workspace. Saved values are write-only and never shown here. Remove an override to restore recipe defaults.</p>
+    <p class="muted">Protected runner settings are rejected by the backend and cannot be overridden here.</p>
+    <form method="post" action="/workspaces/<%= @id %>/environment" id="environment-form" data-environment-form>
+      <fieldset class="env-fieldset" data-environment-fieldset>
+        <legend class="env-legend">Existing overrides</legend>
+        <% if environment_keys.empty? %>
+          <p class="muted">No workspace-specific overrides are currently saved.</p>
+        <% else %>
+          <ul class="env-existing-list">
+            <% environment_keys.each_with_index do |name, index| %>
+              <% key_id = "env-existing-#{index}" %>
+              <li class="env-existing-item" data-env-existing>
+                <div class="env-existing-name">
+                  <label for="<%= key_id %>-replace-value"><code><%= escape(name) %></code></label>
+                  <p class="muted">Saved value: <span aria-hidden="true">••••••••</span><span class="visually-hidden">Saved value masked</span></p>
+                </div>
+                <div class="env-existing-actions">
+                  <label class="env-inline-label" for="<%= key_id %>-replace-toggle">
+                    <input type="checkbox" id="<%= key_id %>-replace-toggle" data-replace-toggle aria-controls="<%= key_id %>-replace-value">
+                    Replace
+                  </label>
+                  <label class="env-inline-label" for="<%= key_id %>-remove">
+                    <input type="checkbox" id="<%= key_id %>-remove" name="remove[]" value="<%= escape(name) %>">
+                    Remove
+                  </label>
+                </div>
+                <label class="env-input-label" for="<%= key_id %>-replace-value">New value for <code><%= escape(name) %></code></label>
+                <input type="password" id="<%= key_id %>-replace-value" name="set[<%= escape(name) %>]" autocomplete="off" data-replace-value disabled>
+              </li>
+            <% end %>
+          </ul>
+        <% end %>
+      </fieldset>
+      <fieldset class="env-fieldset" data-environment-additions>
+        <legend class="env-legend">Add variables</legend>
+        <div class="env-add-list" data-env-add-list></div>
+        <button type="button" class="button button--subtle" data-env-add-row>Add variable</button>
+      </fieldset>
+      <div class="env-actions">
+        <button class="button button--primary" data-env-submit>Save &amp; restart</button>
+      </div>
+      <p class="muted" id="environment-status" role="status" aria-live="polite"></p>
+    </form>
+  </section>
+  <details class="status-panel"><summary>Workspace details</summary><dl><dt>Preview URL</dt><dd><a class="detail-link" href="<%= escape(Config.preview_url(@id)) %>" target="_blank" rel="noopener noreferrer"><%= escape(Config.preview_url(@id)) %></a> <span class="muted">Available when ready</span></dd><dt>Branch</dt><dd><%= field('branch') %></dd><dt>Path</dt><dd><code><%= field('path') %></code></dd><dt>Related PR</dt><dd><%= escape(@snapshot.dig('related_pr', 'number') || 'None') %></dd></dl></details>
+  <noscript><a href="/workspaces/<%= @id %>">Refresh status</a></noscript>
+</main>

data/lib/workspaces/dashboard_view.rb

@@ -0,0 +1,96 @@
+require 'erb'
+require_relative 'config'
+require_relative 'presentation'
+
+module Workspaces
+  class DashboardView
+    def self.render(snapshot)
+      new(snapshot).render
+    end
+
+    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>
+        <form method="post" action="/workspaces/create">
+          <p><label>Existing branch <input name="branch" placeholder="main"></label></p>
+          <p><label>PR number <input name="pr" inputmode="numeric" placeholder="43828"></label></p>
+          <p><label>New branch <input name="new_branch" placeholder="agent/fix-checkout"></label></p>
+          <p><label>Start new branch from <input name="from" placeholder="HEAD"></label></p>
+          <button class="button button--primary">Create workspace</button>
+        </form></section>
+        <section class="status-panel"><h2>Managed workspaces</h2><ul>
+        #{workspaces.map { |workspace| "<li><a href=\"/workspaces/#{view.escape(workspace.fetch('id'))}\">#{view.escape(workspace.fetch('id'))}</a> — #{view.escape(workspace['branch'])}</li>" }.join}
+        </ul></section></main>
+      HTML
+    end
+
+    def self.pull_request(number, workspaces)
+      new({}).render_pull_request(number, workspaces)
+    end
+
+    def self.checkout_authentication_error(path)
+      new({}).render_checkout_authentication_error(path)
+    end
+
+    def initialize(snapshot)
+      @snapshot = snapshot
+      @presentation = Presentation.new(snapshot).to_h
+    end
+
+    def render
+      @id = Config.validate_id!(@snapshot.fetch('workspace_id'))
+      document("Workspace #{@id}",
+               ERB.new(File.read(File.join(__dir__, 'dashboard/template.html.erb'),
+                                 encoding: 'UTF-8')).result(binding))
+    end
+
+    def render_pull_request(number, workspaces)
+      @number = number
+      @workspaces = workspaces
+      template = File.read(File.join(__dir__, 'dashboard/pull_request.html.erb'))
+      document("PR ##{number} workspaces", ERB.new(template).result(binding))
+    end
+
+    def render_checkout_authentication_error(path)
+      @retry_path = path if path.match?(%r{\A/pr/[1-9][0-9]*\z})
+      template = File.read(File.join(__dir__, 'dashboard/checkout_authentication_error.html.erb'))
+      document('GitHub access needs setup', ERB.new(template).result(binding))
+    end
+
+    def document(title, body)
+      css = 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">' \
+        '<meta name="viewport" content="width=device-width, initial-scale=1">' \
+        "<title>#{escape(title)}</title><style>#{css}</style></head>" \
+        "<body>#{body}<script>#{script}</script></body></html>"
+    end
+
+    def escape(value)
+      ERB::Util.html_escape(value.to_s)
+    end
+
+    private
+
+    def field(name)
+      escape(@snapshot[name])
+    end
+
+    def environment_keys
+      keys = @snapshot['environment_keys']
+      return [] unless keys.is_a?(Array)
+
+      keys.map(&:to_s).sort
+    end
+
+    def action_form(action)
+      style = action['primary'] ? 'button--primary' : 'button--subtle'
+      "<form method=\"post\" action=\"/workspaces/#{@id}/#{action.fetch('key')}\">" \
+        "<button class=\"button #{style}\">#{escape(action.fetch('label'))}</button></form>"
+    end
+  end
+end