orbital-command 0.1.0

package/src/components/ScopeDetailModal.tsx

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

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

package/src/components/SearchInput.tsx

@@ -0,0 +1,102 @@
+import { useRef, useEffect, useCallback } from 'react';
+import { Search, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useTheme } from '@/hooks/useTheme';
+import type { SearchMode } from '@/hooks/useSearch';
+
+interface SearchInputProps {
+  query: string;
+  mode: SearchMode;
+  isStale?: boolean;
+  onQueryChange: (query: string) => void;
+  onModeChange: (mode: SearchMode) => void;
+}
+
+export function SearchInput({ query, mode, isStale, onQueryChange, onModeChange }: SearchInputProps) {
+  const { neonGlass } = useTheme();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Global `/` shortcut to focus search
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === '/' && !(e.target instanceof HTMLInputElement) && !(e.target instanceof HTMLTextAreaElement)) {
+        e.preventDefault();
+        inputRef.current?.focus();
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      if (query) {
+        onQueryChange('');
+      } else {
+        inputRef.current?.blur();
+      }
+    }
+  }, [query, onQueryChange]);
+
+  return (
+    <div className="flex items-center gap-1.5 ml-auto" role="search" aria-label="Search scopes">
+      {/* Search input */}
+      <div className={cn(
+        'flex items-center gap-1.5 rounded-md border px-2 py-1 backdrop-blur-sm bg-white/[0.03] border-white/10 transition-colors',
+        'focus-within:border-white/20',
+        neonGlass && 'focus-within:glow-blue',
+      )}>
+        <Search className={cn('h-3 w-3 shrink-0 text-muted-foreground', isStale && 'animate-pulse')} />
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={(e) => onQueryChange(e.target.value.slice(0, 100))}
+          onKeyDown={handleKeyDown}
+          placeholder="Search scopes..."
+          className="w-32 bg-transparent text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none"
+          aria-label="Search scopes"
+        />
+        {query && (
+          <button
+            onClick={() => onQueryChange('')}
+            className="shrink-0 text-muted-foreground hover:text-foreground transition-colors"
+            aria-label="Clear search"
+          >
+            <X className="h-3 w-3" />
+          </button>
+        )}
+      </div>
+
+      {/* Mode toggle */}
+      <div className={cn(
+        'flex rounded-md border backdrop-blur-sm bg-white/[0.03] border-white/10 overflow-hidden',
+      )}>
+        <button
+          onClick={() => onModeChange('filter')}
+          className={cn(
+            'px-2 py-1 text-[10px] transition-colors',
+            mode === 'filter'
+              ? 'bg-white/10 text-foreground'
+              : 'text-muted-foreground hover:text-foreground hover:bg-white/[0.04]',
+          )}
+          aria-pressed={mode === 'filter'}
+        >
+          Filter
+        </button>
+        <button
+          onClick={() => onModeChange('highlight')}
+          className={cn(
+            'px-2 py-1 text-[10px] transition-colors',
+            mode === 'highlight'
+              ? 'bg-white/10 text-foreground'
+              : 'text-muted-foreground hover:text-foreground hover:bg-white/[0.04]',
+          )}
+          aria-pressed={mode === 'highlight'}
+        >
+          Highlight
+        </button>
+      </div>
+    </div>
+  );
+}