Skip to content

Refresh the default look: inset panel, slate greys, quieter headings, and per-screen fixes - #912

Open
guidovizoso wants to merge 14 commits into
mainfrom
guido/inset-panel
Open

Refresh the default look: inset panel, slate greys, quieter headings, and per-screen fixes#912
guidovizoso wants to merge 14 commits into
mainfrom
guido/inset-panel

Conversation

@guidovizoso

@guidovizoso guidovizoso commented Oct 30, 2026

Copy link
Copy Markdown
Collaborator

What this changes

A design pass over the default look. Each change is its own commit, so any one can be dropped without touching the others:

Commit Change
7621aa48 Slate greys. Every grey in the default theme moves from Tailwind's neutral to slate. Greys that sat between steps keep their lightness, so contrast doesn't shift.
aeb0e2e5 Inset panel. Each page sits in a panel inset 8px from the window, using the sidebar's inset variant. Light mode goes darkest to lightest: the frame, then a slate-50 panel, then white cards. Admin and settings now scroll inside the panel; the audit table and playground fill it.
930be425 Sidebar text. The conversation preview is text-sm instead of a hand-set 14.4px.
05d8d1e4 Headings. Page titles are semibold with tighter tracking. Section titles are 15px semibold instead of 18px bold.
88589474 Row icons. Plugins rows show the app's logo, brand icon or initial instead of the same plug. Connections and the app directory fall back to the initial too. Skills and Automatic learning in the admin sidebar no longer share one icon.
61749987 Home. Drops the "OPENBOT" label above the greeting.
fde726ab Home. Explore Bots becomes compact cards (avatar beside the name), two per row, up to four, with an "All Bots" link. The carousel is gone.
2d2bb006 Bot page. The description is the Bot's own one-liner, not "Review this Bot's activity and settings."
cee64883 Bot page. With nothing running or scheduled, Activity is a row in "For you" instead of a section holding one row.
9ec4bfd8 Connections. Tile text fits ("Repository events can start Bots."). Apps without a summary no longer say "Connect your X account." next to their Connect button.
068f108b Browse Composio. Placeholder rows show during the ~2s directory load, then a count ("1,605 apps. Search by name to narrow them.").
ad839d6d Empty-state pattern. Sam's dot matrix from design-uplift appears behind every PageEmpty, fading from the top-right. It's built to be swapped (see below).
8fd1af15 Bolt icon. Empty states about Bots use the sidebar's bolt instead of a robot.
aaa88391 Changelog.

Customising the empty-state pattern

To change Edit
The pattern Replace app/src/assets/patterns/dot-matrix.svg. It's used as a mask, so only each shape's opacity matters.
Its colour --empty-pattern-color in theme.css, per theme
How strongly it shows --empty-pattern-opacity (0.25 light, 0.15 dark)
Turn it off --empty-pattern-opacity: 0

Skins start with the pattern off. A skin can turn it on in its own skin.css.

Where it runs

  • New state that outlives a request? None. These are styles, tokens and client components.
  • What happens on the second replica? Nothing different. No server changes.
  • Anything serialised? No.
  • Anything fanned out to a browser? No.
  • New listener, port, or schedule? No.

Boundary and audit

  • Every acting call still goes through the gateway. No server changes.
  • No new refusals or failures.
  • Nothing new is trusted from the client.

Changelog

  • "The default look: an inset page, slate greys and quieter headings", under Unreleased.

Proof

  • bunx tsc --noEmit in app/ passes.
  • bun test app/tests: 2128 pass and 1 fails. The failure is serve.test.ts › "a stalled handshake times out…", which also fails on main.
  • Checked each change by hand in the running app: a Bot's page, Bots, Plugins, Connections, Browse Composio, audit, the playground, Home, Add credential, Activity's empty states, and Bots in dark mode.
  • Updated tests:
    • The audit layout test now checks that the page fills the panel instead of h-dvh.
    • Two sidebar tests use the new size class.
    • The Activity test covers the row in "For you".
    • A stale carousel mock is removed from the Home fixture. Bun applied it globally, and once Home stopped using the carousel it broke carousel-keyboard.test.ts.

Overlap with #906: both PRs touch the page scroll area in page-parts.tsx, so whichever merges second needs a small rebase.

@guidovizoso
Use Tailwind's slate greys instead of neutral
7621aa4 
Every grey token in the default theme moves to the matching slate step, in light and dark. The
three greys that sat between palette steps keep their lightness and take slate's tint from the
steps either side, so contrast does not shift. The onboarding illustration and the component
preview's neutral-* classes become slate-* to match. Skins set their own colours and are
unchanged.
@guidovizoso
Put each page in an inset panel: darker frame, light panel, white cards
aeb0e2e 
The sidebar and the window's edge now share one tint, and the page sits in a panel inset 8px with
rounded corners and a hairline, using the sidebar's own inset variant. Light mode runs darkest to
lightest the way Linear does: the frame, a slate-50 panel, then white cards on it; dark mode was
already in that order once the frame became its darkest surface.

Admin and settings now scroll inside the panel like the app does, so its corners stay on screen;
the audit table and the playground fill the panel instead of the window. Fields fill with the
card's white so they read as fields on a card or the panel, and row icon tiles take the panel's
grey with a hairline so they still show on a white card.
@guidovizoso
Set the sidebar's conversation text on the type scale
cf0ccfa 
The conversation's main line was 14.4px, sized by hand; it is now text-sm like the rest of the
sidebar. The tests that named the old size class follow.
@guidovizoso
Lighten page and section headings
6028a21 
Page titles are semibold with slightly tighter tracking instead of bold. Section titles drop from
18px bold to 15px semibold, close to body size, so a long page reads as one title and its parts
rather than a row of titles competing with each other.
@guidovizoso
Show an app's logo or initial instead of the same plug on every row
a8dc69f 
Plugins showed one plug icon on every row, so the icons told one vendor from another no better than
none. Rows now show the app's logo, its brand icon, or its initial; Connections and the app
directory fall back to the initial too. The More apps row, a directory rather than a vendor, gets
an apps icon. In the admin sidebar Skills and Automatic learning shared a file icon; they are now a
slash and a bulb.
@guidovizoso
Home: drop the product-name label above the greeting
731d7e0 
The small uppercase OPENBOT over "Start a conversation" repeated what the sidebar already says
and gave the page two headings where one does the job. The greeting is now the page's only title,
in the same semibold as other page titles.
@guidovizoso
Home: show Explore Bots as compact cards in a grid
25b503f 
The carousel's tall cards left about 50px of nothing between each avatar and its name, and its
arrows showed even when every card fit. Bots are now rows (avatar beside name and one line of what
the Bot is for) two to a line, up to four, with an All Bots link when there are more. The skeleton,
empty and error states reserve the same two rows so the composer does not move.
@guidovizoso
Bot page: describe the Bot, not the page
d412533 
"Review this Bot's activity and settings." could head any page. The description under the title
is now the Bot's own one-liner, which used to sit just below in the avatar block; that block keeps
the avatar and the Bot's title.
@guidovizoso
Bot page: fold an idle Activity section into For you
7125aac 
With nothing running or scheduled, Activity was a whole section holding one row, "All activity ·
Nothing yet". That row now sits at the end of For you, titled Activity. The section still shows,
with its rows to running and scheduled work, whenever there is any.
@guidovizoso
Connections: fit each tile's line, and drop the one that repeats its …
82d502b 
…button

GitHub's tile line was a full sentence cut off mid-word; tiles now carry a short version that fits
("Repository events can start Bots."), and the full sentence stays on GitHub's own page. An app
with no summary of its own no longer shows "Connect your Todoist account.", which only repeated
the Connect button beside it; the tile shows just its name.
@guidovizoso
Browse Composio: show placeholder rows while the directory loads, and…
7058c0a 
… its count

The full directory takes a couple of seconds to arrive, and until then the page was a search box
over blank space. It now shows placeholder rows while loading, then how many apps there are
("1,605 apps. Search by name to narrow them.") or how many match a search.
@guidovizoso
Put CopilotKit's dot matrix behind empty states, swappable by token
22dfead 
Sam's square-dot matrix (from the design-uplift branch) now sits faintly behind every PageEmpty,
fading out from the top-right corner. It is built to be changed without touching a component:

- the tile is app/src/assets/patterns/dot-matrix.svg, used as a mask, so replacing the file
  changes the pattern;
- --empty-pattern, --empty-pattern-color and --empty-pattern-opacity in theme.css point at the
  file and set its colour and strength, per theme;
- --empty-pattern-opacity: 0 turns it off. Skins start with it off, since it is drawn for
  OpenBot's own palette.
@guidovizoso
Show the Bots bolt, not a robot, in empty states about Bots
a2f02be 
The sidebar draws Bots as a lightning bolt, but empty states about Bots (no Bots yet, no other Bots
to hand off to, Bot not found) drew a robot. They now use the same bolt, so the two read as one
thing.
@guidovizoso
Note the default look's changes in the changelog
12a20dd
samjulien added a commit that referenced this pull request Oct 30, 2026
@samjulien
Merge Guido's inset panel (#912) into the design uplift
7d6be3a 
Conflicts:
- page-parts.tsx: PageEmpty takes Guido's empty-state pattern.
- Home: Guido's layout and Bot cards. The default skin keeps its subheader above the composer and the rotating examples. The composer keeps its stock frame.
@samjulien samjulien mentioned this pull request Oct 30, 2026
Open
samjulien added a commit that referenced this pull request Oct 31, 2026
@samjulien
Merge main into the design uplift
8bd74bb 
Conflict in CHANGELOG.md: both entries kept, main's refunds entry first. The default look's entry
now describes what this branch ships rather than #912 alone.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@davidmckayv davidmckayv Awaiting requested review from davidmckayv davidmckayv is a code owner
@tylerslaton tylerslaton Awaiting requested review from tylerslaton tylerslaton is a code owner
@MikeRyanDev MikeRyanDev Awaiting requested review from MikeRyanDev MikeRyanDev is a code owner
@mxmzb mxmzb Awaiting requested review from mxmzb mxmzb is a code owner
@dustywusty dustywusty Awaiting requested review from dustywusty dustywusty is a code owner
@samjulien samjulien Awaiting requested review from samjulien samjulien is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@guidovizoso