fix(web): fix dark mode by changing @theme inline to @theme in index.css

tests/unit/cli/credential-scoping.test.ts

@@ -68,9 +68,10 @@ describe('CredentialScopedCommand', () => {
 
 	beforeEach(() => {
 		process.env = { ...originalEnv };
-		process.env.GITHUB_TOKEN = undefined;
-		process.env.TRELLO_API_KEY = undefined;
-		process.env.TRELLO_TOKEN = undefined;
+		delete process.env.GITHUB_TOKEN;
+		delete process.env.GITHUB_TOKEN_IMPLEMENTER;
+		delete process.env.TRELLO_API_KEY;
+		delete process.env.TRELLO_TOKEN;
 	});
 
 	afterEach(() => {

tests/unit/cli/dashboard/webhooks/webhooks.test.ts

@@ -163,6 +163,7 @@ describe('WebhooksCreate (webhooks create)', () => {
 			callbackBaseUrl: baseConfig.serverUrl,
 			trelloOnly: false,
 			githubOnly: false,
+			gitlabOnly: false,
 			oneTimeTokens: undefined,
 		});
 	});
@@ -182,6 +183,7 @@ describe('WebhooksCreate (webhooks create)', () => {
 			callbackBaseUrl: 'https://cascade.example.com',
 			trelloOnly: false,
 			githubOnly: false,
+			gitlabOnly: false,
 			oneTimeTokens: undefined,
 		});
 	});
@@ -201,6 +203,7 @@ describe('WebhooksCreate (webhooks create)', () => {
 			callbackBaseUrl: baseConfig.serverUrl,
 			trelloOnly: false,
 			githubOnly: false,
+			gitlabOnly: false,
 			oneTimeTokens: { github: 'ghp_testtoken123' },
 		});
 	});
@@ -242,6 +245,7 @@ describe('WebhooksDelete (webhooks delete)', () => {
 			callbackBaseUrl: baseConfig.serverUrl,
 			trelloOnly: false,
 			githubOnly: false,
+			gitlabOnly: false,
 			oneTimeTokens: undefined,
 		});
 	});
@@ -261,6 +265,7 @@ describe('WebhooksDelete (webhooks delete)', () => {
 			callbackBaseUrl: 'https://cascade.example.com',
 			trelloOnly: false,
 			githubOnly: false,
+			gitlabOnly: false,
 			oneTimeTokens: undefined,
 		});
 	});
@@ -280,6 +285,7 @@ describe('WebhooksDelete (webhooks delete)', () => {
 			callbackBaseUrl: baseConfig.serverUrl,
 			trelloOnly: false,
 			githubOnly: false,
+			gitlabOnly: false,
 			oneTimeTokens: { github: 'ghp_testtoken123' },
 		});
 	});

web/src/components/projects/project-work-table.tsx

@@ -1,5 +1,6 @@
 import { useNavigate } from '@tanstack/react-router';
 import { ClipboardList, ExternalLink, GitPullRequest } from 'lucide-react';
+import { useTheme } from 'next-themes';
 import { agentTypeLabel, getAgentColor } from '@/lib/chart-colors.js';
 import { formatCostSummary } from '@/lib/utils.js';
 import { WorkItemDurationBar } from './work-item-duration-bar.js';
@@ -234,6 +235,8 @@ export function ProjectWorkTable({
 	onPageChange,
 	projectAvgDurationMs,
 }: ProjectWorkTableProps) {
+	const { resolvedTheme } = useTheme();
+	const isDark = resolvedTheme === 'dark';
 	const total = items.length;
 	const totalPages = Math.ceil(total / limit);
 	const currentPage = Math.floor(offset / limit) + 1;
@@ -257,7 +260,7 @@ export function ProjectWorkTable({
 									width: 10,
 									height: 10,
 									borderRadius: 2,
-									background: getAgentColor(at),
+									background: getAgentColor(at, isDark),
 									flexShrink: 0,
 								}}
 							/>

web/src/components/projects/work-item-duration-bar.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from 'next-themes';
 import { agentTypeLabel, getAgentColor } from '@/lib/chart-colors.js';
 import { formatDuration } from '@/lib/utils.js';
 
@@ -22,7 +23,7 @@ export interface DurationSegment {
  *
  * Exported for testability.
  */
-export function buildDurationSegments(runs: RunSegmentInput[]): DurationSegment[] {
+export function buildDurationSegments(runs: RunSegmentInput[], dark = false): DurationSegment[] {
 	const runsWithDuration = runs.filter((r) => r.durationMs > 0);
 	if (runsWithDuration.length === 0) return [];
 
@@ -36,7 +37,7 @@ export function buildDurationSegments(runs: RunSegmentInput[]): DurationSegment[
 			agentType: run.agentType,
 			durationMs: run.durationMs,
 			status: run.status,
-			color: getAgentColor(run.agentType),
+			color: getAgentColor(run.agentType, dark),
 			pct: totalMs > 0 ? (run.durationMs / totalMs) * 100 : 0,
 			label: `${agentTypeLabel(run.agentType)} #${count}`,
 		};
@@ -53,7 +54,9 @@ interface WorkItemDurationBarProps {
  * Highlights in red when total > 2× project average (outlier).
  */
 export function WorkItemDurationBar({ runs, projectAvgDurationMs }: WorkItemDurationBarProps) {
-	const segments = buildDurationSegments(runs);
+	const { resolvedTheme } = useTheme();
+	const isDark = resolvedTheme === 'dark';
+	const segments = buildDurationSegments(runs, isDark);
 
 	if (segments.length === 0) {
 		return <span className="text-xs text-muted-foreground">—</span>;

web/src/components/runs/project-work-duration-chart.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from 'next-themes';
 import {
 	Bar,
 	BarChart,
@@ -34,7 +35,10 @@ interface ChartEntry {
 	color: string;
 }
 
-export function buildDurationChartData(byAgentType: AgentTypeBreakdown[]): ChartEntry[] {
+export function buildDurationChartData(
+	byAgentType: AgentTypeBreakdown[],
+	dark = false,
+): ChartEntry[] {
 	return byAgentType
 		.filter((breakdown) => breakdown.totalDurationMs > 0)
 		.map((breakdown) => ({
@@ -43,13 +47,15 @@ export function buildDurationChartData(byAgentType: AgentTypeBreakdown[]): Chart
 			totalDurationMs: breakdown.totalDurationMs,
 			runCount: breakdown.runCount,
 			avgDurationMs: breakdown.avgDurationMs ?? 0,
-			color: getAgentColor(breakdown.agentType),
+			color: getAgentColor(breakdown.agentType, dark),
 		}))
 		.sort((a, b) => b.totalDurationMs - a.totalDurationMs);
 }
 
 export function ProjectWorkDurationChart({ byAgentType }: ProjectWorkDurationChartProps) {
-	const data: ChartEntry[] = buildDurationChartData(byAgentType);
+	const { resolvedTheme } = useTheme();
+	const isDark = resolvedTheme === 'dark';
+	const data: ChartEntry[] = buildDurationChartData(byAgentType, isDark);
 
 	if (data.length === 0) {
 		return (

web/src/components/runs/work-item-cost-chart.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from 'next-themes';
 import { Cell, Label, Legend, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card.js';
 import { agentTypeLabel, getAgentColor } from '@/lib/chart-colors.js';
@@ -28,7 +29,7 @@ interface CostEntry {
 	color: string;
 }
 
-function buildDataFromRuns(runs: WorkItemRun[]): CostEntry[] {
+function buildDataFromRuns(runs: WorkItemRun[], dark: boolean): CostEntry[] {
 	const costByAgent: Record<string, number> = {};
 	for (const run of runs) {
 		if (run.costUsd != null) {
@@ -42,28 +43,30 @@ function buildDataFromRuns(runs: WorkItemRun[]): CostEntry[] {
 		name: agentTypeLabel(agentType),
 		agentType,
 		value,
-		color: getAgentColor(agentType),
+		color: getAgentColor(agentType, dark),
 	}));
 }
 
-function buildDataFromBreakdown(byAgentType: AgentTypeBreakdown[]): CostEntry[] {
+function buildDataFromBreakdown(byAgentType: AgentTypeBreakdown[], dark: boolean): CostEntry[] {
 	return byAgentType
 		.map((breakdown) => {
 			const cost = Number.parseFloat(breakdown.totalCostUsd);
 			return {
 				name: agentTypeLabel(breakdown.agentType),
 				agentType: breakdown.agentType,
 				value: Number.isNaN(cost) ? 0 : cost,
-				color: getAgentColor(breakdown.agentType),
+				color: getAgentColor(breakdown.agentType, dark),
 			};
 		})
 		.filter((entry) => entry.value > 0);
 }
 
 export function WorkItemCostChart({ runs, byAgentType }: WorkItemCostChartProps) {
+	const { resolvedTheme } = useTheme();
+	const isDark = resolvedTheme === 'dark';
 	const data: CostEntry[] = byAgentType
-		? buildDataFromBreakdown(byAgentType)
-		: buildDataFromRuns(runs ?? []);
+		? buildDataFromBreakdown(byAgentType, isDark)
+		: buildDataFromRuns(runs ?? [], isDark);
 
 	const totalCost = data.reduce((sum, d) => sum + d.value, 0);
 

web/src/components/runs/work-item-duration-chart.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from 'next-themes';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card.js';
 import { agentTypeLabel, getAgentColor } from '@/lib/chart-colors.js';
 import { formatDuration } from '@/lib/utils.js';
@@ -29,6 +30,8 @@ interface SegmentEntry {
 }
 
 export function WorkItemDurationChart({ runs }: WorkItemDurationChartProps) {
+	const { resolvedTheme } = useTheme();
+	const isDark = resolvedTheme === 'dark';
 	const runsWithDuration = runs.filter((r) => r.durationMs != null && r.durationMs > 0);
 
 	if (runsWithDuration.length === 0) {
@@ -62,7 +65,7 @@ export function WorkItemDurationChart({ runs }: WorkItemDurationChartProps) {
 			status: run.status,
 			model: run.model,
 			costUsd: run.costUsd,
-			color: getAgentColor(run.agentType),
+			color: getAgentColor(run.agentType, isDark),
 			pct: totalMs > 0 ? (durationMs / totalMs) * 100 : 0,
 		};
 	});
@@ -72,7 +75,7 @@ export function WorkItemDurationChart({ runs }: WorkItemDurationChartProps) {
 	const legendItems = uniqueAgentTypes.map((at) => ({
 		agentType: at,
 		label: agentTypeLabel(at),
-		color: getAgentColor(at),
+		color: getAgentColor(at, isDark),
 	}));
 
 	return (

web/src/components/settings/agent-definition-shared.tsx

@@ -135,7 +135,7 @@ export function Toggle({
 				}`}
 			>
 				<span
-					className={`inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow transition-transform ${
+					className={`inline-block h-3.5 w-3.5 transform rounded-full bg-white dark:bg-zinc-100 shadow transition-transform ${
 						checked ? 'translate-x-4.5' : 'translate-x-0.5'
 					}`}
 				/>

web/src/index.css

@@ -4,7 +4,7 @@
 
 @custom-variant dark (&:is(.dark *));
 
-@theme inline {
+@theme {
 	--color-background: oklch(1 0 0);
 	--color-foreground: oklch(0.145 0 0);
 	--color-card: oklch(1 0 0);