@cryptiklemur/lattice 0.0.0

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

@@ -0,0 +1,277 @@
+import { useState, useEffect } from "react";
+import { X, Plus, ChevronDown, ChevronRight } from "lucide-react";
+import { SaveFooter } from "../ui/SaveFooter";
+import { useSaveState } from "../../hooks/useSaveState";
+import type { ProjectSettings } from "@lattice/shared";
+
+interface RuleEntry {
+  filename: string;
+  content: string;
+}
+
+export function ProjectRules({
+  settings,
+  updateSection,
+}: {
+  settings: ProjectSettings;
+  updateSection: (section: string, data: Record<string, unknown>) => void;
+}) {
+  var globalRules = settings.global.rules ?? [];
+
+  var [rules, setRules] = useState<RuleEntry[]>(function () {
+    return (settings.rules ?? []).map(function (r) {
+      return { filename: r.filename, content: r.content };
+    });
+  });
+  var [expandedGlobal, setExpandedGlobal] = useState<Set<number>>(new Set());
+  var [expandedProject, setExpandedProject] = useState<Set<number>>(new Set());
+  var [adding, setAdding] = useState(false);
+  var [newFilename, setNewFilename] = useState("");
+  var [newContent, setNewContent] = useState("");
+  var save = useSaveState();
+
+  useEffect(function () {
+    if (save.saving) {
+      save.confirmSave();
+    } else {
+      setRules((settings.rules ?? []).map(function (r) {
+        return { filename: r.filename, content: r.content };
+      }));
+      save.resetFromServer();
+    }
+  }, [settings]);
+
+  function toggleGlobal(idx: number) {
+    setExpandedGlobal(function (prev) {
+      var next = new Set(prev);
+      if (next.has(idx)) {
+        next.delete(idx);
+      } else {
+        next.add(idx);
+      }
+      return next;
+    });
+  }
+
+  function toggleProject(idx: number) {
+    setExpandedProject(function (prev) {
+      var next = new Set(prev);
+      if (next.has(idx)) {
+        next.delete(idx);
+      } else {
+        next.add(idx);
+      }
+      return next;
+    });
+  }
+
+  function handleContentChange(idx: number, content: string) {
+    setRules(function (prev) {
+      return prev.map(function (r, i) {
+        return i === idx ? { ...r, content } : r;
+      });
+    });
+    save.markDirty();
+  }
+
+  function handleDelete(idx: number) {
+    setRules(function (prev) {
+      return prev.filter(function (_, i) { return i !== idx; });
+    });
+    setExpandedProject(new Set());
+    save.markDirty();
+  }
+
+  function handleAdd() {
+    var fn = newFilename.trim();
+    if (!fn || !fn.endsWith(".md")) return;
+    setRules(function (prev) {
+      return [...prev, { filename: fn, content: newContent }];
+    });
+    setNewFilename("");
+    setNewContent("");
+    setAdding(false);
+    save.markDirty();
+  }
+
+  function handleCancelAdd() {
+    setAdding(false);
+    setNewFilename("");
+    setNewContent("");
+  }
+
+  function handleSave() {
+    save.startSave();
+    updateSection("rules", { rules });
+  }
+
+  function preview(content: string): string {
+    var trimmed = content.trim();
+    if (trimmed.length <= 80) return trimmed;
+    return trimmed.slice(0, 80) + "...";
+  }
+
+  var textareaClass = "w-full px-3 py-2 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] resize-y min-h-[120px]";
+  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 Rules
+        </h2>
+        {globalRules.length === 0 && (
+          <div className="py-4 text-center text-[13px] text-base-content/30">
+            No global rules.
+          </div>
+        )}
+        {globalRules.length > 0 && (
+          <div className="flex flex-col gap-1.5">
+            {globalRules.map(function (rule, idx) {
+              var isExpanded = expandedGlobal.has(idx);
+              return (
+                <div key={rule.filename + "-" + idx} className="border border-base-content/10 rounded-xl overflow-hidden">
+                  <button
+                    onClick={function () { toggleGlobal(idx); }}
+                    className="w-full flex items-center gap-2 px-3 py-2 bg-base-300/50 hover:bg-base-300/70 transition-colors duration-[120ms] cursor-pointer text-left"
+                  >
+                    {isExpanded
+                      ? <ChevronDown size={12} className="text-base-content/40 flex-shrink-0" />
+                      : <ChevronRight size={12} className="text-base-content/40 flex-shrink-0" />
+                    }
+                    <span className="font-mono text-[12px] text-base-content/40 flex-1 truncate">
+                      {rule.filename}
+                    </span>
+                    <span className="text-[10px] uppercase tracking-wider text-base-content/30">
+                      global
+                    </span>
+                  </button>
+                  {!isExpanded && (
+                    <div className="px-3 py-1.5 text-[11px] text-base-content/30 font-mono truncate">
+                      {preview(rule.content)}
+                    </div>
+                  )}
+                  {isExpanded && (
+                    <pre className="px-3 py-2 text-[12px] text-base-content/40 font-mono whitespace-pre-wrap break-words bg-base-300/30 max-h-[300px] overflow-auto">
+                      {rule.content}
+                    </pre>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      <div>
+        <h2 className="text-[12px] font-semibold text-base-content/40 mb-3">
+          Project Rules
+        </h2>
+        {rules.length === 0 && !adding && (
+          <div className="py-4 text-center text-[13px] text-base-content/30 mb-3">
+            No project rules.
+          </div>
+        )}
+        {rules.length > 0 && (
+          <div className="flex flex-col gap-1.5 mb-3">
+            {rules.map(function (rule, idx) {
+              var isExpanded = expandedProject.has(idx);
+              return (
+                <div key={rule.filename + "-" + idx} className="border border-base-content/15 rounded-xl overflow-hidden">
+                  <div className="w-full flex items-center gap-2 px-3 py-2 bg-base-300 text-left">
+                    <button
+                      onClick={function () { toggleProject(idx); }}
+                      className="flex items-center gap-2 flex-1 min-w-0 cursor-pointer hover:text-base-content/80 transition-colors"
+                    >
+                      {isExpanded
+                        ? <ChevronDown size={12} className="text-base-content/60 flex-shrink-0" />
+                        : <ChevronRight size={12} className="text-base-content/60 flex-shrink-0" />
+                      }
+                      <span className="font-mono text-[12px] text-base-content flex-1 truncate text-left">
+                        {rule.filename}
+                      </span>
+                    </button>
+                    <button
+                      onClick={function () { handleDelete(idx); }}
+                      className="btn btn-ghost btn-xs btn-square text-base-content/30 hover:text-error flex-shrink-0 focus-visible:ring-2 focus-visible:ring-primary"
+                      aria-label={"Delete " + rule.filename}
+                    >
+                      <X size={14} />
+                    </button>
+                  </div>
+                  {!isExpanded && (
+                    <div className="px-3 py-1.5 text-[11px] text-base-content/50 font-mono truncate">
+                      {preview(rule.content)}
+                    </div>
+                  )}
+                  {isExpanded && (
+                    <div className="px-3 py-2 bg-base-300/30">
+                      <textarea
+                        value={rule.content}
+                        onChange={function (e) { handleContentChange(idx, e.target.value); }}
+                        className={textareaClass}
+                        rows={8}
+                        aria-label={"Content for " + rule.filename}
+                      />
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        {adding && (
+          <div className="border border-dashed border-base-content/20 rounded-xl p-3 mb-3 flex flex-col gap-2">
+            <input
+              type="text"
+              value={newFilename}
+              onChange={function (e) { setNewFilename(e.target.value); }}
+              placeholder="filename.md"
+              aria-label="New rule filename"
+              className={inputClass}
+            />
+            <textarea
+              value={newContent}
+              onChange={function (e) { setNewContent(e.target.value); }}
+              placeholder="Rule content..."
+              aria-label="New rule content"
+              className={textareaClass}
+              rows={5}
+            />
+            <div className="flex gap-2 justify-end">
+              <button
+                onClick={handleCancelAdd}
+                className="btn btn-ghost btn-sm text-[12px]"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleAdd}
+                disabled={!newFilename.trim() || !newFilename.trim().endsWith(".md")}
+                className={
+                  "btn btn-sm btn-primary text-[12px]" +
+                  (!newFilename.trim() || !newFilename.trim().endsWith(".md") ? " opacity-50 cursor-not-allowed" : "")
+                }
+              >
+                Add
+              </button>
+            </div>
+          </div>
+        )}
+
+        {!adding && (
+          <button
+            onClick={function () { setAdding(true); }}
+            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 Rule
+          </button>
+        )}
+
+        <SaveFooter dirty={save.dirty} saving={save.saving} saveState={save.saveState} onSave={handleSave} />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,99 @@
+import { useSidebar } from "../../hooks/useSidebar";
+import { useProjectSettings } from "../../hooks/useProjectSettings";
+import { Menu } from "lucide-react";
+import type { ProjectSettingsSection } from "../../stores/sidebar";
+import type { ProjectSettings } from "@lattice/shared";
+import { ProjectGeneral } from "./ProjectGeneral";
+import { ProjectClaude } from "./ProjectClaude";
+import { ProjectEnvironment } from "./ProjectEnvironment";
+import { ProjectPermissions } from "./ProjectPermissions";
+import { ProjectSkills } from "./ProjectSkills";
+import { ProjectRules } from "./ProjectRules";
+import { ProjectMcp } from "./ProjectMcp";
+
+var SECTION_CONFIG: Record<string, { title: string }> = {
+  general: { title: "General" },
+  claude: { title: "Claude" },
+  environment: { title: "Environment" },
+  mcp: { title: "MCP Servers" },
+  skills: { title: "Skills" },
+  rules: { title: "Rules" },
+  permissions: { title: "Permissions" },
+};
+
+function renderSection(
+  section: ProjectSettingsSection,
+  settings: ProjectSettings,
+  updateSection: (section: string, data: Record<string, unknown>) => void,
+  projectSlug?: string,
+) {
+  if (section === "general") {
+    return <ProjectGeneral settings={settings} updateSection={updateSection} />;
+  }
+
+  if (section === "claude") {
+    return <ProjectClaude settings={settings} updateSection={updateSection} />;
+  }
+
+  if (section === "environment") {
+    return <ProjectEnvironment settings={settings} updateSection={updateSection} />;
+  }
+
+  if (section === "permissions") {
+    return <ProjectPermissions settings={settings} updateSection={updateSection} />;
+  }
+
+  if (section === "skills") {
+    return <ProjectSkills settings={settings} projectSlug={projectSlug} />;
+  }
+
+  if (section === "rules") {
+    return <ProjectRules settings={settings} updateSection={updateSection} />;
+  }
+
+  if (section === "mcp") {
+    return <ProjectMcp settings={settings} updateSection={updateSection} />;
+  }
+
+  return (
+    <div className="py-2 text-[13px] text-base-content/40">
+      {section} section coming soon.
+    </div>
+  );
+}
+
+export function ProjectSettingsView() {
+  var { activeView, activeProjectSlug, toggleDrawer } = useSidebar();
+
+  if (activeView.type !== "project-settings") {
+    return null;
+  }
+
+  var section = activeView.section;
+  var config = SECTION_CONFIG[section];
+  var { settings, loading, error, updateSection } = useProjectSettings(activeProjectSlug);
+
+  return (
+    <div className="flex-1 overflow-auto px-4 sm:px-8 py-4 sm:py-6 max-w-3xl">
+      {config && (
+        <div className="mb-6 flex items-center gap-3">
+          <button
+            className="btn btn-ghost btn-sm btn-square lg:hidden"
+            aria-label="Toggle sidebar"
+            onClick={toggleDrawer}
+          >
+            <Menu size={18} />
+          </button>
+          <h1 className="text-lg font-mono font-bold text-base-content">{config.title}</h1>
+        </div>
+      )}
+      {loading && (
+        <div className="text-[13px] text-base-content/40 py-4">Loading...</div>
+      )}
+      {error && (
+        <div className="text-[13px] text-error py-4">{error}</div>
+      )}
+      {!loading && !error && settings && renderSection(section, settings, updateSection, activeProjectSlug ?? undefined)}
+    </div>
+  );
+}

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

@@ -0,0 +1,91 @@
+import { useState, useEffect } from "react";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import { SkillMarketplace } from "../settings/SkillMarketplace";
+import { SkillItem, SkillViewModal } from "../settings/skill-shared";
+import type { ProjectSettings, ServerMessage } from "@lattice/shared";
+
+interface ProjectSkillsProps {
+  settings: ProjectSettings;
+  projectSlug?: string;
+}
+
+export function ProjectSkills({ settings, projectSlug }: ProjectSkillsProps) {
+  var { send, subscribe, unsubscribe } = useWebSocket();
+  var globalSkills = settings.global.skills;
+  var projectSkills = settings.skills;
+  var hasAny = globalSkills.length > 0 || projectSkills.length > 0;
+  var [viewContent, setViewContent] = useState<{ path: string; content: string } | null>(null);
+
+  useEffect(function () {
+    function handleViewResult(msg: ServerMessage) {
+      if (msg.type !== "skills:view_result") return;
+      var data = msg as { type: "skills:view_result"; path: string; content: string };
+      setViewContent({ path: data.path, content: data.content });
+    }
+
+    subscribe("skills:view_result", handleViewResult);
+
+    return function () {
+      unsubscribe("skills:view_result", handleViewResult);
+    };
+  }, []);
+
+  function handleView(path: string) {
+    send({ type: "skills:view", path: path } as any);
+  }
+
+  return (
+    <div className="py-2 space-y-6">
+      {!hasAny && (
+        <div className="py-12 text-center text-[13px] text-base-content/40">
+          No skills found.
+        </div>
+      )}
+
+      {globalSkills.length > 0 && (
+        <div>
+          <div className="text-[12px] font-semibold text-base-content/40 mb-2">Global Skills</div>
+          <div className="space-y-2">
+            {globalSkills.map(function (skill) {
+              return (
+                <SkillItem
+                  key={skill.path}
+                  skill={skill}
+                  badge="global"
+                  onClick={function () { handleView(skill.path); }}
+                />
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {projectSkills.length > 0 && (
+        <div>
+          <div className="text-[12px] font-semibold text-base-content/40 mb-2">Project Skills</div>
+          <div className="space-y-2">
+            {projectSkills.map(function (skill) {
+              return (
+                <SkillItem
+                  key={skill.path}
+                  skill={skill}
+                  onClick={function () { handleView(skill.path); }}
+                />
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      <SkillMarketplace defaultScope="project" defaultProjectSlug={projectSlug} />
+
+      {viewContent && (
+        <SkillViewModal
+          path={viewContent.path}
+          content={viewContent.content}
+          onClose={function () { setViewContent(null); }}
+        />
+      )}
+    </div>
+  );
+}

package/client/src/components/settings/Appearance.tsx

@@ -0,0 +1,151 @@
+import { memo, useMemo, useCallback } from "react";
+import { useTheme } from "../../hooks/useTheme";
+import { Sun, Moon, Check } from "lucide-react";
+import type { ThemeEntry } from "../../themes/index";
+
+var SWATCH_KEYS = [
+  "base00", "base01", "base02", "base03",
+  "base04", "base05", "base06", "base07",
+  "base08", "base09", "base0A", "base0B",
+  "base0C", "base0D", "base0E", "base0F",
+] as const;
+
+var ThemeCard = memo(function ThemeCard({
+  entry,
+  active,
+  onSelect,
+}: {
+  entry: ThemeEntry;
+  active: boolean;
+  onSelect: (id: string) => void;
+}) {
+  var t = entry.theme;
+
+  function handleClick() {
+    onSelect(entry.id);
+  }
+
+  return (
+    <button
+      onClick={handleClick}
+      className={
+        "flex flex-col gap-2 p-3 sm:p-2.5 px-3 rounded-lg border cursor-pointer text-left transition-colors duration-[120ms] relative focus-visible:ring-2 focus-visible:ring-primary " +
+        (active
+          ? "border-primary bg-base-300 shadow-sm"
+          : "border-base-content/15 bg-base-300 hover:border-base-content/30")
+      }
+    >
+      {active && (
+        <div className="absolute top-1.5 right-1.5 w-3.5 h-3.5 rounded-full bg-primary flex items-center justify-center">
+          <Check size={8} className="text-primary-content" strokeWidth={1.8} />
+        </div>
+      )}
+
+      <div className="flex gap-[3px] flex-wrap w-[80px]">
+        {SWATCH_KEYS.map(function (key) {
+          return (
+            <div
+              key={key}
+              className="w-[10px] h-[10px] rounded-sm flex-shrink-0 ring-1 ring-base-content/10"
+              style={{ background: "#" + t[key] }}
+            />
+          );
+        })}
+      </div>
+
+      <div className="text-[12px] font-medium text-base-content">
+        {t.name}
+      </div>
+    </button>
+  );
+});
+
+function ThemeGroup({
+  label,
+  entries,
+  currentThemeId,
+  onSelect,
+}: {
+  label: string;
+  entries: ThemeEntry[];
+  currentThemeId: string;
+  onSelect: (id: string) => void;
+}) {
+  if (entries.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="mb-6">
+      <div className="text-[11px] font-mono font-bold tracking-[0.1em] uppercase text-base-content/40 mb-3">
+        {label}
+      </div>
+      <div className="grid grid-cols-[repeat(auto-fill,minmax(100px,1fr))] gap-2">
+        {entries.map(function (entry) {
+          return (
+            <ThemeCard
+              key={entry.id}
+              entry={entry}
+              active={entry.id === currentThemeId}
+              onSelect={onSelect}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export function Appearance() {
+  var { mode, currentThemeId, toggleMode, setTheme, themes } = useTheme();
+
+  var darkThemes = useMemo(function () {
+    return themes.filter(function (e) { return e.theme.variant === "dark"; });
+  }, [themes]);
+
+  var lightThemes = useMemo(function () {
+    return themes.filter(function (e) { return e.theme.variant === "light"; });
+  }, [themes]);
+
+  var handleThemeSelect = useCallback(function (id: string) {
+    setTheme(id);
+  }, [setTheme]);
+
+  return (
+    <div className="py-2">
+      <div className="flex items-center justify-between mb-6">
+        <div className="text-[12px] font-semibold text-base-content/40">Color Mode</div>
+        <button
+          onClick={toggleMode}
+          className="btn btn-ghost btn-sm border border-base-content/20"
+        >
+          {mode === "dark" ? (
+            <>
+              <Sun size={12} />
+              Switch to Light
+            </>
+          ) : (
+            <>
+              <Moon size={12} />
+              Switch to Dark
+            </>
+          )}
+        </button>
+      </div>
+
+      <ThemeGroup
+        label="Dark Themes"
+        entries={darkThemes}
+        currentThemeId={currentThemeId}
+        onSelect={handleThemeSelect}
+      />
+
+      <ThemeGroup
+        label="Light Themes"
+        entries={lightThemes}
+        currentThemeId={currentThemeId}
+        onSelect={handleThemeSelect}
+      />
+    </div>
+  );
+}