orbital-command 0.1.0

package/src/components/IdeaDetailModal.tsx

@@ -0,0 +1,190 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Trash2, Check, X, Sparkles } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import type { Scope } from '@/types';
+
+interface IdeaDetailModalProps {
+  scope: Scope | null;
+  open: boolean;
+  onClose: () => void;
+  onDelete: (id: number) => void;
+  onApprove: (id: number) => void;
+  onReject: (id: number) => void;
+}
+
+export function IdeaDetailModal({ scope, open, onClose, onDelete, onApprove, onReject }: IdeaDetailModalProps) {
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [savedTitle, setSavedTitle] = useState('');
+  const [savedDescription, setSavedDescription] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const titleRef = useRef<HTMLInputElement>(null);
+
+  const isGhost = !!scope?.is_ghost;
+  const isDirty = title !== savedTitle || description !== savedDescription;
+
+  // Sync state when scope changes
+  useEffect(() => {
+    if (scope && open) {
+      const t = scope.title ?? '';
+      const d = scope.raw_content ?? '';
+      setTitle(t);
+      setDescription(d);
+      setSavedTitle(t);
+      setSavedDescription(d);
+      setConfirmDelete(false);
+      if (!isGhost) setTimeout(() => titleRef.current?.focus(), 100);
+    }
+  }, [scope?.id, open]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const save = useCallback(async () => {
+    if (!scope || !isDirty || saving || isGhost) return;
+    setSaving(true);
+    try {
+      const res = await fetch(`/api/orbital/ideas/${scope.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ title, description }),
+      });
+      if (res.ok) {
+        setSavedTitle(title);
+        setSavedDescription(description);
+      }
+    } finally {
+      setSaving(false);
+    }
+  }, [scope, title, description, isDirty, saving, isGhost]);
+
+  // Auto-save every 10s when dirty (not for ghosts)
+  useEffect(() => {
+    if (!isDirty || !open || isGhost) return;
+    const timer = setInterval(() => { save(); }, 10_000);
+    return () => clearInterval(timer);
+  }, [isDirty, open, save, isGhost]);
+
+  function handleClose() {
+    if (isDirty && !isGhost) {
+      if (window.confirm('Save changes before closing?')) {
+        save().then(onClose);
+        return;
+      }
+    }
+    onClose();
+  }
+
+  function handleDelete() {
+    if (!confirmDelete) {
+      setConfirmDelete(true);
+      return;
+    }
+    if (scope) onDelete(scope.id);
+  }
+
+  if (!scope) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => { if (!isOpen) handleClose(); }}>
+      <DialogContent className="max-w-md p-0 gap-0 flex flex-col max-h-[70vh]">
+        {/* Header */}
+        <DialogHeader className="px-4 pt-3 pb-2">
+          <div className="flex items-center gap-2 pr-8">
+            <div className="flex-1 min-w-0">
+              {isGhost ? (
+                <div className="flex items-center gap-2">
+                  <Sparkles className="h-3.5 w-3.5 text-purple-400 shrink-0" />
+                  <span className="text-sm font-normal text-foreground truncate">{title}</span>
+                </div>
+              ) : (
+                <input
+                  ref={titleRef}
+                  className="w-full bg-transparent text-sm font-normal text-foreground border-none focus:outline-none focus:ring-0 placeholder:text-muted-foreground"
+                  placeholder="Idea title..."
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                />
+              )}
+            </div>
+            {isGhost ? (
+              <span className="shrink-0 rounded border border-purple-500/30 bg-purple-500/10 px-1.5 py-0.5 text-[10px] text-purple-400 uppercase">
+                ai suggestion
+              </span>
+            ) : confirmDelete ? (
+              <div className="flex items-center gap-1">
+                <Button size="sm" variant="destructive" className="h-6 text-xxs" onClick={handleDelete}>
+                  Confirm
+                </Button>
+                <Button size="sm" variant="ghost" className="h-6 text-xxs" onClick={() => setConfirmDelete(false)}>
+                  No
+                </Button>
+              </div>
+            ) : (
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6 shrink-0 text-muted-foreground hover:text-destructive"
+                onClick={handleDelete}
+                title="Delete idea"
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+              </Button>
+            )}
+          </div>
+        </DialogHeader>
+
+        {/* Description */}
+        <div className="flex-1 min-h-0 px-4 pb-4">
+          {isGhost ? (
+            <div className="w-full min-h-[200px] rounded bg-muted/20 px-3 py-2.5 text-xs text-foreground/80 border border-border/50 whitespace-pre-wrap">
+              {description || <span className="text-muted-foreground italic">No description</span>}
+            </div>
+          ) : (
+            <textarea
+              className="w-full h-full min-h-[200px] rounded bg-muted/30 px-3 py-2.5 text-xs text-foreground border border-border focus:outline-none focus:ring-1 focus:ring-primary/50 resize-none placeholder:text-muted-foreground"
+              placeholder="Describe the idea... What problem does it solve? Any notes on approach?"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          )}
+        </div>
+
+        {/* Footer */}
+        {isGhost ? (
+          <div className="px-4 pb-3 flex items-center gap-2">
+            <Button
+              size="sm"
+              className="flex-1 bg-green-600/20 border border-green-500/30 text-green-400 hover:bg-green-600/30 hover:text-green-300"
+              onClick={() => onApprove(scope.id)}
+            >
+              <Check className="h-3.5 w-3.5 mr-1.5" />
+              Approve
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              className="text-red-400 hover:text-red-300 hover:bg-red-500/10"
+              onClick={() => onReject(scope.id)}
+            >
+              <X className="h-3.5 w-3.5 mr-1.5" />
+              Reject
+            </Button>
+          </div>
+        ) : (
+          <div className="px-4 pb-3 flex items-center justify-between text-xxs text-muted-foreground">
+            <span>
+              {saving ? 'Saving...' : isDirty ? 'Unsaved changes' : 'Saved'}
+            </span>
+            <Button size="sm" variant="ghost" className="h-6" onClick={() => save()} disabled={!isDirty || saving}>
+              Save
+            </Button>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/IdeaFormDialog.tsx

@@ -0,0 +1,113 @@
+import { useState, useEffect, useRef } from 'react';
+import { Sparkles, Loader2 } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+
+interface IdeaFormDialogProps {
+  open: boolean;
+  loading: boolean;
+  onSubmit: (title: string, description: string) => void;
+  onCancel: () => void;
+  onSurprise: () => void;
+  surpriseLoading: boolean;
+}
+
+export function IdeaFormDialog({ open, loading, onSubmit, onCancel, onSurprise, surpriseLoading }: IdeaFormDialogProps) {
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Reset fields and focus on open
+  useEffect(() => {
+    if (open) {
+      setTitle('');
+      setDescription('');
+      setTimeout(() => inputRef.current?.focus(), 100);
+    }
+  }, [open]);
+
+  function handleSubmit() {
+    if (!title.trim()) return;
+    onSubmit(title.trim(), description.trim());
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+      e.preventDefault();
+      handleSubmit();
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => { if (!isOpen) onCancel(); }}>
+      <DialogContent className="max-w-lg p-5 gap-0" onKeyDown={handleKeyDown}>
+        <DialogHeader className="mb-4">
+          <DialogTitle className="text-sm font-normal">New Idea</DialogTitle>
+          <DialogDescription className="text-xxs text-muted-foreground">
+            Capture a feature idea for the icebox
+          </DialogDescription>
+        </DialogHeader>
+
+        <input
+          ref={inputRef}
+          className="mb-3 w-full rounded bg-muted/50 px-3 py-2 text-sm text-foreground border border-border focus:outline-none focus:ring-1 focus:ring-primary/50 placeholder:text-muted-foreground"
+          placeholder="Feature name..."
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+        />
+
+        <textarea
+          className="mb-4 w-full rounded bg-muted/50 px-3 py-2.5 text-xs text-foreground border border-border focus:outline-none focus:ring-1 focus:ring-primary/50 resize-y placeholder:text-muted-foreground"
+          placeholder="Describe the idea... What problem does it solve? Any notes on approach?"
+          rows={6}
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+        />
+
+        <div className="flex items-center gap-2">
+          <Button size="sm" onClick={handleSubmit} disabled={loading || !title.trim()} className="flex-1">
+            {loading ? 'Creating...' : 'Create'}
+          </Button>
+          <Button size="sm" variant="ghost" onClick={onCancel} disabled={loading}>
+            Cancel
+          </Button>
+          <span className="ml-auto text-[10px] text-muted-foreground/50">
+            {'\u2318'}+Enter
+          </span>
+        </div>
+
+        {/* Surprise Me */}
+        <div className="mt-4 pt-4 border-t border-border">
+          <Button
+            size="sm"
+            variant="outline"
+            className="w-full text-purple-400 border-purple-500/30 hover:bg-purple-500/10 hover:border-purple-500/50"
+            onClick={onSurprise}
+            disabled={surpriseLoading}
+          >
+            {surpriseLoading ? (
+              <>
+                <Loader2 className="h-3.5 w-3.5 mr-2 animate-spin" />
+                Generating ideas...
+              </>
+            ) : (
+              <>
+                <Sparkles className="h-3.5 w-3.5 mr-2" />
+                Surprise Me
+              </>
+            )}
+          </Button>
+          <p className="mt-1.5 text-center text-[10px] text-muted-foreground">
+            AI analyzes the codebase and suggests feature ideas
+          </p>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/KanbanColumn.tsx

@@ -0,0 +1,201 @@
+import { useDroppable } from '@dnd-kit/core';
+import type { Scope, ScopeStatus, Sprint, CardDisplayConfig } from '@/types';
+import type { SortField, SortDirection } from '@/hooks/useBoardSettings';
+import { ScopeCard } from './ScopeCard';
+import { SprintContainer } from './SprintContainer';
+import { ColumnMenu } from './ColumnMenu';
+import { useTheme } from '@/hooks/useTheme';
+import { cn } from '@/lib/utils';
+
+interface KanbanColumnProps {
+  id: ScopeStatus;
+  label: string;
+  color: string;
+  scopes: Scope[];
+  /** Sprints to render in this column (assembling in Ready, active in Implementing) */
+  sprints?: Sprint[];
+  scopeLookup?: Map<number, Scope>;
+  /** Global set of scope IDs in active groups across ALL columns (cross-column dedup) */
+  globalSprintScopeIds?: Set<number>;
+  onScopeClick?: (scope: Scope) => void;
+  onDeleteSprint?: (id: number) => void;
+  onDispatchSprint?: (id: number) => void;
+  onRenameSprint?: (id: number, name: string) => void;
+  /** ID of a sprint that was just created and should start with name editing */
+  editingSprintId?: number | null;
+  onSprintEditingDone?: () => void;
+  isValidDrop?: boolean;
+  isDragActive?: boolean;
+  headerExtra?: React.ReactNode;
+  collapsed?: boolean;
+  onToggleCollapse?: () => void;
+  sortField?: SortField;
+  sortDirection?: SortDirection;
+  onSetSort?: (field: SortField) => void;
+  cardDisplay?: CardDisplayConfig;
+  dimmedIds?: Set<number>;
+  onAddAllToSprint?: (sprintId: number, scopeIds: number[]) => void;
+}
+
+export function KanbanColumn({
+  id,
+  label,
+  color,
+  scopes,
+  sprints = [],
+  scopeLookup = new Map(),
+  globalSprintScopeIds,
+  onScopeClick,
+  onDeleteSprint,
+  onDispatchSprint,
+  onRenameSprint,
+  editingSprintId,
+  onSprintEditingDone,
+  isValidDrop,
+  isDragActive,
+  headerExtra,
+  collapsed,
+  onToggleCollapse,
+  sortField,
+  sortDirection,
+  onSetSort,
+  cardDisplay,
+  dimmedIds,
+  onAddAllToSprint,
+}: KanbanColumnProps) {
+  const { neonGlass } = useTheme();
+  const { setNodeRef, isOver } = useDroppable({ id });
+
+  // Scopes that are in a sprint/batch should not appear as loose cards.
+  // Use the global set (cross-column dedup) if available, otherwise fall back to local.
+  const sprintScopeIds = globalSprintScopeIds ?? new Set(sprints.flatMap((s) => s.scope_ids));
+  const looseScopes = scopes.filter((s) => !sprintScopeIds.has(s.id));
+  const looseScopeIds = looseScopes.filter((s) => !s.is_ghost).map((s) => s.id);
+  const totalCount = scopes.length;
+
+  const showCollapsed = collapsed;
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={cn(
+        'flex h-full flex-shrink-0 flex-col rounded border bg-card/50 overflow-hidden transition-[width] duration-300 ease-in-out',
+        showCollapsed ? 'w-10 cursor-pointer items-center' : 'w-72',
+        neonGlass && 'card-glass neon-border-blue',
+        isDragActive && isOver && isValidDrop && 'ring-2 ring-green-500/60 border-green-500/40 bg-green-500/5',
+        isDragActive && isOver && !isValidDrop && 'ring-2 ring-red-500/50 border-red-500/30 bg-red-500/5',
+        isDragActive && !isOver && isValidDrop && 'border-green-500/20',
+      )}
+      onClick={showCollapsed ? onToggleCollapse : undefined}
+    >
+      {showCollapsed ? (
+        <>
+          {/* Menu at top */}
+          <div className="flex items-center justify-center py-1.5" onClick={(e) => e.stopPropagation()}>
+            {sortField && sortDirection && onSetSort && onToggleCollapse && (
+              <ColumnMenu
+                sortField={sortField}
+                sortDirection={sortDirection}
+                onSetSort={onSetSort}
+                collapsed
+                onToggleCollapse={onToggleCollapse}
+              />
+            )}
+          </div>
+
+          {/* Rotated label */}
+          {/* Rotated label */}
+          <div className="flex items-start justify-center overflow-hidden pt-2">
+            <div className="flex items-center gap-2 [writing-mode:vertical-lr]">
+              <div className={cn('h-2.5 w-2.5 rounded-full shrink-0', neonGlass && 'animate-glow-pulse')} style={{ backgroundColor: `hsl(${color})` }} />
+              <span className="text-xxs uppercase tracking-wider font-normal text-muted-foreground whitespace-nowrap">
+                {label}
+              </span>
+            </div>
+          </div>
+
+          {/* Count badge — upright, below label */}
+          <span className="mt-2 rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-normal text-muted-foreground">
+            {totalCount}
+          </span>
+        </>
+      ) : (
+        <>
+          {/* Column header — click to collapse */}
+          <div className="flex items-center gap-2 border-b px-2.5 py-1.5 cursor-pointer" onClick={onToggleCollapse}>
+            <div className={cn('h-2.5 w-2.5 rounded-full', neonGlass && 'animate-glow-pulse')} style={{ backgroundColor: `hsl(${color})` }} />
+            <h2 className="text-xxs uppercase tracking-wider font-normal text-muted-foreground">{label}</h2>
+            <span className="ml-auto rounded-full bg-muted px-2 py-0.5 text-xs font-normal text-muted-foreground">
+              {totalCount}
+            </span>
+            {headerExtra && <span onClick={(e) => e.stopPropagation()}>{headerExtra}</span>}
+            {sortField && sortDirection && onSetSort && onToggleCollapse && (
+              <span onClick={(e) => e.stopPropagation()}>
+                <ColumnMenu
+                  sortField={sortField}
+                  sortDirection={sortDirection}
+                  onSetSort={onSetSort}
+                  collapsed={false}
+                  onToggleCollapse={onToggleCollapse}
+                />
+              </span>
+            )}
+          </div>
+
+          {/* Cards */}
+          <div className="min-h-0 flex-1 overflow-y-auto p-2">
+            <div className="space-y-1.5">
+              {sprints.map((sprint) => (
+                <SprintContainer
+                  key={`sprint-${sprint.id}`}
+                  sprint={sprint}
+                  scopeLookup={scopeLookup}
+                  onDelete={onDeleteSprint}
+                  onDispatch={onDispatchSprint}
+                  onRename={onRenameSprint}
+                  onScopeClick={onScopeClick}
+                  cardDisplay={cardDisplay}
+                  dimmedIds={dimmedIds}
+                  editingName={sprint.id === editingSprintId}
+                  onEditingDone={onSprintEditingDone}
+                  looseCount={sprint.status === 'assembling' ? looseScopeIds.length : 0}
+                  onAddAll={sprint.status === 'assembling' && onAddAllToSprint
+                    ? (sprintId) => onAddAllToSprint(sprintId, looseScopeIds)
+                    : undefined
+                  }
+                />
+              ))}
+
+              {looseScopes.filter((s) => !s.is_ghost).map((scope) => (
+                <ScopeCard
+                  key={scope.id}
+                  scope={scope}
+                  onClick={onScopeClick}
+                  cardDisplay={cardDisplay}
+                  dimmed={dimmedIds?.has(scope.id)}
+                />
+              ))}
+              {looseScopes.some((s) => s.is_ghost) && looseScopes.some((s) => !s.is_ghost) && (
+                <div className="my-2 border-t border-dashed border-purple-500/20" />
+              )}
+              {looseScopes.filter((s) => s.is_ghost).map((scope) => (
+                <ScopeCard
+                  key={scope.id}
+                  scope={scope}
+                  onClick={onScopeClick}
+                  cardDisplay={cardDisplay}
+                  dimmed={dimmedIds?.has(scope.id)}
+                />
+              ))}
+              {totalCount === 0 && isDragActive && isOver && isValidDrop && (
+                <p className="py-8 text-center text-xs text-muted-foreground/50">
+                  Drop here
+                </p>
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/MarkdownRenderer.tsx

@@ -0,0 +1,114 @@
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { cn } from '@/lib/utils';
+
+interface MarkdownRendererProps {
+  content: string;
+  className?: string;
+}
+
+export function MarkdownRenderer({ content, className }: MarkdownRendererProps) {
+  return (
+    <div className={cn(
+      'space-y-4 text-[13px] leading-[1.7]',
+      className,
+    )} style={{ fontFamily: "'Inter', system-ui, sans-serif" }}>
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      components={{
+        h1: ({ children }) => (
+          <h1 className="text-base font-semibold text-foreground border-b border-border pb-2 mb-3">{children}</h1>
+        ),
+        h2: ({ children }) => (
+          <h2 className="text-sm font-semibold text-foreground mt-6 mb-2 border-b border-border/50 pb-1.5">{children}</h2>
+        ),
+        h3: ({ children }) => (
+          <h3 className="text-[13px] font-semibold text-foreground mt-5 mb-1.5">{children}</h3>
+        ),
+        h4: ({ children }) => (
+          <h4 className="text-[13px] font-medium text-foreground/90 mt-4 mb-1">{children}</h4>
+        ),
+        p: ({ children }) => (
+          <p className="text-foreground/70 mb-2">{children}</p>
+        ),
+        a: ({ href, children }) => (
+          <a href={href} className="text-accent-blue hover:text-accent-blue/80 underline underline-offset-2" target="_blank" rel="noopener noreferrer">
+            {children}
+          </a>
+        ),
+        ul: ({ children }) => (
+          <ul className="ml-5 space-y-1.5 list-disc text-foreground/70 marker:text-muted-foreground">{children}</ul>
+        ),
+        ol: ({ children }) => (
+          <ol className="ml-5 space-y-1.5 list-decimal text-foreground/70 marker:text-muted-foreground">{children}</ol>
+        ),
+        li: ({ children, ...props }) => {
+          const checkbox = props.node?.properties?.className;
+          if (checkbox && String(checkbox).includes('task-list-item')) {
+            return <li className="list-none ml-[-1.25rem] flex items-start gap-2">{children}</li>;
+          }
+          return <li className="pl-1">{children}</li>;
+        },
+        input: ({ checked }) => (
+          <input
+            type="checkbox"
+            checked={checked}
+            readOnly
+            className="mt-1 h-3.5 w-3.5 rounded border-border accent-primary"
+          />
+        ),
+        code: ({ children, className: codeClassName }) => {
+          const isBlock = codeClassName?.startsWith('language-');
+          if (isBlock) {
+            return (
+              <code className={cn(
+                'block rounded p-3 font-mono text-xxs overflow-x-auto',
+                'bg-[#0d0d14] border border-border/50',
+                codeClassName,
+              )}>
+                {children}
+              </code>
+            );
+          }
+          return (
+            <code className="bg-[#0d0d14] border border-border/30 rounded px-1.5 py-0.5 font-mono text-xxs text-accent-blue/90">
+              {children}
+            </code>
+          );
+        },
+        pre: ({ children }) => (
+          <pre className="overflow-x-auto my-3">{children}</pre>
+        ),
+        blockquote: ({ children }) => (
+          <blockquote className="border-l-2 border-accent-blue/40 pl-4 py-1 text-foreground/60 italic bg-surface/50 rounded-r">
+            {children}
+          </blockquote>
+        ),
+        table: ({ children }) => (
+          <div className="overflow-x-auto my-3 rounded border border-border">
+            <table className="w-full text-xs">{children}</table>
+          </div>
+        ),
+        thead: ({ children }) => (
+          <thead className="bg-[#0d0d14] text-muted-foreground">{children}</thead>
+        ),
+        tr: ({ children }) => (
+          <tr className="border-b border-border/50 even:bg-surface/30">{children}</tr>
+        ),
+        th: ({ children }) => (
+          <th className="px-3 py-2 text-left text-xxs font-medium uppercase tracking-wider">{children}</th>
+        ),
+        td: ({ children }) => (
+          <td className="px-3 py-2 text-foreground/70">{children}</td>
+        ),
+        hr: () => <hr className="border-border/50 my-4" />,
+        strong: ({ children }) => (
+          <strong className="font-semibold text-foreground">{children}</strong>
+        ),
+      }}
+    >
+      {content}
+    </ReactMarkdown>
+    </div>
+  );
+}