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

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

@@ -72,11 +72,11 @@ describe('CredentialScopedCommand', () => {
 
 	beforeEach(() => {
 		process.env = { ...originalEnv };
-		process.env.GITHUB_TOKEN = undefined;
-		process.env.GITHUB_TOKEN_IMPLEMENTER = undefined;
-		process.env.GITLAB_TOKEN_IMPLEMENTER = 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.GITLAB_TOKEN_IMPLEMENTER;
+		delete process.env.TRELLO_API_KEY;
+		delete process.env.TRELLO_TOKEN;
 	});
 
 	afterEach(() => {

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

web/src/lib/chart-colors.ts

@@ -15,7 +15,7 @@
 // chart-4: oklch(0.828 0.189 84.429) ≈ #d4c02a (yellow)
 // chart-5: oklch(0.769 0.188 70.08)  ≈ #d99c27 (amber)
 
-// Static palette — visible in both themes, though not theme-adaptive
+// Light-mode palette
 const CHART_PALETTE = [
 	'#e8642a', // chart-1: orange → planning
 	'#3aada0', // chart-2: teal → implementation
@@ -27,6 +27,24 @@ const CHART_PALETTE = [
 	'#2ecc71', // green → other agents
 ];
 
+// Dark-mode palette — brighter/lighter variants for visibility on dark backgrounds.
+// Hex approximations of the dark-mode oklch chart colors from index.css:
+// chart-1: oklch(0.488 0.243 264.376) ≈ #4d6ef5 (blue-violet)
+// chart-2: oklch(0.696 0.17 162.48)   ≈ #38c98a (green)
+// chart-3: oklch(0.769 0.188 70.08)   ≈ #e8a838 (amber)
+// chart-4: oklch(0.627 0.265 303.9)   ≈ #c46cf0 (violet)
+// chart-5: oklch(0.645 0.246 16.439)  ≈ #f0614d (red-orange)
+const CHART_PALETTE_DARK = [
+	'#f0844d', // orange (brighter) → planning
+	'#4dd6c8', // teal (brighter) → implementation
+	'#6fa8d0', // steel blue (brighter) → review
+	'#f0d44d', // yellow (brighter) → splitting
+	'#f0b84d', // amber (brighter) → debug
+	'#c084f5', // purple (brighter) → respond-to-review
+	'#f57070', // red (brighter) → respond-to-ci
+	'#4ade80', // green (brighter) → other agents
+];
+
 const KNOWN_AGENT_TYPES: Record<string, number> = {
 	planning: 0,
 	implementation: 1,
@@ -42,18 +60,22 @@ const KNOWN_AGENT_TYPES: Record<string, number> = {
 /**
  * Returns a color string for the given agent type.
  * Falls back to a consistent color based on the string hash for unknown types.
+ *
+ * @param agentType - The agent type identifier
+ * @param dark - When true, returns a brighter color suitable for dark backgrounds
  */
-export function getAgentColor(agentType: string): string {
+export function getAgentColor(agentType: string, dark = false): string {
+	const palette = dark ? CHART_PALETTE_DARK : CHART_PALETTE;
 	const idx = KNOWN_AGENT_TYPES[agentType];
 	if (idx !== undefined) {
-		return CHART_PALETTE[idx];
+		return palette[idx];
 	}
 	// Hash-based fallback for unknown agent types
 	let hash = 0;
 	for (let i = 0; i < agentType.length; i++) {
-		hash = (hash * 31 + agentType.charCodeAt(i)) % CHART_PALETTE.length;
+		hash = (hash * 31 + agentType.charCodeAt(i)) % palette.length;
 	}
-	return CHART_PALETTE[Math.abs(hash) % CHART_PALETTE.length];
+	return palette[Math.abs(hash) % palette.length];
 }
 
 /**