agent-canvas 0.1.0

package/daemon/client/styles.css

@@ -0,0 +1,306 @@
+@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
+
+@import "tailwindcss";
+@import "./theme.css";
+@source "./**/*.{tsx,ts,jsx,js}";
+
+/* ── Non-theme CSS variables (not used by Tailwind utilities, just custom CSS) ── */
+:root {
+  --color-shadow: rgba(0, 0, 0, 0.25);
+  --color-scrollbar: rgba(255, 248, 240, 0.06);
+  --color-scrollbar-hover: rgba(255, 248, 240, 0.12);
+  --color-folder-fill: rgba(196, 154, 58, 0.15);
+  --color-folder-fill-active: rgba(196, 154, 58, 0.25);
+  --color-folder-stroke: rgba(196, 154, 58, 0.5);
+  --color-folder-stroke-active: #c49a3a;
+  --color-hljs-base: #c4beb7;
+  --color-hljs-keyword: #d2a6ff;
+  --color-hljs-string: #a8cc8c;
+  --color-hljs-comment: #847d75;
+  --color-hljs-number: #e8a87c;
+  --color-hljs-variable: #7ec8e3;
+  --color-hljs-function: #dbc074;
+  --color-hljs-punctuation: #a09a92;
+}
+
+[data-theme="light"] {
+  /* Override Tailwind theme vars */
+  --color-bg-base: #faf5e6;
+  --color-bg-surface: #f3edd8;
+  --color-bg-elevated: #ebe4ce;
+  --color-bg-code: #f0ebd5;
+  --color-bg-input: rgba(80, 60, 10, 0.05);
+  --color-bg-elevated-half: rgba(235, 228, 206, 0.5);
+
+  --color-text-primary: #2a2520;
+  --color-text-secondary: #5a5550;
+  --color-text-tertiary: #9a9390;
+  --color-text-code: #4a4540;
+  --color-text-disabled: #c5c0b8;
+  --color-text-inverse: #faf6ef;
+
+  --color-border-subtle: rgba(80, 60, 30, 0.08);
+  --color-border-medium: rgba(80, 60, 30, 0.10);
+  --color-border-hover: rgba(80, 60, 30, 0.15);
+  --color-border-strong: rgba(80, 60, 30, 0.20);
+
+  --color-accent-green: #3a8a5a;
+  --color-accent-green-muted: rgba(58, 138, 90, 0.10);
+  --color-accent-amber: #a07820;
+  --color-accent-amber-muted: rgba(160, 120, 32, 0.10);
+  --color-accent-red: #b84a4a;
+  --color-accent-red-muted: rgba(184, 74, 74, 0.08);
+  --color-accent-blue: #4a7eb4;
+  --color-accent-blue-muted: rgba(74, 126, 180, 0.08);
+
+  --color-highlight-bg: rgba(200, 160, 30, 0.15);
+  --color-highlight-border: rgba(200, 160, 30, 0.40);
+  --color-highlight-annotation: rgba(200, 160, 30, 0.18);
+  --color-highlight-active: rgba(200, 160, 30, 0.25);
+  --color-highlight-selected: rgba(200, 160, 30, 0.10);
+
+  --color-badge-bg: rgba(160, 120, 32, 0.15);
+  --color-btn-primary: #2a2520;
+  --color-btn-primary-text: #faf6ef;
+
+  /* Override non-theme vars */
+  --color-shadow: rgba(80, 60, 30, 0.10);
+  --color-scrollbar: rgba(80, 60, 30, 0.08);
+  --color-scrollbar-hover: rgba(80, 60, 30, 0.15);
+  --color-folder-fill: rgba(160, 120, 32, 0.12);
+  --color-folder-fill-active: rgba(160, 120, 32, 0.22);
+  --color-folder-stroke: rgba(160, 120, 32, 0.4);
+  --color-folder-stroke-active: #a07820;
+  --color-hljs-base: #4a4540;
+  --color-hljs-keyword: #7c3aed;
+  --color-hljs-string: #2e7d32;
+  --color-hljs-comment: #9a9390;
+  --color-hljs-number: #c45a20;
+  --color-hljs-variable: #1976d2;
+  --color-hljs-function: #8a6d00;
+  --color-hljs-punctuation: #6b6560;
+}
+
+/* ── Base styles ── */
+@layer base {
+  body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    background-color: var(--color-bg-base);
+    color: var(--color-text-primary);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+code, pre, .font-mono {
+  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+}
+
+/* Annotation highlight */
+.annotation-highlight {
+  background: var(--color-highlight-bg);
+  border-bottom: 2px solid var(--color-highlight-border);
+  border-radius: 2px;
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+
+.annotation-highlight:hover,
+.annotation-highlight.active {
+  background: var(--color-highlight-active);
+}
+
+/* Selection color */
+::selection {
+  background-color: var(--color-highlight-active);
+  color: var(--color-text-primary);
+}
+
+/* Focus ring */
+*:focus-visible {
+  outline: 2px solid var(--color-accent-blue);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+textarea:focus-visible {
+  outline: none;
+}
+
+/* Transitions */
+button, a, [role="button"] {
+  transition: all 150ms ease;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-scrollbar);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-scrollbar-hover);
+}
+
+/* Diff highlights for compare view */
+.diff-added {
+  background-color: color-mix(in srgb, var(--color-accent-green) 25%, transparent);
+  border-radius: 2px;
+  padding-inline: 1px;
+  padding-block: 1px;
+}
+.diff-removed {
+  background-color: color-mix(in srgb, var(--color-accent-red) 25%, transparent);
+  border-radius: 2px;
+  padding-inline: 1px;
+  padding-block: 1px;
+  text-decoration: line-through;
+  text-decoration-color: var(--color-accent-red);
+}
+
+/* Block-level diff highlights for unified compare view */
+.diff-block-removed {
+  background: color-mix(in srgb, var(--color-accent-red) 8%, transparent);
+  border-left: 3px solid var(--color-accent-red);
+  opacity: 0.7;
+}
+.diff-block-added {
+  background: color-mix(in srgb, var(--color-accent-green) 8%, transparent);
+  border-left: 3px solid var(--color-accent-green);
+}
+.diff-row-removed td {
+  background: color-mix(in srgb, var(--color-accent-red) 10%, transparent);
+  text-decoration: line-through;
+  text-decoration-color: var(--color-accent-red);
+  opacity: 0.6;
+}
+.diff-row-added td {
+  background: color-mix(in srgb, var(--color-accent-green) 10%, transparent);
+}
+.diff-item-removed {
+  background: color-mix(in srgb, var(--color-accent-red) 10%, transparent);
+  text-decoration: line-through;
+  text-decoration-color: var(--color-accent-red);
+  opacity: 0.6;
+}
+.diff-item-added {
+  background: color-mix(in srgb, var(--color-accent-green) 10%, transparent);
+}
+.diff-block-label {
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: uppercase;
+  padding: 1px 6px;
+  border-radius: 3px;
+  pointer-events: none;
+}
+
+/* Plan update flash */
+@keyframes plan-refresh {
+  0%   { opacity: 0.6; }
+  100% { opacity: 1; }
+}
+
+.plan-updated {
+  animation: plan-refresh 300ms ease;
+}
+
+/* Range input styling */
+input[type="range"] {
+  height: 20px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--color-accent-amber);
+  cursor: pointer;
+  border: 2px solid var(--color-bg-base);
+  margin-top: -5px;
+}
+
+input[type="range"]::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--color-accent-amber);
+  cursor: pointer;
+  border: 2px solid var(--color-bg-base);
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 2px;
+  background: transparent;
+}
+
+input[type="range"]::-moz-range-track {
+  height: 4px;
+  border-radius: 2px;
+  background: transparent;
+}
+
+/* highlight.js overrides */
+.hljs {
+  background: transparent !important;
+  color: var(--color-hljs-base) !important;
+}
+
+pre code.hljs {
+  padding: 0 !important;
+}
+
+.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-tag {
+  color: var(--color-hljs-keyword) !important;
+}
+
+.hljs-string, .hljs-title, .hljs-section, .hljs-attribute, .hljs-literal,
+.hljs-template-tag, .hljs-template-variable, .hljs-type {
+  color: var(--color-hljs-string) !important;
+}
+
+.hljs-comment, .hljs-quote, .hljs-deletion, .hljs-meta {
+  color: var(--color-hljs-comment) !important;
+}
+
+.hljs-number, .hljs-regexp, .hljs-addition {
+  color: var(--color-hljs-number) !important;
+}
+
+.hljs-variable, .hljs-attr {
+  color: var(--color-hljs-variable) !important;
+}
+
+.hljs-function .hljs-title, .hljs-title.function_ {
+  color: var(--color-hljs-function) !important;
+}
+
+.hljs-params {
+  color: var(--color-hljs-base) !important;
+}
+
+.hljs-property {
+  color: var(--color-hljs-variable) !important;
+}
+
+.hljs-punctuation {
+  color: var(--color-hljs-punctuation) !important;
+}

package/daemon/client/theme.css

@@ -0,0 +1,66 @@
+@theme {
+  /* Colors — initial values, overridden by [data-theme] in styles.css */
+  --color-bg-base: #1a1915;
+  --color-bg-surface: #1f1e18;
+  --color-bg-elevated: #25241d;
+  --color-bg-code: #1c1b16;
+  --color-bg-input: rgba(255, 248, 220, 0.03);
+  --color-bg-elevated-half: rgba(37, 36, 29, 0.5);
+
+  --color-text-primary: #e8e4df;
+  --color-text-secondary: #a09a92;
+  --color-text-tertiary: #847d75;
+  --color-text-code: #c4beb7;
+  --color-text-disabled: #3a3530;
+  --color-text-inverse: #1a1a1a;
+
+  --color-border-subtle: rgba(255, 248, 240, 0.06);
+  --color-border-medium: rgba(255, 248, 240, 0.08);
+  --color-border-hover: rgba(255, 248, 240, 0.12);
+  --color-border-strong: rgba(255, 248, 240, 0.15);
+
+  --color-accent-green: #4a9e6d;
+  --color-accent-green-muted: rgba(74, 158, 109, 0.12);
+  --color-accent-amber: #c49a3a;
+  --color-accent-amber-muted: rgba(196, 154, 58, 0.12);
+  --color-accent-red: #c45a5a;
+  --color-accent-red-muted: rgba(196, 90, 90, 0.12);
+  --color-accent-blue: #5a8ec4;
+  --color-accent-blue-muted: rgba(90, 142, 196, 0.10);
+
+  --color-highlight-bg: rgba(255, 220, 100, 0.15);
+  --color-highlight-border: rgba(255, 220, 100, 0.35);
+  --color-highlight-annotation: rgba(255, 220, 100, 0.18);
+  --color-highlight-active: rgba(255, 220, 100, 0.25);
+  --color-highlight-selected: rgba(255, 220, 100, 0.10);
+
+  --color-badge-bg: rgba(196, 154, 58, 0.20);
+  --color-btn-primary: #e8e4df;
+  --color-btn-primary-text: #1a1a1a;
+
+  /* Fonts */
+  --font-heading: 'Instrument Serif', Georgia, 'Times New Roman', serif;
+  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+
+  /* Font sizes */
+  --text-section: 1.75rem;
+  --text-section--line-height: 1.25;
+  --text-section--letter-spacing: -0.01em;
+  --text-task-label: 0.9375rem;
+  --text-task-label--line-height: 1.4;
+  --text-body: 0.875rem;
+  --text-body--line-height: 1.65;
+  --text-code: 0.8125rem;
+  --text-code--line-height: 1.6;
+  --text-meta: 0.75rem;
+  --text-meta--line-height: 1.4;
+  --text-meta--letter-spacing: 0.02em;
+  --text-tiny: 0.6875rem;
+  --text-tiny--line-height: 1.4;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px var(--color-shadow);
+  --shadow-md: 0 4px 12px var(--color-shadow);
+  --shadow-lg: 0 8px 24px var(--color-shadow);
+}