-Puter
5df8633eae
Lane C implementation of the Zopu Web Work OS for dogfooding: - Work Unit card/detail projections built from per-issue events only (artifact counts from distinct artifact.updated paths, PR from gitea events, activity timeline, agent summaries). Signal linkage is explicitly 0/unavailable until Lane A relations are integrated. - Persistent composer with Project and Work Unit mode switching. Project mode sends to the global Zopu agent; Work Unit mode sends to the issue-scoped project-manager agent identity. - Collapsed Work Unit cards show title, summary, signal/step/artifact counts, current activity, PR indicator, needs-input indicator. - Expanded Work Unit detail shows objective, timeline, artifacts, PR with directly usable link, needs-input alert, start action. - Project-level Signals panel in the sidebar (not attributed to any issue until a signal-to-issue relation exists). - Dark theme with calm, Apple-like visual direction. - 21 projection tests including 5 cross-issue isolation tests and 2 signal isolation tests proving one issue cannot inherit another issue's artifacts, PR, summary, or project signals. - Mobile-responsive: detail overlay on mobile, sidebar on desktop. No backend or schema changes. Uses existing Convex contracts and Flue agent transport throughout.
131 lines
4.4 KiB
CSS
131 lines
4.4 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@import "shadcn/tailwind.css";
|
|
@source "../../../apps/**/*.{ts,tsx}";
|
|
@source "../**/*.{ts,tsx}";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
:root {
|
|
--background: oklch(1 0 0);
|
|
--foreground: oklch(0.145 0 0);
|
|
--card: oklch(1 0 0);
|
|
--card-foreground: oklch(0.145 0 0);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.145 0 0);
|
|
--primary: oklch(0.205 0 0);
|
|
--primary-foreground: oklch(0.985 0 0);
|
|
--secondary: oklch(0.97 0 0);
|
|
--secondary-foreground: oklch(0.205 0 0);
|
|
--muted: oklch(0.97 0 0);
|
|
--muted-foreground: oklch(0.556 0 0);
|
|
--accent: oklch(0.97 0 0);
|
|
--accent-foreground: oklch(0.205 0 0);
|
|
--destructive: oklch(0.58 0.22 27);
|
|
--border: oklch(0.922 0 0);
|
|
--input: oklch(0.922 0 0);
|
|
--ring: oklch(0.708 0 0);
|
|
--chart-1: oklch(0.809 0.105 251.813);
|
|
--chart-2: oklch(0.623 0.214 259.815);
|
|
--chart-3: oklch(0.546 0.245 262.881);
|
|
--chart-4: oklch(0.488 0.243 264.376);
|
|
--chart-5: oklch(0.424 0.199 265.638);
|
|
--radius: 0.625rem;
|
|
--sidebar: oklch(0.985 0 0);
|
|
--sidebar-foreground: oklch(0.145 0 0);
|
|
--sidebar-primary: oklch(0.205 0 0);
|
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
--sidebar-accent: oklch(0.97 0 0);
|
|
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
--sidebar-border: oklch(0.922 0 0);
|
|
--sidebar-ring: oklch(0.708 0 0);
|
|
}
|
|
|
|
.dark {
|
|
--background: oklch(0.13 0.003 90);
|
|
--foreground: oklch(0.93 0.002 90);
|
|
--card: oklch(0.17 0.004 90);
|
|
--card-foreground: oklch(0.93 0.002 90);
|
|
--popover: oklch(0.17 0.004 90);
|
|
--popover-foreground: oklch(0.93 0.002 90);
|
|
--primary: oklch(0.87 0 0);
|
|
--primary-foreground: oklch(0.17 0.004 90);
|
|
--secondary: oklch(0.22 0.004 90);
|
|
--secondary-foreground: oklch(0.93 0.002 90);
|
|
--muted: oklch(0.22 0.004 90);
|
|
--muted-foreground: oklch(0.62 0.004 90);
|
|
--accent: oklch(0.27 0.005 90);
|
|
--accent-foreground: oklch(0.93 0.002 90);
|
|
--destructive: oklch(0.65 0.2 25);
|
|
--border: oklch(0.28 0.004 90);
|
|
--input: oklch(0.22 0.004 90);
|
|
--ring: oklch(0.5 0.004 90);
|
|
--chart-1: oklch(0.809 0.105 251.813);
|
|
--chart-2: oklch(0.623 0.214 259.815);
|
|
--chart-3: oklch(0.546 0.245 262.881);
|
|
--chart-4: oklch(0.488 0.243 264.376);
|
|
--chart-5: oklch(0.424 0.199 265.638);
|
|
--sidebar: oklch(0.17 0.004 90);
|
|
--sidebar-foreground: oklch(0.93 0.002 90);
|
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
--sidebar-primary-foreground: oklch(0.93 0.002 90);
|
|
--sidebar-accent: oklch(0.22 0.004 90);
|
|
--sidebar-accent-foreground: oklch(0.93 0.002 90);
|
|
--sidebar-border: oklch(0.28 0.004 90);
|
|
--sidebar-ring: oklch(0.5 0.004 90);
|
|
}
|
|
|
|
@theme inline {
|
|
--font-sans: "Inter", sans-serif;
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-ring: var(--ring);
|
|
--color-input: var(--input);
|
|
--color-border: var(--border);
|
|
--color-destructive: var(--destructive);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-card: var(--card);
|
|
--color-foreground: var(--foreground);
|
|
--color-background: var(--background);
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
--radius-2xl: calc(var(--radius) + 8px);
|
|
--radius-3xl: calc(var(--radius) + 12px);
|
|
--radius-4xl: calc(var(--radius) + 16px);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply font-sans bg-background text-foreground;
|
|
}
|
|
html {
|
|
@apply font-sans;
|
|
}
|
|
}
|