refactor: replace button elements with Button component for consistent styling across various UI components

surfsense_web/app/dashboard/[search_space_id]/buy-more/page.tsx

@@ -4,6 +4,7 @@ import { motion } from "motion/react";
 import { useState } from "react";
 import { BuyPagesContent } from "@/components/settings/buy-pages-content";
 import { BuyTokensContent } from "@/components/settings/buy-tokens-content";
+import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
 const TABS = [
@@ -26,19 +27,21 @@ export default function BuyMorePage() {
 			>
 				<div className="flex items-center justify-center rounded-lg border bg-muted/30 p-1">
 					{TABS.map((tab) => (
-						<button
+						<Button
 							key={tab.id}
 							type="button"
+							variant="ghost"
+							size="sm"
 							onClick={() => setActiveTab(tab.id)}
 							className={cn(
-								"flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
+								"h-auto flex-1 px-3 py-1.5 text-sm",
 								activeTab === tab.id
 									? "bg-background text-foreground shadow-sm"
 									: "text-muted-foreground hover:text-accent-foreground"
 							)}
 						>
 							{tab.label}
-						</button>
+						</Button>
 					))}
 				</div>
 

surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx

@@ -44,6 +44,7 @@ import {
 } from "@/components/assistant-ui/edit-message-dialog";
 import { StepSeparatorDataUI } from "@/components/assistant-ui/step-separator";
 import { Thread } from "@/components/assistant-ui/thread";
+import { Button } from "@/components/ui/button";
 import {
 	createTokenUsageStore,
 	type TokenUsageData,
@@ -76,8 +77,6 @@ import {
 import { createStreamFlushHelpers } from "@/lib/chat/stream-flush";
 import {
 	consumeSseEvents,
-	hasPersistableContent,
-	markInterruptsCompleted,
 	processSharedStreamEvent,
 } from "@/lib/chat/stream-pipeline";
 import {
@@ -88,7 +87,6 @@ import {
 } from "@/lib/chat/stream-side-effects";
 import {
 	addToolCall,
-	buildContentForPersistence,
 	buildContentForUI,
 	type ContentPartsState,
 	type FrameBatchedUpdater,
@@ -1718,8 +1716,19 @@ export default function NewChatPage() {
 			}
 
 			const byTcId = new Map<string, (typeof incoming)[number]>();
-			for (let i = 0; i < tcIds.length; i++) byTcId.set(tcIds[i], incoming[i]);
-			const submittedDecisions = tcIds.map((id) => byTcId.get(id)!);
+			const submittedDecisions: typeof incoming = [];
+			for (let i = 0; i < tcIds.length; i++) {
+				const tcId = tcIds[i];
+				const decision = incoming[i];
+				if (tcId === undefined || decision === undefined) {
+					toast.error(
+						`Cannot resume: ${incoming.length} decision(s) submitted for ${N} pending actions.`
+					);
+					return;
+				}
+				byTcId.set(tcId, decision);
+				submittedDecisions.push(decision);
+			}
 
 			setMessages((prev) =>
 				prev.map((m) => {
@@ -2341,16 +2350,15 @@ export default function NewChatPage() {
 		return (
 			<div className="flex h-full flex-col items-center justify-center gap-4">
 				<div className="text-destructive">Failed to load chat</div>
-				<button
+				<Button
 					type="button"
 					onClick={() => {
 						setIsInitializing(true);
 						initializeThread();
 					}}
-					className="rounded-md bg-primary px-4 py-2 text-primary-foreground hover:bg-primary/90"
 				>
 					Try Again
-				</button>
+				</Button>
 			</div>
 		);
 	}

surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx

@@ -482,13 +482,15 @@ function MemberRow({
 				{showActions ? (
 					<DropdownMenu>
 						<DropdownMenuTrigger asChild>
-							<button
+							<Button
 								type="button"
-								className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-accent-foreground transition-colors"
+								variant="ghost"
+								size="sm"
+								className="h-auto gap-1.5 px-0 py-0 text-sm text-muted-foreground hover:bg-transparent hover:text-accent-foreground"
 							>
 								{roleName}
 								<ChevronDown className="h-4 w-4" />
-							</button>
+							</Button>
 						</DropdownMenuTrigger>
 						<DropdownMenuContent
 							align="end"

surfsense_web/app/dashboard/[search_space_id]/user-settings/components/AgentStatusContent.tsx

@@ -6,6 +6,7 @@ import { useMemo } from "react";
 import { agentFlagsAtom } from "@/atoms/agent/agent-flags-query.atom";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import type { AgentFeatureFlags } from "@/lib/apis/agent-flags-api.service";
@@ -246,14 +247,16 @@ export function AgentStatusContent() {
 				<AlertTitle>Failed to load agent status</AlertTitle>
 				<AlertDescription className="flex items-center gap-2">
 					{error instanceof Error ? error.message : "Unknown error."}
-					<button
+					<Button
 						type="button"
+						variant="outline"
+						size="sm"
 						onClick={() => refetch()}
-						className="ml-auto inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs hover:bg-background"
+						className="ml-auto h-auto gap-1 px-2 py-0.5 text-xs hover:bg-background"
 					>
 						<RotateCcw className="size-3" />
 						Retry
-					</button>
+					</Button>
 				</AlertDescription>
 			</Alert>
 		);

surfsense_web/app/dashboard/error.tsx

@@ -3,6 +3,7 @@
 import { ExternalLink } from "lucide-react";
 import Link from "next/link";
 import { useEffect, useMemo } from "react";
+import { Button } from "@/components/ui/button";
 import { buildIssueUrl } from "@/lib/error-toast";
 
 export default function DashboardError({
@@ -39,13 +40,12 @@ export default function DashboardError({
 			)}
 
 			<div className="flex gap-2">
-				<button
+				<Button
 					type="button"
 					onClick={reset}
-					className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
 				>
 					Try again
-				</button>
+				</Button>
 				<Link
 					href="/dashboard"
 					className="rounded-md border border-input bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors"