mirror of
https://github.com/NousResearch/hermes-agent.git
synced 2026-06-16 09:31:37 +00:00
d62979a6f3
* feat(desktop): session-scoped status stack + kill new-window theme flash Stack subagents, background tasks, and the queue into one collapsible "sink" above the composer, reusing the queue's chrome so every status reads as one piece. Extracts shared StatusSection / StatusRow / TerminalOutput primitives and a unified $statusItemsBySession store (subagents mirrored, background owned here, merged + grouped for render). Renames BrailleSpinner → GlyphSpinner now that it drives more than braille. Separately, fix the white flash on every new/cmd-clicked window: macOS `vibrancy` paints an NSVisualEffectView that follows the OS appearance and ignores `backgroundColor`, so a dark app on a light-mode Mac flashed white until the renderer painted over it. Pin `nativeTheme.themeSource` to the app theme (persisted to userData so cold launches paint right before the renderer loads), hold windows with `show:false` until `ready-to-show`, and pre-paint the themed background via an inline script before the bundle runs. * feat(desktop): dock the slash popover to the composer via one shared fill var The slash·@ popover (and ? help) now docks onto the composer's edge with the same chrome as the queue/status stack — rounded outer corners, fused borderless edge, no shadow — but keeps its own narrow width. Surface + drawer paint a single --composer-fill var; the state ladder (rest / scrolled / focused / drawer-open) lives once in styles.css on [data-slot='composer-root']. The :has() drawer-open rule is last and forces an opaque fill, since translucent glass sampling different backdrops (thread vs fade gradient) can never match. This replaces the focus-within !important override that repainted the surface behind every previous matching attempt. Also drop the chevron column from the project file tree — the folder open/closed icon already carries the expand state. * feat(desktop): base inset for file tree rows (post-chevron alignment) * feat(desktop): wire the status stack's background tasks to the real process registry The background group was UI-only (dev-mock seeded). Now it's live e2e: - tui_gateway: new session-scoped `process.list` (registry snapshot filtered by the session's session_key, plus a 4KB output tail for the inline terminal viewer) and `process.kill` (single process, ownership-checked — unlike process.stop's kill_all). - Renderer: `reconcileBackgroundProcesses` syncs snapshots into the store layout-stably — rows keep their position when state flips (never re-sort), new processes append, unchanged rows keep object identity so memoised rows skip re-rendering, and a dismissed-set stops the registry's retained finished procs from resurrecting X-ed rows. - Refresh triggers: session open, terminal/process tool.complete, status.update(kind=process) from the gateway's notification poller, and a 5s poll armed only while a running row is visible (catches silent exits). - Stop = real `process.kill` + optimistic dismiss; Dismiss = client-side with resurrection guard. - Re-keyed the stack to the RUNTIME session id: it was keyed by the stored session id, where neither subagent events nor process.list would ever land. - Deleted dev-status-mocks.ts (__hermesStatusMocks) — no more seed shit. Reconcile invariants covered in store/composer-status.test.ts. * feat(desktop): todos + openable subagents in the status stack, self-healing file tree - todo lists move out of the inline chat panel into the composer status stack (checklist icon, dashed ring = pending, spinner = in progress, check = done), fed live from todo tool events and seeded from history on session open - subagent rows carry the child's real session id end-to-end (delegate_tool → gateway → renderer) so clicking one opens ITS session window - status stack publishes its measured height so the thread's bottom clearance grows with it; card paints the shared --composer-fill so focused/scrolled states match the composer exactly - file tree self-heals: ENOENT roots retry on a 3s cadence + Try again button, and the main process expands ~ in IPC paths (gateway cwds arrive as ~/...) - composer drag-drop of tree entries inserts inline refs instead of attachments * fix(desktop): file tree falls back to the workspace dir when a session's cwd is gone Sessions record their launch cwd; deleted worktrees leave that path dead, so opening such a session swapped the tree from the default workspace to a directory that ENOENTs forever — the 3s retry just spun on it. On a root read error the tree now asks main to sanitize the cwd (prefers the configured default project dir), displays that fallback, and quietly re-probes the original path so it switches back if the dir reappears. * feat(desktop): working restore-checkpoint button on past user prompts The discard icon on hover of a past user bubble was decorative — clicking did nothing. It's now a real control: a confirmation dialog explains that everything after the prompt is removed, then the session rewinds to that turn and reruns the same prompt (prompt.submit with truncate_before_user_ordinal, the same mechanism the edit composer uses). Failures rethrow into the dialog's inline error instead of toasting. * fix(desktop): show the restore-checkpoint button on the latest user prompt too Restoring the most recent prompt is just 'retry this turn' — no reason to exclude it. Stop still takes the slot while the turn is running. * fix(desktop): finished todo lists clear themselves out of the status stack A list whose every item is completed/cancelled lingers ~4s so the final checkmark is visible, then the todo group drops out of the stack. A fresh active list arriving within the linger cancels the scheduled clear. * chore(desktop): drop dead editableCheckpoint copy, terser restore confirm * fix(desktop): rewind clears the abandoned timeline's todos + background Restoring to (or editing) an earlier prompt rewinds the conversation, but the todos and background processes spawned by the now-discarded turns kept showing in the status stack — and the real background processes kept running. Both rewind paths now clear the session's todo rows and kill + drop its background processes before the fresh run repopulates them. Also drops the click-to-edit clamp transition, which flashed a half-expanded bubble on the way into the edit composer. * feat(desktop): user messages are always editable; edit/restore revert mid-stream The bubble is now always click-to-edit — even while a turn streams — instead of going inert during a run. Sending an edit acts like restore: it rewinds to that prompt and re-runs with the new text. Both edit and restore can fire mid-stream now; the gateway refuses prompt.submit while a turn runs (4009 "session busy"), so they interrupt the live turn first and retry the submit until the cooperative interrupt winds it down. Restore (re-run as-is) shows on every prompt except the latest running one, which keeps the Stop button. * fix(desktop): label preview-pane ⌘L selections with the filename, not "zsh" The terminal owns a global ⌘/Ctrl+L "send selection to composer" shortcut, so selecting text in the file preview pane and hitting it fell through to the terminal handler — which imported the right text but labelled the composer ref "zsh:N lines" off the shell name. When the selection isn't an xterm selection, label it with the previewed file instead. * fix(desktop): ⌘L on a preview line selection inserts the @line ref, like dragging The source preview lets you select lines in the gutter and drag them into the composer as an @line:path:start-end ref. ⌘/Ctrl+L now does the same when a line selection is active — it drops the identical ref instead of falling through to the terminal's global handler (which grabbed the native text selection and sent a bogus terminal block). Capture-phase + stopPropagation so it wins; with a line selection there's no native selection, so the terminal handler stays out of it. * chore: gitignore apps/desktop/demo/ scratch output The desktop demo prompt writes demo/*.txt during recorded walkthroughs; it's throwaway, never part of the app. Ignore it so it stops cluttering git status. * feat(desktop): subagent watch windows, hard stop, sidebar hygiene Child-session mirror for live subagent windows, delegate sessions tagged and excluded from the sidebar, composer focus/stop polish, and WS stall resilience on the gateway transport. * refactor: DRY delegate SQL + trim status-stack noise Extract shared listable-child and delegate-delete helpers in hermes_state, collapse cancelRun busy release, and cut comment bloat in resume/status paths. * fix(desktop): hide orphaned subagent sessions in sidebar Cascade-delete all ephemeral children on parent delete (not just tagged rows), run v16 backfill to tag legacy orphans, and record new delegates as source=subagent. * fix: restore orphan contract for untagged children + lazy session eviction Cascade-delete only _delegate_from-tagged rows (v16 backfill covers legacy), walk marker chains recursively with FK-safe orphaning, gate lazy watch sessions out of the still-starting eviction exemption via an explicit flag, pass session_id to _make_agent only when resuming, and hide source=subagent from session search. * fix(gateway): gate child mirror off upgraded sessions + age out stale run entries Review findings: the mirror could interleave synthetic events with a real native stream once a watch window upgrades (prompt.submit builds an agent), and a lost subagent.complete left _active_child_runs pinning running=true forever. Mirror now stops when the live session owns an agent; liveness reads ignore entries older than an hour. * fix(gateway): reject prompt.submit into a watch session while its child runs A lazy watch session's running flag is False (the run lives in the parent turn), so typing mid-run sailed past the busy guard and built a second agent racing the in-flight child on the same stored session. Busy error until the run completes; afterwards the submit upgrades into a normal conversation. * refactor(gateway): DRY watch-resume payload + compose listable-child SQL Fold the duplicated child-run busy overlay into one _reuse_live_payload helper across both resume reuse paths, collapse the twin mirror early-returns, and build _LISTABLE_CHILD_SQL from _BRANCH_CHILD_SQL instead of restating it. * fix(desktop): clip horizontal overflow on sidebar scroll areas Add overflow-x-hidden alongside overflow-y-auto on session list scrollers and the shared SidebarContent primitive — vertical scroll unchanged.
1279 lines
42 KiB
CSS
1279 lines
42 KiB
CSS
@import 'tailwindcss';
|
|
@plugin '@tailwindcss/typography';
|
|
@import 'tw-shimmer';
|
|
@import 'katex/dist/katex.min.css';
|
|
@import '@vscode/codicons/dist/codicon.css';
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/* Sidebar sections: tall viewports give each its own scroller; compact ones
|
|
(this variant) flatten everything into one shared scroll. See ChatSidebar. */
|
|
@custom-variant compact (@media (max-height: 768px));
|
|
|
|
@font-face {
|
|
font-family: 'Collapse';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url('../../../node_modules/@nous-research/ui/dist/fonts/Collapse-Bold.woff2') format('woff2');
|
|
}
|
|
|
|
/* JetBrains Mono — bundled terminal font (Apache-2.0) so bold/italic share the
|
|
regular face's metrics instead of squeezing against a system fallback. */
|
|
@font-face {
|
|
font-family: 'JetBrains Mono';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url('./fonts/JetBrainsMono-Regular.woff2') format('woff2');
|
|
}
|
|
@font-face {
|
|
font-family: 'JetBrains Mono';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url('./fonts/JetBrainsMono-Bold.woff2') format('woff2');
|
|
}
|
|
@font-face {
|
|
font-family: 'JetBrains Mono';
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url('./fonts/JetBrainsMono-Italic.woff2') format('woff2');
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--dt-background);
|
|
--color-foreground: var(--dt-foreground);
|
|
--color-card: var(--dt-card);
|
|
--color-card-foreground: var(--dt-card-foreground);
|
|
--color-muted: var(--dt-muted);
|
|
--color-muted-foreground: var(--dt-muted-foreground);
|
|
--color-popover: var(--dt-popover);
|
|
--color-popover-foreground: var(--dt-popover-foreground);
|
|
--color-primary: var(--dt-primary);
|
|
--color-primary-foreground: var(--dt-primary-foreground);
|
|
--color-secondary: var(--dt-secondary);
|
|
--color-secondary-foreground: var(--dt-secondary-foreground);
|
|
--color-accent: var(--dt-accent);
|
|
--color-accent-foreground: var(--dt-accent-foreground);
|
|
--color-border: var(--dt-border);
|
|
--color-input: var(--dt-input);
|
|
--color-ring: var(--dt-ring);
|
|
--color-destructive: var(--dt-destructive);
|
|
--color-destructive-foreground: var(--dt-destructive-foreground);
|
|
|
|
--color-midground: var(--dt-midground);
|
|
--color-midground-foreground: var(--dt-midground-foreground);
|
|
|
|
--font-sans: var(--dt-font-sans);
|
|
--font-mono: var(--dt-font-mono);
|
|
|
|
--spacing-mul: var(--dt-spacing-mul, 1);
|
|
|
|
--radius-xs: calc(var(--radius-scalar) * 0.125rem);
|
|
--radius-sm: calc(var(--radius-scalar) * 0.5rem);
|
|
--radius-md: calc(var(--radius-scalar) * 0.625rem);
|
|
--radius-lg: calc(var(--radius-scalar) * 0.75rem);
|
|
--radius-xl: calc(var(--radius-scalar) * 1rem);
|
|
--radius-2xl: calc(var(--radius-scalar) * 1.5rem);
|
|
--radius-3xl: calc(var(--radius-scalar) * 2rem);
|
|
--radius-4xl: calc(var(--radius-scalar) * 2.5rem);
|
|
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar: var(--sidebar);
|
|
|
|
--shadow-xs: 0 0.0625rem 0.125rem color-mix(in srgb, #000 5%, transparent);
|
|
--shadow-sm:
|
|
0 0 0 0.0625rem color-mix(in srgb, var(--dt-foreground) 6%, transparent),
|
|
0 0.125rem 0.5rem color-mix(in srgb, #000 4%, transparent);
|
|
--shadow-md:
|
|
0 0 0 0.0625rem color-mix(in srgb, var(--dt-foreground) 8%, transparent),
|
|
0 0.25rem 1rem color-mix(in srgb, #000 8%, transparent),
|
|
0 1rem 2rem -1.5rem color-mix(in srgb, #000 18%, transparent);
|
|
/* Soft floating shadow for borderless modals/overlays. Single top light
|
|
source: every layer is centered (x=0) and cast downward, with negative
|
|
spread that grows with the blur so each layer is pulled horizontally inward
|
|
— the shadow pools below the panel instead of bleeding out every side.
|
|
Layered (contact → ambient) for a smooth, natural falloff. */
|
|
--shadow-nous:
|
|
0 0.125rem 0.25rem -0.125rem color-mix(in srgb, #000 7%, transparent),
|
|
0 0.5rem 0.75rem -0.375rem color-mix(in srgb, #000 6%, transparent),
|
|
0 1.25rem 1.75rem -0.875rem color-mix(in srgb, #000 6%, transparent),
|
|
0 2.25rem 3rem -1.75rem color-mix(in srgb, #000 0%, transparent);
|
|
/* Hairline border paired with --shadow-nous on borderless overlays.
|
|
currentColor resolves per-element, so it adapts to text color/theme. */
|
|
--stroke-nous: color-mix(in srgb, currentColor 3%, transparent);
|
|
--shadow-lg:
|
|
inset 0 0.0625rem 0 color-mix(in srgb, #fff 28%, transparent),
|
|
0 0 0 0.0625rem color-mix(in srgb, var(--dt-foreground) 8%, transparent),
|
|
0 0.75rem 2rem color-mix(in srgb, #000 12%, transparent);
|
|
--shadow-composer: 0 0.0625rem 0.125rem color-mix(in srgb, #000 5%, transparent);
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
color-scheme: light;
|
|
|
|
--theme-foreground: #17171a;
|
|
--theme-primary: #0053fd;
|
|
--theme-secondary: color-mix(in srgb, #0053fd 7%, #ffffff);
|
|
--theme-accent-soft: color-mix(in srgb, #0053fd 10%, #ffffff);
|
|
--theme-midground: #0053fd;
|
|
--theme-warm: #cf806d;
|
|
--theme-background-seed: #f8faff;
|
|
--theme-sidebar-seed: #f3f7ff;
|
|
--theme-card-seed: #ffffff;
|
|
--theme-elevated-seed: #ffffff;
|
|
--theme-bubble-seed: color-mix(in srgb, #0053fd 6%, #ffffff);
|
|
--theme-neutral-chrome: #f3f3f3;
|
|
--theme-neutral-sidebar: #f3f3f3;
|
|
--theme-neutral-card: #fcfcfc;
|
|
--theme-mix-chrome: 92%;
|
|
--theme-mix-sidebar: 100%;
|
|
--theme-mix-card: 22%;
|
|
--theme-mix-elevated: 28%;
|
|
--theme-mix-bubble: 0%;
|
|
--theme-fill-primary-accent-mix: 16%;
|
|
--theme-fill-secondary-accent-mix: 11%;
|
|
--theme-fill-tertiary-accent-mix: 8%;
|
|
--theme-fill-quaternary-accent-mix: 5%;
|
|
--theme-fill-quinary-accent-mix: 3%;
|
|
--theme-stroke-primary-accent-mix: 24%;
|
|
--theme-stroke-secondary-accent-mix: 16%;
|
|
--theme-stroke-tertiary-accent-mix: 10%;
|
|
--theme-stroke-quaternary-accent-mix: 6%;
|
|
--theme-row-hover-accent-mix: 4%;
|
|
--theme-row-active-accent-mix: 8%;
|
|
--theme-control-hover-accent-mix: 6%;
|
|
--theme-control-active-accent-mix: 8%;
|
|
|
|
--ui-base: var(--theme-foreground);
|
|
--ui-accent: var(--theme-midground);
|
|
--ui-accent-secondary: var(--theme-primary);
|
|
--ui-warm: var(--theme-warm);
|
|
--ui-red: #cf2d56;
|
|
--ui-orange: #db704b;
|
|
--ui-yellow: #c08532;
|
|
--ui-green: #1f8a65;
|
|
--ui-cyan: #4c7f8c;
|
|
--ui-blue: #0053fd;
|
|
--ui-purple: #9e94d5;
|
|
--ui-bg-chrome: color-mix(
|
|
in srgb,
|
|
var(--theme-background-seed) var(--theme-mix-chrome),
|
|
var(--theme-neutral-chrome)
|
|
);
|
|
--ui-bg-sidebar: color-mix(
|
|
in srgb,
|
|
var(--theme-sidebar-seed) var(--theme-mix-sidebar),
|
|
var(--theme-neutral-sidebar)
|
|
);
|
|
--ui-bg-editor: color-mix(in srgb, var(--theme-card-seed) var(--theme-mix-card), var(--theme-neutral-card));
|
|
--ui-bg-elevated: color-mix(
|
|
in srgb,
|
|
var(--theme-elevated-seed) var(--theme-mix-elevated),
|
|
var(--theme-neutral-card)
|
|
);
|
|
--ui-bg-card: color-mix(in srgb, var(--ui-accent) 4%, color-mix(in srgb, var(--ui-base) 4%, transparent));
|
|
--ui-bg-input: #fcfcfc;
|
|
--ui-bg-primary: color-mix(
|
|
in srgb,
|
|
var(--ui-accent) var(--theme-fill-primary-accent-mix),
|
|
color-mix(in srgb, var(--ui-base) 10%, transparent)
|
|
);
|
|
--ui-bg-secondary: color-mix(
|
|
in srgb,
|
|
var(--ui-accent) var(--theme-fill-secondary-accent-mix),
|
|
color-mix(in srgb, var(--ui-base) 7%, transparent)
|
|
);
|
|
--ui-bg-tertiary: color-mix(
|
|
in srgb,
|
|
var(--ui-accent) var(--theme-fill-tertiary-accent-mix),
|
|
color-mix(in srgb, var(--ui-base) 5%, transparent)
|
|
);
|
|
--ui-bg-quaternary: color-mix(
|
|
in srgb,
|
|
var(--ui-accent) var(--theme-fill-quaternary-accent-mix),
|
|
color-mix(in srgb, var(--ui-base) 4%, transparent)
|
|
);
|
|
--ui-bg-quinary: color-mix(
|
|
in srgb,
|
|
var(--ui-accent) var(--theme-fill-quinary-accent-mix),
|
|
color-mix(in srgb, var(--ui-base) 3%, transparent)
|
|
);
|
|
--ui-row-hover-background: color-mix(
|
|
in srgb,
|
|
var(--ui-accent) var(--theme-row-hover-accent-mix),
|
|
color-mix(in srgb, var(--ui-base) 3%, transparent)
|
|
);
|
|
--ui-row-active-background: color-mix(
|
|
in srgb,
|
|
var(--ui-accent) var(--theme-row-active-accent-mix),
|
|
color-mix(in srgb, var(--ui-base) 5%, transparent)
|
|
);
|
|
--ui-control-hover-background: color-mix(
|
|
in srgb,
|
|
var(--ui-accent) var(--theme-control-hover-accent-mix),
|
|
color-mix(in srgb, var(--ui-base) 4%, transparent)
|
|
);
|
|
--ui-control-active-background: color-mix(
|
|
in srgb,
|
|
var(--ui-accent) var(--theme-control-active-accent-mix),
|
|
color-mix(in srgb, var(--ui-base) 5%, transparent)
|
|
);
|
|
--ui-text-primary: color-mix(in srgb, var(--ui-base) 94%, transparent);
|
|
--ui-text-secondary: color-mix(in srgb, var(--ui-base) 74%, transparent);
|
|
--ui-text-tertiary: color-mix(in srgb, var(--ui-base) 54%, transparent);
|
|
--ui-text-quaternary: color-mix(in srgb, var(--ui-base) 36%, transparent);
|
|
--ui-stroke-primary: color-mix(
|
|
in srgb,
|
|
var(--ui-accent) var(--theme-stroke-primary-accent-mix),
|
|
color-mix(in srgb, var(--ui-base) 10%, transparent)
|
|
);
|
|
--ui-stroke-secondary: color-mix(
|
|
in srgb,
|
|
var(--ui-accent) var(--theme-stroke-secondary-accent-mix),
|
|
color-mix(in srgb, var(--ui-base) 7%, transparent)
|
|
);
|
|
--ui-stroke-tertiary: color-mix(
|
|
in srgb,
|
|
var(--ui-accent) var(--theme-stroke-tertiary-accent-mix),
|
|
color-mix(in srgb, var(--ui-base) 5%, transparent)
|
|
);
|
|
--ui-stroke-quaternary: color-mix(
|
|
in srgb,
|
|
var(--ui-accent) var(--theme-stroke-quaternary-accent-mix),
|
|
color-mix(in srgb, var(--ui-base) 3%, transparent)
|
|
);
|
|
--ui-sash-hover-border: color-mix(in srgb, var(--ui-accent) 18%, var(--ui-stroke-tertiary));
|
|
--ui-sash-hover-background: color-mix(in srgb, var(--ui-accent) 6%, transparent);
|
|
--ui-surface-background: var(--ui-bg-editor);
|
|
--ui-sidebar-surface-background: var(--ui-bg-sidebar);
|
|
--ui-chat-surface-background: var(--ui-bg-chrome);
|
|
--ui-editor-surface-background: var(--ui-bg-chrome);
|
|
--ui-chat-bubble-background: color-mix(
|
|
in srgb,
|
|
var(--theme-bubble-seed) var(--theme-mix-bubble),
|
|
var(--theme-neutral-card)
|
|
);
|
|
--ui-chat-bubble-opaque-background: var(--ui-bg-editor);
|
|
--ui-inline-code-background: color-mix(in srgb, #141414 5%, transparent);
|
|
--ui-inline-code-border: color-mix(in srgb, #141414 8%, transparent);
|
|
--ui-inline-code-foreground: color-mix(in srgb, #141414 88%, transparent);
|
|
--ui-selection-background: color-mix(in srgb, #ffd24a 55%, transparent);
|
|
|
|
--dt-background: var(--ui-bg-chrome);
|
|
--dt-foreground: var(--ui-text-primary);
|
|
--dt-card: var(--ui-bg-editor);
|
|
--dt-card-foreground: var(--ui-text-primary);
|
|
--dt-muted: var(--ui-bg-tertiary);
|
|
--dt-muted-foreground: var(--ui-text-tertiary);
|
|
--dt-popover: color-mix(in srgb, var(--ui-bg-elevated) 96%, transparent);
|
|
--dt-popover-foreground: var(--ui-text-primary);
|
|
--dt-primary: var(--theme-primary);
|
|
--dt-primary-foreground: #fcfcfc;
|
|
--dt-secondary: var(--theme-secondary);
|
|
--dt-secondary-foreground: var(--ui-text-secondary);
|
|
--dt-accent: var(--theme-accent-soft);
|
|
--dt-accent-foreground: var(--ui-text-primary);
|
|
--dt-border: var(--ui-stroke-secondary);
|
|
--dt-input: var(--ui-stroke-primary);
|
|
--dt-ring: var(--ui-stroke-primary);
|
|
--dt-midground: var(--theme-midground);
|
|
--dt-composer-ring: var(--ui-base);
|
|
--dt-destructive: #cf2d56;
|
|
--dt-destructive-foreground: #ffffff;
|
|
--dt-sidebar-bg: var(--ui-bg-sidebar);
|
|
--dt-sidebar-border: var(--ui-stroke-secondary);
|
|
--dt-user-bubble: var(--ui-chat-bubble-background);
|
|
--dt-user-bubble-border: var(--ui-stroke-tertiary);
|
|
|
|
--dt-font-sans:
|
|
'Segoe WPC', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif,
|
|
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', emoji;
|
|
/* Key caps always use the native UI face — never theme typography overrides. */
|
|
--dt-font-kbd: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
|
|
--dt-font-mono:
|
|
'Cascadia Code', 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace, 'Apple Color Emoji',
|
|
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', emoji;
|
|
--dt-base-size: 1rem;
|
|
--dt-line-height: 1.5;
|
|
--dt-letter-spacing: 0;
|
|
--dt-spacing-mul: 1;
|
|
|
|
--radius: 0.75rem;
|
|
--radius-scalar: 0.6;
|
|
|
|
/* Space under last message vs overlay composer — driven by the measured composer height (see composer/index.tsx)
|
|
plus the out-of-flow status stack's measured height (see status-stack/index.tsx) when one is showing. */
|
|
--status-stack-measured-height: 0px;
|
|
--thread-last-message-clearance: calc(var(--composer-measured-height) + var(--status-stack-measured-height) + 2rem);
|
|
|
|
--composer-shell-pad-block-end: 0.625rem;
|
|
--message-text-indent: 0.75rem;
|
|
--conversation-text-font-size: 0.8125rem;
|
|
--conversation-tool-font-size: 0.6875rem;
|
|
--conversation-caption-font-size: 0.75rem;
|
|
--conversation-line-height: 1.125rem;
|
|
--conversation-caption-line-height: 1rem;
|
|
--conversation-turn-gap: 0.375rem;
|
|
/* Gap between top-level turn blocks (prose ↔ tools ↔ thinking) — enough air
|
|
that scaffolding reads as separate from the reply, not crammed into it. */
|
|
--turn-block-gap: 0.75rem;
|
|
/* Tight gap between tool rows inside a single action group, so a back-to-back
|
|
run still reads as one cohesive sequence. */
|
|
--tool-row-gap: 0.375rem;
|
|
/* Paragraph spacing — vertical gap between prose paragraphs, both inside a
|
|
markdown block and between consecutive prose parts. Single knob; tweak
|
|
freely. */
|
|
--paragraph-gap: 0.45rem;
|
|
--sticky-human-top: 0.23rem;
|
|
--file-tree-row-height: 1.375rem;
|
|
|
|
--composer-width: 48.75rem;
|
|
--composer-control-size: 1.75rem;
|
|
--composer-control-primary-size: 1.875rem;
|
|
--composer-control-gap: 0.25rem;
|
|
--composer-row-gap: 0.25rem;
|
|
--composer-ring-strength: 1;
|
|
--composer-surface-pad-x: 0.5rem;
|
|
--composer-surface-pad-y: 0.3125rem;
|
|
--composer-input-min-height: 1.625rem;
|
|
--composer-input-max-height: 9.375rem;
|
|
--composer-input-inline-min-width: 8rem;
|
|
--composer-fallback-height: 2.75rem;
|
|
--composer-measured-height: calc(0.5rem + var(--composer-shell-pad-block-end) + var(--composer-fallback-height));
|
|
--composer-surface-measured-height: var(--composer-fallback-height);
|
|
--thread-viewport-height: max(
|
|
0rem,
|
|
calc(100% - var(--composer-measured-height) + var(--composer-surface-measured-height))
|
|
);
|
|
--vsq: min(0.5vh, 0.5vw);
|
|
--image-preview-max-width: 34rem;
|
|
--image-preview-height: clamp(16.25rem, calc(var(--vsq) * 100), 26.25rem);
|
|
|
|
--sidebar-width: 14.8125rem;
|
|
--chat-min-width: 28rem;
|
|
--titlebar-control-size: 1.25rem;
|
|
--titlebar-control-height: 1.375rem;
|
|
--sidebar-content-inline-padding: 1rem;
|
|
|
|
--sidebar: var(--dt-sidebar-bg);
|
|
--sidebar-foreground: var(--dt-foreground);
|
|
--sidebar-primary: var(--dt-primary);
|
|
--sidebar-primary-foreground: var(--dt-primary-foreground);
|
|
--sidebar-accent: var(--ui-control-active-background);
|
|
--sidebar-accent-foreground: var(--dt-accent-foreground);
|
|
--sidebar-border: var(--dt-sidebar-border);
|
|
--sidebar-ring: var(--dt-ring);
|
|
--sidebar-edge-border: color-mix(in srgb, var(--ui-base) 7.5%, transparent);
|
|
--chrome-action-hover: var(--ui-control-hover-background);
|
|
|
|
--midground: var(--dt-midground);
|
|
--background: var(--dt-background);
|
|
--foreground: var(--dt-foreground);
|
|
|
|
--warm-glow: color-mix(in srgb, var(--ui-warm) 32%, color-mix(in srgb, var(--ui-accent) 6%, transparent));
|
|
/* `--noise-opacity-mul` is set per-mode by `applyTheme()`. */
|
|
--noise-opacity-mul: 1;
|
|
--backdrop-invert-mul: 1;
|
|
}
|
|
|
|
:root.dark {
|
|
/* Per-mode mix knobs — overridden inline by `applyTheme()` per skin. */
|
|
--theme-mix-chrome: 74%;
|
|
--theme-mix-card: 38%;
|
|
--theme-mix-elevated: 46%;
|
|
--theme-mix-bubble: 46%;
|
|
--theme-neutral-chrome: #0d0d0e;
|
|
--theme-neutral-sidebar: #0a0a0b;
|
|
--theme-neutral-card: #161618;
|
|
|
|
/* Dark-only accent palette overrides. */
|
|
--ui-red: #e75e78;
|
|
--ui-green: #55a583;
|
|
--ui-cyan: #6f9ba6;
|
|
|
|
--sidebar-edge-border: color-mix(in srgb, var(--ui-base) 12%, transparent);
|
|
--composer-ring-strength: 1.3;
|
|
--backdrop-invert-mul: 0;
|
|
|
|
--ui-inline-code-background: color-mix(in srgb, #ffffff 7%, transparent);
|
|
--ui-inline-code-border: color-mix(in srgb, #ffffff 10%, transparent);
|
|
--ui-inline-code-foreground: color-mix(in srgb, #ffffff 88%, transparent);
|
|
--ui-selection-background: color-mix(in srgb, #ffd24a 38%, transparent);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
border-color: var(--dt-border);
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
}
|
|
|
|
html {
|
|
font-size: var(--dt-base-size, 0.875rem);
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--ui-chat-surface-background);
|
|
color: var(--dt-foreground);
|
|
font-family: var(--dt-font-sans);
|
|
font-size: 0.8125rem;
|
|
line-height: var(--dt-line-height, 1.55);
|
|
letter-spacing: var(--dt-letter-spacing, 0);
|
|
overflow: hidden;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
button,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
:where(
|
|
a,
|
|
.underline,
|
|
[class~='hover:underline'],
|
|
[class~='focus:underline'],
|
|
[class~='focus-visible:underline'],
|
|
[class~='group-hover:underline'],
|
|
[class~='peer-hover:underline']
|
|
) {
|
|
text-decoration-color: color-mix(in srgb, currentColor 20%, transparent);
|
|
text-underline-offset: 0.25rem;
|
|
}
|
|
|
|
*::selection {
|
|
background: var(--ui-selection-background);
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.dither {
|
|
background: repeating-conic-gradient(currentColor 0% 25%, transparent 0% 50%) 0 0 / 0.125rem 0.125rem;
|
|
}
|
|
|
|
:root:not([style*='--theme-asset-bg:']) .theme-default-filler {
|
|
display: block;
|
|
}
|
|
|
|
:root[style*='--theme-asset-bg:'] .theme-default-filler {
|
|
display: none;
|
|
}
|
|
|
|
/* Primitive-level pointer cursor for every interactive control (buttons,
|
|
selects, menu items, switches, tabs, summaries). Keeps individual
|
|
components from having to hardcode `cursor-pointer`; explicit cursor
|
|
utilities (cursor-grab, cursor-default, disabled:cursor-*) still win since
|
|
they live in the utilities layer. */
|
|
@layer base {
|
|
button:not(:disabled):not([aria-disabled='true']),
|
|
summary,
|
|
[role='button']:not([aria-disabled='true']),
|
|
[role='menuitem']:not([aria-disabled='true']),
|
|
[role='menuitemradio']:not([aria-disabled='true']),
|
|
[role='menuitemcheckbox']:not([aria-disabled='true']),
|
|
[role='option']:not([aria-disabled='true']),
|
|
[role='switch']:not([aria-disabled='true']),
|
|
[role='tab']:not([aria-disabled='true']) {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
[class*='rounded-full'],
|
|
[class*=':rounded-full'] {
|
|
border-radius: calc(var(--radius-scalar) * 9999rem);
|
|
}
|
|
}
|
|
|
|
@keyframes arc-border {
|
|
0% {
|
|
background-position: 15% 15%;
|
|
}
|
|
100% {
|
|
background-position: 75% 75%;
|
|
}
|
|
}
|
|
|
|
.arc-border {
|
|
--arc-c0: color-mix(in srgb, var(--dt-foreground) 0%, transparent);
|
|
--arc-c1: var(--dt-midground);
|
|
--arc-c2: var(--dt-background);
|
|
--arc-angle: 160deg;
|
|
--arc-width: 0.078125rem;
|
|
--arc-inset: -0.125rem;
|
|
--arc-duration: 2.23s;
|
|
|
|
pointer-events: none;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
border-radius: inherit;
|
|
inset: var(--arc-inset);
|
|
padding: var(--arc-width);
|
|
mask:
|
|
linear-gradient(#000 0 0) content-box,
|
|
linear-gradient(#000 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
}
|
|
|
|
:root.dark .arc-border {
|
|
--arc-c1: var(--dt-foreground);
|
|
}
|
|
|
|
/* Quest-style "needs you" pulse for a clarify-blocked session's dot —
|
|
a soft amber glow that breathes so the row draws the eye without a toast. */
|
|
@keyframes quest-glow {
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
box-shadow:
|
|
0 0 0.1875rem color-mix(in srgb, var(--color-amber-500, #f59e0b) 70%, transparent),
|
|
0 0 0.5rem color-mix(in srgb, var(--color-amber-500, #f59e0b) 45%, transparent);
|
|
}
|
|
50% {
|
|
transform: scale(1.18);
|
|
box-shadow:
|
|
0 0 0.3125rem color-mix(in srgb, var(--color-amber-500, #f59e0b) 90%, transparent),
|
|
0 0 0.875rem color-mix(in srgb, var(--color-amber-500, #f59e0b) 65%, transparent);
|
|
}
|
|
}
|
|
|
|
.quest-glow {
|
|
animation: quest-glow 1.8s ease-in-out infinite;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.quest-glow {
|
|
animation: none;
|
|
box-shadow:
|
|
0 0 0.25rem color-mix(in srgb, var(--color-amber-500, #f59e0b) 80%, transparent),
|
|
0 0 0.625rem color-mix(in srgb, var(--color-amber-500, #f59e0b) 55%, transparent);
|
|
}
|
|
}
|
|
|
|
/* Command-palette deep-link: briefly flash the targeted settings row. */
|
|
@keyframes setting-field-flash {
|
|
0% {
|
|
background-color: color-mix(in srgb, var(--dt-primary, #f59e0b) 22%, transparent);
|
|
}
|
|
100% {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.setting-field-highlight {
|
|
animation: setting-field-flash 1.6s ease-out;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.setting-field-highlight {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
.arc-border::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
background: linear-gradient(
|
|
var(--arc-angle),
|
|
transparent 0%,
|
|
var(--arc-c0) 15%,
|
|
var(--arc-c1) 20%,
|
|
var(--arc-c2) 25%,
|
|
transparent 35%,
|
|
transparent 40%,
|
|
var(--arc-c0) 55%,
|
|
var(--arc-c1) 60%,
|
|
var(--arc-c2) 65%,
|
|
transparent 75%,
|
|
transparent 80%,
|
|
var(--arc-c0) 95%,
|
|
var(--arc-c1) 100%
|
|
);
|
|
background-size: 300% 300%;
|
|
animation: arc-border var(--arc-duration) linear infinite;
|
|
}
|
|
|
|
/* Flip the arc's travel direction (e.g. the Nous Portal hero row). */
|
|
.arc-border.arc-reverse::before {
|
|
animation-direction: reverse;
|
|
}
|
|
|
|
/* Nous Portal hero: slower, blue → orange arc. */
|
|
.arc-border.arc-nous,
|
|
:root.dark .arc-border.arc-nous {
|
|
--arc-c1: #4f8cff;
|
|
--arc-c2: #ff8c42;
|
|
--arc-duration: 3.27s;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.arc-border::before {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* No focus rings, anywhere. Kills the native outline plus Tailwind's
|
|
`focus-visible:ring-*` (a box-shadow driven by --tw-ring-*). Unlayered so it
|
|
beats the utilities layer without !important on the outline. The composer /
|
|
.desktop-input-chrome focus glow is untouched — those set `box-shadow`
|
|
directly rather than through the ring vars. */
|
|
*:focus,
|
|
*:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
*:focus-visible {
|
|
--tw-ring-shadow: 0 0 #0000 !important;
|
|
--tw-ring-offset-shadow: 0 0 #0000 !important;
|
|
}
|
|
|
|
button {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
/* Button variant styling lives entirely in the cva in components/ui/button.tsx
|
|
(the single source of truth). Don't re-add [data-slot='button'] rules here —
|
|
attribute selectors out-specify the Tailwind utilities and silently override
|
|
the variants. */
|
|
|
|
[data-slot='dropdown-menu-content'],
|
|
[data-slot='select-content'],
|
|
[data-slot='dialog-content'] {
|
|
border-color: var(--ui-stroke-secondary);
|
|
background: color-mix(in srgb, var(--ui-bg-elevated) 96%, transparent);
|
|
box-shadow: var(--shadow-md);
|
|
backdrop-filter: blur(0.75rem) saturate(1.08);
|
|
-webkit-backdrop-filter: blur(0.75rem) saturate(1.08);
|
|
}
|
|
|
|
[data-slot='dropdown-menu-item']:focus,
|
|
[data-slot='dropdown-menu-checkbox-item']:focus,
|
|
[data-slot='dropdown-menu-radio-item']:focus {
|
|
background: var(--ui-bg-tertiary);
|
|
color: var(--ui-text-primary);
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
[contenteditable]:not([contenteditable='false']),
|
|
[data-slot='aui_user-message-root'],
|
|
[data-slot='aui_assistant-message-content'],
|
|
[data-selectable-text='true'],
|
|
[data-selectable-text='true'] * {
|
|
-webkit-user-select: text;
|
|
user-select: text;
|
|
}
|
|
|
|
button,
|
|
[role='button'] {
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
img,
|
|
picture,
|
|
video,
|
|
canvas,
|
|
svg {
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
img,
|
|
video,
|
|
canvas {
|
|
-webkit-user-drag: none;
|
|
}
|
|
|
|
/* Shared input chrome — mirrors composer hover/focus FX. Unlayered to beat Tailwind utilities. */
|
|
.desktop-input-chrome {
|
|
--ring-pct: 18%;
|
|
--ring-fall: var(--dt-input);
|
|
background: color-mix(in srgb, var(--dt-card) 68%, transparent);
|
|
border-color: color-mix(
|
|
in srgb,
|
|
var(--dt-composer-ring) calc(var(--ring-pct) * var(--composer-ring-strength)),
|
|
var(--ring-fall)
|
|
);
|
|
box-shadow: none;
|
|
transition:
|
|
background-color 200ms ease-out,
|
|
border-color 200ms ease-out;
|
|
}
|
|
|
|
.desktop-input-chrome:hover {
|
|
--ring-pct: 30%;
|
|
background: color-mix(in srgb, var(--dt-card) 86%, transparent);
|
|
}
|
|
|
|
.desktop-input-chrome:focus {
|
|
--ring-pct: 45%;
|
|
--ring-fall: transparent;
|
|
background: var(--dt-card);
|
|
box-shadow: none;
|
|
outline: none;
|
|
}
|
|
|
|
.desktop-input-chrome[aria-invalid='true'] {
|
|
border-color: var(--dt-destructive);
|
|
}
|
|
|
|
@layer components {
|
|
.scrollbar-dt,
|
|
.scrollbar-dt * {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: color-mix(in srgb, var(--dt-midground) 18%, transparent) transparent;
|
|
}
|
|
|
|
.scrollbar-dt::-webkit-scrollbar,
|
|
.scrollbar-dt *::-webkit-scrollbar {
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
}
|
|
|
|
.scrollbar-dt::-webkit-scrollbar-track,
|
|
.scrollbar-dt::-webkit-scrollbar-corner,
|
|
.scrollbar-dt *::-webkit-scrollbar-track,
|
|
.scrollbar-dt *::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|
|
|
|
.scrollbar-dt::-webkit-scrollbar-thumb,
|
|
.scrollbar-dt *::-webkit-scrollbar-thumb {
|
|
background: color-mix(in srgb, var(--dt-midground) 18%, transparent);
|
|
border-radius: 9999rem;
|
|
border: 0.125rem solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.scrollbar-dt::-webkit-scrollbar-thumb:hover,
|
|
.scrollbar-dt *::-webkit-scrollbar-thumb:hover {
|
|
background: color-mix(in srgb, var(--dt-midground) 40%, transparent);
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.scrollbar-dt::-webkit-scrollbar-button,
|
|
.scrollbar-dt *::-webkit-scrollbar-button {
|
|
display: none;
|
|
}
|
|
|
|
/* Variant for portaled overlays (Radix DropdownMenu, Popover, etc.) that
|
|
render under document.body, outside the `.scrollbar-dt` scope on
|
|
#root. Same visual treatment, applied directly to the overlay
|
|
container so its (and only its) internal scrollbar is themed. */
|
|
.dt-portal-scrollbar {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: color-mix(in srgb, var(--dt-midground) 28%, transparent) transparent;
|
|
}
|
|
|
|
.dt-portal-scrollbar::-webkit-scrollbar {
|
|
width: 0.375rem;
|
|
height: 0.375rem;
|
|
}
|
|
|
|
.dt-portal-scrollbar::-webkit-scrollbar-track,
|
|
.dt-portal-scrollbar::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|
|
|
|
.dt-portal-scrollbar::-webkit-scrollbar-thumb {
|
|
background: color-mix(in srgb, var(--dt-midground) 28%, transparent);
|
|
border-radius: 9999rem;
|
|
border: 0.0625rem solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.dt-portal-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: color-mix(in srgb, var(--dt-midground) 50%, transparent);
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.dt-portal-scrollbar::-webkit-scrollbar-button {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Bottom clearance lives on [data-slot='aui_composer-clearance'] —
|
|
virtualized items unmount, so :nth-last-child can't fire reliably. */
|
|
|
|
[data-slot='aui_assistant-message-content'] {
|
|
padding-left: var(--message-text-indent);
|
|
font-size: var(--conversation-text-font-size);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
[data-slot='aui_assistant-message-root'] {
|
|
width: 100%;
|
|
}
|
|
|
|
[data-slot='aui_assistant-message-content'] .aui-md,
|
|
[data-slot='aui_assistant-message-content'] .aui-md :where(p, li, blockquote, table, pre) {
|
|
font-size: inherit;
|
|
}
|
|
|
|
/* Tailwind Typography sets `.prose :where(p) { margin: 1.25em }` (~16px). That
|
|
selector ties our `my-*` utility on specificity and wins on source order, so
|
|
paragraph spacing must be reclaimed here at higher specificity. One tight
|
|
top-margin (bottom zeroed to avoid doubling), first child reset to flush. */
|
|
[data-slot='aui_assistant-message-content'] .aui-md :where(p) {
|
|
margin-block: var(--paragraph-gap) 0;
|
|
}
|
|
|
|
/* First rendered element of a prose block is flush — the block-level gap above
|
|
(tool / paragraph) already provides the separation. Reach one level deep too:
|
|
Streamdown wraps blocks in a `div.space-y-*`, so the real first line is the
|
|
first child's first child. */
|
|
[data-slot='aui_assistant-message-content'] .aui-md > :first-child,
|
|
[data-slot='aui_assistant-message-content'] .aui-md > :first-child > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* Prose, tools, todos, and thinking all share one left edge (the message
|
|
content's --message-text-indent). No extra prose indent — a single gutter
|
|
reads cleaner than a ragged tool-vs-reply column. */
|
|
|
|
/* RTL/bidi chat text (#44150): each block resolves its own base direction from
|
|
its first strong char (UAX#9 plaintext). text-align:start makes that resolved
|
|
direction drive alignment too — load-bearing, since the user bubble pins
|
|
text-left. direction is never set, so chrome/layout/list-indent stay LTR (the
|
|
issue asks not to flip the whole UI). Covers assistant prose, user lines, and
|
|
both composers (main + edit share composer-rich-input). */
|
|
[data-slot='aui_assistant-message-content'] .aui-md :where(p, h1, h2, h3, h4, h5, h6, li, blockquote),
|
|
[data-slot='aui_user-inline-text'],
|
|
[data-slot='composer-rich-input'] {
|
|
unicode-bidi: plaintext;
|
|
text-align: start;
|
|
}
|
|
|
|
/* Inline code/KaTeX don't vote on direction and keep their own order: isolate
|
|
makes bidi treat each as one neutral, so a block that *starts* with `./run.sh`
|
|
then Arabic still resolves RTL, and the command's neutrals (dots/slashes)
|
|
aren't reordered by the surrounding RTL run. */
|
|
[data-slot='aui_assistant-message-content'] .aui-md :where(:not(pre) > code),
|
|
[data-slot='aui_user-inline-code'],
|
|
[data-slot='aui_assistant-message-content'] .aui-md .katex {
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
}
|
|
|
|
/* Fenced code stays LTR even inside an RTL list item/blockquote — never mirrors. */
|
|
[data-slot='aui_assistant-message-content'] .aui-md [data-slot='code-card'],
|
|
[data-slot='aui_user-fence'] {
|
|
direction: ltr;
|
|
text-align: left;
|
|
}
|
|
|
|
[data-slot='aui_user-message-root'] {
|
|
top: var(--sticky-human-top);
|
|
}
|
|
|
|
[data-slot='aui_user-message-root'],
|
|
[data-slot='aui_edit-composer-root'] {
|
|
font-size: var(--conversation-text-font-size);
|
|
}
|
|
|
|
/* Sticky human bubbles clamp to ~2 lines with a soft bottom fade so a long
|
|
prompt doesn't dominate the viewport. The clamp lifts on focus only (clicking
|
|
opens the edit composer, which shows the full text) — not on hover, so the
|
|
bubble doesn't jump as the pointer passes over it. No transition: the lift
|
|
happens in the same click that swaps in the edit composer, so animating it
|
|
just flashes a half-expanded bubble on the way in. */
|
|
.sticky-human-clamp {
|
|
cursor: pointer;
|
|
max-height: calc(2 * var(--dt-line-height) * var(--conversation-text-font-size) + 0.15rem);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sticky-human-clamp[data-clamped='true'] {
|
|
-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
|
|
mask-image: linear-gradient(to bottom, #000 55%, transparent);
|
|
}
|
|
|
|
.composer-human-message:focus-within .sticky-human-clamp {
|
|
max-height: min(var(--human-msg-full, 24rem), 24rem);
|
|
overflow-y: auto;
|
|
-webkit-mask-image: none;
|
|
mask-image: none;
|
|
}
|
|
|
|
/* The thread renders items in natural document flow (padding spacers, not
|
|
transforms) and @tanstack/react-virtual already adjusts scrollTop itself
|
|
when an off-screen turn is measured and its real height differs from the
|
|
220px estimate. The browser's native scroll anchoring (overflow-anchor:
|
|
auto) would adjust scrollTop for that SAME size delta, so the two
|
|
double-correct and the view lurches — most visibly on Windows mouse wheels,
|
|
whose coarse notches mount/measure several under-estimated turns per tick.
|
|
Opt out of native anchoring so only the virtualizer compensates. */
|
|
[data-slot='aui_thread-viewport'] {
|
|
overflow-anchor: none;
|
|
}
|
|
|
|
[data-slot='aui_thread-content'] {
|
|
max-width: var(--composer-width);
|
|
padding-inline: 1.5rem;
|
|
}
|
|
|
|
[data-slot='aui_intro'] {
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-bottom: var(--composer-measured-height);
|
|
text-align: center;
|
|
}
|
|
|
|
[data-slot='aui_intro'] > div {
|
|
max-width: min(var(--composer-width), 82vw);
|
|
}
|
|
|
|
[data-slot='aui_intro'] p:last-child {
|
|
max-width: 34rem;
|
|
margin-inline: auto;
|
|
color: var(--ui-text-tertiary);
|
|
font-size: 0.875rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.fit-text {
|
|
--fit-captured-length: initial;
|
|
--fit-support-sentinel: var(--fit-captured-length, 9999px);
|
|
|
|
display: flex;
|
|
container-type: inline-size;
|
|
}
|
|
|
|
.fit-text > [aria-hidden] {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.fit-text > :not([aria-hidden]) {
|
|
flex-grow: 1;
|
|
container-type: inline-size;
|
|
|
|
--fit-captured-length: 100cqi;
|
|
--fit-available-space: var(--fit-captured-length);
|
|
}
|
|
|
|
.fit-text > :not([aria-hidden]) > * {
|
|
--fit-support-sentinel: inherit;
|
|
--fit-captured-length: 100cqi;
|
|
--fit-ratio: tan(atan2(var(--fit-available-space), var(--fit-available-space) - var(--fit-captured-length)));
|
|
|
|
display: block;
|
|
inline-size: var(--fit-available-space);
|
|
font-size: clamp(
|
|
var(--fit-min, 1em),
|
|
1em * var(--fit-ratio),
|
|
var(--fit-max, infinity * 1px) - var(--fit-support-sentinel)
|
|
);
|
|
}
|
|
|
|
@container (inline-size > 0) {
|
|
.fit-text > :not([aria-hidden]) > * {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
@property --fit-captured-length {
|
|
syntax: '<length>';
|
|
initial-value: 0px;
|
|
inherits: true;
|
|
}
|
|
|
|
[data-slot='composer-root'] {
|
|
width: min(var(--composer-width), calc(100% - 2rem));
|
|
padding-bottom: var(--composer-shell-pad-block-end);
|
|
}
|
|
|
|
[data-slot='composer-root'] > .pointer-events-none {
|
|
background: linear-gradient(
|
|
to bottom,
|
|
transparent,
|
|
color-mix(in srgb, var(--ui-chat-surface-background) 88%, transparent)
|
|
) !important;
|
|
}
|
|
|
|
[data-slot='composer-surface'] {
|
|
border-color: var(--ui-stroke-secondary) !important;
|
|
}
|
|
|
|
[data-slot='composer-fade'] {
|
|
min-height: 2.375rem;
|
|
}
|
|
|
|
[data-slot='composer-rich-input'] {
|
|
color: var(--ui-text-primary);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
[data-slot='composer-rich-input']:empty::before {
|
|
color: var(--ui-text-tertiary) !important;
|
|
}
|
|
|
|
/* ── Composer fill — ONE var painted by the surface AND anything docked to it
|
|
(slash·@ popover, `?` help). State ladder sets the var; consumers just paint
|
|
`background: var(--composer-fill)`, so every state matches by construction.
|
|
The :has() rule is last on purpose: while a completion drawer is open it
|
|
beats focus/scroll and forces an OPAQUE fill (both mix endpoints solid) —
|
|
translucent glass can never match across the two layers because they sample
|
|
different backdrops. */
|
|
:root {
|
|
/* Fallback for drawers outside the main composer (e.g. edit-message). */
|
|
--composer-fill: color-mix(in srgb, var(--dt-card) 90%, var(--dt-background));
|
|
}
|
|
|
|
[data-slot='composer-root'] {
|
|
--composer-fill: color-mix(in srgb, var(--dt-card) 72%, transparent);
|
|
}
|
|
|
|
[data-slot='composer-root'][data-thread-scrolled-up] {
|
|
--composer-fill: color-mix(in srgb, var(--dt-card) 48%, transparent);
|
|
}
|
|
|
|
[data-slot='composer-root']:has([data-slot='composer-surface']:focus-within) {
|
|
--composer-fill: var(--ui-chat-bubble-background);
|
|
}
|
|
|
|
[data-slot='composer-root']:has([data-slot='composer-completion-drawer']) {
|
|
--composer-fill: color-mix(in srgb, var(--dt-card) 90%, var(--dt-background));
|
|
}
|
|
|
|
/* Tool/thinking blocks now live at message-text alignment (no leading
|
|
chevron column to escape into), so their headers and bodies share a
|
|
common left edge with the model's text. */
|
|
[data-slot='aui_assistant-message-content'] > [data-slot='tool-block'],
|
|
[data-slot='aui_assistant-message-content'] > [data-slot='aui_thinking-disclosure'] {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
[data-slot='aui_assistant-message-content'] .aui-md [data-streamdown='code-block'] code {
|
|
max-width: none;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
overflow-x: visible;
|
|
overflow-wrap: inherit;
|
|
vertical-align: baseline;
|
|
word-break: inherit;
|
|
white-space: inherit;
|
|
}
|
|
|
|
/* Streamdown's adapter wraps code fences in a `data-streamdown="code-block"`
|
|
container with its own card chrome. We render our own <CodeCard>, so this
|
|
strips the upstream chrome down to a layout-only passthrough. */
|
|
[data-slot='aui_assistant-message-content'] .aui-md [data-streamdown='code-block'] {
|
|
contain: none;
|
|
overflow: visible;
|
|
margin-block: var(--paragraph-gap) 0 !important;
|
|
padding: 0 !important;
|
|
gap: 0 !important;
|
|
border: 0 !important;
|
|
border-radius: 0 !important;
|
|
background: transparent !important;
|
|
color: inherit;
|
|
}
|
|
|
|
[data-slot='aui_assistant-message-content'] .aui-md [data-streamdown='code-block']:has(.aui-prose-fence) {
|
|
margin-block: 0 !important;
|
|
}
|
|
|
|
[data-slot='aui_assistant-message-content'] .aui-md [data-slot='code-card'] {
|
|
/* Streamdown nests blocks, so the container's child-combinator rhythm can't
|
|
reach the card. Carry the paragraph gap on the card itself (top-owned);
|
|
collapses cleanly with the wrapper's margin when one is present, and the
|
|
first-child reset still flushes a leading code block. */
|
|
margin-block: var(--paragraph-gap) 0;
|
|
position: relative;
|
|
transition:
|
|
border-color 180ms ease-out,
|
|
box-shadow 180ms ease-out,
|
|
background-color 180ms ease-out;
|
|
}
|
|
|
|
[data-slot='aui_assistant-message-content'] .aui-md [data-slot='code-card'][data-streaming='true'] {
|
|
animation:
|
|
code-card-stream-enter 180ms cubic-bezier(0.16, 1, 0.3, 1) both,
|
|
code-card-stream-glow 1.8s ease-in-out 180ms infinite alternate;
|
|
border-color: color-mix(in srgb, var(--dt-ring) 24%, var(--ui-stroke-tertiary));
|
|
box-shadow:
|
|
0 0 0 0.0625rem color-mix(in srgb, var(--dt-ring) 10%, transparent),
|
|
0 0.625rem 1.75rem color-mix(in srgb, var(--dt-ring) 8%, transparent);
|
|
}
|
|
|
|
[data-slot='aui_assistant-message-content']
|
|
.aui-md
|
|
[data-slot='code-card'][data-streaming='true']
|
|
[data-slot='code-card-body'] {
|
|
-webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 1.5rem), rgb(0 0 0 / 64%) 100%);
|
|
mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 1.5rem), rgb(0 0 0 / 64%) 100%);
|
|
}
|
|
|
|
[data-slot='aui_assistant-message-content'] .aui-md :not(pre) > code {
|
|
border: 0.0625rem solid var(--ui-inline-code-border);
|
|
background: var(--ui-inline-code-background);
|
|
color: var(--ui-inline-code-foreground);
|
|
}
|
|
|
|
[data-slot='aui_assistant-message-content'] .aui-md :where(.aui-shiki, .aui-shiki > pre) {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
[data-slot='aui_assistant-message-content'] .aui-md .aui-md-table {
|
|
border-spacing: 0;
|
|
}
|
|
|
|
[data-slot='aui_assistant-message-content'] .aui-md .aui-md-table > table,
|
|
[data-slot='aui_assistant-message-content'] .aui-md .aui-md-table thead,
|
|
[data-slot='aui_assistant-message-content'] .aui-md .aui-md-table tbody,
|
|
[data-slot='aui_assistant-message-content'] .aui-md .aui-md-table tr,
|
|
[data-slot='aui_assistant-message-content'] .aui-md .aui-md-table th,
|
|
[data-slot='aui_assistant-message-content'] .aui-md .aui-md-table td {
|
|
margin: 0 !important;
|
|
margin-block-start: 0 !important;
|
|
margin-block-end: 0 !important;
|
|
}
|
|
|
|
/* Tool / thinking blocks are scaffolding around the model's reply, so we
|
|
keep them transparent and fade them slightly. The reading column (prose)
|
|
stays at full strength; scaffolding lifts back to full opacity on
|
|
hover/focus so it stays legible when the user actually wants to read it. */
|
|
[data-slot='tool-block'],
|
|
[data-slot='aui_thinking-disclosure'] {
|
|
background: transparent !important;
|
|
}
|
|
|
|
[data-slot='aui_assistant-message-content'] > :is([data-slot='tool-block'], [data-slot='aui_thinking-disclosure']) {
|
|
opacity: 0.67;
|
|
transition: opacity 120ms ease-out;
|
|
}
|
|
|
|
[data-slot='aui_assistant-message-content']
|
|
> :is([data-slot='tool-block'], [data-slot='aui_thinking-disclosure']):is(:hover, :focus-within) {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Conversation block rhythm. assistant-ui renders each range as a direct child
|
|
of the message content with no per-part wrapper, so adjacency rules cover
|
|
every pairing — first block needs no reset, nested tool rows are untouched.
|
|
Two tiers: scaffolding (tool / thinking) gets a roomy block gap so it reads
|
|
as separate from the reply; consecutive prose collapses to a tight paragraph
|
|
rhythm so split-out text parts don't look like a big gap. */
|
|
/* Scaffolding adjacent to anything → roomy block gap. */
|
|
[data-slot='aui_assistant-message-content']
|
|
> :is([data-slot='tool-block'], [data-slot='aui_thinking-disclosure'])
|
|
+ :is([data-slot='tool-block'], [data-slot='aui_thinking-disclosure'], .aui-md),
|
|
[data-slot='aui_assistant-message-content']
|
|
> .aui-md
|
|
+ :is([data-slot='tool-block'], [data-slot='aui_thinking-disclosure']) {
|
|
margin-top: var(--turn-block-gap);
|
|
}
|
|
|
|
/* Prose ↔ prose → tight paragraph rhythm, matching in-block paragraph spacing. */
|
|
[data-slot='aui_assistant-message-content'] > .aui-md + .aui-md {
|
|
margin-top: var(--paragraph-gap);
|
|
}
|
|
|
|
/* Message action bars — flat icon hits with default dim; only the hovered/focused control is full-strength. */
|
|
[data-slot='aui_msg-actions'] button {
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
gap: 0;
|
|
height: auto;
|
|
width: auto;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
color: var(--color-muted-foreground);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
[data-slot='aui_msg-actions'] button:disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
[data-slot='aui_msg-actions'] button:hover {
|
|
background: transparent;
|
|
color: var(--color-foreground);
|
|
opacity: 1;
|
|
}
|
|
|
|
[data-slot='aui_msg-actions'] button:active {
|
|
background: transparent;
|
|
}
|
|
|
|
[data-slot='aui_msg-actions'] button:focus-visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
[data-slot='aui_msg-actions'] button svg {
|
|
width: 0.875rem;
|
|
height: 0.875rem;
|
|
}
|
|
|
|
/* Live thinking preview window. Pairs with the ResizeObserver in
|
|
ThinkingDisclosure that pins scrollTop to the bottom — older lines fade
|
|
into the top mask while the latest tokens settle in below. */
|
|
.thinking-preview {
|
|
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 28%, black 100%);
|
|
mask-image: linear-gradient(to bottom, transparent 0%, black 28%, black 100%);
|
|
}
|
|
|
|
@keyframes code-card-stream-enter {
|
|
from {
|
|
opacity: 0.74;
|
|
transform: translateY(0.375rem);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes code-card-stream-glow {
|
|
from {
|
|
border-color: color-mix(in srgb, var(--dt-ring) 18%, var(--ui-stroke-tertiary));
|
|
box-shadow:
|
|
0 0 0 0.0625rem color-mix(in srgb, var(--dt-ring) 6%, transparent),
|
|
0 0.5rem 1.5rem color-mix(in srgb, var(--dt-ring) 5%, transparent);
|
|
}
|
|
|
|
to {
|
|
border-color: color-mix(in srgb, var(--dt-ring) 32%, var(--ui-stroke-tertiary));
|
|
box-shadow:
|
|
0 0 0 0.0625rem color-mix(in srgb, var(--dt-ring) 12%, transparent),
|
|
0 0.75rem 2rem color-mix(in srgb, var(--dt-ring) 10%, transparent);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
[data-slot='aui_assistant-message-content'] .aui-md [data-slot='code-card'][data-streaming='true'] {
|
|
animation: none;
|
|
}
|
|
}
|
|
|