refactor: move from next js to vite and tanstack router

apps/ui/src/components/views/board-view/shared/index.ts

@@ -0,0 +1,6 @@
+export * from "./model-constants";
+export * from "./model-selector";
+export * from "./thinking-level-selector";
+export * from "./profile-quick-select";
+export * from "./testing-tab-content";
+export * from "./priority-selector";

apps/ui/src/components/views/board-view/shared/model-constants.ts

@@ -0,0 +1,70 @@
+import { AgentModel, ThinkingLevel } from "@/store/app-store";
+import {
+  Brain,
+  Zap,
+  Scale,
+  Cpu,
+  Rocket,
+  Sparkles,
+} from "lucide-react";
+
+export type ModelOption = {
+  id: AgentModel;
+  label: string;
+  description: string;
+  badge?: string;
+  provider: "claude";
+};
+
+export const CLAUDE_MODELS: ModelOption[] = [
+  {
+    id: "haiku",
+    label: "Claude Haiku",
+    description: "Fast and efficient for simple tasks.",
+    badge: "Speed",
+    provider: "claude",
+  },
+  {
+    id: "sonnet",
+    label: "Claude Sonnet",
+    description: "Balanced performance with strong reasoning.",
+    badge: "Balanced",
+    provider: "claude",
+  },
+  {
+    id: "opus",
+    label: "Claude Opus",
+    description: "Most capable model for complex work.",
+    badge: "Premium",
+    provider: "claude",
+  },
+];
+
+export const THINKING_LEVELS: ThinkingLevel[] = [
+  "none",
+  "low",
+  "medium",
+  "high",
+  "ultrathink",
+];
+
+export const THINKING_LEVEL_LABELS: Record<ThinkingLevel, string> = {
+  none: "None",
+  low: "Low",
+  medium: "Med",
+  high: "High",
+  ultrathink: "Ultra",
+};
+
+// Profile icon mapping
+export const PROFILE_ICONS: Record<
+  string,
+  React.ComponentType<{ className?: string }>
+> = {
+  Brain,
+  Zap,
+  Scale,
+  Cpu,
+  Rocket,
+  Sparkles,
+};

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

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

@@ -0,0 +1,62 @@
+
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+interface PrioritySelectorProps {
+  selectedPriority: number;
+  onPrioritySelect: (priority: number) => void;
+  testIdPrefix?: string;
+}
+
+export function PrioritySelector({
+  selectedPriority,
+  onPrioritySelect,
+  testIdPrefix = "priority",
+}: PrioritySelectorProps) {
+  return (
+    <div className="space-y-2">
+      <Label>Priority</Label>
+      <div className="flex gap-2">
+        <button
+          type="button"
+          onClick={() => onPrioritySelect(1)}
+          className={cn(
+            "flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors",
+            selectedPriority === 1
+              ? "bg-red-500/20 text-red-500 border-2 border-red-500/50"
+              : "bg-muted/50 text-muted-foreground border border-border hover:bg-muted"
+          )}
+          data-testid={`${testIdPrefix}-high-button`}
+        >
+          High
+        </button>
+        <button
+          type="button"
+          onClick={() => onPrioritySelect(2)}
+          className={cn(
+            "flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors",
+            selectedPriority === 2
+              ? "bg-yellow-500/20 text-yellow-500 border-2 border-yellow-500/50"
+              : "bg-muted/50 text-muted-foreground border border-border hover:bg-muted"
+          )}
+          data-testid={`${testIdPrefix}-medium-button`}
+        >
+          Medium
+        </button>
+        <button
+          type="button"
+          onClick={() => onPrioritySelect(3)}
+          className={cn(
+            "flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors",
+            selectedPriority === 3
+              ? "bg-blue-500/20 text-blue-500 border-2 border-blue-500/50"
+              : "bg-muted/50 text-muted-foreground border border-border hover:bg-muted"
+          )}
+          data-testid={`${testIdPrefix}-low-button`}
+        >
+          Low
+        </button>
+      </div>
+    </div>
+  );
+}

apps/ui/src/components/views/board-view/shared/profile-quick-select.tsx

@@ -0,0 +1,98 @@
+
+import { Label } from "@/components/ui/label";
+import { Brain, UserCircle } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { AgentModel, ThinkingLevel, AIProfile } from "@/store/app-store";
+import { PROFILE_ICONS } from "./model-constants";
+
+interface ProfileQuickSelectProps {
+  profiles: AIProfile[];
+  selectedModel: AgentModel;
+  selectedThinkingLevel: ThinkingLevel;
+  onSelect: (model: AgentModel, thinkingLevel: ThinkingLevel) => void;
+  testIdPrefix?: string;
+  showManageLink?: boolean;
+  onManageLinkClick?: () => void;
+}
+
+export function ProfileQuickSelect({
+  profiles,
+  selectedModel,
+  selectedThinkingLevel,
+  onSelect,
+  testIdPrefix = "profile-quick-select",
+  showManageLink = false,
+  onManageLinkClick,
+}: ProfileQuickSelectProps) {
+  if (profiles.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <Label className="flex items-center gap-2">
+          <UserCircle className="w-4 h-4 text-brand-500" />
+          Quick Select Profile
+        </Label>
+        <span className="text-[11px] px-2 py-0.5 rounded-full border border-brand-500/40 text-brand-500">
+          Presets
+        </span>
+      </div>
+      <div className="grid grid-cols-2 gap-2">
+        {profiles.slice(0, 6).map((profile) => {
+          const IconComponent = profile.icon
+            ? PROFILE_ICONS[profile.icon]
+            : Brain;
+          const isSelected =
+            selectedModel === profile.model &&
+            selectedThinkingLevel === profile.thinkingLevel;
+          return (
+            <button
+              key={profile.id}
+              type="button"
+              onClick={() => onSelect(profile.model, profile.thinkingLevel)}
+              className={cn(
+                "flex items-center gap-2 p-2 rounded-lg border text-left transition-all",
+                isSelected
+                  ? "bg-brand-500/10 border-brand-500 text-foreground"
+                  : "bg-background hover:bg-accent border-input"
+              )}
+              data-testid={`${testIdPrefix}-${profile.id}`}
+            >
+              <div className="w-7 h-7 rounded flex items-center justify-center shrink-0 bg-primary/10">
+                {IconComponent && (
+                  <IconComponent className="w-4 h-4 text-primary" />
+                )}
+              </div>
+              <div className="min-w-0 flex-1">
+                <p className="text-sm font-medium truncate">{profile.name}</p>
+                <p className="text-[10px] text-muted-foreground truncate">
+                  {profile.model}
+                  {profile.thinkingLevel !== "none" &&
+                    ` + ${profile.thinkingLevel}`}
+                </p>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+      <p className="text-xs text-muted-foreground">
+        Or customize below.
+        {showManageLink && onManageLinkClick && (
+          <>
+            {" "}
+            Manage profiles in{" "}
+            <button
+              type="button"
+              onClick={onManageLinkClick}
+              className="text-brand-500 hover:underline"
+            >
+              AI Profiles
+            </button>
+          </>
+        )}
+      </p>
+    </div>
+  );
+}

apps/ui/src/components/views/board-view/shared/testing-tab-content.tsx

@@ -0,0 +1,85 @@
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { FlaskConical, Plus } from "lucide-react";
+
+interface TestingTabContentProps {
+  skipTests: boolean;
+  onSkipTestsChange: (skipTests: boolean) => void;
+  steps: string[];
+  onStepsChange: (steps: string[]) => void;
+  testIdPrefix?: string;
+}
+
+export function TestingTabContent({
+  skipTests,
+  onSkipTestsChange,
+  steps,
+  onStepsChange,
+  testIdPrefix = "",
+}: TestingTabContentProps) {
+  const checkboxId = testIdPrefix ? `${testIdPrefix}-skip-tests` : "skip-tests";
+
+  const handleStepChange = (index: number, value: string) => {
+    const newSteps = [...steps];
+    newSteps[index] = value;
+    onStepsChange(newSteps);
+  };
+
+  const handleAddStep = () => {
+    onStepsChange([...steps, ""]);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center space-x-2">
+        <Checkbox
+          id={checkboxId}
+          checked={!skipTests}
+          onCheckedChange={(checked) => onSkipTestsChange(checked !== true)}
+          data-testid={`${testIdPrefix ? testIdPrefix + "-" : ""}skip-tests-checkbox`}
+        />
+        <div className="flex items-center gap-2">
+          <Label htmlFor={checkboxId} className="text-sm cursor-pointer">
+            Enable automated testing
+          </Label>
+          <FlaskConical className="w-3.5 h-3.5 text-muted-foreground" />
+        </div>
+      </div>
+      <p className="text-xs text-muted-foreground">
+        When enabled, this feature will use automated TDD. When disabled, it
+        will require manual verification.
+      </p>
+
+      {/* Verification Steps - Only shown when skipTests is enabled */}
+      {skipTests && (
+        <div className="space-y-2 pt-2 border-t border-border">
+          <Label>Verification Steps</Label>
+          <p className="text-xs text-muted-foreground mb-2">
+            Add manual steps to verify this feature works correctly.
+          </p>
+          {steps.map((step, index) => (
+            <Input
+              key={index}
+              value={step}
+              placeholder={`Verification step ${index + 1}`}
+              onChange={(e) => handleStepChange(index, e.target.value)}
+              data-testid={`${testIdPrefix ? testIdPrefix + "-" : ""}feature-step-${index}${testIdPrefix ? "" : "-input"}`}
+            />
+          ))}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleAddStep}
+            data-testid={`${testIdPrefix ? testIdPrefix + "-" : ""}add-step-button`}
+          >
+            <Plus className="w-4 h-4 mr-2" />
+            Add Verification Step
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

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