fix(tui): use semantic form tokens (#42599)

AGENTS.md

@@ -19,6 +19,13 @@
 - Expose the meaningful state dimensions through story keybindings and list them in `StoryFooter`; include a reset command when combinations can leave the fixture in a confusing state.
 - Run a specific story with `OPENCODE_STORY=<story-id> bun run dev:live` from the development worktree, and exercise narrow and wide terminal sizes when layout is relevant.
 
+## TUI Theme Tokens
+
+- Choose theme tokens by semantic role, not by their current color. Do not use raw `theme.hue` values or borrow an unrelated semantic token to achieve a preferred appearance.
+- Use `text.feedback` and `background.feedback` only for outcome or status feedback such as errors, warnings, success messages, and informational messages. Use `formfield` states for form-control text, ordinals, and selection markers, and `action` states for actions.
+- If the theme does not expose a token for the required semantic role, extend the theme schema, defaults, resolution, and types with that role before using it in a component. Do not repurpose the nearest-looking existing token.
+- When changing the public theme token surface, verify the built-in light and dark defaults and the custom-theme fallback path in addition to the affected TUI component.
+
 ## Branch Names
 
 Use a short branch name of at most three words, separated by hyphens. Do not use slashes or type prefixes such as `feat/` or `fix/`.

packages/tui/src/routes/session/form.tsx

@@ -904,7 +904,13 @@ export function FormPrompt(props: {
                               <text
                                 width={4}
                                 flexShrink={0}
-                                fg={picked() ? theme.text.feedback.success.default : theme.text.subdued}
+                                fg={
+                                  active()
+                                    ? theme.text.formfield.focused
+                                    : picked()
+                                      ? theme.text.formfield.selected
+                                      : theme.text.subdued
+                                }
                               >
                                 [{picked() ? "✓" : " "}]
                               </text>
@@ -914,7 +920,7 @@ export function FormPrompt(props: {
                             </text>
                           </box>
                           <Show when={!multi()}>
-                            <text fg={theme.text.feedback.success.default}>{picked() ? " ✓" : ""}</text>
+                            <text fg={theme.text.formfield.selected}>{picked() ? " ✓" : ""}</text>
                           </Show>
                         </box>
                         <Show when={row.description}>
@@ -953,7 +959,13 @@ export function FormPrompt(props: {
                           <text
                             width={4}
                             flexShrink={0}
-                            fg={customChecked() ? theme.text.feedback.success.default : theme.text.subdued}
+                            fg={
+                              other()
+                                ? theme.text.formfield.focused
+                                : customChecked()
+                                  ? theme.text.formfield.selected
+                                  : theme.text.subdued
+                            }
                           >
                             [{customChecked() ? "✓" : " "}]
                           </text>
@@ -966,7 +978,7 @@ export function FormPrompt(props: {
                                 {input() || "Type your own answer"}
                               </text>
                               <Show when={!multi() && customPicked()}>
-                                <text fg={theme.text.feedback.success.default}>✓</text>
+                                <text fg={theme.text.formfield.selected}>✓</text>
                               </Show>
                             </>
                           }