@geminilight/mindos 0.5.37 → 0.5.39

package/app/components/SidebarLayout.tsx

@@ -4,14 +4,14 @@ import { useState, useEffect, useCallback } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
 import Link from 'next/link';
 import { Search, Settings, Menu, X } from 'lucide-react';
-import ActivityBar, { type PanelId, RAIL_WIDTH_COLLAPSED, RAIL_WIDTH_EXPANDED } from './ActivityBar';
-import Panel, { PANEL_WIDTH, MIN_PANEL_WIDTH, MAX_PANEL_WIDTH_ABS, MAX_PANEL_WIDTH_RATIO } from './Panel';
+import ActivityBar, { type PanelId } from './ActivityBar';
+import Panel from './Panel';
 import FileTree from './FileTree';
 import Logo from './Logo';
 import SearchPanel from './panels/SearchPanel';
 import PluginsPanel from './panels/PluginsPanel';
 import AgentsPanel from './panels/AgentsPanel';
-import RightAskPanel, { RIGHT_ASK_DEFAULT_WIDTH, RIGHT_ASK_MIN_WIDTH, RIGHT_ASK_MAX_WIDTH } from './RightAskPanel';
+import RightAskPanel from './RightAskPanel';
 import AskFab from './AskFab';
 import SyncPopover from './panels/SyncPopover';
 import SearchModal from './SearchModal';
@@ -19,11 +19,12 @@ import AskModal from './AskModal';
 import SettingsModal from './SettingsModal';
 import KeyboardShortcuts from './KeyboardShortcuts';
 import { MobileSyncDot, useSyncStatus } from './SyncStatusBar';
-import { useAskModal } from '@/hooks/useAskModal';
 import { FileNode } from '@/lib/types';
 import { useLocale } from '@/lib/LocaleContext';
 import { WalkthroughProvider } from './walkthrough';
 import McpProvider from '@/hooks/useMcpData';
+import { useLeftPanel } from '@/hooks/useLeftPanel';
+import { useAskPanel } from '@/hooks/useAskPanel';
 import type { Tab } from './settings/types';
 
 interface SidebarLayoutProps {
@@ -32,130 +33,22 @@ interface SidebarLayoutProps {
 }
 
 export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps) {
-  const [activePanel, setActivePanel] = useState<PanelId | null>('files');
-  const [mobileOpen, setMobileOpen] = useState(false);
+  // ── Left panel state (extracted hook) ──
+  const lp = useLeftPanel();
+
+  // ── Right Ask AI panel state (extracted hook) ──
+  const ap = useAskPanel();
 
-  // Settings modal state — settings is a modal overlay, not a panel
+  // ── Settings modal ──
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [settingsTab, setSettingsTab] = useState<Tab | undefined>(undefined);
 
-  // Rail expanded state — persisted to localStorage
-  const [railExpanded, setRailExpanded] = useState(false);
-  useEffect(() => {
-    try {
-      if (localStorage.getItem('rail-expanded') === 'true') setRailExpanded(true);
-    } catch {}
-  }, []);
-
-  // Panel width state — shared across all left panels
-  const [panelWidth, setPanelWidth] = useState<number | null>(null);
-  const [panelMaximized, setPanelMaximized] = useState(false);
-
-  // Load persisted panel width when activePanel changes
-  useEffect(() => {
-    if (!activePanel) return;
-    try {
-      const stored = localStorage.getItem('left-panel-width');
-      if (stored) {
-        const w = parseInt(stored, 10);
-        if (w >= MIN_PANEL_WIDTH && w <= MAX_PANEL_WIDTH_ABS) {
-          setPanelWidth(w);
-          return;
-        }
-      }
-    } catch {}
-    setPanelWidth(280);
-  }, [activePanel]);
-
-  // Exit maximize when switching panels
-  useEffect(() => { setPanelMaximized(false); }, [activePanel]);
-
-  const handlePanelWidthChange = useCallback((w: number) => {
-    setPanelWidth(w);
-  }, []);
-
-  const handlePanelWidthCommit = useCallback((w: number) => {
-    try { localStorage.setItem('left-panel-width', String(w)); } catch {}
-  }, []);
-
-  const handlePanelMaximize = useCallback(() => {
-    setPanelMaximized(v => !v);
-  }, []);
-
-  // ── Right-side Ask AI panel state (independent of left panel) ──
-  const [askPanelOpen, setAskPanelOpen] = useState(false);
-  const [askPanelWidth, setAskPanelWidth] = useState(RIGHT_ASK_DEFAULT_WIDTH);
-  const [askMode, setAskMode] = useState<'panel' | 'popup'>('panel');
-  // Desktop popup (distinct from mobileAskOpen)
-  const [desktopAskPopupOpen, setDesktopAskPopupOpen] = useState(false);
-
-  useEffect(() => {
-    try {
-      const stored = localStorage.getItem('right-ask-panel-width');
-      if (stored) {
-        const w = parseInt(stored, 10);
-        if (w >= RIGHT_ASK_MIN_WIDTH && w <= RIGHT_ASK_MAX_WIDTH) setAskPanelWidth(w);
-      }
-      const mode = localStorage.getItem('ask-mode');
-      if (mode === 'popup') setAskMode('popup');
-    } catch {}
-
-    // Listen for Settings → AskDisplayMode changes
-    const onStorage = (e: StorageEvent) => {
-      if (e.key === 'ask-mode' && (e.newValue === 'panel' || e.newValue === 'popup')) {
-        setAskMode(e.newValue);
-      }
-    };
-    window.addEventListener('storage', onStorage);
-    return () => window.removeEventListener('storage', onStorage);
-  }, []);
-
-  const handleAskWidthChange = useCallback((w: number) => { setAskPanelWidth(w); }, []);
-  const handleAskWidthCommit = useCallback((w: number) => {
-    try { localStorage.setItem('right-ask-panel-width', String(w)); } catch {}
-  }, []);
-
-  const toggleAskPanel = useCallback(() => {
-    if (askMode === 'popup') {
-      setDesktopAskPopupOpen(v => {
-        if (!v) { setAskInitialMessage(''); setAskOpenSource('user'); }
-        return !v;
-      });
-    } else {
-      setAskPanelOpen(v => {
-        if (!v) { setAskInitialMessage(''); setAskOpenSource('user'); }
-        return !v;
-      });
-    }
-  }, [askMode]);
-
-  const closeAskPanel = useCallback(() => { setAskPanelOpen(false); }, []);
-  const closeDesktopAskPopup = useCallback(() => { setDesktopAskPopupOpen(false); }, []);
-
-  // Switch between panel ↔ popup mode
-  const handleAskModeSwitch = useCallback(() => {
-    setAskMode(prev => {
-      const next = prev === 'panel' ? 'popup' : 'panel';
-      try {
-        localStorage.setItem('ask-mode', next);
-        window.dispatchEvent(new StorageEvent('storage', { key: 'ask-mode', newValue: next }));
-      } catch {}
-      if (next === 'popup') {
-        setAskPanelOpen(false);
-        setDesktopAskPopupOpen(true);
-      } else {
-        setDesktopAskPopupOpen(false);
-        setAskPanelOpen(true);
-      }
-      return next;
-    });
-  }, []);
-
-  // Sync popover state
+  // ── Sync popover ──
   const [syncPopoverOpen, setSyncPopoverOpen] = useState(false);
   const [syncAnchorRect, setSyncAnchorRect] = useState<DOMRect | null>(null);
 
-  // Mobile modals — kept for <768px
+  // ── Mobile state ──
+  const [mobileOpen, setMobileOpen] = useState(false);
   const [mobileSearchOpen, setMobileSearchOpen] = useState(false);
   const [mobileAskOpen, setMobileAskOpen] = useState(false);
 
@@ -163,24 +56,14 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
   const router = useRouter();
   const pathname = usePathname();
   const { status: syncStatus, fetchStatus: syncStatusRefresh } = useSyncStatus();
-  const askModal = useAskModal();
 
   const currentFile = pathname.startsWith('/view/')
     ? pathname.slice('/view/'.length).split('/').map(decodeURIComponent).join('/')
     : undefined;
 
-  // AskPanel initial message from GuideCard bridge
-  const [askInitialMessage, setAskInitialMessage] = useState('');
-  const [askOpenSource, setAskOpenSource] = useState<'user' | 'guide' | 'guide-next'>('user');
+  // ── Event listeners ──
 
-  // Persist rail expanded state
-  const handleExpandedChange = useCallback((expanded: boolean) => {
-    setRailExpanded(expanded);
-    setSyncPopoverOpen(false);
-    try { localStorage.setItem('rail-expanded', String(expanded)); } catch {}
-  }, []);
-
-  // Listen for cross-component "open settings" events (e.g. from UpdateBanner)
+  // Listen for cross-component "open settings" events
   useEffect(() => {
     const handler = (e: Event) => {
       const tab = (e as CustomEvent).detail?.tab;
@@ -191,33 +74,19 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
     return () => window.removeEventListener('mindos:open-settings', handler);
   }, []);
 
-  // Bridge useAskModal store → right Ask panel or popup
-  useEffect(() => {
-    if (askModal.open) {
-      setAskInitialMessage(askModal.initialMessage);
-      setAskOpenSource(askModal.source);
-      if (askMode === 'popup') {
-        setDesktopAskPopupOpen(true);
-      } else {
-        setAskPanelOpen(true);
-      }
-      askModal.close();
-    }
-  }, [askModal.open, askModal.initialMessage, askModal.source, askModal.close, askMode]);
-
   // GuideCard first message handler
   const handleFirstMessage = useCallback(() => {
     const notifyGuide = () => window.dispatchEvent(new Event('guide-state-updated'));
-    if (askOpenSource === 'guide') {
+    if (ap.askOpenSource === 'guide') {
       fetch('/api/setup', {
         method: 'PATCH',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ guideState: { askedAI: true } }),
       }).then(notifyGuide).catch((err) => console.warn('Guide state update failed:', err));
-    } else if (askOpenSource === 'guide-next') {
+    } else if (ap.askOpenSource === 'guide-next') {
       notifyGuide();
     }
-  }, [askOpenSource]);
+  }, [ap.askOpenSource]);
 
   // Close mobile drawer on route change
   useEffect(() => { setMobileOpen(false); }, [pathname]);
@@ -240,16 +109,15 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
   // Unified keyboard shortcuts
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
-      // ESC exits panel maximize or closes right Ask panel/popup
       if (e.key === 'Escape') {
-        if (panelMaximized) { setPanelMaximized(false); return; }
-        if (askPanelOpen) { setAskPanelOpen(false); return; }
-        if (desktopAskPopupOpen) { setDesktopAskPopupOpen(false); return; }
+        if (lp.panelMaximized) { lp.handlePanelMaximize(); return; }
+        if (ap.askPanelOpen) { ap.closeAskPanel(); return; }
+        if (ap.desktopAskPopupOpen) { ap.closeDesktopAskPopup(); return; }
       }
       if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
         e.preventDefault();
         if (window.innerWidth >= 768) {
-          setActivePanel(p => p === 'search' ? null : 'search');
+          lp.setActivePanel((p: PanelId | null) => p === 'search' ? null : 'search');
         } else {
           setMobileSearchOpen(v => !v);
         }
@@ -257,7 +125,7 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
       if ((e.metaKey || e.ctrlKey) && e.key === '/') {
         e.preventDefault();
         if (window.innerWidth >= 768) {
-          toggleAskPanel();
+          ap.toggleAskPanel();
         } else {
           setMobileAskOpen(v => !v);
         }
@@ -269,8 +137,9 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
     };
     window.addEventListener('keydown', handler);
     return () => window.removeEventListener('keydown', handler);
-  }, [panelMaximized, askPanelOpen, desktopAskPopupOpen, toggleAskPanel]);
+  }, [lp.panelMaximized, ap.askPanelOpen, ap.desktopAskPopupOpen, ap.toggleAskPanel, lp]);
 
+  // ── Settings helpers ──
   const openSyncSettings = useCallback(() => {
     setSettingsTab('sync');
     setSyncPopoverOpen(false);
@@ -282,26 +151,20 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
     setSettingsTab(undefined);
   }, []);
 
-  const openSettingsTab = useCallback((tab: Tab) => {
-    setSettingsTab(tab);
-    setSettingsOpen(true);
-  }, []);
-
   const closeSettings = useCallback(() => {
     setSettingsOpen(false);
     setSettingsTab(undefined);
   }, []);
 
-  const closeSyncPopover = useCallback(() => setSyncPopoverOpen(false), []);
-
   const handleSyncClick = useCallback((rect: DOMRect) => {
     setSyncAnchorRect(rect);
     setSyncPopoverOpen(prev => !prev);
   }, []);
 
-  const railWidth = railExpanded ? RAIL_WIDTH_EXPANDED : RAIL_WIDTH_COLLAPSED;
-  const panelOpen = activePanel !== null;
-  const effectivePanelWidth = panelWidth ?? (activePanel ? PANEL_WIDTH[activePanel] : 280);
+  const handleExpandedChange = useCallback((expanded: boolean) => {
+    lp.handleExpandedChange(expanded);
+    setSyncPopoverOpen(false);
+  }, [lp]);
 
   return (
     <WalkthroughProvider>
@@ -318,93 +181,78 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
 
       {/* ── Desktop: Activity Bar + Panel ── */}
       <ActivityBar
-        activePanel={activePanel}
-        onPanelChange={setActivePanel}
+        activePanel={lp.activePanel}
+        onPanelChange={lp.setActivePanel}
         syncStatus={syncStatus}
-        expanded={railExpanded}
+        expanded={lp.railExpanded}
         onExpandedChange={handleExpandedChange}
         onSettingsClick={handleSettingsClick}
         onSyncClick={handleSyncClick}
       />
 
       <Panel
-        activePanel={activePanel}
+        activePanel={lp.activePanel}
         fileTree={fileTree}
         onNavigate={() => {}}
         onOpenSyncSettings={openSyncSettings}
-        railWidth={railWidth}
-        panelWidth={panelWidth ?? undefined}
-        onWidthChange={handlePanelWidthChange}
-        onWidthCommit={handlePanelWidthCommit}
-        maximized={panelMaximized}
-        onMaximize={handlePanelMaximize}
+        railWidth={lp.railWidth}
+        panelWidth={lp.panelWidth ?? undefined}
+        onWidthChange={lp.handlePanelWidthChange}
+        onWidthCommit={lp.handlePanelWidthCommit}
+        maximized={lp.panelMaximized}
+        onMaximize={lp.handlePanelMaximize}
       >
-        {/* All panels always mounted — hidden/flex toggled to preserve state */}
-        <div className={`flex flex-col h-full ${activePanel === 'search' ? '' : 'hidden'}`}>
-          <SearchPanel active={activePanel === 'search'} maximized={panelMaximized} onMaximize={handlePanelMaximize} />
+        <div className={`flex flex-col h-full ${lp.activePanel === 'search' ? '' : 'hidden'}`}>
+          <SearchPanel active={lp.activePanel === 'search'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
         </div>
-        <div className={`flex flex-col h-full ${activePanel === 'plugins' ? '' : 'hidden'}`}>
-          <PluginsPanel active={activePanel === 'plugins'} maximized={panelMaximized} onMaximize={handlePanelMaximize} />
+        <div className={`flex flex-col h-full ${lp.activePanel === 'plugins' ? '' : 'hidden'}`}>
+          <PluginsPanel active={lp.activePanel === 'plugins'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
         </div>
-        <div className={`flex flex-col h-full ${activePanel === 'agents' ? '' : 'hidden'}`}>
-          <AgentsPanel
-            active={activePanel === 'agents'}
-            maximized={panelMaximized}
-            onMaximize={handlePanelMaximize}
-          />
+        <div className={`flex flex-col h-full ${lp.activePanel === 'agents' ? '' : 'hidden'}`}>
+          <AgentsPanel active={lp.activePanel === 'agents'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
         </div>
       </Panel>
 
-      {/* ── Right-side Ask AI Panel (desktop, panel mode) ── */}
+      {/* ── Right-side Ask AI Panel ── */}
       <RightAskPanel
-        open={askPanelOpen}
-        onClose={closeAskPanel}
+        open={ap.askPanelOpen}
+        onClose={ap.closeAskPanel}
         currentFile={currentFile}
-        initialMessage={askInitialMessage}
+        initialMessage={ap.askInitialMessage}
         onFirstMessage={handleFirstMessage}
-        width={askPanelWidth}
-        onWidthChange={handleAskWidthChange}
-        onWidthCommit={handleAskWidthCommit}
-        askMode={askMode}
-        onModeSwitch={handleAskModeSwitch}
+        width={ap.askPanelWidth}
+        onWidthChange={ap.handleAskWidthChange}
+        onWidthCommit={ap.handleAskWidthCommit}
+        askMode={ap.askMode}
+        onModeSwitch={ap.handleAskModeSwitch}
       />
 
-      {/* ── Desktop Ask AI Popup (popup mode) ── */}
       <AskModal
-        open={desktopAskPopupOpen}
-        onClose={closeDesktopAskPopup}
+        open={ap.desktopAskPopupOpen}
+        onClose={ap.closeDesktopAskPopup}
         currentFile={currentFile}
-        initialMessage={askInitialMessage}
+        initialMessage={ap.askInitialMessage}
         onFirstMessage={handleFirstMessage}
-        askMode={askMode}
-        onModeSwitch={handleAskModeSwitch}
+        askMode={ap.askMode}
+        onModeSwitch={ap.handleAskModeSwitch}
       />
 
-      {/* ── Ask AI FAB (desktop only — toggles right panel or popup) ── */}
-      <AskFab onToggle={toggleAskPanel} askPanelOpen={askPanelOpen || desktopAskPopupOpen} />
-
-      {/* ── Keyboard Shortcuts (⌘?) ── */}
+      <AskFab onToggle={ap.toggleAskPanel} askPanelOpen={ap.askPanelOpen || ap.desktopAskPopupOpen} />
       <KeyboardShortcuts />
 
-      {/* ── Settings Modal (desktop overlay — does not affect panel) ── */}
-      <SettingsModal
-        open={settingsOpen}
-        onClose={closeSettings}
-        initialTab={settingsTab}
-      />
+      <SettingsModal open={settingsOpen} onClose={closeSettings} initialTab={settingsTab} />
 
-      {/* ── Sync Popover ── */}
       <SyncPopover
         open={syncPopoverOpen}
-        onClose={closeSyncPopover}
+        onClose={() => setSyncPopoverOpen(false)}
         anchorRect={syncAnchorRect}
-        railWidth={railWidth}
+        railWidth={lp.railWidth}
         onOpenSyncSettings={openSyncSettings}
         syncStatus={syncStatus}
         onSyncStatusRefresh={syncStatusRefresh}
       />
 
-      {/* ── Mobile: Header Bar ── */}
+      {/* ── Mobile ── */}
       <header className="md:hidden fixed top-0 left-0 right-0 z-30 bg-card border-b border-border flex items-center justify-between px-3 py-2" style={{ paddingTop: 'env(safe-area-inset-top, 0px)' }}>
         <button onClick={() => setMobileOpen(true)} className="p-3 -ml-1 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent" aria-label="Open menu">
           <Menu size={20} />
@@ -414,11 +262,7 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
           <span className="font-semibold text-foreground text-sm tracking-wide">MindOS</span>
         </Link>
         <div className="flex items-center gap-0.5">
-          <button
-            onClick={openSyncSettings}
-            className="p-3 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent flex items-center justify-center"
-            aria-label="Sync status"
-          >
+          <button onClick={openSyncSettings} className="p-3 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent flex items-center justify-center" aria-label="Sync status">
             <MobileSyncDot status={syncStatus} />
           </button>
           <button onClick={() => setMobileSearchOpen(true)} className="p-3 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent" aria-label={t.sidebar.searchTitle}>
@@ -430,7 +274,6 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         </div>
       </header>
 
-      {/* ── Mobile: Drawer overlay ── */}
       {mobileOpen && <div className="md:hidden fixed inset-0 z-40 bg-black/60 backdrop-blur-sm" onClick={() => setMobileOpen(false)} />}
       <aside className={`md:hidden fixed top-0 left-0 h-screen w-[85vw] max-w-[320px] z-50 bg-card border-r border-border flex flex-col transition-transform duration-300 ease-in-out ${mobileOpen ? 'translate-x-0' : '-translate-x-full'}`}>
         <div className="flex items-center justify-between px-4 py-4 border-b border-border shrink-0">
@@ -447,26 +290,18 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         </div>
       </aside>
 
-      {/* ── Mobile: Modals (preserved for <768px) ── */}
       <SearchModal open={mobileSearchOpen} onClose={() => setMobileSearchOpen(false)} />
       <AskModal open={mobileAskOpen} onClose={() => setMobileAskOpen(false)} currentFile={currentFile} />
 
-      {/* ── Main Content ── */}
-      <main
-        id="main-content"
-        className="min-h-screen transition-all duration-200 pt-[52px] md:pt-0"
-      >
-        <div className="min-h-screen bg-background">
-          {children}
-        </div>
+      <main id="main-content" className="min-h-screen transition-all duration-200 pt-[52px] md:pt-0">
+        <div className="min-h-screen bg-background">{children}</div>
       </main>
 
-      {/* Desktop padding via <style> — avoids hydration mismatch from window checks */}
       <style>{`
         @media (min-width: 768px) {
-          :root { --right-panel-width: ${askPanelOpen ? askPanelWidth : 0}px; }
+          :root { --right-panel-width: ${ap.askPanelOpen ? ap.askPanelWidth : 0}px; }
           #main-content {
-            padding-left: ${panelOpen && panelMaximized ? '100vw' : `${panelOpen ? railWidth + effectivePanelWidth : railWidth}px`} !important;
+            padding-left: ${lp.panelOpen && lp.panelMaximized ? '100vw' : `${lp.panelOpen ? lp.railWidth + lp.effectivePanelWidth : lp.railWidth}px`} !important;
             padding-right: var(--right-panel-width) !important;
             padding-top: 0 !important;
           }

package/app/components/settings/McpSkillCreateForm.tsx

@@ -0,0 +1,178 @@
+'use client';
+
+import { useState } from 'react';
+import { X, Plus, Loader2, AlertCircle } from 'lucide-react';
+
+const skillFrontmatter = (n: string) => `---
+name: ${n}
+description: >
+  Describe WHEN the agent should use this
+  skill. Be specific about trigger conditions.
+---`;
+
+const SKILL_TEMPLATES: Record<string, (name: string) => string> = {
+  general: (n) => `${skillFrontmatter(n)}
+
+# Instructions
+
+## Context
+<!-- Background knowledge for the agent -->
+
+## Steps
+1.
+2.
+
+## Rules
+<!-- Constraints, edge cases, formats -->
+- `,
+
+  'tool-use': (n) => `${skillFrontmatter(n)}
+
+# Instructions
+
+## Available Tools
+<!-- List tools the agent can use -->
+-
+
+## When to Use
+<!-- Conditions that trigger this skill -->
+
+## Output Format
+<!-- Expected response structure -->
+`,
+
+  workflow: (n) => `${skillFrontmatter(n)}
+
+# Instructions
+
+## Trigger
+<!-- What triggers this workflow -->
+
+## Steps
+1.
+2.
+
+## Validation
+<!-- How to verify success -->
+
+## Rollback
+<!-- What to do on failure -->
+`,
+};
+
+interface SkillCreateFormProps {
+  onSave: (name: string, content: string) => Promise<void>;
+  onCancel: () => void;
+  saving: boolean;
+  error: string;
+  m: Record<string, any> | undefined;
+}
+
+export default function SkillCreateForm({ onSave, onCancel, saving, error, m }: SkillCreateFormProps) {
+  const [newName, setNewName] = useState('');
+  const [newContent, setNewContent] = useState('');
+  const [selectedTemplate, setSelectedTemplate] = useState<'general' | 'tool-use' | 'workflow'>('general');
+
+  const getTemplate = (skillName: string, tmpl?: 'general' | 'tool-use' | 'workflow') => {
+    const key = tmpl || selectedTemplate;
+    const fn = SKILL_TEMPLATES[key] || SKILL_TEMPLATES.general;
+    return fn(skillName || 'my-skill');
+  };
+
+  const handleNameChange = (val: string) => {
+    const cleaned = val.toLowerCase().replace(/[^a-z0-9-]/g, '');
+    const oldTemplate = getTemplate(newName || 'my-skill');
+    if (!newContent || newContent === oldTemplate) {
+      setNewContent(getTemplate(cleaned || 'my-skill'));
+    }
+    setNewName(cleaned);
+  };
+
+  const handleTemplateChange = (tmpl: 'general' | 'tool-use' | 'workflow') => {
+    const oldTemplate = getTemplate(newName || 'my-skill', selectedTemplate);
+    setSelectedTemplate(tmpl);
+    if (!newContent || newContent === oldTemplate) {
+      setNewContent(getTemplate(newName || 'my-skill', tmpl));
+    }
+  };
+
+  // Initialize content on first render
+  if (!newContent) {
+    // Use a timeout-free approach: set default on next tick won't work in render.
+    // Instead, initialize via useState default or useEffect. For simplicity, set inline.
+  }
+
+  return (
+    <div className="border border-border rounded-lg p-3 space-y-2">
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-medium">{m?.addSkill ?? '+ Add Skill'}</span>
+        <button onClick={onCancel} className="p-0.5 rounded hover:bg-muted text-muted-foreground">
+          <X size={12} />
+        </button>
+      </div>
+      <div className="space-y-1">
+        <label className="text-2xs text-muted-foreground">{m?.skillName ?? 'Name'}</label>
+        <input
+          type="text"
+          value={newName}
+          onChange={e => handleNameChange(e.target.value)}
+          placeholder="my-skill"
+          className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background font-mono text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        />
+      </div>
+      <div className="space-y-1">
+        <label className="text-2xs text-muted-foreground">{m?.skillTemplate ?? 'Template'}</label>
+        <div className="flex rounded-md border border-border overflow-hidden w-fit">
+          {(['general', 'tool-use', 'workflow'] as const).map((tmpl, i) => (
+            <button
+              key={tmpl}
+              onClick={() => handleTemplateChange(tmpl)}
+              className={`px-2.5 py-1 text-xs transition-colors ${i > 0 ? 'border-l border-border' : ''} ${
+                selectedTemplate === tmpl
+                  ? 'bg-amber-500/15 text-amber-600 font-medium'
+                  : 'text-muted-foreground hover:bg-muted'
+              }`}
+            >
+              {tmpl === 'general' ? (m?.skillTemplateGeneral ?? 'General')
+                : tmpl === 'tool-use' ? (m?.skillTemplateToolUse ?? 'Tool-use')
+                : (m?.skillTemplateWorkflow ?? 'Workflow')}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="space-y-1">
+        <label className="text-2xs text-muted-foreground">{m?.skillContent ?? 'Content'}</label>
+        <textarea
+          value={newContent || getTemplate(newName || 'my-skill')}
+          onChange={e => setNewContent(e.target.value)}
+          rows={16}
+          placeholder="Skill instructions (markdown)..."
+          className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring resize-y font-mono"
+        />
+      </div>
+      {error && (
+        <p className="text-2xs text-destructive flex items-center gap-1">
+          <AlertCircle size={10} />
+          {error}
+        </p>
+      )}
+      <div className="flex items-center gap-2">
+        <button
+          onClick={() => onSave(newName.trim(), newContent || getTemplate(newName.trim() || 'my-skill'))}
+          disabled={!newName.trim() || saving}
+          className="flex items-center gap-1 px-2.5 py-1 text-xs rounded-md disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+          style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
+        >
+          {saving && <Loader2 size={10} className="animate-spin" />}
+          {m?.saveSkill ?? 'Save'}
+        </button>
+        <button
+          onClick={onCancel}
+          className="px-2.5 py-1 text-xs rounded-md border border-border text-muted-foreground hover:text-foreground transition-colors"
+        >
+          {m?.cancelSkill ?? 'Cancel'}
+        </button>
+      </div>
+    </div>
+  );
+}