Redesign PF2e action icons with diamond-parallel geometry

Align cutout edges to 45° angles parallel to outer diamond shape.
Multi-action icons use outlined diamonds with matched border width.

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

.claude/skills/commit/SKILL.md

@@ -1,7 +1,6 @@
 ---
 name: commit
 description: Create a git commit with pre-commit hooks (bypasses sandbox restrictions).
-disable-model-invocation: true
 allowed-tools: Bash(git *), Bash(pnpm *)
 ---
 

.claude/skills/ship/SKILL.md

@@ -0,0 +1,54 @@
+---
+name: ship
+description: Commit, tag with the next version, and push to remote.
+disable-model-invocation: true
+allowed-tools: Bash(git *), Bash(pnpm *), Skill
+---
+
+## Instructions
+
+Commit current changes, create the next version tag, and push everything to remote.
+
+### Step 1 — Commit
+
+Use the `/commit` skill to stage and commit changes. Pass along any user arguments as the commit message.
+
+```
+/commit $ARGUMENTS
+```
+
+### Step 2 — Tag
+
+Get the latest tag and increment the patch number (e.g., `0.9.27` → `0.9.28`). Create the tag:
+
+```bash
+git tag --sort=-v:refname | head -1
+```
+
+```bash
+git tag <next-version>
+```
+
+### Step 3 — Push
+
+Push the commit and tag to remote:
+
+```bash
+git push && git push --tags
+```
+
+### Step 4 — Verify
+
+Confirm the tag exists on the pushed commit:
+
+```bash
+git log --oneline -1 --decorate
+```
+
+## User arguments
+
+```text
+$ARGUMENTS
+```
+
+If the user provided arguments, treat them as the commit message or guidance for what to commit.

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

@@ -10,6 +10,7 @@ import { Brain, Pencil, X } from "lucide-react";
 import { type Ref, useCallback, useEffect, useRef, useState } from "react";
 import { useEncounterContext } from "../contexts/encounter-context.js";
 import { useInitiativeRollsContext } from "../contexts/initiative-rolls-context.js";
+import { useRulesEditionContext } from "../contexts/rules-edition-context.js";
 import { useSidePanelContext } from "../contexts/side-panel-context.js";
 import { useLongPress } from "../hooks/use-long-press.js";
 import { cn } from "../lib/utils.js";
@@ -415,12 +416,14 @@ function InitiativeDisplay({
 function rowBorderClass(
 	isActive: boolean,
 	isConcentrating: boolean | undefined,
+	isPf2e: boolean,
 ): string {
-	if (isActive && isConcentrating)
+	const showConcentration = isConcentrating && !isPf2e;
+	if (isActive && showConcentration)
 		return "border border-l-2 border-active-row-border border-l-purple-400 bg-active-row-bg card-glow";
 	if (isActive)
 		return "border border-l-2 border-active-row-border bg-active-row-bg card-glow";
-	if (isConcentrating)
+	if (showConcentration)
 		return "border border-l-2 border-transparent border-l-purple-400";
 	return "border border-l-2 border-transparent";
 }
@@ -455,6 +458,8 @@ export function CombatantRow({
 	const { selectedCreatureId, showCreature, toggleCollapse } =
 		useSidePanelContext();
 	const { handleRollInitiative } = useInitiativeRollsContext();
+	const { edition } = useRulesEditionContext();
+	const isPf2e = edition === "pf2e";
 
 	// Derive what was previously conditional props
 	const isStatBlockOpen = combatant.creatureId === selectedCreatureId;
@@ -495,12 +500,16 @@ export function CombatantRow({
 		const tempHpDropped =
 			prevTempHp !== undefined && (combatant.tempHp ?? 0) < prevTempHp;
 
-		if ((realHpDropped || tempHpDropped) && combatant.isConcentrating) {
+		if (
+			(realHpDropped || tempHpDropped) &&
+			combatant.isConcentrating &&
+			!isPf2e
+		) {
 			setIsPulsing(true);
 			clearTimeout(pulseTimerRef.current);
 			pulseTimerRef.current = setTimeout(() => setIsPulsing(false), 1200);
 		}
-	}, [currentHp, combatant.tempHp, combatant.isConcentrating]);
+	}, [currentHp, combatant.tempHp, combatant.isConcentrating, isPf2e]);
 
 	useEffect(() => {
 		if (!combatant.isConcentrating) {
@@ -518,24 +527,33 @@ export function CombatantRow({
 			ref={ref}
 			className={cn(
 				"group rounded-lg pr-3 transition-colors",
-				rowBorderClass(isActive, combatant.isConcentrating),
+				rowBorderClass(isActive, combatant.isConcentrating, isPf2e),
 				isPulsing && "animate-concentration-pulse",
 			)}
 		>
-			<div className="grid grid-cols-[2rem_3rem_auto_1fr_auto_2rem] items-center gap-1.5 py-3 sm:grid-cols-[2rem_3.5rem_auto_1fr_auto_2rem] sm:gap-3 sm:py-2">
-				{/* Concentration */}
-				<button
-					type="button"
-					onClick={() => toggleConcentration(id)}
-					title="Concentrating"
-					aria-label="Toggle concentration"
-					className={cn(
-						"-my-2 -ml-[2px] flex w-full items-center justify-center self-stretch pl-[14px] transition-opacity hover:text-hover-neutral hover:opacity-100",
-						concentrationIconClass(combatant.isConcentrating, dimmed),
-					)}
-				>
-					<Brain size={16} />
-				</button>
+			<div
+				className={cn(
+					"grid items-center gap-1.5 py-3 sm:gap-3 sm:py-2",
+					isPf2e
+						? "grid-cols-[3rem_auto_1fr_auto_2rem] pl-3 sm:grid-cols-[3.5rem_auto_1fr_auto_2rem]"
+						: "grid-cols-[2rem_3rem_auto_1fr_auto_2rem] sm:grid-cols-[2rem_3.5rem_auto_1fr_auto_2rem]",
+				)}
+			>
+				{/* Concentration — hidden in PF2e mode */}
+				{!isPf2e && (
+					<button
+						type="button"
+						onClick={() => toggleConcentration(id)}
+						title="Concentrating"
+						aria-label="Toggle concentration"
+						className={cn(
+							"-my-2 -ml-[2px] flex w-full items-center justify-center self-stretch pl-[14px] transition-opacity hover:text-hover-neutral hover:opacity-100",
+							concentrationIconClass(combatant.isConcentrating, dimmed),
+						)}
+					>
+						<Brain size={16} />
+					</button>
+				)}
 
 				{/* Initiative */}
 				<div className="rounded-md bg-muted/30 px-1">

apps/web/src/components/condition-picker.tsx

@@ -162,20 +162,35 @@ export function ConditionPicker({
 									<span className="min-w-5 rounded-full bg-accent px-1.5 py-0.5 text-center font-medium text-primary-foreground text-xs">
 										{editing.value}
 									</span>
-									<button
-										type="button"
-										className="rounded p-0.5 text-foreground hover:bg-accent/40"
-										onMouseDown={(e) => e.preventDefault()}
-										onClick={(e) => {
-											e.stopPropagation();
-											setEditing({
-												...editing,
-												value: editing.value + 1,
-											});
-										}}
-									>
-										<Plus className="h-3 w-3" />
-									</button>
+									{(() => {
+										const atMax =
+											def.maxValue !== undefined &&
+											editing.value >= def.maxValue;
+										return (
+											<button
+												type="button"
+												className={cn(
+													"rounded p-0.5",
+													atMax
+														? "cursor-not-allowed text-muted-foreground opacity-50"
+														: "text-foreground hover:bg-accent/40",
+												)}
+												disabled={atMax}
+												onMouseDown={(e) => e.preventDefault()}
+												onClick={(e) => {
+													e.stopPropagation();
+													if (!atMax) {
+														setEditing({
+															...editing,
+															value: editing.value + 1,
+														});
+													}
+												}}
+											>
+												<Plus className="h-3 w-3" />
+											</button>
+										);
+									})()}
 									<button
 										type="button"
 										className="ml-0.5 rounded p-0.5 text-foreground hover:bg-accent/40"

apps/web/src/components/stat-block-parts.tsx

@@ -61,11 +61,13 @@ function TraitSegments({
 	);
 }
 
-const ACTION_DIAMOND = "M50 2 L96 50 L50 98 L4 50 Z M48 28 L78 50 L48 72 Z";
+const ACTION_DIAMOND = "M50 2 L96 50 L50 98 L4 50 Z M48 27 L71 50 L48 73 Z";
 const ACTION_DIAMOND_SOLID = "M50 2 L96 50 L50 98 L4 50 Z";
+const ACTION_DIAMOND_OUTLINE =
+	"M90 2 L136 50 L90 98 L44 50 Z M90 29 L111 50 L90 71 L69 50 Z";
 const FREE_ACTION_DIAMOND =
 	"M50 2 L96 50 L50 98 L4 50 Z M50 12 L12 50 L50 88 L88 50 Z";
-const FREE_ACTION_CHEVRON = "M48 28 L78 50 L48 72 Z";
+const FREE_ACTION_CHEVRON = "M48 27 L71 50 L48 73 Z";
 const REACTION_ARROW =
 	"M75 15 A42 42 0 1 0 85 55 L72 55 A30 30 0 1 1 65 25 L65 40 L92 20 L65 0 L65 15 Z";
 
@@ -101,7 +103,7 @@ function ActivityIcon({ activity }: Readonly<{ activity: ActivityCost }>) {
 			<svg aria-hidden="true" className={cls} viewBox="0 0 140 100">
 				<path d={ACTION_DIAMOND_SOLID} fill="currentColor" />
 				<path
-					d="M90 2 L136 50 L90 98 L44 50 Z M88 28 L118 50 L88 72 Z"
+					d={ACTION_DIAMOND_OUTLINE}
 					fill="currentColor"
 					fillRule="evenodd"
 				/>
@@ -113,7 +115,7 @@ function ActivityIcon({ activity }: Readonly<{ activity: ActivityCost }>) {
 			<path d={ACTION_DIAMOND_SOLID} fill="currentColor" />
 			<path d="M90 2 L136 50 L90 98 L44 50 Z" fill="currentColor" />
 			<path
-				d="M130 2 L176 50 L130 98 L84 50 Z M128 28 L158 50 L128 72 Z"
+				d="M130 2 L176 50 L130 98 L84 50 Z M130 29 L151 50 L130 71 L109 50 Z"
 				fill="currentColor"
 				fillRule="evenodd"
 			/>

packages/domain/src/__tests__/toggle-condition.test.ts

@@ -169,6 +169,60 @@ describe("setConditionValue", () => {
 		);
 		expectDomainError(result, "unknown-condition");
 	});
+
+	it("clamps value to maxValue for capped conditions", () => {
+		const e = enc([makeCombatant("A")]);
+		const result = setConditionValue(e, combatantId("A"), "dying", 6);
+		if (isDomainError(result)) throw new Error(result.message);
+
+		expect(result.encounter.combatants[0].conditions).toEqual([
+			{ id: "dying", value: 4 },
+		]);
+		expect(result.events[0]).toMatchObject({
+			type: "ConditionAdded",
+			value: 4,
+		});
+	});
+
+	it("allows value at exactly the max", () => {
+		const e = enc([makeCombatant("A")]);
+		const result = setConditionValue(e, combatantId("A"), "doomed", 3);
+		if (isDomainError(result)) throw new Error(result.message);
+
+		expect(result.encounter.combatants[0].conditions).toEqual([
+			{ id: "doomed", value: 3 },
+		]);
+	});
+
+	it("allows value below the max", () => {
+		const e = enc([makeCombatant("A")]);
+		const result = setConditionValue(e, combatantId("A"), "wounded", 2);
+		if (isDomainError(result)) throw new Error(result.message);
+
+		expect(result.encounter.combatants[0].conditions).toEqual([
+			{ id: "wounded", value: 2 },
+		]);
+	});
+
+	it("does not cap conditions without a maxValue", () => {
+		const e = enc([makeCombatant("A")]);
+		const result = setConditionValue(e, combatantId("A"), "frightened", 10);
+		if (isDomainError(result)) throw new Error(result.message);
+
+		expect(result.encounter.combatants[0].conditions).toEqual([
+			{ id: "frightened", value: 10 },
+		]);
+	});
+
+	it("clamps when updating an existing capped condition", () => {
+		const e = enc([makeCombatant("A", [{ id: "slowed-pf2e", value: 2 }])]);
+		const result = setConditionValue(e, combatantId("A"), "slowed-pf2e", 5);
+		if (isDomainError(result)) throw new Error(result.message);
+
+		expect(result.encounter.combatants[0].conditions).toEqual([
+			{ id: "slowed-pf2e", value: 3 },
+		]);
+	});
 });
 
 describe("decrementCondition", () => {

packages/domain/src/conditions.ts

@@ -57,6 +57,8 @@ export interface ConditionDefinition {
 	/** When set, the condition only appears in these systems' pickers. */
 	readonly systems?: readonly RulesEdition[];
 	readonly valued?: boolean;
+	/** Rule-defined maximum value for PF2e valued conditions. */
+	readonly maxValue?: number;
 }
 
 export function getConditionDescription(
@@ -329,6 +331,7 @@ export const CONDITION_DEFINITIONS: readonly ConditionDefinition[] = [
 		color: "red",
 		systems: ["pf2e"],
 		valued: true,
+		maxValue: 3,
 	},
 	{
 		id: "drained",
@@ -353,6 +356,7 @@ export const CONDITION_DEFINITIONS: readonly ConditionDefinition[] = [
 		color: "red",
 		systems: ["pf2e"],
 		valued: true,
+		maxValue: 4,
 	},
 	{
 		id: "enfeebled",
@@ -475,6 +479,7 @@ export const CONDITION_DEFINITIONS: readonly ConditionDefinition[] = [
 		color: "sky",
 		systems: ["pf2e"],
 		valued: true,
+		maxValue: 3,
 	},
 	{
 		id: "stupefied",
@@ -510,6 +515,7 @@ export const CONDITION_DEFINITIONS: readonly ConditionDefinition[] = [
 		color: "red",
 		systems: ["pf2e"],
 		valued: true,
+		maxValue: 3,
 	},
 ] as const;
 

packages/domain/src/toggle-condition.ts

@@ -92,7 +92,11 @@ export function setConditionValue(
 	const { combatant: target } = found;
 	const current = target.conditions ?? [];
 
-	if (value <= 0) {
+	const def = CONDITION_DEFINITIONS.find((d) => d.id === conditionId);
+	const clampedValue =
+		def?.maxValue === undefined ? value : Math.min(value, def.maxValue);
+
+	if (clampedValue <= 0) {
 		const filtered = current.filter((c) => c.id !== conditionId);
 		const newConditions = filtered.length > 0 ? filtered : undefined;
 		return {
@@ -106,7 +110,7 @@ export function setConditionValue(
 	const existing = current.find((c) => c.id === conditionId);
 	if (existing) {
 		const updated = current.map((c) =>
-			c.id === conditionId ? { ...c, value } : c,
+			c.id === conditionId ? { ...c, value: clampedValue } : c,
 		);
 		return {
 			encounter: applyConditions(encounter, combatantId, updated),
@@ -115,17 +119,25 @@ export function setConditionValue(
 					type: "ConditionAdded",
 					combatantId,
 					condition: conditionId,
-					value,
+					value: clampedValue,
 				},
 			],
 		};
 	}
 
-	const added = sortByDefinitionOrder([...current, { id: conditionId, value }]);
+	const added = sortByDefinitionOrder([
+		...current,
+		{ id: conditionId, value: clampedValue },
+	]);
 	return {
 		encounter: applyConditions(encounter, combatantId, added),
 		events: [
-			{ type: "ConditionAdded", combatantId, condition: conditionId, value },
+			{
+				type: "ConditionAdded",
+				combatantId,
+				condition: conditionId,
+				value: clampedValue,
+			},
 		],
 	};
 }

specs/003-combatant-state/spec.md

@@ -260,6 +260,8 @@ Acceptance scenarios:
 4. **Given** concentration is active and the row is not hovered, **Then** the Brain icon remains visible.
 5. **Given** concentration is active, **When** the user clicks the Brain icon again, **Then** concentration deactivates and the icon hides (unless the row is still hovered).
 6. **Given** the Brain icon is visible, **When** the user hovers over it, **Then** a tooltip reading "Concentrating" appears.
+7. **Given** the game system is Pathfinder 2e, **When** viewing any combatant row (hovered or not), **Then** the Brain icon is not shown — even if `isConcentrating` is true.
+8. **Given** a combatant has `isConcentrating` true and the game system is PF2e, **When** the user switches to a D&D system, **Then** the Brain icon appears with active styling (concentration state was preserved).
 
 **Story CC-6 — Visual Feedback for Concentration (P2)**
 As a DM, I want concentrating combatants to have a visible row accent so I can identify them at a glance without interacting.
@@ -268,6 +270,7 @@ Acceptance scenarios:
 1. **Given** concentration is active, **When** viewing the encounter tracker, **Then** the combatant row shows a colored left border accent (`border-l-purple-400`).
 2. **Given** concentration is inactive, **Then** no concentration accent is shown.
 3. **Given** concentration is toggled off, **Then** the left border accent disappears immediately.
+4. **Given** the game system is Pathfinder 2e and a combatant has `isConcentrating` true, **When** viewing the encounter tracker, **Then** no purple left border accent is shown on that row.
 
 **Story CC-7 — Damage Pulse Alert (P3)**
 As a DM, I want a visual alert when a concentrating combatant takes damage so I remember to call for a concentration check.
@@ -277,6 +280,7 @@ Acceptance scenarios:
 2. **Given** a combatant is concentrating, **When** the combatant is healed, **Then** no pulse/flash occurs.
 3. **Given** a combatant is NOT concentrating, **When** damage is taken, **Then** no pulse/flash occurs.
 4. **Given** a concentrating combatant takes damage, **When** the animation completes, **Then** the row returns to its normal concentration-active appearance.
+5. **Given** the game system is Pathfinder 2e and a combatant has `isConcentrating` true, **When** the combatant takes damage, **Then** no pulse/flash animation occurs.
 
 **Story CC-8 — Game System Setting (P2)**
 As a DM who runs games across D&D 5e, 5.5e, and Pathfinder 2e, I want to choose which game system the tracker uses so that conditions, bestiary search, stat block layout, and initiative calculation all match the game I am running.
@@ -310,6 +314,16 @@ Acceptance scenarios:
 9. **Given** a combatant has Clumsy 3, **When** the user hovers over the condition icon, **Then** the tooltip shows the condition name, the current value, and the PF2e rules description.
 10. **Given** a valued condition counter is showing, **When** the user clicks a different valued condition, **Then** the previous counter is replaced (only one counter at a time).
 
+**Story CC-10 — Condition Value Maximums (P2)**
+As a DM running a PF2e encounter, I want valued conditions to be capped at their rule-defined maximum so I cannot accidentally increment them beyond their meaningful range.
+
+Acceptance scenarios:
+1. **Given** the game system is Pathfinder 2e, **When** a valued condition reaches its maximum (dying 4, doomed 3, wounded 3, slowed 3), **Then** the `[+]` button in the condition picker counter is disabled.
+2. **Given** a combatant has Dying 4, **When** the user opens the condition picker, **Then** the counter shows 4 and `[+]` is disabled; `[-]` and `[✓]` remain active.
+3. **Given** a combatant has Slowed 3, **When** the user clicks the Slowed icon tag on the row, **Then** the value decrements to 2 (decrement is unaffected by the cap).
+4. **Given** the game system is D&D (5e or 5.5e), **When** interacting with conditions, **Then** no maximum enforcement is applied.
+5. **Given** a PF2e valued condition without a defined maximum (e.g., Frightened, Clumsy), **When** incrementing, **Then** no cap is enforced — the value can increase without limit.
+
 ### Requirements
 
 - **FR-032**: When a D&D game system is active, the system MUST support the following 15 standard D&D 5e/5.5e conditions: blinded, charmed, deafened, exhaustion, frightened, grappled, incapacitated, invisible, paralyzed, petrified, poisoned, prone, restrained, stunned, unconscious. When Pathfinder 2e is active, the system MUST support the PF2e condition set (see FR-103).
@@ -360,6 +374,11 @@ Acceptance scenarios:
 - **FR-105**: For PF2e valued conditions, the condition icon tag MUST display the current value as a small numeric badge (e.g., "2" next to the Frightened icon). Non-valued PF2e conditions display without a badge.
 - **FR-106**: The condition data model MUST use `ConditionEntry` objects (`{ id: ConditionId, value?: number }`) instead of bare `ConditionId` values. D&D conditions MUST be stored without a `value` field (backwards-compatible).
 - **FR-107**: Switching the game system MUST NOT clear existing combatant conditions. Conditions from the previous game system that are not valid in the new system remain stored but are hidden from display until the user switches back.
+- **FR-108**: The following PF2e valued conditions MUST have maximum values enforced: dying (max 4), doomed (max 3), wounded (max 3), slowed (max 3). All other valued conditions have no enforced maximum.
+- **FR-109**: When a PF2e valued condition is at its maximum value, the `[+]` increment button in the condition picker counter MUST be disabled (visually dimmed and non-interactive).
+- **FR-110**: Maximum value enforcement MUST only apply when the Pathfinder 2e game system is active. D&D conditions are unaffected.
+- **FR-111**: When Pathfinder 2e is the active game system, the concentration UI (Brain icon toggle, purple left border accent, damage pulse animation) MUST be hidden entirely. The Brain icon MUST NOT be shown on hover or at rest, and the concentration toggle MUST NOT be interactive.
+- **FR-112**: Switching the game system MUST NOT clear or modify `isConcentrating` state on any combatant. The state MUST be preserved in storage and restored to the UI when switching back to a D&D game system.
 
 ### Edge Cases
 
@@ -375,8 +394,9 @@ Acceptance scenarios:
 - The settings modal is app-level UI; it does not interact with encounter state.
 - When the game system is switched from D&D to PF2e, existing D&D conditions on combatants are hidden (not deleted). Switching back to D&D restores them.
 - PF2e valued condition at value 0 is treated as removed — it MUST NOT appear on the row.
-- Dying 4 in PF2e has special mechanical significance (death), but the system does not enforce this automatically — it displays the value only.
+- Dying, doomed, wounded, and slowed have enforced maximum values in PF2e (4, 3, 3, 3 respectively). The `[+]` button is disabled at the cap. The dynamic dying cap based on doomed value (dying max = 4 − doomed) is not enforced — only the static maximum applies.
 - Persistent damage is excluded from the PF2e MVP condition set. It can be added as a follow-up feature.
+- When PF2e is active, concentration state (`isConcentrating`) is preserved in storage but the entire concentration UI is hidden. Switching back to D&D restores Brain icons, purple borders, and pulse behavior without data loss.
 
 ---