feat: implement React UI components for focus and queue views

Complete frontend implementation for Mission Control's core workflow:
surface THE ONE THING and let the user act on it.

Layout (AppShell.tsx):
- Tab navigation: Focus | Queue | Inbox
- View switching with AnimatePresence transitions
- Global shortcut event listener for quick capture
- Batch mode overlay when active

Focus View (FocusView.tsx, FocusCard.tsx):
- Prominent display of THE ONE THING
- Type badge with staleness coloring (fresh/normal/amber/urgent)
- Context quote and requestedBy for reviews
- Action buttons: Start (Enter), 1h (Cmd+1), Tomorrow (Cmd+2), Skip (Cmd+S)
- Empty state: "All Clear" when queue is empty

Queue View (QueueView.tsx, QueueItem.tsx, QueueSummary.tsx):
- List view of all items with reordering capability
- Click to set as focus (promotes to THE ONE THING)
- Summary shows counts by type
- Links back to Focus view

Quick Capture (QuickCapture.tsx):
- Modal overlay triggered by Cmd+Shift+C
- Creates new bead via quick_capture command
- Shows success/error feedback

Batch Mode (BatchMode.tsx):
- Full-screen overlay for rapid item processing
- Progress indicator: 3/10 DONE
- Same action buttons as FocusCard
- Exit returns to regular Focus view

App entry updates:
- App.tsx now renders AppShell
- main.tsx unchanged (React 19 + StrictMode)
- Tailwind config adds MC-specific colors

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/QueueItem.tsx

@@ -0,0 +1,93 @@
+/**
+ * QueueItem -- a single row in the queue list.
+ *
+ * Shows type badge, staleness indicator, title, project/IID, and requestedBy.
+ * Clicking sets this item as THE ONE THING.
+ */
+
+import type { FocusItem, FocusItemType, Staleness } from "@/lib/types";
+import { computeStaleness } from "@/lib/types";
+import { formatIid } from "@/lib/format";
+
+interface QueueItemProps {
+  item: FocusItem;
+  onClick: (id: string) => void;
+  isFocused?: boolean;
+}
+
+const TYPE_LABELS: Record<FocusItemType, string> = {
+  mr_review: "MR REVIEW",
+  issue: "ISSUE",
+  mr_authored: "MR AUTHORED",
+  manual: "TASK",
+};
+
+const STALENESS_DOT: Record<Staleness, string> = {
+  fresh: "bg-mc-fresh",
+  normal: "bg-zinc-500",
+  amber: "bg-mc-amber",
+  urgent: "bg-mc-urgent animate-pulse",
+};
+
+const STALENESS_LABEL: Record<Staleness, string> = {
+  fresh: "Updated recently",
+  normal: "Updated 1-2 days ago",
+  amber: "Updated 3-6 days ago",
+  urgent: "Needs attention - over a week old",
+};
+
+export function QueueItem({
+  item,
+  onClick,
+  isFocused = false,
+}: QueueItemProps): React.ReactElement {
+  const staleness = computeStaleness(item.updatedAt);
+
+  return (
+    <button
+      type="button"
+      data-staleness={staleness}
+      data-focused={isFocused}
+      onClick={() => onClick(item.id)}
+      className={`flex w-full items-center gap-3 rounded-lg border px-4 py-3 text-left transition-colors ${
+        isFocused
+          ? "border-mc-fresh/30 bg-mc-fresh/5"
+          : "border-zinc-800 bg-surface-raised hover:border-zinc-700 hover:bg-surface-overlay/50"
+      }`}
+    >
+      {/* Staleness dot with accessible label */}
+      <span
+        className={`h-2.5 w-2.5 flex-shrink-0 rounded-full ${STALENESS_DOT[staleness]}`}
+        role="img"
+        aria-label={STALENESS_LABEL[staleness]}
+      />
+
+      {/* Type badge */}
+      <span className="flex-shrink-0 rounded bg-zinc-800 px-2 py-0.5 text-[10px] font-bold tracking-wider text-zinc-400">
+        {TYPE_LABELS[item.type]}
+      </span>
+
+      {/* IID */}
+      <span className="flex-shrink-0 text-xs text-zinc-500">
+        {formatIid(item.type, item.iid)}
+      </span>
+
+      {/* Title */}
+      <span className="min-w-0 flex-1 truncate text-sm text-zinc-200">
+        {item.title}
+      </span>
+
+      {/* Project */}
+      <span className="flex-shrink-0 text-xs text-zinc-600">
+        {item.project}
+      </span>
+
+      {/* Requested by */}
+      {item.requestedBy && (
+        <span className="flex-shrink-0 text-xs text-zinc-500">
+          @{item.requestedBy}
+        </span>
+      )}
+    </button>
+  );
+}