agentweaver 0.1.19 → 0.1.20

package/dist/interactive/web/static/styles.input.css

@@ -4,6 +4,68 @@
 @source "./app.js";
 
 :root {
+  color-scheme: light;
+  --aw-bg: #f4f7f5;
+  --aw-bg-soft: #edf3ef;
+  --aw-panel: #ffffff;
+  --aw-panel-muted: #f7faf8;
+  --aw-border: #d4dfd9;
+  --aw-border-strong: #a9bcb1;
+  --aw-text: #17231e;
+  --aw-muted: #5d7066;
+  --aw-dim: #7a8b82;
+  --aw-accent: #168254;
+  --aw-accent-strong: #0d6b45;
+  --aw-accent-soft: rgba(22, 130, 84, 0.1);
+  --aw-cyan: #0e7490;
+  --aw-danger: #c03535;
+  --aw-success: #168254;
+  --aw-warning: #946500;
+  --aw-shadow: 0 18px 52px rgba(26, 42, 34, 0.15);
+  --aw-glow: 0 0 0 1px rgba(22, 130, 84, 0.07), 0 16px 44px rgba(26, 42, 34, 0.07);
+  --aw-body-bg: linear-gradient(180deg, rgba(22, 130, 84, 0.08), transparent 24rem), radial-gradient(circle at 88% 8%, rgba(14, 116, 144, 0.08), transparent 24rem), var(--aw-bg);
+  --aw-control-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 248, 245, 0.92));
+  --aw-primary-bg: linear-gradient(180deg, rgba(22, 130, 84, 0.18), rgba(22, 130, 84, 0.09));
+  --aw-danger-text: #a62f2f;
+  --aw-success-text: #0d6b45;
+  --aw-warning-text: #755400;
+  --aw-running-text: #0c6580;
+  --aw-pending-text: #405349;
+  --aw-control-ring: rgba(22, 130, 84, 0.16);
+  --aw-topbar-bg: rgba(255, 255, 255, 0.86);
+  --aw-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 248, 0.98));
+  --aw-heading-bg: linear-gradient(180deg, rgba(25, 52, 39, 0.04), rgba(25, 52, 39, 0.012));
+  --aw-surface-bg: rgba(239, 246, 242, 0.76);
+  --aw-surface-subtle-bg: rgba(248, 251, 249, 0.82);
+  --aw-input-bg: #ffffff;
+  --aw-text-panel-text: #21322a;
+  --aw-log-bg: linear-gradient(180deg, rgba(22, 130, 84, 0.045), transparent 8rem), #f8faf8;
+  --aw-drawer-bg: rgba(255, 255, 255, 0.98);
+  --aw-modal-overlay: rgba(216, 226, 221, 0.68);
+  --aw-code-bg: rgba(14, 116, 144, 0.08);
+  --aw-code-text: #17231e;
+  --aw-pre-bg: rgba(247, 250, 248, 0.88);
+  --aw-pre-text: #21322a;
+  --aw-muted-bg: rgba(23, 35, 30, 0.05);
+  --aw-inset-border: rgba(23, 35, 30, 0.08);
+  --aw-warning-soft: rgba(148, 101, 0, 0.12);
+  --aw-success-soft: rgba(22, 130, 84, 0.11);
+  --aw-running-soft: rgba(14, 116, 144, 0.11);
+  --aw-danger-soft: rgba(192, 53, 53, 0.11);
+  --aw-file-badge-bg: rgba(14, 116, 144, 0.08);
+  --aw-diff-border: rgba(190, 205, 197, 0.92);
+  --aw-diff-line-number-bg: rgba(238, 244, 240, 0.86);
+  --aw-diff-add-bg: rgba(22, 130, 84, 0.12);
+  --aw-diff-add-text: #0d5f3d;
+  --aw-diff-delete-bg: rgba(192, 53, 53, 0.11);
+  --aw-diff-delete-text: #932222;
+  --aw-diff-context-bg: rgba(255, 255, 255, 0.72);
+  --aw-scrollbar-thumb: #b8c8bf;
+  --aw-scrollbar-track: #edf3ef;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+:root[data-theme="dark"] {
   color-scheme: dark;
   --aw-bg: #070b0a;
   --aw-bg-soft: #0b1210;
@@ -23,7 +85,45 @@
   --aw-warning: #f2c94c;
   --aw-shadow: 0 28px 90px rgba(0, 0, 0, 0.45);
   --aw-glow: 0 0 0 1px rgba(56, 224, 143, 0.08), 0 18px 60px rgba(56, 224, 143, 0.08);
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --aw-body-bg: linear-gradient(180deg, rgba(56, 224, 143, 0.08), transparent 24rem), radial-gradient(circle at 88% 8%, rgba(101, 216, 255, 0.09), transparent 24rem), var(--aw-bg);
+  --aw-control-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
+  --aw-primary-bg: linear-gradient(180deg, rgba(56, 224, 143, 0.26), rgba(56, 224, 143, 0.13));
+  --aw-danger-text: #ffb3b3;
+  --aw-success-text: #9df0c2;
+  --aw-warning-text: #ffe49a;
+  --aw-running-text: #bfefff;
+  --aw-pending-text: #c2d0c8;
+  --aw-control-ring: rgba(56, 224, 143, 0.12);
+  --aw-topbar-bg: rgba(7, 11, 10, 0.88);
+  --aw-panel-bg: linear-gradient(180deg, rgba(15, 23, 20, 0.96), rgba(10, 16, 14, 0.96));
+  --aw-heading-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
+  --aw-surface-bg: rgba(7, 11, 10, 0.42);
+  --aw-surface-subtle-bg: rgba(3, 7, 6, 0.36);
+  --aw-input-bg: #070b0a;
+  --aw-text-panel-text: #d7eadf;
+  --aw-log-bg: linear-gradient(180deg, rgba(56, 224, 143, 0.035), transparent 8rem), #050806;
+  --aw-drawer-bg: rgba(10, 16, 14, 0.98);
+  --aw-modal-overlay: rgba(2, 5, 4, 0.72);
+  --aw-code-bg: rgba(101, 216, 255, 0.08);
+  --aw-code-text: #d8f7e7;
+  --aw-pre-bg: rgba(3, 7, 6, 0.62);
+  --aw-pre-text: #d7eadf;
+  --aw-muted-bg: rgba(255, 255, 255, 0.035);
+  --aw-inset-border: rgba(255, 255, 255, 0.08);
+  --aw-warning-soft: rgba(242, 201, 76, 0.12);
+  --aw-success-soft: rgba(56, 224, 143, 0.14);
+  --aw-running-soft: rgba(101, 216, 255, 0.12);
+  --aw-danger-soft: rgba(255, 107, 107, 0.12);
+  --aw-file-badge-bg: rgba(101, 216, 255, 0.09);
+  --aw-diff-border: rgba(34, 53, 46, 0.72);
+  --aw-diff-line-number-bg: rgba(7, 11, 10, 0.55);
+  --aw-diff-add-bg: rgba(56, 224, 143, 0.13);
+  --aw-diff-add-text: #dcffe9;
+  --aw-diff-delete-bg: rgba(255, 107, 107, 0.12);
+  --aw-diff-delete-text: #ffd6d6;
+  --aw-diff-context-bg: rgba(255, 255, 255, 0.015);
+  --aw-scrollbar-thumb: #284137;
+  --aw-scrollbar-track: #08100d;
 }
 
 * {
@@ -41,10 +141,7 @@ body {
 
 body {
   @apply m-0 overflow-hidden;
-  background:
-    linear-gradient(180deg, rgba(56, 224, 143, 0.08), transparent 24rem),
-    radial-gradient(circle at 88% 8%, rgba(101, 216, 255, 0.09), transparent 24rem),
-    var(--aw-bg);
+  background: var(--aw-body-bg);
   color: var(--aw-text);
 }
 
@@ -58,7 +155,7 @@ textarea {
 button {
   @apply inline-flex min-h-8 items-center justify-center gap-2 rounded-md px-3 py-1.5 text-sm font-semibold transition;
   border: 1px solid var(--aw-border-strong);
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
+  background: var(--aw-control-bg);
   color: var(--aw-text);
   cursor: pointer;
 }
@@ -68,18 +165,18 @@ button:focus-visible {
   border-color: var(--aw-accent);
   color: var(--aw-accent-strong);
   outline: 2px solid transparent;
-  box-shadow: 0 0 0 3px rgba(56, 224, 143, 0.12);
+  box-shadow: 0 0 0 3px var(--aw-control-ring);
 }
 
 button.primary {
   border-color: rgba(56, 224, 143, 0.75);
-  background: linear-gradient(180deg, rgba(56, 224, 143, 0.26), rgba(56, 224, 143, 0.13));
+  background: var(--aw-primary-bg);
   color: var(--aw-accent-strong);
 }
 
 button.danger {
   border-color: rgba(255, 107, 107, 0.68);
-  color: #ffb3b3;
+  color: var(--aw-danger-text);
 }
 
 button:disabled {
@@ -96,7 +193,7 @@ button:disabled {
   @apply grid items-center gap-4 px-4 py-3;
   grid-template-columns: minmax(220px, 1fr) auto auto;
   border-bottom: 1px solid var(--aw-border);
-  background: rgba(7, 11, 10, 0.88);
+  background: var(--aw-topbar-bg);
   backdrop-filter: blur(16px);
 }
 
@@ -150,6 +247,60 @@ h2 {
   @apply justify-end;
 }
 
+.log-actions {
+  @apply flex items-center gap-2;
+}
+
+.log-autoscroll {
+  @apply inline-flex items-center gap-1.5;
+  color: var(--aw-muted);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.log-autoscroll input {
+  width: 13px;
+  height: 13px;
+  margin: 0;
+}
+
+.theme-toggle {
+  @apply px-2.5;
+  min-width: 92px;
+}
+
+.theme-toggle-track {
+  width: 34px;
+  height: 18px;
+  flex: none;
+  position: relative;
+  border-radius: 999px;
+  border: 1px solid var(--aw-border-strong);
+  background: var(--aw-surface-bg);
+}
+
+.theme-toggle-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+  background: var(--aw-accent-strong);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
+  transition: transform 0.18s ease;
+}
+
+:root[data-theme="dark"] .theme-toggle-thumb {
+  transform: translateX(16px);
+}
+
+.theme-toggle-label {
+  font-size: 12px;
+  line-height: 1;
+}
+
 .connection {
   @apply inline-flex min-w-24 justify-center rounded-full px-2.5 py-1 text-xs font-bold;
   border: 1px solid currentColor;
@@ -181,28 +332,70 @@ h2 {
 .details-pane,
 .log-pane,
 .help-panel,
-.work-panel {
+.work-panel,
+.git-workspace {
   @apply grid min-h-0 overflow-hidden rounded-lg;
   grid-template-rows: auto minmax(0, 1fr);
   border: 1px solid var(--aw-border);
-  background: linear-gradient(180deg, rgba(15, 23, 20, 0.96), rgba(10, 16, 14, 0.96));
+  background: var(--aw-panel-bg);
   box-shadow: var(--aw-glow);
 }
 
 .details-pane {
-  gap: 10px;
-  grid-template-rows: auto minmax(92px, 0.24fr) minmax(0, 1fr);
+  gap: 0;
+  grid-template-rows: auto auto minmax(0, 1fr);
 }
 
 .split-panels {
-  @apply grid min-h-0 gap-3;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  @apply grid min-h-0;
+  --aw-work-panel-width: 36%;
+  grid-template-columns: minmax(220px, var(--aw-work-panel-width)) 12px minmax(360px, 1fr);
+  grid-auto-rows: minmax(0, 1fr);
+  grid-row: 3;
+}
+
+.workspace-resizer {
+  position: relative;
+  cursor: col-resize;
+  border-left: 1px solid var(--aw-border);
+  border-right: 1px solid var(--aw-border);
+  background: var(--aw-heading-bg);
+}
+
+.workspace-resizer::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 3px;
+  height: min(220px, 42%);
+  border-radius: 999px;
+  background: var(--aw-border-strong);
+  transform: translate(-50%, -50%);
+  opacity: 0.7;
+}
+
+.workspace-resizer:hover::before,
+.workspace-resizer:focus-visible::before,
+.workspace-resizer.resizing::before {
+  background: var(--aw-accent);
+  opacity: 1;
+}
+
+.workspace-resizer:focus-visible {
+  outline: 2px solid transparent;
+  box-shadow: inset 0 0 0 2px var(--aw-accent);
+}
+
+.workspace-split-resizing {
+  cursor: col-resize;
+  user-select: none;
 }
 
 .pane-heading {
   @apply min-h-10 justify-between px-3 py-2;
   border-bottom: 1px solid var(--aw-border);
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
+  background: var(--aw-heading-bg);
 }
 
 .flows-list {
@@ -253,19 +446,455 @@ h2 {
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
   font-size: 12px;
   line-height: 1.5;
-  background: rgba(7, 11, 10, 0.42);
-  color: #d7eadf;
+  background: var(--aw-surface-bg);
+  color: var(--aw-text-panel-text);
 }
 
 .text-panel.compact {
   border-bottom: 1px solid var(--aw-border);
 }
 
+.progress-tree {
+  @apply m-0 grid min-h-0 content-start gap-1 overflow-auto p-2;
+  background: var(--aw-surface-bg);
+  color: var(--aw-text-panel-text);
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.progress-tree.fallback {
+  display: block;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  line-height: 1.5;
+}
+
+.progress-flow-label {
+  @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;
+  color: var(--aw-text);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: none;
+}
+
+.progress-row {
+  @apply grid min-w-0 items-start gap-2 rounded-md border border-transparent px-2 py-1.5;
+  grid-template-columns: 18px minmax(0, 1fr);
+  min-height: 32px;
+}
+
+.progress-marker {
+  @apply inline-flex h-5 w-5 items-center justify-center rounded-full text-xs font-bold;
+  border: 1px solid currentColor;
+  line-height: 1;
+}
+
+.progress-row-body {
+  @apply grid min-w-0 gap-0.5;
+}
+
+.progress-label,
+.progress-detail {
+  @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+.progress-detail {
+  color: var(--aw-muted);
+  font-size: 11px;
+}
+
+.progress-row.kind-group .progress-label {
+  font-weight: 800;
+}
+
+.progress-row.kind-phase .progress-label {
+  font-weight: 700;
+}
+
+.progress-row.kind-step .progress-label,
+.progress-row.kind-termination .progress-label {
+  font-weight: 600;
+}
+
+.progress-row.status-done {
+  color: var(--aw-success-text);
+  background: var(--aw-success-soft);
+}
+
+.progress-row.status-done .progress-marker {
+  background: var(--aw-success-soft);
+}
+
+.progress-row.status-running {
+  border-color: rgba(101, 216, 255, 0.56);
+  background: var(--aw-running-soft);
+  color: var(--aw-running-text);
+  box-shadow: inset 3px 0 0 rgba(101, 216, 255, 0.82);
+}
+
+.progress-row.status-running .progress-marker {
+  background: var(--aw-running-soft);
+}
+
+.progress-row.status-pending {
+  color: var(--aw-pending-text);
+}
+
+.progress-row.status-pending .progress-marker {
+  color: var(--aw-muted);
+  background: var(--aw-muted-bg);
+}
+
+.progress-row.status-skipped {
+  color: var(--aw-dim);
+  background: var(--aw-muted-bg);
+}
+
+.progress-row.status-skipped .progress-marker {
+  background: var(--aw-muted-bg);
+}
+
+.progress-row.status-success {
+  color: var(--aw-success-text);
+  background: var(--aw-success-soft);
+}
+
+.progress-row.status-success .progress-marker {
+  background: var(--aw-success-soft);
+}
+
+.progress-row.status-waiting-user,
+.progress-row.status-stopped,
+.progress-row.status-blocked {
+  border-color: rgba(242, 201, 76, 0.58);
+  background: var(--aw-warning-soft);
+  color: var(--aw-warning-text);
+}
+
+.progress-row.status-failed,
+.progress-row.status-invalid {
+  border-color: rgba(255, 107, 107, 0.66);
+  background: var(--aw-danger-soft);
+  color: var(--aw-danger-text);
+}
+
+.progress-row.status-disabled,
+.progress-row.status-empty {
+  color: var(--aw-dim);
+  background: var(--aw-muted-bg);
+}
+
+.auto-flow-editor {
+  @apply grid gap-1.5 overflow-auto px-2 pb-2;
+  height: min(56vh, 520px);
+  min-height: 120px;
+  max-height: min(72vh, 640px);
+  font-size: 12px;
+}
+
+.auto-flow-resizer {
+  position: relative;
+  height: 12px;
+  cursor: row-resize;
+  border-top: 1px solid var(--aw-border);
+  border-bottom: 1px solid var(--aw-border);
+  background: var(--aw-heading-bg);
+}
+
+.auto-flow-resizer::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: min(220px, 42%);
+  height: 3px;
+  border-radius: 999px;
+  background: var(--aw-border-strong);
+  transform: translate(-50%, -50%);
+  opacity: 0.7;
+}
+
+.auto-flow-resizer:hover::before,
+.auto-flow-resizer:focus-visible::before,
+.auto-flow-resizer.resizing::before {
+  background: var(--aw-accent);
+  opacity: 1;
+}
+
+.auto-flow-resizer:focus-visible {
+  outline: 2px solid transparent;
+  box-shadow: inset 0 0 0 2px var(--aw-accent);
+}
+
+.auto-flow-resizing {
+  cursor: row-resize;
+  user-select: none;
+}
+
+.auto-flow-toolbar,
+.auto-flow-block,
+.auto-flow-insert,
+.auto-flow-params {
+  @apply flex flex-wrap items-center gap-2;
+}
+
+.auto-flow-toolbar {
+  @apply py-1.5;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  margin-inline: calc(var(--spacing) * -2);
+  padding-inline: calc(var(--spacing) * 2);
+  border-bottom: 1px solid var(--aw-border);
+  background: var(--aw-panel-bg);
+}
+
+.auto-flow-toolbar button {
+  min-height: 26px;
+  padding: 3px 10px;
+  font-size: 12px;
+}
+
+.auto-flow-status,
+.auto-flow-pill,
+.auto-flow-locked {
+  @apply inline-flex items-center justify-center rounded-full border font-bold;
+  min-height: 16px;
+  padding: 1px 5px;
+  font-size: 10px;
+  line-height: 1;
+}
+
+.auto-flow-status.valid,
+.auto-flow-pill.status-success,
+.auto-flow-pill.status-running {
+  color: var(--aw-accent-strong);
+  border-color: rgba(56, 224, 143, 0.68);
+  background: var(--aw-success-soft);
+}
+
+.auto-flow-status.invalid,
+.auto-flow-pill.status-invalid,
+.auto-flow-pill.status-failed {
+  color: var(--aw-danger-text);
+  border-color: rgba(255, 107, 107, 0.66);
+  background: var(--aw-danger-soft);
+}
+
+.auto-flow-pill.status-disabled,
+.auto-flow-pill.status-empty,
+.auto-flow-locked {
+  color: var(--aw-dim);
+  border-color: var(--aw-border);
+  background: var(--aw-muted-bg);
+}
+
+.auto-flow-message,
+.auto-flow-reason,
+.auto-flow-empty {
+  color: var(--aw-muted);
+  font-size: 11px;
+  line-height: 1.25;
+}
+
+.auto-flow-diagnostics {
+  @apply grid gap-1 rounded-md border p-2;
+  color: var(--aw-danger-text);
+  border-color: rgba(255, 107, 107, 0.5);
+  background: var(--aw-danger-soft);
+  font-size: 12px;
+}
+
+.auto-flow-slots {
+  @apply grid gap-1.5;
+}
+
+.auto-flow-slot {
+  @apply grid rounded-md border;
+  gap: 3px;
+  padding: 6px 8px;
+  border-color: var(--aw-border);
+  background: var(--aw-surface-bg);
+}
+
+.auto-flow-slot-title,
+.auto-flow-block-label {
+  @apply flex flex-wrap items-center gap-1.5;
+  line-height: 1.2;
+}
+
+.auto-flow-slot-title strong,
+.auto-flow-block-label strong {
+  font-size: 13px;
+}
+
+.auto-flow-blocks {
+  @apply grid gap-0.5;
+}
+
+.auto-flow-block {
+  @apply rounded-md border;
+  padding: 5px 7px;
+  border-color: var(--aw-inset-border);
+  background: var(--aw-muted-bg);
+}
+
+.auto-flow-block-main {
+  @apply grid min-w-0 gap-0.5;
+}
+
+.auto-flow-params input,
+.auto-flow-insert select {
+  min-height: 26px;
+  border-radius: var(--radius-md);
+  padding: 2px 6px;
+  border: 1px solid var(--aw-border-strong);
+  color: var(--aw-text);
+  background: var(--aw-input-bg);
+  font-size: 11px;
+}
+
+.git-body {
+  @apply grid min-h-0 gap-1.5 overflow-auto p-1.5;
+  grid-template-rows: auto auto minmax(72px, 1fr) auto auto;
+  background: var(--aw-surface-bg);
+}
+
+.git-summary,
+.git-feedback,
+.git-empty {
+  color: var(--aw-muted);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.git-summary strong {
+  color: var(--aw-text);
+}
+
+.git-actions,
+.git-commit-actions {
+  @apply flex flex-wrap items-center gap-2;
+}
+
+.git-actions input,
+.git-actions select,
+.git-commit-row textarea {
+  @apply min-h-8 rounded-md px-2 py-1.5;
+  min-width: 0;
+  border: 1px solid var(--aw-border-strong);
+  background: var(--aw-input-bg);
+  color: var(--aw-text);
+  font-size: 12px;
+}
+
+.git-actions input {
+  width: min(210px, 100%);
+}
+
+.git-actions select {
+  width: min(190px, 100%);
+}
+
+.git-files {
+  @apply grid content-start gap-0.5 overflow-auto rounded-md p-1;
+  border: 1px solid var(--aw-border);
+  background: var(--aw-surface-subtle-bg);
+}
+
+.git-tree-node {
+  @apply grid gap-0;
+}
+
+.git-tree-row {
+  @apply grid items-center gap-1.5 rounded-md px-1.5 py-0.5;
+  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
+  min-height: 24px;
+  border: 1px solid transparent;
+  color: var(--aw-text-panel-text);
+  font-size: 11px;
+  line-height: 1.25;
+}
+
+.git-tree-row.without-type {
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+}
+
+.git-tree-row:hover {
+  border-color: var(--aw-border-strong);
+  background: var(--aw-muted-bg);
+}
+
+.git-tree-row input {
+  margin: 0;
+  width: 13px;
+  height: 13px;
+}
+
+.git-tree-group {
+  color: var(--aw-accent-strong);
+  background: var(--aw-success-soft);
+}
+
+.git-tree-dir {
+  color: var(--aw-text);
+}
+
+.git-file-type {
+  @apply inline-flex items-center justify-center rounded-full font-bold uppercase tracking-normal;
+  min-height: 14px;
+  padding: 1px 4px;
+  font-size: 9px;
+  line-height: 1;
+  border: 1px solid var(--aw-border-strong);
+  color: var(--aw-cyan);
+  background: var(--aw-file-badge-bg);
+}
+
+.git-file-type.staged {
+  border-color: rgba(56, 224, 143, 0.72);
+  color: var(--aw-accent-strong);
+  background: var(--aw-success-soft);
+}
+
+.git-file-path {
+  @apply overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+.git-file-meta {
+  color: var(--aw-dim);
+  font-size: 10px;
+}
+
+.git-diff-open {
+  min-height: 22px;
+  padding: 1px 6px;
+  font-size: 10px;
+}
+
+.git-commit-row {
+  @apply grid gap-2;
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.git-commit-row textarea {
+  width: 100%;
+  resize: vertical;
+}
+
+.git-feedback.error {
+  color: var(--aw-danger-text);
+}
+
+.git-feedback.success {
+  color: var(--aw-success-text);
+}
+
 .log-output {
-  background:
-    linear-gradient(180deg, rgba(56, 224, 143, 0.035), transparent 8rem),
-    #050806;
-  color: #d8f7e7;
+  background: var(--aw-log-bg);
+  color: var(--aw-code-text);
 }
 
 .help-panel {
@@ -283,14 +912,14 @@ h2 {
   width: min(1120px, calc(100vw - 32px));
   grid-template-rows: auto auto minmax(0, 1fr);
   border-left: 1px solid var(--aw-border-strong);
-  background: rgba(10, 16, 14, 0.98);
+  background: var(--aw-drawer-bg);
   box-shadow: var(--aw-shadow);
 }
 
 .artifact-drawer-header {
   @apply flex items-start justify-between gap-3 px-4 py-3;
   border-bottom: 1px solid var(--aw-border);
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
+  background: var(--aw-heading-bg);
 }
 
 .artifact-drawer-header p,
@@ -336,11 +965,21 @@ h2 {
   color: var(--aw-dim);
 }
 
+.artifact-subgroup {
+  @apply gap-1 border-l pl-3 py-1;
+  border-color: var(--aw-border);
+}
+
+.artifact-subgroup h4 {
+  @apply m-0 text-xs font-bold tracking-normal;
+  color: var(--aw-muted);
+}
+
 .artifact-row {
   @apply grid items-center gap-2 rounded-md p-2;
   grid-template-columns: minmax(0, 1fr) auto;
   border: 1px solid var(--aw-border);
-  background: rgba(7, 11, 10, 0.42);
+  background: var(--aw-surface-bg);
 }
 
 .artifact-row.selected {
@@ -404,7 +1043,7 @@ h2 {
 .artifact-preview-header {
   @apply grid gap-2 px-3 py-2;
   border-bottom: 1px solid var(--aw-border);
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
+  background: var(--aw-heading-bg);
 }
 
 .artifact-selected {
@@ -423,7 +1062,7 @@ h2 {
 .artifact-action-link {
   @apply inline-flex min-h-8 items-center justify-center rounded-md px-3 py-1.5;
   border: 1px solid var(--aw-border-strong);
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
+  background: var(--aw-control-bg);
 }
 
 .artifact-action-link.disabled {
@@ -505,17 +1144,17 @@ h2 {
 .artifact-rendered-markdown code {
   border: 1px solid var(--aw-border);
   border-radius: 4px;
-  background: rgba(101, 216, 255, 0.08);
+  background: var(--aw-code-bg);
   padding: 0.08rem 0.28rem;
-  color: #d8f7e7;
+  color: var(--aw-code-text);
 }
 
 .artifact-rendered-markdown pre,
 .artifact-text-preview {
   @apply m-0 overflow-auto rounded-md p-3;
   border: 1px solid var(--aw-border);
-  background: rgba(3, 7, 6, 0.62);
-  color: #d7eadf;
+  background: var(--aw-pre-bg);
+  color: var(--aw-pre-text);
   font-size: 12px;
   line-height: 1.5;
   overflow-wrap: anywhere;
@@ -543,7 +1182,7 @@ h2 {
 }
 
 .artifact-rendered-markdown th {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--aw-muted-bg);
   color: var(--aw-accent-strong);
 }
 
@@ -559,8 +1198,8 @@ h2 {
 .artifact-truncation {
   @apply rounded-md px-3 py-2;
   border: 1px solid rgba(242, 201, 76, 0.42);
-  background: rgba(242, 201, 76, 0.11);
-  color: #ffe49a;
+  background: var(--aw-warning-soft);
+  color: var(--aw-warning-text);
   font-size: 13px;
 }
 
@@ -568,13 +1207,13 @@ h2 {
   @apply inline-flex w-fit rounded-full px-2.5 py-1 text-xs font-bold uppercase tracking-normal;
   border: 1px solid var(--aw-border-strong);
   color: var(--aw-cyan);
-  background: rgba(101, 216, 255, 0.09);
+  background: var(--aw-file-badge-bg);
 }
 
 .artifact-placeholder {
   @apply grid gap-3 rounded-md p-3;
   border: 1px dashed var(--aw-border-strong);
-  background: rgba(7, 11, 10, 0.38);
+  background: var(--aw-surface-bg);
 }
 
 .artifact-placeholder dl {
@@ -600,7 +1239,179 @@ h2 {
 .artifact-empty {
   @apply rounded-md p-3;
   border: 1px dashed var(--aw-border);
-  background: rgba(7, 11, 10, 0.32);
+  background: var(--aw-surface-bg);
+}
+
+.git-diff-drawer {
+  @apply fixed right-0 top-0 z-10 grid h-full;
+  width: min(1240px, calc(100vw - 24px));
+  grid-template-rows: auto auto minmax(0, 1fr);
+  border-left: 1px solid var(--aw-border-strong);
+  background: var(--aw-drawer-bg);
+  box-shadow: var(--aw-shadow);
+}
+
+.git-diff-drawer-header {
+  @apply flex items-start justify-between gap-3 px-4 py-3;
+  border-bottom: 1px solid var(--aw-border);
+  background: var(--aw-heading-bg);
+}
+
+.git-diff-drawer-header p,
+.git-diff-status,
+.git-diff-empty,
+.git-diff-file span,
+.git-diff-selected p {
+  color: var(--aw-muted);
+  font-size: 13px;
+}
+
+.git-diff-status {
+  min-height: 38px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--aw-border);
+}
+
+.git-diff-drawer-body {
+  @apply grid min-h-0;
+  grid-template-columns: minmax(270px, 0.28fr) minmax(620px, 1fr);
+}
+
+.git-diff-file-pane,
+.git-diff-preview {
+  @apply grid min-h-0;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.git-diff-file-pane {
+  border-right: 1px solid var(--aw-border);
+}
+
+.git-diff-file-list {
+  @apply grid min-h-0 content-start gap-2 overflow-auto p-3;
+}
+
+.git-diff-file {
+  @apply grid w-full justify-stretch gap-1 rounded-md p-2 text-left;
+  border: 1px solid var(--aw-border);
+  background: var(--aw-surface-bg);
+  box-shadow: none;
+}
+
+.git-diff-file.selected {
+  border-color: rgba(101, 216, 255, 0.72);
+  background: var(--aw-running-soft);
+}
+
+.git-diff-file strong,
+.git-diff-file span {
+  @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+.git-diff-preview {
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.git-diff-preview-header {
+  @apply grid gap-2 px-3 py-2;
+  grid-template-columns: minmax(0, 1fr) auto;
+  border-bottom: 1px solid var(--aw-border);
+  background: var(--aw-heading-bg);
+}
+
+.git-diff-selected {
+  @apply grid min-w-0 gap-1;
+}
+
+.git-diff-selected h2,
+.git-diff-selected p {
+  @apply overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+.git-diff-mode-controls {
+  @apply flex flex-wrap items-center justify-end gap-2;
+}
+
+.git-diff-body {
+  @apply min-h-0 overflow-auto p-3;
+  background: var(--aw-surface-bg);
+  color: var(--aw-text-panel-text);
+  font-size: 12px;
+}
+
+.git-diff-table {
+  display: grid;
+  min-width: 760px;
+  grid-auto-rows: minmax(26px, auto);
+  border: 1px solid var(--aw-border);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.git-diff-hunk,
+.git-diff-row {
+  display: grid;
+  grid-template-columns: 58px minmax(260px, 1fr) 58px minmax(260px, 1fr);
+}
+
+.git-diff-hunk {
+  grid-column: 1 / -1;
+  padding: 7px 10px;
+  border-top: 1px solid var(--aw-border);
+  border-bottom: 1px solid var(--aw-border);
+  background: var(--aw-running-soft);
+  color: var(--aw-running-text);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  font-weight: 700;
+}
+
+.git-diff-table .git-diff-hunk:first-child {
+  border-top: 0;
+}
+
+.git-diff-row {
+  border-bottom: 1px solid var(--aw-diff-border);
+}
+
+.git-diff-row:last-child {
+  border-bottom: 0;
+}
+
+.git-diff-line-number,
+.git-diff-code {
+  min-width: 0;
+  padding: 4px 8px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.git-diff-line-number {
+  color: var(--aw-dim);
+  text-align: right;
+  user-select: none;
+  border-right: 1px solid var(--aw-diff-border);
+  background: var(--aw-diff-line-number-bg);
+}
+
+.git-diff-code.left {
+  border-right: 1px solid var(--aw-border);
+}
+
+.git-diff-row.row-add .right,
+.git-diff-row.row-modify .right {
+  background: var(--aw-diff-add-bg);
+  color: var(--aw-diff-add-text);
+}
+
+.git-diff-row.row-delete .left,
+.git-diff-row.row-modify .left {
+  background: var(--aw-diff-delete-bg);
+  color: var(--aw-diff-delete-text);
+}
+
+.git-diff-row.row-context .git-diff-code {
+  background: var(--aw-diff-context-bg);
 }
 
 .modal-root:empty {
@@ -609,7 +1420,7 @@ h2 {
 
 .modal-root {
   @apply fixed inset-0 z-20 grid place-items-center p-5;
-  background: rgba(2, 5, 4, 0.72);
+  background: var(--aw-modal-overlay);
   backdrop-filter: blur(8px);
 }
 
@@ -695,7 +1506,7 @@ h2 {
 .field select {
   @apply min-h-9 w-full rounded-md px-2.5 py-2;
   border: 1px solid var(--aw-border-strong);
-  background: #070b0a;
+  background: var(--aw-input-bg);
   color: var(--aw-text);
 }
 
@@ -704,7 +1515,7 @@ h2 {
 .field select:focus {
   border-color: var(--aw-accent);
   outline: 2px solid transparent;
-  box-shadow: 0 0 0 3px rgba(56, 224, 143, 0.12);
+  box-shadow: 0 0 0 3px var(--aw-control-ring);
 }
 
 .field textarea {
@@ -726,7 +1537,7 @@ h2 {
 }
 
 ::selection {
-  background: rgba(56, 224, 143, 0.32);
+  background: var(--aw-accent-soft);
   color: var(--aw-text);
 }
 
@@ -736,13 +1547,13 @@ h2 {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #284137;
-  border: 2px solid #08100d;
+  background: var(--aw-scrollbar-thumb);
+  border: 2px solid var(--aw-scrollbar-track);
   border-radius: 999px;
 }
 
 ::-webkit-scrollbar-track {
-  background: #08100d;
+  background: var(--aw-scrollbar-track);
 }
 
 @media (max-width: 1080px) {
@@ -757,7 +1568,7 @@ h2 {
 
   .workspace {
     grid-template-columns: minmax(220px, 0.35fr) minmax(0, 1fr);
-    grid-template-rows: minmax(260px, 42vh) minmax(320px, 1fr);
+    grid-template-rows: minmax(260px, 42vh) minmax(520px, 1fr);
   }
 
   .log-pane {
@@ -769,9 +1580,17 @@ h2 {
     width: min(960px, calc(100vw - 18px));
   }
 
+  .git-diff-drawer {
+    width: min(1000px, calc(100vw - 18px));
+  }
+
   .artifact-drawer-body {
     grid-template-columns: minmax(280px, 0.45fr) minmax(360px, 1fr);
   }
+
+  .git-diff-drawer-body {
+    grid-template-columns: minmax(250px, 0.35fr) minmax(520px, 1fr);
+  }
 }
 
 @media (max-width: 760px) {
@@ -791,8 +1610,12 @@ h2 {
     grid-template-columns: 1fr;
   }
 
+  .workspace-resizer {
+    display: none;
+  }
+
   .workspace {
-    grid-template-rows: 260px 520px 340px;
+    grid-template-rows: 260px 760px 340px;
   }
 
   .artifact-drawer {
@@ -805,6 +1628,15 @@ h2 {
     border-top: 1px solid var(--aw-border-strong);
   }
 
+  .git-diff-drawer {
+    top: auto;
+    bottom: 0;
+    height: min(94vh, 820px);
+    width: 100vw;
+    border-left: 0;
+    border-top: 1px solid var(--aw-border-strong);
+  }
+
   .artifact-drawer-header {
     align-items: flex-start;
   }
@@ -814,11 +1646,29 @@ h2 {
     grid-template-rows: minmax(190px, 0.42fr) minmax(260px, 1fr);
   }
 
+  .git-diff-drawer-body {
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(160px, 0.32fr) minmax(360px, 1fr);
+  }
+
   .artifact-list-pane {
     border-right: 0;
     border-bottom: 1px solid var(--aw-border);
   }
 
+  .git-diff-file-pane {
+    border-right: 0;
+    border-bottom: 1px solid var(--aw-border);
+  }
+
+  .git-diff-preview-header {
+    grid-template-columns: 1fr;
+  }
+
+  .git-diff-mode-controls {
+    justify-content: flex-start;
+  }
+
   .artifact-row {
     grid-template-columns: 1fr;
   }
@@ -846,4 +1696,8 @@ h2 {
     grid-template-columns: 1fr;
     gap: 12px;
   }
+
+  .git-commit-row {
+    grid-template-columns: 1fr;
+  }
 }