orbital-command 0.2.0 → 1.0.0

package/src/components/config/WorkflowPipeline.tsx

@@ -1,161 +0,0 @@
-import { useMemo } from 'react';
-import { useDroppable } from '@dnd-kit/core';
-import { ArrowDown, Terminal, Zap, Users } from 'lucide-react';
-import { Card } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { cn } from '@/lib/utils';
-import { useWorkflow } from '@/hooks/useWorkflow';
-import type { ConfigPrimitiveType } from '@/types';
-import type { WorkflowList, WorkflowEdge } from '../../../shared/workflow-config';
-
-interface WorkflowPipelineProps {
-  type: ConfigPrimitiveType;
-}
-
-/** A droppable zone on the pipeline where tree items can be dropped */
-function PipelineDropZone({ id, children, className }: { id: string; children: React.ReactNode; className?: string }) {
-  const { isOver, setNodeRef } = useDroppable({ id });
-
-  return (
-    <div
-      ref={setNodeRef}
-      className={cn(
-        'rounded border border-dashed border-transparent transition-colors',
-        isOver && 'border-accent-blue/40 bg-accent-blue/5',
-        className,
-      )}
-    >
-      {children}
-    </div>
-  );
-}
-
-/** A single workflow list card in the pipeline */
-function ListCard({
-  list,
-  type,
-  outEdges,
-}: {
-  list: WorkflowList;
-  type: ConfigPrimitiveType;
-  outEdges: WorkflowEdge[];
-}) {
-  const hookBadges = type === 'hooks' && list.activeHooks?.length
-    ? list.activeHooks
-    : [];
-
-  return (
-    <PipelineDropZone id={`pipeline-list-${list.id}`}>
-      <Card className="overflow-hidden">
-        <div className="flex items-center gap-2 px-3 py-2">
-          <div
-            className="h-2.5 w-2.5 shrink-0 rounded-full"
-            style={{ backgroundColor: list.hex }}
-          />
-          <span className="text-xs font-medium text-foreground">{list.label}</span>
-          <span className="text-[10px] text-muted-foreground/50 font-mono">{list.id}</span>
-        </div>
-
-        {/* Hook badges on list (hooks mode) */}
-        {hookBadges.length > 0 && (
-          <div className="flex flex-wrap gap-1 border-t border-border px-3 py-1.5">
-            {hookBadges.map((hook) => (
-              <Badge key={hook} variant="secondary" className="text-[10px] gap-1 px-1.5 py-0">
-                <Zap className="h-2.5 w-2.5" />
-                {hook}
-              </Badge>
-            ))}
-          </div>
-        )}
-      </Card>
-
-      {/* Outgoing edges */}
-      {outEdges.map((edge) => (
-        <EdgeSlot key={`${edge.from}:${edge.to}`} edge={edge} type={type} />
-      ))}
-    </PipelineDropZone>
-  );
-}
-
-/** The connector between two lists, showing edge metadata */
-function EdgeSlot({ edge, type }: { edge: WorkflowEdge; type: ConfigPrimitiveType }) {
-  const showCommand = type === 'skills' && edge.command;
-  const showAgents = type === 'agents' && edge.agents?.length;
-  const hasContent = showCommand || showAgents;
-
-  return (
-    <PipelineDropZone id={`pipeline-edge-${edge.from}:${edge.to}`} className="my-1">
-      <div className="flex items-center gap-2 px-4 py-1">
-        <ArrowDown className="h-3 w-3 shrink-0 text-muted-foreground/40" />
-        <span className="text-[10px] text-muted-foreground/60 truncate">
-          {edge.label}
-        </span>
-
-        {hasContent && (
-          <div className="ml-auto flex items-center gap-1">
-            {showCommand && (
-              <Badge variant="outline" className="text-[10px] gap-1 px-1.5 py-0 text-accent-blue border-accent-blue/30">
-                <Terminal className="h-2.5 w-2.5" />
-                {edge.command}
-              </Badge>
-            )}
-            {showAgents && edge.agents?.map((agent) => (
-              <Badge key={agent} variant="outline" className="text-[10px] gap-1 px-1.5 py-0 text-purple-400 border-purple-400/30">
-                <Users className="h-2.5 w-2.5" />
-                {agent}
-              </Badge>
-            ))}
-          </div>
-        )}
-      </div>
-    </PipelineDropZone>
-  );
-}
-
-export function WorkflowPipeline({ type }: WorkflowPipelineProps) {
-  const { engine } = useWorkflow();
-
-  const lists = useMemo(() => engine.getLists(), [engine]);
-  const edges = useMemo(() => engine.getAllEdges(), [engine]);
-
-  // Group edges by source list for rendering
-  const edgesByFrom = useMemo(() => {
-    const map = new Map<string, WorkflowEdge[]>();
-    for (const edge of edges) {
-      if (edge.direction !== 'forward') continue; // Only show forward edges in pipeline
-      const existing = map.get(edge.from);
-      if (existing) existing.push(edge);
-      else map.set(edge.from, [edge]);
-    }
-    return map;
-  }, [edges]);
-
-  return (
-    <div className="flex h-full flex-col">
-      {/* Header */}
-      <div className="flex items-center justify-between border-b border-border px-3 py-2">
-        <span className="text-xxs font-medium uppercase tracking-wider text-muted-foreground">
-          Workflow Pipeline
-        </span>
-        <Badge variant="secondary" className="text-[10px]">
-          {lists.length} stages
-        </Badge>
-      </div>
-
-      {/* Pipeline */}
-      <ScrollArea className="flex-1">
-        <div className="space-y-0 p-3">
-          {lists.map((list) => (
-            <ListCard
-              key={list.id}
-              list={list}
-              type={type}
-              outEdges={edgesByFrom.get(list.id) ?? []}
-            />
-          ))}
-        </div>
-      </ScrollArea>
-    </div>
-  );
-}

package/src/components/source-control/BranchList.tsx

@@ -1,93 +0,0 @@
-import { formatDistanceToNow } from 'date-fns';
-import { GitBranch, ArrowUp, ArrowDown } from 'lucide-react';
-import { Badge } from '@/components/ui/badge';
-import { cn } from '@/lib/utils';
-import type { BranchInfoData } from '@/types';
-
-interface Props {
-  branches: BranchInfoData[];
-}
-
-export function BranchList({ branches }: Props) {
-  // Sort: current first, then by date descending, stale at bottom
-  const sorted = [...branches]
-    .filter(b => !b.isRemote)
-    .sort((a, b) => {
-      if (a.isCurrent) return -1;
-      if (b.isCurrent) return 1;
-      if (a.isStale !== b.isStale) return a.isStale ? 1 : -1;
-      return new Date(b.headDate).getTime() - new Date(a.headDate).getTime();
-    });
-
-  if (sorted.length === 0) {
-    return (
-      <div className="py-6 text-center">
-        <GitBranch className="mx-auto mb-2 h-8 w-8 text-muted-foreground/50" />
-        <p className="text-xs text-muted-foreground">No branches found.</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-0.5">
-      {sorted.map(branch => (
-        <div
-          key={branch.name}
-          className={cn(
-            'flex items-center gap-2 rounded px-2.5 py-1.5 transition-colors hover:bg-surface-light',
-            branch.isStale && 'opacity-50',
-          )}
-        >
-          <GitBranch className={cn(
-            'h-3.5 w-3.5 shrink-0',
-            branch.isCurrent ? 'text-primary' : 'text-muted-foreground',
-          )} />
-
-          <span className={cn(
-            'min-w-0 flex-1 truncate font-mono text-xs',
-            branch.isCurrent && 'text-foreground font-medium',
-          )}>
-            {branch.name}
-          </span>
-
-          {/* Scope badge */}
-          {branch.scopeId && (
-            <Badge variant="secondary" className="shrink-0 text-xs">
-              #{branch.scopeId}
-            </Badge>
-          )}
-
-          {/* Ahead/behind */}
-          {branch.aheadBehind && (
-            <div className="flex shrink-0 items-center gap-1 text-xs">
-              {branch.aheadBehind.ahead > 0 && (
-                <span className="flex items-center gap-0.5 text-bid-green">
-                  <ArrowUp className="h-2.5 w-2.5" />
-                  {branch.aheadBehind.ahead}
-                </span>
-              )}
-              {branch.aheadBehind.behind > 0 && (
-                <span className="flex items-center gap-0.5 text-ask-red">
-                  <ArrowDown className="h-2.5 w-2.5" />
-                  {branch.aheadBehind.behind}
-                </span>
-              )}
-            </div>
-          )}
-
-          {/* SHA */}
-          <code className="shrink-0 font-mono text-xs text-muted-foreground/60">
-            {branch.headSha}
-          </code>
-
-          {/* Last commit time */}
-          {branch.headDate && (
-            <span className="shrink-0 text-xs text-muted-foreground/60">
-              {formatDistanceToNow(new Date(branch.headDate), { addSuffix: true })}
-            </span>
-          )}
-        </div>
-      ))}
-    </div>
-  );
-}

package/src/components/source-control/BranchPanel.tsx

@@ -1,105 +0,0 @@
-import { useState } from 'react';
-import { GitBranch, GitFork, ArrowRight } from 'lucide-react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { BranchList } from './BranchList';
-import { WorktreeList } from './WorktreeList';
-import type { BranchInfoData, WorktreeDetail, DriftPair } from '@/types';
-import { cn } from '@/lib/utils';
-
-interface Props {
-  branches: BranchInfoData[];
-  worktrees: WorktreeDetail[];
-  drift: DriftPair[];
-  branchingMode: 'trunk' | 'worktree';
-}
-
-type PanelTab = 'branches' | 'worktrees';
-
-function driftColor(count: number): string {
-  if (count === 0) return 'text-bid-green';
-  if (count <= 5) return 'text-accent-blue';
-  if (count <= 20) return 'text-warning-amber';
-  return 'text-ask-red';
-}
-
-export function BranchPanel({ branches, worktrees, drift, branchingMode }: Props) {
-  const showWorktrees = branchingMode === 'worktree';
-  const [tab, setTab] = useState<PanelTab>('branches');
-
-  return (
-    <Card>
-      <CardHeader className="pb-2">
-        <div className="flex items-center justify-between">
-          <CardTitle className="flex items-center gap-2 text-base">
-            <GitBranch className="h-4 w-4 text-primary" />
-            {showWorktrees ? (tab === 'branches' ? 'Branches' : 'Worktrees') : 'Branches'}
-            <Badge variant="secondary">
-              {tab === 'branches' ? branches.filter(b => !b.isRemote).length : worktrees.length}
-            </Badge>
-          </CardTitle>
-          {showWorktrees && (
-            <div className="flex gap-1">
-              <button
-                onClick={() => setTab('branches')}
-                className={cn(
-                  'rounded-md px-2.5 py-1 text-xs transition-colors',
-                  tab === 'branches'
-                    ? 'bg-surface-light text-foreground'
-                    : 'text-muted-foreground hover:text-foreground',
-                )}
-              >
-                <GitBranch className="inline h-3 w-3 mr-1" />
-                Branches
-              </button>
-              <button
-                onClick={() => setTab('worktrees')}
-                className={cn(
-                  'rounded-md px-2.5 py-1 text-xs transition-colors',
-                  tab === 'worktrees'
-                    ? 'bg-surface-light text-foreground'
-                    : 'text-muted-foreground hover:text-foreground',
-                )}
-              >
-                <GitFork className="inline h-3 w-3 mr-1" />
-                Worktrees
-              </button>
-            </div>
-          )}
-        </div>
-      </CardHeader>
-      <CardContent>
-        <ScrollArea className="max-h-[400px]">
-          {tab === 'branches' ? (
-            <BranchList branches={branches} />
-          ) : (
-            <WorktreeList worktrees={worktrees} />
-          )}
-        </ScrollArea>
-
-        {/* Drift indicators */}
-        {drift.length > 0 && (
-          <div className="mt-4 border-t border-border pt-3">
-            <h4 className="mb-2 text-xs font-medium text-muted-foreground">Branch Drift</h4>
-            <div className="space-y-1.5">
-              {drift.map(d => (
-                <div key={`${d.from}-${d.to}`} className="flex items-center gap-2 text-xs">
-                  <code className="font-mono text-muted-foreground">{d.from}</code>
-                  <ArrowRight className="h-3 w-3 text-muted-foreground/50" />
-                  <code className="font-mono text-muted-foreground">{d.to}</code>
-                  <Badge
-                    variant="outline"
-                    className={cn('ml-auto text-xs', driftColor(d.count))}
-                  >
-                    {d.count === 0 ? 'in sync' : `${d.count} commit${d.count !== 1 ? 's' : ''}`}
-                  </Badge>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-}

package/src/components/source-control/CommitLog.tsx

@@ -1,100 +0,0 @@
-import { useState, useMemo } from 'react';
-import { GitCommit } from 'lucide-react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { CommitRow } from './CommitRow';
-import type { CommitEntry, BranchInfoData } from '@/types';
-
-interface Props {
-  commits: CommitEntry[];
-  branches: BranchInfoData[];
-  hasMore: boolean;
-  onLoadMore: () => void;
-}
-
-type FilterTab = 'all' | 'main' | 'feature';
-
-export function CommitLog({ commits, branches, hasMore, onLoadMore }: Props) {
-  const [filter, setFilter] = useState<FilterTab>('all');
-
-  const mainBranches = useMemo(() => {
-    const names = new Set(['main', 'master', 'dev', 'develop', 'staging', 'production']);
-    for (const b of branches) {
-      if (!b.isRemote && !b.name.startsWith('feat/') && !b.name.startsWith('fix/')) {
-        names.add(b.name);
-      }
-    }
-    return names;
-  }, [branches]);
-
-  const filtered = useMemo(() => {
-    if (filter === 'all') return commits;
-    if (filter === 'main') {
-      return commits.filter(c => !c.branch || mainBranches.has(c.branch));
-    }
-    // feature
-    return commits.filter(c => c.branch && !mainBranches.has(c.branch));
-  }, [commits, filter, mainBranches]);
-
-  const tabs: { key: FilterTab; label: string }[] = [
-    { key: 'all', label: 'All' },
-    { key: 'main', label: 'Main' },
-    { key: 'feature', label: 'Feature' },
-  ];
-
-  return (
-    <Card className="lg:col-span-2">
-      <CardHeader className="pb-2">
-        <div className="flex items-center justify-between">
-          <CardTitle className="flex items-center gap-2 text-base">
-            <GitCommit className="h-4 w-4 text-primary" />
-            Commits
-            <Badge variant="secondary">{filtered.length}</Badge>
-          </CardTitle>
-          <div className="flex gap-1">
-            {tabs.map(tab => (
-              <button
-                key={tab.key}
-                onClick={() => setFilter(tab.key)}
-                className={`rounded-md px-2.5 py-1 text-xs transition-colors ${
-                  filter === tab.key
-                    ? 'bg-surface-light text-foreground'
-                    : 'text-muted-foreground hover:text-foreground'
-                }`}
-              >
-                {tab.label}
-              </button>
-            ))}
-          </div>
-        </div>
-      </CardHeader>
-      <CardContent>
-        {filtered.length === 0 ? (
-          <div className="py-8 text-center">
-            <GitCommit className="mx-auto mb-3 h-10 w-10 text-muted-foreground/50" />
-            <p className="text-sm text-muted-foreground">No commits found.</p>
-          </div>
-        ) : (
-          <>
-            <ScrollArea className="max-h-[600px]">
-              <div className="space-y-0.5">
-                {filtered.map(commit => (
-                  <CommitRow key={commit.sha} commit={commit} />
-                ))}
-              </div>
-            </ScrollArea>
-            {hasMore && (
-              <button
-                onClick={onLoadMore}
-                className="mt-3 w-full rounded border border-border py-2 text-xs text-muted-foreground transition-colors hover:bg-surface-light hover:text-foreground"
-              >
-                Load more commits
-              </button>
-            )}
-          </>
-        )}
-      </CardContent>
-    </Card>
-  );
-}

package/src/components/source-control/CommitRow.tsx

@@ -1,47 +0,0 @@
-import { formatDistanceToNow } from 'date-fns';
-import { Badge } from '@/components/ui/badge';
-import type { CommitEntry } from '@/types';
-
-interface Props {
-  commit: CommitEntry;
-}
-
-export function CommitRow({ commit }: Props) {
-  return (
-    <div className="flex items-center gap-3 rounded px-2.5 py-1.5 transition-colors hover:bg-surface-light">
-      {/* SHA */}
-      <code className="shrink-0 font-mono text-xs text-primary">
-        {commit.shortSha}
-      </code>
-
-      {/* Message */}
-      <span className="min-w-0 flex-1 truncate text-sm">
-        {commit.message}
-      </span>
-
-      {/* Branch ref badge */}
-      {commit.branch && (
-        <Badge variant="outline" className="shrink-0 text-xs font-normal">
-          {commit.branch}
-        </Badge>
-      )}
-
-      {/* Scope link */}
-      {commit.scopeId && (
-        <Badge variant="secondary" className="shrink-0 text-xs">
-          #{commit.scopeId}
-        </Badge>
-      )}
-
-      {/* Author */}
-      <span className="shrink-0 text-xs text-muted-foreground">
-        {commit.author}
-      </span>
-
-      {/* Time */}
-      <span className="shrink-0 text-xs text-muted-foreground/60">
-        {formatDistanceToNow(new Date(commit.date), { addSuffix: true })}
-      </span>
-    </div>
-  );
-}

package/src/components/source-control/GitHubPanel.tsx

@@ -1,110 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import { Github, ChevronDown, ChevronRight, Eye, Lock, Globe } from 'lucide-react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { GitHubSetupGuide } from './GitHubSetupGuide';
-import { PullRequestList } from './PullRequestList';
-import type { GitHubStatus, PullRequestInfo } from '@/types';
-
-interface Props {
-  github: GitHubStatus | null;
-}
-
-export function GitHubPanel({ github }: Props) {
-  const [expanded, setExpanded] = useState(true);
-  const [prs, setPrs] = useState<PullRequestInfo[]>([]);
-
-  const fetchPRs = useCallback(async () => {
-    if (!github?.connected) return;
-    try {
-      const res = await fetch('/api/orbital/github/prs');
-      if (res.ok) setPrs(await res.json());
-    } catch { /* ok */ }
-  }, [github?.connected]);
-
-  useEffect(() => {
-    if (expanded && github?.connected) fetchPRs();
-  }, [expanded, github?.connected, fetchPRs]);
-
-  const VisibilityIcon = github?.repo?.visibility === 'public' ? Globe : Lock;
-
-  return (
-    <Card className="mt-6">
-      <CardHeader
-        className="cursor-pointer select-none"
-        onClick={() => setExpanded(!expanded)}
-      >
-        <CardTitle className="flex items-center gap-2 text-base">
-          {expanded ? (
-            <ChevronDown className="h-4 w-4 text-muted-foreground" />
-          ) : (
-            <ChevronRight className="h-4 w-4 text-muted-foreground" />
-          )}
-          <Github className="h-4 w-4 text-primary" />
-          GitHub
-          {github?.connected && github.repo && (
-            <Badge variant="secondary" className="ml-1 text-xs gap-1">
-              <VisibilityIcon className="h-2.5 w-2.5" />
-              {github.repo.fullName}
-            </Badge>
-          )}
-          {github?.openPRs ? (
-            <Badge variant="outline" className="text-xs">
-              {github.openPRs} open PR{github.openPRs !== 1 ? 's' : ''}
-            </Badge>
-          ) : null}
-        </CardTitle>
-      </CardHeader>
-
-      {expanded && (
-        <CardContent>
-          {!github || !github.connected ? (
-            <GitHubSetupGuide error={github?.error ?? null} />
-          ) : (
-            <div className="space-y-4">
-              {/* Repo info */}
-              {github.repo && (
-                <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
-                  <span className="text-muted-foreground">Repository</span>
-                  <a
-                    href={github.repo.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-primary hover:underline"
-                  >
-                    {github.repo.fullName}
-                  </a>
-
-                  <span className="text-muted-foreground">Default branch</span>
-                  <code className="font-mono">{github.repo.defaultBranch}</code>
-
-                  <span className="text-muted-foreground">Visibility</span>
-                  <span className="flex items-center gap-1 capitalize">
-                    <VisibilityIcon className="h-3 w-3" />
-                    {github.repo.visibility}
-                  </span>
-
-                  {github.authUser && (
-                    <>
-                      <span className="text-muted-foreground">Signed in as</span>
-                      <span>{github.authUser}</span>
-                    </>
-                  )}
-                </div>
-              )}
-
-              {/* PRs */}
-              <div className="border-t border-border pt-3">
-                <h4 className="mb-2 flex items-center gap-2 text-xs font-medium text-muted-foreground">
-                  <Eye className="h-3 w-3" />
-                  Open Pull Requests
-                </h4>
-                <PullRequestList prs={prs} />
-              </div>
-            </div>
-          )}
-        </CardContent>
-      )}
-    </Card>
-  );
-}

package/src/components/source-control/GitHubSetupGuide.tsx

@@ -1,52 +0,0 @@
-import { Terminal, ExternalLink } from 'lucide-react';
-
-interface Props {
-  error: string | null;
-}
-
-export function GitHubSetupGuide({ error }: Props) {
-  const isNotInstalled = error?.includes('not installed');
-
-  return (
-    <div className="space-y-4">
-      <p className="text-sm text-muted-foreground">
-        {isNotInstalled
-          ? 'The GitHub CLI (gh) is required to connect your repository.'
-          : 'Authenticate with GitHub to see PRs, repo info, and more.'}
-      </p>
-
-      <div className="space-y-3">
-        {isNotInstalled && (
-          <div className="rounded border border-border bg-surface-light p-3">
-            <h4 className="mb-1.5 text-xs font-medium">1. Install GitHub CLI</h4>
-            <div className="flex items-center gap-2 rounded bg-background px-3 py-2 font-mono text-xs">
-              <Terminal className="h-3 w-3 shrink-0 text-muted-foreground" />
-              <code>brew install gh</code>
-            </div>
-            <p className="mt-1.5 text-xs text-muted-foreground">
-              Or visit{' '}
-              <a
-                href="https://cli.github.com"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center gap-0.5 text-primary hover:underline"
-              >
-                cli.github.com <ExternalLink className="h-2.5 w-2.5" />
-              </a>
-            </p>
-          </div>
-        )}
-
-        <div className="rounded border border-border bg-surface-light p-3">
-          <h4 className="mb-1.5 text-xs font-medium">
-            {isNotInstalled ? '2' : '1'}. Authenticate
-          </h4>
-          <div className="flex items-center gap-2 rounded bg-background px-3 py-2 font-mono text-xs">
-            <Terminal className="h-3 w-3 shrink-0 text-muted-foreground" />
-            <code>gh auth login</code>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}