@mndrk/agx 2.0.33 → 2.0.36

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

@@ -1,5 +1,4 @@
 "use client";
-
 import React, { useState, useRef, useEffect, useMemo } from "react";
 import {
   X,
@@ -32,7 +31,7 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import type { Participant, ChatProvider } from "@/lib/types";
+import type { Participant, ChatProvider, SkillBinding } from "@/lib/types";
 
 const COLORS = ["#D97706", "#2563EB", "#059669", "#DC2626", "#7C3AED", "#DB2777", "#0891B2"];
 
@@ -150,11 +149,13 @@ function useClickOutside(ref: React.RefObject<HTMLElement | null>, onClose: () =
 
 export interface AgentFormData {
   name: string;
+  title?: string;
   provider: ChatProvider;
   model: string;
   identity: string;
   color?: string;
   skills?: { file: string; condition: string }[];
+  skillBindings?: SkillBinding[];
 }
 
 export interface ProjectMembership {
@@ -193,11 +194,13 @@ function buildAgentFormJson(data: AgentFormData, projectIds?: string[]) {
   return JSON.stringify(
     {
       name: data.name,
+      ...(data.title ? { title: data.title } : {}),
       provider: data.provider,
       model: data.model,
       identity: data.identity,
       color: data.color ?? "#6B7280",
       skills: data.skills ?? [],
+      skillBindings: data.skillBindings ?? [],
       ...(projectIds ? { projectIds } : {}),
     },
     null,
@@ -244,44 +247,48 @@ function parseAgentFormJson(raw: string, currentProvider: ChatProvider) {
   const projectIds = Array.isArray(obj.projectIds)
     ? obj.projectIds.filter((projectId): projectId is string => typeof projectId === "string" && projectId.trim().length > 0)
     : undefined;
+  const skillBindingsInput = Array.isArray(obj.skillBindings) ? obj.skillBindings : [];
+  const skillBindings = skillBindingsInput.flatMap((entry) => {
+    if (!entry || typeof entry !== "object" || Array.isArray(entry)) return [];
+    const repo = typeof entry.repo === "string" ? entry.repo.trim() : "";
+    const skillId = typeof entry.skillId === "string" ? entry.skillId.trim() : "";
+    if (!repo || !skillId) return [];
+    return [{
+      repo,
+      skillId,
+      condition: typeof entry.condition === "string" ? entry.condition.trim() : "",
+    }];
+  });
 
   return {
     data: {
       name: typeof obj.name === "string" ? obj.name : "",
+      title: typeof obj.title === "string" ? obj.title : "",
       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,
+      skillBindings,
     } satisfies AgentFormData,
     projectIds,
   };
 }
 
-interface AgentInspectabilitySummary {
-  learnedMemories: Array<{
-    id: string;
-    taskId: string;
-    type: "outcome" | "decision" | "pattern" | "gotcha";
-    content: string;
-    createdAt: number;
-  }>;
+interface InstalledSkillOption {
+  id: string;
+  file: string;
+  repo?: string;
 }
 
-interface ProjectKnowledgeSummary {
-  id: string;
+interface CatalogSkillOption {
+  skillId: string;
+  repo: string;
   name: string;
-  projectKnowledgeReferences: number;
-  projectKnowledgeNotes: number;
-  systemProjectKnowledge: number;
-  repoKnowledgeNotes: number;
-  systemRepoKnowledge: number;
-  projectGeneratedItems: Array<{ id: string; content: string; created_at?: string }>;
-  repoGeneratedItems: Array<{ id: string; content: string; created_at?: string; repoName?: string }>;
 }
 
 export function AgentForm({
-  title,
+  title: formTitle,
   initial,
   submitLabel,
   onSubmit,
@@ -306,33 +313,50 @@ export function AgentForm({
   onRemoveFromProject?: (projectId: string) => void;
 }) {
   const [name, setName] = useState(initial.name);
+  const [title, setTitle] = useState(initial.title ?? "");
   const [provider, setProvider] = useState(initial.provider);
   const [model, setModel] = useState(initial.model);
   const [identity, setIdentity] = useState(initial.identity);
   const [color, setColor] = useState(initial.color ?? "#6B7280");
   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 [catalogSkills, setCatalogSkills] = useState<CatalogSkillOption[]>([]);
+  const [skillQuery, setSkillQuery] = useState("");
+  const [skillPickerOpen, setSkillPickerOpen] = useState(false);
+  const [skillBindings, setSkillBindings] = useState<SkillBinding[]>(initial.skillBindings ?? []);
+  const skillPickerRef = useRef<HTMLDivElement>(null);
   const ref = useRef<HTMLDivElement>(null);
 
   useClickOutside(ref, onCancel);
 
+  useEffect(() => {
+    if (!skillPickerOpen) return;
+    const handle = (event: MouseEvent) => {
+      if (skillPickerRef.current && !skillPickerRef.current.contains(event.target as Node)) {
+        setSkillPickerOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handle);
+    return () => document.removeEventListener("mousedown", handle);
+  }, [skillPickerOpen]);
+
   useEffect(() => {
     if (viewMode !== "form") return;
     setJsonText(buildAgentFormJson({
       name,
+      title,
       provider,
       model,
       identity,
       color,
       skills: parseSkillsText(skillsText),
+      skillBindings,
     }, projects ? Array.from(selectedProjectIds) : undefined));
-  }, [viewMode, name, provider, model, identity, color, skillsText, selectedProjectIds, projects]);
+  }, [viewMode, name, title, provider, model, identity, color, skillsText, skillBindings, selectedProjectIds, projects]);
 
   useEffect(() => {
     if (!jsonCopied) return;
@@ -343,97 +367,35 @@ export function AgentForm({
   useEffect(() => {
     let cancelled = false;
 
-    async function loadInspectability() {
-      if (!agentId) {
-        setInspectability(null);
-        return;
-      }
+    async function loadCatalogSkills() {
       try {
-        const res = await fetch(`/api/agents/${agentId}/profile`);
+        const res = await fetch("/api/skills");
         if (!res.ok) return;
         const data = await res.json();
         if (cancelled) return;
-        const learnedMemories = data?.inspectability?.knowledge?.agent?.learnedMemories ?? [];
-        setInspectability({ learnedMemories });
-      } catch {
-        if (!cancelled) setInspectability(null);
-      }
-    }
-
-    void loadInspectability();
-    return () => {
-      cancelled = true;
-    };
-  }, [agentId]);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    async function loadProjectKnowledgeSummaries() {
-      const currentProjectIds = projectMemberships?.current?.map((project) => project.id)
-        ?? projects?.map((project) => project.id)
-        ?? [];
-
-      if (currentProjectIds.length === 0) {
-        setProjectKnowledgeSummaries([]);
-        return;
-      }
-
-      try {
-        const summaries = await Promise.all(currentProjectIds.map(async (projectId) => {
-          const [projectRes, skillsRes, memoryRes, projectKnowledgeRes] = await Promise.all([
-            fetch(`/api/projects/${projectId}`),
-            fetch(`/api/projects/${projectId}/skills`),
-            fetch(`/api/projects/${projectId}/memory?producer=human`),
-            fetch(`/api/projects/${projectId}/memory?producer=system`),
-          ]);
-
-          const projectData = projectRes.ok ? await projectRes.json() : null;
-          const skillsData = skillsRes.ok ? await skillsRes.json() : null;
-          const memoryData = memoryRes.ok ? await memoryRes.json() : null;
-          const projectKnowledgeData = projectKnowledgeRes.ok ? await projectKnowledgeRes.json() : null;
-          const repos = projectData?.project?.repos ?? [];
-          const repoKnowledgePayloads = await Promise.all(
-            repos.map(async (repo: { id: string; name?: string }) => {
-              const res = await fetch(`/api/repos/${repo.id}/knowledge`);
-              if (!res.ok) return [];
-              const data = await res.json();
-              return (data.knowledge ?? []).map((entry: { id: string; content: string; created_at?: string; producer?: string }) => ({
-                ...entry,
-                repoName: repo.name ?? repo.id,
-              }));
-            })
-          );
-          const flattenedRepoKnowledge = repoKnowledgePayloads.flat();
-          const repoKnowledgeNotes = flattenedRepoKnowledge.filter((entry) => entry.producer !== "system").length;
-          const systemRepoKnowledge = flattenedRepoKnowledge.filter((entry) => entry.producer === "system").length;
-          const projectGeneratedItems = (projectKnowledgeData?.memory ?? []).slice(0, 3);
-          const repoGeneratedItems = flattenedRepoKnowledge.filter((entry) => entry.producer === "system").slice(0, 3);
-
-          return {
-            id: projectId,
-            name: projectData?.project?.name ?? projectMemberships?.current?.find((project) => project.id === projectId)?.name ?? projectId,
-            projectKnowledgeReferences: (skillsData?.skills ?? []).length,
-            projectKnowledgeNotes: (memoryData?.memory ?? []).length,
-            systemProjectKnowledge: (projectKnowledgeData?.memory ?? []).length,
-            repoKnowledgeNotes,
-            systemRepoKnowledge,
-            projectGeneratedItems,
-            repoGeneratedItems,
-          } satisfies ProjectKnowledgeSummary;
-        }));
-
-        if (!cancelled) setProjectKnowledgeSummaries(summaries);
+        const options = Array.isArray(data.skills)
+          ? data.skills
+            .filter((skill: unknown): skill is { skillId?: string; repo?: string; name?: string } =>
+              Boolean(skill) && typeof skill === "object"
+            )
+            .map((skill: { skillId?: string; repo?: string; name?: string }) => ({
+              skillId: String(skill.skillId ?? "").trim(),
+              repo: String(skill.repo ?? "").trim(),
+              name: String(skill.name ?? skill.skillId ?? "").trim(),
+            }))
+            .filter((skill: CatalogSkillOption) => skill.skillId.length > 0 && skill.repo.length > 0)
+          : [];
+        setCatalogSkills(options);
       } catch {
-        if (!cancelled) setProjectKnowledgeSummaries([]);
+        if (!cancelled) setCatalogSkills([]);
       }
     }
 
-    void loadProjectKnowledgeSummaries();
+    void loadCatalogSkills();
     return () => {
       cancelled = true;
     };
-  }, [projectMemberships, projects]);
+  }, []);
 
   const applyParsedJson = (raw: string) => {
     const parsed = parseAgentFormJson(raw, provider);
@@ -441,11 +403,13 @@ export function AgentForm({
       ? (parsed.projectIds ?? []).filter((projectId) => projects.some((project) => project.id === projectId))
       : undefined;
     setName(parsed.data.name);
+    setTitle(parsed.data.title ?? "");
     setProvider(parsed.data.provider);
     setModel(parsed.data.model);
     setIdentity(parsed.data.identity);
     setColor(parsed.data.color ?? "#6B7280");
     setSkillsText(serializeSkills(parsed.data.skills));
+    setSkillBindings(parsed.data.skillBindings ?? []);
     if (projects) {
       setSelectedProjectIds(new Set(validProjectIds ?? []));
     }
@@ -470,11 +434,13 @@ export function AgentForm({
   const switchToJsonView = () => {
     setJsonText(buildAgentFormJson({
       name,
+      title,
       provider,
       model,
       identity,
       color,
       skills: parseSkillsText(skillsText),
+      skillBindings,
     }, projects ? Array.from(selectedProjectIds) : undefined));
     setJsonError(null);
     setViewMode("json");
@@ -491,22 +457,26 @@ export function AgentForm({
 
   const handleSubmit = () => {
     let nextName = name.trim();
+    let nextTitle = title.trim();
     let nextProvider = provider;
     let nextModel = model.trim();
     let nextIdentity = identity.trim();
     let nextColor = color;
     let nextSkills = parseSkillsText(skillsText);
+    let nextSkillBindings = skillBindings;
     let nextProjectIds = projects ? Array.from(selectedProjectIds) : undefined;
 
     if (viewMode === "json") {
       try {
         const parsed = applyParsedJson(jsonText);
         nextName = parsed.data.name.trim();
+        nextTitle = (parsed.data.title ?? "").trim();
         nextProvider = parsed.data.provider;
         nextModel = parsed.data.model.trim();
         nextIdentity = parsed.data.identity.trim();
         nextColor = parsed.data.color ?? "#6B7280";
         nextSkills = parsed.data.skills ?? [];
+        nextSkillBindings = parsed.data.skillBindings ?? [];
         nextProjectIds = projects ? (parsed.projectIds ?? []) : undefined;
       } catch (error) {
         setJsonError(error instanceof Error ? error.message : "Unable to parse JSON.");
@@ -519,16 +489,46 @@ export function AgentForm({
     onSubmit(
       {
         name: nextName,
+        title: nextTitle || undefined,
         provider: nextProvider,
         model: nextModel,
         identity: nextIdentity,
         color: nextColor,
         skills: nextSkills,
+        skillBindings: nextSkillBindings,
       },
       nextProjectIds
     );
   };
 
+  const filteredCatalogSkills = useMemo(() => {
+    const normalized = skillQuery.trim().toLowerCase();
+    if (!normalized) return catalogSkills.slice(0, 50);
+    return catalogSkills
+      .filter((skill) =>
+        [skill.name, skill.skillId, skill.repo].some((value) => value.toLowerCase().includes(normalized))
+      )
+      .slice(0, 50);
+  }, [catalogSkills, skillQuery]);
+
+  const toggleSkillBinding = (repo: string, skillId: string) => {
+    setSkillBindings((prev) => (
+      prev.some((binding) => binding.repo === repo && binding.skillId === skillId)
+        ? prev.filter((binding) => !(binding.repo === repo && binding.skillId === skillId))
+        : [...prev, { repo, skillId }]
+    ));
+    setSkillQuery("");
+  };
+
+  const removeSkillBinding = (repo: string, skillId: string) => {
+    setSkillBindings((prev) => prev.filter((binding) => !(binding.repo === repo && binding.skillId === skillId)));
+  };
+
+  const assignedSkillKeys = useMemo(
+    () => new Set(skillBindings.map((binding) => `${binding.repo}::${binding.skillId}`)),
+    [skillBindings]
+  );
+
   return (
     <div
       ref={ref}
@@ -559,7 +559,7 @@ export function AgentForm({
               </div>
             )}
             <div>
-              <h2 className="text-[10px] font-bold tracking-widest text-[var(--muted-foreground)] uppercase">{title}</h2>
+              <h2 className="text-[10px] font-bold tracking-widest text-[var(--muted-foreground)] uppercase">{formTitle}</h2>
               <h1 className="text-2xl font-semibold mt-1">{name || "Configure Agent"}</h1>
             </div>
           </div>
@@ -607,18 +607,32 @@ export function AgentForm({
 
           {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 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)]">
+                    <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="e.g. Ada, Kai, Sage..."
+                    autoFocus
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="flex items-center gap-2 text-sm font-medium text-[var(--muted-foreground)]">
+                    Title
+                  </label>
+                  <input
+                    type="text"
+                    value={title}
+                    onChange={(e) => setTitle(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="e.g. VP of Engineering"
+                  />
+                </div>
               </div>
 
               <div className="grid grid-cols-2 gap-4">
@@ -663,7 +677,7 @@ export function AgentForm({
                   <RichTextEditor
                     content={identity}
                     onChange={(md) => setIdentity(md)}
-                    placeholder="Describe the agent's identity and role..."
+                    placeholder="You are a ..."
                   />
                 </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>
@@ -673,6 +687,100 @@ export function AgentForm({
                 <label className="flex items-center gap-2 text-sm font-medium text-[var(--muted-foreground)]">
                   <Sparkles size={16} /> Portable Knowledge
                 </label>
+                <div className="rounded-xl border border-[var(--border)] bg-[var(--app-shell-subtle)] p-3 space-y-3">
+                  <div className="flex items-center justify-between gap-3">
+                    <div>
+                      <p className="text-xs font-semibold text-[var(--foreground)]">Skills Picker</p>
+                      <p className="text-[11px] text-[var(--muted-foreground)]">Pick a skill here. AGX will install it later only if the run actually needs it.</p>
+                    </div>
+                  </div>
+                  {catalogSkills.length > 0 ? (
+                    <>
+                    <div className="relative" ref={skillPickerRef}>
+                      <button
+                        type="button"
+                        onClick={() => setSkillPickerOpen((current) => !current)}
+                        className="w-full flex items-center justify-between px-3 py-2 rounded-xl border border-[var(--border)] bg-[var(--card-bg)] text-sm font-medium hover:border-indigo-500"
+                      >
+                        <span className="truncate text-left">Search and add skills</span>
+                        <ChevronDown size={16} className={`shrink-0 text-[var(--muted-foreground)] transition-transform ${skillPickerOpen ? "rotate-180" : ""}`} />
+                      </button>
+                      {skillPickerOpen && (
+                        <div className="absolute left-0 right-0 top-full mt-2 z-30 rounded-xl border border-[var(--app-shell-border)] bg-[var(--app-shell-elevated)] shadow-lg overflow-hidden">
+                          <div className="p-2 border-b border-[var(--border)]">
+                            <input
+                              type="text"
+                              value={skillQuery}
+                              onChange={(e) => setSkillQuery(e.target.value)}
+                              placeholder="Search skills"
+                              className="w-full px-3 py-2 bg-[var(--card-bg)] border border-[var(--border)] rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500"
+                              autoFocus
+                            />
+                          </div>
+                          <div className="max-h-64 overflow-y-auto">
+                          {filteredCatalogSkills.length > 0 ? filteredCatalogSkills.map((skill) => {
+                              const key = `${skill.repo}::${skill.skillId}`;
+                              const isAdded = assignedSkillKeys.has(key);
+                              return (
+                                <button
+                                  key={key}
+                                  type="button"
+                                  className={`w-full px-3 py-2 text-left text-sm transition-colors ${
+                                    isAdded ? "bg-emerald-50 text-[var(--foreground)]" : "text-[var(--foreground)] hover:bg-[var(--app-shell-subtle)]"
+                                  }`}
+                                  onMouseDown={(e) => e.preventDefault()}
+                                  onClick={() => toggleSkillBinding(skill.repo, skill.skillId)}
+                                >
+                                  <div className="flex items-center justify-between gap-3">
+                                    <div className="min-w-0">
+                                      <div className="font-medium">{skill.name || skill.skillId}</div>
+                                      <div className="text-[11px] text-[var(--muted-foreground)]">{skill.repo}</div>
+                                    </div>
+                                    {isAdded && (
+                                      <span className="shrink-0 rounded-full bg-emerald-100 px-2 py-0.5 text-[10px] font-semibold text-emerald-700">
+                                        Added
+                                      </span>
+                                    )}
+                                  </div>
+                                </button>
+                              );
+                            }) : (
+                              <div className="px-3 py-3 text-sm text-[var(--muted-foreground)]">No matching skills.</div>
+                            )}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                    <div className="flex flex-wrap gap-2">
+                      {skillBindings.map((binding) => (
+                          <span
+                            key={`${binding.repo}::${binding.skillId}`}
+                            className="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200 px-2.5 py-1 text-[11px] font-medium"
+                          >
+                            {binding.skillId}
+                            <button
+                              type="button"
+                              onClick={() => removeSkillBinding(binding.repo, binding.skillId)}
+                              className="text-emerald-700/70 hover:text-emerald-900"
+                              title={`Remove ${binding.skillId}`}
+                            >
+                              <X size={12} />
+                            </button>
+                          </span>
+                        ))}
+                      {skillBindings.length === 0 && (
+                        <span className="text-[11px] text-[var(--muted-foreground)]">
+                          No library skills selected yet.
+                        </span>
+                      )}
+                    </div>
+                    </>
+                  ) : (
+                    <p className="text-[11px] text-[var(--muted-foreground)]">
+                      No catalog skills available right now.
+                    </p>
+                  )}
+                </div>
                 <textarea
                   value={skillsText}
                   onChange={(e) => setSkillsText(e.target.value)}
@@ -683,29 +791,6 @@ export function AgentForm({
                 <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>
-              )}
-
               {projects && projects.length > 0 && (
                 <div className="space-y-3">
                   <label className="flex items-center gap-2 text-sm font-medium text-[var(--muted-foreground)]">
@@ -789,71 +874,6 @@ export function AgentForm({
                 </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>
-                          <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>
-                            )}
-                            {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">
@@ -979,10 +999,10 @@ export function ParticipantBar({
                 {openPanel === p.id && !isAddPanelOpen && (
                 <AgentForm
                   title="Edit agent"
-                    initial={{ name: p.name, provider: p.provider, model: p.model || "", identity: p.identity || "", color: p.color }}
+                    initial={{ name: p.name, provider: p.provider, model: p.model || "", identity: p.identity || "", color: p.color, skills: p.skills || [], skillBindings: p.skillBindings || [] }}
                     submitLabel="Save"
                     onSubmit={(data) => {
-                      onUpdate({ id: p.id, color: data.color ?? p.color, name: data.name, provider: data.provider, model: data.model, ...(data.identity ? { identity: data.identity } : {}) });
+                      onUpdate({ id: p.id, color: data.color ?? p.color, name: data.name, provider: data.provider, model: data.model, ...(data.identity ? { identity: data.identity } : {}), skills: data.skills ?? [], skillBindings: data.skillBindings ?? [] });
                       setOpenPanel(null);
                     }}
                     onCancel={() => setOpenPanel(null)}
@@ -1010,12 +1030,12 @@ export function ParticipantBar({
           {isAddPanelOpen && (
             <AgentForm
               title="Add agent"
-              initial={{ name: "", provider: "claude", model: "", identity: "" }}
+              initial={{ name: "", provider: "claude", model: "", identity: "", skills: [], skillBindings: [] }}
               submitLabel="Add"
               onSubmit={(data) => {
                 const color = COLORS[participants.length % COLORS.length];
                 const id = data.name.toLowerCase().replace(/[^a-z0-9]+/g, "-");
-                onAdd({ id, color: data.color ?? color, name: data.name, provider: data.provider, model: data.model, ...(data.identity ? { identity: data.identity } : {}) });
+                onAdd({ id, color: data.color ?? color, name: data.name, provider: data.provider, model: data.model, ...(data.identity ? { identity: data.identity } : {}), skills: data.skills ?? [], skillBindings: data.skillBindings ?? [] });
                 setOpenPanel(null);
               }}
               onCancel={() => setOpenPanel(null)}
@@ -1050,10 +1070,10 @@ export function ParticipantBar({
           {openPanel === p.id && (
             <AgentForm
               title="Edit agent"
-              initial={{ name: p.name, provider: p.provider, model: p.model || "", identity: p.identity || "", color: p.color }}
+              initial={{ name: p.name, provider: p.provider, model: p.model || "", identity: p.identity || "", color: p.color, skills: p.skills || [], skillBindings: p.skillBindings || [] }}
               submitLabel="Save"
               onSubmit={(data) => {
-                onUpdate({ id: p.id, color: data.color ?? p.color, name: data.name, provider: data.provider, model: data.model, ...(data.identity ? { identity: data.identity } : {}) });
+                onUpdate({ id: p.id, color: data.color ?? p.color, name: data.name, provider: data.provider, model: data.model, ...(data.identity ? { identity: data.identity } : {}), skills: data.skills ?? [], skillBindings: data.skillBindings ?? [] });
                 setOpenPanel(null);
               }}
               onCancel={() => setOpenPanel(null)}
@@ -1074,12 +1094,12 @@ export function ParticipantBar({
         {openPanel === "add" && (
           <AgentForm
             title="Add agent"
-            initial={{ name: "", provider: "claude", model: "", identity: "" }}
+            initial={{ name: "", provider: "claude", model: "", identity: "", skills: [], skillBindings: [] }}
             submitLabel="Add"
             onSubmit={(data) => {
               const color = COLORS[participants.length % COLORS.length];
               const id = data.name.toLowerCase().replace(/[^a-z0-9]+/g, "-");
-              onAdd({ id, color: data.color ?? color, name: data.name, provider: data.provider, model: data.model, ...(data.identity ? { identity: data.identity } : {}) });
+              onAdd({ id, color: data.color ?? color, name: data.name, provider: data.provider, model: data.model, ...(data.identity ? { identity: data.identity } : {}), skills: data.skills ?? [], skillBindings: data.skillBindings ?? [] });
               setOpenPanel(null);
             }}
             onCancel={() => setOpenPanel(null)}