orbital-command 0.2.0 → 1.0.0

package/src/components/ScopeCard.tsx

@@ -1,234 +0,0 @@
-import { useDraggable } from '@dnd-kit/core';
-import { CSS } from '@dnd-kit/utilities';
-import { Lightbulb, Sparkles, AlertTriangle, Undo2, X } from 'lucide-react';
-import type { Scope, CardDisplayConfig } from '@/types';
-import { Card, CardContent } from '@/components/ui/card';
-import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
-import { cn, formatScopeId } from '@/lib/utils';
-import { useActiveDispatches } from '@/hooks/useActiveDispatches';
-import { useWorkflow } from '@/hooks/useWorkflow';
-
-interface ScopeCardProps {
-  scope: Scope;
-  onClick?: (scope: Scope) => void;
-  isDragOverlay?: boolean;
-  cardDisplay?: CardDisplayConfig;
-  dimmed?: boolean;
-}
-
-const PRIORITY_COLOR: Record<string, string> = {
-  critical: 'border-ask-red text-ask-red',
-  high:     'border-warning-amber text-warning-amber',
-  medium:   'border-accent-blue text-accent-blue',
-  low:      'border-muted-foreground/30 text-muted-foreground',
-};
-
-const CATEGORY_COLOR: Record<string, string> = {
-  'feature':        'border-category-feature text-category-feature',
-  'bugfix':         'border-category-bugfix text-category-bugfix',
-  'refactor':       'border-category-refactor text-category-refactor',
-  'infrastructure': 'border-category-infrastructure text-category-infrastructure',
-  'docs':           'border-category-docs text-category-docs',
-};
-
-const CATEGORY_BORDER: Record<string, string> = {
-  'feature':        'border-l-2 border-l-category-feature scope-cat-feature',
-  'bugfix':         'border-l-2 border-l-category-bugfix scope-cat-bugfix',
-  'refactor':       'border-l-2 border-l-category-refactor scope-cat-refactor',
-  'infrastructure': 'border-l-2 border-l-category-infrastructure scope-cat-infrastructure',
-  'docs':           'border-l-2 border-l-category-docs scope-cat-docs',
-};
-
-const GHOST = 'inline-block rounded border px-1.5 py-0 text-[10px] uppercase bg-transparent';
-
-interface AbandonedPopoverProps {
-  scopeId: number;
-  info: { from_status: string | null };
-  onRecover: (scopeId: number, fromStatus: string) => Promise<void>;
-  onDismiss: (scopeId: number) => Promise<void>;
-}
-
-function AbandonedPopover({ scopeId, info, onRecover, onDismiss }: AbandonedPopoverProps) {
-  return (
-    <Popover>
-      <PopoverTrigger asChild onClick={(e) => e.stopPropagation()}>
-        <button className="flex items-center gap-0.5 text-amber-500 hover:text-amber-400 transition-colors">
-          <AlertTriangle className="h-3 w-3" />
-        </button>
-      </PopoverTrigger>
-      <PopoverContent
-        className="w-56 p-3"
-        side="top"
-        align="end"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <p className="text-xs text-muted-foreground mb-2">
-          Session ended without completing work.
-        </p>
-        <div className="flex flex-col gap-1.5">
-          {info.from_status && (
-            <button
-              className="flex items-center gap-1.5 text-xs px-2 py-1.5 rounded bg-amber-500/10 text-amber-500 hover:bg-amber-500/20 transition-colors"
-              onClick={() => onRecover(scopeId, info.from_status!)}
-            >
-              <Undo2 className="h-3 w-3" />
-              Revert to {info.from_status}
-            </button>
-          )}
-          <button
-            className="flex items-center gap-1.5 text-xs px-2 py-1.5 rounded bg-muted text-muted-foreground hover:bg-muted/80 transition-colors"
-            onClick={() => onDismiss(scopeId)}
-          >
-            <X className="h-3 w-3" />
-            Keep here
-          </button>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-function abbreviateEffort(raw: string): string {
-  const s = raw.toLowerCase().trim();
-  const minMatch = s.match(/^~?(\d+)(?:\s*-\s*\d+)?\s*min/);
-  if (minMatch) return `${minMatch[1]}M`;
-  const hrMatch = s.match(/^~?(\d+(?:\.\d+)?)(?:\s*-\s*\d+(?:\.\d+)?)?\s*hour/);
-  if (hrMatch) return `${hrMatch[1]}H`;
-  const parenMatch = s.match(/\((\d+(?:\.\d+)?)(?:\s*-\s*\d+(?:\.\d+)?)?\s*(hour|min)/);
-  if (parenMatch) return `${parenMatch[1]}${parenMatch[2].startsWith('h') ? 'H' : 'M'}`;
-  if (s.includes('large') || s.includes('multi')) return 'LG';
-  if (s.includes('medium') || s.includes('half')) return 'MD';
-  if (s.includes('small')) return 'SM';
-  if (s === 'tbd') return 'TBD';
-  return 'TBD';
-}
-
-export function ScopeCard({ scope, onClick, isDragOverlay, cardDisplay, dimmed }: ScopeCardProps) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    isDragging,
-  } = useDraggable({
-    id: scope.id,
-    disabled: isDragOverlay || dimmed,
-  });
-
-  const style = transform
-    ? { transform: CSS.Translate.toString(transform) }
-    : undefined;
-
-  const { engine } = useWorkflow();
-  const { activeScopes, abandonedScopes, recoverScope, dismissAbandoned } = useActiveDispatches();
-  const entryPointId = engine.getEntryPoint().id;
-  const isIdea = scope.status === entryPointId;
-  const isGhost = isIdea && !!scope.is_ghost;
-  const isDispatched = !isIdea && activeScopes.has(scope.id);
-  const abandonedInfo = !isIdea ? abandonedScopes.get(scope.id) : undefined;
-  const isAbandoned = !!abandonedInfo && !isDispatched;
-
-  return (
-    <Card
-      ref={setNodeRef}
-      style={style}
-      className={cn(
-        'scope-card cursor-grab transition-[colors,opacity] duration-200 hover:bg-surface-light active:cursor-grabbing',
-        isGhost
-          ? 'scope-card-ghost ghost-shimmer opacity-70'
-          : isIdea
-          ? 'border-l-2 border-dashed border-l-warning-amber/60'
-          : scope.category ? CATEGORY_BORDER[scope.category] : '',
-        isDispatched && 'scope-card-dispatched',
-        isAbandoned && 'scope-card-abandoned',
-        isDragging && 'opacity-30',
-        dimmed && !isDragging && 'opacity-30 cursor-default',
-      )}
-      onClick={() => {
-        if (!isDragging) onClick?.(scope);
-      }}
-      {...attributes}
-      {...listeners}
-    >
-      <CardContent className="px-2.5 py-1.5">
-        {/* Header: ID/idea label + badges */}
-        <div className="mb-1.5 flex items-center gap-1.5">
-          {isGhost ? (
-            <span className="flex items-center gap-1 text-xxs text-purple-400">
-              <Sparkles className="h-3 w-3" />
-              ai suggestion
-            </span>
-          ) : isIdea ? (
-            <span className="flex items-center gap-1 text-xxs text-warning-amber">
-              <Lightbulb className="h-3 w-3" />
-              idea
-            </span>
-          ) : (
-            <span className="font-mono text-xxs text-muted-foreground flex items-center gap-1">
-              {isDispatched && <span className="h-1.5 w-1.5 rounded-full bg-pink-500 dispatch-pulse" />}
-              {isAbandoned && <span className="h-1.5 w-1.5 rounded-full bg-amber-500" />}
-              {formatScopeId(scope.id)}
-            </span>
-          )}
-          {!isIdea && (
-            <div className="ml-auto flex items-center gap-1">
-              {isAbandoned && (
-                <AbandonedPopover
-                  scopeId={scope.id}
-                  info={abandonedInfo}
-                  onRecover={recoverScope}
-                  onDismiss={dismissAbandoned}
-                />
-              )}
-              {scope.effort_estimate && cardDisplay?.effort !== false && (
-                <span className={cn(GHOST, 'effort-ghost border-muted-foreground/30 text-muted-foreground')}>
-                  {abbreviateEffort(scope.effort_estimate)}
-                </span>
-              )}
-              {scope.category && cardDisplay?.category !== false && (
-                <span className={cn(
-                  GHOST,
-                  CATEGORY_COLOR[scope.category] ?? 'border-muted-foreground/30 text-muted-foreground'
-                )}>
-                  {scope.category}
-                </span>
-              )}
-              {scope.priority && cardDisplay?.priority !== false && (
-                <span className={cn(
-                  GHOST,
-                  PRIORITY_COLOR[scope.priority] ?? 'border-muted-foreground/30 text-muted-foreground'
-                )}>
-                  {scope.priority}
-                </span>
-              )}
-            </div>
-          )}
-        </div>
-
-        {/* Title */}
-        <h3 className="text-xs font-light leading-snug line-clamp-2">
-          {scope.title}
-        </h3>
-
-        {/* Tags (ideas don't have tags) */}
-        {!isIdea && scope.tags.length > 0 && cardDisplay?.tags !== false && (
-          <div className="mt-2 flex flex-wrap gap-1">
-            {scope.tags.slice(0, 3).map((tag) => (
-              <span
-                key={tag}
-                className="glass-pill inline-block rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground"
-              >
-                {tag}
-              </span>
-            ))}
-            {scope.tags.length > 3 && (
-              <span className="text-[10px] text-muted-foreground">
-                +{scope.tags.length - 3}
-              </span>
-            )}
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-}

package/src/components/ScopeDetailModal.tsx

@@ -1,255 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import { ExternalLink, X as XIcon, Plus } from 'lucide-react';
-import {
-  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription,
-} from '@/components/ui/dialog';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Separator } from '@/components/ui/separator';
-import { MarkdownRenderer } from '@/components/MarkdownRenderer';
-import { SessionPanel } from '@/components/SessionPanel';
-import { useScopeSessions } from '@/hooks/useScopeSessions';
-import { useWorkflow } from '@/hooks/useWorkflow';
-import { formatScopeId } from '@/lib/utils';
-import type { Scope } from '@/types';
-import { PRIORITY_OPTIONS, EFFORT_BUCKETS, CATEGORY_OPTIONS } from '@/types';
-
-interface ScopeDetailModalProps {
-  scope: Scope | null;
-  open: boolean;
-  onClose: () => void;
-}
-
-interface EditableFields {
-  title: string;
-  status: string;
-  priority: string;
-  effort_estimate: string;
-  category: string;
-  tags: string[];
-  blocked_by: number[];
-  blocks: number[];
-}
-
-const SELECT_CLS = 'h-6 rounded border border-border bg-muted/30 px-1.5 text-xxs text-foreground focus:outline-none focus:ring-1 focus:ring-primary/50';
-
-function fieldsFromScope(scope: Scope): EditableFields {
-  return {
-    title: scope.title, status: scope.status,
-    priority: scope.priority ?? '', effort_estimate: scope.effort_estimate ?? '',
-    category: scope.category ?? '', tags: [...scope.tags],
-    blocked_by: [...scope.blocked_by], blocks: [...scope.blocks],
-  };
-}
-
-function fieldsEqual(a: EditableFields, b: EditableFields): boolean {
-  return a.title === b.title && a.status === b.status &&
-    a.priority === b.priority && a.effort_estimate === b.effort_estimate &&
-    a.category === b.category && JSON.stringify(a.tags) === JSON.stringify(b.tags) &&
-    JSON.stringify(a.blocked_by) === JSON.stringify(b.blocked_by) &&
-    JSON.stringify(a.blocks) === JSON.stringify(b.blocks);
-}
-
-function DepEditor({ label, ids, onRemove, onAdd }: {
-  label: string; ids: number[];
-  onRemove: (id: number) => void; onAdd: (val: string) => void;
-}) {
-  const [editing, setEditing] = useState(false);
-  const [val, setVal] = useState('');
-  return (
-    <span className="inline-flex items-center gap-1">
-      {label}:
-      {ids.map((id) => (
-        <span key={id} className="group inline-flex items-center gap-0.5 rounded bg-muted px-1 py-0.5">
-          {formatScopeId(id)}
-          <button onClick={() => onRemove(id)} className="opacity-0 group-hover:opacity-100 transition-opacity">
-            <XIcon className="h-2.5 w-2.5" />
-          </button>
-        </span>
-      ))}
-      {editing ? (
-        <input autoFocus className="h-5 w-12 rounded bg-muted/50 px-1 text-xxs border border-primary/30 focus:outline-none"
-          placeholder="ID" value={val}
-          onChange={(e) => setVal(e.target.value)}
-          onKeyDown={(e) => { if (e.key === 'Enter') { onAdd(val); setEditing(false); setVal(''); } if (e.key === 'Escape') setEditing(false); }}
-          onBlur={() => setEditing(false)} />
-      ) : (
-        <button onClick={() => setEditing(true)} className="hover:text-foreground transition-colors"><Plus className="h-3 w-3" /></button>
-      )}
-    </span>
-  );
-}
-
-export function ScopeDetailModal({ scope, open, onClose }: ScopeDetailModalProps) {
-  const { engine } = useWorkflow();
-  const { sessions, loading: sessionsLoading } = useScopeSessions(scope?.id ?? null);
-  const [fields, setFields] = useState<EditableFields | null>(null);
-  const [saved, setSaved] = useState<EditableFields | null>(null);
-  const [saving, setSaving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [tagInput, setTagInput] = useState('');
-
-  const isDirty = fields && saved ? !fieldsEqual(fields, saved) : false;
-
-  useEffect(() => {
-    if (scope && open) {
-      const f = fieldsFromScope(scope);
-      setFields(f); setSaved(f); setError(null); setTagInput('');
-    }
-  }, [scope?.id, scope?.updated_at, open]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const save = useCallback(async () => {
-    if (!scope || !fields || !isDirty || saving) return;
-    setSaving(true); setError(null);
-    try {
-      const payload: Record<string, unknown> = {};
-      if (saved) {
-        if (fields.title !== saved.title) payload.title = fields.title;
-        if (fields.status !== saved.status) payload.status = fields.status;
-        if (fields.priority !== saved.priority) payload.priority = fields.priority || null;
-        if (fields.effort_estimate !== saved.effort_estimate) payload.effort_estimate = fields.effort_estimate || null;
-        if (fields.category !== saved.category) payload.category = fields.category || null;
-        if (JSON.stringify(fields.tags) !== JSON.stringify(saved.tags)) payload.tags = fields.tags;
-        if (JSON.stringify(fields.blocked_by) !== JSON.stringify(saved.blocked_by)) payload.blocked_by = fields.blocked_by;
-        if (JSON.stringify(fields.blocks) !== JSON.stringify(saved.blocks)) payload.blocks = fields.blocks;
-      }
-      const res = await fetch(`/api/orbital/scopes/${scope.id}`, {
-        method: 'PATCH', headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(payload),
-      });
-      if (!res.ok) {
-        const body = await res.json().catch(() => ({ error: 'Save failed' }));
-        setError(body.error ?? `HTTP ${res.status}`); return;
-      }
-      setSaved({ ...fields });
-    } catch { setError('Network error — could not save'); }
-    finally { setSaving(false); }
-  }, [scope, fields, saved, isDirty, saving]);
-
-  function handleClose() {
-    if (isDirty && window.confirm('Save changes before closing?')) { save().then(onClose); return; }
-    onClose();
-  }
-
-  function update(partial: Partial<EditableFields>) {
-    setFields((prev) => prev ? { ...prev, ...partial } : prev); setError(null);
-  }
-
-  function addTag(tag: string) {
-    const t = tag.trim().toLowerCase();
-    if (!t || !fields) return;
-    if (!fields.tags.includes(t)) update({ tags: [...fields.tags, t] });
-    setTagInput('');
-  }
-
-  function addDep(field: 'blocked_by' | 'blocks', value: string) {
-    const num = parseInt(value, 10);
-    if (isNaN(num) || num <= 0 || !fields) return;
-    if (!fields[field].includes(num)) update({ [field]: [...fields[field], num] });
-  }
-
-  if (!scope || !fields) return null;
-
-  const validTargets = engine.getValidTargets(scope.status);
-  const statusOptions = [scope.status, ...validTargets.filter((t) => t !== scope.status)];
-
-  return (
-    <Dialog open={open} onOpenChange={(isOpen) => { if (!isOpen) handleClose(); }}>
-      <DialogContent className="max-w-[min(72rem,calc(100vw_-_2rem))] h-[85vh] flex flex-col p-0 gap-0 overflow-hidden">
-        <DialogHeader className="px-4 pt-3 pb-2">
-          <div className="flex items-start gap-3 pr-8">
-            <span className="font-mono text-xxs text-muted-foreground mt-1.5">{formatScopeId(scope.id)}</span>
-            <div className="min-w-0 flex-1">
-              <DialogTitle asChild>
-                <input className="w-full bg-transparent text-sm font-normal text-foreground border-none focus:outline-none focus:ring-0 placeholder:text-muted-foreground leading-tight"
-                  value={fields.title} onChange={(e) => update({ title: e.target.value })} placeholder="Scope title..." />
-              </DialogTitle>
-              <DialogDescription asChild>
-                <div className="mt-2 flex flex-wrap items-center gap-2">
-                  <select className={SELECT_CLS} value={fields.status} onChange={(e) => update({ status: e.target.value })}>
-                    {statusOptions.map((s) => <option key={s} value={s}>{s}</option>)}
-                  </select>
-                  <select className={SELECT_CLS} value={fields.priority} onChange={(e) => update({ priority: e.target.value })}>
-                    <option value="">priority</option>
-                    {PRIORITY_OPTIONS.map((p) => <option key={p} value={p}>{p}</option>)}
-                  </select>
-                  <select className={SELECT_CLS} value={fields.effort_estimate} onChange={(e) => update({ effort_estimate: e.target.value })}>
-                    <option value="">effort</option>
-                    {EFFORT_BUCKETS.map((e) => <option key={e} value={e}>{e}</option>)}
-                  </select>
-                  <select className={SELECT_CLS} value={fields.category} onChange={(e) => update({ category: e.target.value })}>
-                    <option value="">category</option>
-                    {CATEGORY_OPTIONS.map((c) => <option key={c} value={c}>{c}</option>)}
-                  </select>
-                  {fields.tags.map((tag) => (
-                    <span key={tag} className="group inline-flex items-center gap-0.5 glass-pill rounded bg-muted px-1.5 py-0.5 text-xxs text-muted-foreground">
-                      {tag}
-                      <button onClick={() => update({ tags: fields.tags.filter((t) => t !== tag) })} className="opacity-0 group-hover:opacity-100 transition-opacity">
-                        <XIcon className="h-2.5 w-2.5" />
-                      </button>
-                    </span>
-                  ))}
-                  <input className="h-5 w-16 rounded bg-transparent text-xxs text-muted-foreground placeholder:text-muted-foreground/50 border-none focus:outline-none"
-                    placeholder="+tag" value={tagInput} onChange={(e) => setTagInput(e.target.value)}
-                    onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addTag(tagInput); } }}
-                    onBlur={() => { if (tagInput.trim()) addTag(tagInput); }} />
-                </div>
-              </DialogDescription>
-            </div>
-          </div>
-          <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-xxs text-muted-foreground">
-            <DepEditor label="Blocked by" ids={fields.blocked_by}
-              onRemove={(id) => update({ blocked_by: fields.blocked_by.filter((d) => d !== id) })}
-              onAdd={(v) => addDep('blocked_by', v)} />
-            <DepEditor label="Blocks" ids={fields.blocks}
-              onRemove={(id) => update({ blocks: fields.blocks.filter((d) => d !== id) })}
-              onAdd={(v) => addDep('blocks', v)} />
-            <span className="flex items-center gap-1">
-              <ExternalLink className="h-3 w-3" />
-              <span className="truncate max-w-[300px]">{scope.file_path}</span>
-            </span>
-          </div>
-        </DialogHeader>
-
-        <Separator />
-
-        {error && (
-          <div className="mx-4 mt-2 flex items-center gap-2 rounded border border-red-500/30 bg-red-500/10 px-3 py-1.5 text-xs text-red-400">
-            <span className="flex-1">{error}</span>
-            <button onClick={() => setError(null)} className="shrink-0 hover:text-red-200 transition-colors"><XIcon className="h-3.5 w-3.5" /></button>
-          </div>
-        )}
-
-        <div className="flex flex-1 min-h-0">
-          <div className="flex-[6] min-w-0 border-r bg-[#0a0a12]">
-            <ScrollArea className="h-full">
-              <div className="px-6 py-5">
-                {scope.raw_content ? <MarkdownRenderer content={scope.raw_content} /> : (
-                  <p className="text-xs text-muted-foreground italic">No content available</p>
-                )}
-              </div>
-            </ScrollArea>
-          </div>
-          <div className="flex-[4] min-w-0">
-            <div className="flex h-full flex-col p-4">
-              <SessionPanel sessions={sessions} loading={sessionsLoading} />
-            </div>
-          </div>
-        </div>
-
-        {isDirty && (
-          <div className="mx-4 mb-2 flex items-center gap-2 rounded border border-border bg-card px-3 py-2">
-            <Badge variant="outline">Unsaved changes</Badge>
-            <div className="flex-1" />
-            <Button variant="ghost" size="sm" onClick={() => { setFields(saved); setError(null); }}>Discard</Button>
-            <Button size="sm" onClick={() => save()} disabled={saving}>
-              {saving ? 'Saving...' : 'Save'}
-            </Button>
-            {error && <span className="text-xs text-destructive ml-2">{error}</span>}
-          </div>
-        )}
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/ScopeFilterBar.tsx

@@ -1,152 +0,0 @@
-import { FilterChip } from './FilterChip';
-import { SearchInput } from './SearchInput';
-import { Badge } from '@/components/ui/badge';
-import { X } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import { useTheme } from '@/hooks/useTheme';
-import type { FilterField, ScopeFilterState } from '@/types';
-import type { FilterOption } from '@/hooks/useScopeFilters';
-import type { SearchMode } from '@/hooks/useSearch';
-
-interface ScopeFilterBarProps {
-  filters: ScopeFilterState;
-  optionsWithCounts: Record<FilterField, FilterOption[]>;
-  onToggle: (field: FilterField, value: string) => void;
-  onClearField: (field: FilterField) => void;
-  onClearAll: () => void;
-  hasActiveFilters: boolean;
-  searchQuery?: string;
-  searchMode?: SearchMode;
-  searchIsStale?: boolean;
-  onSearchChange?: (query: string) => void;
-  onSearchModeChange?: (mode: SearchMode) => void;
-}
-
-const CHIP_CONFIG: { field: FilterField; label: string; glowClass: string }[] = [
-  { field: 'priority', label: 'Priority', glowClass: 'glow-amber' },
-  { field: 'category', label: 'Category', glowClass: 'glow-blue' },
-  { field: 'tags', label: 'Tags', glowClass: 'glow-blue' },
-  { field: 'effort', label: 'Effort', glowClass: '' },
-  { field: 'dependencies', label: 'Deps', glowClass: 'glow-red' },
-];
-
-const FIELD_LABEL: Record<FilterField, string> = {
-  priority: 'Priority',
-  category: 'Category',
-  tags: 'Tag',
-  effort: 'Effort',
-  dependencies: 'Dep',
-};
-
-const CATEGORY_COLOR: Record<string, string> = {
-  feature:        '#536dfe',
-  bugfix:         '#ff1744',
-  refactor:       '#8B5CF6',
-  infrastructure: '#40c4ff',
-  docs:           '#6B7280',
-};
-
-export function ScopeFilterBar({
-  filters,
-  optionsWithCounts,
-  onToggle,
-  onClearField,
-  onClearAll,
-  hasActiveFilters,
-  searchQuery = '',
-  searchMode = 'filter',
-  searchIsStale,
-  onSearchChange,
-  onSearchModeChange,
-}: ScopeFilterBarProps) {
-  const { neonGlass } = useTheme();
-
-  // Group active values by field
-  const activeFields: { field: FilterField; values: { value: string; label: string }[] }[] = [];
-  for (const { field } of CHIP_CONFIG) {
-    if (filters[field].size === 0) continue;
-    const values: { value: string; label: string }[] = [];
-    for (const value of filters[field]) {
-      const opt = optionsWithCounts[field].find((o) => o.value === value);
-      values.push({ value, label: opt?.label ?? value });
-    }
-    activeFields.push({ field, values });
-  }
-
-  return (
-    <div className="mb-4 space-y-2">
-      {/* Chip row */}
-      <div className="flex flex-wrap items-center gap-2">
-        {CHIP_CONFIG.map(({ field, label, glowClass }) => (
-          <FilterChip
-            key={field}
-            field={field}
-            label={label}
-            options={optionsWithCounts[field]}
-            selected={filters[field]}
-            onToggle={onToggle}
-            glowClass={glowClass}
-          />
-        ))}
-
-        {hasActiveFilters && (
-          <button
-            onClick={onClearAll}
-            className="ml-2 text-xxs text-muted-foreground hover:text-foreground transition-colors"
-          >
-            Clear all
-          </button>
-        )}
-
-        {onSearchChange && onSearchModeChange && (
-          <SearchInput
-            query={searchQuery}
-            mode={searchMode}
-            isStale={searchIsStale}
-            onQueryChange={onSearchChange}
-            onModeChange={onSearchModeChange}
-          />
-        )}
-      </div>
-
-      {/* Active filter summary — field label + individual value badges + clear-field */}
-      {activeFields.length > 0 && (
-        <div className="flex flex-wrap items-center gap-2">
-          {activeFields.map(({ field, values }) => (
-            <div key={field} className="flex items-center gap-1">
-              <span className="text-[10px] text-muted-foreground capitalize">{FIELD_LABEL[field]}:</span>
-              {values.map(({ value, label }) => {
-                const isCat = field === 'category';
-                return (
-                  <Badge
-                    key={value}
-                    variant={isCat ? 'outline' : 'secondary'}
-                    className={cn(
-                      'gap-0.5 capitalize cursor-pointer hover:bg-secondary/60 py-0 px-1 text-[10px] font-light',
-                      neonGlass && !isCat && 'glass-pill',
-                      neonGlass && isCat && 'bg-[rgba(var(--neon-blue),0.08)]'
-                    )}
-                    style={isCat ? { borderColor: CATEGORY_COLOR[value] } : undefined}
-                    onClick={() => onToggle(field, value)}
-                  >
-                    {label}
-                    <X className="h-2 w-2 opacity-60" />
-                  </Badge>
-                );
-              })}
-              {values.length > 1 && (
-                <button
-                  onClick={() => onClearField(field)}
-                  className="rounded p-0.5 text-muted-foreground hover:bg-surface-light hover:text-foreground"
-                  aria-label={`Clear all ${FIELD_LABEL[field]} filters`}
-                >
-                  <X className="h-2.5 w-2.5" />
-                </button>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}