repoburg 1.3.201 → 1.3.204

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

@@ -1,63 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,96 +0,0 @@
-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);
-  });
-});

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

@@ -1,82 +0,0 @@
-import type { ProviderCapabilities, ProviderSlashCommand } from '../../types/index.ts';
-
-/** A slash command definition. */
-export interface SlashCommand {
-  id: string;
-  label: string;
-  hint: string;
-  /** Capability required to show this command. If null, always visible. */
-  capability: keyof ProviderCapabilities | null;
-  /** Sub-popup type to open when selected. */
-  subPopup?: 'sandbox' | 'websearch' | 'network';
-  /** When true, selecting inserts `/<id> ` as text (provider-native commands
-   *  like /compact, /clear that are handled by the runtime, not the UI). */
-  insertAsText?: boolean;
-}
-
-/** All built-in slash commands. */
-const BUILTIN_COMMANDS: SlashCommand[] = [
-  { id: 'model', label: '/model', hint: 'Change model', capability: 'dynamicModels' },
-  { id: 'sandbox', label: '/sandbox', hint: 'Sandbox mode', capability: 'sandbox', subPopup: 'sandbox' },
-  { id: 'websearch', label: '/websearch', hint: 'Web search mode', capability: 'webSearch', subPopup: 'websearch' },
-  { id: 'network', label: '/network', hint: 'Network access', capability: 'networkAccess', subPopup: 'network' },
-  { id: 'skills', label: '/skills', hint: 'Browse skills', capability: 'skills' },
-  { id: 'plugins', label: '/plugins', hint: 'Browse plugins', capability: 'plugins' },
-  { id: 'mcp', label: '/mcp', hint: 'Browse MCP servers', capability: 'mcpServers' },
-];
-
-/** Map provider-native commands (fetched dynamically from the runtime) to SlashCommand. */
-function mapProviderCommands(commands: ProviderSlashCommand[]): SlashCommand[] {
-  return commands.map((c) => ({
-    id: c.name,
-    label: `/${c.name}`,
-    hint: c.description,
-    capability: null,
-    insertAsText: true,
-  }));
-}
-
-/** Filter built-in and provider commands by capability and text filter. */
-export function filterCommands(
-  filter: string,
-  capabilities: ProviderCapabilities,
-  providerCommands: ProviderSlashCommand[] = [],
-): SlashCommand[] {
-  const all = [...BUILTIN_COMMANDS, ...mapProviderCommands(providerCommands)];
-  const seen = new Set<string>();
-  return all.filter((cmd) => {
-    if (seen.has(cmd.label)) return false;
-    seen.add(cmd.label);
-    if (cmd.capability && !capabilities[cmd.capability]) return false;
-    if (filter && !cmd.label.toLowerCase().includes(filter.toLowerCase())) return false;
-    return true;
-  });
-}
-
-interface SlashPopupProps {
-  commands: SlashCommand[];
-  selectedIndex: number;
-  onSelect: (cmd: SlashCommand) => void;
-  onHover: (index: number) => void;
-}
-
-/** Presentational slash command popup. Keyboard navigation is handled by the parent. */
-export default function SlashPopup({ commands, selectedIndex, onSelect, onHover }: SlashPopupProps) {
-  return (
-    <div className="slash-popup">
-      <div className="slash-popup-header">Commands</div>
-      {commands.length === 0 && <div className="slash-popup-empty">No matching commands</div>}
-      {commands.map((cmd, i) => (
-        <div
-          key={cmd.id}
-          className={`slash-popup-item ${i === selectedIndex ? 'selected' : ''}`}
-          onMouseEnter={() => onHover(i)}
-          onClick={() => onSelect(cmd)}
-        >
-          <span className="slash-popup-label">{cmd.label}</span>
-          <span className="slash-popup-hint">{cmd.hint}</span>
-        </div>
-      ))}
-    </div>
-  );
-}

package/agent-pane/frontend/src/components/panels/ChangesPanel.test.tsx

@@ -1,61 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { render, screen, fireEvent, cleanup } from '@testing-library/react';
-import ChangesPanel from './ChangesPanel.tsx';
-import { resetStore } from '../../test/component-helpers.ts';
-import { makeDetail, makeTurn, makeItem } from '../../test/fixtures.ts';
-
-describe('ChangesPanel', () => {
-  beforeEach(() => {
-    resetStore();
-  });
-  afterEach(() => {
-    cleanup();
-  });
-
-  it('shows empty state when no file changes', () => {
-    const detail = makeDetail('s1', []);
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
-    render(<ChangesPanel />);
-    expect(screen.getByText('No file changes in this scope')).toBeInTheDocument();
-  });
-
-  it('session scope button is active by default', () => {
-    const detail = makeDetail('s1', []);
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
-    render(<ChangesPanel />);
-    const sessionBtn = screen.getByText('Session');
-    expect(sessionBtn.closest('.scope-btn')).toHaveClass('active');
-  });
-
-  it('click "Current Turn" switches scope to turngroup', () => {
-    const setChangesScope = vi.fn();
-    const detail = makeDetail('s1', []);
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, setChangesScope });
-    render(<ChangesPanel />);
-    fireEvent.click(screen.getByText('Current Turn'));
-    expect(setChangesScope).toHaveBeenCalledWith('turngroup');
-  });
-
-  it('renders file change entries with A/D/M status', () => {
-    const item = makeItem('i1', 't1', 'file_change');
-    item.data = { changes: [{ path: 'src/main.ts', kind: 'add' }, { path: 'src/old.ts', kind: 'delete' }] };
-    const turn = makeTurn('t1', 's1', { items: [item] });
-    const detail = makeDetail('s1', [turn]);
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
-    render(<ChangesPanel />);
-    expect(screen.getByText(/main\.ts/)).toBeInTheDocument();
-    expect(screen.getByText(/old\.ts/)).toBeInTheDocument();
-  });
-
-  it('click on file change calls setSelectedChangePath', () => {
-    const setSelectedChangePath = vi.fn();
-    const item = makeItem('i1', 't1', 'file_change');
-    item.data = { changes: [{ path: 'src/app.ts', kind: 'modify' }] };
-    const turn = makeTurn('t1', 's1', { items: [item] });
-    const detail = makeDetail('s1', [turn]);
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, setSelectedChangePath });
-    render(<ChangesPanel />);
-    fireEvent.click(screen.getByText(/app\.ts/).closest('.file-change')!);
-    expect(setSelectedChangePath).toHaveBeenCalledWith('src/app.ts');
-  });
-});

package/agent-pane/frontend/src/components/panels/ChangesPanel.tsx

@@ -1,54 +0,0 @@
-import { useStore } from '../../store/store.ts';
-import { collectFileChanges } from '../../utils/changes.ts';
-
-export default function ChangesPanel() {
-  const { activeSessionId, sessionDetails, changesScope, setChangesScope, activeTurnIndex, setSelectedChangePath } =
-    useStore();
-  const detail = activeSessionId ? sessionDetails[activeSessionId] : null;
-  const turns = detail?.turns ?? [];
-
-  const deduped = collectFileChanges(turns, changesScope, activeTurnIndex);
-
-  return (
-    <>
-      <div className="changes-scope-toggle">
-        <button
-          className={`scope-btn ${changesScope === 'session' ? 'active' : ''}`}
-          onClick={() => setChangesScope('session')}
-        >
-          Session
-        </button>
-        <button
-          className={`scope-btn ${changesScope === 'turngroup' ? 'active' : ''}`}
-          onClick={() => setChangesScope('turngroup')}
-        >
-          Current Turn
-        </button>
-      </div>
-
-      {deduped.length === 0 ? (
-        <div className="empty-state">No file changes in this scope</div>
-      ) : (
-        <div className="right-section">
-          <div className="right-section-title">Changed Files ({deduped.length})</div>
-          {deduped.map((entry) => {
-            const statusClass = entry.kind === 'add' ? 'fc-add' : entry.kind === 'delete' ? 'fc-del' : 'fc-mod';
-            const statusChar = entry.kind === 'add' ? 'A' : entry.kind === 'delete' ? 'D' : 'M';
-            const fileName = entry.path.split('/').pop() || entry.path;
-            const dir = entry.path.replace('/' + fileName, '');
-
-            return (
-              <div key={entry.path} className="file-change clickable" onClick={() => setSelectedChangePath(entry.path)}>
-                <span className={`fc-status ${statusClass}`}>{statusChar}</span>
-                <span className="fc-name">
-                  {dir && <span style={{ color: 'var(--text-muted)' }}>{dir}/</span>}
-                  {fileName}
-                </span>
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </>
-  );
-}

package/agent-pane/frontend/src/components/panels/TasksPanel.test.tsx

@@ -1,97 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { render, screen, cleanup } from '@testing-library/react';
-import TasksPanel from './TasksPanel.tsx';
-import { resetStore } from '../../test/component-helpers.ts';
-import { makeDetail, makeTurn, makeItem } from '../../test/fixtures.ts';
-
-describe('TasksPanel', () => {
-  beforeEach(() => {
-    resetStore();
-  });
-  afterEach(() => {
-    cleanup();
-  });
-
-  it('shows empty state when no background tasks', () => {
-    const detail = makeDetail('s1', []);
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
-    render(<TasksPanel />);
-    expect(screen.getByText('No background tasks yet')).toBeInTheDocument();
-  });
-
-  it('renders a Monitor task card with description', () => {
-    const item = makeItem('i1', 't1', 'background_task');
-    item.data = {
-      task_type: 'local_bash',
-      description: 'watch echo hello',
-      status: 'running',
-      output: 'hello\n',
-    };
-    item.status = 'in_progress';
-    const turn = makeTurn('t1', 's1', { items: [item] });
-    const detail = makeDetail('s1', [turn]);
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
-    render(<TasksPanel />);
-    expect(screen.getByText('Monitor')).toBeInTheDocument();
-    expect(screen.getByText('watch echo hello')).toBeInTheDocument();
-    // Output is in a <code> element inside .task-output
-    const outputEl = document.querySelector('.task-output code');
-    expect(outputEl?.textContent).toContain('hello');
-  });
-
-  it('does not show Subagent (local_agent) tasks in Tasks panel', () => {
-    const item = makeItem('i2', 't1', 'background_task');
-    item.data = {
-      task_type: 'local_agent',
-      subagent_type: 'explore-codebase',
-      description: 'explore the codebase',
-      status: 'completed',
-    };
-    item.status = 'completed';
-    const turn = makeTurn('t1', 's1', { items: [item] });
-    const detail = makeDetail('s1', [turn]);
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
-    render(<TasksPanel />);
-    // local_agent items are filtered out — they appear in subagent tabs, not Tasks panel
-    expect(screen.getByText('No background tasks yet')).toBeInTheDocument();
-  });
-
-  it('sorts running tasks before completed', () => {
-    const runningItem = makeItem('i1', 't2', 'background_task');
-    runningItem.data = { task_type: 'local_bash', description: 'running task', status: 'running' };
-    runningItem.status = 'in_progress';
-
-    const doneItem = makeItem('i2', 't1', 'background_task');
-    doneItem.data = { task_type: 'local_bash', description: 'done task', status: 'completed' };
-    doneItem.status = 'completed';
-
-    const turn1 = makeTurn('t1', 's1', { items: [doneItem] });
-    const turn2 = makeTurn('t2', 's1', { items: [runningItem] });
-    const detail = makeDetail('s1', [turn1, turn2]);
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
-    render(<TasksPanel />);
-
-    const cards = document.querySelectorAll('.task-card');
-    expect(cards.length).toBe(2);
-    // Running task should be first
-    expect(cards[0].textContent).toContain('running task');
-    expect(cards[1].textContent).toContain('done task');
-  });
-
-  it('shows task count in section title (local_agent excluded)', () => {
-    const item1 = makeItem('i1', 't1', 'background_task');
-    item1.data = { task_type: 'local_bash', description: 'task 1', status: 'completed' };
-    item1.status = 'completed';
-
-    const item2 = makeItem('i2', 't1', 'background_task');
-    item2.data = { task_type: 'local_agent', description: 'task 2', status: 'completed' };
-    item2.status = 'completed';
-
-    const turn = makeTurn('t1', 's1', { items: [item1, item2] });
-    const detail = makeDetail('s1', [turn]);
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
-    render(<TasksPanel />);
-    // Only local_bash counted — local_agent filtered out
-    expect(screen.getByText(/Background Tasks \(1\)/)).toBeInTheDocument();
-  });
-});