ltcai 4.0.0 → 4.1.0

package/frontend/src/store/appStore.ts

@@ -0,0 +1,54 @@
+import { create } from "zustand";
+
+export type Theme = "dark" | "light";
+export type WorkspaceMode = "basic" | "advanced" | "admin";
+
+type AppState = {
+  theme: Theme;
+  mode: WorkspaceMode;
+  workspaceId: string | null;
+  apiBase: string | null;
+  setTheme: (theme: Theme) => void;
+  setMode: (mode: WorkspaceMode) => void;
+  setWorkspaceId: (workspaceId: string | null) => void;
+  setApiBase: (apiBase: string | null) => void;
+};
+
+function readTheme(): Theme {
+  try {
+    const saved = localStorage.getItem("lattice.theme");
+    if (saved === "light" || saved === "dark") return saved;
+  } catch {}
+  return "dark";
+}
+
+function readMode(): WorkspaceMode {
+  try {
+    const saved = localStorage.getItem("lattice.mode");
+    if (saved === "basic" || saved === "advanced" || saved === "admin") return saved;
+  } catch {}
+  return "basic";
+}
+
+export const useAppStore = create<AppState>((set) => ({
+  theme: readTheme(),
+  mode: readMode(),
+  workspaceId: null,
+  apiBase: null,
+  setTheme: (theme) => {
+    document.documentElement.dataset.theme = theme;
+    try { localStorage.setItem("lattice.theme", theme); } catch {}
+    set({ theme });
+  },
+  setMode: (mode) => {
+    try { localStorage.setItem("lattice.mode", mode); } catch {}
+    set({ mode });
+  },
+  setWorkspaceId: (workspaceId) => {
+    if (workspaceId) {
+      try { localStorage.setItem("lattice.workspace", workspaceId); } catch {}
+    }
+    set({ workspaceId });
+  },
+  setApiBase: (apiBase) => set({ apiBase }),
+}));

package/frontend/src/styles.css

@@ -0,0 +1,107 @@
+@import "tailwindcss";
+@import "reactflow/dist/style.css";
+
+:root {
+  color-scheme: dark;
+  --background: 220 18% 8%;
+  --foreground: 210 30% 96%;
+  --card: 220 16% 11%;
+  --card-foreground: 210 30% 96%;
+  --muted: 218 13% 18%;
+  --muted-foreground: 215 14% 66%;
+  --primary: 176 68% 48%;
+  --primary-foreground: 212 26% 8%;
+  --secondary: 221 14% 20%;
+  --secondary-foreground: 210 30% 96%;
+  --destructive: 355 78% 58%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 218 13% 23%;
+  --input: 218 13% 24%;
+  --ring: 176 68% 48%;
+  --brain: 176 68% 48%;
+  --ask: 216 78% 66%;
+  --capture: 142 58% 56%;
+  --act: 33 92% 58%;
+  --library: 262 68% 70%;
+  --system: 350 72% 68%;
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
+  --background: 210 30% 98%;
+  --foreground: 222 38% 9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222 38% 9%;
+  --muted: 213 24% 92%;
+  --muted-foreground: 219 11% 38%;
+  --primary: 178 72% 32%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 211 24% 90%;
+  --secondary-foreground: 222 38% 9%;
+  --destructive: 355 72% 48%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 214 20% 83%;
+  --input: 214 20% 78%;
+  --ring: 178 72% 32%;
+}
+
+@theme inline {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  min-width: 320px;
+  margin: 0;
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+.brain-grid {
+  background-image:
+    linear-gradient(hsl(var(--border) / 0.34) 1px, transparent 1px),
+    linear-gradient(90deg, hsl(var(--border) / 0.34) 1px, transparent 1px);
+  background-size: 32px 32px;
+}
+
+.scrollbar-thin {
+  scrollbar-width: thin;
+}
+
+.react-flow__node {
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+  background: hsl(var(--card));
+  color: hsl(var(--foreground));
+  padding: 8px 10px;
+  font-size: 12px;
+}
+
+.react-flow__edge-path {
+  stroke: hsl(var(--primary));
+}