orbital-command 0.2.0 → 1.0.0

package/src/views/AgentFeed.tsx

@@ -1,339 +0,0 @@
-import { useState, useMemo } from 'react';
-import { motion } from 'framer-motion';
-import { Bot, Filter } from 'lucide-react';
-import { formatDistanceToNow, format } from 'date-fns';
-import { useEvents } from '@/hooks/useEvents';
-import { useTheme } from '@/hooks/useTheme';
-import { AgentBadge } from '@/components/AgentBadge';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Separator } from '@/components/ui/separator';
-import { cn, formatScopeId } from '@/lib/utils';
-import type { OrbitalEvent } from '@/types';
-
-// Agent-related event types
-const AGENT_EVENT_TYPES = [
-  'AGENT_STARTED',
-  'AGENT_FINDING',
-  'AGENT_COMPLETED',
-  'AGENT_CONSENSUS',
-];
-
-const SEVERITY_CONFIG: Record<string, { color: string; label: string }> = {
-  blocker: { color: 'text-ask-red bg-[#ff174415]', label: 'BLOCKER' },
-  warning: { color: 'text-warning-amber bg-[#ffab0015]', label: 'WARNING' },
-  info: { color: 'text-accent-blue bg-[#06b6d415]', label: 'INFO' },
-  pass: { color: 'text-bid-green bg-[#00c85315]', label: 'PASS' },
-};
-
-const AGENTS = [
-  'all',
-  'attacker',
-  'chaos',
-  'solana-expert',
-  'frontend-designer',
-  'architect',
-  'rules-enforcer',
-] as const;
-
-const rowStagger = {
-  show: { transition: { staggerChildren: 0.02 } },
-};
-const rowItem = {
-  hidden: { opacity: 0, x: -8 },
-  show: { opacity: 1, x: 0, transition: { type: 'spring', stiffness: 400, damping: 30 } },
-};
-
-export function AgentFeed() {
-  const { events, loading } = useEvents({ limit: 200 });
-  const { neonGlass } = useTheme();
-  const [agentFilter, setAgentFilter] = useState<string>('all');
-  const [showAllEvents, setShowAllEvents] = useState(false);
-
-  // Filter to agent-related events or show all
-  const filteredEvents = useMemo(() => {
-    let filtered = events;
-
-    if (!showAllEvents) {
-      filtered = filtered.filter((e) => AGENT_EVENT_TYPES.includes(e.type));
-    }
-
-    if (agentFilter !== 'all') {
-      filtered = filtered.filter((e) => e.agent === agentFilter);
-    }
-
-    return filtered;
-  }, [events, agentFilter, showAllEvents]);
-
-  return (
-    <div className="flex flex-1 min-h-0 flex-col">
-      {/* Header */}
-      <div className="mb-4 flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <Bot className="h-4 w-4 text-primary" />
-          <h1 className="text-xl font-light">Agent Activity</h1>
-          {!loading && events.length > 0 && (
-            <div className="flex items-center gap-1.5">
-              <div className={cn('h-2 w-2 animate-pulse-dot rounded-full bg-bid-green', neonGlass && 'glow-green')} />
-              <span className="text-xs text-bid-green">Live</span>
-            </div>
-          )}
-        </div>
-        <Button
-          variant={showAllEvents ? 'default' : 'outline'}
-          size="sm"
-          onClick={() => setShowAllEvents(!showAllEvents)}
-        >
-          <Filter className="mr-1.5 h-3.5 w-3.5" />
-          {showAllEvents ? 'All Events' : 'Agent Only'}
-        </Button>
-      </div>
-
-      {/* Agent filter chips */}
-      <div className="mb-4 flex flex-wrap gap-1.5">
-        <button
-          key="all"
-          onClick={() => setAgentFilter('all')}
-          className={cn(
-            'inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xxs font-normal transition-colors cursor-pointer',
-            agentFilter === 'all'
-              ? 'bg-accent-blue/25 text-accent-blue ring-1 ring-accent-blue/40'
-              : 'bg-muted/50 text-muted-foreground hover:bg-muted',
-            neonGlass && agentFilter === 'all' && 'glow-blue'
-          )}
-        >
-          All Agents
-        </button>
-        {AGENTS.filter(a => a !== 'all').map((agent) => (
-          <AgentFilterChip
-            key={agent}
-            agent={agent}
-            active={agentFilter === agent}
-            onClick={() => setAgentFilter(agent)}
-            neonGlass={neonGlass}
-          />
-        ))}
-      </div>
-
-      <Separator className="mb-4" />
-
-      {/* Event feed */}
-      <ScrollArea className="flex-1">
-        {loading ? (
-          <div className="flex h-32 items-center justify-center">
-            <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-          </div>
-        ) : filteredEvents.length === 0 ? (
-          <Card>
-            <CardContent className="py-12 text-center">
-              <Bot className="mx-auto mb-3 h-10 w-10 text-muted-foreground/50" />
-              <p className="text-sm text-muted-foreground">
-                No agent activity yet. Events will appear here as agents are triggered.
-              </p>
-              <p className="mt-1 text-xs text-muted-foreground/60">
-                Edit a file matching an agent trigger pattern to see agents in action.
-              </p>
-            </CardContent>
-          </Card>
-        ) : neonGlass ? (
-          <motion.div
-            className="space-y-1 pr-4"
-            variants={rowStagger}
-            initial="hidden"
-            animate="show"
-          >
-            {filteredEvents.map((event) => (
-              <motion.div key={event.id} variants={rowItem}>
-                <EventRow event={event} />
-              </motion.div>
-            ))}
-          </motion.div>
-        ) : (
-          <div className="space-y-1 pr-4">
-            {filteredEvents.map((event) => (
-              <EventRow key={event.id} event={event} />
-            ))}
-          </div>
-        )}
-      </ScrollArea>
-    </div>
-  );
-}
-
-// ─── Event Row ─────────────────────────────────────────────
-
-function EventRow({ event }: { event: OrbitalEvent }) {
-  const data = event.data as Record<string, unknown>;
-  const severity = data.severity as string | undefined;
-  const severityConfig = severity ? SEVERITY_CONFIG[severity] : null;
-
-  return (
-    <div className="group flex items-start gap-3 rounded px-2.5 py-1.5 transition-colors hover:bg-surface-light animate-slide-up">
-      {/* Timestamp */}
-      <span className="mt-0.5 flex-shrink-0 font-mono text-xs text-muted-foreground/60">
-        {format(new Date(event.timestamp), 'HH:mm:ss')}
-      </span>
-
-      {/* Agent badge */}
-      <div className="flex-shrink-0">
-        {event.agent ? (
-          <AgentBadge agent={event.agent} showLabel={false} />
-        ) : (
-          <span className="inline-flex h-6 w-6 items-center justify-center text-xs">
-            {getEventIcon(event.type)}
-          </span>
-        )}
-      </div>
-
-      {/* Content */}
-      <div className="min-w-0 flex-1">
-        <div className="flex items-center gap-2">
-          <span className="text-xs font-normal">
-            {formatEventMessage(event)}
-          </span>
-          {severityConfig && (
-            <Badge
-              className={cn(
-                'text-[10px] px-1.5 py-0',
-                severityConfig.color
-              )}
-            >
-              {severityConfig.label}
-            </Badge>
-          )}
-        </div>
-
-        {/* Detail message */}
-        {'message' in data && data.message != null && (
-          <p className="mt-0.5 text-xxs text-muted-foreground line-clamp-2">
-            {String(data.message)}
-          </p>
-        )}
-
-        {/* File path */}
-        {'file' in data && data.file != null && (
-          <span className="mt-0.5 inline-block font-mono text-[10px] text-muted-foreground/60">
-            {String(data.file)}
-          </span>
-        )}
-
-        {/* Scope reference */}
-        {event.scope_id && (
-          <span className="ml-2 font-mono text-[10px] text-muted-foreground/60">
-            scope {formatScopeId(event.scope_id)}
-          </span>
-        )}
-      </div>
-
-      {/* Relative time */}
-      <span className="flex-shrink-0 text-[10px] text-muted-foreground/40 opacity-0 transition-opacity group-hover:opacity-100">
-        {formatDistanceToNow(new Date(event.timestamp), { addSuffix: true })}
-      </span>
-    </div>
-  );
-}
-
-function formatEventMessage(event: OrbitalEvent): string {
-  const data = event.data as Record<string, unknown>;
-
-  switch (event.type) {
-    case 'AGENT_STARTED':
-      return `${event.agent ?? 'Agent'} started reviewing`;
-    case 'AGENT_FINDING':
-      return `${event.agent ?? 'Agent'} found issue`;
-    case 'AGENT_COMPLETED':
-      return `${event.agent ?? 'Agent'} completed (${data.status ?? 'done'})`;
-    case 'AGENT_CONSENSUS':
-      return `Consensus: ${data.consensus ?? 'reached'}`;
-    case 'SESSION_START':
-      return 'Session started';
-    case 'SESSION_END':
-      return 'Session ended';
-    case 'SKILL_INVOKED':
-      return `Skill invoked: ${data.skill ?? 'unknown'}`;
-    case 'GATE_PASSED':
-      return `Gate passed: ${data.gate ?? 'unknown'}`;
-    case 'GATE_FAILED':
-      return `Gate failed: ${data.gate ?? 'unknown'}`;
-    case 'COMMIT_CREATED':
-      return `Commit: ${String(data.message ?? data.sha ?? '').slice(0, 50)}`;
-    case 'PR_CREATED':
-      return `PR #${data.number ?? '?'} created`;
-    case 'DEPLOY_STARTED':
-      return `Deploying to ${data.environment ?? 'unknown'}`;
-    case 'DEPLOY_HEALTHY':
-      return `Deploy healthy on ${data.environment ?? 'unknown'}`;
-    case 'SCOPE_STATUS_CHANGED':
-      return `Scope moved: ${data.from ?? '?'} → ${data.to ?? '?'}`;
-    case 'VIOLATION':
-      return `Violation: ${data.rule ?? 'unknown rule'} blocked`;
-    case 'OVERRIDE':
-      return `Override: ${data.rule ?? 'unknown rule'} (${data.reason ?? 'no reason'})`;
-    case 'COMMIT':
-      return `Scope commit: ${String(data.hash ?? '').slice(0, 7)} ${String(data.message ?? '').slice(0, 40)}`;
-    case 'SCOPE_TRANSITION':
-      return `Scope ${data.scope_name ?? '?'}: \u2192 ${data.to ?? '?'}`;
-    case 'PATTERN_DETECTED':
-      return `Pattern detected: ${data.rule ?? '?'} (confidence: ${data.confidence ?? '?'})`;
-    case 'RULE_PROPOSED':
-      return `Rule proposed: ${String(data.rule_text ?? '').slice(0, 50)}`;
-    default:
-      return event.type.replace(/_/g, ' ').toLowerCase();
-  }
-}
-
-// ─── Agent Filter Chip ──────────────────────────────────────
-
-const AGENT_CHIP_CONFIG: Record<string, { emoji: string; label: string; color: string; activeColor: string; glowClass: string }> = {
-  'attacker':          { emoji: '\u{1F5E1}\u{FE0F}', label: 'Attacker', color: 'text-agent-attacker', activeColor: 'bg-agent-attacker/25 ring-1 ring-agent-attacker/40', glowClass: 'glow-red' },
-  'chaos':             { emoji: '\u{1F4A5}', label: 'Chaos', color: 'text-agent-chaos', activeColor: 'bg-agent-chaos/25 ring-1 ring-agent-chaos/40', glowClass: 'glow-amber' },
-  'solana-expert':     { emoji: '\u{26D3}\u{FE0F}', label: 'Solana', color: 'text-agent-solana', activeColor: 'bg-agent-solana/25 ring-1 ring-agent-solana/40', glowClass: 'glow-purple' },
-  'frontend-designer': { emoji: '\u{1F3A8}', label: 'Frontend', color: 'text-agent-frontend', activeColor: 'bg-agent-frontend/25 ring-1 ring-agent-frontend/40', glowClass: 'glow-red' },
-  'architect':         { emoji: '\u{1F3D7}\u{FE0F}', label: 'Architect', color: 'text-agent-architect', activeColor: 'bg-agent-architect/25 ring-1 ring-agent-architect/40', glowClass: 'glow-blue' },
-  'rules-enforcer':    { emoji: '\u{1F4CB}', label: 'Rules', color: 'text-agent-rules', activeColor: 'bg-agent-rules/25 ring-1 ring-agent-rules/40', glowClass: '' },
-};
-
-function AgentFilterChip({ agent, active, onClick, neonGlass }: { agent: string; active: boolean; onClick: () => void; neonGlass: boolean }) {
-  const config = AGENT_CHIP_CONFIG[agent] ?? { emoji: '\u{1F916}', label: agent, color: 'text-muted-foreground', activeColor: 'bg-muted ring-1 ring-border', glowClass: '' };
-  return (
-    <button
-      onClick={onClick}
-      className={cn(
-        'inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xxs font-normal transition-colors cursor-pointer',
-        active
-          ? cn(config.color, config.activeColor, neonGlass && config.glowClass)
-          : cn('bg-muted/50 text-muted-foreground hover:bg-muted')
-      )}
-    >
-      <span>{config.emoji}</span>
-      <span>{config.label}</span>
-    </button>
-  );
-}
-
-function getEventIcon(type: string): string {
-  const icons: Record<string, string> = {
-    SESSION_START: '\u{1F7E2}',
-    SESSION_END: '\u{1F534}',
-    SKILL_INVOKED: '\u{1F527}',
-    GATE_PASSED: '\u2705',
-    GATE_FAILED: '\u274C',
-    COMMIT_CREATED: '\u{1F4BE}',
-    PR_CREATED: '\u{1F517}',
-    DEPLOY_STARTED: '\u{1F680}',
-    DEPLOY_HEALTHY: '\u{1F49A}',
-    DEPLOY_FAILED: '\u{1F4A5}',
-    BUILD_COMPLETED: '\u{1F3D7}\u{FE0F}',
-    TESTS_COMPLETED: '\u{1F9EA}',
-    SCOPE_STATUS_CHANGED: '\u{1F504}',
-    VIOLATION: '\u{1F6D1}',
-    OVERRIDE: '\u{26A0}\u{FE0F}',
-    COMMIT: '\u{1F4DD}',
-    SCOPE_TRANSITION: '\u{1F500}',
-    PATTERN_DETECTED: '\u{1F50D}',
-    RULE_PROPOSED: '\u{1F4CB}',
-  };
-  return icons[type] ?? '\u{1F4E1}';
-}

package/src/views/DeployPipeline.tsx

@@ -1,59 +0,0 @@
-import { Rocket } from 'lucide-react';
-import { Badge } from '@/components/ui/badge';
-import { usePipeline } from '@/hooks/usePipeline';
-import { EnvironmentStrip } from '@/components/EnvironmentStrip';
-import { PromotionQueue } from '@/components/PromotionQueue';
-import { DriftSidebar } from '@/components/DriftSidebar';
-import { DeployHistory } from '@/components/DeployHistory';
-
-export function DeployPipeline() {
-  const { drift, frequency, deployments, loading } = usePipeline();
-
-  if (loading) {
-    return (
-      <div className="flex h-64 items-center justify-center">
-        <div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex-1 min-h-0 overflow-y-auto">
-      {/* Header */}
-      <div className="mb-6 flex items-center gap-3">
-        <Rocket className="h-4 w-4 text-primary" />
-        <h1 className="text-xl font-light">Deploy Pipeline</h1>
-        {deployments.length > 0 && (
-          <Badge variant="secondary">
-            {deployments.length} deploys
-          </Badge>
-        )}
-      </div>
-
-      {/* Section 1: Environment Status Strip */}
-      {drift && (
-        <div className="mb-6">
-          <EnvironmentStrip drift={drift} />
-        </div>
-      )}
-
-      {/* Section 2 + 3: Promotion Queue + Sidebar */}
-      {drift && (
-        <div className="mb-6 grid gap-6 lg:grid-cols-3">
-          <PromotionQueue
-            devToStaging={drift.devToStaging}
-            stagingToMain={drift.stagingToMain}
-          />
-          <DriftSidebar
-            drift={drift}
-            frequency={frequency}
-            deployments={deployments}
-          />
-        </div>
-      )}
-
-      {/* Section 4: Deployment History */}
-      <DeployHistory deployments={deployments} />
-    </div>
-  );
-}