@geminilight/mindos 0.5.36 → 0.5.38

package/app/components/settings/McpSkillsSection.tsx

@@ -2,83 +2,14 @@
 
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import {
-  AlertCircle, Loader2, ChevronDown, ChevronRight,
-  Trash2, Plus, X, Search, Pencil,
+  Loader2, ChevronDown, ChevronRight,
+  Plus, X, Search,
 } from 'lucide-react';
 import { apiFetch } from '@/lib/api';
 import { useMcpDataOptional } from '@/hooks/useMcpData';
-import { Toggle } from './Primitives';
-import dynamic from 'next/dynamic';
 import type { SkillInfo, McpSkillsSectionProps } from './types';
-
-const MarkdownView = dynamic(() => import('@/components/MarkdownView'), { ssr: false });
-
-/* ── Helpers ───────────────────────────────────────────────────── */
-
-/** Strip YAML frontmatter (first `---` … `---` block) from markdown content. */
-function stripFrontmatter(content: string): string {
-  if (!content.startsWith('---')) return content;
-  const end = content.indexOf('\n---', 3);
-  if (end === -1) return content;
-  return content.slice(end + 4).replace(/^\n+/, '');
-}
-
-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 -->
-`,
-};
+import SkillRow from './McpSkillRow';
+import SkillCreateForm from './McpSkillCreateForm';
 
 /* ── Skills Section ────────────────────────────────────────────── */
 
@@ -89,8 +20,6 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
   const [loading, setLoading] = useState(true);
   const [expanded, setExpanded] = useState<string | null>(null);
   const [adding, setAdding] = useState(false);
-  const [newName, setNewName] = useState('');
-  const [newContent, setNewContent] = useState('');
   const [saving, setSaving] = useState(false);
   const [createError, setCreateError] = useState('');
 
@@ -102,20 +31,17 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
   const [fullContent, setFullContent] = useState<Record<string, string>>({});
   const [loadingContent, setLoadingContent] = useState<string | null>(null);
   const [loadErrors, setLoadErrors] = useState<Record<string, string>>({});
-  const [selectedTemplate, setSelectedTemplate] = useState<'general' | 'tool-use' | 'workflow'>('general');
-  // 🟡 MAJOR #3: Prevent race condition in lang switch
   const [switchingLang, setSwitchingLang] = useState(false);
 
   const fetchSkills = useCallback(async () => {
     try {
       const data = await apiFetch<{ skills: SkillInfo[] }>('/api/skills');
       setSkills(data.skills);
-      setLoadErrors({}); // Clear errors on success
+      setLoadErrors({});
     } catch (err) {
       const msg = err instanceof Error ? err.message : 'Failed to load skills';
       console.error('fetchSkills error:', msg);
       setLoadErrors(prev => ({ ...prev, _root: msg }));
-      // Keep existing skills data rather than clearing
     }
     setLoading(false);
   }, []);
@@ -132,14 +58,14 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
   const customSkills = useMemo(() => filtered.filter(s => s.source === 'user'), [filtered]);
   const builtinSkills = useMemo(() => filtered.filter(s => s.source === 'builtin'), [filtered]);
 
+  // ── Handlers ──
+
   const handleToggle = async (name: string, enabled: boolean) => {
-    // Delegate to McpProvider when available — single API call, no event storm
     if (mcp) {
       await mcp.toggleSkill(name, enabled);
       setSkills(prev => prev.map(s => s.name === name ? { ...s, enabled } : s));
       return;
     }
-    // Fallback: direct API call (no McpProvider context)
     try {
       await apiFetch('/api/skills', {
         method: 'POST',
@@ -198,9 +124,7 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
   const handleExpand = (name: string) => {
     const next = expanded === name ? null : name;
     setExpanded(next);
-    if (next) {
-      loadFullContent(name);
-    }
+    if (next) loadFullContent(name);
     if (editing && editing !== name) setEditing(null);
   };
 
@@ -221,7 +145,7 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
       });
       setFullContent(prev => ({ ...prev, [name]: editContent }));
       setEditing(null);
-      fetchSkills(); // refresh description from updated frontmatter
+      fetchSkills();
       window.dispatchEvent(new Event('mindos:skills-changed'));
     } catch (err: unknown) {
       setEditError(err instanceof Error ? err.message : 'Failed to save skill');
@@ -236,27 +160,17 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
     setEditError('');
   };
 
-  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 handleCreate = async () => {
-    if (!newName.trim()) return;
+  const handleCreate = async (name: string, content: string) => {
+    if (!name) return;
     setSaving(true);
     setCreateError('');
     try {
-      // Content is the full SKILL.md (with frontmatter)
-      const content = newContent || getTemplate(newName.trim());
       await apiFetch('/api/skills', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ action: 'create', name: newName.trim(), content }),
+        body: JSON.stringify({ action: 'create', name, content }),
       });
       setAdding(false);
-      setNewName('');
-      setNewContent('');
       fetchSkills();
       window.dispatchEvent(new Event('mindos:skills-changed'));
     } catch (err: unknown) {
@@ -266,25 +180,6 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
     }
   };
 
-  // Sync template name when newName changes (only if content matches a template)
-  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);
-    // Only replace content if it matches the old template (user hasn't customized)
-    if (!newContent || newContent === oldTemplate) {
-      setNewContent(getTemplate(newName || 'my-skill', tmpl));
-    }
-  };
-
   if (loading) {
     return (
       <div className="flex justify-center py-4">
@@ -293,107 +188,7 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
     );
   }
 
-  const renderSkillRow = (skill: SkillInfo) => (
-    <div key={skill.name} className="border border-border rounded-lg overflow-hidden">
-      <div
-        className="flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors"
-        onClick={() => handleExpand(skill.name)}
-      >
-        {expanded === skill.name ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
-        <span className="text-xs font-medium flex-1">{skill.name}</span>
-        <span className={`text-2xs px-1.5 py-0.5 rounded ${
-          skill.source === 'builtin' ? 'bg-blue-500/15 text-blue-500' : 'bg-purple-500/15 text-purple-500'
-        }`}>
-          {skill.source === 'builtin' ? (m?.skillBuiltin ?? 'Built-in') : (m?.skillUser ?? 'Custom')}
-        </span>
-        <Toggle size="sm" checked={skill.enabled} onClick={e => { e.stopPropagation(); handleToggle(skill.name, !skill.enabled); }} />
-      </div>
-
-      {expanded === skill.name && (
-        <div className="px-3 py-2 border-t border-border text-xs space-y-2 bg-muted/20">
-          <p className="text-muted-foreground">{skill.description || 'No description'}</p>
-          <p className="text-muted-foreground font-mono text-2xs">{skill.path}</p>
-
-          {/* Full content display / edit */}
-          {loadingContent === skill.name ? (
-            <div className="flex items-center gap-1.5 text-muted-foreground">
-              <Loader2 size={10} className="animate-spin" />
-              <span className="text-2xs">Loading...</span>
-            </div>
-          ) : fullContent[skill.name] ? (
-            <div className="space-y-1.5">
-              <div className="flex items-center justify-between">
-                <span className="text-2xs text-muted-foreground font-medium">{m?.skillContent ?? 'Content'}</span>
-                <div className="flex items-center gap-2">
-                  {skill.editable && editing !== skill.name && (
-                    <button
-                      onClick={() => handleEditStart(skill.name)}
-                      className="flex items-center gap-1 text-2xs text-muted-foreground hover:text-foreground transition-colors"
-                    >
-                      <Pencil size={10} />
-                      {m?.editSkill ?? 'Edit'}
-                    </button>
-                  )}
-                  {skill.editable && (
-                    <button
-                      onClick={() => handleDelete(skill.name)}
-                      className="flex items-center gap-1 text-2xs text-destructive hover:underline"
-                    >
-                      <Trash2 size={10} />
-                      {m?.deleteSkill ?? 'Delete'}
-                    </button>
-                  )}
-                </div>
-              </div>
-
-              {editing === skill.name ? (
-                <div className="space-y-1.5">
-                  <textarea
-                    value={editContent}
-                    onChange={e => setEditContent(e.target.value)}
-                    rows={Math.min(20, (editContent.match(/\n/g) || []).length + 3)}
-                    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 className="flex items-center gap-2">
-                    <button
-                      onClick={() => handleEditSave(skill.name)}
-                      disabled={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={handleEditCancel}
-                      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>
-                  {editError && editing === skill.name && (
-                    <p className="text-2xs text-destructive flex items-center gap-1">
-                      <AlertCircle size={10} />
-                      {editError}
-                    </p>
-                  )}
-                </div>
-              ) : (
-                <div className="w-full rounded-md border border-border bg-background/50 max-h-[300px] overflow-y-auto px-2.5 py-1.5 text-xs [&_.prose]:max-w-none [&_.prose]:text-xs [&_h1]:text-sm [&_h2]:text-xs [&_h3]:text-xs [&_pre]:text-2xs [&_code]:text-2xs">
-                  <MarkdownView content={stripFrontmatter(fullContent[skill.name])} />
-                </div>
-              )}
-            </div>
-          ) : loadErrors[skill.name] ? (
-            <p className="text-2xs text-destructive flex items-center gap-1">
-              <AlertCircle size={10} />
-              {loadErrors[skill.name]}
-            </p>
-          ) : null}
-        </div>
-      )}
-    </div>
-  );
+  // ── Render ──
 
   return (
     <div className="space-y-3 pt-2">
@@ -408,10 +203,7 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
           className="w-full pl-7 pr-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"
         />
         {search && (
-          <button
-            onClick={() => setSearch('')}
-            className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-          >
+          <button onClick={() => setSearch('')} className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground">
             <X size={10} />
           </button>
         )}
@@ -426,7 +218,6 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
           setSwitchingLang(true);
           try {
             if (lang === 'en') {
-              // Sequential to ensure both complete or both revert on failure
               await handleToggle('mindos', true);
               await handleToggle('mindos-zh', false);
             } else {
@@ -435,7 +226,6 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
             }
           } catch (err) {
             console.error('Lang switch failed:', err);
-            // Errors are already set by handleToggle; no further action needed
           } finally {
             setSwitchingLang(false);
           }
@@ -448,9 +238,7 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
                 onClick={() => handleLangSwitch('en')}
                 disabled={switchingLang}
                 className={`px-2.5 py-1 text-xs transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
-                  currentLang === 'en'
-                    ? 'bg-amber-500/15 text-amber-600 font-medium'
-                    : 'text-muted-foreground hover:bg-muted'
+                  currentLang === 'en' ? 'bg-amber-500/15 text-amber-600 font-medium' : 'text-muted-foreground hover:bg-muted'
                 }`}
               >
                 {m?.skillLangEn ?? 'English'}
@@ -459,9 +247,7 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
                 onClick={() => handleLangSwitch('zh')}
                 disabled={switchingLang}
                 className={`px-2.5 py-1 text-xs transition-colors disabled:opacity-50 disabled:cursor-not-allowed border-l border-border ${
-                  currentLang === 'zh'
-                    ? 'bg-amber-500/15 text-amber-600 font-medium'
-                    : 'text-muted-foreground hover:bg-muted'
+                  currentLang === 'zh' ? 'bg-amber-500/15 text-amber-600 font-medium' : 'text-muted-foreground hover:bg-muted'
                 }`}
               >
                 {m?.skillLangZh ?? '中文'}
@@ -478,19 +264,40 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
         </p>
       )}
 
-      {/* Custom group — always open */}
+      {/* Custom group */}
       {customSkills.length > 0 && (
         <div className="space-y-1.5">
           <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
             <span>{m?.customGroup ?? 'Custom'} ({customSkills.length})</span>
           </div>
           <div className="space-y-1.5">
-            {customSkills.map(renderSkillRow)}
+            {customSkills.map(skill => (
+              <SkillRow
+                key={skill.name}
+                skill={skill}
+                expanded={expanded === skill.name}
+                onExpand={handleExpand}
+                onToggle={handleToggle}
+                onDelete={handleDelete}
+                onEditStart={handleEditStart}
+                onEditSave={handleEditSave}
+                onEditCancel={handleEditCancel}
+                editing={editing}
+                editContent={editContent}
+                setEditContent={setEditContent}
+                editError={editError}
+                saving={saving}
+                fullContent={fullContent}
+                loadingContent={loadingContent}
+                loadErrors={loadErrors}
+                m={m}
+              />
+            ))}
           </div>
         </div>
       )}
 
-      {/* Built-in group — collapsible, default collapsed */}
+      {/* Built-in group */}
       {builtinSkills.length > 0 && (
         <div className="space-y-1.5">
           <div
@@ -502,88 +309,45 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
           </div>
           {!builtinCollapsed && (
             <div className="space-y-1.5">
-              {builtinSkills.map(renderSkillRow)}
+              {builtinSkills.map(skill => (
+                <SkillRow
+                  key={skill.name}
+                  skill={skill}
+                  expanded={expanded === skill.name}
+                  onExpand={handleExpand}
+                  onToggle={handleToggle}
+                  onDelete={handleDelete}
+                  onEditStart={handleEditStart}
+                  onEditSave={handleEditSave}
+                  onEditCancel={handleEditCancel}
+                  editing={editing}
+                  editContent={editContent}
+                  setEditContent={setEditContent}
+                  editError={editError}
+                  saving={saving}
+                  fullContent={fullContent}
+                  loadingContent={loadingContent}
+                  loadErrors={loadErrors}
+                  m={m}
+                />
+              ))}
             </div>
           )}
         </div>
       )}
 
-      {/* Add skill form — template-based */}
+      {/* Add skill */}
       {adding ? (
-        <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={() => { setAdding(false); setNewName(''); setNewContent(''); setCreateError(''); }} 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}
-              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>
-          {createError && (
-            <p className="text-2xs text-destructive flex items-center gap-1">
-              <AlertCircle size={10} />
-              {createError}
-            </p>
-          )}
-          <div className="flex items-center gap-2">
-            <button
-              onClick={handleCreate}
-              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={() => { setAdding(false); setNewName(''); setNewContent(''); setCreateError(''); }}
-              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>
+        <SkillCreateForm
+          onSave={handleCreate}
+          onCancel={() => { setAdding(false); setCreateError(''); }}
+          saving={saving}
+          error={createError}
+          m={m}
+        />
       ) : (
         <button
-          onClick={() => { setAdding(true); setSelectedTemplate('general'); setNewContent(getTemplate('my-skill', 'general')); }}
+          onClick={() => setAdding(true)}
           className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
         >
           <Plus size={12} />

package/app/hooks/useAskPanel.ts

@@ -0,0 +1,117 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { RIGHT_ASK_DEFAULT_WIDTH, RIGHT_ASK_MIN_WIDTH, RIGHT_ASK_MAX_WIDTH } from '@/components/RightAskPanel';
+import { useAskModal } from './useAskModal';
+
+export interface AskPanelState {
+  askPanelOpen: boolean;
+  askPanelWidth: number;
+  askMode: 'panel' | 'popup';
+  desktopAskPopupOpen: boolean;
+  askInitialMessage: string;
+  askOpenSource: 'user' | 'guide' | 'guide-next';
+  toggleAskPanel: () => void;
+  closeAskPanel: () => void;
+  closeDesktopAskPopup: () => void;
+  handleAskWidthChange: (w: number) => void;
+  handleAskWidthCommit: (w: number) => void;
+  handleAskModeSwitch: () => void;
+}
+
+/**
+ * Manages right-side Ask AI panel state: open/close, width, panel/popup mode, initial message.
+ * Extracted from SidebarLayout to reduce its state complexity.
+ */
+export function useAskPanel(): AskPanelState {
+  const [askPanelOpen, setAskPanelOpen] = useState(false);
+  const [askPanelWidth, setAskPanelWidth] = useState(RIGHT_ASK_DEFAULT_WIDTH);
+  const [askMode, setAskMode] = useState<'panel' | 'popup'>('panel');
+  const [desktopAskPopupOpen, setDesktopAskPopupOpen] = useState(false);
+  const [askInitialMessage, setAskInitialMessage] = useState('');
+  const [askOpenSource, setAskOpenSource] = useState<'user' | 'guide' | 'guide-next'>('user');
+
+  const askModal = useAskModal();
+
+  // Load persisted width + mode
+  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 {}
+
+    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);
+  }, []);
+
+  // 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]);
+
+  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), []);
+
+  const handleAskWidthChange = useCallback((w: number) => setAskPanelWidth(w), []);
+  const handleAskWidthCommit = useCallback((w: number) => {
+    try { localStorage.setItem('right-ask-panel-width', String(w)); } catch {}
+  }, []);
+
+  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;
+    });
+  }, []);
+
+  return {
+    askPanelOpen, askPanelWidth, askMode, desktopAskPopupOpen,
+    askInitialMessage, askOpenSource,
+    toggleAskPanel, closeAskPanel, closeDesktopAskPopup,
+    handleAskWidthChange, handleAskWidthCommit, handleAskModeSwitch,
+  };
+}