ompchamber 0.3.0

package/src/client/components/workspace/git-panel/commit-modal/index.tsx

@@ -0,0 +1,269 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { Loader2 } from 'lucide-preact';
+import { Header } from '@/client/components/workspace/git-panel/commit-modal/Header';
+import { GraphCanvas } from '@/client/components/workspace/git-panel/commit-modal/GraphCanvas';
+import { CommitRow } from '@/client/components/workspace/git-panel/commit-modal/CommitRow';
+import { computeCommitLanes } from '@/shared/lib/fs/git-graph';
+import { useCommitPagination } from '@/client/hooks/workspace/commit-pagination';
+import { useCommitInteractions } from '@/client/hooks/workspace/commit-interactions';
+
+interface GitCommitModalProps {
+  output: { title: string; data: any[]; hasMore?: boolean; total?: number } | null;
+  onClose: () => void;
+  onRefresh?: () => void;
+  onExecuteAction?: (actionType: string, file?: string, extra?: Record<string, string>) => void;
+  rootPath?: string;
+  activeRepo?: string;
+}
+
+export function GitCommitModal({
+  output,
+  onClose,
+  onRefresh,
+  onExecuteAction,
+  rootPath,
+  activeRepo,
+}: GitCommitModalProps) {
+  if (!output) return null;
+
+  const initialGraphMode = output.title.toLowerCase().includes('graph');
+  const [isGraphMode, setIsGraphMode] = useState(initialGraphMode);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedHash, setSelectedHash] = useState<string>('');
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const {
+    commits,
+    hasMore,
+    totalCount,
+    isLoadingMore,
+    handleLoadMore,
+  } = useCommitPagination({
+    output,
+    isGraphMode,
+    rootPath,
+    activeRepo,
+  });
+
+  const {
+    fileDiffs,
+    expandedFiles,
+    loadingFiles,
+    handleToggleFile,
+    handleCommitAction,
+  } = useCommitInteractions({
+    onExecuteAction,
+    rootPath,
+    activeRepo,
+  });
+
+  // Set initial selected commit
+  useEffect(() => {
+    if (commits.length > 0 && !selectedHash) {
+      setSelectedHash(commits[0].hash);
+    }
+  }, [commits, selectedHash]);
+
+  // Filter commits based on search query
+  const filteredCommits = useMemo(() => {
+    if (!searchQuery.trim()) return commits;
+    const q = searchQuery.toLowerCase().trim();
+    return commits.filter(
+      (c) =>
+        c.message.toLowerCase().includes(q) ||
+        c.author.toLowerCase().includes(q) ||
+        c.shortHash.toLowerCase().includes(q) ||
+        c.hash.toLowerCase().includes(q) ||
+        c.refs?.some((r) => r.toLowerCase().includes(q))
+    );
+  }, [commits, searchQuery]);
+
+  // Measure dynamic positions of each commit node so lines never break
+  const containerRef = useRef<HTMLDivElement>(null);
+  const rowsContainerRef = useRef<HTMLDivElement>(null);
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const headerRefs = useRef<Record<string, HTMLDivElement | null>>({});
+  const [nodePositions, setNodePositions] = useState<Record<string, number>>({});
+  const [totalHeight, setTotalHeight] = useState<number>(800);
+
+  // Infinite scroll intersection observer
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel || !hasMore || isLoadingMore || searchQuery.trim()) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          handleLoadMore();
+        }
+      },
+      { root: containerRef.current, threshold: 0.1 }
+    );
+
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [hasMore, isLoadingMore, searchQuery, handleLoadMore]);
+
+  const measurePositions = useCallback(() => {
+    if (!containerRef.current || !rowsContainerRef.current) return;
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const scrollTop = containerRef.current.scrollTop;
+    const newPositions: Record<string, number> = {};
+
+    filteredCommits.forEach((commit, idx) => {
+      const el = headerRefs.current[commit.hash];
+      if (el) {
+        const rect = el.getBoundingClientRect();
+        newPositions[commit.hash] = rect.top + rect.height / 2 - containerRect.top + scrollTop;
+      } else {
+        newPositions[commit.hash] = idx * 60 + 20;
+      }
+    });
+
+    setNodePositions(newPositions);
+    const contentH = rowsContainerRef.current.offsetHeight;
+    setTotalHeight(Math.max(contentH, containerRef.current.clientHeight, 600));
+  }, [filteredCommits]);
+
+  useLayoutEffect(() => {
+    measurePositions();
+    const rafId = requestAnimationFrame(() => {
+      measurePositions();
+    });
+    return () => cancelAnimationFrame(rafId);
+  }, [measurePositions, filteredCommits, fileDiffs, expandedFiles, isGraphMode]);
+
+  useEffect(() => {
+    const el = rowsContainerRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver(() => {
+      measurePositions();
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [measurePositions]);
+
+  // Lane calculations
+  const laneMap = useMemo(() => computeCommitLanes(filteredCommits), [filteredCommits]);
+  const maxLane = useMemo(() => {
+    let max = 0;
+    laneMap.forEach((l) => {
+      if (l > max) max = l;
+    });
+    return max;
+  }, [laneMap]);
+
+  const laneWidth = 18;
+  const paddingLeft = 16;
+  const graphWidth = isGraphMode ? (maxLane + 1) * laneWidth + paddingLeft * 2 : 36;
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    if (onRefresh) {
+      await onRefresh();
+    }
+    setTimeout(() => setIsRefreshing(false), 600);
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 bg-canvas/80 backdrop-blur-xs flex items-center justify-center p-0 lg:p-5"
+      onClick={onClose}
+      role="dialog"
+      aria-modal="true"
+    >
+      <div
+        className="bg-paper border-ink/20 shadow-2xl flex flex-col overflow-hidden
+          w-full h-full rounded-none border-0
+          lg:w-[min(96vw,980px)] lg:h-[88vh] lg:rounded-xl lg:border
+          pt-[env(safe-area-inset-top,0px)] lg:pt-0"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <Header
+          isGraphMode={isGraphMode}
+          onToggleMode={setIsGraphMode}
+          searchQuery={searchQuery}
+          onSearchChange={setSearchQuery}
+          onRefresh={handleRefresh}
+          onClose={onClose}
+          isRefreshing={isRefreshing}
+          totalCommits={filteredCommits.length}
+          totalCount={totalCount}
+        />
+
+        {/* Commits Container with Unified Continuous SVG Canvas */}
+        <div
+          ref={containerRef}
+          className="flex-1 overflow-y-auto scrollbar-overlay-container relative select-text"
+        >
+          {filteredCommits.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-20 text-ink/40 font-mono text-xs">
+              No matching commits found.
+            </div>
+          ) : (
+            <div className="relative min-h-full pb-8">
+              {/* Continuous Graph Canvas (Single unbroken SVG spanning the whole scroll list) */}
+              <GraphCanvas
+                commits={filteredCommits}
+                nodePositions={nodePositions}
+                selectedHash={selectedHash}
+                isGraphMode={isGraphMode}
+                laneWidth={laneWidth}
+                paddingLeft={paddingLeft}
+                totalHeight={totalHeight}
+              />
+
+              {/* Commit Rows */}
+              <div
+                ref={rowsContainerRef}
+                className="flex flex-col relative z-20"
+                style={{ paddingLeft: `${graphWidth}px` }}
+              >
+                {filteredCommits.map((commit) => (
+                  <CommitRow
+                    key={commit.hash}
+                    commit={commit}
+                    isSelected={selectedHash === commit.hash}
+                    isGraphMode={isGraphMode}
+                    onSelect={(c) => setSelectedHash(c.hash)}
+                    onAction={handleCommitAction}
+                    onToggleFile={handleToggleFile}
+                    isExpandedFile={(h, f) => expandedFiles.has(`${h}:${f}`)}
+                    isLoadingFile={(h, f) => loadingFiles.has(`${h}:${f}`)}
+                    fileDiffs={fileDiffs}
+                    headerRef={(el) => {
+                      headerRefs.current[commit.hash] = el;
+                    }}
+                  />
+                ))}
+
+                {/* Lazy Load Sentinel & Controls */}
+                <div ref={sentinelRef} className="pt-3 pb-4 px-4 flex items-center justify-center">
+                  {isLoadingMore ? (
+                    <div className="flex items-center gap-2 text-xs text-ink/60 font-mono py-2">
+                      <Loader2 size={14} className="animate-spin text-info" />
+                      <span>Loading more commits...</span>
+                    </div>
+                  ) : hasMore && !searchQuery.trim() ? (
+                    <button
+                      type="button"
+                      onClick={handleLoadMore}
+                      className="px-3 py-1.5 text-xs font-mono text-ink/70 hover:text-ink bg-ink/5 hover:bg-ink/10 rounded-md border border-ink/10 transition-colors cursor-pointer"
+                    >
+                      Load more commits...
+                    </button>
+                  ) : filteredCommits.length > 10 ? (
+                    <div className="text-[11px] font-mono text-ink/40 py-2">
+                      End of commit history ({filteredCommits.length} commits)
+                    </div>
+                  ) : null}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/git-panel/index.tsx

@@ -0,0 +1,326 @@
+
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { useFetcher } from '@/client/lib/router/fetcher';
+import type { GitChange } from '@/shared/types';
+import { BranchPromptModal, ConfirmActionModal, GitOutputModal } from '@/client/components/workspace/git-panel/Modals';
+import { GitCommitBox } from '@/client/components/workspace/git-panel/CommitBox';
+import { GitBranchToolbar } from '@/client/components/workspace/git-panel/BranchToolbar';
+import { GitRepoHeader } from '@/client/components/workspace/git-panel/RepoHeader';
+import { GitChangesList } from '@/client/components/workspace/git-panel/ChangesList';
+import { ToastStack } from '@/client/components/common/ToastStack';
+import { useToasts } from '@/client/hooks/ui/toasts';
+import { useSessionState } from '@/client/hooks/workspace/session-state';
+import { usePanelRefresh, useFileMutationRefresh } from '@/client/hooks/workspace/panel-refresh';
+import { REPO_DISCOVERY_POLL_MS } from '@/shared/lib/workspace/refresh-cadence';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+
+interface GitPanelProps {
+  className?: string;
+  enabled?: boolean;
+  rootPath?: string;
+  refreshKey?: number;
+}
+
+export function GitPanel({ className = '', enabled = true, rootPath, refreshKey = 0 }: GitPanelProps) {
+  const fetcher = useFetcher<{ changes: GitChange[], branch: string, branches: string[], remoteBranches?: string[], repos: string[], reposPending?: boolean, activeRepo: string, syncCount?: { ahead: number, behind: number } }>();
+  const actionFetcher = useFetcher<{ success: boolean, type?: string, data?: any, error?: string }>();
+
+  const [storedActiveRepo, setStoredActiveRepo, activeRepoReady] = useSessionState<string>('git.activeRepo', '.');
+  const activeRepo = fetcher.data?.activeRepo || storedActiveRepo || '.';
+
+  const loadRepo = (repo?: string) => {
+    if (!enabled) return;
+    const targetRepo = repo !== undefined ? repo : storedActiveRepo;
+    const params = new URLSearchParams();
+    if (rootPath) params.set('root', rootPath);
+    if (targetRepo && targetRepo !== '.') params.set('repo', targetRepo);
+    params.set('t', String(Date.now()));
+    fetcher.load(`/api/fs/git?${params.toString()}`);
+  };
+  
+  const [message, setMessage] = useSessionState<string>('git.commitDraft', '');
+  const [viewMode, setViewMode] = useSessionState<'flat' | 'tree'>('git.viewMode', 'flat');
+  
+  const [showOptions, setShowOptions] = useState(false);
+  const optionsRef = useRef<HTMLDivElement>(null);
+
+  const [showRepoMenu, setShowRepoMenu] = useState(false);
+  const repoRef = useRef<HTMLDivElement>(null);
+
+  const [showBranchMenu, setShowBranchMenu] = useState(false);
+  const branchRef = useRef<HTMLDivElement>(null);
+
+  // Custom modal states
+  const [confirmModal, setConfirmModal] = useState<{ type: string, file?: string, message: string } | null>(null);
+  const [branchPrompt, setBranchPrompt] = useState(false);
+  const [newBranchName, setNewBranchName] = useState('');
+  const newBranchInputRef = useRef<HTMLInputElement>(null);
+  
+  // History and Graph states
+  const [viewingOutput, setViewingOutput] = useState<{ title: string, data: any[] } | null>(null);
+  const [mounted, setMounted] = useState(false);
+
+  const { toasts, pushToast, dismissToast } = useToasts();
+
+  // Background nested-repo discovery polling: the loader returns immediately
+  // with the root status and `reposPending`; we poll the lightweight
+  // `?reposOnly=1` endpoint until the discoverer finishes, then refresh.
+  const [extraRepos, setExtraRepos] = useState<string[] | null>(null);
+  const [pollingRepos, setPollingRepos] = useState(false);
+  const [rescanningRepos, setRescanningRepos] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!activeRepoReady) return;
+    loadRepo(storedActiveRepo);
+  }, [refreshKey, rootPath, enabled, activeRepoReady]);
+
+  // Auto refresh: keep the change list in step with external mutations
+  // (terminal commits, agent edits) that never bump `refreshKey`. `loadRepo`
+  // re-reads via `fetcher.load`, whose `t` param busts the cache; a load
+  // already in flight is ignored by the loader so polls cannot pile up.
+  usePanelRefresh(() => loadRepo(storedActiveRepo), enabled && activeRepoReady);
+  // Agent edits/commits land between poll ticks: re-read right after a
+  // file-mutating tool finishes so the change list tracks the AI's work.
+  useFileMutationRefresh(() => loadRepo(storedActiveRepo), enabled && activeRepoReady);
+
+  useEffect(() => {
+    if (fetcher.data?.activeRepo && fetcher.data.activeRepo !== storedActiveRepo) {
+      setStoredActiveRepo(fetcher.data.activeRepo);
+    }
+  }, [fetcher.data?.activeRepo, storedActiveRepo, setStoredActiveRepo]);
+
+  useEffect(() => {
+    if (fetcher.data?.reposPending) setPollingRepos(true);
+  }, [fetcher.data]);
+
+  // A forced rescan may finish before the polling interval kicks in; when that
+  // happens the loader returns the fresh repo list synchronously.
+  useEffect(() => {
+    if (
+      rescanningRepos &&
+      fetcher.data &&
+      !fetcher.data.reposPending &&
+      Array.isArray(fetcher.data.repos)
+    ) {
+      setExtraRepos(fetcher.data.repos);
+      setRescanningRepos(false);
+    }
+  }, [fetcher.data, rescanningRepos]);
+
+  useEffect(() => {
+    if (!pollingRepos) return;
+    const params = new URLSearchParams({ reposOnly: '1' });
+    if (rootPath) params.set('root', rootPath);
+    const id = setInterval(async () => {
+      const data = await fetch(`/api/fs/git?${params.toString()}`).then(r => r.json()).catch(() => null);
+      if (data && !data.reposPending && Array.isArray(data.repos)) {
+        setExtraRepos(data.repos);
+        setPollingRepos(false);
+        setRescanningRepos(false);
+        loadRepo(storedActiveRepo);
+      }
+    }, REPO_DISCOVERY_POLL_MS);
+    return () => clearInterval(id);
+  }, [pollingRepos, rootPath, storedActiveRepo]);
+
+  // Focus input when branch prompt opens
+  useEffect(() => {
+    if (branchPrompt && newBranchInputRef.current) {
+      newBranchInputRef.current.focus();
+    }
+  }, [branchPrompt]);
+
+  // Reload after action completes
+  useEffect(() => {
+    if (actionFetcher.state === 'idle' && actionFetcher.data) {
+      if (actionFetcher.data.type === 'history') {
+        setViewingOutput({ title: 'Commit History', data: actionFetcher.data.data || [] });
+      } else if (actionFetcher.data.type === 'graph') {
+        setViewingOutput({ title: 'Git Graph', data: actionFetcher.data.data || [] });
+      } else if (actionFetcher.data.success) {
+        loadRepo(activeRepo);
+      } else {
+        pushToast(actionFetcher.data.error || 'Git operation failed');
+      }
+    }
+  }, [actionFetcher.state, actionFetcher.data]);
+
+  useOnClickOutside(optionsRef, () => setShowOptions(false));
+  useOnClickOutside(repoRef, () => setShowRepoMenu(false));
+  useOnClickOutside(branchRef, () => setShowBranchMenu(false));
+
+  const handleAction = (actionType: string, file?: string, additionalData?: any) => {
+    if (actionType === 'revert') {
+      setConfirmModal({ type: actionType, file, message: `Are you sure you want to discard changes in ${file}?` });
+      return;
+    }
+    
+    if (actionType === 'revert_all') {
+      setConfirmModal({ type: actionType, message: 'Are you sure you want to discard ALL unstaged changes? This cannot be undone.' });
+      return;
+    }
+
+    executeAction(actionType, file, additionalData);
+  };
+
+  const executeAction = (actionType: string, file?: string, additionalData?: any) => {
+    const formData = new FormData();
+    formData.append('actionType', actionType);
+    formData.append('repo', activeRepo);
+    if (rootPath) formData.append('root', rootPath);
+    if (file) formData.append('file', file);
+    if (additionalData) {
+      Object.entries(additionalData).forEach(([key, val]) => formData.append(key, val as string));
+    }
+    
+    actionFetcher.submit(formData, { method: 'POST', action: '/api/fs/git' });
+
+    if (actionType === 'commit') {
+      setMessage('');
+    }
+  };
+
+  const branch = fetcher.data?.branch || 'main';
+  const branches = fetcher.data?.branches || ['main'];
+  const remoteBranches = fetcher.data?.remoteBranches || [];
+  const repos = extraRepos ?? (fetcher.data?.repos || ['.']);
+  const changes = fetcher.data?.changes || [];
+  const isLoading = fetcher.state === 'loading' || actionFetcher.state !== 'idle';
+
+  const stagedChanges = changes.filter(c => {
+    const status = c.status;
+    return status && status[0] !== ' ' && status[0] !== '?';
+  });
+
+  const refreshRepos = () => {
+    if (!enabled || pollingRepos || rescanningRepos) return;
+    setExtraRepos(repos);
+    setRescanningRepos(true);
+    const params = new URLSearchParams({ rescan: '1' });
+    if (rootPath) params.set('root', rootPath);
+    if (activeRepo !== '.') params.set('repo', activeRepo);
+    params.set('t', String(Date.now()));
+    fetcher.load(`/api/fs/git?${params.toString()}`);
+  };
+
+  if (!enabled) {
+    return (
+      <div className={`flex flex-col h-full bg-paper items-center justify-center text-ink/40 ${className}`}>
+        <span className="text-xs font-mono">No session selected</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex flex-col h-full bg-paper relative ${className}`}>
+      {mounted && (
+        <>
+          <ConfirmActionModal 
+            modal={confirmModal}
+            onClose={() => setConfirmModal(null)}
+            onConfirm={() => {
+              if (confirmModal) {
+                executeAction(confirmModal.type, confirmModal.file);
+                setConfirmModal(null);
+              }
+            }}
+          />
+          <BranchPromptModal 
+            isOpen={branchPrompt}
+            branchName={newBranchName}
+            inputRef={newBranchInputRef}
+            onChange={setNewBranchName}
+            onClose={() => {
+              setBranchPrompt(false);
+              setNewBranchName('');
+            }}
+            onCreate={() => {
+              if (newBranchName.trim()) {
+                executeAction('create_branch', undefined, { branch: newBranchName.trim() });
+                setBranchPrompt(false);
+                setNewBranchName('');
+              }
+            }}
+          />
+          <GitOutputModal 
+            output={viewingOutput}
+            onClose={() => setViewingOutput(null)}
+            onRefresh={() => {
+              if (viewingOutput) {
+                executeAction(viewingOutput.title.toLowerCase().includes('graph') ? 'graph' : 'history');
+              }
+            }}
+            onExecuteAction={(actionType, file, extra) => executeAction(actionType, file, extra)}
+            rootPath={rootPath}
+            activeRepo={activeRepo}
+          />
+        </>
+      )}
+
+      <ToastStack toasts={toasts} onDismiss={dismissToast} />
+
+      {/* Repo Switcher Header */}
+      <GitRepoHeader 
+        repoRef={repoRef}
+        showRepoMenu={showRepoMenu}
+        setShowRepoMenu={setShowRepoMenu}
+        activeRepo={activeRepo}
+        repos={repos}
+        isLoading={isLoading}
+        rootPath={rootPath}
+        reposScanning={pollingRepos || rescanningRepos}
+        onSelectRepo={(r) => {
+          setStoredActiveRepo(r);
+          loadRepo(r);
+        }}
+        onRefresh={() => loadRepo(activeRepo)}
+        onRefreshRepos={refreshRepos}
+      />
+      
+      {/* Branch & View Mode Toolbar */}
+      <GitBranchToolbar 
+        branchRef={branchRef}
+        showBranchMenu={showBranchMenu}
+        setShowBranchMenu={setShowBranchMenu}
+        branch={branch}
+        branches={branches}
+        remoteBranches={remoteBranches}
+        onCheckout={(b: string) => executeAction('checkout', undefined, { branch: b })}
+        onOpenBranchPrompt={() => setBranchPrompt(true)}
+        optionsRef={optionsRef}
+        showOptions={showOptions}
+        setShowOptions={setShowOptions}
+        onHistory={() => executeAction('history')}
+        onGraph={() => executeAction('graph')}
+        viewMode={viewMode}
+        setViewMode={setViewMode}
+        isBusy={isLoading}
+        syncCount={fetcher.data?.syncCount}
+        onSync={() => executeAction('sync')}
+      />
+
+      {/* Commit Box */}
+      <GitCommitBox 
+        message={message}
+        hasStagedChanges={stagedChanges.length > 0}
+        isBusy={isLoading}
+        onChangeMessage={setMessage}
+        onCommit={() => executeAction('commit', undefined, { message })}
+      />
+      
+      {/* Changes List / Tree */}
+      <GitChangesList
+        changes={changes}
+        isLoading={isLoading}
+        viewMode={viewMode}
+        repo={activeRepo}
+        rootPath={rootPath}
+        onAction={handleAction}
+      />
+    </div>
+  );
+}

package/src/client/components/workspace/model-dropdown/Footer.tsx

@@ -0,0 +1,21 @@
+
+export function ModelDropdownFooter() {
+  return (
+    <div className="flex items-center justify-between px-3 py-1.5 border-t border-ink/10 bg-canvas/60 text-[10px] text-ink/50 font-mono select-none">
+      <div className="flex items-center space-x-3">
+        <span className="flex items-center space-x-1">
+          <span className="text-ink/70">↑ ↓</span>
+          <span>navigate</span>
+        </span>
+        <span className="flex items-center space-x-1">
+          <span className="text-ink/70">Tab</span>
+          <span>switch agent</span>
+        </span>
+        <span className="flex items-center space-x-1">
+          <span className="text-ink/70">← →</span>
+          <span>thinking</span>
+        </span>
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/model-dropdown/Header.tsx

@@ -0,0 +1,50 @@
+import { Plus, Search, X } from 'lucide-preact';
+
+interface ModelDropdownHeaderProps {
+  search: string;
+  onSearchChange: (value: string) => void;
+  onAddProvider?: () => void;
+}
+
+export function ModelDropdownHeader({
+  search,
+  onSearchChange,
+  onAddProvider,
+}: ModelDropdownHeaderProps) {
+  return (
+    <div className="flex flex-col border-b border-ink/10 bg-canvas/40">
+      {/* Top Add New Provider Action Button */}
+      <button
+        type="button"
+        onClick={onAddProvider}
+        className="w-full flex items-center space-x-2 px-3 py-2 text-xs text-ink/70 hover:text-ink hover:bg-ink/5 transition-colors text-left font-medium cursor-pointer border-b border-ink/5"
+      >
+        <Plus size={14} className="text-ink/60" />
+        <span>Add new provider</span>
+      </button>
+
+      {/* Search Input */}
+      <div className="p-2 flex items-center bg-canvas/60">
+        <Search size={13} className="text-ink/40 mr-2 flex-shrink-0" />
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => onSearchChange(e.currentTarget.value)}
+          placeholder="Search models"
+          className="bg-transparent border-none focus:outline-none w-full text-ink placeholder-ink/40 text-xs font-sans"
+          autoFocus
+        />
+        {search && (
+          <button
+            type="button"
+            onClick={() => onSearchChange('')}
+            className="p-0.5 text-ink/40 hover:text-ink transition-colors cursor-pointer"
+            title="Clear search"
+          >
+            <X size={12} />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}