@vpxa/aikit 0.1.164 → 0.1.166

package/packages/server/viewers/task-plan-static.html

@@ -4,69 +4,120 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>AI Kit - Task Plan Static Viewer</title>
-  <style>
+  <style id="viewer-style">
     :root {
-      --dt-bg-primary: #020617;
-      --dt-bg-surface: #0f172a;
-      --dt-text-primary: #f8fafc;
-      --dt-text-secondary: #94a3b8;
-      --dt-border: #334155;
-      --dt-cyan: #06b6d4;
-      --dt-emerald: #10b981;
-      --dt-violet: #8b5cf6;
-      --dt-amber: #f59e0b;
-      --dt-rose: #f43f5e;
-      --dt-slate: #64748b;
-      --dt-grid: #1e293b;
-      --dt-shadow: rgba(2, 6, 23, 0.38);
-      --dt-toolbar-bg: rgba(15, 23, 42, 0.82);
-      --dt-button-bg: rgba(15, 23, 42, 0.88);
-      --dt-button-hover: rgba(30, 41, 59, 0.95);
-      --dt-panel-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.98));
-      --dt-badge-bg: rgba(15, 23, 42, 0.88);
-      --dt-node-fill: rgba(15, 23, 42, 0.92);
-      --tp-indigo: #6366f1;
-      --tp-pink: #ec4899;
-      --tp-orange: #f97316;
-      --tp-teal: #14b8a6;
-      --tp-purple: #a855f7;
-      --tp-blue: #3b82f6;
-      --tp-green: #22c55e;
-      --tp-red: #ef4444;
-      --tp-gray: #94a3b8;
+      --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+      --font-mono: "JetBrains Mono", "Geist Mono", "Fira Code", "SF Mono", Consolas, monospace;
+
+      --space-1: 4px;
+      --space-2: 8px;
+      --space-3: 12px;
+      --space-4: 16px;
+      --space-5: 20px;
+      --space-6: 24px;
+      --space-8: 32px;
+      --space-10: 40px;
+      --space-12: 48px;
+
+      --radius-sm: 10px;
+      --radius-md: 14px;
+      --radius-xl: 22px;
+      --radius-pill: 999px;
+
+      --tp-agent-researcher: #818cf8;
+      --tp-agent-implementer: #34d399;
+      --tp-agent-frontend: #f472b6;
+      --tp-agent-reviewer: #fbbf24;
+      --tp-agent-debugger: #f87171;
+      --tp-agent-security: #fb923c;
+      --tp-agent-explorer: #22d3ee;
+      --tp-agent-documenter: #a78bfa;
+      --tp-agent-refactor: #2dd4bf;
+      --tp-agent-planner: #c084fc;
+      --tp-agent-orchestrator: #94a3b8;
+
+      --tp-status-pending: #94a3b8;
+      --tp-status-in-progress: #60a5fa;
+      --tp-status-done: #34d399;
+      --tp-status-blocked: #f87171;
+
+      --tp-phase-1: #06b6d4;
+      --tp-phase-2: #6366f1;
+      --tp-phase-3: #f59e0b;
+      --tp-phase-4: #ec4899;
+      --tp-phase-5: #14b8a6;
+      --tp-phase-6: #8b5cf6;
+
+      --viewer-bg: #020617;
+      --viewer-surface: #0f172a;
+      --viewer-surface-2: #111c32;
+      --viewer-card: rgba(15, 23, 42, 0.92);
+      --viewer-card-strong: rgba(20, 31, 56, 0.98);
+      --viewer-toolbar: rgba(8, 15, 31, 0.84);
+      --viewer-text: #f8fafc;
+      --viewer-text-muted: #94a3b8;
+      --viewer-text-dim: #64748b;
+      --viewer-border: rgba(148, 163, 184, 0.22);
+      --viewer-border-strong: rgba(148, 163, 184, 0.34);
+      --viewer-shadow: 0 30px 70px rgba(2, 6, 23, 0.42);
+      --viewer-grid: rgba(51, 65, 85, 0.38);
+      --viewer-badge-bg: rgba(15, 23, 42, 0.88);
+      --viewer-button-bg: rgba(15, 23, 42, 0.78);
+      --viewer-button-hover: rgba(30, 41, 59, 0.96);
+      --viewer-button-active: rgba(37, 99, 235, 0.14);
+      --viewer-empty-bg: rgba(15, 23, 42, 0.72);
+      --viewer-toast-bg: rgba(127, 29, 29, 0.92);
+      --viewer-toast-border: rgba(248, 113, 113, 0.55);
+      --viewer-backdrop: radial-gradient(circle at top left, rgba(6, 182, 212, 0.14), transparent 24%), radial-gradient(circle at bottom right, rgba(139, 92, 246, 0.12), transparent 28%), linear-gradient(180deg, rgba(15, 23, 42, 0.2), rgba(2, 6, 23, 0));
     }
 
     [data-theme="light"] {
-      --dt-bg-primary: #ffffff;
-      --dt-bg-surface: #f8fafc;
-      --dt-text-primary: #0f172a;
-      --dt-text-secondary: #64748b;
-      --dt-border: #e2e8f0;
-      --dt-grid: rgba(148, 163, 184, 0.12);
-      --dt-shadow: rgba(148, 163, 184, 0.24);
-      --dt-toolbar-bg: rgba(255, 255, 255, 0.88);
-      --dt-button-bg: rgba(248, 250, 252, 0.96);
-      --dt-button-hover: rgba(226, 232, 240, 0.96);
-      --dt-panel-bg: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 1));
-      --dt-badge-bg: rgba(255, 255, 255, 0.9);
-      --dt-node-fill: rgba(255, 255, 255, 0.96);
+      --viewer-bg: #ffffff;
+      --viewer-surface: #f8fafc;
+      --viewer-surface-2: #eef4fb;
+      --viewer-card: rgba(255, 255, 255, 0.96);
+      --viewer-card-strong: rgba(248, 250, 252, 0.98);
+      --viewer-toolbar: rgba(255, 255, 255, 0.9);
+      --viewer-text: #0f172a;
+      --viewer-text-muted: #475569;
+      --viewer-text-dim: #64748b;
+      --viewer-border: rgba(148, 163, 184, 0.28);
+      --viewer-border-strong: rgba(100, 116, 139, 0.36);
+      --viewer-shadow: 0 22px 48px rgba(148, 163, 184, 0.2);
+      --viewer-grid: rgba(203, 213, 225, 0.55);
+      --viewer-badge-bg: rgba(255, 255, 255, 0.92);
+      --viewer-button-bg: rgba(255, 255, 255, 0.78);
+      --viewer-button-hover: rgba(241, 245, 249, 0.98);
+      --viewer-button-active: rgba(59, 130, 246, 0.1);
+      --viewer-empty-bg: rgba(255, 255, 255, 0.82);
+      --viewer-toast-bg: rgba(254, 242, 242, 0.96);
+      --viewer-toast-border: rgba(248, 113, 113, 0.42);
+      --viewer-backdrop: radial-gradient(circle at top left, rgba(99, 102, 241, 0.08), transparent 24%), radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.08), transparent 28%), linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(248, 250, 252, 0));
     }
 
     @media (prefers-color-scheme: light) {
       :root:not([data-theme="dark"]) {
-        --dt-bg-primary: #ffffff;
-        --dt-bg-surface: #f8fafc;
-        --dt-text-primary: #0f172a;
-        --dt-text-secondary: #64748b;
-        --dt-border: #e2e8f0;
-        --dt-grid: rgba(148, 163, 184, 0.12);
-        --dt-shadow: rgba(148, 163, 184, 0.24);
-        --dt-toolbar-bg: rgba(255, 255, 255, 0.88);
-        --dt-button-bg: rgba(248, 250, 252, 0.96);
-        --dt-button-hover: rgba(226, 232, 240, 0.96);
-        --dt-panel-bg: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 1));
-        --dt-badge-bg: rgba(255, 255, 255, 0.9);
-        --dt-node-fill: rgba(255, 255, 255, 0.96);
+        --viewer-bg: #ffffff;
+        --viewer-surface: #f8fafc;
+        --viewer-surface-2: #eef4fb;
+        --viewer-card: rgba(255, 255, 255, 0.96);
+        --viewer-card-strong: rgba(248, 250, 252, 0.98);
+        --viewer-toolbar: rgba(255, 255, 255, 0.9);
+        --viewer-text: #0f172a;
+        --viewer-text-muted: #475569;
+        --viewer-text-dim: #64748b;
+        --viewer-border: rgba(148, 163, 184, 0.28);
+        --viewer-border-strong: rgba(100, 116, 139, 0.36);
+        --viewer-shadow: 0 22px 48px rgba(148, 163, 184, 0.2);
+        --viewer-grid: rgba(203, 213, 225, 0.55);
+        --viewer-badge-bg: rgba(255, 255, 255, 0.92);
+        --viewer-button-bg: rgba(255, 255, 255, 0.78);
+        --viewer-button-hover: rgba(241, 245, 249, 0.98);
+        --viewer-button-active: rgba(59, 130, 246, 0.1);
+        --viewer-empty-bg: rgba(255, 255, 255, 0.82);
+        --viewer-toast-bg: rgba(254, 242, 242, 0.96);
+        --viewer-toast-border: rgba(248, 113, 113, 0.42);
+        --viewer-backdrop: radial-gradient(circle at top left, rgba(99, 102, 241, 0.08), transparent 24%), radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.08), transparent 28%), linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(248, 250, 252, 0));
       }
     }
 
@@ -76,998 +127,1325 @@
 
     html,
     body {
-      height: 100%;
+      min-height: 100%;
       margin: 0;
     }
 
     body {
-      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      color: var(--dt-text-primary);
-      background:
-        radial-gradient(circle at top left, rgba(99, 102, 241, 0.13), transparent 28%),
-        radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.12), transparent 28%),
-        var(--dt-bg-primary);
+      overflow: hidden;
+      font-family: var(--font-sans);
+      color: var(--viewer-text);
+      background: var(--viewer-backdrop), var(--viewer-bg);
     }
 
-    .shell {
-      min-height: 100%;
+    button {
+      appearance: none;
+      border: 1px solid var(--viewer-border);
+      border-radius: var(--radius-pill);
+      background: var(--viewer-button-bg);
+      color: var(--viewer-text);
+      cursor: pointer;
+      font: inherit;
+      font-size: 13px;
+      font-weight: 600;
+      line-height: 1;
+      padding: 12px 16px;
+      transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease;
+    }
+
+    button:hover,
+    button:focus-visible {
+      outline: none;
+      transform: translateY(-1px);
+      border-color: var(--viewer-border-strong);
+      background: var(--viewer-button-hover);
+    }
+
+    button:focus-visible {
+      box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
+    }
+
+    .viewer-shell {
+      min-height: 100vh;
       display: grid;
       grid-template-rows: auto 1fr;
     }
 
-    .toolbar {
+    .viewer-toolbar {
       position: sticky;
       top: 0;
-      z-index: 2;
+      z-index: 10;
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       justify-content: space-between;
-      gap: 1rem;
-      padding: 1rem 1.25rem;
-      border-bottom: 1px solid var(--dt-border);
-      background: var(--dt-toolbar-bg);
-      backdrop-filter: blur(16px);
+      gap: var(--space-4);
+      padding: var(--space-5) var(--space-6);
+      border-bottom: 1px solid var(--viewer-border);
+      background: var(--viewer-toolbar);
+      backdrop-filter: blur(18px);
+    }
+
+    .viewer-title {
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
     }
 
-    .title h1 {
+    .viewer-title__eyebrow {
+      color: var(--viewer-text-dim);
+      font-family: var(--font-mono);
+      font-size: 11px;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+    }
+
+    .viewer-title h1 {
       margin: 0;
-      font-size: 1rem;
-      font-weight: 700;
-      letter-spacing: 0.02em;
+      font-size: clamp(20px, 2.6vw, 30px);
+      font-weight: 600;
+      letter-spacing: -0.03em;
+      line-height: 1.05;
     }
 
-    .title p {
-      margin: 0.2rem 0 0;
-      font-size: 0.82rem;
-      color: var(--dt-text-secondary);
+    .viewer-title p {
+      max-width: 76ch;
+      margin: 0;
+      color: var(--viewer-text-muted);
+      font-size: 14px;
+      line-height: 1.55;
     }
 
-    .actions {
+    .viewer-actions {
       display: flex;
       flex-wrap: wrap;
       justify-content: flex-end;
-      gap: 0.6rem;
+      gap: var(--space-2);
+      padding-top: 2px;
     }
 
-    button {
-      appearance: none;
-      border: 1px solid var(--dt-border);
-      background: var(--dt-button-bg);
-      color: var(--dt-text-primary);
+    .viewer-stage {
+      overflow: auto;
+      padding: var(--space-6);
+    }
+
+    .task-plan__shell {
+      position: relative;
+      max-width: 1280px;
+      margin: 0 auto;
+    }
+
+    .task-plan__surface {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-6);
+      min-height: calc(100vh - 180px);
+      padding: clamp(18px, 2vw, 28px);
+      border: 1px solid var(--viewer-border);
+      border-radius: calc(var(--radius-xl) + 4px);
+      background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 28%),
+        linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), var(--viewer-grid) calc(100% - 1px), var(--viewer-grid) 100%),
+        var(--viewer-card-strong);
+      box-shadow: var(--viewer-shadow);
+      isolation: isolate;
+    }
+
+    .task-plan__pipeline {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+
+    .task-plan__phase-block {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+
+    .task-plan-phase {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .task-plan-phase__content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-4);
+      padding: clamp(18px, 2vw, 24px);
+      border: 1px solid var(--viewer-border);
+      border-left: 4px solid var(--phase-accent);
+      border-radius: var(--radius-xl);
+      background:
+        linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 34%),
+        linear-gradient(180deg, rgba(2, 6, 23, 0.05), transparent 44%),
+        var(--viewer-card);
+    }
+
+    .task-plan-phase__header {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+    }
+
+    .task-plan-phase__number {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 34px;
+      height: 34px;
+      border: 1px solid color-mix(in srgb, var(--phase-accent), var(--viewer-border) 45%);
       border-radius: 999px;
-      padding: 0.7rem 1rem;
-      font: inherit;
-      cursor: pointer;
-      transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
+      background: color-mix(in srgb, var(--phase-accent), transparent 88%);
+      color: var(--phase-accent);
+      font-family: var(--font-mono);
+      font-size: 12px;
+      font-weight: 700;
+      flex-shrink: 0;
     }
 
-    button:hover {
-      background: var(--dt-button-hover);
-      transform: translateY(-1px);
+    .task-plan-phase__label {
+      flex: 1;
+      min-width: 0;
+      margin: 0;
+      color: var(--viewer-text);
+      font-size: clamp(18px, 2vw, 22px);
+      font-weight: 600;
+      letter-spacing: -0.02em;
+      line-height: 1.2;
+    }
+
+    .task-plan-phase__badge {
+      flex-shrink: 0;
+      border: 1px solid var(--viewer-border);
+      border-radius: var(--radius-pill);
+      background: color-mix(in srgb, var(--phase-accent), transparent 92%);
+      color: var(--viewer-text-dim);
+      font-family: var(--font-mono);
+      font-size: 11px;
+      letter-spacing: 0.08em;
+      padding: 7px 10px;
+      text-transform: uppercase;
+      white-space: nowrap;
     }
 
-    .stage {
-      padding: 1rem;
+    .task-plan-phase__outcome {
+      margin: 0;
+      padding-bottom: var(--space-4);
+      border-bottom: 1px solid rgba(148, 163, 184, 0.14);
+      color: var(--viewer-text-muted);
+      font-size: 14px;
+      line-height: 1.6;
     }
 
-    .canvas-shell {
+    .task-plan-phase__batches {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-4);
+    }
+
+    .task-plan-batch {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .task-plan-batch + .task-plan-batch {
+      margin-top: 2px;
+      padding-top: var(--space-4);
+      border-top: 1px dashed rgba(148, 163, 184, 0.2);
+    }
+
+    .task-plan-batch__label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--viewer-text-dim);
+      font-family: var(--font-mono);
+      font-size: 11px;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+
+    .task-plan-batch__icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
+      border-radius: 999px;
+      background: rgba(148, 163, 184, 0.12);
+      color: var(--viewer-text-muted);
+      font-size: 12px;
+      line-height: 1;
+    }
+
+    .task-plan-batch__tasks {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 12px;
+      width: 100%;
+    }
+
+    .task-plan-batch__tasks--parallel {
+      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    }
+
+    .task-plan-batch__tasks--sequential-compact {
+      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    }
+
+    .task-plan-task {
       position: relative;
-      min-height: calc(100vh - 5.5rem);
-      border: 1px solid var(--dt-border);
-      border-radius: 24px;
-      background:
-        linear-gradient(var(--dt-grid) 1px, transparent 1px),
-        linear-gradient(90deg, var(--dt-grid) 1px, transparent 1px),
-        var(--dt-panel-bg);
-      background-size: 40px 40px, 40px 40px, 100% 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      min-width: 0;
+      min-height: 148px;
+      padding: 16px 16px 16px 20px;
+      border: 1px solid var(--viewer-border);
+      border-radius: var(--radius-md);
+      background: color-mix(in srgb, var(--viewer-card), rgba(255, 255, 255, 0.02) 3%);
+      transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
+    }
+
+    .task-plan-task::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 4px;
+      border-radius: 4px 0 0 4px;
+      background: var(--card-accent);
+    }
+
+    .task-plan-task:hover {
+      transform: translateY(-1px);
+      border-color: color-mix(in srgb, var(--card-accent), var(--viewer-border) 44%);
+      box-shadow: 0 16px 28px rgba(2, 6, 23, 0.16);
+    }
+
+    .task-plan-task__topline {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+    }
+
+    .task-plan-task__agent {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      min-width: 0;
+      color: var(--card-accent);
+      font-family: var(--font-mono);
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+
+    .task-plan-task__agent-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 22px;
+      height: 22px;
+      border-radius: 999px;
+      background: color-mix(in srgb, var(--card-accent), transparent 82%);
+      font-size: 12px;
+      flex-shrink: 0;
+    }
+
+    .task-plan-task__agent-label {
       overflow: hidden;
-      box-shadow: 0 24px 60px var(--dt-shadow);
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
-    svg {
-      display: block;
-      width: 100%;
-      height: auto;
-      min-height: 600px;
+    .task-plan-task__status {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      flex-shrink: 0;
+      color: var(--status-color);
+      font-family: var(--font-mono);
+      font-size: 11px;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      white-space: nowrap;
+    }
+
+    .task-plan-task__status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 999px;
+      background: currentColor;
+      box-shadow: 0 0 0 4px color-mix(in srgb, currentColor, transparent 82%);
+      flex-shrink: 0;
+    }
+
+    .task-plan-task__status[data-status="in-progress"] .task-plan-task__status-dot {
+      animation: task-plan-pulse 2s ease-in-out infinite;
+    }
+
+    .task-plan-task__title {
+      color: var(--viewer-text);
+      font-size: 15px;
+      font-weight: 700;
+      line-height: 1.4;
+    }
+
+    .task-plan-task__description {
+      margin: 0;
+      color: var(--viewer-text-muted);
+      font-size: 13px;
+      line-height: 1.55;
+    }
+
+    .task-plan-task__meta {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: auto;
+    }
+
+    .task-plan-task__chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      max-width: 100%;
+      overflow: hidden;
+      border: 1px solid rgba(148, 163, 184, 0.2);
+      border-radius: var(--radius-pill);
+      background: color-mix(in srgb, var(--viewer-surface-2), transparent 16%);
+      color: var(--viewer-text-dim);
+      font-family: var(--font-mono);
+      font-size: 11px;
+      line-height: 1.1;
+      padding: 6px 10px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .task-plan__connector {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 46px;
+    }
+
+    .task-plan__connector::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 12px;
+      left: 50%;
+      width: 2px;
+      background: repeating-linear-gradient(180deg, var(--viewer-border-strong) 0, var(--viewer-border-strong) 6px, transparent 6px, transparent 12px);
+      transform: translateX(-50%);
     }
 
-    .empty-state {
+    .task-plan__connector::after {
+      content: "";
       position: absolute;
-      inset: 0;
-      display: none;
+      bottom: 0;
+      left: 50%;
+      width: 0;
+      height: 0;
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+      border-top: 9px solid var(--viewer-border-strong);
+      transform: translateX(-50%);
+    }
+
+    .task-plan__summary {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 18px 26px;
+      padding: 18px 20px;
+      border: 1px solid var(--viewer-border);
+      border-radius: var(--radius-xl);
+      background: color-mix(in srgb, var(--viewer-card), rgba(255, 255, 255, 0.02) 3%);
+    }
+
+    .task-plan-summary__stat {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      min-width: 78px;
+    }
+
+    .task-plan-summary__value {
+      color: var(--viewer-text);
+      font-size: 24px;
+      font-weight: 700;
+      letter-spacing: -0.03em;
+      line-height: 1;
+    }
+
+    .task-plan-summary__label {
+      color: var(--viewer-text-dim);
+      font-family: var(--font-mono);
+      font-size: 11px;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+
+    .task-plan__legend {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .task-plan__legend-title {
+      color: var(--viewer-text-dim);
+      font-family: var(--font-mono);
+      font-size: 11px;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+
+    .task-plan__legend-item {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      border: 1px solid var(--viewer-border);
+      border-radius: var(--radius-pill);
+      background: rgba(148, 163, 184, 0.08);
+      color: var(--viewer-text-muted);
+      font-size: 12px;
+      line-height: 1;
+    }
+
+    .task-plan__legend-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 999px;
+      flex-shrink: 0;
+    }
+
+    .task-plan__legend-icon {
+      opacity: 0.95;
+    }
+
+    .task-plan__empty {
+      display: grid;
       place-items: center;
-      padding: 2rem;
+      gap: 8px;
+      min-height: 320px;
+      padding: 48px 24px;
+      border: 1px dashed rgba(148, 163, 184, 0.3);
+      border-radius: var(--radius-xl);
+      background: var(--viewer-empty-bg);
+      color: var(--viewer-text-muted);
       text-align: center;
-      color: var(--dt-text-secondary);
     }
 
-    .empty-state.is-visible {
-      display: grid;
+    .task-plan__empty strong {
+      color: var(--viewer-text);
+      font-size: 16px;
     }
 
-    .empty-state strong {
-      display: block;
-      margin-bottom: 0.4rem;
-      color: var(--dt-text-primary);
-      font-size: 1rem;
+    .task-plan__empty span {
+      max-width: 56ch;
+      font-size: 14px;
+      line-height: 1.6;
+    }
+
+    .task-plan__export-error {
+      position: fixed;
+      left: 50%;
+      bottom: 24px;
+      z-index: 20;
+      transform: translateX(-50%);
+      max-width: min(92vw, 560px);
+      padding: 12px 16px;
+      border: 1px solid var(--viewer-toast-border);
+      border-radius: var(--radius-pill);
+      background: var(--viewer-toast-bg);
+      color: var(--viewer-text);
+      font-size: 13px;
+      line-height: 1.4;
+      box-shadow: 0 18px 32px rgba(15, 23, 42, 0.22);
     }
 
-    .badge {
+    .viewer-badge {
       position: fixed;
-      right: 1rem;
-      bottom: 1rem;
-      z-index: 3;
+      right: 16px;
+      bottom: 16px;
+      z-index: 12;
       display: inline-flex;
       align-items: center;
-      gap: 0.55rem;
-      padding: 0.55rem 0.8rem;
-      border: 1px solid var(--dt-border);
-      border-radius: 999px;
-      background: var(--dt-badge-bg);
-      color: var(--dt-text-secondary);
+      gap: 10px;
+      padding: 10px 14px;
+      border: 1px solid var(--viewer-border);
+      border-radius: var(--radius-pill);
+      background: var(--viewer-badge-bg);
+      color: var(--viewer-text-dim);
       backdrop-filter: blur(14px);
-      font-size: 0.74rem;
-      letter-spacing: 0.04em;
+      font-family: var(--font-mono);
+      font-size: 11px;
+      letter-spacing: 0.08em;
       text-transform: uppercase;
     }
 
-    .badge-mark {
-      width: 0.55rem;
-      height: 0.55rem;
+    .viewer-badge__mark {
+      width: 9px;
+      height: 9px;
       border-radius: 999px;
-      background: var(--tp-indigo);
-      box-shadow: 0 0 0 0.18rem rgba(99, 102, 241, 0.18);
+      background: var(--tp-phase-2);
+      box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18);
+    }
+
+    [hidden] {
+      display: none !important;
+    }
+
+    @keyframes task-plan-pulse {
+      0%,
+      100% {
+        opacity: 1;
+        box-shadow: 0 0 0 0 color-mix(in srgb, var(--tp-status-in-progress), transparent 58%);
+      }
+
+      50% {
+        opacity: 0.55;
+        box-shadow: 0 0 0 8px color-mix(in srgb, var(--tp-status-in-progress), transparent 100%);
+      }
+    }
+
+    @media (max-width: 960px) {
+      .viewer-toolbar {
+        flex-direction: column;
+      }
+
+      .viewer-actions {
+        justify-content: flex-start;
+      }
+
+      .viewer-stage {
+        padding: var(--space-4);
+      }
     }
 
     @media (max-width: 720px) {
-      .toolbar {
+      body {
+        overflow: auto;
+      }
+
+      .viewer-toolbar {
+        padding: var(--space-4);
+      }
+
+      .viewer-title h1 {
+        font-size: 22px;
+      }
+
+      .task-plan__surface {
+        min-height: 0;
+        padding: 16px;
+      }
+
+      .task-plan-phase__header,
+      .task-plan-task__topline {
         align-items: flex-start;
         flex-direction: column;
       }
 
-      .actions {
-        width: 100%;
-        justify-content: flex-start;
+      .task-plan-phase__badge,
+      .task-plan-task__status {
+        white-space: normal;
+      }
+
+      .task-plan__summary {
+        gap: 16px;
       }
 
-      .stage {
-        padding: 0.75rem;
+      .viewer-badge {
+        bottom: 12px;
+        right: 12px;
+        padding: 9px 12px;
       }
+    }
 
-      svg {
-        min-height: 500px;
+    @media (prefers-reduced-motion: reduce) {
+      *,
+      *::before,
+      *::after {
+        animation: none !important;
+        transition: none !important;
+        scroll-behavior: auto !important;
       }
     }
   </style>
 </head>
 <body>
-  <div class="shell">
-    <header class="toolbar">
-      <div class="title">
-        <h1>Task Execution Plan</h1>
-        <p>Phase-based plan with dependency tracking.</p>
+  <div class="viewer-shell">
+    <header class="viewer-toolbar">
+      <div class="viewer-title">
+        <span class="viewer-title__eyebrow">Task Plan Viewer</span>
+        <h1 id="viewer-title">Task Plan</h1>
+        <p id="viewer-description">Phase-based pipeline for agent work, dependencies, and delivery state.</p>
       </div>
-      <div class="actions">
+      <div class="viewer-actions" role="toolbar" aria-label="Task plan viewer actions">
         <button id="theme-button" type="button">Theme: Auto</button>
-        <button id="export-button" type="button">Export SVG</button>
+        <button id="export-png-button" type="button">Export PNG</button>
+        <button id="export-svg-button" type="button">Export SVG</button>
       </div>
     </header>
-    <main class="stage">
-      <div class="canvas-shell">
-        <div class="empty-state" id="empty-state" aria-live="polite"></div>
-        <svg id="diagram" role="img" aria-labelledby="diagram-title diagram-description"></svg>
+
+    <main class="viewer-stage">
+      <div class="task-plan__shell">
+        <div class="task-plan__surface" id="pipeline-surface">
+          <div class="task-plan__pipeline" id="pipeline" aria-label="Task plan pipeline"></div>
+
+          <section class="task-plan__summary" id="summary" aria-label="Task plan summary" hidden></section>
+
+          <section class="task-plan__legend" id="legend" aria-label="Agent legend" hidden></section>
+
+          <div class="task-plan__empty" id="empty-state" role="status" aria-live="polite" hidden>
+            <strong>No tasks to render</strong>
+            <span>Add phases, batches, and tasks to populate the plan.</span>
+          </div>
+        </div>
       </div>
     </main>
   </div>
-  <div class="badge"><span class="badge-mark"></span>AI Kit static viewer</div>
+
+  <div class="viewer-badge"><span class="viewer-badge__mark"></span>AI Kit static viewer</div>
+  <div class="task-plan__export-error" id="export-error" role="status" aria-live="polite" hidden></div>
+
   <script type="application/json" id="diagram-data">{}</script>
   <script>
     (() => {
-      const svgNs = 'http://www.w3.org/2000/svg';
       const root = document.documentElement;
-      const svg = document.getElementById('diagram');
-      const emptyState = document.getElementById('empty-state');
-      const exportButton = document.getElementById('export-button');
+      const colorSchemeQuery = window.matchMedia ? window.matchMedia('(prefers-color-scheme: light)') : null;
+
+      const pipelineEl = document.getElementById('pipeline');
+      const summaryEl = document.getElementById('summary');
+      const legendEl = document.getElementById('legend');
+      const emptyStateEl = document.getElementById('empty-state');
+      const exportErrorEl = document.getElementById('export-error');
+      const surfaceEl = document.getElementById('pipeline-surface');
+      const viewerTitleEl = document.getElementById('viewer-title');
+      const viewerDescriptionEl = document.getElementById('viewer-description');
       const themeButton = document.getElementById('theme-button');
+      const exportPngButton = document.getElementById('export-png-button');
+      const exportSvgButton = document.getElementById('export-svg-button');
+      const styleTag = document.getElementById('viewer-style');
+
       const themes = ['auto', 'dark', 'light'];
-      const monoFont = '"JetBrains Mono", "SFMono-Regular", Consolas, ui-monospace, monospace';
-      const phaseGap = 300;
-      const batchGap = 120;
-      const taskGap = 100;
-      const sequentialTaskGap = 140;
-      const taskWidth = 260;
-      const taskHeight = 88;
-      const phaseHeaderHeight = 72;
-      const canvasPadding = 80;
-      const phasePaddingX = 36;
-      const phasePaddingBottom = 44;
-      const batchLabelHeight = 32;
-      const phasePalette = [
-        '--dt-cyan',
-        '--tp-indigo',
-        '--dt-amber',
-        '--tp-pink',
-        '--tp-teal',
-        '--dt-violet',
-      ];
-
-      function node(tag, attributes, text) {
-        const element = document.createElementNS(svgNs, tag);
-        if (attributes) {
-          Object.entries(attributes).forEach(([name, value]) => {
-            if (value !== undefined && value !== null) {
-              element.setAttribute(name, String(value));
-            }
-          });
-        }
-        if (text !== undefined) {
-          element.innerHTML = escapeHtml(text);
-        }
-        return element;
+      const phasePalette = ['#06b6d4', '#6366f1', '#f59e0b', '#ec4899', '#14b8a6', '#8b5cf6'];
+      const statusLabels = {
+        pending: 'Pending',
+        'in-progress': 'In Progress',
+        done: 'Done',
+        blocked: 'Blocked'
+      };
+      const agentIcons = {
+        researcher: '🔬',
+        implementer: '🛠',
+        frontend: '🎨',
+        reviewer: '🧪',
+        debugger: '🐞',
+        security: '🛡',
+        explorer: '🧭',
+        documenter: '📝',
+        refactor: '♻',
+        planner: '🧠',
+        orchestrator: '🎛'
+      };
+
+      function getTrimmedString(value) {
+        return typeof value === 'string' && value.trim().length > 0 ? value.trim() : undefined;
       }
 
-      function cssValue() {
-        for (let index = 0; index < arguments.length; index += 1) {
-          const value = getComputedStyle(root).getPropertyValue(arguments[index]).trim();
-          if (value) {
-            return value;
-          }
-        }
-        return '';
+      function isTaskStatus(value) {
+        return value === 'pending' || value === 'in-progress' || value === 'done' || value === 'blocked';
       }
 
-      function rgba(color, alpha) {
-        const cleaned = String(color || '').replace('#', '').trim();
-        const value = cleaned.length === 3
-          ? cleaned.split('').map((char) => char + char).join('')
-          : cleaned;
-        const number = Number.parseInt(value, 16);
-        if (Number.isNaN(number)) {
-          return color;
+      function classifyAgent(agent) {
+        if (!agent) return 'orchestrator';
+        if (agent.startsWith('Researcher-')) return 'researcher';
+        if (agent.startsWith('Code-Reviewer-') || agent.startsWith('Architect-Reviewer-')) return 'reviewer';
+        switch (agent) {
+          case 'Implementer': return 'implementer';
+          case 'Frontend': return 'frontend';
+          case 'Refactor': return 'refactor';
+          case 'Debugger': return 'debugger';
+          case 'Security': return 'security';
+          case 'Explorer': return 'explorer';
+          case 'Documenter': return 'documenter';
+          case 'Planner': return 'planner';
+          default: return 'orchestrator';
         }
-        const red = (number >> 16) & 255;
-        const green = (number >> 8) & 255;
-        const blue = number & 255;
-        return 'rgba(' + red + ', ' + green + ', ' + blue + ', ' + alpha + ')';
       }
 
-      function wrapText(value, maxChars, maxLines) {
-        const words = String(value || '').trim().split(/\s+/).filter(Boolean);
-        if (!words.length) {
-          return [];
-        }
-        const lines = [];
-        let current = '';
-        for (const word of words) {
-          const next = current ? current + ' ' + word : word;
-          if (next.length > maxChars && current) {
-            lines.push(current);
-            current = word;
-          } else {
-            current = next;
-          }
+      function getAgentIcon(agent) {
+        return agentIcons[classifyAgent(agent)] || agentIcons.orchestrator;
+      }
+
+      function getAgentColor(agent) {
+        return 'var(--tp-agent-' + classifyAgent(agent) + ')';
+      }
+
+      function clearElement(element) {
+        while (element.firstChild) {
+          element.removeChild(element.firstChild);
         }
-        if (current) {
-          lines.push(current);
+      }
+
+      function createElement(tagName, className, text) {
+        const element = document.createElement(tagName);
+        if (className) {
+          element.className = className;
         }
-        if (lines.length <= maxLines) {
-          return lines;
+        if (text !== undefined) {
+          element.textContent = text;
         }
-        const clipped = lines.slice(0, maxLines);
-        clipped[maxLines - 1] = clipped[maxLines - 1].replace(/[\s.]+$/, '') + '...';
-        return clipped;
+        return element;
       }
 
-      function escapeHtml(value) {
-        return String(value)
-          .replace(/&/g, '&amp;')
-          .replace(/</g, '&lt;')
-          .replace(/>/g, '&gt;')
-          .replace(/"/g, '&quot;')
-          .replace(/'/g, '&#39;');
+      function normalizeTask(task, taskIndex) {
+        const id = getTrimmedString(task && task.id) || 'task-' + (taskIndex + 1);
+        const files = Array.isArray(task && task.files)
+          ? task.files.filter((file) => typeof file === 'string' && file.trim().length > 0)
+          : [];
+        const dependsOn = Array.isArray(task && task.dependsOn)
+          ? Array.from(new Set(task.dependsOn.filter((dependency) => typeof dependency === 'string' && dependency.trim().length > 0)))
+              .filter((dependency) => dependency !== id)
+          : [];
+
+        return {
+          id,
+          title: getTrimmedString(task && task.title) || 'Task ' + (taskIndex + 1),
+          agent: getTrimmedString(task && task.agent),
+          files,
+          status: isTaskStatus(task && task.status) ? task.status : 'pending',
+          description: getTrimmedString(task && task.description),
+          dependsOn
+        };
       }
 
-      function showEmpty(title, message) {
-        emptyState.classList.add('is-visible');
-        emptyState.innerHTML = '<div><strong>' + escapeHtml(title) + '</strong><span>' + escapeHtml(message) + '</span></div>';
-        svg.innerHTML = '';
+      function normalizeBatch(batch, batchIndex) {
+        const order = typeof (batch && batch.order) === 'number' && Number.isFinite(batch.order)
+          ? batch.order
+          : batchIndex + 1;
+
+        return {
+          id: getTrimmedString(batch && batch.id) || 'batch-' + (batchIndex + 1),
+          order,
+          parallel: Boolean(batch && batch.parallel),
+          label: getTrimmedString(batch && batch.label),
+          tasks: Array.isArray(batch && batch.tasks)
+            ? batch.tasks.map((task, taskIndex) => normalizeTask(task, taskIndex))
+            : []
+        };
       }
 
-      function hideEmpty() {
-        emptyState.classList.remove('is-visible');
-        emptyState.textContent = '';
+      function normalizePhase(phase, phaseIndex) {
+        const batches = Array.isArray(phase && phase.batches)
+          ? phase.batches.map((batch, batchIndex) => normalizeBatch(batch, batchIndex)).sort((left, right) => left.order - right.order)
+          : [];
+
+        return {
+          id: getTrimmedString(phase && phase.id) || 'phase-' + (phaseIndex + 1),
+          label: getTrimmedString(phase && phase.label) || 'Phase ' + (phaseIndex + 1),
+          outcome: getTrimmedString(phase && phase.outcome),
+          batches
+        };
+      }
+
+      function normalizeData(raw) {
+        return {
+          title: getTrimmedString(raw && raw.title),
+          description: getTrimmedString(raw && raw.description),
+          phases: Array.isArray(raw && raw.phases)
+            ? raw.phases.map((phase, phaseIndex) => normalizePhase(phase, phaseIndex))
+            : []
+        };
       }
 
-      function parseData() {
+      function readData() {
         const source = document.getElementById('diagram-data');
-        if (!source) {
-          return {};
+        if (!source || !source.textContent) {
+          return normalizeData(undefined);
         }
+
         try {
-          return JSON.parse(source.textContent || '{}');
+          return normalizeData(JSON.parse(source.textContent));
         } catch (error) {
-          showEmpty('Invalid diagram JSON', String(error && error.message ? error.message : error));
+          showEmpty('Invalid task plan JSON', error instanceof Error ? error.message : String(error));
           return null;
         }
       }
 
-      function phaseColor(index) {
-        return cssValue(phasePalette[index % phasePalette.length], '--dt-cyan');
+      function getTasks(plan) {
+        return plan.phases.flatMap((phase) => phase.batches.flatMap((batch) => batch.tasks));
       }
 
-      function agentColor(agent) {
-        if (!agent) return cssValue('--dt-slate');
-        const value = agent.toLowerCase();
-        if (value.includes('researcher')) return cssValue('--tp-indigo');
-        if (value.includes('implementer')) return cssValue('--dt-emerald');
-        if (value.includes('frontend')) return cssValue('--tp-pink');
-        if (value.includes('reviewer') || value.includes('architect')) return cssValue('--dt-amber');
-        if (value.includes('debugger')) return cssValue('--tp-red', '--dt-rose');
-        if (value.includes('security')) return cssValue('--tp-orange');
-        if (value.includes('explorer')) return cssValue('--dt-cyan');
-        if (value.includes('documenter')) return cssValue('--dt-violet');
-        if (value.includes('refactor')) return cssValue('--tp-teal');
-        if (value.includes('planner')) return cssValue('--tp-purple');
-        if (value.includes('orchestrator')) return cssValue('--dt-slate');
-        return cssValue('--dt-slate');
+      function getPhaseTaskCount(phase) {
+        return phase.batches.reduce((count, batch) => count + batch.tasks.length, 0);
       }
 
-      function agentToken(agent) {
-        const value = String(agent || '').trim();
-        if (!value) {
-          return '?';
-        }
-        const cleaned = value.replace(/[^A-Za-z0-9\s-]/g, ' ').trim();
-        const parts = cleaned.split(/[\s-]+/).filter(Boolean);
-        if (parts.length === 1) {
-          return parts[0].slice(0, 2).toUpperCase();
+      function getPhaseBadge(phase) {
+        const taskCount = getPhaseTaskCount(phase);
+        if (phase.batches.length <= 1) {
+          return taskCount + ' ' + (taskCount === 1 ? 'task' : 'tasks');
         }
-        return (parts[0][0] + parts[1][0]).toUpperCase();
+        return taskCount + ' ' + (taskCount === 1 ? 'task' : 'tasks') + ' · ' + phase.batches.length + ' batches';
       }
 
-      function statusMeta(status) {
-        const value = String(status || 'pending').toLowerCase();
-        if (value === 'done') {
-          return { key: 'done', color: cssValue('--tp-green'), label: 'Done' };
-        }
-        if (value === 'in-progress') {
-          return { key: 'in-progress', color: cssValue('--tp-blue'), label: 'In progress' };
+      function getBatchDescriptor(batch) {
+        const mode = batch.parallel ? 'Parallel' : 'Sequential';
+        if (batch.label) {
+          return batch.label + ' - ' + mode;
         }
-        if (value === 'blocked') {
-          return { key: 'blocked', color: cssValue('--tp-red'), label: 'Blocked' };
-        }
-        return { key: 'pending', color: cssValue('--tp-gray', '--dt-slate'), label: 'Pending' };
+        return 'Batch ' + batch.order + ' - ' + mode;
       }
 
-      function normalizeTask(task, phase, batch, index) {
-        return {
-          id: typeof task.id === 'string' ? task.id : phase.id + '-' + batch.id + '-task-' + index,
-          title: typeof task.title === 'string' ? task.title : 'Untitled task',
-          agent: typeof task.agent === 'string' ? task.agent : '',
-          files: Array.isArray(task.files) ? task.files.filter((file) => typeof file === 'string') : [],
-          status: typeof task.status === 'string' ? task.status : 'pending',
-          dependsOn: Array.isArray(task.dependsOn) ? task.dependsOn.filter((id) => typeof id === 'string') : [],
-          phaseId: phase.id,
-          batchId: batch.id,
-        };
+      function getBatchIcon(batch) {
+        return batch.parallel ? '⫸' : '→';
       }
 
-      function buildModel(raw) {
-        const phases = Array.isArray(raw && raw.phases) ? raw.phases : [];
-        const normalized = [];
-        const taskMap = new Map();
-        const edges = [];
-        const edgeKeys = new Set();
+      function getFileCountLabel(fileCount) {
+        return fileCount + ' ' + (fileCount === 1 ? 'file' : 'files');
+      }
 
-        phases.forEach((phase, phaseIndex) => {
-          if (!phase || typeof phase !== 'object') {
-            return;
-          }
-          const phaseValue = {
-            id: typeof phase.id === 'string' ? phase.id : 'phase-' + (phaseIndex + 1),
-            label: typeof phase.label === 'string' ? phase.label : 'Phase ' + (phaseIndex + 1),
-            outcome: typeof phase.outcome === 'string' ? phase.outcome : '',
-            batches: [],
-          };
-
-          const batches = Array.isArray(phase.batches) ? phase.batches : [];
-          batches.forEach((batch, batchIndex) => {
-            if (!batch || typeof batch !== 'object') {
-              return;
-            }
-            const batchValue = {
-              id: typeof batch.id === 'string' ? batch.id : phaseValue.id + '-batch-' + (batchIndex + 1),
-              order: typeof batch.order === 'number' ? batch.order : batchIndex + 1,
-              parallel: Boolean(batch.parallel),
-              label: typeof batch.label === 'string' ? batch.label : 'Batch ' + (batchIndex + 1),
-              tasks: [],
-            };
-
-            const tasks = Array.isArray(batch.tasks) ? batch.tasks : [];
-            tasks.forEach((task, taskIndex) => {
-              if (!task || typeof task !== 'object') {
-                return;
-              }
-              const normalizedTask = normalizeTask(task, phaseValue, batchValue, taskIndex + 1);
-              batchValue.tasks.push(normalizedTask);
-              taskMap.set(normalizedTask.id, normalizedTask);
-            });
+      function getDependencyLabels(task) {
+        const dependencies = task.dependsOn || [];
+        if (dependencies.length <= 3) {
+          return dependencies.map((dependency) => 'Depends: ' + dependency);
+        }
+        return dependencies.slice(0, 2).map((dependency) => 'Depends: ' + dependency).concat(['+' + (dependencies.length - 2) + ' more']);
+      }
 
-            if (batchValue.tasks.length) {
-              phaseValue.batches.push(batchValue);
+      function buildLegendItems(tasks) {
+        const seen = new Set();
+        return tasks
+          .filter((task) => Boolean(task.agent))
+          .filter((task) => {
+            if (seen.has(task.agent)) {
+              return false;
             }
-          });
+            seen.add(task.agent);
+            return true;
+          })
+          .map((task) => ({
+            label: task.agent,
+            color: getAgentColor(task.agent),
+            icon: getAgentIcon(task.agent)
+          }));
+      }
 
-          if (phaseValue.batches.length) {
-            normalized.push(phaseValue);
-          }
-        });
+      function getSummary(plan) {
+        const tasks = getTasks(plan);
+        const counts = {
+          pending: 0,
+          'in-progress': 0,
+          done: 0,
+          blocked: 0
+        };
+        const agents = new Set();
 
-        normalized.forEach((phase) => {
-          phase.batches.forEach((batch) => {
-            batch.tasks.forEach((task) => {
-              task.dependsOn.forEach((dependencyId) => {
-                if (!taskMap.has(dependencyId)) {
-                  return;
-                }
-                const key = dependencyId + '->' + task.id;
-                if (edgeKeys.has(key)) {
-                  return;
-                }
-                edgeKeys.add(key);
-                edges.push({ source: dependencyId, target: task.id });
-              });
-            });
-          });
+        tasks.forEach((task) => {
+          counts[task.status] += 1;
+          if (task.agent) {
+            agents.add(task.agent);
+          }
         });
 
         return {
-          title: typeof raw.title === 'string' ? raw.title : 'Task execution plan',
-          description: typeof raw.description === 'string' ? raw.description : '',
-          phases: normalized,
-          taskMap,
-          edges,
+          totalTasks: tasks.length,
+          totalPhases: plan.phases.length,
+          totalAgents: agents.size,
+          statusCounts: counts
         };
       }
 
-      function measureTask(task) {
-        const titleLines = wrapText(task.title || task.id, 28, 2);
-        const agentLines = wrapText(task.agent || 'Unassigned', 24, 1);
-        const height = taskHeight + Math.max(0, titleLines.length - 1) * 20;
-        return {
-          width: taskWidth,
-          height,
-          titleLines,
-          agentLines,
-        };
+      function getThemeMode() {
+        return root.getAttribute('data-theme') || 'auto';
       }
 
-      function layoutBatch(batch, startX, startY) {
-        const tasks = batch.tasks.map((task) => ({ task, size: measureTask(task) }));
-        const boxes = [];
-        const contentY = startY + batchLabelHeight + 8;
-
-        if (batch.parallel) {
-          let cursorY = contentY;
-          let width = taskWidth;
-          tasks.forEach(({ task, size }) => {
-            boxes.push({ task, x: startX, y: cursorY, width: size.width, height: size.height, size });
-            width = Math.max(width, size.width);
-            cursorY += size.height + taskGap;
-          });
-          return {
-            boxes,
-            width,
-            height: Math.max(batchLabelHeight + 8, cursorY - startY - taskGap),
-          };
+      function getResolvedTheme() {
+        const mode = getThemeMode();
+        if (mode === 'light' || mode === 'dark') {
+          return mode;
         }
-
-        let cursorX = startX;
-        let maxHeight = 0;
-        tasks.forEach(({ task, size }) => {
-          boxes.push({ task, x: cursorX, y: contentY, width: size.width, height: size.height, size });
-          cursorX += size.width + sequentialTaskGap;
-          maxHeight = Math.max(maxHeight, size.height);
-        });
-        return {
-          boxes,
-          width: Math.max(taskWidth, cursorX - startX - sequentialTaskGap),
-          height: batchLabelHeight + 8 + maxHeight,
-        };
+        return colorSchemeQuery && colorSchemeQuery.matches ? 'light' : 'dark';
       }
 
-      function layout(model) {
-        const phaseLayouts = [];
-        const taskBoxes = new Map();
-        let currentY = canvasPadding;
-        let maxWidth = 0;
-
-        model.phases.forEach((phase, phaseIndex) => {
-          const phaseX = canvasPadding;
-          const phaseY = currentY;
-          let batchCursorX = phaseX + phasePaddingX;
-          const batchBaseY = phaseY + phaseHeaderHeight + 18;
-          let rightEdge = phaseX + 320;
-          let maxBatchBottom = batchBaseY;
-          const batchLayouts = [];
-
-          phase.batches.forEach((batch) => {
-            const batchLayout = layoutBatch(batch, batchCursorX, batchBaseY);
-            batchLayout.boxes.forEach((box) => {
-              taskBoxes.set(box.task.id, box);
-            });
-            batchLayouts.push({
-              batch,
-              x: batchCursorX,
-              y: batchBaseY,
-              width: batchLayout.width,
-              height: batchLayout.height,
-              boxes: batchLayout.boxes,
-            });
-            rightEdge = Math.max(rightEdge, batchCursorX + batchLayout.width + phasePaddingX);
-            maxBatchBottom = Math.max(maxBatchBottom, batchBaseY + batchLayout.height);
-            batchCursorX += Math.max(taskWidth, batchLayout.width) + batchGap;
-          });
+      function updateThemeButton() {
+        const mode = getThemeMode();
+        themeButton.textContent = 'Theme: ' + mode.charAt(0).toUpperCase() + mode.slice(1);
+      }
 
-          const phaseWidth = Math.max(600, rightEdge - phaseX);
-          const phaseHeight = Math.max(
-            phaseHeaderHeight + 120,
-            maxBatchBottom - phaseY + phasePaddingBottom,
-          );
-
-          phaseLayouts.push({
-            phase,
-            x: phaseX,
-            y: phaseY,
-            width: phaseWidth,
-            height: phaseHeight,
-            color: phaseColor(phaseIndex),
-            batches: batchLayouts,
-          });
+      function cycleTheme() {
+        const current = getThemeMode();
+        const next = themes[(themes.indexOf(current) + 1) % themes.length];
+        root.setAttribute('data-theme', next);
+        updateThemeButton();
+      }
 
-          maxWidth = Math.max(maxWidth, phaseX + phaseWidth + canvasPadding);
-          currentY += phaseHeight + phaseGap;
-        });
+      let exportErrorTimer = null;
 
-        return {
-          phases: phaseLayouts,
-          taskBoxes,
-          width: Math.max(1200, maxWidth),
-          height: Math.max(600, currentY - phaseGap + canvasPadding),
-        };
+      function showExportError(message) {
+        exportErrorEl.textContent = message;
+        exportErrorEl.hidden = false;
+        if (exportErrorTimer) {
+          window.clearTimeout(exportErrorTimer);
+        }
+        exportErrorTimer = window.setTimeout(() => {
+          exportErrorEl.hidden = true;
+        }, 4500);
       }
 
-      function routeEdge(edge, source, target) {
-        const startX = source.x + source.width;
-        const startY = source.y + source.height / 2;
-        const endX = target.x;
-        const endY = target.y + target.height / 2;
-        const deltaX = endX - startX;
-        const curve = Math.max(68, Math.abs(deltaX) * 0.38);
-
-        if (deltaX >= 0) {
-          return {
-            d: 'M ' + startX + ' ' + startY + ' C ' + (startX + curve) + ' ' + startY + ', ' + (endX - curve) + ' ' + endY + ', ' + endX + ' ' + endY,
-            labelX: startX + deltaX / 2,
-            labelY: Math.min(startY, endY) - 16,
-          };
+      function clearExportError() {
+        exportErrorEl.hidden = true;
+        exportErrorEl.textContent = '';
+        if (exportErrorTimer) {
+          window.clearTimeout(exportErrorTimer);
+          exportErrorTimer = null;
         }
+      }
 
-        const midX = Math.max(startX + 72, startX + Math.abs(deltaX) * 0.35);
-        const liftY = Math.min(startY, endY) - 56;
-        return {
-          d: 'M ' + startX + ' ' + startY + ' C ' + midX + ' ' + startY + ', ' + midX + ' ' + liftY + ', ' + (endX - 18) + ' ' + liftY + ' S ' + (endX - 32) + ' ' + endY + ', ' + endX + ' ' + endY,
-          labelX: midX,
-          labelY: liftY - 10,
-        };
+      function showEmpty(title, message) {
+        clearElement(pipelineEl);
+        clearElement(summaryEl);
+        clearElement(legendEl);
+        summaryEl.hidden = true;
+        legendEl.hidden = true;
+
+        clearElement(emptyStateEl);
+        emptyStateEl.appendChild(createElement('strong', '', title));
+        emptyStateEl.appendChild(createElement('span', '', message));
+        emptyStateEl.hidden = false;
       }
 
-      function renderDefs() {
-        const defs = node('defs');
-
-        const marker = node('marker', {
-          id: 'arrow',
-          viewBox: '0 0 10 10',
-          refX: 8,
-          refY: 5,
-          markerWidth: 7,
-          markerHeight: 7,
-          orient: 'auto-start-reverse',
-        });
-        marker.appendChild(node('path', {
-          d: 'M 0 0 L 10 5 L 0 10 z',
-          fill: cssValue('--dt-text-secondary'),
-        }));
-        defs.appendChild(marker);
-
-        const filter = node('filter', {
-          id: 'node-shadow',
-          x: '-20%',
-          y: '-20%',
-          width: '140%',
-          height: '140%',
-        });
-        filter.appendChild(node('feDropShadow', {
-          dx: 0,
-          dy: 12,
-          stdDeviation: 12,
-          'flood-color': cssValue('--dt-shadow'),
-        }));
-        defs.appendChild(filter);
-
-        phasePalette.forEach((token, index) => {
-          const color = cssValue(token, '--dt-cyan');
-          const gradient = node('linearGradient', {
-            id: 'phase-grad-' + index,
-            x1: '0%',
-            y1: '0%',
-            x2: '100%',
-            y2: '100%',
-          });
-          gradient.appendChild(node('stop', { offset: '0%', 'stop-color': rgba(color, 0.14) }));
-          gradient.appendChild(node('stop', { offset: '100%', 'stop-color': rgba(color, 0.03) }));
-          defs.appendChild(gradient);
+      function hideEmpty() {
+        emptyStateEl.hidden = true;
+      }
+
+      function renderSummary(summary) {
+        clearElement(summaryEl);
+
+        const statItems = [
+          { label: 'Total Tasks', value: String(summary.totalTasks) },
+          { label: 'Phases', value: String(summary.totalPhases) },
+          { label: 'Pending', value: String(summary.statusCounts.pending), color: 'var(--tp-status-pending)' },
+          { label: 'In Progress', value: String(summary.statusCounts['in-progress']), color: 'var(--tp-status-in-progress)' },
+          { label: 'Done', value: String(summary.statusCounts.done), color: 'var(--tp-status-done)' },
+          { label: 'Blocked', value: String(summary.statusCounts.blocked), color: 'var(--tp-status-blocked)' },
+          { label: 'Agents', value: String(summary.totalAgents) }
+        ];
+
+        statItems.forEach((stat) => {
+          const statEl = createElement('div', 'task-plan-summary__stat');
+          const valueEl = createElement('span', 'task-plan-summary__value', stat.value);
+          if (stat.color) {
+            valueEl.style.color = stat.color;
+          }
+          statEl.appendChild(valueEl);
+          statEl.appendChild(createElement('span', 'task-plan-summary__label', stat.label));
+          summaryEl.appendChild(statEl);
         });
 
-        return defs;
+        summaryEl.hidden = false;
       }
 
-      function renderTextLines(lines, group, x, y, fontSize, color, fontWeight, lineHeight, anchor) {
-        lines.forEach((line, index) => {
-          group.appendChild(node('text', {
-            x,
-            y: y + index * lineHeight,
-            fill: color,
-            'font-size': fontSize,
-            'font-weight': fontWeight,
-            'text-anchor': anchor || 'start',
-          }, line));
+      function renderLegend(tasks) {
+        clearElement(legendEl);
+        const legendItems = buildLegendItems(tasks);
+
+        if (legendItems.length <= 1) {
+          legendEl.hidden = true;
+          return;
+        }
+
+        legendEl.appendChild(createElement('span', 'task-plan__legend-title', 'Agents'));
+
+        legendItems.forEach((item) => {
+          const legendItemEl = createElement('span', 'task-plan__legend-item');
+          const dotEl = createElement('span', 'task-plan__legend-dot');
+          dotEl.style.backgroundColor = item.color;
+
+          const textWrapEl = createElement('span', '');
+          textWrapEl.appendChild(createElement('span', 'task-plan__legend-icon', item.icon));
+          textWrapEl.appendChild(document.createTextNode(' ' + item.label));
+
+          legendItemEl.appendChild(dotEl);
+          legendItemEl.appendChild(textWrapEl);
+          legendEl.appendChild(legendItemEl);
         });
-      }
 
-      function renderPhase(phaseLayout, layer, index) {
-        const group = node('g');
-        const gradientId = 'phase-grad-' + (index % phasePalette.length);
-
-        group.appendChild(node('rect', {
-          x: phaseLayout.x,
-          y: phaseLayout.y,
-          width: phaseLayout.width,
-          height: phaseLayout.height,
-          rx: 28,
-          fill: 'url(#' + gradientId + ')',
-          stroke: rgba(phaseLayout.color, 0.42),
-          'stroke-width': 1.6,
-          'stroke-dasharray': '10 10',
-        }));
-
-        group.appendChild(node('text', {
-          x: phaseLayout.x + phasePaddingX,
-          y: phaseLayout.y + 30,
-          fill: phaseLayout.color,
-          'font-size': 10,
-          'font-family': monoFont,
-          'font-weight': 700,
-          'letter-spacing': '0.08em',
-        }, 'PHASE'));
-
-        group.appendChild(node('text', {
-          x: phaseLayout.x + phasePaddingX,
-          y: phaseLayout.y + 50,
-          fill: cssValue('--dt-text-primary'),
-          'font-size': 18,
-          'font-weight': 700,
-        }, phaseLayout.phase.label));
-
-        const outcomeLines = wrapText(phaseLayout.phase.outcome || '', 38, 2);
-        renderTextLines(
-          outcomeLines,
-          group,
-          phaseLayout.x + phasePaddingX,
-          phaseLayout.y + 68,
-          11.5,
-          cssValue('--dt-text-secondary'),
-          500,
-          15,
-          'start',
-        );
-
-        layer.appendChild(group);
+        legendEl.hidden = false;
       }
 
-      function renderBatch(batchLayout, layer) {
-        const label = (batchLayout.batch.parallel ? '⫘ Parallel' : '→ Sequential') + ' · ' + batchLayout.batch.label;
-        const group = node('g');
-
-        group.appendChild(node('text', {
-          x: batchLayout.x,
-          y: batchLayout.y + 14,
-          fill: cssValue('--dt-text-secondary'),
-          'font-size': 10.5,
-          'font-family': monoFont,
-          'font-weight': 600,
-          'letter-spacing': '0.03em',
-        }, label));
-
-        const orderText = '#' + String(batchLayout.batch.order);
-        const badgeWidth = Math.max(30, orderText.length * 7 + 14);
-        group.appendChild(node('rect', {
-          x: batchLayout.x + Math.max(120, Math.min(batchLayout.width - badgeWidth, label.length * 5.9 + 16)),
-          y: batchLayout.y,
-          width: badgeWidth,
-          height: 18,
-          rx: 9,
-          fill: rgba(cssValue('--dt-slate'), 0.14),
-          stroke: rgba(cssValue('--dt-slate'), 0.26),
-        }));
-        group.appendChild(node('text', {
-          x: batchLayout.x + Math.max(120, Math.min(batchLayout.width - badgeWidth, label.length * 5.9 + 16)) + badgeWidth / 2,
-          y: batchLayout.y + 12,
-          fill: cssValue('--dt-text-secondary'),
-          'font-size': 10,
-          'font-family': monoFont,
-          'font-weight': 700,
-          'text-anchor': 'middle',
-        }, orderText));
-
-        layer.appendChild(group);
-      }
+      function createTaskCard(task) {
+        const status = task.status || 'pending';
+        const article = createElement('article', 'task-plan-task');
+        article.dataset.status = status;
+        article.style.setProperty('--card-accent', getAgentColor(task.agent));
+        article.style.setProperty('--status-color', 'var(--tp-status-' + status + ')');
 
-      function renderStatus(group, box, meta) {
-        const cx = box.x + 18;
-        const cy = box.y + box.height - 18;
-
-        if (meta.key === 'in-progress') {
-          const pulse = node('circle', {
-            cx,
-            cy,
-            r: 10,
-            fill: 'none',
-            stroke: rgba(meta.color, 0.4),
-            'stroke-width': 2,
-          });
-          pulse.appendChild(node('animate', {
-            attributeName: 'r',
-            values: '6;12;6',
-            dur: '1.6s',
-            repeatCount: 'indefinite',
-          }));
-          pulse.appendChild(node('animate', {
-            attributeName: 'opacity',
-            values: '0.9;0.2;0.9',
-            dur: '1.6s',
-            repeatCount: 'indefinite',
-          }));
-          group.appendChild(pulse);
+        const topLineEl = createElement('div', 'task-plan-task__topline');
+
+        const agentEl = createElement('span', 'task-plan-task__agent');
+        agentEl.title = task.agent || 'Orchestrator';
+        agentEl.appendChild(createElement('span', 'task-plan-task__agent-icon', getAgentIcon(task.agent)));
+        agentEl.appendChild(createElement('span', 'task-plan-task__agent-label', task.agent || 'Orchestrator'));
+
+        const statusEl = createElement('span', 'task-plan-task__status');
+        statusEl.dataset.status = status;
+        statusEl.appendChild(createElement('span', 'task-plan-task__status-dot'));
+        statusEl.appendChild(createElement('span', '', statusLabels[status] || statusLabels.pending));
+
+        topLineEl.appendChild(agentEl);
+        topLineEl.appendChild(statusEl);
+        article.appendChild(topLineEl);
+
+        article.appendChild(createElement('div', 'task-plan-task__title', task.title));
+
+        if (task.description) {
+          article.appendChild(createElement('p', 'task-plan-task__description', task.description));
         }
 
-        group.appendChild(node('circle', {
-          cx,
-          cy,
-          r: 6,
-          fill: meta.color,
-        }));
-
-        if (meta.key === 'done') {
-          group.appendChild(node('path', {
-            d: 'M ' + (cx - 3) + ' ' + cy + ' L ' + (cx - 1) + ' ' + (cy + 3) + ' L ' + (cx + 4) + ' ' + (cy - 3),
-            fill: 'none',
-            stroke: '#ffffff',
-            'stroke-width': 1.6,
-            'stroke-linecap': 'round',
-            'stroke-linejoin': 'round',
-          }));
+        const metaEl = createElement('div', 'task-plan-task__meta');
+        const fileCount = task.files ? task.files.length : 0;
+        if (fileCount > 0) {
+          metaEl.appendChild(createElement('span', 'task-plan-task__chip', '📁 ' + getFileCountLabel(fileCount)));
         }
 
-        if (meta.key === 'blocked') {
-          group.appendChild(node('path', {
-            d: 'M ' + (cx - 3) + ' ' + (cy - 3) + ' L ' + (cx + 3) + ' ' + (cy + 3) + ' M ' + (cx + 3) + ' ' + (cy - 3) + ' L ' + (cx - 3) + ' ' + (cy + 3),
-            fill: 'none',
-            stroke: '#ffffff',
-            'stroke-width': 1.5,
-            'stroke-linecap': 'round',
-          }));
+        getDependencyLabels(task).forEach((label) => {
+          const chipEl = createElement('span', 'task-plan-task__chip', '🔗 ' + label);
+          chipEl.title = label;
+          metaEl.appendChild(chipEl);
+        });
+
+        if (metaEl.childNodes.length > 0) {
+          article.appendChild(metaEl);
         }
 
-        group.appendChild(node('text', {
-          x: box.x + 30,
-          y: box.y + box.height - 14,
-          fill: cssValue('--dt-text-secondary'),
-          'font-size': 10.5,
-          'font-weight': 600,
-        }, meta.label));
+        return article;
       }
 
-      function renderFileBadge(group, box, files) {
-        if (!files.length) {
-          return;
-        }
-        const label = files.length + (files.length === 1 ? ' file' : ' files');
-        const width = Math.max(46, label.length * 6.6 + 14);
-        const x = box.x + box.width - width - 14;
-        const y = box.y + box.height - 27;
-
-        group.appendChild(node('rect', {
-          x,
-          y,
-          width,
-          height: 18,
-          rx: 9,
-          fill: rgba(cssValue('--dt-cyan'), 0.12),
-          stroke: rgba(cssValue('--dt-cyan'), 0.22),
-        }));
-        group.appendChild(node('text', {
-          x: x + width / 2,
-          y: y + 12,
-          fill: cssValue('--dt-text-secondary'),
-          'font-size': 10,
-          'font-family': monoFont,
-          'font-weight': 600,
-          'text-anchor': 'middle',
-        }, label));
+      function renderPipeline(plan) {
+        clearElement(pipelineEl);
+
+        plan.phases.forEach((phase, phaseIndex) => {
+          const phaseBlockEl = createElement('div', 'task-plan__phase-block');
+          const phaseSectionEl = createElement('section', 'task-plan-phase');
+          const headingId = 'task-plan-phase-' + phase.id;
+
+          phaseSectionEl.setAttribute('aria-labelledby', headingId);
+
+          const contentEl = createElement('div', 'task-plan-phase__content');
+          contentEl.style.setProperty('--phase-accent', phasePalette[phaseIndex % phasePalette.length]);
+
+          const headerEl = createElement('div', 'task-plan-phase__header');
+          headerEl.appendChild(createElement('span', 'task-plan-phase__number', String(phaseIndex + 1)));
+
+          const labelEl = createElement('h2', 'task-plan-phase__label', phase.label);
+          labelEl.id = headingId;
+          headerEl.appendChild(labelEl);
+
+          headerEl.appendChild(createElement('span', 'task-plan-phase__badge', getPhaseBadge(phase)));
+          contentEl.appendChild(headerEl);
+
+          if (phase.outcome) {
+            contentEl.appendChild(createElement('p', 'task-plan-phase__outcome', phase.outcome));
+          }
+
+          const batchesEl = createElement('div', 'task-plan-phase__batches');
+          phase.batches.forEach((batch) => {
+            const batchEl = createElement('section', 'task-plan-batch');
+            batchEl.setAttribute('aria-label', getBatchDescriptor(batch));
+
+            const batchLabelEl = createElement('div', 'task-plan-batch__label');
+            batchLabelEl.appendChild(createElement('span', 'task-plan-batch__icon', getBatchIcon(batch)));
+            batchLabelEl.appendChild(createElement('span', '', getBatchDescriptor(batch)));
+            batchEl.appendChild(batchLabelEl);
+
+            const tasksClass = ['task-plan-batch__tasks'];
+            if (batch.parallel) {
+              tasksClass.push('task-plan-batch__tasks--parallel');
+            } else if (batch.tasks.length <= 2) {
+              tasksClass.push('task-plan-batch__tasks--sequential-compact');
+            }
+
+            const tasksEl = createElement('div', tasksClass.join(' '));
+            batch.tasks.forEach((task) => {
+              tasksEl.appendChild(createTaskCard(task));
+            });
+            batchEl.appendChild(tasksEl);
+            batchesEl.appendChild(batchEl);
+          });
+
+          contentEl.appendChild(batchesEl);
+          phaseSectionEl.appendChild(contentEl);
+          phaseBlockEl.appendChild(phaseSectionEl);
+
+          if (phaseIndex < plan.phases.length - 1) {
+            phaseBlockEl.appendChild(createElement('div', 'task-plan__connector'));
+          }
+
+          pipelineEl.appendChild(phaseBlockEl);
+        });
+      }
+
+      function updateHeader(plan) {
+        const title = plan.title || 'Task Plan';
+        const description = plan.description || 'Phase-based pipeline for agent work, dependencies, and delivery state.';
+
+        viewerTitleEl.textContent = title;
+        viewerDescriptionEl.textContent = description;
+        document.title = 'AI Kit - ' + title;
       }
 
-      function renderTask(box, layer) {
-        const task = box.task;
-        const accent = agentColor(task.agent);
-        const meta = statusMeta(task.status);
-        const group = node('g');
-        const titleX = box.x + 44;
-        const token = agentToken(task.agent);
-
-        group.appendChild(node('rect', {
-          x: box.x,
-          y: box.y,
-          width: box.width,
-          height: box.height,
-          rx: 18,
-          fill: rgba(accent, 0.08),
-          stroke: rgba(accent, 0.28),
-          'stroke-width': 1.25,
-          filter: 'url(#node-shadow)',
-        }));
-
-        group.appendChild(node('rect', {
-          x: box.x + 1,
-          y: box.y + 1,
-          width: box.width - 2,
-          height: box.height - 2,
-          rx: 17,
-          fill: cssValue('--dt-node-fill'),
-        }));
-
-        group.appendChild(node('rect', {
-          x: box.x,
-          y: box.y,
-          width: 4,
-          height: box.height,
-          rx: 4,
-          fill: accent,
-        }));
-
-        group.appendChild(node('circle', {
-          cx: box.x + 22,
-          cy: box.y + 19,
-          r: 11,
-          fill: rgba(accent, 0.18),
-          stroke: rgba(accent, 0.4),
-        }));
-        group.appendChild(node('text', {
-          x: box.x + 22,
-          y: box.y + 23,
-          fill: accent,
-          'font-size': 10,
-          'font-family': monoFont,
-          'font-weight': 700,
-          'text-anchor': 'middle',
-        }, token));
-
-        renderTextLines(box.size.agentLines, group, titleX, box.y + 21, 10.5, accent, 700, 14, 'start');
-        renderTextLines(box.size.titleLines, group, titleX, box.y + 40, 13.5, cssValue('--dt-text-primary'), 700, 17, 'start');
-
-        renderStatus(group, box, meta);
-        renderFileBadge(group, box, task.files);
-
-        layer.appendChild(group);
+      function buildExportSvgMarkup() {
+        const resolvedTheme = getResolvedTheme();
+        const exportClone = surfaceEl.cloneNode(true);
+        const padding = 24;
+        const contentWidth = Math.ceil(surfaceEl.scrollWidth);
+        const contentHeight = Math.ceil(surfaceEl.scrollHeight);
+        const width = contentWidth + padding * 2;
+        const height = contentHeight + padding * 2;
+
+        exportClone.removeAttribute('id');
+        exportClone.style.width = contentWidth + 'px';
+        exportClone.style.minHeight = '0';
+        exportClone.style.boxShadow = 'none';
+
+        let stylesheet = styleTag && styleTag.textContent ? styleTag.textContent : '';
+        stylesheet = stylesheet.replace(/:root\b/g, '.tp-export-root');
+        stylesheet = stylesheet.replace(/\]\]>/g, ']]&gt;');
+        stylesheet += '\n.tp-export-root{width:' + contentWidth + 'px;padding:' + padding + 'px;background:transparent;font-family:var(--font-sans);color:var(--viewer-text);}\n';
+        stylesheet += '.tp-export-root .task-plan__surface{min-height:0;box-shadow:none;}\n';
+
+        const serializedSurface = exportClone.outerHTML;
+        const svg = [
+          '<?xml version="1.0" encoding="UTF-8"?>',
+          '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '" viewBox="0 0 ' + width + ' ' + height + '">',
+          '<foreignObject width="100%" height="100%">',
+          '<div xmlns="http://www.w3.org/1999/xhtml" class="tp-export-root" data-theme="' + resolvedTheme + '">',
+          '<style><![CDATA[' + stylesheet + ']]></style>',
+          serializedSurface,
+          '</div>',
+          '</foreignObject>',
+          '</svg>'
+        ].join('');
+
+        return { markup: svg, width, height };
       }
 
-      function renderEdge(edge, taskBoxes, layer) {
-        const source = taskBoxes.get(edge.source);
-        const target = taskBoxes.get(edge.target);
-        if (!source || !target) {
-          return;
+      function downloadBlob(blob, filename) {
+        const url = URL.createObjectURL(blob);
+        const anchor = document.createElement('a');
+        anchor.href = url;
+        anchor.download = filename;
+        document.body.appendChild(anchor);
+        anchor.click();
+        anchor.remove();
+        window.setTimeout(() => URL.revokeObjectURL(url), 1000);
+      }
+
+      async function exportSvg() {
+        clearExportError();
+        try {
+          const exported = buildExportSvgMarkup();
+          const blob = new Blob([exported.markup], { type: 'image/svg+xml;charset=utf-8' });
+          downloadBlob(blob, 'task-plan.svg');
+        } catch (error) {
+          showExportError(error instanceof Error ? error.message : 'SVG export failed.');
         }
+      }
+
+      async function exportPng() {
+        clearExportError();
+        try {
+          const exported = buildExportSvgMarkup();
+          const blob = new Blob([exported.markup], { type: 'image/svg+xml;charset=utf-8' });
+          const url = URL.createObjectURL(blob);
+          const image = new Image();
+          const scale = Math.max(window.devicePixelRatio || 1, 2);
+
+          await new Promise((resolve, reject) => {
+            image.onload = resolve;
+            image.onerror = () => reject(new Error('PNG export is unavailable in this browser. Use SVG export instead.'));
+            image.src = url;
+          });
+
+          const canvas = document.createElement('canvas');
+          canvas.width = Math.ceil(exported.width * scale);
+          canvas.height = Math.ceil(exported.height * scale);
+
+          const context = canvas.getContext('2d');
+          if (!context) {
+            URL.revokeObjectURL(url);
+            throw new Error('Canvas export is unavailable in this browser.');
+          }
 
-        const route = routeEdge(edge, source, target);
-        layer.appendChild(node('path', {
-          d: route.d,
-          fill: 'none',
-          stroke: cssValue('--dt-text-secondary'),
-          'stroke-width': 2,
-          'stroke-linecap': 'round',
-          'stroke-linejoin': 'round',
-          'marker-end': 'url(#arrow)',
-        }));
+          context.scale(scale, scale);
+          context.drawImage(image, 0, 0, exported.width, exported.height);
+
+          const pngBlob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
+          URL.revokeObjectURL(url);
+
+          if (!pngBlob) {
+            throw new Error('PNG export failed.');
+          }
+
+          downloadBlob(pngBlob, 'task-plan.png');
+        } catch (error) {
+          showExportError(error instanceof Error ? error.message : 'PNG export failed.');
+        }
       }
 
       function render() {
-        const raw = parseData();
-        if (raw === null) {
+        const plan = readData();
+        if (!plan) {
           return;
         }
 
-        const model = buildModel(raw);
-        const totalTasks = model.phases.reduce((count, phase) => {
-          return count + phase.batches.reduce((batchCount, batch) => batchCount + batch.tasks.length, 0);
-        }, 0);
+        clearExportError();
+        updateHeader(plan);
 
-        if (!totalTasks) {
-          showEmpty('No task plan provided', 'Populate #diagram-data with phases, batches, and tasks to render the plan.');
+        const tasks = getTasks(plan);
+        if (tasks.length === 0) {
+          showEmpty('No tasks to render', 'Add phases, batches, and tasks to populate the plan.');
           return;
         }
 
         hideEmpty();
-        const layoutResult = layout(model);
-        svg.innerHTML = '';
-        svg.setAttribute('viewBox', '0 0 ' + layoutResult.width + ' ' + layoutResult.height);
-        svg.style.height = layoutResult.height + 'px';
-        svg.setAttribute('aria-label', model.title + ' with ' + totalTasks + ' tasks');
-        svg.appendChild(renderDefs());
-        svg.appendChild(node('title', { id: 'diagram-title' }, model.title || 'Task execution plan'));
-        svg.appendChild(node('desc', { id: 'diagram-description' }, model.description || 'Static task execution plan rendered with SVG'));
-
-        const phaseLayer = node('g', { 'aria-hidden': 'true' });
-        const batchLayer = node('g', { 'aria-hidden': 'true' });
-        const edgeLayer = node('g', { 'aria-hidden': 'true' });
-        const nodeLayer = node('g');
-
-        layoutResult.phases.forEach((phaseLayout, index) => {
-          renderPhase(phaseLayout, phaseLayer, index);
-          phaseLayout.batches.forEach((batchLayout) => {
-            renderBatch(batchLayout, batchLayer);
-            batchLayout.boxes.forEach((box) => renderTask(box, nodeLayer));
-          });
-        });
-
-        model.edges.forEach((edge) => renderEdge(edge, layoutResult.taskBoxes, edgeLayer));
-
-        svg.appendChild(phaseLayer);
-        svg.appendChild(edgeLayer);
-        svg.appendChild(batchLayer);
-        svg.appendChild(nodeLayer);
-      }
-
-      function updateThemeButton() {
-        const value = root.getAttribute('data-theme') || 'auto';
-        themeButton.textContent = 'Theme: ' + value.charAt(0).toUpperCase() + value.slice(1);
-      }
-
-      function cycleTheme() {
-        const current = root.getAttribute('data-theme') || 'auto';
-        const next = themes[(themes.indexOf(current) + 1) % themes.length];
-        root.setAttribute('data-theme', next);
-        updateThemeButton();
-        render();
+        renderPipeline(plan);
+        renderSummary(getSummary(plan));
+        renderLegend(tasks);
       }
 
-      function exportSvg() {
-        const clone = svg.cloneNode(true);
-        clone.setAttribute('xmlns', svgNs);
-        const payload = '<?xml version="1.0" encoding="UTF-8"?>\n' + new XMLSerializer().serializeToString(clone);
-        const blob = new Blob([payload], { type: 'image/svg+xml;charset=utf-8' });
-        const url = URL.createObjectURL(blob);
-        const anchorEl = document.createElement('a');
-        anchorEl.href = url;
-        anchorEl.download = 'task-execution-plan.svg';
-        anchorEl.click();
-        setTimeout(() => URL.revokeObjectURL(url), 1000);
+      themeButton.addEventListener('click', cycleTheme);
+      exportSvgButton.addEventListener('click', () => {
+        void exportSvg();
+      });
+      exportPngButton.addEventListener('click', () => {
+        void exportPng();
+      });
+
+      if (colorSchemeQuery && typeof colorSchemeQuery.addEventListener === 'function') {
+        colorSchemeQuery.addEventListener('change', () => {
+          if (getThemeMode() === 'auto') {
+            clearExportError();
+          }
+        });
       }
 
-      themeButton.addEventListener('click', cycleTheme);
-      exportButton.addEventListener('click', exportSvg);
       updateThemeButton();
       render();
     })();
   </script>
 </body>
-</html>
+</html>