orbital-command 0.1.0

package/src/components/config/WorkflowPipeline.tsx

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

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

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

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

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

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

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