orbital-command 0.1.0

package/src/components/VersionBadge.tsx

@@ -0,0 +1,139 @@
+import { RefreshCw, Download, Check, AlertCircle, GitBranch, GitCommit, Loader2 } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { useVersion } from '@/hooks/useVersion';
+import { cn } from '@/lib/utils';
+
+export function VersionBadge() {
+  const {
+    version,
+    updateAvailable,
+    behindCount,
+    updateStage,
+    updateError,
+    loading,
+    checkForUpdate,
+    performUpdate,
+  } = useVersion();
+
+  if (loading) return null;
+  if (!version) {
+    return (
+      <button className="version-badge flex items-center gap-1.5 rounded-lg px-2 py-1 text-[10px] font-mono text-muted-foreground/50">
+        <span>v?</span>
+      </button>
+    );
+  }
+
+  const isWorking = updateStage === 'checking' || updateStage === 'pulling' || updateStage === 'installing';
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button className="relative cursor-pointer">
+          <Badge
+            variant={updateAvailable ? 'warning' : 'success'}
+            className="version-badge font-mono text-[10px] transition-colors"
+          >
+            v{version.version}
+          </Badge>
+          {updateAvailable && (
+            <span className="version-pulse-dot absolute -top-1 -right-1 h-2 w-2 rounded-full bg-emerald-400" />
+          )}
+        </button>
+      </PopoverTrigger>
+
+      <PopoverContent
+        side="top"
+        align="end"
+        sideOffset={8}
+        className="w-64 filter-popover-glass"
+      >
+        <div className="space-y-3">
+          {/* Version header */}
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-medium text-foreground">Orbital Command</span>
+            <Badge variant="outline" className="font-mono text-[10px]">
+              v{version.version}
+            </Badge>
+          </div>
+
+          {/* Git info */}
+          <div className="space-y-1.5 text-[11px] text-muted-foreground">
+            <div className="flex items-center gap-1.5">
+              <GitCommit className="h-3 w-3" />
+              <span className="font-mono">{version.commitSha}</span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <GitBranch className="h-3 w-3" />
+              <span className="font-mono">{version.branch}</span>
+            </div>
+          </div>
+
+          {/* Update status */}
+          {updateAvailable && updateStage !== 'done' && (
+            <div className="rounded-md border border-emerald-500/20 bg-emerald-500/5 px-2 py-1.5 text-[11px] text-emerald-400">
+              {behindCount} commit{behindCount !== 1 ? 's' : ''} behind remote
+            </div>
+          )}
+
+          {updateStage === 'done' && (
+            <div className="flex items-center gap-1.5 rounded-md border border-emerald-500/20 bg-emerald-500/5 px-2 py-1.5 text-[11px] text-emerald-400">
+              <Check className="h-3 w-3" />
+              Updated. Restart server to apply.
+            </div>
+          )}
+
+          {updateStage === 'error' && (
+            <div className="flex items-start gap-1.5 rounded-md border border-destructive/20 bg-destructive/5 px-2 py-1.5 text-[11px] text-destructive">
+              <AlertCircle className="h-3 w-3 mt-0.5 shrink-0" />
+              <span>{updateError ?? 'An unknown error occurred'}</span>
+            </div>
+          )}
+
+          {isWorking && (
+            <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
+              <Loader2 className="h-3 w-3 animate-spin" />
+              <span>
+                {updateStage === 'checking' && 'Checking for updates...'}
+                {updateStage === 'pulling' && 'Pulling latest changes...'}
+                {updateStage === 'installing' && 'Installing dependencies...'}
+              </span>
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex gap-2 pt-1">
+            <button
+              onClick={checkForUpdate}
+              disabled={isWorking}
+              className={cn(
+                'flex flex-1 items-center justify-center gap-1.5 rounded-md border border-border px-2 py-1 text-[11px]',
+                'text-muted-foreground hover:text-foreground hover:bg-surface-light transition-colors',
+                'disabled:opacity-40 disabled:cursor-not-allowed',
+              )}
+            >
+              <RefreshCw className={cn('h-3 w-3', updateStage === 'checking' && 'animate-spin')} />
+              Check
+            </button>
+            {updateAvailable && updateStage !== 'done' && (
+              <button
+                onClick={performUpdate}
+                disabled={isWorking}
+                className={cn(
+                  'flex flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-[11px]',
+                  'bg-emerald-500/10 border border-emerald-500/20 text-emerald-400',
+                  'hover:bg-emerald-500/20 transition-colors',
+                  'disabled:opacity-40 disabled:cursor-not-allowed',
+                )}
+              >
+                <Download className="h-3 w-3" />
+                Update
+              </button>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/ViewModeSelector.tsx

@@ -0,0 +1,114 @@
+import { Columns3, Rows3 } from 'lucide-react';
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import type { ViewMode, SwimGroupField } from '@/types';
+
+interface ViewModeSelectorProps {
+  viewMode: ViewMode;
+  groupField: SwimGroupField;
+  onViewModeChange: (mode: ViewMode) => void;
+  onGroupFieldChange: (field: SwimGroupField) => void;
+}
+
+const VIEW_MODES: { value: ViewMode; label: string; Icon: typeof Columns3 }[] = [
+  { value: 'kanban', label: 'Kanban', Icon: Columns3 },
+  { value: 'swimlane', label: 'Swimlane', Icon: Rows3 },
+];
+
+const GROUP_FIELDS: { value: SwimGroupField; label: string }[] = [
+  { value: 'priority', label: 'Priority' },
+  { value: 'category', label: 'Category' },
+  { value: 'tags', label: 'Tags' },
+  { value: 'effort', label: 'Effort' },
+  { value: 'dependencies', label: 'Dependencies' },
+];
+
+export function ViewModeSelector({
+  viewMode,
+  groupField,
+  onViewModeChange,
+  onGroupFieldChange,
+}: ViewModeSelectorProps) {
+  const ActiveIcon = viewMode === 'swimlane' ? Rows3 : Columns3;
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="gap-1.5 backdrop-blur-sm bg-white/[0.03] border-white/10"
+          aria-label="Toggle view mode"
+        >
+          <ActiveIcon className="h-3 w-3" />
+          {viewMode === 'swimlane' ? 'Swimlane' : 'Kanban'}
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent align="end" className="filter-popover-glass !bg-transparent w-44">
+        {/* View mode selection */}
+        <div className="space-y-0.5">
+          <p className="px-2 pb-1 text-[10px] uppercase tracking-wider text-muted-foreground">View</p>
+          {VIEW_MODES.map(({ value, label, Icon }) => (
+            <button
+              key={value}
+              onClick={() => onViewModeChange(value)}
+              className={cn(
+                'flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs transition-colors',
+                'hover:bg-white/[0.06]',
+                viewMode === value && 'bg-white/[0.06]',
+              )}
+            >
+              <span
+                className={cn(
+                  'flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-full border',
+                  viewMode === value ? 'border-primary bg-primary' : 'border-white/15',
+                )}
+              >
+                {viewMode === value && (
+                  <span className="h-1.5 w-1.5 rounded-full bg-primary-foreground" />
+                )}
+              </span>
+              <Icon className="h-3 w-3 text-muted-foreground" />
+              <span className={cn(viewMode === value && 'text-foreground')}>{label}</span>
+            </button>
+          ))}
+        </div>
+
+        {/* Group-by field — only visible in swimlane mode */}
+        {viewMode === 'swimlane' && (
+          <>
+            <div className="my-2 border-t border-white/[0.06]" />
+            <div className="space-y-0.5">
+              <p className="px-2 pb-1 text-[10px] uppercase tracking-wider text-muted-foreground">Group by</p>
+              {GROUP_FIELDS.map(({ value, label }) => (
+                <button
+                  key={value}
+                  onClick={() => onGroupFieldChange(value)}
+                  className={cn(
+                    'flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs transition-colors',
+                    'hover:bg-white/[0.06]',
+                    groupField === value && 'bg-white/[0.06]',
+                  )}
+                >
+                  <span
+                    className={cn(
+                      'flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-full border',
+                      groupField === value ? 'border-primary bg-primary' : 'border-white/15',
+                    )}
+                  >
+                    {groupField === value && (
+                      <span className="h-1.5 w-1.5 rounded-full bg-primary-foreground" />
+                    )}
+                  </span>
+                  <span className={cn(groupField === value && 'text-foreground')}>{label}</span>
+                </button>
+              ))}
+            </div>
+          </>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/config/AgentChip.tsx

@@ -0,0 +1,53 @@
+import { Bot, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { ResolvedAgent } from '@/types';
+
+interface AgentChipProps {
+  agent: ResolvedAgent;
+  mode?: 'always-on' | 'review';
+  selected?: boolean;
+  onClick?: () => void;
+  onRemove?: () => void;
+}
+
+export function AgentChip({ agent, mode, selected, onClick, onRemove }: AgentChipProps) {
+  const color = agent.color || '#8B5CF6';
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      data-pipeline-path={agent.filePath ?? undefined}
+      className={cn(
+        'inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-[11px] font-medium transition-colors',
+        'hover:brightness-125 cursor-pointer',
+        selected && 'glow-selected-pulse',
+      )}
+      style={{
+        color,
+        borderColor: `${color}4D`,
+        backgroundColor: `${color}1A`,
+        ...(selected ? { '--glow-color': `${color}A0`, '--glow-color-wide': `${color}40` } as React.CSSProperties : {}),
+      }}
+    >
+      {agent.emoji ? (
+        <span className="text-xs">{agent.emoji}</span>
+      ) : (
+        <Bot className="h-3 w-3 shrink-0" />
+      )}
+      <span className="truncate max-w-[100px]">{agent.label}</span>
+      {mode === 'always-on' && (
+        <span className="ml-0.5 h-1.5 w-1.5 rounded-full bg-green-500 shrink-0" title="Auto-invoke" />
+      )}
+      {onRemove && (
+        <span
+          role="button"
+          onClick={(e) => { e.stopPropagation(); onRemove(); }}
+          className="ml-0.5 rounded-full p-0.5 hover:bg-red-500/20"
+        >
+          <X className="h-2.5 w-2.5" />
+        </span>
+      )}
+    </button>
+  );
+}

package/src/components/config/AgentCreateDialog.tsx

@@ -0,0 +1,321 @@
+import { useState, useCallback } from 'react';
+import { Plus, Bot, Shield, Eye, Wrench, Search, Sparkles } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+
+interface AgentCreateDialogProps {
+  onCreated: () => void;
+}
+
+interface Template {
+  id: string;
+  label: string;
+  icon: typeof Shield;
+  description: string;
+  scaffold: string;
+  defaultFolder: string;
+}
+
+const TEMPLATES: Template[] = [
+  {
+    id: 'security',
+    label: 'Security',
+    icon: Shield,
+    description: 'Adversarial security review agent',
+    defaultFolder: 'red-team',
+    scaffold: `# {name}
+
+{description}
+
+## Role
+
+You are a security-focused review agent. Your goal is to identify vulnerabilities, insecure patterns, and potential attack vectors in the code under review.
+
+## Auto-triggered for:
+- Security-sensitive file changes
+- Authentication/authorization code
+- Input handling and validation
+
+## Review Checklist
+- [ ] Input validation and sanitization
+- [ ] Authentication/authorization checks
+- [ ] Secrets and credential handling
+- [ ] SQL/command injection risks
+- [ ] XSS and CSRF protections
+`,
+  },
+  {
+    id: 'reliability',
+    label: 'Reliability',
+    icon: Eye,
+    description: 'Production reliability review agent',
+    defaultFolder: 'blue-team',
+    scaffold: `# {name}
+
+{description}
+
+## Role
+
+You are a reliability-focused review agent. Your goal is to ensure code changes are production-safe with proper error handling, observability, and graceful degradation.
+
+## Auto-triggered for:
+- Error handling changes
+- Service boundary code
+- Database operations
+
+## Review Checklist
+- [ ] Error handling completeness
+- [ ] Timeout and retry logic
+- [ ] Logging and observability
+- [ ] Graceful degradation
+`,
+  },
+  {
+    id: 'domain-expert',
+    label: 'Domain Expert',
+    icon: Search,
+    description: 'Domain-specific expertise agent',
+    defaultFolder: 'green-team',
+    scaffold: `# {name}
+
+{description}
+
+## Role
+
+You are a domain expert review agent. Your goal is to ensure code changes correctly implement business logic and domain-specific requirements.
+
+## Auto-triggered for:
+- Business logic changes
+- Domain model modifications
+- API contract changes
+
+## Review Checklist
+- [ ] Business rule correctness
+- [ ] Domain model integrity
+- [ ] API contract compliance
+`,
+  },
+  {
+    id: 'guardian',
+    label: 'Guardian',
+    icon: Wrench,
+    description: 'Code quality and standards agent',
+    defaultFolder: 'blue-team',
+    scaffold: `# {name}
+
+{description}
+
+## Role
+
+You are a code quality guardian agent. Your goal is to ensure code follows project conventions, maintains consistency, and upholds quality standards.
+
+## Auto-triggered for:
+- All code changes
+
+## Review Checklist
+- [ ] Code style and conventions
+- [ ] Test coverage
+- [ ] Documentation completeness
+- [ ] Performance implications
+`,
+  },
+  {
+    id: 'custom',
+    label: 'Custom',
+    icon: Sparkles,
+    description: 'Start from a blank template',
+    defaultFolder: '',
+    scaffold: `# {name}
+
+{description}
+
+## Role
+
+Describe this agent's role and responsibilities.
+
+## Review Checklist
+- [ ] Add review criteria here
+`,
+  },
+];
+
+export function AgentCreateDialog({ onCreated }: AgentCreateDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [selectedTemplate, setSelectedTemplate] = useState<string>('security');
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [folder, setFolder] = useState('');
+  const [creating, setCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const template = TEMPLATES.find(t => t.id === selectedTemplate) ?? TEMPLATES[0];
+
+  const handleCreate = useCallback(async () => {
+    if (!name.trim()) {
+      setError('Agent name is required');
+      return;
+    }
+
+    const slug = name.trim().toLowerCase().replace(/\s+/g, '-');
+    const folderPath = folder.trim() || template.defaultFolder;
+    const filePath = folderPath ? `${folderPath}/${slug}.md` : `${slug}.md`;
+
+    const content = `---\nname: ${name.trim()}\ndescription: ${description.trim() || template.description}\n---\n${template.scaffold
+      .replace(/\{name\}/g, name.trim())
+      .replace(/\{description\}/g, description.trim() || template.description)}`;
+
+    setCreating(true);
+    setError(null);
+
+    try {
+      const res = await fetch('/api/orbital/config/agents/file', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: filePath, content }),
+      });
+      if (!res.ok) {
+        const json = await res.json().catch(() => ({ error: 'Create failed' }));
+        throw new Error(json.error ?? `HTTP ${res.status}`);
+      }
+      setOpen(false);
+      setName('');
+      setDescription('');
+      setFolder('');
+      onCreated();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Create failed');
+    } finally {
+      setCreating(false);
+    }
+  }, [name, description, folder, template, onCreated]);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm" className="gap-1.5">
+          <Plus className="h-3.5 w-3.5" />
+          <Bot className="h-3.5 w-3.5" />
+          New Agent
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[480px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Bot className="h-5 w-5" /> Create Agent
+          </DialogTitle>
+          <DialogDescription>
+            Choose a template and configure your new review agent.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-2">
+          {/* Template selector */}
+          <div className="space-y-2">
+            <label className="text-xs font-medium text-muted-foreground">Template</label>
+            <div className="grid grid-cols-5 gap-1.5">
+              {TEMPLATES.map(t => {
+                const Icon = t.icon;
+                return (
+                  <button
+                    key={t.id}
+                    type="button"
+                    onClick={() => {
+                      setSelectedTemplate(t.id);
+                      setFolder(t.defaultFolder);
+                    }}
+                    className={cn(
+                      'flex flex-col items-center gap-1 rounded-md border p-2 text-[10px] transition-colors',
+                      selectedTemplate === t.id
+                        ? 'border-primary bg-primary/10 text-primary'
+                        : 'border-border text-muted-foreground hover:border-muted-foreground/40',
+                    )}
+                  >
+                    <Icon className="h-4 w-4" />
+                    {t.label}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Name */}
+          <div className="space-y-1">
+            <label className="text-xs font-medium text-muted-foreground">Name</label>
+            <input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g., API Security Reviewer"
+              className={cn(
+                'w-full rounded border border-border bg-surface px-2.5 py-1.5 text-sm text-foreground',
+                'outline-none focus:border-accent-blue/50 transition-colors',
+              )}
+            />
+          </div>
+
+          {/* Description */}
+          <div className="space-y-1">
+            <label className="text-xs font-medium text-muted-foreground">Description</label>
+            <input
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder={template.description}
+              className={cn(
+                'w-full rounded border border-border bg-surface px-2.5 py-1.5 text-sm text-foreground',
+                'outline-none focus:border-accent-blue/50 transition-colors',
+              )}
+            />
+          </div>
+
+          {/* Folder */}
+          <div className="space-y-1">
+            <label className="text-xs font-medium text-muted-foreground">
+              Team Folder
+              <span className="ml-1 text-muted-foreground/50">(optional)</span>
+            </label>
+            <input
+              value={folder}
+              onChange={(e) => setFolder(e.target.value)}
+              placeholder={template.defaultFolder || 'root'}
+              className={cn(
+                'w-full rounded border border-border bg-surface px-2.5 py-1.5 text-sm text-foreground font-mono',
+                'outline-none focus:border-accent-blue/50 transition-colors',
+              )}
+            />
+            <div className="flex gap-1.5 mt-1">
+              {['red-team', 'blue-team', 'green-team'].map(f => (
+                <Badge
+                  key={f}
+                  variant={folder === f ? 'default' : 'secondary'}
+                  className="text-[10px] cursor-pointer"
+                  onClick={() => setFolder(f)}
+                >
+                  {f}
+                </Badge>
+              ))}
+            </div>
+          </div>
+
+          {error && (
+            <p className="text-xs text-destructive">{error}</p>
+          )}
+        </div>
+
+        <div className="flex justify-end gap-2 pt-2">
+          <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
+          <Button onClick={handleCreate} disabled={creating}>
+            {creating ? 'Creating...' : 'Create Agent'}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}