Implement the 010-ui-baseline feature that establishes a modern UI using Tailwind CSS v4 and shadcn/ui-style components for the encounter screen

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/App.tsx

@@ -1,175 +1,10 @@
-import type { CombatantId } from "@initiative/domain";
-import { type FormEvent, useCallback, useRef, useState } from "react";
+import { ActionBar } from "./components/action-bar";
+import { CombatantRow } from "./components/combatant-row";
 import { useEncounter } from "./hooks/use-encounter";
 
-function formatEvent(e: ReturnType<typeof useEncounter>["events"][number]) {
-	switch (e.type) {
-		case "TurnAdvanced":
-			return `Turn: ${e.previousCombatantId} → ${e.newCombatantId} (round ${e.roundNumber})`;
-		case "RoundAdvanced":
-			return `Round advanced to ${e.newRoundNumber}`;
-		case "CombatantAdded":
-			return `Added combatant: ${e.name}`;
-		case "CombatantRemoved":
-			return `Removed combatant: ${e.name}`;
-		case "CombatantUpdated":
-			return `Renamed combatant: ${e.oldName} → ${e.newName}`;
-		case "InitiativeSet":
-			return `Initiative: ${e.combatantId} ${e.previousValue ?? "unset"} → ${e.newValue ?? "unset"}`;
-		case "MaxHpSet":
-			return `Max HP: ${e.combatantId} ${e.previousMaxHp ?? "unset"} → ${e.newMaxHp ?? "unset"}`;
-		case "CurrentHpAdjusted":
-			return `HP: ${e.combatantId} ${e.previousHp} → ${e.newHp} (${e.delta > 0 ? "+" : ""}${e.delta})`;
-	}
-}
-
-function EditableName({
-	name,
-	combatantId,
-	isActive,
-	onRename,
-}: {
-	name: string;
-	combatantId: CombatantId;
-	isActive: boolean;
-	onRename: (id: CombatantId, newName: string) => void;
-}) {
-	const [editing, setEditing] = useState(false);
-	const [draft, setDraft] = useState(name);
-	const inputRef = useRef<HTMLInputElement>(null);
-
-	const commit = useCallback(() => {
-		const trimmed = draft.trim();
-		if (trimmed !== "" && trimmed !== name) {
-			onRename(combatantId, trimmed);
-		}
-		setEditing(false);
-	}, [draft, name, combatantId, onRename]);
-
-	const startEditing = useCallback(() => {
-		setDraft(name);
-		setEditing(true);
-		requestAnimationFrame(() => inputRef.current?.select());
-	}, [name]);
-
-	if (editing) {
-		return (
-			<input
-				ref={inputRef}
-				type="text"
-				value={draft}
-				onChange={(e) => setDraft(e.target.value)}
-				onBlur={commit}
-				onKeyDown={(e) => {
-					if (e.key === "Enter") commit();
-					if (e.key === "Escape") setEditing(false);
-				}}
-			/>
-		);
-	}
-
-	return (
-		<button type="button" onClick={startEditing}>
-			{isActive ? `▶ ${name}` : name}
-		</button>
-	);
-}
-
-function MaxHpInput({
-	maxHp,
-	onCommit,
-}: {
-	maxHp: number | undefined;
-	onCommit: (value: number | undefined) => void;
-}) {
-	const [draft, setDraft] = useState(maxHp?.toString() ?? "");
-	const prev = useRef(maxHp);
-
-	// Sync draft when domain value changes externally (e.g. from another source)
-	if (maxHp !== prev.current) {
-		prev.current = maxHp;
-		setDraft(maxHp?.toString() ?? "");
-	}
-
-	const commit = useCallback(() => {
-		if (draft === "") {
-			onCommit(undefined);
-			return;
-		}
-		const n = Number.parseInt(draft, 10);
-		if (!Number.isNaN(n) && n >= 1) {
-			onCommit(n);
-		} else {
-			// Revert invalid input
-			setDraft(maxHp?.toString() ?? "");
-		}
-	}, [draft, maxHp, onCommit]);
-
-	return (
-		<input
-			type="number"
-			min={1}
-			value={draft}
-			placeholder="Max HP"
-			style={{ width: "5em" }}
-			onChange={(e) => setDraft(e.target.value)}
-			onBlur={commit}
-			onKeyDown={(e) => {
-				if (e.key === "Enter") commit();
-			}}
-		/>
-	);
-}
-
-function CurrentHpInput({
-	currentHp,
-	maxHp,
-	onCommit,
-}: {
-	currentHp: number | undefined;
-	maxHp: number | undefined;
-	onCommit: (value: number) => void;
-}) {
-	const [draft, setDraft] = useState(currentHp?.toString() ?? "");
-	const prev = useRef(currentHp);
-
-	if (currentHp !== prev.current) {
-		prev.current = currentHp;
-		setDraft(currentHp?.toString() ?? "");
-	}
-
-	const commit = useCallback(() => {
-		if (draft === "" || currentHp === undefined) return;
-		const n = Number.parseInt(draft, 10);
-		if (!Number.isNaN(n)) {
-			onCommit(n);
-		} else {
-			setDraft(currentHp.toString());
-		}
-	}, [draft, currentHp, onCommit]);
-
-	return (
-		<input
-			type="number"
-			min={0}
-			max={maxHp}
-			value={draft}
-			placeholder="HP"
-			disabled={maxHp === undefined}
-			style={{ width: "4em" }}
-			onChange={(e) => setDraft(e.target.value)}
-			onBlur={commit}
-			onKeyDown={(e) => {
-				if (e.key === "Enter") commit();
-			}}
-		/>
-	);
-}
-
 export function App() {
 	const {
 		encounter,
-		events,
 		advanceTurn,
 		addCombatant,
 		removeCombatant,
@@ -179,103 +14,45 @@ export function App() {
 		adjustHp,
 	} = useEncounter();
 	const activeCombatant = encounter.combatants[encounter.activeIndex];
-	const [nameInput, setNameInput] = useState("");
-
-	const handleAdd = (e: FormEvent) => {
-		e.preventDefault();
-		if (nameInput.trim() === "") return;
-		addCombatant(nameInput);
-		setNameInput("");
-	};
 
 	return (
-		<div>
-			<h1>Initiative Tracker</h1>
+		<div className="mx-auto flex min-h-screen max-w-2xl flex-col gap-6 px-4 py-8">
+			{/* Header */}
+			<header className="space-y-1">
+				<h1 className="text-2xl font-bold tracking-tight">
+					Initiative Tracker
+				</h1>
+				{activeCombatant && (
+					<p className="text-sm text-muted-foreground">
+						Round {encounter.roundNumber} — Current: {activeCombatant.name}
+					</p>
+				)}
+			</header>
 
-			{activeCombatant && (
-				<p>
-					Round {encounter.roundNumber} — Current: {activeCombatant.name}
-				</p>
-			)}
-
-			<ul>
-				{encounter.combatants.map((c, i) => (
-					<li key={c.id}>
-						<EditableName
-							name={c.name}
-							combatantId={c.id}
+			{/* Combatant List */}
+			<div className="flex flex-1 flex-col gap-1 overflow-y-auto">
+				{encounter.combatants.length === 0 ? (
+					<p className="py-12 text-center text-sm text-muted-foreground">
+						No combatants yet — add one to get started
+					</p>
+				) : (
+					encounter.combatants.map((c, i) => (
+						<CombatantRow
+							key={c.id}
+							combatant={c}
 							isActive={i === encounter.activeIndex}
 							onRename={editCombatant}
-						/>{" "}
-						<input
-							type="number"
-							value={c.initiative ?? ""}
-							placeholder="Init"
-							style={{ width: "4em" }}
-							onChange={(e) => {
-								const raw = e.target.value;
-								if (raw === "") {
-									setInitiative(c.id, undefined);
-								} else {
-									const n = Number.parseInt(raw, 10);
-									if (!Number.isNaN(n)) {
-										setInitiative(c.id, n);
-									}
-								}
-							}}
-						/>{" "}
-						{c.maxHp !== undefined && c.currentHp !== undefined && (
-							<button type="button" onClick={() => adjustHp(c.id, -1)}>
-								-
-							</button>
-						)}
-						<CurrentHpInput
-							currentHp={c.currentHp}
-							maxHp={c.maxHp}
-							onCommit={(value) => {
-								if (c.currentHp === undefined) return;
-								const delta = value - c.currentHp;
-								if (delta !== 0) adjustHp(c.id, delta);
-							}}
+							onSetInitiative={setInitiative}
+							onRemove={removeCombatant}
+							onSetHp={setHp}
+							onAdjustHp={adjustHp}
 						/>
-						{c.maxHp !== undefined && <span>/</span>}
-						{c.maxHp !== undefined && c.currentHp !== undefined && (
-							<button type="button" onClick={() => adjustHp(c.id, 1)}>
-								+
-							</button>
-						)}{" "}
-						<MaxHpInput maxHp={c.maxHp} onCommit={(v) => setHp(c.id, v)} />{" "}
-						<button type="button" onClick={() => removeCombatant(c.id)}>
-							Remove
-						</button>
-					</li>
-				))}
-			</ul>
+					))
+				)}
+			</div>
 
-			<form onSubmit={handleAdd}>
-				<input
-					type="text"
-					value={nameInput}
-					onChange={(e) => setNameInput(e.target.value)}
-					placeholder="Combatant name"
-				/>
-				<button type="submit">Add Combatant</button>
-			</form>
-
-			<button type="button" onClick={advanceTurn}>
-				Next Turn
-			</button>
-
-			{events.length > 0 && (
-				<div>
-					<h2>Events</h2>
-					<ul>
-						{events.map((e, i) => (
-							<li key={`${e.type}-${i}`}>{formatEvent(e)}</li>
-						))}
-					</ul>
-				</div>
-			)}
+			{/* Action Bar */}
+			<ActionBar onAddCombatant={addCombatant} onAdvanceTurn={advanceTurn} />
 		</div>
 	);
 }

apps/web/src/components/action-bar.tsx

@@ -0,0 +1,39 @@
+import { type FormEvent, useState } from "react";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+
+interface ActionBarProps {
+	onAddCombatant: (name: string) => void;
+	onAdvanceTurn: () => void;
+}
+
+export function ActionBar({ onAddCombatant, onAdvanceTurn }: ActionBarProps) {
+	const [nameInput, setNameInput] = useState("");
+
+	const handleAdd = (e: FormEvent) => {
+		e.preventDefault();
+		if (nameInput.trim() === "") return;
+		onAddCombatant(nameInput);
+		setNameInput("");
+	};
+
+	return (
+		<div className="flex items-center gap-3 rounded-md border border-border bg-card px-4 py-3">
+			<form onSubmit={handleAdd} className="flex flex-1 items-center gap-2">
+				<Input
+					type="text"
+					value={nameInput}
+					onChange={(e) => setNameInput(e.target.value)}
+					placeholder="Combatant name"
+					className="max-w-xs"
+				/>
+				<Button type="submit" size="sm">
+					Add
+				</Button>
+			</form>
+			<Button variant="outline" size="sm" onClick={onAdvanceTurn}>
+				Next Turn
+			</Button>
+		</div>
+	);
+}

apps/web/src/components/combatant-row.tsx

@@ -0,0 +1,246 @@
+import type { CombatantId } from "@initiative/domain";
+import { X } from "lucide-react";
+import { useCallback, useRef, useState } from "react";
+import { cn } from "../lib/utils";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+
+interface Combatant {
+	readonly id: CombatantId;
+	readonly name: string;
+	readonly initiative?: number;
+	readonly maxHp?: number;
+	readonly currentHp?: number;
+}
+
+interface CombatantRowProps {
+	combatant: Combatant;
+	isActive: boolean;
+	onRename: (id: CombatantId, newName: string) => void;
+	onSetInitiative: (id: CombatantId, value: number | undefined) => void;
+	onRemove: (id: CombatantId) => void;
+	onSetHp: (id: CombatantId, maxHp: number | undefined) => void;
+	onAdjustHp: (id: CombatantId, delta: number) => void;
+}
+
+function EditableName({
+	name,
+	combatantId,
+	onRename,
+}: {
+	name: string;
+	combatantId: CombatantId;
+	onRename: (id: CombatantId, newName: string) => void;
+}) {
+	const [editing, setEditing] = useState(false);
+	const [draft, setDraft] = useState(name);
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	const commit = useCallback(() => {
+		const trimmed = draft.trim();
+		if (trimmed !== "" && trimmed !== name) {
+			onRename(combatantId, trimmed);
+		}
+		setEditing(false);
+	}, [draft, name, combatantId, onRename]);
+
+	const startEditing = useCallback(() => {
+		setDraft(name);
+		setEditing(true);
+		requestAnimationFrame(() => inputRef.current?.select());
+	}, [name]);
+
+	if (editing) {
+		return (
+			<Input
+				ref={inputRef}
+				type="text"
+				value={draft}
+				className="h-7 text-sm"
+				onChange={(e) => setDraft(e.target.value)}
+				onBlur={commit}
+				onKeyDown={(e) => {
+					if (e.key === "Enter") commit();
+					if (e.key === "Escape") setEditing(false);
+				}}
+			/>
+		);
+	}
+
+	return (
+		<button
+			type="button"
+			onClick={startEditing}
+			className="truncate text-left text-sm text-foreground hover:text-primary transition-colors"
+		>
+			{name}
+		</button>
+	);
+}
+
+function MaxHpInput({
+	maxHp,
+	onCommit,
+}: {
+	maxHp: number | undefined;
+	onCommit: (value: number | undefined) => void;
+}) {
+	const [draft, setDraft] = useState(maxHp?.toString() ?? "");
+	const prev = useRef(maxHp);
+
+	if (maxHp !== prev.current) {
+		prev.current = maxHp;
+		setDraft(maxHp?.toString() ?? "");
+	}
+
+	const commit = useCallback(() => {
+		if (draft === "") {
+			onCommit(undefined);
+			return;
+		}
+		const n = Number.parseInt(draft, 10);
+		if (!Number.isNaN(n) && n >= 1) {
+			onCommit(n);
+		} else {
+			setDraft(maxHp?.toString() ?? "");
+		}
+	}, [draft, maxHp, onCommit]);
+
+	return (
+		<Input
+			type="text"
+			inputMode="numeric"
+			value={draft}
+			placeholder="Max"
+			className="h-7 w-[7ch] text-center text-sm tabular-nums"
+			onChange={(e) => setDraft(e.target.value)}
+			onBlur={commit}
+			onKeyDown={(e) => {
+				if (e.key === "Enter") commit();
+			}}
+		/>
+	);
+}
+
+function CurrentHpInput({
+	currentHp,
+	maxHp,
+	onCommit,
+}: {
+	currentHp: number | undefined;
+	maxHp: number | undefined;
+	onCommit: (value: number) => void;
+}) {
+	const [draft, setDraft] = useState(currentHp?.toString() ?? "");
+	const prev = useRef(currentHp);
+
+	if (currentHp !== prev.current) {
+		prev.current = currentHp;
+		setDraft(currentHp?.toString() ?? "");
+	}
+
+	const commit = useCallback(() => {
+		if (currentHp === undefined) return;
+		if (draft === "") {
+			setDraft(currentHp.toString());
+			return;
+		}
+		const n = Number.parseInt(draft, 10);
+		if (!Number.isNaN(n)) {
+			onCommit(n);
+		} else {
+			setDraft(currentHp.toString());
+		}
+	}, [draft, currentHp, onCommit]);
+
+	return (
+		<Input
+			type="text"
+			inputMode="numeric"
+			value={draft}
+			placeholder="HP"
+			disabled={maxHp === undefined}
+			className="h-7 w-[7ch] text-center text-sm tabular-nums"
+			onChange={(e) => setDraft(e.target.value)}
+			onBlur={commit}
+			onKeyDown={(e) => {
+				if (e.key === "Enter") commit();
+			}}
+		/>
+	);
+}
+
+export function CombatantRow({
+	combatant,
+	isActive,
+	onRename,
+	onSetInitiative,
+	onRemove,
+	onSetHp,
+	onAdjustHp,
+}: CombatantRowProps) {
+	const { id, name, initiative, maxHp, currentHp } = combatant;
+
+	return (
+		<div
+			className={cn(
+				"grid grid-cols-[3rem_1fr_auto_2rem] items-center gap-3 rounded-md px-3 py-2 transition-colors",
+				isActive
+					? "border-l-2 border-l-accent bg-accent/10"
+					: "border-l-2 border-l-transparent",
+			)}
+		>
+			{/* Initiative */}
+			<Input
+				type="text"
+				inputMode="numeric"
+				value={initiative ?? ""}
+				placeholder="--"
+				className="h-7 w-[6ch] text-center text-sm tabular-nums"
+				onChange={(e) => {
+					const raw = e.target.value;
+					if (raw === "") {
+						onSetInitiative(id, undefined);
+					} else {
+						const n = Number.parseInt(raw, 10);
+						if (!Number.isNaN(n)) {
+							onSetInitiative(id, n);
+						}
+					}
+				}}
+			/>
+
+			{/* Name */}
+			<EditableName name={name} combatantId={id} onRename={onRename} />
+
+			{/* HP */}
+			<div className="flex items-center gap-1">
+				<CurrentHpInput
+					currentHp={currentHp}
+					maxHp={maxHp}
+					onCommit={(value) => {
+						if (currentHp === undefined) return;
+						const delta = value - currentHp;
+						if (delta !== 0) onAdjustHp(id, delta);
+					}}
+				/>
+				{maxHp !== undefined && (
+					<span className="text-sm tabular-nums text-muted-foreground">/</span>
+				)}
+				<MaxHpInput maxHp={maxHp} onCommit={(v) => onSetHp(id, v)} />
+			</div>
+
+			{/* Actions */}
+			<Button
+				variant="ghost"
+				size="icon"
+				className="h-7 w-7 text-muted-foreground hover:text-destructive"
+				onClick={() => onRemove(id)}
+				title="Remove combatant"
+				aria-label="Remove combatant"
+			>
+				<X size={16} />
+			</Button>
+		</div>
+	);
+}

apps/web/src/components/ui/button.tsx

@@ -0,0 +1,38 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ButtonHTMLAttributes } from "react";
+import { cn } from "../../lib/utils";
+
+const buttonVariants = cva(
+	"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/90",
+				outline:
+					"border border-border bg-transparent hover:bg-card hover:text-foreground",
+				ghost: "hover:bg-card hover:text-foreground",
+			},
+			size: {
+				default: "h-9 px-4 py-2",
+				sm: "h-8 px-3 text-xs",
+				icon: "h-8 w-8",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
+	VariantProps<typeof buttonVariants>;
+
+export function Button({ className, variant, size, ...props }: ButtonProps) {
+	return (
+		<button
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
+}

apps/web/src/components/ui/input.tsx

@@ -0,0 +1,19 @@
+import { forwardRef, type InputHTMLAttributes } from "react";
+import { cn } from "../../lib/utils";
+
+type InputProps = InputHTMLAttributes<HTMLInputElement>;
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+	({ className, ...props }, ref) => {
+		return (
+			<input
+				ref={ref}
+				className={cn(
+					"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50",
+					className,
+				)}
+				{...props}
+			/>
+		);
+	},
+);

apps/web/src/index.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+@theme {
+	--color-background: #0f172a;
+	--color-foreground: #e2e8f0;
+	--color-muted: #64748b;
+	--color-muted-foreground: #94a3b8;
+	--color-card: #1e293b;
+	--color-card-foreground: #e2e8f0;
+	--color-border: #334155;
+	--color-input: #334155;
+	--color-primary: #3b82f6;
+	--color-primary-foreground: #ffffff;
+	--color-accent: #3b82f6;
+	--color-destructive: #ef4444;
+	--radius-sm: 0.25rem;
+	--radius-md: 0.375rem;
+	--radius-lg: 0.5rem;
+	--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+}
+
+body {
+	background-color: var(--color-background);
+	color: var(--color-foreground);
+	font-family: var(--font-sans);
+}

apps/web/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}

apps/web/src/main.tsx

@@ -1,6 +1,7 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { App } from "./App";
+import "./index.css";
 
 const root = document.getElementById("root");
 if (root) {