apps/web/src/appSettings.ts (1)

106-115: Consider adding length constraints for consistency.

Other string fields in this schema use isMaxLength checks (e.g., accentColor has isMaxLength(16), paths have isMaxLength(4096)). The label and value fields in customAccentPresets lack these constraints.

💡 Optional: Add length constraints

   customAccentPresets: Schema.Array(
     Schema.Struct({
-      label: Schema.String,
-      value: Schema.String,
+      label: Schema.String.check(Schema.isMaxLength(64)),
+      value: Schema.String.check(Schema.isMaxLength(16)),
     }),
   ).pipe(

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/appSettings.ts` around lines 106 - 115, customAccentPresets
schema entries for label and value currently use plain Schema.String; add length
constraints using Schema.isMaxLength to match the rest of the file (e.g., wrap
Schema.String for both label and value with Schema.isMaxLength(16) or another
appropriate limit) so the Schema.Struct in customAccentPresets enforces max
lengths consistently; update the Schema.Struct that defines label and value to
use the constrained string schema.

apps/web/src/components/chat/MessagesTimeline.tsx (1)

754-757: Consider adding keyboard accessibility for the clickable container.

The clickable div lacks keyboard navigation support. Users relying on keyboard navigation cannot toggle expansion.

♿ Add keyboard accessibility

     <div
-      className={cn("rounded-lg px-1 py-1", isExpandable && "cursor-pointer")}
+      className={cn("rounded-lg px-1 py-1", isExpandable && "cursor-pointer")}
+      role={isExpandable ? "button" : undefined}
+      tabIndex={isExpandable ? 0 : undefined}
       onClick={isExpandable ? () => setExpanded((prev) => !prev) : undefined}
+      onKeyDown={
+        isExpandable
+          ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setExpanded((prev) => !prev);
+              }
+            }
+          : undefined
+      }
     >

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/components/chat/MessagesTimeline.tsx` around lines 754 - 757,
The clickable container in MessagesTimeline lacks keyboard accessibility; update
the div that uses isExpandable and setExpanded to behave like a button by adding
tabIndex={0}, role="button", and aria-expanded={expanded} (or aria-expanded
based on setExpanded state), and implement an onKeyDown handler that toggles
expansion when Enter or Space is pressed (calling the same toggle logic used in
onClick) while preventing default for Space to avoid page scroll; ensure these
changes reference the existing isExpandable, setExpanded, and expanded state
variables so keyboard users can toggle the container.

apps/web/src/routes/_chat.settings.tsx (3)

1358-1382: Consider extracting the log file read logic to reduce duplication.

The file reading and scroll-to-bottom logic is duplicated between the onValueChange handler (lines 1331-1344) and the Refresh button onClick (lines 1362-1378). Extracting this to a shared helper would improve maintainability.

💡 Optional: Extract shared logic

const loadLogFile = useCallback(async (filename: string) => {
  setIsLoadingLogs(true);
  try {
    const api = ensureNativeApi();
    const result = await api.logs.read(filename);
    setLogContent(result.content);
    requestAnimationFrame(() => {
      if (logViewerRef.current) {
        logViewerRef.current.scrollTop = logViewerRef.current.scrollHeight;
      }
    });
  } catch {
    setLogContent("Failed to read log file.");
  } finally {
    setIsLoadingLogs(false);
  }
}, []);

Then use loadLogFile(value) in both handlers.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/routes/_chat.settings.tsx` around lines 1358 - 1382, Extract the
duplicated log-reading and scroll-to-bottom logic used in the onValueChange
handler and the Refresh Button onClick into a shared async helper (e.g.,
loadLogFile) and call that from both places; the helper should accept the
filename, call ensureNativeApi() and api.logs.read(filename),
setIsLoadingLogs(true)/false around the call, setLogContent(result.content) or
the failure message on error, and perform the requestAnimationFrame scroll logic
using logViewerRef.current to scroll to scrollHeight so both handlers reuse the
same code.

---

670-676: Consider validating for duplicate preset names before saving.

The form submits the new preset without checking if a preset with the same name and value already exists in customAccentPresets. While the "Save as Preset" button is hidden when the color matches an existing preset, this relies on color matching only—a user could potentially create presets with duplicate names.

💡 Optional: Add duplicate name validation

 onSubmit={(e) => {
   e.preventDefault();
   const name = presetNameInput.trim();
   if (!name) return;
+  const isDuplicate = settings.customAccentPresets.some(
+    (p) => p.label.toLowerCase() === name.toLowerCase()
+  );
+  if (isDuplicate) return;
   updateSettings({
     customAccentPresets: [
       ...settings.customAccentPresets,
       { label: name, value: accentColor },
     ],
   });
   setPresetNameInput(null);
 }}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/routes/_chat.settings.tsx` around lines 670 - 676, Before
calling updateSettings to append the new preset, check customAccentPresets for
an existing preset with the same label (and optionally same value) and prevent
adding duplicates; if a matching preset is found, do not call updateSettings and
instead handle validation (e.g., show a validation error or clear the input) via
setPresetNameInput or existing state. Update the logic around updateSettings,
customAccentPresets and setPresetNameInput to perform this duplicate-name (and
optional name+value) check and early-return/notify instead of blindly pushing
the new preset.

---

600-614: Consider using a separate clickable element for better accessibility.

The delete control uses <span role="button"> nested inside a <button>. While role="button" provides some accessibility, it lacks keyboard focusability and doesn't receive keyboard events automatically. However, since nesting a <button> inside a <button> is invalid HTML, the current approach is a reasonable compromise for this hover-reveal pattern.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/routes/_chat.settings.tsx` around lines 600 - 614, Replace the
non-focusable span "button" with a real focusable control: make the delete
control a standalone <button type="button"> (with the same aria-label, className
and onClick behavior that calls updateSettings and stops propagation) rather
than using role="button" on a span; ensure it is not nested inside another
<button> (refactor the parent markup if needed) and keep keyboard activation
semantics (Enter/Space) by using the native button element; reference
updateSettings, settings.customAccentPresets, preset.value and preset.label to
locate and preserve the remove logic.

apps/web/src/routes/_chat.settings.tsx (1)

706-718: Consider adding maxLength to enforce schema constraint.

The PR summary mentions maxLength constraints were added to the schema (label: 64 characters). Adding maxLength={64} to the input provides immediate feedback and prevents users from typing beyond the limit.

✨ Proposed enhancement

                        <Input
                          ref={presetNameRef}
                          className="h-7 w-32 py-0 text-xs leading-7"
                          placeholder="Preset name"
                          value={presetNameInput}
+                         maxLength={64}
                          onChange={(e) => setPresetNameInput(e.target.value)}
                          onKeyDown={(e) => {
                            if (e.key === "Escape") setPresetNameInput(null);
                          }}
                          onBlur={() => {
                            if (!presetNameInput.trim()) setPresetNameInput(null);
                          }}
                        />

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/routes/_chat.settings.tsx` around lines 706 - 718, The Input for
preset names (the component using ref={presetNameRef}, value={presetNameInput},
onChange={(e) => setPresetNameInput(e.target.value)}) should enforce the schema
max length: add maxLength={64} to the Input props and ensure onChange trims or
blocks extra characters (e.g., only call setPresetNameInput with
e.target.value.slice(0,64)) so the UI prevents typing beyond the 64-char schema
constraint and stays in sync with onBlur/onKeyDown logic.