José Almeida
b001aa1eb8
* feat(web): introduce unified AppSidebar and retire legacy nav surfaces
Mounts a single collapsible AppSidebar at the root layout that replaces the
former WorkspaceRail, OfficeSidebar, and dockview-embedded sidebar pane.
Wires per-section expand + collapse state through a new UI slice with
localStorage persistence, ports projects/agents/settings/tasks sections, and
trims integrations / quick-chat / settings buttons + the home breadcrumb
from the dockview top bar (debug-only MoreToolsMenu kept). Strips the
sidebar column from every preset and the panel registry; persisted
sidebar panels are dropped by the existing sanitize layer at restore time.
* test(web): point workflow-filter e2e at AppSidebar's Home link
The dockview top bar no longer renders the IconHome breadcrumb after the
unified sidebar landed — the home navigation now lives in AppSidebar's
primary nav. Update the workflow-filter spec to click that link instead.
* feat(web): wire app-sidebar primary controls, nested settings, and footer migration
Gates office-only nav (Inbox, Agents, Projects, New Task) behind the office
feature flag, renames Tasks → Kanban as the bottom flex-grow section, replaces
the gradient workspace picker with a minimal trigger when office is off, and
moves Stats/Improve/What's-New/Office out of the kanban top bar into the
AppSidebar footer + a dedicated Integrations section. Expands Settings into a
collapsible deep tree mirroring the old SettingsAppSidebar so /settings pages
can drop their nested SidebarProvider.
* feat(web): make app-sidebar resizable and inline task top bar actions
Adds a persistent drag-resize handle on the AppSidebar's right edge that
clamps between APP_SIDEBAR_EXPANDED_WIDTH and 30vw; width is stored on the
appSidebar slice and persisted to localStorage. Drops the dockview top bar's
overflow popover (TopbarActionOverflow) in favor of always-inline clusters,
and replaces the debug "More tools" dropdown with a single debug toggle button.
* feat(web): polish app-sidebar headers and consolidate task views
Section headers now lead with a clean uppercase label, drop the mono
clash, lift contrast from /60 to /70, and end with the collapse chevron
at the right so the section body aligns flush under the label.
The Tasks section's filter bar (view chips + gear in a card-tinted
strip) is replaced by a compact view dropdown that lives in the section
header. Drag-to-reorder lives in the existing filter popover, which is
now reachable from the same gear button.
Settings moves below Tasks so the kanban list keeps the flex-grow seat
in the sidebar.
* feat(web): move settings group chevrons to the right
* fix(web): drop chat from home topbar; calm tasks group headers
The kanban top bar's Quick Chat button is removed now that Quick Chat
lives in the AppSidebar; workspaceId stops being threaded into the
tablet and desktop header variants.
Group headers inside the Tasks section (kanban workflow steps) lose
the opaque background strip and the section-label uppercase styling
so they read as inline subgroup rows, not duplicate section dividers.
The tasks-section wrapper drops its negative margin so the group rows
sit flush under the TASKS label instead of bleeding out past it.
* fix(web): restore agent logos on settings tree profile leaves
SettingsLeaf gains a leadingIcon slot for pre-rendered visuals; agents
group passes <AgentLogo agentName={agent.name}> so each profile row
shows its agent's logo like it did before the old SettingsAppSidebar
was retired.
* feat(web): brand the sidebar, move New Task off the kanban top bar
The Add task button (CreateTaskTopbarButton) leaves both the desktop
and tablet kanban headers; New Task is now an unconditional primary
nav item on the AppSidebar, falling back to a disabled affordance when
no workspace is active.
AppSidebar header gains a Kandev wordmark that links to /, with a
single-letter K mark in collapsed-rail mode. PageTopbar's root variant
no longer renders the parent brand label when backLabel is empty, so
the home view's top-left "Kandev" goes away in favor of the sidebar.
* feat(web): unbind sidebar toggle by default; drop Home from breadcrumbs
TOGGLE_SIDEBAR's configurable default is now UNBOUND_SHORTCUT (the new
sentinel for "no binding"); matchesShortcut already returns false on
an empty key, so the keybind hook needs no change. Keyboard shortcuts
settings show "Unbound", expose a Clear (X) button when a custom
binding is set, and the reset icon falls back to unbound for entries
whose default is unbound.
PageTopbar's breadcrumb variant no longer prepends the Home back-link
when backHref is "/" (the AppSidebar provides Home navigation).
* feat(web): move New Task into the sidebar, retire the workspace selector
- Extract AppSidebarNewTaskItem (office vs regular create dialog) with tests
- Drop the Workspace selector from the kanban display dropdown and mobile
menu sheet; the sidebar workspace picker is now the sole switcher
- Factor SectionHeader out of AppSidebarSection; animate fixed sections via
Collapsible while the grow (Tasks) section stays flex-driven
- Polish brand header, share SIDEBAR_ITEM_ACTIVE accent-bar classes, move
task group chevrons to the right, drop the task-item selected fill
- Bump dockview layout keys to v3 and filter the orphaned 'sidebar' column
so pre-AppSidebar default layouts no longer render a broken grid
- Point the cross-workspace isolation e2e at the sidebar picker
* feat(web): sidebar settings mode, subtask shortcut, accordion settings nav
- Restore subtask creation: the sidebar New Task row now shows a trailing
subtask affordance when viewing a task (regular mode), reopening the
NewSubtaskDialog the retired dockview header dropdown used to provide
- Fix settings pages not scrolling: scroll the content region (topbar stays
pinned) via min-h-0 + overflow-y-auto
- Add a footer gear that toggles a settings-only sidebar takeover; the gear
spins on toggle. Mode is transient (never persisted) and force-expands a
collapsed rail on entry
- Make the settings nav a single-open accordion: opening one top-level group
closes the others and reveals its subsections; route changes re-sync the
open group. Extract the tree into a reusable SettingsTree
- Repoint subtask e2e specs at the new sidebar affordance
* test(web): restore create-task e2e flow after New Task moved to sidebar
The New Task relocation removed the kanban-header create-task-button and made
the sidebar entry auto-navigate + open the office dialog under the e2e profile
(office on), breaking ~20 specs that drive the regular task-create dialog.
- Give the sidebar New Task the create-task-button testid so KanbanPage
resolves it again
- Drop the post-create auto-navigation so creating a task stays on the board
(matches the retired kanban button; specs find/click the new card)
- Ungate the subtask affordance from office mode (subtasks use the compact
NewSubtaskDialog in both modes, as the old dropdown did)
- Add a useRegularMode() helper that runs a spec file with KANDEV_FEATURES_OFFICE
disabled (backend.restart bracket) and apply it to the 18 create-task specs
- Point the System sidebar-navigation spec at a /settings/system page so the
single-open settings accordion has that group expanded
Validated: create-task, create-task-disabled-tooltip, create-task-branch-selector,
and subtask all green (modulo pre-existing idleInput agent-timing flakes that
CI retries absorb).
* fix(web): sidebar task navigation, settings-mode close + transitions
- Clicking a task in the global sidebar from a non-task page now navigates to
the task route (mounts the dockview) instead of only rewriting the URL via an
in-place layout switch that assumed the dockview was already mounted
- Make the settings-mode 'Settings' header a close affordance (the footer gear
is far from the tree); clicking it exits the takeover regardless of which
group is expanded, and it fades in when opened
- Fade in the Tasks (grow) section content on expand, matching the other
sections' animated reveal
- Enable next-themes disableTransitionOnChange so dark/light flips switch every
surface in the same instant rather than each animating at its own duration
- Add a regression e2e for sidebar→dockview navigation
* fix(web): clear sidebar task highlight when off the task route
The AppSidebar is global, so tasks.activeTaskId lingered after navigating Home,
leaving the last-opened task visually selected in the sidebar. Gate the
selected/active highlight by route — only highlight while on /t/ or
/office/tasks/. Expose data-active on the sidebar task item for testability.
Adds an e2e: entering a task highlights it; returning Home clears it.
* fix(web): never build the dockview default layout at zero width
On a fresh client-side navigation into a task the dockview can mount before the
grid has painted, so measureDockviewContainer returned api.width/height = 0.
Building the default layout at width 0 makes dockview collapse the horizontal
columns into a vertical stack (chat / files+changes / terminal) instead of the
intended side-by-side layout. Fall back to the viewport when neither the live
container nor the api report a usable size; the resize observer then snaps the
grid to the exact container size.
TDD: dockview-measure.test.ts covers the zero-size fallback.
* fix(web): keep the default layout horizontal when swapping chat for the session tab
Entering a task rendered a vertical stack (chat on top, files/changes in the
middle, terminal at the bottom) instead of the side-by-side default. The
chat->session-tab swap removed the 'chat' placeholder BEFORE adding the session
panel; when chat was the only panel in the center group, removing it destroyed
that group, the stored centerGroupId went stale, resolveInitialPosition
returned undefined, and the session panel was appended as a new row — flipping
the grid root to VERTICAL with three stacked groups.
Fix: add the session panel into chat's live group first (resolveInitialPosition
now prefers the chat panel's group), THEN remove the chat placeholder, so the
center group never empties and the horizontal split is preserved.
Also fixes the pre-existing pane-resize reload/clamp e2e failures, which were
the same collapse. TDD: task-default-layout.spec.ts asserts the right column
sits beside chat.
* fix(web): remove the sidebar Settings section; settings is gear-only
Settings was still a collapsible nav section in the sidebar AND auto-expanded on
/settings routes. That also caused the reported bug: toggling the footer gear
off while on a settings page revealed the normal sidebar with the Settings
section already expanded, so the settings tree appeared to 'not close'.
- Drop the Settings nav section (and its /settings route auto-expand) — the
settings tree is reached only via the footer gear takeover
- Delete the now-unused sidebar settings-section component
- e2e: gear opens the tree and closes it even after navigating into a section
* fix(web): show office sidebar sections only while inside Office
Inbox, Projects, and Agents were gated on the office feature flag, so they were
always visible when the feature was enabled. Gate them on actually being in the
Office surface (an /office route, reached via the footer Office button) via a
new useInOffice() hook — they stay hidden in the regular workspace and appear
only after entering Office.
Unit test for the hook; e2e (office fixture) asserts the sections appear on
/office and are absent on the regular home.
* fix(web): drop the colorful workspace selector, restore the minimal one
The workspace picker swapped to a gradient/initials trigger (and gradient
swatches in the dropdown) whenever office was enabled. Always use the plain
name + chevron trigger and drop the gradient swatches, matching the previous
design. Removes the now-unused workspace-gradient helper.
* fix(web): align sidebar header, scope office New Task, exit settings on nav
- Drop the doubled right border: the resize-handle hairline is transparent at
rest, leaving the aside's border-r as the single edge (highlights on hover).
- Collapse the expanded sidebar header into one h-10 row (brand · workspace
picker · collapse) so it lines up with the page/dockview top bar.
- Gate the sidebar New Task dialog on useInOffice() (actual /office route)
instead of the bare office feature flag, so Kanban mode keeps the classic
create dialog while office is enabled.
- Close the settings takeover when navigating off the /settings surface
(Home, Kandev brand, Office, etc.), tracked on a real pathname change so the
gear still opens it in place and in-tree navigation keeps it open.
- Lock in the already-working collapsed-gear-expands behaviour with an e2e.
Tests: new-task-item unit (route gating), settings-gear e2e (Home closes,
collapsed gear expands), office gating e2e (Kanban vs Office dialog).
* fix(web): realign task top bar to h-10, refine sidebar workspace picker
- Pin TaskTopBar to h-10 so its bottom border lines up exactly with the
sidebar header (and the PageTopbar) — previously it had no fixed height and
sat ~2px off, breaking the seam across the sidebar/content edge.
- Redesign the workspace picker as a compact, muted secondary control inlined
after the Kandev brand: brand and workspace share text-sm so they sit on a
common baseline, with a faint '/' separator; the workspace reads as muted and
the brand stays primary.
- Drop the workspace switcher (and its irrelevant folder glyph) from the
collapsed rail — collapsed now shows just brand + expand.
Adds an e2e that measures the task top bar bottom edge against the sidebar
header (within 1px).
* fix(web): replace the /github and /gitlab presets rail with a scope bar
The integration dashboards rendered their own w-60 border-r presets sidebar
right next to the global AppSidebar — a redundant 'double sidebar' that looked
off after the UI overhaul unified navigation.
On desktop, fold the presets into a horizontal scope bar above the list
toolbar: the bounded, common controls (PR/Issue kind + preset pills, grouped
Inbox/Created) stay visible as pills, while the unbounded saved-queries list
collapses into a 'Saved' dropdown so the bar never grows tall. The dashboard is
now single-column like Kanban/Tasks. Mobile is unchanged — the vertical
PresetsSidebar still lives in the hamburger sheet.
Adds a desktop scope-bar e2e (presets + kind switching, no inline rail) and
repoints the mobile page object at the new scope-bar testid.
* fix(web): address CodeRabbit/cubic review — a11y, dedup, dup nav, lazy-load
- Sidebar: fix Tasks auto-expand route prefix (/task/ -> /t/); forwardRef the
workspace-picker trigger so DropdownMenuTrigger asChild wires it; aria-label
the icon-only Add agent and keyboard-shortcut buttons.
- Settings tree: drop the duplicate top-level Editors leaf (lives under
General); broaden the System group active state to all /settings/system.
- CSS: honour prefers-reduced-motion for .sidebar-fade-in.
- Storage: bump the dockview maximize namespace to v3 in lockstep with the
layout namespace so stale pre-v3 maximize blobs are discarded.
- Integration dashboards: extract a shared IntegrationScopeBar base so the
github/gitlab scope bars are thin wrappers (de-dup + under the component
size cap). Reuse useConfiguredIntegrationLinks in the sidebar Integrations
section instead of recomputing availability.
- Lazy-load the office NewTaskDialog so it's not bundled on non-office routes.
- tasks-view-picker: use onSelect for keyboard-activatable menu items.
- Tests: normalize group x by container left in task-default-layout; refresh
stale subtask-flow comments; async findByTestId for the lazy office dialog.
* fix(web): gate the scope-bar delete button pointer-events while hidden
The opacity-0 delete button stayed clickable, so a click on the right side of a
saved-query row could hit the invisible button instead of selecting the query.
Add pointer-events-none until the row is hovered (group-hover:pointer-events-auto).
* fix(web): use onSelect for scope-bar saved-query menu items (keyboard a11y)
Radix DropdownMenuItem fires onSelect for pointer AND keyboard activation;
onClick missed keyboard users. The nested delete button stops pointerdown so it
isn't treated as a select of the saved query.
* fix(web): mobile sidebar hide, gear-gated settings test, office paused badge, picker a11y
- AppSidebar is now hidden below md (mobile uses its own per-surface nav); it
was an always-on absolute overlay covering mobile content.
- Restore the sidebar-agent-paused-badge testid on the office agent row.
- Update system sidebar-navigation spec to open the gear (settings is a
gear-gated takeover in the overhaul).
- Workspace picker menu items use onSelect for keyboard a11y.
* test(web): reconcile main's E2E suite with the unified-sidebar overhaul
Merging main un-gated the full E2E suite (was behind safe-to-test); ~50 of
main's tests asserted pre-overhaul UI. Updated them to the overhaul:
- Delete obsolete dockview-embedded-sidebar resize tests (feature removed);
keep the right-pane resize tests.
- Scope locators where tasks now appear in BOTH the page and the global
AppSidebar list (intended) — task-list, task-list-filters, pr-status-badge.
- Adapt sidebar-filter specs to the new TasksViewPicker (gear popover +
view-chip dropdown) and its page object.
- Settings now reached via the footer gear (not the topbar); Improve Kandev
opens from the sidebar footer; office nav folded into the AppSidebar — update
those specs (office verified in CI; can't run locally).
- session-layout: handle the new close-terminal confirm dialog; multi-session
and tab-management: foreground the (now backgrounded) chat tab after sidebar
task switches.
- Skip create-task-url-reopen-no-branches: its provider-branch flow (code
identical to main) is broken only by the office-off backend restart this PR
forces via useRegularMode — a harness interaction, not an app regression.
* test(web): fix create-task-url-reopen branch listing (reload to drop stale cache)
Un-skipped and fixed properly. Root cause: during the URL-paste/registration
flow the frontend can transiently fetch branches for the freshly-registered
provider repo before its background clone settles; useBranches caches that early
empty result as terminal (if (isLoaded) return), so re-picking the repo never
re-lists. Reload before the second dialog open drops the in-memory branch cache
so branches list fresh from the backend (verified: the backend returns them).
The provider-API path and product behaviour are unchanged from main.
* fix(web): restore mobile search toggle + reconcile remaining E2E with overhaul
- Restore main's mobile-search-toggle in kanban-header-mobile (my earlier
--ours merge resolution dropped it, breaking the mobile-kanban search tests).
- Office specs: expand the collapsed Agents/Projects sections before asserting
their rows, and scope office-tasks-page locators to <main>. [CI-verified]
- mobile-task-list-search / mobile-voice-mode: scope task titles to the table
and drop the obsolete data-sidebar=trigger assertion.
- app-sidebar.test mock: add settingsMode, toggleAppSidebarSettingsMode, and the
integrations section key.
- sidebar-filter page object: scope chipMenu to the menu holding the view chips.
* test(web): finish E2E reconciliation — office sections, session timing, robustness
- agent-error-handling: expand the collapsed Agents section before the paused
badge check.
- office execution-indicator/task-sorting: wait for a non-empty .font-mono
identifier (assigned async by the backend).
- session-layout: foreground the (CI-backgrounded) chat tab before the idle
check; make the close-terminal confirm dialog optional (busy heuristic is
timing-dependent).
- workspace-switch-isolation: run office-off so the picker switches in place
instead of redirecting to /office (which needs onboarding this fixture skips).
- app-sidebar-page: condense JSDoc to one line per project convention.
* test(web): match main's office identifier assertion (revert over-scoping)
The round-2 office agent scoped the .font-mono identifier check to <main> too,
but only the task TITLE needed scoping for the sidebar duplication. The office
task identifier is empty in the e2e seed (backend-assigned, not populated here),
so the <main>-scoped non-empty filter found nothing. Revert the identifier
assertion to main's exact form (first .font-mono on the page); keep the title
scoped to <main>.
* test(web): restore non-empty .font-mono filter for office identifier checks
Per review: wait for the backend-assigned (non-empty) identifier rather than the
empty span. Unscoped so it finds the identifier wherever it renders, 15s window.
* test(web): fix office identifier + realtime-dashboard specs at the root cause
Ran office specs locally (they DO run here) and root-caused all three:
- execution-indicator / task-sorting: the office task identifier is empty in
e2e — tasks are seeded via the core /api/v1/tasks route, which bypasses the
office identifier-assignment flow (the workspace KAN prefix only applies to
office-flow-created tasks). Main's .font-mono.first() was a false-positive
matching an element the overhaul removed. Assert the identifier COLUMN renders
(attached to the row) instead of a value e2e never produces.
- realtime-dashboard: the Recent Tasks card is fed by dashboard.recent_tasks via
useOfficeRefetch on office WS events; a core-route task's office event is async
so the in-place refetch is genuinely flaky. Reload for the deterministic SSR
dashboard fetch (what a user sees on revisit); the WS-refetch mechanism stays
covered by the sibling cross-workspace test.
1539 lines
39 KiB
CSS
1539 lines
39 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@import "shadcn/tailwind.css";
|
|
@import "@kandev/theme/fonts.css";
|
|
@import "dockview-react/dist/styles/dockview.css";
|
|
@import "./dockview-theme.css";
|
|
|
|
@source "../components/**/*.{js,ts,jsx,tsx}";
|
|
@source "../../packages/ui/src/**/*.{js,ts,jsx,tsx}";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-sans);
|
|
--font-mono:
|
|
"Monaspace Neon", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
--font-mono-size: 12px;
|
|
--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);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-ring: var(--ring);
|
|
--color-input: var(--input);
|
|
--color-border: var(--border);
|
|
--color-destructive: var(--destructive);
|
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
--color-success: var(--success);
|
|
--color-success-foreground: var(--success-foreground);
|
|
--color-warning: var(--warning);
|
|
--color-warning-foreground: var(--warning-foreground);
|
|
--color-info: var(--info);
|
|
--color-info-foreground: var(--info-foreground);
|
|
--color-running: var(--running);
|
|
--color-running-foreground: var(--running-foreground);
|
|
--color-pending: var(--pending);
|
|
--color-pending-foreground: var(--pending-foreground);
|
|
--color-remote: var(--remote);
|
|
--color-remote-foreground: var(--remote-foreground);
|
|
--color-archived: var(--archived);
|
|
--color-archived-foreground: var(--archived-foreground);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-card: var(--card);
|
|
--radius-sm: var(--radius);
|
|
--radius-md: var(--radius);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: var(--radius);
|
|
--radius-2xl: var(--radius);
|
|
--radius-3xl: var(--radius);
|
|
--radius-4xl: var(--radius);
|
|
}
|
|
|
|
:root {
|
|
--font-geist-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
--font-sans: "Figtree", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
--font-geist-mono:
|
|
"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono",
|
|
"Courier New", monospace;
|
|
--background: oklch(1 0 0);
|
|
--foreground: oklch(0.145 0 0);
|
|
--card: oklch(1 0 0);
|
|
--card-foreground: oklch(0.145 0 0);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.145 0 0);
|
|
--primary: oklch(0.51 0.23 277);
|
|
--primary-foreground: oklch(0.96 0.02 272);
|
|
--secondary: oklch(0.967 0.001 286.375);
|
|
--secondary-foreground: oklch(0.21 0.006 285.885);
|
|
--muted: oklch(0.97 0 0);
|
|
--muted-foreground: oklch(0.556 0 0);
|
|
--accent: oklch(0.68 0.18 276);
|
|
--accent-foreground: oklch(0.98 0 0);
|
|
--destructive: oklch(0.58 0.22 27);
|
|
--destructive-foreground: oklch(0.96 0.02 27);
|
|
--success: oklch(0.58 0.12 150);
|
|
--success-foreground: oklch(0.982 0.01 150);
|
|
--warning: oklch(0.7 0.13 78);
|
|
--warning-foreground: oklch(0.23 0.035 72);
|
|
--info: oklch(0.58 0.12 205);
|
|
--info-foreground: oklch(0.982 0.01 205);
|
|
--running: var(--primary);
|
|
--running-foreground: var(--primary-foreground);
|
|
--pending: oklch(0.556 0 0);
|
|
--pending-foreground: oklch(0.985 0 0);
|
|
--remote: oklch(0.57 0.11 185);
|
|
--remote-foreground: oklch(0.982 0.01 185);
|
|
--archived: oklch(0.556 0 0);
|
|
--archived-foreground: oklch(0.985 0 0);
|
|
--border: oklch(0.922 0 0);
|
|
--input: oklch(0.922 0 0);
|
|
--ring: oklch(0.708 0 0);
|
|
--chart-1: oklch(0.79 0.1 275);
|
|
--chart-2: oklch(0.68 0.16 277);
|
|
--chart-3: oklch(0.59 0.2 277);
|
|
--chart-4: oklch(0.51 0.23 277);
|
|
--chart-5: oklch(0.46 0.21 277);
|
|
--radius: 0.375rem;
|
|
--sidebar: oklch(0.985 0 0);
|
|
--sidebar-foreground: oklch(0.145 0 0);
|
|
--sidebar-primary: oklch(0.51 0.23 277);
|
|
--sidebar-primary-foreground: oklch(0.96 0.02 272);
|
|
--sidebar-accent: oklch(0.97 0 0);
|
|
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
--sidebar-border: oklch(0.922 0 0);
|
|
--scrollbar-thumb: oklch(0.78 0 0);
|
|
--scrollbar-thumb-hover: oklch(0.66 0 0);
|
|
--scrollbar-track: var(--background);
|
|
--sidebar-ring: var(--ring);
|
|
|
|
--git-addition: 63 185 80;
|
|
--git-deletion: 244 112 103;
|
|
}
|
|
|
|
.dark {
|
|
--background: #181818;
|
|
--foreground: #d4d4d4;
|
|
--card: #1f1f1f;
|
|
--card-foreground: #d4d4d4;
|
|
--popover: #222222;
|
|
--popover-foreground: #d4d4d4;
|
|
--primary: oklch(0.59 0.2 277);
|
|
--primary-foreground: oklch(0.96 0.02 272);
|
|
--secondary: #2a2a2a;
|
|
--secondary-foreground: #d4d4d4;
|
|
--muted: #2a2a2a;
|
|
--muted-foreground: #888888;
|
|
--accent: oklch(0.62 0.18 276);
|
|
--accent-foreground: #d4d4d4;
|
|
--destructive: oklch(0.704 0.191 22.216);
|
|
--destructive-foreground: #d4d4d4;
|
|
--success: oklch(0.68 0.12 150);
|
|
--success-foreground: oklch(0.16 0.025 150);
|
|
--warning: oklch(0.78 0.12 78);
|
|
--warning-foreground: oklch(0.19 0.035 72);
|
|
--info: oklch(0.7 0.11 205);
|
|
--info-foreground: oklch(0.16 0.025 205);
|
|
--running: var(--primary);
|
|
--running-foreground: var(--primary-foreground);
|
|
--pending: oklch(0.708 0 0);
|
|
--pending-foreground: oklch(0.145 0 0);
|
|
--remote: oklch(0.68 0.11 185);
|
|
--remote-foreground: oklch(0.16 0.025 185);
|
|
--archived: oklch(0.708 0 0);
|
|
--archived-foreground: oklch(0.145 0 0);
|
|
--border: #2a2a2a;
|
|
--input: #2a2a2a;
|
|
--ring: #555555;
|
|
--chart-1: oklch(0.79 0.1 275);
|
|
--chart-2: oklch(0.68 0.16 277);
|
|
--chart-3: oklch(0.59 0.2 277);
|
|
--chart-4: oklch(0.51 0.23 277);
|
|
--chart-5: oklch(0.46 0.21 277);
|
|
--sidebar: #171717;
|
|
--sidebar-foreground: #d4d4d4;
|
|
--sidebar-primary: oklch(0.68 0.16 277);
|
|
--sidebar-primary-foreground: oklch(0.96 0.02 272);
|
|
--sidebar-accent: #2a2a2a;
|
|
--sidebar-accent-foreground: #d4d4d4;
|
|
--sidebar-border: #262626;
|
|
--scrollbar-thumb: rgba(100, 100, 100, 0.5);
|
|
--scrollbar-thumb-hover: rgba(130, 130, 130, 0.6);
|
|
--scrollbar-track: var(--background);
|
|
--sidebar-ring: var(--ring);
|
|
|
|
--git-addition: 63 185 80;
|
|
--git-deletion: 244 112 103;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--scrollbar-thumb) transparent;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|
|
|
|
*::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
background: var(--scrollbar-track);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background: var(--scrollbar-thumb);
|
|
border-radius: 8px;
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background: var(--scrollbar-thumb-hover);
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
/* xterm.js scrollbar styling */
|
|
.xterm .xterm-scrollable-element > .scrollbar {
|
|
width: 10px !important;
|
|
right: 0 !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.xterm .xterm-scrollable-element > .scrollbar > .slider {
|
|
background: var(--scrollbar-thumb) !important;
|
|
border-radius: 8px !important;
|
|
width: 6px !important;
|
|
left: 2px !important;
|
|
}
|
|
|
|
.xterm .xterm-scrollable-element > .scrollbar:hover > .slider {
|
|
background: var(--scrollbar-thumb-hover) !important;
|
|
}
|
|
|
|
@layer utilities {
|
|
.overflow-wrap-anywhere {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Thin scrollbar for menus */
|
|
.scrollbar-thin {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--scrollbar-thumb) transparent;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-track {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background: var(--scrollbar-thumb);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
|
background: var(--scrollbar-thumb-hover);
|
|
}
|
|
|
|
/* Safe area padding for iPhone notch and home indicator */
|
|
.pb-safe {
|
|
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
}
|
|
|
|
.pt-safe {
|
|
padding-top: env(safe-area-inset-top, 0px);
|
|
}
|
|
|
|
.pl-safe {
|
|
padding-left: env(safe-area-inset-left, 0px);
|
|
}
|
|
|
|
.pr-safe {
|
|
padding-right: env(safe-area-inset-right, 0px);
|
|
}
|
|
|
|
/* Safe area height for spacer elements */
|
|
.h-safe {
|
|
height: env(safe-area-inset-bottom, 0px);
|
|
}
|
|
}
|
|
|
|
/* Grid Spinner - 3x3 cube animation */
|
|
@keyframes spinner-grid {
|
|
0%,
|
|
70%,
|
|
100% {
|
|
transform: scale3d(0.5, 0.5, 1);
|
|
}
|
|
35% {
|
|
transform: scale3d(0, 0, 1);
|
|
}
|
|
}
|
|
|
|
.spinner-grid {
|
|
display: inline-grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 0.15em;
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
.spinner-grid-cube {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: currentColor;
|
|
animation: spinner-grid 1.3s ease-in-out infinite;
|
|
}
|
|
|
|
.spinner-grid-cube:nth-child(1) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
.spinner-grid-cube:nth-child(2) {
|
|
animation-delay: 0.3s;
|
|
}
|
|
.spinner-grid-cube:nth-child(3) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
.spinner-grid-cube:nth-child(4) {
|
|
animation-delay: 0.1s;
|
|
}
|
|
.spinner-grid-cube:nth-child(5) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
.spinner-grid-cube:nth-child(6) {
|
|
animation-delay: 0.3s;
|
|
}
|
|
.spinner-grid-cube:nth-child(7) {
|
|
animation-delay: 0s;
|
|
}
|
|
.spinner-grid-cube:nth-child(8) {
|
|
animation-delay: 0.1s;
|
|
}
|
|
.spinner-grid-cube:nth-child(9) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
@keyframes border-flash-glow {
|
|
0%,
|
|
100% {
|
|
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 20%, transparent);
|
|
}
|
|
50% {
|
|
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 60%, transparent);
|
|
}
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
}
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
@keyframes shimmer-vertical {
|
|
0% {
|
|
transform: translateY(-100%);
|
|
}
|
|
100% {
|
|
transform: translateY(100%);
|
|
}
|
|
}
|
|
|
|
.animate-shimmer {
|
|
animation: shimmer 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-shimmer-vertical {
|
|
animation: shimmer-vertical 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes changes-tab-flash {
|
|
0% {
|
|
background-color: transparent;
|
|
}
|
|
25% {
|
|
background-color: color-mix(in oklab, var(--primary) 25%, transparent);
|
|
}
|
|
100% {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.animate-changes-flash {
|
|
animation: changes-tab-flash 1s ease-out;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
@keyframes chat-input-running {
|
|
0%,
|
|
100% {
|
|
border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
|
|
box-shadow:
|
|
0 0 6px 1px color-mix(in oklab, var(--primary) 12%, transparent),
|
|
0 0 15px 3px color-mix(in oklab, var(--primary) 6%, transparent);
|
|
}
|
|
50% {
|
|
border-color: color-mix(in oklab, var(--primary) 70%, var(--border));
|
|
box-shadow:
|
|
0 0 20px 4px color-mix(in oklab, var(--primary) 20%, transparent),
|
|
0 0 50px 8px color-mix(in oklab, var(--primary) 10%, transparent);
|
|
}
|
|
}
|
|
|
|
.chat-input-running {
|
|
animation: chat-input-running 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes chat-input-running-plan {
|
|
0%,
|
|
100% {
|
|
border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
|
|
box-shadow:
|
|
0 0 6px 1px color-mix(in oklab, var(--primary) 12%, transparent),
|
|
0 0 15px 3px color-mix(in oklab, var(--primary) 6%, transparent);
|
|
}
|
|
50% {
|
|
border-color: color-mix(in oklab, var(--primary) 70%, var(--border));
|
|
box-shadow:
|
|
0 0 20px 4px color-mix(in oklab, var(--primary) 20%, transparent),
|
|
0 0 50px 8px color-mix(in oklab, var(--primary) 10%, transparent);
|
|
}
|
|
}
|
|
|
|
.chat-input-running-plan {
|
|
animation: chat-input-running-plan 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes chat-input-starting {
|
|
0%,
|
|
100% {
|
|
border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
|
|
box-shadow:
|
|
0 0 4px 1px color-mix(in oklab, var(--primary) 10%, transparent),
|
|
0 0 10px 2px color-mix(in oklab, var(--primary) 5%, transparent);
|
|
}
|
|
50% {
|
|
border-color: color-mix(in oklab, var(--primary) 60%, var(--border));
|
|
box-shadow:
|
|
0 0 12px 3px color-mix(in oklab, var(--primary) 15%, transparent),
|
|
0 0 30px 6px color-mix(in oklab, var(--primary) 8%, transparent);
|
|
}
|
|
}
|
|
|
|
.chat-input-starting {
|
|
animation: chat-input-starting 2s ease-in-out infinite;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.animate-changes-flash,
|
|
.chat-input-running,
|
|
.chat-input-running-plan,
|
|
.chat-input-starting,
|
|
.search-flash,
|
|
.animate-queue-open,
|
|
.animate-queue-close {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.border-flash-animation {
|
|
position: relative;
|
|
}
|
|
|
|
.border-flash-animation::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
animation: border-flash-glow 3s ease-in-out infinite;
|
|
}
|
|
}
|
|
|
|
.cm-tooltip {
|
|
border: 1px solid var(--border) !important;
|
|
background: var(--popover, oklch(0.205 0 0)) !important;
|
|
color: var(--popover-foreground, oklch(0.91 0.014 230)) !important;
|
|
border-radius: calc(var(--radius) + 2px);
|
|
box-shadow: 0 12px 32px color-mix(in oklab, var(--foreground) 18%, transparent);
|
|
padding: 8px;
|
|
}
|
|
|
|
.cm-tooltip-autocomplete {
|
|
padding: 0;
|
|
background: var(--popover, oklch(0.205 0 0)) !important;
|
|
}
|
|
|
|
.cm-tooltip-autocomplete ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 12px;
|
|
max-height: 240px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.cm-tooltip-autocomplete li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 12px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
color: var(--popover-foreground, oklch(0.91 0.014 230));
|
|
}
|
|
|
|
.cm-tooltip-autocomplete li[aria-selected="true"] {
|
|
background: color-mix(in oklab, var(--primary) 20%, var(--popover)) !important;
|
|
color: var(--primary-foreground) !important;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.cm-tooltip-autocomplete li[aria-selected="true"]:first-child {
|
|
border-top-left-radius: 6px;
|
|
border-top-right-radius: 6px;
|
|
}
|
|
|
|
.cm-tooltip-autocomplete li[aria-selected="true"]:last-child {
|
|
border-bottom-left-radius: 6px;
|
|
border-bottom-right-radius: 6px;
|
|
}
|
|
|
|
.cm-completionLabel {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.cm-completionDetail {
|
|
margin-left: auto;
|
|
font-size: 0.875rem;
|
|
color: var(--muted-foreground) !important;
|
|
}
|
|
|
|
.cm-completionMatchedText {
|
|
text-decoration: none;
|
|
color: var(--primary) !important;
|
|
}
|
|
|
|
.cm-tooltip-autocomplete li[aria-selected="true"] .cm-completionMatchedText {
|
|
color: var(--primary-foreground);
|
|
}
|
|
|
|
.cm-completionIcon {
|
|
opacity: 0.65;
|
|
}
|
|
|
|
.cm-completionIcon {
|
|
width: 14px;
|
|
height: 14px;
|
|
display: inline-block;
|
|
margin-right: 6px;
|
|
color: var(--muted-foreground);
|
|
background-color: currentColor;
|
|
mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center;
|
|
-webkit-mask-size: contain;
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center;
|
|
}
|
|
|
|
.cm-completionIcon-slash {
|
|
mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 9a2 2 0 1 1 2 -2v10a2 2 0 1 1 -2 -2h10a2 2 0 1 1 -2 2v-10a2 2 0 1 1 2 2h-10'/></svg>");
|
|
-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 9a2 2 0 1 1 2 -2v10a2 2 0 1 1 -2 -2h10a2 2 0 1 1 -2 2v-10a2 2 0 1 1 2 2h-10'/></svg>");
|
|
}
|
|
|
|
.cm-completionIcon-mention {
|
|
mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0'/><path d='M16 12v1.5a2.5 2.5 0 0 0 5 0v-1.5a9 9 0 1 0 -5.5 8.28'/></svg>");
|
|
-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0'/><path d='M16 12v1.5a2.5 2.5 0 0 0 5 0v-1.5a9 9 0 1 0 -5.5 8.28'/></svg>");
|
|
}
|
|
|
|
.cm-completionIcon-prompt {
|
|
display: none !important;
|
|
width: 0 !important;
|
|
margin-right: 0 !important;
|
|
background: none !important;
|
|
}
|
|
|
|
.cm-tooltip-autocomplete li[aria-selected="true"] .cm-completionIcon {
|
|
color: var(--primary-foreground);
|
|
}
|
|
|
|
.task-chat-editor .cm-placeholder {
|
|
color: var(--muted-foreground) !important;
|
|
}
|
|
|
|
.task-chat-editor .cm-editor {
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
.task-chat-editor .cm-editor.cm-focused {
|
|
outline: none !important;
|
|
}
|
|
|
|
.task-chat-editor .cm-scroller,
|
|
.task-chat-editor .cm-content,
|
|
.task-chat-editor .cm-line,
|
|
.task-chat-editor .cm-line span {
|
|
background: transparent !important;
|
|
background-color: transparent !important;
|
|
color: var(--foreground) !important;
|
|
}
|
|
|
|
.task-chat-editor .cm-cursor {
|
|
border-left-color: var(--foreground);
|
|
}
|
|
|
|
.task-chat-editor .cm-selectionBackground {
|
|
background: color-mix(in oklab, var(--primary) 25%, var(--background)) !important;
|
|
}
|
|
|
|
.task-chat-editor .cm-content ::selection {
|
|
background: color-mix(in oklab, var(--primary) 30%, var(--background));
|
|
}
|
|
|
|
/* Legacy Milkdown styles removed - plan editor now uses TipTap */
|
|
|
|
/* Shared markdown body styles
|
|
Single source of truth for rendered markdown across TipTap (plan editor)
|
|
and ReactMarkdown (chat, PR, changelog, etc.). */
|
|
.markdown-body {
|
|
font-size: 13px;
|
|
line-height: 1.625;
|
|
color: var(--foreground);
|
|
overflow-wrap: anywhere;
|
|
font-family:
|
|
-apple-system, "system-ui", "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
|
|
"Apple Color Emoji", "Segoe UI Emoji";
|
|
}
|
|
|
|
.markdown-body h1,
|
|
.markdown-body h2,
|
|
.markdown-body h3,
|
|
.markdown-body h4,
|
|
.markdown-body h5 {
|
|
font-weight: 700;
|
|
color: var(--foreground);
|
|
margin-top: 1.25rem;
|
|
margin-bottom: 0.375rem;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.markdown-body :is(h1, h2, h3, h4, h5):first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.markdown-body h1 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.markdown-body h2 {
|
|
font-size: 1.0625rem;
|
|
}
|
|
|
|
.markdown-body h3 {
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.markdown-body p {
|
|
line-height: 1.625;
|
|
}
|
|
|
|
.markdown-body p + p {
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.markdown-body pre {
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.markdown-body ul {
|
|
list-style-type: disc;
|
|
padding-left: 1.25rem;
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.markdown-body ol {
|
|
list-style-type: decimal;
|
|
padding-left: 1.25rem;
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.markdown-body li {
|
|
margin-top: 0.125rem;
|
|
margin-bottom: 0.125rem;
|
|
}
|
|
|
|
.markdown-body li > ul,
|
|
.markdown-body li > ol {
|
|
margin-top: 0.25rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
/* Inline code: neutral foreground on a slightly elevated background with a
|
|
subtle border so chips read clearly against the card surface.
|
|
Linked code (a > code) drops the background and inherits the link
|
|
color so file references read as links, not as another code chip. */
|
|
.markdown-body :not(pre) > code,
|
|
.markdown-body code:not(pre code) {
|
|
background: color-mix(in oklch, var(--foreground) 10%, var(--muted));
|
|
border: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
|
|
color: var(--foreground);
|
|
padding: 0.1rem 0.375rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.9em;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.markdown-body a {
|
|
color: var(--primary);
|
|
text-decoration-line: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
.markdown-body a:hover {
|
|
text-decoration-line: underline;
|
|
}
|
|
|
|
/* Code wrapped in a link reads as a link: no fill, link color,
|
|
background appears on hover for affordance. Scoped to exclude
|
|
user bubbles so they keep their primary-tinted chip styling. */
|
|
.markdown-body:not(.markdown-body-user) a > code,
|
|
.markdown-body:not(.markdown-body-user) a code:not(pre code) {
|
|
background: transparent;
|
|
border: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.markdown-body:not(.markdown-body-user) a:hover > code,
|
|
.markdown-body:not(.markdown-body-user) a:hover code:not(pre code) {
|
|
background: color-mix(in oklch, var(--foreground) 10%, var(--muted));
|
|
}
|
|
|
|
.markdown-body blockquote {
|
|
border-left: 3px solid var(--primary);
|
|
padding-left: 0.75rem;
|
|
margin-left: 0;
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--muted-foreground);
|
|
font-style: italic;
|
|
}
|
|
|
|
.markdown-body hr {
|
|
border: none;
|
|
border-top: 1px solid var(--border);
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.markdown-body table {
|
|
border-collapse: collapse;
|
|
/* width:100% fills the container and pins the table to it, so it can never
|
|
shrink-to-fit and grow into the surrounding overflow-x-auto scroll
|
|
container (which is what produced a horizontal scrollbar under width:auto).
|
|
Long values wrap instead of overflowing. */
|
|
width: 100%;
|
|
margin: 0.75rem 0;
|
|
table-layout: auto;
|
|
}
|
|
|
|
.markdown-body th,
|
|
.markdown-body td {
|
|
border: 1px solid var(--border);
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 13px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.markdown-body td {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.markdown-body th {
|
|
background: var(--muted);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Label/value tables (common in agent output) put short keys in the first
|
|
column. Keep that column on one line and sized to its content so a long
|
|
value cell can't starve it down to a few characters and wrap "Failing"
|
|
into "Failin g". */
|
|
.markdown-body td:first-child {
|
|
white-space: nowrap;
|
|
width: 1%;
|
|
}
|
|
|
|
.markdown-body td:not(:first-child) code {
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.markdown-body thead {
|
|
background: color-mix(in oklch, var(--muted) 50%, transparent);
|
|
}
|
|
|
|
.markdown-body tbody tr {
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.markdown-body tbody tr:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.markdown-body tbody tr:hover {
|
|
background: color-mix(in oklch, var(--muted) 50%, transparent);
|
|
}
|
|
|
|
.markdown-body strong {
|
|
color: var(--foreground);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* User message markdown overrides for primary background */
|
|
.markdown-body-user :not(pre) > code,
|
|
.markdown-body-user code:not(pre code) {
|
|
background: color-mix(in oklch, var(--primary) 20%, transparent);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
/* TipTap editor styles */
|
|
.tiptap p.is-editor-empty:first-child::before {
|
|
content: attr(data-placeholder);
|
|
float: left;
|
|
color: var(--muted-foreground);
|
|
pointer-events: none;
|
|
height: 0;
|
|
}
|
|
|
|
.tiptap p {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Inline code */
|
|
.tiptap code {
|
|
background-color: var(--muted);
|
|
border-radius: 0.25rem;
|
|
padding: 0.125rem 0.25rem;
|
|
font-size: 0.75rem;
|
|
font-family: var(--font-mono, ui-monospace, monospace);
|
|
}
|
|
|
|
/* Code blocks */
|
|
.tiptap pre {
|
|
background-color: color-mix(in oklch, var(--card) 92%, var(--foreground) 8%);
|
|
border: 1px solid var(--border);
|
|
border-radius: 0.375rem;
|
|
padding: 0.5rem 0.75rem;
|
|
margin: 0.25rem 0;
|
|
overflow-x: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.tiptap pre code {
|
|
background: none;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
font-size: 0.75rem;
|
|
line-height: 1.4;
|
|
font-family: var(--font-mono, ui-monospace, monospace);
|
|
}
|
|
|
|
/* Language selector on code blocks */
|
|
.tiptap pre .code-block-language {
|
|
position: absolute;
|
|
top: 0.25rem;
|
|
right: 0.25rem;
|
|
font-size: 0.625rem;
|
|
font-family: var(--font-sans, ui-sans-serif, sans-serif);
|
|
color: var(--muted-foreground);
|
|
background: var(--muted);
|
|
border: 1px solid var(--border);
|
|
border-radius: 0.25rem;
|
|
padding: 0.0625rem 0.25rem;
|
|
cursor: pointer;
|
|
outline: none;
|
|
opacity: 0;
|
|
transition: opacity 0.15s;
|
|
}
|
|
|
|
.tiptap pre:hover .code-block-language,
|
|
.tiptap pre:focus-within .code-block-language {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Lowlight / highlight.js syntax colors */
|
|
.tiptap pre code .hljs-comment,
|
|
.tiptap pre code .hljs-quote {
|
|
color: var(--muted-foreground);
|
|
font-style: italic;
|
|
}
|
|
|
|
.tiptap pre code .hljs-keyword,
|
|
.tiptap pre code .hljs-selector-tag,
|
|
.tiptap pre code .hljs-built_in {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.tiptap pre code .hljs-string,
|
|
.tiptap pre code .hljs-attr,
|
|
.tiptap pre code .hljs-addition {
|
|
color: oklch(0.7 0.15 150);
|
|
}
|
|
|
|
.tiptap pre code .hljs-number,
|
|
.tiptap pre code .hljs-literal {
|
|
color: oklch(0.7 0.15 60);
|
|
}
|
|
|
|
.tiptap pre code .hljs-title,
|
|
.tiptap pre code .hljs-section,
|
|
.tiptap pre code .hljs-type {
|
|
color: oklch(0.62 0.11 198);
|
|
}
|
|
|
|
.tiptap pre code .hljs-name,
|
|
.tiptap pre code .hljs-tag {
|
|
color: var(--destructive);
|
|
}
|
|
|
|
.tiptap pre code .hljs-variable,
|
|
.tiptap pre code .hljs-template-variable {
|
|
color: oklch(0.62 0.12 48);
|
|
}
|
|
|
|
.tiptap pre code .hljs-regexp,
|
|
.tiptap pre code .hljs-link {
|
|
color: oklch(0.7 0.15 30);
|
|
}
|
|
|
|
.tiptap pre code .hljs-symbol,
|
|
.tiptap pre code .hljs-bullet {
|
|
color: oklch(0.65 0.2 330);
|
|
}
|
|
|
|
.tiptap pre code .hljs-meta {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.tiptap pre code .hljs-deletion {
|
|
color: var(--destructive);
|
|
}
|
|
|
|
.tiptap pre code .hljs-emphasis {
|
|
font-style: italic;
|
|
}
|
|
|
|
.tiptap pre code .hljs-strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Monaco Editor - Comment decorations */
|
|
.monaco-comment-line {
|
|
background-color: color-mix(in oklab, var(--primary) 12%, transparent) !important;
|
|
}
|
|
|
|
/* Lines-decoration lane for commented lines, clickable bar */
|
|
.monaco-comment-bar {
|
|
cursor: pointer !important;
|
|
background-color: color-mix(in oklab, var(--primary) 12%, transparent) !important;
|
|
border-left: 3px solid color-mix(in oklab, var(--primary) 58%, transparent) !important;
|
|
}
|
|
.monaco-comment-bar:hover {
|
|
background-color: color-mix(in oklab, var(--primary) 20%, transparent) !important;
|
|
}
|
|
|
|
/* Chat bubble icon on the bar (first line of a comment only) */
|
|
.monaco-comment-bar-icon {
|
|
cursor: pointer !important;
|
|
position: relative !important;
|
|
background-color: color-mix(in oklab, var(--primary) 12%, transparent) !important;
|
|
border-left: 3px solid color-mix(in oklab, var(--primary) 58%, transparent) !important;
|
|
}
|
|
.monaco-comment-bar-icon:hover {
|
|
background-color: color-mix(in oklab, var(--primary) 20%, transparent) !important;
|
|
}
|
|
.monaco-comment-bar-icon::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 12px;
|
|
height: 12px;
|
|
background: var(--primary);
|
|
mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
|
|
-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain;
|
|
}
|
|
|
|
/* Line number bg tint for commented lines */
|
|
.monaco-comment-line-number {
|
|
background-color: color-mix(in oklab, var(--primary) 12%, transparent) !important;
|
|
}
|
|
|
|
/* TipTap Plan Editor Styles
|
|
Element styles (headings, lists, code, etc.) come from .markdown-body above.
|
|
Only TipTap-specific layout, container, and editor behavior styles remain here. */
|
|
.tiptap-plan-wrapper {
|
|
height: 100%;
|
|
overflow: auto;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.tiptap-plan-wrapper:not(.dark) {
|
|
background: var(--background);
|
|
}
|
|
|
|
.tiptap-plan-wrapper .tiptap {
|
|
height: 100%;
|
|
padding: 0.75rem;
|
|
outline: none;
|
|
cursor: text;
|
|
}
|
|
|
|
.tiptap-plan-wrapper .tiptap:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* Task lists (TipTap-specific data attribute) */
|
|
.tiptap-plan-wrapper .tiptap ul[data-type="taskList"] {
|
|
list-style: none !important;
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
.tiptap-plan-wrapper .tiptap ul[data-type="taskList"] li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.tiptap-plan-wrapper .tiptap ul[data-type="taskList"] li label {
|
|
margin-top: 0.125rem;
|
|
}
|
|
|
|
/* Code blocks (TipTap-specific: lowlight/highlight.js syntax highlighting) */
|
|
.tiptap-plan-wrapper .tiptap pre {
|
|
background: var(--background) !important;
|
|
padding: 0.5rem 0.75rem !important;
|
|
border-radius: 0.375rem !important;
|
|
overflow-x: auto !important;
|
|
margin-top: 0.5rem !important;
|
|
margin-bottom: 0.5rem !important;
|
|
}
|
|
|
|
.tiptap-plan-wrapper:not(.dark) .tiptap pre {
|
|
background: var(--muted) !important;
|
|
}
|
|
|
|
.tiptap-plan-wrapper .tiptap pre code {
|
|
background: transparent !important;
|
|
color: var(--foreground);
|
|
padding: 0 !important;
|
|
font-size: var(--font-mono-size) !important;
|
|
font-family: var(--font-mono) !important;
|
|
}
|
|
|
|
.tiptap-plan-wrapper:not(.dark) .tiptap pre code {
|
|
color: var(--foreground);
|
|
}
|
|
|
|
/* Highlight marks */
|
|
.tiptap-plan-wrapper mark {
|
|
background-color: color-mix(in oklab, oklch(0.84 0.12 92) 38%, transparent);
|
|
border-radius: 2px;
|
|
padding: 1px 0;
|
|
}
|
|
|
|
/* Comment highlights, inline mark spans like Highlight extension */
|
|
.tiptap-plan-wrapper .comment-highlight {
|
|
background-color: color-mix(in oklch, var(--accent) 70%, transparent);
|
|
border-radius: 3px;
|
|
border-bottom: 2px solid color-mix(in oklch, var(--accent-foreground) 25%, transparent);
|
|
cursor: pointer;
|
|
transition: background-color 0.15s ease;
|
|
padding: 2px 1px;
|
|
box-decoration-break: clone;
|
|
-webkit-box-decoration-break: clone;
|
|
}
|
|
|
|
.tiptap-plan-wrapper .comment-highlight:hover {
|
|
background-color: color-mix(in oklch, var(--accent) 90%, transparent);
|
|
}
|
|
|
|
/* Comment badge, single widget decoration at end of mark range */
|
|
.tiptap-plan-wrapper .comment-badge {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 0;
|
|
height: 0;
|
|
overflow: visible;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.tiptap-plan-wrapper .comment-badge svg {
|
|
position: absolute;
|
|
top: -6px;
|
|
left: 2px;
|
|
width: 11px;
|
|
height: 11px;
|
|
color: color-mix(in oklab, var(--primary) 80%, var(--foreground));
|
|
cursor: pointer;
|
|
transition: color 0.15s ease;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.tiptap-plan-wrapper .comment-badge:hover svg {
|
|
color: var(--primary);
|
|
}
|
|
|
|
/* Drag handle */
|
|
.plan-drag-handle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-left: 4px;
|
|
border-radius: 4px;
|
|
color: var(--muted-foreground);
|
|
opacity: 0;
|
|
cursor: grab;
|
|
transition:
|
|
opacity 0.15s,
|
|
background-color 0.15s;
|
|
}
|
|
|
|
.plan-drag-handle:hover {
|
|
background-color: var(--muted);
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.tiptap-plan-wrapper:hover .plan-drag-handle {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.plan-drag-handle:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
/* Mermaid diagram styles */
|
|
.tiptap-plan-wrapper .mermaid-container {
|
|
position: relative;
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
margin: 0.75rem auto !important;
|
|
}
|
|
|
|
.tiptap-plan-wrapper .mermaid-container svg {
|
|
max-width: 100% !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
.tiptap-plan-wrapper .mermaid-error {
|
|
color: var(--destructive) !important;
|
|
font-size: 0.75rem !important;
|
|
padding: 0.5rem !important;
|
|
white-space: pre-wrap !important;
|
|
}
|
|
|
|
.tiptap-plan-wrapper .tiptap pre.mermaid-code-view {
|
|
margin: 0 !important;
|
|
padding: 0.75rem !important;
|
|
font-size: 0.75rem !important;
|
|
line-height: 1.6 !important;
|
|
white-space: pre-wrap !important;
|
|
background: transparent !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.tiptap-plan-wrapper .tiptap pre.mermaid-code-view code {
|
|
color: var(--foreground) !important;
|
|
font-family: var(--font-mono) !important;
|
|
font-size: 0.75rem !important;
|
|
}
|
|
|
|
.tiptap-plan-wrapper .tiptap pre.mermaid-code-view .mm-keyword {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.tiptap-plan-wrapper .tiptap pre.mermaid-code-view .mm-arrow {
|
|
color: oklch(0.7 0.15 60);
|
|
}
|
|
|
|
.tiptap-plan-wrapper .tiptap pre.mermaid-code-view .mm-label {
|
|
color: oklch(0.7 0.15 150);
|
|
}
|
|
|
|
.tiptap-plan-wrapper .tiptap pre.mermaid-code-view .mm-text {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.tiptap-plan-wrapper:not(.dark) .tiptap pre.mermaid-code-view .mm-keyword {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.tiptap-plan-wrapper:not(.dark) .tiptap pre.mermaid-code-view .mm-arrow {
|
|
color: oklch(0.5 0.15 40);
|
|
}
|
|
|
|
.tiptap-plan-wrapper:not(.dark) .tiptap pre.mermaid-code-view .mm-label {
|
|
color: oklch(0.4 0.15 150);
|
|
}
|
|
|
|
.tiptap-plan-wrapper .mermaid-toolbar {
|
|
position: absolute;
|
|
top: 0.375rem;
|
|
right: 0.375rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 0.375rem;
|
|
border: 1px solid oklch(from var(--border) l c h / 0.5);
|
|
background: var(--popover);
|
|
opacity: 0;
|
|
transition: opacity 0.15s;
|
|
z-index: 10;
|
|
}
|
|
|
|
.tiptap-plan-wrapper .mermaid-container:hover .mermaid-toolbar {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tiptap-plan-wrapper .mermaid-zoom-btn {
|
|
padding: 0.125rem 0.25rem;
|
|
font-size: 0.75rem;
|
|
color: var(--muted-foreground);
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.tiptap-plan-wrapper .mermaid-zoom-btn:hover {
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.tiptap-plan-wrapper .mermaid-zoom-label {
|
|
font-size: 10px;
|
|
color: var(--muted-foreground);
|
|
cursor: pointer;
|
|
font-variant-numeric: tabular-nums;
|
|
min-width: 3ch;
|
|
text-align: center;
|
|
}
|
|
|
|
.tiptap-plan-wrapper .mermaid-zoom-label:hover {
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.tiptap-plan-wrapper .mermaid-toolbar-sep {
|
|
width: 1px;
|
|
height: 0.875rem;
|
|
background: oklch(from var(--border) l c h / 0.5);
|
|
margin: 0 0.125rem;
|
|
}
|
|
|
|
/* Mermaid diagram in markdown renderer (chat messages, PR comments) */
|
|
.mermaid-block svg {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* Placeholder for empty plan editor */
|
|
.tiptap-plan-wrapper .tiptap p.is-editor-empty:first-child::before {
|
|
content: attr(data-placeholder);
|
|
float: left;
|
|
color: var(--muted-foreground);
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
height: 0;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Monaco Editor - Diff gutter indicators (colors from --git-addition / --git-deletion CSS vars) */
|
|
.monaco-diff-added-gutter {
|
|
width: 3px !important;
|
|
margin-left: 3px;
|
|
background-color: rgb(var(--git-addition)) !important;
|
|
}
|
|
.monaco-diff-modified-gutter {
|
|
width: 3px !important;
|
|
margin-left: 3px;
|
|
background-color: rgb(var(--git-addition)) !important;
|
|
}
|
|
.monaco-diff-deleted-gutter {
|
|
width: 0 !important;
|
|
margin-left: 2px;
|
|
border-left: 4px solid rgb(var(--git-deletion)) !important;
|
|
}
|
|
|
|
/* Monaco Editor - Gutter comment hint ("+" hover on decoration lane) */
|
|
.monaco-gutter-comment-hint {
|
|
cursor: pointer !important;
|
|
position: relative !important;
|
|
}
|
|
.monaco-gutter-comment-hint::after {
|
|
content: "+";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 14px;
|
|
height: 14px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
color: var(--primary-foreground);
|
|
border-radius: 3px;
|
|
background-color: var(--primary);
|
|
}
|
|
|
|
/* Monaco Editor - Gutter line selection highlight */
|
|
.monaco-gutter-selected-line {
|
|
background-color: color-mix(in oklab, var(--primary) 15%, transparent) !important;
|
|
}
|
|
.monaco-gutter-selected-deco {
|
|
background-color: color-mix(in oklab, var(--primary) 15%, transparent) !important;
|
|
}
|
|
|
|
/* Monaco Editor - Peek view / references widget overrides */
|
|
.monaco-editor .peekview-widget .head {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.monaco-editor .peekview-widget .head .peekview-title .filename {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.monaco-editor .peekview-widget .head .peekview-title .dirname {
|
|
font-size: 11px;
|
|
}
|
|
|
|
/* Match references list font size to editor font size */
|
|
.monaco-editor .reference-zone-widget .ref-tree .monaco-list-row {
|
|
font-size: var(--font-mono-size) !important;
|
|
height: 20px !important;
|
|
line-height: 20px !important;
|
|
}
|
|
|
|
.monaco-editor .reference-zone-widget .ref-tree .reference-file {
|
|
font-size: var(--font-mono-size) !important;
|
|
height: 22px !important;
|
|
line-height: 22px !important;
|
|
}
|
|
|
|
.monaco-editor .reference-zone-widget .ref-tree .monaco-tl-contents {
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.monaco-editor .reference-zone-widget .ref-tree .reference-file .count {
|
|
font-size: 10px;
|
|
line-height: 14px;
|
|
padding: 0 5px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Pipeline node rotating border for running tasks */
|
|
@keyframes node-border-pulse {
|
|
0%,
|
|
100% {
|
|
box-shadow:
|
|
0 0 0 1px color-mix(in oklab, var(--primary) 42%, var(--border)),
|
|
0 0 0 0 color-mix(in oklab, var(--primary) 0%, transparent);
|
|
}
|
|
50% {
|
|
box-shadow:
|
|
0 0 0 1px color-mix(in oklab, var(--primary) 68%, var(--border)),
|
|
0 0 0 3px color-mix(in oklab, var(--primary) 12%, transparent);
|
|
}
|
|
}
|
|
|
|
.node-border-running {
|
|
position: relative;
|
|
animation: node-border-pulse 2.8s ease-in-out infinite;
|
|
}
|
|
|
|
.chat-message-list {
|
|
font-size: 13px;
|
|
font-family:
|
|
-apple-system, "system-ui", "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
|
|
"Apple Color Emoji", "Segoe UI Emoji";
|
|
}
|
|
|
|
/* Shiki code block styling */
|
|
.shiki-code-block pre.shiki {
|
|
margin: 0;
|
|
padding: 8px 12px;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
font-size: var(--font-mono-size);
|
|
line-height: 1.5;
|
|
background-color: var(--background) !important;
|
|
}
|
|
|
|
.shiki-code-block pre.shiki code {
|
|
font-family: var(--font-geist-mono, ui-monospace, monospace);
|
|
}
|
|
|
|
.debug {
|
|
border: 1px solid var(--destructive) !important;
|
|
}
|
|
|
|
/* Panel search highlights */
|
|
.search-highlight {
|
|
background: color-mix(in oklab, oklch(0.86 0.13 92) 42%, transparent);
|
|
border-radius: 2px;
|
|
}
|
|
.search-highlight-current {
|
|
background: color-mix(in oklab, var(--warning) 56%, transparent);
|
|
outline: 1px solid color-mix(in oklab, var(--warning) 78%, var(--border));
|
|
border-radius: 2px;
|
|
}
|
|
.search-flash {
|
|
animation: search-flash 1.2s ease-out;
|
|
}
|
|
@keyframes search-flash {
|
|
0% {
|
|
background-color: color-mix(in oklab, var(--warning) 48%, transparent);
|
|
}
|
|
100% {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
/* Queue panel collapsible — animate height + opacity using the Radix
|
|
* Collapsible CSS variable. Used by QueueAffordance so opening/closing the
|
|
* queued-messages panel feels intentional rather than popping. */
|
|
@keyframes queue-panel-open {
|
|
from {
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
height: var(--radix-collapsible-content-height);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes queue-panel-close {
|
|
from {
|
|
height: var(--radix-collapsible-content-height);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.animate-queue-open {
|
|
animation: queue-panel-open 220ms cubic-bezier(0.32, 0.72, 0, 1);
|
|
}
|
|
.animate-queue-close {
|
|
animation: queue-panel-close 180ms cubic-bezier(0.32, 0.72, 0, 1);
|
|
}
|
|
|
|
/* Unified AppSidebar — header/text content fades in when the rail expands
|
|
* from its collapsed (icon-only) state. */
|
|
@keyframes app-sidebar-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-4px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
.sidebar-fade-in {
|
|
animation: app-sidebar-fade-in 200ms ease-out;
|
|
}
|
|
|
|
/* AppSidebar section expand/collapse — a quick height animation that pushes
|
|
* sibling sections, replacing the old opacity fade. Driven by the Radix
|
|
* Collapsible `data-state` + content-height CSS var. */
|
|
@keyframes sidebar-section-expand {
|
|
from {
|
|
height: 0;
|
|
}
|
|
to {
|
|
height: var(--radix-collapsible-content-height);
|
|
}
|
|
}
|
|
@keyframes sidebar-section-collapse {
|
|
from {
|
|
height: var(--radix-collapsible-content-height);
|
|
}
|
|
to {
|
|
height: 0;
|
|
}
|
|
}
|
|
.sidebar-section-content {
|
|
overflow: hidden;
|
|
}
|
|
.sidebar-section-content[data-state="open"] {
|
|
animation: sidebar-section-expand 180ms cubic-bezier(0.32, 0.72, 0, 1);
|
|
}
|
|
.sidebar-section-content[data-state="closed"] {
|
|
animation: sidebar-section-collapse 160ms cubic-bezier(0.32, 0.72, 0, 1);
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.sidebar-fade-in,
|
|
.sidebar-section-content[data-state="open"],
|
|
.sidebar-section-content[data-state="closed"] {
|
|
animation: none;
|
|
}
|
|
}
|