From 9dcdb8b4d301f52c0bcc4744d4d5ee6b9b25ef8f Mon Sep 17 00:00:00 2001 From: Val Alexander Date: Wed, 25 Feb 2026 04:18:28 -0600 Subject: [PATCH] ui: refresh dashboard-v2 theme and visual styles --- ui/index.html | 12 + ui/public/apple-touch-icon.png | Bin 5920 -> 6752 bytes ui/public/favicon-32.png | Bin 1015 -> 1289 bytes ui/src/styles/base.css | 1004 ++++++++++--- ui/src/styles/chat.css | 1 + ui/src/styles/chat/agent-chat.css | 1302 +++++++++++++++++ ui/src/styles/chat/grouped.css | 361 ++++- ui/src/styles/chat/layout.css | 208 ++- ui/src/styles/chat/text.css | 168 ++- ui/src/styles/chat/tool-cards.css | 293 +++- ui/src/styles/components.css | 2265 ++++++++++++++++++++++++++--- ui/src/styles/config.css | 1021 ++++++++----- ui/src/styles/glass.css | 554 +++++++ ui/src/styles/layout.css | 868 ++++++++--- ui/src/styles/layout.mobile.css | 223 +-- 15 files changed, 6974 insertions(+), 1306 deletions(-) create mode 100644 ui/src/styles/chat/agent-chat.css create mode 100644 ui/src/styles/glass.css diff --git a/ui/index.html b/ui/index.html index dc03f49115c..0a3dbfc2a3a 100644 --- a/ui/index.html +++ b/ui/index.html @@ -8,6 +8,18 @@ + diff --git a/ui/public/apple-touch-icon.png b/ui/public/apple-touch-icon.png index 71781843f857e274449a0e7a2b151c06d92b5e4f..4b6cd2b520bf3e9bfad4ffd72d09141de2e7d2bb 100644 GIT binary patch literal 6752 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 ujrsC2aqHEYyS5&r}6^u{Ov literal 5920 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 diff --git a/ui/public/favicon-32.png b/ui/public/favicon-32.png index 563c79b0e6bfa77798f7b508ab6ed290c84b7363..26bef85d35c677d83249cbb54a99ae9a9d3f669d 100644 GIT binary patch delta 1270 zcmV-Da^e*botZEeB1^yis46AdQLAN*lI>EB>7zb(cXjWNXm zW8;fkvET{}VS@ofV8G@El;H*}W{DxfV?IZ(YfB4-L1KK8rhm;{p3m#~JkR@i7sLL` z0f9gwyWSg4BI8=pxi*9cC9Bs?CN zcDv!e%LRWpoqur0;XvP$OMyV*$+2Tq*mecDTt)MK{|EDa|KkO}A0GOAIpGs_yZk-r zaKNx2JQ*~bKN%v)-OmJ1h~mCQNs7*kB0Ti_Vb14+**x&uHXDput?;`bz>viP171_r3&SL9Ex9&F6Kl zMM>i4yxwra<2k3mm32cizw30$ZAUj(;KND9-+x?HJY45E=rNg6@D76kt|s9zy&jF^ z+?2}|o)82s!&x6o(if=RNZCkG13WJup1yAR;ELi?aF&Ix)w#>?c8Zeo(D~>rBwCcy z&9Y}@_+O$}GVArOC~$NbnjK0`-}Uw2H*&#O=PutIc?aqu%11d!oNY9{5>u&O#-=3c z5Pxd#NE$pwQS$7vcRe3mS+_NCih@?XUd};qG%8di>Pibq!bO5OD9?YyY8^u}L$zMuTv2>B{7OZI+=YIQleN*7gx3?qXi5kDCexdp472=;UJuP$?J}ygK$pva z$8*4c*6HL6MOO=1M!)M+s^uTb%8qAj0)JYOMvdmwsLl3$E|){_L9=eP>=rCeSgxa)A7$acAOcpt}QxLh_IbupR)enG86CW&gXLSy5)eMCy13A9RCp8j_6`pv4dfz za>5nGXToP|a6E`@XT(Tye>+W|PH%(Hw2@~07*qoM6N<$f;gRU!vFvP delta 994 zcmV<810DQ{3ik()BYy+FNklj|3GLC)Vz$bm0<)8omzPHZ98x6UBeY5QB{F&G$0e==a4`3=s<*FL9H?U#D zCsgDw+0k)`*iZLy5T3TT$DXZP)%vupt?M!IL2GO4z2(beAkcRUDeofjpvqM>Fb!CC z-8uxs#yO$T{&CJtONd26O8BWUc0bia?%H2H|Q;*L$tHx=6(aBAoA#Qm!a1IB0U*C(`>#O$_lYhKbVqeuX2% z_KFP51=dJlOKI`m7q9Tm^8~*B^ds~q#vy&ZarspWU4JP9oy(Tu%6Qsi!U49XG;K{_ z1C;zPC9+Zj*OO_8hI)v23^!64_=n|I+9<|vWlT@JQ0xCd2I?96T;#jn(~6&BEm-W%f7h_Z#J}_ChCfBZAmbI++1kfI0?AMaS zptIhk5PxNHNo>&d!|}$(KGGR_|Jt>i03=K1m*D~KI9p810=I2siL~ipUN}4}6MiEL zqftbuma5B%X8yVlz@HieV)WuS5-$b~;tRu2$yLx@DUEe?#oDH8;`dA{HD5~tVR~S` zAQ)qwVzOKySR6otbB_UPtRhR3wifT}dqlyzrhm`j{758#NU->5It?S21J4UjXbf}= z3_Q^QND6Et3KdjW`k^2k3aR9pkUI{>OjC)ALL-IgINOxAhCEIiLVQJm%^$S1oQS%U zuV%fVgp;}4@hoW&zXWgw1U9sCC4Bf^04JTvmsGW@;s*eyrrn6f4C5Sq{Ma{>Yrzpq z*MH9k*@`W4zgL$30jnDdU=M&?5ChPn(VdiZ*H@$(6N5DVJ(c{9vo^4q60J#10F{_f zJ^Bj(Ug?qSiUV}du*(Hux2iSUGvQt##2->hF{KG$s$P)9e^iaC4yAJY0R$KQIz2OMaZR`4n04`K}EcYW#+*Q)*s{j@g zm#F)R38}s*e2W?ya3M=}$O1gOr4O|?Kw_InXp=2OaeN)e>5+x^c#8`08X(9paAh6i Qga7~l07*qoM6N<$f~zIb`2YX_ diff --git a/ui/src/styles/base.css b/ui/src/styles/base.css index ffef3f69a23..f4183b68689 100644 --- a/ui/src/styles/base.css +++ b/ui/src/styles/base.css @@ -1,105 +1,558 @@ +* { + box-sizing: border-box; +} + +/* ════════════════════════════════════════════════════════ + Theme System — 3 Theme Families + Mode Variants + ════════════════════════════════════════════════════════ */ + +/* ─── Design Tokens (shared across all themes) ─── */ + :root { - /* Background - Warmer dark with depth */ - --bg: #12141a; - --bg-accent: #14161d; - --bg-elevated: #1a1d25; - --bg-hover: #262a35; - --bg-muted: #262a35; + --icon-size-xs: 0.9rem; + --icon-size-sm: 1.05rem; + --icon-size-md: 1.25rem; + --icon-size-xl: 2.4rem; - /* Card / Surface - More contrast between levels */ - --card: #181b22; - --card-foreground: #f4f4f5; - --card-highlight: rgba(255, 255, 255, 0.05); - --popover: #181b22; - --popover-foreground: #f4f4f5; + --font-inter: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; + --font-serif: "Playfair Display", Georgia, "Times New Roman", serif; + --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; - /* Panel */ - --panel: #12141a; - --panel-strong: #1a1d25; - --panel-hover: #262a35; - --chrome: rgba(18, 20, 26, 0.95); - --chrome-strong: rgba(18, 20, 26, 0.98); - - /* Text - Slightly warmer */ - --text: #e4e4e7; - --text-strong: #fafafa; - --chat-text: #e4e4e7; - --muted: #71717a; - --muted-strong: #52525b; - --muted-foreground: #71717a; - - /* Border - Subtle but defined */ - --border: #27272a; - --border-strong: #3f3f46; - --border-hover: #52525b; - --input: #27272a; - --ring: #ff5c5c; - - /* Accent - Punchy signature red */ - --accent: #ff5c5c; - --accent-hover: #ff7070; - --accent-muted: #ff5c5c; - --accent-subtle: rgba(255, 92, 92, 0.15); - --accent-foreground: #fafafa; - --accent-glow: rgba(255, 92, 92, 0.25); - --primary: #ff5c5c; - --primary-foreground: #ffffff; - - /* Secondary - Teal accent for variety */ - --secondary: #1e2028; - --secondary-foreground: #f4f4f5; - --accent-2: #14b8a6; - --accent-2-muted: rgba(20, 184, 166, 0.7); - --accent-2-subtle: rgba(20, 184, 166, 0.15); - - /* Semantic - More saturated */ - --ok: #22c55e; - --ok-muted: rgba(34, 197, 94, 0.75); - --ok-subtle: rgba(34, 197, 94, 0.12); - --destructive: #ef4444; - --destructive-foreground: #fafafa; - --warn: #f59e0b; - --warn-muted: rgba(245, 158, 11, 0.75); - --warn-subtle: rgba(245, 158, 11, 0.12); - --danger: #ef4444; - --danger-muted: rgba(239, 68, 68, 0.75); - --danger-subtle: rgba(239, 68, 68, 0.12); - --info: #3b82f6; - - /* Focus - With glow */ - --focus: rgba(255, 92, 92, 0.25); - --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring); - --focus-glow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring), 0 0 20px var(--accent-glow); - - /* Grid */ - --grid-line: rgba(255, 255, 255, 0.04); - - /* Theme transition */ --theme-switch-x: 50%; --theme-switch-y: 50%; +} - /* Typography */ - --mono: - "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace; - --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; - --font-display: var(--font-body); +@media (prefers-reduced-motion: reduce) { + :root { + --clay-duration-fast: 0ms; + --clay-duration-normal: 0ms; + --clay-duration-slow: 0ms; + } - /* Shadows - Richer with subtle color */ - --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); - --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.03); - --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.03); - --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03); - --shadow-glow: 0 0 30px var(--accent-glow); + * { + animation-duration: 0s !important; + transition-duration: 0s !important; + } +} - /* Radii - Slightly larger for friendlier feel */ +/* ─── Theme: dark (Home) — Neutral Dark Console ─── */ + +:root, +:root[data-theme="dark"] { + color-scheme: dark; + + --vscode-bg: #10121a; + --vscode-sidebar: #0c0e14; + --vscode-panel: #141620; + --vscode-panel-border: rgba(255, 255, 255, 0.06); + --vscode-surface: #181a24; + --vscode-hover: #1e2028; + --vscode-contrast: #08090e; + --vscode-text: #dcdce0; + --vscode-muted: #8585a0; + --vscode-subtle: #666e80; + --vscode-ghost: #121418; + --vscode-accent: #ee5242; + --vscode-accent-alpha: rgba(238, 82, 66, 0.14); + --vscode-selection: #3d1418; + --vscode-success: #00d4aa; + --vscode-danger: #ee5242; + + --kn-claw: #ee5242; + --kn-claw-bright: #fd8e2e; + --kn-claw-dim: rgba(238, 82, 66, 0.12); + --kn-claw-ember: #fb9231; + --kn-claw-deep: #9a2d1f; + --kn-ocean: #0c0e14; + --kn-ocean-bright: #1e2028; + --kn-ocean-mid: #141620; + --kn-ocean-dim: rgba(12, 14, 20, 0.8); + --kn-ocean-deep: #10121a; + --kn-silver: #8a8a98; + --kn-silver-bright: #c0c0cc; + --kn-silver-dim: rgba(138, 138, 152, 0.12); + --kn-bioluminescence: #00d4aa; + --kn-warm-dark: #1a1218; + --kn-void: #1a1218; + + --glass-blur: 8px; + --glass-saturate: 120%; + --glass-bg: rgba(16, 18, 26, 0.82); + --glass-bg-elevated: rgba(20, 22, 32, 0.88); + --glass-border: rgba(255, 255, 255, 0.06); + --glass-border-hover: rgba(202, 58, 41, 0.3); + --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04); + --glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); + --glass-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5); + --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6); + + --radius-xs: 4px; + --radius-sm: 8px; + --radius-md: 12px; + --radius-lg: 12px; + --radius-xl: 12px; + --radius-full: 9999px; +} + +/* ─── Theme: light — Clean Warm White ─── */ + +:root[data-theme="light"] { + color-scheme: light; + + --vscode-bg: #f9f7f4; + --vscode-sidebar: #f2f0ec; + --vscode-panel: #fdfcfa; + --vscode-panel-border: rgba(42, 36, 32, 0.08); + --vscode-surface: #fdfcfa; + --vscode-hover: #ede9e4; + --vscode-contrast: #e5e0da; + --vscode-text: #2a2520; + --vscode-muted: #726450; + --vscode-subtle: #857868; + --vscode-ghost: #e8e4de; + --vscode-accent: #c42e1e; + --vscode-accent-alpha: rgba(196, 46, 30, 0.1); + --vscode-selection: rgba(196, 46, 30, 0.15); + --vscode-success: #1a8a66; + --vscode-danger: #c42e1e; + + --kn-claw: #c42e1e; + --kn-claw-bright: #dc4535; + --kn-claw-dim: rgba(196, 46, 30, 0.08); + --kn-claw-ember: #dc4535; + --kn-claw-deep: #a02818; + --kn-ocean: #f9f7f4; + --kn-ocean-bright: #fdfcfa; + --kn-ocean-mid: #f2f0ec; + --kn-ocean-dim: rgba(249, 247, 244, 0.92); + --kn-ocean-deep: #e5e0da; + --kn-silver: #726450; + --kn-silver-bright: #2a2520; + --kn-silver-dim: rgba(114, 100, 80, 0.1); + --kn-bioluminescence: #1a8a66; + --kn-warm-dark: #2a2520; + --kn-void: #e8e4de; + + --glass-blur: 8px; + --glass-saturate: 105%; + --glass-bg: rgba(253, 252, 250, 0.95); + --glass-bg-elevated: rgba(253, 252, 250, 0.98); + --glass-border: rgba(42, 36, 32, 0.1); + --glass-border-hover: rgba(220, 69, 53, 0.35); + --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6); + --glass-shadow-sm: 0 1px 3px rgba(42, 36, 32, 0.06), 0 1px 2px rgba(42, 36, 32, 0.04); + --glass-shadow-md: 0 4px 12px rgba(42, 36, 32, 0.08), 0 1px 3px rgba(42, 36, 32, 0.04); + --glass-shadow-lg: 0 8px 28px rgba(42, 36, 32, 0.1), 0 2px 6px rgba(42, 36, 32, 0.05); + + --radius-xs: 4px; + --radius-sm: 8px; + --radius-md: 12px; + --radius-lg: 12px; + --radius-xl: 12px; + --radius-full: 9999px; +} + +/* ─── Theme: openknot — Minimalist Premium Noir ─── */ + +:root[data-theme="openknot"] { + color-scheme: dark; + + --vscode-bg: #000000; + --vscode-sidebar: #080808; + --vscode-panel: #0c0c0c; + --vscode-panel-border: rgba(167, 139, 250, 0.08); + --vscode-surface: #111111; + --vscode-hover: #181818; + --vscode-contrast: #000000; + --vscode-text: #e4e4e7; + --vscode-muted: #8c8c94; + --vscode-subtle: #66666c; + --vscode-ghost: #18181b; + --vscode-accent: #a78bfa; + --vscode-accent-alpha: rgba(167, 139, 250, 0.14); + --vscode-selection: #2e1a5e; + --vscode-success: #a78bfa; + --vscode-danger: #a78bfa; + + --kn-claw: #a78bfa; + --kn-claw-bright: #c4b5fd; + --kn-claw-dim: rgba(167, 139, 250, 0.12); + --kn-claw-ember: #c4b5fd; + --kn-claw-deep: #7c3aed; + --kn-ocean: #000000; + --kn-ocean-bright: #1a1a1e; + --kn-ocean-mid: #0e0e12; + --kn-ocean-dim: rgba(0, 0, 0, 0.8); + --kn-ocean-deep: #000000; + --kn-silver: #8c8c94; + --kn-silver-bright: #a1a1aa; + --kn-silver-dim: rgba(140, 140, 148, 0.12); + --kn-bioluminescence: #c4b5fd; + --kn-warm-dark: #18181b; + --kn-void: #18181b; + + --glass-blur: 12px; + --glass-saturate: 110%; + --glass-bg: rgba(12, 12, 12, 0.85); + --glass-bg-elevated: rgba(17, 17, 17, 0.9); + --glass-border: rgba(167, 139, 250, 0.08); + --glass-border-hover: rgba(167, 139, 250, 0.3); + --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04); + --glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5); + --glass-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(167, 139, 250, 0.06); + --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(167, 139, 250, 0.08); + + --radius-xs: 4px; + --radius-sm: 8px; + --radius-md: 12px; + --radius-lg: 12px; + --radius-xl: 12px; + --radius-full: 9999px; +} + +/* ─── Theme: openknot-light — Knot light variant ─── */ + +:root[data-theme="openknot-light"] { + color-scheme: light; + + --vscode-bg: #f4f1ff; + --vscode-sidebar: #ebe6fa; + --vscode-panel: #faf8ff; + --vscode-panel-border: rgba(124, 58, 237, 0.18); + --vscode-surface: #faf8ff; + --vscode-hover: #e5def8; + --vscode-contrast: #ddd4f3; + --vscode-text: #241f36; + --vscode-muted: #5e5578; + --vscode-subtle: #6d6388; + --vscode-ghost: #e7e0fa; + --vscode-accent: #6b2ed0; + --vscode-accent-alpha: rgba(107, 46, 208, 0.15); + --vscode-selection: rgba(107, 46, 208, 0.22); + --vscode-success: #5b21b6; + --vscode-danger: #6b2ed0; + + --kn-claw: #6b2ed0; + --kn-claw-bright: #7c3aed; + --kn-claw-dim: rgba(107, 46, 208, 0.14); + --kn-claw-ember: #7c3aed; + --kn-claw-deep: #5a20b8; + --kn-ocean: #f4f1ff; + --kn-ocean-bright: #faf8ff; + --kn-ocean-mid: #ebe6fa; + --kn-ocean-dim: rgba(244, 241, 255, 0.9); + --kn-ocean-deep: #ddd4f3; + --kn-silver: #5e5578; + --kn-silver-bright: #241f36; + --kn-silver-dim: rgba(94, 85, 120, 0.14); + --kn-bioluminescence: #7c3aed; + --kn-warm-dark: #241f36; + --kn-void: #e7e0fa; + + --glass-blur: 12px; + --glass-saturate: 112%; + --glass-bg: rgba(250, 248, 255, 0.92); + --glass-bg-elevated: rgba(250, 248, 255, 0.96); + --glass-border: rgba(124, 58, 237, 0.25); + --glass-border-hover: rgba(124, 58, 237, 0.45); + --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.55); + --glass-shadow-sm: 0 1px 4px rgba(36, 31, 54, 0.1), 0 1px 2px rgba(36, 31, 54, 0.06); + --glass-shadow-md: 0 4px 16px rgba(36, 31, 54, 0.12), 0 1px 4px rgba(36, 31, 54, 0.06); + --glass-shadow-lg: 0 10px 36px rgba(36, 31, 54, 0.15), 0 2px 8px rgba(36, 31, 54, 0.08); + + --radius-xs: 4px; + --radius-sm: 8px; + --radius-md: 12px; + --radius-lg: 12px; + --radius-xl: 12px; + --radius-full: 9999px; +} + +/* ─── Theme: dash — Warm dark (dark counterpart of dash-light) ─── */ + +:root[data-theme="dash"] { + color-scheme: dark; + + --vscode-bg: #1a1610; + --vscode-sidebar: #14110c; + --vscode-panel: #211c14; + --vscode-panel-border: rgba(196, 140, 64, 0.18); + --vscode-surface: #28221a; + --vscode-hover: #302920; + --vscode-contrast: #100d08; + --vscode-text: #e8e4d8; + --vscode-muted: #9e9580; + --vscode-subtle: #807862; + --vscode-ghost: #252018; + --vscode-accent: #d48438; + --vscode-accent-alpha: rgba(212, 132, 56, 0.15); + --vscode-selection: rgba(212, 132, 56, 0.22); + --vscode-success: #d4903a; + --vscode-danger: #c45030; + + --kn-claw: #d48438; + --kn-claw-bright: #e09040; + --kn-claw-dim: rgba(212, 132, 56, 0.15); + --kn-claw-ember: #e8a050; + --kn-claw-deep: #8a5420; + --kn-ocean: #1a1610; + --kn-ocean-bright: #302920; + --kn-ocean-mid: #211c14; + --kn-ocean-dim: rgba(26, 22, 16, 0.88); + --kn-ocean-deep: #100d08; + --kn-silver: #9e9580; + --kn-silver-bright: #d6d0c0; + --kn-silver-dim: rgba(158, 149, 128, 0.14); + --kn-bioluminescence: #d4903a; + --kn-warm-dark: #252018; + --kn-void: #252018; + + --glass-blur: 0px; + --glass-saturate: 100%; + --glass-bg: rgba(33, 28, 20, 0.94); + --glass-bg-elevated: rgba(40, 34, 26, 0.96); + --glass-border: rgba(196, 140, 64, 0.18); + --glass-border-hover: rgba(196, 140, 64, 0.34); + --glass-highlight: none; + --glass-shadow-sm: none; + --glass-shadow-md: none; + --glass-shadow-lg: none; + + --radius-xs: 0px; + --radius-sm: 0px; + --radius-md: 0px; + --radius-lg: 0px; + --radius-xl: 0px; + --radius-full: 0px; +} + +/* ─── Theme: dash-light — Warm parchment with orange accent ─── */ + +:root[data-theme="dash-light"] { + color-scheme: light; + + --vscode-bg: #faf8f1; + --vscode-sidebar: #f2eddc; + --vscode-panel: #fffdf7; + --vscode-panel-border: rgba(180, 110, 40, 0.16); + --vscode-surface: #fffaf0; + --vscode-hover: #ede6d2; + --vscode-contrast: #e3d9bf; + --vscode-text: #2a2518; + --vscode-muted: #6b5e46; + --vscode-subtle: #7a6e56; + --vscode-ghost: #e4dcc7; + --vscode-accent: #8e5218; + --vscode-accent-alpha: rgba(142, 82, 24, 0.12); + --vscode-selection: rgba(142, 82, 24, 0.18); + --vscode-success: #8a6018; + --vscode-danger: #904820; + + --kn-claw: #8e5218; + --kn-claw-bright: #a86420; + --kn-claw-dim: rgba(142, 82, 24, 0.15); + --kn-claw-ember: #d08a30; + --kn-claw-deep: #7a4a16; + --kn-ocean: #faf8f1; + --kn-ocean-bright: #fffdf7; + --kn-ocean-mid: #f2eddc; + --kn-ocean-dim: rgba(250, 248, 241, 0.92); + --kn-ocean-deep: #e3d9bf; + --kn-silver: #6b5e46; + --kn-silver-bright: #2a2518; + --kn-silver-dim: rgba(107, 94, 70, 0.14); + --kn-bioluminescence: #8e5218; + --kn-warm-dark: #2a2518; + --kn-void: #e4dcc7; + + --glass-blur: 0px; + --glass-saturate: 100%; + --glass-bg: rgba(255, 253, 247, 0.94); + --glass-bg-elevated: rgba(255, 253, 247, 0.98); + --glass-border: rgba(168, 100, 32, 0.2); + --glass-border-hover: rgba(168, 100, 32, 0.36); + --glass-highlight: none; + --glass-shadow-sm: none; + --glass-shadow-md: none; + --glass-shadow-lg: none; + + --radius-xs: 0px; + --radius-sm: 0px; + --radius-md: 0px; + --radius-lg: 0px; + --radius-xl: 0px; + --radius-full: 0px; +} + +/* ─── Theme: clawdash — Chrome Metallic ─── */ + +:root[data-theme="clawdash"] { + color-scheme: dark; + + --vscode-bg: #050507; + --vscode-sidebar: #08080c; + --vscode-panel: #0c0c10; + --vscode-panel-border: rgba(192, 200, 212, 0.1); + --vscode-surface: #101014; + --vscode-hover: #161620; + --vscode-contrast: #020204; + --vscode-text: #e8ecf0; + --vscode-muted: #8a94a4; + --vscode-subtle: #5e6676; + --vscode-ghost: #1a1a22; + --vscode-accent: #e8453a; + --vscode-accent-alpha: rgba(232, 69, 58, 0.14); + --vscode-selection: #3d1418; + --vscode-success: #00d4aa; + --vscode-danger: #e8453a; + + --kn-claw: #e8453a; + --kn-claw-bright: #ff4e41; + --kn-claw-dim: rgba(232, 69, 58, 0.12); + --kn-claw-ember: #fd8e2e; + --kn-claw-deep: #9a2d1f; + --kn-ocean: #08080c; + --kn-ocean-bright: #161620; + --kn-ocean-mid: #0c0c10; + --kn-ocean-dim: rgba(8, 8, 12, 0.8); + --kn-ocean-deep: #050507; + --kn-silver: #7a8494; + --kn-silver-bright: #c0c8d4; + --kn-silver-dim: rgba(192, 200, 212, 0.12); + --kn-bioluminescence: #00d4aa; + --kn-warm-dark: #1a1a22; + --kn-void: #1a1a22; + + --glass-blur: 16px; + --glass-saturate: 150%; + --glass-bg: rgba(12, 12, 16, 0.8); + --glass-bg-elevated: rgba(16, 16, 20, 0.88); + --glass-border: rgba(192, 200, 212, 0.08); + --glass-border-hover: rgba(192, 200, 212, 0.25); + --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06); + --glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 4px rgba(192, 200, 212, 0.04); + --glass-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(192, 200, 212, 0.06); + --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 24px rgba(192, 200, 212, 0.08); + + --radius-xs: 3px; --radius-sm: 6px; --radius-md: 8px; - --radius-lg: 12px; - --radius-xl: 16px; + --radius-lg: 10px; + --radius-xl: 12px; --radius-full: 9999px; - --radius: 8px; +} - /* Transitions - Snappy but smooth */ +/* ─── Semantic Alias Layer ─── + Maps foundation vars to the short names used throughout + component CSS, so themes work without per-component overrides. */ + +:root, +:root[data-theme="dark"], +:root[data-theme="light"], +:root[data-theme="openknot"], +:root[data-theme="openknot-light"], +:root[data-theme="dash"], +:root[data-theme="dash-light"], +:root[data-theme="clawdash"] { + /* Core surfaces */ + --bg: var(--vscode-bg); + --bg-accent: var(--vscode-sidebar); + --bg-elevated: var(--vscode-surface); + --bg-hover: var(--vscode-hover); + --bg-muted: var(--vscode-sidebar); + --bg-content: var(--vscode-bg); + + /* Card/popover surfaces */ + --card: var(--vscode-panel); + --card-foreground: var(--vscode-text); + --card-highlight: rgba(255, 255, 255, 0.04); + --popover: var(--vscode-panel); + --popover-foreground: var(--vscode-text); + + /* Panel/chrome surfaces */ + --panel: var(--vscode-sidebar); + --panel-strong: var(--vscode-panel); + --panel-hover: var(--vscode-hover); + --chrome: var(--glass-bg); + --chrome-strong: var(--glass-bg-elevated); + + /* Typography */ + --text: var(--vscode-text); + --text-strong: var(--vscode-text); + --chat-text: var(--vscode-text); + --chat-max-width: 74rem; + --muted: var(--vscode-muted); + --muted-strong: var(--vscode-subtle); + --muted-foreground: var(--vscode-muted); + + /* Borders + controls */ + --border: var(--glass-border); + --border-strong: var(--glass-border-hover); + --border-hover: var(--glass-border-hover); + --input: var(--glass-border); + --ring: var(--vscode-accent); + + /* Accent */ + --accent: var(--vscode-accent); + --accent-strong: var(--kn-claw-deep); + --accent-hover: var(--kn-claw-bright); + --accent-muted: var(--vscode-accent); + --accent-subtle: var(--vscode-accent-alpha); + --accent-foreground: #14110c; + --accent-glow: var(--kn-claw-dim); + --accent-soft: var(--vscode-accent-alpha); + --primary: var(--vscode-accent); + --primary-foreground: #14110c; + + /* Secondary */ + --secondary: var(--vscode-sidebar); + --secondary-foreground: var(--vscode-text); + --accent-2: var(--kn-bioluminescence); + --accent-2-muted: var(--kn-silver); + --accent-2-subtle: var(--kn-silver-dim); + + /* Semantic */ + --ok: var(--vscode-success); + --ok-muted: var(--vscode-success); + --ok-subtle: var(--kn-silver-dim); + --destructive: var(--vscode-danger); + --destructive-foreground: #14110c; + --warn: var(--kn-claw-ember); + --warn-muted: var(--kn-claw-ember); + --warn-subtle: var(--kn-claw-dim); + --danger: var(--vscode-danger); + --danger-muted: var(--vscode-danger); + --danger-subtle: var(--kn-claw-dim); + --info: #3b82f6; + --success: var(--vscode-success); + + /* Focus */ + --focus: var(--kn-claw-dim); + --focus-offset-color: var(--bg); + --focus-ring-width: 2px; + --focus-ring-offset-width: 2px; + --focus-ring-color: var(--vscode-accent); + --focus-ring: + 0 0 0 var(--focus-ring-offset-width) var(--focus-offset-color), + 0 0 0 calc(var(--focus-ring-offset-width) + var(--focus-ring-width)) var(--focus-ring-color); + --focus-glow: + 0 0 0 var(--focus-ring-offset-width) var(--focus-offset-color), + 0 0 0 calc(var(--focus-ring-offset-width) + var(--focus-ring-width)) var(--focus-ring-color), + 0 0 18px var(--accent-glow); + + --grid-line: rgba(255, 255, 255, 0.04); + + /* Shadows */ + --shadow-sm: var(--glass-shadow-sm); + --shadow-md: var(--glass-shadow-md); + --shadow-lg: var(--glass-shadow-lg); + --shadow-xl: var(--glass-shadow-lg); + --shadow-glow: 0 0 30px var(--accent-glow); + + /* Radii — aliased from foundation */ + --radius: var(--radius-md); + + /* Timing */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); @@ -107,89 +560,109 @@ --duration-normal: 200ms; --duration-slow: 350ms; - color-scheme: dark; + /* Typography stacks */ + --mono: + "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace; + --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + + /* Clay compat layer (dashboard-lit components) */ + --clay-bg: var(--vscode-bg); + --clay-bg-card: var(--vscode-panel); + --clay-bg-elevated: var(--vscode-surface); + --clay-bg-button: var(--vscode-hover); + --clay-bg-interactive: var(--vscode-accent-alpha); + --clay-bg-pressed: var(--vscode-selection); + --clay-bg-scrim: rgba(0, 0, 0, 0.6); + --clay-border-color: var(--glass-border); + --clay-border-subtle: var(--vscode-panel-border); + --clay-shadow: var(--glass-shadow-sm); + --clay-shadow-elevated: var(--glass-shadow-md); + --clay-shadow-pressed: var(--glass-shadow-sm); + --clay-shadow-subtle: var(--glass-shadow-sm); + --clay-radius-sm: var(--radius-sm); + --clay-radius: var(--radius-md); + --clay-radius-md: var(--radius-md); + --clay-radius-lg: var(--radius-lg); + --clay-radius-xl: var(--radius-xl); + --clay-radius-pill: var(--radius-full); + --clay-duration-fast: 150ms; + --clay-duration-normal: 250ms; + --clay-duration-slow: 400ms; + --clay-easing: cubic-bezier(0.16, 1, 0.3, 1); + + /* Layout semantic tokens */ + --topbar-bg: var(--vscode-sidebar); + --topbar-shadow: none; + --topbar-border: 1px solid var(--glass-border); + --topbar-title-color: var(--vscode-text); + --topbar-title-weight: 600; + --sidebar-bg: var(--vscode-sidebar); + --sidebar-border: none; + --sidebar-nav-inactive: var(--vscode-muted); + --sidebar-nav-active-bg: var(--vscode-accent-alpha); + --sidebar-nav-active-bar: 3px solid var(--vscode-accent); + --agent-header-bg: var(--vscode-panel); + --agent-header-border: 1px solid var(--glass-border); + --agent-tab-active-bg: var(--vscode-accent-alpha); + --agent-tab-hover-bg: var(--vscode-accent-alpha); } -/* Light theme - Clean with subtle warmth */ -:root[data-theme="light"] { - --bg: #fafafa; - --bg-accent: #f5f5f5; - --bg-elevated: #ffffff; - --bg-hover: #f0f0f0; - --bg-muted: #f0f0f0; - --bg-content: #f5f5f5; - - --card: #ffffff; - --card-foreground: #18181b; - --card-highlight: rgba(0, 0, 0, 0.03); - --popover: #ffffff; - --popover-foreground: #18181b; - - --panel: #fafafa; - --panel-strong: #f5f5f5; - --panel-hover: #ebebeb; - --chrome: rgba(250, 250, 250, 0.95); - --chrome-strong: rgba(250, 250, 250, 0.98); - - --text: #3f3f46; - --text-strong: #18181b; - --chat-text: #3f3f46; - --muted: #71717a; - --muted-strong: #52525b; - --muted-foreground: #71717a; - - --border: #e4e4e7; - --border-strong: #d4d4d8; - --border-hover: #a1a1aa; - --input: #e4e4e7; - - --accent: #dc2626; - --accent-hover: #ef4444; - --accent-muted: #dc2626; - --accent-subtle: rgba(220, 38, 38, 0.12); +/* Light theme semantic overrides */ +:root[data-theme="light"], +:root[data-theme="openknot-light"], +:root[data-theme="dash-light"] { + --card-highlight: rgba(255, 255, 255, 0.55); --accent-foreground: #ffffff; - --accent-glow: rgba(220, 38, 38, 0.15); - --primary: #dc2626; --primary-foreground: #ffffff; - - --secondary: #f4f4f5; - --secondary-foreground: #3f3f46; - --accent-2: #0d9488; - --accent-2-muted: rgba(13, 148, 136, 0.75); - --accent-2-subtle: rgba(13, 148, 136, 0.12); - - --ok: #16a34a; - --ok-muted: rgba(22, 163, 74, 0.75); - --ok-subtle: rgba(22, 163, 74, 0.1); - --destructive: #dc2626; - --destructive-foreground: #fafafa; - --warn: #d97706; - --warn-muted: rgba(217, 119, 6, 0.75); - --warn-subtle: rgba(217, 119, 6, 0.1); - --danger: #dc2626; - --danger-muted: rgba(220, 38, 38, 0.75); - --danger-subtle: rgba(220, 38, 38, 0.1); - --info: #2563eb; - - --focus: rgba(220, 38, 38, 0.2); - --focus-glow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring), 0 0 16px var(--accent-glow); - - --grid-line: rgba(0, 0, 0, 0.05); - - /* Light shadows */ - --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); - --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04); - --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04); - --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04); - --shadow-glow: 0 0 24px var(--accent-glow); - - color-scheme: light; + --destructive-foreground: #ffffff; + --focus-offset-color: var(--bg); + --grid-line: rgba(42, 36, 32, 0.1); + --muted-strong: var(--vscode-muted); + --input: rgba(42, 36, 32, 0.62); } -* { - box-sizing: border-box; +:root[data-theme="light"] { + --card-highlight: rgba(255, 255, 255, 0.7); + --grid-line: rgba(42, 36, 32, 0.06); + --input: rgba(42, 36, 32, 0.22); + --clay-bg-scrim: rgba(42, 37, 32, 0.18); } +:root[data-theme="dash-light"] { + --card-highlight: rgba(255, 255, 255, 0.72); + --grid-line: color-mix(in srgb, var(--vscode-text) 12%, transparent); + --input: color-mix(in srgb, var(--vscode-text) 30%, transparent); + --clay-bg-scrim: rgba(20, 18, 10, 0.24); +} + +/* Button foreground overrides — where accent luminance makes white text low-contrast */ +:root[data-theme="openknot"] { + --accent-foreground: #18181b; + --primary-foreground: #18181b; + --destructive-foreground: #18181b; +} + +:root[data-theme="dash"] { + --accent-foreground: #14110c; + --primary-foreground: #14110c; +} + +/* ─── Accessibility: High Contrast ─── */ + +@media (prefers-contrast: more) { + :root { + --glass-shadow-sm: 0 0 0 2px var(--vscode-text); + --glass-shadow-md: 0 0 0 2px var(--vscode-text); + --glass-shadow-lg: 0 0 0 2px var(--vscode-text); + --glass-border: rgba(255, 255, 255, 0.3); + } +} + +/* ════════════════════════════════════════════════════════ + Base Styles + ════════════════════════════════════════════════════════ */ + html, body { height: 100%; @@ -197,8 +670,8 @@ body { body { margin: 0; - font: 400 14px/1.55 var(--font-body); - letter-spacing: -0.02em; + font: 400 15px/1.55 var(--font-body); + letter-spacing: -0.01em; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; @@ -286,7 +759,193 @@ select { background: var(--border-strong); } -/* Animations - Polished with spring feel */ +/* ════════════════════════════════════════════════════════ + Theme-Specific Decorative Effects + ════════════════════════════════════════════════════════ */ + +/* ─── Dark — Flat neutral background ─── */ + +:root[data-theme="dark"] body { + background: var(--bg); +} + +@keyframes star-twinkle { + 0% { + opacity: 0.35; + } + 100% { + opacity: 0.55; + } +} + +:root[data-theme="dark"] body::after { + display: none; +} + +/* ─── openknot — Lavender stars ─── */ + +:root[data-theme="openknot"] body::after { + content: ""; + position: fixed; + inset: 0; + pointer-events: none; + z-index: 0; + opacity: 0.35; + animation: star-twinkle 8s ease-in-out infinite alternate; + box-shadow: + 120px 40px 0 0.4px rgba(196, 181, 253, 0.5), + 340px 90px 0 0.3px rgba(196, 181, 253, 0.3), + 580px 60px 0 0.5px rgba(196, 181, 253, 0.6), + 800px 130px 0 0.3px rgba(196, 181, 253, 0.4), + 90px 200px 0 0.5px rgba(196, 181, 253, 0.4), + 470px 220px 0 0.4px rgba(196, 181, 253, 0.5), + 900px 250px 0 0.5px rgba(196, 181, 253, 0.6), + 200px 420px 0 0.5px rgba(196, 181, 253, 0.5), + 640px 450px 0 0.4px rgba(196, 181, 253, 0.4), + 380px 580px 0 0.3px rgba(196, 181, 253, 0.4), + 780px 570px 0 0.3px rgba(196, 181, 253, 0.5), + 520px 660px 0 0.4px rgba(196, 181, 253, 0.5); +} + +/* ─── dash — Flat warm-dark overrides (mirrors dash-light style) ─── */ + +:root[data-theme="dash"] .page-title, +:root[data-theme="dash-light"] .page-title, +:root[data-theme="dash"] .panel-title, +:root[data-theme="dash-light"] .panel-title, +:root[data-theme="dash"] .agent-chat__welcome h2, +:root[data-theme="dash-light"] .agent-chat__welcome h2 { + font-family: var(--font-mono); + text-transform: uppercase; + letter-spacing: 0.04em; + font-weight: 700; +} + +:root[data-theme="dash"] .sidebar-brand__title, +:root[data-theme="dash-light"] .sidebar-brand__title { + font-family: var(--font-mono); + text-transform: uppercase; + letter-spacing: 0.02em; +} + +:root[data-theme="dash"] .glass-dashboard-card, +:root[data-theme="dash-light"] .glass-dashboard-card, +:root[data-theme="dash"] .stat-card, +:root[data-theme="dash-light"] .stat-card, +:root[data-theme="dash"] .agent-chat__starter, +:root[data-theme="dash-light"] .agent-chat__starter { + border-style: dashed; +} + +:root[data-theme="dash"] .sidebar { + backdrop-filter: none; + -webkit-backdrop-filter: none; + background: var(--vscode-sidebar); +} + +:root[data-theme="dash"] .glass-dashboard-card { + backdrop-filter: none; + -webkit-backdrop-filter: none; + background: var(--vscode-panel); +} + +:root[data-theme="dash"] body::after { + display: none; +} + +/* dash-light keeps its own overrides minimal */ +:root[data-theme="dash-light"] .sidebar { + backdrop-filter: none; + -webkit-backdrop-filter: none; + background: var(--vscode-sidebar); +} + +:root[data-theme="dash-light"] .glass-dashboard-card { + backdrop-filter: none; + -webkit-backdrop-filter: none; + background: var(--vscode-panel); +} + +:root[data-theme="dash-light"] body::after { + display: none; +} + +/* ─── light — Clean warm-white ambient gradient ─── */ + +:root[data-theme="light"] body { + background: + radial-gradient(ellipse 90% 60% at 50% -15%, rgba(220, 69, 53, 0.02) 0%, transparent 55%), + radial-gradient(ellipse 70% 50% at 85% 40%, rgba(26, 138, 102, 0.015) 0%, transparent 50%), + var(--bg); +} + +:root[data-theme="light"] body::after { + display: none; +} + +/* ─── openknot-light — Lavender parchment ambient ─── */ + +:root[data-theme="openknot-light"] body { + background: + radial-gradient(ellipse 90% 60% at 50% -15%, rgba(124, 58, 237, 0.05) 0%, transparent 55%), + radial-gradient(ellipse 70% 50% at 85% 40%, rgba(109, 40, 217, 0.03) 0%, transparent 50%), + radial-gradient(ellipse 60% 40% at 15% 80%, rgba(124, 58, 237, 0.02) 0%, transparent 45%), + var(--bg); +} + +:root[data-theme="openknot-light"] body::after { + display: none; +} + +/* ─── dash-light — Paper dossier ambient ─── */ + +:root[data-theme="dash-light"] body { + background: + radial-gradient(ellipse 90% 60% at 50% -15%, rgba(89, 96, 49, 0.035) 0%, transparent 55%), + radial-gradient(ellipse 70% 50% at 85% 40%, rgba(67, 74, 34, 0.02) 0%, transparent 50%), + radial-gradient(ellipse 60% 40% at 15% 80%, rgba(89, 96, 49, 0.015) 0%, transparent 45%), + var(--bg); +} + +/* ─── clawdash — Chrome Metallic Overrides ─── */ + +:root[data-theme="clawdash"] body { + background: + radial-gradient(ellipse 80% 50% at 40% -10%, rgba(192, 200, 212, 0.06) 0%, transparent 60%), + radial-gradient(ellipse 60% 40% at 70% 30%, rgba(202, 58, 41, 0.04) 0%, transparent 50%), + var(--bg); +} + +:root[data-theme="clawdash"] body::after { + display: none; +} + +:root[data-theme="clawdash"] .nav-item--active { + border-image: linear-gradient(to bottom, var(--kn-silver-bright), var(--kn-claw)) 1; + border-image-slice: 1; +} + +/* ─── High Contrast Overrides (all themes) ─── */ + +@media (prefers-contrast: more) { + .topbar, + .sidebar, + .nav-item--active, + .stat-card, + .callout, + .pill, + pre, + input, + button { + box-shadow: 0 0 0 2px var(--text) !important; + border-width: 1.5px; + } +} + +/* ════════════════════════════════════════════════════════ + Animations + ════════════════════════════════════════════════════════ */ + @keyframes rise { from { opacity: 0; @@ -358,6 +1017,15 @@ select { } } +@keyframes chrome-shimmer { + 0% { + left: -100%; + } + 100% { + left: 100%; + } +} + /* Stagger animation delays for grouped elements */ .stagger-1 { animation-delay: 0ms; diff --git a/ui/src/styles/chat.css b/ui/src/styles/chat.css index 07d3b644a63..74c7d530ab7 100644 --- a/ui/src/styles/chat.css +++ b/ui/src/styles/chat.css @@ -1,5 +1,6 @@ @import "./chat/layout.css"; @import "./chat/text.css"; +@import "./chat/agent-chat.css"; @import "./chat/grouped.css"; @import "./chat/tool-cards.css"; @import "./chat/sidebar.css"; diff --git a/ui/src/styles/chat/agent-chat.css b/ui/src/styles/chat/agent-chat.css new file mode 100644 index 00000000000..83e2248906a --- /dev/null +++ b/ui/src/styles/chat/agent-chat.css @@ -0,0 +1,1302 @@ +/* =========================================== + Agent Chat — ported from dashboard-lit + =========================================== */ + +.agent-chat { + display: flex; + flex-direction: column; + height: 100%; + min-height: 0; + overflow: hidden; + position: relative; +} + +.agent-chat__thread { + flex: 1 1 0; + min-height: 0; + overflow-y: auto; + padding: 12px 18px; + display: flex; + flex-direction: column; + gap: 4px; +} + +.agent-chat__empty { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + color: var(--muted); + font-size: 0.92rem; +} + +.agent-chat__error { + color: color-mix(in srgb, var(--accent) 85%, #fff); + font-size: 0.85rem; + padding: 6px 10px; + margin-top: 4px; + background: color-mix(in srgb, var(--accent) 8%, transparent); + border-radius: var(--radius-sm); + border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); +} + +/* ─── Welcome / Empty State ─── */ + +.agent-chat__welcome { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 6px; + padding: 40px 24px 32px; + text-align: center; + position: relative; + overflow: hidden; +} + +.agent-chat__welcome-glow { + position: absolute; + top: 10%; + left: 50%; + transform: translateX(-50%); + width: 280px; + height: 180px; + border-radius: 50%; + background: radial-gradient(ellipse, var(--agent-color, var(--accent)) 0%, transparent 70%); + opacity: 0.06; + pointer-events: none; + filter: blur(40px); +} + +.agent-chat__welcome h2 { + font-size: 1.5rem; + font-weight: 700; + color: var(--text); + margin: 8px 0 0; + letter-spacing: -0.02em; +} + +.agent-chat__personality { + font-size: 0.88rem; + color: var(--muted); + max-width: 380px; + line-height: 1.55; + margin: 2px 0 0; +} + +.agent-chat__badges { + display: flex; + gap: 6px; + flex-wrap: wrap; + justify-content: center; + margin-top: 6px; +} + +.agent-chat__badge { + display: inline-flex; + align-items: center; + gap: 5px; + padding: 4px 12px; + border-radius: 999px; + border: 1px solid var(--border); + background: transparent; + color: var(--muted); + font-size: 0.75rem; + font-weight: 500; + letter-spacing: 0.01em; +} + +.agent-chat__badge svg, +.agent-chat__badge img { + width: 14px; + height: 14px; + object-fit: contain; + vertical-align: -0.15em; +} + +/* ─── Starter Cards ─── */ + +.agent-chat__starters { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; + margin-top: 16px; + width: 100%; + max-width: 420px; +} + +.agent-chat__starter { + display: flex; + align-items: center; + gap: 10px; + padding: 12px 14px; + border: 1px solid var(--border); + border-radius: var(--radius-lg); + background: var(--card); + color: var(--text); + font-size: 0.82rem; + font-weight: 500; + text-align: left; + cursor: pointer; + transition: + border-color var(--duration-fast) ease, + background var(--duration-fast) ease, + box-shadow var(--duration-fast) ease, + transform var(--duration-fast) var(--ease-spring); + line-height: 1.35; +} + +.agent-chat__starter:hover { + border-color: color-mix(in srgb, var(--agent-color, var(--accent)) 45%, transparent); + background: color-mix(in srgb, var(--agent-color, var(--accent)) 5%, transparent); + box-shadow: 0 2px 12px color-mix(in srgb, var(--agent-color, var(--accent)) 8%, transparent); + transform: translateY(-1px); +} + +.agent-chat__starter:active { + transform: translateY(0); + box-shadow: none; +} + +.agent-chat__starter:disabled { + opacity: 0.45; + cursor: not-allowed; + transform: none; + box-shadow: none; +} + +.agent-chat__starter-icon { + font-size: 1.15rem; + line-height: 1; + flex-shrink: 0; +} + +.agent-chat__starter-label { + flex: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.agent-chat__starter-arrow { + display: flex; + align-items: center; + color: var(--agent-color, var(--accent)); + opacity: 0; + transform: translateX(-3px); + transition: + opacity var(--duration-fast) ease, + transform var(--duration-fast) ease; + flex-shrink: 0; +} + +.agent-chat__starter-arrow svg { + width: 14px; + height: 14px; +} + +.agent-chat__starter:hover .agent-chat__starter-arrow { + opacity: 0.8; + transform: translateX(0); +} + +@media (max-width: 400px) { + .agent-chat__starters { + grid-template-columns: 1fr; + max-width: 280px; + } +} + +.agent-chat__hint { + font-size: 0.73rem; + color: var(--muted); + margin-top: 20px; + opacity: 0.7; +} + +.agent-chat__hint kbd { + display: inline-block; + padding: 1px 5px; + border: 1px solid var(--border); + border-radius: 4px; + background: var(--card); + font-size: 0.7rem; + font-family: inherit; +} + +.agent-chat__suggestions { + display: flex; + flex-wrap: wrap; + gap: 8px; + justify-content: center; + margin-top: 16px; + max-width: 480px; +} + +.agent-chat__suggestion { + padding: 8px 16px; + border: 1px solid var(--border); + border-radius: var(--radius-full); + background: transparent; + color: var(--muted); + font-size: 13px; + cursor: pointer; + transition: + background 150ms ease-out, + border-color 150ms ease-out, + color 150ms ease-out; +} + +.agent-chat__suggestion:hover { + background: color-mix(in srgb, var(--accent) 10%, transparent); + border-color: color-mix(in srgb, var(--accent) 40%, transparent); + color: var(--text); +} + +/* ─── Avatar Circle ─── */ + +.agent-chat__avatar { + width: 56px; + height: 56px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.4rem; + font-weight: 700; + color: #fff; + background: var(--agent-color, var(--accent)); + flex-shrink: 0; +} + +.agent-chat__avatar--logo { + background: transparent; +} + +.agent-chat__avatar--logo svg, +.agent-chat__avatar--logo img { + width: 48px; + height: 48px; + object-fit: contain; +} + +.agent-chat__avatar--sm { + width: 24px; + height: 24px; + font-size: 0.65rem; +} + +/* ─── Chat Bubble ─── */ + +.chat-bubble { + padding: 10px 14px; + max-width: 100%; + word-wrap: break-word; + overflow-wrap: break-word; + position: relative; +} + +.chat-bubble--history { + opacity: 0.65; +} + +.chat-bubble--user { + background: color-mix(in srgb, var(--accent) 6%, var(--card)); + border-radius: var(--radius-lg); + border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent); + margin-left: auto; + max-width: 85%; +} + +.chat-bubble--assistant { + padding: 10px 14px; +} + +.chat-bubble--tool { + padding: 4px 14px; +} + +.chat-bubble__header { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 4px; +} + +.chat-bubble__role { + font-size: 0.78rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--ok); +} + +.chat-bubble--user .chat-bubble__role { + color: var(--accent); +} + +.chat-bubble__role--tool { + color: var(--warn); + display: inline-flex; + align-items: center; + gap: 4px; +} + +.chat-bubble__role--tool svg { + width: 14px; + height: 14px; +} + +.chat-bubble__model-tag { + font-size: 0.68rem; + font-weight: 600; + padding: 1px 6px; + border-radius: 999px; + background: color-mix(in srgb, var(--text) 8%, transparent); + color: var(--muted); +} + +.chat-bubble__ts { + font-size: 0.72rem; + color: var(--muted); +} + +.chat-bubble__body { + font-size: 0.92rem; + line-height: 1.45; + white-space: pre-wrap; + word-wrap: break-word; +} + +.chat-bubble__actions { + display: none; + gap: 4px; + margin-top: 4px; +} + +.chat-bubble:hover .chat-bubble__actions { + display: flex; +} + +.chat-bubble__action { + display: inline-flex; + align-items: center; + justify-content: center; + width: 26px; + height: 26px; + border-radius: var(--radius-sm); + border: none; + background: transparent; + color: var(--muted); + cursor: pointer; + transition: all var(--duration-fast) ease; + padding: 0; +} + +.chat-bubble__action svg { + width: 14px; + height: 14px; +} + +.chat-bubble__action:hover { + color: var(--text); + background: var(--bg-hover); +} + +/* ─── Chat Divider ─── */ + +.agent-chat__divider { + display: flex; + align-items: center; + gap: 12px; + margin: 10px 0; + font-size: 0.72rem; + color: var(--accent); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.agent-chat__divider::before, +.agent-chat__divider::after { + content: ""; + flex: 1; + height: 1px; + background: color-mix(in srgb, var(--accent) 30%, transparent); +} + +/* ─── Streaming Indicator ─── */ + +.agent-chat__streaming { + padding: 10px 14px; + border-left: 2px solid var(--accent); + animation: chat-pulse 1.5s ease-in-out infinite; +} + +.agent-chat__streaming-header { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 6px; +} + +.agent-chat__streaming-name { + font-size: 0.82rem; + font-weight: 600; + color: var(--text); +} + +.agent-chat__streaming-dots { + display: inline-flex; + gap: 3px; + align-items: center; +} + +.agent-chat__streaming-dots span { + width: 5px; + height: 5px; + border-radius: 50%; + background: var(--accent); + animation: chat-pulse 1.2s ease-in-out infinite; +} + +.agent-chat__streaming-dots span:nth-child(2) { + animation-delay: 0.2s; +} + +.agent-chat__streaming-dots span:nth-child(3) { + animation-delay: 0.4s; +} + +.agent-chat__streaming-label { + font-size: 0.75rem; + color: var(--muted); + font-style: italic; +} + +.agent-chat__streaming-timer { + font-size: 0.72rem; + color: var(--muted); + font-variant-numeric: tabular-nums; +} + +.agent-chat__streaming-content { + font-size: 0.92rem; + line-height: 1.45; +} + +.agent-chat__cursor { + display: inline-block; + width: 2px; + height: 1em; + background: var(--accent); + margin-left: 1px; + vertical-align: text-bottom; + animation: cursor-blink 0.8s step-end infinite; +} + +@keyframes cursor-blink { + 0%, + 100% { + opacity: 1; + } + + 50% { + opacity: 0; + } +} + +@keyframes chat-pulse { + 0%, + 100% { + opacity: 1; + } + + 50% { + opacity: 0.5; + } +} + +/* ─── Input Bar (Cursor-style unified container) ─── */ + +.agent-chat__input { + position: relative; + display: flex; + flex-direction: column; + width: 100%; + max-width: var(--chat-max-width, 74rem); + margin: 0 auto 24px; + padding: 0; + background: color-mix(in srgb, var(--bg-elevated) 86%, var(--panel)); + border: 1px solid color-mix(in srgb, var(--border) 78%, transparent); + border-radius: var(--radius-lg); + flex-shrink: 0; + overflow: hidden; + transition: + border-color var(--duration-fast) ease, + box-shadow var(--duration-fast) ease; +} + +.agent-chat__input:focus-within { + border-color: color-mix(in srgb, var(--accent) 50%, transparent); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); +} + +@supports (backdrop-filter: blur(1px)) { + .agent-chat__input { + backdrop-filter: blur(16px) saturate(1.8); + -webkit-backdrop-filter: blur(16px) saturate(1.8); + } +} + +/* Textarea — full width, borderless inside the container */ + +.agent-chat__input > textarea { + width: 100%; + min-height: 52px; + max-height: 150px; + resize: none; + padding: 12px 14px 8px; + border: none; + background: transparent; + color: var(--text); + font-size: 0.92rem; + font-family: inherit; + line-height: 1.4; + outline: none; + box-sizing: border-box; +} + +.agent-chat__input > textarea::placeholder { + color: var(--muted); +} + +/* ─── Toolbar (below textarea) ─── */ + +.agent-chat__toolbar { + display: flex; + align-items: center; + justify-content: space-between; + padding: 6px 10px; + border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent); +} + +.agent-chat__toolbar-left, +.agent-chat__toolbar-right { + display: flex; + align-items: center; + gap: 4px; +} + +/* ─── Toolbar buttons (ghost style) ─── */ + +.agent-chat__input-btn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; + border-radius: var(--radius-sm); + border: none; + background: transparent; + color: var(--muted); + cursor: pointer; + flex-shrink: 0; + transition: all var(--duration-fast) ease; + padding: 0; +} + +.agent-chat__input-btn svg { + width: 16px; + height: 16px; + stroke: currentColor; + fill: none; + stroke-width: 1.5px; + stroke-linecap: round; + stroke-linejoin: round; +} + +.agent-chat__input-btn:hover:not(:disabled) { + color: var(--text); + background: var(--bg-hover); +} + +.agent-chat__input-btn:disabled { + opacity: 0.4; + cursor: not-allowed; +} + +.agent-chat__input-btn--active { + color: var(--accent); + background: color-mix(in srgb, var(--accent) 12%, transparent); +} + +/* Recording mic pulse */ +.agent-chat__input-btn--recording { + color: var(--danger, #e53e3e); + background: color-mix(in srgb, var(--danger, #e53e3e) 12%, transparent); + animation: mic-pulse 1.5s ease-in-out infinite; +} + +@keyframes mic-pulse { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} + +/* STT interim transcript preview */ +.agent-chat__stt-interim { + font-size: 0.8rem; + color: var(--muted); + font-style: italic; + padding: 4px 12px 0; + white-space: pre-wrap; + max-height: 3em; + overflow-y: auto; +} + +.agent-chat__toolbar .btn-ghost { + display: inline-flex; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; + border-radius: var(--radius-sm); + border: none; + background: transparent; + color: var(--muted); + cursor: pointer; + padding: 0; + transition: all var(--duration-fast) ease; +} + +.agent-chat__toolbar .btn-ghost svg { + width: 16px; + height: 16px; + stroke: currentColor; + fill: none; + stroke-width: 1.5px; + stroke-linecap: round; + stroke-linejoin: round; +} + +.agent-chat__toolbar .btn-ghost:hover:not(:disabled) { + color: var(--text); + background: var(--bg-hover); +} + +.agent-chat__toolbar .btn-ghost:disabled { + opacity: 0.4; + cursor: not-allowed; +} + +.agent-chat__input-divider { + width: 1px; + height: 16px; + background: var(--border); + margin: 0 4px; +} + +.agent-chat__token-count { + font-size: 0.7rem; + color: var(--muted); + white-space: nowrap; + flex-shrink: 0; + align-self: center; +} + +/* Send / Stop button */ + +.chat-send-btn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: var(--radius-md); + border: none; + background: var(--accent); + color: var(--accent-foreground); + cursor: pointer; + flex-shrink: 0; + transition: all var(--duration-fast) ease; + padding: 0; +} + +.chat-send-btn svg { + width: 16px; + height: 16px; + stroke: currentColor; + fill: none; + stroke-width: 1.5px; + stroke-linecap: round; + stroke-linejoin: round; +} + +.chat-send-btn:hover:not(:disabled) { + background: var(--accent-hover); + box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 24%, transparent); +} + +.chat-send-btn:disabled { + opacity: 0.4; + cursor: not-allowed; +} + +.chat-send-btn--stop { + background: var(--danger); +} + +.chat-send-btn--stop:hover:not(:disabled) { + background: color-mix(in srgb, var(--danger) 85%, #fff); +} + +/* ─── Search Bar ─── */ + +.agent-chat__search-bar { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 14px; + border-bottom: 1px solid var(--border); + background: var(--card); +} + +.agent-chat__search-bar svg { + width: 16px; + height: 16px; + color: var(--muted); + flex-shrink: 0; +} + +.agent-chat__search-bar input { + flex: 1; + border: none; + background: transparent; + color: var(--text); + font-size: 0.88rem; + outline: none; +} + +.agent-chat__search-bar input::placeholder { + color: var(--muted); +} + +/* ─── Pinned Messages ─── */ + +.agent-chat__pinned { + border-bottom: 1px solid var(--border); + padding: 6px 14px; +} + +.agent-chat__pinned-toggle { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 4px 8px; + border-radius: var(--radius-sm); + border: none; + background: transparent; + color: var(--accent); + font-size: 0.78rem; + font-weight: 600; + cursor: pointer; + transition: background var(--duration-fast) ease; +} + +.agent-chat__pinned-toggle svg { + width: 14px; + height: 14px; +} + +.agent-chat__pinned-toggle:hover { + background: var(--bg-hover); +} + +.agent-chat__pinned-list { + display: flex; + flex-direction: column; + gap: 4px; + margin-top: 4px; + padding-left: 8px; +} + +.agent-chat__pinned-item { + display: flex; + align-items: center; + gap: 8px; + padding: 4px 8px; + border-radius: var(--radius-sm); + font-size: 0.82rem; +} + +.agent-chat__pinned-role { + font-weight: 600; + font-size: 0.72rem; + text-transform: uppercase; + color: var(--muted); + flex-shrink: 0; +} + +.agent-chat__pinned-text { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: var(--text); +} + +/* ─── Scroll Pill ─── */ + +.agent-chat__scroll-pill { + position: absolute; + bottom: 100px; + left: 50%; + transform: translateX(-50%); + display: inline-flex; + align-items: center; + gap: 5px; + padding: 6px 14px; + border-radius: 999px; + border: 1px solid var(--border); + background: var(--card); + color: var(--accent); + font-size: 0.78rem; + font-weight: 600; + cursor: pointer; + box-shadow: var(--shadow-md); + z-index: 20; + transition: all var(--duration-fast) ease; +} + +.agent-chat__scroll-pill svg { + width: 14px; + height: 14px; +} + +.agent-chat__scroll-pill:hover { + background: color-mix(in srgb, var(--accent) 10%, var(--card)); +} + +/* ─── Slash Command Menu ─── */ + +.slash-menu { + position: absolute; + bottom: 100%; + left: 0; + right: 0; + max-height: 360px; + overflow-y: auto; + background: var(--popover); + border: 1px solid var(--border-strong); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-lg); + z-index: 30; + margin-bottom: 4px; + padding: 6px; + scrollbar-width: thin; + animation: slash-menu-enter 120ms ease-out; +} + +@keyframes slash-menu-enter { + from { + opacity: 0; + transform: translateY(6px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.slash-menu-group + .slash-menu-group { + margin-top: 4px; + padding-top: 4px; + border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent); +} + +.slash-menu-group__label { + padding: 4px 10px 2px; + font-size: 0.68rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--accent); + opacity: 0.7; +} + +.slash-menu-item { + display: flex; + align-items: center; + gap: 8px; + padding: 7px 10px; + border-radius: var(--radius-sm); + cursor: pointer; + transition: + background var(--duration-fast) ease, + color var(--duration-fast) ease; +} + +.slash-menu-item:hover, +.slash-menu-item--active { + background: color-mix(in srgb, var(--accent) 10%, var(--bg-hover)); +} + +.slash-menu-icon { + display: flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + flex-shrink: 0; + color: var(--accent); + opacity: 0.7; +} + +.slash-menu-icon svg { + width: 14px; + height: 14px; + stroke: currentColor; + fill: none; + stroke-width: 1.5px; + stroke-linecap: round; + stroke-linejoin: round; +} + +.slash-menu-item--active .slash-menu-icon, +.slash-menu-item:hover .slash-menu-icon { + opacity: 1; +} + +.slash-menu-name { + font-size: 0.82rem; + font-weight: 600; + font-family: var(--mono); + color: var(--accent); + white-space: nowrap; +} + +.slash-menu-args { + font-size: 0.75rem; + color: var(--muted); + font-family: var(--mono); + opacity: 0.65; +} + +.slash-menu-desc { + font-size: 0.75rem; + color: var(--muted); + flex: 1; + text-align: right; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.slash-menu-badge { + font-size: 0.62rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--accent); + background: color-mix(in srgb, var(--accent) 12%, transparent); + padding: 1px 5px; + border-radius: 3px; + flex-shrink: 0; + line-height: 1.4; +} + +.slash-menu-item--active .slash-menu-name { + color: var(--accent-hover); +} + +.slash-menu-item--active .slash-menu-desc { + color: var(--text); +} + +.slash-menu-item--active .slash-menu-badge { + background: color-mix(in srgb, var(--accent) 20%, transparent); +} + +.slash-menu-footer { + display: flex; + align-items: center; + gap: 12px; + padding: 6px 10px 4px; + margin-top: 4px; + border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent); + font-size: 0.65rem; + color: var(--muted); + opacity: 0.7; +} + +.slash-menu-footer kbd { + display: inline-block; + font-family: var(--mono); + font-size: 0.6rem; + background: color-mix(in srgb, var(--text) 8%, transparent); + border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); + border-radius: 3px; + padding: 0 3px; + line-height: 1.5; + margin-right: 2px; +} + +/* ─── Attachment Previews ─── */ + +.chat-attachments-preview { + display: flex; + gap: 8px; + flex-wrap: wrap; + margin-bottom: 8px; +} + +.chat-attachment-thumb { + position: relative; + width: 60px; + height: 60px; + border-radius: var(--radius-sm); + overflow: hidden; + border: 1px solid var(--border); +} + +.chat-attachment-thumb img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.chat-attachment-remove { + position: absolute; + top: 2px; + right: 2px; + width: 18px; + height: 18px; + border-radius: 50%; + border: none; + background: rgba(0, 0, 0, 0.6); + color: #fff; + font-size: 12px; + line-height: 1; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +} + +.chat-attachment-file { + display: flex; + align-items: center; + gap: 4px; + font-size: 0.72rem; + color: var(--muted); + padding: 4px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* ─── Reasoning Block ─── */ + +.reasoning-block { + margin: 4px 0; +} + +.reasoning-block__toggle { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 4px 10px; + border: 1px solid var(--border); + border-radius: 999px; + background: var(--bg-hover); + color: var(--muted); + font-size: 0.75rem; + font-weight: 600; + cursor: pointer; + transition: all var(--duration-fast) ease; +} + +.reasoning-block__toggle:hover { + color: var(--text); + border-color: var(--border-strong); +} + +.reasoning-block__content { + display: none; + margin-top: 6px; + padding: 8px 12px; + font-size: 0.82rem; + line-height: 1.5; + color: var(--muted); + font-style: italic; + white-space: pre-wrap; + word-wrap: break-word; + border-left: 2px solid var(--border); +} + +.reasoning-block--open .reasoning-block__content { + display: block; +} + +.reasoning-block--streaming .reasoning-block__toggle { + animation: chat-pulse 1.5s ease-in-out infinite; +} + +/* ─── Tool Block ─── */ + +.tool-block { + border: 1px solid var(--border); + border-radius: var(--radius-md); + background: var(--bg); + overflow: hidden; + margin: 4px 0; +} + +.tool-block__header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + padding: 8px 12px; + cursor: pointer; + font-size: 0.82rem; + font-weight: 600; + color: var(--text); + transition: background var(--duration-fast) ease; +} + +.tool-block__header:hover { + background: var(--bg-hover); +} + +.tool-block__name { + display: inline-flex; + align-items: center; + gap: 6px; +} + +.tool-block__name svg { + width: 14px; + height: 14px; +} + +.tool-block__body { + display: none; + padding: 0 12px 10px; +} + +.tool-block--open .tool-block__body { + display: block; +} + +.tool-block__output { + margin: 0; + font-family: var(--mono); + font-size: 0.78rem; + line-height: 1.5; + color: var(--muted); + white-space: pre-wrap; + word-wrap: break-word; + max-height: 300px; + overflow: auto; + padding: 8px; + border-radius: var(--radius-sm); + background: var(--bg-accent); + border: 1px solid var(--border); +} + +.tool-block__chevron { + transition: transform var(--duration-fast) ease; +} + +.tool-block__chevron svg { + width: 14px; + height: 14px; +} + +.tool-block--open .tool-block__chevron { + transform: rotate(180deg); +} + +/* ─── File Input (hidden) ─── */ + +.agent-chat__file-input { + display: none; +} + +/* ─── Danger ghost button ─── */ + +.btn-ghost--danger:hover { + color: var(--danger) !important; +} + +.btn-ghost--sm { + padding: 4px; +} + +.btn-ghost--sm svg { + width: 14px; + height: 14px; +} + +/* ─── Agent Bar ─── */ + +.chat-agent-bar { + display: flex; + align-items: center; + justify-content: space-between; + padding: 2px 8px; + border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent); + flex-shrink: 0; + gap: 4px; + min-height: 28px; +} + +.chat-agent-bar__left { + display: flex; + align-items: center; + gap: 8px; + min-width: 0; +} + +.chat-agent-bar__right { + display: flex; + align-items: center; + gap: 2px; + flex-shrink: 0; +} + +.chat-agent-bar__name { + font-size: 11px; + font-weight: 600; + color: var(--text); +} + +.chat-agent-select { + background: transparent; + border: none; + color: var(--text); + font-size: 11px; + font-weight: 600; + padding: 0 14px 0 0; + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%237d8590' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 0 center; +} + +.chat-agent-select:hover { + color: var(--accent); +} + +.chat-agent-select:focus { + outline: none; +} diff --git a/ui/src/styles/chat/grouped.css b/ui/src/styles/chat/grouped.css index c43743267a9..57b82f8277a 100644 --- a/ui/src/styles/chat/grouped.css +++ b/ui/src/styles/chat/grouped.css @@ -7,9 +7,7 @@ display: flex; gap: 12px; align-items: flex-start; - margin-bottom: 16px; - margin-left: 4px; - margin-right: 16px; + margin: 0 0 12px; } /* User messages on right */ @@ -22,7 +20,7 @@ display: flex; flex-direction: column; gap: 2px; - max-width: min(900px, calc(100% - 60px)); + max-width: min(1160px, calc(100% - 48px)); } /* User messages align content right */ @@ -54,6 +52,60 @@ opacity: 0.7; } +/* Per-message metadata (tokens, cost, model, context %) */ +.msg-meta { + display: inline-flex; + align-items: baseline; + gap: 6px; + font-size: 11px; + font-variant-numeric: tabular-nums; + color: var(--muted); + opacity: 0.6; + transition: opacity 0.15s ease; + margin-left: 2px; +} + +.chat-group-footer:hover .msg-meta { + opacity: 1; +} + +.msg-meta__tokens { + color: var(--muted); +} + +.msg-meta__cache { + color: var(--muted); + opacity: 0.8; +} + +.msg-meta__cost { + color: var(--text); + font-weight: 500; +} + +.msg-meta__ctx { + color: var(--muted); +} + +.msg-meta__ctx--warn { + color: var(--warn, #d97706); + font-weight: 500; +} + +.msg-meta__ctx--danger { + color: var(--danger, #dc2626); + font-weight: 600; +} + +.msg-meta__model { + color: var(--muted); + opacity: 0.8; + max-width: 160px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + /* Chat divider (e.g., compaction marker) */ .chat-divider { display: flex; @@ -83,17 +135,18 @@ /* Avatar Styles */ .chat-avatar { - width: 40px; - height: 40px; - border-radius: 8px; - background: var(--panel-strong); + width: 32px; + height: 32px; + border-radius: 999px; + border: 1px solid color-mix(in srgb, var(--border) 88%, transparent); + background: color-mix(in srgb, var(--panel-strong) 92%, transparent); display: grid; place-items: center; font-weight: 600; - font-size: 14px; + font-size: 13px; flex-shrink: 0; - align-self: flex-end; /* Align with last message in group */ - margin-bottom: 4px; /* Optical alignment */ + align-self: flex-start; + margin-top: 2px; } .chat-avatar.user { @@ -123,43 +176,72 @@ img.chat-avatar { object-position: center; } +/* Logo avatar (OpenClaw favicon) - contain to show full logo */ +img.chat-avatar.chat-avatar--logo { + object-fit: contain; + padding: 6px; + box-sizing: border-box; +} + /* Minimal Bubble Design - dynamic width based on content */ .chat-bubble { position: relative; display: inline-block; - border: 1px solid transparent; - background: var(--card); - border-radius: var(--radius-lg); + border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); + background: color-mix(in srgb, var(--bg-elevated) 82%, var(--panel)); + border-radius: 10px; padding: 10px 14px; box-shadow: none; transition: background 150ms ease-out, - border-color 150ms ease-out; + border-color 150ms ease-out, + box-shadow 150ms ease-out; max-width: 100%; word-wrap: break-word; } -.chat-bubble.has-copy { - padding-right: 36px; +.chat-group.assistant .chat-bubble { + border-left: 2px solid color-mix(in srgb, var(--accent) 28%, transparent); +} + +/* Hover actions toolbar (floats above the bubble) */ +.chat-bubble-actions { + position: absolute; + top: -28px; + right: 4px; + display: flex; + gap: 2px; + opacity: 0; + pointer-events: none; + transition: opacity 120ms ease-out; + z-index: 2; +} + +.chat-bubble:hover .chat-bubble-actions, +.chat-bubble-actions:focus-within { + opacity: 1; + pointer-events: auto; +} + +@media (hover: none) { + .chat-bubble-actions { + opacity: 1; + pointer-events: auto; + } } .chat-copy-btn { - position: absolute; - top: 6px; - right: 8px; - border: 1px solid var(--border); - background: var(--bg); + border: 1px solid color-mix(in srgb, var(--border) 88%, transparent); + background: color-mix(in srgb, var(--bg) 94%, transparent); color: var(--muted); border-radius: var(--radius-md); padding: 4px 6px; font-size: 14px; line-height: 1; cursor: pointer; - opacity: 0; - pointer-events: none; transition: - opacity 120ms ease-out, - background 120ms ease-out; + background 120ms ease-out, + border-color 120ms ease-out; } .chat-copy-btn__icon { @@ -199,13 +281,9 @@ img.chat-avatar { opacity: 1; } -.chat-bubble:hover .chat-copy-btn { - opacity: 1; - pointer-events: auto; -} - .chat-copy-btn:hover { background: var(--bg-hover); + border-color: var(--border-strong); } .chat-copy-btn[data-copying="1"] { @@ -214,58 +292,37 @@ img.chat-avatar { } .chat-copy-btn[data-error="1"] { - opacity: 1; - pointer-events: auto; border-color: var(--danger-subtle); background: var(--danger-subtle); color: var(--danger); } .chat-copy-btn[data-copied="1"] { - opacity: 1; - pointer-events: auto; border-color: var(--ok-subtle); background: var(--ok-subtle); color: var(--ok); } .chat-copy-btn:focus-visible { - opacity: 1; - pointer-events: auto; outline: 2px solid var(--accent); outline-offset: 2px; } -@media (hover: none) { - .chat-copy-btn { - opacity: 1; - pointer-events: auto; - } -} - -/* Light mode: restore borders */ -:root[data-theme="light"] .chat-bubble { - border-color: var(--border); - box-shadow: inset 0 1px 0 var(--card-highlight); -} - .chat-bubble:hover { - background: var(--bg-hover); + background: color-mix(in srgb, var(--bg-elevated) 76%, var(--bg-hover)); + border-color: color-mix(in srgb, var(--border-strong) 70%, transparent); + box-shadow: none; } /* User bubbles have different styling */ .chat-group.user .chat-bubble { - background: var(--accent-subtle); - border-color: transparent; -} - -:root[data-theme="light"] .chat-group.user .chat-bubble { - border-color: rgba(234, 88, 12, 0.2); - background: rgba(251, 146, 60, 0.12); + background: color-mix(in srgb, var(--accent-subtle) 70%, var(--bg-elevated)); + border-color: color-mix(in srgb, var(--accent) 22%, transparent); } .chat-group.user .chat-bubble:hover { - background: rgba(255, 77, 77, 0.15); + background: color-mix(in srgb, var(--accent-subtle) 60%, var(--bg-hover)); + border-color: color-mix(in srgb, var(--accent) 35%, transparent); } /* Streaming animation */ @@ -273,6 +330,28 @@ img.chat-avatar { animation: pulsing-border 1.5s ease-out infinite; } +.chat-bubble.streaming .chat-text::after { + content: ""; + display: inline-block; + width: 7px; + height: 1.1em; + margin-left: 2px; + vertical-align: text-bottom; + background: var(--text); + border-radius: 1px; + animation: blink-cursor 0.8s step-end infinite; +} + +@keyframes blink-cursor { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0; + } +} + @keyframes pulsing-border { 0%, 100% { @@ -283,18 +362,174 @@ img.chat-avatar { } } -/* Fade-in animation for new messages */ +/* Slide-up fade-in for new messages */ .chat-bubble.fade-in { - animation: fade-in 200ms ease-out; + animation: message-enter 200ms ease-out; } -@keyframes fade-in { +@keyframes message-enter { from { opacity: 0; - transform: translateY(4px); + transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } + +/* Delete button (appears on hover in group footer) */ + +.chat-group-delete { + all: unset; + display: inline-flex; + align-items: center; + justify-content: center; + width: 18px; + height: 18px; + border-radius: var(--radius-sm); + color: var(--muted); + cursor: pointer; + opacity: 0; + pointer-events: none; + transition: + opacity 120ms ease-out, + color 120ms ease-out, + background 120ms ease-out; + margin-left: auto; +} + +.chat-group-delete svg { + width: 12px; + height: 12px; + stroke: currentColor; + fill: none; + stroke-width: 2px; + stroke-linecap: round; + stroke-linejoin: round; +} + +.chat-group:hover .chat-group-delete { + opacity: 0.5; + pointer-events: auto; +} + +.chat-group-delete:hover { + opacity: 1 !important; + color: var(--danger); + background: var(--danger-subtle); +} + +.chat-group-delete:focus-visible { + opacity: 1; + pointer-events: auto; + outline: 2px solid var(--accent); + outline-offset: 1px; +} + +@media (hover: none) { + .chat-group-delete { + opacity: 0.5; + pointer-events: auto; + } +} + +/* ─── TTS (Read Aloud) Button ─── */ + +.chat-tts-btn { + all: unset; + display: inline-flex; + align-items: center; + justify-content: center; + width: 18px; + height: 18px; + border-radius: var(--radius-sm); + color: var(--muted); + cursor: pointer; + opacity: 0; + pointer-events: none; + transition: + opacity 120ms ease-out, + color 120ms ease-out, + background 120ms ease-out; +} + +.chat-tts-btn svg { + width: 12px; + height: 12px; + stroke: currentColor; + fill: none; + stroke-width: 2px; + stroke-linecap: round; + stroke-linejoin: round; +} + +.chat-group:hover .chat-tts-btn { + opacity: 0.5; + pointer-events: auto; +} + +.chat-tts-btn:hover { + opacity: 1 !important; + color: var(--accent); + background: color-mix(in srgb, var(--accent) 10%, transparent); +} + +.chat-tts-btn--active { + opacity: 1 !important; + pointer-events: auto !important; + color: var(--accent); +} + +.chat-tts-btn:focus-visible { + opacity: 1; + pointer-events: auto; + outline: 2px solid var(--accent); + outline-offset: 1px; +} + +@media (hover: none) { + .chat-tts-btn { + opacity: 0.5; + pointer-events: auto; + } +} + +/* ─── System / Slash Command Result Messages ─── */ + +.chat-group.other { + justify-content: center; +} + +.chat-group.other .chat-group-messages { + max-width: min(680px, 100%); +} + +.chat-group.other .chat-bubble { + background: color-mix(in srgb, var(--accent) 5%, var(--card)); + border-color: color-mix(in srgb, var(--accent) 18%, transparent); + border-left: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); + font-size: 0.88rem; +} + +.chat-group.other .chat-bubble:hover { + background: color-mix(in srgb, var(--accent) 8%, var(--card)); + border-color: color-mix(in srgb, var(--accent) 25%, transparent); +} + +.chat-group.other .chat-sender-name { + color: var(--accent); + opacity: 0.7; +} + +.chat-group.other .chat-text strong { + color: var(--accent); +} + +.chat-group.other .chat-text code { + background: color-mix(in srgb, var(--accent) 8%, transparent); + color: var(--accent); + padding: 1px 5px; + border-radius: 3px; + font-size: 0.85em; +} diff --git a/ui/src/styles/chat/layout.css b/ui/src/styles/chat/layout.css index 25fa6742b4a..119a25dc39f 100644 --- a/ui/src/styles/chat/layout.css +++ b/ui/src/styles/chat/layout.css @@ -9,7 +9,8 @@ flex-direction: column; flex: 1 1 0; height: 100%; - min-height: 0; /* Allow flex shrinking */ + min-height: 0; + /* Allow flex shrinking */ overflow: hidden; background: transparent !important; border: none !important; @@ -21,18 +22,18 @@ display: flex; justify-content: space-between; align-items: center; - gap: 12px; + gap: 8px; flex-wrap: nowrap; flex-shrink: 0; - padding-bottom: 12px; - margin-bottom: 12px; + padding: 6px 0 8px; + margin-bottom: 4px; background: transparent; } .chat-header__left { display: flex; align-items: center; - gap: 12px; + gap: 8px; flex-wrap: wrap; min-width: 0; } @@ -40,23 +41,38 @@ .chat-header__right { display: flex; align-items: center; - gap: 8px; + gap: 6px; } .chat-session { - min-width: 180px; + min-width: 140px; } /* Chat thread - scrollable middle section, transparent */ .chat-thread { - flex: 1 1 0; /* Grow, shrink, and use 0 base for proper scrolling */ + flex: 1 1 0; overflow-y: auto; overflow-x: hidden; - padding: 12px 4px; - margin: 0 -4px; - min-height: 0; /* Allow shrinking for flex scroll behavior */ - border-radius: 12px; - background: transparent; + padding: 12px 16px 16px; + margin: 0; + min-height: 0; + border-radius: var(--radius-lg); + border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); + background: + radial-gradient( + 1200px 500px at 30% 0%, + color-mix(in srgb, var(--panel) 55%, transparent), + transparent 70% + ), + color-mix(in srgb, var(--bg) 80%, var(--panel)); + scrollbar-gutter: stable; +} + +.chat-thread-inner { + max-width: var(--chat-max-width, 74rem); + margin: 0 auto; + width: 100%; + padding-bottom: 18px; } /* Focus mode exit button */ @@ -111,20 +127,22 @@ font-size: 13px; font-family: var(--font-body); color: var(--text); - background: var(--panel-strong); - border: 1px solid var(--border); + background: color-mix(in srgb, var(--panel-strong) 92%, transparent); + border: 1px solid color-mix(in srgb, var(--border) 86%, transparent); border-radius: 999px; cursor: pointer; white-space: nowrap; z-index: 10; transition: background 150ms ease-out, - border-color 150ms ease-out; + border-color 150ms ease-out, + box-shadow 150ms ease-out; } .chat-new-messages:hover { background: var(--panel); - border-color: var(--accent); + border-color: color-mix(in srgb, var(--accent) 36%, transparent); + box-shadow: var(--shadow-sm); } .chat-new-messages svg { @@ -145,10 +163,12 @@ flex-shrink: 0; display: flex; flex-direction: column; - gap: 12px; - margin-top: auto; /* Push to bottom of flex container */ - padding: 12px 4px 4px; - background: linear-gradient(to bottom, transparent, var(--bg) 20%); + gap: 8px; + margin-top: auto; + /* Push to bottom of flex container */ + padding: 6px 6px 6px; + background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg) 94%, black) 22%); + backdrop-filter: blur(4px); z-index: 10; } @@ -163,7 +183,8 @@ border: 1px solid var(--border); width: fit-content; max-width: 100%; - align-self: flex-start; /* Don't stretch in flex column parent */ + align-self: flex-start; + /* Don't stretch in flex column parent */ } .chat-attachment { @@ -218,21 +239,6 @@ stroke-width: 2px; } -/* Light theme attachment overrides */ -:root[data-theme="light"] .chat-attachments { - background: #f8fafc; - border-color: rgba(16, 24, 40, 0.1); -} - -:root[data-theme="light"] .chat-attachment { - border-color: rgba(16, 24, 40, 0.15); - background: #fff; -} - -:root[data-theme="light"] .chat-attachment__remove { - background: rgba(0, 0, 0, 0.6); -} - /* Message images (sent images displayed in chat) */ .chat-message-images { display: flex; @@ -267,10 +273,6 @@ flex: 1; } -:root[data-theme="light"] .chat-compose { - background: linear-gradient(to bottom, transparent, var(--bg-content) 20%); -} - .chat-compose__field { flex: 1 1 auto; min-width: 0; @@ -290,13 +292,16 @@ min-height: 40px; max-height: 150px; padding: 9px 12px; - border-radius: 8px; + border-radius: var(--radius-md); overflow-y: auto; resize: none; white-space: pre-wrap; font-family: var(--font-body); font-size: 14px; line-height: 1.45; + border: 1px solid color-mix(in srgb, var(--input) 92%, transparent); + background: color-mix(in srgb, var(--card) 98%, transparent); + box-shadow: inset 0 1px 0 var(--card-highlight); } .chat-compose__field textarea:disabled { @@ -327,13 +332,21 @@ display: flex; align-items: center; justify-content: flex-start; - gap: 12px; + gap: 8px; flex-wrap: wrap; } +.chat-controls__session-row { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; +} + +.chat-controls__agent, .chat-controls__session { - min-width: 140px; - max-width: 300px; + min-width: 120px; + max-width: 220px; } .chat-controls__thinking { @@ -345,72 +358,47 @@ /* Icon button style */ .btn--icon { - padding: 8px !important; - min-width: 36px; - height: 36px; + padding: 0 !important; + min-width: 32px; + height: 32px; display: inline-flex; align-items: center; justify-content: center; - border: 1px solid var(--border); - background: rgba(255, 255, 255, 0.06); + border: 1px solid color-mix(in srgb, var(--border) 88%, transparent); + background: color-mix(in srgb, var(--secondary) 85%, transparent); + border-radius: var(--radius-md); } -/* Controls separator */ +/* Controls separator — renders as a thin vertical divider */ .chat-controls__separator { - color: rgba(255, 255, 255, 0.4); - font-size: 18px; - margin: 0 8px; - font-weight: 300; -} - -:root[data-theme="light"] .chat-controls__separator { - color: rgba(16, 24, 40, 0.3); + width: 1px; + height: 32px; + background: var(--border); + font-size: 0; + color: transparent; + overflow: hidden; + align-self: center; + flex-shrink: 0; + margin: 0 4px; } .btn--icon:hover { - background: rgba(255, 255, 255, 0.12); - border-color: rgba(255, 255, 255, 0.2); -} - -/* Light theme icon button overrides */ -:root[data-theme="light"] .btn--icon { - background: #ffffff; - border-color: var(--border); - box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); - color: var(--muted); -} - -:root[data-theme="light"] .btn--icon:hover { - background: #ffffff; + background: var(--bg-hover); border-color: var(--border-strong); - color: var(--text); } -/* Light theme icon button overrides */ -:root[data-theme="light"] .btn--icon { - background: #ffffff; - border-color: var(--border); - box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); - color: var(--muted); -} - -:root[data-theme="light"] .btn--icon:hover { - background: #ffffff; - border-color: var(--border-strong); - color: var(--text); -} - -:root[data-theme="light"] .chat-controls .btn--icon.active { +/* Ensure chat toolbar toggles have a clearly visible active state. */ +.chat-controls .btn--icon.active { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent); - box-shadow: 0 0 0 1px var(--accent-subtle); } .btn--icon svg { display: block; - width: 18px; - height: 18px; + width: 16px; + height: 16px; + flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.5px; @@ -418,10 +406,11 @@ stroke-linejoin: round; } +.chat-controls__agent select, .chat-controls__session select { - padding: 6px 10px; + padding: 0 28px 0 10px; font-size: 13px; - max-width: 300px; + max-width: 220px; overflow: hidden; text-overflow: ellipsis; } @@ -431,21 +420,16 @@ align-items: center; gap: 4px; font-size: 12px; - padding: 4px 10px; - background: rgba(255, 255, 255, 0.04); - border-radius: 6px; - border: 1px solid var(--border); -} - -/* Light theme thinking indicator override */ -:root[data-theme="light"] .chat-controls__thinking { - background: rgba(255, 255, 255, 0.9); - border-color: rgba(16, 24, 40, 0.15); + padding: 0 10px; + height: 32px; + background: color-mix(in srgb, var(--secondary) 90%, transparent); + border-radius: var(--radius-md); + border: 1px solid color-mix(in srgb, var(--border) 88%, transparent); } @media (max-width: 640px) { .chat-session { - min-width: 140px; + min-width: 80px; } .chat-compose { @@ -472,10 +456,22 @@ .chat-controls { flex-wrap: wrap; - gap: 8px; + gap: 3px; } + .chat-controls__session-row { + width: 100%; + gap: 4px; + } + + .chat-controls__agent, .chat-controls__session { + flex: 1 1 150px; min-width: 120px; + max-width: none; + } + + .chat-controls__separator { + display: none; } } diff --git a/ui/src/styles/chat/text.css b/ui/src/styles/chat/text.css index 6598af7a072..dbe50dc75a3 100644 --- a/ui/src/styles/chat/text.css +++ b/ui/src/styles/chat/text.css @@ -5,17 +5,12 @@ .chat-thinking { margin-bottom: 10px; padding: 10px 12px; - border-radius: 10px; - border: 1px dashed rgba(255, 255, 255, 0.18); - background: rgba(255, 255, 255, 0.04); + border-radius: var(--radius-md); + border: 1px dashed color-mix(in srgb, var(--border) 84%, transparent); + background: color-mix(in srgb, var(--secondary) 75%, transparent); color: var(--muted); font-size: 12px; - line-height: 1.4; -} - -:root[data-theme="light"] .chat-thinking { - border-color: rgba(16, 24, 40, 0.25); - background: rgba(16, 24, 40, 0.04); + line-height: 1.45; } .chat-text { @@ -51,22 +46,99 @@ opacity: 0.8; } +.chat-text :where(a.chat-link-tail-blur) { + filter: blur(4px); + transition: filter 120ms ease-out; +} + +.chat-text :where(a.chat-link-tail-blur:hover, a.chat-link-tail-blur:focus-visible) { + filter: blur(0); +} + .chat-text :where(code) { font-family: var(--mono); font-size: 0.9em; } .chat-text :where(:not(pre) > code) { - background: rgba(0, 0, 0, 0.15); - padding: 0.15em 0.4em; - border-radius: 4px; + background: color-mix(in srgb, var(--bg-hover) 45%, transparent); + border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); + padding: 0.15em 0.42em; + border-radius: 5px; overflow-wrap: normal; word-break: keep-all; } +/* Code block wrapper with header + copy button */ +.code-block-wrapper { + position: relative; + border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); + border-radius: 10px; + background: color-mix(in srgb, var(--bg-elevated) 86%, var(--panel)); + overflow: hidden; +} + +.code-block-wrapper pre { + background: none !important; + border: none !important; + border-radius: 0 !important; + margin: 0; +} + +.code-block-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 4px 8px; + border-bottom: 1px solid color-mix(in srgb, var(--border) 64%, transparent); + background: color-mix(in srgb, var(--bg) 35%, transparent); + min-height: 28px; +} + +.code-block-lang { + font-family: var(--mono); + font-size: 11px; + color: var(--muted); + text-transform: lowercase; +} + +.code-block-copy { + margin-left: auto; + border: none; + background: transparent; + color: var(--muted); + font-family: var(--mono); + font-size: 11px; + cursor: pointer; + padding: 2px 8px; + border-radius: var(--radius-sm); + transition: + background 120ms ease-out, + color 120ms ease-out; +} + +.code-block-copy:hover { + background: var(--bg-hover); + color: var(--text); +} + +.code-block-copy__done { + display: none; +} + +.code-block-copy.copied .code-block-copy__idle { + display: none; +} + +.code-block-copy.copied .code-block-copy__done { + display: inline; + color: var(--ok, #22c55e); +} + .chat-text :where(pre) { - background: rgba(0, 0, 0, 0.15); - border-radius: 6px; + background: color-mix(in srgb, var(--bg-elevated) 86%, var(--panel)); + border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); + border-radius: 10px; padding: 10px 12px; overflow-x: auto; } @@ -76,12 +148,50 @@ padding: 0; } +/* Collapsed JSON code blocks */ + +.chat-text :where(details.json-collapse) { + background: color-mix(in srgb, var(--secondary) 82%, transparent); + border: 1px solid color-mix(in srgb, var(--border) 84%, transparent); + border-radius: var(--radius-md); +} + +.chat-text :where(details.json-collapse > summary) { + padding: 8px 12px; + cursor: pointer; + font-size: 12px; + color: var(--muted); + font-family: var(--mono); + user-select: none; + list-style: none; +} + +.chat-text :where(details.json-collapse > summary::-webkit-details-marker) { + display: none; +} + +.chat-text :where(details.json-collapse > summary::before) { + content: "▸ "; +} + +.chat-text :where(details.json-collapse[open] > summary::before) { + content: "▾ "; +} + +.chat-text :where(details.json-collapse > pre) { + background: none; + border: none; + border-top: 1px solid color-mix(in srgb, var(--border) 84%, transparent); + border-radius: 0; + margin: 0; +} + .chat-text :where(blockquote) { - border-left: 3px solid var(--border-strong); + border-left: 3px solid color-mix(in srgb, var(--border-strong) 88%, transparent); padding-left: 12px; margin-left: 0; color: var(--muted); - background: rgba(255, 255, 255, 0.02); + background: color-mix(in srgb, var(--secondary) 78%, transparent); padding: 8px 12px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } @@ -89,34 +199,12 @@ .chat-text :where(blockquote blockquote) { margin-top: 8px; border-left-color: var(--border-hover); - background: rgba(255, 255, 255, 0.03); + background: color-mix(in srgb, var(--secondary) 55%, transparent); } .chat-text :where(blockquote blockquote blockquote) { border-left-color: var(--muted-strong); - background: rgba(255, 255, 255, 0.04); -} - -:root[data-theme="light"] .chat-text :where(blockquote) { - background: rgba(0, 0, 0, 0.03); -} - -:root[data-theme="light"] .chat-text :where(blockquote blockquote) { - background: rgba(0, 0, 0, 0.05); -} - -:root[data-theme="light"] .chat-text :where(blockquote blockquote blockquote) { - background: rgba(0, 0, 0, 0.04); -} - -:root[data-theme="light"] .chat-text :where(:not(pre) > code) { - background: rgba(0, 0, 0, 0.08); - border: 1px solid rgba(0, 0, 0, 0.1); -} - -:root[data-theme="light"] .chat-text :where(pre) { - background: rgba(0, 0, 0, 0.05); - border: 1px solid rgba(0, 0, 0, 0.1); + background: color-mix(in srgb, var(--secondary) 60%, transparent); } .chat-text :where(hr) { diff --git a/ui/src/styles/chat/tool-cards.css b/ui/src/styles/chat/tool-cards.css index 6384db115f0..af95e376a2d 100644 --- a/ui/src/styles/chat/tool-cards.css +++ b/ui/src/styles/chat/tool-cards.css @@ -1,14 +1,15 @@ /* Tool Card Styles */ .chat-tool-card { - border: 1px solid var(--border); - border-radius: 8px; + border: 1px solid color-mix(in srgb, var(--border) 90%, transparent); + border-radius: var(--radius-md); padding: 12px; margin-top: 8px; - background: var(--card); + background: color-mix(in srgb, var(--card) 97%, transparent); box-shadow: inset 0 1px 0 var(--card-highlight); transition: border-color 150ms ease-out, - background 150ms ease-out; + background 150ms ease-out, + box-shadow 150ms ease-out; /* Fixed max-height to ensure cards don't expand too much */ max-height: 120px; overflow: hidden; @@ -16,7 +17,8 @@ .chat-tool-card:hover { border-color: var(--border-strong); - background: var(--bg-hover); + background: color-mix(in srgb, var(--card) 82%, var(--bg-hover)); + box-shadow: var(--shadow-sm); } /* First tool card in a group - no top margin */ @@ -128,13 +130,13 @@ color: var(--muted); margin-top: 8px; padding: 8px 10px; - background: var(--secondary); + background: color-mix(in srgb, var(--secondary) 92%, transparent); border-radius: var(--radius-md); white-space: pre-wrap; overflow: hidden; max-height: 44px; line-height: 1.4; - border: 1px solid var(--border); + border: 1px solid color-mix(in srgb, var(--border) 88%, transparent); } .chat-tool-card--clickable:hover .chat-tool-card__preview { @@ -148,16 +150,18 @@ color: var(--text); margin-top: 6px; padding: 6px 8px; - background: var(--secondary); + background: color-mix(in srgb, var(--secondary) 92%, transparent); border-radius: var(--radius-sm); + border: 1px solid color-mix(in srgb, var(--border) 88%, transparent); white-space: pre-wrap; word-break: break-word; } /* Reading Indicator */ .chat-reading-indicator { - background: transparent; - border: 1px solid var(--border); + background: color-mix(in srgb, var(--secondary) 70%, transparent); + border: 1px solid color-mix(in srgb, var(--border) 88%, transparent); + border-radius: var(--radius-md); padding: 12px; display: inline-flex; } @@ -200,3 +204,272 @@ transform: scale(1); } } + +/* =========================================== + Collapsible Tool Cards + =========================================== */ + +.chat-tools-collapse { + margin-top: 8px; + border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); + border-radius: var(--radius-md); + background: color-mix(in srgb, var(--card) 94%, transparent); + overflow: hidden; +} + +.chat-tools-summary { + display: flex; + align-items: center; + gap: 6px; + padding: 8px 12px; + cursor: pointer; + font-size: 12px; + font-weight: 500; + color: var(--muted); + user-select: none; + list-style: none; + transition: + color 150ms ease, + background 150ms ease; +} + +.chat-tools-summary::-webkit-details-marker { + display: none; +} + +.chat-tools-summary::before { + content: "▸"; + font-size: 10px; + flex-shrink: 0; + transition: transform 150ms ease; +} + +.chat-tools-collapse[open] > .chat-tools-summary::before { + transform: rotate(90deg); +} + +.chat-tools-summary:hover { + color: var(--text); + background: color-mix(in srgb, var(--bg-hover) 50%, transparent); +} + +.chat-tools-summary__icon { + display: inline-flex; + align-items: center; + width: 14px; + height: 14px; + color: var(--accent); + opacity: 0.7; + flex-shrink: 0; +} + +.chat-tools-summary__icon svg { + width: 14px; + height: 14px; +} + +.chat-tools-summary__count { + font-weight: 600; + color: var(--text); +} + +.chat-tools-summary__names { + color: var(--muted); + font-weight: 400; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.chat-tools-collapse__body { + padding: 4px 12px 12px; + border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); +} + +.chat-tools-collapse__body .chat-tool-card:first-child { + margin-top: 8px; +} + +/* =========================================== + Collapsible JSON Block + =========================================== */ + +.chat-json-collapse { + margin-top: 4px; + border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); + border-radius: var(--radius-md); + background: color-mix(in srgb, var(--secondary) 60%, transparent); + overflow: hidden; +} + +.chat-json-summary { + display: flex; + align-items: center; + gap: 6px; + padding: 6px 10px; + cursor: pointer; + font-size: 12px; + color: var(--muted); + user-select: none; + list-style: none; + transition: + color 150ms ease, + background 150ms ease; +} + +.chat-json-summary::-webkit-details-marker { + display: none; +} + +.chat-json-summary::before { + content: "▸"; + font-size: 10px; + flex-shrink: 0; + transition: transform 150ms ease; +} + +.chat-json-collapse[open] > .chat-json-summary::before { + transform: rotate(90deg); +} + +.chat-json-summary:hover { + color: var(--text); + background: color-mix(in srgb, var(--bg-hover) 50%, transparent); +} + +.chat-json-badge { + display: inline-flex; + align-items: center; + padding: 1px 5px; + border-radius: var(--radius-sm); + background: color-mix(in srgb, var(--accent) 15%, transparent); + color: var(--accent); + font-size: 10px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.04em; + line-height: 1.4; + flex-shrink: 0; +} + +.chat-json-label { + font-family: var(--mono); + font-size: 11px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.chat-json-content { + margin: 0; + padding: 10px 12px; + border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); + font-family: var(--mono); + font-size: 12px; + line-height: 1.5; + color: var(--text); + overflow-x: auto; + max-height: 400px; + overflow-y: auto; +} + +.chat-json-content code { + font-family: inherit; + font-size: inherit; +} + +/* =========================================== + Collapsible Tool Message Body + =========================================== */ + +.chat-tool-msg-collapse { + margin-top: 2px; +} + +.chat-tool-msg-summary { + display: flex; + align-items: center; + gap: 6px; + padding: 6px 10px; + cursor: pointer; + font-size: 12px; + color: var(--muted); + user-select: none; + list-style: none; + border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); + border-radius: var(--radius-md); + background: color-mix(in srgb, var(--bg-hover) 35%, transparent); + transition: + color 150ms ease, + background 150ms ease, + border-color 150ms ease; +} + +.chat-tool-msg-summary::-webkit-details-marker { + display: none; +} + +.chat-tool-msg-summary::before { + content: "▸"; + font-size: 10px; + flex-shrink: 0; + transition: transform 150ms ease; +} + +.chat-tool-msg-collapse[open] > .chat-tool-msg-summary::before { + transform: rotate(90deg); +} + +.chat-tool-msg-summary:hover { + color: var(--text); + background: color-mix(in srgb, var(--bg-hover) 60%, transparent); + border-color: color-mix(in srgb, var(--border-strong) 70%, transparent); +} + +.chat-tool-msg-summary__icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 14px; + height: 14px; + color: var(--accent); + opacity: 0.75; + flex-shrink: 0; +} + +.chat-tool-msg-summary__icon svg { + width: 14px; + height: 14px; +} + +.chat-tool-msg-summary__label { + font-weight: 600; + color: var(--text); + flex-shrink: 0; +} + +.chat-tool-msg-summary__names { + font-family: var(--mono); + font-size: 11px; + opacity: 0.85; + flex: 1 1 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + min-width: 0; +} + +.chat-tool-msg-summary__preview { + font-family: var(--mono); + font-size: 11px; + opacity: 0.85; + flex: 1 1 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + min-width: 0; +} + +.chat-tool-msg-body { + padding-top: 8px; +} diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css index c7a6a425dc7..a29e74d31d4 100644 --- a/ui/src/styles/components.css +++ b/ui/src/styles/components.css @@ -1,5 +1,136 @@ @import "./chat.css"; +/* =========================================== + Login Gate + =========================================== */ + +.login-gate { + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + min-height: 100dvh; + background: var(--bg); + padding: 24px; +} + +.login-gate__theme { + position: fixed; + top: 16px; + right: 16px; + z-index: 10; +} + +.login-gate__card { + width: min(520px, 100%); + background: var(--card); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: 32px; + animation: scale-in 0.25s var(--ease-out); +} + +.login-gate__header { + text-align: center; + margin-bottom: 24px; +} + +.login-gate__logo { + width: 48px; + height: 48px; + margin-bottom: 12px; +} + +.login-gate__title { + font-size: 22px; + font-weight: 700; + letter-spacing: -0.02em; +} + +.login-gate__sub { + color: var(--muted); + font-size: 14px; + margin-top: 4px; +} + +.login-gate__form { + display: flex; + flex-direction: column; + gap: 12px; +} + +.login-gate__secret-row { + display: flex; + align-items: center; + gap: 8px; +} + +.login-gate__secret-row input { + flex: 1; +} + +.login-gate__secret-row .btn--icon { + width: 40px; + min-width: 40px; + height: 40px; +} + +.login-gate__connect { + margin-top: 4px; + width: 100%; + justify-content: center; + padding: 10px 16px; + font-size: 15px; + font-weight: 600; +} + +.login-gate__help { + margin-top: 20px; + padding-top: 16px; + border-top: 1px solid var(--border); +} + +.login-gate__help-title { + font-weight: 600; + font-size: 12px; + margin-bottom: 10px; + color: var(--fg); +} + +.login-gate__steps { + margin: 0; + padding-left: 20px; + font-size: 12px; + line-height: 1.6; + color: var(--muted); +} + +.login-gate__steps li { + margin-bottom: 6px; +} + +.login-gate__steps li:last-child { + margin-bottom: 0; +} + +.login-gate__steps code { + display: block; + margin: 4px 0 2px; + padding: 5px 10px; + font-family: var(--font-mono); + font-size: 11px; + background: var(--bg); + border: 1px solid var(--border); + border-radius: var(--radius); + color: var(--fg); + user-select: all; +} + +.login-gate__docs { + margin-top: 10px; + font-size: 11px; +} + /* =========================================== Update Banner =========================================== */ @@ -12,9 +143,12 @@ border-radius: 0; border-left: none; border-right: none; - text-align: center; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; font-weight: 500; - padding: 10px 16px; + padding: 10px 44px 10px 16px; } .update-banner__btn { @@ -26,7 +160,37 @@ } .update-banner__btn:hover:not(:disabled) { - background: rgba(239, 68, 68, 0.15); + background: var(--danger-subtle); +} + +.update-banner__close { + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + width: 30px; + height: 30px; + border-radius: var(--radius-sm); + border: none; + background: transparent; + color: var(--muted); + cursor: pointer; + padding: 0; +} + +.update-banner__close:hover:not(:disabled) { + background: var(--bg-hover); + color: var(--text); +} + +.update-banner__close svg { + width: 16px; + height: 16px; + stroke: currentColor; + fill: none; + stroke-width: 1.5px; + stroke-linecap: round; + stroke-linejoin: round; } /* =========================================== @@ -37,7 +201,7 @@ border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-lg); - padding: 20px; + padding: 14px 16px; animation: rise 0.35s var(--ease-out) backwards; transition: border-color var(--duration-normal) var(--ease-out), @@ -64,9 +228,9 @@ .card-sub { color: var(--muted); - font-size: 13px; - margin-top: 6px; - line-height: 1.5; + font-size: 12px; + margin-top: 4px; + line-height: 1.45; } /* =========================================== @@ -74,39 +238,44 @@ =========================================== */ .stat { - background: var(--card); + background: color-mix(in srgb, var(--card) 96%, transparent); border-radius: var(--radius-md); - padding: 14px 16px; - border: 1px solid var(--border); + padding: 10px 12px; + border: 1px solid color-mix(in srgb, var(--border) 92%, transparent); transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out); box-shadow: inset 0 1px 0 var(--card-highlight); + text-align: center; } .stat:hover { border-color: var(--border-strong); box-shadow: - var(--shadow-sm), + 0 6px 16px rgba(0, 0, 0, 0.18), inset 0 1px 0 var(--card-highlight); } .stat-label { color: var(--muted); - font-size: 11px; + font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } .stat-value { - font-size: 24px; + font-size: 26px; font-weight: 700; margin-top: 6px; letter-spacing: -0.03em; line-height: 1.1; } +.stat-value--sm { + font-size: 16px; +} + .stat-value.ok { color: var(--ok); } @@ -148,7 +317,7 @@ .account-count { margin-top: 10px; - font-size: 12px; + font-size: 13px; font-weight: 500; color: var(--muted); } @@ -184,13 +353,13 @@ .account-card-id { font-family: var(--mono); - font-size: 12px; + font-size: 13px; color: var(--muted); } .account-card-status { margin-top: 10px; - font-size: 13px; + font-size: 14px; } .account-card-status div { @@ -200,7 +369,7 @@ .account-card-error { margin-top: 8px; color: var(--danger); - font-size: 12px; + font-size: 13px; } /* =========================================== @@ -209,7 +378,7 @@ .label { color: var(--muted); - font-size: 12px; + font-size: 13px; font-weight: 500; } @@ -217,17 +386,20 @@ display: inline-flex; align-items: center; gap: 6px; - border: 1px solid var(--border); + border: 1px solid color-mix(in srgb, var(--border) 90%, transparent); padding: 6px 12px; border-radius: var(--radius-full); - background: var(--secondary); - font-size: 13px; + background: color-mix(in srgb, var(--secondary) 92%, transparent); + font-size: 14px; font-weight: 500; - transition: border-color var(--duration-fast) ease; + transition: + border-color var(--duration-fast) ease, + background var(--duration-fast) ease; } .pill:hover { border-color: var(--border-strong); + background: var(--bg-hover); } .pill.danger { @@ -237,71 +409,144 @@ } /* =========================================== - Theme Toggle + Theme Orb – circle icon that fans out options =========================================== */ -.theme-toggle { - --theme-item: 28px; - --theme-gap: 2px; - --theme-pad: 4px; +.theme-orb { position: relative; + display: inline-flex; + align-items: center; } -.theme-toggle__track { - position: relative; - display: grid; - grid-template-columns: repeat(3, var(--theme-item)); - gap: var(--theme-gap); - padding: var(--theme-pad); +.theme-orb__trigger { + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border-radius: var(--radius-full); + border: 1px solid var(--clay-border-color); + background: var(--clay-bg); + cursor: pointer; + font-size: 14px; + line-height: 1; + padding: 0; + transition: + border-color var(--clay-duration-fast) var(--clay-easing), + box-shadow var(--clay-duration-fast) var(--clay-easing), + transform var(--clay-duration-fast) var(--clay-easing); +} + +.theme-orb__trigger:hover { + border-color: var(--border-strong); + transform: scale(1.08); +} + +.theme-orb__trigger:focus-visible { + outline: none; + border-color: var(--ring); + box-shadow: var(--focus-ring); +} + +.theme-orb__menu { + position: absolute; + right: 0; + top: calc(100% + 6px); + display: flex; + gap: 2px; + padding: 4px; + border-radius: var(--radius-full); + background: var(--clay-bg); + border: 1px solid var(--clay-border-color); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); + + opacity: 0; + visibility: hidden; + transform: scale(0.4) translateY(-8px); + transform-origin: top right; + pointer-events: none; + transition: + opacity var(--clay-duration-normal) var(--clay-easing), + transform var(--clay-duration-normal) var(--clay-easing); +} + +.theme-orb--open .theme-orb__menu { + opacity: 1; + visibility: visible; + transform: scale(1) translateY(0); + pointer-events: auto; +} + +.theme-orb__option { + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border-radius: var(--radius-full); + border: 1.5px solid transparent; + background: transparent; + cursor: pointer; + font-size: 14px; + line-height: 1; + padding: 0; + transition: + background var(--clay-duration-fast) var(--clay-easing), + border-color var(--clay-duration-fast) var(--clay-easing), + transform var(--clay-duration-fast) var(--clay-easing); +} + +.theme-orb__option:hover { + background: var(--bg-hover); + transform: scale(1.12); +} + +.theme-orb__option--active { + border-color: var(--accent); + background: var(--accent-subtle); +} + +.theme-orb__option:focus-visible { + outline: none; + box-shadow: var(--focus-ring); +} + +/* =========================================== + Theme Selector — Sidebar theme picker + =========================================== */ + +.topbar-theme-mode { + display: inline-flex; + align-items: center; + gap: 2px; + padding: 3px; border-radius: var(--radius-full); border: 1px solid var(--border); - background: var(--secondary); + background: color-mix(in srgb, var(--secondary) 70%, transparent); } -.theme-toggle__indicator { - position: absolute; - top: 50%; - left: var(--theme-pad); - width: var(--theme-item); - height: var(--theme-item); - border-radius: var(--radius-full); - transform: translateY(-50%) - translateX(calc(var(--theme-index, 0) * (var(--theme-item) + var(--theme-gap)))); - background: var(--accent); - transition: transform var(--duration-normal) var(--ease-out); - z-index: 0; -} - -.theme-toggle__button { - height: var(--theme-item); - width: var(--theme-item); - display: grid; - place-items: center; - border: 0; +.topbar-theme-mode__btn { + width: 28px; + height: 28px; border-radius: var(--radius-full); + border: none; background: transparent; color: var(--muted); cursor: pointer; - position: relative; - z-index: 1; - transition: color var(--duration-fast) ease; + display: inline-flex; + align-items: center; + justify-content: center; + transition: + background var(--duration-fast) var(--ease-out), + color var(--duration-fast) var(--ease-out), + box-shadow var(--duration-fast) var(--ease-out); } -.theme-toggle__button:hover { - color: var(--text); -} - -.theme-toggle__button.active { - color: var(--accent-foreground); -} - -.theme-toggle__button.active .theme-icon { - stroke: var(--accent-foreground); -} - -.theme-icon { - width: 14px; - height: 14px; +.topbar-theme-mode__btn svg { + display: block; + width: 16px; + height: 16px; + flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.5px; @@ -309,6 +554,171 @@ stroke-linejoin: round; } +.topbar-theme-mode__btn:hover:not(.topbar-theme-mode__btn--active) { + color: var(--text); +} + +.topbar-theme-mode__btn:focus-visible { + outline: none; + box-shadow: var(--focus-ring); +} + +.topbar-theme-mode__btn--active { + background: var(--accent); + color: var(--primary-foreground); + box-shadow: var(--shadow-sm); +} + +.theme-selector { + display: flex; + flex-direction: column; + align-items: stretch; + gap: 6px; + padding: 6px 4px 10px; +} + +.theme-selector__group { + display: flex; + flex-direction: column; + gap: 4px; +} + +.theme-selector__label { + font-size: 10px; + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--muted); + opacity: 0.78; + user-select: none; +} + +.theme-selector__segmented { + display: inline-flex; + align-items: center; + gap: 2px; + padding: 3px; + border-radius: var(--radius-full); + border: 1px solid var(--border); + background: var(--bg-elevated); +} + +.theme-selector__seg-btn { + min-width: 0; + flex: 1; + border: none; + border-radius: var(--radius-full); + background: transparent; + color: var(--muted); + padding: 6px 9px; + font-size: 10px; + font-weight: 700; + letter-spacing: 0.02em; + cursor: pointer; + transition: + background var(--duration-fast) var(--ease-out), + color var(--duration-fast) var(--ease-out), + box-shadow var(--duration-fast) var(--ease-out); +} + +.theme-selector__seg-btn:hover:not(.theme-selector__seg-btn--active) { + color: var(--text); +} + +.theme-selector__seg-btn--active { + background: var(--accent); + color: var(--primary-foreground); + box-shadow: var(--shadow-sm); +} + +.theme-selector__current { + font-size: 9px; + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--muted); + opacity: 0.7; + transition: opacity var(--clay-duration-fast) var(--clay-easing); + user-select: none; +} + +.theme-selector:hover .theme-selector__current { + opacity: 1; +} + +.theme-selector__trigger { + width: 28px; + height: 28px; + border-radius: var(--radius-full); + border: 1px solid var(--border); + background: var(--bg-elevated); + color: var(--text); + font-size: 10px; + font-weight: 700; + letter-spacing: 0.04em; + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 2px; + transition: + border-color var(--duration-fast) var(--ease-out), + background var(--duration-fast) var(--ease-out), + box-shadow var(--duration-fast) var(--ease-out); +} + +.theme-selector__trigger:hover { + background: var(--bg-hover); + border-color: var(--border-strong); +} + +.theme-selector__trigger:focus-visible { + outline: none; + box-shadow: var(--focus-ring); +} + +.theme-selector__trigger-sep { + opacity: 0.55; +} + +/* Collapsed sidebar — popover variant */ + +.theme-selector--collapsed { + position: relative; + padding: 4px 0 8px; + align-items: center; +} + +.theme-selector__popover { + position: absolute; + left: calc(100% + 8px); + bottom: 0; + display: flex; + flex-direction: column; + gap: 8px; + padding: 6px; + border-radius: var(--radius-md); + background: var(--clay-bg); + border: 1px solid var(--clay-border-color); + box-shadow: var(--glass-shadow-md); + opacity: 0; + visibility: hidden; + transform: scale(0.9) translateX(-4px); + transform-origin: left bottom; + pointer-events: none; + transition: + opacity var(--clay-duration-normal) var(--clay-easing), + transform var(--clay-duration-normal) var(--clay-easing); + z-index: 100; +} + +.theme-selector--open .theme-selector__popover { + opacity: 1; + visibility: visible; + transform: scale(1) translateX(0); + pointer-events: auto; +} + /* =========================================== Status Dot - With glow for emphasis =========================================== */ @@ -318,19 +728,13 @@ height: 8px; border-radius: var(--radius-full); background: var(--danger); - box-shadow: 0 0 8px rgba(239, 68, 68, 0.5); + box-shadow: 0 0 8px color-mix(in srgb, var(--danger) 50%, transparent); animation: pulse-subtle 2s ease-in-out infinite; } .statusDot.ok { background: var(--ok); - box-shadow: 0 0 8px rgba(34, 197, 94, 0.5); - animation: none; -} - -.statusDot.warn { - background: var(--warn); - box-shadow: 0 0 8px rgba(245, 158, 11, 0.5); + box-shadow: 0 0 8px color-mix(in srgb, var(--ok) 50%, transparent); animation: none; } @@ -342,12 +746,13 @@ display: inline-flex; align-items: center; justify-content: center; + gap: 8px; - border: 1px solid var(--border); - background: var(--bg-elevated); - padding: 9px 16px; + border: 1px solid color-mix(in srgb, var(--border) 92%, transparent); + background: color-mix(in srgb, var(--bg-elevated) 95%, transparent); + padding: 10px 18px; border-radius: var(--radius-md); - font-size: 13px; + font-size: 14px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer; @@ -358,43 +763,42 @@ transform var(--duration-fast) var(--ease-out); } -.btn:hover { +.btn:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); } -.btn:active { +.btn:active:not(:disabled) { background: var(--secondary); transform: translateY(0); box-shadow: none; } .btn svg { + display: block; width: 16px; height: 16px; + flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; - flex-shrink: 0; } .btn.primary { - border-color: var(--accent); + border-color: color-mix(in srgb, var(--accent) 88%, black 10%); background: var(--accent); color: var(--primary-foreground); - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24); } .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); - box-shadow: - var(--shadow-md), - 0 0 20px var(--accent-glow); + box-shadow: var(--shadow-md); } /* Keyboard shortcut badge (shadcn style) */ @@ -418,28 +822,20 @@ background: rgba(255, 255, 255, 0.2); } -:root[data-theme="light"] .btn-kbd { - background: rgba(0, 0, 0, 0.08); -} - -:root[data-theme="light"] .btn.primary .btn-kbd { - background: rgba(255, 255, 255, 0.25); -} - .btn.active { - border-color: var(--accent); - background: var(--accent-subtle); + border-color: color-mix(in srgb, var(--accent) 35%, transparent); + background: color-mix(in srgb, var(--accent-subtle) 75%, var(--secondary)); color: var(--accent); } .btn.danger { - border-color: transparent; + border-color: color-mix(in srgb, var(--danger) 25%, transparent); background: var(--danger-subtle); color: var(--danger); } .btn.danger:hover { - background: rgba(239, 68, 68, 0.15); + background: color-mix(in srgb, var(--danger-subtle) 70%, transparent); } .btn--sm { @@ -447,9 +843,16 @@ font-size: 12px; } +.btn:focus-visible { + border-color: var(--ring); + box-shadow: var(--focus-ring); +} + .btn:disabled { opacity: 0.5; cursor: not-allowed; + transform: none; + box-shadow: none; } /* =========================================== @@ -467,29 +870,39 @@ .field span { color: var(--muted); - font-size: 13px; + font-size: 14px; font-weight: 500; } .field input, .field textarea, .field select { - border: 1px solid var(--input); - background: var(--card); + border: 1px solid color-mix(in srgb, var(--input) 92%, transparent); + background: color-mix(in srgb, var(--card) 96%, var(--bg)); border-radius: var(--radius-md); - padding: 8px 12px; + padding: 10px 14px; outline: none; box-shadow: inset 0 1px 0 var(--card-highlight); transition: border-color var(--duration-fast) ease, - box-shadow var(--duration-fast) ease; + box-shadow var(--duration-fast) ease, + background var(--duration-fast) ease; } -.field input:focus, -.field textarea:focus, -.field select:focus { +.field input:focus-visible, +.field textarea:focus-visible, +.field select:focus-visible { border-color: var(--ring); box-shadow: var(--focus-ring); + background: var(--card); +} + +.field input:disabled, +.field textarea:disabled, +.field select:disabled { + opacity: 0.6; + cursor: not-allowed; + background: color-mix(in srgb, var(--secondary) 80%, transparent); } .field select { @@ -514,6 +927,47 @@ align-items: center; } +.field-inline { + display: inline-flex; + align-items: center; + gap: 6px; + font-size: 13px; +} + +.field-inline span { + color: var(--muted); + font-weight: 500; + white-space: nowrap; +} + +.field-inline input:not([type="checkbox"]) { + border: 1px solid color-mix(in srgb, var(--input) 92%, transparent); + background: color-mix(in srgb, var(--card) 96%, var(--bg)); + border-radius: var(--radius-md); + padding: 6px 10px; + font-size: 13px; + outline: none; + transition: + border-color var(--duration-fast) ease, + box-shadow var(--duration-fast) ease; +} + +.field-inline input:not([type="checkbox"]):focus-visible { + border-color: var(--ring); + box-shadow: var(--focus-ring); + background: var(--card); +} + +.field-inline.checkbox { + cursor: pointer; + user-select: none; +} + +.field-inline.checkbox input[type="checkbox"] { + margin: 0; + accent-color: var(--accent); +} + .config-form .field.checkbox { grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; @@ -1023,23 +1477,45 @@ } .callout.danger { - border-color: rgba(239, 68, 68, 0.25); - background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.04) 100%); + border-color: color-mix(in srgb, var(--danger) 25%, transparent); + background: linear-gradient( + 135deg, + color-mix(in srgb, var(--danger) 8%, transparent) 0%, + color-mix(in srgb, var(--danger) 4%, transparent) 100% + ); color: var(--danger); } .callout.info { - border-color: rgba(59, 130, 246, 0.25); - background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%); + border-color: color-mix(in srgb, var(--info) 25%, transparent); + background: linear-gradient( + 135deg, + color-mix(in srgb, var(--info) 8%, transparent) 0%, + color-mix(in srgb, var(--info) 4%, transparent) 100% + ); color: var(--info); } .callout.success { - border-color: rgba(34, 197, 94, 0.25); - background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.04) 100%); + border-color: color-mix(in srgb, var(--ok) 25%, transparent); + background: linear-gradient( + 135deg, + color-mix(in srgb, var(--ok) 8%, transparent) 0%, + color-mix(in srgb, var(--ok) 4%, transparent) 100% + ); color: var(--ok); } +.callout.warn { + border-color: color-mix(in srgb, var(--warn) 25%, transparent); + background: linear-gradient( + 135deg, + color-mix(in srgb, var(--warn) 8%, transparent) 0%, + color-mix(in srgb, var(--warn) 4%, transparent) 100% + ); + color: var(--warn); +} + /* Compaction indicator */ .compaction-indicator { align-self: center; @@ -1050,7 +1526,7 @@ line-height: 1.2; padding: 6px 14px; margin-bottom: 8px; - border-radius: 999px; + border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--panel-strong); color: var(--text); @@ -1072,7 +1548,7 @@ .compaction-indicator--active { color: var(--info); - border-color: rgba(59, 130, 246, 0.35); + border-color: color-mix(in srgb, var(--info) 35%, transparent); } .compaction-indicator--active svg { @@ -1081,17 +1557,17 @@ .compaction-indicator--complete { color: var(--ok); - border-color: rgba(34, 197, 94, 0.35); + border-color: color-mix(in srgb, var(--ok) 35%, transparent); } .compaction-indicator--fallback { - color: #d97706; + color: var(--warn); border-color: rgba(217, 119, 6, 0.35); } .compaction-indicator--fallback-cleared { color: var(--ok); - border-color: rgba(34, 197, 94, 0.35); + border-color: color-mix(in srgb, var(--ok) 35%, transparent); } @keyframes compaction-spin { @@ -1100,6 +1576,38 @@ } } +/* Context usage notice */ +.context-notice { + align-self: center; + display: inline-flex; + align-items: center; + gap: 6px; + font-size: 12px; + font-weight: 500; + line-height: 1.2; + padding: 4px 12px; + margin-bottom: 4px; + border-radius: var(--radius-full); + border: 1px solid var(--ctx-color, #d97706); + background: var(--ctx-bg, rgba(217, 119, 6, 0.08)); + color: var(--ctx-color, #d97706); + white-space: nowrap; + user-select: none; + animation: fade-in 0.2s var(--ease-out); +} + +.context-notice__icon { + width: 14px; + height: 14px; + flex-shrink: 0; +} + +.context-notice__detail { + opacity: 0.7; + font-size: 11px; + font-weight: 400; +} + /* =========================================== Code Blocks =========================================== */ @@ -1117,13 +1625,6 @@ max-width: 100%; } -:root[data-theme="light"] .code-block, -:root[data-theme="light"] .list-item, -:root[data-theme="light"] .table-row, -:root[data-theme="light"] .chip { - background: var(--bg); -} - /* =========================================== Lists =========================================== */ @@ -1134,16 +1635,24 @@ container-type: inline-size; } +.list-scroll { + max-height: 400px; + overflow-y: auto; +} + .list-item { display: grid; - grid-template-columns: minmax(0, 1fr) minmax(200px, 260px); - gap: 16px; + grid-template-columns: minmax(0, 1fr) minmax(0, 260px); + gap: 12px; align-items: start; - border: 1px solid var(--border); + border: 1px solid color-mix(in srgb, var(--border) 92%, transparent); border-radius: var(--radius-md); padding: 12px; - background: var(--card); - transition: border-color var(--duration-fast) ease; + background: color-mix(in srgb, var(--card) 97%, transparent); + transition: + border-color var(--duration-fast) ease, + box-shadow var(--duration-fast) ease, + background var(--duration-fast) ease; } .list-item-clickable { @@ -1152,11 +1661,14 @@ .list-item-clickable:hover { border-color: var(--border-strong); + background: color-mix(in srgb, var(--card) 80%, var(--bg-hover)); + box-shadow: var(--shadow-sm); } .list-item-selected { - border-color: var(--accent); + border-color: color-mix(in srgb, var(--accent) 35%, transparent); box-shadow: var(--focus-ring); + background: color-mix(in srgb, var(--accent-subtle) 45%, var(--card)); } .list-main { @@ -1171,7 +1683,9 @@ .list-sub { color: var(--muted); - font-size: 12px; + font-size: 13px; + overflow-wrap: anywhere; + word-break: break-word; } .list-meta { @@ -1180,7 +1694,7 @@ font-size: 12px; display: grid; gap: 4px; - min-width: 200px; + min-width: 0; } .list-meta .btn { @@ -1218,26 +1732,27 @@ .cron-job .list-title { font-weight: 600; - font-size: 15px; + font-size: 16px; letter-spacing: -0.015em; } .cron-job { - grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); + grid-template-columns: minmax(0, 1fr) minmax(0, 260px); grid-template-areas: "main meta" "footer footer"; - row-gap: 10px; + row-gap: 8px; } .cron-job .list-main { grid-area: main; + min-width: 0; } .cron-job .list-meta { grid-area: meta; - min-width: 240px; - gap: 8px; + min-width: 0; + gap: 6px; } .cron-job-footer { @@ -1245,19 +1760,23 @@ display: flex; justify-content: space-between; align-items: center; - gap: 12px; + gap: 8px; border-top: 1px solid var(--border); - padding-top: 10px; + padding-top: 8px; + min-width: 0; } .cron-job-chips { flex: 1 1 auto; + min-width: 0; } .cron-job-detail { display: grid; - gap: 3px; + gap: 2px; margin-top: 2px; + min-width: 0; + overflow: hidden; } .cron-job-detail-label { @@ -1271,10 +1790,20 @@ .cron-job-detail-value { font-size: 13px; line-height: 1.35; + overflow-wrap: anywhere; + word-break: break-word; + min-width: 0; + max-height: 3.6em; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; } .cron-job-state { display: grid; + min-width: 0; gap: 4px; } @@ -1297,6 +1826,9 @@ color: var(--text); font-size: 12px; white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + min-width: 0; } .cron-job-status-pill { @@ -1310,7 +1842,7 @@ .cron-job-status-ok { color: var(--ok); - border-color: rgba(34, 197, 94, 0.35); + border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-subtle); } @@ -1331,13 +1863,18 @@ } .cron-job-actions { + display: flex; flex-wrap: wrap; justify-content: flex-end; + gap: 6px; margin-top: 0; + flex-shrink: 0; } .cron-job-actions .btn { flex: 0 0 auto; + padding: 5px 10px; + font-size: 12px; } @container (max-width: 560px) { @@ -1362,9 +1899,24 @@ "footer"; } + .cron-job .list-meta { + border-top: 1px solid var(--border); + padding-top: 8px; + } + .cron-job-footer { flex-direction: column; align-items: stretch; + gap: 8px; + } + + .cron-job-actions { + justify-content: stretch; + } + + .cron-job-actions .btn { + flex: 1 1 0; + text-align: center; } } @@ -1379,13 +1931,13 @@ } .chip { - font-size: 12px; + font-size: 13px; font-weight: 500; - border: 1px solid var(--border); + border: 1px solid color-mix(in srgb, var(--border) 85%, transparent); border-radius: var(--radius-full); padding: 5px 12px; color: var(--muted); - background: var(--secondary); + background: color-mix(in srgb, var(--secondary) 92%, transparent); transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), @@ -1394,6 +1946,7 @@ .chip:hover { border-color: var(--border-strong); + background: var(--bg-hover); transform: translateY(-1px); } @@ -1415,7 +1968,7 @@ .chip-danger { color: var(--danger); - border-color: rgba(239, 68, 68, 0.3); + border-color: color-mix(in srgb, var(--danger) 30%, transparent); background: var(--danger-subtle); } @@ -1425,7 +1978,7 @@ .table { display: grid; - gap: 6px; + gap: 8px; } .table-head, @@ -1437,22 +1990,32 @@ } .table-head { - font-size: 12px; + font-size: 13px; font-weight: 500; color: var(--muted); padding: 0 12px; } .table-row { - border: 1px solid var(--border); - padding: 10px 12px; + border: 1px solid color-mix(in srgb, var(--border) 92%, transparent); + padding: 12px 14px; border-radius: var(--radius-md); - background: var(--card); - transition: border-color var(--duration-fast) ease; + background: color-mix(in srgb, var(--card) 97%, transparent); + transition: + border-color var(--duration-fast) ease, + box-shadow var(--duration-fast) ease, + background var(--duration-fast) ease; } .table-row:hover { border-color: var(--border-strong); + background: color-mix(in srgb, var(--card) 82%, var(--bg-hover)); + box-shadow: var(--shadow-sm); +} + +.table-row:focus-within { + border-color: var(--ring); + box-shadow: var(--focus-ring); } .session-link { @@ -1471,6 +2034,12 @@ min-width: 0; } +/* Sessions table: wider key column */ +.data-table th:first-child, +.data-table td:first-child { + min-width: 280px; +} + .session-key-cell .session-link, .session-key-display-name { overflow-wrap: anywhere; @@ -1481,17 +2050,285 @@ font-size: 11px; } +/* =========================================== + Data Table (shadcn-inspired) + =========================================== */ + +.data-table-wrapper { + border: 1px solid var(--border); + border-radius: var(--radius-lg); + background: var(--card); + overflow: hidden; +} + +.data-table-toolbar { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 12px; + padding: 16px; + border-bottom: 1px solid var(--border); +} + +.data-table-search { + display: flex; + align-items: center; + gap: 8px; + flex: 1; + min-width: 200px; + max-width: 320px; +} + +.data-table-search input { + flex: 1; + height: 36px; + padding: 0 12px; + font-size: 14px; + border: 1px solid var(--border); + border-radius: var(--radius-md); + background: var(--bg); + color: var(--text); + transition: border-color var(--duration-fast) ease; +} + +.data-table-search input::placeholder { + color: var(--muted); +} + +.data-table-search input:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 2px var(--accent-subtle); +} + +.data-table-search .data-table-search__icon { + width: 16px; + height: 16px; + color: var(--muted); + flex-shrink: 0; +} + +.data-table-container { + overflow-x: auto; +} + +.data-table { + width: 100%; + border-collapse: collapse; + font-size: 13px; +} + +.data-table th, +.data-table td { + padding: 12px 16px; + text-align: left; + border-bottom: 1px solid var(--border); + vertical-align: middle; +} + +.data-table th { + font-weight: 600; + color: var(--muted); + background: color-mix(in srgb, var(--secondary) 50%, transparent); + white-space: nowrap; +} + +.data-table th[data-sortable] { + cursor: pointer; + user-select: none; +} + +.data-table th[data-sortable]:hover { + color: var(--text); +} + +.data-table th .data-table-sort-icon { + display: inline-flex; + margin-left: 4px; + opacity: 0.5; + vertical-align: middle; +} + +.data-table th[data-sort-dir] .data-table-sort-icon { + opacity: 1; +} + +.data-table tbody tr { + transition: background var(--duration-fast) ease; +} + +.data-table tbody tr:hover { + background: var(--bg-hover); +} + +.data-table tbody tr:last-child td { + border-bottom: none; +} + +.data-table-badge { + display: inline-flex; + align-items: center; + padding: 2px 8px; + font-size: 11px; + font-weight: 500; + border-radius: var(--radius-full); + text-transform: capitalize; +} + +.data-table-badge--direct { + background: color-mix(in srgb, var(--accent) 15%, transparent); + color: var(--accent); +} + +.data-table-badge--group { + background: color-mix(in srgb, var(--ok) 15%, transparent); + color: var(--ok); +} + +.data-table-badge--global { + background: color-mix(in srgb, var(--muted) 30%, transparent); + color: var(--muted); +} + +.data-table-badge--unknown { + background: color-mix(in srgb, var(--warn) 15%, transparent); + color: var(--warn); +} + +.data-table-row-actions { + position: relative; + display: inline-flex; +} + +.data-table-row-actions__trigger { + display: inline-flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + padding: 0; + border: none; + border-radius: var(--radius-md); + background: transparent; + color: var(--muted); + cursor: pointer; + transition: + color var(--duration-fast) ease, + background var(--duration-fast) ease; +} + +.data-table-row-actions__trigger:hover { + color: var(--text); + background: var(--bg-hover); +} + +.data-table-row-actions__trigger svg { + width: 16px; + height: 16px; +} + +.data-table-row-actions__menu { + position: absolute; + top: calc(100% + 4px); + right: 0; + z-index: 50; + min-width: 160px; + padding: 4px; + border: 1px solid var(--border); + border-radius: var(--radius-md); + background: var(--card); + box-shadow: var(--shadow-lg); +} + +.data-table-row-actions__menu button { + display: block; + width: 100%; + padding: 8px 12px; + font-size: 13px; + text-align: left; + border: none; + border-radius: var(--radius-sm); + background: none; + color: var(--text); + cursor: pointer; + transition: background var(--duration-fast) ease; +} + +.data-table-row-actions__menu button:hover { + background: var(--bg-hover); +} + +.data-table-row-actions__menu button.danger { + color: var(--danger); +} + +.data-table-row-actions__menu button.danger:hover { + background: var(--danger-subtle); +} + +.data-table-pagination { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 12px 16px; + border-top: 1px solid var(--border); + font-size: 13px; + color: var(--muted); +} + +.data-table-pagination__info { + flex: 1; +} + +.data-table-pagination__controls { + display: flex; + align-items: center; + gap: 8px; +} + +.data-table-pagination__controls button { + padding: 6px 12px; + font-size: 13px; + border: 1px solid var(--border); + border-radius: var(--radius-md); + background: var(--card); + color: var(--text); + cursor: pointer; + transition: + border-color var(--duration-fast) ease, + background var(--duration-fast) ease; +} + +.data-table-pagination__controls button:hover:not(:disabled) { + border-color: var(--border-strong); + background: var(--bg-hover); +} + +.data-table-pagination__controls button:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.data-table-overlay { + position: fixed; + inset: 0; + z-index: 40; +} + /* =========================================== Log Stream =========================================== */ .log-stream { - border: 1px solid var(--border); + border: 1px solid color-mix(in srgb, var(--border) 92%, transparent); border-radius: var(--radius-md); - background: var(--card); + background: color-mix(in srgb, var(--card) 98%, transparent); max-height: 500px; overflow: auto; container-type: inline-size; + box-shadow: inset 0 1px 0 var(--card-highlight); } .log-row { @@ -1499,9 +2336,9 @@ grid-template-columns: 90px 70px minmax(140px, 200px) minmax(0, 1fr); gap: 12px; align-items: start; - padding: 8px 12px; - border-bottom: 1px solid var(--border); - font-size: 12px; + padding: 9px 12px; + border-bottom: 1px solid color-mix(in srgb, var(--border) 90%, transparent); + font-size: 13px; transition: background var(--duration-fast) ease; } @@ -1703,7 +2540,7 @@ .chat-new-messages { align-self: center; margin: 8px auto 0; - border-radius: 999px; + border-radius: var(--radius-full); padding: 6px 12px; font-size: 12px; line-height: 1; @@ -1742,36 +2579,22 @@ min-width: 0; } -:root[data-theme="light"] .chat-bubble { - border-color: var(--border); - background: var(--bg); -} - .chat-line.user .chat-bubble { border-color: transparent; background: var(--accent-subtle); } -:root[data-theme="light"] .chat-line.user .chat-bubble { - border-color: rgba(234, 88, 12, 0.2); - background: rgba(251, 146, 60, 0.12); -} - .chat-line.assistant .chat-bubble { border-color: transparent; background: var(--secondary); } -:root[data-theme="light"] .chat-line.assistant .chat-bubble { - border-color: var(--border); - background: var(--bg-muted); -} - @keyframes chatStreamPulse { 0%, 100% { border-color: var(--border); } + 50% { border-color: var(--accent); } @@ -1828,6 +2651,7 @@ opacity: 0.4; transform: translateY(0); } + 40% { opacity: 1; transform: translateY(-3px); @@ -1897,10 +2721,6 @@ background: var(--secondary); } -:root[data-theme="light"] .chat-text :where(:not(pre) > code) { - background: var(--bg-muted); -} - .chat-text :where(pre) { margin-top: 0.75em; padding: 10px 12px; @@ -1910,10 +2730,6 @@ overflow: auto; } -:root[data-theme="light"] .chat-text :where(pre) { - background: var(--bg-muted); -} - .chat-text :where(pre code) { font-size: 12px; white-space: pre; @@ -1953,10 +2769,6 @@ gap: 4px; } -:root[data-theme="light"] .chat-tool-card { - background: var(--bg-muted); -} - .chat-tool-card__title { font-family: var(--mono); font-size: 12px; @@ -2011,12 +2823,8 @@ background: var(--card); } -:root[data-theme="light"] .chat-tool-card__output { - background: var(--bg); -} - .chat-stamp { - font-size: 11px; + font-size: 12px; color: var(--muted); } @@ -2035,9 +2843,9 @@ .shell--chat .chat-compose { position: sticky; bottom: 0; - z-index: 5; + /* z-index: 5; */ margin-top: 0; - padding-top: 12px; + padding-top: 6px; background: linear-gradient(180deg, transparent 0%, var(--bg) 40%); } @@ -2146,7 +2954,7 @@ } .exec-approval-title { - font-size: 14px; + font-size: 15px; font-weight: 600; } @@ -2215,19 +3023,129 @@ .agents-layout { display: grid; - grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); - gap: 16px; + grid-template-columns: 1fr; + gap: 10px; } -.agents-sidebar { +.agents-toolbar { display: grid; - gap: 12px; - align-self: start; + gap: 4px; +} + +.agents-toolbar-row { + display: grid; + gap: 3px; +} + +.agents-toolbar-label { + color: var(--muted); + font-size: 12px; + font-weight: 500; +} + +.agents-control-row { + display: grid; + grid-template-columns: 5fr 1fr; + gap: 4px; + align-items: stretch; +} + +.agents-control-select { + min-width: 0; +} + +.agents-control-select .agents-select { + flex: 1; + min-width: 0; + height: 36px; + font-size: 14px; + box-sizing: border-box; + border: 1px solid color-mix(in srgb, var(--input) 60%, transparent); + background: color-mix(in srgb, var(--card) 55%, transparent); + border-radius: var(--radius-md); + padding: 6px 36px 6px 12px; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 10px center; + background-size: 16px; + cursor: pointer; + outline: none; + box-shadow: inset 0 1px 0 var(--card-highlight); + transition: + border-color var(--duration-fast) ease, + box-shadow var(--duration-fast) ease, + background var(--duration-fast) ease; +} + +.agents-control-select .agents-select:focus-visible { + border-color: var(--ring); + box-shadow: var(--focus-ring); + background: color-mix(in srgb, var(--card) 75%, transparent); +} + +.agents-control-select .agents-select:disabled { + opacity: 0.6; + cursor: not-allowed; + background: color-mix(in srgb, var(--secondary) 80%, transparent); +} + +.agents-control-actions { + display: flex; + gap: 4px; + align-items: stretch; + min-width: 0; +} + +.agents-control-actions .agent-actions-toggle { + width: 36px; + height: 36px; + flex-shrink: 0; + padding: 0; + font-size: 18px; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + background: color-mix(in srgb, var(--secondary) 55%, transparent); + border-color: color-mix(in srgb, var(--border) 60%, transparent); +} + +.agents-control-actions .agent-actions-toggle:hover { + background: color-mix(in srgb, var(--secondary) 75%, transparent); +} + +.agents-control-actions .agents-refresh-btn { + flex: 1; + min-width: 0; + height: 36px; + font-size: 13px; + padding: 0 12px; + box-sizing: border-box; + display: inline-flex; + align-items: center; + justify-content: center; + background: color-mix(in srgb, var(--bg-elevated) 55%, transparent); + border-color: color-mix(in srgb, var(--border) 60%, transparent); +} + +.agents-refresh-btn:hover:not(:disabled) { + background: color-mix(in srgb, var(--bg-hover) 75%, transparent); +} + +.agents-toolbar-field { + min-width: 160px; + max-width: 280px; + gap: 4px; +} + +.agents-select { + width: 100%; } .agents-main { display: grid; - gap: 16px; + gap: 10px; } .agent-list { @@ -2263,16 +3181,26 @@ width: 32px; height: 32px; border-radius: 50%; - background: var(--secondary); + background: hsl(var(--agent-hue, 220) 30% 18%); display: grid; place-items: center; font-weight: 600; } .agent-avatar--lg { - width: 48px; - height: 48px; - font-size: 20px; + width: 40px; + height: 40px; + font-size: 18px; +} + +.agent-avatar--logo { + background: transparent; +} + +.agent-avatar--logo .agent-avatar__img { + width: 100%; + height: 100%; + object-fit: contain; } .agent-info { @@ -2293,7 +3221,7 @@ .agent-pill { border: 1px solid var(--border); border-radius: var(--radius-full); - padding: 4px 10px; + padding: 3px 8px; font-size: 11px; color: var(--muted); background: var(--secondary); @@ -2309,23 +3237,28 @@ .agent-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; - gap: 16px; + gap: 12px; align-items: center; + padding: 10px 14px; } .agent-header-main { display: flex; - gap: 16px; + gap: 10px; align-items: center; } .agent-header-meta { display: grid; justify-items: end; - gap: 6px; + gap: 4px; color: var(--muted); } +.agent-header .card-sub { + margin-top: 2px; +} + .agent-tabs { display: flex; gap: 8px; @@ -2335,7 +3268,7 @@ .agent-tab { border: 1px solid var(--border); border-radius: var(--radius-full); - padding: 6px 14px; + padding: 5px 12px; font-size: 12px; font-weight: 600; background: var(--secondary); @@ -2348,7 +3281,14 @@ .agent-tab.active { background: var(--accent); border-color: var(--accent); - color: white; + color: var(--accent-foreground); +} + +.agent-tab-count { + font-weight: 400; + font-size: 11px; + opacity: 0.7; + margin-left: 4px; } .agents-overview-grid { @@ -2361,6 +3301,10 @@ display: grid; gap: 6px; min-width: 0; + border: 1px solid var(--border); + border-radius: var(--radius-md); + padding: 12px; + background: var(--bg-elevated); } .agent-kv > div { @@ -2378,6 +3322,41 @@ gap: 12px; } +.agent-model-fields { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + gap: 16px; + align-items: start; +} + +.agent-model-fields .field { + min-width: 0; + overflow: hidden; +} + +.agent-model-fields .field select { + width: 100%; + min-width: 0; + box-sizing: border-box; +} + +.agent-model-fields .agent-chip-input { + min-width: 0; + overflow: hidden; +} + +@media (max-width: 640px) { + .agent-model-fields { + grid-template-columns: 1fr; + } +} + +.agent-model-actions { + display: flex; + justify-content: flex-end; + gap: 8px; +} + .agent-model-meta { display: grid; gap: 6px; @@ -2459,6 +3438,76 @@ gap: 8px; } +.agent-file-actions .btn svg { + width: 14px; + height: 14px; + vertical-align: -2px; + margin-right: 2px; +} + +/* Markdown preview dialog */ + +.md-preview-dialog { + position: fixed; + inset: 0; + width: 100%; + height: 100%; + max-width: 100%; + max-height: 100%; + margin: 0; + padding: 0; + border: none; + background: transparent; + z-index: 1000; +} + +.md-preview-dialog::backdrop { + background: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(4px); +} + +.md-preview-dialog__panel { + display: flex; + flex-direction: column; + width: min(860px, 90vw); + max-height: 85vh; + margin: 7vh auto; + border: 1px solid var(--border); + border-radius: var(--radius-lg); + background: var(--card); + box-shadow: var(--shadow-lg); + overflow: hidden; +} + +.md-preview-dialog__header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 14px 20px; + border-bottom: 1px solid var(--border); + flex-shrink: 0; +} + +.md-preview-dialog__header .btn svg { + width: 14px; + height: 14px; + vertical-align: -2px; + margin-right: 2px; +} + +.md-preview-dialog__title { + font-weight: 600; + font-size: 14px; +} + +.md-preview-dialog__body { + padding: 24px 28px; + overflow-y: auto; + flex: 1; + line-height: 1.7; + font-size: 14px; +} + .agent-tools-meta { display: grid; gap: 12px; @@ -2610,3 +3659,791 @@ grid-template-columns: 1fr; } } + +.agent-identity-card { + display: flex; + gap: 16px; + align-items: center; + padding: 16px; + border: 1px solid var(--border); + border-radius: var(--radius-lg); + background: var(--bg-elevated); +} + +.agent-identity-card .agent-avatar { + width: 56px; + height: 56px; + font-size: 24px; + flex-shrink: 0; +} + +.agent-identity-details { + display: grid; + gap: 4px; + min-width: 0; +} + +.agent-identity-name { + font-weight: 700; + font-size: 16px; +} + +.agent-identity-meta { + display: flex; + gap: 8px; + align-items: center; + flex-wrap: wrap; + color: var(--muted); + font-size: 13px; +} + +.agent-chip-input { + display: flex; + flex-wrap: wrap; + gap: 6px; + align-items: center; + border: 1px solid var(--border); + border-radius: var(--radius-md); + background: var(--card); + padding: 6px 8px; + min-height: 38px; + cursor: text; + transition: border-color var(--duration-fast) ease; +} + +.agent-chip-input:focus-within { + border-color: var(--accent); +} + +.agent-chip-input .chip { + display: inline-flex; + align-items: center; + gap: 4px; +} + +.agent-chip-input .chip-remove { + cursor: pointer; + opacity: 0.6; + font-size: 14px; + line-height: 1; + padding: 0 2px; + background: none; + border: none; + color: inherit; +} + +.agent-chip-input .chip-remove:hover { + opacity: 1; +} + +.agent-chip-input input { + border: none; + background: transparent; + color: inherit; + font: inherit; + font-size: 13px; + outline: none; + padding: 2px 0; + flex: 1; + min-width: 120px; +} + +.agent-actions-wrap { + position: relative; +} + +.agent-actions-toggle { + background: var(--secondary); + border: 1px solid var(--border); + border-radius: var(--radius-md); + padding: 6px 10px; + cursor: pointer; + font-size: 16px; + line-height: 1; + color: var(--muted); + transition: border-color var(--duration-fast) ease; +} + +.agent-actions-toggle:hover { + border-color: var(--border-strong); + color: var(--vscode-text); +} + +.agent-actions-menu { + position: absolute; + top: calc(100% + 6px); + right: 0; + z-index: 50; + min-width: 180px; + background: var(--glass-bg-elevated); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + border: 1px solid var(--border); + border-radius: var(--radius-md); + box-shadow: var(--glass-shadow-md); + padding: 4px; + display: grid; + gap: 2px; +} + +.agent-actions-menu button { + display: block; + width: 100%; + text-align: left; + padding: 8px 12px; + border: none; + background: transparent; + color: var(--vscode-text); + font-size: 13px; + border-radius: var(--radius-sm); + cursor: pointer; + transition: background var(--duration-fast) ease; +} + +.agent-actions-menu button:hover { + background: var(--vscode-hover); +} + +.agent-actions-menu button:disabled { + opacity: 0.4; + cursor: not-allowed; +} + +.agent-actions-menu button:disabled:hover { + background: transparent; +} + +.workspace-link { + background: none; + border: none; + color: var(--accent); + cursor: pointer; + font: inherit; + padding: 0; + text-decoration: underline; + text-decoration-style: dotted; + text-underline-offset: 3px; +} + +.workspace-link:hover { + text-decoration-style: solid; +} + +/* =========================================== + Overview Section Dividers + =========================================== */ + +.ov-section-divider { + height: 1px; + background: var(--border); + margin: 22px 0; + opacity: 0.5; +} + +/* =========================================== + Overview Gateway Access + =========================================== */ + +.ov-access-grid { + display: grid; + gap: 12px; + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.ov-access-grid__full { + grid-column: 1 / -1; +} + +@media (max-width: 996px) { + .ov-access-grid { + grid-template-columns: 1fr; + gap: 10px; + } +} + +/* =========================================== + Overview Dashboard Cards + =========================================== */ + +.ov-cards { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 12px; + margin-top: 18px; +} + +.ov-card { + --ov-accent: var(--muted); + all: unset; + display: grid; + gap: 4px; + padding: 16px; + border: 1px solid var(--border); + border-radius: var(--radius-lg); + border-left: 3px solid var(--ov-accent); + background: var(--card); + cursor: pointer; + box-shadow: + var(--shadow-sm), + inset 0 1px 0 var(--card-highlight); + transition: + border-color var(--duration-normal) var(--ease-out), + box-shadow var(--duration-normal) var(--ease-out), + transform var(--duration-normal) var(--ease-out); + animation: rise 0.35s var(--ease-out) backwards; +} + +.ov-card:hover { + border-color: var(--border-strong); + border-left-color: var(--ov-accent); + box-shadow: + var(--shadow-md), + inset 0 1px 0 var(--card-highlight); + transform: translateY(-2px); +} + +.ov-card:focus-visible { + outline: none; + border-color: var(--ring); + border-left-color: var(--ov-accent); + box-shadow: var(--focus-ring); +} + +.ov-card[data-kind="cost"] { + --ov-accent: var(--kn-bioluminescence); +} + +.ov-card[data-kind="sessions"] { + --ov-accent: var(--kn-silver); +} + +.ov-card[data-kind="skills"] { + --ov-accent: var(--kn-claw-ember); +} + +.ov-card[data-kind="cron"] { + --ov-accent: var(--vscode-accent); +} + +.ov-card__label { + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--muted); +} + +.ov-card__value { + font-size: 24px; + font-weight: 700; + letter-spacing: -0.025em; + line-height: 1.15; +} + +.ov-card__hint { + font-size: 12px; + color: var(--muted); + line-height: 1.4; +} + +.redacted { + filter: blur(5px); + user-select: none; + pointer-events: none; + transition: filter var(--duration-normal, 250ms) ease; +} + +/* Recent sessions */ + +.ov-recent { + margin-top: 14px; + border: 1px solid var(--border); + border-radius: var(--radius-lg); + background: var(--card); + padding: 14px 16px; + box-shadow: + var(--shadow-sm), + inset 0 1px 0 var(--card-highlight); + animation: rise 0.35s var(--ease-out) backwards; +} + +.ov-recent__title { + font-size: 14px; + font-weight: 600; + letter-spacing: -0.02em; + color: var(--text-strong); + margin: 0 0 8px; +} + +.ov-recent__list { + list-style: none; + margin: 0; + padding: 0; +} + +.ov-recent__row { + display: grid; + grid-template-columns: minmax(0, 2fr) minmax(0, auto) auto; + gap: 12px; + align-items: center; + padding: 7px 0; + border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); + font-size: 13px; +} + +.ov-recent__row:last-child { + border-bottom: none; + padding-bottom: 0; +} + +.ov-recent__row:first-child { + padding-top: 0; +} + +.ov-recent__key { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: 500; +} + +.ov-recent__key .blur-digits { + filter: blur(5px); + transition: filter 200ms ease-out; + user-select: none; +} + +.ov-recent__row:hover .blur-digits { + filter: none; +} + +.ov-recent__model { + color: var(--muted); + font-size: 12px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 120px; +} + +.ov-recent__time { + color: var(--muted); + font-size: 12px; + white-space: nowrap; +} + +/* =========================================== + Attention Center + =========================================== */ + +.ov-attention { + margin-top: 18px; +} + +.ov-attention-list { + margin-top: 12px; + display: flex; + flex-direction: column; + gap: 8px; +} + +.ov-attention-item { + display: flex; + align-items: flex-start; + gap: 10px; + padding: 10px 12px; + border-radius: var(--radius); + border: 1px solid var(--border); + font-size: 13px; +} + +.ov-attention-item.danger { + border-color: var(--danger); + background: var(--danger-subtle); +} + +.ov-attention-item.warn { + border-color: var(--warn, #d97706); + background: color-mix(in srgb, var(--warn, #d97706) 8%, transparent); +} + +.ov-attention-icon { + flex-shrink: 0; + width: 16px; + height: 16px; + margin-top: 1px; +} + +.ov-attention-icon svg { + width: 100%; + height: 100%; +} + +.ov-attention-body { + flex: 1; + min-width: 0; +} + +.ov-attention-title { + font-weight: 600; + margin-bottom: 2px; +} + +.ov-attention-link { + flex-shrink: 0; + font-size: 12px; + color: var(--accent); + text-decoration: none; + align-self: center; +} + +.ov-attention-link:hover { + text-decoration: underline; +} + +/* =========================================== + Overview Event Log + =========================================== */ + +.ov-event-log { + margin-top: 0; +} + +.ov-expandable-toggle { + display: flex; + align-items: center; + gap: 6px; + cursor: pointer; + font-size: 13px; + font-weight: 600; + list-style: none; + padding: 0; +} + +.ov-expandable-toggle::-webkit-details-marker { + display: none; +} + +.ov-expandable-toggle .nav-item__icon { + width: 16px; + height: 16px; +} + +.ov-expandable-toggle .nav-item__icon svg { + width: 100%; + height: 100%; +} + +.ov-count-badge { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 20px; + height: 20px; + padding: 0 6px; + border-radius: 10px; + background: var(--border); + color: var(--muted); + font-size: 11px; + font-weight: 600; +} + +.ov-event-log-list { + margin-top: 12px; + max-height: 300px; + overflow-y: auto; + overflow-x: hidden; +} + +.ov-event-log-entry { + display: flex; + align-items: baseline; + gap: 8px; + padding: 4px 0; + border-bottom: 1px solid var(--border); + font-size: 12px; + font-family: var(--mono); + min-width: 0; +} + +.ov-event-log-entry:last-child { + border-bottom: none; +} + +.ov-event-log-ts { + flex-shrink: 0; + color: var(--muted); + width: 70px; +} + +.ov-event-log-name { + font-weight: 600; + flex-shrink: 0; +} + +.ov-event-log-payload { + flex: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* =========================================== + Overview Log Tail + =========================================== */ + +.ov-log-tail { + margin-top: 0; +} + +.ov-log-refresh { + margin-left: auto; + cursor: pointer; + width: 14px; + height: 14px; + color: var(--muted); +} + +.ov-log-refresh svg { + width: 100%; + height: 100%; +} + +.ov-log-refresh:hover { + color: var(--fg); +} + +.ov-log-tail-content { + margin-top: 8px; + max-height: 180px; + overflow: auto; + font-family: var(--mono); + font-size: 10px; + line-height: 1.45; + white-space: pre-wrap; + word-break: break-word; + background: var(--bg-inset, var(--bg)); + padding: 8px; + border-radius: var(--radius); + border: 1px solid var(--border); +} + +/* =========================================== + Overview Quick Actions + =========================================== */ + +.ov-quick-actions { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 18px; +} + +.ov-quick-action-btn { + display: inline-flex; + align-items: center; + gap: 6px; + font-size: 13px; +} + +.ov-quick-action-btn .nav-item__icon { + width: 14px; + height: 14px; +} + +.ov-quick-action-btn .nav-item__icon svg { + width: 100%; + height: 100%; +} + +/* =========================================== + Stream Mode Banner + =========================================== */ + +.ov-stream-banner { + display: flex; + align-items: center; + gap: 8px; +} + +.ov-stream-banner .nav-item__icon { + width: 14px; + height: 14px; +} + +.ov-stream-banner .nav-item__icon svg { + width: 100%; + height: 100%; +} + +/* =========================================== + Overview Bottom Grid + =========================================== */ + +.ov-bottom-grid { + display: grid; + grid-template-columns: 1fr; + gap: 14px; +} + +@media (max-width: 768px) { + .ov-bottom-grid { + grid-template-columns: 1fr; + } + + .ov-cards { + grid-template-columns: repeat(2, 1fr); + } + + .ov-recent__row { + grid-template-columns: minmax(0, 1fr) auto; + } + + .ov-recent__model { + display: none; + } +} + +@media (max-width: 480px) { + .ov-cards { + grid-template-columns: 1fr; + } +} + +/* =========================================== + Command Palette + =========================================== */ + +.cmd-palette-overlay { + position: fixed; + inset: 0; + z-index: 1000; + background: rgba(0, 0, 0, 0.5); + display: flex; + align-items: flex-start; + justify-content: center; + padding-top: min(20vh, 160px); + animation: fade-in 0.12s ease-out; +} + +.cmd-palette { + width: min(560px, 90vw); + background: var(--card); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); + overflow: hidden; + animation: scale-in 0.15s ease-out; +} + +.cmd-palette__input { + width: 100%; + padding: 14px 18px; + background: transparent; + border: none; + border-bottom: 1px solid var(--border); + font-size: 15px; + color: var(--fg); + outline: none; +} + +.cmd-palette__input::placeholder { + color: var(--muted); +} + +.cmd-palette__results { + max-height: 320px; + overflow-y: auto; + padding: 6px 0; +} + +.cmd-palette__group-label { + padding: 8px 18px 4px; + font-size: 11px; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--muted); + font-weight: 600; +} + +.cmd-palette__item { + display: flex; + align-items: center; + gap: 10px; + padding: 8px 18px; + cursor: pointer; + font-size: 14px; + transition: background 0.1s; +} + +.cmd-palette__item:hover, +.cmd-palette__item--active { + background: var(--hover); +} + +.cmd-palette__item .nav-item__icon { + width: 16px; + height: 16px; + flex-shrink: 0; +} + +.cmd-palette__item .nav-item__icon svg { + width: 100%; + height: 100%; +} + +.cmd-palette__item-desc { + margin-left: auto; + font-size: 12px; +} + +/* =========================================== + Bottom Tabs (Mobile Navigation) + =========================================== */ + +.bottom-tabs { + display: none; + border-top: 1px solid var(--border); + background: var(--card); + padding: 4px 0; +} + +.bottom-tab { + display: flex; + flex-direction: column; + align-items: center; + gap: 2px; + flex: 1; + padding: 6px 4px; + border: none; + background: none; + color: var(--muted); + cursor: pointer; + font-size: 10px; + transition: color 0.15s; +} + +.bottom-tab--active { + color: var(--accent); +} + +.bottom-tab__icon { + width: 20px; + height: 20px; +} + +.bottom-tab__icon svg { + width: 100%; + height: 100%; +} + +.bottom-tab__label { + font-weight: 500; +} + +@media (max-width: 768px) { + .bottom-tabs { + display: flex; + } +} diff --git a/ui/src/styles/config.css b/ui/src/styles/config.css index f33c05f94fa..7c97c634db0 100644 --- a/ui/src/styles/config.css +++ b/ui/src/styles/config.css @@ -5,12 +5,13 @@ /* Layout Container */ .config-layout { display: grid; - grid-template-columns: 260px minmax(0, 1fr); + grid-template-columns: 1fr; gap: 0; - height: calc(100vh - 160px); - margin: 0 -16px -32px; /* preserve margin-top: 0 for onboarding mode */ - border-radius: var(--radius-xl); - border: 1px solid var(--border); + height: calc(100vh - var(--shell-topbar-height, 52px)); + margin: -12px -14px -24px; + border-radius: 0; + border: none; + border-top: 1px solid var(--border); background: var(--panel); overflow: hidden; /* fallback for older browsers */ overflow: clip; @@ -43,24 +44,68 @@ overflow: hidden; } -:root[data-theme="light"] .config-sidebar { - background: var(--bg-hover); -} - .config-sidebar__header { display: flex; align-items: center; justify-content: space-between; - padding: 18px 18px; + padding: 14px 18px; + min-height: 55px; border-bottom: 1px solid var(--border); } .config-sidebar__title { font-weight: 600; - font-size: 14px; + font-size: 15px; letter-spacing: -0.01em; } +.config-sidebar__header-right { + display: flex; + align-items: center; + gap: 8px; +} + +.config-sidebar__collapse-btn { + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border: none; + border-radius: var(--radius-md); + background: transparent; + color: var(--muted); + cursor: pointer; + transition: + background var(--duration-fast) ease, + color var(--duration-fast) ease; +} + +.config-sidebar__collapse-btn svg { + width: 16px; + height: 16px; + flex-shrink: 0; +} + +.config-sidebar__collapse-btn:hover { + background: var(--bg-hover); + color: var(--text); +} + +.config-sidebar__version { + padding: 8px 18px; + border-top: 1px solid var(--border); + text-align: center; +} + +.config-sidebar__version-text { + font-size: 11px; + font-weight: 500; + color: var(--muted); + font-family: var(--mono); + letter-spacing: 0.01em; +} + .config-sidebar__footer { margin-top: auto; padding: 14px; @@ -69,19 +114,15 @@ /* Search */ .config-search { - display: grid; - gap: 6px; - padding: 12px 14px 10px; - border-bottom: 1px solid var(--border); -} - -.config-search__input-row { position: relative; + padding: 14px; + min-height: 70px; + border-bottom: 1px solid var(--border); } .config-search__icon { position: absolute; - left: 14px; + left: 28px; top: 50%; transform: translateY(-50%); width: 16px; @@ -96,7 +137,7 @@ border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); - font-size: 13px; + font-size: 14px; outline: none; transition: border-color var(--duration-fast) ease, @@ -114,17 +155,9 @@ background: var(--bg-hover); } -:root[data-theme="light"] .config-search__input { - background: white; -} - -:root[data-theme="light"] .config-search__input:focus { - background: white; -} - .config-search__clear { position: absolute; - right: 8px; + right: 22px; top: 50%; transform: translateY(-50%); width: 22px; @@ -149,131 +182,6 @@ color: var(--text); } -.config-search__hint { - display: grid; - gap: 6px; -} - -.config-search__hint-label { - font-size: 10px; - font-weight: 600; - color: var(--muted); - text-transform: uppercase; - letter-spacing: 0.03em; - white-space: nowrap; -} - -.config-search__tag-picker { - border: 1px solid var(--border); - border-radius: var(--radius-md); - background: var(--bg-elevated); - transition: - border-color var(--duration-fast) ease, - box-shadow var(--duration-fast) ease, - background var(--duration-fast) ease; -} - -.config-search__tag-picker[open] { - border-color: var(--accent); - box-shadow: var(--focus-ring); - background: var(--bg-hover); -} - -:root[data-theme="light"] .config-search__tag-picker { - background: white; -} - -.config-search__tag-trigger { - list-style: none; - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; - min-height: 30px; - padding: 6px 8px; - cursor: pointer; -} - -.config-search__tag-trigger::-webkit-details-marker { - display: none; -} - -.config-search__tag-placeholder { - font-size: 11px; - color: var(--muted); -} - -.config-search__tag-chips { - display: flex; - align-items: center; - gap: 6px; - flex-wrap: wrap; - min-width: 0; -} - -.config-search__tag-chip { - display: inline-flex; - align-items: center; - border: 1px solid var(--border); - border-radius: var(--radius-full); - padding: 2px 7px; - font-size: 10px; - font-weight: 500; - color: var(--text); - background: var(--bg); -} - -.config-search__tag-chip--count { - color: var(--muted); -} - -.config-search__tag-caret { - color: var(--muted); - font-size: 12px; - line-height: 1; -} - -.config-search__tag-picker[open] .config-search__tag-caret { - transform: rotate(180deg); -} - -.config-search__tag-menu { - max-height: 104px; - overflow-y: auto; - border-top: 1px solid var(--border); - padding: 6px; - display: grid; - gap: 6px; -} - -.config-search__tag-option { - display: block; - width: 100%; - border: 1px solid transparent; - border-radius: var(--radius-sm); - padding: 6px 8px; - background: transparent; - color: var(--muted); - font-size: 11px; - text-align: left; - cursor: pointer; - transition: - background var(--duration-fast) ease, - color var(--duration-fast) ease, - border-color var(--duration-fast) ease; -} - -.config-search__tag-option:hover { - background: var(--bg-hover); - color: var(--text); -} - -.config-search__tag-option.active { - background: var(--accent-subtle); - color: var(--accent); - border-color: color-mix(in srgb, var(--accent) 34%, transparent); -} - /* Navigation */ .config-nav { flex: 1; @@ -291,7 +199,7 @@ border-radius: var(--radius-md); background: transparent; color: var(--muted); - font-size: 13px; + font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; @@ -305,10 +213,6 @@ color: var(--text); } -:root[data-theme="light"] .config-nav__item:hover { - background: rgba(0, 0, 0, 0.04); -} - .config-nav__item.active { background: var(--accent-subtle); color: var(--accent); @@ -343,6 +247,56 @@ text-overflow: ellipsis; } +/* Category groups */ +.config-nav__category { + margin-top: 4px; +} + +.config-nav__category:first-of-type { + margin-top: 2px; +} + +.config-nav__category-header { + display: flex; + align-items: center; + gap: 6px; + width: 100%; + padding: 6px 14px; + border: none; + background: color-mix(in srgb, var(--panel) 50%, transparent); + color: var(--muted); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; + text-align: left; + cursor: pointer; + user-select: none; + transition: + color var(--duration-fast) ease, + background var(--duration-fast) ease; +} + +.config-nav__category-header:hover { + color: var(--text); + background: color-mix(in srgb, var(--panel) 75%, transparent); +} + +.config-nav__category-chevron { + width: 12px; + height: 12px; + flex-shrink: 0; + transition: transform var(--duration-fast) ease; +} + +.config-nav__category.collapsed .config-nav__category-chevron { + transform: rotate(-90deg); +} + +.config-nav__category.collapsed .config-nav__category-items { + display: none; +} + /* Mode Toggle */ .config-mode-toggle { display: flex; @@ -352,10 +306,6 @@ border: 1px solid var(--border); } -:root[data-theme="light"] .config-mode-toggle { - background: white; -} - .config-mode-toggle__btn { flex: 1; padding: 9px 14px; @@ -378,7 +328,7 @@ .config-mode-toggle__btn.active { background: var(--accent); - color: white; + color: var(--accent-foreground); box-shadow: var(--shadow-sm); } @@ -403,6 +353,7 @@ justify-content: space-between; gap: 14px; padding: 14px 22px; + min-height: 55px; background: var(--bg-accent); border-bottom: 1px solid var(--border); flex-shrink: 0; @@ -410,10 +361,6 @@ z-index: 2; } -:root[data-theme="light"] .config-actions { - background: var(--bg-hover); -} - .config-actions__left, .config-actions__right { display: flex; @@ -421,11 +368,107 @@ gap: 10px; } +.config-top-tabs { + display: flex; + align-items: center; + gap: 14px; + padding: 10px 22px; + background: var(--bg-accent); + border-bottom: 1px solid var(--border); + min-height: 56px; +} + +.config-top-tabs__scroller { + display: flex; + gap: 16px; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + flex: 1; + min-width: 0; +} + +.config-top-tabs__scroller::-webkit-scrollbar { + display: none; +} + +.config-top-tabs__tab { + border: none; + background: transparent; + cursor: pointer; + color: var(--muted); + font-size: 13px; + font-weight: 600; + padding: 10px 2px; + border-bottom: 2px solid transparent; + white-space: nowrap; + transition: + color var(--duration-fast) ease, + border-color var(--duration-fast) ease; +} + +.config-top-tabs__tab:hover { + color: var(--text); +} + +.config-top-tabs__tab.active { + color: var(--text-strong); + border-bottom-color: var(--accent); +} + +.config-top-tabs__right { + display: flex; + align-items: center; + gap: 12px; + flex-shrink: 0; +} + +.config-top-tabs__version { + font-size: 11px; + font-weight: 500; + color: var(--muted); + font-family: var(--mono); + letter-spacing: 0.01em; + white-space: nowrap; +} + +.config-search--top { + padding: 0; + min-height: 0; + border-bottom: none; + width: min(360px, 42vw); + flex: 0 0 auto; +} + +.config-search--top .config-search__icon { + left: 14px; +} + +.config-search--top .config-search__input { + padding: 9px 34px 9px 38px; + font-size: 12px; + font-weight: 600; + cursor: text; + background: var(--panel); + border: 1px solid var(--border); + border-radius: var(--radius-md); +} + +.config-search--top .config-search__input:focus-visible { + outline: none; + border-color: var(--ring); + box-shadow: var(--focus-ring); +} + +.config-search--top .config-search__clear { + right: 10px; +} + .config-changes-badge { padding: 6px 14px; border-radius: var(--radius-full); background: var(--accent-subtle); - border: 1px solid rgba(255, 77, 77, 0.3); + border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); color: var(--accent); font-size: 12px; font-weight: 600; @@ -436,10 +479,32 @@ color: var(--muted); } +/* Validity Warning */ +.config-validity-warning { + display: flex; + align-items: center; + gap: 10px; + margin: 0; + padding: 10px 22px; + background: color-mix(in srgb, var(--warning, #f59e0b) 12%, transparent); + border-bottom: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 30%, transparent); + color: var(--warning, #f59e0b); + font-size: 13px; + font-weight: 500; +} + +.config-validity-warning__icon { + flex-shrink: 0; +} + +.config-validity-warning__text { + flex: 1; +} + /* Diff Panel */ .config-diff { margin: 18px 22px 0; - border: 1px solid rgba(255, 77, 77, 0.25); + border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent); border-radius: var(--radius-lg); background: var(--accent-subtle); overflow: hidden; @@ -493,10 +558,6 @@ font-family: var(--mono); } -:root[data-theme="light"] .config-diff__item { - background: white; -} - .config-diff__path { font-weight: 600; color: var(--text); @@ -529,15 +590,12 @@ display: flex; align-items: center; gap: 16px; - padding: 16px 22px; + padding: 14px 22px; + min-height: 70px; border-bottom: 1px solid var(--border); background: var(--bg-accent); } -:root[data-theme="light"] .config-section-hero { - background: var(--bg-hover); -} - .config-section-hero__icon { width: 30px; height: 30px; @@ -561,7 +619,7 @@ } .config-section-hero__title { - font-size: 16px; + font-size: 17px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; @@ -570,7 +628,7 @@ } .config-section-hero__desc { - font-size: 13px; + font-size: 14px; color: var(--muted); } @@ -584,10 +642,6 @@ overflow-x: auto; } -:root[data-theme="light"] .config-subnav { - background: var(--bg-hover); -} - .config-subnav__item { border: 1px solid transparent; border-radius: var(--radius-full); @@ -604,10 +658,6 @@ white-space: nowrap; } -:root[data-theme="light"] .config-subnav__item { - background: white; -} - .config-subnav__item:hover { color: var(--text); border-color: var(--border); @@ -624,10 +674,18 @@ flex: 1; overflow-y: auto; padding: 22px; + display: flex; + flex-direction: column; +} + +.config-raw-field { + flex: 1; + display: flex; + flex-direction: column; } .config-raw-field textarea { - min-height: 500px; + flex: 1; font-family: var(--mono); font-size: 13px; line-height: 1.55; @@ -686,7 +744,7 @@ .config-form--modern { display: grid; - gap: 20px; + gap: 26px; } .config-section-card { @@ -701,10 +759,6 @@ border-color: var(--border-strong); } -:root[data-theme="light"] .config-section-card { - background: white; -} - .config-section-card__header { display: flex; align-items: flex-start; @@ -714,10 +768,6 @@ border-bottom: 1px solid var(--border); } -:root[data-theme="light"] .config-section-card__header { - background: var(--bg-hover); -} - .config-section-card__icon { width: 34px; height: 34px; @@ -737,7 +787,7 @@ .config-section-card__title { margin: 0; - font-size: 17px; + font-size: 18px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; @@ -747,13 +797,13 @@ .config-section-card__desc { margin: 5px 0 0; - font-size: 13px; + font-size: 14px; color: var(--muted); line-height: 1.45; } .config-section-card__content { - padding: 18px; + padding: 22px; } /* =========================================== @@ -762,61 +812,35 @@ .cfg-fields { display: grid; - gap: 14px; -} - -.cfg-fields--inline { - gap: 10px; + gap: 22px; } .cfg-field { display: grid; - gap: 6px; + gap: 8px; } .cfg-field--error { padding: 14px; border-radius: var(--radius-md); background: var(--danger-subtle); - border: 1px solid rgba(239, 68, 68, 0.3); + border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); } .cfg-field__label { - font-size: 13px; + font-size: 14px; font-weight: 600; color: var(--text); } .cfg-field__help { - font-size: 12px; + font-size: 13px; color: var(--muted); line-height: 1.45; } -.cfg-tags { - display: flex; - flex-wrap: wrap; - gap: 6px; -} - -.cfg-tag { - display: inline-flex; - align-items: center; - border: 1px solid var(--border); - border-radius: var(--radius-full); - padding: 2px 8px; - font-size: 11px; - color: var(--muted); - background: var(--bg-elevated); - white-space: nowrap; -} - -:root[data-theme="light"] .cfg-tag { - background: white; -} - .cfg-field__error { - font-size: 12px; + font-size: 13px; color: var(--danger); } @@ -851,14 +875,6 @@ background: var(--bg-hover); } -:root[data-theme="light"] .cfg-input { - background: white; -} - -:root[data-theme="light"] .cfg-input:focus { - background: white; -} - .cfg-input--sm { padding: 9px 12px; font-size: 13px; @@ -909,10 +925,6 @@ box-shadow: var(--focus-ring); } -:root[data-theme="light"] .cfg-textarea { - background: white; -} - .cfg-textarea--sm { padding: 10px 12px; font-size: 12px; @@ -927,10 +939,6 @@ background: var(--bg-accent); } -:root[data-theme="light"] .cfg-number { - background: white; -} - .cfg-number__btn { width: 44px; border: none; @@ -951,14 +959,6 @@ cursor: not-allowed; } -:root[data-theme="light"] .cfg-number__btn { - background: var(--bg-hover); -} - -:root[data-theme="light"] .cfg-number__btn:hover:not(:disabled) { - background: var(--border); -} - .cfg-number__input { width: 85px; padding: 11px; @@ -1001,10 +1001,6 @@ box-shadow: var(--focus-ring); } -:root[data-theme="light"] .cfg-select { - background-color: white; -} - /* Segmented Control */ .cfg-segmented { display: inline-flex; @@ -1014,17 +1010,13 @@ background: var(--bg-accent); } -:root[data-theme="light"] .cfg-segmented { - background: var(--bg-hover); -} - .cfg-segmented__btn { padding: 9px 18px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--muted); - font-size: 13px; + font-size: 14px; font-weight: 500; cursor: pointer; transition: @@ -1039,7 +1031,7 @@ .cfg-segmented__btn.active { background: var(--accent); - color: white; + color: var(--accent-foreground); box-shadow: var(--shadow-sm); } @@ -1074,14 +1066,6 @@ cursor: not-allowed; } -:root[data-theme="light"] .cfg-toggle-row { - background: white; -} - -:root[data-theme="light"] .cfg-toggle-row:hover:not(.disabled) { - background: var(--bg-hover); -} - .cfg-toggle-row__content { flex: 1; min-width: 0; @@ -1089,7 +1073,7 @@ .cfg-toggle-row__label { display: block; - font-size: 14px; + font-size: 15px; font-weight: 500; color: var(--text); } @@ -1097,7 +1081,7 @@ .cfg-toggle-row__help { display: block; margin-top: 3px; - font-size: 12px; + font-size: 13px; color: var(--muted); line-height: 1.45; } @@ -1128,10 +1112,6 @@ border-color var(--duration-normal) ease; } -:root[data-theme="light"] .cfg-toggle__track { - background: var(--border); -} - .cfg-toggle__track::after { content: ""; position: absolute; @@ -1149,7 +1129,7 @@ .cfg-toggle input:checked + .cfg-toggle__track { background: var(--ok-subtle); - border-color: rgba(34, 197, 94, 0.4); + border-color: color-mix(in srgb, var(--ok) 40%, transparent); } .cfg-toggle input:checked + .cfg-toggle__track::after { @@ -1165,25 +1145,18 @@ .cfg-object { border: 1px solid var(--border); border-radius: var(--radius-lg); - background: transparent; + background: var(--bg-accent); overflow: hidden; } -:root[data-theme="light"] .cfg-object { - background: transparent; -} - .cfg-object__header { display: flex; align-items: center; justify-content: space-between; - padding: 10px 12px; + padding: 14px 18px; cursor: pointer; list-style: none; - transition: - background var(--duration-fast) ease, - border-color var(--duration-fast) ease; - border-radius: var(--radius-md); + transition: background var(--duration-fast) ease; } .cfg-object__header:hover { @@ -1200,12 +1173,6 @@ color: var(--text); } -.cfg-object__title-wrap { - display: grid; - gap: 6px; - min-width: 0; -} - .cfg-object__chevron { width: 18px; height: 18px; @@ -1223,16 +1190,16 @@ } .cfg-object__help { - padding: 0 12px 10px; + padding: 0 18px 14px; font-size: 12px; color: var(--muted); + border-bottom: 1px solid var(--border); } .cfg-object__content { - padding: 12px; + padding: 18px; display: grid; - gap: 12px; - border-top: 1px solid var(--border); + gap: 18px; } /* Array */ @@ -1246,28 +1213,18 @@ display: flex; align-items: center; gap: 14px; - padding: 10px 12px; + padding: 14px 18px; background: var(--bg-accent); border-bottom: 1px solid var(--border); } -:root[data-theme="light"] .cfg-array__header { - background: var(--bg-hover); -} - .cfg-array__label { + flex: 1; font-size: 14px; font-weight: 600; color: var(--text); } -.cfg-array__title { - flex: 1; - min-width: 0; - display: grid; - gap: 6px; -} - .cfg-array__count { font-size: 12px; color: var(--muted); @@ -1276,10 +1233,6 @@ border-radius: var(--radius-full); } -:root[data-theme="light"] .cfg-array__count { - background: white; -} - .cfg-array__add { display: inline-flex; align-items: center; @@ -1315,7 +1268,7 @@ } .cfg-array__help { - padding: 10px 12px; + padding: 12px 18px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border); @@ -1342,15 +1295,11 @@ display: flex; align-items: center; justify-content: space-between; - padding: 10px 12px; + padding: 12px 18px; background: var(--bg-accent); border-bottom: 1px solid var(--border); } -:root[data-theme="light"] .cfg-array__item-header { - background: var(--bg-hover); -} - .cfg-array__item-index { font-size: 11px; font-weight: 600; @@ -1391,7 +1340,7 @@ } .cfg-array__item-content { - padding: 12px; + padding: 18px; } /* Map (custom entries) */ @@ -1406,15 +1355,11 @@ align-items: center; justify-content: space-between; gap: 14px; - padding: 10px 12px; + padding: 14px 18px; background: var(--bg-accent); border-bottom: 1px solid var(--border); } -:root[data-theme="light"] .cfg-map__header { - background: var(--bg-hover); -} - .cfg-map__label { font-size: 13px; font-weight: 600; @@ -1459,28 +1404,15 @@ .cfg-map__items { display: grid; - gap: 8px; - padding: 10px 12px 12px; + gap: 10px; + padding: 14px; } .cfg-map__item { display: grid; - gap: 8px; - padding: 10px; - border: 1px solid var(--border); - border-radius: var(--radius-md); - background: var(--bg-accent); -} - -:root[data-theme="light"] .cfg-map__item { - background: white; -} - -.cfg-map__item-header { - display: grid; - grid-template-columns: minmax(0, 300px) auto; - gap: 8px; - align-items: center; + grid-template-columns: 150px 1fr auto; + gap: 10px; + align-items: start; } .cfg-map__item-key { @@ -1491,13 +1423,9 @@ min-width: 0; } -.cfg-map__item-value > .cfg-fields { - gap: 10px; -} - .cfg-map__item-remove { - width: 32px; - height: 32px; + width: 34px; + height: 34px; display: flex; align-items: center; justify-content: center; @@ -1528,7 +1456,7 @@ } .pill--ok { - border-color: rgba(34, 197, 94, 0.35); + border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok); } @@ -1537,6 +1465,74 @@ color: var(--danger); } +/* =========================================== + Collapsed Sidebar + =========================================== */ + +.config-layout--sidebar-collapsed { + grid-template-columns: 48px minmax(0, 1fr); +} + +.config-layout--sidebar-collapsed .config-sidebar__title, +.config-layout--sidebar-collapsed .config-sidebar__header-right .pill, +.config-layout--sidebar-collapsed .config-search, +.config-layout--sidebar-collapsed .config-nav__label, +.config-layout--sidebar-collapsed .config-nav__category-header, +.config-layout--sidebar-collapsed .config-sidebar__footer { + display: none; +} + +.config-layout--sidebar-collapsed .config-sidebar__version { + padding: 6px 4px; +} + +.config-layout--sidebar-collapsed .config-sidebar__version-text { + font-size: 10px; +} + +.config-layout--sidebar-collapsed .config-sidebar__header { + justify-content: center; + padding: 10px 4px; +} + +.config-layout--sidebar-collapsed .config-sidebar__header-right { + gap: 0; +} + +.config-layout--sidebar-collapsed .config-nav { + padding: 4px; + align-items: center; +} + +.config-layout--sidebar-collapsed .config-nav__item { + justify-content: center; + padding: 8px; + gap: 0; + border-bottom: 1px solid var(--border); +} + +.config-layout--sidebar-collapsed .config-nav__item:last-child { + border-bottom: none; +} + +.config-layout--sidebar-collapsed .config-nav__icon { + width: 20px; + height: 20px; +} + +.config-layout { + transition: grid-template-columns var(--duration-normal) var(--ease-out); +} + +.config-sidebar { + transition: width var(--duration-normal) var(--ease-out); +} + +/* Mobile back button (hidden on desktop) */ +.config-mobile-back { + display: none; +} + /* =========================================== Mobile Responsiveness =========================================== */ @@ -1546,36 +1542,15 @@ grid-template-columns: 1fr; } - .config-sidebar { - border-right: none; - border-bottom: 1px solid var(--border); + .config-top-tabs { + flex-wrap: wrap; + padding: 10px 16px; + gap: 10px; + min-height: auto; } - .config-sidebar__header { - padding: 14px 16px; - } - - .config-nav { - display: flex; - flex-wrap: nowrap; - gap: 6px; - padding: 10px 14px; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } - - .config-nav__item { - flex: 0 0 auto; - padding: 9px 14px; - white-space: nowrap; - } - - .config-nav__label { - display: inline; - } - - .config-sidebar__footer { - display: none; + .config-search--top { + width: 100%; } .config-actions { @@ -1618,10 +1593,6 @@ gap: 10px; } - .cfg-map__item-header { - grid-template-columns: 1fr auto; - } - .cfg-map__item-remove { justify-self: end; } @@ -1656,3 +1627,277 @@ min-width: 70px; } } + +/* =========================================== + Environment Values Blur + Peek Toggle + =========================================== */ + +.config-env-values--blurred .cfg-input, +.config-env-values--blurred .cfg-number__input, +.config-env-values--blurred textarea { + color: transparent; + text-shadow: 0 0 8px var(--text); +} + +.config-env-values--blurred .cfg-input::placeholder, +.config-env-values--blurred textarea::placeholder { + text-shadow: none; + color: var(--muted); + opacity: 0.7; +} + +.config-env-values--blurred .cfg-input:focus, +.config-env-values--blurred .cfg-number__input:focus, +.config-env-values--blurred textarea:focus { + color: transparent; + text-shadow: 0 0 8px var(--text); +} + +.config-env-values--visible.config-env-values--blurred .cfg-input, +.config-env-values--visible.config-env-values--blurred .cfg-number__input, +.config-env-values--visible.config-env-values--blurred textarea { + color: var(--text); + text-shadow: none; +} + +.config-env-values--visible.config-env-values--blurred .cfg-input:focus, +.config-env-values--visible.config-env-values--blurred .cfg-number__input:focus, +.config-env-values--visible.config-env-values--blurred textarea:focus { + color: var(--text); + text-shadow: none; +} + +.config-env-peek-btn { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 6px 12px; + border-radius: var(--radius-md); + border: 1px solid var(--border); + background: transparent; + color: var(--muted); + font-size: 13px; + font-weight: 500; + cursor: pointer; + transition: all var(--duration-fast) ease; + flex-shrink: 0; + margin-left: auto; +} + +.config-env-peek-btn:hover { + color: var(--text); + border-color: var(--border-strong); + background: var(--bg-hover); +} + +.config-env-peek-btn--active { + color: var(--accent); + border-color: color-mix(in srgb, var(--accent) 40%, transparent); + background: color-mix(in srgb, var(--accent) 8%, transparent); +} + +.config-env-peek-btn svg { + flex-shrink: 0; +} + +/* Raw JSON redaction blur */ + +.config-raw-redacted { + color: transparent !important; + text-shadow: 0 0 8px var(--text); + transition: + color var(--duration-normal, 250ms) ease, + text-shadow var(--duration-normal, 250ms) ease; +} + +/* ============================ + Appearance / Settings section + ============================ */ + +.settings-appearance { + display: flex; + flex-direction: column; + gap: 32px; + padding: 8px 0; +} + +.settings-appearance__section { + display: flex; + flex-direction: column; + gap: 12px; +} + +.settings-appearance__heading { + font-size: 14px; + font-weight: 600; + color: var(--text); + margin: 0; + letter-spacing: 0.01em; +} + +.settings-appearance__hint { + font-size: 12px; + color: var(--muted); + margin: 0; + line-height: 1.4; +} + +/* Theme card grid */ + +.settings-theme-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 8px; +} + +.settings-theme-card { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + gap: 10px; + padding: 10px 12px; + min-height: 44px; + border-radius: var(--radius-md, 10px); + border: 1px solid var(--border); + background: var(--panel); + cursor: pointer; + transition: + border-color var(--duration-fast, 120ms) ease, + box-shadow var(--duration-fast, 120ms) ease, + transform var(--duration-fast, 120ms) ease; +} + +.settings-theme-card:hover { + border-color: var(--border-strong); + box-shadow: var(--shadow-sm); +} + +.settings-theme-card--active { + border-color: var(--accent); + background: color-mix(in srgb, var(--accent) 6%, var(--panel)); + box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); +} + +.settings-theme-card__icon { + width: 18px; + height: 18px; + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--muted); + flex: 0 0 auto; +} + +.settings-theme-card__icon svg { + width: 18px; + height: 18px; + stroke: currentColor; + fill: none; + stroke-width: 1.7px; + stroke-linecap: round; + stroke-linejoin: round; +} + +.settings-theme-card--active .settings-theme-card__icon { + color: var(--accent); +} + +.settings-theme-card__label { + font-size: 13px; + font-weight: 600; + color: var(--text); + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.settings-theme-card__desc { + display: none; +} + +.settings-theme-card__check { + margin-left: auto; + width: 16px; + height: 16px; + color: var(--accent); + flex: 0 0 auto; +} + +.settings-theme-card__check svg { + width: 16px; + height: 16px; +} + +.settings-theme-card:focus-visible { + outline: none; + box-shadow: var(--focus-ring); +} + +@media (max-width: 900px) { + .settings-theme-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 520px) { + .settings-theme-grid { + grid-template-columns: 1fr; + } +} + +/* Connection info grid */ + +.settings-info-grid { + display: flex; + flex-direction: column; + gap: 0; + border: 1px solid var(--border); + border-radius: var(--radius-md, 8px); + overflow: hidden; +} + +.settings-info-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 14px; + font-size: 13px; + border-bottom: 1px solid var(--border); +} + +.settings-info-row:last-child { + border-bottom: none; +} + +.settings-info-row__label { + color: var(--muted); + font-weight: 500; +} + +.settings-info-row__value { + color: var(--text); + display: flex; + align-items: center; + gap: 6px; +} + +.settings-info-row__value.mono { + font-family: var(--font-mono, monospace); + font-size: 12px; +} + +.settings-status-dot { + display: inline-block; + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--muted); + flex-shrink: 0; +} + +.settings-status-dot--ok { + background: var(--green, #22c55e); + box-shadow: 0 0 6px color-mix(in srgb, var(--green, #22c55e) 50%, transparent); +} diff --git a/ui/src/styles/glass.css b/ui/src/styles/glass.css new file mode 100644 index 00000000000..e2845af1159 --- /dev/null +++ b/ui/src/styles/glass.css @@ -0,0 +1,554 @@ +/* ════════════════════════════════════════════════════════ + Glass Component System + Glassmorphism primitives used across dashboard views. + ════════════════════════════════════════════════════════ */ + +/* ─── Animations ─── */ + +@keyframes glass-enter { + from { + opacity: 0; + transform: scale(0.97) translateY(6px); + } + to { + opacity: 1; + transform: scale(1) translateY(0); + } +} + +@keyframes modal-overlay-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes modal-dialog-in { + from { + opacity: 0; + transform: scale(0.95) translateY(12px); + } + to { + opacity: 1; + transform: scale(1) translateY(0); + } +} + +@keyframes glass-dropdown-in { + from { + opacity: 0; + transform: translateY(-4px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes ambient-drift { + 0% { + background-position: 0% 0%; + } + 50% { + background-position: 100% 100%; + } + 100% { + background-position: 0% 0%; + } +} + +@keyframes active-breathe { + 0%, + 100% { + opacity: 0.5; + } + 50% { + opacity: 1; + } +} + +@keyframes card-rise { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.glass-animate-in { + animation: glass-enter var(--clay-duration-normal) var(--clay-easing) both; +} + +/* ─── Glass Buttons ─── */ + +.glass-btn-primary { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.4rem; + padding: 10px 18px; + border: none; + border-radius: var(--radius-sm); + background: linear-gradient(135deg, var(--kn-claw), var(--kn-claw-deep)); + color: var(--accent-foreground); + font-weight: 600; + font-size: 0.88rem; + cursor: pointer; + position: relative; + overflow: hidden; + transition: + transform 0.15s ease, + box-shadow 0.2s ease, + filter 0.15s ease; +} + +.glass-btn-primary:hover { + transform: translateY(-1px); + filter: brightness(1.1); + box-shadow: 0 4px 16px rgba(202, 58, 41, 0.3); +} + +.glass-btn-primary:active { + transform: translateY(0); +} + +.glass-btn-secondary { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.4rem; + padding: 10px 18px; + border: 1px solid var(--glass-border); + border-radius: var(--radius-sm); + background: var(--glass-bg); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + color: var(--text); + font-weight: 500; + font-size: 0.88rem; + cursor: pointer; + transition: + border-color 0.2s ease, + background 0.15s ease; +} + +.glass-btn-secondary:hover { + border-color: var(--glass-border-hover); + background: var(--bg-hover); +} + +.glass-btn-ocean { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.4rem; + padding: 10px 18px; + border: 1px solid rgba(0, 212, 170, 0.2); + border-radius: var(--radius-sm); + background: rgba(0, 212, 170, 0.08); + color: var(--kn-bioluminescence); + font-weight: 600; + font-size: 0.88rem; + cursor: pointer; + transition: + border-color 0.2s ease, + background 0.15s ease; +} + +.glass-btn-ocean:hover { + border-color: rgba(0, 212, 170, 0.35); + background: rgba(0, 212, 170, 0.14); +} + +/* ─── Glass Input ─── */ + +.glass-input { + width: 100%; + padding: 10px 14px; + border: 1px solid var(--glass-border); + border-radius: var(--radius-sm); + background: var(--glass-bg); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + color: var(--text); + font-size: 0.92rem; + font-family: inherit; + transition: + border-color 0.2s ease, + box-shadow 0.2s ease; +} + +.glass-input:focus { + outline: none; + border-color: var(--accent); + border-width: 2px; + box-shadow: 0 0 0 3px var(--accent-subtle); +} + +.glass-input::placeholder { + color: var(--muted); +} + +/* ─── Glass Tabs ─── */ + +.glass-tab { + display: inline-flex; + align-items: center; + gap: 5px; + padding: 6px 14px; + border: none; + border-radius: var(--radius-sm); + background: transparent; + color: var(--muted); + font-size: 0.82rem; + font-weight: 500; + cursor: pointer; + position: relative; + transition: + color 0.15s ease, + background 0.15s ease; +} + +.glass-tab:hover { + color: var(--text); + background: var(--accent-subtle); +} + +.glass-tab-active { + color: var(--text); + background: var(--accent-subtle); + font-weight: 600; +} + +.glass-tab-active::after { + content: ""; + position: absolute; + bottom: 0; + left: 20%; + width: 60%; + height: 2px; + background: linear-gradient(90deg, transparent, var(--accent), transparent); + border-radius: 1px; +} + +.glass-segmented-control { + display: inline-flex; + align-items: center; + gap: 2px; + padding: 3px; + border: 1px solid var(--glass-border); + border-radius: var(--radius-full); + background: var(--glass-bg); +} + +/* ─── Glass Dialog ─── */ + +.glass-dialog { + background: var(--glass-bg-elevated); + backdrop-filter: blur(40px) saturate(var(--glass-saturate)); + -webkit-backdrop-filter: blur(40px) saturate(var(--glass-saturate)); + border: 1px solid var(--glass-border); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-lg); + position: relative; + overflow: hidden; +} + +/* ─── Glass Select Panel (Dropdown) ─── */ + +.glass-select-panel { + background: var(--glass-bg-elevated); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + border: 1px solid var(--glass-border); + border-radius: var(--radius-md); + box-shadow: var(--shadow-lg); + animation: glass-dropdown-in 0.15s ease-out both; +} + +/* ─── Glass Overlay (Modal Backdrop) ─── */ + +.glass-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + z-index: 100; + animation: modal-overlay-in 0.25s ease-out both; +} + +/* ─── Glass Depth Layers ─── */ + +.glass-layer-1 { + background: var(--glass-bg); + backdrop-filter: blur(8px) saturate(120%); + -webkit-backdrop-filter: blur(8px) saturate(120%); +} + +.glass-layer-2 { + background: var(--glass-bg-elevated); + backdrop-filter: blur(16px) saturate(140%); + -webkit-backdrop-filter: blur(16px) saturate(140%); +} + +.glass-layer-3 { + background: rgba(0, 0, 0, 0.3); + backdrop-filter: blur(32px) saturate(160%); + -webkit-backdrop-filter: blur(32px) saturate(160%); +} + +/* ─── Glass Card Variants ─── */ + +.glass-card { + background: var(--glass-bg); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + border: 1px solid var(--glass-border); + border-radius: var(--radius-md); + box-shadow: var(--shadow-sm); + transition: + border-color 0.2s ease, + box-shadow 0.2s ease; +} + +.glass-card:hover { + border-color: var(--glass-border-hover); + box-shadow: var(--shadow-md); +} + +.glass-card-active { + border-color: var(--accent); + box-shadow: + 0 0 0 1px var(--accent), + var(--shadow-md); +} + +.glass-card-active-ocean { + border-color: var(--kn-bioluminescence); + box-shadow: + 0 0 0 1px var(--kn-bioluminescence), + var(--shadow-md); +} + +/* ─── Glass Noise Texture ─── */ + +.glass-noise::after { + content: ""; + position: absolute; + inset: 0; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); + opacity: 0.05; + mix-blend-mode: overlay; + pointer-events: none; + border-radius: inherit; +} + +/* ─── Glass Border Gradient ─── */ + +.glass-border-gradient { + position: relative; +} + +.glass-border-gradient::before { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; + padding: 1px; + background: linear-gradient(135deg, var(--glass-border-hover), transparent 60%); + mask: + linear-gradient(#fff 0 0) content-box, + linear-gradient(#fff 0 0); + mask-composite: exclude; + -webkit-mask-composite: xor; + opacity: 0; + transition: opacity 0.2s ease; + pointer-events: none; +} + +.glass-border-gradient:hover::before { + opacity: 1; +} + +/* ─── Ambient Background ─── */ + +.ambient-bg { + position: relative; +} + +.ambient-bg::before { + content: ""; + position: fixed; + inset: 0; + pointer-events: none; + z-index: -1; + background: + radial-gradient(ellipse 80% 50% at 20% 80%, var(--kn-claw-dim) 0%, transparent 60%), + radial-gradient(ellipse 60% 40% at 80% 20%, var(--kn-ocean-dim) 0%, transparent 50%); +} + +.ambient-bg::after { + content: ""; + position: fixed; + inset: 0; + pointer-events: none; + z-index: -1; + background: + radial-gradient(ellipse 50% 30% at 60% 60%, var(--kn-claw-dim) 0%, transparent 50%), + radial-gradient(ellipse 40% 50% at 30% 30%, rgba(0, 212, 170, 0.03) 0%, transparent 50%); + animation: ambient-drift 120s ease-in-out infinite alternate; + background-size: 200% 200%; +} + +/* ─── Typography Utilities ─── */ + +.text-display { + font-weight: 700; + letter-spacing: -0.04em; + line-height: 1.1; +} + +/* ─── Glass Dashboard Card ─── */ + +.glass-dashboard-card { + background: var(--glass-bg); + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); + border: 1px solid var(--glass-border); + border-radius: var(--radius-md); + padding: 1.25rem; + overflow: hidden; + position: relative; + box-shadow: var(--shadow-sm), var(--glass-highlight); + transition: + border-color 0.2s ease, + box-shadow 0.2s ease; + min-width: 0; +} + +.glass-dashboard-card::after { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; + background: linear-gradient(90deg, transparent, var(--accent), transparent); + opacity: 0; + transition: opacity 0.2s ease; +} + +.glass-dashboard-card:hover { + border-color: var(--glass-border-hover); + box-shadow: var(--shadow-md); +} + +.glass-dashboard-card:hover::after { + opacity: 0.6; +} + +/* ─── Card Header Convention ─── */ + +.card-header { + display: flex; + align-items: center; + gap: 0.625rem; + margin-bottom: 0.875rem; + min-height: 28px; +} + +.card-header__prefix { + color: var(--accent); + font-family: var(--mono); + font-size: 0.82rem; + font-weight: 600; + line-height: 1; +} + +.card-header__title { + font-size: 0.9rem; + font-weight: 700; + color: var(--text); + letter-spacing: -0.01em; + margin: 0; +} + +.card-header__actions { + margin-left: auto; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.card-header__link { + font-size: 0.75rem; + color: var(--accent); + text-decoration: none; + display: inline-flex; + align-items: center; + gap: 4px; + cursor: pointer; + white-space: nowrap; +} + +.card-header__link:hover { + text-decoration: underline; +} + +/* ─── Count Badge ─── */ + +.count-badge { + font-size: 0.72rem; + font-family: var(--mono); + font-variant-numeric: tabular-nums; + background: var(--clay-bg-card); + color: var(--muted); + padding: 1px 7px; + border-radius: 9999px; + line-height: 1.4; + white-space: nowrap; +} + +.count-badge--accent { + color: var(--accent); +} + +.count-badge--emerald { + color: var(--success); +} + +.count-badge--amber { + color: var(--warn); +} + +.count-badge--red { + color: var(--danger); +} + +/* ─── Glass Divider ─── */ + +.glass-divider { + height: 1px; + background: var(--clay-border-subtle); + margin: 1.25rem 0; + border: none; +} + +/* ─── Glass Event Row ─── */ + +.glass-event-row { + padding: 6px 8px; + border-radius: var(--clay-radius-sm); + cursor: pointer; + transition: background var(--clay-duration-fast) ease; +} + +.glass-event-row:hover { + background: var(--clay-bg-interactive); +} diff --git a/ui/src/styles/layout.css b/ui/src/styles/layout.css index b939c27c29d..f15f8982166 100644 --- a/ui/src/styles/layout.css +++ b/ui/src/styles/layout.css @@ -3,8 +3,8 @@ =========================================== */ .shell { - --shell-pad: 16px; - --shell-gap: 16px; + --shell-pad: 12px; + --shell-gap: 12px; --shell-nav-width: 220px; --shell-topbar-height: 56px; --shell-focus-duration: 200ms; @@ -14,7 +14,7 @@ grid-template-columns: var(--shell-nav-width) minmax(0, 1fr); grid-template-rows: var(--shell-topbar-height) 1fr; grid-template-areas: - "topbar topbar" + "nav topbar" "nav content"; gap: 0; animation: dashboard-enter 0.4s var(--ease-out); @@ -41,7 +41,7 @@ } .shell--nav-collapsed { - grid-template-columns: 0px minmax(0, 1fr); + grid-template-columns: 60px minmax(0, 1fr); } .shell--chat-focus { @@ -80,192 +80,459 @@ display: flex; justify-content: space-between; align-items: center; - gap: 16px; - padding: 0 20px; - height: var(--shell-topbar-height); - border-bottom: 1px solid var(--border); - background: var(--bg); -} - -.topbar-left { - display: flex; - align-items: center; - gap: 12px; -} - -.topbar .nav-collapse-toggle { - width: 36px; - height: 36px; - margin-bottom: 0; -} - -.topbar .nav-collapse-toggle__icon { - width: 20px; - height: 20px; -} - -.topbar .nav-collapse-toggle__icon svg { - width: 20px; - height: 20px; -} - -/* Brand */ -.brand { - display: flex; - align-items: center; gap: 10px; + padding: 0 16px; + height: var(--shell-topbar-height); + background: var(--topbar-bg); + backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur)); + -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur)); + border-bottom: var(--topbar-border); } -.brand-logo { - width: 28px; - height: 28px; - flex-shrink: 0; -} +/* --- Left: Dashboard Header --- */ -.brand-logo img { - width: 100%; - height: 100%; - object-fit: contain; -} - -.brand-text { +.dashboard-header { display: flex; - flex-direction: column; - gap: 1px; + align-items: center; + gap: 0.5rem; + min-width: 0; } -.brand-title { - font-size: 16px; - font-weight: 700; - letter-spacing: -0.03em; - line-height: 1.1; - color: var(--text-strong); +.dashboard-header__breadcrumb { + display: flex; + align-items: center; + gap: 6px; + font-size: 0.8rem; + min-width: 0; } -.brand-sub { - font-size: 10px; - font-weight: 500; +.dashboard-header__breadcrumb-link { color: var(--muted); - letter-spacing: 0.05em; - text-transform: uppercase; - line-height: 1; + text-decoration: none; + cursor: pointer; + white-space: nowrap; } -/* Topbar status */ -.topbar-status { +.dashboard-header__breadcrumb-link:hover { + color: var(--text); +} + +.dashboard-header__breadcrumb-sep { + color: var(--muted); + opacity: 0.5; +} + +.dashboard-header__breadcrumb-current { + color: var(--text); + font-weight: 600; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.dashboard-header__actions { + margin-left: auto; display: flex; align-items: center; gap: 8px; } -.topbar-status .pill { - padding: 6px 10px; - gap: 6px; - font-size: 12px; - font-weight: 500; - height: 32px; - box-sizing: border-box; -} +/* --- Center: Search / Command Palette Trigger --- */ -.topbar-status .pill .mono { +.topbar-search { display: flex; align-items: center; - line-height: 1; - margin-top: 0px; + gap: 8px; + padding: 7px 14px; + min-width: 180px; + max-width: 600px; + flex: 1; + height: 36px; + border: 1px solid var(--border); + border-radius: 10px; + background: color-mix(in srgb, var(--secondary) 60%, transparent); + color: var(--muted); + font-size: 14px; + font-family: var(--font-body); + cursor: pointer; + transition: + border-color 180ms ease, + background 180ms ease, + box-shadow 180ms ease; + -webkit-appearance: none; + appearance: none; } -.topbar-status .statusDot { +.topbar-search:hover { + border-color: var(--border-strong); + background: color-mix(in srgb, var(--secondary) 85%, transparent); +} + +.topbar-search:focus-visible { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px var(--accent-subtle); +} + +.topbar-search__label { + flex: 1; + text-align: left; + pointer-events: none; +} + +.topbar-search__kbd { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 1px 6px; + min-width: 22px; + height: 20px; + border: 1px solid var(--border); + border-radius: var(--radius-sm); + background: color-mix(in srgb, var(--bg) 70%, transparent); + color: var(--muted); + font-size: 11px; + font-family: var(--font-body); + font-weight: 500; + line-height: 1; + pointer-events: none; + flex-shrink: 0; +} + +/* --- Right: Status area --- */ + +.topbar-status { + display: flex; + align-items: center; + gap: 10px; + flex-shrink: 0; +} + +.topbar-divider { + width: 1px; + height: 20px; + background: var(--border); + flex-shrink: 0; +} + +/* Connection indicator */ + +.topbar-connection { + display: inline-flex; + align-items: center; + gap: 5px; + padding: 3px 8px; + border-radius: var(--radius-full); + font-size: 11px; + font-weight: 500; + color: var(--danger); + background: var(--danger-subtle); + transition: + color 250ms ease, + background 250ms ease; +} + +.topbar-connection--ok { + color: var(--ok); + background: var(--ok-subtle); +} + +.topbar-connection__dot { width: 6px; height: 6px; + border-radius: var(--radius-full); + background: currentColor; + box-shadow: 0 0 6px currentColor; + flex-shrink: 0; } -.topbar-status .theme-toggle { - --theme-item: 24px; - --theme-gap: 2px; - --theme-pad: 3px; +.topbar-connection:not(.topbar-connection--ok) .topbar-connection__dot { + animation: pulse-subtle 2s ease-in-out infinite; } -.topbar-status .theme-icon { +.topbar-connection__label { + text-transform: uppercase; + letter-spacing: 0.04em; + line-height: 1; +} + +/* Redact / stream-mode toggle */ + +.topbar-redact { + display: inline-flex; + align-items: center; + justify-content: center; + width: 26px; + height: 26px; + padding: 0; + border: 1px solid transparent; + border-radius: var(--radius); + background: none; + color: var(--muted); + cursor: pointer; + transition: + color 180ms ease, + background 180ms ease, + border-color 180ms ease; + flex-shrink: 0; +} + +.topbar-redact svg { width: 12px; height: 12px; } +.topbar-redact:hover { + color: var(--text); + background: color-mix(in srgb, var(--secondary) 80%, transparent); + border-color: var(--border); +} + +.topbar-redact--active { + color: var(--warn); +} + +.topbar-redact--active:hover { + color: var(--warn); + background: var(--warn-subtle); + border-color: color-mix(in srgb, var(--warn) 30%, transparent); +} + +/* Topbar theme orb sizing */ + +.topbar-status .theme-orb__trigger { + width: 26px; + height: 26px; + font-size: 13px; +} + /* =========================================== Navigation Sidebar =========================================== */ -.nav { +.shell-nav { grid-area: nav; + display: flex; + flex-direction: column; + min-height: 0; + position: relative; +} + +.sidebar { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; overflow-y: auto; overflow-x: hidden; - padding: 16px 12px; - background: var(--bg); - scrollbar-width: none; /* Firefox */ + scrollbar-width: none; + background: var(--sidebar-bg); + backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur)); + -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur)); transition: width var(--shell-focus-duration) var(--shell-focus-ease), padding var(--shell-focus-duration) var(--shell-focus-ease), opacity var(--shell-focus-duration) var(--shell-focus-ease); min-height: 0; + border-right: 1px solid var(--glass-border); } -.nav::-webkit-scrollbar { - display: none; /* Chrome/Safari */ +.sidebar::-webkit-scrollbar { + display: none; } -.shell--chat-focus .nav { - width: 0; - padding: 0; - border-width: 0; - overflow: hidden; - pointer-events: none; - opacity: 0; +.shell--chat-focus .sidebar, +.shell--chat-focus .sidebar-resizer { + display: none; } -.nav--collapsed { - width: 0; +.sidebar--collapsed { + align-items: center; +} + +.sidebar--collapsed .sidebar-header { + justify-content: center; + padding: 10px 8px; + min-height: 54px; +} + +.sidebar--collapsed .nav-group__items { + padding: 4px 0; + align-items: center; +} + +.sidebar--collapsed .nav-item { + margin: 0; + padding: 10px; + justify-content: center; + width: 44px; + height: 44px; +} + +.sidebar--collapsed .nav-item__icon { + width: 22px; + height: 22px; + opacity: 0.85; +} + +.sidebar--collapsed .nav-item__icon svg { + width: 22px; + height: 22px; + stroke-width: 1.75px; +} + +.sidebar--collapsed .nav-item--active { + border-left: 0; +} + +.sidebar--collapsed .nav-item--active::before { + background: + radial-gradient( + ellipse 120% 28px at 50% -2px, + color-mix(in srgb, var(--accent) 38%, transparent) 0%, + color-mix(in srgb, var(--accent) 14%, transparent) 40%, + transparent 100% + ), + radial-gradient( + ellipse 60% 100% at -4px 50%, + color-mix(in srgb, var(--accent) 28%, transparent) 0%, + transparent 70% + ); +} + +.sidebar--collapsed .sidebar-footer { + display: flex; + flex-direction: column; + align-items: center; + padding: 8px 0; +} + +.sidebar--collapsed .sidebar-footer .nav-item { + margin: 0; + padding: 10px; + width: 44px; + height: 44px; +} + +/* Sidebar resizer handle */ +.sidebar-resizer { + position: absolute; + right: 0; + top: 0; + bottom: 0; + width: 6px; + cursor: col-resize; + z-index: 10; + flex-shrink: 0; + /* Hit area extends beyond visible handle for easier grabbing */ + margin-right: -3px; +} + +.sidebar-resizer::before { + content: ""; + position: absolute; + left: 2px; + top: 20%; + bottom: 20%; + width: 2px; + border-radius: 1px; + background: var(--glass-border); + transition: background 0.15s ease; +} + +.sidebar-resizer:hover::before, +.sidebar-resizer:active::before { + background: var(--glass-border-hover); +} + +/* Sidebar header (brand + collapse) */ +.sidebar-header { + display: flex; + flex-direction: row; + align-items: center; + padding: 10px 8px; + gap: 8px; + flex-shrink: 0; + min-height: 54px; +} + +.sidebar-brand { + flex: 1; min-width: 0; - padding: 0; - overflow: hidden; - border: none; - opacity: 0; - pointer-events: none; + display: flex; + align-items: center; + gap: 10px; + max-height: 28px; + + padding-left: 10px; + padding-right: 10px; + + @media (max-width: 1100px) { + padding-left: 0; + padding-right: 0; + } } -/* Nav collapse toggle */ -.nav-collapse-toggle { +.sidebar-brand__logo { width: 32px; height: 32px; + flex-shrink: 0; + object-fit: contain; +} + +.sidebar-brand__title { + /* Keep the brand readable when users resize the sidebar down to its minimum width. */ + font-size: clamp(13px, calc(20px - (220px - var(--shell-nav-width)) * 0.175), 20px); + font-weight: 700; + letter-spacing: -0.03em; + line-height: 1.1; + color: var(--text-strong); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + min-width: 0; +} + +.sidebar-collapse-btn { + flex: 0 0 32px; + width: 32px; + height: 32px; + + @media (max-width: 1100px) { + flex: 0 0 28px; + width: 28px; + height: 28px; + } + display: flex; align-items: center; justify-content: center; - background: transparent; - border: 1px solid transparent; - border-radius: var(--radius-md); + background: var(--bg); + border: var(--border) 1px solid transparent; + border-radius: var(--radius-sm); cursor: pointer; + color: var(--muted); + flex-shrink: 0; transition: background var(--duration-fast) ease, - border-color var(--duration-fast) ease; - margin-bottom: 16px; + border-color var(--duration-fast) ease, + color var(--duration-fast) ease; } -.nav-collapse-toggle:hover { - background: var(--bg-hover); +.sidebar--collapsed .sidebar-collapse-btn { + flex: none; + width: 100%; +} + +.sidebar-collapse-btn:hover { + background: var(--bg); border-color: var(--border); + color: var(--text); } -.nav-collapse-toggle__icon { - display: flex; - align-items: center; - justify-content: center; - width: 18px; - height: 18px; - color: var(--muted); - transition: color var(--duration-fast) ease; -} - -.nav-collapse-toggle__icon svg { - width: 18px; - height: 18px; +.sidebar-collapse-btn svg { + width: 24px; + height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5px; @@ -273,13 +540,22 @@ stroke-linejoin: round; } -.nav-collapse-toggle:hover .nav-collapse-toggle__icon { - color: var(--text); +/* Sidebar nav section */ +.sidebar-nav { + flex: 1; + padding: 4px 8px; + overflow-y: auto; + overflow-x: hidden; + scrollbar-width: none; +} + +.sidebar-nav::-webkit-scrollbar { + display: none; } /* Nav groups */ .nav-group { - margin-bottom: 20px; + margin-bottom: 16px; display: grid; gap: 2px; } @@ -297,16 +573,16 @@ display: none; } -/* Nav label */ -.nav-label { +/* Nav group label */ +.nav-group__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 6px 10px; - font-size: 11px; - font-weight: 500; + font-size: 12px; + font-weight: 600; color: var(--muted); margin-bottom: 4px; background: transparent; @@ -314,37 +590,40 @@ cursor: pointer; text-align: left; border-radius: var(--radius-sm); + text-transform: uppercase; + letter-spacing: 0.04em; transition: color var(--duration-fast) ease, background var(--duration-fast) ease; } -.nav-label:hover { +.nav-group__label:hover { color: var(--text); background: var(--bg-hover); } -.nav-label--static { - cursor: default; -} - -.nav-label--static:hover { - color: var(--muted); - background: transparent; -} - -.nav-label__text { +.nav-group__label-text { flex: 1; } -.nav-label__chevron { - font-size: 10px; +.nav-group__chevron { + display: flex; + align-items: center; + justify-content: center; + width: 12px; + height: 12px; opacity: 0.5; transition: transform var(--duration-fast) ease; } -.nav-group--collapsed .nav-label__chevron { - transform: rotate(-90deg); +.nav-group__chevron svg { + width: 12px; + height: 12px; + stroke: currentColor; + fill: none; + stroke-width: 2px; + stroke-linecap: round; + stroke-linejoin: round; } /* Nav items */ @@ -354,22 +633,24 @@ align-items: center; justify-content: flex-start; gap: 10px; - padding: 8px 10px; + padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; + overflow: hidden; color: var(--muted); cursor: pointer; text-decoration: none; transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease, - color var(--duration-fast) ease; + color var(--duration-fast) ease, + box-shadow var(--duration-fast) ease; } .nav-item__icon { - width: 16px; - height: 16px; + width: 20px; + height: 20px; display: flex; align-items: center; justify-content: center; @@ -379,8 +660,8 @@ } .nav-item__icon svg { - width: 16px; - height: 16px; + width: 20px; + height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5px; @@ -389,14 +670,32 @@ } .nav-item__text { - font-size: 13px; + font-size: 16px; font-weight: 500; white-space: nowrap; } +.nav-item__external-icon { + display: flex; + align-items: center; + margin-left: auto; + opacity: 0.4; +} + +.nav-item__external-icon svg { + width: 12px; + height: 12px; + stroke: currentColor; + fill: none; + stroke-width: 1.5px; + stroke-linecap: round; + stroke-linejoin: round; +} + .nav-item:hover { color: var(--text); - background: var(--bg-hover); + background: color-mix(in srgb, var(--secondary) 90%, transparent); + border-color: color-mix(in srgb, var(--border) 75%, transparent); text-decoration: none; } @@ -404,23 +703,89 @@ opacity: 1; } -.nav-item.active { +.nav-item--active { color: var(--text-strong); - background: var(--accent-subtle); + background: color-mix(in srgb, var(--accent-subtle) 70%, var(--secondary)); + border-color: color-mix(in srgb, var(--accent) 34%, transparent); + box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent); } -.nav-item.active .nav-item__icon { +.nav-item--active::before { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; + background: radial-gradient( + ellipse 28px 120% at -2px 50%, + color-mix(in srgb, var(--accent) 38%, transparent) 0%, + color-mix(in srgb, var(--accent) 14%, transparent) 40%, + transparent 100% + ); + opacity: 0; + animation: nav-glow-in 0.4s ease-out 0.05s forwards; + pointer-events: none; +} + +@keyframes nav-glow-in { + from { + opacity: 0; + transform: translateX(-6px); + } + + to { + opacity: 1; + transform: translateX(0); + } +} + +.nav-item--active .nav-item__icon { opacity: 1; color: var(--accent); } +/* Sidebar footer — aligned with chat compose bar */ +.sidebar-footer { + padding: 14px 8px 6px; + border-top: 1px solid var(--border); + flex-shrink: 0; + margin-top: auto; +} + +.sidebar-footer__docs-block { + display: flex; + flex-direction: column; + gap: 4px; +} + +.sidebar-version { + display: flex; + align-items: center; + justify-content: center; + padding: 2px 12px 6px; +} + +.sidebar-version__text { + font-size: 12px; + font-weight: 500; + color: var(--muted); + letter-spacing: 0.02em; +} + +.sidebar-version__dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--muted); + opacity: 0.4; +} + /* =========================================== Content Area =========================================== */ .content { grid-area: content; - padding: 12px 16px 32px; + padding: 12px 14px 24px; display: block; min-height: 0; overflow-y: auto; @@ -428,17 +793,13 @@ } .content > * + * { - margin-top: 24px; -} - -:root[data-theme="light"] .content { - background: var(--bg-content); + margin-top: 18px; } .content--chat { display: flex; flex-direction: column; - gap: 24px; + gap: 2px; overflow: hidden; padding-bottom: 0; } @@ -450,10 +811,12 @@ /* Content header */ .content-header { display: flex; - align-items: flex-end; + align-items: center; justify-content: space-between; - gap: 16px; - padding: 4px 8px; + gap: 10px; + height: 36px; + min-height: 36px; + padding: 0; overflow: hidden; transform-origin: top center; transition: @@ -461,36 +824,37 @@ transform var(--shell-focus-duration) var(--shell-focus-ease), max-height var(--shell-focus-duration) var(--shell-focus-ease), padding var(--shell-focus-duration) var(--shell-focus-ease); - max-height: 80px; + max-height: 36px; } .shell--chat-focus .content-header { opacity: 0; transform: translateY(-8px); - max-height: 0px; + max-height: 0; padding: 0; pointer-events: none; } .page-title { - font-size: 26px; - font-weight: 700; - letter-spacing: -0.035em; - line-height: 1.15; + font-size: 22px; + font-weight: 600; + letter-spacing: -0.03em; + line-height: 1.25; color: var(--text-strong); } .page-sub { color: var(--muted); - font-size: 14px; + font-size: 12px; font-weight: 400; - margin-top: 6px; + margin-top: 1px; letter-spacing: -0.01em; } .page-meta { display: flex; - gap: 8px; + gap: 6px; + align-items: center; } /* Chat view header adjustments */ @@ -498,10 +862,13 @@ flex-direction: row; align-items: center; justify-content: space-between; - gap: 16px; + gap: 10px; } .content--chat .content-header > div:first-child { + display: flex; + flex-direction: column; + justify-content: center; text-align: left; } @@ -511,6 +878,74 @@ .content--chat .chat-controls { flex-shrink: 0; + align-items: center; + align-content: center; +} + +/* Chat controls in header — uniform 32px height across all controls */ +.content-header .btn--icon { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 32px; + height: 32px; + padding: 0 !important; +} + +.content-header .btn--icon svg { + display: block; + width: 16px; + height: 16px; + flex-shrink: 0; +} + +.content-header .chat-controls__session-row { + display: flex; + align-items: center; + gap: 6px; + flex-wrap: wrap; +} + +.content-header .chat-controls__agent, +.content-header .chat-controls__session { + display: flex; + align-items: center; + min-width: 0; +} + +.content-header .chat-controls__agent select, +.content-header .chat-controls__session select { + height: 32px; + line-height: 1; + font-size: 13px; + font-weight: 600; + letter-spacing: -0.02em; + padding: 0 28px 0 10px; + background-position: right 8px center; + border-radius: var(--radius-md); + max-width: 300px; + overflow: hidden; + text-overflow: ellipsis; +} + +.content-header .chat-controls__separator { + width: 1px; + height: 32px; + background: var(--border); + font-size: 0; + color: transparent; + overflow: hidden; + align-self: center; + flex-shrink: 0; + margin: 0 4px; +} + +.content-header .chat-controls__thinking { + height: 32px; + min-height: 32px; + align-items: center; + padding: 0 10px; + font-size: 12px; } /* =========================================== @@ -519,7 +954,7 @@ .grid { display: grid; - gap: 20px; + gap: 14px; } .grid-cols-2 { @@ -532,32 +967,32 @@ .stat-grid { display: grid; - gap: 14px; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 10px; + grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } .note-grid { display: grid; - gap: 16px; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 12px; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .row { display: flex; - gap: 12px; + gap: 10px; align-items: center; } .stack { display: grid; - gap: 12px; + gap: 10px; grid-template-columns: minmax(0, 1fr); } .filters { display: flex; flex-wrap: wrap; - gap: 8px; + gap: 12px; align-items: center; } @@ -567,32 +1002,41 @@ @media (max-width: 1100px) { .shell { - --shell-pad: 12px; - --shell-gap: 12px; - grid-template-columns: 1fr; - grid-template-rows: auto auto 1fr; - grid-template-areas: - "topbar" - "nav" - "content"; + --shell-pad: 10px; + --shell-gap: 10px; + --shell-nav-width: 200px; } - .nav { - position: static; - max-height: none; - display: flex; - gap: 6px; - overflow-x: auto; - border-right: none; - border-bottom: 1px solid var(--border); - padding: 10px 14px; - background: var(--bg); + .topbar { + padding: 10px 12px; + gap: 8px; } - .nav-group { - grid-auto-flow: column; - grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); - margin-bottom: 0; + .topbar-search__kbd { + display: none; + } + + .topbar-status { + flex-wrap: nowrap; + } + + .content-header { + height: 36px; + min-height: 36px; + max-height: 36px; + padding: 0; + } + + .page-sub { + display: none; + } + + .content { + padding: 10px 12px 20px; + } + + .content > * + * { + margin-top: 14px; } .grid-cols-2, @@ -600,16 +1044,6 @@ grid-template-columns: 1fr; } - .topbar { - position: static; - padding: 12px 14px; - gap: 10px; - } - - .topbar-status { - flex-wrap: wrap; - } - .table-head, .table-row { grid-template-columns: 1fr; diff --git a/ui/src/styles/layout.mobile.css b/ui/src/styles/layout.mobile.css index 450a83608c6..51a1bf9acbc 100644 --- a/ui/src/styles/layout.mobile.css +++ b/ui/src/styles/layout.mobile.css @@ -2,45 +2,10 @@ Mobile Layout =========================================== */ -/* Tablet: Horizontal nav */ +/* Tablet: keep side nav vertical, narrow sidebar */ @media (max-width: 1100px) { - .nav { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - gap: 4px; - padding: 10px 14px; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - scrollbar-width: none; - } - - .nav::-webkit-scrollbar { - display: none; - } - - .nav-group { - display: contents; - } - - .nav-group__items { - display: contents; - } - - .nav-label { - display: none; - } - - .nav-group--collapsed .nav-group__items { - display: contents; - } - - .nav-item { - padding: 8px 14px; - font-size: 13px; - border-radius: var(--radius-md); - white-space: nowrap; - flex-shrink: 0; + .shell { + --shell-nav-width: 200px; } } @@ -49,6 +14,7 @@ .shell { --shell-pad: 8px; --shell-gap: 8px; + --shell-nav-width: 180px; } /* Topbar */ @@ -56,53 +22,56 @@ padding: 10px 12px; gap: 8px; flex-direction: row; - flex-wrap: wrap; + flex-wrap: nowrap; justify-content: space-between; align-items: center; } - .brand { - flex: 1; - min-width: 0; - } - - .brand-title { + .sidebar-brand__title { font-size: 14px; } - .brand-sub { + .dashboard-header__breadcrumb-link, + .dashboard-header__breadcrumb-sep { + display: none; + } + + .topbar-search { + min-width: 0; + max-width: none; + flex: 1; + } + + .topbar-search__label { + display: none; + } + + .topbar-search__kbd { + display: none; + } + + .topbar-connection__label { + display: none; + } + + .topbar-divider { display: none; } .topbar-status { gap: 6px; - width: auto; flex-wrap: nowrap; } - .topbar-status .pill { - padding: 4px 8px; - font-size: 11px; - gap: 4px; - } - - .topbar-status .pill .mono { - display: none; - } - - .topbar-status .pill span:nth-child(2) { - display: none; - } - /* Nav */ - .nav { + .sidebar-nav { padding: 8px 10px; gap: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } - .nav::-webkit-scrollbar { + .sidebar-nav::-webkit-scrollbar { display: none; } @@ -110,7 +79,7 @@ display: contents; } - .nav-label { + .nav-group__label { display: none; } @@ -122,14 +91,31 @@ flex-shrink: 0; } - /* Content */ + /* Content — compact header on chat, hide on other tabs */ .content-header { + height: 64px; + min-height: 64px; + padding: 12px 0; + /* This controls the height of the content header on mobile */ + max-height: 64px; + margin-top: 24px; + } + + .content:not(.content--chat) .content-header { + display: none; + } + + .content--chat .page-title { + font-size: 16px; + } + + .content--chat .page-sub { display: none; } .content { - padding: 4px 4px 16px; - gap: 12px; + padding: 4px 6px 12px; + gap: 10px; } /* Cards */ @@ -194,10 +180,14 @@ } /* Chat */ + .chat-agent-bar { + padding: 2px 6px; + } + .chat-header { flex-direction: column; align-items: stretch; - gap: 8px; + gap: 6px; } .chat-header__left { @@ -215,40 +205,60 @@ } .chat-thread { - margin-top: 8px; - padding: 12px 8px; + margin-top: 6px; + padding: 10px 6px; } .chat-msg { - max-width: 90%; + max-width: 92%; } .chat-bubble { - padding: 8px 12px; + padding: 6px 10px; border-radius: var(--radius-md); } .chat-compose { - gap: 8px; + gap: 6px; } .chat-compose__field textarea { - min-height: 60px; - padding: 8px 10px; + min-height: 52px; + padding: 6px 10px; border-radius: var(--radius-md); font-size: 14px; } + .agent-chat__input { + margin: 0 8px 10px; + } + + .agent-chat__toolbar { + padding: 4px 8px; + } + + .agent-chat__input-btn, + .agent-chat__toolbar .btn-ghost { + width: 28px; + height: 28px; + } + + .agent-chat__input-btn svg, + .agent-chat__toolbar .btn-ghost svg { + width: 14px; + height: 14px; + } + /* Log stream */ .log-stream { border-radius: var(--radius-md); - max-height: 380px; + max-height: 320px; } .log-row { grid-template-columns: 1fr; - gap: 4px; - padding: 8px; + gap: 2px; + padding: 6px; } .log-time { @@ -264,7 +274,15 @@ } .log-message { - font-size: 12px; + font-size: 11px; + word-break: break-word; + } + + .ov-log-tail-content { + max-height: 200px; + font-size: 10px; + padding: 8px; + line-height: 1.5; } /* Lists */ @@ -288,16 +306,10 @@ font-size: 11px; } - /* Theme toggle */ - .theme-toggle { - --theme-item: 24px; - --theme-gap: 2px; - --theme-pad: 3px; - } - - .theme-icon { - width: 12px; - height: 12px; + .theme-orb__trigger { + width: 26px; + height: 26px; + font-size: 13px; } } @@ -311,11 +323,11 @@ padding: 8px 10px; } - .brand-title { + .sidebar-brand__title { font-size: 13px; } - .nav { + .sidebar-nav { padding: 6px 8px; } @@ -356,19 +368,30 @@ font-size: 11px; } - .topbar-status .pill { + .topbar-connection { padding: 3px 6px; - font-size: 10px; } - .theme-toggle { - --theme-item: 22px; - --theme-gap: 2px; - --theme-pad: 2px; + .theme-orb__trigger { + width: 24px; + height: 24px; + font-size: 12px; } - .theme-icon { - width: 11px; - height: 11px; + .cron-status-strip { + gap: 10px; + padding: 8px 12px; + } + + .cron-status-strip__sep { + display: none; + } + + .cron-status-strip__value { + font-size: 13px; + } + + .cron-status-strip > .btn { + margin-left: 0; } }