@cryptiklemur/lattice 4.0.1 → 5.0.0

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

@@ -1,209 +0,0 @@
-import { useState, useEffect } from "react";
-import { X, Plus } from "lucide-react";
-import { SaveFooter } from "../ui/SaveFooter";
-import { useSaveState } from "../../hooks/useSaveState";
-import type { ProjectSettings } from "#shared";
-
-function RuleList({
-  rules,
-  onDelete,
-  readOnly,
-  labelPrefix,
-}: {
-  rules: string[];
-  onDelete?: (index: number) => void;
-  readOnly?: boolean;
-  labelPrefix?: string;
-}) {
-  if (rules.length === 0) {
-    return (
-      <div className="py-3 text-center text-[13px] text-base-content/30">
-        No rules defined.
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col gap-1.5">
-      {rules.map(function (rule, idx) {
-        return (
-          <div
-            key={rule + "-" + idx}
-            className={
-              "flex items-center gap-2 h-9 sm:h-7 px-3 rounded-xl border font-mono text-[12px] " +
-              (readOnly
-                ? "bg-base-300/50 border-base-content/10 text-base-content/40"
-                : "bg-base-300 border-base-content/15 text-base-content")
-            }
-          >
-            <span className="flex-1 truncate">{rule}</span>
-            {readOnly && (
-              <span className="text-[10px] uppercase tracking-wider text-base-content/30 flex-shrink-0">
-                global
-              </span>
-            )}
-            {!readOnly && onDelete && (
-              <button
-                onClick={function () { onDelete(idx); }}
-                aria-label={"Delete " + (labelPrefix || "") + " rule: " + rule}
-                title="Delete"
-                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"
-              >
-                <X size={12} />
-              </button>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-function AddRuleRow({ onAdd, label }: { onAdd: (rule: string) => void; label: string }) {
-  var [value, setValue] = useState("");
-
-  function handleAdd() {
-    var trimmed = value.trim();
-    if (!trimmed) return;
-    onAdd(trimmed);
-    setValue("");
-  }
-
-  function handleKeyDown(e: React.KeyboardEvent) {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      handleAdd();
-    }
-  }
-
-  return (
-    <div className="flex items-center gap-1.5 mt-1.5">
-      <input
-        type="text"
-        value={value}
-        onChange={function (e) { setValue(e.target.value); }}
-        onKeyDown={handleKeyDown}
-        placeholder="e.g. Bash(curl:*)"
-        aria-label={label}
-        className="flex-1 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]"
-      />
-      <button
-        onClick={handleAdd}
-        disabled={!value.trim()}
-        className={
-          "flex items-center gap-1.5 px-3 h-9 sm:h-7 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] cursor-pointer focus-visible:ring-2 focus-visible:ring-primary" +
-          (!value.trim() ? " opacity-50 cursor-not-allowed" : "")
-        }
-      >
-        <Plus size={12} />
-        Add
-      </button>
-    </div>
-  );
-}
-
-export function ProjectPermissions({
-  settings,
-  updateSection,
-}: {
-  settings: ProjectSettings;
-  updateSection: (section: string, data: Record<string, unknown>) => void;
-}) {
-  var [allow, setAllow] = useState<string[]>(function () {
-    return [...(settings.permissions.allow ?? [])];
-  });
-  var [deny, setDeny] = useState<string[]>(function () {
-    return [...(settings.permissions.deny ?? [])];
-  });
-  var save = useSaveState();
-
-  useEffect(function () {
-    if (save.savingRef.current) {
-      save.confirmSave();
-    } else {
-      setAllow([...(settings.permissions.allow ?? [])]);
-      setDeny([...(settings.permissions.deny ?? [])]);
-      save.resetFromServer();
-    }
-  }, [settings]);
-
-  function handleDeleteAllow(idx: number) {
-    setAllow(function (prev) {
-      var next = [...prev];
-      next.splice(idx, 1);
-      return next;
-    });
-    save.markDirty();
-  }
-
-  function handleDeleteDeny(idx: number) {
-    setDeny(function (prev) {
-      var next = [...prev];
-      next.splice(idx, 1);
-      return next;
-    });
-    save.markDirty();
-  }
-
-  function handleAddAllow(rule: string) {
-    setAllow(function (prev) { return [...prev, rule]; });
-    save.markDirty();
-  }
-
-  function handleAddDeny(rule: string) {
-    setDeny(function (prev) { return [...prev, rule]; });
-    save.markDirty();
-  }
-
-  function handleSave() {
-    save.startSave();
-    updateSection("permissions", { allow, deny });
-  }
-
-  var globalAllow = settings.global.permissions?.allow ?? [];
-  var globalDeny = settings.global.permissions?.deny ?? [];
-
-  return (
-    <div className="py-2">
-      <div className="mb-6">
-        <h2 className="text-[12px] font-semibold text-base-content/40 mb-3">
-          Allow Rules
-        </h2>
-        <RuleList rules={allow} onDelete={handleDeleteAllow} labelPrefix="allow" />
-        <AddRuleRow onAdd={handleAddAllow} label="New allow rule" />
-      </div>
-
-      <div className="mb-6">
-        <h2 className="text-[12px] font-semibold text-base-content/40 mb-3">
-          Deny Rules
-        </h2>
-        <RuleList rules={deny} onDelete={handleDeleteDeny} labelPrefix="deny" />
-        <AddRuleRow onAdd={handleAddDeny} label="New deny rule" />
-      </div>
-
-      <div className="mb-8">
-        <SaveFooter dirty={save.dirty} saving={save.saving} saveState={save.saveState} onSave={handleSave} />
-      </div>
-
-      {(globalAllow.length > 0 || globalDeny.length > 0) && (
-        <div>
-          <h2 className="text-[12px] font-semibold text-base-content/40 mb-3">
-            Global Permissions
-          </h2>
-          {globalAllow.length > 0 && (
-            <div className="mb-4">
-              <div className="text-[11px] text-base-content/40 uppercase tracking-wider mb-1.5">Allow</div>
-              <RuleList rules={globalAllow} readOnly />
-            </div>
-          )}
-          {globalDeny.length > 0 && (
-            <div className="mb-4">
-              <div className="text-[11px] text-base-content/40 uppercase tracking-wider mb-1.5">Deny</div>
-              <RuleList rules={globalDeny} readOnly />
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,117 +0,0 @@
-import { useState, useEffect } from "react";
-import { Blocks, Loader2 } from "lucide-react";
-import { useWebSocket } from "../../hooks/useWebSocket";
-import type { ProjectSettings, ServerMessage, PluginInfo } from "#shared";
-
-interface ProjectPluginsProps {
-  settings: ProjectSettings;
-  updateSection: (section: string, data: Record<string, unknown>) => void;
-}
-
-export function ProjectPlugins({ settings, updateSection }: ProjectPluginsProps) {
-  var { send, subscribe, unsubscribe } = useWebSocket();
-  var [plugins, setPlugins] = useState<PluginInfo[]>([]);
-  var [loaded, setLoaded] = useState(false);
-  var [disabledPlugins, setDisabledPlugins] = useState<string[]>(settings.disabledPlugins ?? []);
-  var [saving, setSaving] = useState(false);
-
-  useEffect(function () {
-    function handleListResult(msg: ServerMessage) {
-      if (msg.type !== "plugin:list_result") return;
-      var data = msg as { type: "plugin:list_result"; plugins: PluginInfo[] };
-      setPlugins(data.plugins);
-      setLoaded(true);
-    }
-
-    subscribe("plugin:list_result", handleListResult);
-    send({ type: "plugin:list" } as any);
-
-    return function () {
-      unsubscribe("plugin:list_result", handleListResult);
-    };
-  }, []);
-
-  useEffect(function () {
-    setDisabledPlugins(settings.disabledPlugins ?? []);
-  }, [settings.disabledPlugins]);
-
-  function handleToggle(pluginKey: string) {
-    var next: string[];
-    if (disabledPlugins.indexOf(pluginKey) !== -1) {
-      next = disabledPlugins.filter(function (k) { return k !== pluginKey; });
-    } else {
-      next = disabledPlugins.concat(pluginKey);
-    }
-    setDisabledPlugins(next);
-    setSaving(true);
-    updateSection("plugins", { disabledPlugins: next });
-    setTimeout(function () { setSaving(false); }, 500);
-  }
-
-  if (!loaded) {
-    return <div className="text-[13px] text-base-content/40 py-4">Loading...</div>;
-  }
-
-  if (plugins.length === 0) {
-    return (
-      <div className="py-6 text-center text-[13px] text-base-content/30">
-        No plugins installed. Install plugins from Global Settings to use them in projects.
-      </div>
-    );
-  }
-
-  var enabledCount = plugins.length - disabledPlugins.length;
-
-  return (
-    <div className="py-2 space-y-4">
-      <div className="flex items-center justify-between">
-        <p className="text-[12px] text-base-content/40">
-          Toggle plugins on/off for this project. Disabled plugins won't load in new sessions.
-        </p>
-        {saving && <Loader2 size={12} className="text-primary animate-spin" />}
-      </div>
-
-      <div className="text-[11px] text-base-content/30 mb-1">
-        {enabledCount} of {plugins.length} enabled
-      </div>
-
-      <div className="space-y-1.5">
-        {plugins.map(function (plugin) {
-          var isDisabled = disabledPlugins.indexOf(plugin.key) !== -1;
-          return (
-            <div
-              key={plugin.key}
-              className={
-                "flex items-center gap-3 px-3 py-2.5 rounded-xl border transition-colors duration-[120ms] " +
-                (isDisabled
-                  ? "bg-base-300/30 border-base-content/8 opacity-50"
-                  : "bg-base-300 border-base-content/15")
-              }
-            >
-              <Blocks size={14} className="text-base-content/25 flex-shrink-0" />
-              <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2">
-                  <span className="text-[13px] font-bold text-base-content truncate">{plugin.name}</span>
-                  <span className="text-[10px] font-mono px-1.5 py-0.5 rounded-md bg-base-content/8 text-base-content/40">
-                    v{plugin.version}
-                  </span>
-                </div>
-                <div className="text-[11px] text-base-content/30 mt-0.5">
-                  {plugin.marketplace}
-                  {plugin.skillCount > 0 ? " \u00B7 " + plugin.skillCount + " skill" + (plugin.skillCount !== 1 ? "s" : "") : ""}
-                </div>
-              </div>
-              <input
-                type="checkbox"
-                checked={!isDisabled}
-                onChange={function () { handleToggle(plugin.key); }}
-                className="toggle toggle-sm toggle-primary"
-                aria-label={(isDisabled ? "Enable" : "Disable") + " " + plugin.name}
-              />
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}

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

@@ -1,286 +0,0 @@
-import { useState, useEffect } from "react";
-import { X, Plus, ChevronDown, ChevronRight, ExternalLink } from "lucide-react";
-import { SaveFooter } from "../ui/SaveFooter";
-import { useSaveState } from "../../hooks/useSaveState";
-import type { ProjectSettings } from "#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: { filename: string; content: string }) {
-      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.savingRef.current) {
-      save.confirmSave();
-    } else {
-      setRules((settings.rules ?? []).map(function (r: { filename: string; content: string }) {
-        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">
-      <a
-        href="https://docs.anthropic.com/en/docs/claude-code/memory"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-[11px] text-base-content/30 hover:text-primary/70 flex items-center gap-1 mb-4 transition-colors"
-      >
-        <ExternalLink size={11} />
-        Claude Code docs
-      </a>
-      <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: typeof globalRules[number], idx: number) {
-              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>
-  );
-}