Skip to content

feat(dashboard): re-skin onto the landing page theme + Human/AI Queue labels - #1119

Merged
suleimansh merged 3 commits into
mainfrom
suleimansh/feat/dashboard-reskin
Jul 24, 2026
Merged

feat(dashboard): re-skin onto the landing page theme + Human/AI Queue labels#1119
suleimansh merged 3 commits into
mainfrom
suleimansh/feat/dashboard-reskin

Conversation

@suleimansh

Copy link
Copy Markdown
Contributor

One PR for the two dashboard-vs-landing-page alignment issues. Both make the dashboard and the-framework.ai read as one product.

Closes #1118 (theme re-skin)

  • Remap :root / .dark tokens in layouts/tailwind.css onto Everforest. Every component already reads --color-*, so this is a palette swap, not a component rewrite.
    • Dark uses the landing page's exact values (bg #2d353b, panels #232a2e, text #d3c6aa, green accent #a7c080, borders #475258).
    • Light uses Everforest Light. Open question in the issue was light-vs-dark: I kept a working light theme rather than dropping to dark-only, so the existing theme toggle still works. Happy to go dark-first if preferred, it is a one-block delete.
    • Status colours (--success/--warning/--danger/--info) retuned to Everforest per canvas.
  • IBM Plex Sans + IBM Plex Mono loaded via a new pages/+Head.tsx mirroring the landing page's Google Fonts links; --font-sans / --font-mono point at them.
  • --radius tightened to ~2px to match the squarer page.

Closes #1116 (queue labels)

Renamed the two named-queue surfaces to the landing page vocabulary:

  • "Needs you" review inbox -> "Human Queue": the Overview card, the notification + settings toggles, the project-picker badge tooltip, and the browser-notification title.
  • "Backlog" card -> "AI Queue": the cross-project queue card (renders TODO_AGENTS.md items).

Left ticket surfaces alone on purpose (Hot tickets lanes, the right-rail Tickets tab, the "Add to Queue" action): onboarding copy establishes tickets/ as a distinct concept that feeds the queue, not the queue itself.

Verification

  • pnpm typecheck clean; pnpm test 423/423 pass (updated the notification tests that asserted the old label).
  • pnpm build succeeds; confirmed the compiled CSS carries the Everforest values + --radius:.125rem + IBM Plex Sans, and the prerendered shell carries the font link.
  • Swept components for hardcoded colours that would bypass the tokens: only modal-backdrop bg-black scrims (intentional), no raw hex or named status colours.
  • Recommended follow-up: a live daemon-backed browser pass (light + dark) across populated components, as the issue notes.

… labels

Adopt the-framework.ai's visual identity so the dashboard and landing page
read as one product (#1118), and align the queue vocabulary (#1116).

Theme (#1118):
- Remap the :root/.dark tokens onto Everforest. Dark uses the landing page's
  exact values (bg #2d353b, panels #232a2e, text #d3c6aa, green accent #a7c080,
  borders #475258); light uses Everforest Light so the theme toggle still works
  rather than dropping to dark-only. Components already read --color-*, so this
  is a token swap plus the status colours retuned per canvas.
- Load IBM Plex Sans + Mono via a +Head.tsx mirroring the landing page, and
  point --font-sans / --font-mono at them.
- Tighten --radius to ~2px to match the squarer page.

Labels (#1116):
- Rename the two named-queue surfaces to the landing page's vocabulary: the
  "Needs you" review inbox becomes "Human Queue" (card, notification and
  settings toggles, picker badge tooltip, browser-notification title), and the
  cross-project "Backlog" card becomes "AI Queue". Ticket surfaces are left
  alone: onboarding copy establishes tickets/ as a distinct concept that feeds
  the queue, not the queue itself.

Closes #1118
Closes #1116
@suleimansh suleimansh added enhancement New feature or request priority: high Should be addressed soon the-framework ♻️ UX ✨ labels Jul 24, 2026
@suleimansh suleimansh self-assigned this Jul 24, 2026
@suleimansh
suleimansh marked this pull request as ready for review July 24, 2026 17:19
The sidebar rail scrolled on SidebarContent's native `overflow-auto`, so it
showed the raw OS scrollbar instead of the themed bar the Overview uses.
Suppress that instance's overflow and wrap the run list in the shadcn Base UI
ScrollArea (#913), matching the Overview: a thin muted-foreground thumb that
only appears while the list overflows.
@suleimansh

Copy link
Copy Markdown
Contributor Author

Testing note: in pnpm dev the theme reverts on refresh. That is a dev-only artifact, not a regression here: dev wires no Telefunc context, so contextPreferences() is undefined and savePreferences is a no-op / onPreferences returns {}. The daemon-served dashboard wires registryPreferencesStore() (server.ts) and persists theme across refresh (round-trip covered by registry.test.ts). Leaving it dev-only.

…ew session button

- Nudge the project picker off the brand mark (ms-10) so the two do not read as
  one unit.
- Remove the navbar "New session" button (added in #772). The sidebar's "New"
  launcher already starts a session, so the navbar copy was redundant; drop the
  now-dead newSession handler and Plus import with it.
@suleimansh
suleimansh merged commit 79d1689 into main Jul 24, 2026
1 check passed
@suleimansh
suleimansh deleted the suleimansh/feat/dashboard-reskin branch July 24, 2026 17:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request priority: high Should be addressed soon the-framework ♻️ UX ✨

Projects

None yet

1 participant