refactor: move from next js to vite and tanstack router

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

@@ -0,0 +1,48 @@
+
+import { Label } from "@/components/ui/label";
+import { Brain } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { ThinkingLevel } from "@/store/app-store";
+import { THINKING_LEVELS, THINKING_LEVEL_LABELS } from "./model-constants";
+
+interface ThinkingLevelSelectorProps {
+  selectedLevel: ThinkingLevel;
+  onLevelSelect: (level: ThinkingLevel) => void;
+  testIdPrefix?: string;
+}
+
+export function ThinkingLevelSelector({
+  selectedLevel,
+  onLevelSelect,
+  testIdPrefix = "thinking-level",
+}: ThinkingLevelSelectorProps) {
+  return (
+    <div className="space-y-2 pt-2 border-t border-border">
+      <Label className="flex items-center gap-2 text-sm">
+        <Brain className="w-3.5 h-3.5 text-muted-foreground" />
+        Thinking Level
+      </Label>
+      <div className="flex gap-2 flex-wrap">
+        {THINKING_LEVELS.map((level) => (
+          <button
+            key={level}
+            type="button"
+            onClick={() => onLevelSelect(level)}
+            className={cn(
+              "flex-1 px-3 py-2 rounded-md border text-sm font-medium transition-colors min-w-[60px]",
+              selectedLevel === level
+                ? "bg-primary text-primary-foreground border-primary"
+                : "bg-background hover:bg-accent border-input"
+            )}
+            data-testid={`${testIdPrefix}-${level}`}
+          >
+            {THINKING_LEVEL_LABELS[level]}
+          </button>
+        ))}
+      </div>
+      <p className="text-xs text-muted-foreground">
+        Higher levels give more time to reason through complex problems.
+      </p>
+    </div>
+  );
+}