@cryptiklemur/lattice 4.0.1 → 5.0.0

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

@@ -1,117 +0,0 @@
-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 "#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";
-import { ProjectMemory } from "./ProjectMemory";
-import { ProjectNotifications } from "./ProjectNotifications";
-import { ProjectPlugins } from "./ProjectPlugins";
-
-var SECTION_CONFIG: Record<string, { title: string }> = {
-  general: { title: "General" },
-  notifications: { title: "Notifications" },
-  claude: { title: "Claude" },
-  environment: { title: "Environment" },
-  mcp: { title: "MCP Servers" },
-  skills: { title: "Skills" },
-  plugins: { title: "Plugins" },
-  rules: { title: "Rules" },
-  permissions: { title: "Permissions" },
-  memory: { title: "Memory" },
-};
-
-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 === "plugins") {
-    return <ProjectPlugins settings={settings} updateSection={updateSection} />;
-  }
-
-  if (section === "rules") {
-    return <ProjectRules settings={settings} updateSection={updateSection} />;
-  }
-
-  if (section === "mcp") {
-    return <ProjectMcp settings={settings} updateSection={updateSection} />;
-  }
-
-  if (section === "memory") {
-    return <ProjectMemory projectSlug={projectSlug} />;
-  }
-
-  if (section === "notifications") {
-    return <ProjectNotifications projectSlug={projectSlug} />;
-  }
-
-  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 (
-    <section aria-label="Project Settings" 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)}
-    </section>
-  );
-}

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

@@ -1,91 +0,0 @@
-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 "#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: typeof globalSkills[number]) {
-              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: typeof projectSkills[number]) {
-              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/src/client/components/settings/Appearance.tsx

@@ -1,275 +0,0 @@
-import { memo, useMemo, useCallback, useState, useEffect } from "react";
-import { useTheme } from "../../hooks/useTheme";
-import { useWebSocket } from "../../hooks/useWebSocket";
-import { Sun, Moon, Check, Plus, Pencil, Trash2, Download } from "lucide-react";
-import type { ThemeEntry } from "../../themes/index";
-import { ThemeWizard } from "./ThemeWizard";
-import { ThemeSwatches } from "./ThemePreview";
-import { ContextMenu, useContextMenu } from "../ui/ContextMenu";
-import type { ServerMessage } from "#shared";
-
-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>
-  );
-}
-
-interface CustomTheme {
-  name: string;
-  author: string;
-  variant: string;
-  filename: string;
-  colors: Record<string, string>;
-}
-
-export function Appearance() {
-  var { mode, currentThemeId, toggleMode, setTheme, themes } = useTheme();
-  var ws = useWebSocket();
-  var [wizardOpen, setWizardOpen] = useState(false);
-  var [editTheme, setEditTheme] = useState<CustomTheme | null>(null);
-  var [customThemes, setCustomThemes] = useState<CustomTheme[]>([]);
-  var ctxMenu = useContextMenu<CustomTheme>();
-
-  useEffect(function () {
-    function handleCustomList(msg: ServerMessage) {
-      if ((msg as any).type === "theme:custom_list") {
-        setCustomThemes((msg as any).themes || []);
-      }
-    }
-    function handleSaved(msg: ServerMessage) {
-      if ((msg as any).type === "theme:saved" || (msg as any).type === "theme:deleted") {
-        ws.send({ type: "theme:list_custom" } as any);
-      }
-    }
-    ws.subscribe("theme:custom_list", handleCustomList);
-    ws.subscribe("theme:saved", handleSaved);
-    ws.subscribe("theme:deleted", handleSaved);
-    ws.send({ type: "theme:list_custom" } as any);
-    return function () {
-      ws.unsubscribe("theme:custom_list", handleCustomList);
-      ws.unsubscribe("theme:saved", handleSaved);
-      ws.unsubscribe("theme:deleted", handleSaved);
-    };
-  }, []);
-
-  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]);
-
-  function handleEditCustom(theme: CustomTheme) {
-    setEditTheme(theme);
-    setWizardOpen(true);
-  }
-
-  function handleDeleteCustom(theme: CustomTheme) {
-    ws.send({ type: "theme:delete", name: theme.filename } as any);
-  }
-
-  function handleExportCustom(theme: CustomTheme) {
-    var obj: Record<string, string> = {
-      name: theme.name,
-      author: theme.author,
-      variant: theme.variant,
-    };
-    for (var key of Object.keys(theme.colors)) {
-      obj[key] = theme.colors[key];
-    }
-    var blob = new Blob([JSON.stringify(obj, null, 2)], { type: "application/json" });
-    var url = URL.createObjectURL(blob);
-    var a = document.createElement("a");
-    a.href = url;
-    a.download = theme.filename;
-    a.click();
-    URL.revokeObjectURL(url);
-  }
-
-  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 className="mb-6">
-        <div className="text-[11px] font-mono font-bold tracking-[0.1em] uppercase text-base-content/40 mb-3">
-          Custom Themes
-        </div>
-        <div className="grid grid-cols-[repeat(auto-fill,minmax(100px,1fr))] gap-2">
-          {customThemes.map(function (ct) {
-            return (
-              <button
-                key={ct.filename}
-                onClick={function () { handleEditCustom(ct); }}
-                onContextMenu={function (e) { ctxMenu.open(e, ct); }}
-                data-allow-context-menu
-                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 border-base-content/15 bg-base-300 hover:border-base-content/30"
-              >
-                <div className="absolute top-1.5 right-1.5">
-                  <Pencil size={10} className="text-base-content/20" />
-                </div>
-                <ThemeSwatches colors={ct.colors} />
-                <div className="text-[12px] font-medium text-base-content truncate w-full">
-                  {ct.name}
-                </div>
-              </button>
-            );
-          })}
-
-          <button
-            onClick={function () { setEditTheme(null); setWizardOpen(true); }}
-            className="flex flex-col items-center justify-center gap-2 p-3 rounded-lg border-2 border-dashed border-base-content/15 cursor-pointer text-left transition-colors duration-[120ms] hover:border-primary/40 hover:bg-primary/5 min-h-[70px]"
-          >
-            <Plus size={18} className="text-base-content/25" />
-            <div className="text-[11px] text-base-content/30">Create Theme</div>
-          </button>
-        </div>
-      </div>
-
-      {ctxMenu.state && (
-        <ContextMenu
-          x={ctxMenu.state.x}
-          y={ctxMenu.state.y}
-          onClose={ctxMenu.close}
-          label="Custom theme actions"
-          items={[
-            { label: "Edit", icon: <Pencil size={14} />, onClick: function () { handleEditCustom(ctxMenu.state!.data); } },
-            { label: "Export JSON", icon: <Download size={14} />, onClick: function () { handleExportCustom(ctxMenu.state!.data); } },
-            { type: "divider" as const },
-            { label: "Delete", icon: <Trash2 size={14} />, danger: true, onClick: function () { handleDeleteCustom(ctxMenu.state!.data); } },
-          ]}
-        />
-      )}
-
-      {wizardOpen && (
-        <ThemeWizard
-          onClose={function () { setWizardOpen(false); setEditTheme(null); }}
-          editTheme={editTheme ? { name: editTheme.name, author: editTheme.author, variant: editTheme.variant as "dark" | "light", colors: editTheme.colors } : null}
-        />
-      )}
-    </div>
-  );
-}

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

@@ -1,165 +0,0 @@
-import { useState, useEffect } from "react";
-import { useStore } from "@tanstack/react-store";
-import { useWebSocket } from "../../hooks/useWebSocket";
-import { useSaveState } from "../../hooks/useSaveState";
-import { SaveFooter } from "../ui/SaveFooter";
-import { getSessionStore, setBudgetStatus } from "../../stores/session";
-import type { ServerMessage, SettingsDataMessage, SettingsUpdateMessage } from "#shared";
-
-var ENFORCEMENT_OPTIONS = [
-  { id: "warning", label: "Warning", description: "Shows a warning but does not block" },
-  { id: "soft-block", label: "Confirm", description: "Asks for confirmation before sending" },
-  { id: "hard-block", label: "Block", description: "Prevents sending until tomorrow" },
-];
-
-export function BudgetSettings() {
-  var { send, subscribe, unsubscribe } = useWebSocket();
-  var budgetStatus = useStore(getSessionStore(), function (s) { return s.budgetStatus; });
-  var [enabled, setEnabled] = useState(false);
-  var [dailyLimit, setDailyLimit] = useState(10);
-  var [enforcement, setEnforcement] = useState("warning");
-  var save = useSaveState();
-
-  useEffect(function () {
-    function handleMessage(msg: ServerMessage) {
-      if (msg.type !== "settings:data") return;
-      var data = msg as SettingsDataMessage;
-      var cfg = data.config;
-
-      if (save.savingRef.current) {
-        save.confirmSave();
-        if (!cfg.costBudget) {
-          setBudgetStatus(null);
-        }
-      } else {
-        if (cfg.costBudget) {
-          setEnabled(true);
-          setDailyLimit(cfg.costBudget.dailyLimit);
-          setEnforcement(cfg.costBudget.enforcement);
-        } else {
-          setEnabled(false);
-          setDailyLimit(10);
-          setEnforcement("warning");
-          setBudgetStatus(null);
-        }
-        save.resetFromServer();
-      }
-    }
-
-    subscribe("settings:data", handleMessage);
-    send({ type: "settings:get" });
-
-    return function () {
-      unsubscribe("settings:data", handleMessage);
-    };
-  }, []);
-
-  function handleSave() {
-    save.startSave();
-    var updateMsg: SettingsUpdateMessage = {
-      type: "settings:update",
-      settings: {
-        costBudget: enabled ? { dailyLimit: dailyLimit, enforcement: enforcement as "warning" | "soft-block" | "hard-block" } : null,
-      } as SettingsUpdateMessage["settings"],
-    };
-    send(updateMsg);
-  }
-
-  return (
-    <div className="py-2">
-      <p className="text-[12px] text-base-content/40 mb-5">
-        Set a daily spending limit to control API costs. The budget resets at midnight.
-      </p>
-
-      {budgetStatus && (
-        <div className="mb-5 p-3 rounded-xl bg-base-300 border border-base-content/10">
-          <div className="text-[11px] text-base-content/40 font-mono mb-1">Today's spend</div>
-          <div className="text-[18px] font-mono font-bold text-base-content">
-            ${budgetStatus.dailySpend.toFixed(2)}
-            {budgetStatus.dailyLimit > 0 && (
-              <span className="text-[13px] text-base-content/30 font-normal">
-                {" / $" + budgetStatus.dailyLimit.toFixed(2)}
-              </span>
-            )}
-          </div>
-        </div>
-      )}
-
-      <div className="mb-5">
-        <label className="flex items-center gap-3 cursor-pointer">
-          <input
-            type="checkbox"
-            checked={enabled}
-            onChange={function (e) {
-              setEnabled(e.target.checked);
-              save.markDirty();
-            }}
-            className="toggle toggle-sm toggle-primary"
-          />
-          <span className="text-[13px] text-base-content">Enable daily budget</span>
-        </label>
-      </div>
-
-      {enabled && (
-        <>
-          <div className="mb-5">
-            <label htmlFor="budget-daily-limit" className="block text-[12px] font-semibold text-base-content/40 mb-2">
-              Daily limit (USD)
-            </label>
-            <input
-              id="budget-daily-limit"
-              type="number"
-              min={0.01}
-              step={0.5}
-              value={dailyLimit}
-              onChange={function (e) {
-                var val = parseFloat(e.target.value);
-                if (!isNaN(val) && val > 0) {
-                  setDailyLimit(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] font-mono focus:border-primary focus-visible:outline-none transition-colors duration-[120ms]"
-            />
-          </div>
-
-          <div className="mb-6" role="radiogroup" aria-label="Enforcement mode">
-            <div className="text-[12px] font-semibold text-base-content/40 mb-2">Enforcement</div>
-            <div className="flex flex-col gap-2">
-              {ENFORCEMENT_OPTIONS.map(function (opt) {
-                var active = enforcement === opt.id;
-                return (
-                  <button
-                    key={opt.id}
-                    role="radio"
-                    aria-checked={active}
-                    onClick={function () {
-                      setEnforcement(opt.id);
-                      save.markDirty();
-                    }}
-                    className={
-                      "w-full text-left px-3 py-2.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"
-                        : "border-base-content/15 bg-base-300 text-base-content/40 hover:border-base-content/30 hover:text-base-content/60")
-                    }
-                  >
-                    <div className="font-semibold">{opt.label}</div>
-                    <div className={"text-[11px] mt-0.5 " + (active ? "text-base-content/50" : "text-base-content/30")}>{opt.description}</div>
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-        </>
-      )}
-
-      <SaveFooter
-        dirty={save.dirty}
-        saving={save.saving}
-        saveState={save.saveState}
-        onSave={handleSave}
-      />
-    </div>
-  );
-}