@aion0/forge 0.5.21 → 0.5.22

package/components/SessionView.tsx

@@ -442,8 +442,7 @@ export default function SessionView({
                             onClick={(e) => {
                               e.stopPropagation();
                               const pp = projects.find(p => p.name === project)?.path || '';
-                              if (pp && onOpenInTerminal) onOpenInTerminal(s.sessionId, pp);
-                              else if (pp) window.dispatchEvent(new CustomEvent('forge:open-terminal', { detail: { projectPath: pp, projectName: project, agentId: 'claude', resumeMode: true, sessionId: s.sessionId } }));
+                              if (pp) window.dispatchEvent(new CustomEvent('forge:open-terminal', { detail: { projectPath: pp, projectName: project, agentId: 'claude', resumeMode: true, sessionId: s.sessionId } }));
                             }}
                             className="text-[8px] px-1 py-0.5 rounded bg-green-500/10 text-green-400 hover:bg-green-500/20"
                             title="Open this session in terminal"
@@ -551,11 +550,11 @@ export default function SessionView({
                     Monitor
                   </button>
                 )}
-                {onOpenInTerminal && activeSessionId && (
+                {activeSessionId && (
                   <button
                     onClick={() => {
                       const proj = projects.find(p => p.name === selectedProject);
-                      if (proj) onOpenInTerminal(activeSessionId!, proj.path);
+                      if (proj) window.dispatchEvent(new CustomEvent('forge:open-terminal', { detail: { projectPath: proj.path, projectName: selectedProject, agentId: 'claude', resumeMode: true, sessionId: activeSessionId } }));
                     }}
                     className="text-[10px] px-2 py-0.5 bg-[var(--accent)] text-white rounded hover:opacity-90"
                   >
@@ -602,6 +601,7 @@ export default function SessionView({
           <div ref={bottomRef} />
         </div>
       </div>
+
     </div>
   );
 }

package/components/SettingsModal.tsx

@@ -809,7 +809,7 @@ function ProfileRow({ id, cfg, inputClass, onUpdate, onDelete }: {
   const isApi = cfg.type === 'api';
   const summary = isApi
     ? `API: ${cfg.provider || '?'} / ${cfg.model || '?'}`
-    : `CLI: ${cfg.base || '?'} / ${cfg.model || cfg.models?.task || 'default'}`;
+    : `CLI: ${cfg.cliType || cfg.base || '?'} / ${cfg.model || cfg.models?.task || 'default'}`;
   const envStr = cfg.env ? Object.entries(cfg.env).map(([k, v]) => `${k}=${v}`).join('\n') : '';
 
   return (
@@ -831,7 +831,22 @@ function ProfileRow({ id, cfg, inputClass, onUpdate, onDelete }: {
             </div>
             <div className="flex-1">
               <label className="text-[8px] text-[var(--text-secondary)]">Model</label>
-              <input value={cfg.model || ''} onChange={e => onUpdate({ ...cfg, model: e.target.value })} className={inputClass} />
+              <input value={cfg.model || ''} onChange={e => onUpdate({ ...cfg, model: e.target.value })}
+                list={`profile-model-${id}`} className={inputClass} />
+              {(cfg.cliType === 'claude-code' || (!cfg.cliType && !cfg.base && !isApi)) && (
+                <datalist id={`profile-model-${id}`}>
+                  <option value="claude-opus-4-6" />
+                  <option value="claude-sonnet-4-6" />
+                  <option value="claude-haiku-4-5-20251001" />
+                </datalist>
+              )}
+              {(cfg.cliType === 'codex' || cfg.base === 'codex') && (
+                <datalist id={`profile-model-${id}`}>
+                  <option value="codex-mini" />
+                  <option value="o4-mini" />
+                  <option value="gpt-4o" />
+                </datalist>
+              )}
             </div>
           </div>
           {isApi ? (
@@ -854,7 +869,7 @@ function ProfileRow({ id, cfg, inputClass, onUpdate, onDelete }: {
             <>
               <div>
                 <label className="text-[8px] text-[var(--text-secondary)]">CLI Type</label>
-                <select value={cfg.base || 'claude'} onChange={e => onUpdate({ ...cfg, base: e.target.value, cliType: e.target.value === 'claude' ? 'claude-code' : e.target.value })} className={inputClass}>
+                <select value={cfg.cliType === 'claude-code' ? 'claude' : (cfg.cliType || cfg.base || 'claude')} onChange={e => onUpdate({ ...cfg, cliType: e.target.value === 'claude' ? 'claude-code' : e.target.value })} className={inputClass}>
                   <option value="claude">Claude Code</option>
                   <option value="codex">Codex</option>
                   <option value="aider">Aider</option>
@@ -864,14 +879,15 @@ function ProfileRow({ id, cfg, inputClass, onUpdate, onDelete }: {
               <div>
                 <div className="flex items-center gap-2">
                   <label className="text-[8px] text-[var(--text-secondary)]">Environment Variables (KEY=VALUE per line)</label>
-                  {cfg.base && (
+                  {(cfg.cliType || cfg.base) && (
                     <button onClick={() => {
                       const templates: Record<string, string> = {
+                        'claude-code': 'ANTHROPIC_AUTH_TOKEN=\nANTHROPIC_BASE_URL=\nANTHROPIC_SMALL_FAST_MODEL=\nCLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC=true\nDISABLE_TELEMETRY=true\nDISABLE_ERROR_REPORTING=true\nDISABLE_AUTOUPDATER=true\nDISABLE_NON_ESSENTIAL_MODEL_CALLS=true',
                         claude: 'ANTHROPIC_AUTH_TOKEN=\nANTHROPIC_BASE_URL=\nANTHROPIC_SMALL_FAST_MODEL=\nCLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC=true\nDISABLE_TELEMETRY=true\nDISABLE_ERROR_REPORTING=true\nDISABLE_AUTOUPDATER=true\nDISABLE_NON_ESSENTIAL_MODEL_CALLS=true',
                         codex: 'OPENAI_API_KEY=\nOPENAI_BASE_URL=',
                         aider: 'ANTHROPIC_API_KEY=\nOPENAI_API_KEY=',
                       };
-                      const tpl = templates[cfg.base!];
+                      const tpl = templates[cfg.cliType || cfg.base!];
                       if (tpl) {
                         const env: Record<string, string> = {};
                         for (const line of tpl.split('\n')) {
@@ -883,7 +899,7 @@ function ProfileRow({ id, cfg, inputClass, onUpdate, onDelete }: {
                         onUpdate({ ...cfg, env: merged });
                       }
                     }} className="text-[7px] px-1.5 py-0.5 rounded bg-[var(--accent)]/10 text-[var(--accent)] hover:bg-[var(--accent)]/20">
-                      Fill {cfg.base} template
+                      Fill {cfg.cliType === 'claude-code' ? 'claude' : (cfg.cliType || cfg.base)} template
                     </button>
                   )}
                 </div>
@@ -978,7 +994,7 @@ function AddProfileForm({ type, baseAgents, onAdd }: {
   const handleAdd = () => {
     if (!id) return;
     if (type === 'cli') {
-      onAdd(id, { base, cliType: base === 'claude' ? 'claude-code' : base, name: name || id, model: model || undefined, env: parseEnv() });
+      onAdd(id, { cliType: base === 'claude' ? 'claude-code' : base, name: name || id, model: model || undefined, env: parseEnv() });
     } else {
       onAdd(id, { type: 'api', name: name || id, provider, model: model || undefined, apiKey: apiKey || undefined });
     }
@@ -1013,7 +1029,23 @@ function AddProfileForm({ type, baseAgents, onAdd }: {
           </div>
           <div className="flex-1">
             <label className="text-[8px] text-[var(--text-secondary)]">Model</label>
-            <input value={model} onChange={e => setModel(e.target.value)} placeholder="claude-opus-4-6" className={inputClass} />
+            <input value={model} onChange={e => setModel(e.target.value)}
+              placeholder={base === 'claude' ? 'claude-sonnet-4-6' : base === 'codex' ? 'codex-mini' : ''}
+              list={`model-list-${base}`} className={inputClass} />
+            {base === 'claude' && (
+              <datalist id="model-list-claude">
+                <option value="claude-opus-4-6" />
+                <option value="claude-sonnet-4-6" />
+                <option value="claude-haiku-4-5-20251001" />
+              </datalist>
+            )}
+            {base === 'codex' && (
+              <datalist id="model-list-codex">
+                <option value="codex-mini" />
+                <option value="o4-mini" />
+                <option value="gpt-4o" />
+              </datalist>
+            )}
           </div>
         </div>
         <div>
@@ -1065,17 +1097,35 @@ function AgentsSection({ settings, setSettings }: { settings: any; setSettings:
   const [loading, setLoading] = useState(true);
   const [expandedAgent, setExpandedAgent] = useState<string | null>(null);
   const [showAdd, setShowAdd] = useState(false);
-  const [newAgent, setNewAgent] = useState({ id: '', name: '', path: '', taskFlags: '', interactiveCmd: '', resumeFlag: '', outputFormat: 'text', models: { terminal: 'default', task: 'default', telegram: 'default', help: 'default', mobile: 'default' }, skipPermissionsFlag: '', requiresTTY: false });
+  const cliDefaults: Record<string, any> = {
+    'claude-code': { taskFlags: '-p --verbose --output-format stream-json --dangerously-skip-permissions', resumeFlag: '-c', outputFormat: 'stream-json', skipPermissionsFlag: '--dangerously-skip-permissions' },
+    'codex': { taskFlags: '', resumeFlag: '', outputFormat: 'text', skipPermissionsFlag: '--full-auto' },
+    'aider': { taskFlags: '--message', resumeFlag: '', outputFormat: 'text', skipPermissionsFlag: '--yes' },
+    'generic': { taskFlags: '', resumeFlag: '', outputFormat: 'text', skipPermissionsFlag: '' },
+  };
+  const makeNewAgent = (cliType = 'claude-code') => ({
+    id: '', name: '', path: '', interactiveCmd: '',
+    models: { terminal: 'default', task: 'default', telegram: 'default', help: 'default', mobile: 'default' },
+    requiresTTY: false, cliType,
+    ...cliDefaults[cliType],
+  });
+  const [newAgent, setNewAgent] = useState(makeNewAgent());
 
   // Fetch detected + configured agents
   useEffect(() => {
     (async () => {
       setLoading(true);
       try {
-        const res = await fetch('/api/agents');
-        const data = await res.json();
+        // Fetch both agents and settings together to avoid race condition
+        // (settings prop may not be loaded yet when this effect runs)
+        const [agentsRes, settingsRes] = await Promise.all([
+          fetch('/api/agents'),
+          fetch('/api/settings'),
+        ]);
+        const data = await agentsRes.json();
+        const settingsData = await settingsRes.json();
         const detected = (data.agents || []) as any[];
-        const configured = settings.agents || {};
+        const configured = settingsData.agents || {};
 
         const merged: AgentEntry[] = [];
 
@@ -1084,16 +1134,16 @@ function AgentsSection({ settings, setSettings }: { settings: any; setSettings:
           const cfg = configured[a.id] || {};
           merged.push({
             id: a.id,
-            name: cfg.name || a.name,
-            path: cfg.path || a.path,
+            name: cfg.name ?? a.name,
+            path: cfg.path ?? a.path,
             enabled: cfg.enabled !== false,
             type: a.type || 'generic',
-            taskFlags: cfg.taskFlags || (a.id === 'claude' ? '-p --verbose --output-format stream-json --dangerously-skip-permissions' : cfg.flags?.join(' ') || ''),
-            interactiveCmd: cfg.interactiveCmd || a.path,
-            resumeFlag: cfg.resumeFlag || (a.capabilities?.supportsResume ? '-c' : ''),
-            outputFormat: cfg.outputFormat || (a.capabilities?.supportsStreamJson ? 'stream-json' : 'text'),
-            models: cfg.models || { terminal: "default", task: "default", telegram: "default", help: "default", mobile: "default" },
-            skipPermissionsFlag: cfg.skipPermissionsFlag || a.skipPermissionsFlag || "",
+            taskFlags: cfg.taskFlags ?? (a.id === 'claude' ? '-p --verbose --output-format stream-json --dangerously-skip-permissions' : cfg.flags?.join(' ') ?? ''),
+            interactiveCmd: cfg.interactiveCmd ?? a.path,
+            resumeFlag: cfg.resumeFlag ?? (a.capabilities?.supportsResume ? '-c' : ''),
+            outputFormat: cfg.outputFormat ?? (a.capabilities?.supportsStreamJson ? 'stream-json' : 'text'),
+            models: cfg.models ?? { terminal: "default", task: "default", telegram: "default", help: "default", mobile: "default" },
+            skipPermissionsFlag: cfg.skipPermissionsFlag ?? a.skipPermissionsFlag ?? "",
             requiresTTY: cfg.requiresTTY ?? a.capabilities?.requiresTTY ?? false,
             detected: a.detected !== false,
           });
@@ -1104,16 +1154,16 @@ function AgentsSection({ settings, setSettings }: { settings: any; setSettings:
           if (merged.find(a => a.id === id)) continue;
           merged.push({
             id,
-            name: cfg.name || id,
-            path: cfg.path || '',
+            name: cfg.name ?? id,
+            path: cfg.path ?? '',
             enabled: cfg.enabled !== false,
             type: 'generic',
-            taskFlags: cfg.taskFlags || cfg.flags?.join(' ') || '',
-            interactiveCmd: cfg.interactiveCmd || cfg.path || '',
-            resumeFlag: cfg.resumeFlag || '',
-            outputFormat: cfg.outputFormat || 'text',
-            models: cfg.models || { terminal: "default", task: "default", telegram: "default", help: "default", mobile: "default" },
-            skipPermissionsFlag: cfg.skipPermissionsFlag || '',
+            taskFlags: cfg.taskFlags ?? cfg.flags?.join(' ') ?? '',
+            interactiveCmd: cfg.interactiveCmd ?? cfg.path ?? '',
+            resumeFlag: cfg.resumeFlag ?? '',
+            outputFormat: cfg.outputFormat ?? 'text',
+            models: cfg.models ?? { terminal: "default", task: "default", telegram: "default", help: "default", mobile: "default" },
+            skipPermissionsFlag: cfg.skipPermissionsFlag ?? '',
             requiresTTY: cfg.requiresTTY ?? false,
             detected: false,
           });
@@ -1129,27 +1179,29 @@ function AgentsSection({ settings, setSettings }: { settings: any; setSettings:
   const defaultAgent = settings.defaultAgent || 'claude';
 
   const saveAgentConfig = (updated: AgentEntry[]) => {
-    // Start with existing config to preserve profile fields (base/env/model/type/provider/apiKey)
-    const agentsCfg: Record<string, any> = { ...(settings.agents || {}) };
-    for (const a of updated) {
-      const existing = agentsCfg[a.id] || {};
-      agentsCfg[a.id] = {
-        ...existing, // preserve profile-specific fields
-        name: a.name,
-        path: a.path,
-        enabled: a.enabled,
-        taskFlags: a.taskFlags,
-        interactiveCmd: a.interactiveCmd,
-        resumeFlag: a.resumeFlag,
-        outputFormat: a.outputFormat,
-        models: a.models,
-        skipPermissionsFlag: a.skipPermissionsFlag,
-        requiresTTY: a.requiresTTY,
-      };
-    }
-    // Keep claudePath in sync for backward compat
-    const claude = updated.find(a => a.id === 'claude');
-    setSettings({ ...settings, agents: agentsCfg, claudePath: claude?.path || settings.claudePath });
+    // Use functional update to avoid stale closure — each call sees the latest settings
+    setSettings((prev: any) => {
+      const agentsCfg: Record<string, any> = { ...(prev.agents || {}) };
+      for (const a of updated) {
+        const existing = agentsCfg[a.id] || {};
+        agentsCfg[a.id] = {
+          ...existing, // preserve profile-specific fields
+          name: a.name,
+          path: a.path,
+          enabled: a.enabled,
+          taskFlags: a.taskFlags,
+          interactiveCmd: a.interactiveCmd,
+          resumeFlag: a.resumeFlag,
+          outputFormat: a.outputFormat,
+          models: a.models,
+          skipPermissionsFlag: a.skipPermissionsFlag,
+          requiresTTY: a.requiresTTY,
+          cliType: (a as any).cliType || existing.cliType,
+        };
+      }
+      const claude = updated.find(a => a.id === 'claude');
+      return { ...prev, agents: agentsCfg, claudePath: claude?.path || prev.claudePath };
+    });
   };
 
   const [agentsDirty, setAgentsDirty] = useState(false);
@@ -1166,8 +1218,8 @@ function AgentsSection({ settings, setSettings }: { settings: any; setSettings:
   const updateAgent = (id: string, field: string, value: any) => {
     const updated = agents.map(a => a.id === id ? { ...a, [field]: value } : a);
     setAgents(updated);
-    setAgentsDirty(true);
-    debouncedSave(updated);
+    // Sync to settings immediately (no debounce) so global Save always has latest data
+    saveAgentConfig(updated);
   };
 
   const saveAgents = () => {
@@ -1195,7 +1247,7 @@ function AgentsSection({ settings, setSettings }: { settings: any; setSettings:
     setAgents(updated);
     debouncedSave(updated);
     setShowAdd(false);
-    setNewAgent({ id: '', name: '', path: '', taskFlags: '', interactiveCmd: '', resumeFlag: '', outputFormat: 'text', models: { terminal: 'default', task: 'default', telegram: 'default', help: 'default', mobile: 'default' }, skipPermissionsFlag: '', requiresTTY: false });
+    setNewAgent(makeNewAgent());
   };
 
   const inputClass = "w-full px-2 py-1 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] font-mono focus:outline-none focus:border-[var(--accent)]";
@@ -1216,7 +1268,12 @@ function AgentsSection({ settings, setSettings }: { settings: any; setSettings:
           className="text-[9px] px-2 py-0.5 border border-[var(--accent)] text-[var(--accent)] rounded hover:bg-[var(--accent)] hover:text-white ml-auto"
         >Detect</button>
         <button
-          onClick={() => setShowAdd(v => !v)}
+          onClick={() => {
+            // Auto-fill path from detected claude agent when opening Add form
+            const claude = agents.find(a => a.id === 'claude');
+            if (claude?.path && !newAgent.path) setNewAgent((prev: any) => ({ ...prev, path: claude.path, interactiveCmd: claude.path }));
+            setShowAdd(v => !v);
+          }}
           className="text-[9px] px-2 py-0.5 border border-[var(--border)] text-[var(--text-secondary)] rounded hover:text-[var(--text-primary)]"
         >+ Add</button>
         {agentsDirty && (
@@ -1339,12 +1396,12 @@ function AgentsSection({ settings, setSettings }: { settings: any; setSettings:
                     {/* Preset models */}
                     <div className="flex items-center gap-1 mt-1.5 flex-wrap">
                       <span className="text-[8px] text-[var(--text-secondary)]">Presets:</span>
-                      {(a.id === 'claude'
-                        ? ['default', 'sonnet', 'opus', 'haiku', 'claude-sonnet-4-6', 'claude-opus-4-6', 'claude-haiku-4-5-20251001']
-                        : a.id === 'codex'
-                          ? ['default', 'o3-mini', 'o4-mini', 'gpt-4.1']
-                          : ['default']
-                      ).map(preset => (
+                      {((() => {
+                        const ct = (settings.agents?.[a.id] as any)?.cliType || (a.id === 'claude' ? 'claude-code' : a.id === 'codex' ? 'codex' : a.id === 'aider' ? 'aider' : 'generic');
+                        if (ct === 'claude-code') return ['default', 'sonnet', 'opus', 'haiku', 'claude-sonnet-4-6', 'claude-opus-4-6', 'claude-haiku-4-5-20251001'];
+                        if (ct === 'codex') return ['default', 'o3-mini', 'o4-mini', 'gpt-4.1'];
+                        return ['default'];
+                      })()).map(preset => (
                         <button
                           key={preset}
                           onClick={() => navigator.clipboard.writeText(preset)}
@@ -1403,7 +1460,7 @@ function AgentsSection({ settings, setSettings }: { settings: any; setSettings:
       {showAdd && (
         <div className="border border-[var(--accent)]/30 rounded-lg p-3 space-y-2 bg-[var(--bg-secondary)]">
           <div className="text-[10px] text-[var(--text-primary)] font-semibold">Add Custom Agent</div>
-          <div className="grid grid-cols-2 gap-2">
+          <div className="grid grid-cols-3 gap-2">
             <div>
               <label className="text-[9px] text-[var(--text-secondary)]">ID (unique)</label>
               <input value={newAgent.id} onChange={e => setNewAgent({ ...newAgent, id: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '') })} placeholder="my-agent" className={inputClass} />
@@ -1412,14 +1469,51 @@ function AgentsSection({ settings, setSettings }: { settings: any; setSettings:
               <label className="text-[9px] text-[var(--text-secondary)]">Display Name</label>
               <input value={newAgent.name} onChange={e => setNewAgent({ ...newAgent, name: e.target.value })} placeholder="My Agent" className={inputClass} />
             </div>
+            <div>
+              <label className="text-[9px] text-[var(--text-secondary)]">CLI Type</label>
+              <select value={newAgent.cliType} onChange={e => {
+                const ct = e.target.value;
+                // Auto-fill path from detected agent if available
+                const baseId = ct === 'claude-code' ? 'claude' : ct;
+                const detected = agents.find(a => a.id === baseId);
+                setNewAgent({ ...newAgent, cliType: ct, ...(cliDefaults[ct] || {}), path: detected?.path || newAgent.path, interactiveCmd: detected?.path || newAgent.interactiveCmd });
+              }} className={inputClass}>
+                <option value="claude-code">Claude Code</option>
+                <option value="codex">Codex</option>
+                <option value="aider">Aider</option>
+                <option value="generic">Generic</option>
+              </select>
+            </div>
           </div>
-          <div>
-            <label className="text-[9px] text-[var(--text-secondary)]">Binary Path</label>
-            <input value={newAgent.path} onChange={e => setNewAgent({ ...newAgent, path: e.target.value })} placeholder="/usr/local/bin/my-agent" className={inputClass} />
+          <div className="grid grid-cols-2 gap-2">
+            <div>
+              <label className="text-[9px] text-[var(--text-secondary)]">Binary Path</label>
+              <input value={newAgent.path} onChange={e => setNewAgent({ ...newAgent, path: e.target.value })}
+                placeholder={newAgent.cliType === 'claude-code' ? 'claude' : newAgent.cliType === 'codex' ? 'codex' : newAgent.cliType === 'aider' ? 'aider' : '/usr/local/bin/agent'}
+                className={inputClass} />
+            </div>
+            <div>
+              <label className="text-[9px] text-[var(--text-secondary)]">Task Flags (non-interactive)</label>
+              <input value={newAgent.taskFlags} onChange={e => setNewAgent({ ...newAgent, taskFlags: e.target.value })} placeholder="--prompt" className={inputClass} />
+            </div>
           </div>
-          <div>
-            <label className="text-[9px] text-[var(--text-secondary)]">Task Flags (non-interactive)</label>
-            <input value={newAgent.taskFlags} onChange={e => setNewAgent({ ...newAgent, taskFlags: e.target.value })} placeholder="--prompt" className={inputClass} />
+          <div className="grid grid-cols-3 gap-2">
+            <div>
+              <label className="text-[9px] text-[var(--text-secondary)]">Resume Flag</label>
+              <input value={newAgent.resumeFlag} onChange={e => setNewAgent({ ...newAgent, resumeFlag: e.target.value })} placeholder="-c or --resume" className={inputClass} />
+            </div>
+            <div>
+              <label className="text-[9px] text-[var(--text-secondary)]">Output Format</label>
+              <select value={newAgent.outputFormat} onChange={e => setNewAgent({ ...newAgent, outputFormat: e.target.value })} className={inputClass}>
+                <option value="stream-json">stream-json</option>
+                <option value="json">json</option>
+                <option value="text">text</option>
+              </select>
+            </div>
+            <div>
+              <label className="text-[9px] text-[var(--text-secondary)]">Skip Permissions Flag</label>
+              <input value={newAgent.skipPermissionsFlag} onChange={e => setNewAgent({ ...newAgent, skipPermissionsFlag: e.target.value })} placeholder="--dangerously-skip-permissions" className={inputClass} />
+            </div>
           </div>
           <div className="flex gap-2">
             <button onClick={addAgent} disabled={!newAgent.id || !newAgent.path} className="text-[10px] px-3 py-1 bg-[var(--accent)] text-white rounded disabled:opacity-50">Add</button>

package/components/SkillsPanel.tsx

@@ -1,8 +1,10 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, lazy, Suspense } from 'react';
 import { useSidebarResize } from '@/hooks/useSidebarResize';
 
+const PluginsPanel = lazy(() => import('./PluginsPanel'));
+
 type ItemType = 'skill' | 'command';
 
 interface Skill {
@@ -131,7 +133,7 @@ export default function SkillsPanel({ projectFilter }: { projectFilter?: string
   const [syncing, setSyncing] = useState(false);
   const [loading, setLoading] = useState(true);
   const [installTarget, setInstallTarget] = useState<{ skill: string; show: boolean }>({ skill: '', show: false });
-  const [typeFilter, setTypeFilter] = useState<'all' | 'skill' | 'command' | 'local' | 'rules'>('all');
+  const [typeFilter, setTypeFilter] = useState<'all' | 'skill' | 'command' | 'local' | 'rules' | 'plugins'>('all');
   const [localItems, setLocalItems] = useState<{ name: string; type: string; scope: string; fileCount: number; projectPath?: string }[]>([]);
   // Rules (CLAUDE.md templates)
   const [rulesTemplates, setRulesTemplates] = useState<{ id: string; name: string; description: string; tags: string[]; builtin: boolean; isDefault: boolean; content: string }[]>([]);
@@ -363,7 +365,7 @@ export default function SkillsPanel({ projectFilter }: { projectFilter?: string
         <div className="flex items-center gap-2">
           <span className="text-xs font-semibold text-[var(--text-primary)]">Marketplace</span>
           <div className="flex items-center bg-[var(--bg-tertiary)] rounded p-0.5">
-            {([['all', `All (${skills.length})`], ['skill', `Skills (${skillCount})`], ['command', `Commands (${commandCount})`], ['local', `Local (${localCount})`], ['rules', 'Rules']] as const).map(([value, label]) => (
+            {([['all', `All (${skills.length})`], ['skill', `Skills (${skillCount})`], ['command', `Commands (${commandCount})`], ['local', `Local (${localCount})`], ['rules', 'Rules'], ['plugins', 'Plugins']] as const).map(([value, label]) => (
               <button
                 key={value}
                 onClick={() => setTypeFilter(value)}
@@ -388,7 +390,7 @@ export default function SkillsPanel({ projectFilter }: { projectFilter?: string
         </button>
       </div>
       {/* Search — hide on rules tab */}
-      {typeFilter !== 'rules' && <div className="px-3 py-1.5 border-b border-[var(--border)] shrink-0">
+      {typeFilter !== 'rules' && typeFilter !== 'plugins' && <div className="px-3 py-1.5 border-b border-[var(--border)] shrink-0">
         <input
           type="text"
           value={searchQuery}
@@ -398,7 +400,7 @@ export default function SkillsPanel({ projectFilter }: { projectFilter?: string
         />
       </div>}
 
-      {typeFilter === 'rules' ? null : skills.length === 0 ? (
+      {typeFilter === 'rules' || typeFilter === 'plugins' ? null : skills.length === 0 ? (
         <div className="flex-1 flex flex-col items-center justify-center gap-2 text-[var(--text-secondary)]">
           <p className="text-xs">No skills yet</p>
           <button onClick={sync} className="text-xs px-3 py-1 bg-[var(--accent)] text-white rounded hover:opacity-90">
@@ -955,6 +957,13 @@ export default function SkillsPanel({ projectFilter }: { projectFilter?: string
           </div>
         </div>
       )}
+
+      {/* Plugins — full-page view */}
+      {typeFilter === 'plugins' && (
+        <Suspense fallback={<div className="p-4 text-xs text-[var(--text-secondary)]">Loading...</div>}>
+          <PluginsPanel />
+        </Suspense>
+      )}
     </div>
   );
 }