feat(02-02): add thread hooks, UI store, tab navigation, and thread list

- Create useThreads/useCandidates TanStack Query hooks
- Extend uiStore with candidate panel and resolve dialog state
- Add ThreadTabs component for gear/planning tab switching
- Add ThreadCard component with candidate count and price range chips
- Refactor index.tsx to tabbed HomePage with PlanningView
- Create placeholder thread detail route for navigation target

src/client/components/ThreadCard.tsx

@@ -0,0 +1,77 @@
+import { useNavigate } from "@tanstack/react-router";
+import { formatPrice } from "../lib/formatters";
+
+interface ThreadCardProps {
+  id: number;
+  name: string;
+  candidateCount: number;
+  minPriceCents: number | null;
+  maxPriceCents: number | null;
+  createdAt: string;
+  status: "active" | "resolved";
+}
+
+function formatDate(iso: string): string {
+  const d = new Date(iso);
+  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+
+function formatPriceRange(
+  min: number | null,
+  max: number | null,
+): string | null {
+  if (min == null && max == null) return null;
+  if (min === max) return formatPrice(min);
+  return `${formatPrice(min)} - ${formatPrice(max)}`;
+}
+
+export function ThreadCard({
+  id,
+  name,
+  candidateCount,
+  minPriceCents,
+  maxPriceCents,
+  createdAt,
+  status,
+}: ThreadCardProps) {
+  const navigate = useNavigate();
+
+  const isResolved = status === "resolved";
+  const priceRange = formatPriceRange(minPriceCents, maxPriceCents);
+
+  return (
+    <button
+      type="button"
+      onClick={() =>
+        navigate({ to: "/threads/$threadId", params: { threadId: String(id) } })
+      }
+      className={`w-full text-left bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all p-4 ${
+        isResolved ? "opacity-60" : ""
+      }`}
+    >
+      <div className="flex items-start justify-between mb-2">
+        <h3 className="text-sm font-semibold text-gray-900 truncate">
+          {name}
+        </h3>
+        {isResolved && (
+          <span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-500 shrink-0">
+            Resolved
+          </span>
+        )}
+      </div>
+      <div className="flex flex-wrap gap-1.5">
+        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-50 text-purple-700">
+          {candidateCount} {candidateCount === 1 ? "candidate" : "candidates"}
+        </span>
+        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
+          {formatDate(createdAt)}
+        </span>
+        {priceRange && (
+          <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700">
+            {priceRange}
+          </span>
+        )}
+      </div>
+    </button>
+  );
+}

src/client/components/ThreadTabs.tsx

@@ -0,0 +1,33 @@
+interface ThreadTabsProps {
+  active: "gear" | "planning";
+  onChange: (tab: "gear" | "planning") => void;
+}
+
+const tabs = [
+  { key: "gear" as const, label: "My Gear" },
+  { key: "planning" as const, label: "Planning" },
+];
+
+export function ThreadTabs({ active, onChange }: ThreadTabsProps) {
+  return (
+    <div className="flex border-b border-gray-200">
+      {tabs.map((tab) => (
+        <button
+          key={tab.key}
+          type="button"
+          onClick={() => onChange(tab.key)}
+          className={`px-4 py-2.5 text-sm font-medium transition-colors relative ${
+            active === tab.key
+              ? "text-blue-600"
+              : "text-gray-500 hover:text-gray-700"
+          }`}
+        >
+          {tab.label}
+          {active === tab.key && (
+            <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-600 rounded-t" />
+          )}
+        </button>
+      ))}
+    </div>
+  );
+}