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>
+  );
+}