agentweaver 0.1.18 → 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,217 +446,1258 @@ 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);
 }
 
-.log-output {
-  background:
-    linear-gradient(180deg, rgba(56, 224, 143, 0.035), transparent 8rem),
-    #050806;
-  color: #d8f7e7;
+.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;
 }
 
-.help-panel {
-  position: absolute;
-  top: 72px;
-  right: 12px;
-  width: min(520px, calc(100vw - 24px));
-  max-height: calc(100vh - 88px);
-  z-index: 6;
-  box-shadow: var(--aw-shadow);
+.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;
 }
 
-.modal-root:empty {
-  display: none;
+.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;
 }
 
-.modal-root {
-  @apply fixed inset-0 z-20 grid place-items-center p-5;
-  background: rgba(2, 5, 4, 0.72);
-  backdrop-filter: blur(8px);
+.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;
 }
 
-.modal {
-  @apply grid w-full rounded-lg;
-  width: min(720px, 100%);
-  max-height: min(760px, calc(100vh - 40px));
-  grid-template-rows: auto minmax(0, 1fr) auto;
-  border: 1px solid var(--aw-border-strong);
-  background: var(--aw-panel);
-  box-shadow: var(--aw-shadow);
+.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;
 }
 
-.modal.form-flow-routing-editor {
-  width: min(940px, 100%);
+.progress-row-body {
+  @apply grid min-w-0 gap-0.5;
 }
 
-.modal-header,
-.modal-body,
-.modal-footer {
-  padding: 12px 14px;
+.progress-label,
+.progress-detail {
+  @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;
 }
 
-.modal-header {
-  border-bottom: 1px solid var(--aw-border);
+.progress-detail {
+  color: var(--aw-muted);
+  font-size: 11px;
 }
 
-.modal-header p,
-.field-help,
-.field-option small,
-.modal-note {
+.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);
-  font-size: 13px;
+  background: var(--aw-muted-bg);
 }
 
-.modal-body {
-  @apply grid min-h-0 gap-3 overflow-auto;
+.progress-row.status-skipped {
+  color: var(--aw-dim);
+  background: var(--aw-muted-bg);
 }
 
-.modal-footer {
-  @apply flex items-center justify-between gap-3;
+.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);
 }
 
-.modal-actions {
-  @apply flex-wrap justify-end;
+.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;
 }
 
-.form-fields {
-  @apply grid gap-3;
+.auto-flow-resizer:hover::before,
+.auto-flow-resizer:focus-visible::before,
+.auto-flow-resizer.resizing::before {
+  background: var(--aw-accent);
+  opacity: 1;
 }
 
-.form-fields.route-fields {
-  gap: 0;
+.auto-flow-resizer:focus-visible {
+  outline: 2px solid transparent;
+  box-shadow: inset 0 0 0 2px var(--aw-accent);
 }
 
-.field-pair {
-  @apply grid items-start gap-4 py-3;
-  grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1.1fr);
+.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);
 }
 
-.field-pair:first-child {
-  padding-top: 0;
+.auto-flow-toolbar button {
+  min-height: 26px;
+  padding: 3px 10px;
+  font-size: 12px;
 }
 
-.field-pair:last-child {
-  border-bottom: 0;
-  padding-bottom: 0;
+.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;
 }
 
-.field {
+.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;
 }
 
-.field label,
-.field-title {
-  font-weight: 700;
+.auto-flow-slot {
+  @apply grid rounded-md border;
+  gap: 3px;
+  padding: 6px 8px;
+  border-color: var(--aw-border);
+  background: var(--aw-surface-bg);
 }
 
-.field input[type="text"],
-.field textarea,
-.field select {
-  @apply min-h-9 w-full rounded-md px-2.5 py-2;
-  border: 1px solid var(--aw-border-strong);
-  background: #070b0a;
-  color: var(--aw-text);
+.auto-flow-slot-title,
+.auto-flow-block-label {
+  @apply flex flex-wrap items-center gap-1.5;
+  line-height: 1.2;
 }
 
-.field input[type="text"]:focus,
-.field textarea:focus,
-.field select:focus {
-  border-color: var(--aw-accent);
-  outline: 2px solid transparent;
-  box-shadow: 0 0 0 3px rgba(56, 224, 143, 0.12);
+.auto-flow-slot-title strong,
+.auto-flow-block-label strong {
+  font-size: 13px;
 }
 
-.field textarea {
-  resize: vertical;
+.auto-flow-blocks {
+  @apply grid gap-0.5;
 }
 
-.check-row,
-.field-option {
-  @apply flex items-start gap-2;
+.auto-flow-block {
+  @apply rounded-md border;
+  padding: 5px 7px;
+  border-color: var(--aw-inset-border);
+  background: var(--aw-muted-bg);
 }
 
-.option-list {
-  @apply grid gap-1.5;
+.auto-flow-block-main {
+  @apply grid min-w-0 gap-0.5;
 }
 
-.error-text {
-  color: var(--aw-danger);
-  font-weight: 700;
+.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;
 }
 
-::selection {
-  background: rgba(56, 224, 143, 0.32);
+.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);
 }
 
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
+.git-actions,
+.git-commit-actions {
+  @apply flex flex-wrap items-center gap-2;
 }
 
-::-webkit-scrollbar-thumb {
-  background: #284137;
-  border: 2px solid #08100d;
-  border-radius: 999px;
+.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;
 }
 
-::-webkit-scrollbar-track {
-  background: #08100d;
+.git-actions input {
+  width: min(210px, 100%);
 }
 
-@media (max-width: 1080px) {
-  body {
-    overflow: auto;
-  }
+.git-actions select {
+  width: min(190px, 100%);
+}
 
-  .app-shell {
-    min-height: 100%;
-    height: auto;
-  }
+.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);
+}
 
-  .workspace {
-    grid-template-columns: minmax(220px, 0.35fr) minmax(0, 1fr);
-    grid-template-rows: minmax(260px, 42vh) minmax(320px, 1fr);
-  }
+.git-tree-node {
+  @apply grid gap-0;
+}
 
-  .log-pane {
-    grid-column: 1 / -1;
-    min-height: 320px;
-  }
+.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;
 }
 
-@media (max-width: 760px) {
-  .topbar {
-    grid-template-columns: 1fr;
-    gap: 10px;
-  }
+.git-tree-row.without-type {
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+}
 
-  .status-strip,
-  .topbar-actions {
-    justify-content: flex-start;
-    flex-wrap: wrap;
-  }
+.git-tree-row:hover {
+  border-color: var(--aw-border-strong);
+  background: var(--aw-muted-bg);
+}
 
-  .workspace,
-  .split-panels {
-    grid-template-columns: 1fr;
-  }
+.git-tree-row input {
+  margin: 0;
+  width: 13px;
+  height: 13px;
+}
 
-  .workspace {
-    grid-template-rows: 260px 520px 340px;
-  }
+.git-tree-group {
+  color: var(--aw-accent-strong);
+  background: var(--aw-success-soft);
+}
 
-  .field-pair {
+.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: var(--aw-log-bg);
+  color: var(--aw-code-text);
+}
+
+.help-panel {
+  position: absolute;
+  top: 72px;
+  right: 12px;
+  width: min(520px, calc(100vw - 24px));
+  max-height: calc(100vh - 88px);
+  z-index: 6;
+  box-shadow: var(--aw-shadow);
+}
+
+.artifact-drawer {
+  @apply fixed right-0 top-0 z-10 grid h-full;
+  width: min(1120px, calc(100vw - 32px));
+  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);
+}
+
+.artifact-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);
+}
+
+.artifact-drawer-header p,
+.artifact-message,
+.artifact-empty,
+.artifact-row-main span,
+.artifact-selected p,
+.artifact-action-status {
+  color: var(--aw-muted);
+  font-size: 13px;
+}
+
+.artifact-message {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--aw-border);
+}
+
+.artifact-drawer-body {
+  @apply grid min-h-0 gap-0;
+  grid-template-columns: minmax(300px, 0.42fr) minmax(420px, 1fr);
+}
+
+.artifact-list-pane,
+.artifact-preview {
+  @apply grid min-h-0;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.artifact-list-pane {
+  border-right: 1px solid var(--aw-border);
+}
+
+.artifact-list {
+  @apply min-h-0 overflow-auto px-3 py-2;
+}
+
+.artifact-group {
+  @apply grid gap-2 py-2;
+}
+
+.artifact-group h3 {
+  @apply m-0 text-xs font-bold uppercase tracking-normal;
+  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: var(--aw-surface-bg);
+}
+
+.artifact-row.selected {
+  border-color: rgba(56, 224, 143, 0.62);
+  background: var(--aw-accent-soft);
+}
+
+.artifact-row-main {
+  @apply grid min-h-0 justify-stretch gap-1 border-0 bg-transparent p-0 text-left;
+  box-shadow: none;
+}
+
+.artifact-row-main:hover,
+.artifact-row-main:focus-visible {
+  box-shadow: none;
+}
+
+.artifact-row-main strong {
+  @apply overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+.artifact-row-meta {
+  @apply grid min-w-0 gap-1;
+  grid-template-columns: auto auto minmax(0, 1fr);
+}
+
+.artifact-row-meta span {
+  @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+.artifact-row-meta span:not(:last-child)::after {
+  content: "|";
+  margin-left: 0.25rem;
+  color: var(--aw-dim);
+}
+
+.artifact-row-actions {
+  @apply flex items-center gap-2;
+}
+
+.artifact-row-actions a,
+.artifact-action-link {
+  color: var(--aw-cyan);
+  font-size: 12px;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.artifact-row-actions a:hover,
+.artifact-row-actions a:focus-visible,
+.artifact-action-link:hover,
+.artifact-action-link:focus-visible {
+  color: var(--aw-accent-strong);
+  text-decoration: underline;
+}
+
+.artifact-preview {
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.artifact-preview-header {
+  @apply grid gap-2 px-3 py-2;
+  border-bottom: 1px solid var(--aw-border);
+  background: var(--aw-heading-bg);
+}
+
+.artifact-selected {
+  @apply grid min-w-0 gap-1;
+}
+
+.artifact-selected h2,
+.artifact-selected p {
+  @apply overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+.artifact-toolbar {
+  @apply flex flex-wrap items-center gap-2;
+}
+
+.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: var(--aw-control-bg);
+}
+
+.artifact-action-link.disabled {
+  color: var(--aw-dim);
+  cursor: not-allowed;
+  opacity: 0.48;
+  pointer-events: none;
+  text-decoration: none;
+}
+
+.artifact-action-status {
+  min-height: 18px;
+}
+
+.artifact-preview-content {
+  @apply grid min-h-0 gap-3 overflow-auto;
+  align-content: start;
+}
+
+.artifact-rendered-markdown {
+  @apply grid gap-3;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--aw-text);
+}
+
+.artifact-rendered-markdown h1,
+.artifact-rendered-markdown h2,
+.artifact-rendered-markdown h3,
+.artifact-rendered-markdown h4,
+.artifact-rendered-markdown h5,
+.artifact-rendered-markdown h6 {
+  margin: 0;
+  color: var(--aw-text);
+  font-weight: 750;
+  text-transform: none;
+}
+
+.artifact-rendered-markdown h1 {
+  font-size: 22px;
+}
+
+.artifact-rendered-markdown h1::before {
+  content: none;
+}
+
+.artifact-rendered-markdown h2 {
+  font-size: 18px;
+}
+
+.artifact-rendered-markdown h3 {
+  font-size: 15px;
+}
+
+.artifact-rendered-markdown p,
+.artifact-rendered-markdown ul,
+.artifact-rendered-markdown ol {
+  margin: 0;
+}
+
+.artifact-rendered-markdown ul,
+.artifact-rendered-markdown ol {
+  padding-left: 1.35rem;
+}
+
+.artifact-rendered-markdown a,
+.artifact-placeholder-actions a {
+  color: var(--aw-cyan);
+  font-weight: 700;
+}
+
+.artifact-rendered-markdown code,
+.artifact-rendered-markdown pre,
+.artifact-text-preview {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+}
+
+.artifact-rendered-markdown code {
+  border: 1px solid var(--aw-border);
+  border-radius: 4px;
+  background: var(--aw-code-bg);
+  padding: 0.08rem 0.28rem;
+  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: var(--aw-pre-bg);
+  color: var(--aw-pre-text);
+  font-size: 12px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.artifact-rendered-markdown pre code {
+  border: 0;
+  background: transparent;
+  padding: 0;
+}
+
+.artifact-rendered-markdown table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.artifact-rendered-markdown th,
+.artifact-rendered-markdown td {
+  border: 1px solid var(--aw-border);
+  padding: 6px 8px;
+  text-align: left;
+  vertical-align: top;
+}
+
+.artifact-rendered-markdown th {
+  background: var(--aw-muted-bg);
+  color: var(--aw-accent-strong);
+}
+
+.artifact-json-viewer {
+  @apply grid gap-3;
+}
+
+.artifact-preview-modes {
+  @apply flex flex-wrap items-center gap-2;
+}
+
+.artifact-preview-warning,
+.artifact-truncation {
+  @apply rounded-md px-3 py-2;
+  border: 1px solid rgba(242, 201, 76, 0.42);
+  background: var(--aw-warning-soft);
+  color: var(--aw-warning-text);
+  font-size: 13px;
+}
+
+.artifact-kind-label {
+  @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: var(--aw-file-badge-bg);
+}
+
+.artifact-placeholder {
+  @apply grid gap-3 rounded-md p-3;
+  border: 1px dashed var(--aw-border-strong);
+  background: var(--aw-surface-bg);
+}
+
+.artifact-placeholder dl {
+  @apply grid gap-2;
+  grid-template-columns: minmax(80px, auto) minmax(0, 1fr);
+  margin: 0;
+}
+
+.artifact-placeholder dt {
+  color: var(--aw-muted);
+  font-weight: 700;
+}
+
+.artifact-placeholder dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.artifact-placeholder-actions {
+  @apply flex flex-wrap gap-3;
+}
+
+.artifact-empty {
+  @apply rounded-md p-3;
+  border: 1px dashed var(--aw-border);
+  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 {
+  display: none;
+}
+
+.modal-root {
+  @apply fixed inset-0 z-20 grid place-items-center p-5;
+  background: var(--aw-modal-overlay);
+  backdrop-filter: blur(8px);
+}
+
+.modal {
+  @apply grid w-full rounded-lg;
+  width: min(720px, 100%);
+  max-height: min(760px, calc(100vh - 40px));
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  border: 1px solid var(--aw-border-strong);
+  background: var(--aw-panel);
+  box-shadow: var(--aw-shadow);
+}
+
+.modal.form-flow-routing-editor {
+  width: min(940px, 100%);
+}
+
+.modal-header,
+.modal-body,
+.modal-footer {
+  padding: 12px 14px;
+}
+
+.modal-header {
+  border-bottom: 1px solid var(--aw-border);
+}
+
+.modal-header p,
+.field-help,
+.field-option small,
+.modal-note {
+  color: var(--aw-muted);
+  font-size: 13px;
+}
+
+.modal-body {
+  @apply grid min-h-0 gap-3 overflow-auto;
+}
+
+.modal-footer {
+  @apply flex items-center justify-between gap-3;
+  border-top: 1px solid var(--aw-border);
+}
+
+.modal-actions {
+  @apply flex-wrap justify-end;
+}
+
+.form-fields {
+  @apply grid gap-3;
+}
+
+.form-fields.route-fields {
+  gap: 0;
+}
+
+.field-pair {
+  @apply grid items-start gap-4 py-3;
+  grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1.1fr);
+  border-bottom: 1px solid var(--aw-border);
+}
+
+.field-pair:first-child {
+  padding-top: 0;
+}
+
+.field-pair:last-child {
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+
+.field {
+  @apply grid gap-1.5;
+}
+
+.field label,
+.field-title {
+  font-weight: 700;
+}
+
+.field input[type="text"],
+.field textarea,
+.field select {
+  @apply min-h-9 w-full rounded-md px-2.5 py-2;
+  border: 1px solid var(--aw-border-strong);
+  background: var(--aw-input-bg);
+  color: var(--aw-text);
+}
+
+.field input[type="text"]:focus,
+.field textarea:focus,
+.field select:focus {
+  border-color: var(--aw-accent);
+  outline: 2px solid transparent;
+  box-shadow: 0 0 0 3px var(--aw-control-ring);
+}
+
+.field textarea {
+  resize: vertical;
+}
+
+.check-row,
+.field-option {
+  @apply flex items-start gap-2;
+}
+
+.option-list {
+  @apply grid gap-1.5;
+}
+
+.error-text {
+  color: var(--aw-danger);
+  font-weight: 700;
+}
+
+::selection {
+  background: var(--aw-accent-soft);
+  color: var(--aw-text);
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--aw-scrollbar-thumb);
+  border: 2px solid var(--aw-scrollbar-track);
+  border-radius: 999px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--aw-scrollbar-track);
+}
+
+@media (max-width: 1080px) {
+  body {
+    overflow: auto;
+  }
+
+  .app-shell {
+    min-height: 100%;
+    height: auto;
+  }
+
+  .workspace {
+    grid-template-columns: minmax(220px, 0.35fr) minmax(0, 1fr);
+    grid-template-rows: minmax(260px, 42vh) minmax(520px, 1fr);
+  }
+
+  .log-pane {
+    grid-column: 1 / -1;
+    min-height: 320px;
+  }
+
+  .artifact-drawer {
+    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) {
+  .topbar {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .status-strip,
+  .topbar-actions {
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .workspace,
+  .split-panels {
+    grid-template-columns: 1fr;
+  }
+
+  .workspace-resizer {
+    display: none;
+  }
+
+  .workspace {
+    grid-template-rows: 260px 760px 340px;
+  }
+
+  .artifact-drawer {
+    top: auto;
+    bottom: 0;
+    height: min(92vh, 760px);
+    width: 100vw;
+    grid-template-rows: auto auto minmax(0, 1fr);
+    border-left: 0;
+    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;
+  }
+
+  .artifact-drawer-body {
+    grid-template-columns: 1fr;
+    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;
+  }
+
+  .artifact-row-actions {
+    justify-content: flex-start;
+  }
+
+  .artifact-row-meta {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .artifact-row-meta span:not(:last-child)::after {
+    content: "";
+    margin-left: 0;
+  }
+
+  .artifact-selected h2,
+  .artifact-selected p {
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .field-pair {
     grid-template-columns: 1fr;
     gap: 12px;
   }
+
+  .git-commit-row {
+    grid-template-columns: 1fr;
+  }
 }