refactor: move from next js to vite and tanstack router

apps/ui/src/components/views/board-view/shared/model-selector.tsx

@@ -0,0 +1,55 @@
+
+import { Label } from "@/components/ui/label";
+import { Brain } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { AgentModel } from "@/store/app-store";
+import { CLAUDE_MODELS, ModelOption } from "./model-constants";
+
+interface ModelSelectorProps {
+  selectedModel: AgentModel;
+  onModelSelect: (model: AgentModel) => void;
+  testIdPrefix?: string;
+}
+
+export function ModelSelector({
+  selectedModel,
+  onModelSelect,
+  testIdPrefix = "model-select",
+}: ModelSelectorProps) {
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <Label className="flex items-center gap-2">
+          <Brain className="w-4 h-4 text-primary" />
+          Claude (SDK)
+        </Label>
+        <span className="text-[11px] px-2 py-0.5 rounded-full border border-primary/40 text-primary">
+          Native
+        </span>
+      </div>
+      <div className="flex gap-2 flex-wrap">
+        {CLAUDE_MODELS.map((option) => {
+          const isSelected = selectedModel === option.id;
+          const shortName = option.label.replace("Claude ", "");
+          return (
+            <button
+              key={option.id}
+              type="button"
+              onClick={() => onModelSelect(option.id)}
+              title={option.description}
+              className={cn(
+                "flex-1 min-w-[80px] px-3 py-2 rounded-md border text-sm font-medium transition-colors",
+                isSelected
+                  ? "bg-primary text-primary-foreground border-primary"
+                  : "bg-background hover:bg-accent border-input"
+              )}
+              data-testid={`${testIdPrefix}-${option.id}`}
+            >
+              {shortName}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}