npm - @profoundlogic/coderflow-server - Versions diffs - 0.2.1 - Mend

@profoundlogic/coderflow-server 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (202) hide show

package/LICENSE.txt +322 -0
package/README.md +158 -0
package/dist/LICENSE.txt +322 -0
package/dist/README.md +158 -0
package/dist/base-image/Dockerfile +184 -0
package/dist/base-image/agent-wrapper.sh +143 -0
package/dist/base-image/apply-local-state.sh +357 -0
package/dist/base-image/coder-git-credential-helper +307 -0
package/dist/base-image/entrypoint.sh +942 -0
package/dist/base-image/ssh_config_template +41 -0
package/dist/base-image/start-code-server.sh +76 -0
package/dist/base-image/sync-repos.sh +170 -0
package/dist/base-image/vscode-extensions.txt +10 -0
package/dist/base-image/vscode-settings.json +41 -0
package/dist/coder-server.js +2 -0
package/dist/config/cli-models.json +45 -0
package/dist/config/imported-skills.schema.json +83 -0
package/dist/config/skill-catalog.json +18 -0
package/dist/config/skill-catalog.schema.json +140 -0
package/dist/config.js +1 -0
package/dist/examples/oidc.json.example +11 -0
package/dist/lib/agent-keepalive.js +1 -0
package/dist/lib/api-keys.js +1 -0
package/dist/lib/apiKeys.js +1 -0
package/dist/lib/auto-judge.js +1 -0
package/dist/lib/basic-auth.js +1 -0
package/dist/lib/build-history.js +1 -0
package/dist/lib/build-output-service.js +1 -0
package/dist/lib/build-scheduler.js +1 -0
package/dist/lib/build-service.js +1 -0
package/dist/lib/claude-oauth-refresh.js +1 -0
package/dist/lib/cli/build.js +1 -0
package/dist/lib/cli/config-command.js +1 -0
package/dist/lib/cli/config.js +1 -0
package/dist/lib/cli/create-user.js +1 -0
package/dist/lib/cli/init.js +1 -0
package/dist/lib/cli/jira.js +1 -0
package/dist/lib/cli/license.js +1 -0
package/dist/lib/cli/server-manager.js +1 -0
package/dist/lib/container-tokens.js +1 -0
package/dist/lib/data-dir.js +1 -0
package/dist/lib/deployment-history.js +1 -0
package/dist/lib/deployment-service.js +1 -0
package/dist/lib/docker-utils.js +1 -0
package/dist/lib/email.js +1 -0
package/dist/lib/emailTemplates.js +1 -0
package/dist/lib/entitlement.js +1 -0
package/dist/lib/fetch-utils.js +1 -0
package/dist/lib/git-provider-service.js +1 -0
package/dist/lib/git-provider-setup/assets/coderflow_github_app.png +0 -0
package/dist/lib/git-provider-setup/github-setup-handler.js +1 -0
package/dist/lib/git-provider-setup/index.js +1 -0
package/dist/lib/git-provider-setup/setup-factory.js +1 -0
package/dist/lib/git-provider-setup/setup-interface.js +1 -0
package/dist/lib/git-providers/azure-devops-provider.js +1 -0
package/dist/lib/git-providers/github-app-provider.js +1 -0
package/dist/lib/git-providers/index.js +1 -0
package/dist/lib/git-providers/provider-factory.js +1 -0
package/dist/lib/git-providers/provider-interface.js +1 -0
package/dist/lib/jira-client.js +1 -0
package/dist/lib/logger.js +1 -0
package/dist/lib/model-fetcher.js +1 -0
package/dist/lib/notifications.js +1 -0
package/dist/lib/oidc-auth.js +1 -0
package/dist/lib/oidc-device-flow.js +1 -0
package/dist/lib/passwordTokens.js +1 -0
package/dist/lib/pin-cascade.js +1 -0
package/dist/lib/provider-accounts.js +1 -0
package/dist/lib/provider-oauth.js +1 -0
package/dist/lib/provider-profile.js +1 -0
package/dist/lib/provider-token-refresh.js +1 -0
package/dist/lib/roles.js +1 -0
package/dist/lib/secrets.js +1 -0
package/dist/lib/state-capture.js +1 -0
package/dist/lib/static-files.js +1 -0
package/dist/lib/task-name-generator.js +1 -0
package/dist/lib/users.js +1 -0
package/dist/middleware/requireAuth.js +1 -0
package/dist/middleware/requireInit.js +1 -0
package/dist/middleware/requirePermission.js +1 -0
package/dist/package-lock.json +4151 -0
package/dist/package.json +50 -0
package/dist/routes/apiKeys.js +1 -0
package/dist/routes/auth-oidc.js +1 -0
package/dist/routes/auth.js +1 -0
package/dist/routes/build.js +1 -0
package/dist/routes/containers.js +1 -0
package/dist/routes/deploy-task.js +1 -0
package/dist/routes/environment-management.js +1 -0
package/dist/routes/environments.js +1 -0
package/dist/routes/external-skills.js +1 -0
package/dist/routes/git-credentials.js +1 -0
package/dist/routes/git-provider-setup.js +1 -0
package/dist/routes/health.js +1 -0
package/dist/routes/jira.js +1 -0
package/dist/routes/objective-management.js +1 -0
package/dist/routes/password.js +1 -0
package/dist/routes/prompt.js +1 -0
package/dist/routes/provider-auth.js +1 -0
package/dist/routes/qa.js +1 -0
package/dist/routes/settings.js +1 -0
package/dist/routes/skill-management.js +1 -0
package/dist/routes/skills.js +1 -0
package/dist/routes/tasks.js +2 -0
package/dist/routes/templates.js +1 -0
package/dist/routes/test-task.js +1 -0
package/dist/routes/test.js +1 -0
package/dist/routes/users.js +1 -0
package/dist/routes/visualizations.js +1 -0
package/dist/schemas/template-metadata.schema.json +178 -0
package/dist/scripts/create-user.js +2 -0
package/dist/shipped-skills/environment-instructions/SKILL.md +154 -0
package/dist/shipped-skills/environment-templates/SKILL.md +282 -0
package/dist/shipped-skills/objective-management/SKILL.md +238 -0
package/dist/shipped-skills/skill-editor/SKILL.md +326 -0
package/dist/start.js +2 -0
package/dist/web-ui/public/activity-detail-modal.js +1 -0
package/dist/web-ui/public/activity-feed.js +1 -0
package/dist/web-ui/public/activity-formatters.js +1 -0
package/dist/web-ui/public/agent-event-parser.js +1 -0
package/dist/web-ui/public/app.js +1 -0
package/dist/web-ui/public/approve-dialog.js +1 -0
package/dist/web-ui/public/coderflow-logo-reversed.svg +46 -0
package/dist/web-ui/public/coderflow-logo.svg +46 -0
package/dist/web-ui/public/comments-widget.js +1 -0
package/dist/web-ui/public/docs/.nojekyll +0 -0
package/dist/web-ui/public/docs/README.md +26 -0
package/dist/web-ui/public/docs/_sidebar.md +47 -0
package/dist/web-ui/public/docs/admin/ai-providers.md +132 -0
package/dist/web-ui/public/docs/admin/email-notifications.md +69 -0
package/dist/web-ui/public/docs/admin/environments.md +215 -0
package/dist/web-ui/public/docs/admin/git-providers.md +147 -0
package/dist/web-ui/public/docs/admin/installation.md +313 -0
package/dist/web-ui/public/docs/admin/skills.md +35 -0
package/dist/web-ui/public/docs/admin/sso.md +241 -0
package/dist/web-ui/public/docs/admin/users-and-roles.md +57 -0
package/dist/web-ui/public/docs/code/cli.md +102 -0
package/dist/web-ui/public/docs/code/files-and-editing.md +86 -0
package/dist/web-ui/public/docs/code/terminal-access.md +110 -0
package/dist/web-ui/public/docs/code/vscode-extension.md +58 -0
package/dist/web-ui/public/docs/getting-started/core-concepts.md +129 -0
package/dist/web-ui/public/docs/getting-started/overview.md +46 -0
package/dist/web-ui/public/docs/index.html +151 -0
package/dist/web-ui/public/docs/integrations/custom.md +58 -0
package/dist/web-ui/public/docs/integrations/ibmi/overview.md +58 -0
package/dist/web-ui/public/docs/integrations/overview.md +48 -0
package/dist/web-ui/public/docs/objectives/qa-mode.md +90 -0
package/dist/web-ui/public/docs/objectives/staged-tasks.md +60 -0
package/dist/web-ui/public/docs/objectives/working-with-objectives.md +102 -0
package/dist/web-ui/public/docs/tasks/approval-and-deployment.md +83 -0
package/dist/web-ui/public/docs/tasks/creating-tasks.md +111 -0
package/dist/web-ui/public/docs/tasks/judging.md +114 -0
package/dist/web-ui/public/docs/tasks/providing-feedback.md +41 -0
package/dist/web-ui/public/docs/tasks/task-groups.md +73 -0
package/dist/web-ui/public/docs/tasks/winner-selection.md +75 -0
package/dist/web-ui/public/docs/templates/batch-processing.md +152 -0
package/dist/web-ui/public/docs/templates/task-templates.md +44 -0
package/dist/web-ui/public/docs/templates/template-examples.md +93 -0
package/dist/web-ui/public/docs/testing/profound-automated-testing.md +77 -0
package/dist/web-ui/public/docs/testing/task-visualizations.md +42 -0
package/dist/web-ui/public/docs/testing/testing-menu.md +118 -0
package/dist/web-ui/public/environments.css +3942 -0
package/dist/web-ui/public/environments.html +1791 -0
package/dist/web-ui/public/environments.js +1 -0
package/dist/web-ui/public/favicon-16.png +0 -0
package/dist/web-ui/public/favicon-32.png +0 -0
package/dist/web-ui/public/favicon.ico +0 -0
package/dist/web-ui/public/feedback-widget.css +3133 -0
package/dist/web-ui/public/feedback-widget.js +1 -0
package/dist/web-ui/public/git-history.css +2663 -0
package/dist/web-ui/public/git-history.html +272 -0
package/dist/web-ui/public/git-history.js +1 -0
package/dist/web-ui/public/git-status.js +1 -0
package/dist/web-ui/public/index.html +1459 -0
package/dist/web-ui/public/index.js +1 -0
package/dist/web-ui/public/login.html +346 -0
package/dist/web-ui/public/login.js +1 -0
package/dist/web-ui/public/markdown-editor.js +1 -0
package/dist/web-ui/public/markdown-file-editor.js +1 -0
package/dist/web-ui/public/modal-maximize.js +1 -0
package/dist/web-ui/public/notifications.js +1 -0
package/dist/web-ui/public/server-health.js +1 -0
package/dist/web-ui/public/settings.css +761 -0
package/dist/web-ui/public/settings.html +1044 -0
package/dist/web-ui/public/settings.js +1 -0
package/dist/web-ui/public/setup-password.html +355 -0
package/dist/web-ui/public/setup-password.js +1 -0
package/dist/web-ui/public/skills.css +1949 -0
package/dist/web-ui/public/skills.html +820 -0
package/dist/web-ui/public/skills.js +1 -0
package/dist/web-ui/public/sse-client.js +1 -0
package/dist/web-ui/public/sse-shared-worker.js +1 -0
package/dist/web-ui/public/styles.css +18614 -0
package/dist/web-ui/public/task.html +1779 -0
package/dist/web-ui/public/task.js +1 -0
package/dist/web-ui/public/terminal.html +45 -0
package/dist/web-ui/public/terminal.js +1 -0
package/dist/web-ui/public/theme.js +1 -0
package/dist/web-ui/public/users.html +298 -0
package/dist/web-ui/public/users.js +1 -0
package/dist/web-ui/public/variant-grouping.js +1 -0
package/package.json +63 -0

package/dist/web-ui/public/task.html ADDED Viewed

@@ -0,0 +1,1779 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Task Details · CoderFlow</title>
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32">
+  <link rel="icon" href="/favicon-16.png" type="image/png" sizes="16x16">
+  <link rel="icon" href="/favicon.ico">
+  <script>
+    (() => {
+      const key = 'profound-coder-theme';
+      try {
+        const stored = localStorage.getItem(key);
+        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const theme = stored === 'dark' || stored === 'light' ? stored : (prefersDark ? 'dark' : 'light');
+        document.documentElement.dataset.theme = theme;
+        document.documentElement.style.colorScheme = theme === 'dark' ? 'dark' : 'light';
+      } catch (error) {
+        document.documentElement.dataset.theme = 'light';
+      }
+    })();
+  </script>
+  <link rel="stylesheet" href="styles.css?v=90">
+  <!-- Syntax highlighting -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
+  <!-- Load libraries before modules (blocking) -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/turndown@7.1.2/dist/turndown.js"></script>
+  <!-- Image editor dependencies -->
+  <link rel="stylesheet" href="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.css">
+  <link rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script>
+  <script src="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.js"></script>
+  <script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>
+  <script type="module" src="markdown-editor.js?v=1"></script>
+  <script src="markdown-file-editor.js?v=1"></script>
+  <script type="module" src="comments-widget.js?v=1"></script>
+  <script type="module" src="task.js?v=68"></script>
+  <!-- Dev QA shortcut: Ctrl+Shift+Q to launch current page in QA mode -->
+</head>
+<body>
+  <button id="task-list-side-trigger" class="task-list-side-trigger" title="Browse other tasks">
+    <span class="side-trigger-icon">☰</span>
+    <span class="side-trigger-label">Tasks</span>
+  </button>
+  <main class="task-detail">
+    <div class="task-hero">
+      <div class="hero-top">
+        <nav class="breadcrumb" aria-label="Breadcrumb">
+          <a class="breadcrumb-link" href="index.html">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M3 11.5L12 4l9 7.5"></path>
+              <path d="M5 10.5V20h5v-5h4v5h5v-9.5"></path>
+            </svg>
+            <span>Home</span>
+          </a>
+          <span class="breadcrumb-separator" aria-hidden="true">/</span>
+          <span class="breadcrumb-current">Task Details</span>
+        </nav>
+        <span id="task-context" class="task-context">Loading…</span>
+        <button class="btn-icon" id="view-task-group" title="View task group" aria-label="View task group" style="display: none;">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="3" y="3" width="7" height="7"></rect>
+            <rect x="14" y="3" width="7" height="7"></rect>
+            <rect x="14" y="14" width="7" height="7"></rect>
+            <rect x="3" y="14" width="7" height="7"></rect>
+          </svg>
+        </button>
+        <button class="btn-ghost btn-small judge-indicator-btn" id="judge-indicator-btn" title="Judge tasks" aria-label="Judge tasks" hidden>
+          <span class="judge-indicator-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M6 6h12"></path>
+              <path d="M12 6v12"></path>
+              <path d="M8 18h8"></path>
+              <path d="M6 6l-3 5h6l-3-5z"></path>
+              <path d="M18 6l-3 5h6l-3-5z"></path>
+            </svg>
+          </span>
+          <span class="judge-count-badge" id="judge-count-badge" hidden>0</span>
+        </button>
+        <div class="btn-group" id="share-btn-group">
+          <button class="btn-icon" id="share-task" title="Share">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="18" cy="5" r="3"></circle>
+              <circle cx="6" cy="12" r="3"></circle>
+              <circle cx="18" cy="19" r="3"></circle>
+              <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
+              <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
+            </svg>
+          </button>
+          <div class="dropdown-menu" id="share-dropdown-menu" hidden>
+            <button class="dropdown-item" id="share-copy-group-link" data-action="copy-group-link" hidden>
+              <svg class="option-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="3" y="3" width="7" height="7"></rect>
+                <rect x="14" y="3" width="7" height="7"></rect>
+                <rect x="14" y="14" width="7" height="7"></rect>
+                <rect x="3" y="14" width="7" height="7"></rect>
+              </svg>
+              <span class="option-text">Copy Task Group Link</span>
+            </button>
+            <button class="dropdown-item" id="share-copy-link" data-action="copy-link">
+              <svg class="option-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+                <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+              </svg>
+              <span class="option-text">Copy Task Link</span>
+            </button>
+            <button class="dropdown-item" id="share-copy-id" data-action="copy-id">
+              <svg class="option-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+              </svg>
+              <span class="option-text">Copy Task ID</span>
+            </button>
+          </div>
+        </div>
+        <button class="btn-icon" id="pin-task" title="Pin task" data-pinned="false">
+          <svg class="pin-icon pin-svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 17v5"></path>
+            <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"></path>
+          </svg>
+          <span class="pin-icon pin-emoji" style="display: none;">📌</span>
+        </button>
+        <button class="btn-ghost btn-small" id="reset-layout">Reset Layout</button>
+        <button class="btn-icon" id="hide-all-sections" title="Hide all sections" style="display: none;">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="17 11 12 6 7 11"></polyline>
+            <polyline points="17 18 12 13 7 18"></polyline>
+          </svg>
+        </button>
+        <button class="btn-ghost btn-small" id="show-hidden-sections" style="display: none;">Show Hidden (0)</button>
+        <!-- More Actions Menu -->
+        <div class="btn-group" id="more-actions-btn-group">
+          <button class="btn-icon" id="more-actions-btn" title="More actions" aria-label="More actions">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="1"></circle>
+              <circle cx="12" cy="5" r="1"></circle>
+              <circle cx="12" cy="19" r="1"></circle>
+            </svg>
+          </button>
+          <div class="dropdown-menu" id="more-actions-dropdown" hidden>
+            <div class="dropdown-section">
+              <button class="dropdown-item" id="more-manage-grouping" data-action="manage-grouping">
+                <svg class="option-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M8 6h2v2H8V6zm6 0h2v2h-2V6zM8 11h2v2H8v-2zm6 0h2v2h-2v-2zm-6 5h2v2H8v-2zm6 0h2v2h-2v-2z"/>
+                </svg>
+                <span class="option-text">Manage Grouping...</span>
+              </button>
+              <button class="dropdown-item" id="more-compare-variants" data-action="compare-variants" hidden>
+                <svg class="option-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"></path>
+                  <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"></path>
+                  <path d="M4 22h16"></path>
+                  <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"></path>
+                  <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"></path>
+                  <path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"></path>
+                </svg>
+                <span class="option-text">Compare Variants...</span>
+              </button>
+              <button class="dropdown-item" id="more-open-all-variants" data-action="open-all-variants" hidden>
+                <svg class="option-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+                  <polyline points="15 3 21 3 21 9"></polyline>
+                  <line x1="10" y1="14" x2="21" y2="3"></line>
+                </svg>
+                <span class="option-text">Open Variants in Separate Tabs</span>
+              </button>
+              <button class="dropdown-item" id="more-resubmit-task" data-action="resubmit-task">
+                <svg class="option-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M17 1l4 4-4 4"></path>
+                  <path d="M3 11V9a4 4 0 0 1 4-4h14"></path>
+                  <path d="M7 23l-4-4 4-4"></path>
+                  <path d="M21 13v2a4 4 0 0 1-4 4H3"></path>
+                </svg>
+                <span class="option-text">Resubmit Task...</span>
+              </button>
+              <button class="dropdown-item" id="more-delete-task" data-action="delete-task">
+                <svg class="option-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="3 6 5 6 21 6"></polyline>
+                  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                  <line x1="10" y1="11" x2="10" y2="17"></line>
+                  <line x1="14" y1="11" x2="14" y2="17"></line>
+                </svg>
+                <span class="option-text">Delete Task...</span>
+              </button>
+            </div>
+            <div class="dropdown-divider"></div>
+            <div class="dropdown-section">
+              <button class="dropdown-item" id="more-theme-toggle" data-action="theme-toggle">
+                <svg class="option-icon theme-icon-sun" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <circle cx="12" cy="12" r="5"></circle>
+                  <line x1="12" y1="1" x2="12" y2="3"></line>
+                  <line x1="12" y1="21" x2="12" y2="23"></line>
+                  <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                  <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                  <line x1="1" y1="12" x2="3" y2="12"></line>
+                  <line x1="21" y1="12" x2="23" y2="12"></line>
+                  <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                  <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+                </svg>
+                <svg class="option-icon theme-icon-moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;">
+                  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+                </svg>
+                <span class="option-text" id="more-theme-toggle-text">Dark Mode</span>
+              </button>
+              <button class="dropdown-item" id="more-keyboard-shortcuts" data-action="keyboard-shortcuts">
+                <svg class="option-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect>
+                  <path d="M6 8h.001M10 8h.001M14 8h.001M18 8h.001M8 12h.001M12 12h.001M16 12h.001M6 16h8"></path>
+                </svg>
+                <span class="option-text">Keyboard Shortcuts</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="status-hero">
+        <div class="status-copy">
+          <div class="task-title-wrapper" style="display: flex; align-items: center;">
+            <h1 id="task-title">Task</h1>
+            <button class="task-rename-btn" id="task-rename-btn" title="Rename task">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+              </svg>
+            </button>
+          </div>
+          <p id="task-subtitle" class="task-subtitle">Preparing details…</p>
+          <!-- Jira Link Badge (hidden by default) -->
+          <div id="jiraInfo" class="jira-link-badge" style="display: none; margin-top: 8px; margin-bottom: -8px;">
+            <span class="jira-icon">📋</span>
+            <span>Jira Issue: <a id="jiraLink" href="" target="_blank" rel="noopener"></a></span>
+          </div>
+        </div>
+        <div class="status-actions">
+          <span id="task-status" class="status-pill status-unknown">Status</span>
+          <div class="btn-group" id="vscode-btn-group">
+            <button class="btn-secondary btn-small" id="vscode-task" disabled>VS Code</button>
+            <button class="btn-secondary btn-small btn-dropdown-toggle" id="vscode-dropdown-toggle" disabled>▼</button>
+            <div class="dropdown-menu" id="vscode-dropdown-menu" hidden>
+              <div class="dropdown-section" id="vscode-directories-section">
+                <button class="dropdown-item task-menu-item" data-action="workspace" data-path="/workspace">
+                  <svg class="option-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+                  </svg>
+                  <span class="option-text">Workspace</span>
+                </button>
+                <button class="dropdown-item task-menu-item" data-action="root" data-path="/">
+                  <svg class="option-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="3" y="3" width="7" height="7"></rect>
+                    <rect x="14" y="3" width="7" height="7"></rect>
+                    <rect x="14" y="14" width="7" height="7"></rect>
+                    <rect x="3" y="14" width="7" height="7"></rect>
+                  </svg>
+                  <span class="option-text">Container Root</span>
+                </button>
+                <button class="dropdown-item task-menu-item" data-action="task-output" data-path="/task-output">
+                  <svg class="option-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                    <polyline points="14 2 14 8 20 8"></polyline>
+                    <line x1="16" y1="13" x2="8" y2="13"></line>
+                    <line x1="16" y1="17" x2="8" y2="17"></line>
+                    <polyline points="10 9 9 9 8 9"></polyline>
+                  </svg>
+                  <span class="option-text">Task Output</span>
+                </button>
+              </div>
+              <div class="dropdown-section" id="vscode-repos-section" hidden>
+                <!-- Repository items will be populated dynamically -->
+              </div>
+            </div>
+          </div>
+          <div class="btn-group" id="app-server-btn-group" hidden>
+            <button class="btn-secondary btn-small" id="app-server-task" disabled>
+              <span id="app-server-status-indicator" class="status-indicator"></span>
+              Testing
+            </button>
+            <button class="btn-secondary btn-small btn-dropdown-toggle" id="app-server-dropdown-toggle" disabled>▼</button>
+            <div class="dropdown-menu" id="app-server-dropdown-menu" hidden>
+              <div class="dropdown-section" id="app-server-control-section">
+                <button class="dropdown-item task-menu-item" id="app-server-start-btn" data-action="start">
+                  <svg class="option-icon icon-play" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polygon points="5 3 19 12 5 21 5 3"></polygon>
+                  </svg>
+                  <span class="option-text" id="start-server-text">Start Server</span>
+                </button>
+                <button class="dropdown-item task-menu-item" id="app-server-restart-btn" data-action="restart" hidden>
+                  <svg class="option-icon icon-restart" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="23 4 23 10 17 10"></polyline>
+                    <polyline points="1 20 1 14 7 14"></polyline>
+                    <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
+                  </svg>
+                  <span class="option-text" id="restart-server-text">Restart Server</span>
+                </button>
+                <button class="dropdown-item task-menu-item" id="app-server-stop-btn" data-action="stop" hidden>
+                  <svg class="option-icon icon-stop" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                  </svg>
+                  <span class="option-text" id="stop-server-text">Stop Server</span>
+                </button>
+                <button class="dropdown-item task-menu-item" id="app-server-view-logs-btn">
+                  <svg class="option-icon icon-logs" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                    <polyline points="14 2 14 8 20 8"></polyline>
+                    <line x1="16" y1="13" x2="8" y2="13"></line>
+                    <line x1="16" y1="17" x2="8" y2="17"></line>
+                    <polyline points="10 9 9 9 8 9"></polyline>
+                  </svg>
+                  <span class="option-text">View Server Logs</span>
+                </button>
+              </div>
+              <div class="dropdown-section" id="app-server-launch-start-section" hidden>
+                <div class="dropdown-submenu-wrapper">
+                  <button class="dropdown-item dropdown-submenu-toggle task-menu-item" id="launch-start-toggle">
+                    <svg class="option-icon icon-play" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                      <polygon points="5 3 19 12 5 21 5 3"></polygon>
+                    </svg>
+                    <span class="option-text">Start Server & Launch</span>
+                    <span class="dropdown-arrow">▶</span>
+                  </button>
+                  <div class="dropdown-submenu" id="launch-start-submenu" hidden>
+                    <div id="app-server-launch-start-container">
+                      <!-- URLs will be populated dynamically -->
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="dropdown-section" id="app-server-urls-section" hidden>
+                <div class="dropdown-submenu-wrapper">
+                  <button class="dropdown-item dropdown-submenu-toggle task-menu-item" id="launch-urls-toggle">
+                    <svg class="option-icon icon-globe" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                      <circle cx="12" cy="12" r="10"></circle>
+                      <line x1="2" y1="12" x2="22" y2="12"></line>
+                      <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
+                    </svg>
+                    <span class="option-text">Launch URLs</span>
+                    <span class="dropdown-arrow">▶</span>
+                  </button>
+                  <div class="dropdown-submenu" id="launch-urls-submenu" hidden>
+                    <div id="app-server-urls-container">
+                      <!-- URLs will be populated dynamically -->
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="dropdown-section" id="tests-section" hidden>
+                <div class="dropdown-submenu-wrapper">
+                  <button class="dropdown-item dropdown-submenu-toggle task-menu-item" id="run-tests-toggle">
+                    <svg class="option-icon icon-test-run" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                      <polyline points="9 11 12 14 22 4"></polyline>
+                      <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
+                    </svg>
+                    <span class="option-text">Run Test Commands</span>
+                    <span class="dropdown-arrow">▶</span>
+                  </button>
+                  <div class="dropdown-submenu" id="run-tests-submenu" hidden>
+                    <div id="tests-container">
+                      <!-- Tests will be populated dynamically -->
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="btn-group" id="terminal-btn-group">
+            <button class="btn-secondary btn-small" id="terminal-task" disabled>Terminal</button>
+            <button class="btn-secondary btn-small btn-dropdown-toggle" id="terminal-dropdown-toggle" disabled>▼</button>
+            <div class="dropdown-menu" id="terminal-dropdown-menu" hidden>
+              <button class="dropdown-item task-menu-item" data-action="terminal">
+                <svg class="option-icon icon-terminal-open" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="4 17 10 11 4 5"></polyline>
+                  <line x1="12" y1="19" x2="20" y2="19"></line>
+                </svg>
+                <span class="option-text">Open Terminal</span>
+              </button>
+              <button class="dropdown-item task-menu-item" data-action="copy-attach">
+                <svg class="option-icon icon-copy" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                </svg>
+                <span class="option-text">Copy Attach Command</span>
+              </button>
+              <button class="dropdown-item task-menu-item" data-action="resume" id="terminal-resume-option" hidden>
+                <svg class="option-icon icon-resume" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <polygon points="5 3 19 12 5 21 5 3"></polygon>
+                </svg>
+                <span class="option-text">Resume with [Agent]</span>
+              </button>
+              <button class="dropdown-item task-menu-item" data-action="new-claude">
+                <svg class="option-icon icon-claude-session" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                  <path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 4.212z"/>
+                </svg>
+                <span class="option-text">New Claude Session</span>
+              </button>
+              <button class="dropdown-item task-menu-item" data-action="new-codex">
+                <svg class="option-icon icon-codex-session" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"/>
+                </svg>
+                <span class="option-text">New Codex Session</span>
+              </button>
+              <button class="dropdown-item task-menu-item" data-action="new-gemini">
+                <svg class="option-icon icon-gemini-session" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M12 2L9.09 9.09 2 12l7.09 2.91L12 22l2.91-7.09L22 12l-7.09-2.91z"></path>
+                </svg>
+                <span class="option-text">New Gemini Session</span>
+              </button>
+            </div>
+          </div>
+          <button class="btn-ghost btn-small" id="stop-task" disabled>Stop</button>
+          <button class="btn-primary btn-small" id="approve-task" disabled>Approve</button>
+        </div>
+      </div>
+      <div class="latest-activity-banner fade-gradient-container" id="latest-activity-banner" hidden>
+        <div class="latest-activity-header">
+          <div class="latest-activity-label">Latest update</div>
+          <span class="latest-activity-time" id="latest-activity-time">—</span>
+          <button type="button" id="copy-latest-activity-btn" class="btn-ghost btn-small icon-btn" title="Copy update" style="margin-left: auto; margin-right: 4px;">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+            </svg>
+          </button>
+          <button type="button" id="jump-to-comments-btn" class="btn-ghost btn-small jump-to-comments-btn" title="Jump to comments" hidden>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+            </svg>
+            <span id="jump-to-comments-count"></span>
+          </button>
+          <svg class="latest-activity-chevron" id="latest-activity-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="6 9 12 15 18 9"></polyline>
+          </svg>
+        </div>
+        <!-- Sticky Todo Progress Section (shows when todos exist in activity history) -->
+        <div class="todo-progress-section" id="todo-progress-section" hidden>
+          <div class="todo-progress-header" id="todo-progress-clickable" title="Click to view full to do list">
+            <span class="todo-progress-icon">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="10" y1="6" x2="21" y2="6"></line><line x1="10" y1="12" x2="21" y2="12"></line><line x1="10" y1="18" x2="21" y2="18"></line><polyline points="3 6 4 7 6 5"></polyline><polyline points="3 12 4 13 6 11"></polyline><polyline points="3 18 4 19 6 17"></polyline></svg>
+            </span>
+            <span class="todo-progress-label">To Do</span>
+            <div class="todo-progress-bar-container">
+              <div class="todo-progress-bar" id="todo-progress-bar"></div>
+            </div>
+            <span class="todo-progress-count" id="todo-progress-count">0/0</span>
+            <button type="button" class="todo-progress-dismiss" id="todo-progress-dismiss" title="Dismiss to do progress">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            </button>
+          </div>
+          <div class="todo-progress-current" id="todo-progress-current"></div>
+        </div>
+        <div class="latest-activity-content">
+          <div class="latest-activity-icon" id="latest-activity-icon">🤖</div>
+          <div class="latest-activity-text">
+            <div class="latest-activity-action" id="latest-activity-action">Waiting for updates</div>
+            <div class="latest-activity-detail" id="latest-activity-detail">Agent updates will appear here as soon as they happen.</div>
+          </div>
+          <div class="latest-activity-meta">
+            <div class="latest-activity-jump">
+              <button type="button" class="btn-ghost btn-small latest-jump-btn" id="jump-to-activity">
+                <span class="latest-jump-icon">📡</span>
+                <span>Agent Activity</span>
+                <span class="activity-count-badge" id="jump-activity-count">0</span>
+              </button>
+              <button type="button" class="btn-ghost btn-small latest-jump-btn" id="jump-to-summary">
+                <span class="latest-jump-icon">📝</span>
+                <span>Output Summary</span>
+                <span class="summary-check" id="jump-summary-check" hidden>✓</span>
+              </button>
+              <button type="button" class="btn-ghost btn-small latest-jump-btn" id="jump-to-changes">
+                <span class="latest-jump-icon">📂</span>
+                <span>Changed Files</span>
+                <span class="activity-count-badge" id="jump-files-changed" hidden>0</span>
+                <span class="repos-count-badge" id="jump-repos-count" hidden title="Repositories with changes">0 repos</span>
+                <span class="diff-stat"><span class="diff-add" id="jump-diff-added">+0</span></span>
+                <span class="diff-stat"><span class="diff-del" id="jump-diff-deleted">-0</span></span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <!-- Quick Reply Section - Proximity-aware feedback input -->
+        <div class="quick-reply-section" id="quick-reply-section" hidden>
+          <div class="quick-reply-collapsed" id="quick-reply-collapsed">
+            <button type="button" class="quick-reply-trigger" id="quick-reply-trigger" title="Reply to agent (R)">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
+              </svg>
+              <span>Reply...</span>
+              <kbd class="quick-reply-kbd">R</kbd>
+            </button>
+          </div>
+          <div class="quick-reply-expanded" id="quick-reply-expanded" hidden>
+            <div class="quick-reply-input-wrapper">
+              <!-- Markdown editor with toolbar (initialized in JS) -->
+              <div class="quick-reply-input-row">
+                <div class="quick-reply-editor-wrapper">
+                  <div id="quick-reply-toolbar" class="follow-up-toolbar follow-up-toolbar-hidden"></div>
+                  <div id="quick-reply-editor-container" class="follow-up-editor-container"></div>
+                </div>
+                <button type="button" class="btn-icon-launch quick-reply-submit-btn" id="quick-reply-submit" title="Submit (Ctrl+Enter)">&#10148;</button>
+              </div>
+              <!-- Action buttons below textarea -->
+              <div class="quick-reply-actions">
+                <div class="quick-reply-left-actions">
+                  <button type="button" class="btn-icon-mini" id="quick-reply-attach" title="Attach files">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                      <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
+                    </svg>
+                  </button>
+                  <button type="button" class="btn-icon-mini" id="quick-reply-screenshot" title="Capture screenshot">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                      <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
+                      <circle cx="12" cy="13" r="4"></circle>
+                    </svg>
+                  </button>
+                </div>
+                <div class="quick-reply-right-actions">
+                  <button type="button" class="btn-ghost btn-small" id="quick-reply-cancel">Cancel</button>
+                </div>
+              </div>
+              <!-- Attached files display -->
+              <div id="quick-reply-attached-files" class="attached-files-list" hidden></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="task-loading" class="loading">Loading task…</div>
+    <div id="task-error" class="empty-state" hidden>
+      <h3>We could not load this task</h3>
+      <p id="task-error-message" class="text-muted"></p>
+      <a class="btn-primary" href="index.html">Back to tasks</a>
+    </div>
+    <section id="task-content" class="detail-stack" hidden>
+      <article class="detail-card" id="execution-card" draggable="false">
+        <header class="detail-card-header">
+          <span class="drag-handle" title="Drag to reorder">⋮⋮</span>
+          <h2>Task Details</h2>
+          <div class="header-actions">
+            <button type="button" class="btn-ghost btn-small hide-card-btn" title="Hide section">
+              <span class="hide-icon">×</span>
+            </button>
+            <button type="button" class="btn-ghost btn-small expand-card-btn" title="Expand">
+              <span class="expand-icon">⬚</span>
+            </button>
+            <button type="button" class="btn-ghost btn-small toggle-card-btn">
+              <span class="collapse-icon">▼</span>
+            </button>
+          </div>
+        </header>
+        <div class="detail-card-content">
+        <dl class="meta-grid" id="execution-meta">
+          <div>
+            <dt>Task ID</dt>
+            <dd><code id="meta-task-id">—</code></dd>
+          </div>
+          <div>
+            <dt>Environment</dt>
+            <dd id="meta-environment">—</dd>
+          </div>
+          <div>
+            <dt>Template</dt>
+            <dd id="meta-template">—</dd>
+          </div>
+          <div>
+            <dt>Created</dt>
+            <dd id="meta-created">—</dd>
+          </div>
+          <div>
+            <dt>Created By</dt>
+            <dd id="meta-created-by">—</dd>
+          </div>
+          <div>
+            <dt>Duration</dt>
+            <dd id="meta-duration">—</dd>
+          </div>
+          <div>
+            <dt>Exit code</dt>
+            <dd id="meta-exit">—</dd>
+          </div>
+          <div>
+            <dt>Container</dt>
+            <dd id="meta-container">—</dd>
+          </div>
+          <div>
+            <dt>Container State</dt>
+            <dd id="meta-container-state">—</dd>
+          </div>
+          <div id="meta-approved-by-wrapper" hidden>
+            <dt>Approved by</dt>
+            <dd id="meta-approved-by">—</dd>
+          </div>
+          <div id="meta-follow-ups-wrapper" hidden>
+            <dt>Follow-Ups</dt>
+            <dd><button id="meta-follow-ups" class="link-button" style="padding: 0; border: none; background: none; color: var(--color-primary); cursor: pointer; text-decoration: underline;">—</button></dd>
+          </div>
+        </dl>
+        <div id="execution-tags" class="parameter-group"></div>
+        <div class="summary-box-wrapper" style="position: relative;">
+          <button type="button" id="copy-execution-notes-btn" class="btn-icon-mini" style="position: absolute; top: 8px; right: 28px; z-index: 10; background: var(--color-bg-primary); border: 1px solid var(--color-border);" title="Copy details">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+          </button>
+          <div id="execution-notes" class="summary-box scroll-box field-hint"></div>
+        </div>
+        </div>
+      </article>
+      <article class="detail-card" id="live-activity-card" draggable="false" hidden>
+        <header class="detail-card-header">
+          <span class="drag-handle" title="Drag to reorder">⋮⋮</span>
+          <h2>Agent Activity <span class="activity-count" id="activity-count">0</span></h2>
+          <div class="activity-search-wrapper">
+            <button type="button" class="btn-ghost btn-small" id="activity-search-toggle" title="Search activity (/)">
+              <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="11" cy="11" r="8"></circle>
+                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+              </svg>
+            </button>
+            <div class="activity-search-container" id="activity-search-container" hidden>
+              <svg class="activity-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="11" cy="11" r="8"></circle>
+                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+              </svg>
+              <input type="text" id="activity-search-input" placeholder="Search activity..." autocomplete="off" />
+              <button type="button" class="activity-search-close" id="activity-search-close" title="Close search">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <line x1="18" y1="6" x2="6" y2="18"></line>
+                  <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+              </button>
+            </div>
+            <span class="activity-filter-count" id="activity-filter-count" hidden></span>
+          </div>
+          <div class="header-actions">
+            <button type="button" class="btn-ghost btn-small hide-card-btn" title="Hide section">
+              <span class="hide-icon">×</span>
+            </button>
+            <button type="button" class="btn-ghost btn-small expand-card-btn" title="Expand">
+              <span class="expand-icon">⬚</span>
+            </button>
+            <button type="button" class="btn-ghost btn-small toggle-card-btn">
+              <span class="collapse-icon">▼</span>
+            </button>
+          </div>
+        </header>
+        <div class="detail-card-content">
+          <!-- Activity Type Filter Chips -->
+          <div class="activity-filter-chips" id="activity-filter-chips">
+            <button type="button" class="activity-filter-chip active" data-filter="all" title="Show all activity">All</button>
+            <button type="button" class="activity-filter-chip" data-filter="tools" title="Show tool calls (Bash, Read, Write, Edit, etc.)">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
+              </svg>
+              Tools
+            </button>
+            <button type="button" class="activity-filter-chip" data-filter="thinking" title="Show agent thinking process">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="10"></circle>
+                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+                <line x1="12" y1="17" x2="12.01" y2="17"></line>
+              </svg>
+              Thinking
+            </button>
+            <button type="button" class="activity-filter-chip" data-filter="responses" title="Show agent responses">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
+              </svg>
+              Responses
+            </button>
+            <button type="button" class="activity-filter-chip" data-filter="messages" title="Show user instructions and follow-ups">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+              </svg>
+              Prompts
+            </button>
+            <button type="button" class="activity-filter-chip" data-filter="errors" title="Show errors only">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="10"></circle>
+                <line x1="12" y1="8" x2="12" y2="12"></line>
+                <line x1="12" y1="16" x2="12.01" y2="16"></line>
+              </svg>
+              Errors
+            </button>
+          </div>
+          <!-- Tool Type Sub-filter (shown when Tools filter is active) -->
+          <!-- Chips are dynamically generated from TOOL_TYPES in activity-feed.js -->
+          <div class="tool-type-filter-row" id="tool-type-filter-row" hidden>
+            <span class="tool-type-filter-label">Filter by type:</span>
+            <div class="tool-type-filter-chips" id="tool-type-filter-chips">
+              <!-- Dynamically populated by ActivityFeed.initToolTypeChips() -->
+            </div>
+          </div>
+          <div class="activity-feed" id="activity-feed">
+            <div class="activity-placeholder">Waiting for activity...</div>
+          </div>
+          <div class="inline-follow-up-wrapper" id="inline-follow-up-wrapper" hidden>
+            <!-- Hidden file input -->
+            <input type="file" id="follow-up-attachments" multiple accept="*/*" hidden aria-label="Attach files">
+            <!-- Markdown editor with toolbar (initialized in JS) -->
+            <div class="follow-up-input-row">
+              <div class="inline-follow-up-editor-wrapper">
+                <div id="inline-follow-up-toolbar" class="follow-up-toolbar follow-up-toolbar-hidden"></div>
+                <div id="inline-follow-up-editor-container" class="follow-up-editor-container"></div>
+              </div>
+              <button type="button" class="btn-icon-launch inline-follow-up-submit" id="submit-inline-follow-up" title="Submit follow-up (Ctrl+Enter)">➤</button>
+            </div>
+            <!-- File attachment buttons -->
+            <div class="follow-up-actions">
+              <button type="button" class="btn-icon-mini" id="attach-follow-up-files-btn" title="Attach files">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
+                </svg>
+              </button>
+              <button type="button" class="btn-icon-mini" id="capture-follow-up-screenshot-btn" title="Capture screenshot">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
+                  <circle cx="12" cy="13" r="4"></circle>
+                </svg>
+              </button>
+            </div>
+            <!-- Attached files list -->
+            <div id="follow-up-attached-files-list" class="attached-files-list" hidden></div>
+          </div>
+        </div>
+      </article>
+      <article class="detail-card" id="activity-card" draggable="false">
+        <header class="detail-card-header">
+          <span class="drag-handle" title="Drag to reorder">⋮⋮</span>
+          <h2>Logs</h2>
+          <div class="logs-search-wrapper" id="logs-search-wrapper">
+            <button type="button" class="btn-ghost btn-small" id="logs-search-toggle" title="Search logs">
+              <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="11" cy="11" r="8"></circle>
+                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+              </svg>
+            </button>
+            <div class="logs-search-container" id="logs-search-container" hidden>
+              <svg class="logs-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="11" cy="11" r="8"></circle>
+                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+              </svg>
+              <input type="text" id="logs-search-input" placeholder="Search logs..." autocomplete="off" />
+              <span class="logs-search-count" id="logs-search-count" hidden>0</span>
+              <button type="button" class="logs-search-nav" id="logs-search-prev" title="Previous match">↑</button>
+              <button type="button" class="logs-search-nav" id="logs-search-next" title="Next match">↓</button>
+              <button type="button" class="logs-search-close" id="logs-search-close" title="Close search">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <line x1="18" y1="6" x2="6" y2="18"></line>
+                  <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div class="header-actions">
+            <button type="button" id="copy-logs-btn" class="btn-ghost btn-small" title="Copy logs">
+               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+            </button>
+            <button type="button" class="btn-ghost btn-small hide-card-btn" title="Hide section">
+              <span class="hide-icon">×</span>
+            </button>
+            <button type="button" class="btn-ghost btn-small expand-card-btn" title="Expand">
+              <span class="expand-icon">⬚</span>
+            </button>
+            <button type="button" class="btn-ghost btn-small toggle-card-btn">
+              <span class="collapse-icon">▼</span>
+            </button>
+          </div>
+        </header>
+        <div class="detail-card-content">
+        <div id="logs-content" class="log-window"></div>
+        </div>
+      </article>
+      <article class="detail-card" id="summary-card" draggable="false">
+        <header class="detail-card-header">
+          <span class="drag-handle" title="Drag to reorder">⋮⋮</span>
+          <h2>Output Summary</h2>
+          <div class="header-actions">
+            <button type="button" id="copy-summary-btn" class="btn-ghost btn-small" title="Copy summary">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+            </button>
+            <button type="button" id="post-to-jira-btn" class="btn-ghost btn-small" style="display: none;" title="Post summary to Jira">
+              📋 Post to Jira
+            </button>
+            <button type="button" class="btn-ghost btn-small hide-card-btn" title="Hide section">
+              <span class="hide-icon">×</span>
+            </button>
+            <button type="button" class="btn-ghost btn-small expand-card-btn" title="Expand">
+              <span class="expand-icon">⬚</span>
+            </button>
+            <button type="button" class="btn-ghost btn-small toggle-card-btn">
+              <span class="collapse-icon">▼</span>
+            </button>
+          </div>
+        </header>
+        <div class="detail-card-content">
+          <div id="output-summary" class="summary-box scroll-box" hidden></div>
+          <div id="no-summary" class="field-hint" hidden>No summary available yet.</div>
+        </div>
+      </article>
+      <article class="detail-card" id="changes-card" draggable="false">
+        <header class="detail-card-header">
+          <span class="drag-handle" title="Drag to reorder">⋮⋮</span>
+          <h2>Changed Files</h2>
+          <div class="header-actions">
+            <button type="button" class="btn-ghost btn-small" id="sync-repos-btn" title="Check for repository changes">
+              ⟳
+            </button>
+            <button type="button" class="btn-ghost btn-small hide-card-btn" title="Hide section">
+              <span class="hide-icon">×</span>
+            </button>
+            <button type="button" class="btn-ghost btn-small expand-card-btn" title="Expand">
+              <span class="expand-icon">⬚</span>
+            </button>
+            <button type="button" class="btn-ghost btn-small toggle-card-btn">
+              <span class="collapse-icon">▼</span>
+            </button>
+          </div>
+        </header>
+        <div class="detail-card-content">
+          <div id="changes-stats" class="parameter-group"></div>
+          <div class="changes-layout">
+            <div id="changes-sidebar" class="changes-sidebar" hidden>
+              <div class="changes-tree-header">
+                <span class="changes-tree-title">Files</span>
+                <button class="btn-ghost btn-small icon-btn" id="collapse-changes-tree" title="Collapse tree">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="15 18 9 12 15 6"></polyline>
+                  </svg>
+                </button>
+              </div>
+              <div id="changes-tree-content" class="changes-tree-content"></div>
+            </div>
+            <div class="changes-main">
+              <button class="btn-ghost btn-small changes-tree-toggle" id="expand-changes-tree" title="Show file tree" hidden>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="9 18 15 12 9 6"></polyline>
+                </svg>
+              </button>
+              <ul id="changes-list" class="diff-list"></ul>
+            </div>
+          </div>
+          <div class="command-block" id="apply-command-block" hidden>
+            <code id="apply-command">coder apply</code>
+            <button class="btn-secondary btn-small" id="copy-apply">Copy</button>
+          </div>
+        </div>
+      </article>
+      <!-- Comments Section -->
+      <article class="detail-card" id="comments-card" draggable="false" data-default-collapsed="true">
+        <header class="detail-card-header">
+          <span class="drag-handle" title="Drag to reorder">⋮⋮</span>
+          <h2>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: -2px; margin-right: 6px;">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+            </svg>
+            Comments <span class="comments-count-badge" id="comments-card-count"></span>
+          </h2>
+          <div class="header-actions">
+            <button type="button" class="btn-ghost btn-small hide-card-btn" title="Hide section">
+              <span class="hide-icon">×</span>
+            </button>
+            <button type="button" class="btn-ghost btn-small expand-card-btn" title="Expand">
+              <span class="expand-icon">⬚</span>
+            </button>
+            <button type="button" class="btn-ghost btn-small toggle-card-btn">
+              <span class="collapse-icon">▼</span>
+            </button>
+          </div>
+        </header>
+        <div class="detail-card-content">
+          <div id="task-comments-container" class="comments-container"></div>
+        </div>
+      </article>
+    </section>
+  </main>
+  <!-- Task List Slide-Out Panel -->
+  <div id="task-list-panel" class="task-list-panel" hidden>
+    <div class="task-list-panel-overlay" id="task-list-panel-overlay"></div>
+    <div class="task-list-panel-content">
+      <div class="task-list-panel-header">
+        <button id="task-list-filter-all" class="task-list-filter-btn active" title="All Tasks">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="3" y="3" width="7" height="7"></rect>
+            <rect x="14" y="3" width="7" height="7"></rect>
+            <rect x="14" y="14" width="7" height="7"></rect>
+            <rect x="3" y="14" width="7" height="7"></rect>
+          </svg>
+        </button>
+        <button id="task-list-filter-pinned" class="task-list-filter-btn" title="Pinned Tasks">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="12" y1="17" x2="12" y2="22"></line>
+            <path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z"></path>
+          </svg>
+        </button>
+        <button id="task-list-refresh" class="task-list-filter-btn" title="Refresh Tasks">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
+            <path d="M3 3v5h5"></path>
+            <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path>
+            <path d="M21 21v-5h-5"></path>
+          </svg>
+        </button>
+        <input type="text" id="task-list-search" class="task-list-search" placeholder="Search tasks...">
+        <button class="btn-icon task-list-close" id="task-list-close" title="Close">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      </div>
+      <div class="task-list-panel-body" id="task-list-panel-body">
+        <div class="task-list-loading">Loading tasks...</div>
+      </div>
+      <div class="task-list-panel-footer">
+        <button class="btn-ghost btn-small" id="task-list-load-more" hidden>Load More</button>
+      </div>
+    </div>
+  </div>
+  <!-- Approve Modal - dynamically created by approve-dialog.js -->
+  <!-- Delete Modal -->
+  <div id="delete-modal" class="modal" hidden>
+    <div class="modal-overlay"></div>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2>Delete Task</h2>
+        <button class="modal-close" id="close-delete-modal">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div class="modal-section">
+          <p id="delete-warning" class="field-hint" style="color: var(--color-danger); margin: 0;">This action cannot be undone.</p>
+        </div>
+        <div class="modal-section">
+          <p id="delete-message">What would you like to delete?</p>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn-ghost" id="cancel-delete">Cancel</button>
+        <button class="btn-secondary" id="delete-current-variant">Delete This Variant</button>
+        <button class="btn-danger" id="delete-all-variants">Delete All Variants</button>
+      </div>
+    </div>
+  </div>
+  <!-- Unpin Objectives Modal -->
+  <div id="unpin-objectives-modal" class="modal" hidden>
+    <div class="modal-overlay"></div>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2>Unpin Parent Objectives?</h2>
+        <button class="modal-close" id="close-unpin-objectives-modal">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div class="modal-section">
+          <p>The following objectives no longer have any pinned children:</p>
+          <ul id="orphaned-objectives-list" style="margin: 8px 0; padding-left: 20px;"></ul>
+        </div>
+        <div class="modal-section">
+          <p class="field-hint" style="margin: 0;">Would you like to unpin these objectives as well?</p>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn-ghost" id="skip-unpin-objectives">Keep Pinned</button>
+        <button class="btn-primary" id="confirm-unpin-objectives">Unpin All</button>
+      </div>
+    </div>
+  </div>
+  <!-- Stop Container Modal -->
+  <div id="stop-modal" class="modal" hidden>
+    <div class="modal-overlay"></div>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2>Stop Container</h2>
+        <button class="modal-close" id="close-stop-modal">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div class="modal-section">
+          <p id="stop-warning" class="field-hint" style="margin: 0;">This will terminate the container and free up resources.</p>
+        </div>
+        <div class="modal-section">
+          <p id="stop-message">The task data will be preserved, but the running environment will be stopped.</p>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn-ghost" id="cancel-stop">Cancel</button>
+        <button class="btn-danger" id="confirm-stop">Stop Container</button>
+      </div>
+    </div>
+  </div>
+  <!-- Resubmit Modal -->
+  <div id="resubmit-modal" class="modal" hidden>
+    <div class="modal-overlay"></div>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2>Resubmit Task</h2>
+        <button class="modal-close" id="close-resubmit-modal">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div class="modal-section">
+          <p class="field-hint">Create duplicate tasks based on this configuration.</p>
+        </div>
+        <div class="modal-section">
+          <!-- Agent Selection Container -->
+          <div style="display: flex; align-items: center; gap: 8px;">
+            <!-- Agent Selection -->
+            <div class="agent-selector" role="group" aria-label="Agent selection" id="resubmit-agent-selector">
+              <div class="agent-card" data-agent="claude" data-count="0">
+                <button type="button" class="agent-btn-decrement" data-counter="down" aria-label="Decrease Claude count" title="Remove Claude">−</button>
+                <div class="agent-icon" role="button" tabindex="0" aria-label="Claude" title="Claude (Alt+1) (click to add, right-click to remove)">
+                  <svg viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                    <path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 4.212z"/>
+                  </svg>
+                </div>
+                <button type="button" class="agent-btn-increment" data-counter="up" aria-label="Increase Claude count" title="Add Claude">+</button>
+                <div class="agent-count-badge" id="resubmit-claude-count-display">0</div>
+                <input type="number" min="0" max="5" step="1" id="resubmit-claude-count" value="0" hidden readonly aria-label="Number of Claude containers">
+              </div>
+              <div class="agent-card" data-agent="codex" data-count="0">
+                <button type="button" class="agent-btn-decrement" data-counter="down" aria-label="Decrease Codex count" title="Remove Codex">−</button>
+                <div class="agent-icon" role="button" tabindex="0" aria-label="Codex" title="Codex (Alt+2) (click to add, right-click to remove)">
+                  <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"/>
+                  </svg>
+                </div>
+                <button type="button" class="agent-btn-increment" data-counter="up" aria-label="Increase Codex count" title="Add Codex">+</button>
+                <div class="agent-count-badge" id="resubmit-codex-count-display">0</div>
+                <input type="number" min="0" max="5" step="1" id="resubmit-codex-count" value="0" hidden readonly aria-label="Number of Codex containers">
+              </div>
+              <div class="agent-card" data-agent="gemini" data-count="0">
+                <button type="button" class="agent-btn-decrement" data-counter="down" aria-label="Decrease Gemini count" title="Remove Gemini">−</button>
+                <div class="agent-icon" role="button" tabindex="0" aria-label="Gemini" title="Gemini (Alt+3) (click to add, right-click to remove)">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M12 2L9.09 9.09 2 12l7.09 2.91L12 22l2.91-7.09L22 12l-7.09-2.91z"></path>
+                  </svg>
+                </div>
+                <button type="button" class="agent-btn-increment" data-counter="up" aria-label="Increase Gemini count" title="Add Gemini">+</button>
+                <div class="agent-count-badge" id="resubmit-gemini-count-display">0</div>
+                <input type="number" min="0" max="5" step="1" id="resubmit-gemini-count" value="0" hidden readonly aria-label="Number of Gemini containers">
+              </div>
+            </div>
+            <!-- Agent Selection Hint -->
+            <div class="agent-hint" id="resubmit-agent-hint" data-visible="true">
+              <span class="agent-hint-arrow">←</span>
+              <span class="agent-hint-text">Select Agents</span>
+            </div>
+          </div>
+        </div>
+        <!-- Instructions Section -->
+        <div class="modal-section">
+          <label for="resubmit-instructions" class="field-label" style="display: block; margin-bottom: 6px; font-size: 13px; color: var(--color-text-secondary);">Instructions</label>
+          <div class="resubmit-markdown-editor-container">
+            <textarea
+              id="resubmit-instructions"
+              class="resubmit-instructions-textarea"
+              placeholder="Enter instructions for this task..."
+              rows="3"></textarea>
+          </div>
+        </div>
+        <!-- Attachments Section -->
+        <div class="modal-section">
+          <input type="file" id="resubmit-attachments" multiple accept="*/*" hidden aria-label="Attach files">
+          <div class="follow-up-actions">
+            <button type="button" class="btn-icon-mini" id="resubmit-attach-files-btn" title="Attach files">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
+              </svg>
+            </button>
+            <button type="button" class="btn-icon-mini" id="resubmit-capture-screenshot-btn" title="Capture screenshot">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
+                <circle cx="12" cy="13" r="4"></circle>
+              </svg>
+            </button>
+            <span class="field-hint" style="margin-left: 8px; font-size: 12px;">New attachments replace original files</span>
+          </div>
+          <div id="resubmit-attached-files-list" class="attached-files-list" hidden></div>
+        </div>
+        <!-- Add as Variant Option -->
+        <div class="modal-section" id="resubmit-variant-section" hidden>
+          <label class="checkbox-label resubmit-variant-checkbox">
+            <input type="checkbox" id="resubmit-as-variant">
+            <span>Add as variant to existing group</span>
+          </label>
+        </div>
+        <!-- Error Message Container -->
+        <div class="modal-section" id="resubmit-error-section" hidden>
+          <div id="resubmit-error-message" style="color: var(--color-danger); font-size: 13px; padding: 8px 12px; background: rgba(229,83,104,0.08); border-radius: 4px; border-left: 3px solid var(--color-danger);"></div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn-ghost" id="cancel-resubmit">Cancel</button>
+        <button class="btn-primary" id="confirm-resubmit">Launch</button>
+      </div>
+    </div>
+  </div>
+  <!-- Follow-Up History Modal (Read-Only) -->
+  <div id="follow-up-history-modal" class="modal" hidden>
+    <div class="modal-overlay"></div>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2>Follow-Up History</h2>
+        <div class="header-actions">
+          <button type="button" class="btn-ghost btn-small icon-btn" id="maximize-follow-up-history-modal" title="Maximize">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+            </svg>
+          </button>
+          <button class="modal-close" id="close-follow-up-history" title="Close">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+      </div>
+      <div class="modal-body">
+        <div id="follow-up-history-modal-list" style="font-size: 13px;"></div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn-primary" id="close-follow-up-history-btn">Close</button>
+      </div>
+    </div>
+  </div>
+  <!-- Test Parameters Modal (task.html) -->
+  <div id="test-param-modal-task" class="modal" hidden>
+    <div class="modal-overlay"></div>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2 id="test-param-modal-title-task">Test Parameters</h2>
+        <button type="button" class="modal-close" aria-label="Close">&times;</button>
+      </div>
+      <div class="modal-body">
+        <p class="modal-description">This test requires the following parameters:</p>
+        <div id="test-param-fields-task" class="parameter-fields"></div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn-ghost" id="test-param-cancel-btn-task">Cancel</button>
+        <button type="button" class="btn-primary" id="test-param-confirm-btn-task" disabled>Run Test</button>
+      </div>
+    </div>
+  </div>
+  <!-- VS Code Remote Info Modal -->
+  <div id="vscode-remote-info-modal" class="modal" hidden>
+    <div class="modal-overlay"></div>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2>Open in VS Code (Remote Container)</h2>
+        <button class="modal-close" id="close-vscode-remote-info">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div class="modal-section">
+          <p class="field-hint">To work with this remote container in VS Code, follow these steps:</p>
+        </div>
+        <div class="modal-section">
+          <h3 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 600;">Prerequisites (One-Time Setup)</h3>
+          <p style="margin: 4px 0 4px 0;">Install these VS Code extensions locally:</p>
+          <ul style="margin: 4px 0 4px 16px; padding-left: 20px; font-size: 13px;">
+            <li style="margin: 2px 0;"><strong>Remote - SSH</strong></li>
+            <li style="margin: 2px 0;"><strong>Dev Containers</strong></li>
+          </ul>
+          <p style="margin: 8px 0 4px 0; font-size: 13px; color: var(--color-text-secondary);">
+            Extensions → Search "Remote SSH" and "Dev Containers" → Install
+          </p>
+        </div>
+        <div class="modal-section">
+          <h3 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 600;">Step 1: Connect to Remote Host</h3>
+          <p style="margin: 4px 0;">Press <kbd>F1</kbd> → <strong>Remote-SSH: Connect to Host...</strong></p>
+          <p style="margin: 8px 0 4px 0;">Enter: <code>your-username@<span id="remote-ssh-host">hostname</span></code></p>
+          <p style="margin: 4px 0 8px 0; font-size: 13px; color: var(--color-text-secondary);">
+            Replace "your-username" with your SSH username
+          </p>
+        </div>
+        <div class="modal-section">
+          <h3 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 600;">Step 2: Install Docker Extension (Remote)</h3>
+          <p style="margin: 4px 0; font-size: 13px;">Once connected to SSH, install the <strong>Docker</strong> extension on the remote host.</p>
+          <p style="margin: 4px 0; font-size: 13px; color: var(--color-text-secondary);">
+            Extensions → Search "Docker" → Install on SSH
+          </p>
+        </div>
+        <div class="modal-section">
+          <h3 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 600;">Step 3: Attach to Container</h3>
+          <p style="margin: 4px 0;">Open <strong>Docker</strong> view → Find this container:</p>
+          <p style="margin: 8px 0 4px 0;">Container Name:</p>
+          <div style="margin-bottom: 8px;">
+            <code style="display: block; padding: 8px; background: var(--color-bg-secondary); border-radius: 4px; font-size: 13px; margin-bottom: 4px; word-break: break-all; font-family: monospace;" id="remote-container-name">coder-taskid</code>
+            <button class="btn-secondary btn-small" id="copy-container-name">Copy</button>
+          </div>
+          <p style="margin: 4px 0; font-size: 13px; color: var(--color-text-secondary);">
+            Right-click the container → <strong>Attach Visual Studio Code</strong>
+          </p>
+        </div>
+        <div class="modal-section" style="background: var(--color-bg-secondary); padding: 12px; border-radius: 4px;">
+          <p style="margin: 0; font-size: 13px; color: var(--color-text-secondary);">
+            <strong>Note:</strong> This manual process is required for remote containers. Direct launch via URL is not supported by VS Code for remote Docker hosts.
+          </p>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn-primary" id="close-vscode-remote-info-btn">Got It</button>
+      </div>
+    </div>
+  </div>
+  <!-- Discard File Modal -->
+  <div id="discard-file-modal" class="modal" hidden>
+    <div class="modal-overlay"></div>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2>Discard Changes</h2>
+        <button class="modal-close" id="close-discard-file-modal">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div class="modal-section">
+          <p id="discard-file-message">Discard changes to <strong id="discard-file-name"></strong>?</p>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn-ghost" id="cancel-discard-file">Cancel</button>
+        <button class="btn-danger" id="confirm-discard-file">Discard</button>
+      </div>
+    </div>
+  </div>
+  <!-- Image Editor Modal -->
+  <div id="image-editor-modal" class="modal modal-fullscreen" hidden>
+    <div class="modal-overlay"></div>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2>Edit Image</h2>
+        <button type="button" class="modal-close" id="image-editor-close" aria-label="Close">&times;</button>
+      </div>
+      <div class="modal-body" style="padding: 0; overflow: hidden;">
+        <div id="image-editor-container"></div>
+      </div>
+      <div class="modal-actions">
+        <button type="button" id="image-editor-cancel" class="btn-secondary">Cancel</button>
+        <button type="button" id="image-editor-save" class="btn-primary">Save</button>
+      </div>
+    </div>
+  </div>
+  <!-- Compare Variants Modal -->
+  <div id="compare-modal" class="modal modal-xl" hidden>
+    <div class="modal-overlay"></div>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2>Compare Variants</h2>
+        <div class="header-actions">
+          <button type="button" class="btn-ghost btn-small icon-btn" id="maximize-compare-modal" title="Maximize">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+            </svg>
+          </button>
+          <button class="modal-close" id="close-compare-modal" title="Close">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+      </div>
+      <div class="modal-body">
+        <div class="compare-table-wrapper">
+          <table class="compare-table" id="compare-table">
+            <!-- Populated dynamically -->
+            <thead>
+              <tr id="compare-header-row">
+                <th></th>
+                <!-- Agent columns appended here -->
+              </tr>
+            </thead>
+            <tbody id="compare-body">
+              <!-- Data rows appended here -->
+            </tbody>
+          </table>
+        </div>
+        <!-- Side-by-Side Diff Panel (hidden by default) -->
+        <div id="side-by-side-diff-panel" class="side-by-side-diff-panel" hidden>
+          <div class="side-by-side-diff-header">
+            <h3>Code Changes</h3>
+            <div class="side-by-side-controls">
+              <select id="side-by-side-file-select" class="side-by-side-file-select">
+                <option value="">Select a file...</option>
+              </select>
+              <button class="btn-ghost btn-small" id="close-side-by-side" title="Close">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <line x1="18" y1="6" x2="6" y2="18"></line>
+                  <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div id="side-by-side-diff-content" class="side-by-side-diff-content">
+            <!-- Populated dynamically -->
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer" style="justify-content: space-between;">
+        <div class="auto-select-group">
+          <span class="label">Auto-Select Winner:</span>
+          <button class="btn-secondary btn-small" id="auto-select-ai" title="Let AI judge and recommend best solution">
+            <span class="icon">🧠</span> AI Judging...
+          </button>
+          <button class="btn-ghost btn-small" id="auto-select-algo" title="Quick selection based on: Completed + Changed Code + Least Lines Changed">
+            <span class="icon">⚡</span> Algorithmic
+          </button>
+        </div>
+        <button class="btn-primary" id="close-compare-modal-btn">Done</button>
+      </div>
+    </div>
+  </div>
+  <!-- AI Analysis Modal - Enhanced UI/UX -->
+  <div id="ai-analysis-modal" class="modal" hidden>
+    <div class="modal-overlay"></div>
+    <div class="modal-content ai-analysis-content">
+      <div class="modal-header ai-analysis-header">
+        <div class="ai-analysis-title-group">
+          <div class="ai-analysis-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M6 6h12"></path>
+              <path d="M12 6v12"></path>
+              <path d="M8 18h8"></path>
+              <path d="M6 6l-3 5h6l-3-5z"></path>
+              <path d="M18 6l-3 5h6l-3-5z"></path>
+            </svg>
+          </div>
+          <div>
+            <h2>AI Judging</h2>
+            <p class="ai-analysis-subtitle" id="ai-analysis-subtitle">Compare variants with AI-powered analysis</p>
+          </div>
+        </div>
+        <div class="header-actions">
+          <button class="btn-icon keyboard-hint-btn" id="keyboard-hint" title="Keyboard shortcuts (?)">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect>
+              <path d="M6 8h.001M10 8h.001M14 8h.001M18 8h.001M8 12h.001M12 12h.001M16 12h.001M6 16h8"></path>
+            </svg>
+          </button>
+          <button type="button" class="btn-ghost btn-small icon-btn" id="maximize-ai-analysis-modal" title="Maximize (M)">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+            </svg>
+          </button>
+          <button class="modal-close" id="close-ai-analysis-modal" title="Close (Esc)">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+      </div>
+      <!-- Tabbed Navigation -->
+      <div class="ai-analysis-tabs" role="tablist">
+        <button class="ai-analysis-tab active" data-tab="launch" role="tab" aria-selected="true" aria-controls="tab-launch">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polygon points="5 3 19 12 5 21 5 3"></polygon>
+          </svg>
+          <span class="tab-label">Launch</span>
+        </button>
+        <button class="ai-analysis-tab" data-tab="history" role="tab" aria-selected="false" aria-controls="tab-history">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10"></circle>
+            <polyline points="12 6 12 12 16 14"></polyline>
+          </svg>
+          <span class="tab-label">History</span>
+          <span class="tab-badge" id="history-count-badge" hidden>0</span>
+        </button>
+        <div class="tab-divider"></div>
+        <button class="ai-analysis-tab" data-tab="recommendation" role="tab" aria-selected="false" aria-controls="tab-recommendation" disabled id="recommendation-tab">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+            <polyline points="14 2 14 8 20 8"></polyline>
+            <line x1="16" y1="13" x2="8" y2="13"></line>
+            <line x1="16" y1="17" x2="8" y2="17"></line>
+          </svg>
+          <span class="tab-label">Recommendation</span>
+        </button>
+        <button class="ai-analysis-tab" data-tab="feedback" role="tab" aria-selected="false" aria-controls="tab-feedback" disabled id="feedback-tab">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+          </svg>
+          <span class="tab-label">Feedback</span>
+          <span class="tab-badge feedback-badge" id="feedback-count-badge" hidden>0</span>
+        </button>
+      </div>
+      <div class="modal-body ai-analysis-body">
+        <!-- Tab Panel: Launch -->
+        <div class="ai-analysis-panel active" id="tab-launch" role="tabpanel">
+          <!-- Quick Status Summary -->
+          <div class="judge-quick-summary" id="judge-quick-summary">
+            <div class="quick-summary-card" data-status="ready">
+              <div class="summary-icon">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                  <polyline points="22 4 12 14.01 9 11.01"></polyline>
+                </svg>
+              </div>
+              <div class="summary-content">
+                <span class="summary-value" id="eligible-variants-count">0</span>
+                <span class="summary-label">Eligible Variants</span>
+              </div>
+            </div>
+            <div class="quick-summary-card" data-status="running">
+              <div class="summary-icon">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <circle cx="12" cy="12" r="10"></circle>
+                  <polyline points="12 6 12 12 16 14"></polyline>
+                </svg>
+              </div>
+              <div class="summary-content">
+                <span class="summary-value" id="running-judges-count">0</span>
+                <span class="summary-label">Running Judges</span>
+              </div>
+            </div>
+            <div class="quick-summary-card" data-status="completed">
+              <div class="summary-icon">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
+                  <path d="M9 12l2 2 4-4"></path>
+                </svg>
+              </div>
+              <div class="summary-content">
+                <span class="summary-value" id="completed-judges-count">0</span>
+                <span class="summary-label">Completed Judges</span>
+              </div>
+            </div>
+          </div>
+          <!-- Judge Agent Selection - Enhanced Cards -->
+          <div class="ai-analysis-section">
+            <label class="section-label">Choose Your Judge</label>
+            <div class="judge-agent-selector" id="judge-agent-selector">
+              <button class="judge-agent-btn selected" data-agent="claude" title="Claude - Anthropic's AI Assistant">
+                <div class="agent-card-glow"></div>
+                <span class="judge-agent-icon">
+                  <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                    <path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 4.212z"/>
+                  </svg>
+                </span>
+                <span class="judge-agent-name">Claude</span>
+                <span class="judge-agent-desc">Anthropic</span>
+                <span class="agent-selection-indicator">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+                    <polyline points="20 6 9 17 4 12"></polyline>
+                  </svg>
+                </span>
+              </button>
+              <button class="judge-agent-btn" data-agent="codex" title="Codex - OpenAI's Code Model">
+                <div class="agent-card-glow"></div>
+                <span class="judge-agent-icon">
+                  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                    <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"/>
+                  </svg>
+                </span>
+                <span class="judge-agent-name">Codex</span>
+                <span class="judge-agent-desc">OpenAI</span>
+                <span class="agent-selection-indicator">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+                    <polyline points="20 6 9 17 4 12"></polyline>
+                  </svg>
+                </span>
+              </button>
+              <button class="judge-agent-btn" data-agent="gemini" title="Gemini - Google's AI Model">
+                <div class="agent-card-glow"></div>
+                <span class="judge-agent-icon">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M12 2L9.09 9.09 2 12l7.09 2.91L12 22l2.91-7.09L22 12l-7.09-2.91z"></path>
+                  </svg>
+                </span>
+                <span class="judge-agent-name">Gemini</span>
+                <span class="judge-agent-desc">Google</span>
+                <span class="agent-selection-indicator">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+                    <polyline points="20 6 9 17 4 12"></polyline>
+                  </svg>
+                </span>
+              </button>
+            </div>
+          </div>
+          <!-- Launch Action Area -->
+          <div class="judge-launch-area">
+            <div class="launch-info" id="launch-info">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="10"></circle>
+                <path d="M12 16v-4"></path>
+                <path d="M12 8h.01"></path>
+              </svg>
+              <span>The judge will analyze and compare all eligible variants</span>
+            </div>
+            <button class="btn-primary btn-large judge-launch-btn" id="submit-judge-task" disabled>
+              <span class="btn-spinner">
+                <svg class="spinner" viewBox="0 0 24 24" width="18" height="18">
+                  <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="3" stroke-dasharray="31.4 31.4" stroke-linecap="round"/>
+                </svg>
+              </span>
+              <span class="btn-icon">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <polygon points="5 3 19 12 5 21 5 3"></polygon>
+                </svg>
+              </span>
+              <span class="btn-text">Launch Judge</span>
+              <span class="btn-text-loading">Launching...</span>
+            </button>
+          </div>
+        </div>
+        <!-- Tab Panel: History -->
+        <div class="ai-analysis-panel" id="tab-history" role="tabpanel" hidden>
+          <div class="previous-judgments-container" id="previous-judgments-container">
+            <div class="previous-judgments-empty" id="previous-judgments-empty">
+              <div class="empty-state-icon">
+                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                  <circle cx="12" cy="12" r="10"></circle>
+                  <polyline points="12 6 12 12 16 14"></polyline>
+                </svg>
+              </div>
+              <h3>No Previous Judgments</h3>
+              <p>Launch a judge from the Launch tab to get started</p>
+            </div>
+            <!-- Timeline-style judgment history -->
+            <div class="judgment-timeline" id="judgment-timeline" hidden>
+              <!-- Populated dynamically -->
+            </div>
+          </div>
+        </div>
+        <!-- Tab Panel: Recommendation -->
+        <div class="ai-analysis-panel" id="tab-recommendation" role="tabpanel" hidden>
+          <!-- Quick Action Bar -->
+          <div class="judgment-quick-actions" id="judgment-quick-actions">
+            <div class="quick-action-info">
+              <span class="quick-action-judge" id="quick-action-judge-name"></span>
+              <span class="quick-action-separator">recommended</span>
+              <span class="quick-action-winner" id="quick-action-winner-name"></span>
+            </div>
+            <div class="quick-action-buttons">
+              <button class="btn-primary btn-small" id="quick-action-apply" title="Apply Winner">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <polyline points="20 6 9 17 4 12"></polyline>
+                </svg>
+                Apply Winner
+              </button>
+            </div>
+          </div>
+          <!-- Recommendation Preview -->
+          <div class="judgment-preview-section" id="judgment-preview-section">
+            <div class="judgment-preview-header">
+              <div class="preview-header-left">
+                <label class="section-label">Analysis</label>
+                <span class="preview-judge-info" id="preview-judge-info"></span>
+              </div>
+              <button type="button" class="btn-ghost btn-small icon-btn" id="maximize-judgment-preview" title="Fullscreen">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <polyline points="15 3 21 3 21 9"></polyline>
+                  <polyline points="9 21 3 21 3 15"></polyline>
+                  <line x1="21" y1="3" x2="14" y2="10"></line>
+                  <line x1="3" y1="21" x2="10" y2="14"></line>
+                </svg>
+              </button>
+            </div>
+            <div class="judgment-preview" id="judgment-preview">
+              <div class="preview-placeholder">
+                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                  <polyline points="14 2 14 8 20 8"></polyline>
+                </svg>
+                <p>Select a judgment from History to view the recommendation</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Tab Panel: Feedback -->
+        <div class="ai-analysis-panel" id="tab-feedback" role="tabpanel" hidden>
+          <div class="feedback-panel-header">
+            <div class="feedback-header-info">
+              <h3>Improvement Feedback</h3>
+              <p class="feedback-description">Suggestions from the judge for each variant</p>
+            </div>
+            <button class="btn-ghost btn-small" id="expand-all-feedback">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="7 13 12 18 17 13"></polyline>
+                <polyline points="7 6 12 11 17 6"></polyline>
+              </svg>
+              Expand All
+            </button>
+          </div>
+          <div class="variant-feedback-section" id="variant-feedback-section">
+            <div class="variant-feedback-list" id="variant-feedback-list">
+              <!-- Populated dynamically when a judgment with feedback is selected -->
+            </div>
+            <div class="feedback-empty-state" id="feedback-empty-state">
+              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+              </svg>
+              <p>No feedback available for this judgment</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer ai-analysis-footer">
+        <div class="footer-left">
+          <span class="footer-hint" id="footer-hint">Press <kbd>?</kbd> for keyboard shortcuts</span>
+        </div>
+        <div class="footer-right">
+          <button class="btn-ghost" id="cancel-ai-analysis">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Keyboard Shortcuts Modal -->
+  <div class="modal keyboard-shortcuts-modal" id="keyboard-shortcuts-modal" hidden>
+    <div class="modal-overlay"></div>
+    <div class="modal-content modal-small">
+      <div class="modal-header">
+        <h3>Keyboard Shortcuts</h3>
+        <button class="modal-close" id="close-shortcuts-modal">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div class="shortcuts-list">
+          <div class="shortcut-group">
+            <h4>Navigation</h4>
+            <div class="shortcut-item"><kbd>1</kbd> <span>Launch tab</span></div>
+            <div class="shortcut-item"><kbd>2</kbd> <span>History tab</span></div>
+            <div class="shortcut-item"><kbd>3</kbd> <span>Recommendation tab</span></div>
+            <div class="shortcut-item"><kbd>4</kbd> <span>Feedback tab</span></div>
+          </div>
+          <div class="shortcut-group">
+            <h4>Actions</h4>
+            <div class="shortcut-item"><kbd>J</kbd> <span>Launch judge</span></div>
+            <div class="shortcut-item"><kbd>A</kbd> <span>Apply winner</span></div>
+            <div class="shortcut-item"><kbd>M</kbd> <span>Maximize/Restore</span></div>
+          </div>
+          <div class="shortcut-group">
+            <h4>Agent Selection</h4>
+            <div class="shortcut-item"><kbd>C</kbd> <span>Select Claude</span></div>
+            <div class="shortcut-item"><kbd>O</kbd> <span>Select Codex</span></div>
+            <div class="shortcut-item"><kbd>G</kbd> <span>Select Gemini</span></div>
+          </div>
+          <div class="shortcut-group">
+            <h4>General</h4>
+            <div class="shortcut-item"><kbd>?</kbd> <kbd>F1</kbd> <span>Show this help</span></div>
+            <div class="shortcut-item"><kbd>Esc</kbd> <span>Close dialog</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Send Feedback as Follow-up Confirmation Modal -->
+  <div class="modal" id="send-feedback-modal" hidden>
+    <div class="modal-overlay"></div>
+    <div class="modal-content modal-medium">
+      <div class="modal-header">
+        <h2>Send Improvement Feedback</h2>
+        <button class="modal-close" id="close-send-feedback-modal">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div class="send-feedback-info">
+          <p>Edit the feedback below before sending as a follow-up to <strong id="send-feedback-variant-name">this variant</strong>:</p>
+        </div>
+        <div class="send-feedback-editor-container">
+          <div id="send-feedback-editor"></div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn-ghost" id="cancel-send-feedback">Cancel</button>
+        <button class="btn-primary" id="confirm-send-feedback">
+          <span class="btn-spinner">
+            <svg class="spinner" viewBox="0 0 24 24" width="16" height="16">
+              <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="3" stroke-dasharray="31.4 31.4" stroke-linecap="round"/>
+            </svg>
+          </span>
+          <span class="btn-text">Send as Follow-up</span>
+          <span class="btn-text-loading">Sending...</span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <button type="button" id="scroll-to-top" class="scroll-to-top" title="Back to top" aria-label="Back to top">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M12 19V5"></path>
+      <polyline points="6 11 12 5 18 11"></polyline>
+    </svg>
+    <span class="scroll-to-top-label">Top</span>
+  </button>
+  <!-- Global Keyboard Shortcuts Modal -->
+  <div class="modal global-shortcuts-modal" id="global-shortcuts-modal" hidden>
+    <div class="modal-overlay"></div>
+    <div class="modal-content" tabindex="-1">
+      <div class="modal-header">
+        <h3>
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: -3px; margin-right: 8px;">
+            <rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect>
+            <path d="M6 8h.001M10 8h.001M14 8h.001M18 8h.001M8 12h.001M12 12h.001M16 12h.001M6 16h8"></path>
+          </svg>
+          Keyboard Shortcuts
+        </h3>
+        <button class="modal-close" id="close-global-shortcuts-modal" title="Close (Esc)">&times;</button>
+      </div>
+      <div class="modal-body global-shortcuts-body">
+        <div class="shortcuts-grid">
+          <!-- Navigation Section -->
+          <div class="shortcut-group">
+            <h4>Navigation</h4>
+            <div class="shortcut-item"><kbd>1</kbd> - <kbd>6</kbd> <span>Jump to section</span></div>
+            <div class="shortcut-item"><kbd>T</kbd> <span>Jump to top</span></div>
+            <div class="shortcut-item"><kbd>/</kbd> <span>Search activity</span></div>
+            <div class="shortcut-item"><kbd>←</kbd> <kbd>→</kbd> <span>Switch variant</span></div>
+            <div class="shortcut-item"><kbd>Backspace</kbd> <span>Back to tasks</span></div>
+          </div>
+          <!-- Actions Section -->
+          <div class="shortcut-group">
+            <h4>Actions</h4>
+            <div class="shortcut-item"><kbd>A</kbd> <span>Approve changes</span></div>
+            <div class="shortcut-item"><kbd>N</kbd> <span>New task / Resubmit</span></div>
+            <div class="shortcut-item"><kbd>P</kbd> <span>Pin / Unpin</span></div>
+            <div class="shortcut-item"><kbd>Del</kbd> <span>Delete task</span></div>
+            <div class="shortcut-item"><kbd>J</kbd> <span>Judge variants</span></div>
+            <div class="shortcut-item"><kbd>R</kbd> <span>Reply to agent</span></div>
+          </div>
+          <!-- Help Section -->
+          <div class="shortcut-group">
+            <h4>General</h4>
+            <div class="shortcut-item"><kbd>?</kbd> <kbd>F1</kbd> <span>Show this help</span></div>
+            <div class="shortcut-item"><kbd>Esc</kbd> <span>Close modal</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>