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

Inline comments:
In `@docs/tasks/active/20260315-ui-design-improvements-todo.md`:
- Around line 1-28: The task file
docs/tasks/active/20260315-ui-design-improvements-todo.md is missing its
required paired lessons file; create
docs/tasks/active/20260315-ui-design-improvements-lessons.md containing a brief
summary of what was done, key implementation decisions (e.g., token
consolidation, ARIA/focus changes, AvatarFallback change), accessibility/UX
outcomes, unresolved/deferred items, links to related PRs/commits, and the
author/reviewer and date so future maintainers can trace why choices in
functions/components like AvatarFallback, site-header/footer updates, and
CTA/feature-card changes were made.

In `@packages/frontend/src/app/documents/document-list.tsx`:
- Around line 529-533: The delete success callback currently calls
setDeletingDoc(null) unconditionally and can clear a newly opened dialog if the
earlier delete resolves late; update the deleteDocumentMutation.mutate call (and
its callbacks) to only clear deletingDoc when the mutation's finished response
corresponds to the same doc id (compare the id passed to mutate with
deletingDoc?.id or capture the id in mutation variables/context), and add an
onError handler to surface failure feedback (e.g., show a toast or set an error
state) instead of silently failing; reference deletingDoc,
deleteDocumentMutation.mutate, setDeletingDoc, and the mutation callbacks when
implementing this fix.

In `@packages/frontend/src/app/home/features-section.tsx`:
- Line 46: The icon container currently has conflicting semantics (role="img"
with aria-hidden="true"); in the FeaturesSection component remove the role="img"
from the <div className="text-3xl mb-3">{f.icon}</div> if the icon is decorative
so it remains aria-hidden, otherwise if the icon conveys meaning keep role="img"
and add an accessible label (aria-label or aria-labelledby) derived from the
feature text (e.g., f.title or a generated id) to make the image discoverable to
screen readers.

In `@packages/frontend/src/components/nav-user.tsx`:
- Around line 26-33: getInitials can return an empty string for empty or
delimiter-only names; update the function (getInitials) to trim the input, split
on /[\s_-]+/, filter out empty tokens, and pick up to two token initials safely
(guarding token[0] exists). If that still yields nothing, fall back to taking
the first up to two non-whitespace characters from the original trimmed name (if
any), otherwise return a fixed placeholder like "?" so the avatar fallback is
never blank.

In `@packages/frontend/src/components/site-header.tsx`:
- Around line 69-81: The heading currently loses semantic role by assigning
role="button" and keyboard handlers directly on the <h1>; remove role, tabIndex
and onKeyDown from the heading and keep it purely semantic, then add a nested
<button> (or an adjacent inline <button>) that uses the same focus/hover classes
and calls setEditing(true) on click and Enter/Space, and set its aria-label to
`Rename "${title}"`; transfer the cursor/hover/focus styles and aria-label from
the heading to that button so editable, setEditing, title and the existing
onClick logic are preserved but applied to a real <button> element instead of
the <h1>.

---

Nitpick comments:
In `@docs/tasks/active/20260315-ui-design-improvements-todo.md`:
- Around line 24-28: Add a short "Verification" subsection to the Phase 4
checklist that must be completed before checking off all items: list the steps
to (1) update docs/design/ if any architecture changed (reference docs/design/),
(2) run and confirm passing of pnpm verify:fast, and (3) archive and reindex via
pnpm tasks:archive && pnpm tasks:index; ensure the verification note appears
above the completed checklist items and requires confirmation before marking the
phase complete.

In `@packages/frontend/src/app/home/footer.tsx`:
- Around line 16-20: The theme toggle button lacks an explicit type, which can
cause accidental form submissions; update the JSX button element that uses
onClick={toggleTheme} and aria-label referencing resolvedTheme to include
type="button" so the <button ...> in the component (where toggleTheme and
resolvedTheme are used) will not act as a submit button when placed inside
forms.