@mndrk/agx 2.0.22 → 2.0.24

package/cloud-runtime/standalone/components/chat-ui/ParticipantBar.tsx

@@ -12,6 +12,8 @@ import {
   FolderOpen,
   ChevronDown,
   GripVertical,
+  Copy,
+  Check,
 } from 'lucide-react';
 import RichTextEditor from "@/components/RichTextEditor";
 import {
@@ -86,11 +88,11 @@ function SortableAgentItem({
   return (
     <div ref={setNodeRef} style={style} className="relative group">
       <div
-        className={`w-full flex items-center justify-between gap-1 px-1.5 py-1.5 rounded-md transition-colors ${isActive ? "text-slate-700 hover:bg-slate-100" : "text-slate-400 hover:bg-slate-50"}`}
+        className={`w-full flex items-center justify-between gap-1 px-1.5 py-1.5 rounded-md transition-colors ${isActive ? "text-[var(--foreground)] hover:bg-[var(--muted)]" : "text-[var(--muted-foreground)] hover:bg-[var(--app-shell-subtle)]"}`}
       >
         <button
           type="button"
-          className="flex-shrink-0 cursor-grab active:cursor-grabbing p-1 text-slate-300 hover:text-slate-500 transition-colors"
+          className="flex-shrink-0 cursor-grab active:cursor-grabbing p-1 text-[var(--muted-foreground)] hover:text-[var(--muted-foreground)] transition-colors"
           {...attributes}
           {...listeners}
         >
@@ -121,9 +123,9 @@ function SortableAgentItem({
           }}
           aria-label={`${isActive ? "Disable" : "Enable"} ${p.name}`}
           aria-pressed={isActive}
-          className={`relative w-5 h-3 rounded-full transition-colors flex-shrink-0 ${isActive ? "bg-violet-300" : "bg-slate-200"}`}
+          className={`relative w-5 h-3 rounded-full transition-colors flex-shrink-0 ${isActive ? "bg-violet-300" : "bg-[var(--muted)]"}`}
         >
-          <span className={`absolute top-[2px] left-[2px] w-2 h-2 bg-white rounded-full shadow-sm transition-transform ${isActive ? "translate-x-2" : "translate-x-0"}`} />
+          <span className={`absolute top-[2px] left-[2px] w-2 h-2 bg-[var(--card-bg)] rounded-full shadow-sm transition-transform ${isActive ? "translate-x-2" : "translate-x-0"}`} />
         </button>
       </div>
     </div>
@@ -160,6 +162,102 @@ export interface ProjectMembership {
   available: { id: string; name: string }[];
 }
 
+type AgentFormViewMode = "form" | "json";
+
+const AGENT_FORM_PROVIDERS: ChatProvider[] = ["claude", "ollama", "gemini", "codex", "zai"];
+
+function serializeSkills(skills: AgentFormData["skills"]) {
+  return (skills ?? []).map((skill) => (
+    skill.condition?.trim()
+      ? `${skill.file} | ${skill.condition}`
+      : skill.file
+  )).join("\n");
+}
+
+function parseSkillsText(skillsText: string) {
+  return skillsText
+    .split("\n")
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .map((line) => {
+      const [file, ...conditionParts] = line.split("|");
+      return {
+        file: file.trim(),
+        condition: conditionParts.join("|").trim(),
+      };
+    })
+    .filter((skill) => skill.file.length > 0);
+}
+
+function buildAgentFormJson(data: AgentFormData, projectIds?: string[]) {
+  return JSON.stringify(
+    {
+      name: data.name,
+      provider: data.provider,
+      model: data.model,
+      identity: data.identity,
+      color: data.color ?? "#6B7280",
+      skills: data.skills ?? [],
+      ...(projectIds ? { projectIds } : {}),
+    },
+    null,
+    2
+  );
+}
+
+function parseAgentFormJson(raw: string, currentProvider: ChatProvider) {
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    throw new Error("JSON is invalid.");
+  }
+
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+    throw new Error("JSON must be an object.");
+  }
+
+  const obj = parsed as Record<string, unknown>;
+  const providerValue = typeof obj.provider === "string" ? obj.provider : currentProvider;
+  const provider = AGENT_FORM_PROVIDERS.includes(providerValue as ChatProvider)
+    ? providerValue as ChatProvider
+    : currentProvider;
+
+  const skillsInput = Array.isArray(obj.skills) ? obj.skills : [];
+  const skills = skillsInput.flatMap((entry) => {
+    if (typeof entry === "string") {
+      const [file, ...conditionParts] = entry.split("|");
+      const trimmedFile = file.trim();
+      return trimmedFile
+        ? [{ file: trimmedFile, condition: conditionParts.join("|").trim() }]
+        : [];
+    }
+    if (!entry || typeof entry !== "object" || Array.isArray(entry)) return [];
+    const file = typeof entry.file === "string" ? entry.file.trim() : "";
+    if (!file) return [];
+    return [{
+      file,
+      condition: typeof entry.condition === "string" ? entry.condition.trim() : "",
+    }];
+  });
+
+  const projectIds = Array.isArray(obj.projectIds)
+    ? obj.projectIds.filter((projectId): projectId is string => typeof projectId === "string" && projectId.trim().length > 0)
+    : undefined;
+
+  return {
+    data: {
+      name: typeof obj.name === "string" ? obj.name : "",
+      provider,
+      model: typeof obj.model === "string" ? obj.model : "",
+      identity: typeof obj.identity === "string" ? obj.identity : "",
+      color: typeof obj.color === "string" && obj.color.trim() ? obj.color : "#6B7280",
+      skills,
+    } satisfies AgentFormData,
+    projectIds,
+  };
+}
+
 interface AgentInspectabilitySummary {
   learnedMemories: Array<{
     id: string;
@@ -212,20 +310,36 @@ export function AgentForm({
   const [model, setModel] = useState(initial.model);
   const [identity, setIdentity] = useState(initial.identity);
   const [color, setColor] = useState(initial.color ?? "#6B7280");
-  const [skillsText, setSkillsText] = useState(
-    (initial.skills ?? []).map((skill) => (
-      skill.condition?.trim()
-        ? `${skill.file} | ${skill.condition}`
-        : skill.file
-    )).join("\n")
-  );
+  const [skillsText, setSkillsText] = useState(serializeSkills(initial.skills));
   const [selectedProjectIds, setSelectedProjectIds] = useState<Set<string>>(new Set(initialProjectIds ?? []));
   const [inspectability, setInspectability] = useState<AgentInspectabilitySummary | null>(null);
   const [projectKnowledgeSummaries, setProjectKnowledgeSummaries] = useState<ProjectKnowledgeSummary[]>([]);
+  const [viewMode, setViewMode] = useState<AgentFormViewMode>("form");
+  const [jsonText, setJsonText] = useState(() => buildAgentFormJson(initial, projects ? (initialProjectIds ?? []) : undefined));
+  const [jsonError, setJsonError] = useState<string | null>(null);
+  const [jsonCopied, setJsonCopied] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 
   useClickOutside(ref, onCancel);
 
+  useEffect(() => {
+    if (viewMode !== "form") return;
+    setJsonText(buildAgentFormJson({
+      name,
+      provider,
+      model,
+      identity,
+      color,
+      skills: parseSkillsText(skillsText),
+    }, projects ? Array.from(selectedProjectIds) : undefined));
+  }, [viewMode, name, provider, model, identity, color, skillsText, selectedProjectIds, projects]);
+
+  useEffect(() => {
+    if (!jsonCopied) return;
+    const timeoutId = window.setTimeout(() => setJsonCopied(false), 1200);
+    return () => window.clearTimeout(timeoutId);
+  }, [jsonCopied]);
+
   useEffect(() => {
     let cancelled = false;
 
@@ -321,43 +435,109 @@ export function AgentForm({
     };
   }, [projectMemberships, projects]);
 
+  const applyParsedJson = (raw: string) => {
+    const parsed = parseAgentFormJson(raw, provider);
+    const validProjectIds = projects
+      ? (parsed.projectIds ?? []).filter((projectId) => projects.some((project) => project.id === projectId))
+      : undefined;
+    setName(parsed.data.name);
+    setProvider(parsed.data.provider);
+    setModel(parsed.data.model);
+    setIdentity(parsed.data.identity);
+    setColor(parsed.data.color ?? "#6B7280");
+    setSkillsText(serializeSkills(parsed.data.skills));
+    if (projects) {
+      setSelectedProjectIds(new Set(validProjectIds ?? []));
+    }
+    setJsonText(buildAgentFormJson(parsed.data, projects ? (validProjectIds ?? []) : undefined));
+    setJsonError(null);
+    return {
+      ...parsed,
+      projectIds: validProjectIds,
+    };
+  };
+
+  const switchToFormView = () => {
+    if (viewMode === "form") return;
+    try {
+      applyParsedJson(jsonText);
+      setViewMode("form");
+    } catch (error) {
+      setJsonError(error instanceof Error ? error.message : "Unable to parse JSON.");
+    }
+  };
+
+  const switchToJsonView = () => {
+    setJsonText(buildAgentFormJson({
+      name,
+      provider,
+      model,
+      identity,
+      color,
+      skills: parseSkillsText(skillsText),
+    }, projects ? Array.from(selectedProjectIds) : undefined));
+    setJsonError(null);
+    setViewMode("json");
+  };
+
+  const handleCopyJson = async () => {
+    try {
+      await navigator.clipboard.writeText(jsonText);
+      setJsonCopied(true);
+    } catch {
+      setJsonCopied(false);
+    }
+  };
+
   const handleSubmit = () => {
-    if (!name.trim() || !model.trim()) return;
-    const skills = skillsText
-      .split("\n")
-      .map((line) => line.trim())
-      .filter(Boolean)
-      .map((line) => {
-        const [file, ...conditionParts] = line.split("|");
-        return {
-          file: file.trim(),
-          condition: conditionParts.join("|").trim(),
-        };
-      })
-      .filter((skill) => skill.file.length > 0);
+    let nextName = name.trim();
+    let nextProvider = provider;
+    let nextModel = model.trim();
+    let nextIdentity = identity.trim();
+    let nextColor = color;
+    let nextSkills = parseSkillsText(skillsText);
+    let nextProjectIds = projects ? Array.from(selectedProjectIds) : undefined;
+
+    if (viewMode === "json") {
+      try {
+        const parsed = applyParsedJson(jsonText);
+        nextName = parsed.data.name.trim();
+        nextProvider = parsed.data.provider;
+        nextModel = parsed.data.model.trim();
+        nextIdentity = parsed.data.identity.trim();
+        nextColor = parsed.data.color ?? "#6B7280";
+        nextSkills = parsed.data.skills ?? [];
+        nextProjectIds = projects ? (parsed.projectIds ?? []) : undefined;
+      } catch (error) {
+        setJsonError(error instanceof Error ? error.message : "Unable to parse JSON.");
+        return;
+      }
+    }
+
+    if (!nextName || !nextModel) return;
 
     onSubmit(
       {
-        name: name.trim(),
-        provider,
-        model: model.trim(),
-        identity: identity.trim(),
-        color,
-        skills,
+        name: nextName,
+        provider: nextProvider,
+        model: nextModel,
+        identity: nextIdentity,
+        color: nextColor,
+        skills: nextSkills,
       },
-      projects ? Array.from(selectedProjectIds) : undefined
+      nextProjectIds
     );
   };
 
   return (
     <div
       ref={ref}
-      className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-500/20 backdrop-blur-sm"
+      className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/30 backdrop-blur-sm"
       onKeyDown={(e) => {
         if (e.key === "Escape") onCancel();
       }}
     >
-      <div className="bg-white rounded-[32px] shadow-2xl overflow-hidden w-full max-w-2xl max-h-[90vh] flex flex-col animate-in fade-in zoom-in duration-300">
+      <div className="bg-[var(--card-bg)] rounded-[32px] shadow-2xl overflow-hidden w-full max-w-2xl max-h-[90vh] flex flex-col animate-in fade-in zoom-in duration-300">
         <div className="px-8 pt-8 pb-4 shrink-0 flex items-center justify-between">
           <div className="flex items-center gap-4">
             {agentId && (
@@ -365,291 +545,355 @@ export function AgentForm({
                 <img
                   src={agentAvatarUrl(agentId, 64, color)}
                   alt={name}
-                  className="w-14 h-14 rounded-full bg-slate-100"
+                  className="w-14 h-14 rounded-full bg-[var(--muted)]"
                 />
                 <div className="flex items-center gap-1.5">
-                  <label className="text-[10px] text-slate-400">Color</label>
+                  <label className="text-[10px] text-[var(--muted-foreground)]">Color</label>
                   <input
                     type="color"
                     value={color}
                     onChange={(e) => setColor(e.target.value)}
-                    className="w-5 h-5 rounded border border-slate-200 cursor-pointer p-0"
+                    className="w-5 h-5 rounded border border-[var(--border)] cursor-pointer p-0"
                   />
                 </div>
               </div>
             )}
             <div>
-              <h2 className="text-[10px] font-bold tracking-widest text-slate-400 uppercase">{title}</h2>
+              <h2 className="text-[10px] font-bold tracking-widest text-[var(--muted-foreground)] uppercase">{title}</h2>
               <h1 className="text-2xl font-semibold mt-1">{name || "Configure Agent"}</h1>
             </div>
           </div>
           <button
             onClick={onCancel}
-            className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-full transition-all"
+            className="p-2 text-[var(--muted-foreground)] hover:text-[var(--muted-foreground)] hover:bg-[var(--muted)] rounded-full transition-all"
           >
             <X size={20} />
           </button>
         </div>
 
         <div className="px-8 pb-8 space-y-6 overflow-y-auto">
-          <div className="space-y-2">
-            <label className="flex items-center gap-2 text-sm font-medium text-slate-500">
-              <User size={16} /> Name
-            </label>
-            <input
-              type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all"
-              placeholder="Enter agent name..."
-              autoFocus
-            />
+          <div className="flex items-center justify-between gap-3">
+            <div className="inline-flex rounded-xl bg-[var(--muted)] p-1">
+              <button
+                type="button"
+                onClick={switchToFormView}
+                className={viewMode === "form"
+                  ? "px-3 py-1.5 text-xs font-semibold rounded-lg bg-[var(--card-bg)] text-[var(--foreground)] shadow-sm"
+                  : "px-3 py-1.5 text-xs font-semibold rounded-lg text-[var(--muted-foreground)] hover:text-[var(--foreground)]"}
+              >
+                Form
+              </button>
+              <button
+                type="button"
+                onClick={switchToJsonView}
+                className={viewMode === "json"
+                  ? "px-3 py-1.5 text-xs font-semibold rounded-lg bg-[var(--card-bg)] text-[var(--foreground)] shadow-sm"
+                  : "px-3 py-1.5 text-xs font-semibold rounded-lg text-[var(--muted-foreground)] hover:text-[var(--foreground)]"}
+              >
+                JSON
+              </button>
+            </div>
+            {viewMode === "json" && (
+              <button
+                type="button"
+                onClick={handleCopyJson}
+                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--muted)] rounded-lg transition-colors"
+              >
+                {jsonCopied ? <Check size={14} className="text-emerald-500" /> : <Copy size={14} />}
+                {jsonCopied ? "Copied" : "Copy"}
+              </button>
+            )}
           </div>
 
-          <div className="grid grid-cols-2 gap-4">
-            <div className="space-y-2">
-              <label className="flex items-center gap-2 text-sm font-medium text-slate-500">
-                <Box size={16} /> Provider
-              </label>
-              <div className="relative">
-                <select
-                  value={provider}
-                  onChange={(e) => setProvider(e.target.value as ChatProvider)}
-                  className="w-full appearance-none px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all pr-10 cursor-pointer"
-                >
-                  <option value="claude">Claude</option>
-                  <option value="ollama">Ollama</option>
-                  <option value="gemini">Gemini</option>
-                  <option value="codex">Codex</option>
-                  <option value="zai">Z.AI</option>
-                </select>
-                <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" size={16} />
+          {viewMode === "form" ? (
+            <>
+              <div className="space-y-2">
+                <label className="flex items-center gap-2 text-sm font-medium text-[var(--muted-foreground)]">
+                  <User size={16} /> Name
+                </label>
+                <input
+                  type="text"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className="w-full px-4 py-3 bg-[var(--app-shell-subtle)] border border-[var(--border)] rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all"
+                  placeholder="Enter agent name..."
+                  autoFocus
+                />
               </div>
-            </div>
-            <div className="space-y-2">
-              <label className="flex items-center gap-2 text-sm font-medium text-slate-500">
-                <Cpu size={16} /> Model
-              </label>
-              <input
-                type="text"
-                value={model}
-                onChange={(e) => setModel(e.target.value)}
-                className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all font-mono text-sm"
-                placeholder="e.g. claude-sonnet-4-6"
-              />
-            </div>
-          </div>
 
-          <div className="space-y-2">
-            <label className="flex items-center gap-2 text-sm font-medium text-slate-500">
-              <BookOpen size={16} /> Identity
-            </label>
-            <div className="border border-slate-200 rounded-xl overflow-hidden bg-slate-50 focus-within:ring-2 focus-within:ring-indigo-500/20 focus-within:border-indigo-500 transition-all">
-              <RichTextEditor
-                content={identity}
-                onChange={(md) => setIdentity(md)}
-                placeholder="Describe the agent's identity and role..."
-              />
-            </div>
-            <p className="text-xs text-slate-400">Identity defines who the agent is. Keep portable knowledge separate below; project and repo knowledge belong on their scoped surfaces.</p>
-          </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <label className="flex items-center gap-2 text-sm font-medium text-[var(--muted-foreground)]">
+                    <Box size={16} /> Provider
+                  </label>
+                  <div className="relative">
+                    <select
+                      value={provider}
+                      onChange={(e) => setProvider(e.target.value as ChatProvider)}
+                      className="w-full appearance-none px-4 py-3 bg-[var(--app-shell-subtle)] border border-[var(--border)] rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all pr-10 cursor-pointer"
+                    >
+                      <option value="claude">Claude</option>
+                      <option value="ollama">Ollama</option>
+                      <option value="gemini">Gemini</option>
+                      <option value="codex">Codex</option>
+                      <option value="zai">Z.AI</option>
+                    </select>
+                    <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)] pointer-events-none" size={16} />
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <label className="flex items-center gap-2 text-sm font-medium text-[var(--muted-foreground)]">
+                    <Cpu size={16} /> Model
+                  </label>
+                  <input
+                    type="text"
+                    value={model}
+                    onChange={(e) => setModel(e.target.value)}
+                    className="w-full px-4 py-3 bg-[var(--app-shell-subtle)] border border-[var(--border)] rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all font-mono text-sm"
+                    placeholder="e.g. claude-sonnet-4-6"
+                  />
+                </div>
+              </div>
 
-          <div className="space-y-2">
-            <label className="flex items-center gap-2 text-sm font-medium text-slate-500">
-              <Sparkles size={16} /> Portable Knowledge
-            </label>
-            <textarea
-              value={skillsText}
-              onChange={(e) => setSkillsText(e.target.value)}
-              rows={5}
-              className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all font-mono text-xs"
-              placeholder={"one/path/to/skill.md\npath/to/skill.md | when coding in TypeScript"}
-            />
-            <p className="text-xs text-slate-400">Portable agent knowledge only. One reference per line. Use <code>|</code> to add an optional condition.</p>
-          </div>
+              <div className="space-y-2">
+                <label className="flex items-center gap-2 text-sm font-medium text-[var(--muted-foreground)]">
+                  <BookOpen size={16} /> Identity
+                </label>
+                <div className="border border-[var(--border)] rounded-xl overflow-hidden bg-[var(--app-shell-subtle)] focus-within:ring-2 focus-within:ring-indigo-500/20 focus-within:border-indigo-500 transition-all">
+                  <RichTextEditor
+                    content={identity}
+                    onChange={(md) => setIdentity(md)}
+                    placeholder="Describe the agent's identity and role..."
+                  />
+                </div>
+                <p className="text-xs text-[var(--muted-foreground)]">Identity defines who the agent is. Keep portable knowledge separate below; project and repo knowledge belong on their scoped surfaces.</p>
+              </div>
 
-          {agentId && (
-            <div className="space-y-3">
-              <label className="flex items-center gap-2 text-sm font-medium text-slate-500">
-                <Sparkles size={16} /> System-Generated Agent Knowledge
-              </label>
-              {inspectability?.learnedMemories?.length ? (
-                <div className="space-y-2 max-h-48 overflow-y-auto">
-                  {inspectability.learnedMemories.map((item) => (
-                    <div key={item.id} className="rounded-xl border border-slate-200 bg-slate-50 px-3 py-2">
-                      <div className="flex items-center justify-between gap-2">
-                        <span className="text-[10px] font-bold uppercase tracking-wide text-slate-400">{item.type}</span>
-                        <span className="text-[10px] text-slate-400">{new Date(item.createdAt).toLocaleString()}</span>
-                      </div>
-                      <p className="mt-1 text-xs text-slate-700 leading-relaxed">{item.content}</p>
+              <div className="space-y-2">
+                <label className="flex items-center gap-2 text-sm font-medium text-[var(--muted-foreground)]">
+                  <Sparkles size={16} /> Portable Knowledge
+                </label>
+                <textarea
+                  value={skillsText}
+                  onChange={(e) => setSkillsText(e.target.value)}
+                  rows={5}
+                  className="w-full px-4 py-3 bg-[var(--app-shell-subtle)] border border-[var(--border)] rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all font-mono text-xs"
+                  placeholder={"one/path/to/skill.md\npath/to/skill.md | when coding in TypeScript"}
+                />
+                <p className="text-xs text-[var(--muted-foreground)]">Portable agent knowledge only. One reference per line. Use <code>|</code> to add an optional condition.</p>
+              </div>
+
+              {agentId && (
+                <div className="space-y-3">
+                  <label className="flex items-center gap-2 text-sm font-medium text-[var(--muted-foreground)]">
+                    <Sparkles size={16} /> System-Generated Agent Knowledge
+                  </label>
+                  {inspectability?.learnedMemories?.length ? (
+                    <div className="space-y-2 max-h-48 overflow-y-auto">
+                      {inspectability.learnedMemories.map((item) => (
+                        <div key={item.id} className="rounded-xl border border-[var(--border)] bg-[var(--app-shell-subtle)] px-3 py-2">
+                          <div className="flex items-center justify-between gap-2">
+                            <span className="text-[10px] font-bold uppercase tracking-wide text-[var(--muted-foreground)]">{item.type}</span>
+                            <span className="text-[10px] text-[var(--muted-foreground)]">{new Date(item.createdAt).toLocaleString()}</span>
+                          </div>
+                          <p className="mt-1 text-xs text-[var(--foreground)] leading-relaxed">{item.content}</p>
+                        </div>
+                      ))}
                     </div>
-                  ))}
+                  ) : (
+                    <p className="text-xs text-[var(--muted-foreground)]">No system-generated agent knowledge yet.</p>
+                  )}
                 </div>
-              ) : (
-                <p className="text-xs text-slate-400">No system-generated agent knowledge yet.</p>
               )}
-            </div>
-          )}
 
-          {projects && projects.length > 0 && (
-            <div className="space-y-3">
-              <label className="flex items-center gap-2 text-sm font-medium text-slate-500">
-                <FolderOpen size={16} /> Assign To Projects
-              </label>
-              <div className="space-y-1 max-h-[160px] overflow-y-auto">
-                {projects.map((project) => {
-                  const checked = selectedProjectIds.has(project.id);
-                  return (
-                    <button
-                      key={project.id}
-                      type="button"
-                      className={
-                        checked
-                          ? "w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors bg-indigo-50 text-indigo-700"
-                          : "w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors text-slate-600 hover:bg-slate-50"
-                      }
-                      onClick={() => setSelectedProjectIds((prev) => {
-                        const next = new Set(prev);
-                        if (next.has(project.id)) next.delete(project.id); else next.add(project.id);
-                        return next;
-                      })}
-                    >
-                      <div className={
-                        checked
-                          ? "w-4 h-4 rounded border flex-shrink-0 flex items-center justify-center bg-indigo-600 border-indigo-600"
-                          : "w-4 h-4 rounded border flex-shrink-0 flex items-center justify-center border-slate-300"
-                      }>
-                        {checked && <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2 2 4-4" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>}
-                      </div>
-                      <span className="text-xs font-medium text-left">{project.label ?? project.name}</span>
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-          )}
-
-          {projectMemberships && (
-            <div className="space-y-3">
-              <label className="flex items-center gap-2 text-sm font-medium text-slate-500">
-                <FolderOpen size={16} /> Project Memberships
-              </label>
-              {projectMemberships.current.length > 0 ? (
-                <div className="flex flex-col gap-1">
-                  {projectMemberships.current.map((project) => (
-                    <div key={project.id} className="flex items-center gap-2 text-xs bg-slate-50 rounded-lg px-3 py-2">
-                      <FolderOpen size={12} className="text-slate-400 shrink-0" />
-                      <span className="truncate flex-1">{project.name}</span>
-                      {onRemoveFromProject && !project.is_default && (
+              {projects && projects.length > 0 && (
+                <div className="space-y-3">
+                  <label className="flex items-center gap-2 text-sm font-medium text-[var(--muted-foreground)]">
+                    <FolderOpen size={16} /> Assign To Projects
+                  </label>
+                  <div className="space-y-1 max-h-[160px] overflow-y-auto">
+                    {projects.map((project) => {
+                      const checked = selectedProjectIds.has(project.id);
+                      return (
                         <button
+                          key={project.id}
                           type="button"
-                          className="text-slate-400 hover:text-red-500 transition-colors"
-                          onClick={() => onRemoveFromProject(project.id)}
-                          title="Remove from project"
+                          className={
+                            checked
+                              ? "w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors bg-indigo-50 text-indigo-700"
+                              : "w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors text-[var(--muted-foreground)] hover:bg-[var(--app-shell-subtle)]"
+                          }
+                          onClick={() => setSelectedProjectIds((prev) => {
+                            const next = new Set(prev);
+                            if (next.has(project.id)) next.delete(project.id); else next.add(project.id);
+                            return next;
+                          })}
                         >
-                          <X size={12} />
+                          <div className={
+                            checked
+                              ? "w-4 h-4 rounded border flex-shrink-0 flex items-center justify-center bg-indigo-600 border-indigo-600"
+                              : "w-4 h-4 rounded border flex-shrink-0 flex items-center justify-center border-[var(--border)]"
+                          }>
+                            {checked && <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2 2 4-4" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>}
+                          </div>
+                          <span className="text-xs font-medium text-left">{project.label ?? project.name}</span>
                         </button>
-                      )}
-                    </div>
-                  ))}
+                      );
+                    })}
+                  </div>
                 </div>
-              ) : (
-                <p className="text-xs text-slate-400 italic">Not assigned to any projects</p>
               )}
-              {projectMemberships.available.length > 0 && onAddToProject && (
-                <div className="flex flex-wrap gap-1">
-                  {projectMemberships.available.map((project) => (
-                    <button
-                      key={project.id}
-                      type="button"
-                      className="inline-flex items-center gap-1 text-[10px] px-2 py-1 rounded-lg border border-dashed border-slate-300 text-slate-500 hover:border-slate-400 hover:text-slate-700 transition-colors"
-                      onClick={() => onAddToProject(project.id)}
-                    >
-                      <Plus size={10} />
-                      {project.name}
-                    </button>
-                  ))}
+
+              {projectMemberships && (
+                <div className="space-y-3">
+                  <label className="flex items-center gap-2 text-sm font-medium text-[var(--muted-foreground)]">
+                    <FolderOpen size={16} /> Project Memberships
+                  </label>
+                  {projectMemberships.current.length > 0 ? (
+                    <div className="flex flex-col gap-1">
+                      {projectMemberships.current.map((project) => (
+                        <div key={project.id} className="flex items-center gap-2 text-xs bg-[var(--app-shell-subtle)] rounded-lg px-3 py-2">
+                          <FolderOpen size={12} className="text-[var(--muted-foreground)] shrink-0" />
+                          <span className="truncate flex-1">{project.name}</span>
+                          {onRemoveFromProject && !project.is_default && (
+                            <button
+                              type="button"
+                              className="text-[var(--muted-foreground)] hover:text-red-500 transition-colors"
+                              onClick={() => onRemoveFromProject(project.id)}
+                              title="Remove from project"
+                            >
+                              <X size={12} />
+                            </button>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <p className="text-xs text-[var(--muted-foreground)] italic">Not assigned to any projects</p>
+                  )}
+                  {projectMemberships.available.length > 0 && onAddToProject && (
+                    <div className="flex flex-wrap gap-1">
+                      {projectMemberships.available.map((project) => (
+                        <button
+                          key={project.id}
+                          type="button"
+                          className="inline-flex items-center gap-1 text-[10px] px-2 py-1 rounded-lg border border-dashed border-[var(--border)] text-[var(--muted-foreground)] hover:border-[var(--border)] hover:text-[var(--foreground)] transition-colors"
+                          onClick={() => onAddToProject(project.id)}
+                        >
+                          <Plus size={10} />
+                          {project.name}
+                        </button>
+                      ))}
+                    </div>
+                  )}
                 </div>
               )}
-            </div>
-          )}
 
-          {agentId && projectKnowledgeSummaries.length > 0 && (
-            <div className="space-y-3">
-              <label className="flex items-center gap-2 text-sm font-medium text-slate-500">
-                <FolderOpen size={16} /> Scoped Knowledge Summary
-              </label>
-              <div className="space-y-2">
-                {projectKnowledgeSummaries.map((project) => (
-                  <div key={project.id} className="rounded-xl border border-slate-200 bg-slate-50 px-3 py-3">
-                    <div className="text-xs font-semibold text-slate-800">{project.name}</div>
-                    <div className="mt-2 grid grid-cols-2 sm:grid-cols-5 gap-2 text-[10px] text-slate-500">
-                      <div className="rounded-lg bg-white px-2 py-2 border border-slate-100">
-                        <div className="font-bold text-slate-700">{project.projectKnowledgeReferences}</div>
-                        <div>Project refs</div>
-                      </div>
-                      <div className="rounded-lg bg-white px-2 py-2 border border-slate-100">
-                        <div className="font-bold text-slate-700">{project.projectKnowledgeNotes}</div>
-                        <div>Project notes</div>
-                      </div>
-                      <div className="rounded-lg bg-white px-2 py-2 border border-slate-100">
-                        <div className="font-bold text-slate-700">{project.systemProjectKnowledge}</div>
-                        <div>Project generated</div>
-                      </div>
-                      <div className="rounded-lg bg-white px-2 py-2 border border-slate-100">
-                        <div className="font-bold text-slate-700">{project.repoKnowledgeNotes}</div>
-                        <div>Repo notes</div>
-                      </div>
-                      <div className="rounded-lg bg-white px-2 py-2 border border-slate-100">
-                        <div className="font-bold text-slate-700">{project.systemRepoKnowledge}</div>
-                        <div>Repo generated</div>
-                      </div>
-                    </div>
-                    {(project.projectGeneratedItems.length > 0 || project.repoGeneratedItems.length > 0) && (
-                      <div className="mt-3 space-y-2">
-                        {project.projectGeneratedItems.length > 0 && (
-                          <div className="rounded-lg border border-slate-200 bg-white px-3 py-2">
-                            <div className="text-[10px] font-black uppercase tracking-wide text-slate-400">Project generated</div>
-                            <div className="mt-2 space-y-1">
-                              {project.projectGeneratedItems.map((item) => (
-                                <div key={item.id} className="text-xs text-slate-700 leading-relaxed">
-                                  {item.content}
-                                </div>
-                              ))}
-                            </div>
+              {agentId && projectKnowledgeSummaries.length > 0 && (
+                <div className="space-y-3">
+                  <label className="flex items-center gap-2 text-sm font-medium text-[var(--muted-foreground)]">
+                    <FolderOpen size={16} /> Scoped Knowledge Summary
+                  </label>
+                  <div className="space-y-2">
+                    {projectKnowledgeSummaries.map((project) => (
+                      <div key={project.id} className="rounded-xl border border-[var(--border)] bg-[var(--app-shell-subtle)] px-3 py-3">
+                        <div className="text-xs font-semibold text-[var(--foreground)]">{project.name}</div>
+                        <div className="mt-2 grid grid-cols-2 sm:grid-cols-5 gap-2 text-[10px] text-[var(--muted-foreground)]">
+                          <div className="rounded-lg bg-[var(--card-bg)] px-2 py-2 border border-[var(--border)]">
+                            <div className="font-bold text-[var(--foreground)]">{project.projectKnowledgeReferences}</div>
+                            <div>Project refs</div>
                           </div>
-                        )}
-                        {project.repoGeneratedItems.length > 0 && (
-                          <div className="rounded-lg border border-slate-200 bg-white px-3 py-2">
-                            <div className="text-[10px] font-black uppercase tracking-wide text-slate-400">Repo generated</div>
-                            <div className="mt-2 space-y-1">
-                              {project.repoGeneratedItems.map((item) => (
-                                <div key={item.id} className="text-xs text-slate-700 leading-relaxed">
-                                  {item.repoName ? `${item.repoName}: ` : ""}{item.content}
+                          <div className="rounded-lg bg-[var(--card-bg)] px-2 py-2 border border-[var(--border)]">
+                            <div className="font-bold text-[var(--foreground)]">{project.projectKnowledgeNotes}</div>
+                            <div>Project notes</div>
+                          </div>
+                          <div className="rounded-lg bg-[var(--card-bg)] px-2 py-2 border border-[var(--border)]">
+                            <div className="font-bold text-[var(--foreground)]">{project.systemProjectKnowledge}</div>
+                            <div>Project generated</div>
+                          </div>
+                          <div className="rounded-lg bg-[var(--card-bg)] px-2 py-2 border border-[var(--border)]">
+                            <div className="font-bold text-[var(--foreground)]">{project.repoKnowledgeNotes}</div>
+                            <div>Repo notes</div>
+                          </div>
+                          <div className="rounded-lg bg-[var(--card-bg)] px-2 py-2 border border-[var(--border)]">
+                            <div className="font-bold text-[var(--foreground)]">{project.systemRepoKnowledge}</div>
+                            <div>Repo generated</div>
+                          </div>
+                        </div>
+                        {(project.projectGeneratedItems.length > 0 || project.repoGeneratedItems.length > 0) && (
+                          <div className="mt-3 space-y-2">
+                            {project.projectGeneratedItems.length > 0 && (
+                              <div className="rounded-lg border border-[var(--border)] bg-[var(--card-bg)] px-3 py-2">
+                                <div className="text-[10px] font-black uppercase tracking-wide text-[var(--muted-foreground)]">Project generated</div>
+                                <div className="mt-2 space-y-1">
+                                  {project.projectGeneratedItems.map((item) => (
+                                    <div key={item.id} className="text-xs text-[var(--foreground)] leading-relaxed">
+                                      {item.content}
+                                    </div>
+                                  ))}
                                 </div>
-                              ))}
-                            </div>
+                              </div>
+                            )}
+                            {project.repoGeneratedItems.length > 0 && (
+                              <div className="rounded-lg border border-[var(--border)] bg-[var(--card-bg)] px-3 py-2">
+                                <div className="text-[10px] font-black uppercase tracking-wide text-[var(--muted-foreground)]">Repo generated</div>
+                                <div className="mt-2 space-y-1">
+                                  {project.repoGeneratedItems.map((item) => (
+                                    <div key={item.id} className="text-xs text-[var(--foreground)] leading-relaxed">
+                                      {item.repoName ? `${item.repoName}: ` : ""}{item.content}
+                                    </div>
+                                  ))}
+                                </div>
+                              </div>
+                            )}
                           </div>
                         )}
                       </div>
-                    )}
+                    ))}
                   </div>
-                ))}
+                  <p className="text-xs text-[var(--muted-foreground)]">Project and repo knowledge are edited on their scoped project surfaces.</p>
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="space-y-3">
+              <div className="flex items-center justify-between gap-3">
+                <p className="text-xs text-[var(--muted-foreground)]">Paste agent JSON here. Switching back to Form or saving will apply valid JSON to the form state.</p>
+                <button
+                  type="button"
+                  onClick={switchToFormView}
+                  className="px-3 py-1.5 text-xs font-semibold text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--muted)] rounded-lg transition-colors"
+                >
+                  Apply to Form
+                </button>
               </div>
-              <p className="text-xs text-slate-400">Project and repo knowledge are edited on their scoped project surfaces.</p>
+              <textarea
+                value={jsonText}
+                onChange={(e) => {
+                  setJsonText(e.target.value);
+                  if (jsonError) setJsonError(null);
+                }}
+                rows={22}
+                className="w-full px-4 py-3 bg-[var(--app-shell-bg)] text-[var(--foreground)] border border-[var(--app-shell-border)] rounded-2xl focus:outline-none focus:ring-2 focus:ring-[var(--ring)] focus:border-[var(--primary)] transition-all font-mono text-xs"
+                spellCheck={false}
+                autoFocus
+              />
+              {jsonError && (
+                <p className="text-xs text-red-500">{jsonError}</p>
+              )}
             </div>
           )}
 
-          <div className="flex items-center justify-end gap-3 pt-4 border-t border-slate-100">
+          <div className="flex items-center justify-end gap-3 pt-4 border-t border-[var(--border)]">
             <button
               onClick={onCancel}
-              className="px-6 py-2.5 text-sm font-semibold text-slate-500 hover:text-slate-800 hover:bg-slate-50 rounded-xl transition-all"
+              className="px-6 py-2.5 text-sm font-semibold text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--app-shell-subtle)] rounded-xl transition-all"
             >
               Cancel
             </button>
             <button
               onClick={handleSubmit}
-              disabled={!name.trim() || !model.trim()}
+              disabled={viewMode === "form" ? (!name.trim() || !model.trim()) : false}
               className="px-8 py-2.5 bg-indigo-600 text-white text-sm font-semibold rounded-xl shadow-[0_4px_12px_rgba(79,70,229,0.3)] hover:bg-indigo-700 active:scale-95 disabled:opacity-50 transition-all font-bold"
             >
               {submitLabel}
@@ -723,7 +967,7 @@ export function ParticipantBar({
               return (
               <React.Fragment key={p.id}>
                 {showDivider && (
-                  <div className="mx-2 my-1 border-t border-dashed border-slate-200" />
+                  <div className="mx-2 my-1 border-t border-dashed border-[var(--border)]" />
                 )}
                 <SortableAgentItem
                   p={p}
@@ -757,7 +1001,7 @@ export function ParticipantBar({
               onClick={() => {
                 setOpenPanel(openPanel === "add" ? null : "add");
               }}
-              className="w-full flex items-center justify-center gap-1 px-3 py-2 rounded-md text-sm font-medium text-slate-500 hover:text-slate-800 hover:bg-slate-100 transition-colors"
+              className="w-full flex items-center justify-center gap-1 px-3 py-2 rounded-md text-sm font-medium text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--muted)] transition-colors"
             >
               <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14" /><path d="M12 5v14" /></svg>
               Add agent
@@ -821,7 +1065,7 @@ export function ParticipantBar({
       <div className="relative">
         <button
           onClick={() => setOpenPanel(openPanel === "add" ? null : "add")}
-          className="text-xs border border-slate-200 text-slate-500 hover:text-slate-800 hover:border-slate-300 hover:bg-slate-50 transition-all font-medium flex items-center gap-1 px-2.5 py-1 rounded-full"
+          className="text-xs border border-[var(--border)] text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:border-[var(--border)] hover:bg-[var(--app-shell-subtle)] transition-all font-medium flex items-center gap-1 px-2.5 py-1 rounded-full"
         >
           <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14" /><path d="M12 5v14" /></svg>
           Add agent