@cryptiklemur/lattice 0.0.0

package/client/src/components/project-settings/ProjectClaude.tsx

@@ -0,0 +1,304 @@
+import { useState, useEffect } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { SaveFooter } from "../ui/SaveFooter";
+import { useSaveState } from "../../hooks/useSaveState";
+import type { ProjectSettings, ThinkingConfig } from "@lattice/shared";
+
+var CLAUDE_MODELS = [
+  { id: "claude-opus-4-6", label: "Claude Opus 4.6" },
+  { id: "claude-sonnet-4-6", label: "Claude Sonnet 4.6" },
+  { id: "claude-haiku-4-5", label: "Claude Haiku 4.5" },
+  { id: "claude-opus-4-5", label: "Claude Opus 4.5" },
+  { id: "claude-sonnet-4-5", label: "Claude Sonnet 4.5" },
+];
+
+var EFFORT_LEVELS = [
+  { id: "low", label: "Low" },
+  { id: "normal", label: "Normal" },
+  { id: "high", label: "High" },
+  { id: "max", label: "Max" },
+];
+
+var THINKING_MODES = [
+  { id: "adaptive", label: "Adaptive" },
+  { id: "enabled", label: "Enabled" },
+  { id: "disabled", label: "Disabled" },
+];
+
+var PERMISSION_MODES = [
+  { id: "default", label: "Default" },
+  { id: "acceptEdits", label: "Accept Edits" },
+  { id: "plan", label: "Plan" },
+  { id: "dontAsk", label: "Don't Ask" },
+];
+
+function thinkingLabel(t?: ThinkingConfig): string {
+  if (!t) return "Adaptive";
+  if (t.type === "adaptive") return "Adaptive";
+  if (t.type === "enabled") return "Enabled";
+  return "Disabled";
+}
+
+function modelLabel(id: string): string {
+  var found = CLAUDE_MODELS.find(function (m) { return m.id === id; });
+  return found ? found.label : id;
+}
+
+interface ProjectClaudeProps {
+  settings: ProjectSettings;
+  updateSection: (section: string, data: Record<string, unknown>) => void;
+}
+
+export function ProjectClaude({ settings, updateSection }: ProjectClaudeProps) {
+  var [claudeMd, setClaudeMd] = useState(settings.claudeMd ?? "");
+  var [defaultModel, setDefaultModel] = useState<string | undefined>(settings.defaultModel);
+  var [defaultEffort, setDefaultEffort] = useState<string | undefined>(settings.defaultEffort);
+  var [thinking, setThinking] = useState<ThinkingConfig | undefined>(settings.thinking);
+  var [permissionMode, setPermissionMode] = useState<string | undefined>(settings.permissionMode);
+  var [budgetTokens, setBudgetTokens] = useState<number>(
+    settings.thinking?.type === "enabled" ? (settings.thinking.budgetTokens ?? 10000) : 10000,
+  );
+  var [showGlobalMd, setShowGlobalMd] = useState(false);
+  var save = useSaveState();
+
+  useEffect(function () {
+    if (save.saving) {
+      save.confirmSave();
+    } else {
+      setClaudeMd(settings.claudeMd ?? "");
+      setDefaultModel(settings.defaultModel);
+      setDefaultEffort(settings.defaultEffort);
+      setThinking(settings.thinking);
+      setPermissionMode(settings.permissionMode);
+      if (settings.thinking?.type === "enabled") {
+        setBudgetTokens(settings.thinking.budgetTokens ?? 10000);
+      }
+      save.resetFromServer();
+    }
+  }, [settings]);
+
+  function handleSave() {
+    save.startSave();
+    var thinkingValue: ThinkingConfig | undefined = thinking;
+    if (thinkingValue?.type === "enabled") {
+      thinkingValue = { type: "enabled", budgetTokens };
+    }
+    updateSection("claude", {
+      claudeMd: claudeMd || undefined,
+      defaultModel,
+      defaultEffort,
+      thinking: thinkingValue,
+      permissionMode,
+    });
+  }
+
+  var globalModel = settings.global.defaultModel || CLAUDE_MODELS[0].id;
+  var globalEffort = settings.global.defaultEffort || "normal";
+
+  return (
+    <div className="py-2 space-y-6">
+      <div>
+        <label htmlFor="project-claude-md" className="block text-[12px] font-semibold text-base-content/40 mb-2">
+          Project CLAUDE.md
+        </label>
+        <textarea
+          id="project-claude-md"
+          value={claudeMd}
+          onChange={function (e) { setClaudeMd(e.target.value); save.markDirty(); }}
+          placeholder="# Project-specific instructions for Claude..."
+          rows={10}
+          className="w-full px-3 py-2.5 bg-base-300 border border-base-content/15 rounded-xl text-base-content text-[12px] font-mono leading-relaxed resize-y focus:border-primary focus-visible:outline-none transition-colors duration-[120ms]"
+        />
+        <button
+          type="button"
+          onClick={function () { setShowGlobalMd(!showGlobalMd); }}
+          className="flex items-center gap-1.5 mt-2 text-[11px] text-base-content/40 hover:text-base-content/60 transition-colors"
+        >
+          {showGlobalMd
+            ? <ChevronDown size={12} />
+            : <ChevronRight size={12} />}
+          Global CLAUDE.md (inherited)
+        </button>
+        {showGlobalMd && (
+          <textarea
+            readOnly
+            value={settings.global.claudeMd}
+            rows={8}
+            className="w-full mt-2 px-3 py-2.5 bg-base-300 border border-base-content/15 rounded-xl text-base-content/30 text-[12px] font-mono leading-relaxed resize-y cursor-default focus-visible:outline-none"
+          />
+        )}
+      </div>
+
+      <div>
+        <label htmlFor="project-default-model" className="block text-[12px] font-semibold text-base-content/40 mb-2">
+          Default Model
+        </label>
+        <select
+          id="project-default-model"
+          value={defaultModel ?? ""}
+          onChange={function (e) {
+            var val = e.target.value || undefined;
+            setDefaultModel(val);
+            save.markDirty();
+          }}
+          className="w-full h-9 px-3 bg-base-300 border border-base-content/15 rounded-xl text-base-content text-[13px] focus:border-primary focus-visible:outline-none transition-colors duration-[120ms]"
+        >
+          <option value="" className="bg-base-300">
+            Use global default ({modelLabel(globalModel)})
+          </option>
+          {CLAUDE_MODELS.map(function (m) {
+            return (
+              <option key={m.id} value={m.id} className="bg-base-300">
+                {m.label}
+              </option>
+            );
+          })}
+        </select>
+        {defaultModel && (
+          <button
+            type="button"
+            onClick={function () { setDefaultModel(undefined); save.markDirty(); }}
+            className="mt-1.5 text-[11px] text-primary/70 hover:text-primary transition-colors"
+          >
+            Clear override
+          </button>
+        )}
+      </div>
+
+      <div role="radiogroup" aria-label="Default Effort">
+        <div className="text-[12px] font-semibold text-base-content/40 mb-2">Default Effort</div>
+        <div className="flex gap-2">
+          <button
+            role="radio"
+            aria-checked={defaultEffort === undefined}
+            onClick={function () { setDefaultEffort(undefined); save.markDirty(); }}
+            className={
+              "flex-1 py-2.5 sm:py-1.5 rounded-lg border text-[12px] transition-colors duration-[120ms] cursor-pointer focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:ring-offset-base-100 " +
+              (defaultEffort === undefined
+                ? "border-primary bg-base-300 text-base-content font-semibold"
+                : "border-base-content/15 bg-base-300 text-base-content/40 hover:border-base-content/30 hover:text-base-content/60")
+            }
+          >
+            Global ({globalEffort})
+          </button>
+          {EFFORT_LEVELS.map(function (e) {
+            var active = defaultEffort === e.id;
+            return (
+              <button
+                key={e.id}
+                role="radio"
+                aria-checked={active}
+                onClick={function () { setDefaultEffort(e.id); save.markDirty(); }}
+                className={
+                  "flex-1 py-2.5 sm:py-1.5 rounded-lg border text-[12px] transition-colors duration-[120ms] cursor-pointer focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:ring-offset-base-100 " +
+                  (active
+                    ? "border-primary bg-base-300 text-base-content font-semibold"
+                    : "border-base-content/15 bg-base-300 text-base-content/40 hover:border-base-content/30 hover:text-base-content/60")
+                }
+              >
+                {e.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      <div role="radiogroup" aria-label="Thinking Mode">
+        <div className="text-[12px] font-semibold text-base-content/40 mb-2">Thinking Mode</div>
+        <div className="flex gap-2">
+          <button
+            role="radio"
+            aria-checked={thinking === undefined}
+            onClick={function () { setThinking(undefined); save.markDirty(); }}
+            className={
+              "flex-1 py-2.5 sm:py-1.5 rounded-lg border text-[12px] transition-colors duration-[120ms] cursor-pointer focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:ring-offset-base-100 " +
+              (thinking === undefined
+                ? "border-primary bg-base-300 text-base-content font-semibold"
+                : "border-base-content/15 bg-base-300 text-base-content/40 hover:border-base-content/30 hover:text-base-content/60")
+            }
+          >
+            Global ({thinkingLabel(settings.global.thinking)})
+          </button>
+          {THINKING_MODES.map(function (t) {
+            var active = thinking?.type === t.id;
+            return (
+              <button
+                key={t.id}
+                role="radio"
+                aria-checked={active}
+                onClick={function () {
+                  var cfg: ThinkingConfig = t.id === "enabled"
+                    ? { type: "enabled", budgetTokens }
+                    : { type: t.id as "adaptive" | "disabled" };
+                  setThinking(cfg);
+                  save.markDirty();
+                }}
+                className={
+                  "flex-1 py-2.5 sm:py-1.5 rounded-lg border text-[12px] transition-colors duration-[120ms] cursor-pointer focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:ring-offset-base-100 " +
+                  (active
+                    ? "border-primary bg-base-300 text-base-content font-semibold"
+                    : "border-base-content/15 bg-base-300 text-base-content/40 hover:border-base-content/30 hover:text-base-content/60")
+                }
+              >
+                {t.label}
+              </button>
+            );
+          })}
+        </div>
+        {thinking?.type === "enabled" && (
+          <div className="mt-3">
+            <label htmlFor="budget-tokens" className="block text-[11px] text-base-content/40 mb-1.5">
+              Budget Tokens
+            </label>
+            <input
+              id="budget-tokens"
+              type="number"
+              min={1000}
+              step={1000}
+              value={budgetTokens}
+              onChange={function (e) {
+                var val = parseInt(e.target.value, 10);
+                if (!isNaN(val)) {
+                  setBudgetTokens(val);
+                  setThinking({ type: "enabled", budgetTokens: val });
+                  save.markDirty();
+                }
+              }}
+              className="w-48 h-9 px-3 bg-base-300 border border-base-content/15 rounded-xl text-base-content text-[13px] font-mono focus:border-primary focus-visible:outline-none transition-colors duration-[120ms]"
+            />
+          </div>
+        )}
+      </div>
+
+      <div role="radiogroup" aria-label="Permission Mode">
+        <div className="text-[12px] font-semibold text-base-content/40 mb-2">Permission Mode</div>
+        <div className="flex gap-2">
+          {PERMISSION_MODES.map(function (p) {
+            var active = (permissionMode ?? "default") === p.id;
+            return (
+              <button
+                key={p.id}
+                role="radio"
+                aria-checked={active}
+                onClick={function () {
+                  setPermissionMode(p.id === "default" ? undefined : p.id);
+                  save.markDirty();
+                }}
+                className={
+                  "flex-1 py-2.5 sm:py-1.5 rounded-lg border text-[12px] transition-colors duration-[120ms] cursor-pointer focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:ring-offset-base-100 " +
+                  (active
+                    ? "border-primary bg-base-300 text-base-content font-semibold"
+                    : "border-base-content/15 bg-base-300 text-base-content/40 hover:border-base-content/30 hover:text-base-content/60")
+                }
+              >
+                {p.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      <SaveFooter dirty={save.dirty} saving={save.saving} saveState={save.saveState} onSave={handleSave} />
+    </div>
+  );
+}

package/client/src/components/project-settings/ProjectEnvironment.tsx

@@ -0,0 +1,235 @@
+import { useState, useEffect, useMemo } from "react";
+import { X, Plus, AlertTriangle } from "lucide-react";
+import { SaveFooter } from "../ui/SaveFooter";
+import { useSaveState } from "../../hooks/useSaveState";
+import { findDuplicateKeys } from "../../utils/findDuplicateKeys";
+import type { ProjectSettings } from "@lattice/shared";
+
+interface EnvEntry {
+  id: string;
+  key: string;
+  value: string;
+}
+
+function genId(): string {
+  return Math.random().toString(36).slice(2, 10);
+}
+
+function entriesToEnv(entries: EnvEntry[]): Record<string, string> {
+  var env: Record<string, string> = {};
+  entries.forEach(function (e) {
+    if (e.key.trim()) {
+      env[e.key.trim()] = e.value;
+    }
+  });
+  return env;
+}
+
+function envToEntries(env: Record<string, string>): EnvEntry[] {
+  return Object.entries(env).map(function ([k, v]) {
+    return { id: genId(), key: k, value: v };
+  });
+}
+
+export function ProjectEnvironment({
+  settings,
+  updateSection,
+}: {
+  settings: ProjectSettings;
+  updateSection: (section: string, data: Record<string, unknown>) => void;
+}) {
+  var globalEnv = settings.global.env ?? {};
+  var globalEntries = Object.entries(globalEnv);
+
+  var [entries, setEntries] = useState<EnvEntry[]>(function () {
+    return envToEntries(settings.env ?? {});
+  });
+  var save = useSaveState();
+
+  useEffect(function () {
+    if (save.saving) {
+      save.confirmSave();
+    } else {
+      setEntries(envToEntries(settings.env ?? {}));
+      save.resetFromServer();
+    }
+  }, [settings]);
+
+  var globalKeySet = useMemo(function () {
+    return new Set(Object.keys(globalEnv));
+  }, [globalEnv]);
+
+  var duplicateKeys = useMemo(function () {
+    return findDuplicateKeys(entries);
+  }, [entries]);
+  var hasDuplicates = duplicateKeys.size > 0;
+
+  function handleAddRow() {
+    setEntries(function (prev) {
+      return [...prev, { id: genId(), key: "", value: "" }];
+    });
+    save.markDirty();
+  }
+
+  function handleDelete(id: string) {
+    setEntries(function (prev) {
+      return prev.filter(function (e) { return e.id !== id; });
+    });
+    save.markDirty();
+  }
+
+  function handleKeyChange(id: string, key: string) {
+    setEntries(function (prev) {
+      return prev.map(function (e) {
+        return e.id === id ? { ...e, key } : e;
+      });
+    });
+    save.markDirty();
+  }
+
+  function handleValueChange(id: string, value: string) {
+    setEntries(function (prev) {
+      return prev.map(function (e) {
+        return e.id === id ? { ...e, value } : e;
+      });
+    });
+    save.markDirty();
+  }
+
+  function handleSave() {
+    save.startSave();
+    updateSection("environment", { env: entriesToEnv(entries) });
+  }
+
+  var inputClass = "w-full h-9 sm:h-7 px-3 bg-base-300 border border-base-content/15 rounded-xl text-base-content font-mono text-[12px] focus:border-primary focus-visible:outline-none transition-colors duration-[120ms]";
+
+  return (
+    <div className="py-2">
+      <div className="mb-6">
+        <h2 className="text-[12px] font-semibold text-base-content/40 mb-3">
+          Global Variables
+        </h2>
+        {globalEntries.length === 0 && (
+          <div className="py-4 text-center text-[13px] text-base-content/30">
+            No global environment variables.
+          </div>
+        )}
+        {globalEntries.length > 0 && (
+          <div className="flex flex-col gap-1.5">
+            {globalEntries.map(function ([k, v]) {
+              return (
+                <div
+                  key={k}
+                  className="flex flex-col sm:grid sm:grid-cols-[1fr_1fr_auto] gap-1.5 sm:items-center"
+                >
+                  <div className="h-9 sm:h-7 px-3 bg-base-300/50 border border-base-content/10 rounded-xl flex items-center font-mono text-[12px] text-base-content/40">
+                    {k}
+                  </div>
+                  <div className="flex gap-1.5 items-center">
+                    <div className="h-9 sm:h-7 px-3 bg-base-300/50 border border-base-content/10 rounded-xl flex items-center font-mono text-[12px] text-base-content/40 w-full">
+                      {v}
+                    </div>
+                  </div>
+                  <span className="text-[10px] uppercase tracking-wider text-base-content/30 w-7 text-center hidden sm:block">
+                    global
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      <div>
+        <h2 className="text-[12px] font-semibold text-base-content/40 mb-3">
+          Project Variables
+        </h2>
+        <div className="flex flex-col gap-3 sm:gap-1.5 mb-3">
+          {entries.length === 0 && (
+            <div className="py-4 text-center text-[13px] text-base-content/30">
+              No project environment variables.
+            </div>
+          )}
+          {entries.map(function (entry, idx) {
+            var isDupe = entry.key.trim() !== "" && duplicateKeys.has(entry.key.trim());
+            var overridesGlobal = entry.key.trim() !== "" && globalKeySet.has(entry.key.trim());
+            return (
+              <div
+                key={entry.id}
+                className="flex flex-col sm:grid sm:grid-cols-[1fr_1fr_auto] gap-1.5 sm:items-center"
+              >
+                <div className="relative">
+                  <input
+                    type="text"
+                    value={entry.key}
+                    onChange={function (e) { handleKeyChange(entry.id, e.target.value); }}
+                    placeholder="VARIABLE_NAME"
+                    aria-label={"Variable name for row " + (idx + 1)}
+                    aria-invalid={isDupe}
+                    className={
+                      "w-full h-9 sm:h-7 px-3 bg-base-300 border rounded-xl text-base-content font-mono text-[12px] focus:border-primary focus-visible:outline-none transition-colors duration-[120ms] " +
+                      (isDupe ? "border-warning" : "border-base-content/15")
+                    }
+                  />
+                  {isDupe && (
+                    <div className="flex items-center gap-1 mt-0.5 text-[10px] text-warning sm:absolute sm:-bottom-3.5 sm:left-0" role="alert">
+                      <AlertTriangle size={9} />
+                      Duplicate key
+                    </div>
+                  )}
+                  {!isDupe && overridesGlobal && (
+                    <div className="flex items-center gap-1 mt-0.5 text-[10px] text-warning/70 sm:absolute sm:-bottom-3.5 sm:left-0">
+                      overrides global
+                    </div>
+                  )}
+                </div>
+                <div className="flex gap-1.5 items-center">
+                  <input
+                    type="text"
+                    value={entry.value}
+                    onChange={function (e) { handleValueChange(entry.id, e.target.value); }}
+                    placeholder="value"
+                    aria-label={"Value for " + (entry.key || "row " + (idx + 1))}
+                    className={inputClass}
+                  />
+                  <button
+                    onClick={function () { handleDelete(entry.id); }}
+                    aria-label={"Delete " + (entry.key || "row " + (idx + 1))}
+                    title="Delete"
+                    className="btn btn-ghost btn-xs btn-square text-base-content/30 hover:text-error w-9 h-9 flex-shrink-0 sm:hidden focus-visible:ring-2 focus-visible:ring-primary"
+                  >
+                    <X size={14} />
+                  </button>
+                </div>
+                <button
+                  onClick={function () { handleDelete(entry.id); }}
+                  aria-label={"Delete " + (entry.key || "row " + (idx + 1))}
+                  title="Delete"
+                  className="btn btn-ghost btn-xs btn-square text-base-content/30 hover:text-error w-7 h-7 hidden sm:flex focus-visible:ring-2 focus-visible:ring-primary"
+                >
+                  <X size={12} />
+                </button>
+              </div>
+            );
+          })}
+        </div>
+
+        <button
+          onClick={handleAddRow}
+          className="flex items-center gap-1.5 px-3 py-2.5 sm:py-1.5 rounded-xl border border-dashed border-base-content/20 bg-transparent text-base-content/40 text-[12px] hover:text-base-content/60 hover:border-base-content/30 transition-colors duration-[120ms] mb-5 cursor-pointer focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:ring-offset-base-100"
+        >
+          <Plus size={12} />
+          Add Variable
+        </button>
+
+        <SaveFooter
+          dirty={save.dirty}
+          saving={save.saving}
+          saveState={save.saveState}
+          onSave={handleSave}
+          extraStatus={hasDuplicates ? "Duplicate keys will be merged" : undefined}
+        />
+      </div>
+    </div>
+  );
+}

package/client/src/components/project-settings/ProjectGeneral.tsx

@@ -0,0 +1,76 @@
+import { useState, useEffect } from "react";
+import { IconPicker } from "../ui/IconPicker";
+import { SaveFooter } from "../ui/SaveFooter";
+import { useSaveState } from "../../hooks/useSaveState";
+import type { ProjectSettings, ProjectIcon } from "@lattice/shared";
+
+interface ProjectGeneralProps {
+  settings: ProjectSettings;
+  updateSection: (section: string, data: Record<string, unknown>) => void;
+}
+
+export function ProjectGeneral({ settings, updateSection }: ProjectGeneralProps) {
+  var [title, setTitle] = useState(settings.title);
+  var [icon, setIcon] = useState<ProjectIcon | undefined>(settings.icon);
+  var save = useSaveState();
+
+  useEffect(function () {
+    if (save.saving) {
+      save.confirmSave();
+    } else {
+      setTitle(settings.title);
+      setIcon(settings.icon);
+      save.resetFromServer();
+    }
+  }, [settings]);
+
+  function handleTitleChange(value: string) {
+    setTitle(value);
+    save.markDirty();
+  }
+
+  function handleIconChange(value: ProjectIcon) {
+    setIcon(value);
+    save.markDirty();
+  }
+
+  function handleSave() {
+    save.startSave();
+    updateSection("general", { title, icon });
+  }
+
+  return (
+    <div className="py-2">
+      <div className="mb-5">
+        <label htmlFor="project-title" className="block text-[12px] font-semibold text-base-content/40 mb-2">
+          Display Name
+        </label>
+        <input
+          id="project-title"
+          type="text"
+          value={title}
+          onChange={function (e) { handleTitleChange(e.target.value); }}
+          className="w-full h-9 px-3 bg-base-300 border border-base-content/15 rounded-xl text-base-content text-[13px] focus:border-primary focus-visible:outline-none transition-colors duration-[120ms]"
+        />
+      </div>
+
+      <div className="mb-5">
+        <div className="block text-[12px] font-semibold text-base-content/40 mb-2">
+          Icon
+        </div>
+        <IconPicker value={icon} onChange={handleIconChange} />
+      </div>
+
+      <div className="mb-6">
+        <div className="block text-[12px] font-semibold text-base-content/40 mb-2">
+          Project Path
+        </div>
+        <div className="w-full h-9 px-3 bg-base-300 border border-base-content/15 rounded-xl text-base-content/60 text-[12px] font-mono flex items-center select-all">
+          {settings.path}
+        </div>
+      </div>
+
+      <SaveFooter dirty={save.dirty} saving={save.saving} saveState={save.saveState} onSave={handleSave} />
+    </div>
+  );
+}