This document defines the visual language and component specification for Pythinker Web — design tokens, component primitives, the chat interface, theming, and style rules. All UI work is grounded in it: unified, restrained, token-driven, and themeable.
Every UI decision traces back to the following principles. Pythinker Web is a local Agent tool for developers: quick scanning, long stretches of staring, often in the dark — the design serves the task, and is restrained, clinical, and density-first.
Collapse every visual decision into tokens. Color tokens keep the existing short names and fill out the semantics (lowering migration cost), while spacing, z-index, motion, and font-weight fill in the scales that are currently missing. Every token has: name, light value, dark value, and usage.
--<category>-<role>-<state>. For example --color-text-muted, --radius-md, --space-4. To reduce churn, the existing short names (--bg / --ink / --line / --blue …) are kept as compatibility aliases for one release cycle. Semantic-first, in three layers: background / text / border + accent + status colors. All colors are defined in light / dark pairs, with contrast ≥ 4.5:1.
--color-accent comes from --accent-primary, and --color-bg comes from the current light / dark surface. The semantic status colors (success / warning / danger / info) are independent palettes paired with the seeds, one set each for light / dark; they are not auto-derived from the seeds. Day-to-day reskinning usually only needs the 4 seeds, with the status colors fine-tuned as needed.| Token | Light | Dark | Usage |
|---|---|---|---|
| --color-bg | #ffffff | #121212 | Page background |
| --color-surface | #fafbfc | #1f1f1f | Panel / sidebar / card head |
| --color-surface-raised | #ffffff | #292929 | Raised card / dialog / input |
| --color-text | #14171c | #e8eaed | Body text / headings |
| --color-text-muted | #6b7280 | #9aa0a8 | Secondary text / placeholder |
| --color-line | #e7eaee | #2d333b | Divider / card border |
| --color-selected | #00000014 | #ffffff14 | Neutral selected fill (sidebar rows, list pickers) — translucent, never accent-tinted |
| --color-hover | #0000000d | #ffffff0d | Row hover wash — lighter than the selected fill (hover < selected); translucent, sits on any surface |
| --color-media-alpha-bg-1 | ≈#858585 | ≈#676b72 | Checkerboard square A of the <img> alpha canvas — color-mix of --color-bg/--color-text (52/48); applied via --media-alpha-canvas (16px period) |
| --color-media-alpha-bg-2 | ≈#6b6b6b | ≈#7a7e85 | Checkerboard square B (42/58) — both squares stay ≥3:1 against white and black; opaque images cover the canvas |
| --color-sidebar-bg | #e9eaf2 | #2c343a | Sidebar solid composite (row masks / overlays). The visible sidebar surface is the frost pair --color-sidebar-glass + --sidebar-wash blurred by --p-sidebar-backdrop |
| --color-accent | #1783ff | #58a6ff | Primary action / link / focus |
| --color-success | #0e7a38 | #3fb950 | Success / pass |
| --color-warning | #a9610a | #d29922 | Warning / pending |
| --color-danger | #c0392b | #f85149 | Danger / error / abort |
The four surface layers each have a role — choose by "raised layer / default flat layer / sunken layer / page background", and avoid treating --p-surface-raised as a universal background.
| Token | Light | Dark | Usage |
|---|---|---|---|
| --p-surface-raised | #ffffff | #292929 | Raised card / dialog / input (raised layer) |
| --p-surface | #fafbfc | #1f1f1f | Panel / sidebar / card head (default flat layer) |
| --p-surface-sunken | #f3f5f8 | #121212 | Code block / inline input / recessed area (sunken layer) |
| --p-bg | #ffffff | #121212 | Page background |
All focusable controls (button, input, link, menu item, switch, checkbox) use the focus-ring token uniformly; do not hand-write a box-shadow focus ring.
| Token | Value | Usage |
|---|---|---|
| --p-focus-ring | 0 0 0 3px var(--p-accent-soft) | Default focus ring (link, menu item, switch, checkbox) |
| --p-focus-ring-strong | 0 0 0 3px var(--p-accent-soft), 0 0 0 1px var(--p-accent) | Strong focus ring (button, primary action) |
The text-selection color uses --p-selection uniformly (light rgba(23,131,255,.18) / dark rgba(88,166,255,.32)), applied by the global ::selection rule; do not set a separate highlight background.
All disabled controls use opacity:.5 + cursor:not-allowed uniformly; do not separately grey out or recolor.
Pythinker Web uses two font families: --font-ui (UI and body, Inter first) and --font-mono (code and monospace). Components always reference the variables; do not hard-code font names.
Body and UI use self-hosted Inter as the primary face. CJK and platform system UI fonts sit late in the fallback chain so Latin glyphs resolve to Inter while Chinese text can fall through to native CJK fonts:
--font-ui: "Inter Variable", "Inter", "Helvetica Neue", Arial,
+import{$ as e,Ft as t,M as n,Q as r,Vt as i,W as a,cr as o,et as s,nr as ee,nt as c,q as l,qt as u,zt as te}from"./vue.runtime.esm-bundler-D2gdn61G.js";import{at as ne,it as d,ot as re,st as f,t as p}from"./index-B1vM8rCf.js";var ie={class:`ds-page`},m={class:`layout`},h={class:`content`},g={class:`content-inner`},_={id:`tokens`},v={class:`icon-sizes`},y={class:`sz`},b={class:`p-ic`,style:{width:`14px`,height:`14px`},viewBox:`0 0 24 24`,fill:`currentColor`},x={class:`sz`},S={class:`p-ic`,style:{width:`16px`,height:`16px`},viewBox:`0 0 24 24`,fill:`currentColor`},C={class:`sz`},w={class:`p-ic`,style:{width:`20px`,height:`20px`},viewBox:`0 0 24 24`,fill:`currentColor`},T={class:`icon-grid`},E={class:`icon-group-label`},D={class:`ic-name`},O={id:`primitives`},k={class:`stage-wrap`},A={class:`stage p col`},j={class:`demo-row`},M={class:`p-btn primary disabled`},N={class:`p-spinner sm`,viewBox:`0 0 24 24`,style:{"--p-accent":`#fff`,"--p-line":`rgba(255,255,255,.35)`}},P={class:`stage-wrap`},F={class:`stage p col`},I={class:`demo-row`,style:{"font-size":`22px`,"line-height":`1`}},L={class:`demo-row`},ae={class:`p-thinking`},R={class:`p-thinking`},z={class:`stage-wrap`},B={class:`stage p col`},V={class:`demo-row`,style:{gap:`24px`,"flex-wrap":`wrap`}},H={class:`demo-row`,style:{gap:`24px`,"align-items":`center`}},U={class:`stage-wrap`},W={class:`stage p col`,style:{gap:`0`,background:`var(--p-surface)`,padding:`0`,"max-width":`300px`,"align-items":`stretch`}},G={style:{display:`flex`,"align-items":`center`,gap:`8px`,padding:`7px 10px`,margin:`1px 6px`,"border-radius":`8px`,color:`var(--p-text)`,"font-size":`13px`}},K={style:{color:`var(--d-fg-faint)`,flex:`none`},width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`currentColor`},q={style:{display:`flex`,"align-items":`center`,gap:`8px`,padding:`7px 10px`,margin:`1px 6px`,"border-radius":`8px`,color:`var(--p-text)`,"font-size":`13px`}},J={style:{color:`var(--d-fg-faint)`,flex:`none`},width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`currentColor`},oe={id:`chat`},se={class:`stage-wrap`},ce={class:`stage p col`,style:{"align-items":`center`,background:`#fff`}},le={class:`demo-chat`},ue={class:`p-thinking`},Y={class:`p-action`},de={class:`p-action-head`},fe={class:`p-ic`,style:{color:`var(--p-accent)`},viewBox:`0 0 24 24`,fill:`currentColor`},pe={class:`p-action warn`},me={class:`p-action-head`},he={class:`p-ic`,style:{color:`var(--p-warning)`},viewBox:`0 0 24 24`,fill:`currentColor`},X=f(c({__name:`DesignSystemView`,emits:[`close`],setup(c,{emit:f}){let X=f;function Z(){X(`close`)}let Q=null;function $(e){e.key===`Escape`&&Z()}return t(()=>{document.addEventListener(`keydown`,$);let e=Array.prototype.slice.call(document.querySelectorAll(`#nav a[href^="#"]`)),t=new Map;e.forEach(e=>{let n=e.getAttribute(`href`);if(!n)return;let r=document.getElementById(n.slice(1));r&&t.set(r,e)});let n=null;Q=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&(n&&n.classList.remove(`active`),n=t.get(e.target)??null,n&&n.classList.add(`active`))})},{rootMargin:`-20% 0px -70% 0px`,threshold:0}),t.forEach((e,t)=>Q.observe(t)),e.length&&e[0].classList.add(`active`)}),te(()=>{document.removeEventListener(`keydown`,$),Q&&=(Q.disconnect(),null)}),(t,c)=>(i(),l(`div`,ie,[a(`div`,{class:`ds-topbar`},[a(`button`,{class:`ds-back`,type:`button`,onClick:Z},`← Back`),c[0]||=a(`span`,{class:`ds-topbar-title`},`Design system`,-1)]),a(`div`,m,[c[51]||=r(``,1),a(`main`,h,[a(`div`,g,[c[49]||=r(`● Design System · v1.0Pythinker Web Design System
This document defines the visual language and component specification for Pythinker Web — design tokens, component primitives, the chat interface, theming, and style rules. All UI work is grounded in it: unified, restrained, token-driven, and themeable.
iThis spec is the single reference when changing the web UI. Before adding or modifying a component, style, layout, or theme, read this document first; color, font, radius, spacing, shadow, z-index, and motion always use the §02 tokens, components reuse the §03 primitives, and the §06 style rules are followed. 01Design Principles
Every UI decision traces back to the following principles. Pythinker Web is a local Agent tool for developers: quick scanning, long stretches of staring, often in the dark — the design serves the task, and is restrained, clinical, and density-first.
- Consistency —— The same semantics use the same component. The primary button, dialog, input, and badge should each have exactly "one" correct way to be written across the entire site.
- Hierarchy —— Build a clear hierarchy through size, weight, color, and whitespace; emphasize through "restraint" rather than "bolder and bigger".
- Proximity —— Group related elements, leave whitespace between unrelated ones. A card's padding, line spacing, and group spacing all come from the same spacing scale.
- Feedback —— hover / active / focus / loading / success / error all have visible states, and the state language is unified.
- Breathing room —— Control density with the spacing scale rather than arbitrary pixels; prefer restrained whitespace over cramming controls together.
- Accessibility (A11y) —— Text contrast ≥ 4.5:1, visible focus rings, touch targets ≥ 32px, and states that don't rely on color alone.
- Reduction —— The number of colors, radii, shadow levels, and type sizes all converge to a finite set of tokens; delete stray values.
✓Brand tone (the do-not list): calm, clinical, never exaggerated. Reject purple gradients, glassmorphism, glowing shadows, AI purple / blue glows, endlessly looping fussy micro-animations, "Boost your productivity"-style marketing copy, and using emoji as icons. These are all common tells of AI-generated interfaces (an "AI tell"), deliberately avoided. iDeclare design intent first (Design Read): before adding a component / page, write one sentence describing its scenario, audience, and tone (for example, "a lightweight tool card embedded in a conversation, for developers, calm and restrained"), then build. If the intent isn't clear, ask one question first rather than defaulting to the nearest existing style. `,2),a(`section`,_,[c[7]||=r(`02Design Tokens
Collapse every visual decision into tokens. Color tokens keep the existing short names and fill out the semantics (lowering migration cost), while spacing, z-index, motion, and font-weight fill in the scales that are currently missing. Every token has: name, light value, dark value, and usage.
iNaming convention: --<category>-<role>-<state>. For example --color-text-muted, --radius-md, --space-4. To reduce churn, the existing short names (--bg / --ink / --line / --blue …) are kept as compatibility aliases for one release cycle. Color
Semantic-first, in three layers: background / text / border + accent + status colors. All colors are defined in light / dark pairs, with contrast ≥ 4.5:1.
iThe table below shows the derived semantic tokens. The neutrals and the accent are derived from the 4 color seeds in §05 — for example --color-accent comes from --accent-primary, and --color-bg comes from the current light / dark surface. The semantic status colors (success / warning / danger / info) are independent palettes paired with the seeds, one set each for light / dark; they are not auto-derived from the seeds. Day-to-day reskinning usually only needs the 4 seeds, with the status colors fine-tuned as needed.| Token | Light | Dark | Usage |
|---|---|---|---|
| --color-bg | #ffffff | #121212 | Page background |
| --color-surface | #fafbfc | #1f1f1f | Panel / sidebar / card head |
| --color-surface-raised | #ffffff | #292929 | Raised card / dialog / input |
| --color-text | #14171c | #e8eaed | Body text / headings |
| --color-text-muted | #6b7280 | #9aa0a8 | Secondary text / placeholder |
| --color-line | #e7eaee | #2d333b | Divider / card border |
| --color-selected | #00000014 | #ffffff14 | Neutral selected fill (sidebar rows, list pickers) — translucent, never accent-tinted |
| --color-hover | #0000000d | #ffffff0d | Row hover wash — lighter than the selected fill (hover < selected); translucent, sits on any surface |
| --color-media-alpha-bg-1 | ≈#858585 | ≈#676b72 | Checkerboard square A of the <img> alpha canvas — color-mix of --color-bg/--color-text (52/48); applied via --media-alpha-canvas (16px period) |
| --color-media-alpha-bg-2 | ≈#6b6b6b | ≈#7a7e85 | Checkerboard square B (42/58) — both squares stay ≥3:1 against white and black; opaque images cover the canvas |
| --color-sidebar-bg | #e9eaf2 | #2c343a | Sidebar solid composite (row masks / overlays). The visible sidebar surface is the frost pair --color-sidebar-glass + --sidebar-wash blurred by --p-sidebar-backdrop |
| --color-accent | #1783ff | #58a6ff | Primary action / link / focus |
| --color-success | #0e7a38 | #3fb950 | Success / pass |
| --color-warning | #a9610a | #d29922 | Warning / pending |
| --color-danger | #c0392b | #f85149 | Danger / error / abort |
The four surface layers each have a role — choose by "raised layer / default flat layer / sunken layer / page background", and avoid treating --p-surface-raised as a universal background.
| Token | Light | Dark | Usage |
|---|---|---|---|
| --p-surface-raised | #ffffff | #292929 | Raised card / dialog / input (raised layer) |
| --p-surface | #fafbfc | #1f1f1f | Panel / sidebar / card head (default flat layer) |
| --p-surface-sunken | #f3f5f8 | #121212 | Code block / inline input / recessed area (sunken layer) |
| --p-bg | #ffffff | #121212 | Page background |
All focusable controls (button, input, link, menu item, switch, checkbox) use the focus-ring token uniformly; do not hand-write a box-shadow focus ring.
| Token | Value | Usage |
|---|---|---|
| --p-focus-ring | 0 0 0 3px var(--p-accent-soft) | Default focus ring (link, menu item, switch, checkbox) |
| --p-focus-ring-strong | 0 0 0 3px var(--p-accent-soft), 0 0 0 1px var(--p-accent) | Strong focus ring (button, primary action) |
The text-selection color uses --p-selection uniformly (light rgba(23,131,255,.18) / dark rgba(88,166,255,.32)), applied by the global ::selection rule; do not set a separate highlight background.
All disabled controls use opacity:.5 + cursor:not-allowed uniformly; do not separately grey out or recolor.
Pythinker Web uses two font families: --font-ui (UI and body, Inter first) and --font-mono (code and monospace). Components always reference the variables; do not hard-code font names.
Body and UI use self-hosted Inter as the primary face. CJK and platform system UI fonts sit late in the fallback chain so Latin glyphs resolve to Inter while Chinese text can fall through to native CJK fonts:
--font-ui: "Inter Variable", "Inter", "Helvetica Neue", Arial,
"PingFang SC", "Microsoft YaHei", "Noto Sans SC",
-apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Ubuntu, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";Code, tool names, line numbers, diffs, etc. use JetBrains Mono (a self-hosted variable font), falling back to the system monospace:
--font-mono: "JetBrains Mono Variable", "JetBrains Mono", - ui-monospace, "SF Mono", Menlo, Consolas, monospace;
| Font | Source | Bundled | Usage |
|---|---|---|---|
| JetBrains Mono | @fontsource-variable/jetbrains-mono | ✓ self-hosted | monospace / code (--font-mono) |
| Inter | @fontsource-variable/inter/opsz.css + opsz-italic.css | ✓ self-hosted | UI / body / display (--font-ui, --font-display), wght 100-900, opsz 14-32, normal + italic |
| System UI / CJK fonts | operating system | — | late fallback for UI / body, not bundled |
var(--font-ui) / var(--font-mono); do not hard-code font names like 'Inter' / 'JetBrains Mono'.--font-ui (Inter first); code / monospace use --font-mono (JetBrains Mono).font-optical-sizing: auto is enabled globally.--font-ui fallback chain, after Inter and Western fallbacks.The user font-size preference sets data-font-scale on the root element, which the CSS uses to pick --base-font (12 / 14 / 16 / 18px). Compact UI chrome and the sidebar follow it through --ui-font-size, while chat reading surfaces derive one readable step above it through --content-font-size.
The fixed product type tokens still define component defaults: UI controls / buttons / forms use --text-base (14px); reading body — including chat Markdown, message bubbles, etc. stays one step larger than compact chrome for readability; the sidebar session list follows that same readable step while keeping list density. Drop stray font-weight: 650 / 750; converge on two weights, 400 / 500 (regular / emphasis).
| Token | Value | Usage |
|---|---|---|
| --font-ui | "Inter Variable", "Inter", "Helvetica Neue", Arial… | UI & body (Inter first) |
| --font-mono | JetBrains Mono… | code, tool names, line numbers, diffs |
| --base-font | 14px (data-font-scale: 12/14/16/18) | root setting that drives UI, reading body, and sidebar font sizes |
| --content-font-size | calc(base + 1px) | chat Markdown, message bubbles, composer |
| --leading-tight/normal/relaxed | 1.25 / 1.5 / 1.7 | headings / UI / long text |
| --weight-regular/medium | 400 / 500 | body / emphasis |
Icons use three size tokens uniformly. The global .p-ic default is 16px (--p-ic-md); components pick as needed, and random pixel sizes are forbidden.
| Token | Value | Usage |
|---|---|---|
| --p-ic-sm | 14px | small button, badge, menu item, inline link icon |
| --p-ic-md | 16px | default (button, icon button, toolbar) |
| --p-ic-lg | 20px | Toast status icon, empty-state illustration |
Icons always come from the centralized registry lib/icons.ts: in templates use the <Icon name size /> component (components/ui/Icon.vue); for v-html contexts (such as a tool glyph) use iconSvg(name, size). Do not hand-write <svg> — the scripts/check-style.mjs icon-from-registry rule flags stray SVGs. Icons come from Remix Icon (Apache-2.0), uniformly in a fill style (fill="currentColor", 24×24 source grid), with color following the text; size uses the three tokens below. The registry is bundled on demand by unplugin-icons at build time from @iconify-json/ri — only icons imported in lib/icons.ts end up in the production bundle, fully offline and tree-shaken. The whole site uses only this one icon family; do not mix in other icon libraries, and never hand-write SVG paths. When an icon is missing, add it to the registry — two static ~icons/ri/* imports (component + ?raw string) plus one entry in ICONS in lib/icons.ts; the import names (e.g. RiFolderOpenLine / RawFolderOpenLine) show the ri: icon id. Do not draw it in a component.
Do not use emoji as functional icons. The Pythinker robot mascot is a brand asset and is not part of this icon system.
A few special graphics are not in the registry; each has a dedicated component maintained in one place, and must not be copied by hand: <ContextRing :pct /> (the Composer context progress ring, data-driven), <AuthStateIcon kind /> (the success / expired / error colored illustrations in the login flow), <Spinner /> (loading state). Status dots (such as in the Provider list) always use CSS dots (border-radius:50%), not SVG. The scripts/check-style.mjs icon-from-registry rule exempts the above and the brand mark; all other hand-written <svg> is flagged.
A 4px base grid. All spacing, gaps, and padding inside and outside components come from this scale — no arbitrary pixels.
High-density navigation lists like the sidebar share one rhythm, all on the 4px grid: in-row vertical padding --space-1 (4px), no margin between rows (the hover pill provides the separation); section gap (between logo / search / action buttons / group title / list) uniformly --space-2 (8px); between groups --space-2; the brand header is slightly looser at the top (--space-3). When building similar lists, reuse this scale — do not hand-write 1/6/7/10px.
Merge the existing 14 values into the nearest of 7 scale steps. Rule: the component type determines the radius, not the author's feel.
| Token | Value | Usage | Merged from |
|---|---|---|---|
| --radius-xs | 4px | small badge, inline tag | 2/3/4px → |
| --radius-sm | 6px | small button, icon button, menu item | 5/6px → |
| --radius-md | 8px | button, input, badge, card | 7/8/9px → |
| --radius-lg | 12px | dropdown panel | 10/12px → |
| --radius-xl | 16px | dialog, bottom Sheet, Composer | 14/16px → |
| --radius-2xl | 20px | accent container / large panel | 20px |
| --radius-full | 999px | pill badge, avatar, send button | 999px / 50% |
Shadows express only "elevation", never decoration (no colored glow). z-index is unified into a scale, eradicating 9999-style one-upping.
| Z-index Token | Value | Usage |
|---|---|---|
| --z-base | 0 | normal flow |
| --z-sticky | 100 | sticky header / sidebar |
| --z-dropdown | 200 | dropdown menu / tooltip |
| --z-overlay | 300 | overlay / bottom Sheet |
| --z-modal | 400 | dialog |
| --z-modal-dropdown | 500 | modal dropdown / nested confirmation |
| --z-toast | 600 | toast |
| --z-max | 9999 | reserved: only this tier for extreme fallback |
| Token | Value | Usage |
|---|---|---|
| --ease-out | cubic-bezier(0.16, 1, 0.3, 1) | enter, hover, expand |
| --ease-in-out | cubic-bezier(0.4, 0, 0.2, 1) | panel width, layout changes |
| --duration-fast | 120ms | press, focus |
| --duration-base | 160ms | hover, show/hide |
| --duration-slow | 260ms | dialog, Sheet, layout |
@media (prefers-reduced-motion: reduce), all animation and transition durations drop to about 0.001ms (effectively off), and the Braille thinking indicator stops pulsing. Components should not check this individually; it is handled uniformly in the global styles. Layout sizes and responsive breakpoints are tokenized too: sidebar width, content reading-column width, and two global breakpoints. Components should not hard-code pixels.
| Token | Value | Usage |
|---|---|---|
| --p-sidebar-w | 264px | left session sidebar width |
| --p-content-max | 760px | chat reading-column max width (regular chat prose) |
| --p-content-wide | 920px | wide content (settings / panel) |
| --p-table-max | 1040px | desktop wide-table max width (see §04) |
| --p-table-cell-max | 700px | max width of a single table column; longer cell content wraps (see §04) |
| --p-bp-sm | 640px | mobile / desktop boundary |
| --p-bp-md | 980px | narrow / wide screen boundary |
Component primitives are the "smallest correct units" of the site UI. Each primitive exposes variants along only two dimensions — variant / size — with appearance driven by tokens, so it naturally supports light / dark mode and customizable theme colors.
| Scenario | Use |
|---|---|
| Primary action (submit / confirm) | Button variant=primary |
| Secondary action / cancel | Button secondary / ghost |
| Destructive action (delete / abort) | Button danger / danger-soft |
| Status marker | Badge |
| Toolbar filter / model switch | Pill |
| 2–4 mutually exclusive options | SegmentedControl |
| Top tabs | Tabs |
| Switch / multi-select | Switch / Checkbox |
| Floating content card / list action menu | Card / Menu |
| Inline notice / global toast | Banner / Toast |
| Dialog / confirmation · bottom panel (mobile) | Dialog / Sheet |
4 semantic variants × 3 sizes. The primary action primary takes its color from the current theme color (§05 can switch between the blue and black families). Radius uses --radius-md uniformly (small size --radius-sm), weight 600, with a visible focus ring.
<Button variant="primary" size="md" :loading="submitting">Save</Button> + ui-monospace, "SF Mono", Menlo, Consolas, monospace;
| Font | Source | Bundled | Usage |
|---|---|---|---|
| JetBrains Mono | @fontsource-variable/jetbrains-mono | ✓ self-hosted | monospace / code (--font-mono) |
| Inter | @fontsource-variable/inter/opsz.css + opsz-italic.css | ✓ self-hosted | UI / body / display (--font-ui, --font-display), wght 100-900, opsz 14-32, normal + italic |
| System UI / CJK fonts | operating system | — | late fallback for UI / body, not bundled |
var(--font-ui) / var(--font-mono); do not hard-code font names like 'Inter' / 'JetBrains Mono'.--font-ui (Inter first); code / monospace use --font-mono (JetBrains Mono).font-optical-sizing: auto is enabled globally.--font-ui fallback chain, after Inter and Western fallbacks.The user font-size preference sets data-font-scale on the root element, which the CSS uses to pick --base-font (12 / 14 / 16 / 18px). Compact UI chrome and the sidebar follow it through --ui-font-size, while chat reading surfaces derive one readable step above it through --content-font-size.
The fixed product type tokens still define component defaults: UI controls / buttons / forms use --text-base (14px); reading body — including chat Markdown, message bubbles, etc. stays one step larger than compact chrome for readability; the sidebar session list follows that same readable step while keeping list density. Drop stray font-weight: 650 / 750; converge on two weights, 400 / 500 (regular / emphasis).
| Token | Value | Usage |
|---|---|---|
| --font-ui | "Inter Variable", "Inter", "Helvetica Neue", Arial… | UI & body (Inter first) |
| --font-mono | JetBrains Mono… | code, tool names, line numbers, diffs |
| --base-font | 14px (data-font-scale: 12/14/16/18) | root setting that drives UI, reading body, and sidebar font sizes |
| --content-font-size | calc(base + 1px) | chat Markdown, message bubbles, composer |
| --leading-tight/normal/relaxed | 1.25 / 1.5 / 1.7 | headings / UI / long text |
| --weight-regular/medium | 400 / 500 | body / emphasis |
Icons use three size tokens uniformly. The global .p-ic default is 16px (--p-ic-md); components pick as needed, and random pixel sizes are forbidden.
| Token | Value | Usage |
|---|---|---|
| --p-ic-sm | 14px | small button, badge, menu item, inline link icon |
| --p-ic-md | 16px | default (button, icon button, toolbar) |
| --p-ic-lg | 20px | Toast status icon, empty-state illustration |
Icons always come from the centralized registry lib/icons.ts: in templates use the <Icon name size /> component (components/ui/Icon.vue); for v-html contexts (such as a tool glyph) use iconSvg(name, size). Do not hand-write <svg> — the scripts/check-style.mjs icon-from-registry rule flags stray SVGs. Icons come from Remix Icon (Apache-2.0), uniformly in a fill style (fill="currentColor", 24×24 source grid), with color following the text; size uses the three tokens below. The registry is bundled on demand by unplugin-icons at build time from @iconify-json/ri — only icons imported in lib/icons.ts end up in the production bundle, fully offline and tree-shaken. The whole site uses only this one icon family; do not mix in other icon libraries, and never hand-write SVG paths. When an icon is missing, add it to the registry — two static ~icons/ri/* imports (component + ?raw string) plus one entry in ICONS in lib/icons.ts; the import names (e.g. RiFolderOpenLine / RawFolderOpenLine) show the ri: icon id. Do not draw it in a component.
Do not use emoji as functional icons. The Pythinker robot mascot is a brand asset and is not part of this icon system.
A few special graphics are not in the registry; each has a dedicated component maintained in one place, and must not be copied by hand: <ContextRing :pct /> (the Composer context progress ring, data-driven), <AuthStateIcon kind /> (the success / expired / error colored illustrations in the login flow), <Spinner /> (loading state). Status dots (such as in the Provider list) always use CSS dots (border-radius:50%), not SVG. The scripts/check-style.mjs icon-from-registry rule exempts the above and the brand mark; all other hand-written <svg> is flagged.
A 4px base grid. All spacing, gaps, and padding inside and outside components come from this scale — no arbitrary pixels.
High-density navigation lists like the sidebar share one rhythm, all on the 4px grid: in-row vertical padding --space-1 (4px), no margin between rows (the hover pill provides the separation); section gap (between logo / search / action buttons / group title / list) uniformly --space-2 (8px); between groups --space-2; the brand header is slightly looser at the top (--space-3). When building similar lists, reuse this scale — do not hand-write 1/6/7/10px.
Merge the existing 14 values into the nearest of 7 scale steps. Rule: the component type determines the radius, not the author's feel.
| Token | Value | Usage | Merged from |
|---|---|---|---|
| --radius-xs | 4px | small badge, inline tag | 2/3/4px → |
| --radius-sm | 6px | small button, icon button, menu item | 5/6px → |
| --radius-md | 8px | button, input, badge, card | 7/8/9px → |
| --radius-lg | 12px | dropdown panel | 10/12px → |
| --radius-xl | 16px | dialog, bottom Sheet, Composer | 14/16px → |
| --radius-2xl | 20px | accent container / large panel | 20px |
| --radius-full | 999px | pill badge, avatar, send button | 999px / 50% |
Shadows express only "elevation", never decoration (no colored glow). z-index is unified into a scale, eradicating 9999-style one-upping.
| Z-index Token | Value | Usage |
|---|---|---|
| --z-base | 0 | normal flow |
| --z-sticky | 100 | sticky header / sidebar |
| --z-dropdown | 200 | dropdown menu / tooltip |
| --z-overlay | 300 | overlay / bottom Sheet |
| --z-modal | 400 | dialog |
| --z-modal-dropdown | 500 | modal dropdown / nested confirmation |
| --z-toast | 600 | toast |
| --z-max | 9999 | reserved: only this tier for extreme fallback |
| Token | Value | Usage |
|---|---|---|
| --ease-out | cubic-bezier(0.16, 1, 0.3, 1) | enter, hover, expand |
| --ease-in-out | cubic-bezier(0.4, 0, 0.2, 1) | panel width, layout changes |
| --duration-fast | 120ms | press, focus |
| --duration-base | 160ms | hover, show/hide |
| --duration-slow | 260ms | dialog, Sheet, layout |
@media (prefers-reduced-motion: reduce), all animation and transition durations drop to about 0.001ms (effectively off), and the Braille thinking indicator stops pulsing. Components should not check this individually; it is handled uniformly in the global styles. Layout sizes and responsive breakpoints are tokenized too: sidebar width, content reading-column width, and two global breakpoints. Components should not hard-code pixels.
| Token | Value | Usage |
|---|---|---|
| --p-sidebar-w | 264px | left session sidebar width |
| --p-content-max | 760px | chat reading-column max width (regular chat prose) |
| --p-content-wide | 920px | wide content (settings / panel) |
| --p-table-max | 1040px | desktop wide-table max width (see §04) |
| --p-table-cell-max | 700px | max width of a single table column; longer cell content wraps (see §04) |
| --p-bp-sm | 640px | mobile / desktop boundary |
| --p-bp-md | 980px | narrow / wide screen boundary |
Component primitives are the "smallest correct units" of the site UI. Each primitive exposes variants along only two dimensions — variant / size — with appearance driven by tokens, so it naturally supports light / dark mode and customizable theme colors.
| Scenario | Use |
|---|---|
| Primary action (submit / confirm) | Button variant=primary |
| Secondary action / cancel | Button secondary / ghost |
| Destructive action (delete / abort) | Button danger / danger-soft |
| Status marker | Badge |
| Toolbar filter / model switch | Pill |
| 2–4 mutually exclusive options | SegmentedControl |
| Top tabs | Tabs |
| Switch / multi-select | Switch / Checkbox |
| Floating content card / list action menu | Card / Menu |
| Inline notice / global toast | Banner / Toast |
| Dialog / confirmation · bottom panel (mobile) | Dialog / Sheet |
4 semantic variants × 3 sizes. The primary action primary takes its color from the current theme color (§05 can switch between the blue and black families). Radius uses --radius-md uniformly (small size --radius-sm), weight 600, with a visible focus ring.
<Button variant="primary" size="md" :loading="submitting">Save</Button> // variant: primary | secondary | ghost | danger | danger-soft // size: sm | md | lg
Unified into three sizes — 26 / 32 / 44px — with a light-grey hover background and a visible focus ring. Replaces the ad-hoc icon + click areas scattered across components today.
sm 26 / md 32; on touch devices the tap target should be ≥ 44px, so use lg 44px, satisfying the §01 accessibility principle (the mobile three-piece set uses lg). Collapsed into two kinds: Badge (status badge, with an optional status dot) and Pill (the clickable pill in the composer toolbar). Radius, font size, and padding are all unified.
Kbd renders a shortcut as keycaps — one block per key, never inline text like (⌘K). Caps are 18px tall (Badge sm rhythm): sunken surface, 1px border with a 2px bottom edge, 11px UI font, muted text. Typical placement: pushed to the row's trailing edge, opposite the label (e.g. the sidebar search row).
All cards across the site share one shell: flat, 1px border, --radius-md radius, no shadow. The structure is split into three parts — head / body / foot. Cards differ only in the head — in two tiers by visual weight, while the shell stays consistent:
accent-soft / warning-soft) to stand out from the message stream, signaling that the user must step in. The shell is exactly the same as the operation card.border-top hairlines, rather than each row being its own card.Unified 38px height (32px small), --radius-md radius, --color-surface-raised background, and a unified blue focus ring (0 0 0 3px accent-soft).
Inline code, code blocks, and diffs all use the monospace font (--p-font-mono). Code blocks have a filename title bar and a copy button. Diffs use + / - row colors to express additions and deletions — additions use a success light background, deletions use a danger light background, with no gradients.
jwt.verify(token) to verify the signature, returning 401 on failure.import { verify } from './jwt';
export function auth(token: string) {
return verify(token, process.env.JWT_SECRET!);
- }One dialog primitive replaces 6 hand-written implementations: unified --radius-xl radius, --shadow-xl shadow, 20px head padding, right-aligned footer actions, and an IconButton close button.
md 440 / lg 640 / xl 760 (--p-content-max) — chosen by content weight. Height comes in two kinds: auto (default, grows with content up to max-height) and fixed (constant height min(680px, 100vh - 64px), with overflow scrolled inside the body). Content / multi-tab dialogs (settings, model picker, provider manager, folder browser) always use fixed so the frame size stays constant and doesn't jump when switching tabs or content length; short confirmation dialogs keep auto. Unified information architecture: status icon + title + description. The status color appears only on the icon, avoiding large colored areas that create visual noise.
Loaders fall into two categories by scenario — do not mix them:
Inline text link: the default is the accent color with no underline; on hover it shows an underline and darkens. The .muted variant uses the secondary text color. Used for in-text jumps, external links, "view all", and other lightweight actions.
Dropdown menu panel: raised surface + border + light shadow (--shadow-sm, flat-leaning). Menu items support icons, the current (active) state, the danger state, and the disabled state, with separators grouping items. On touch / mobile, use lg (≥44px row height) for menu items.
Mutually exclusive short option groups, commonly used for 2–4 option switches such as "light / dark / follow system". The current item is highlighted with a raised surface + subtle shadow.
Tabs with a bottom hairline, used for grouping and switching sibling content. The current tab is marked with accent text + an accent underline.
A two-state switch for settings that take effect immediately. 36×20 track with full radius, 16px knob; when on, the track turns accent and the knob slides right, with the transition driven by tokens.
A 17×17 checkbox. When checked it fills with the accent color and shows a white tick (inline SVG). Often paired with a text label.
A 32px default avatar with md radius; .sm is 24px. Can hold an initial or an icon; falls back to this placeholder when there is no image.
A centered placeholder for empty lists / panels: a 48px faint icon + title + hint, avoiding blank pages.
A 1px horizontal divider (--p-line); .p-divider-v is the vertical divider, used between inline elements.
A CSS-only hover hint, wrapped in .p-tip. Inverted background (--p-text / --p-bg), single line, no wrapping — carries only short notes.
An inline notice bar placed at the top of a content area. Three states — .info / .warning / .danger — each with a matching 18px icon.
A mobile bottom slide-up panel: xl top radius + drag handle, xl shadow. At ≤640px, dialogs become bottom-anchored Sheets.
A placeholder for loading content, using a breathing opacity animation (no gradients), following the no-gradient-text rule. Composed into titles / text lines / avatars.
An inline combination of "primary action + command text + copy", sitting between a button and a code block — used for install / onboarding / one-click execution. The primary action reuses Button primary; the command area uses a mono light-grey background.
The application top bar. Solid by default; the .frost variant is translucent + background blur, used only for sticky navigation bars, and — together with the Sidebar frost layer (see §05/§06) — is a sanctioned exception to the no-glassmorphism rule (see §06).
A small group title for sidebar lists, used to section the content below (such as Workspaces in the sidebar). Spec: 13px / 700 / uppercase / letter-spacing .08em, color --color-fg-faint; left-aligned to the row's starting padding (--sb-pad-x), keeping the same indent as the group rows below. For scripts without case (such as Chinese), text-transform:uppercase simply has no effect — no special handling needed.
The message stream is the core of Pythinker Web. The goal of the overhaul: have the 6 card types (Agent / Tool / Question / Approval / DynamicWorkflow / Todo) share one card skeleton, distinguished only by the head icon and semantic color; and collapse the Composer into a single rounded container.
I looked at the structure of src/auth; it is currently based on a session cookie. The scope of the change is below — once you confirm, I'll start.
src/auth/middleware.ts, 42 lines changed. Allow?The desktop outline is a quiet vertical stack of equal 16 × 2px horizontal lines on a 10px rhythm, centered at the chat pane's left edge beside the app sidebar. Each line represents one loaded user prompt; assistant messages and tool calls never become navigation items. The active line is white and the other lines are muted, so the current prompt is clear without a node timeline.
| State | Visual | Behavior |
|---|---|---|
| default | Equal short prompt lines centered in one compact stack | The card and prompt labels stay absent while the line index is collapsed. |
| hover / focus-within | Prompt-only rows on an opaque raised surface with a menu border and shadow | The lines disappear. Rows use the shared hover surface; keyboard focus uses --p-focus-ring. |
| active | White line when collapsed; selected row and accent label when expanded | The button carries aria-current="location"; the outline keeps it visible in long threads. |
| keyboard | One roving tab stop | Up/Down move one prompt; Home/End move to the first/last prompt; Enter activates the focused button. |
| constrained | Centered internal scroll with a reserved reading inset | The expanded list stays inside the middle half of the viewport and above the measured composer dock. Narrow desktop panes reserve 96px at the reading column's left edge so the collapsed lines remain visible. Hide on mobile, while loading, below two prompts, when the collapsed stack cannot fit, or while a wide table covers the anchor. |
Wide markdown tables (desktop): regular chat prose stays within the 760px reading column (--p-content-max). On desktop a wide table may grow naturally with its content up to 1040px (--p-table-max), centred within the conversation pane; beyond that the excess scrolls horizontally inside the table's own wrapper — the page and the chat area never scroll sideways. A single column is capped at 700px (--p-table-cell-max), so long cell content wraps inside the cell instead of stretching the table. The conversation outline (TOC) stays at the chat pane's left edge beside the app sidebar; when a table grows across that rail, the TOC is hidden temporarily and returns as soon as the table leaves, without touching the user's TOC setting. On mobile a table never breaks out of the reading column.
High-frequency calls like read_file / bash / grep are "operational noise" — if each one took a full card, parallel triggers would quickly drown out the conversation. The new strategy splits tool calls into three tiers by visual weight, pushing them as light as possible:
src/auth/middleware.ts, 42 lines changed.N tool calls · status).Question (needs an answer) and Approval (needs authorization) — they genuinely need the user's attention.Unified into a single rounded container: --radius-xl, with the whole border turning blue + a soft focus ring on focus. Toolbar controls all use the Pill / IconButton primitives, and the send button is a 32px circle.
--radius-xl · 16px) and one height; toolbar controls all use the Pill / IconButton primitives, and the send button is a 32px circle — it no longer drifts with the theme. See §02 --p-bp-sm for the breakpoint. This section only gives mobile-adaptation pointers for the chat interface; a full mobile mockup is out of scope for this spec.
Pythinker Web uses one unified theme: the same components, fonts, radii, shadows, and surfaces — "reskinning" only changes colors. Colors are collapsed into 4 seed tokens — two theme colors + one light surface + one dark surface; the neutrals and accent are derived from them, and the semantic status colors (success / warning / danger) ship as independent palettes paired with the seeds, one set each for light / dark.
Day-to-day customization only needs these 4 seeds; the whole site's neutrals and accent change with them:
Within one theme, the theme color (accent) can switch among several color families. Two parallel families are provided today: blue (default, brand blue, carrying semantic emphasis) and black (neutral black, carrying the most restrained strong action). Both share the same components, fonts, radii, and surfaces — switching families only swaps the accent token set, with zero structural change; more families (green / purple, etc.) can be added later. The two cards below show the same primary button under the two families.
Driven by the two surfaces --surface-light / --surface-dark: whichever surface is current derives the corresponding foreground, border, shadow, and status colors. Switching light / dark simply swaps between these two sets of derived tokens, with zero structural change.
Anti-pattern rules that all UI code must follow. These rules are also the basis of the check-style detection script, one-to-one with a warning.
| Rule ID | What it detects | Action |
|---|---|---|
| no-gradient-text | gradient text / gradient background (Sidebar frost wash excepted: --color-sidebar-wash paints the vibrancy tint on .side::before) | Forbidden |
| no-glassmorphism | backdrop-filter: blur (TopBar sticky nav bar and the Sidebar frost layer are the sanctioned exceptions) | TopBar / Sidebar exempt |
| no-color-glow | colored / large-radius box-shadow glow | Forbidden |
| no-emoji-icon | using emoji as a functional icon | Forbidden |
| no-hardcoded-hex | unregistered hex color inside a component <style> | Warning |
| no-hardcoded-font | hard-coded font-family in a component (e.g. 'Inter') instead of var(--font-ui) | Warning |
| radius-from-scale | radius value not in {4,6,8,12,16,20,999} | Warning |
| z-from-scale | z-index using an unregistered large number | Warning |
| weight-from-scale | font-weight not in {400,500} | Warning |
Every interactive primitive should define the following states where applicable; missing ones are flagged by the style rules. focus-visible always uses --p-focus-ring (appears only on keyboard focus, see §08); disabled is uniformly opacity:.5.
| State | Button | Input | Card | Menu item | Switch |
|---|---|---|---|---|---|
| default | ✓ | ✓ | ✓ | ✓ | ✓ |
| hover | ✓ | ✓ | ✓ | ✓ | — |
| active / pressed | ✓ | — | — | — | — |
| focus-visible | ✓ | ✓ | — | — | ✓ |
| disabled | ✓ | ✓ | — | ✓ | — |
| loading | ✓ | — | — | — | — |
| selected / active | — | — | — | ✓ | ✓ |
| error | — | ✓ | — | — | — |
| readonly | — | ✓ | — | — | — |
⣷ Braille mark is a brand signature of Pythinker Web, used only in the chat state of "message sent, waiting for the Agent's first response", and rendered uniformly by the ThinkingIndicator component. All other loading states use the plain Spinner. backdrop-filter: blur is banned site-wide, with two sanctioned exceptions: the .frost variant of TopBar (sticky navigation bars, readable over scrolling content) and the Sidebar frost layer (.side::before — translucent glass + wash + backdrop blur, applied on the pseudo-layer so the sidebar's non-teleported fixed menus keep their viewport anchoring; same recipe extends to the Onboarding hero). No other component (card, dialog, Toast, panel) may use glassmorphism; violations are flagged under no-glassmorphism. The structural spec for the app shell (three-column grid + right preview panel) and the left session sidebar. These are business-agnostic "skeletons" — components, fonts, radii, and surfaces are reused from §02 / §03, but layout and alignment have their own conventions.
On desktop it is a single-row 5-track grid: the sidebar and the right panel each occupy a permanent auto track, with the conversation column in the middle; two 0-width tracks are for the ResizeHandles.
grid-template-columns: auto 0 minmax(0, 1fr) 0 auto; + }
One dialog primitive replaces 6 hand-written implementations: unified --radius-xl radius, --shadow-xl shadow, 20px head padding, right-aligned footer actions, and an IconButton close button.
md 440 / lg 640 / xl 760 (--p-content-max) — chosen by content weight. Height comes in two kinds: auto (default, grows with content up to max-height) and fixed (constant height min(680px, 100vh - 64px), with overflow scrolled inside the body). Content / multi-tab dialogs (settings, model picker, provider manager, folder browser) always use fixed so the frame size stays constant and doesn't jump when switching tabs or content length; short confirmation dialogs keep auto. Unified information architecture: status icon + title + description. The status color appears only on the icon, avoiding large colored areas that create visual noise.
Loaders fall into two categories by scenario — do not mix them:
Inline text link: the default is the accent color with no underline; on hover it shows an underline and darkens. The .muted variant uses the secondary text color. Used for in-text jumps, external links, "view all", and other lightweight actions.
Dropdown menu panel: raised surface + border + light shadow (--shadow-sm, flat-leaning). Menu items support icons, the current (active) state, the danger state, and the disabled state, with separators grouping items. On touch / mobile, use lg (≥44px row height) for menu items.
Mutually exclusive short option groups, commonly used for 2–4 option switches such as "light / dark / follow system". The current item is highlighted with a raised surface + subtle shadow.
Tabs with a bottom hairline, used for grouping and switching sibling content. The current tab is marked with accent text + an accent underline.
A two-state switch for settings that take effect immediately. 36×20 track with full radius, 16px knob; when on, the track turns accent and the knob slides right, with the transition driven by tokens.
A 17×17 checkbox. When checked it fills with the accent color and shows a white tick (inline SVG). Often paired with a text label.
A 32px default avatar with md radius; .sm is 24px. Can hold an initial or an icon; falls back to this placeholder when there is no image.
A centered placeholder for empty lists / panels: a 48px faint icon + title + hint, avoiding blank pages.
A 1px horizontal divider (--p-line); .p-divider-v is the vertical divider, used between inline elements.
A CSS-only hover hint, wrapped in .p-tip. Inverted background (--p-text / --p-bg), single line, no wrapping — carries only short notes.
An inline notice bar placed at the top of a content area. Three states — .info / .warning / .danger — each with a matching 18px icon.
A mobile bottom slide-up panel: xl top radius + drag handle, xl shadow. At ≤640px, dialogs become bottom-anchored Sheets.
A placeholder for loading content, using a breathing opacity animation (no gradients), following the no-gradient-text rule. Composed into titles / text lines / avatars.
An inline combination of "primary action + command text + copy", sitting between a button and a code block — used for install / onboarding / one-click execution. The primary action reuses Button primary; the command area uses a mono light-grey background.
The application top bar. Solid by default; the .frost variant is translucent + background blur, used only for sticky navigation bars, and — together with the Sidebar frost layer (see §05/§06) — is a sanctioned exception to the no-glassmorphism rule (see §06).
A small group title for sidebar lists, used to section the content below (such as Workspaces in the sidebar). Spec: 13px / 700 / uppercase / letter-spacing .08em, color --color-fg-faint; left-aligned to the row's starting padding (--sb-pad-x), keeping the same indent as the group rows below. For scripts without case (such as Chinese), text-transform:uppercase simply has no effect — no special handling needed.
The message stream is the core of Pythinker Web. The goal of the overhaul: have the 6 card types (Agent / Tool / Question / Approval / DynamicWorkflow / Todo) share one card skeleton, distinguished only by the head icon and semantic color; and collapse the Composer into a single rounded container.
I looked at the structure of src/auth; it is currently based on a session cookie. The scope of the change is below — once you confirm, I'll start.
src/auth/middleware.ts, 42 lines changed. Allow?The desktop outline is a quiet vertical stack of equal 16 × 2px horizontal lines on a 10px rhythm, centered at the chat pane's left edge beside the app sidebar. Each line represents one loaded user prompt; assistant messages and tool calls never become navigation items. The active line is white and the other lines are muted, so the current prompt is clear without a node timeline.
| State | Visual | Behavior |
|---|---|---|
| default | Equal short prompt lines centered in one compact stack | The card and prompt labels stay absent while the line index is collapsed. |
| hover / focus-within | Prompt-only rows on an opaque raised surface with a menu border and shadow | The lines disappear. Rows use the shared hover surface; keyboard focus uses --p-focus-ring. |
| active | White line when collapsed; selected row and accent label when expanded | The button carries aria-current="location"; the outline keeps it visible in long threads. |
| keyboard | One roving tab stop | Up/Down move one prompt; Home/End move to the first/last prompt; Enter activates the focused button. |
| constrained | Centered internal scroll with a reserved reading inset | The expanded list stays inside the middle half of the viewport and above the measured composer dock. Narrow desktop panes reserve 96px at the reading column's left edge so the collapsed lines remain visible. Hide on mobile, while loading, below two prompts, when the collapsed stack cannot fit, or while a wide table covers the anchor. |
Wide markdown tables (desktop): regular chat prose stays within the 760px reading column (--p-content-max). On desktop a wide table may grow naturally with its content up to 1040px (--p-table-max), centred within the conversation pane; beyond that the excess scrolls horizontally inside the table's own wrapper — the page and the chat area never scroll sideways. A single column is capped at 700px (--p-table-cell-max), so long cell content wraps inside the cell instead of stretching the table. The conversation outline (TOC) stays at the chat pane's left edge beside the app sidebar; when a table grows across that rail, the TOC is hidden temporarily and returns as soon as the table leaves, without touching the user's TOC setting. On mobile a table never breaks out of the reading column.
High-frequency calls like read_file / bash / grep are "operational noise" — if each one took a full card, parallel triggers would quickly drown out the conversation. The new strategy splits tool calls into three tiers by visual weight, pushing them as light as possible:
src/auth/middleware.ts, 42 lines changed.N tool calls · status).Question (needs an answer) and Approval (needs authorization) — they genuinely need the user's attention.Unified into a single rounded container: --radius-xl, with the whole border turning blue + a soft focus ring on focus. Toolbar controls all use the Pill / IconButton primitives, and the send button is a 32px circle.
--radius-xl · 16px) and one height; toolbar controls all use the Pill / IconButton primitives, and the send button is a 32px circle — it no longer drifts with the theme. See §02 --p-bp-sm for the breakpoint. This section only gives mobile-adaptation pointers for the chat interface; a full mobile mockup is out of scope for this spec.
Pythinker Web uses one unified theme: the same components, fonts, radii, shadows, and surfaces — "reskinning" only changes colors. Colors are collapsed into 4 seed tokens — two theme colors + one light surface + one dark surface; the neutrals and accent are derived from them, and the semantic status colors (success / warning / danger) ship as independent palettes paired with the seeds, one set each for light / dark.
Day-to-day customization only needs these 4 seeds; the whole site's neutrals and accent change with them:
Within one theme, the theme color (accent) can switch among several color families. Two parallel families are provided today: blue (default, brand blue, carrying semantic emphasis) and black (neutral black, carrying the most restrained strong action). Both share the same components, fonts, radii, and surfaces — switching families only swaps the accent token set, with zero structural change; more families (green / purple, etc.) can be added later. The two cards below show the same primary button under the two families.
Driven by the two surfaces --surface-light / --surface-dark: whichever surface is current derives the corresponding foreground, border, shadow, and status colors. Switching light / dark simply swaps between these two sets of derived tokens, with zero structural change.
Anti-pattern rules that all UI code must follow. These rules are also the basis of the check-style detection script, one-to-one with a warning.
| Rule ID | What it detects | Action |
|---|---|---|
| no-gradient-text | gradient text / gradient background (Sidebar frost wash excepted: --color-sidebar-wash paints the vibrancy tint on .side::before) | Forbidden |
| no-glassmorphism | backdrop-filter: blur (TopBar sticky nav bar and the Sidebar frost layer are the sanctioned exceptions) | TopBar / Sidebar exempt |
| no-color-glow | colored / large-radius box-shadow glow | Forbidden |
| no-emoji-icon | using emoji as a functional icon | Forbidden |
| no-hardcoded-hex | unregistered hex color inside a component <style> | Warning |
| no-hardcoded-font | hard-coded font-family in a component (e.g. 'Inter') instead of var(--font-ui) | Warning |
| radius-from-scale | radius value not in {4,6,8,12,16,20,999} | Warning |
| z-from-scale | z-index using an unregistered large number | Warning |
| weight-from-scale | font-weight not in {400,500} | Warning |
Every interactive primitive should define the following states where applicable; missing ones are flagged by the style rules. focus-visible always uses --p-focus-ring (appears only on keyboard focus, see §08); disabled is uniformly opacity:.5.
| State | Button | Input | Card | Menu item | Switch |
|---|---|---|---|---|---|
| default | ✓ | ✓ | ✓ | ✓ | ✓ |
| hover | ✓ | ✓ | ✓ | ✓ | — |
| active / pressed | ✓ | — | — | — | — |
| focus-visible | ✓ | ✓ | — | — | ✓ |
| disabled | ✓ | ✓ | — | ✓ | — |
| loading | ✓ | — | — | — | — |
| selected / active | — | — | — | ✓ | ✓ |
| error | — | ✓ | — | — | — |
| readonly | — | ✓ | — | — | — |
⣷ Braille mark is a brand signature of Pythinker Web, used only in the chat state of "message sent, waiting for the Agent's first response", and rendered uniformly by the ThinkingIndicator component. All other loading states use the plain Spinner. backdrop-filter: blur is banned site-wide, with two sanctioned exceptions: the .frost variant of TopBar (sticky navigation bars, readable over scrolling content) and the Sidebar frost layer (.side::before — translucent glass + wash + backdrop blur, applied on the pseudo-layer so the sidebar's non-teleported fixed menus keep their viewport anchoring; same recipe extends to the Onboarding hero). No other component (card, dialog, Toast, panel) may use glassmorphism; violations are flagged under no-glassmorphism. The structural spec for the app shell (three-column grid + right preview panel) and the left session sidebar. These are business-agnostic "skeletons" — components, fonts, radii, and surfaces are reused from §02 / §03, but layout and alignment have their own conventions.
On desktop it is a single-row 5-track grid: the sidebar and the right panel each occupy a permanent auto track, with the conversation column in the middle; two 0-width tracks are for the ResizeHandles.
grid-template-columns: auto 0 minmax(0, 1fr) 0 auto;
/* sidebar ↑ ↑handle ↑conversation ↑handle ↑right panel (auto) */| Token | Value | Usage |
|---|---|---|
| sidebar width | 270px default (adjustable) | expanded sidebar width, changed by dragging the ResizeHandle; should approach §02's --p-sidebar-w (264px) |
| --preview-w | 460px | width of the right preview panel when open |
| --panel-head-h | 48px | unified height for all right panel heads + the conversation column head, so the hairline runs as one line |
| --p-bp-sm | 640px | ≤640 switches to a mobile single column (top bar + conversation), no sidebar / handle / right panel |
0 ↔ var(--preview-w) (when open it squeezes the conversation column, rather than switching templates).min-height:0; min-width:0, so only the inner scroll containers scroll and the page itself does not scroll.--sb-*)All sidebar rows (group head, session row, New chat button) share 4 custom properties, so the "session title" aligns precisely under the "workspace name".
| Token | Value | Usage |
|---|---|---|
| --sb-inset | 12px | row box (hover/selected pill) inset from the sidebar edges — matches the brand header's 12px padding |
| --sb-pad-x | 20px | content start x (= --sb-inset + 8px row padding) |
| --sb-gutter | 16px | leading icon slot width — matches the workspace folder icon so the session title aligns under the workspace name |
| --sb-gap | 6px | gap between the icon slot and the text |
--sb-pad-x + --sb-gutter + --sb-gap. The group head has a folder icon and the session row has a status slot; both icons are the same width and position, so the titles align naturally. The sidebar from top to bottom: brand header → New chat → search → grouped list (workspace head + session rows) → settings footer. Controls reuse the §03 primitives as much as possible. The sidebar renders as a frost layer: .side::before composes the translucent --color-sidebar-glass base, the --color-sidebar-wash gradient (cool blue→lavender in light, dark blue-gray vibrancy in dark), and --p-sidebar-backdrop blur — sanctioned extensions to §06. --color-sidebar-bg remains the solid composite (row masks / overlays). The hairline still separates it from the conversation pane. Vertical rhythm: the brand header keeps 12px padding (on macOS desktop it adds 36px top clearance for the traffic lights); rows inside the actions group (New chat + search) stack flush (0 gap, same rhythm as the list rows); adjacent groups are separated by 12px. Row hover uses --sb-hover (= the global --color-hover wash); the selected row uses --color-selected — neutral, never the accent.
| Block | Use | Note |
|---|---|---|
| Brand header | theme-matched Pythinker banner + collapse IconButton | the supplied dark/light banner sits left and the collapse IconButton sm is right-aligned inside the header on every platform. On macOS desktop the header adds top clearance for the floating traffic lights and doubles as the window-drag strip (the button opts out of dragging). |
| New chat | full-width left-aligned button (custom) | same rhythm as the session rows in the list (left-aligned, hover = --sb-hover). Do not use Button (centered, breaks the rhythm) |
| Search | bare search row (custom) | no border, hover/focus shows a sunken background; icon + label, with the Kbd keycaps (⌘K / Ctrl K) pushed to the trailing edge — label and shortcut are justified apart. Do not use Input (the 38px bordered version is too heavy). Last fixed row above the list — its wrapper carries the scroll-linked seam |
| Section label | .p-section-label | uppercase muted small titles like "Workspaces" |
| Workspace head / session row | see next two sections | share --sb-* alignment |
| Settings footer | full-width left-aligned button (custom) | pinned row under the session list, separated by a 1px --line top border; icon + label, same list-style family as New chat |
A session row is an inset rounded pill, structured as: status slot → title → time → attention Badge → kebab.
| Part | Rule |
|---|---|
| Container | padding: 8px 8px inside the list's --sb-inset gutter, radius-sm; no fixed/min height — row height is font-driven (title line-height: --leading-tight, ≈16px) → ≈32px total, the sidebar-wide row rhythm. The hover kebab is absolutely positioned so it never forces the row taller (no hover jitter). hover = --sb-hover (the global --color-hover wash); active = --color-selected — neutral, no accent tint, no border, no weight change |
| Status slot (lead) | fixed --sb-gutter width; running = Spinner sm, otherwise unread = 7px accent dot |
| Title | flex:1 with truncation; double-click enters inline rename (compact input, not Input) |
| Time | mono xs, fg-faint; yields to the kebab on hover |
| Attention Badge | Badge sm: info (needs answer) / warning (needs approval) / danger (aborted) |
| kebab | IconButton sm, shown on hover; dropdown uses Menu/MenuItem |
| Archive confirmation | replaces the title area, Button sm (danger confirm / secondary cancel) |
The group head and session rows share --sb-*: folder icon (open/closed) → name, with the kebab and "+" revealed on hover.
--sb-gap before the name — it does not pad out the --sb-gutter slot.--color-text-muted, one step lighter than session titles), so group heads read as grouping labels. No path subtitle; hovering the name shows the full root path in a Tooltip.IconButton sm inside a floating actions layer anchored to the row's right edge — no reserved layout space, so the name uses the full row width when idle. Shown on hover, keyboard focus, or while the menu is open; the layer backs itself with the sidebar surface (container background) plus the row hover wash (an ::after shown only while the row is hovered), so its color exactly equals the row's current background and the overlapped name tail doesn't bleed through (hidden via opacity:0, staying in the tab order).The "load more / show less" control at the bottom of each workspace group is a session-row-shaped compact list control (same family as search, New chat, inline rename — not a Button). It doubles as the pagination trigger and the in-group expand / collapse toggle.
| Part | Rule |
|---|---|
| Container | session-row pill: display:flex; gap:--sb-gap; padding:8px …, no fixed/min height (font-driven, ≈32px like a session row), same padding as a session row, radius-sm; hover = --sb-hover (no text recolor); :focus-visible uses --p-focus-ring |
| Lead slot | empty, --sb-gutter wide, so the label's start x aligns with the session titles (--sb-pad-x + --sb-gutter + --sb-gap) |
| Label | font-ui, text-xs, --color-text; flex:1, truncated |
| Behavior | "Load more" fetches the next page and auto-expands; once more than the first page is loaded, "Show less" appears and collapses back to the first page (view-layer trim — data is kept, no refetch); "Show all" re-expands |
A 4px vertical drag bar, layered over the 1px column border (margin: 0 -2px makes the whole 4px grabbable), turning accent on hover / drag.
| Rule | Value |
|---|---|
| Width / cursor | 4px / col-resize |
| Normal / active | transparent / accent fill |
| Layer | --z-dropdown, above pane-level sticky chrome (chat dock at --z-sticky) so the overhang stays visible and grabbable |
| Behavior | panel width follows the pointer 1:1 while dragging (the parent disables transitions to avoid lag); on release it is persisted to localStorage |
The right panels (file preview / Diff / thinking / sub-agent / side chat) share one track and one head primitive.
PanelHeader primitive (48px = --panel-head-h), the same height as the conversation column head, so the hairline runs as one line.0 → var(--preview-w), smoothly squeezing the conversation column.position:fixed; inset:0).Pythinker Web is a local developer tool; it does not target a specific WCAG conformance level, nor maintain a full screen-reader QA matrix. This section collects only the rules that are "low-cost, don't hurt the look, and directly benefit keyboard-heavy users", as the baseline contract for each primitive; the more expensive, lower-ROI parts (such as real-time announcement orchestration for streaming output) are not mandatory for now.
:focus-visible (not :focus). It appears only on keyboard focus; mouse clicks don't trigger it, so it doesn't pollute the mouse-driven visual; the ring's strength is tuned uniformly with --p-focus-ring, not overridden per place. Anything doable with a mouse must also be doable with a keyboard; Tab order follows the DOM, with no invented skipping. Composite controls define their keyboard model per the table below; a missing model is treated as incomplete:
| Control | Keyboard behavior |
|---|---|
| Dialog | Tab cycles within the dialog (focus trap); Esc closes; focus returns to the trigger element after closing. |
| Menu | ↑ / ↓ move the highlight, Enter selects, Esc closes. |
| Tabs | ← / → switch tabs (roving tabindex); only the current tab is in the Tab sequence. |
| Switch / Segmented | ← / → or Space / Enter to toggle. |
:focus-visible + --p-focus-ring (primary actions may use --p-focus-ring-strong).outline: none is forbidden. To remove the default outline, you must provide an equivalent replacement style.aria-label — IconButton already enforces this with a required label prop.role="dialog" + aria-modal="true", with the title as the dialog's accessible name.aria-hidden="true" to avoid being read out by screen readers.Desktop click targets ≥ 32px; touch devices ≥ 44px (consistent with the §01 principle and the IconButton lg tier).
Handled uniformly in the global styles per §02's @media (prefers-reduced-motion: reduce); components do not check this individually. The Braille thinking indicator stops pulsing.
Screen-reader announcements are not a mandatory contract in this product. Short hints like Toast can use role="status" / aria-live; chat streaming output is currently not announced word-by-word, which is an acceptable trade-off, to be added later if a real need arises.