repoburg 1.3.186 → 1.3.195

package/agent-pane/frontend/src/components/WorkspaceSidebar.tsx

@@ -1,60 +1,351 @@
+import { useState, useRef, useEffect } from 'react';
 import { useStore } from '../store/store.ts';
-import { statusToDot } from '../types/index.ts';
+import { deriveSessionStatus } from '../hooks/useSessionStatus.ts';
+import { useOutsideClick } from '../hooks/useOutsideClick.ts';
+import { useEscapeKey } from '../hooks/useEscapeKey.ts';
+import type { Session, Workspace } from '../types/index.ts';
 import StatusDot from './StatusDot.tsx';
-import { Plus, Trash2 } from 'lucide-react';
+import RuntimeIcon from './RuntimeIcon.tsx';
+import { Plus, ChevronDown, Folder, FolderPlus, Trash2, Edit3, CheckCircle2, RotateCcw } from 'lucide-react';
+
+interface ContextMenuState {
+  x: number;
+  y: number;
+  type: 'workspace' | 'session';
+  path?: string;
+  sessionId?: string;
+  sessionTitle?: string | null;
+  sessionLifecycle?: string;
+}
+
+interface WorkspaceGroup {
+  path: string;
+  label: string;
+  sessions: Session[];
+  workspace: Workspace | null;
+}
+
+/** Build workspace groups from active workspaces + session cwd values.
+ *  Deleted workspace paths are excluded from implicit groups. */
+function buildGroups(workspaces: Workspace[], sessions: Session[]): WorkspaceGroup[] {
+  const sessionByCwd = new Map<string, Session[]>();
+
+  for (const s of sessions) {
+    const key = s.cwd || '(no directory)';
+    const list = sessionByCwd.get(key) ?? [];
+    list.push(s);
+    sessionByCwd.set(key, list);
+  }
+
+  const seenPaths = new Set<string>();
+  const deletedPaths = new Set(workspaces.filter((w) => w.deleted === 1).map((w) => w.path));
+  const groups: WorkspaceGroup[] = [];
+
+  // Active explicit workspaces first (deleted = 0)
+  for (const ws of workspaces) {
+    if (ws.deleted === 1) {
+      seenPaths.add(ws.path);
+      continue;
+    }
+    seenPaths.add(ws.path);
+    groups.push({
+      path: ws.path,
+      label: ws.label || ws.path.split('/').pop() || ws.path,
+      sessions: sessionByCwd.get(ws.path) ?? [],
+      workspace: ws,
+    });
+  }
+
+  // Implicit groups — session cwd values not in any workspace (active or deleted)
+  for (const [path, sess] of sessionByCwd) {
+    if (seenPaths.has(path) || deletedPaths.has(path)) continue;
+    groups.push({
+      path,
+      label: path === '(no directory)' ? 'Other' : path.split('/').pop() || path,
+      sessions: sess,
+      workspace: null,
+    });
+  }
+
+  return groups;
+}
 
 export default function WorkspaceSidebar() {
-  const { sessions, activeSessionId, selectSession, setShowNewSessionDialog, deleteSession } = useStore();
+  const {
+    sessions,
+    workspaces,
+    activeSessionId,
+    selectSession,
+    deleteSession,
+    removeWorkspace,
+    createSessionInWorkspace,
+    pickAndAddWorkspace,
+    renameSession,
+    markFinished,
+    reopenSession,
+  } = useStore();
+  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+  const [subCollapsed, setSubCollapsed] = useState<Set<string>>(new Set());
+  const [ctxMenu, setCtxMenu] = useState<ContextMenuState | null>(null);
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState('');
+  const ctxRef = useRef<HTMLDivElement>(null);
+  const renameRef = useRef<HTMLInputElement>(null);
+
+  useOutsideClick(ctxRef, () => setCtxMenu(null), !!ctxMenu);
+  useEscapeKey(() => setCtxMenu(null), !!ctxMenu);
+
+  function toggleSection(path: string) {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) next.delete(path);
+      else next.add(path);
+      return next;
+    });
+  }
+
+  function toggleSubGroup(key: string) {
+    setSubCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }
+
+  // Focus rename input when it appears
+  useEffect(() => {
+    if (renamingId && renameRef.current) {
+      renameRef.current.focus();
+      renameRef.current.select();
+    }
+  }, [renamingId]);
+
+  function startRename(id: string, currentTitle: string) {
+    setRenamingId(id);
+    setRenameValue(currentTitle || id.slice(0, 8));
+  }
+
+  function confirmRename() {
+    if (renamingId) {
+      renameSession(renamingId, renameValue);
+    }
+    setRenamingId(null);
+  }
+
+  function cancelRename() {
+    setRenamingId(null);
+    setRenameValue('');
+  }
+
+  const groups = buildGroups(workspaces, sessions);
+
+  function renderSession(s: Session) {
+    const isActive = activeSessionId === s.id;
+    const status = deriveSessionStatus(s);
+    return (
+      <div
+        key={s.id}
+        className={`tree-item ${isActive ? 'active' : ''} ${status.isFinished ? 'tree-item-finished' : ''}`}
+        onClick={() => selectSession(s.id)}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          setCtxMenu({
+            x: e.clientX,
+            y: e.clientY,
+            type: 'session',
+            sessionId: s.id,
+            sessionTitle: s.title,
+            sessionLifecycle: s.lifecycle,
+          });
+        }}
+      >
+        <RuntimeIcon iconClass={status.iconClass} iconText={status.iconText} size={16} />
+        {renamingId === s.id ? (
+          <input
+            ref={renameRef}
+            className="tree-rename-input"
+            value={renameValue}
+            onChange={(e) => setRenameValue(e.target.value)}
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') confirmRename();
+              if (e.key === 'Escape') cancelRename();
+            }}
+            onBlur={confirmRename}
+          />
+        ) : (
+          <span className="tree-label">{s.title || s.id.slice(0, 8)}</span>
+        )}
+        {status.dot && <StatusDot status={status.dot} />}
+      </div>
+    );
+  }
 
   return (
     <div className="ide-sidebar">
       <div className="sidebar-header">
-        <span className="sidebar-header-title">Sessions</span>
-        <button className="sidebar-add" title="New Session" onClick={() => setShowNewSessionDialog(true)}>
+        <span className="sidebar-header-title">Workspaces</span>
+        <button className="sidebar-add" title="Add workspace" onClick={() => pickAndAddWorkspace()}>
           <Plus size={14} />
         </button>
       </div>
 
-      {sessions.length === 0 ? (
+      {groups.length === 0 ? (
         <div className="empty-state" style={{ padding: '16px' }}>
-          No sessions yet. Click + to create one.
+          No workspaces yet. Click + to add one.
         </div>
       ) : (
-        <div className="tree-children">
-          {sessions.map((s) => {
-            const isActive = activeSessionId === s.id;
-            const dot = statusToDot(s.status, s.is_running === 1);
-            return (
+        groups.map((group) => {
+          const isCollapsed = collapsed.has(group.path);
+          const workingSessions = group.sessions.filter((s) => s.lifecycle !== 'finished');
+          const finishedSessions = group.sessions.filter((s) => s.lifecycle === 'finished');
+          const finishedKey = `${group.path}:finished`;
+          const finishedCollapsed = subCollapsed.has(finishedKey);
+
+          return (
+            <div key={group.path} className={`tree-section ${isCollapsed ? 'collapsed' : ''}`}>
               <div
-                key={s.id}
-                className={`tree-item ${isActive ? 'active' : ''}`}
-                onClick={() => selectSession(s.id)}
+                className="tree-section-header"
+                onClick={() => toggleSection(group.path)}
+                onContextMenu={(e) => {
+                  e.preventDefault();
+                  setCtxMenu({ x: e.clientX, y: e.clientY, type: 'workspace', path: group.path });
+                }}
               >
-                <span className="tree-label">{s.title || s.id.slice(0, 8)}</span>
-                <StatusDot status={dot} />
-                {isActive && (
-                  <span
-                    className="ide-tab-close"
-                    title="Delete session"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      deleteSession(s.id);
-                    }}
-                  >
-                    <Trash2 size={11} />
-                  </span>
+                <ChevronDown size={9} className="tree-chevron" />
+                <Folder size={14} />
+                <span className="tree-section-label">{group.label}</span>
+                <button
+                  className="tree-section-add"
+                  title="New session in this workspace"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    createSessionInWorkspace(group.path);
+                  }}
+                >
+                  <Plus size={11} />
+                </button>
+                <span className="tree-count">{group.sessions.length}</span>
+              </div>
+              <div className="tree-children">
+                {/* Working sessions — rendered directly, no sub-group header */}
+                {workingSessions.length === 0 && finishedSessions.length === 0 ? (
+                  <div className="tree-empty">No sessions</div>
+                ) : (
+                  workingSessions.map(renderSession)
+                )}
+
+                {/* Finished sub-group — only show if there are finished sessions */}
+                {finishedSessions.length > 0 && (
+                  <div className={`tree-subgroup ${finishedCollapsed ? 'collapsed' : ''}`}>
+                    <div className="tree-subgroup-header" onClick={() => toggleSubGroup(finishedKey)}>
+                      <ChevronDown size={8} className="tree-chevron" />
+                      <span className="tree-subgroup-label">Finished</span>
+                      <span className="tree-subgroup-count">{finishedSessions.length}</span>
+                    </div>
+                    {!finishedCollapsed && (
+                      <div className="tree-subgroup-items">{finishedSessions.map(renderSession)}</div>
+                    )}
+                  </div>
                 )}
               </div>
-            );
-          })}
-        </div>
+            </div>
+          );
+        })
       )}
 
-      <div className="sidebar-footer">
-        <span style={{ color: 'var(--text-muted)', fontSize: '11px' }}>
-          {sessions.length} session{sessions.length !== 1 ? 's' : ''}
-        </span>
+      <div className="sidebar-footer" onClick={() => pickAndAddWorkspace()}>
+        <FolderPlus size={14} />
+        <span>Add workspace</span>
       </div>
+
+      {ctxMenu && (
+        <div
+          ref={ctxRef}
+          className="ctx-menu"
+          style={{ position: 'fixed', left: ctxMenu.x, top: ctxMenu.y, zIndex: 500 }}
+        >
+          {ctxMenu.type === 'workspace' && (
+            <>
+              <div
+                className="ctx-menu-item"
+                onClick={() => {
+                  createSessionInWorkspace(ctxMenu.path!);
+                  setCtxMenu(null);
+                }}
+              >
+                <Plus size={12} /> New Session
+              </div>
+              <div
+                className="ctx-menu-item ctx-danger"
+                onClick={() => {
+                  removeWorkspace(ctxMenu.path!);
+                  setCtxMenu(null);
+                }}
+              >
+                <Trash2 size={12} /> Hide Workspace
+              </div>
+            </>
+          )}
+          {ctxMenu.type === 'session' && (
+            <>
+              {ctxMenu.sessionLifecycle !== 'finished' ? (
+                <>
+                  <div
+                    className="ctx-menu-item"
+                    onClick={() => {
+                      startRename(ctxMenu.sessionId!, ctxMenu.sessionTitle ?? '');
+                      setCtxMenu(null);
+                    }}
+                  >
+                    <Edit3 size={12} /> Rename
+                  </div>
+                  <div
+                    className="ctx-menu-item"
+                    onClick={() => {
+                      markFinished(ctxMenu.sessionId!);
+                      setCtxMenu(null);
+                    }}
+                  >
+                    <CheckCircle2 size={12} /> Mark as Finished
+                  </div>
+                  <div
+                    className="ctx-menu-item ctx-danger"
+                    onClick={() => {
+                      deleteSession(ctxMenu.sessionId!);
+                      setCtxMenu(null);
+                    }}
+                  >
+                    <Trash2 size={12} /> Delete Session
+                  </div>
+                </>
+              ) : (
+                <>
+                  <div
+                    className="ctx-menu-item"
+                    onClick={() => {
+                      reopenSession(ctxMenu.sessionId!);
+                      setCtxMenu(null);
+                    }}
+                  >
+                    <RotateCcw size={12} /> Reopen
+                  </div>
+                  <div
+                    className="ctx-menu-item ctx-danger"
+                    onClick={() => {
+                      deleteSession(ctxMenu.sessionId!);
+                      setCtxMenu(null);
+                    }}
+                  >
+                    <Trash2 size={12} /> Delete Session
+                  </div>
+                </>
+              )}
+            </>
+          )}
+        </div>
+      )}
     </div>
   );
-}
+}

package/agent-pane/frontend/src/components/input/OptionSubPopup.tsx

@@ -0,0 +1,32 @@
+interface OptionSubPopupProps {
+  title: string;
+  options: { value: string; label: string; description?: string }[];
+  currentValue: string | null | undefined;
+  onSelect: (value: string) => void;
+  onClose: () => void;
+}
+
+/** Radio-style sub-popup for /sandbox, /websearch, /network commands. */
+export default function OptionSubPopup({ title, options, currentValue, onSelect, onClose }: OptionSubPopupProps) {
+  return (
+    <div className="slash-popup">
+      <div className="slash-popup-header">
+        <button className="slash-popup-back" onClick={onClose}>← Back</button>
+        <span>{title}</span>
+      </div>
+      {options.map((opt) => (
+        <div
+          key={opt.value}
+          className={`slash-popup-item ${opt.value === currentValue ? 'selected' : ''}`}
+          onClick={() => onSelect(opt.value)}
+        >
+          <div className="slash-popup-item-main">
+            <span className="slash-popup-label">{opt.label}</span>
+            {opt.description && <span className="slash-popup-hint">{opt.description}</span>}
+          </div>
+          {opt.value === currentValue && <span className="slash-popup-check">✓</span>}
+        </div>
+      ))}
+    </div>
+  );
+}

package/agent-pane/frontend/src/components/input/SkillMentionPopup.test.tsx

@@ -0,0 +1,63 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render, screen, fireEvent, cleanup, waitFor } from '@testing-library/react';
+
+// Mock the skills API
+vi.mock('../../api/skills.ts', () => ({
+  fetchSkills: vi.fn(),
+}));
+
+import SkillMentionPopup from './SkillMentionPopup.tsx';
+import { fetchSkills } from '../../api/skills.ts';
+
+const MOCK_SKILLS = [
+  { id: 'cloudflare', name: 'cloudflare', description: 'Cloudflare skill', type: 'skill' as const, enabled: true, metadata: { isSystem: false } },
+  { id: '.system/imagegen', name: 'imagegen', description: 'Image gen skill', type: 'skill' as const, enabled: true, metadata: { isSystem: true } },
+];
+
+describe('SkillMentionPopup', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(fetchSkills).mockResolvedValue(MOCK_SKILLS);
+  });
+  afterEach(cleanup);
+
+  it('renders loading state then skills', async () => {
+    render(<SkillMentionPopup filter="" onSelect={() => {}} onClose={() => {}} />);
+    expect(screen.getByText('Loading skills…')).toBeInTheDocument();
+    await waitFor(() => expect(screen.getByText('cloudflare')).toBeInTheDocument());
+    expect(screen.getByText('imagegen')).toBeInTheDocument();
+  });
+
+  it('filters skills by name', async () => {
+    render(<SkillMentionPopup filter="cloud" onSelect={() => {}} onClose={() => {}} />);
+    await waitFor(() => expect(screen.getByText('cloudflare')).toBeInTheDocument());
+    expect(screen.queryByText('imagegen')).not.toBeInTheDocument();
+  });
+
+  it('shows system badge for system skills', async () => {
+    render(<SkillMentionPopup filter="" onSelect={() => {}} onClose={() => {}} />);
+    await waitFor(() => expect(screen.getByText('imagegen')).toBeInTheDocument());
+    expect(screen.getByText('system')).toBeInTheDocument();
+  });
+
+  it('calls onSelect when skill is clicked', async () => {
+    const onSelect = vi.fn();
+    render(<SkillMentionPopup filter="" onSelect={onSelect} onClose={() => {}} />);
+    await waitFor(() => expect(screen.getByText('cloudflare')).toBeInTheDocument());
+    fireEvent.click(screen.getByText('cloudflare'));
+    expect(onSelect).toHaveBeenCalledWith(MOCK_SKILLS[0]);
+  });
+
+  it('calls onClose on Escape key', async () => {
+    const onClose = vi.fn();
+    render(<SkillMentionPopup filter="" onSelect={() => {}} onClose={onClose} />);
+    await waitFor(() => expect(screen.getByText('cloudflare')).toBeInTheDocument());
+    fireEvent.keyDown(window, { key: 'Escape' });
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('shows empty state when no skills match', async () => {
+    render(<SkillMentionPopup filter="xyz" onSelect={() => {}} onClose={() => {}} />);
+    await waitFor(() => expect(screen.getByText('No matching skills')).toBeInTheDocument());
+  });
+});

package/agent-pane/frontend/src/components/input/SkillMentionPopup.tsx

@@ -0,0 +1,78 @@
+import { useState, useEffect, useRef } from 'react';
+import { fetchSkills } from '../../api/skills.ts';
+import type { Extension } from '../../types/index.ts';
+
+interface SkillMentionPopupProps {
+  filter: string;
+  onSelect: (skill: Extension) => void;
+  onClose: () => void;
+}
+
+/** Skill search popup — triggered by `$` or `/skills` command. */
+export default function SkillMentionPopup({ filter, onSelect, onClose }: SkillMentionPopupProps) {
+  const [skills, setSkills] = useState<Extension[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    fetchSkills()
+      .then(setSkills)
+      .catch(() => setSkills([]))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const filtered = skills.filter((s) =>
+    s.name.toLowerCase().includes(filter.toLowerCase()) ||
+    s.description.toLowerCase().includes(filter.toLowerCase()),
+  );
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [filter]);
+
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setSelectedIndex((i) => Math.min(i + 1, filtered.length - 1));
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setSelectedIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        if (filtered[selectedIndex]) onSelect(filtered[selectedIndex]);
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+      }
+    }
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [filtered, selectedIndex, onSelect, onClose]);
+
+  return (
+    <div className="slash-popup" ref={listRef}>
+      <div className="slash-popup-header">
+        <button className="slash-popup-back" onClick={onClose}>← Back</button>
+        <span>Skills</span>
+      </div>
+      {loading && <div className="slash-popup-empty">Loading skills…</div>}
+      {!loading && filtered.length === 0 && <div className="slash-popup-empty">No matching skills</div>}
+      {filtered.map((skill, i) => (
+        <div
+          key={skill.id}
+          className={`slash-popup-item ${i === selectedIndex ? 'selected' : ''}`}
+          onMouseEnter={() => setSelectedIndex(i)}
+          onClick={() => onSelect(skill)}
+        >
+          <div className="slash-popup-item-main">
+            <span className="slash-popup-label">{skill.name}</span>
+            {skill.description && <span className="slash-popup-hint">{skill.description}</span>}
+          </div>
+          {Boolean(skill.metadata.isSystem) && <span className="slash-popup-hint">system</span>}
+        </div>
+      ))}
+    </div>
+  );
+}

package/agent-pane/frontend/src/components/input/SlashPopup.test.tsx

@@ -0,0 +1,96 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import SlashPopup, { filterCommands, type SlashCommand } from './SlashPopup.tsx';
+
+const ALL_CAPS = {
+  dynamicModels: true,
+  skills: true,
+  plugins: true,
+  mcpServers: true,
+  imageAttachments: true,
+  sandbox: true,
+  webSearch: true,
+  networkAccess: true,
+  fileReferences: true,
+};
+
+const NO_CAPS = {
+  dynamicModels: false,
+  skills: false,
+  plugins: false,
+  mcpServers: false,
+  imageAttachments: false,
+  sandbox: false,
+  webSearch: false,
+  networkAccess: false,
+  fileReferences: false,
+};
+
+describe('filterCommands', () => {
+  it('returns all commands when all capabilities enabled and no filter', () => {
+    const cmds = filterCommands('', ALL_CAPS);
+    expect(cmds.length).toBe(7);
+  });
+
+  it('filters by text', () => {
+    const cmds = filterCommands('sand', ALL_CAPS);
+    expect(cmds).toHaveLength(1);
+    expect(cmds[0].id).toBe('sandbox');
+  });
+
+  it('hides commands when capability is false', () => {
+    const cmds = filterCommands('', NO_CAPS);
+    // All commands have a capability requirement, so none should show
+    expect(cmds).toHaveLength(0);
+  });
+
+  it('shows only commands with matching capability', () => {
+    const partial = { ...NO_CAPS, sandbox: true, webSearch: true };
+    const cmds = filterCommands('', partial);
+    expect(cmds).toHaveLength(2);
+    expect(cmds.map((c) => c.id)).toEqual(['sandbox', 'websearch']);
+  });
+});
+
+describe('SlashPopup', () => {
+  afterEach(cleanup);
+
+  const commands: SlashCommand[] = [
+    { id: 'sandbox', label: '/sandbox', hint: 'Sandbox mode', capability: 'sandbox', subPopup: 'sandbox' },
+    { id: 'websearch', label: '/websearch', hint: 'Web search', capability: 'webSearch', subPopup: 'websearch' },
+  ];
+
+  it('renders all commands', () => {
+    render(<SlashPopup commands={commands} selectedIndex={0} onSelect={() => {}} onHover={() => {}} />);
+    expect(screen.getByText('/sandbox')).toBeInTheDocument();
+    expect(screen.getByText('/websearch')).toBeInTheDocument();
+  });
+
+  it('shows empty state when no commands', () => {
+    render(<SlashPopup commands={[]} selectedIndex={0} onSelect={() => {}} onHover={() => {}} />);
+    expect(screen.getByText('No matching commands')).toBeInTheDocument();
+  });
+
+  it('calls onSelect when command is clicked', () => {
+    const onSelect = vi.fn();
+    render(<SlashPopup commands={commands} selectedIndex={0} onSelect={onSelect} onHover={() => {}} />);
+    fireEvent.click(screen.getByText('/sandbox'));
+    expect(onSelect).toHaveBeenCalledWith(commands[0]);
+  });
+
+  it('applies selected class to the selected index', () => {
+    const { container } = render(
+      <SlashPopup commands={commands} selectedIndex={1} onSelect={() => {}} onHover={() => {}} />,
+    );
+    const items = container.querySelectorAll('.slash-popup-item');
+    expect(items[1]).toHaveClass('selected');
+    expect(items[0]).not.toHaveClass('selected');
+  });
+
+  it('calls onHover on mouse enter', () => {
+    const onHover = vi.fn();
+    render(<SlashPopup commands={commands} selectedIndex={0} onSelect={() => {}} onHover={onHover} />);
+    fireEvent.mouseEnter(screen.getByText('/websearch'));
+    expect(onHover).toHaveBeenCalledWith(1);
+  });
+});