ENG-1649: Model selector dropdown for extraction sidebar (#965)

* ENG-1592, ENG-1593, ENG-1594: Wire up sidebar inputs for extraction page

PDF upload, research question textarea, and toggleable node types with
shared NodeTypeDefinition type. Evidence and Claim selected by default.

* ENG-1595: Wire extract button; build system prompt from selected node types

* ENG-1649: Model selector dropdown for extraction sidebar

Adds Select component and supporting shadcn infra (radix-select dep,
color tokens in shared tailwind config, CSS variables in globals.css,
packages/ui content path). Node type checkboxes render in each
node's defined color.

* ENG-1649: Simplify Select to concrete colors

Drop shadcn theme tokens, CSS variables, animations, and unused
exports. Dropdown uses slate colors directly.

* Move extraction question into system prompt

* ENG-1649: Replace arbitrary text-[*px] with default utilities

* Use shadcn Button/Label and default Tailwind utilities in extraction Sidebar

Address PR #958 review: swap native <button>/<label> for @repo/ui Button/Label
so the sidebar uses the shared component presentation, and replace arbitrary
text-[Npx]/tracking-[Nem]/rounded-[Npx]/border-[Npx] classes with Tailwind
defaults (text-lg/base/sm/xs, tracking-tight/wide, rounded-3xl, border-2).
Adds a new Label component to @repo/ui with @radix-ui/react-label as a direct
dep (previously transitive).

* Drop arbitrary sidebar width/shadow in favor of Tailwind defaults

Swap lg:w-[390px] + xl:w-[420px] for lg:w-96, and the custom
shadow-[0_26px_52px_-38px_rgba(15,23,42,0.6)] for shadow-xl.
Defers exact visual tuning to the design phase.

* Enlarge research question textarea to avoid scrollbar on placeholder

min-h-20 (80px) clipped the 3-line placeholder. Bump to min-h-36 (144px)
so typical research questions fit without an inner scrollbar.

* ENG-1649: Drop per-type color from node type checkboxes

Revert to default shadcn Checkbox styling for node type rows.

* ENG-1649: Preserve Checkbox border-only look on node type rows

The Select dropdown's content path addition made the shared Checkbox's
data-[state=checked]:bg-primary apply, flipping rows to a solid fill.
Override at the call site to keep the border-only style with a dark
check mark.

Author: sid597

apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx

@@ -3,9 +3,16 @@ import { useRef } from "react";
 import { Button } from "@repo/ui/components/ui/button";
 import { Checkbox } from "@repo/ui/components/ui/checkbox";
 import { Label } from "@repo/ui/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@repo/ui/components/ui/select";
 import { Textarea } from "@repo/ui/components/ui/textarea";
-import { ChevronDown, Upload } from "lucide-react";
-import { NODE_TYPE_DEFINITIONS } from "~/types/extraction";
+import { Upload } from "lucide-react";
+import { MODEL_OPTIONS, NODE_TYPE_DEFINITIONS } from "~/types/extraction";
 
 const SECTION_LABEL_CLASS =
   "mb-3 block px-1 text-lg font-semibold tracking-tight text-slate-800";
@@ -17,6 +24,8 @@ type SidebarProps = {
   onResearchQuestionChange: (value: string) => void;
   selectedTypes: Set<string>;
   onToggleType: (candidateTag: string) => void;
+  model: string;
+  onModelChange: (model: string) => void;
   onExtract: () => void;
   canExtract: boolean;
   isExtracting: boolean;
@@ -30,6 +39,8 @@ export const Sidebar = ({
   onResearchQuestionChange,
   selectedTypes,
   onToggleType,
+  model,
+  onModelChange,
   onExtract,
   canExtract,
   isExtracting,
@@ -105,13 +116,22 @@ export const Sidebar = ({
 
         <section className="mb-6">
           <h3 className={SECTION_LABEL_CLASS}>Model</h3>
-          <Button
-            variant="outline"
-            className="w-full justify-between rounded-xl border-slate-300 px-3.5 py-3 text-base font-medium text-slate-700"
-          >
-            <span>Claude Sonnet 4.6</span>
-            <ChevronDown className="text-slate-500" />
-          </Button>
+          <Select value={model} onValueChange={onModelChange}>
+            <SelectTrigger className="h-12 rounded-xl text-base font-medium">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent className="rounded-xl shadow-lg">
+              {MODEL_OPTIONS.map((option) => (
+                <SelectItem
+                  key={option.id}
+                  value={option.id}
+                  className="text-base"
+                >
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </section>
 
         <section className="mb-5">
@@ -133,7 +153,7 @@ export const Sidebar = ({
             <h3 className="text-lg font-semibold tracking-tight text-slate-800">
               Node Types
             </h3>
-            <span className="text-xs font-semibold tabular-nums text-slate-500">
+            <span className="text-sm font-semibold tabular-nums text-slate-500">
               {selectedTypes.size}/{NODE_TYPE_DEFINITIONS.length}
             </span>
           </div>
@@ -147,6 +167,7 @@ export const Sidebar = ({
                 <Checkbox
                   checked={selectedTypes.has(type.candidateTag)}
                   onCheckedChange={() => onToggleType(type.candidateTag)}
+                  className="data-[state=checked]:bg-transparent data-[state=checked]:text-slate-800"
                 />
                 <span className="min-w-0 flex-1 text-base font-medium">
                   {type.label}

apps/website/app/(extract)/extract-nodes/page.tsx

@@ -1,7 +1,11 @@
 "use client";
 
 import { useCallback, useState } from "react";
-import { NODE_TYPE_DEFINITIONS, type ExtractedNode } from "~/types/extraction";
+import {
+  DEFAULT_MODEL_ID,
+  NODE_TYPE_DEFINITIONS,
+  type ExtractedNode,
+} from "~/types/extraction";
 import { buildSystemPrompt } from "~/prompts/extraction";
 import { MainContent } from "./components/MainContent";
 import { Sidebar } from "./components/Sidebar";
@@ -98,6 +102,7 @@ const ExtractNodesPage = (): React.ReactElement => {
   const [selectedTypes, setSelectedTypes] = useState(
     () => new Set(["#evd-candidate", "#clm-candidate"]),
   );
+  const [model, setModel] = useState(DEFAULT_MODEL_ID);
   const [isExtracting, setIsExtracting] = useState(false);
   const [extractionError, setExtractionError] = useState<string | null>(null);
   const [nodes] = useState<ExtractedNode[]>(SAMPLE_NODES);
@@ -132,7 +137,7 @@ const ExtractNodesPage = (): React.ReactElement => {
       const requestBody = {
         pdfBase64,
         provider: "anthropic",
-        model: "claude-sonnet-4-6",
+        model,
         systemPrompt,
       };
       const response = await fetch("/api/ai/extract", {
@@ -152,7 +157,7 @@ const ExtractNodesPage = (): React.ReactElement => {
     } finally {
       setIsExtracting(false);
     }
-  }, [pdfFile, researchQuestion, selectedTypes]);
+  }, [pdfFile, researchQuestion, selectedTypes, model]);
 
   return (
     <div className="flex h-full w-full flex-1 flex-col gap-4 p-4 lg:flex-row lg:gap-5 lg:p-5">
@@ -163,6 +168,8 @@ const ExtractNodesPage = (): React.ReactElement => {
         onResearchQuestionChange={setResearchQuestion}
         selectedTypes={selectedTypes}
         onToggleType={toggleType}
+        model={model}
+        onModelChange={setModel}
         onExtract={() => void handleExtract()}
         canExtract={canExtract}
         isExtracting={isExtracting}

apps/website/app/types/extraction.ts

@@ -64,6 +64,19 @@ export type NodeTypeDefinition = {
   color?: string;
 };
 
+type ModelOption = {
+  id: string;
+  label: string;
+};
+
+export const MODEL_OPTIONS: ModelOption[] = [
+  { id: "claude-opus-4-6", label: "Claude Opus 4.6" },
+  { id: "claude-sonnet-4-6", label: "Claude Sonnet 4.6" },
+  { id: "claude-haiku-4-5", label: "Claude Haiku 4.5" },
+];
+
+export const DEFAULT_MODEL_ID = "claude-sonnet-4-6";
+
 export const NODE_TYPE_DEFINITIONS: NodeTypeDefinition[] = [
   {
     label: "Evidence",

apps/website/tailwind.config.ts

@@ -5,9 +5,10 @@ const config: Pick<Config, "content" | "presets" | "plugins"> = {
   content: [
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "../../packages/ui/src/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   presets: [sharedConfig],
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [require("@tailwindcss/typography")],
 };
 
 export default config;

packages/ui/package.json

@@ -34,6 +34,7 @@
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

packages/ui/src/components/ui/select.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown } from "lucide-react";
+
+import { cn } from "@repo/ui/lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 shrink-0 opacity-50 data-[state=open]:rotate-180" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 overflow-hidden rounded-md border border-slate-200 bg-white text-slate-900 shadow-md",
+        position === "popper" && "w-[var(--radix-select-trigger-width)]",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectPrimitive.Viewport className="max-h-96 overflow-y-auto p-1">
+        {children}
+      </SelectPrimitive.Viewport>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-3 pr-8 text-sm outline-none focus:bg-slate-100 data-[state=checked]:font-semibold",
+      className,
+    )}
+    {...props}
+  >
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    <span className="absolute right-2 flex h-4 w-4 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+export { Select, SelectValue, SelectTrigger, SelectContent, SelectItem };