Refactor bot settings UI and add bot command tests

Consolidate bot settings components by extracting BotMessagesCard,
inlining command alias and variable reference into commands-reference,
and removing unused checkbox component. Add unit tests for bot command
parsing and matching logic.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: nathanialhenniges

apps/web/package.json

@@ -30,7 +30,6 @@
     "next-themes": "^0.4.6",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "shadcn": "^3.6.2",
     "sonner": "^2.0.5",
     "tailwind-merge": "^3.3.1",
     "tw-animate-css": "^1.3.4",

apps/web/src/app/(app)/dashboard/bot/bot-settings-page.tsx

@@ -2,7 +2,8 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Loader2, Play, RotateCcw, Save, Square, Unplug } from "lucide-react";
+import { Loader2, Play, RotateCcw, Save, SquareStop, Unplug } from "lucide-react";
+import { useRouter } from "next/navigation";
 import { useSearchParams } from "next/navigation";
 import { toast } from "sonner";
 
@@ -22,13 +23,10 @@ import {
 } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Switch } from "@/components/ui/switch";
-import { TaskMessageEditor, TimerMessageEditor } from "@/components/bot-settings/message-editor";
-import { CommandAliasEditor } from "@/components/bot-settings/command-alias-editor";
-import { TaskVariableReference, TimerVariableReference } from "@/components/bot-settings/variable-reference";
 import { CommandsReference } from "@/components/bot-settings/commands-reference";
+import { BotMessagesCard } from "@/components/bot-settings/bot-messages-card";
 import { trpc } from "@/utils/trpc";
 
 const defaultTaskMessages: TaskMessagesConfig = {
@@ -107,6 +105,7 @@ function BotSettingsSkeleton() {
 }
 
 export default function BotSettingsPage() {
+  const router = useRouter();
   const queryClient = useQueryClient();
   const searchParams = useSearchParams();
   const config = useQuery(trpc.config.get.queryOptions());
@@ -117,11 +116,11 @@ export default function BotSettingsPage() {
     const botStatus = searchParams.get("bot");
     if (botStatus === "connected") {
       toast.success("Bot account connected successfully!");
-      window.history.replaceState({}, "", "/dashboard/bot");
+      router.replace("/dashboard/bot");
     } else if (botStatus === "error") {
       const reason = searchParams.get("reason") ?? "unknown";
       toast.error(`Failed to connect bot account: ${reason}`);
-      window.history.replaceState({}, "", "/dashboard/bot");
+      router.replace("/dashboard/bot");
     }
   }, [searchParams]);
 
@@ -291,7 +290,7 @@ export default function BotSettingsPage() {
   return (
     <div className={cn("container mx-auto max-w-5xl px-4 py-8", hasUnsaved && "pb-24")}>
       <div className="mb-6">
-        <h1 className="text-2xl font-bold">Bot Settings</h1>
+        <h1 className="font-heading text-2xl font-bold">Bot Settings</h1>
         <p className="text-sm text-muted-foreground">
           Configure your bot account, response messages, and command aliases
         </p>
@@ -350,7 +349,7 @@ export default function BotSettingsPage() {
                         disabled={stopBot.isPending}
                         className="text-destructive"
                       >
-                        <Square className="size-3" />
+                        <SquareStop className="size-3" />
                         Stop Bot
                       </Button>
                     ) : (
@@ -432,51 +431,25 @@ export default function BotSettingsPage() {
             </CardContent>
           </Card>
 
-          {/* Command Aliases */}
-          <CommandAliasEditor
-            aliases={commandAliases}
-            onChange={handleAliasesChange}
-          />
         </div>
 
-        {/* Right column — tabbed message editors */}
-        <div className="min-w-0 flex-1">
-          <Tabs defaultValue="task">
-            <TabsList className="mb-4">
-              <TabsTrigger value="task">Task Messages</TabsTrigger>
-              <TabsTrigger value="timer">Timer Messages</TabsTrigger>
-            </TabsList>
-
-            <TabsContent value="task" className="space-y-4">
-              <p className="text-xs text-muted-foreground">
-                Customize bot responses for task-related commands
-              </p>
-              <TaskVariableReference />
-              <TaskMessageEditor
-                messages={taskMessages}
-                onChange={handleTaskMessagesChange}
-                disabled={!taskCommandsEnabled}
-              />
-            </TabsContent>
-
-            <TabsContent value="timer" className="space-y-4">
-              <p className="text-xs text-muted-foreground">
-                Customize bot responses for timer-related commands
-              </p>
-              <TimerVariableReference />
-              <TimerMessageEditor
-                messages={timerMessages}
-                onChange={handleTimerMessagesChange}
-                disabled={!timerCommandsEnabled}
-              />
-            </TabsContent>
-          </Tabs>
+        {/* Right column — commands reference + messages */}
+        <div className="min-w-0 flex-1 space-y-6">
+          <CommandsReference
+            aliases={commandAliases}
+            onAliasesChange={handleAliasesChange}
+          />
+          <BotMessagesCard
+            taskMessages={taskMessages}
+            timerMessages={timerMessages}
+            onTaskChange={handleTaskMessagesChange}
+            onTimerChange={handleTimerMessagesChange}
+            taskCommandsEnabled={taskCommandsEnabled}
+            timerCommandsEnabled={timerCommandsEnabled}
+          />
         </div>
       </div>
 
-      {/* Commands Reference — full width */}
-      <CommandsReference />
-
       {/* Sticky Save / Reset Bar */}
       {hasUnsaved && (
         <div className="fixed inset-x-0 bottom-0 z-40 border-t bg-background/80 backdrop-blur-2xl">

apps/web/src/app/(app)/dashboard/styles/styles-page.tsx

@@ -179,7 +179,7 @@ export default function StylesPage() {
   return (
     <div className={cn("container mx-auto max-w-5xl px-4 py-8", hasUnsaved && "pb-24")}>
       <div className="mb-6">
-        <h1 className="text-2xl font-bold">Theme Center</h1>
+        <h1 className="font-heading text-2xl font-bold">Theme Center</h1>
         <p className="text-sm text-muted-foreground">
           Browse preset themes or customize your overlay styles
         </p>

apps/web/src/components/bot-settings/bot-messages-card.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import type { TaskMessagesConfig, TimerMessagesConfig } from "@/lib/config-types";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { TaskMessageEditor, TimerMessageEditor } from "@/components/bot-settings/message-editor";
+
+interface BotMessagesCardProps {
+  taskMessages: TaskMessagesConfig;
+  timerMessages: TimerMessagesConfig;
+  onTaskChange: (messages: TaskMessagesConfig) => void;
+  onTimerChange: (messages: TimerMessagesConfig) => void;
+  taskCommandsEnabled: boolean;
+  timerCommandsEnabled: boolean;
+}
+
+export function BotMessagesCard({
+  taskMessages,
+  timerMessages,
+  onTaskChange,
+  onTimerChange,
+  taskCommandsEnabled,
+  timerCommandsEnabled,
+}: BotMessagesCardProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base">Bot Messages</CardTitle>
+        <CardDescription>Customize chat responses for commands</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Tabs defaultValue="task">
+          <TabsList className="mb-4">
+            <TabsTrigger value="task">Task Messages</TabsTrigger>
+            <TabsTrigger value="timer">Timer Messages</TabsTrigger>
+          </TabsList>
+          <TabsContent value="task">
+            <TaskMessageEditor
+              messages={taskMessages}
+              onChange={onTaskChange}
+              disabled={!taskCommandsEnabled}
+            />
+          </TabsContent>
+          <TabsContent value="timer">
+            <TimerMessageEditor
+              messages={timerMessages}
+              onChange={onTimerChange}
+              disabled={!timerCommandsEnabled}
+            />
+          </TabsContent>
+        </Tabs>
+      </CardContent>
+    </Card>
+  );
+}