orbital-command 0.2.0 → 1.0.0

package/src/components/config/AgentCreateDialog.tsx

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

package/src/components/config/AgentEditor.tsx

@@ -1,175 +0,0 @@
-import { useState, useMemo } from 'react';
-import { Bot, Code2, Shield, Wrench, Search, Zap } from 'lucide-react';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
-
-interface AgentEditorProps {
-  frontmatter: Record<string, string>;
-  setFrontmatterField: (key: string, value: string) => void;
-  body: string;
-  setBody: (value: string) => void;
-  filePath: string;
-}
-
-const TEAM_COLORS: Record<string, { bg: string; text: string; label: string }> = {
-  'red-team':   { bg: 'bg-red-500/15',    text: 'text-red-400',    label: 'Red Team' },
-  'blue-team':  { bg: 'bg-cyan-500/15',   text: 'text-cyan-400',   label: 'Blue Team' },
-  'green-team': { bg: 'bg-green-500/15',  text: 'text-green-400',  label: 'Green Team' },
-};
-
-function detectTeam(filePath: string): { bg: string; text: string; label: string } | null {
-  const lower = filePath.toLowerCase();
-  for (const [key, style] of Object.entries(TEAM_COLORS)) {
-    if (lower.includes(key)) return style;
-  }
-  return null;
-}
-
-/** Parse auto-trigger patterns from agent markdown body */
-function parseAutoTriggers(body: string): string[] {
-  const triggers: string[] = [];
-  const lines = body.split('\n');
-  let inTriggerSection = false;
-  for (const line of lines) {
-    if (/auto[- ]?trigger/i.test(line) || /auto[- ]?invoke/i.test(line)) {
-      inTriggerSection = true;
-      continue;
-    }
-    if (inTriggerSection && line.trim().startsWith('-')) {
-      triggers.push(line.trim().replace(/^-\s*/, ''));
-    } else if (inTriggerSection && line.trim() === '') {
-      // blank line continues
-    } else if (inTriggerSection && !line.trim().startsWith('-')) {
-      inTriggerSection = false;
-    }
-  }
-  return triggers;
-}
-
-export function AgentEditor({ frontmatter, setFrontmatterField, body, setBody, filePath }: AgentEditorProps) {
-  const [rawMode, setRawMode] = useState(false);
-  const team = useMemo(() => detectTeam(filePath), [filePath]);
-  const triggers = useMemo(() => parseAutoTriggers(body), [body]);
-
-  if (rawMode) {
-    return (
-      <div className="space-y-2">
-        <div className="flex items-center justify-between">
-          <span className="text-xxs font-medium uppercase tracking-wider text-muted-foreground">
-            Raw Markdown
-          </span>
-          <Button variant="ghost" size="sm" onClick={() => setRawMode(false)} className="text-[10px] h-6">
-            Structured View
-          </Button>
-        </div>
-        <textarea
-          value={body}
-          onChange={(e) => setBody(e.target.value)}
-          className={cn(
-            'w-full min-h-[300px] resize-y rounded border border-border bg-surface p-3',
-            'font-mono text-xs text-foreground leading-relaxed',
-            'outline-none focus:border-accent-blue/50 transition-colors',
-          )}
-          spellCheck={false}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-4">
-      {/* Identity */}
-      <div className="space-y-2">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <Bot className="h-3.5 w-3.5 text-muted-foreground" />
-            <span className="text-xxs font-medium uppercase tracking-wider text-muted-foreground">
-              Agent Identity
-            </span>
-          </div>
-          <Button variant="ghost" size="sm" onClick={() => setRawMode(true)} className="text-[10px] h-6">
-            <Code2 className="mr-1 h-3 w-3" /> Raw
-          </Button>
-        </div>
-
-        <div className="grid gap-2">
-          {Object.keys(frontmatter).map((key) => (
-            <div key={key} className="flex items-center gap-2">
-              <label className="w-28 shrink-0 text-right text-xxs text-muted-foreground">
-                {key}
-              </label>
-              <input
-                value={frontmatter[key] ?? ''}
-                onChange={(e) => setFrontmatterField(key, e.target.value)}
-                className={cn(
-                  'flex-1 rounded border border-border bg-surface px-2 py-1 text-xs text-foreground',
-                  'outline-none focus:border-accent-blue/50 transition-colors',
-                )}
-              />
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Team & metadata */}
-      <div className="flex flex-wrap gap-2">
-        {team && (
-          <Badge className={cn('text-[10px]', team.bg, team.text, 'border-0')}>
-            <Shield className="mr-1 h-3 w-3" /> {team.label}
-          </Badge>
-        )}
-        {frontmatter.blocking === 'true' && (
-          <Badge variant="destructive" className="text-[10px]">
-            Blocking
-          </Badge>
-        )}
-        {frontmatter.priority && (
-          <Badge variant="secondary" className="text-[10px]">
-            Priority: {frontmatter.priority}
-          </Badge>
-        )}
-      </div>
-
-      {/* Auto-triggers */}
-      {triggers.length > 0 && (
-        <div className="space-y-1">
-          <div className="flex items-center gap-2">
-            <Zap className="h-3 w-3 text-muted-foreground" />
-            <span className="text-xxs font-medium uppercase tracking-wider text-muted-foreground">
-              Auto-Invoke Triggers
-            </span>
-          </div>
-          <div className="space-y-0.5 pl-5">
-            {triggers.map((t, i) => (
-              <div key={i} className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                <Search className="h-2.5 w-2.5 shrink-0" />
-                <span>{t}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Body */}
-      <div className="space-y-2">
-        <div className="flex items-center gap-2">
-          <Wrench className="h-3 w-3 text-muted-foreground" />
-          <span className="text-xxs font-medium uppercase tracking-wider text-muted-foreground">
-            Agent Definition
-          </span>
-        </div>
-        <textarea
-          value={body}
-          onChange={(e) => setBody(e.target.value)}
-          className={cn(
-            'w-full min-h-[200px] resize-y rounded border border-border bg-surface p-3',
-            'font-mono text-xs text-foreground leading-relaxed',
-            'outline-none focus:border-accent-blue/50 transition-colors',
-          )}
-          spellCheck={false}
-        />
-      </div>
-    </div>
-  );
-}