From caa18c671cfe380aa33fe3eae9907ff0a3fd9e84 Mon Sep 17 00:00:00 2001
From: Igor Serebryany <igor47@moomers.org>
Date: Fri, 7 Nov 2025 19:08:27 -0800
Subject: [PATCH 01/12] feat: prod sql commands

---
 mise.toml | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/mise.toml b/mise.toml
index da32e11..9fc3dec 100644
--- a/mise.toml
+++ b/mise.toml
@@ -79,6 +79,33 @@ description = "Remove the Cloud Run service and migration job"
 run = "gcloud beta run services logs tail prod-app --project=csheet-475917 --region=us-central1"
 description = "Tail production Cloud Run logs"
 
+[tasks."db:prod:psql"]
+run = "gcloud sql connect app-db-7205418 --project=csheet-475917 --database=csheet --user=app"
+description = "Connect to production database (interactive psql)"
+
+[tasks."db:prod:proxy"]
+run = """
+  echo "Starting Cloud SQL Proxy for production database..."
+  echo "Connection will be available at: localhost:5433"
+  echo "Database: csheet"
+  echo "User: app"
+  echo ""
+  echo "Connect with DBeaver using:"
+  echo "  Host: localhost"
+  echo "  Port: 5433"
+  echo "  Database: csheet"
+  echo "  Username: app"
+  echo "  Password: (retrieve from Secret Manager)"
+  echo ""
+  echo "To get the password, run:"
+  echo "  gcloud secrets versions access latest --secret=prod-postgres-password --project=csheet-475917"
+  echo ""
+  echo "Press Ctrl+C to stop the proxy"
+  echo ""
+  gcloud sql instances describe app-db-7205418 --project=csheet-475917 --format="value(connectionName)" | xargs -I {} cloud-sql-proxy {} --port 5433
+"""
+description = "Start Cloud SQL Proxy tunnel to production database (localhost:5433)"
+
 [tasks.install]
 run = "bun install"
 description = "Install dependencies"

From 3117a1d0c86da4feefeb05b63f2084f9d835f5b1 Mon Sep 17 00:00:00 2001
From: Igor Serebryany <igor47@moomers.org>
Date: Fri, 7 Nov 2025 19:13:30 -0800
Subject: [PATCH 02/12] infra: give the db a public ip

allows the proxy commands to work so i can look at the db from my laptop
---
 pulumi/infra/index.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/pulumi/infra/index.ts b/pulumi/infra/index.ts
index 503cc98..56e45db 100644
--- a/pulumi/infra/index.ts
+++ b/pulumi/infra/index.ts
@@ -230,13 +230,15 @@ const sqlInstance = new gcp.sql.DatabaseInstance(
     databaseVersion: "POSTGRES_16",
     project,
     region,
+    deletionProtection: stack === "prod" ? true : undefined,
     settings: {
       tier: dbTier,
       availabilityType: stack === "prod" ? "REGIONAL" : undefined,
       edition: stack === "prod" ? "ENTERPRISE" : undefined,
       ipConfiguration: {
         privateNetwork: network.id,
-        ipv4Enabled: false,
+        ipv4Enabled: stack === "prod",
+        authorizedNetworks: stack === "prod" ? [] : undefined,
       },
       backupConfiguration: {
         enabled: true,
@@ -245,7 +247,8 @@ const sqlInstance = new gcp.sql.DatabaseInstance(
         location: "us",
         transactionLogRetentionDays: 7,
         backupRetentionSettings: {
-          retainedBackups: stack === "prod" ? 90 : 7,
+          retainedBackups: stack === "prod" ? 30 : 7,
+          retentionUnit: stack === "prod" ? "COUNT" : undefined,
         },
       },
       diskAutoresize: true,

From c3cfc5f5cbe59f30f21ba5bd6889569b290617f6 Mon Sep 17 00:00:00 2001
From: Igor Serebryany <igor47@moomers.org>
Date: Sun, 9 Nov 2025 09:16:02 -0800
Subject: [PATCH 03/12] refactor: correct form change delay

we want a delay, so the submit request can cancel a validation request. otherwise, here's not enough time. we kill the delay in forms we haven't configured correctly yet. we figure out a way to handle from error hiding -- it should be the UIs job, not the service layers
---
 src/components/AbilitiesEditForm.tsx    |  2 +-
 src/components/CastSpellForm.tsx        |  2 +-
 src/components/ChargeManagementForm.tsx |  2 +-
 src/components/ClassEditForm.tsx        |  2 +-
 src/components/CoinsEditForm.tsx        |  2 +-
 src/components/CreateItemForm.tsx       |  2 ++
 src/components/HitDiceEditForm.tsx      | 19 +++++++++++-----
 src/components/HitPointsEditForm.tsx    | 17 +++++++++-----
 src/components/LearnSpellForm.tsx       |  2 +-
 src/components/LongRestForm.tsx         |  2 +-
 src/components/PrepareSpellForm.tsx     |  2 +-
 src/components/ShortRestForm.tsx        |  2 +-
 src/components/SkillsEditForm.tsx       |  2 +-
 src/components/SpellSlotsEditForm.tsx   |  2 +-
 src/components/TraitEditForm.tsx        |  2 +-
 src/lib/formErrors.ts                   | 20 +++++++++++++++++
 src/services/updateHitDice.ts           | 18 +++++++--------
 src/services/updateHitPoints.ts         | 30 +++++++++++--------------
 18 files changed, 79 insertions(+), 51 deletions(-)

diff --git a/src/components/AbilitiesEditForm.tsx b/src/components/AbilitiesEditForm.tsx
index 04026bd..2891eae 100644
--- a/src/components/AbilitiesEditForm.tsx
+++ b/src/components/AbilitiesEditForm.tsx
@@ -133,7 +133,7 @@ export const AbilitiesEditForm = ({ character, values, errors = {} }: AbilitiesE
         id="abilities-edit-form"
         hx-post={`/characters/${character.id}/edit/abilities`}
         hx-vals='{"is_check": "true"}'
-        hx-trigger="change delay:300ms"
+        hx-trigger="change"
         hx-target="#editModalContent"
         hx-swap="innerHTML"
         class="needs-validation"
diff --git a/src/components/CastSpellForm.tsx b/src/components/CastSpellForm.tsx
index 8cad22c..119a00d 100644
--- a/src/components/CastSpellForm.tsx
+++ b/src/components/CastSpellForm.tsx
@@ -88,7 +88,7 @@ export const CastSpellForm = ({ character, values = {}, errors = {} }: CastSpell
           id="cast-spell-form"
           hx-post={`/characters/${character.id}/castspell`}
           hx-vals='{"is_check": "true"}'
-          hx-trigger="change delay:300ms"
+          hx-trigger="change"
           hx-target="#editModalContent"
           hx-swap="innerHTML"
           class="needs-validation"
diff --git a/src/components/ChargeManagementForm.tsx b/src/components/ChargeManagementForm.tsx
index 3f7f794..bdacaa4 100644
--- a/src/components/ChargeManagementForm.tsx
+++ b/src/components/ChargeManagementForm.tsx
@@ -47,7 +47,7 @@ export const ChargeManagementForm = ({
           id="charge-edit-form"
           hx-post={`/characters/${characterId}/items/${item.id}/charges`}
           hx-vals='{"is_check": "true"}'
-          hx-trigger="change delay:300ms"
+          hx-trigger="change"
           hx-target="#editModalContent"
           hx-swap="innerHTML"
           class="needs-validation"
diff --git a/src/components/ClassEditForm.tsx b/src/components/ClassEditForm.tsx
index d328cfd..4a11466 100644
--- a/src/components/ClassEditForm.tsx
+++ b/src/components/ClassEditForm.tsx
@@ -76,7 +76,7 @@ export const ClassEditForm = ({ character, values, errors }: ClassEditFormProps)
           id="class-edit-form"
           hx-post={`/characters/${character.id}/edit/class`}
           hx-vals='{"is_check": "true"}'
-          hx-trigger="change delay:300ms"
+          hx-trigger="change"
           hx-target="#editModalContent"
           hx-swap="innerHTML"
           class="needs-validation"
diff --git a/src/components/CoinsEditForm.tsx b/src/components/CoinsEditForm.tsx
index cd53209..c42dec1 100644
--- a/src/components/CoinsEditForm.tsx
+++ b/src/components/CoinsEditForm.tsx
@@ -121,7 +121,7 @@ export const CoinsEditForm = ({ character, values = {}, errors = {} }: CoinsEdit
         id="coins-edit-form"
         hx-post={`/characters/${character.id}/edit/coins`}
         hx-vals='{"is_check": "true"}'
-        hx-trigger="change delay:300ms"
+        hx-trigger="change"
         hx-target="#editModalContent"
         hx-swap="innerHTML"
         class="needs-validation"
diff --git a/src/components/CreateItemForm.tsx b/src/components/CreateItemForm.tsx
index 1d1b093..6155371 100644
--- a/src/components/CreateItemForm.tsx
+++ b/src/components/CreateItemForm.tsx
@@ -211,6 +211,7 @@ export const CreateItemForm = ({ character, values, errors }: CreateItemFormProp
           </label>
           <Select
             id="item-category"
+            hx-preserve
             name="category"
             placeholder="Select category..."
             options={ItemCategories.map((cat) => ({
@@ -724,6 +725,7 @@ export const CreateItemForm = ({ character, values, errors }: CreateItemFormProp
             hx-vals='{"is_check": "false"}'
             hx-target="#editModalContent"
             hx-swap="innerHTML"
+            hx-sync="closest form:abort"
           >
             Add Item
           </button>
diff --git a/src/components/HitDiceEditForm.tsx b/src/components/HitDiceEditForm.tsx
index a4a24d2..0a382fe 100644
--- a/src/components/HitDiceEditForm.tsx
+++ b/src/components/HitDiceEditForm.tsx
@@ -1,5 +1,6 @@
 import { HitDiceDisplay } from "@src/components/ui/HitDiceDisplay"
 import type { HitDieType } from "@src/lib/dnd"
+import { ignoreCheckEmptyErrors } from "@src/lib/formErrors"
 import clsx from "clsx"
 
 export interface HitDiceEditFormProps {
@@ -14,8 +15,8 @@ export const HitDiceEditForm = ({
   characterId,
   allHitDice,
   availableHitDice,
-  values,
-  errors,
+  values = {},
+  errors = {},
 }: HitDiceEditFormProps) => {
   const action =
     values?.action || (availableHitDice.length < allHitDice.length ? "restore" : "spend")
@@ -51,6 +52,8 @@ export const HitDiceEditForm = ({
   }
   const uniqueUsedDice = Array.from(new Set(usedDice)).sort((a, b) => a - b)
 
+  errors = ignoreCheckEmptyErrors(values, errors)
+
   return (
     <>
       <div class="modal-header">
@@ -60,8 +63,9 @@ export const HitDiceEditForm = ({
       <div class="modal-body">
         <form
           id="hitdice-edit-form"
-          hx-post={`/characters/${characterId}/edit/hitdice/check`}
-          hx-trigger="change delay:300ms"
+          hx-post={`/characters/${characterId}/edit/hitdice`}
+          hx-vals='{"is_check": "true"}'
+          hx-trigger="change delay:100ms"
           hx-target="#editModalContent"
           hx-swap="innerHTML"
           class="needs-validation"
@@ -208,8 +212,9 @@ export const HitDiceEditForm = ({
               name="note"
               rows={2}
               placeholder="Add a note about this hit dice change..."
-              value={values?.note || ""}
-            />
+            >
+              {values?.note || ""}
+            </textarea>
           </div>
 
           <div class="modal-footer">
@@ -219,9 +224,11 @@ export const HitDiceEditForm = ({
             <button
               type="submit"
               class="btn btn-primary"
+              hx-vals='{"is_check": "false"}'
               hx-post={`/characters/${characterId}/edit/hitdice`}
               hx-target="#editModalContent"
               hx-swap="innerHTML"
+              hx-sync="closest form:replace"
             >
               Update Hit Dice
             </button>
diff --git a/src/components/HitPointsEditForm.tsx b/src/components/HitPointsEditForm.tsx
index c3e1456..04f92b6 100644
--- a/src/components/HitPointsEditForm.tsx
+++ b/src/components/HitPointsEditForm.tsx
@@ -1,4 +1,5 @@
 import { HitPointsBar } from "@src/components/ui/HitPointsBar"
+import { ignoreCheckEmptyErrors } from "@src/lib/formErrors"
 import clsx from "clsx"
 
 export interface HitPointsEditFormProps {
@@ -13,8 +14,8 @@ export const HitPointsEditForm = ({
   characterId,
   currentHP,
   maxHitPoints,
-  values,
-  errors,
+  values = {},
+  errors = {},
 }: HitPointsEditFormProps) => {
   const action = values?.action || (currentHP >= maxHitPoints ? "lose" : "restore")
   const amount = values?.amount ? parseInt(values.amount, 10) : 0
@@ -30,6 +31,7 @@ export const HitPointsEditForm = ({
   }
 
   const showPreview = amount > 0 && !errors?.amount
+  errors = ignoreCheckEmptyErrors(values, errors)
 
   return (
     <>
@@ -40,8 +42,9 @@ export const HitPointsEditForm = ({
       <div class="modal-body">
         <form
           id="hp-edit-form"
-          hx-post={`/characters/${characterId}/edit/hitpoints/check`}
-          hx-trigger="change delay:300ms"
+          hx-post={`/characters/${characterId}/edit/hitpoints`}
+          hx-vals='{"is_check": "true"}'
+          hx-trigger="change"
           hx-target="#editModalContent"
           hx-swap="innerHTML"
           class="needs-validation"
@@ -130,8 +133,9 @@ export const HitPointsEditForm = ({
               name="note"
               rows={2}
               placeholder="Add a note about this HP change..."
-              value={values?.note || ""}
-            />
+            >
+              {values?.note || ""}
+            </textarea>
           </div>
 
           <div class="modal-footer">
@@ -141,6 +145,7 @@ export const HitPointsEditForm = ({
             <button
               type="submit"
               class="btn btn-primary"
+              hx-vals='{"is_check": "false"}'
               hx-post={`/characters/${characterId}/edit/hitpoints`}
               hx-target="#editModalContent"
               hx-swap="innerHTML"
diff --git a/src/components/LearnSpellForm.tsx b/src/components/LearnSpellForm.tsx
index e226c38..2b3250c 100644
--- a/src/components/LearnSpellForm.tsx
+++ b/src/components/LearnSpellForm.tsx
@@ -37,7 +37,7 @@ function LearnSpellFormBody({ character, values = {}, errors = {} }: LearnSpellF
         id="learn-spell-form"
         hx-post={`/characters/${character.id}/edit/spellbook`}
         hx-vals='{"is_check": "true"}'
-        hx-trigger="change delay:300ms"
+        hx-trigger="change"
         hx-target="#editModalContent"
         hx-swap="innerHTML"
         class="needs-validation"
diff --git a/src/components/LongRestForm.tsx b/src/components/LongRestForm.tsx
index a6dff37..0ad5720 100644
--- a/src/components/LongRestForm.tsx
+++ b/src/components/LongRestForm.tsx
@@ -39,7 +39,7 @@ export const LongRestForm = ({ character, values, errors }: LongRestFormProps) =
         id="long-rest-form"
         hx-post={`/characters/${character.id}/rest/long`}
         hx-vals='{"is_check": "true"}'
-        hx-trigger="change delay:300ms"
+        hx-trigger="change"
         hx-target="#editModalContent"
         hx-swap="innerHTML"
         class="needs-validation"
diff --git a/src/components/PrepareSpellForm.tsx b/src/components/PrepareSpellForm.tsx
index 52e9dee..f7b5a17 100644
--- a/src/components/PrepareSpellForm.tsx
+++ b/src/components/PrepareSpellForm.tsx
@@ -127,7 +127,7 @@ function PrepareSpellFormBody({ character, values = {}, errors = {} }: PrepareSp
         id="prepare-spell-form"
         hx-post={`/characters/${character.id}/edit/prepspell`}
         hx-vals='{"is_check": "true"}'
-        hx-trigger="change delay:300ms"
+        hx-trigger="change"
         hx-target="#editModalContent"
         hx-swap="innerHTML"
         class="needs-validation"
diff --git a/src/components/ShortRestForm.tsx b/src/components/ShortRestForm.tsx
index 77168b1..bf7af60 100644
--- a/src/components/ShortRestForm.tsx
+++ b/src/components/ShortRestForm.tsx
@@ -64,7 +64,7 @@ export const ShortRestForm = ({ character, values, errors }: ShortRestFormProps)
         id="short-rest-form"
         hx-post={`/characters/${character.id}/rest/short`}
         hx-vals='{"is_check": "true"}'
-        hx-trigger="change delay:300ms"
+        hx-trigger="change"
         hx-target="#editModalContent"
         hx-swap="innerHTML"
         class="needs-validation"
diff --git a/src/components/SkillsEditForm.tsx b/src/components/SkillsEditForm.tsx
index 1d4b3b8..9521233 100644
--- a/src/components/SkillsEditForm.tsx
+++ b/src/components/SkillsEditForm.tsx
@@ -151,7 +151,7 @@ export const SkillsEditForm = ({ character, values = {}, errors = {} }: SkillsEd
         id="skills-edit-form"
         hx-post={`/characters/${character.id}/edit/skills`}
         hx-vals='{"is_check": "true"}'
-        hx-trigger="change delay:300ms"
+        hx-trigger="change"
         hx-target="#editModalContent"
         hx-swap="innerHTML"
         class="needs-validation"
diff --git a/src/components/SpellSlotsEditForm.tsx b/src/components/SpellSlotsEditForm.tsx
index e456533..b1a2b13 100644
--- a/src/components/SpellSlotsEditForm.tsx
+++ b/src/components/SpellSlotsEditForm.tsx
@@ -81,7 +81,7 @@ export const SpellSlotsEditForm = ({ character, values, errors }: SpellSlotsEdit
           id="spellslots-edit-form"
           hx-post={`/characters/${character.id}/edit/spellslots`}
           hx-vals='{"is_check": "true"}'
-          hx-trigger="change delay:300ms"
+          hx-trigger="change"
           hx-target="#editModalContent"
           hx-swap="innerHTML"
           class="needs-validation"
diff --git a/src/components/TraitEditForm.tsx b/src/components/TraitEditForm.tsx
index d8f1e01..08a3273 100644
--- a/src/components/TraitEditForm.tsx
+++ b/src/components/TraitEditForm.tsx
@@ -14,7 +14,7 @@ export const TraitEditForm = ({ character, values, errors }: TraitEditFormProps)
       <form
         hx-post={`/characters/${character.id}/edit/trait`}
         hx-vals='{"is_check": "true"}'
-        hx-trigger="change delay:300ms"
+        hx-trigger="change"
         hx-target="#editModalContent"
         hx-swap="innerHTML"
         class="modal-body needs-validation"
diff --git a/src/lib/formErrors.ts b/src/lib/formErrors.ts
index fbf55a7..07cd867 100644
--- a/src/lib/formErrors.ts
+++ b/src/lib/formErrors.ts
@@ -63,3 +63,23 @@ export function zodToFormErrors(zodError: ZodError): FormErrors {
 
   return errors
 }
+
+// biome-ignore lint/suspicious/noExplicitAny: values can be complicated (e.g. arrays, nested objects)
+export function ignoreCheckEmptyErrors(
+  values: Record<string, any>,
+  errors: FormErrors
+): FormErrors {
+  if (values.is_check !== "true") {
+    return errors
+  }
+
+  const filteredErrors: FormErrors = {}
+  for (const [field, message] of Object.entries(errors)) {
+    // If field is missing or empty in values, skip the error
+    if (values[field] === undefined || values[field] === "") {
+      continue
+    }
+    filteredErrors[field] = message
+  }
+  return filteredErrors
+}
diff --git a/src/services/updateHitDice.ts b/src/services/updateHitDice.ts
index e8d86cd..2bc6e80 100644
--- a/src/services/updateHitDice.ts
+++ b/src/services/updateHitDice.ts
@@ -15,25 +15,23 @@ export const UpdateHitDiceApiSchema = z.object({
     .describe("Whether to spend a hit die (during short rest) or restore a hit die"),
   die_value: NumberField(
     z
-      .number()
+      .number({
+        error: (iss) => (iss.input === null ? "Die value is required" : `Must be a valid number `),
+      })
       .int({ message: "Must be a whole number" })
       .refine((val): val is HitDieType => [6, 8, 10, 12].includes(val), {
         message: "Hit die must be 6, 8, 10, or 12",
       })
-      .nullable()
-  )
-    .optional()
-    .describe("The type of hit die (6, 8, 10, or 12)"),
+  ).describe("The type of hit die (6, 8, 10, or 12)"),
   hp_rolled: NumberField(
     z
-      .number()
+      .number({
+        error: (iss) => (iss.input === null ? "HP roll is required" : "Must be a valid number"),
+      })
       .int({ message: "Must be a whole number" })
       .min(1, { message: "Must be at least 1" })
       .max(12, { message: "Cannot exceed 12" })
-      .nullable()
-  )
-    .optional()
-    .describe("The HP rolled when spending a hit die (required for spend action)"),
+  ).describe("The HP rolled when spending a hit die (required for spend action)"),
   note: OptionalString().describe("Optional note about the hit die use or restoration"),
   is_check: Checkbox().optional().default(false),
 })
diff --git a/src/services/updateHitPoints.ts b/src/services/updateHitPoints.ts
index 3d8fe1a..cfe8e83 100644
--- a/src/services/updateHitPoints.ts
+++ b/src/services/updateHitPoints.ts
@@ -12,7 +12,7 @@ export const UpdateHitPointsApiSchema = z.object({
   amount: NumberField(
     z
       .number({
-        error: (iss) => (iss === undefined ? "Amount is required" : "Must be a valid number"),
+        error: (iss) => (iss.value === null ? "Amount is required" : "Must be a valid number"),
       })
       .int({ message: "Must be a whole number" })
       .min(1, { message: "Must be at least 1" })
@@ -54,30 +54,26 @@ export async function updateHitPoints(
     return { complete: false, values: data, errors: zodToFormErrors(checkD.error) }
   }
 
+  const values = checkD.data
   const errors: Record<string, string> = {}
   const currentHP = char.currentHP
   const maxHitPoints = char.maxHitPoints
 
   // Validate amount
-  if (data.amount) {
-    const amount = parseInt(data.amount, 10)
-    if (Number.isNaN(amount) || amount < 1) {
-      errors.amount = "Amount must be a positive number"
+  if (values.amount) {
+    // Check bounds
+    if (checkD.data.action === "restore") {
+      const newHP = currentHP + values.amount
+      if (newHP > maxHitPoints) {
+        errors.amount = `Cannot restore more than ${maxHitPoints - currentHP} HP (would exceed max)`
+      }
     } else {
-      // Check bounds
-      if (checkD.data.action === "restore") {
-        const newHP = currentHP + amount
-        if (newHP > maxHitPoints) {
-          errors.amount = `Cannot restore more than ${maxHitPoints - currentHP} HP (would exceed max)`
-        }
-      } else {
-        const newHP = currentHP - amount
-        if (newHP < 0) {
-          errors.amount = `Cannot lose more than ${currentHP} HP (would go below 0)`
-        }
+      const newHP = currentHP - values.amount
+      if (newHP < 0) {
+        errors.amount = `Cannot lose more than ${currentHP} HP (would go below 0)`
       }
     }
-  } else if (!checkD.data.is_check) {
+  } else if (!values.is_check) {
     errors.amount = "Amount is required"
   }
 

From 4db4eb0bbe34a3a28fcf9bf1687964381164cfeb Mon Sep 17 00:00:00 2001
From: Igor Serebryany <igor47@moomers.org>
Date: Mon, 10 Nov 2025 08:51:38 -0800
Subject: [PATCH 04/12] feat: improved LLM confirmation prompt

---
 src/components/ChatBox.tsx       | 69 ++++++++++++++++++--------------
 src/lib/formErrors.ts            |  2 +-
 src/services/addLevel.ts         |  2 +-
 src/services/addTrait.ts         |  2 +-
 src/services/castSpell.ts        |  2 +-
 src/services/createItem.ts       |  2 +-
 src/services/equipItem.ts        |  2 +-
 src/services/learnSpell.ts       |  2 +-
 src/services/longRest.ts         |  2 +-
 src/services/manageCharge.ts     |  2 +-
 src/services/prepareSpell.ts     |  2 +-
 src/services/shortRest.ts        |  2 +-
 src/services/updateCoins.ts      |  2 +-
 src/services/updateHitDice.ts    |  4 +-
 src/services/updateHitPoints.ts  |  2 +-
 src/services/updateSpellSlots.ts |  2 +-
 16 files changed, 55 insertions(+), 46 deletions(-)

diff --git a/src/components/ChatBox.tsx b/src/components/ChatBox.tsx
index 15668db..0517e83 100644
--- a/src/components/ChatBox.tsx
+++ b/src/components/ChatBox.tsx
@@ -151,15 +151,23 @@ export const ChatBox = ({ character, computedChat, swapOob = false }: ChatBoxPro
               name="message"
               id="chat-input"
               class="form-control"
-              placeholder="e.g., I spent 50 gold on a sword"
+              placeholder={
+                computedChat.unresolvedToolCalls.length > 0
+                  ? "Accept or decline Reed's edit"
+                  : "e.g., I spent 50 gold on a sword"
+              }
               required
               autocomplete="off"
-              {...(computedChat.shouldStream ? { disabled: true } : {})}
+              {...(computedChat.shouldStream || computedChat.unresolvedToolCalls.length > 0
+                ? { disabled: true }
+                : {})}
             />
             <button
               type="submit"
               class="btn btn-primary"
-              {...(computedChat.shouldStream ? { disabled: true } : {})}
+              {...(computedChat.shouldStream || computedChat.unresolvedToolCalls.length > 0
+                ? { disabled: true }
+                : {})}
             >
               {computedChat.shouldStream ? (
                 <output class="spinner-border spinner-border-sm" aria-hidden="true" />
@@ -229,33 +237,34 @@ export const ToolCallApproval = ({ characterId, chatId, toolCall }: ToolCallAppr
     <div class="row g-0 mb-2 chat-message" id={`tool-${toolCall.messageId}-${toolCall.toolCallId}`}>
       <div class="col-10">
         <div class="card border-warning">
-          <div class="card-body p-2">
-            <div class="d-flex align-items-start">
-              <i class="bi bi-exclamation-triangle text-warning me-2 mt-1"></i>
-              <div class="flex-grow-1" style="white-space: pre-line;">
-                {approvalMessage}
-              </div>
-              <div class="btn-group btn-group-sm ms-2">
-                <button
-                  type="button"
-                  class="btn btn-success"
-                  hx-post={`/characters/${characterId}/chat/${chatId}/tool/${toolCall.toolCallId}/approve`}
-                  hx-target="#chat-box-card"
-                  hx-swap="outerHTML"
-                >
-                  <i class="bi bi-check-lg"></i>
-                </button>
-                <button
-                  type="button"
-                  class="btn btn-danger"
-                  hx-post={`/characters/${characterId}/chat/${chatId}/tool/${toolCall.toolCallId}/reject`}
-                  hx-target="#chat-box-card"
-                  hx-swap="outerHTML"
-                >
-                  <i class="bi bi-x-lg"></i>
-                </button>
-              </div>
-            </div>
+          <div class="card-header bg-warning text-dark py-2">
+            <h6 class="mb-0">
+              <i class="bi bi-question-circle me-2"></i>
+              Accept Reed's Action
+            </h6>
+          </div>
+          <div class="card-body p-3">{approvalMessage}</div>
+          <div class="card-footer d-flex justify-content-end gap-2 p-2">
+            <button
+              type="button"
+              class="btn btn-success btn-sm"
+              hx-post={`/characters/${characterId}/chat/${chatId}/tool/${toolCall.toolCallId}/approve`}
+              hx-target="#chat-box-card"
+              hx-swap="outerHTML"
+            >
+              <i class="bi bi-check-lg me-1"></i>
+              Confirm
+            </button>
+            <button
+              type="button"
+              class="btn btn-danger btn-sm"
+              hx-post={`/characters/${characterId}/chat/${chatId}/tool/${toolCall.toolCallId}/reject`}
+              hx-target="#chat-box-card"
+              hx-swap="outerHTML"
+            >
+              <i class="bi bi-x-lg me-1"></i>
+              Decline
+            </button>
           </div>
         </div>
       </div>
diff --git a/src/lib/formErrors.ts b/src/lib/formErrors.ts
index 07cd867..ccd52c0 100644
--- a/src/lib/formErrors.ts
+++ b/src/lib/formErrors.ts
@@ -64,8 +64,8 @@ export function zodToFormErrors(zodError: ZodError): FormErrors {
   return errors
 }
 
-// biome-ignore lint/suspicious/noExplicitAny: values can be complicated (e.g. arrays, nested objects)
 export function ignoreCheckEmptyErrors(
+  // biome-ignore lint/suspicious/noExplicitAny: values can be complicated (e.g. arrays, nested objects)
   values: Record<string, any>,
   errors: FormErrors
 ): FormErrors {
diff --git a/src/services/addLevel.ts b/src/services/addLevel.ts
index df2b9a9..1b95951 100644
--- a/src/services/addLevel.ts
+++ b/src/services/addLevel.ts
@@ -275,7 +275,7 @@ export function formatAddLevelApproval(
   message += `, rolled ${hit_die_roll} HP`
 
   if (note) {
-    message += `\n${note}`
+    message += ` with note '${note}'`
   }
 
   return message
diff --git a/src/services/addTrait.ts b/src/services/addTrait.ts
index 870f06d..b6edaec 100644
--- a/src/services/addTrait.ts
+++ b/src/services/addTrait.ts
@@ -142,7 +142,7 @@ export function formatAddTraitApproval(
   }
 
   if (note) {
-    message += `\n${note}`
+    message += ` with note '${note}'`
   }
 
   return message
diff --git a/src/services/castSpell.ts b/src/services/castSpell.ts
index 3f5cd3c..9ce812f 100644
--- a/src/services/castSpell.ts
+++ b/src/services/castSpell.ts
@@ -239,7 +239,7 @@ export function formatCastSpellApproval(
   }
 
   if (note) {
-    message += `\n${note}`
+    message += ` with note '${note}'`
   }
 
   return message
diff --git a/src/services/createItem.ts b/src/services/createItem.ts
index 3569258..22da1e0 100644
--- a/src/services/createItem.ts
+++ b/src/services/createItem.ts
@@ -523,7 +523,7 @@ export function formatCreateItemApproval(
   }
 
   if (description) {
-    message += `\n${description}`
+    message += ` with description '${description}'`
   }
 
   return message
diff --git a/src/services/equipItem.ts b/src/services/equipItem.ts
index 4a28010..d3d827c 100644
--- a/src/services/equipItem.ts
+++ b/src/services/equipItem.ts
@@ -137,7 +137,7 @@ export function formatEquipItemApproval(
   let message = action
 
   if (note) {
-    message += `\n${note}`
+    message += ` with note '${note}'`
   }
 
   return message
diff --git a/src/services/learnSpell.ts b/src/services/learnSpell.ts
index 0643411..52db2eb 100644
--- a/src/services/learnSpell.ts
+++ b/src/services/learnSpell.ts
@@ -148,7 +148,7 @@ export function formatLearnSpellApproval(
   let message = `Add ${spellName} to spellbook`
 
   if (note) {
-    message += `\n${note}`
+    message += ` with note '${note}'`
   }
 
   return message
diff --git a/src/services/longRest.ts b/src/services/longRest.ts
index 02d3d51..55cf39e 100644
--- a/src/services/longRest.ts
+++ b/src/services/longRest.ts
@@ -171,7 +171,7 @@ export function formatLongRestApproval(
   let message = "Take a long rest"
 
   if (note) {
-    message += `\n${note}`
+    message += ` with note '${note}'`
   }
 
   return message
diff --git a/src/services/manageCharge.ts b/src/services/manageCharge.ts
index 468a8f9..390078f 100644
--- a/src/services/manageCharge.ts
+++ b/src/services/manageCharge.ts
@@ -156,7 +156,7 @@ export function formatManageChargeApproval(
   let message = `${verb} ${amount} charge${amount > 1 ? "s" : ""} ${action === "use" ? "from" : "to"} ${item_id}`
 
   if (note) {
-    message += `\n${note}`
+    message += ` with note '${note}'`
   }
 
   return message
diff --git a/src/services/prepareSpell.ts b/src/services/prepareSpell.ts
index e307648..8808ade 100644
--- a/src/services/prepareSpell.ts
+++ b/src/services/prepareSpell.ts
@@ -238,7 +238,7 @@ export function formatPrepareSpellApproval(
     : `Prepare ${spellName} as ${className} ${spell_type}`
 
   if (note) {
-    message += `\n${note}`
+    message += ` with note '${note}'`
   }
 
   return message
diff --git a/src/services/shortRest.ts b/src/services/shortRest.ts
index cef065c..b281dbf 100644
--- a/src/services/shortRest.ts
+++ b/src/services/shortRest.ts
@@ -288,7 +288,7 @@ export function formatShortRestApproval(
   }
 
   if (note) {
-    message += `\n${note}`
+    message += ` with note '${note}'`
   }
 
   return message
diff --git a/src/services/updateCoins.ts b/src/services/updateCoins.ts
index a22f9af..13c3942 100644
--- a/src/services/updateCoins.ts
+++ b/src/services/updateCoins.ts
@@ -208,7 +208,7 @@ export function formatUpdateCoinsApproval(
 
   let message = `${action} ${changes.join(", ")}`
   if (note) {
-    message += `\n${note}`
+    message += ` with note '${note}'`
   }
 
   return message
diff --git a/src/services/updateHitDice.ts b/src/services/updateHitDice.ts
index 2bc6e80..a2d4ab8 100644
--- a/src/services/updateHitDice.ts
+++ b/src/services/updateHitDice.ts
@@ -248,7 +248,7 @@ export function formatUseHitDieApproval(
   let message = `Spend D${die_value} hit die (rolled ${hp_rolled} HP)`
 
   if (note) {
-    message += `\n${note}`
+    message += ` with note '${note}'`
   }
 
   return message
@@ -266,7 +266,7 @@ export function formatRestoreHitDieApproval(
   let message = `Restore D${die_value} hit die`
 
   if (note) {
-    message += `\n${note}`
+    message += ` with note '${note}'`
   }
 
   return message
diff --git a/src/services/updateHitPoints.ts b/src/services/updateHitPoints.ts
index cfe8e83..a5cfc11 100644
--- a/src/services/updateHitPoints.ts
+++ b/src/services/updateHitPoints.ts
@@ -142,7 +142,7 @@ export function formatUpdateHitPointsApproval(
 
   let message = `${verb} ${amount} ${suffix}`
   if (note) {
-    message += `\n${note}`
+    message += ` with note '${note}'`
   }
 
   return message
diff --git a/src/services/updateSpellSlots.ts b/src/services/updateSpellSlots.ts
index b7acae2..6ebeed4 100644
--- a/src/services/updateSpellSlots.ts
+++ b/src/services/updateSpellSlots.ts
@@ -194,7 +194,7 @@ export function formatUpdateSpellSlotsApproval(
   let message = `${verb} level ${slot_level} spell slot`
 
   if (note) {
-    message += `\n${note}`
+    message += ` with note '${note}'`
   }
 
   return message

From 3b49db26d4810e3b3f69477f84dbdaf9172e2178 Mon Sep 17 00:00:00 2001
From: Igor Serebryany <igor47@moomers.org>
Date: Mon, 10 Nov 2025 15:20:17 -0800
Subject: [PATCH 05/12] fix: createitem damage population, srd51 thrown ranges

we had a bug in the form where the template wouldn't populate damage fields. additionally, we had errors in our weapon db for srd51 for some weapons, which are fixed here.
---
 src/components/CreateItemForm.tsx         |  16 ++-
 src/lib/dnd/itemTemplates/srd51Weapons.ts |  24 ++++-
 src/routes/character.createitem.test.ts   | 126 ++++++++++++++++++++++
 3 files changed, 152 insertions(+), 14 deletions(-)
 create mode 100644 src/routes/character.createitem.test.ts

diff --git a/src/components/CreateItemForm.tsx b/src/components/CreateItemForm.tsx
index 6155371..5792269 100644
--- a/src/components/CreateItemForm.tsx
+++ b/src/components/CreateItemForm.tsx
@@ -89,15 +89,13 @@ export const CreateItemForm = ({ character, values, errors }: CreateItemFormProp
     // Damage arrays
     if (template.damage) {
       values.damage_row_count = String(template.damage.length)
-      for (let i = 0; i < template.damage.length; i++) {
-        const dmg = template.damage[i]
-        if (dmg) {
-          values[`damage.${i}.num_dice`] = String(dmg.num_dice)
-          values[`damage.${i}.die_value`] = String(dmg.die_value)
-          values[`damage.${i}.type`] = dmg.type
-          if (dmg.versatile) values[`damage.${i}.versatile`] = "true"
-        }
-      }
+      // Create nested object structure instead of dot notation
+      values.damage = template.damage.map((dmg) => ({
+        num_dice: String(dmg.num_dice),
+        die_value: String(dmg.die_value),
+        type: dmg.type,
+        ...(dmg.versatile && { versatile: "true" }),
+      }))
     }
 
     // Armor-specific fields
diff --git a/src/lib/dnd/itemTemplates/srd51Weapons.ts b/src/lib/dnd/itemTemplates/srd51Weapons.ts
index 023be02..89fd73e 100644
--- a/src/lib/dnd/itemTemplates/srd51Weapons.ts
+++ b/src/lib/dnd/itemTemplates/srd51Weapons.ts
@@ -18,9 +18,12 @@ export const srd51Weapons: TemplateItem[] = [
   {
     name: "Dagger",
     category: "weapon",
-    weapon_type: "melee",
+    weapon_type: "thrown",
     damage: [{ num_dice: 1, die_value: 4, type: "piercing" }],
     finesse: true,
+    light: true,
+    normal_range: 20,
+    long_range: 60,
     martial: false,
   },
   {
@@ -34,25 +37,31 @@ export const srd51Weapons: TemplateItem[] = [
   {
     name: "Handaxe",
     category: "weapon",
-    weapon_type: "melee",
+    weapon_type: "thrown",
     damage: [{ num_dice: 1, die_value: 6, type: "slashing" }],
-    martial: false,
     light: true,
+    normal_range: 20,
+    long_range: 60,
+    martial: false,
   },
   {
     name: "Javelin",
     category: "weapon",
     weapon_type: "thrown",
     damage: [{ num_dice: 1, die_value: 6, type: "piercing" }],
+    normal_range: 30,
+    long_range: 120,
     martial: false,
   },
   {
     name: "Light hammer",
     category: "weapon",
-    weapon_type: "melee",
+    weapon_type: "thrown",
     damage: [{ num_dice: 1, die_value: 4, type: "bludgeoning" }],
-    martial: false,
     light: true,
+    normal_range: 20,
+    long_range: 60,
+    martial: false,
   },
   {
     name: "Mace",
@@ -87,6 +96,8 @@ export const srd51Weapons: TemplateItem[] = [
       { num_dice: 1, die_value: 6, type: "piercing" },
       { num_dice: 1, die_value: 8, type: "piercing", versatile: true },
     ],
+    normal_range: 20,
+    long_range: 60,
     martial: false,
   },
 
@@ -99,6 +110,7 @@ export const srd51Weapons: TemplateItem[] = [
     starting_ammo: 20,
     martial: false,
     ammunition: true,
+    loading: true,
     two_handed: true,
     normal_range: 80,
     long_range: 320,
@@ -251,6 +263,7 @@ export const srd51Weapons: TemplateItem[] = [
     weapon_type: "melee",
     damage: [{ num_dice: 1, die_value: 6, type: "slashing" }],
     finesse: true,
+    light: true,
     martial: true,
   },
   {
@@ -259,6 +272,7 @@ export const srd51Weapons: TemplateItem[] = [
     weapon_type: "melee",
     damage: [{ num_dice: 1, die_value: 6, type: "piercing" }],
     finesse: true,
+    light: true,
     martial: true,
   },
   {
diff --git a/src/routes/character.createitem.test.ts b/src/routes/character.createitem.test.ts
new file mode 100644
index 0000000..648ee09
--- /dev/null
+++ b/src/routes/character.createitem.test.ts
@@ -0,0 +1,126 @@
+import { describe, test, expect, beforeEach } from "bun:test"
+import { useTestApp } from "@src/test/app"
+import { userFactory } from "@src/test/factories/user"
+import { characterFactory } from "@src/test/factories/character"
+import { makeRequest, parseHtml, expectElement } from "@src/test/http"
+import type { User } from "@src/db/users"
+import type { Character } from "@src/db/characters"
+
+describe("POST /characters/:id/edit/newitem", () => {
+	const testCtx = useTestApp()
+
+	describe("when selecting a weapon template", () => {
+		let user: User
+		let character: Character
+
+		beforeEach(async () => {
+			user = await userFactory.create({}, testCtx.db)
+			character = await characterFactory.create({ user_id: user.id }, testCtx.db)
+		})
+
+		test("populates damage die and damage type dropdowns", async () => {
+			// Make a POST request to select the Dagger template
+			const formData = new FormData()
+			formData.append("template", "Dagger")
+			formData.append("prev_template", "")
+
+			const response = await makeRequest(
+				testCtx.app,
+				`/characters/${character.id}/edit/newitem`,
+				{
+					user,
+					method: "POST",
+					body: formData,
+				},
+			)
+
+			expect(response.status).toBe(200)
+
+			const document = await parseHtml(response)
+
+			// Verify the item name is populated
+			const nameInput = expectElement(document, 'input[name="name"]') as HTMLInputElement
+			expect(nameInput.value).toBe("Dagger")
+
+			// Verify the category is populated
+			const categorySelect = expectElement(
+				document,
+				'select[name="category"]',
+			) as HTMLSelectElement
+			expect(categorySelect.value).toBe("weapon")
+
+			// Verify the damage die value dropdown is populated (Dagger uses d4)
+			const dieValueSelect = expectElement(
+				document,
+				'select[name="damage.0.die_value"]',
+			) as HTMLSelectElement
+			expect(dieValueSelect.value).toBe("4")
+
+			// Verify the damage type dropdown is populated (Dagger is piercing)
+			const damageTypeSelect = expectElement(
+				document,
+				'select[name="damage.0.type"]',
+			) as HTMLSelectElement
+			expect(damageTypeSelect.value).toBe("piercing")
+
+			// Verify the number of dice input is populated
+			const numDiceInput = expectElement(
+				document,
+				'input[name="damage.0.num_dice"]',
+			) as HTMLInputElement
+			expect(numDiceInput.value).toBe("1")
+		})
+	})
+
+	describe("when selecting a thrown weapon template with range", () => {
+		let user: User
+		let character: Character
+
+		beforeEach(async () => {
+			user = await userFactory.create({}, testCtx.db)
+			character = await characterFactory.create({ user_id: user.id }, testCtx.db)
+		})
+
+		test("populates weapon_type, normal_range and long_range fields", async () => {
+			// Make a POST request to select the Javelin template
+			const formData = new FormData()
+			formData.append("template", "Javelin")
+			formData.append("prev_template", "")
+
+			const response = await makeRequest(
+				testCtx.app,
+				`/characters/${character.id}/edit/newitem`,
+				{
+					user,
+					method: "POST",
+					body: formData,
+				},
+			)
+
+			expect(response.status).toBe(200)
+
+			const document = await parseHtml(response)
+
+			// Verify the weapon type is set to thrown
+			const weaponTypeThrownRadio = expectElement(
+				document,
+				'input[name="weapon_type"][value="thrown"]',
+			) as HTMLInputElement
+			expect(weaponTypeThrownRadio.hasAttribute("checked")).toBe(true)
+
+			// Verify the normal range is populated (Javelin has 30ft)
+			const normalRangeInput = expectElement(
+				document,
+				'input[name="normal_range"]',
+			) as HTMLInputElement
+			expect(normalRangeInput.value).toBe("30")
+
+			// Verify the long range is populated (Javelin has 120ft)
+			const longRangeInput = expectElement(
+				document,
+				'input[name="long_range"]',
+			) as HTMLInputElement
+			expect(longRangeInput.value).toBe("120")
+		})
+	})
+})

From 798408df05e838e3a06f2d5cbab1e18b461c25b0 Mon Sep 17 00:00:00 2001
From: Igor Serebryany <igor47@moomers.org>
Date: Mon, 10 Nov 2025 15:54:08 -0800
Subject: [PATCH 06/12] test: more coverage for creating items

---
 src/components/CreateItemForm.tsx       |   3 +-
 src/routes/character.createitem.test.ts | 573 +++++++++++++++++++-----
 2 files changed, 454 insertions(+), 122 deletions(-)

diff --git a/src/components/CreateItemForm.tsx b/src/components/CreateItemForm.tsx
index 5792269..e555086 100644
--- a/src/components/CreateItemForm.tsx
+++ b/src/components/CreateItemForm.tsx
@@ -7,7 +7,8 @@ import { clsx } from "clsx"
 
 export interface CreateItemFormProps {
   character: ComputedCharacter
-  values: Record<string, string>
+  // biome-ignore lint/suspicious/noExplicitAny: form values can be strings, objects, or arrays depending on the field
+  values: Record<string, any>
   errors?: Record<string, string>
 }
 
diff --git a/src/routes/character.createitem.test.ts b/src/routes/character.createitem.test.ts
index 648ee09..e1e0e1d 100644
--- a/src/routes/character.createitem.test.ts
+++ b/src/routes/character.createitem.test.ts
@@ -1,126 +1,457 @@
-import { describe, test, expect, beforeEach } from "bun:test"
+import { beforeEach, describe, expect, test } from "bun:test"
+import type { Character } from "@src/db/characters"
+import type { User } from "@src/db/users"
+import { computeCharacterItems } from "@src/services/computeCharacterItems"
 import { useTestApp } from "@src/test/app"
-import { userFactory } from "@src/test/factories/user"
 import { characterFactory } from "@src/test/factories/character"
-import { makeRequest, parseHtml, expectElement } from "@src/test/http"
-import type { User } from "@src/db/users"
-import type { Character } from "@src/db/characters"
+import { userFactory } from "@src/test/factories/user"
+import { expectElement, makeRequest, parseHtml } from "@src/test/http"
 
 describe("POST /characters/:id/edit/newitem", () => {
-	const testCtx = useTestApp()
-
-	describe("when selecting a weapon template", () => {
-		let user: User
-		let character: Character
-
-		beforeEach(async () => {
-			user = await userFactory.create({}, testCtx.db)
-			character = await characterFactory.create({ user_id: user.id }, testCtx.db)
-		})
-
-		test("populates damage die and damage type dropdowns", async () => {
-			// Make a POST request to select the Dagger template
-			const formData = new FormData()
-			formData.append("template", "Dagger")
-			formData.append("prev_template", "")
-
-			const response = await makeRequest(
-				testCtx.app,
-				`/characters/${character.id}/edit/newitem`,
-				{
-					user,
-					method: "POST",
-					body: formData,
-				},
-			)
-
-			expect(response.status).toBe(200)
-
-			const document = await parseHtml(response)
-
-			// Verify the item name is populated
-			const nameInput = expectElement(document, 'input[name="name"]') as HTMLInputElement
-			expect(nameInput.value).toBe("Dagger")
-
-			// Verify the category is populated
-			const categorySelect = expectElement(
-				document,
-				'select[name="category"]',
-			) as HTMLSelectElement
-			expect(categorySelect.value).toBe("weapon")
-
-			// Verify the damage die value dropdown is populated (Dagger uses d4)
-			const dieValueSelect = expectElement(
-				document,
-				'select[name="damage.0.die_value"]',
-			) as HTMLSelectElement
-			expect(dieValueSelect.value).toBe("4")
-
-			// Verify the damage type dropdown is populated (Dagger is piercing)
-			const damageTypeSelect = expectElement(
-				document,
-				'select[name="damage.0.type"]',
-			) as HTMLSelectElement
-			expect(damageTypeSelect.value).toBe("piercing")
-
-			// Verify the number of dice input is populated
-			const numDiceInput = expectElement(
-				document,
-				'input[name="damage.0.num_dice"]',
-			) as HTMLInputElement
-			expect(numDiceInput.value).toBe("1")
-		})
-	})
-
-	describe("when selecting a thrown weapon template with range", () => {
-		let user: User
-		let character: Character
-
-		beforeEach(async () => {
-			user = await userFactory.create({}, testCtx.db)
-			character = await characterFactory.create({ user_id: user.id }, testCtx.db)
-		})
-
-		test("populates weapon_type, normal_range and long_range fields", async () => {
-			// Make a POST request to select the Javelin template
-			const formData = new FormData()
-			formData.append("template", "Javelin")
-			formData.append("prev_template", "")
-
-			const response = await makeRequest(
-				testCtx.app,
-				`/characters/${character.id}/edit/newitem`,
-				{
-					user,
-					method: "POST",
-					body: formData,
-				},
-			)
-
-			expect(response.status).toBe(200)
-
-			const document = await parseHtml(response)
-
-			// Verify the weapon type is set to thrown
-			const weaponTypeThrownRadio = expectElement(
-				document,
-				'input[name="weapon_type"][value="thrown"]',
-			) as HTMLInputElement
-			expect(weaponTypeThrownRadio.hasAttribute("checked")).toBe(true)
-
-			// Verify the normal range is populated (Javelin has 30ft)
-			const normalRangeInput = expectElement(
-				document,
-				'input[name="normal_range"]',
-			) as HTMLInputElement
-			expect(normalRangeInput.value).toBe("30")
-
-			// Verify the long range is populated (Javelin has 120ft)
-			const longRangeInput = expectElement(
-				document,
-				'input[name="long_range"]',
-			) as HTMLInputElement
-			expect(longRangeInput.value).toBe("120")
-		})
-	})
+  const testCtx = useTestApp()
+
+  describe("when selecting a weapon template", () => {
+    let user: User
+    let character: Character
+
+    beforeEach(async () => {
+      user = await userFactory.create({}, testCtx.db)
+      character = await characterFactory.create({ user_id: user.id }, testCtx.db)
+    })
+
+    test("populates damage die and damage type dropdowns", async () => {
+      // Make a POST request to select the Dagger template
+      const formData = new FormData()
+      formData.append("template", "Dagger")
+      formData.append("prev_template", "")
+
+      const response = await makeRequest(testCtx.app, `/characters/${character.id}/edit/newitem`, {
+        user,
+        method: "POST",
+        body: formData,
+      })
+
+      expect(response.status).toBe(200)
+
+      const document = await parseHtml(response)
+
+      // Verify the item name is populated
+      const nameInput = expectElement(document, 'input[name="name"]') as HTMLInputElement
+      expect(nameInput.value).toBe("Dagger")
+
+      // Verify the category is populated
+      const categorySelect = expectElement(document, 'select[name="category"]') as HTMLSelectElement
+      expect(categorySelect.value).toBe("weapon")
+
+      // Verify the damage die value dropdown is populated (Dagger uses d4)
+      const dieValueSelect = expectElement(
+        document,
+        'select[name="damage.0.die_value"]'
+      ) as HTMLSelectElement
+      expect(dieValueSelect.value).toBe("4")
+
+      // Verify the damage type dropdown is populated (Dagger is piercing)
+      const damageTypeSelect = expectElement(
+        document,
+        'select[name="damage.0.type"]'
+      ) as HTMLSelectElement
+      expect(damageTypeSelect.value).toBe("piercing")
+
+      // Verify the number of dice input is populated
+      const numDiceInput = expectElement(
+        document,
+        'input[name="damage.0.num_dice"]'
+      ) as HTMLInputElement
+      expect(numDiceInput.value).toBe("1")
+    })
+  })
+
+  describe("when selecting a thrown weapon template with range", () => {
+    let user: User
+    let character: Character
+
+    beforeEach(async () => {
+      user = await userFactory.create({}, testCtx.db)
+      character = await characterFactory.create({ user_id: user.id }, testCtx.db)
+    })
+
+    test("populates weapon_type, normal_range and long_range fields", async () => {
+      // Make a POST request to select the Javelin template
+      const formData = new FormData()
+      formData.append("template", "Javelin")
+      formData.append("prev_template", "")
+
+      const response = await makeRequest(testCtx.app, `/characters/${character.id}/edit/newitem`, {
+        user,
+        method: "POST",
+        body: formData,
+      })
+
+      expect(response.status).toBe(200)
+
+      const document = await parseHtml(response)
+
+      // Verify the weapon type is set to thrown
+      const weaponTypeThrownRadio = expectElement(
+        document,
+        'input[name="weapon_type"][value="thrown"]'
+      ) as HTMLInputElement
+      expect(weaponTypeThrownRadio.hasAttribute("checked")).toBe(true)
+
+      // Verify the normal range is populated (Javelin has 30ft)
+      const normalRangeInput = expectElement(
+        document,
+        'input[name="normal_range"]'
+      ) as HTMLInputElement
+      expect(normalRangeInput.value).toBe("30")
+
+      // Verify the long range is populated (Javelin has 120ft)
+      const longRangeInput = expectElement(document, 'input[name="long_range"]') as HTMLInputElement
+      expect(longRangeInput.value).toBe("120")
+    })
+  })
+
+  describe("when creating items", () => {
+    let user: User
+    let character: Character
+
+    beforeEach(async () => {
+      user = await userFactory.create({}, testCtx.db)
+      character = await characterFactory.create({ user_id: user.id }, testCtx.db)
+    })
+
+    describe("with valid data", () => {
+      test("creates a simple weapon in the database", async () => {
+        const formData = new FormData()
+        formData.append("name", "Club")
+        formData.append("category", "weapon")
+        formData.append("weapon_type", "melee")
+        formData.append("damage_row_count", "1")
+        formData.append("damage.0.num_dice", "1")
+        formData.append("damage.0.die_value", "4")
+        formData.append("damage.0.type", "bludgeoning")
+        formData.append("light", "true")
+        formData.append("martial", "false")
+
+        const response = await makeRequest(
+          testCtx.app,
+          `/characters/${character.id}/edit/newitem`,
+          {
+            user,
+            method: "POST",
+            body: formData,
+          }
+        )
+
+        // Should return success (the inventory panel)
+        expect(response.status).toBe(200)
+
+        // Verify the item was created and appears in character's inventory
+        const items = await computeCharacterItems(testCtx.db, character.id)
+        expect(items.length).toBe(1)
+
+        const item = items[0]
+        if (!item) throw new Error("Item not found")
+        expect(item.name).toBe("Club")
+        expect(item.category).toBe("weapon")
+
+        // Verify damage
+        expect(item.damage.length).toBe(1)
+        expect(item.damage[0]?.dice).toEqual([4]) // 1d4
+        expect(item.damage[0]?.type).toBe("bludgeoning")
+        expect(item.damage[0]?.versatile).toBe(false)
+        expect(item.humanReadableDamage).toContain("1d4 bludgeoning")
+      })
+
+      test("creates a weapon with versatile damage", async () => {
+        const formData = new FormData()
+        formData.append("name", "Quarterstaff")
+        formData.append("category", "weapon")
+        formData.append("weapon_type", "melee")
+        formData.append("damage_row_count", "2")
+        formData.append("damage.0.num_dice", "1")
+        formData.append("damage.0.die_value", "6")
+        formData.append("damage.0.type", "bludgeoning")
+        formData.append("damage.1.num_dice", "1")
+        formData.append("damage.1.die_value", "8")
+        formData.append("damage.1.type", "bludgeoning")
+        formData.append("damage.1.versatile", "true")
+
+        const response = await makeRequest(
+          testCtx.app,
+          `/characters/${character.id}/edit/newitem`,
+          {
+            user,
+            method: "POST",
+            body: formData,
+          }
+        )
+
+        expect(response.status).toBe(200)
+
+        const items = await computeCharacterItems(testCtx.db, character.id)
+        expect(items.length).toBe(1)
+
+        const item = items[0]
+        if (!item) throw new Error("Item not found")
+        expect(item.name).toBe("Quarterstaff")
+
+        // Verify both damage entries were created
+        expect(item.damage.length).toBe(2)
+
+        // First damage entry (normal) - 1d6
+        expect(item.damage[0]?.dice).toEqual([6])
+        expect(item.damage[0]?.type).toBe("bludgeoning")
+        expect(item.damage[0]?.versatile).toBe(false)
+
+        // Second damage entry (versatile) - 1d8
+        expect(item.damage[1]?.dice).toEqual([8])
+        expect(item.damage[1]?.type).toBe("bludgeoning")
+        expect(item.damage[1]?.versatile).toBe(true)
+      })
+
+      test("creates a ranged weapon with ammunition", async () => {
+        const formData = new FormData()
+        formData.append("name", "Shortbow")
+        formData.append("category", "weapon")
+        formData.append("weapon_type", "ranged")
+        formData.append("damage_row_count", "1")
+        formData.append("damage.0.num_dice", "1")
+        formData.append("damage.0.die_value", "6")
+        formData.append("damage.0.type", "piercing")
+        formData.append("normal_range", "80")
+        formData.append("long_range", "320")
+        formData.append("starting_ammo", "20")
+        formData.append("two_handed", "true")
+
+        const response = await makeRequest(
+          testCtx.app,
+          `/characters/${character.id}/edit/newitem`,
+          {
+            user,
+            method: "POST",
+            body: formData,
+          }
+        )
+
+        expect(response.status).toBe(200)
+
+        const items = await computeCharacterItems(testCtx.db, character.id)
+        expect(items.length).toBe(1)
+
+        const item = items[0]
+        if (!item) throw new Error("Item not found")
+        expect(item.name).toBe("Shortbow")
+        expect(item.normal_range).toBe(80)
+        expect(item.long_range).toBe(320)
+
+        // Verify ammunition charges were created
+        expect(Number(item.currentCharges)).toBe(20)
+        expect(Number(item.ammunition)).toBe(20)
+        expect(item.chargeLabel).toBe("ammunition")
+      })
+
+      test("creates armor with properties", async () => {
+        const formData = new FormData()
+        formData.append("name", "Chain Mail")
+        formData.append("category", "armor")
+        formData.append("armor_type", "heavy")
+        formData.append("armor_class", "16")
+        formData.append("armor_class_dex", "false")
+        formData.append("min_strength", "13")
+        formData.append("stealth_disadvantage", "true")
+
+        const response = await makeRequest(
+          testCtx.app,
+          `/characters/${character.id}/edit/newitem`,
+          {
+            user,
+            method: "POST",
+            body: formData,
+          }
+        )
+
+        expect(response.status).toBe(200)
+
+        const items = await computeCharacterItems(testCtx.db, character.id)
+        expect(items.length).toBe(1)
+
+        const item = items[0]
+        if (!item) throw new Error("Item not found")
+        expect(item.name).toBe("Chain Mail")
+        expect(item.category).toBe("armor")
+        expect(item.armor_type).toBe("heavy")
+        expect(item.armor_class).toBe(16)
+        expect(item.armor_class_dex).toBe(false)
+
+        // Verify stealth disadvantage effect was created
+        expect(item.effects.length).toBeGreaterThan(0)
+        const stealthEffect = item.effects.find((e) => e.target === "stealth")
+        expect(stealthEffect).toBeDefined()
+        expect(stealthEffect?.op).toBe("disadvantage")
+      })
+
+      test("creates a shield with armor modifier", async () => {
+        const formData = new FormData()
+        formData.append("name", "Shield")
+        formData.append("category", "shield")
+        formData.append("armor_modifier", "2")
+
+        const response = await makeRequest(
+          testCtx.app,
+          `/characters/${character.id}/edit/newitem`,
+          {
+            user,
+            method: "POST",
+            body: formData,
+          }
+        )
+
+        expect(response.status).toBe(200)
+
+        const items = await computeCharacterItems(testCtx.db, character.id)
+        expect(items.length).toBe(1)
+
+        const item = items[0]
+        if (!item) throw new Error("Item not found")
+        expect(item.name).toBe("Shield")
+        expect(item.category).toBe("shield")
+        expect(item.armor_modifier).toBe(2)
+      })
+    })
+
+    describe("with invalid data", () => {
+      test("returns validation error for missing name", async () => {
+        const formData = new FormData()
+        formData.append("category", "weapon")
+        formData.append("weapon_type", "melee")
+
+        const response = await makeRequest(
+          testCtx.app,
+          `/characters/${character.id}/edit/newitem`,
+          {
+            user,
+            method: "POST",
+            body: formData,
+          }
+        )
+
+        expect(response.status).toBe(200)
+
+        const document = await parseHtml(response)
+
+        // Should show the form with an error
+        const errorDiv = expectElement(document, ".invalid-feedback")
+        expect(errorDiv.textContent).toContain("required")
+      })
+
+      test("returns validation error for weapon missing damage", async () => {
+        const formData = new FormData()
+        formData.append("name", "Broken Sword")
+        formData.append("category", "weapon")
+        formData.append("weapon_type", "melee")
+        formData.append("damage_row_count", "0")
+
+        const response = await makeRequest(
+          testCtx.app,
+          `/characters/${character.id}/edit/newitem`,
+          {
+            user,
+            method: "POST",
+            body: formData,
+          }
+        )
+
+        expect(response.status).toBe(200)
+
+        // Verify the item was NOT created
+        const items = await computeCharacterItems(testCtx.db, character.id)
+        const brokenSword = items.find((i) => i.name === "Broken Sword")
+        expect(brokenSword).toBeUndefined()
+      })
+
+      test("returns validation error for ranged weapon missing range", async () => {
+        const formData = new FormData()
+        formData.append("name", "Broken Bow")
+        formData.append("category", "weapon")
+        formData.append("weapon_type", "ranged")
+        formData.append("damage_row_count", "1")
+        formData.append("damage.0.num_dice", "1")
+        formData.append("damage.0.die_value", "6")
+        formData.append("damage.0.type", "piercing")
+        // Missing normal_range
+
+        const response = await makeRequest(
+          testCtx.app,
+          `/characters/${character.id}/edit/newitem`,
+          {
+            user,
+            method: "POST",
+            body: formData,
+          }
+        )
+
+        expect(response.status).toBe(200)
+
+        // Verify the item was NOT created
+        const items = await computeCharacterItems(testCtx.db, character.id)
+        const brokenBow = items.find((i) => i.name === "Broken Bow")
+        expect(brokenBow).toBeUndefined()
+      })
+    })
+  })
+
+  describe("authorization", () => {
+    let user: User
+    let character: Character
+
+    beforeEach(async () => {
+      user = await userFactory.create({}, testCtx.db)
+      character = await characterFactory.create({ user_id: user.id }, testCtx.db)
+    })
+
+    test("redirects to login when not authenticated", async () => {
+      const formData = new FormData()
+      formData.append("name", "Unauthorized Item")
+      formData.append("category", "weapon")
+
+      const response = await makeRequest(testCtx.app, `/characters/${character.id}/edit/newitem`, {
+        method: "POST",
+        body: formData,
+      })
+
+      expect(response.status).toBe(302)
+      expect(response.headers.get("Location")).toContain("/login")
+    })
+
+    test.skip("prevents creating items for another user's character", async () => {
+      const otherUser = await userFactory.create({}, testCtx.db)
+      const otherCharacter = await characterFactory.create({ user_id: otherUser.id }, testCtx.db)
+
+      const formData = new FormData()
+      formData.append("name", "Stolen Item")
+      formData.append("category", "weapon")
+      formData.append("weapon_type", "melee")
+      formData.append("damage_row_count", "1")
+      formData.append("damage.0.num_dice", "1")
+      formData.append("damage.0.die_value", "4")
+      formData.append("damage.0.type", "bludgeoning")
+
+      const _response = await makeRequest(
+        testCtx.app,
+        `/characters/${otherCharacter.id}/edit/newitem`,
+        {
+          user, // Using first user to try to create item for other user's character
+          method: "POST",
+          body: formData,
+        }
+      )
+
+      // The endpoint should handle this gracefully
+      // Verify the item does NOT appear in the other character's inventory
+      const otherCharItems = await computeCharacterItems(testCtx.db, otherCharacter.id)
+      const stolenItem = otherCharItems.find((i) => i.name === "Stolen Item")
+      expect(stolenItem).toBeUndefined()
+    })
+  })
 })

From c98454bddd8bfd8af35a938008d805351d6db842 Mon Sep 17 00:00:00 2001
From: Igor Serebryany <igor47@moomers.org>
Date: Mon, 10 Nov 2025 19:19:32 -0800
Subject: [PATCH 07/12] refactor: centralized authorization

---
 public/static/htmx-auth.js              |  17 +
 src/components/Layout.tsx               |   1 +
 src/middleware.ts                       |   2 +
 src/middleware/htmx.ts                  |  20 ++
 src/routes/character.abilities.test.ts  |   5 +-
 src/routes/character.coins.test.ts      |   5 +-
 src/routes/character.createitem.test.ts |   9 +-
 src/routes/character.skills.test.ts     |   5 +-
 src/routes/character.test.ts            | 110 +++++-
 src/routes/character.tsx                | 451 +++++++-----------------
 src/services/authorize.test.ts          | 230 ++++++++++++
 src/services/authorize.ts               | 102 ++++++
 12 files changed, 625 insertions(+), 332 deletions(-)
 create mode 100644 public/static/htmx-auth.js
 create mode 100644 src/middleware/htmx.ts
 create mode 100644 src/services/authorize.test.ts
 create mode 100644 src/services/authorize.ts

diff --git a/public/static/htmx-auth.js b/public/static/htmx-auth.js
new file mode 100644
index 0000000..a032628
--- /dev/null
+++ b/public/static/htmx-auth.js
@@ -0,0 +1,17 @@
+// Handle HTMX error responses with redirects
+// Allows 401/403/404 responses to trigger redirects when HX-Redirect header is present
+document.body.addEventListener("htmx:beforeSwap", function (evt) {
+	// Check if response has HX-Redirect header
+	const hxRedirect = evt.detail.xhr.getResponseHeader("HX-Redirect")
+	if (hxRedirect) {
+		// Allow error status codes (401, 403, 404) to swap when redirect is present
+		if (
+			evt.detail.xhr.status === 401 ||
+			evt.detail.xhr.status === 403 ||
+			evt.detail.xhr.status === 404
+		) {
+			evt.detail.shouldSwap = true
+			evt.detail.isError = false
+		}
+	}
+})
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 07aeb35..74b68b2 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -126,6 +126,7 @@ export const Layout = ({
           crossorigin="anonymous"
         />
         <script src="/static/flash.js"></script>
+        <script src="/static/htmx-auth.js"></script>
       </body>
     </html>
   )
diff --git a/src/middleware.ts b/src/middleware.ts
index 943cc0a..59b8930 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -3,6 +3,7 @@ import type { AuthVariables } from "./middleware/auth"
 import { authMiddleware } from "./middleware/auth"
 import type { FlashVariables } from "./middleware/flash"
 import { flashMiddleware } from "./middleware/flash"
+import { htmxMiddleware } from "./middleware/htmx"
 import { requestLoggingMiddleware } from "./middleware/requestLogging"
 
 type AllVars = AuthVariables & FlashVariables
@@ -15,4 +16,5 @@ export function applyMiddleware(app: Hono) {
   app.use("*", requestLoggingMiddleware)
   app.use("*", authMiddleware)
   app.use("*", flashMiddleware)
+  app.use("*", htmxMiddleware)
 }
diff --git a/src/middleware/htmx.ts b/src/middleware/htmx.ts
new file mode 100644
index 0000000..ad7bb15
--- /dev/null
+++ b/src/middleware/htmx.ts
@@ -0,0 +1,20 @@
+import type { MiddlewareHandler } from "hono"
+
+/**
+ * HTMX middleware - detects HTMX requests and sets a flag
+ *
+ * Sets c.var.isHtmx to true when the HX-Request header is present.
+ * This allows routes to conditionally handle HTMX vs regular requests.
+ */
+export const htmxMiddleware: MiddlewareHandler = async (c, next) => {
+  const isHtmx = c.req.header("HX-Request") === "true"
+  c.set("isHtmx", isHtmx)
+  await next()
+}
+
+// Type augmentation for Hono context
+declare module "hono" {
+  interface ContextVariableMap {
+    isHtmx: boolean
+  }
+}
diff --git a/src/routes/character.abilities.test.ts b/src/routes/character.abilities.test.ts
index ca2f742..74674d3 100644
--- a/src/routes/character.abilities.test.ts
+++ b/src/routes/character.abilities.test.ts
@@ -157,7 +157,7 @@ describe("GET /characters/:id/edit/abilities", () => {
         otherUser = await userFactory.create({}, testCtx.db)
       })
 
-      test("returns 403", async () => {
+      test("redirects to /characters", async () => {
         const response = await makeRequest(
           testCtx.app,
           `/characters/${character.id}/edit/abilities`,
@@ -166,7 +166,8 @@ describe("GET /characters/:id/edit/abilities", () => {
           }
         )
 
-        expect(response.status).toBe(403)
+        expect(response.status).toBe(302)
+        expect(response.headers.get("Location")).toBe("/characters")
       })
     })
   })
diff --git a/src/routes/character.coins.test.ts b/src/routes/character.coins.test.ts
index 865c396..5f130e7 100644
--- a/src/routes/character.coins.test.ts
+++ b/src/routes/character.coins.test.ts
@@ -78,12 +78,13 @@ describe("GET /characters/:id/edit/coins", () => {
         otherUser = await userFactory.create({}, testCtx.db)
       })
 
-      test("returns 403", async () => {
+      test("redirects to /characters", async () => {
         const response = await makeRequest(testCtx.app, `/characters/${character.id}/edit/coins`, {
           user: otherUser,
         })
 
-        expect(response.status).toBe(403)
+        expect(response.status).toBe(302)
+        expect(response.headers.get("Location")).toBe("/characters")
       })
     })
   })
diff --git a/src/routes/character.createitem.test.ts b/src/routes/character.createitem.test.ts
index e1e0e1d..709dfc5 100644
--- a/src/routes/character.createitem.test.ts
+++ b/src/routes/character.createitem.test.ts
@@ -424,7 +424,7 @@ describe("POST /characters/:id/edit/newitem", () => {
       expect(response.headers.get("Location")).toContain("/login")
     })
 
-    test.skip("prevents creating items for another user's character", async () => {
+    test("prevents creating items for another user's character", async () => {
       const otherUser = await userFactory.create({}, testCtx.db)
       const otherCharacter = await characterFactory.create({ user_id: otherUser.id }, testCtx.db)
 
@@ -437,7 +437,7 @@ describe("POST /characters/:id/edit/newitem", () => {
       formData.append("damage.0.die_value", "4")
       formData.append("damage.0.type", "bludgeoning")
 
-      const _response = await makeRequest(
+      const response = await makeRequest(
         testCtx.app,
         `/characters/${otherCharacter.id}/edit/newitem`,
         {
@@ -447,7 +447,10 @@ describe("POST /characters/:id/edit/newitem", () => {
         }
       )
 
-      // The endpoint should handle this gracefully
+      // Should get redirected with 302 (non-HTMX request)
+      expect(response.status).toBe(302)
+      expect(response.headers.get("Location")).toBe("/characters")
+
       // Verify the item does NOT appear in the other character's inventory
       const otherCharItems = await computeCharacterItems(testCtx.db, otherCharacter.id)
       const stolenItem = otherCharItems.find((i) => i.name === "Stolen Item")
diff --git a/src/routes/character.skills.test.ts b/src/routes/character.skills.test.ts
index fa16545..95a0f20 100644
--- a/src/routes/character.skills.test.ts
+++ b/src/routes/character.skills.test.ts
@@ -134,12 +134,13 @@ describe("GET /characters/:id/edit/skills", () => {
         otherUser = await userFactory.create({}, testCtx.db)
       })
 
-      test("returns 403", async () => {
+      test("redirects to /characters", async () => {
         const response = await makeRequest(testCtx.app, `/characters/${character.id}/edit/skills`, {
           user: otherUser,
         })
 
-        expect(response.status).toBe(403)
+        expect(response.status).toBe(302)
+        expect(response.headers.get("Location")).toBe("/characters")
       })
     })
   })
diff --git a/src/routes/character.test.ts b/src/routes/character.test.ts
index 2909698..bc3bdd8 100644
--- a/src/routes/character.test.ts
+++ b/src/routes/character.test.ts
@@ -490,7 +490,8 @@ describe("POST /characters/:id/archive", () => {
           method: "POST",
         })
 
-        expect(response.status).toBe(403)
+        expect(response.status).toBe(302)
+        expect(response.headers.get("Location")).toBe("/characters")
       })
     })
   })
@@ -590,7 +591,112 @@ describe("POST /characters/:id/unarchive", () => {
           method: "POST",
         })
 
-        expect(response.status).toBe(403)
+        expect(response.status).toBe(302)
+        expect(response.headers.get("Location")).toBe("/characters")
+      })
+    })
+  })
+})
+
+describe("GET /characters/:id", () => {
+  const testCtx = useTestApp()
+
+  describe("when user is not authenticated", () => {
+    test("redirects to login", async () => {
+      const user = await userFactory.create({}, testCtx.db)
+      const character = await characterFactory.create({ user_id: user.id }, testCtx.db)
+
+      const response = await makeRequest(testCtx.app, `/characters/${character.id}`)
+
+      expect(response.status).toBe(302)
+      expect(response.headers.get("Location")).toContain("/login")
+    })
+  })
+
+  describe("when user is authenticated", () => {
+    let user: User
+    let character: Character
+
+    beforeEach(async () => {
+      user = await userFactory.create({}, testCtx.db)
+      character = await characterFactory.create({ user_id: user.id }, testCtx.db)
+    })
+
+    describe("when character belongs to another user", () => {
+      test("redirects to /characters", async () => {
+        const otherUser = await userFactory.create({}, testCtx.db)
+
+        const response = await makeRequest(testCtx.app, `/characters/${character.id}`, {
+          user: otherUser,
+        })
+
+        expect(response.status).toBe(302)
+        expect(response.headers.get("Location")).toBe("/characters")
+      })
+    })
+
+    describe("when character belongs to the user", () => {
+      test("renders the character sheet", async () => {
+        const response = await makeRequest(testCtx.app, `/characters/${character.id}`, { user })
+
+        expect(response.status).toBe(200)
+        const body = await response.text()
+        expect(body).toContain(character.name)
+      })
+    })
+  })
+})
+
+describe("GET /characters/:id/history/:field", () => {
+  const testCtx = useTestApp()
+
+  describe("when user is not authenticated", () => {
+    test("redirects to login", async () => {
+      const user = await userFactory.create({}, testCtx.db)
+      const character = await characterFactory.create({ user_id: user.id }, testCtx.db)
+
+      const response = await makeRequest(testCtx.app, `/characters/${character.id}/history/class`)
+
+      expect(response.status).toBe(302)
+      expect(response.headers.get("Location")).toContain("/login")
+    })
+  })
+
+  describe("when user is authenticated", () => {
+    let user: User
+    let character: Character
+
+    beforeEach(async () => {
+      user = await userFactory.create({}, testCtx.db)
+      character = await characterFactory.create({ user_id: user.id }, testCtx.db)
+    })
+
+    describe("when character belongs to another user", () => {
+      test("redirects to /characters", async () => {
+        const otherUser = await userFactory.create({}, testCtx.db)
+
+        const response = await makeRequest(
+          testCtx.app,
+          `/characters/${character.id}/history/hitpoints`,
+          { user: otherUser }
+        )
+
+        expect(response.status).toBe(302)
+        expect(response.headers.get("Location")).toBe("/characters")
+      })
+    })
+
+    describe("when character belongs to the user", () => {
+      test("renders the history", async () => {
+        const response = await makeRequest(
+          testCtx.app,
+          `/characters/${character.id}/history/class`,
+          {
+            user,
+          }
+        )
+
+        expect(response.status).toBe(200)
       })
     })
   })
diff --git a/src/routes/character.tsx b/src/routes/character.tsx
index df68275..d32eea4 100644
--- a/src/routes/character.tsx
+++ b/src/routes/character.tsx
@@ -69,8 +69,10 @@ import { setFlashMsg } from "@src/middleware/flash"
 import { addLevel } from "@src/services/addLevel"
 import { addTrait } from "@src/services/addTrait"
 import { archiveCharacter } from "@src/services/archiveCharacter"
+import { authorizeCharacter, handleUnallowed } from "@src/services/authorize"
 import { castSpell } from "@src/services/castSpell"
 import { computeCharacter } from "@src/services/computeCharacter"
+import type { EquippedComputedItem } from "@src/services/computeCharacterItems"
 import { createCharacter } from "@src/services/createCharacter"
 import { type CreateItemResult, createItem } from "@src/services/createItem"
 import { createItemEffect } from "@src/services/createItemEffect"
@@ -156,11 +158,10 @@ characterRoutes.post("/characters/import", async (c) => {
 
 characterRoutes.get("/characters/:id", async (c) => {
   const id = c.req.param("id") as string
-  const char = await computeCharacter(getDb(c), id)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    return c.redirect("/characters")
-  }
+
+  const authResult = await authorizeCharacter(c, id)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   const currentNote = await getCurrentNote(getDb(c), id)
 
@@ -173,21 +174,10 @@ characterRoutes.get("/characters/:id", async (c) => {
 
 characterRoutes.post("/characters/:id/archive", async (c) => {
   const characterId = c.req.param("id") as string
-  const user = c.var.user!
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", "/characters")
-    return c.body(null, 404)
-  }
-
-  // Verify ownership
-  if (char.user_id !== user.id) {
-    await setFlashMsg(c, "Unauthorized", "error")
-    c.header("HX-Redirect", "/characters")
-    return c.body(null, 403)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   const result = await archiveCharacter(getDb(c), char)
 
@@ -204,21 +194,10 @@ characterRoutes.post("/characters/:id/archive", async (c) => {
 
 characterRoutes.post("/characters/:id/unarchive", async (c) => {
   const characterId = c.req.param("id") as string
-  const user = c.var.user!
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", "/characters?show_archived=true")
-    return c.body(null, 404)
-  }
-
-  // Verify ownership
-  if (char.user_id !== user.id) {
-    await setFlashMsg(c, "Unauthorized", "error")
-    c.header("HX-Redirect", "/characters?show_archived=true")
-    return c.body(null, 403)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   const result = await unarchiveCharacter(getDb(c), char)
 
@@ -237,12 +216,9 @@ characterRoutes.post("/characters/:id/edit/class", async (c) => {
   const characterId = c.req.param("id") as string
   const body = (await c.req.parseBody()) as Record<string, string>
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 204)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   const result = await addLevel(getDb(c), char, body)
 
@@ -267,12 +243,9 @@ characterRoutes.post("/characters/:id/edit/hitpoints", async (c) => {
   const characterId = c.req.param("id") as string
   const body = (await c.req.parseBody()) as Record<string, string>
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 204)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   const result = await updateHitPoints(getDb(c), char, body)
 
@@ -296,12 +269,10 @@ characterRoutes.post("/characters/:id/edit/hitpoints", async (c) => {
 
 characterRoutes.post("/characters/:id/edit/hitdice", async (c) => {
   const characterId = c.req.param("id") as string
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 204)
-  }
+
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   const body = (await c.req.parseBody()) as Record<string, string>
   const result = await updateHitDice(getDb(c), char, body)
@@ -327,12 +298,9 @@ characterRoutes.post("/characters/:id/edit/spellslots", async (c) => {
   const characterId = c.req.param("id") as string
   const body = (await c.req.parseBody()) as Record<string, string>
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 204)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   const result = await updateSpellSlots(getDb(c), char, body)
 
@@ -351,12 +319,9 @@ characterRoutes.post("/characters/:id/edit/prepspell", async (c) => {
   const characterId = c.req.param("id") as string
   const body = (await c.req.parseBody()) as Record<string, string>
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 204)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   const result = await prepareSpell(getDb(c), char, body)
 
@@ -375,12 +340,9 @@ characterRoutes.post("/characters/:id/edit/spellbook", async (c) => {
   const characterId = c.req.param("id") as string
   const body = (await c.req.parseBody()) as Record<string, string>
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 204)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   const result = await learnSpell(getDb(c), char, body)
 
@@ -395,18 +357,10 @@ characterRoutes.post("/characters/:id/edit/spellbook", async (c) => {
 
 characterRoutes.get("/characters/:id/edit/trait", async (c) => {
   const characterId = c.req.param("id") as string
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 204)
-  }
 
-  if (char.user_id !== c.var.user?.id) {
-    await setFlashMsg(c, "You do not have permission to edit this character")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 403)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   return c.html(<TraitEditForm character={char} />)
 })
@@ -415,12 +369,9 @@ characterRoutes.post("/characters/:id/edit/trait", async (c) => {
   const characterId = c.req.param("id") as string
   const body = (await c.req.parseBody()) as Record<string, string>
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 204)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   // Set source to "custom" for user-added traits
   body.source = "custom"
@@ -440,12 +391,9 @@ characterRoutes.post("/characters/:id/edit/newitem", async (c) => {
   const characterId = c.req.param("id") as string
   const body = (await c.req.parseBody({ all: true, dot: true })) as Record<string, string>
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 204)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   // if we have a template change, skip the validation
   let result: CreateItemResult
@@ -468,21 +416,12 @@ characterRoutes.get("/characters/:id/items/:itemId", async (c) => {
   const characterId = c.req.param("id") as string
   const itemId = c.req.param("itemId") as string
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 204)
-  }
-
-  if (char.user_id !== c.var.user?.id) {
-    await setFlashMsg(c, "You do not have permission to view this character")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 403)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   // Find the item in the computed character's items
-  const item = char.equippedItems.find((i) => i.id === itemId)
+  const item = char.equippedItems.find((i: EquippedComputedItem) => i.id === itemId)
   if (!item) {
     await setFlashMsg(c, "Item not found", "error")
     c.header("HX-Redirect", `/characters/${characterId}`)
@@ -496,18 +435,9 @@ characterRoutes.get("/characters/:id/items/:itemId/edit", async (c) => {
   const characterId = c.req.param("id") as string
   const itemId = c.req.param("itemId") as string
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 204)
-  }
-
-  if (char.user_id !== c.var.user?.id) {
-    await setFlashMsg(c, "You do not have permission to edit this character")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 403)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   // Load the item
   const item = await findItemById(getDb(c), itemId)
@@ -528,18 +458,9 @@ characterRoutes.post("/characters/:id/items/:itemId/edit", async (c) => {
   const itemId = c.req.param("itemId") as string
   const body = (await c.req.parseBody({ all: true, dot: true })) as Record<string, string>
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 204)
-  }
-
-  if (char.user_id !== c.var.user?.id) {
-    await setFlashMsg(c, "You do not have permission to edit this character")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 403)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   const result = await updateItem(getDb(c), itemId, characterId, body)
 
@@ -574,20 +495,11 @@ characterRoutes.get("/characters/:id/items/:itemId/effects", async (c) => {
   const characterId = c.req.param("id") as string
   const itemId = c.req.param("itemId") as string
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", "/characters")
-    return c.body(null, 204)
-  }
-
-  if (char.user_id !== c.var.user?.id) {
-    await setFlashMsg(c, "You do not have permission to edit this character")
-    c.header("HX-Redirect", "/characters")
-    return c.body(null, 403)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
-  const item = char.equippedItems.find((i) => i.id === itemId)
+  const item = char.equippedItems.find((i: EquippedComputedItem) => i.id === itemId)
   if (!item) {
     return c.html(
       <ModalContent title="Error">
@@ -606,20 +518,11 @@ characterRoutes.post("/characters/:id/items/:itemId/effects", async (c) => {
   const characterId = c.req.param("id") as string
   const itemId = c.req.param("itemId") as string
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", "/characters")
-    return c.body(null, 204)
-  }
-
-  if (char.user_id !== c.var.user?.id) {
-    await setFlashMsg(c, "You do not have permission to edit this character")
-    c.header("HX-Redirect", "/characters")
-    return c.body(null, 403)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
-  let item = char.equippedItems.find((i) => i.id === itemId)
+  let item = char.equippedItems.find((i: EquippedComputedItem) => i.id === itemId)
   if (!item) {
     return c.html(
       <ModalContent title="Error">
@@ -648,7 +551,7 @@ characterRoutes.post("/characters/:id/items/:itemId/effects", async (c) => {
 
   // Effect created successfully - reload the effects editor and all affected panels
   const updatedChar = (await computeCharacter(getDb(c), characterId))!
-  item = updatedChar.equippedItems.find((i) => i.id === itemId)!
+  item = updatedChar.equippedItems.find((i: EquippedComputedItem) => i.id === itemId)!
   return c.html(
     <>
       <ItemEffectsEditor
@@ -671,20 +574,11 @@ characterRoutes.delete("/characters/:id/items/:itemId/effects/:effectId", async
   const itemId = c.req.param("itemId") as string
   const effectId = c.req.param("effectId") as string
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", "/characters")
-    return c.body(null, 204)
-  }
-
-  if (char.user_id !== c.var.user?.id) {
-    await setFlashMsg(c, "You do not have permission to edit this character")
-    c.header("HX-Redirect", "/characters")
-    return c.body(null, 403)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
-  let item = char.equippedItems.find((i) => i.id === itemId)
+  let item = char.equippedItems.find((i: EquippedComputedItem) => i.id === itemId)
   if (!item) {
     return c.html(
       <ModalContent title="Error">
@@ -710,7 +604,7 @@ characterRoutes.delete("/characters/:id/items/:itemId/effects/:effectId", async
 
   // Effect deleted successfully - reload the effects editor and all affected panels
   const updatedChar = (await computeCharacter(getDb(c), characterId))!
-  item = updatedChar.equippedItems.find((i) => i.id === itemId)!
+  item = updatedChar.equippedItems.find((i: EquippedComputedItem) => i.id === itemId)!
   return c.html(
     <>
       <ItemEffectsEditor character={updatedChar} item={item} effects={item.effects} />
@@ -727,10 +621,8 @@ characterRoutes.post("/characters/:id/items/:itemId/wear", async (c) => {
   const characterId = c.req.param("id") as string
   const itemId = c.req.param("itemId") as string
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char || char.user_id !== c.var.user?.id) {
-    return c.body(null, 403)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return c.body(null, 403)
 
   await changeItemState(getDb(c), characterId, itemId, { worn: true })
 
@@ -750,10 +642,8 @@ characterRoutes.post("/characters/:id/items/:itemId/remove", async (c) => {
   const characterId = c.req.param("id") as string
   const itemId = c.req.param("itemId") as string
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char || char.user_id !== c.var.user?.id) {
-    return c.body(null, 403)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return c.body(null, 403)
 
   await changeItemState(getDb(c), characterId, itemId, { worn: false })
 
@@ -773,10 +663,8 @@ characterRoutes.post("/characters/:id/items/:itemId/wield", async (c) => {
   const characterId = c.req.param("id") as string
   const itemId = c.req.param("itemId") as string
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char || char.user_id !== c.var.user?.id) {
-    return c.body(null, 403)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return c.body(null, 403)
 
   await changeItemState(getDb(c), characterId, itemId, { wielded: true })
 
@@ -796,10 +684,8 @@ characterRoutes.post("/characters/:id/items/:itemId/sheathe", async (c) => {
   const characterId = c.req.param("id") as string
   const itemId = c.req.param("itemId") as string
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char || char.user_id !== c.var.user?.id) {
-    return c.body(null, 403)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return c.body(null, 403)
 
   await changeItemState(getDb(c), characterId, itemId, { wielded: false })
 
@@ -819,10 +705,8 @@ characterRoutes.post("/characters/:id/items/:itemId/drop", async (c) => {
   const characterId = c.req.param("id") as string
   const itemId = c.req.param("itemId") as string
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char || char.user_id !== c.var.user?.id) {
-    return c.body(null, 403)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return c.body(null, 403)
 
   await changeItemState(getDb(c), characterId, itemId, { dropped: true })
 
@@ -842,20 +726,11 @@ characterRoutes.get("/characters/:id/items/:itemId/charges", async (c) => {
   const characterId = c.req.param("id") as string
   const itemId = c.req.param("itemId") as string
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", "/characters")
-    return c.body(null, 204)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
-  if (char.user_id !== c.var.user?.id) {
-    await setFlashMsg(c, "You do not have permission to edit this character")
-    c.header("HX-Redirect", "/characters")
-    return c.body(null, 403)
-  }
-
-  const item = char.equippedItems.find((i) => i.id === itemId)
+  const item = char.equippedItems.find((i: EquippedComputedItem) => i.id === itemId)
   if (!item) {
     return c.html(
       <ModalContent title="Error">
@@ -874,20 +749,11 @@ characterRoutes.post("/characters/:id/items/:itemId/charges", async (c) => {
   const characterId = c.req.param("id") as string
   const itemId = c.req.param("itemId") as string
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", "/characters")
-    return c.body(null, 204)
-  }
-
-  if (char.user_id !== c.var.user?.id) {
-    await setFlashMsg(c, "You do not have permission to edit this character")
-    c.header("HX-Redirect", "/characters")
-    return c.body(null, 403)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
-  const item = char.equippedItems.find((i) => i.id === itemId)
+  const item = char.equippedItems.find((i: EquippedComputedItem) => i.id === itemId)
   if (!item) {
     return c.html(
       <ModalContent title="Error">
@@ -921,18 +787,10 @@ characterRoutes.post("/characters/:id/items/:itemId/charges", async (c) => {
 
 characterRoutes.get("/characters/:id/castspell", async (c) => {
   const characterId = c.req.param("id") as string
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 204)
-  }
 
-  if (char.user_id !== c.var.user?.id) {
-    await setFlashMsg(c, "You do not have permission to edit this character")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 403)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   const values: Record<string, string> = {}
   for (const qField of ["spell_id", "as_ritual"]) {
@@ -947,12 +805,10 @@ characterRoutes.get("/characters/:id/castspell", async (c) => {
 
 characterRoutes.post("/characters/:id/castspell", async (c) => {
   const characterId = c.req.param("id") as string
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 204)
-  }
+
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   const body = (await c.req.parseBody()) as Record<string, string>
   const result = await castSpell(getDb(c), char, body)
@@ -973,12 +829,10 @@ characterRoutes.post("/characters/:id/castspell", async (c) => {
 // GET /characters/:id/rest/short - Show short rest modal
 characterRoutes.get("/characters/:id/rest/short", async (c) => {
   const characterId = c.req.param("id") as string
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 204)
-  }
+
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   return c.html(<ShortRestForm character={char} values={{}} errors={{}} />)
 })
@@ -986,12 +840,10 @@ characterRoutes.get("/characters/:id/rest/short", async (c) => {
 // GET /characters/:id/rest/long - Show long rest modal
 characterRoutes.get("/characters/:id/rest/long", async (c) => {
   const characterId = c.req.param("id") as string
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 204)
-  }
+
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   return c.html(<LongRestForm character={char} values={{}} errors={{}} />)
 })
@@ -999,12 +851,10 @@ characterRoutes.get("/characters/:id/rest/long", async (c) => {
 // POST /characters/:id/rest/short - Process short rest
 characterRoutes.post("/characters/:id/rest/short", async (c) => {
   const characterId = c.req.param("id") as string
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 204)
-  }
+
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   const body = await c.req.parseBody({ all: true, dot: true })
   // biome-ignore lint/suspicious/noExplicitAny: input might be strings, arrays, or objects
@@ -1051,12 +901,10 @@ characterRoutes.post("/characters/:id/rest/short", async (c) => {
 // POST /characters/:id/rest/long - Process long rest
 characterRoutes.post("/characters/:id/rest/long", async (c) => {
   const characterId = c.req.param("id") as string
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 204)
-  }
+
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   const body = (await c.req.parseBody()) as Record<string, string>
   const result = await longRest(getDb(c), char, body)
@@ -1095,18 +943,9 @@ characterRoutes.get("/characters/:id/edit/:field", async (c) => {
   const characterId = c.req.param("id") as string
   const field = c.req.param("field") as string
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 204)
-  }
-
-  if (char.user_id !== c.var.user?.id) {
-    await setFlashMsg(c, "You do not have permission to edit this character")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 403)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   if (field === "class") {
     return c.html(<ClassEditForm character={char} values={{}} />)
@@ -1189,12 +1028,10 @@ characterRoutes.get("/characters/:id/edit/:field", async (c) => {
 // POST /characters/:id/edit/abilities - Update all abilities
 characterRoutes.post("/characters/:id/edit/abilities", async (c) => {
   const characterId = c.req.param("id") as string
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 204)
-  }
+
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   const body = (await c.req.parseBody()) as Record<string, string>
   const result = await updateAbilities(getDb(c), char, body)
@@ -1220,12 +1057,10 @@ characterRoutes.post("/characters/:id/edit/abilities", async (c) => {
 // POST /characters/:id/edit/skills - Update all skills
 characterRoutes.post("/characters/:id/edit/skills", async (c) => {
   const characterId = c.req.param("id") as string
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 204)
-  }
+
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   const body = (await c.req.parseBody()) as Record<string, string>
   const result = await updateSkills(getDb(c), char, body)
@@ -1247,12 +1082,10 @@ characterRoutes.post("/characters/:id/edit/skills", async (c) => {
 // POST /characters/:id/edit/coins - Update coins
 characterRoutes.post("/characters/:id/edit/coins", async (c) => {
   const characterId = c.req.param("id") as string
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 204)
-  }
+
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   const body = (await c.req.parseBody()) as Record<string, string>
   const result = await updateCoins(getDb(c), char, body)
@@ -1268,21 +1101,12 @@ characterRoutes.post("/characters/:id/edit/coins", async (c) => {
 
 // POST /characters/:id/avatar - Set character avatar
 characterRoutes.post("/characters/:id/avatar", async (c) => {
-  const user = c.get("user")
-  if (!user) {
-    c.header("HX-Redirect", "/login")
-    return c.body(null, 302)
-  }
-
   const characterId = c.req.param("id")
   const body = (await c.req.parseBody()) as Record<string, string>
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", `/characters`)
-    return c.body(null, 204)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+  const char = authResult.character
 
   const result = await updateAvatar(getDb(c), char, body)
 
@@ -1299,6 +1123,9 @@ characterRoutes.get("/characters/:id/history/:field", async (c) => {
   const characterId = c.req.param("id") as string
   const field = c.req.param("field") as string
 
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
+
   if (field === "class") {
     const levels = await findByCharacterId(getDb(c), characterId)
     // Reverse to show most recent first
@@ -1420,16 +1247,9 @@ characterRoutes.get("/characters/:id/history/:field", async (c) => {
 // POST /characters/:id/notes - Auto-save notes
 characterRoutes.post("/characters/:id/notes", async (c) => {
   const characterId = c.req.param("id") as string
-  const user = c.var.user!
 
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    return c.html(<NotesSaveIndicator error={true} />)
-  }
-
-  if (char.user_id !== user.id) {
-    return c.html(<NotesSaveIndicator error={true} />)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return c.html(<NotesSaveIndicator error={true} />)
 
   const body = (await c.req.parseBody()) as Record<string, string>
   const content = body.content || ""
@@ -1447,20 +1267,9 @@ characterRoutes.post("/characters/:id/notes", async (c) => {
 characterRoutes.post("/characters/:id/notes/restore/:noteId", async (c) => {
   const characterId = c.req.param("id") as string
   const noteId = c.req.param("noteId") as string
-  const user = c.var.user!
-
-  const char = await computeCharacter(getDb(c), characterId)
-  if (!char) {
-    await setFlashMsg(c, "Character not found", "error")
-    c.header("HX-Redirect", "/characters")
-    return c.body(null, 204)
-  }
 
-  if (char.user_id !== user.id) {
-    await setFlashMsg(c, "Unauthorized", "error")
-    c.header("HX-Redirect", "/characters")
-    return c.body(null, 403)
-  }
+  const authResult = await authorizeCharacter(c, characterId)
+  if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
 
   // Find the note to restore
   const noteToRestore = await findNoteById(getDb(c), noteId)
diff --git a/src/services/authorize.test.ts b/src/services/authorize.test.ts
new file mode 100644
index 0000000..493b363
--- /dev/null
+++ b/src/services/authorize.test.ts
@@ -0,0 +1,230 @@
+import { beforeEach, describe, expect, test } from "bun:test"
+import type { Character } from "@src/db/characters"
+import type { User } from "@src/db/users"
+import { useTestApp } from "@src/test/app"
+import { characterFactory } from "@src/test/factories/character"
+import { userFactory } from "@src/test/factories/user"
+import { authorizeCharacter, handleUnallowed } from "./authorize"
+
+describe("authorizeCharacter", () => {
+  const testCtx = useTestApp()
+
+  describe("when user is not authenticated", () => {
+    test("returns not_authenticated reason", async () => {
+      // Create a user for the character but not for the request
+      const user = await userFactory.create({}, testCtx.db)
+      const character = await characterFactory.create({ user_id: user.id }, testCtx.db)
+
+      // Create a mock context without a user
+      const mockContext = {
+        var: {},
+        // biome-ignore lint/suspicious/noExplicitAny: test mock
+      } as any
+
+      const result = await authorizeCharacter(mockContext, character.id)
+
+      expect(result.allowed).toBe(false)
+      if (!result.allowed) {
+        expect(result.reason).toBe("not_authenticated")
+      }
+    })
+  })
+
+  describe("when user is authenticated", () => {
+    let user: User
+
+    beforeEach(async () => {
+      user = await userFactory.create({}, testCtx.db)
+    })
+
+    describe("when character does not exist", () => {
+      test("returns character_not_found reason", async () => {
+        const mockContext = {
+          var: { user },
+          get: () => testCtx.db,
+          // biome-ignore lint/suspicious/noExplicitAny: test mock
+        } as any
+
+        const result = await authorizeCharacter(mockContext, "00000000-0000-0000-0000-000000000000")
+
+        expect(result.allowed).toBe(false)
+        if (!result.allowed) {
+          expect(result.reason).toBe("character_not_found")
+        }
+      })
+    })
+
+    describe("when character belongs to another user", () => {
+      let otherUser: User
+      let character: Character
+
+      beforeEach(async () => {
+        otherUser = await userFactory.create({}, testCtx.db)
+        character = await characterFactory.create({ user_id: otherUser.id }, testCtx.db)
+      })
+
+      test("returns not_owner reason", async () => {
+        const mockContext = {
+          var: { user },
+          get: () => testCtx.db,
+          // biome-ignore lint/suspicious/noExplicitAny: test mock
+        } as any
+
+        const result = await authorizeCharacter(mockContext, character.id)
+
+        expect(result.allowed).toBe(false)
+        if (!result.allowed) {
+          expect(result.reason).toBe("not_owner")
+        }
+      })
+    })
+
+    describe("when character belongs to the user", () => {
+      let character: Character
+
+      beforeEach(async () => {
+        character = await characterFactory.create({ user_id: user.id }, testCtx.db)
+      })
+
+      test("returns allowed with character", async () => {
+        const mockContext = {
+          var: { user },
+          get: () => testCtx.db,
+          // biome-ignore lint/suspicious/noExplicitAny: test mock
+        } as any
+
+        const result = await authorizeCharacter(mockContext, character.id)
+
+        expect(result.allowed).toBe(true)
+        if (result.allowed) {
+          expect(result.character.id).toBe(character.id)
+          expect(result.character.name).toBe(character.name)
+        }
+      })
+    })
+  })
+})
+
+describe("handleUnallowed", () => {
+  const testCtx = useTestApp()
+
+  describe("with not_authenticated reason", () => {
+    test("returns 401 status", async () => {
+      const mockContext = {
+        var: { isHtmx: true },
+        header: () => {},
+        body: (_: null, status: number) => ({ status }),
+        get: () => testCtx.db,
+        // biome-ignore lint/suspicious/noExplicitAny: test mock
+      } as any
+
+      const response = await handleUnallowed(mockContext, "not_authenticated")
+
+      expect(response.status).toBe(401)
+    })
+
+    test("uses HX-Redirect header for HTMX requests", async () => {
+      let redirectHeader = ""
+      const mockContext = {
+        var: { isHtmx: true },
+        header: (name: string, value: string) => {
+          if (name === "HX-Redirect") redirectHeader = value
+        },
+        body: (_: null, status: number) => ({ status }),
+        get: () => testCtx.db,
+        // biome-ignore lint/suspicious/noExplicitAny: test mock
+      } as any
+
+      await handleUnallowed(mockContext, "not_authenticated")
+
+      expect(redirectHeader).toBe("/login")
+    })
+
+    test("uses standard redirect for non-HTMX requests", async () => {
+      let redirectUrl = ""
+      const headers: Record<string, string> = {}
+      const mockContext = {
+        var: { isHtmx: false },
+        header: (name: string, value: string) => {
+          headers[name] = value
+        },
+        redirect: (url: string) => {
+          redirectUrl = url
+          return { status: 302 }
+        },
+        get: () => testCtx.db,
+        // biome-ignore lint/suspicious/noExplicitAny: test mock
+      } as any
+
+      await handleUnallowed(mockContext, "not_authenticated")
+
+      expect(redirectUrl).toBe("/login")
+    })
+  })
+
+  describe("with character_not_found reason", () => {
+    test("returns 404 status", async () => {
+      const mockContext = {
+        var: { isHtmx: true },
+        header: () => {},
+        body: (_: null, status: number) => ({ status }),
+        get: () => testCtx.db,
+        // biome-ignore lint/suspicious/noExplicitAny: test mock
+      } as any
+
+      const response = await handleUnallowed(mockContext, "character_not_found")
+
+      expect(response.status).toBe(404)
+    })
+
+    test("redirects to /characters", async () => {
+      let redirectHeader = ""
+      const mockContext = {
+        var: { isHtmx: true },
+        header: (name: string, value: string) => {
+          if (name === "HX-Redirect") redirectHeader = value
+        },
+        body: (_: null, status: number) => ({ status }),
+        get: () => testCtx.db,
+        // biome-ignore lint/suspicious/noExplicitAny: test mock
+      } as any
+
+      await handleUnallowed(mockContext, "character_not_found")
+
+      expect(redirectHeader).toBe("/characters")
+    })
+  })
+
+  describe("with not_owner reason", () => {
+    test("returns 403 status", async () => {
+      const mockContext = {
+        var: { isHtmx: true },
+        header: () => {},
+        body: (_: null, status: number) => ({ status }),
+        get: () => testCtx.db,
+        // biome-ignore lint/suspicious/noExplicitAny: test mock
+      } as any
+
+      const response = await handleUnallowed(mockContext, "not_owner")
+
+      expect(response.status).toBe(403)
+    })
+
+    test("redirects to /characters", async () => {
+      let redirectHeader = ""
+      const mockContext = {
+        var: { isHtmx: true },
+        header: (name: string, value: string) => {
+          if (name === "HX-Redirect") redirectHeader = value
+        },
+        body: (_: null, status: number) => ({ status }),
+        get: () => testCtx.db,
+        // biome-ignore lint/suspicious/noExplicitAny: test mock
+      } as any
+
+      await handleUnallowed(mockContext, "not_owner")
+
+      expect(redirectHeader).toBe("/characters")
+    })
+  })
+})
diff --git a/src/services/authorize.ts b/src/services/authorize.ts
new file mode 100644
index 0000000..774cc7b
--- /dev/null
+++ b/src/services/authorize.ts
@@ -0,0 +1,102 @@
+import { getDb } from "@src/db"
+import { setFlashMsg } from "@src/middleware/flash"
+import type { Context } from "hono"
+import { type ComputedCharacter, computeCharacter } from "./computeCharacter"
+
+/**
+ * Reasons why character access might not be allowed
+ */
+export type UnallowedReason = "not_authenticated" | "character_not_found" | "not_owner"
+
+/**
+ * Result of authorization check - discriminated union
+ */
+export type AllowedResult =
+  | { allowed: true; character: ComputedCharacter }
+  | { allowed: false; reason: UnallowedReason }
+
+/**
+ * Authorize access to a character
+ *
+ * Checks:
+ * 1. User is authenticated
+ * 2. Character exists
+ * 3. User owns the character
+ *
+ * @param c - Hono context (must have user from auth middleware)
+ * @param characterId - ID of character to authorize
+ * @returns AllowedResult with either the character or a reason for denial
+ */
+export async function authorizeCharacter(c: Context, characterId: string): Promise<AllowedResult> {
+  // Check authentication
+  const user = c.var.user
+  if (!user) {
+    return { allowed: false, reason: "not_authenticated" }
+  }
+
+  // Fetch character
+  const character = await computeCharacter(getDb(c), characterId)
+  if (!character) {
+    return { allowed: false, reason: "character_not_found" }
+  }
+
+  // Check ownership
+  if (character.user_id !== user.id) {
+    return { allowed: false, reason: "not_owner" }
+  }
+
+  // Success!
+  return { allowed: true, character }
+}
+
+/**
+ * Handle unauthorized access by setting flash message and redirecting
+ *
+ * Automatically detects HTMX requests and uses appropriate redirect mechanism.
+ * Uses semantic HTTP status codes:
+ * - 401 for not authenticated
+ * - 404 for character not found
+ * - 403 for not owner
+ *
+ * @param c - Hono context (must have isHtmx from HTMX middleware)
+ * @param reason - Why access was denied
+ * @returns Response with appropriate status code and redirect
+ */
+export async function handleUnallowed(c: Context, reason: UnallowedReason): Promise<Response> {
+  // Determine status code and flash message
+  let status: 401 | 403 | 404
+  let message: string
+  let redirectTo: string
+
+  switch (reason) {
+    case "not_authenticated":
+      status = 401
+      message = "Please log in to continue"
+      redirectTo = "/login"
+      break
+    case "character_not_found":
+      status = 404
+      message = "Character not found"
+      redirectTo = "/characters"
+      break
+    case "not_owner":
+      status = 403
+      message = "You do not have permission to access this character"
+      redirectTo = "/characters"
+      break
+  }
+
+  // Set flash message
+  await setFlashMsg(c, message, "error")
+
+  // Handle redirect based on request type
+  const isHtmx = c.var.isHtmx
+  if (isHtmx) {
+    // HTMX request - use HX-Redirect header with semantic status
+    c.header("HX-Redirect", redirectTo)
+    return c.body(null, status)
+  }
+
+  // Regular request - use 302 redirect (semantic status codes don't work with redirects)
+  return c.redirect(redirectTo, 302)
+}

From 11520d8e920bb259eb4eeb22b693ee1a65ae713d Mon Sep 17 00:00:00 2001
From: Igor Serebryany <igor47@moomers.org>
Date: Mon, 10 Nov 2025 21:03:11 -0800
Subject: [PATCH 08/12] fix: error flash messages

---
 src/components/Layout.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 74b68b2..d7516e8 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -25,9 +25,11 @@ export const Layout = ({
   currentPage,
   flash,
 }: LayoutProps) => {
+  // Map flash level to Bootstrap alert classes (Bootstrap uses "danger" not "error")
+  const flashBootstrapClass = flash?.level === "error" ? "danger" : flash?.level
   const flashClass = clsx(
     "alert alert-dismissible fade show",
-    flash ? `alert-${flash.level}` : null
+    flash ? `alert-${flashBootstrapClass}` : null
   )
 
   // Default metadata values

From 1583ad7b04062872693d51b5af4b38978c3a4848 Mon Sep 17 00:00:00 2001
From: Igor Serebryany <igor47@moomers.org>
Date: Mon, 10 Nov 2025 23:15:27 -0800
Subject: [PATCH 09/12] feat: handle streaming/prep chat errors

previously, we would just get into a busy loop trying to stream again and again. instead, we track errors via the db and present different error UIs depending on circumstances
---
 db/schema.sql                                 |  11 +-
 ...71524_add_error_field_to_chat_messages.sql |   7 ++
 ...085621_fix_double_encoded_jsonb_fields.sql |  21 ++++
 src/ai/chat.ts                                |  76 ++++++++++---
 src/components/Character.tsx                  |   1 +
 src/components/ChatBox.tsx                    | 105 ++++++++++++++++--
 src/db/chat_messages.ts                       |  65 ++++++++---
 src/routes/chat.tsx                           |  81 +++++++++-----
 src/services/computeChat.ts                   |  67 ++++++++++-
 src/services/toolExecution.ts                 |   6 +-
 10 files changed, 360 insertions(+), 80 deletions(-)
 create mode 100644 migrations/20251111071524_add_error_field_to_chat_messages.sql
 create mode 100644 migrations/20251111085621_fix_double_encoded_jsonb_fields.sql

diff --git a/db/schema.sql b/db/schema.sql
index 5fde2e3..77b8c6a 100644
--- a/db/schema.sql
+++ b/db/schema.sql
@@ -1,7 +1,7 @@
-\restrict pvjOXl9YLIvZIpwIY4SpsjlLg6SdnGsubpkeBvXexBkbo3eJ75tXDZIElIyU7Rk
+\restrict dHjV1HblrFJx4fO7pHqv5n4S8XTimapDTTVbRC9wurJFqB3ZtlnByHRDIhsNzgZ
 
 -- Dumped from database version 16.10
--- Dumped by pg_dump version 17.6
+-- Dumped by pg_dump version 18.0
 
 SET statement_timeout = 0;
 SET lock_timeout = 0;
@@ -296,6 +296,7 @@ CREATE TABLE public.chat_messages (
     tool_results jsonb,
     created_at timestamp with time zone DEFAULT CURRENT_TIMESTAMP NOT NULL,
     chat_id character varying(26) NOT NULL,
+    error jsonb,
     CONSTRAINT chat_messages_role_check CHECK ((role = ANY (ARRAY['user'::text, 'assistant'::text, 'system'::text])))
 );
 
@@ -1102,7 +1103,7 @@ ALTER TABLE ONLY public.items
 -- PostgreSQL database dump complete
 --
 
-\unrestrict pvjOXl9YLIvZIpwIY4SpsjlLg6SdnGsubpkeBvXexBkbo3eJ75tXDZIElIyU7Rk
+\unrestrict dHjV1HblrFJx4fO7pHqv5n4S8XTimapDTTVbRC9wurJFqB3ZtlnByHRDIhsNzgZ
 
 
 --
@@ -1139,4 +1140,6 @@ INSERT INTO public.schema_migrations (version) VALUES
     ('20251027195737'),
     ('20251028010531'),
     ('20251029183629'),
-    ('20251030232843');
+    ('20251030232843'),
+    ('20251111071524'),
+    ('20251111085621');
diff --git a/migrations/20251111071524_add_error_field_to_chat_messages.sql b/migrations/20251111071524_add_error_field_to_chat_messages.sql
new file mode 100644
index 0000000..830f0d7
--- /dev/null
+++ b/migrations/20251111071524_add_error_field_to_chat_messages.sql
@@ -0,0 +1,7 @@
+-- migrate:up
+ALTER TABLE chat_messages
+  ADD COLUMN error JSONB;
+
+-- migrate:down
+ALTER TABLE chat_messages
+  DROP COLUMN error;
diff --git a/migrations/20251111085621_fix_double_encoded_jsonb_fields.sql b/migrations/20251111085621_fix_double_encoded_jsonb_fields.sql
new file mode 100644
index 0000000..e7f9e12
--- /dev/null
+++ b/migrations/20251111085621_fix_double_encoded_jsonb_fields.sql
@@ -0,0 +1,21 @@
+-- migrate:up
+-- Fix double-encoded JSONB fields in chat_messages
+-- Converts string-encoded JSON back to proper JSONB objects
+
+UPDATE chat_messages
+SET tool_calls = (tool_calls#>>'{}')::jsonb
+WHERE tool_calls IS NOT NULL
+  AND jsonb_typeof(tool_calls) = 'string';
+
+UPDATE chat_messages
+SET tool_results = (tool_results#>>'{}')::jsonb
+WHERE tool_results IS NOT NULL
+  AND jsonb_typeof(tool_results) = 'string';
+
+UPDATE chat_messages
+SET error = (error#>>'{}')::jsonb
+WHERE error IS NOT NULL
+  AND jsonb_typeof(error) = 'string';
+
+-- migrate:down
+-- No down migration - this is a data fix
diff --git a/src/ai/chat.ts b/src/ai/chat.ts
index ee9f26f..5e5109e 100644
--- a/src/ai/chat.ts
+++ b/src/ai/chat.ts
@@ -40,6 +40,7 @@ export async function prepareChatRequest(
       content: systemPrompt,
       tool_calls: null,
       tool_results: null,
+      error: null,
     })
   }
 
@@ -51,6 +52,7 @@ export async function prepareChatRequest(
     content: userMessage,
     tool_calls: null,
     tool_results: null,
+    error: null,
   })
 
   return { chatId: finalChatId }
@@ -136,8 +138,8 @@ async function validateApprovalTools(
 }
 
 /**
- * Execute a chat request by streaming AI response and creating assistant message after completion
- * Returns the ID of the newly created assistant message
+ * Execute a chat request by streaming AI response and creating assistant message
+ * Always returns the ID of the newly created assistant message (with content or error)
  */
 export async function executeChatRequest(
   db: SQL,
@@ -150,23 +152,45 @@ export async function executeChatRequest(
     throw new Error("Chat is not ready to stream - shouldStream flag is false")
   }
 
-  const model = getChatModel()
-
-  // Wrap streamText in a Promise that resolves when streaming completes
-  const requestBody = {
-    model,
-    maxOutputTokens: 1024,
-    messages: computedChat.llmMessages,
-    tools: TOOL_DEFINITIONS,
-    onError: ({ error }: { error: unknown }) => {
-      // Handle errors that occur during streaming (before onFinish)
-      logger.error("AI streaming error", error as Error, {
-        character_id: character.id,
-      })
-    },
+  // First try-catch: Prep phase (building request)
+  let requestBody: Parameters<typeof streamText>[0]
+  try {
+    const model = getChatModel()
+    requestBody = {
+      model,
+      maxOutputTokens: 1024,
+      messages: computedChat.llmMessages,
+      tools: TOOL_DEFINITIONS,
+      onError: ({ error }: { error: unknown }) => {
+        logger.error("AI streaming error", error as Error, {
+          character_id: character.id,
+        })
+      },
+    }
+  } catch (err) {
+    logger.error("AI prep error", err as Error, {
+      chatId: computedChat.chatId,
+      character_id: character.id,
+    })
+
+    // Create assistant message with prep error
+    const assistantMsg = await saveChatMessage(db, {
+      character_id: character.id,
+      chat_id: computedChat.chatId,
+      role: "assistant",
+      content: "",
+      tool_calls: null,
+      tool_results: null,
+      error: {
+        type: "prep",
+        message: err instanceof Error ? err.message : "Unknown prep error",
+      },
+    })
+
+    return assistantMsg.id
   }
 
-  // Start streaming - result is returned synchronously, streaming happens via callbacks
+  // Second try-catch: Streaming phase
   const messageAggregator: string[] = []
   try {
     const result = streamText(requestBody)
@@ -198,6 +222,7 @@ export async function executeChatRequest(
       content: messageAggregator.join(""),
       tool_calls: Object.keys(toolCalls).length > 0 ? toolCalls : null,
       tool_results: Object.keys(toolResults).length > 0 ? toolResults : null,
+      error: null,
     })
 
     // Auto-execute any read-only tools immediately
@@ -212,6 +237,21 @@ export async function executeChatRequest(
       chatId: computedChat.chatId,
       character_id: character.id,
     })
-    throw err
+
+    // Create assistant message with stream error
+    const assistantMsg = await saveChatMessage(db, {
+      character_id: character.id,
+      chat_id: computedChat.chatId,
+      role: "assistant",
+      content: "",
+      tool_calls: null,
+      tool_results: null,
+      error: {
+        type: "stream",
+        message: err instanceof Error ? err.message : "Unknown stream error",
+      },
+    })
+
+    return assistantMsg.id
   }
 }
diff --git a/src/components/Character.tsx b/src/components/Character.tsx
index 020686c..7872676 100644
--- a/src/components/Character.tsx
+++ b/src/components/Character.tsx
@@ -21,6 +21,7 @@ export const Character = ({ character, currentNote }: CharacterProps) => {
     llmMessages: [],
     shouldStream: false,
     unresolvedToolCalls: [],
+    consecutiveErrorCount: 0,
   }
 
   return (
diff --git a/src/components/ChatBox.tsx b/src/components/ChatBox.tsx
index 0517e83..4103fd6 100644
--- a/src/components/ChatBox.tsx
+++ b/src/components/ChatBox.tsx
@@ -51,6 +51,18 @@ export const ChatBox = ({ character, computedChat, swapOob = false }: ChatBoxPro
     return null
   }
 
+  let inputPlaceholder = "e.g. I spent 50 gold on a sword"
+  if (computedChat.unresolvedToolCalls.length > 0) {
+    inputPlaceholder = "Accept or decline Reed's edit"
+  } else if (computedChat.erroredMessage || computedChat.shouldStream) {
+    inputPlaceholder = "Hold on a second..."
+  }
+
+  const inputDisabled =
+    computedChat.shouldStream ||
+    computedChat.unresolvedToolCalls.length > 0 ||
+    !!computedChat.erroredMessage
+
   return (
     <div
       class="card shadow-sm mb-3"
@@ -88,7 +100,7 @@ export const ChatBox = ({ character, computedChat, swapOob = false }: ChatBoxPro
         {/* Chat messages container */}
         <div
           id="chat-messages"
-          class="container-fluid mb-3"
+          class="container-fluid mb-3 px-0"
           style="max-height: 300px; overflow-y: auto; min-height: 100px;"
           data-scroll-bottom="true"
         >
@@ -115,6 +127,16 @@ export const ChatBox = ({ character, computedChat, swapOob = false }: ChatBoxPro
             ))
           )}
 
+          {/* Show error retry UI if last message has unretried error */}
+          {computedChat.erroredMessage?.error && (
+            <StreamErrorRetry
+              characterId={character.id}
+              chatId={computedChat.chatId}
+              error={computedChat.erroredMessage.error}
+              consecutiveErrorCount={computedChat.consecutiveErrorCount}
+            />
+          )}
+
           {/* Response box - shown when waiting for AI response */}
           {computedChat.shouldStream && (
             <div class="row g-0 mb-2 chat-message">
@@ -126,6 +148,7 @@ export const ChatBox = ({ character, computedChat, swapOob = false }: ChatBoxPro
                     hx-ext="sse"
                     sse-connect={`/characters/${character.id}/chat/${computedChat.chatId}/stream`}
                     sse-swap="message"
+                    sse-close="close"
                   >
                     Thinking...
                   </span>
@@ -151,21 +174,17 @@ export const ChatBox = ({ character, computedChat, swapOob = false }: ChatBoxPro
               name="message"
               id="chat-input"
               class="form-control"
-              placeholder={
-                computedChat.unresolvedToolCalls.length > 0
-                  ? "Accept or decline Reed's edit"
-                  : "e.g., I spent 50 gold on a sword"
-              }
+              placeholder={inputPlaceholder}
               required
               autocomplete="off"
-              {...(computedChat.shouldStream || computedChat.unresolvedToolCalls.length > 0
-                ? { disabled: true }
-                : {})}
+              disabled={inputDisabled}
             />
             <button
               type="submit"
               class="btn btn-primary"
-              {...(computedChat.shouldStream || computedChat.unresolvedToolCalls.length > 0
+              {...(computedChat.shouldStream ||
+              computedChat.unresolvedToolCalls.length > 0 ||
+              computedChat.erroredMessage
                 ? { disabled: true }
                 : {})}
             >
@@ -218,6 +237,72 @@ export const ChatMessageBubble = ({ id, chatRole, content }: ChatMessageBubblePr
   )
 }
 
+export interface StreamErrorRetryProps {
+  characterId: string
+  chatId: string
+  error: { type: "prep" | "stream"; message: string }
+  consecutiveErrorCount: number
+}
+
+/**
+ * Stream error retry component
+ * Shows an error message with a retry button (for stream errors)
+ * or a message to start a new chat (for prep errors or too many retries)
+ */
+export const StreamErrorRetry = ({
+  characterId,
+  chatId,
+  error,
+  consecutiveErrorCount,
+}: StreamErrorRetryProps) => {
+  const isPrep = error.type === "prep"
+  const tooManyRetries = consecutiveErrorCount > 3
+
+  // Show "having problems" message for prep errors or too many retries
+  const showProblemsMessage = isPrep || tooManyRetries
+
+  return (
+    <div class="row g-0 mb-2 chat-message">
+      <div class="col-10">
+        <div class={`card ${showProblemsMessage ? "border-danger" : "border-warning"}`}>
+          <div class="card-body p-3">
+            <p class="mb-0">
+              <i class="bi bi-exclamation-circle me-2"></i>
+              {showProblemsMessage
+                ? "Reed is having some problems right now. Ask him again later, or start a new chat."
+                : "Reed couldn't hear you. Mind repeating that?"}
+            </p>
+          </div>
+          <div class="card-footer d-flex justify-content-end gap-2 p-2">
+            {!showProblemsMessage && (
+              <button
+                type="button"
+                class="btn btn-primary btn-sm"
+                hx-post={`/characters/${characterId}/chat/${chatId}/retry`}
+                hx-target="#chat-box-card"
+                hx-swap="outerHTML"
+              >
+                <i class="bi bi-volume-up me-1"></i>
+                Repeat Louder
+              </button>
+            )}
+            <button
+              type="button"
+              class="btn btn-secondary btn-sm"
+              hx-get={`/characters/${characterId}/chat/new`}
+              hx-target="#chat-box-card"
+              hx-swap="outerHTML"
+            >
+              <i class="bi bi-plus-lg me-1"></i>
+              New Chat
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 /**
  * Inline tool call approval component
  * Shows a pending tool call with approve/reject buttons
diff --git a/src/db/chat_messages.ts b/src/db/chat_messages.ts
index 8ead9e6..a2ca951 100644
--- a/src/db/chat_messages.ts
+++ b/src/db/chat_messages.ts
@@ -13,6 +13,15 @@ export const ToolResultSchema = z.discriminatedUnion("status", [
   z.object({ status: z.literal("success"), data: z.record(z.string(), z.any()).optional() }),
 ])
 
+export const MessageErrorSchema = z.object({
+  type: z.enum(["prep", "stream"]),
+  message: z.string(),
+  retryAt: z
+    .union([z.date(), z.string()])
+    .transform((val) => (typeof val === "string" ? new Date(val) : val))
+    .optional(),
+})
+
 export const ChatMessageSchema = z.object({
   id: z.string(),
   character_id: z.string(),
@@ -21,6 +30,7 @@ export const ChatMessageSchema = z.object({
   content: z.string(),
   tool_calls: z.record(z.string(), ToolCallSchema).nullable().default(null),
   tool_results: z.record(z.string(), ToolResultSchema.nullable()).nullable().default(null),
+  error: MessageErrorSchema.nullable().default(null),
   created_at: z.date(),
 })
 
@@ -31,34 +41,45 @@ export const CreateChatMessageSchema = ChatMessageSchema.omit({
 
 export type ToolCall = z.infer<typeof ToolCallSchema>
 export type ToolResult = z.infer<typeof ToolResultSchema>
+export type MessageError = z.infer<typeof MessageErrorSchema>
 export type ChatMessage = z.infer<typeof ChatMessageSchema>
 export type CreateChatMessage = z.infer<typeof CreateChatMessageSchema>
 
+/**
+ * Parse a database row into a ChatMessage
+ * Centralizes the JSON parsing and date conversion logic
+ */
+// biome-ignore lint/suspicious/noExplicitAny: database row, validated by Zod
+function parseMessageRow(row: any): ChatMessage {
+  return ChatMessageSchema.parse({
+    ...row,
+    tool_calls: row.tool_calls ?? null,
+    tool_results: row.tool_results ?? null,
+    error: row.error ?? null,
+    created_at: new Date(row.created_at),
+  })
+}
+
 export async function create(db: SQL, message: CreateChatMessage): Promise<ChatMessage> {
   const id = ulid()
 
   const result = await db`
-    INSERT INTO chat_messages (id, character_id, chat_id, role, content, tool_calls, tool_results, created_at)
+    INSERT INTO chat_messages (id, character_id, chat_id, role, content, tool_calls, tool_results, error, created_at)
     VALUES (
       ${id},
       ${message.character_id},
       ${message.chat_id},
       ${message.role},
       ${message.content},
-      ${message.tool_calls ? JSON.stringify(message.tool_calls) : null},
-      ${message.tool_results ? JSON.stringify(message.tool_results) : null},
+      ${message.tool_calls},
+      ${message.tool_results},
+      ${message.error},
       CURRENT_TIMESTAMP
     )
     RETURNING *
   `
 
-  const row = result[0]
-  return ChatMessageSchema.parse({
-    ...row,
-    tool_calls: row.tool_calls ? JSON.parse(row.tool_calls) : null,
-    tool_results: row.tool_results ? JSON.parse(row.tool_results) : null,
-    created_at: new Date(row.created_at),
-  })
+  return parseMessageRow(result[0])
 }
 
 // Chat-specific functions
@@ -73,14 +94,7 @@ export async function findByChatId(db: SQL, chatId: string, limit = 50): Promise
   return (
     result
       // biome-ignore lint/suspicious/noExplicitAny: database row, validated by Zod
-      .map((row: any) =>
-        ChatMessageSchema.parse({
-          ...row,
-          tool_calls: row.tool_calls ? JSON.parse(row.tool_calls) : null,
-          tool_results: row.tool_results ? JSON.parse(row.tool_results) : null,
-          created_at: new Date(row.created_at),
-        })
-      )
+      .map((row: any) => parseMessageRow(row))
       .reverse()
   ) // Return in chronological order (oldest first)
 }
@@ -129,3 +143,18 @@ export async function clearChat(db: SQL, chatId: string): Promise<void> {
     WHERE chat_id = ${chatId}
   `
 }
+
+export async function setMessageRetry(db: SQL, messageId: string): Promise<ChatMessage> {
+  const result = await db`
+    UPDATE chat_messages
+    SET error = jsonb_set(error, '{retryAt}', to_jsonb(CURRENT_TIMESTAMP))
+    WHERE id = ${messageId} AND error IS NOT NULL
+    RETURNING *
+  `
+
+  if (result.length === 0) {
+    throw new Error(`Message ${messageId} not found or has no error`)
+  }
+
+  return parseMessageRow(result[0])
+}
diff --git a/src/routes/chat.tsx b/src/routes/chat.tsx
index 2a36210..77f0cbf 100644
--- a/src/routes/chat.tsx
+++ b/src/routes/chat.tsx
@@ -7,7 +7,7 @@ import { SkillsPanel } from "@src/components/panels/SkillsPanel"
 import { SpellsPanel } from "@src/components/panels/SpellsPanel"
 import { isAiEnabled } from "@src/config"
 import { getDb } from "@src/db"
-import { clearChat, getChatsByCharacterId } from "@src/db/chat_messages"
+import { clearChat, getChatsByCharacterId, setMessageRetry } from "@src/db/chat_messages"
 import { logger } from "@src/lib/logger"
 import { computeCharacter } from "@src/services/computeCharacter"
 import { computeChat } from "@src/services/computeChat"
@@ -85,30 +85,17 @@ chatRoutes.get("/characters/:id/chat/:chatId/stream", async (c) => {
   }
 
   return streamSSE(c, async (stream) => {
-    try {
-      // Execute chat request and stream updates
-      await executeChatRequest(db, char, computedChat, async (chunk) => {
-        if (chunk.type === "text") {
-          // Stream text updates as "message" events
-          await stream.writeSSE({
-            event: "message",
-            data: chunk.text,
-          })
-        }
-      })
-    } catch (error) {
-      logger.error("Error processing chat message", error as Error, {
-        characterId,
-        userId: user.id,
-        chatId,
-      })
-
-      // Send error message as response event
-      await stream.writeSSE({
-        event: "message",
-        data: "Sorry, I encountered an error processing your message. Please try again.",
-      })
-    }
+    // Execute chat request and stream updates
+    // executeChatRequest always returns message ID (with content or error)
+    await executeChatRequest(db, char, computedChat, async (chunk) => {
+      if (chunk.type === "text") {
+        // Stream text updates as "message" events
+        await stream.writeSSE({
+          event: "message",
+          data: chunk.text,
+        })
+      }
+    })
 
     // After streaming completes, reload chat and return complete ChatBox
     const updatedChat = await computeChat(db, chatId)
@@ -212,6 +199,49 @@ chatRoutes.post("/characters/:id/chat/:chatId/tool/:toolCallId/reject", async (c
   return c.html(<ChatBox character={char} computedChat={updatedChat} />)
 })
 
+/**
+ * POST /characters/:id/chat/:chatId/retry
+ * Retry a failed streaming attempt by marking error.retryAt
+ */
+chatRoutes.post("/characters/:id/chat/:chatId/retry", async (c) => {
+  if (!isAiEnabled()) {
+    return c.json({ error: "AI features are not enabled" }, 503)
+  }
+
+  const user = c.var.user!
+  const characterId = c.req.param("id")
+  const chatId = c.req.param("chatId")
+  const db = getDb(c)
+
+  // Verify character belongs to user
+  const char = await computeCharacter(db, characterId)
+  if (!char || char.user_id !== user.id) {
+    return c.json({ error: "Character not found" }, 404)
+  }
+
+  // Get computed chat to find the errored message
+  const computedChat = await computeChat(db, chatId)
+
+  if (!computedChat.erroredMessage) {
+    return c.json({ error: "No errored message to retry" }, 404)
+  }
+
+  logger.info("Retrying message", {
+    messageId: computedChat.erroredMessage.id,
+    error: computedChat.erroredMessage.error,
+    chatId,
+  })
+
+  // Mark the message for retry by setting error.retryAt
+  await setMessageRetry(db, computedChat.erroredMessage.id)
+
+  // Get updated chat with shouldStream=true
+  const updatedChat = await computeChat(db, chatId)
+
+  // Return updated ChatBox which will trigger streaming
+  return c.html(<ChatBox character={char} computedChat={updatedChat} />)
+})
+
 /**
  * GET /characters/:id/chat/new
  * Create a new empty chat (return ChatBox with no messages and null chatId)
@@ -238,6 +268,7 @@ chatRoutes.get("/characters/:id/chat/new", async (c) => {
     llmMessages: [],
     shouldStream: false,
     unresolvedToolCalls: [],
+    consecutiveErrorCount: 0,
   }
 
   // Return empty ChatBox
diff --git a/src/services/computeChat.ts b/src/services/computeChat.ts
index edfaca5..ee1ed3e 100644
--- a/src/services/computeChat.ts
+++ b/src/services/computeChat.ts
@@ -33,6 +33,8 @@ export interface ComputedChat {
   llmMessages: ModelMessage[]
   shouldStream: boolean
   unresolvedToolCalls: UnresolvedToolCall[]
+  erroredMessage?: DbChatMessage
+  consecutiveErrorCount: number
 }
 
 /**
@@ -51,11 +53,16 @@ function toUiMessages(dbMessages: DbChatMessage[]): UiChatMessage[] {
 /**
  * Convert database messages to LLM-compatible message format
  * Includes tool messages for resolved tool calls
+ * Excludes messages with errors (failed streaming/prep attempts)
  */
 function toLlmMessages(dbMessages: DbChatMessage[]): ModelMessage[] {
   const messages: ModelMessage[] = []
 
   for (const msg of dbMessages) {
+    // Skip messages that have errors
+    if (msg.error !== null) {
+      continue
+    }
     if (msg.role === "assistant") {
       const content: (TextPart | ToolCallPart)[] = []
       if (msg.content) {
@@ -88,7 +95,7 @@ function toLlmMessages(dbMessages: DbChatMessage[]): ModelMessage[] {
           if (result.status === "rejected") {
             output = {
               type: "error-text",
-              value: "User declined this action",
+              value: "This tool call was rejected (not approved) by the user.",
             }
           } else if (result.status === "failed") {
             output = {
@@ -164,14 +171,27 @@ function hasAllToolResults(msg: DbChatMessage) {
  * Requirements:
  * 1. Last message is from user
  * 2. No unresolved tool calls in any message
+ * 3. If last message is assistant with error and no retryAt, don't stream
+ * 4. If last message is assistant with error.retryAt set, stream (retry initiated)
  */
 function shouldInitiateStream(dbMessages: DbChatMessage[]): boolean {
   if (dbMessages.length === 0) return false
 
-  // last message is from the user, so we can ask LLM to respond
   const lastMessage = dbMessages[dbMessages.length - 1]
+
+  // If last message is assistant with unretried error, don't stream
+  if (lastMessage?.role === "assistant" && lastMessage.error && !lastMessage.error.retryAt) {
+    return false
+  }
+
+  // last message is from the user, so we can ask LLM to respond
   if (lastMessage?.role === "user") return true
 
+  // If assistant message has error.retryAt set, stream (retry initiated)
+  if (lastMessage?.role === "assistant" && lastMessage.error?.retryAt) {
+    return true
+  }
+
   // Check if there are any unresolved tool calls
   if (lastMessage?.role === "assistant" && hasAllToolResults(lastMessage)) return true
 
@@ -214,6 +234,47 @@ function findUnresolvedToolCalls(dbMessages: DbChatMessage[]): UnresolvedToolCal
   return unresolved
 }
 
+/**
+ * Find the errored message if last message has unretried error
+ */
+function findErroredMessage(dbMessages: DbChatMessage[]): DbChatMessage | undefined {
+  if (dbMessages.length === 0) return undefined
+
+  const lastMessage = dbMessages[dbMessages.length - 1]
+
+  // Check if last message is assistant with unretried error
+  if (lastMessage?.role === "assistant" && lastMessage.error && !lastMessage.error.retryAt) {
+    return lastMessage
+  }
+
+  return undefined
+}
+
+/**
+ * Count consecutive errored assistant messages from the end of the chat
+ */
+function countConsecutiveErrors(dbMessages: DbChatMessage[]): number {
+  let count = 0
+
+  // Count backwards from the end
+  for (let i = dbMessages.length - 1; i >= 0; i--) {
+    const msg = dbMessages[i]!
+
+    // Stop if we hit a non-assistant message
+    if (msg.role !== "assistant") break
+
+    // Count if this assistant message has an error
+    if (msg.error) {
+      count++
+    } else {
+      // Stop if we hit a successful assistant message
+      break
+    }
+  }
+
+  return count
+}
+
 /**
  * Compute chat data structure from database messages
  * Transforms raw database messages into a format suitable for UI and LLM consumption
@@ -228,5 +289,7 @@ export async function computeChat(db: SQL, chatId: string): Promise<ComputedChat
     llmMessages: toLlmMessages(dbMessages),
     shouldStream: shouldInitiateStream(dbMessages),
     unresolvedToolCalls: findUnresolvedToolCalls(dbMessages),
+    erroredMessage: findErroredMessage(dbMessages),
+    consecutiveErrorCount: countConsecutiveErrors(dbMessages),
   }
 }
diff --git a/src/services/toolExecution.ts b/src/services/toolExecution.ts
index a02e6d4..a92abd4 100644
--- a/src/services/toolExecution.ts
+++ b/src/services/toolExecution.ts
@@ -24,15 +24,15 @@ async function updateToolResult(
   }
 
   const message = messages[0]
-  const toolResults = message.tool_results ? JSON.parse(message.tool_results) : {}
+  const toolResults = message.tool_results ?? {}
 
   // Update tool_results mapping
   toolResults[toolCallId] = result
 
-  // Save updated tool_results
+  // Save updated tool_results (bun:sql handles JSONB encoding)
   await db`
     UPDATE chat_messages
-    SET tool_results = ${JSON.stringify(toolResults)}
+    SET tool_results = ${toolResults}
     WHERE id = ${messageId}
   `
 }

From 809769861ad4ad31e1fe55838740274ab735602d Mon Sep 17 00:00:00 2001
From: Igor Serebryany <igor47@moomers.org>
Date: Tue, 11 Nov 2025 11:28:43 -0800
Subject: [PATCH 10/12] feat: track LLM token usage

---
 db/schema.sql                                 |  8 +++---
 ...51111221748_add_usage_to_chat_messages.sql |  6 +++++
 src/ai/chat.ts                                | 25 ++++++++++++++---
 src/components/ChatHistory.tsx                | 16 +++++++++++
 src/db/chat_messages.ts                       | 27 +++++++++++++++++--
 5 files changed, 74 insertions(+), 8 deletions(-)
 create mode 100644 migrations/20251111221748_add_usage_to_chat_messages.sql

diff --git a/db/schema.sql b/db/schema.sql
index 77b8c6a..695bdb0 100644
--- a/db/schema.sql
+++ b/db/schema.sql
@@ -1,4 +1,4 @@
-\restrict dHjV1HblrFJx4fO7pHqv5n4S8XTimapDTTVbRC9wurJFqB3ZtlnByHRDIhsNzgZ
+\restrict Ah1gzcmwaXniQw2dzIyVlrPF4EVIv28DgaOjh5TDOwpcDPd3dZKeX8QreYsxoVW
 
 -- Dumped from database version 16.10
 -- Dumped by pg_dump version 18.0
@@ -297,6 +297,7 @@ CREATE TABLE public.chat_messages (
     created_at timestamp with time zone DEFAULT CURRENT_TIMESTAMP NOT NULL,
     chat_id character varying(26) NOT NULL,
     error jsonb,
+    usage jsonb,
     CONSTRAINT chat_messages_role_check CHECK ((role = ANY (ARRAY['user'::text, 'assistant'::text, 'system'::text])))
 );
 
@@ -1103,7 +1104,7 @@ ALTER TABLE ONLY public.items
 -- PostgreSQL database dump complete
 --
 
-\unrestrict dHjV1HblrFJx4fO7pHqv5n4S8XTimapDTTVbRC9wurJFqB3ZtlnByHRDIhsNzgZ
+\unrestrict Ah1gzcmwaXniQw2dzIyVlrPF4EVIv28DgaOjh5TDOwpcDPd3dZKeX8QreYsxoVW
 
 
 --
@@ -1142,4 +1143,5 @@ INSERT INTO public.schema_migrations (version) VALUES
     ('20251029183629'),
     ('20251030232843'),
     ('20251111071524'),
-    ('20251111085621');
+    ('20251111085621'),
+    ('20251111221748');
diff --git a/migrations/20251111221748_add_usage_to_chat_messages.sql b/migrations/20251111221748_add_usage_to_chat_messages.sql
new file mode 100644
index 0000000..4df23d1
--- /dev/null
+++ b/migrations/20251111221748_add_usage_to_chat_messages.sql
@@ -0,0 +1,6 @@
+-- migrate:up
+ALTER TABLE chat_messages ADD COLUMN usage jsonb;
+
+-- migrate:down
+ALTER TABLE chat_messages DROP COLUMN usage;
+
diff --git a/src/ai/chat.ts b/src/ai/chat.ts
index 5e5109e..18f3741 100644
--- a/src/ai/chat.ts
+++ b/src/ai/chat.ts
@@ -1,11 +1,11 @@
-import { type ChatMessage, create as saveChatMessage } from "@src/db/chat_messages"
+import { type ChatMessage, create as saveChatMessage, type Usage } from "@src/db/chat_messages"
 import { getChatModel } from "@src/lib/ai"
 import { logger } from "@src/lib/logger"
 import type { ComputedCharacter } from "@src/services/computeCharacter"
 import type { ComputedChat } from "@src/services/computeChat"
 import { executeTool } from "@src/services/toolExecution"
 import { TOOL_DEFINITIONS, TOOLS } from "@src/tools"
-import { streamText } from "ai"
+import { type LanguageModel, streamText } from "ai"
 import type { SQL } from "bun"
 import { ulid } from "ulid"
 import { buildSystemPrompt } from "./prompts"
@@ -41,6 +41,7 @@ export async function prepareChatRequest(
       tool_calls: null,
       tool_results: null,
       error: null,
+      usage: null,
     })
   }
 
@@ -53,6 +54,7 @@ export async function prepareChatRequest(
     tool_calls: null,
     tool_results: null,
     error: null,
+    usage: null,
   })
 
   return { chatId: finalChatId }
@@ -154,8 +156,9 @@ export async function executeChatRequest(
 
   // First try-catch: Prep phase (building request)
   let requestBody: Parameters<typeof streamText>[0]
+  let model: LanguageModel
   try {
-    const model = getChatModel()
+    model = getChatModel()
     requestBody = {
       model,
       maxOutputTokens: 1024,
@@ -185,6 +188,7 @@ export async function executeChatRequest(
         type: "prep",
         message: err instanceof Error ? err.message : "Unknown prep error",
       },
+      usage: null,
     })
 
     return assistantMsg.id
@@ -214,6 +218,19 @@ export async function executeChatRequest(
       toolResults[id] = null
     }
 
+    // Capture usage data from AI SDK
+    const usageData = await result.usage
+    const usage: Usage | null = usageData
+      ? {
+          provider: model.provider,
+          modelId: model.modelId,
+          inputTokens: usageData.inputTokens || 0,
+          outputTokens: usageData.outputTokens || 0,
+          cachedInputTokens: usageData.cachedInputTokens,
+          totalTokens: usageData.totalTokens || 0,
+        }
+      : null
+
     // Create assistant message with final content after streaming completes
     const assistantMsg = await saveChatMessage(db, {
       character_id: character.id,
@@ -223,6 +240,7 @@ export async function executeChatRequest(
       tool_calls: Object.keys(toolCalls).length > 0 ? toolCalls : null,
       tool_results: Object.keys(toolResults).length > 0 ? toolResults : null,
       error: null,
+      usage,
     })
 
     // Auto-execute any read-only tools immediately
@@ -246,6 +264,7 @@ export async function executeChatRequest(
       content: "",
       tool_calls: null,
       tool_results: null,
+      usage: null,
       error: {
         type: "stream",
         message: err instanceof Error ? err.message : "Unknown stream error",
diff --git a/src/components/ChatHistory.tsx b/src/components/ChatHistory.tsx
index 67ddf4f..b90cf27 100644
--- a/src/components/ChatHistory.tsx
+++ b/src/components/ChatHistory.tsx
@@ -30,6 +30,16 @@ export const ChatHistory = ({ character, chats }: ChatHistoryProps) => {
     return `${message.substring(0, maxLength)}...`
   }
 
+  const formatTokens = (tokens: number | null) => {
+    if (tokens === null) {
+      return null
+    }
+    return tokens.toLocaleString()
+  }
+
+  // Calculate total tokens across all chats
+  const totalTokens = chats.reduce((sum, chat) => sum + (chat.total_tokens || 0), 0)
+
   return (
     <>
       <div class="modal-header">
@@ -40,6 +50,11 @@ export const ChatHistory = ({ character, chats }: ChatHistoryProps) => {
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
+        {totalTokens > 0 && (
+          <div class="alert alert-info mb-3">
+            <strong>Total tokens used:</strong> {formatTokens(totalTokens)}
+          </div>
+        )}
         {chats.length === 0 ? (
           <div class="text-center py-4">
             <p class="text-muted">No previous conversations found.</p>
@@ -63,6 +78,7 @@ export const ChatHistory = ({ character, chats }: ChatHistoryProps) => {
                   <small class="text-muted">
                     {formatDate(chat.last_message_at)} • {chat.message_count}{" "}
                     {chat.message_count === 1 ? "message" : "messages"}
+                    {chat.total_tokens !== null && ` • ${formatTokens(chat.total_tokens)} tokens`}
                   </small>
                 </div>
                 <button
diff --git a/src/db/chat_messages.ts b/src/db/chat_messages.ts
index a2ca951..e2e87ae 100644
--- a/src/db/chat_messages.ts
+++ b/src/db/chat_messages.ts
@@ -22,6 +22,15 @@ export const MessageErrorSchema = z.object({
     .optional(),
 })
 
+export const UsageSchema = z.object({
+  provider: z.string(),
+  modelId: z.string(),
+  inputTokens: z.number(),
+  outputTokens: z.number(),
+  cachedInputTokens: z.number().optional(),
+  totalTokens: z.number(),
+})
+
 export const ChatMessageSchema = z.object({
   id: z.string(),
   character_id: z.string(),
@@ -31,6 +40,7 @@ export const ChatMessageSchema = z.object({
   tool_calls: z.record(z.string(), ToolCallSchema).nullable().default(null),
   tool_results: z.record(z.string(), ToolResultSchema.nullable()).nullable().default(null),
   error: MessageErrorSchema.nullable().default(null),
+  usage: UsageSchema.nullable().default(null),
   created_at: z.date(),
 })
 
@@ -42,6 +52,7 @@ export const CreateChatMessageSchema = ChatMessageSchema.omit({
 export type ToolCall = z.infer<typeof ToolCallSchema>
 export type ToolResult = z.infer<typeof ToolResultSchema>
 export type MessageError = z.infer<typeof MessageErrorSchema>
+export type Usage = z.infer<typeof UsageSchema>
 export type ChatMessage = z.infer<typeof ChatMessageSchema>
 export type CreateChatMessage = z.infer<typeof CreateChatMessageSchema>
 
@@ -56,6 +67,7 @@ function parseMessageRow(row: any): ChatMessage {
     tool_calls: row.tool_calls ?? null,
     tool_results: row.tool_results ?? null,
     error: row.error ?? null,
+    usage: row.usage ?? null,
     created_at: new Date(row.created_at),
   })
 }
@@ -64,7 +76,7 @@ export async function create(db: SQL, message: CreateChatMessage): Promise<ChatM
   const id = ulid()
 
   const result = await db`
-    INSERT INTO chat_messages (id, character_id, chat_id, role, content, tool_calls, tool_results, error, created_at)
+    INSERT INTO chat_messages (id, character_id, chat_id, role, content, tool_calls, tool_results, error, usage, created_at)
     VALUES (
       ${id},
       ${message.character_id},
@@ -74,6 +86,7 @@ export async function create(db: SQL, message: CreateChatMessage): Promise<ChatM
       ${message.tool_calls},
       ${message.tool_results},
       ${message.error},
+      ${message.usage},
       CURRENT_TIMESTAMP
     )
     RETURNING *
@@ -105,6 +118,7 @@ export interface ChatPreview {
   message_count: number
   last_message: string
   last_message_at: Date
+  total_tokens: number | null
 }
 
 export async function getChatsByCharacterId(db: SQL, characterId: string): Promise<ChatPreview[]> {
@@ -120,7 +134,15 @@ export async function getChatsByCharacterId(db: SQL, characterId: string): Promi
         ORDER BY created_at DESC
         LIMIT 1
       ) as last_message,
-      MAX(created_at) as last_message_at
+      MAX(created_at) as last_message_at,
+      (
+        SELECT usage->'totalTokens'
+        FROM chat_messages cm2
+        WHERE cm2.chat_id = cm.chat_id
+          AND usage IS NOT NULL
+        ORDER BY created_at DESC
+        LIMIT 1
+      ) as total_tokens
     FROM chat_messages cm
     WHERE character_id = ${characterId}
     GROUP BY chat_id, character_id
@@ -134,6 +156,7 @@ export async function getChatsByCharacterId(db: SQL, characterId: string): Promi
     message_count: Number(row.message_count),
     last_message: row.last_message,
     last_message_at: new Date(row.last_message_at),
+    total_tokens: row.total_tokens ? Number(row.total_tokens) : null,
   }))
 }
 

From 909656d665af01ec150489e4eb035a3547c83363 Mon Sep 17 00:00:00 2001
From: Igor Serebryany <igor47@moomers.org>
Date: Tue, 11 Nov 2025 14:49:30 -0800
Subject: [PATCH 11/12] feat: spell search in prep/learn spells

---
 src/components/LearnSpellForm.tsx   |  3 +-
 src/components/PrepareSpellForm.tsx |  3 +-
 src/components/ui/SpellPicker.tsx   | 76 +++++++++++++++++++++--------
 3 files changed, 61 insertions(+), 21 deletions(-)

diff --git a/src/components/LearnSpellForm.tsx b/src/components/LearnSpellForm.tsx
index 2b3250c..2dcb715 100644
--- a/src/components/LearnSpellForm.tsx
+++ b/src/components/LearnSpellForm.tsx
@@ -37,7 +37,7 @@ function LearnSpellFormBody({ character, values = {}, errors = {} }: LearnSpellF
         id="learn-spell-form"
         hx-post={`/characters/${character.id}/edit/spellbook`}
         hx-vals='{"is_check": "true"}'
-        hx-trigger="change"
+        hx-trigger="input from:[name='spell_search'] changed delay:300ms, change"
         hx-target="#editModalContent"
         hx-swap="innerHTML"
         class="needs-validation"
@@ -70,6 +70,7 @@ function LearnSpellFormBody({ character, values = {}, errors = {} }: LearnSpellF
           label="Select spell to add"
           error={errors?.spell_id}
           emptyMessage="No spells available to add to your spellbook."
+          searchQuery={values.spell_search}
         />
 
         {/* Spell Detail */}
diff --git a/src/components/PrepareSpellForm.tsx b/src/components/PrepareSpellForm.tsx
index f7b5a17..558a666 100644
--- a/src/components/PrepareSpellForm.tsx
+++ b/src/components/PrepareSpellForm.tsx
@@ -127,7 +127,7 @@ function PrepareSpellFormBody({ character, values = {}, errors = {} }: PrepareSp
         id="prepare-spell-form"
         hx-post={`/characters/${character.id}/edit/prepspell`}
         hx-vals='{"is_check": "true"}'
-        hx-trigger="change"
+        hx-trigger="input from:[name='spell_search'] changed delay:300ms, change"
         hx-target="#editModalContent"
         hx-swap="innerHTML"
         class="needs-validation"
@@ -221,6 +221,7 @@ function PrepareSpellFormBody({ character, values = {}, errors = {} }: PrepareSp
           label={`Select ${toTitleCase(slotTypeLabel)} to Prepare`}
           error={errors?.spell_id}
           emptyMessage={`No ${slotTypeLabel}s available${selectedSI.knownSpells !== null && !isCantrip ? " in your spellbook" : ""}.`}
+          searchQuery={values.spell_search}
         />
 
         {/* Spell Detail */}
diff --git a/src/components/ui/SpellPicker.tsx b/src/components/ui/SpellPicker.tsx
index 8095b33..df7461e 100644
--- a/src/components/ui/SpellPicker.tsx
+++ b/src/components/ui/SpellPicker.tsx
@@ -7,6 +7,7 @@ export interface SpellPickerProps {
   label?: string
   error?: string
   emptyMessage?: string
+  searchQuery?: string
 }
 
 export const SpellPicker = ({
@@ -16,11 +17,25 @@ export const SpellPicker = ({
   label,
   error,
   emptyMessage = "No spells available.",
+  searchQuery,
 }: SpellPickerProps) => {
   if (availableSpells.length === 0) {
     return <div class="alert alert-warning">{emptyMessage}</div>
   }
 
+  // Filter spells based on search query
+  const filteredSpells = searchQuery
+    ? availableSpells.filter((spell) => {
+        const query = searchQuery.toLowerCase()
+        return (
+          spell.name.toLowerCase().includes(query) ||
+          spell.briefDescription.toLowerCase().includes(query)
+        )
+      })
+    : availableSpells
+
+  const showSearchResults = searchQuery && searchQuery.trim().length > 0
+
   return (
     <div class="mb-3">
       {label && (
@@ -28,25 +43,48 @@ export const SpellPicker = ({
           {label}
         </label>
       )}
-      <div class="border rounded p-2" style="max-height: 300px; overflow-y: auto;">
-        {availableSpells.map((spell) => (
-          <div class="form-check">
-            <input
-              class="form-check-input"
-              type="radio"
-              name={name}
-              id={`spell-${spell.id}`}
-              value={spell.id}
-              checked={selectedSpellId === spell.id}
-            />
-            <label class="form-check-label" for={`spell-${spell.id}`}>
-              {spell.name} (Level {spell.level === 0 ? "Cantrip" : spell.level})
-              <br />
-              <small class="text-muted">{spell.briefDescription}</small>
-            </label>
-          </div>
-        ))}
-      </div>
+
+      {/* Search input */}
+      <input
+        type="text"
+        class="form-control mb-2"
+        name="spell_search"
+        placeholder="Search spells..."
+        value={searchQuery || ""}
+      />
+
+      {/* Results count */}
+      {showSearchResults && (
+        <small class="text-muted d-block mb-2">
+          Showing {filteredSpells.length} of {availableSpells.length} spells
+        </small>
+      )}
+
+      {/* Spell list */}
+      {filteredSpells.length === 0 ? (
+        <div class="alert alert-info">No spells match your search.</div>
+      ) : (
+        <div class="border rounded p-2" style="max-height: 300px; overflow-y: auto;">
+          {filteredSpells.map((spell) => (
+            <div class="form-check">
+              <input
+                class="form-check-input"
+                type="radio"
+                name={name}
+                id={`spell-${spell.id}`}
+                value={spell.id}
+                checked={selectedSpellId === spell.id}
+              />
+              <label class="form-check-label" for={`spell-${spell.id}`}>
+                {spell.name} (Level {spell.level === 0 ? "Cantrip" : spell.level})
+                <br />
+                <small class="text-muted">{spell.briefDescription}</small>
+              </label>
+            </div>
+          ))}
+        </div>
+      )}
+
       {error && <div class="invalid-feedback d-block">{error}</div>}
     </div>
   )

From 874d14dd655ccd05f722aae62519ed937695854d Mon Sep 17 00:00:00 2001
From: Igor Serebryany <igor47@moomers.org>
Date: Tue, 11 Nov 2025 15:02:18 -0800
Subject: [PATCH 12/12] feat: use ideomorph in most of my forms

it definitely helps in learnspell and preparespell form with input fields. not sure if it helps in any other case. we added a bunch of ids for ideomorph to hook into anyway.
---
 .gitignore                              |  1 +
 Dockerfile                              |  2 +-
 bun.lock                                |  3 +++
 package.json                            |  3 ++-
 src/components/AbilitiesEditForm.tsx    |  4 ++--
 src/components/CastSpellForm.tsx        |  4 ++--
 src/components/CharacterImport.tsx      | 17 +++++++++--------
 src/components/CharacterNew.tsx         |  3 ++-
 src/components/ChargeManagementForm.tsx |  4 ++--
 src/components/ClassEditForm.tsx        |  7 ++++---
 src/components/CoinsEditForm.tsx        |  7 ++++---
 src/components/CreateItemForm.tsx       | 16 +++++++++-------
 src/components/EditItemForm.tsx         | 14 +++++++++-----
 src/components/HitDiceEditForm.tsx      | 13 +++++++------
 src/components/HitPointsEditForm.tsx    |  4 ++--
 src/components/Layout.tsx               |  1 +
 src/components/LearnSpellForm.tsx       |  7 ++++---
 src/components/LongRestForm.tsx         |  4 ++--
 src/components/PrepareSpellForm.tsx     |  4 ++--
 src/components/SessionNotes.tsx         |  2 +-
 src/components/ShortRestForm.tsx        |  4 ++--
 src/components/SkillsEditForm.tsx       |  4 ++--
 src/components/SpellSlotsEditForm.tsx   |  4 ++--
 src/components/TraitEditForm.tsx        |  3 ++-
 src/components/ui/SpellPicker.tsx       |  1 +
 25 files changed, 78 insertions(+), 58 deletions(-)

diff --git a/.gitignore b/.gitignore
index aee8305..65ee0c1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@ node_modules/
 # statically served FE dependencies
 static/htmx.min.js
 static/htmx-ext-sse.js
+static/idiomorph-ext.min.js
 
 # output
 out
diff --git a/Dockerfile b/Dockerfile
index c5ac7e1..873e2ff 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -32,7 +32,7 @@ COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
 # Then overlay the generated htmx files from deps stage (after postinstall)
-COPY --from=deps /app/static/htmx.min.js /app/static/htmx-ext-sse.js ./static/
+COPY --from=deps /app/static/htmx.min.js /app/static/htmx-ext-sse.js /app/static/idiomorph-ext.min.js ./static/
 
 ENV NODE_ENV=production \
     PORT=3000
diff --git a/bun.lock b/bun.lock
index b1320de..f3df0ab 100644
--- a/bun.lock
+++ b/bun.lock
@@ -13,6 +13,7 @@
         "hono": "^4.9.6",
         "htmx-ext-sse": "^2.2.4",
         "htmx.org": "^2.0.8",
+        "idiomorph": "^0.7.4",
         "marked": "^16.4.1",
         "nodemailer": "^7.0.10",
         "ulid": "^3.0.1",
@@ -599,6 +600,8 @@
 
     "iconv-lite": ["iconv-lite@0.6.3", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" } }, "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw=="],
 
+    "idiomorph": ["idiomorph@0.7.4", "", {}, "sha512-uCdSpLo3uMfqOmrwXTpR1k/sq4sSmKC7l4o/LdJOEU+MMMq+wkevRqOQYn3lP7vfz9Mv+USBEqPvi0XhdL9ENw=="],
+
     "ignore-walk": ["ignore-walk@6.0.5", "", { "dependencies": { "minimatch": "^9.0.0" } }, "sha512-VuuG0wCnjhnylG1ABXT3dAuIpTNDs/G8jlpmwXY03fXoXy/8ZK8/T+hMzt8L4WnrLCJgdybqgPagnF/f97cg3A=="],
 
     "import-in-the-middle": ["import-in-the-middle@1.15.0", "", { "dependencies": { "acorn": "^8.14.0", "acorn-import-attributes": "^1.9.5", "cjs-module-lexer": "^1.2.2", "module-details-from-path": "^1.0.3" } }, "sha512-bpQy+CrsRmYmoPMAE/0G33iwRqwW4ouqdRg8jgbH3aKuCtOc8lxgmYXg2dMM92CRiGP660EtBcymH/eVUpCSaA=="],
diff --git a/package.json b/package.json
index 2bd1f4e..563b1df 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "postinstall": "mkdir -p static && cp node_modules/htmx.org/dist/htmx.min.js static/ && cp node_modules/htmx-ext-sse/sse.js static/htmx-ext-sse.js"
+    "postinstall": "mkdir -p static && cp node_modules/htmx.org/dist/htmx.min.js static/ && cp node_modules/htmx-ext-sse/sse.js static/htmx-ext-sse.js && cp node_modules/idiomorph/dist/idiomorph-ext.min.js static/idiomorph-ext.min.js"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.2.6",
@@ -40,6 +40,7 @@
     "hono": "^4.9.6",
     "htmx-ext-sse": "^2.2.4",
     "htmx.org": "^2.0.8",
+    "idiomorph": "^0.7.4",
     "marked": "^16.4.1",
     "nodemailer": "^7.0.10",
     "ulid": "^3.0.1",
diff --git a/src/components/AbilitiesEditForm.tsx b/src/components/AbilitiesEditForm.tsx
index 2891eae..d8a597a 100644
--- a/src/components/AbilitiesEditForm.tsx
+++ b/src/components/AbilitiesEditForm.tsx
@@ -135,7 +135,7 @@ export const AbilitiesEditForm = ({ character, values, errors = {} }: AbilitiesE
         hx-vals='{"is_check": "true"}'
         hx-trigger="change"
         hx-target="#editModalContent"
-        hx-swap="innerHTML"
+        hx-swap="morph:innerHTML"
         class="needs-validation"
         novalidate
       >
@@ -183,7 +183,7 @@ export const AbilitiesEditForm = ({ character, values, errors = {} }: AbilitiesE
             hx-post={`/characters/${character.id}/edit/abilities`}
             hx-vals='{"is_check": "false"}'
             hx-target="#editModalContent"
-            hx-swap="innerHTML"
+            hx-swap="morph:innerHTML"
           >
             Update Abilities
           </button>
diff --git a/src/components/CastSpellForm.tsx b/src/components/CastSpellForm.tsx
index 119a00d..f2e8da8 100644
--- a/src/components/CastSpellForm.tsx
+++ b/src/components/CastSpellForm.tsx
@@ -90,7 +90,7 @@ export const CastSpellForm = ({ character, values = {}, errors = {} }: CastSpell
           hx-vals='{"is_check": "true"}'
           hx-trigger="change"
           hx-target="#editModalContent"
-          hx-swap="innerHTML"
+          hx-swap="morph:innerHTML"
           class="needs-validation"
           novalidate
         >
@@ -175,7 +175,7 @@ export const CastSpellForm = ({ character, values = {}, errors = {} }: CastSpell
               hx-post={`/characters/${character.id}/castspell`}
               hx-vals='{"is_check": "false"}'
               hx-target="#editModalContent"
-              hx-swap="innerHTML"
+              hx-swap="morph:innerHTML"
             >
               <i class="bi bi-lightning-fill me-1"></i>
               Cast {spell.name}
diff --git a/src/components/CharacterImport.tsx b/src/components/CharacterImport.tsx
index 7affb31..ef4787f 100644
--- a/src/components/CharacterImport.tsx
+++ b/src/components/CharacterImport.tsx
@@ -74,7 +74,7 @@ const MultiClassSelector = ({ values = {}, errors = {} }: MultiClassSelectorProp
                   <input
                     type="checkbox"
                     class="form-check-input"
-                    id={`classes_${cls}`}
+                    id={`charimport-classes-${cls}`}
                     name={`classes_${cls}`}
                     checked={isSelected}
                   />
@@ -85,7 +85,7 @@ const MultiClassSelector = ({ values = {}, errors = {} }: MultiClassSelectorProp
                 {isSelected && (
                   <Select
                     name={`levels_${cls}`}
-                    id={`levels_${cls}`}
+                    id={`charimport-levels-${cls}`}
                     style="max-width: 10em;"
                     options={levelOptions}
                     value={level.toString()}
@@ -98,7 +98,7 @@ const MultiClassSelector = ({ values = {}, errors = {} }: MultiClassSelectorProp
                 <div class="ms-4">
                   <Select
                     name={`subclass_${cls}`}
-                    id={`subclass_${cls}`}
+                    id={`charimport-subclass-${cls}`}
                     options={subclassOptions}
                     placeholder={`Select ${toTitleCase(cls)} subclass`}
                     value={values[`subclass_${cls}`] as string}
@@ -150,7 +150,7 @@ const AbilityScoreInputs = ({ values = {}, errors = {} }: AbilityScoreInputsProp
                 <input
                   type="number"
                   class={clsx("form-control", { "is-invalid": hasError })}
-                  id={`ability_${ability}`}
+                  id={`charimport-ability-${ability}`}
                   name={`ability_${ability}`}
                   value={score}
                   min="3"
@@ -163,7 +163,7 @@ const AbilityScoreInputs = ({ values = {}, errors = {} }: AbilityScoreInputsProp
                 <input
                   type="checkbox"
                   class="form-check-input"
-                  id={`save_${ability}`}
+                  id={`charimport-save-${ability}`}
                   name={`save_${ability}`}
                   checked={isProficient}
                 />
@@ -197,7 +197,7 @@ const MaxHPInput = ({ values = {}, errors = {} }: MaxHPInputProps) => {
       <input
         type="number"
         class={clsx("form-control", { "is-invalid": errors?.max_hp })}
-        id="max_hp"
+        id="charimport-max-hp"
         name="max_hp"
         value={maxHp || ""}
         min="1"
@@ -278,7 +278,7 @@ const SkillProficiencySelector = ({ values = {}, errors = {} }: SkillProficiency
                       type="radio"
                       class="btn-check"
                       name={proficiencyFieldName}
-                      id={`${proficiencyFieldName}_${level}`}
+                      id={`charimport-${proficiencyFieldName}-${level}`}
                       value={level}
                       checked={currentProficiency === level}
                       autocomplete="off"
@@ -358,7 +358,7 @@ export const CharacterImport = ({ values = {}, errors = {} }: CharacterImportPro
                 hx-vals='{"is_check": "true"}'
                 hx-trigger="change"
                 hx-target="#character-import"
-                hx-swap="outerHTML focus-scroll:false"
+                hx-swap="morph:outerHTML focus-scroll:false"
                 class="needs-validation"
                 novalidate
               >
@@ -514,6 +514,7 @@ export const CharacterImport = ({ values = {}, errors = {} }: CharacterImportPro
                 <div class="d-flex gap-2">
                   <button
                     type="submit"
+                    id="character-import-submit"
                     hx-post="/characters/import"
                     hx-vals='{"is_check": "false"}'
                     class="btn btn-primary"
diff --git a/src/components/CharacterNew.tsx b/src/components/CharacterNew.tsx
index 501349a..b01f55b 100644
--- a/src/components/CharacterNew.tsx
+++ b/src/components/CharacterNew.tsx
@@ -317,7 +317,7 @@ export const CharacterNew = ({ values = {}, errors = {} }: CharacterNewProps) =>
                 hx-vals='{"is_check": "true"}'
                 hx-trigger="change"
                 hx-target="#character-new"
-                hx-swap="outerHTML focus-scroll:false"
+                hx-swap="morph:outerHTML focus-scroll:false"
                 class="needs-validation"
                 novalidate
               >
@@ -326,6 +326,7 @@ export const CharacterNew = ({ values = {}, errors = {} }: CharacterNewProps) =>
                 <div class="d-flex gap-2">
                   <button
                     type="submit"
+                    id="character-new-submit"
                     hx-post="/characters/new"
                     hx-vals='{"is_check": "false"}'
                     class="btn btn-primary"
diff --git a/src/components/ChargeManagementForm.tsx b/src/components/ChargeManagementForm.tsx
index bdacaa4..e2ed63d 100644
--- a/src/components/ChargeManagementForm.tsx
+++ b/src/components/ChargeManagementForm.tsx
@@ -49,7 +49,7 @@ export const ChargeManagementForm = ({
           hx-vals='{"is_check": "true"}'
           hx-trigger="change"
           hx-target="#editModalContent"
-          hx-swap="innerHTML"
+          hx-swap="morph:innerHTML"
           class="needs-validation"
           novalidate
         >
@@ -177,7 +177,7 @@ export const ChargeManagementForm = ({
               hx-post={`/characters/${characterId}/items/${item.id}/charges`}
               hx-vals='{"is_check": "false"}'
               hx-target="#editModalContent"
-              hx-swap="innerHTML"
+              hx-swap="morph:innerHTML"
             >
               Update {chargeLabel}
             </button>
diff --git a/src/components/ClassEditForm.tsx b/src/components/ClassEditForm.tsx
index 4a11466..42607c4 100644
--- a/src/components/ClassEditForm.tsx
+++ b/src/components/ClassEditForm.tsx
@@ -78,7 +78,7 @@ export const ClassEditForm = ({ character, values, errors }: ClassEditFormProps)
           hx-vals='{"is_check": "true"}'
           hx-trigger="change"
           hx-target="#editModalContent"
-          hx-swap="innerHTML"
+          hx-swap="morph:innerHTML"
           class="needs-validation"
           novalidate
         >
@@ -146,7 +146,7 @@ export const ClassEditForm = ({ character, values, errors }: ClassEditFormProps)
                 "bg-secondary-subtle text-muted": hitDieReadonly,
                 "is-invalid": errors?.hit_die_roll,
               })}
-              id="hit_die_roll"
+              id="classedit-hit-die-roll"
               name="hit_die_roll"
               value={hitDieValue}
               min="1"
@@ -180,11 +180,12 @@ export const ClassEditForm = ({ character, values, errors }: ClassEditFormProps)
             </button>
             <button
               type="submit"
+              id="classedit-submit"
               class="btn btn-primary"
               hx-post={`/characters/${character.id}/edit/class`}
               hx-vals='{"is_check": "false"}'
               hx-target="#editModalContent"
-              hx-swap="innerHTML"
+              hx-swap="morph:innerHTML"
             >
               Add Level
             </button>
diff --git a/src/components/CoinsEditForm.tsx b/src/components/CoinsEditForm.tsx
index c42dec1..246f10b 100644
--- a/src/components/CoinsEditForm.tsx
+++ b/src/components/CoinsEditForm.tsx
@@ -123,7 +123,7 @@ export const CoinsEditForm = ({ character, values = {}, errors = {} }: CoinsEdit
         hx-vals='{"is_check": "true"}'
         hx-trigger="change"
         hx-target="#editModalContent"
-        hx-swap="innerHTML"
+        hx-swap="morph:innerHTML"
         class="needs-validation"
         novalidate
       >
@@ -142,7 +142,7 @@ export const CoinsEditForm = ({ character, values = {}, errors = {} }: CoinsEdit
               <input
                 class="form-check-input"
                 type="checkbox"
-                id="make_change"
+                id="coinsedit-make-change"
                 name="make_change"
                 value="true"
                 checked={makeChange}
@@ -229,11 +229,12 @@ export const CoinsEditForm = ({ character, values = {}, errors = {} }: CoinsEdit
           </button>
           <button
             type="submit"
+            id="coinsedit-submit"
             class="btn btn-primary"
             hx-post={`/characters/${character.id}/edit/coins`}
             hx-vals='{"is_check": "false"}'
             hx-target="#editModalContent"
-            hx-swap="innerHTML"
+            hx-swap="morph:innerHTML"
           >
             Update Coins
           </button>
diff --git a/src/components/CreateItemForm.tsx b/src/components/CreateItemForm.tsx
index e555086..0e245fd 100644
--- a/src/components/CreateItemForm.tsx
+++ b/src/components/CreateItemForm.tsx
@@ -161,7 +161,7 @@ export const CreateItemForm = ({ character, values, errors }: CreateItemFormProp
         hx-vals='{"is_check": "true"}'
         hx-trigger="change"
         hx-target="#editModalContent"
-        hx-swap="innerHTML"
+        hx-swap="morph:innerHTML"
         class="modal-body needs-validation"
       >
         {/* General error message */}
@@ -209,8 +209,7 @@ export const CreateItemForm = ({ character, values, errors }: CreateItemFormProp
             Category <span class="text-danger">*</span>
           </label>
           <Select
-            id="item-category"
-            hx-preserve
+            id="createitem-category"
             name="category"
             placeholder="Select category..."
             options={ItemCategories.map((cat) => ({
@@ -219,6 +218,7 @@ export const CreateItemForm = ({ character, values, errors }: CreateItemFormProp
             }))}
             value={values.category}
             error={errors?.category}
+            hx-preserve
           />
         </div>
 
@@ -248,7 +248,7 @@ export const CreateItemForm = ({ character, values, errors }: CreateItemFormProp
               Armor Type
             </label>
             <Select
-              id="armor-type"
+              id="createitem-armor-type"
               name="armor_type"
               placeholder="Select type..."
               options={armorTypeOptions}
@@ -699,9 +699,10 @@ export const CreateItemForm = ({ character, values, errors }: CreateItemFormProp
             id="item-note"
             name="note"
             rows={2}
-            value={values.note || ""}
             placeholder="Where or how you acquired this item"
-          />
+          >
+            {values.note || ""}
+          </textarea>
           {errors?.note && <div class="invalid-feedback d-block">{errors.note}</div>}
         </div>
 
@@ -719,11 +720,12 @@ export const CreateItemForm = ({ character, values, errors }: CreateItemFormProp
           </button>
           <button
             type="submit"
+            id="createitem-submit"
             class="btn btn-primary"
             hx-post={`/characters/${character.id}/edit/newitem`}
             hx-vals='{"is_check": "false"}'
             hx-target="#editModalContent"
-            hx-swap="innerHTML"
+            hx-swap="morph:innerHTML"
             hx-sync="closest form:abort"
           >
             Add Item
diff --git a/src/components/EditItemForm.tsx b/src/components/EditItemForm.tsx
index edfecfb..4a21e3a 100644
--- a/src/components/EditItemForm.tsx
+++ b/src/components/EditItemForm.tsx
@@ -150,12 +150,12 @@ export const EditItemForm = ({
   return (
     <ModalContent title="Edit Item">
       <form
-        id="edit-item-form"
+        id="edititem-form"
         hx-post={`/characters/${character.id}/items/${item.id}/edit`}
         hx-vals='{"is_check": "true"}'
         hx-trigger="change"
         hx-target="#editModalContent"
-        hx-swap="innerHTML"
+        hx-swap="morph:innerHTML"
         class="modal-body needs-validation"
       >
         {/* General error message */}
@@ -404,7 +404,7 @@ export const EditItemForm = ({
             <input
               type="hidden"
               name="damage_row_count"
-              id="damage_row_count"
+              id="edititem-damage-row-count"
               value={damageRowCount}
             />
 
@@ -419,6 +419,7 @@ export const EditItemForm = ({
                     <div class="col-3">
                       <input
                         type="number"
+                        id={`edititem-damage-num-dice-${i}`}
                         class={clsx("form-control form-control-sm", { "is-invalid": numDiceError })}
                         name={`damage.${i}.num_dice`}
                         placeholder="# dice"
@@ -436,6 +437,7 @@ export const EditItemForm = ({
                       <Select
                         class="form-select-sm"
                         name={`damage.${i}.die_value`}
+                        id={`edititem-damage-die-${i}`}
                         placeholder="Die"
                         options={dieValueOptions}
                         value={entry.die_value}
@@ -447,6 +449,7 @@ export const EditItemForm = ({
                       <Select
                         class="form-select-sm"
                         name={`damage.${i}.type`}
+                        id={`edititem-damage-type-${i}`}
                         placeholder="Type"
                         options={damageTypeOptions}
                         value={entry.type}
@@ -459,7 +462,7 @@ export const EditItemForm = ({
                     <input
                       class="form-check-input form-check-input-sm"
                       type="checkbox"
-                      id={`damage-versatile-${i}`}
+                      id={`edititem-damage-versatile-${i}`}
                       name={`damage.${i}.versatile`}
                       value="true"
                       checked={entry.versatile}
@@ -558,11 +561,12 @@ export const EditItemForm = ({
           </button>
           <button
             type="submit"
+            id="edititem-submit"
             class="btn btn-primary"
             hx-post={`/characters/${character.id}/items/${item.id}/edit`}
             hx-vals='{"is_check": "false"}'
             hx-target="#editModalContent"
-            hx-swap="innerHTML"
+            hx-swap="morph:innerHTML"
           >
             Update Item
           </button>
diff --git a/src/components/HitDiceEditForm.tsx b/src/components/HitDiceEditForm.tsx
index 0a382fe..815d120 100644
--- a/src/components/HitDiceEditForm.tsx
+++ b/src/components/HitDiceEditForm.tsx
@@ -65,9 +65,9 @@ export const HitDiceEditForm = ({
           id="hitdice-edit-form"
           hx-post={`/characters/${characterId}/edit/hitdice`}
           hx-vals='{"is_check": "true"}'
-          hx-trigger="change delay:100ms"
+          hx-trigger="change"
           hx-target="#editModalContent"
-          hx-swap="innerHTML"
+          hx-swap="morph:innerHTML"
           class="needs-validation"
           novalidate
         >
@@ -121,7 +121,7 @@ export const HitDiceEditForm = ({
               </label>
               <select
                 class={clsx("form-select", { "is-invalid": errors?.die_value })}
-                id="die_value"
+                id="hitdice-die-value"
                 name="die_value"
                 required
               >
@@ -145,7 +145,7 @@ export const HitDiceEditForm = ({
                 </label>
                 <select
                   class={clsx("form-select", { "is-invalid": errors?.die_value })}
-                  id="die_value"
+                  id="hitdice-die-value"
                   name="die_value"
                   required
                 >
@@ -169,7 +169,7 @@ export const HitDiceEditForm = ({
                   <input
                     type="number"
                     class={clsx("form-control", { "is-invalid": errors?.hp_rolled })}
-                    id="hp_rolled"
+                    id="hitdice-hp-rolled"
                     name="hp_rolled"
                     value={values?.hp_rolled || ""}
                     min="1"
@@ -223,11 +223,12 @@ export const HitDiceEditForm = ({
             </button>
             <button
               type="submit"
+              id="hitdice-edit-submit"
               class="btn btn-primary"
               hx-vals='{"is_check": "false"}'
               hx-post={`/characters/${characterId}/edit/hitdice`}
               hx-target="#editModalContent"
-              hx-swap="innerHTML"
+              hx-swap="morph:innerHTML"
               hx-sync="closest form:replace"
             >
               Update Hit Dice
diff --git a/src/components/HitPointsEditForm.tsx b/src/components/HitPointsEditForm.tsx
index 04f92b6..5d1c870 100644
--- a/src/components/HitPointsEditForm.tsx
+++ b/src/components/HitPointsEditForm.tsx
@@ -46,7 +46,7 @@ export const HitPointsEditForm = ({
           hx-vals='{"is_check": "true"}'
           hx-trigger="change"
           hx-target="#editModalContent"
-          hx-swap="innerHTML"
+          hx-swap="morph:innerHTML"
           class="needs-validation"
           novalidate
         >
@@ -148,7 +148,7 @@ export const HitPointsEditForm = ({
               hx-vals='{"is_check": "false"}'
               hx-post={`/characters/${characterId}/edit/hitpoints`}
               hx-target="#editModalContent"
-              hx-swap="innerHTML"
+              hx-swap="morph:innerHTML"
             >
               Update Hit Points
             </button>
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index d7516e8..88e969e 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -83,6 +83,7 @@ export const Layout = ({
         <link href="/static/styles.css" rel="stylesheet" />
         <script src="/static/htmx.min.js"></script>
         <script src="/static/htmx-ext-sse.js"></script>
+        <script src="/static/idiomorph-ext.min.js"></script>
       </head>
       <body data-bs-theme="dark">
         <Navbar user={user} currentPage={currentPage} />
diff --git a/src/components/LearnSpellForm.tsx b/src/components/LearnSpellForm.tsx
index 2dcb715..4339dc4 100644
--- a/src/components/LearnSpellForm.tsx
+++ b/src/components/LearnSpellForm.tsx
@@ -39,7 +39,7 @@ function LearnSpellFormBody({ character, values = {}, errors = {} }: LearnSpellF
         hx-vals='{"is_check": "true"}'
         hx-trigger="input from:[name='spell_search'] changed delay:300ms, change"
         hx-target="#editModalContent"
-        hx-swap="innerHTML"
+        hx-swap="morph:innerHTML"
         class="needs-validation"
         novalidate
       >
@@ -83,7 +83,7 @@ function LearnSpellFormBody({ character, values = {}, errors = {} }: LearnSpellF
           </label>
           <textarea
             class="form-control"
-            id="note"
+            id="learnspell-note"
             name="note"
             rows={2}
             placeholder="Add a note about adding this spell to your spellbook..."
@@ -97,11 +97,12 @@ function LearnSpellFormBody({ character, values = {}, errors = {} }: LearnSpellF
           </button>
           <button
             type="submit"
+            id="learnspell-submit"
             class="btn btn-primary"
             hx-post={`/characters/${character.id}/edit/spellbook`}
             hx-vals='{"is_check": "false"}'
             hx-target="#editModalContent"
-            hx-swap="innerHTML"
+            hx-swap="morph:innerHTML"
             disabled={!selectedSpell}
           >
             Add to Spellbook
diff --git a/src/components/LongRestForm.tsx b/src/components/LongRestForm.tsx
index 0ad5720..ab48c48 100644
--- a/src/components/LongRestForm.tsx
+++ b/src/components/LongRestForm.tsx
@@ -41,7 +41,7 @@ export const LongRestForm = ({ character, values, errors }: LongRestFormProps) =
         hx-vals='{"is_check": "true"}'
         hx-trigger="change"
         hx-target="#editModalContent"
-        hx-swap="innerHTML"
+        hx-swap="morph:innerHTML"
         class="needs-validation"
         novalidate
       >
@@ -129,7 +129,7 @@ export const LongRestForm = ({ character, values, errors }: LongRestFormProps) =
             hx-post={`/characters/${character.id}/rest/long`}
             hx-vals='{"is_check": "false"}'
             hx-target="#editModalContent"
-            hx-swap="innerHTML"
+            hx-swap="morph:innerHTML"
           >
             <i class="bi bi-moon-stars me-2"></i>
             Complete Long Rest
diff --git a/src/components/PrepareSpellForm.tsx b/src/components/PrepareSpellForm.tsx
index 558a666..c2bad4b 100644
--- a/src/components/PrepareSpellForm.tsx
+++ b/src/components/PrepareSpellForm.tsx
@@ -129,7 +129,7 @@ function PrepareSpellFormBody({ character, values = {}, errors = {} }: PrepareSp
         hx-vals='{"is_check": "true"}'
         hx-trigger="input from:[name='spell_search'] changed delay:300ms, change"
         hx-target="#editModalContent"
-        hx-swap="innerHTML"
+        hx-swap="morph:innerHTML"
         class="needs-validation"
         novalidate
       >
@@ -252,7 +252,7 @@ function PrepareSpellFormBody({ character, values = {}, errors = {} }: PrepareSp
             hx-post={`/characters/${character.id}/edit/prepspell`}
             hx-vals='{"is_check": "false"}'
             hx-target="#editModalContent"
-            hx-swap="innerHTML"
+            hx-swap="morph:innerHTML"
             disabled={!selectedSpell}
           >
             {actionText} {toTitleCase(slotTypeLabel)}
diff --git a/src/components/SessionNotes.tsx b/src/components/SessionNotes.tsx
index da4ebfd..74e163f 100644
--- a/src/components/SessionNotes.tsx
+++ b/src/components/SessionNotes.tsx
@@ -43,7 +43,7 @@ export const SessionNotes = ({ characterId, currentNote }: SessionNotesProps) =>
           hx-post={`/characters/${characterId}/notes`}
           hx-trigger={`input changed delay:${autoSaveDelaySeconds}s`}
           hx-target="#notes-save-status"
-          hx-swap="outerHTML"
+          hx-swap="morph:outerHTML"
           // biome-ignore lint/suspicious/noTsIgnore: this is SSR HTML, not real TS event code
           // @ts-ignore
           onInput="document.getElementById('notes-saved').classList.add('d-none'); document.getElementById('notes-unsaved').classList.remove('d-none');"
diff --git a/src/components/ShortRestForm.tsx b/src/components/ShortRestForm.tsx
index bf7af60..da4c1b3 100644
--- a/src/components/ShortRestForm.tsx
+++ b/src/components/ShortRestForm.tsx
@@ -66,7 +66,7 @@ export const ShortRestForm = ({ character, values, errors }: ShortRestFormProps)
         hx-vals='{"is_check": "true"}'
         hx-trigger="change"
         hx-target="#editModalContent"
-        hx-swap="innerHTML"
+        hx-swap="morph:innerHTML"
         class="needs-validation"
         novalidate
       >
@@ -234,7 +234,7 @@ export const ShortRestForm = ({ character, values, errors }: ShortRestFormProps)
             hx-post={`/characters/${character.id}/rest/short`}
             hx-vals='{"is_check": "false"}'
             hx-target="#editModalContent"
-            hx-swap="innerHTML"
+            hx-swap="morph:innerHTML"
           >
             <i class="bi bi-cup-hot me-2"></i>
             Complete Short Rest
diff --git a/src/components/SkillsEditForm.tsx b/src/components/SkillsEditForm.tsx
index 9521233..c090adb 100644
--- a/src/components/SkillsEditForm.tsx
+++ b/src/components/SkillsEditForm.tsx
@@ -153,7 +153,7 @@ export const SkillsEditForm = ({ character, values = {}, errors = {} }: SkillsEd
         hx-vals='{"is_check": "true"}'
         hx-trigger="change"
         hx-target="#editModalContent"
-        hx-swap="innerHTML"
+        hx-swap="morph:innerHTML"
         class="needs-validation"
         novalidate
       >
@@ -205,7 +205,7 @@ export const SkillsEditForm = ({ character, values = {}, errors = {} }: SkillsEd
             hx-post={`/characters/${character.id}/edit/skills`}
             hx-vals='{"is_check": "false"}'
             hx-target="#editModalContent"
-            hx-swap="innerHTML"
+            hx-swap="morph:innerHTML"
           >
             Update Skills
           </button>
diff --git a/src/components/SpellSlotsEditForm.tsx b/src/components/SpellSlotsEditForm.tsx
index b1a2b13..6c59bbb 100644
--- a/src/components/SpellSlotsEditForm.tsx
+++ b/src/components/SpellSlotsEditForm.tsx
@@ -83,7 +83,7 @@ export const SpellSlotsEditForm = ({ character, values, errors }: SpellSlotsEdit
           hx-vals='{"is_check": "true"}'
           hx-trigger="change"
           hx-target="#editModalContent"
-          hx-swap="innerHTML"
+          hx-swap="morph:innerHTML"
           class="needs-validation"
           novalidate
         >
@@ -217,7 +217,7 @@ export const SpellSlotsEditForm = ({ character, values, errors }: SpellSlotsEdit
               hx-post={`/characters/${character.id}/edit/spellslots`}
               hx-vals='{"is_check": "false"}'
               hx-target="#editModalContent"
-              hx-swap="innerHTML"
+              hx-swap="morph:innerHTML"
             >
               Update Spell Slots
             </button>
diff --git a/src/components/TraitEditForm.tsx b/src/components/TraitEditForm.tsx
index 08a3273..338e513 100644
--- a/src/components/TraitEditForm.tsx
+++ b/src/components/TraitEditForm.tsx
@@ -16,7 +16,7 @@ export const TraitEditForm = ({ character, values, errors }: TraitEditFormProps)
         hx-vals='{"is_check": "true"}'
         hx-trigger="change"
         hx-target="#editModalContent"
-        hx-swap="innerHTML"
+        hx-swap="morph:innerHTML"
         class="modal-body needs-validation"
       >
         <div class="mb-3">
@@ -78,6 +78,7 @@ export const TraitEditForm = ({ character, values, errors }: TraitEditFormProps)
             hx-post={`/characters/${character.id}/edit/trait`}
             hx-vals='{"is_check": "false"}'
             hx-target="#editModalContent"
+            hx-swap="morph:innerHTML"
           >
             Add Trait
           </button>
diff --git a/src/components/ui/SpellPicker.tsx b/src/components/ui/SpellPicker.tsx
index df7461e..69cc258 100644
--- a/src/components/ui/SpellPicker.tsx
+++ b/src/components/ui/SpellPicker.tsx
@@ -46,6 +46,7 @@ export const SpellPicker = ({
 
       {/* Search input */}
       <input
+        id="spellpicker-spell-search"
         type="text"
         class="form-control mb-2"
         name="spell_search"