e1e38419df* Studio: permission levels for chat tool calls (Ask, Approve for me, Off, Full access) Replace the Bypass permissions on/off toggle with a four level permission selector, available in Settings > General (new Permissions section above Notifications), the chat settings panel, the composer plus menu, and a new always visible composer pill. Levels: - Ask for approval: every local tool call pauses for allow/deny. - Approve for me: only calls detected as potentially unsafe pause; the python/terminal sandbox stays on. - Off: never pauses; sandbox stays on (previous default behavior). - Full access: never pauses and the sandbox is disabled. Still requires the danger confirmation and is never restored across reloads. Backend adds permission_mode to the OpenAI compatible and Anthropic passthrough payloads and threads it through both tool loops. Auto mode uses a fail closed classifier in tools.py: terminal commands must be on a read only allowlist with no redirection or substitution, python code is AST scanned for writes, exec, process and network use, MCP tools auto run only with read only style names. Unknown tools always ask. Legacy bypass_permissions and confirm_tool_calls keep their exact behavior for existing API callers. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Studio permissions: Off is a plain toggle below Full access Off moves to the bottom of the level menu with a short description and acts as the feature-off state: the composer pill is hidden entirely while Off, and reselecting the active level toggles back to Off. * Studio permissions: higher contrast composer pill text The permission pill uses a foreground based grey instead of the shared muted pill color, so it reads darker in light mode and lighter in dark mode. Full access keeps the danger yellow. * Studio permissions: panel dropdown layout and shorter tooltip Chat settings panel: the Bypass permissions label sits on one line with a full width dropdown underneath, styled like the other panel selects. Tooltip shortened and wording uses Unsloth instead of Studio. * Studio permissions: harden auto-mode unsafe detection Extend the Approve for me classifier to catch write and exec paths that slipped through: - terminal: sort -o, tree -o, xxd -r, find -exec/-execdir/-ok/-delete and find -fprint/-fprintf/-fls now ask; plain read-only forms still auto-run. awk is no longer allowlisted since its program can write and call system(). - python: from-imports of mutating names (from os import remove [as rm]) and star imports now ask. Found by a fuzz and edge-case simulation matrix; pinned in test_permission_mode.py. * Studio permissions: split multi-line terminal commands in auto detection A shell runs each line as its own command, but shlex reads newlines as whitespace, so "ls\nrm -rf x" demoted rm to argument position and auto-ran. Normalize newlines and CR to separators, and treat any all separator token as a command boundary so runs of blank lines still split. Found by the simulation matrix; pinned in tests. * Studio permissions: address review feedback on auto-mode detection Auto-mode (Approve for me) safety classifier hardening: - Python: flag any reference to a mutating attribute, not only direct calls, so indirect refs (f = os.remove; f(x)) and aliases ask. Detect Path.open(mode) write modes and wrap the AST walk to fail closed. - Terminal: match attached short output flags (sort -o/tmp/out) and keep find context across grouping parens so find ( -delete ) asks. - Both: ask before reads that escape the sandbox workdir via parent traversal or hit credential paths (.ssh, .aws, id_rsa, .pem, etc.). permission_mode plumbing: - Fold permission_mode=full into bypass_permissions at the request model so route-level confirm-gate guards see it as bypass. - Reject ask/auto on the Anthropic Messages server-tools path, which has no confirmation channel (mirrors the confirm_tool_calls rejection). - Keep forced RAG autoinject in auto mode: the safe search_knowledge_base retrieval never gates, so derive the skip from the real confirm need. - Reset all local preferences now also clears the legacy confirm key so a reset restores the fresh default instead of the old level. Regression tests added for each case. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Studio permissions: close auto-mode classifier gaps from review round 2 Auto mode ("Approve for me") let a few mutating calls through as safe: - os.open(...) always creates/writes a descriptor, so treat it as unsafe even though builtin open in read mode stays safe. - fd -x/--exec/-X/--exec-batch runs a command per match; scan for these alongside find's -exec/-delete. - tempfile writes artefacts and hands back writable handles, so importing it now asks. - Calling the result of a call (getattr(os, "remove")("x"), partials) is a dynamic target the AST can't vet, so fail closed. - An MCP tool whose name pairs a read verb with a mutating one (get_or_create_issue, read_and_delete_file) no longer auto-runs on the read prefix alone. Also fold permission_mode="off" into confirm_tool_calls=False on both request models so the non-stream route guard sees the disabled gate, and drive the Confirm tool calls toggle off permission_mode="ask" so auto no longer shows it on. * Harden auto-mode classifier and normalize bypass to full for PR #7079 Approve for me now asks for a few cases it previously auto-ran: - os.open via an os alias (import os as o; o.open(path, O_CREAT)) - pathlib symlink_to / hardlink_to / link_to - importlib.import_module dynamic imports - os.mkfifo / os.mknod / os.utime Also fold bypass_permissions into full when a stale ask/auto permission_mode is sent alongside it, so the Anthropic route guard no longer 400s those legacy callers. Adds classifier and request-model regression tests. * Close more auto-mode classifier gaps for PR #7079 Approve for me now asks for cases the review surfaced: - builtin open aliased to a name (f = open; from builtins import open as w) or looked up dynamically (globals()['open']) - pickle / marshal / shelve / dill deserialization - io.FileIO write handles - sort --compress-program (runs an external program) - MCP names carrying save/archive/submit/commit/push/sync/register verbs Also refine the attribute open() write check so an explicit read mode (ZipFile.open(name, "r")) stays auto while os.open flags still ask. Adds test coverage for each case. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Close three more auto-mode gaps for PR #7079 - rg runs an arbitrary program per file via --pre / --hostname-bin, so "Approve for me" now asks for those flags (rg is on the read-only allowlist). - A path-qualified command token (./ls, /tmp/cat) is an arbitrary executable, not the trusted utility its basename matches, so it asks before running. - A direct /chat/completions caller that sets permission_mode ask/auto but omits the legacy confirm_tool_calls flag now self-enables the confirmation gate, so tools can no longer run ungated on that path. Adds classifier and request-model tests for each case. * Close auto-mode classifier gaps from review round 3 for PR #7079 Approve for me now asks for cases the latest pass surfaced: - short-option clusters bundling a write flag (sort -uo out => -u -o) - procfs reads that leak a process env/args/memory (cat /proc/self/environ, /proc/PID/cmdline, maps) - env-assignment prefixes that change command lookup/loading (LD_PRELOAD=x ls, PATH=. ls, IFS=x ls); benign FOO=1 cmd stays auto - os.open imported as a bare callable (from os import open as o) Also drops ps from the safe terminal allowlist: its BSD environment flags (ps auxe, ps eww) dump a parent process's unscrubbed env and cannot be flag-parsed reliably, so ps always asks now. Adds classifier tests for each case. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Close auto-mode classifier gaps from review round 4 for PR #7079 Terminal (Approve for me now asks for these): - cd dropped from the safe allowlist: cd /; cat etc/passwd moves the shell out of the session workdir so a later relative read escapes it - env -C/--chdir (workdir escape) and -S/--split-string (builds a fresh command line); wrapper flags are now checked - /etc//passwd and /etc/./passwd normalize to /etc/passwd before the sensitive-path scan - a sensitive path split across an assignment and an argument (p=/etc; cat $p/passwd) via best-effort NAME=value expansion Python: - builtins.exec / builtins.eval attribute calls (dynamic code execution) - destructured open aliases (f, _ = (open, print); f('out', 'w')) - a sensitive path composed from literals (os.path.join('/etc','passwd'), '/etc' + '/passwd') - ZipFile/TarFile write modes (ZipFile(name, 'w')); the reader stays auto Adds classifier tests for each case. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Close auto-mode classifier gaps from review round 5 for PR #7079 Terminal (Approve for me now asks for these): - procfs reads hidden by shell quotes (cat /proc/$PPID/enviro''n) or quoted/nested-variable assignments (p="/proc/$PPID"; cat $p/environ): quotes are stripped and NAME=value prefixes expanded before the scan - LESSOPEN/LESSCLOSE, which make less run an input preprocessor command Python: - os.chdir / os.fchdir, which move the cwd so a later relative read escapes the sandbox workdir - sensitive paths composed via a pathlib / chain (Path('/etc') / 'passwd') or an f-string of literals (f'/proc/{pid}/environ') - runpy (import) and runpy.run_path / run_module, which run arbitrary code Adds classifier tests for each case. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Close auto-mode classifier gaps from review round 6 for PR #7079 Approve for me now asks for these: - a mutating callable reached through a getattr alias (rm = getattr(os, "remove"); rm("f")): calls through a getattr-bound name fail closed - compound MCP tool names carrying clone/checkout/comment/fork/tag/ invite/share, which start with a read verb but still mutate - a sensitive path hidden behind a glob (cat /e??/passwd, cat /e[t]c/passwd): a ? / * / [..] token is matched against the sensitive-file set and bracket classes are de-obfuscated; benign globs (ls *.py) stay auto Also run first-pass RAG retrieval in off mode: like auto, off never prompts, so a direct caller passing a stale confirm flag should not lose document retrieval (both tool loops). Adds classifier tests for each case. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Close auto-mode classifier gaps from review round 7 for PR #7079 Approve for me now asks for these: - __builtins__.exec / __builtins__.eval (dynamic code via the dunder) - terminal reads that hide a credential path behind a backslash escape (cat /et\c/passwd) - read-named MCP filesystem calls pointed at a credential path (mcp__fs__read_file {"path": "/etc/passwd"}) - compound MCP names carrying append / prepend - open aliased through a subscript or builtins attribute (f = globals()["open"]; f = builtins.open) then called to write - open(..., **{"mode": "w"}) where a kwargs splat hides the write mode - a sensitive path with a dynamic segment (open(f"/etc/{name}"), os.path.join("/etc", name)); /tmp/{name} stays auto - urllib3 networking Also stop folding permission_mode ask/auto into confirm_tool_calls for external-provider requests: that branch rejects confirm_tool_calls with tools, and the mode only governs local tool calls. Local requests still self-gate. Adds tests for each case. * Close auto-mode classifier gaps from review round 8 for PR #7079 Approve for me now asks for these: - dbm on the unsafe-module list: dbm.open(file, "c"/"n") creates files, and importing the family signals a persistence writer - reads of ~/.azure and ~/.config/gh credential stores (Azure/GitHub tokens), in terminal, MCP arguments, and Python literals - compound MCP names carrying upsert / assign Adds classifier tests for each case. * Gate secret mounts and fix the composer pill count for PR #7079 - Add Docker/Kubernetes secret mount dirs (/run/secrets, /var/run/secrets) to the sensitive-path checks, so Approve for me asks before reading injected credentials (terminal, MCP args, Python). - Count the always-visible permission pill in the composer's compact threshold so labels collapse at the intended width instead of overflowing by one pill. Adds classifier tests for the secret mount paths. * Close auto-mode classifier gaps from review round 10 for PR #7079 Approve for me now asks for these: - qualified pathlib constructors (pathlib.Path('/etc') / name), folded the same as bare Path(...), so a dynamic sensitive path is detected - open aliased through an annotated assignment (f: object = open; f('out', 'w')), tracked like a plain assignment - recursive searches rooted at an absolute path (grep -R TOKEN /home, rg TOKEN /, fd pattern /etc), which read host files outside the sandbox tree; sandbox-relative searches stay auto Adds classifier tests for each case. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Close auto-mode classifier gaps from review round 11 for PR #7079 Approve for me now asks for these terminal reads, which bash would expand into a sensitive path only after the classifier had approved: - a glob that resolves into a secret mount or credential dir (cat /r?n/secrets/hf_token, cat /root/.s??/id_rsa) - a recursive search rooted at a tilde home (grep -R TOKEN ~root, grep -R TOKEN ~/logs) - a brace expansion that builds a credential path (cat /etc/pass{w,}d) - a default/alternate parameter expansion that builds one (cat /etc/pass${x:-wd}) - an input redirection that hides a glob (cat </e??/passwd) And these python calls: - a str.format-built sensitive path (open('/etc/{}'.format('passwd'))) - writer methods that persist to disk without open() (numpy.save, Image.save, plt.savefig, DataFrame.to_csv, json.dump) Segment-wise directory matching keeps benign globs (ls /home/*/projects) auto. Adds regression tests for each case and its safe counterpart. * Close auto-mode classifier gaps from review round 12 for PR #7079 Approve for me now asks for these too: - a terminal read whose parent traversal hides behind a redirection with no following space (cat <../../notes) - a python read whose path is built with str.join (open(''.join(['/etc', '/passwd']))), told apart from os.path.join - a dynamic-code builtin reached through an alias (from builtins import eval as e; e(...); x = builtins.exec; x(...)) Adds regression tests for each case and its safe counterpart. * Close auto-mode classifier gaps from review round 13 for PR #7079 Approve for me now asks for these too: - a recursive search whose root is hidden behind an assignment (p=/; grep -R TOKEN $p): the recursive-root test now runs on the assignment-expanded tokens as well - a python read whose sensitive path is split through a literal variable (base = '/etc'; open(base + '/passwd')), including via an f-string - numpy ndarray.tofile, which persists without open() - a sequence brace read (cat /etc/pass{w..w}d), expanded alongside the comma brace form before the sensitive-path scan Adds regression tests for each case and its safe counterpart. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Close auto-mode classifier gaps from review round 14 for PR #7079 Approve for me now asks for these python reads that assemble a sensitive path in a form the fold did not yet recognize: - a pathlib object reused through a name (p = Path('/etc'); p / 'passwd') - old-style percent formatting ('%s/%s' % ('/etc', 'passwd')) - Path.joinpath ('/etc'.joinpath('passwd')) - a bytes path literal (open(b'/etc/passwd')) And these terminal reads, which bash expands into a sensitive path only after the classifier had approved: - a substring parameter expansion off an assignment (p=passwd; cat /etc/${p:0:6}) - an ANSI-C quoted path (cat $'/etc/pass\x77d') - a glob into an Azure or GitHub CLI config dir (cat /home/*/.az?re/..., cat /home/*/.config/g?/...) Adds regression tests for each case and its safe counterpart. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Close auto-mode classifier gaps from review round 15 for PR #7079 Approve for me now asks for these terminal reads, which bash expands into a sensitive path only after the classifier had approved: - a per-thread procfs env alias (cat /proc/$PPID/task/$PPID/environ) - a recursive root behind a default parameter (grep -R TOKEN ${root:-/home}) - a path built by pattern replacement (p=passXd; cat /etc/${p/X/w}) And these python reads: - a pathlib .parent/.parents chain that escapes the session workdir ((Path.cwd().parent / 'other' / 'notes').read_text()) - a sensitive path resolved through glob (glob.glob('/e??/passwd')[0]) Adds regression tests for each case and its safe counterpart. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Close auto-mode classifier gaps from review round 16 for PR #7079 Approve for me now asks for these terminal reads, which bash expands into a sensitive path only after the classifier had approved: - a case-modifying parameter expansion (p=PASSWD; cat /etc/${p,,}) - a mutating find action hidden behind an assignment (f=-delete; find . $f) - a glob assembled through an assignment (g=e??; cat /$g/passwd) - a POSIX bracket class glob (cat /etc/pass[[:lower:]]d) And these python reads/writes: - a glob pattern folded from a literal variable (base='/e??'; glob.glob(base + '/passwd')) - a directly imported os.path.join (from os.path import join; join('/etc', 'passwd')) - a directly imported writer (from numpy import save; save(...)) - an aliased pathlib constructor (from pathlib import Path as P; P('/etc') / 'passwd') The find/fd and glob scans now run on the assignment/parameter-expanded command, and pathlib/join/writer import aliases are tracked. Adds regression tests for each case and its safe counterpart. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Close auto-mode gaps from review round 17 for PR #7079 Two fixes: - Gate sqlite3 in auto mode. sqlite3.connect(path) creates or mutates a database file (and runs DDL/DML) with no open()/writer attribute for the AST checks to catch, so treat the module like dbm and ask. - Only self-enable confirm_tool_calls for Studio's own tool loop. The ask/auto fold previously set confirm on every non-provider request, including a plain client-tool passthrough (client-supplied tools that Studio does not execute), which then tripped the local-tool streaming-confirm route guard and rejected the passthrough. Restrict the fold to requests that actually ask Studio to run tools (enable_tools / enabled_tools / mcp_enabled). Adds regression tests for the sqlite3 write and for the passthrough vs tool-loop confirm behavior. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Close auto-mode gaps from review round 18 for PR #7079 Classifier (auto mode asks for these): - os.open through a module alias (import os as o; o.open(...)); os/posix aliases are tracked like the literal module name. - less/more pagers, whose escapes (+cmd, !shell, -o/--log-file, LESSOPEN) can run a command or write a file the command-name allowlist cannot see, so they are no longer auto-approved. - a read-named MCP tool carrying a mutating query (query_database {"query": "DELETE FROM runs"}); DML/DDL statements are matched as whole statements so a natural-language query that merely contains "delete" stays safe. - ML persistence helpers (save_pretrained / save_file / save_model / save_weights / save_lora / save_checkpoint) that export weights to disk. Route: - Honor CLI-forced tools when deriving the confirm gate. When a process policy (unsloth run --enable-tools) opens the local tool loop without a request-level tool signal, a permission_mode ask/auto request now derives confirm at the route (GGUF and safetensors paths) so the mode still gates the call, and a non-streaming ask/auto request is rejected rather than running unprompted. A plain client-tool passthrough (no local loop) is unaffected. Adds regression tests for each case and its safe counterpart. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Close auto-mode classifier gaps from review round 19 for PR #7079 Approve for me now asks for these too: - a terminal read whose path is built by indirect parameter expansion (x=passwd; p=x; cat /etc/${!p}) - a bash /dev/tcp or /dev/udp redirection, which opens a network socket (cat </dev/tcp/host/port) - a python read via pathlib's receiver-plus-pattern glob (Path('/etc').glob('passw?')) - a python read whose sensitive root passes through a normalizer (os.path.abspath('/etc'), Path('/etc').resolve()) - a pickle-backed loader that can execute code on load (torch.load, joblib.load, pandas.read_pickle), tracked through module import aliases - compiled code wrapped into a callable (compile(...) + types.FunctionType) Adds regression tests for each case and its safe counterpart. * Honor unset permission_mode as ask across the local tool loop for PR #7079 Three gaps where an omitted permission_mode did not behave as the documented default ("ask"): - The frontend only sent permission_mode / confirm_tool_calls / bypass_permissions when a tool pill was on. A process policy (unsloth run --enable-tools) can open the tool loop with no pill, so the backend never saw the selected gate. Send the three permission fields at the top level of every local chat payload instead. - The backend read payload.confirm_tool_calls directly at the pre-switch guard and both late per-backend derivations, so an unset mode fell through as no-gate even for an explicit ask/auto. Add _permission_mode_confirm(payload): explicit confirm_tool_calls wins, explicit ask/auto engage the gate, off/full never prompt, and an unset mode defaults to ask only where realizable (streaming), keeping the legacy no-gate run for non-streaming unset requests. - A forced ask/auto tool loop (CLI --enable-tools) with no stream now 400s at the pre-switch guard before evicting the resident model, matching the existing confirm-without-stream rejection. Adds test_permission_mode_confirm_derivation covering the derivation truth table. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Declare permission_mode and bypass_permissions on the local chat request type The previous change moved permission_mode, confirm_tool_calls and bypass_permissions to the top level of the local chat payload. They had lived inside a conditional spread, which is not subject to excess property checking, so the fields were never declared on OpenAIChatCompletionsRequest. At the top level tsc flagged permission_mode as unknown (TS2322), failing the frontend build and every job whose Studio install builds the frontend. Add permission_mode and bypass_permissions to the request interface (confirm_tool_calls was already present). * Close auto-mode classifier gaps from review round 21 for PR #7079 Auto mode ("Approve for me") now asks for these too: - a pathlib read built from a concrete constructor (PosixPath, WindowsPath and their Pure* forms), which the folder previously ignored so PosixPath('/etc') / 'passwd' lost its /etc root and ran unprompted - a terminal or python read of the ssh host keys under /etc/ssh, which the sensitive-path regex only covered for passwd/shadow/sudoers - a read whose path variable is reassigned: the whole-tree pre-scan kept the last binding, so base = '/etc'; open(base + '/passwd'); base = 'data' folded to data/passwd and ran even though execution reads /etc/passwd; any multiply-bound name now folds to the escape sentinel and asks Also stop the pre-switch guard from rejecting a plain client-tool passthrough. permission_mode only implies the confirm gate for Studio's own local tool loop (enable_tools / enabled_tools / mcp_enabled); a non-streaming client-tool passthrough that carries permission_mode ask/auto (confirm_tool_calls left unset by the validator) must forward to the provider branch. Only an explicit confirm_tool_calls=True still forces the local-confirm rejection there. Adds regression tests for each case and its safe counterpart. * Fix permission-pill compaction count and Full-access confirm sync for PR #7079 Two frontend consistency issues in the permission-level UI: - The composer collapses tool pills to icons above four, but the count left out the permission pill, which renders in every mode except off. With one optional pill also shown the row reached five pills without collapsing and could overflow. Count the pill when it is visible (permission_mode != off). - Entering Full access via setPermissionMode('full') or setBypassPermissions(true) left confirmToolCalls at its previous value, so a Full-access run (which sends confirm_tool_calls=false) could still report confirmations as enabled in response metadata. Set confirmToolCalls false at both entry points. * Close auto-mode classifier gaps from review round 23 for PR #7079 Auto mode ("Approve for me") now asks for these too: - a command using an abbreviated GNU long option that reaches a write/exec action (sort --out= for --output, env --ch= for --chdir, fd --base-dir= for --base-directory); a prefix of an unsafe long flag now fails closed - printf -v NAME, which assigns to a shell variable, so printf -v PATH %s .; ls can rewrite PATH and run ./ls unprompted - fd --base-directory / --search-path, which move the search root outside the session workdir without any positional slash token - an MCP tool whose compound read name carries a copy-style mutator (read_and_copy_file, get_and_snapshot_volume): copy, duplicate, import, export, download, backup, restore, snapshot, mirror Also treat an omitted permission_mode as its documented default ("ask") on the Anthropic Messages server-tool path. That branch has no confirmation channel and already rejects explicit ask/auto, so an omitted mode now falls into the same rejection instead of silently running server tools unprompted, unless the caller opted out with confirm_tool_calls=false (the legacy equivalent of "off"). off/full and that opt-out still run; the two routing tests that relied on the old implicit run now set permission_mode="off". Adds regression tests for each case and its safe counterpart. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Refine permission gating from review round 24 for PR #7079 Four fixes from the latest review: - Anthropic Messages server tools: an omitted permission_mode no longer rejects a request that only runs safe server tools (web_search), so existing Anthropic callers keep working. It still rejects an omitted mode when a local tool (terminal/python) is selected, and an explicit ask/auto is still rejected outright. off/full and a confirm_tool_calls=false opt-out always run. - Pre-switch confirm-without-stream guard: use _explicit_studio_tool_loop_requested (the same predicate the passthrough router uses) instead of the policy-inclusive _effective_enable_tools, so a process --enable-tools policy no longer turns a client-tool passthrough into a local-loop rejection. - Auto mode now asks for `uniq INPUT OUTPUT`: uniq writes its second file positional, so a second positional (numeric flag values skipped) is treated like `sort -o`. A lone `uniq file` or piped `... | uniq` stays safe. - MCP mutation check now strips SQL comments before matching, so DELETE/**/FROM and UPDATE/**/users (comment-as-whitespace) no longer slip past the DML/DDL denylist. Adds regression tests for each case and its safe counterpart. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Close auto-mode gaps from review round 25 for PR #7079 Auto mode ("Approve for me") now asks for these Python cases too: - a bare archive constructor with a write mode (from zipfile import ZipFile; ZipFile('out.zip', 'w')), tracked through import aliases like the zipfile.ZipFile attribute call already was - a dynamic lookup aliased through getattr (g = getattr; rm = g(os, 'remove'); rm('file')), not just direct getattr(...) calls - a callable that wraps open or a writer via functools.partial (w = partial(open, mode='w'); w('out.txt')), which hides the write mode Also: - Always-safe tools (render_html) stream their early provisional canvas card in auto mode again. The provisional-card guard mirrored the raw confirm flag, which suppressed the early card under Approve-for-me; it now reuses the auto-mode safety decision (is_always_safe_tool). - The assistant-ui composer no longer counts the permission pill toward its collapse threshold when the level is Off (the pill renders null there), matching the other composer. Adds regression tests for each case and its safe counterpart. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Align permission-mode confirm guards with the router (review round 26) Three pre-switch confirm-gate checks disagreed with how the tool loop actually enters, so a valid request could 400 (or an invalid one could evict the resident model) at the wrong point: - The /chat/completions pre-switch guard only looked at explicit request fields, so a process --enable-tools policy that forces the loop on (request omits enable_tools, no client tools) slipped past it and only 400ed after _maybe_auto_switch_model had swapped the model. It now mirrors the router's own loop-entry gate (_effective_enable_tools or mcp, tool_choice="none" disabling it unless explicitly asked) while still deferring to client-tool passthrough, so the policy-forced case is caught before the switch. - The ChatCompletionRequest full/off fold treated enabled_tools by itself as a local-loop request and set confirm_tool_calls=True. The router never starts the loop on enabled_tools alone (it only filters which tools run), so a non-streaming passthrough carrying client tools plus enabled_tools 400ed instead of routing verbatim. The fold now keys off the same enable_tools / mcp_enabled signals. - The Anthropic /v1/messages unsupported-mode rejection (ask/auto, or an omitted mode selecting terminal/python) ran inside the post-switch server-tools block, so an invalid request evicted the resident model before the 400. It now runs before the auto-switch, determined from the requested server tools, like the neighboring malformed- and mixed-tool guards. Adds regressions for each: a policy-forced non-streaming ask/auto guard rejection that never reaches the switch, an enabled_tools-only passthrough that keeps confirm unset, and an Anthropic rejection that precedes _maybe_auto_switch_model. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Close auto-mode classifier gaps from review round 27 for PR #7079 Auto mode ("Approve for me") now asks for these host-mutating or host-reading cases it previously ran unprompted (the sandbox does not jail filesystem reads, and terminal commands can change host state): - Destructured string literals fold into the scanned path now, so base, leaf = ('/etc', 'passwd'); open(base + '/' + leaf).read() resolves to /etc/passwd and asks, like the single-assignment form already did. The tuple/list unpacking branch tracked only aliases to open; it now also binds literal and folded-path elements. - pathlib name rewrites fold to the rewritten path: Path('/etc/x').with_name('passwd').read_text() (and with_stem / with_suffix) spell no literal /etc/passwd but resolve to it, so they are folded and caught. Benign in-sandbox rewrites stay safe. - hostname NAME (or -F/--file, -b/--boot) sets the hostname, so a positional or a set flag asks; bare hostname and the display flags (-f/-i/-I/...) stay read-only. - date -s/--set STRING and the bare MMDDhhmm... positional set the system clock and now ask; the display forms stay read-only (+FORMAT, -u/-R, and -d/-r/-f whose following value is skipped so date -d tomorrow is not mistaken for a clock-setting positional). Adds regression rows for each gap and its safe counterpart. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Close more auto-mode classifier gaps from review round 28 for PR #7079 Auto mode ("Approve for me") now asks for these cases too: - Mapping-style %-formatted paths. '/etc/%(f)s' % {'f': 'passwd'} folds to /etc/passwd and asks; a dynamic value or a non-literal mapping leaves the NUL marker so /etc/<dynamic> still fails closed. The path folder previously handled only tuple/scalar % right-hand sides and returned None for a dict, hiding the sensitive segment. - A read-named MCP database tool carrying PostgreSQL COPY. COPY ... FROM bulk-loads a table and COPY ... TO writes a server-side file, so both are matched as mutating queries like DELETE/UPDATE already were. A 'copy' substring in a column name stays safe (word boundary). - logging file handlers. logging.FileHandler('out.log', mode='w') (and the default append mode, RotatingFileHandler/TimedRotatingFileHandler/ WatchedFileHandler, and the bare from-import form) create or truncate a file like open(..., 'w'), so they are classified as writer calls. StreamHandler / NullHandler and logging reads stay safe. Adds regression rows for each gap and its safe counterpart. * Fix writer aliases, GraphQL mutations, and auto server tools (review round 29) - Auto-mode Python: an aliased writer or archive constructor is tracked like the existing open alias, so from numpy import save; s = save; s('out.npy', arr) (and z = ZipFile; z('a.zip', 'w'), incl. the destructured forms) ask instead of running the write unprompted. A benign builtin alias (x = len) stays safe. - Auto-mode MCP: a read-named tool carrying a GraphQL mutation now asks. query_graphql {"query": "mutation { deleteIssue(id: 1) }"} matches a leading mutation keyword (GraphQL uses # comments, so it scans the raw payload); GraphQL read queries stay safe. - Anthropic /v1/messages: permission_mode "auto" no longer 400s a safe-only server-tool selection. auto only needs a confirmation channel for an unsafe call, so like the omitted default it runs for web_search / RAG / render and rejects only when a gate-needing local terminal/python tool is selected. ask still always rejects (it asks per call, which this passthrough cannot honor). The rejection stays ahead of the model auto-switch. Adds regression rows/cases for each. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Gate asyncio spawn, net clients, default-captured open; allow safe-only auto (round 30) Auto-mode Python now asks for more process/network/write vectors: - asyncio process spawners (asyncio.create_subprocess_exec/shell and a loop's subprocess_exec/shell) run an arbitrary program without the terminal blocklist, so they gate like os.system/subprocess. - stdlib network clients imaplib / poplib / nntplib / xmlrpc(.client) / webbrowser open outbound connections the sandbox does not namespace off, so their import asks like the other network modules. - a callable captured as a function or lambda parameter default (def f(o=open): o('out', 'w')) now binds that parameter into the same alias set, so the later write through it is gated. A benign default (o=len) stays safe. Also, permission_mode "auto" no longer 400s a non-streaming local tool request whose selection is always-safe-only (web_search / RAG / render). auto only prompts for a classifier-flagged call, so a safe-only auto request needs no stream, while ask, an explicit confirm_tool_calls=true, MCP, and an unrestricted or unsafe selection still require it. Applied via a shared _confirm_gate_needs_stream helper at the pre-switch, GGUF, and safetensors confirm-stream guards; the loop's per-call confirm flag is unchanged. Adds regression rows/cases for each. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Catch brace-glob paths and attribute writer aliases; unfold auto (round 31) - Terminal auto mode now runs the glob-sensitive scan over every expansion candidate, so a brace-expanded glob (cat /e{t,}c/pass?d, which bash expands to /etc/pass?d and then globs to /etc/passwd) asks. Brace expansion alone spells no literal /etc/passwd and the glob only resolves once the brace group is expanded, so scanning both together is required. A benign brace + glob stays safe. - Python auto mode now tracks a mutating attribute captured as a plain name: s = np.save; s('out.npy', arr) binds a writer alias, a captured .open bound method (p = Path('out').open; p('w')) fails closed on any call since its mode position varies, and z = zipfile.ZipFile is gated like the bare import. A benign attribute alias (x = np.mean) stays safe. - permission_mode "auto" is no longer folded to confirm_tool_calls=true on the request model. Folding it defeated the safe-only-selection exception in _confirm_gate_needs_stream (an explicit confirm forces stream=true), so a non-streaming safe-only auto request was rejected. Leaving it unset lets the route apply the exception; the mode still drives the loop's per-call gate. "ask" still folds (it gates every call). Adds regression rows/cases for each. * Harden SQL/GraphQL/writer classification and passthrough guards (round 32) MCP argument mutation detection (read-named query tools): - CREATE DDL now matches modifiers and the broader object set, so CREATE OR REPLACE VIEW, CREATE UNIQUE INDEX, CREATE TEMP TABLE, CREATE MATERIALIZED VIEW and CREATE FUNCTION ask. - Stored-procedure invocation (CALL proc(...), EXEC/EXECUTE) and VACUUM ask; a natural-language "call me back" stays safe via the trailing "(" / ";" / end lookahead. - GraphQL # comments are stripped before the mutation match, so mutation # note\n { deleteIssue(id: 1) } no longer hides the mutation. Python auto-mode classification: - numpy.memmap / open_memmap and pandas ExcelWriter / HDFStore create or truncate a file on construction, so they gate like open(..., "w"). - asyncio networking (asyncio.open_connection, loop.create_connection / create_server and unix variants) opens outbound connections/listeners the sandbox does not isolate, so it gates like socket.connect. Terminal auto-mode: file -C / --compile writes a compiled magic database. Routing: - A JSON-schema response_format is guided-decoding passthrough, not a local tool loop, so a --enable-tools policy no longer 400s a non-streaming ask/auto structured-output request at the confirm guard. - An explicit confirm_tool_calls=False opts out of the Anthropic Messages server-tool gate entirely (it wins over the mode, mirroring _permission_mode_confirm and the GGUF path), so it runs even under ask. Adds regression rows/cases for each. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Track path-ctor aliases, exempt empty selection and safe safetensors card (round 33) - Python auto mode now propagates path constructor / join aliases, so assigning Path or os.path.join to another local name is still folded: P = Path; (P('/etc') / 'passwd').read_text() and j = os.path.join; open(j('/etc', 'passwd')) ask, while a benign /tmp alias stays safe. - _confirm_gate_needs_stream now distinguishes an omitted enabled_tools (None, all tools) from an explicit empty list ([], no tools). An empty selection runs no built-in tool and cannot prompt, so a non-streaming auto request with enable_tools=true, enabled_tools=[] is no longer 400ed under a --enable-tools policy. - The safetensors provisional render_html card now uses permission_mode: render_html is always safe and never prompts, so its early canvas card streams under auto (which ships confirm_tool_calls=true) instead of being suppressed, matching the GGUF path's is_always_safe_tool exemption. Adds regression rows/cases for each. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Extend auto-mode classifier: SQLite mutations, more net/xattr/compressed writers Additional fail-closed gaps found by a fresh adversarial pass, each with a reproduction and a benign control: - MCP read-named tools now ask on SQLite-flavored writes the base DML/DDL regex missed: ATTACH / DETACH DATABASE, a write-form PRAGMA (PRAGMA journal_mode=WAL / user_version=42 / foreign_keys(0), while the read-form PRAGMA journal_mode stays safe), and load_extension() which loads and runs an arbitrary shared library. - Python auto mode now gates the remaining asyncio network entry points (start_server, open_unix_connection, loop.create_datagram_endpoint, sock_connect), os.setxattr / os.removexattr metadata writes, the gzip / bz2 / lzma single-stream writers (GzipFile / BZ2File / LZMAFile, mode-gated like ZipFile so a read stays safe), pandas to_xml, and the websockets client. Benign controls (SELECT 1, read-form PRAGMA, asyncio.sleep, gzip read, numpy read, natural-language "attach"/"analyze") stay safe. Regression rows added to test_permission_mode.py. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Close follow-up auto-mode gaps: SQLite/GraphQL variants, more writers and net A fresh adversarial pass on the previous round found consistent extensions of the same fail-closed rules, each reproduced with a benign control: - MCP read-named tools: DROP / ALTER now cover the same broad object set as CREATE (DROP FUNCTION, ALTER INDEX, DROP MATERIALIZED VIEW); ATTACH is caught without the optional DATABASE keyword via its quoted-path form; a schema-qualified write PRAGMA (PRAGMA main.user_version=1) is matched; and a GraphQL mutation carrying directives (mutation M @audit { ... }) is treated as a mutation. - Python auto mode: os.startfile (Windows program launch), asyncio start_unix_server, and the socketserver framework now ask; a gzip/bz2/lzma open imported under an alias (from gzip import open as gopen) is gated like builtin open; and a dynamic path prefix that can form a sensitive absolute root (open(chr(47) + "etc/passwd"), open(os.sep + "etc/passwd")) is treated as sensitive, while a dynamic prefix with a benign suffix stays safe. Benign controls (read-form PRAGMA, natural-language "attach ... as", "drop the idea", SELECT dropped_at, query @cached, gzip read alias, dynamic prefix + data/file suffix) stay safe. Regression rows added to test_permission_mode.py. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Gate GNU time -o, basicConfig/methodcaller/fileinput, and more SQL mutations Another adversarial pass surfaced further consistent fail-closed gaps, each reproduced with a benign control: - Terminal: GNU time -o/--output/-a/--append truncate or append to a file with timing output; time is a wrapper, so the flag is checked before the wrapped command like env -C. - Python auto mode: logging.basicConfig(filename=...) opens a log file for write; operator.methodcaller("write_text"/...) hides a writer method behind a string and is now treated as dynamic dispatch (like getattr/partial); fileinput.input(..., inplace=True) rewrites a file in place (the default read form stays safe). - MCP read-named tools: UPDATE now matches quoted, bracketed, and schema-qualified targets (UPDATE "users" / public.users / ONLY public.users / [users] / `users` SET); SELECT ... INTO OUTFILE/DUMPFILE writes a server file; and state-changing SQL functions inside a SELECT (pg_terminate_backend, setval, pg_write_file, lo_export, ...) ask. Benign controls (time ls / time -p, basicConfig(level=), methodcaller("upper"), fileinput read, NL "update ... set", setval_col column, PL/pgSQL SELECT INTO var) stay safe. Regression rows added to test_permission_mode.py. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Tighten auto-mode classifier comments Collapse the multi-line rationale blocks in the permission classifier to one or two lines each without dropping the exploit each branch closes. Comments and whitespace only (no code change); the classifier tests are unchanged and pass. * Retry transient SSE stalls in the tool-calling smoke probes The tool-calling job flaked with a bare "TimeoutError: timed out": the server-side python/bash probes stream over post_sse(), which (unlike post()) had no transport-level retry, so a single stalled stream on a shared CI runner hard-failed the whole step even though function calling had already passed. post_sse() now mirrors post(): a transport-level stall (stream open or a mid-stream read timing out) is retried once with a fresh request capped at 300s, while HTTP status errors still surface immediately. The Linux _run_tool_probe caps each attempt at 360s and treats a stall that outlives the retry as a failed attempt (rotate to the next seed) instead of raising, and the web_search probe uses the same 360s cap. A genuine server wedge still fails (the retry also times out), so real regressions are not masked. Applied to the Linux, macOS, and Windows inference-smoke workflows, which share the probe. * Close five more auto-mode classifier gaps from review Each reproduces with a benign control: - Path constructor aliased through an attribute (P = pathlib.Path) now folds like the bare-name alias, so (P('/etc') / 'passwd').read_text() asks while a /tmp alias stays safe. - Callable defaults that are not plain names now bind the parameter: an attribute writer (def f(s=np.save)), an archive constructor, a captured .open, and partial(open, mode='w') fold like the equivalent assignment; a benign default (np.mean) does not. - A dynamic piece inside a sensitive name (open('/et' + chr(99) + '/passwd'), which folds to '/et\x00/passwd') now asks: the literals around each dynamic segment are matched against a credential target with the segment as any run of non-separator chars, so an all-dynamic ('1 + 1') or segment-spanning (a + '/' + b) path stays safe. - MCP read-named tools now ask on REFRESH MATERIALIZED VIEW and REINDEX; a 'refresh' column or natural-language 'refresh' stays safe. - A writer/open alias handed to a higher-order invoker (map(open, names, modes), starmap(np.save, ...)) is gated even without a direct call site; a benign map(len, ...) is unaffected. Regression rows added to test_permission_mode.py. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Default tool pills off on model load so tool execution is opt-in resolveToolsEnabledOnLoad turned the web-search and code pills on for any tool-capable model when the user had expressed no preference. Default them off instead, so tool execution is enabled only when the person clicks the pill to turn it on; a saved preference (on or off) is still honoured, so a user who already enabled tools keeps them on. * Gate mark/subscribe MCP verbs and qualified higher-order writer invokers - A read-prefixed MCP tool name carrying mark / subscribe / unsubscribe (get_and_mark_read, get_and_subscribe) now asks; a 'mark' substring inside one token (list_bookmarks) stays safe. - The higher-order writer check now also fires for a qualified invoker (itertools.starmap(open, ...), functools.reduce(open, ...)), matching the bare-name map/filter form; the writer-check on the first arg keeps a benign itertools.starmap(len, ...) or itertools.chain(...) safe. Regression rows added to test_permission_mode.py. * Close more auto-mode gaps and align the ask confirm fold across paths Each classifier change reproduces with a benign control: - MCP read-named tools now ask on reply / notify verbs (get_and_reply_email, list_and_notify_users), on catalog writes COMMENT ON / SECURITY LABEL / LOCK TABLE and CREATE|DROP|ALTER POLICY, and on state-changing PostgreSQL functions inside a read-shaped SELECT (nextval, set_config, pg_notify, the advisory-lock family). A 'comment' column, a 'locks' table, and a 'nextval' column prefix stay safe; the natural-language NOTIFY/SET ROLE statement forms are left out because SET/NOTIFY overlap ordinary prose. - Python auto mode now gates loader.exec_module (runs a module's code), archive extractall (zip-slip file writes), the ensurepip / venv modules (install pip / build an environment), and pydoc.writedoc. The Hugging Face login token (~/.cache/huggingface/token and stored_tokens) is now a sensitive path, while the rest of that cache (model data) stays readable. - ChatCompletionRequest no longer overwrites an explicit confirm_tool_calls=false when permission_mode='ask': the fold only self-enables the gate when the flag is unset, so an explicit opt-out wins on the chat path exactly as it already does via _permission_mode_confirm and the Anthropic pre-switch guard. Regression rows added to test_permission_mode.py. * Gate sort -T, xxd outfile positional, and the legacy HF token path - sort -T / --temporary-directory writes spill files to a caller-chosen dir, so it joins -o / --output in sort's unsafe-flag set. - xxd [infile [outfile]] writes its second positional, like uniq; xxd now uses the same second-positional-write handling (xxd in.bin out.hex asks, xxd in.bin and xxd -c 16 in.bin stay read-only). - The sensitive-path regex now also covers the legacy ~/.huggingface/token location (optional leading dot), not just ~/.cache/huggingface/token; an unrelated dir like myhuggingface/token stays safe. Regression rows added to test_permission_mode.py. * Catch multi-char SQL mutation targets, globbed credential names, digit outfiles Three fail-open gaps in the auto-mode classifier, each with a benign control: - SQL: the trailing word boundary on the MCP mutation regex meant a bare \w stopped at the first character, so TRUNCATE users, GRANT SELECT ON t, and REVOKE ALL ON t (multi-character names) slipped through while single-letter targets matched. Match the whole identifier instead, and accept an explicit AS alias on UPDATE (UPDATE users AS u SET). The implicit-alias form is left out because it is indistinguishable from the prose "update <noun> <noun> set". A truncate_log column and a grants table stay safe. - A glob that resolves to a credential basename anywhere (cat ~/.huggingface/tok?n -> token, cat proj/.netr? -> .netrc, cat repo/.aws/cred*) now asks; the fixed target list only covered a handful of home paths. notes/dra?t.txt and token_counts.tx? stay safe. - uniq / xxd counted file positionals but skipped every numeric token to ignore a flag value, so a file literally named with digits (uniq 123 out) hid the output positional. Track each command's value-taking flags and consume only the value, so uniq -f 2 in stays safe while uniq 123 out asks. Regression rows added to test_permission_mode.py. * Isolate the permission-mode loop tests from process-global state The loop-driving tests (auto/off/full/bypass) drove run_safetensors_tool_loop against a process-global approval registry (state.tool_approvals._pending) keyed by a single shared session id, and read os.environ. Other backend test modules mutate both, some at import time, so in the full-suite ordering a stale pending approval or a leaked env var could make the loop deny or skip a call these tests expect to run. It passed when the file ran alone but failed only in the complete tests/ run on CI. Add an autouse fixture that snapshots and restores os.environ and the approval registry around each test, and give every _drive call a unique session id so a leaked approval can never collide. Attach a compact event-stream dump to the loop assertions so any residual full-suite-only failure reports what the loop actually did instead of a bare diff. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Studio: harden auto-mode classifier for recursive listers, sort file lists, aliased invokers, single-member extract Close four fail-open gaps in is_potentially_unsafe_tool_call: - terminal: tree/du (always recursive) and ls -R rooted at an absolute or tilde path now ask, matching the existing grep/rg/find recursive-read gate; relative walks stay safe. - terminal: sort --files0-from=F reads the file list named in F, so it can read arbitrary host files indirectly; added to sort's unsafe flags. - python: track aliases of the higher-order invokers (m = map; from itertools import starmap as sm) so an aliased invoker handed open/a writer is still gated; a benign callable (map(len, ...)) stays safe. - python: single-member archive extract (ZipFile/TarFile.extract) writes to disk like extractall and is vulnerable to a crafted member path, so gate it. Also update the stale _FakeExecuteTool in test_permission_mode.py to accept the thread_id keyword that run_safetensors_tool_loop now forwards to execute_tool after the main merge, which had broken the five tool-loop tests. Adds regression rows covering each gap plus benign controls. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Studio: normalize unknown permission_mode to 'ask' instead of a 422 The request models validated permission_mode with Literal[ask, auto, off, full], so an unrecognized value from a newer UI/client was rejected with a 422 before the tool loops could apply their unknown -> ask fallback (safetensors_agentic.py:464, llama_cpp.py:9001). That made the intended forward-compat degradation unreachable at the API boundary for both Chat Completions and the analogous Anthropic field. Accept a plain string on both ChatCompletionRequest and AnthropicMessagesRequest and normalize in a before-validator: None stays unset, the four known modes pass through, and any other value degrades to the safest gate ('ask'), matching the loops. Adds a regression test covering unknown/None/known across both models. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Studio: close five more auto-mode classifier gaps - terminal: xargs is no longer a safe wrapper. It appends arguments read from stdin that the scan never sees, so `echo -o out /etc/passwd | xargs sort` forwards to `sort -o out /etc/passwd` (a write + sensitive read) while only the allow-listed literals are visible. Any xargs command now asks. - terminal: ionice -p/-P/-u change the I/O priority of an already running process / group / user instead of forwarding to a wrapped read-only command, so `ionice -c 3 -p <pid>` now asks. ionice -c 3 <cmd> stays safe. - MCP: gate ALTER SYSTEM, which persists PostgreSQL server configuration and was not one of the DDL objects the mutation detector matched. - MCP: a credential noun in a read-named tool (read_secret, list_tokens, get_credentials, fetch_api_key) is a sensitive disclosure, so it asks even without a mutating verb or a path/SQL argument. Scoped *_key nouns keep a primary_key / keyboard lookup safe. - render_html: no longer unconditionally safe. A static canvas still auto-runs, but one whose HTML/JS reaches the network (fetch/WebSocket/remote script) asks, since it can egress under the canvas CSP when artifact network access is on. Its early provisional card is suppressed under the auto confirm gate, and the confirm-without-stream guard now requires a stream when render_html is selectable. Adds regression rows and benign controls for each, and updates the render_html provisional-card and confirm-gate tests to the new behavior. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Studio: extend auto-mode gates for indirect file lists, dynamic lookups, HTML network loads, and Anthropic render_html Follow-ups on the previous classifier round: - terminal: wc/du/find --files0-from (and find's -files0-from primary) read a NUL-separated list of input paths from a file, the same indirect mechanism as sort --files0-from, so a crafted list reads arbitrary host files past the literal path/root checks. Gate them like sort. - python: a namespace lookup through a dict-style call (f = __builtins__.__dict__.get('open'), globals().get('open'), vars(x).get(...)) can return open/eval/a mutator, so poison the bound name like getattr/subscript lookups already are. An ordinary dict .get or os.environ.get stays safe. - render_html: broaden the network detector so a canvas that loads a resource via CSS url()/@import, srcset, or a root-relative (/path) or protocol-relative (//host) src/href is treated as networked, not just fetch/WebSocket/remote script. Relative ./x and url(#id)/data: refs stay static/safe. - Anthropic /v1/messages: drop render_html from the unprompted-safe server-tool set. Since it can prompt (networked canvas) and this channel invokes the loop without confirm, selecting it under ask/auto/omitted now rejects like terminal/python; off/full (or an explicit confirm opt-out) run it. Adds regression rows and benign controls for each, plus an Anthropic route test. * Studio: close six more auto-mode classifier gaps - terminal: a glob that expands to a project .env (cat .e?v) now asks; .env joins the sensitive glob-basename set, matching the literal-path gate. - python: an open bound onto an attribute (box.f = open; box.f('out','w')) is tracked by attribute name, and open invoked via .__call__ (open.__call__('out','w'), unwrapped to the underlying callable) is gated, so neither slips past the name-based open-alias checks. Benign attribute callables and .__call__ on non-writers stay safe. - python: a namespace lookup via .get/.pop/.setdefault already covered the builtins case; unchanged here. - MCP: a mutating HTTP verb in a method/verb argument (get_url {"method": "DELETE"|"POST"|"PUT"|"PATCH"}) now asks, so a generic HTTP tool cannot mutate an external service unprompted; GET/HEAD stay safe. - MCP: a credential/secret environment-variable value (get_env {"name": "OPENAI_API_KEY"}) is treated as a sensitive read via the same credential-noun match used for tool names; PATH/HOME stay safe. - render_html: self-navigation sinks (location.assign/replace, window.open, assigning a URL to (window.)location(.href)) join the network detector, so a canvas that navigates itself to an external URL asks; location.reload() / history.back() stay static. Adds regression rows and benign controls for each. * Studio: gate obfuscated canvas egress, sensitive-dir iteration, and MCP metadata-host reads - render_html: strip block comments before the network scan so fetch/*x*/(...) cannot hide egress, and match bracket-access forms (window['fetch'](...), self['open'](...)). Line // comments are left alone so the // in an https URL is not eaten. A comment-only canvas stays static. - python: enumerating a directory outside the sandbox (Path('/etc').iterdir(), os.scandir('/etc'), os.listdir('/home'), os.walk('/')) reads host filenames the direct /etc/passwd checks would prompt for, so gate it when the target dir folds to an absolute/tilde/sensitive path; a relative dir stays safe and an unresolved dynamic dir is left to other checks. - MCP: a read-named HTTP tool pointed at a cloud-metadata / link-local host (fetch_url {"url": "http://169.254.169.254/..."}, metadata.google.internal) reads instance credentials, so classify those URL arguments as sensitive, mirroring the sandbox SSRF blocklist; ordinary and localhost URLs stay safe. Adds regression rows and benign controls for each. * Studio: gate meta-refresh navigation, pandas HTML/markdown exporters, absolute glob roots, and checksum verify mode * Studio: gate starred open writes, builtins.__import__, computed render_html sinks, and procfs fd reads in auto mode * Studio: gate remote worker canvases, huggingface_hub downloads, and write callables passed to user helpers in auto mode * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Unsloth <michaelhan@Michaels-MacBook-Pro.local> Co-authored-by: Daniel Han <danielhanchen@gmail.com>
2676 lines
91 KiB
CSS
2676 lines
91 KiB
CSS
/* SPDX-License-Identifier: AGPL-3.0-only */
|
||
/* Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0 */
|
||
|
||
@import "tailwindcss";
|
||
@import "tw-animate-css";
|
||
@import "shadcn/tailwind.css";
|
||
@import "streamdown/styles.css";
|
||
@import "./features/hub/hub.css";
|
||
@import "@fontsource-variable/figtree";
|
||
@import "@fontsource-variable/space-grotesk";
|
||
@import "@fontsource-variable/inter";
|
||
@import "tw-shimmer";
|
||
@plugin "@toolwind/corner-shape";
|
||
@source "../node_modules/streamdown/dist/*.js";
|
||
|
||
@custom-variant dark (&:is(.dark *));
|
||
|
||
@layer components {
|
||
/* Sidebar scroll area (Gemini-style). The BOTTOM edge always fades so the
|
||
last rows dissolve into the profile footer (no divider line). Once
|
||
scrolled, the TOP edge also fades so rows dissolve as they pass under the
|
||
pinned New Chat / Search header. */
|
||
/* Top edge: when scrolled, rows dissolve as they pass under the pinned
|
||
New Chat / Search header (mask — fades content to transparent). */
|
||
.sidebar-scroll-fade.is-scrolled {
|
||
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
|
||
mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
|
||
}
|
||
/* Bottom edge: Gemini-style sticky gradient OVERLAY painted in the sidebar
|
||
background colour, so the last rows wash into the profile footer. Uses a
|
||
zero-height sticky anchor with an absolutely-positioned gradient so it
|
||
never takes layout space. */
|
||
.sidebar-bottom-fade {
|
||
position: sticky;
|
||
bottom: 0;
|
||
height: 0;
|
||
z-index: 1;
|
||
pointer-events: none;
|
||
}
|
||
.sidebar-bottom-fade::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset-inline: 0;
|
||
bottom: 0;
|
||
height: 40px;
|
||
/* Fade to sidebar colour at 0 alpha, not `transparent` (transparent
|
||
black), which shows a grey midtone in Safari 27 Liquid Glass. */
|
||
background: linear-gradient(
|
||
to top,
|
||
var(--sidebar),
|
||
rgb(from var(--sidebar) r g b / 0)
|
||
);
|
||
}
|
||
/* Model picker list: once scrolled, the top edge fades so rows dissolve as
|
||
they pass under the pinned search / tab bar. */
|
||
.model-list-scroll.is-scrolled {
|
||
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
|
||
mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
|
||
}
|
||
/* Bottom edge fades while more rows sit below the fold. */
|
||
.model-list-scroll.is-bottom-faded {
|
||
-webkit-mask-image: linear-gradient(
|
||
to bottom,
|
||
#000 calc(100% - 16px),
|
||
transparent
|
||
);
|
||
mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
|
||
}
|
||
/* Both edges fade when scrolled with rows above and below. */
|
||
.model-list-scroll.is-scrolled.is-bottom-faded {
|
||
-webkit-mask-image: linear-gradient(
|
||
to bottom,
|
||
transparent 0,
|
||
#000 14px,
|
||
#000 calc(100% - 16px),
|
||
transparent
|
||
);
|
||
mask-image: linear-gradient(
|
||
to bottom,
|
||
transparent 0,
|
||
#000 14px,
|
||
#000 calc(100% - 16px),
|
||
transparent
|
||
);
|
||
}
|
||
/* RAG chip strip: sidebar-style bottom fade while more chips sit below
|
||
the scroll fold (JS-toggled). */
|
||
.rag-docs-bottom-fade {
|
||
-webkit-mask-image: linear-gradient(
|
||
to bottom,
|
||
#000 calc(100% - 16px),
|
||
transparent
|
||
);
|
||
mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
|
||
}
|
||
|
||
/* Edge fades off (Appearance setting): every dissolve above becomes a
|
||
thin divider line at the same boundary. */
|
||
html.no-edge-fades .sidebar-scroll-fade.is-scrolled,
|
||
html.no-edge-fades .model-list-scroll.is-scrolled,
|
||
html.no-edge-fades .model-list-scroll.is-bottom-faded,
|
||
html.no-edge-fades .model-list-scroll.is-scrolled.is-bottom-faded,
|
||
html.no-edge-fades .rag-docs-bottom-fade {
|
||
-webkit-mask-image: none;
|
||
mask-image: none;
|
||
}
|
||
html.no-edge-fades .sidebar-scroll-fade.is-scrolled {
|
||
border-top: 1px solid var(--sidebar-border);
|
||
}
|
||
html.no-edge-fades .sidebar-bottom-fade::after {
|
||
height: 1px;
|
||
background: var(--sidebar-border);
|
||
}
|
||
html.no-edge-fades .model-list-scroll.is-scrolled {
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
html.no-edge-fades .model-list-scroll.is-bottom-faded {
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
html.no-edge-fades .rag-docs-bottom-fade {
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
/* Chat thread: gradient wash above the composer becomes a hairline at
|
||
its top edge; the chat header's under-fade becomes a hairline too.
|
||
!important beats the Tailwind gradient/mask utilities on the nodes. */
|
||
html.no-edge-fades .thread-bottom-fade {
|
||
background: none !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-mask-image: none !important;
|
||
mask-image: none !important;
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
html.no-edge-fades .chat-header-fade {
|
||
background: none !important;
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
}
|
||
|
||
@layer base {
|
||
h1,
|
||
h2,
|
||
h3,
|
||
[data-slot="dialog-title"],
|
||
[data-slot="alert-dialog-title"] {
|
||
/* Via the token so the heading-font setting applies here too. */
|
||
font-family: var(--font-heading) !important;
|
||
font-weight: 500 !important;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
@font-face {
|
||
font-family: "Hellix";
|
||
src: url("/fonts/Hellix-Regular.woff") format("woff");
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: "Hellix";
|
||
src: url("/fonts/Hellix-Medium.woff") format("woff");
|
||
font-weight: 500;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: "Hellix";
|
||
src: url("/fonts/Hellix-SemiBold.woff2") format("woff2"),
|
||
url("/fonts/Hellix-SemiBold.woff") format("woff");
|
||
font-weight: 600;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: "Fira Code";
|
||
src: url("/fonts/FiraCode-VariableFont_wght.ttf") format("truetype-variations");
|
||
font-weight: 300 700;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
:root {
|
||
/* Animation timing */
|
||
--duration-micro: 100ms;
|
||
--duration-fast: 150ms;
|
||
--duration-normal: 200ms;
|
||
|
||
/* Easing curves (Emil Kowalski) */
|
||
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
|
||
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||
|
||
/* Slightly warm off white; every page (and the chat surface) shares it. */
|
||
--background: #fefefd;
|
||
--foreground: oklch(0.2686 0 0);
|
||
--card: oklch(1 0 0);
|
||
--card-foreground: oklch(0.1281 0.0179 169.2764);
|
||
--popover: oklch(1 0 0);
|
||
--popover-foreground: oklch(0.1281 0.0179 169.2764);
|
||
--primary: #17b88b;
|
||
--primary-foreground: oklch(1 0 0);
|
||
--secondary: oklch(0.9596 0.0275 167.8295);
|
||
--secondary-foreground: oklch(0.2868 0.0649 159.9823);
|
||
--muted: oklch(0.9702 0 0);
|
||
--muted-foreground: oklch(0.5486 0 0);
|
||
/* Hover/active washes are neutral grey (matches the sidebar), not the
|
||
brand green; green stays on primary controls only. */
|
||
--accent: #ececec;
|
||
--accent-foreground: #262626;
|
||
--destructive: oklch(0.6368 0.2078 25.3313);
|
||
/* Bypass permissions accent: bright, saturated yellow (not dark gold). */
|
||
--bypass: #c99d00;
|
||
--border: oklch(0.9208 0.0101 164.8536);
|
||
--input: oklch(0.9208 0.0101 164.8536);
|
||
--ring: #262626;
|
||
/* Focus and selection indicators: the element's own border, darker.
|
||
Derived from the live border/foreground tokens so every palette and
|
||
mode gets the right shade from these definitions. Focus/hover uses the
|
||
soft shade; selected state uses the deeper one (still never black). */
|
||
--ring-soft: color-mix(in srgb, var(--foreground) 22%, var(--border));
|
||
--ring-select: color-mix(in srgb, var(--foreground) 48%, var(--border));
|
||
--chart-1: #17b88b;
|
||
--chart-2: oklch(0.694 0.1395 136.6059);
|
||
--chart-3: oklch(0.7014 0.1193 197.5897);
|
||
--chart-4: oklch(0.6926 0.1112 346.5775);
|
||
--chart-5: oklch(0.7497 0.1003 85.0057);
|
||
--radius: 1.1rem;
|
||
/* White sidebar against the warm off-white page; the tone difference is
|
||
the separator now that the right-edge divider is gone. */
|
||
--sidebar: #ffffff;
|
||
--sidebar-foreground: oklch(0.1281 0.0179 169.2764);
|
||
--sidebar-primary: #17b88b;
|
||
--sidebar-primary-foreground: oklch(1 0 0);
|
||
--sidebar-accent: #ececec;
|
||
--sidebar-accent-foreground: #262626;
|
||
--sidebar-border: #f2f2f2;
|
||
--sidebar-ring: #262626;
|
||
--destructive-foreground: oklch(1 0 0);
|
||
--font-sans: "Inter Variable", ui-sans-serif, sans-serif, system-ui;
|
||
--font-heading: "Hellix", "Space Grotesk Variable", var(--font-sans);
|
||
--font-serif: Source Serif 4, serif;
|
||
--font-mono: JetBrains Mono, monospace;
|
||
--shadow-color: hsl(0 0% 0%);
|
||
--shadow-opacity: 0;
|
||
--shadow-blur: 0px;
|
||
--shadow-spread: 0px;
|
||
--shadow-offset-x: 0px;
|
||
--shadow-offset-y: 0px;
|
||
--letter-spacing: 0em;
|
||
--spacing: 0.25rem;
|
||
/*--shadow-2xs: 0px 0px 0px 0px hsl(0 0% 0% / 0);*/
|
||
/*--shadow-xs: 0px 0px 0px 0px hsl(0 0% 0% / 0);*/
|
||
/*--shadow-sm:*/
|
||
/* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/
|
||
/* 0px 1px 2px 0px hsl(0 0% 0% / 0);*/
|
||
/*--shadow:*/
|
||
/* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/
|
||
/* 0px 1px 2px 0px hsl(0 0% 0% / 0);*/
|
||
/*--shadow-md:*/
|
||
/* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/
|
||
/* 0px 2px 4px 0px hsl(0 0% 0% / 0);*/
|
||
/*--shadow-lg:*/
|
||
/* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/
|
||
/* 0px 4px 6px 0px hsl(0 0% 0% / 0);*/
|
||
/*--shadow-xl:*/
|
||
/* 0px 0px 0px 0px hsl(0 0% 0% / 0),*/
|
||
/* 0px 8px 10px 0px hsl(0 0% 0% / 0);*/
|
||
/*--shadow-2xl: 0px 0px 0px 0px hsl(0 0% 0% / 0);*/
|
||
--tracking-normal: 0em;
|
||
|
||
/* Hex (not OKLCH) so the rendered surface matches the design mockup pixel-for-pixel. */
|
||
--nav-fg: #383835;
|
||
--nav-fg-muted: #858279;
|
||
--nav-surface-hover: #f0f0f0;
|
||
--nav-icon-idle: #8f8f8f;
|
||
--nav-beta-border: #e0ded6;
|
||
--panel-surface-hover: #ebebeb;
|
||
/* Right-side chat-parameters panel: matches the chat content
|
||
surface in both themes — distinction from the left sidebar
|
||
(#f9faf9) is handled by the left border alone. Tracks
|
||
`--background` so any future tweaks to the chat surface flow
|
||
through automatically. */
|
||
--panel-surface: var(--background);
|
||
--panel-surface-fg: var(--foreground);
|
||
--panel-input-surface: #f5f5f5;
|
||
--panel-input-surface-hover: #efefef;
|
||
/* Muted gray with a one-step warmer-blue last channel (#779 vs flat #777)
|
||
so the tone has a faint hue rather than pure neutral — keeps text and
|
||
sliders quiet but not lifeless. */
|
||
--panel-surface-fg-muted: #777779;
|
||
/* Slider track-fill / thumb / hover halo. Decoupled from
|
||
--panel-surface-fg-muted so the slider can be tuned independently
|
||
from muted text. Light mode: lighter than the muted-text gray for
|
||
a softer feel. Dark mode (further down) keeps parity with the
|
||
muted-text token. */
|
||
--panel-slider-fg: #9a9a9c;
|
||
/* Chat-message action icons (assistant action bar, branch picker
|
||
chevrons + numbers, message-timing token counter, code-block
|
||
copy/download, user action bar, delete button). One token drives
|
||
all of them so the row reads as a single coherent control strip.
|
||
Mid-dark gray on the light surface — visible enough to read as
|
||
active controls, not so dark that they compete with message
|
||
text. */
|
||
--chat-icon-fg: #555555;
|
||
--chat-icon-fg-hover: var(--foreground);
|
||
--chat-icon-bg-hover: #ededec;
|
||
|
||
/* Control accent: switches, "New" badges, notification-style chips.
|
||
Follows the brand accent by default; palettes that keep their primary
|
||
neutral (Classic) override this so small controls still get a hue.
|
||
References resolve at use, so .dark's --primary flows through. */
|
||
--control-accent: var(--primary);
|
||
--control-accent-foreground: var(--primary-foreground);
|
||
|
||
/* Status color for meaning-carrying marks (verified badges, token
|
||
indicators). Pinned to the brand green in every palette and mode so
|
||
the signal never changes with the theme. */
|
||
--verified: #17b88b;
|
||
|
||
/* Standard interactive-icon size for nav, menus, action bars, and
|
||
in-message code-block actions. Sized one step above body text so
|
||
icons read as minimally larger than adjacent labels (~14px text).
|
||
Theme-independent — declared once in :root. */
|
||
--icon-size: 18px;
|
||
/* Inset of a centered .size-icon glyph within a 2rem (size-8) action
|
||
button — i.e. (32px − icon-size) / 2. Use as a negative margin on a
|
||
chat-message action bar so the leftmost icon's visual edge aligns
|
||
with the message text edge. Auto-tracks --icon-size. */
|
||
--icon-btn-inset: calc((2rem - var(--icon-size)) / 2);
|
||
}
|
||
|
||
.dark {
|
||
/* Dark surfaces shared by ALL palettes: #181818 page, elevated #1f1f1f
|
||
sidebar, #212121 cards. Palette dark blocks override only accent
|
||
tokens so dark mode stays consistent across themes. */
|
||
--background: #181818;
|
||
--foreground: #ececec;
|
||
--card: #212121;
|
||
--card-foreground: #ececec;
|
||
--popover: #212121;
|
||
--popover-foreground: #ececec;
|
||
--primary: #17b88b;
|
||
--primary-foreground: oklch(1 0 0);
|
||
--secondary: #242424;
|
||
--secondary-foreground: #ececec;
|
||
--muted: #242424;
|
||
--muted-foreground: #9b9b9b;
|
||
/* One step lighter than --popover so menu item hover reads clearly. */
|
||
--accent: #2e2e2e;
|
||
--accent-foreground: #ececec;
|
||
--destructive: oklch(0.6368 0.2078 25.3313);
|
||
/* Bypass permissions accent: bright, saturated neon yellow on dark. */
|
||
--bypass: #ffd60a;
|
||
/* --border / --input one step lighter than --muted so outlines and form
|
||
borders stay visible on muted surfaces (right config panel, export
|
||
tiles, quant chips) and keep subtle contrast on card. */
|
||
--border: #303030;
|
||
--input: #303030;
|
||
--ring: #ececec;
|
||
--chart-1: oklch(0.7511 0.1407 166.2284);
|
||
--chart-2: oklch(0.75 0.14 136.5572);
|
||
--chart-3: oklch(0.7554 0.1285 197.339);
|
||
--chart-4: oklch(0.7503 0.1199 346.7805);
|
||
--chart-5: oklch(0.799 0.1196 84.6633);
|
||
/* Elevated a step lighter than --background; the tone difference is
|
||
the separator. */
|
||
--sidebar: #1f1f1f;
|
||
--sidebar-foreground: #ececec;
|
||
--sidebar-primary: #17b88b;
|
||
--sidebar-primary-foreground: oklch(1 0 0);
|
||
--sidebar-accent: #2a2a2a;
|
||
--sidebar-accent-foreground: #ececec;
|
||
--sidebar-border: #2a2a2a;
|
||
--sidebar-ring: #ececec;
|
||
--destructive-foreground: oklch(1 0 0);
|
||
/* Match light's radius so every rounded-* element is the same in both themes. */
|
||
--radius: 1.1rem;
|
||
--font-sans: "Inter Variable", ui-sans-serif, sans-serif, system-ui;
|
||
--font-serif: Source Serif 4, serif;
|
||
--font-mono: JetBrains Mono, monospace;
|
||
--shadow-color: hsl(0 0% 0%);
|
||
--shadow-opacity: 0;
|
||
--shadow-blur: 0px;
|
||
--shadow-spread: 0px;
|
||
--shadow-offset-x: 0px;
|
||
--shadow-offset-y: 0px;
|
||
--letter-spacing: 0em;
|
||
--spacing: 0.25rem;
|
||
--shadow-2xs: 0px 0px 0px 0px hsl(0 0% 0% / 0);
|
||
--shadow-xs: 0px 0px 0px 0px hsl(0 0% 0% / 0);
|
||
--shadow-sm: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px 0px hsl(0 0% 0% / 0);
|
||
--shadow: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px 0px hsl(0 0% 0% / 0);
|
||
--shadow-md: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 2px 4px 0px hsl(0 0% 0% / 0);
|
||
--shadow-lg: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 4px 6px 0px hsl(0 0% 0% / 0);
|
||
--shadow-xl: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px 0px hsl(0 0% 0% / 0);
|
||
--shadow-2xl: 0px 0px 0px 0px hsl(0 0% 0% / 0);
|
||
|
||
--nav-fg: #c9c9c9;
|
||
--nav-fg-muted: #969696;
|
||
--nav-surface-hover: #2a2a2a;
|
||
--nav-icon-idle: #5c5c5c;
|
||
--nav-beta-border: #333333;
|
||
--panel-surface-hover: #333333;
|
||
/* Right-side chat-parameters panel: matches the chat content
|
||
surface in both themes — distinction from the left sidebar
|
||
is handled by the left border alone. Tracks `--background` so
|
||
any future tweaks to the chat surface flow through
|
||
automatically. */
|
||
--panel-surface: var(--background);
|
||
--panel-surface-fg: var(--foreground);
|
||
/* Translucent white so the same fill reads correctly on the #181818
|
||
page AND on #212121 cards/dialogs. */
|
||
--panel-input-surface: rgba(255, 255, 255, 0.07);
|
||
--panel-input-surface-hover: rgba(255, 255, 255, 0.11);
|
||
/* Soft neutral gray for muted text and sliders. Pure-ish #ababab
|
||
reads as quiet on the dark panel without going colored. */
|
||
--panel-surface-fg-muted: #ababab;
|
||
/* Dark-mode slider tone matches muted text — user wants the dark
|
||
theme slider unchanged from the previous behavior. */
|
||
--panel-slider-fg: #ababab;
|
||
/* Chat-message action icons. A touch lighter than the previous
|
||
#b8b8b8 so the icons read clearly without going near pure white;
|
||
hover restores full --foreground for affordance. */
|
||
--chat-icon-fg: #d8d8d8;
|
||
--chat-icon-fg-hover: var(--foreground);
|
||
--chat-icon-bg-hover: #2a2a2a;
|
||
}
|
||
|
||
/* ---------------------------------------------------------------------------
|
||
Color palettes.
|
||
|
||
The palette is a second theming dimension, orthogonal to light/dark. It is
|
||
carried on <html> as `data-palette` (managed by theme-store.ts alongside the
|
||
light/dark class):
|
||
|
||
(no attribute) → Standard: the signature Unsloth green.
|
||
data-palette="classic" → Classic: neutral grays with a calm blue
|
||
accent; enterprise-safe.
|
||
data-palette="minimal" → Minimal: strictly black, white, and gray.
|
||
|
||
Each palette overrides only color tokens; typography, radii, spacing, and
|
||
shadows are inherited from the base :root/.dark blocks so layout is
|
||
identical across palettes. Light blocks are scoped with :not(.dark) so the
|
||
base .dark block always wins the mode dimension. */
|
||
|
||
/* -------------------------------- Classic --------------------------------
|
||
White content and the standard white sidebar in light, shared dark
|
||
surfaces in dark, neutral gray hovers, and blue (#339cff) as the accent. */
|
||
:root[data-palette="classic"]:not(.dark) {
|
||
--background: #ffffff;
|
||
--foreground: #1a1c1f;
|
||
--card: #ffffff;
|
||
--card-foreground: #1a1c1f;
|
||
--popover: #ffffff;
|
||
--popover-foreground: #1a1c1f;
|
||
/* Neutral black primary; blue is reserved for small controls via
|
||
--control-accent (toggles, badges, focus rings). */
|
||
--primary: #0d0d0d;
|
||
--primary-foreground: #ffffff;
|
||
--control-accent: #339cff;
|
||
--control-accent-foreground: #ffffff;
|
||
--secondary: #f5f5f5;
|
||
--secondary-foreground: #1a1c1f;
|
||
--muted: #f7f7f7;
|
||
--muted-foreground: #8f8f8f;
|
||
--accent: #ececec;
|
||
--accent-foreground: #1a1c1f;
|
||
--bypass: #9a7b1e;
|
||
--border: #e6e6e6;
|
||
--input: #e6e6e6;
|
||
--ring: #1a1c1f;
|
||
--chart-1: #339cff;
|
||
--chart-2: #8fa3b8;
|
||
--chart-3: #0f6fd6;
|
||
--chart-4: #b8c4d0;
|
||
--chart-5: #5b7189;
|
||
/* Same as the standard palette; the sidebar surface does not change
|
||
with the palette. */
|
||
--sidebar: #ffffff;
|
||
--sidebar-foreground: #1a1c1f;
|
||
--sidebar-primary: #0d0d0d;
|
||
--sidebar-primary-foreground: #ffffff;
|
||
--sidebar-accent: #ececec;
|
||
--sidebar-accent-foreground: #1a1c1f;
|
||
--sidebar-border: #f2f2f2;
|
||
--sidebar-ring: #1a1c1f;
|
||
|
||
--nav-fg: #2d2f31;
|
||
--nav-fg-muted: #8f8f8f;
|
||
--nav-surface-hover: #ececec;
|
||
--nav-icon-idle: #8f8f8f;
|
||
--nav-beta-border: #e0e0e0;
|
||
--panel-surface-hover: #ececec;
|
||
--panel-input-surface: #f4f4f4;
|
||
--panel-input-surface-hover: #ededed;
|
||
--panel-surface-fg-muted: #7a7c7e;
|
||
--panel-slider-fg: #9b9d9f;
|
||
--chat-icon-fg: #5d5f61;
|
||
--chat-icon-bg-hover: #ececec;
|
||
}
|
||
|
||
/* Dark surfaces come from the shared base .dark block; Classic only swaps
|
||
the accents: neutral (white) buttons, blue on small controls via
|
||
--control-accent. */
|
||
:root[data-palette="classic"].dark {
|
||
--primary: #ececec;
|
||
--primary-foreground: #0d0d0d;
|
||
--control-accent: #4dabff;
|
||
--control-accent-foreground: #ffffff;
|
||
--bypass: #d9b40b;
|
||
--ring: #ececec;
|
||
--chart-1: #4dabff;
|
||
--chart-2: #8ab6de;
|
||
--chart-3: #1f7fe8;
|
||
--chart-4: #b3d4f5;
|
||
--chart-5: #6d87a3;
|
||
--sidebar-primary: #ececec;
|
||
--sidebar-primary-foreground: #0d0d0d;
|
||
--sidebar-ring: #ececec;
|
||
}
|
||
|
||
/* -------------------------------- Minimal -------------------------------- */
|
||
:root[data-palette="minimal"]:not(.dark) {
|
||
--background: #ffffff;
|
||
--foreground: #171717;
|
||
--card: #ffffff;
|
||
--card-foreground: #171717;
|
||
--popover: #ffffff;
|
||
--popover-foreground: #171717;
|
||
--primary: #171717;
|
||
--primary-foreground: #ffffff;
|
||
--secondary: #f5f5f5;
|
||
--secondary-foreground: #262626;
|
||
--muted: #f5f5f5;
|
||
--muted-foreground: #6f6f6f;
|
||
--accent: #ebebeb;
|
||
--accent-foreground: #171717;
|
||
--bypass: #6f6f6f;
|
||
--border: #e2e2e2;
|
||
--input: #e2e2e2;
|
||
--ring: #171717;
|
||
--chart-1: #171717;
|
||
--chart-2: #4d4d4d;
|
||
--chart-3: #7a7a7a;
|
||
--chart-4: #a6a6a6;
|
||
--chart-5: #d1d1d1;
|
||
/* White sidebar on white content; the border alone is the separator. */
|
||
--sidebar: #ffffff;
|
||
--sidebar-foreground: #171717;
|
||
--sidebar-primary: #171717;
|
||
--sidebar-primary-foreground: #ffffff;
|
||
--sidebar-accent: #ebebeb;
|
||
--sidebar-accent-foreground: #171717;
|
||
--sidebar-border: #e8e8e8;
|
||
--sidebar-ring: #171717;
|
||
|
||
--nav-fg: #333333;
|
||
--nav-fg-muted: #8a8a8a;
|
||
--nav-surface-hover: #efefef;
|
||
--nav-icon-idle: #8f8f8f;
|
||
--nav-beta-border: #dddddd;
|
||
--panel-surface-hover: #ececec;
|
||
--panel-input-surface: #f4f4f4;
|
||
--panel-input-surface-hover: #ededed;
|
||
--panel-surface-fg-muted: #757575;
|
||
--panel-slider-fg: #9b9b9b;
|
||
--chat-icon-fg: #555555;
|
||
--chat-icon-bg-hover: #ececec;
|
||
}
|
||
|
||
/* Dark surfaces come from the shared base .dark block; Minimal only swaps
|
||
the accents to pure monochrome (white buttons, gray chart ramp). */
|
||
:root[data-palette="minimal"].dark {
|
||
--primary: #ededed;
|
||
--primary-foreground: #111111;
|
||
--bypass: #9c9c9c;
|
||
--ring: #ededed;
|
||
--chart-1: #ededed;
|
||
--chart-2: #bdbdbd;
|
||
--chart-3: #8f8f8f;
|
||
--chart-4: #616161;
|
||
--chart-5: #3d3d3d;
|
||
--sidebar-primary: #ededed;
|
||
--sidebar-primary-foreground: #111111;
|
||
--sidebar-ring: #ededed;
|
||
}
|
||
|
||
/* ---------------------------------------------------------------------------
|
||
Appearance customization hooks (Settings → Appearance).
|
||
|
||
Every rule below is gated on a class or data attribute that
|
||
appearance-custom-store.ts toggles on <html>. With no customization active,
|
||
none of these selectors match and the stylesheet behaves exactly as stock.
|
||
Custom colors/fonts are applied as inline CSS variables on <html> (inline
|
||
wins over every :root/.dark/palette block), so they need no rules here. */
|
||
|
||
/* Contrast slider: remap border and muted-text tokens by mixing their base
|
||
values toward the foreground (higher contrast) or background (lower).
|
||
--input mirrors --border in every palette, so it serves as the untouched
|
||
base for --border; --panel-surface-fg-muted is the closest stable base for
|
||
--muted-foreground. --contrast-mix / --contrast-target are set inline. */
|
||
html[data-contrast-adjust] {
|
||
--border: color-mix(in oklab, var(--input), var(--contrast-target) var(--contrast-mix));
|
||
--sidebar-border: color-mix(in oklab, var(--input), var(--contrast-target) var(--contrast-mix));
|
||
--muted-foreground: color-mix(
|
||
in oklab,
|
||
var(--panel-surface-fg-muted),
|
||
var(--contrast-target) var(--contrast-mix)
|
||
);
|
||
}
|
||
|
||
/* Code font size: only overrides when the user sets an explicit size, so the
|
||
per-element Tailwind sizes stay authoritative by default. */
|
||
html[data-code-font-size] :is(pre, code, kbd, samp) {
|
||
font-size: var(--custom-code-font-size) !important;
|
||
}
|
||
|
||
/* Pointer cursors: hand cursor over interactive elements. */
|
||
html.pointer-cursors
|
||
:is(
|
||
button:not(:disabled),
|
||
[role="button"],
|
||
a[href],
|
||
select,
|
||
summary,
|
||
[role="tab"],
|
||
[role="menuitem"],
|
||
[role="option"],
|
||
[role="switch"],
|
||
[role="checkbox"],
|
||
input[type="checkbox"],
|
||
input[type="radio"],
|
||
input[type="range"],
|
||
label[for]
|
||
) {
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Force reduced motion: collapses CSS animations/transitions app-wide.
|
||
JS-driven springs are handled separately via MotionConfig in the provider. */
|
||
html.force-reduced-motion *,
|
||
html.force-reduced-motion *::before,
|
||
html.force-reduced-motion *::after {
|
||
animation-duration: 0.01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 0.01ms !important;
|
||
scroll-behavior: auto !important;
|
||
}
|
||
|
||
/* Same loader exceptions as the OS-level media block below: freezing
|
||
spinners removes the only signal that work is in flight. */
|
||
html.force-reduced-motion .animate-spin {
|
||
animation-duration: 1.5s !important;
|
||
animation-iteration-count: infinite !important;
|
||
}
|
||
html.force-reduced-motion .generated-image-loading-dot {
|
||
animation-duration: 1850ms !important;
|
||
animation-iteration-count: infinite !important;
|
||
}
|
||
html.force-reduced-motion .loading-bar-slide {
|
||
animation-duration: 1.3s !important;
|
||
animation-iteration-count: infinite !important;
|
||
}
|
||
html.force-reduced-motion .unsloth-composer-plus svg {
|
||
transition-duration: 250ms !important;
|
||
}
|
||
|
||
/* Font smoothing toggle: back to the browser's subpixel default. */
|
||
html.no-font-smoothing body {
|
||
-webkit-font-smoothing: auto;
|
||
-moz-osx-font-smoothing: auto;
|
||
}
|
||
|
||
/* Chat font: only applies while a custom chat font is set. Elements with
|
||
explicit font utilities (headings, code) keep their own families. */
|
||
html[data-chat-font] .aui-root {
|
||
font-family: var(--custom-chat-font);
|
||
}
|
||
|
||
/* Palette cards: the active ring keys off html[data-palette] so it swaps
|
||
in the same style pass that swaps the color tokens. Driving it from
|
||
React state paints one frame late while the whole page recalculates,
|
||
which briefly leaves the ring on the previous card. */
|
||
.palette-card:hover {
|
||
border-color: var(--ring-soft);
|
||
}
|
||
:root:not([data-palette]) .palette-card[data-palette-value="standard"],
|
||
:root[data-palette="classic"] .palette-card[data-palette-value="classic"],
|
||
:root[data-palette="minimal"] .palette-card[data-palette-value="minimal"] {
|
||
/* Selection keeps the card's own border weight, only darker. */
|
||
border-color: var(--ring-select);
|
||
}
|
||
|
||
/* Settings search: brief highlight on the row a result jumped to. */
|
||
.settings-search-hit {
|
||
animation: settings-search-hit 1.6s ease-out;
|
||
border-radius: 12px;
|
||
}
|
||
@keyframes settings-search-hit {
|
||
0%,
|
||
35% {
|
||
background-color: var(--accent);
|
||
}
|
||
100% {
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
|
||
@theme inline {
|
||
/* Reference the :root tokens instead of literal stacks so the runtime
|
||
font overrides (Settings > Appearance) reach every font-* utility. */
|
||
--font-sans: var(--font-sans);
|
||
--font-heading: var(--font-heading);
|
||
--color-verified: var(--verified);
|
||
--color-sidebar-ring: var(--ring-soft);
|
||
--color-sidebar-border: var(--sidebar-border);
|
||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||
--color-sidebar-accent: var(--sidebar-accent);
|
||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||
--color-sidebar-primary: var(--sidebar-primary);
|
||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||
--color-sidebar: var(--sidebar);
|
||
--color-chart-5: var(--chart-5);
|
||
--color-chart-4: var(--chart-4);
|
||
--color-chart-3: var(--chart-3);
|
||
--color-chart-2: var(--chart-2);
|
||
--color-chart-1: var(--chart-1);
|
||
--color-code-block: #181818;
|
||
/* Tailwind ring/border/outline "ring" utilities are focus indicators
|
||
across the app, so they map to the soft derived shade; persistent
|
||
selection styling uses ring-strong (the raw --ring). */
|
||
--color-ring: var(--ring-soft);
|
||
--color-ring-strong: var(--ring-select);
|
||
--color-input: var(--input);
|
||
--color-border: var(--border);
|
||
--color-destructive: var(--destructive);
|
||
--color-bypass: var(--bypass);
|
||
--color-accent-foreground: var(--accent-foreground);
|
||
--color-accent: var(--accent);
|
||
--color-muted-foreground: var(--muted-foreground);
|
||
--color-muted: var(--muted);
|
||
--color-secondary-foreground: var(--secondary-foreground);
|
||
--color-secondary: var(--secondary);
|
||
--color-primary-foreground: var(--primary-foreground);
|
||
--color-primary: var(--primary);
|
||
--color-control-accent: var(--control-accent);
|
||
--color-control-accent-foreground: var(--control-accent-foreground);
|
||
--color-popover-foreground: var(--popover-foreground);
|
||
--color-popover: var(--popover);
|
||
--color-card-foreground: var(--card-foreground);
|
||
--color-card: var(--card);
|
||
--color-foreground: var(--foreground);
|
||
--color-background: var(--background);
|
||
--radius-sm: calc(var(--radius) - 4px);
|
||
--radius-md: calc(var(--radius) - 2px);
|
||
--radius-lg: var(--radius);
|
||
--radius-xl: calc(var(--radius) + 4px);
|
||
--radius-2xl: calc(var(--radius) + 8px);
|
||
--radius-3xl: calc(var(--radius) + 12px);
|
||
--radius-4xl: calc(var(--radius) + 16px);
|
||
--font-mono: var(--font-mono);
|
||
--font-serif: var(--font-serif);
|
||
--radius: 1.1rem;
|
||
--tracking-tighter: 0em;
|
||
--tracking-tight: 0em;
|
||
--tracking-wide: calc(var(--tracking-normal) + 0.025em);
|
||
--tracking-wider: calc(var(--tracking-normal) + 0.05em);
|
||
--tracking-widest: calc(var(--tracking-normal) + 0.1em);
|
||
--tracking-normal: var(--tracking-normal);
|
||
/*--shadow-2xl: var(--shadow-2xl);*/
|
||
/*--shadow-xl: var(--shadow-xl);*/
|
||
/*--shadow-lg: var(--shadow-lg);*/
|
||
/*--shadow-md: var(--shadow-md);*/
|
||
/*--shadow: var(--shadow);*/
|
||
/*--shadow-sm: var(--shadow-sm);*/
|
||
/*--shadow-xs: var(--shadow-xs);*/
|
||
/*--shadow-2xs: var(--shadow-2xs);*/
|
||
/*--spacing: var(--spacing);*/
|
||
/*--letter-spacing: var(--letter-spacing);*/
|
||
/*--shadow-offset-y: var(--shadow-offset-y);*/
|
||
/*--shadow-offset-x: var(--shadow-offset-x);*/
|
||
/*--shadow-spread: var(--shadow-spread);*/
|
||
/*--shadow-blur: var(--shadow-blur);*/
|
||
/*--shadow-opacity: var(--shadow-opacity);*/
|
||
/*--color-shadow-color: var(--shadow-color);*/
|
||
--color-destructive-foreground: var(--destructive-foreground);
|
||
|
||
--color-nav-fg: var(--nav-fg);
|
||
--color-nav-fg-muted: var(--nav-fg-muted);
|
||
--color-nav-surface-hover: var(--nav-surface-hover);
|
||
--color-nav-icon-idle: var(--nav-icon-idle);
|
||
--color-nav-beta-border: var(--nav-beta-border);
|
||
--color-panel-surface-hover: var(--panel-surface-hover);
|
||
--color-panel-surface: var(--panel-surface);
|
||
--color-panel-surface-fg: var(--panel-surface-fg);
|
||
--color-panel-surface-fg-muted: var(--panel-surface-fg-muted);
|
||
--color-panel-input-surface: var(--panel-input-surface);
|
||
--color-panel-input-surface-hover: var(--panel-input-surface-hover);
|
||
--color-chat-icon-fg: var(--chat-icon-fg);
|
||
--color-chat-icon-fg-hover: var(--chat-icon-fg-hover);
|
||
--color-chat-icon-bg-hover: var(--chat-icon-bg-hover);
|
||
|
||
--animate-pulse: pulse var(--duration) ease-out infinite;
|
||
|
||
@keyframes pulse {
|
||
|
||
0%,
|
||
100% {
|
||
box-shadow: 0 0 0 0 var(--pulse-color);
|
||
}
|
||
|
||
50% {
|
||
box-shadow: 0 0 0 8px var(--pulse-color);
|
||
}
|
||
}
|
||
|
||
--animate-shiny-text: shiny-text 8s infinite;
|
||
|
||
@keyframes shiny-text {
|
||
|
||
0%,
|
||
90%,
|
||
100% {
|
||
background-position: calc(-100% - var(--shiny-width)) 0;
|
||
}
|
||
|
||
30%,
|
||
60% {
|
||
background-position: calc(100% + var(--shiny-width)) 0;
|
||
}
|
||
}
|
||
|
||
--animate-icon-pop: icon-pop 0.3s ease-out;
|
||
|
||
@keyframes icon-pop {
|
||
0% {
|
||
transform: scale(1);
|
||
}
|
||
|
||
45% {
|
||
transform: scale(1.08);
|
||
}
|
||
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
--animate-shine: shine var(--duration) infinite linear;
|
||
|
||
@keyframes shine {
|
||
0% {
|
||
background-position: 0% 0%;
|
||
}
|
||
|
||
50% {
|
||
background-position: 100% 100%;
|
||
}
|
||
|
||
to {
|
||
background-position: 0% 0%;
|
||
}
|
||
}
|
||
}
|
||
|
||
@layer base {
|
||
* {
|
||
@apply border-border outline-ring/50;
|
||
}
|
||
|
||
body {
|
||
@apply font-sans bg-background text-foreground;
|
||
letter-spacing: var(--tracking-normal);
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
text-rendering: optimizeLegibility;
|
||
}
|
||
|
||
html {
|
||
@apply font-sans h-full;
|
||
}
|
||
|
||
body,
|
||
#root {
|
||
@apply h-full;
|
||
}
|
||
|
||
body[data-scroll-locked] {
|
||
margin-right: 0 !important;
|
||
}
|
||
|
||
/* Firefox makes scrollable containers keyboard focusable; swap the 3px
|
||
UA outline for the app's soft 1px indicator. :where keeps specificity
|
||
at zero so interactive components keep their own focus styles. */
|
||
:where(div, main, section, aside, ul, ol):focus-visible {
|
||
outline: 1px solid var(--ring-soft);
|
||
outline-offset: -1px;
|
||
}
|
||
|
||
/* Number fields use the shared grey stepper instead of native spinners. */
|
||
input[type="number"] {
|
||
appearance: textfield;
|
||
-moz-appearance: textfield;
|
||
}
|
||
|
||
input[type="number"]::-webkit-inner-spin-button,
|
||
input[type="number"]::-webkit-outer-spin-button {
|
||
-webkit-appearance: none;
|
||
margin: 0;
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
font-family: var(--font-sans);
|
||
letter-spacing: 0;
|
||
}
|
||
}
|
||
|
||
@layer utilities {
|
||
|
||
/* Heading font utility — the logo applies its own dark-mode tracking
|
||
to offset optical bloom at large sizes. For small UI text (menus,
|
||
nav items) we keep a single tight tracking in both themes, relying
|
||
on global antialiased font-smoothing to neutralize the bloom. */
|
||
.font-heading {
|
||
font-family: var(--font-heading);
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.tracking-nav {
|
||
letter-spacing: 0;
|
||
}
|
||
.dark .tracking-nav {
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.nav-icon-btn {
|
||
@apply inline-flex h-7 w-7 items-center justify-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring;
|
||
}
|
||
|
||
/* Standard icon size — drives every nav/menu/action-bar icon
|
||
(left sidebar, app-user menu, settings tabs, chat config toggle,
|
||
right-panel close, chat message action bars, code-block actions).
|
||
Pulls from --icon-size so a single edit retunes them all. */
|
||
.size-icon {
|
||
width: var(--icon-size);
|
||
height: var(--icon-size);
|
||
}
|
||
|
||
/* Pins Inter across themes; parent `font-heading` resolves to Geist in dark. */
|
||
.nav-badge {
|
||
font-family: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
|
||
}
|
||
|
||
.sidebar-nav-btn {
|
||
color: var(--nav-fg);
|
||
}
|
||
/* Gemini-style: hovering or opening the row action (3 dots) shows only
|
||
the action's circle; the row highlights only when hovering the row
|
||
itself. */
|
||
.sidebar-nav-btn:hover,
|
||
.sidebar-nav-btn[data-active="true"],
|
||
.sidebar-nav-btn[data-state="open"],
|
||
.group\/project-item:hover:not(:has(.sidebar-row-action:hover)) .sidebar-nav-btn,
|
||
.group\/project-chat-item:hover:not(:has(.sidebar-row-action:hover)) .sidebar-nav-btn,
|
||
.group\/projects-item:hover:not(:has(.sidebar-row-action:hover)) .sidebar-nav-btn,
|
||
.group\/recent-item:hover:not(:has(.sidebar-row-action:hover)) .sidebar-nav-btn,
|
||
.group\/run-item:hover:not(:has(.sidebar-row-action:hover)) .sidebar-nav-btn {
|
||
background-color: var(--nav-surface-hover) !important;
|
||
color: #000 !important;
|
||
}
|
||
.dark .sidebar-nav-btn:hover,
|
||
.dark .sidebar-nav-btn[data-active="true"],
|
||
.dark .sidebar-nav-btn[data-state="open"],
|
||
.dark .group\/project-item:hover:not(:has(.sidebar-row-action:hover)) .sidebar-nav-btn,
|
||
.dark .group\/project-chat-item:hover:not(:has(.sidebar-row-action:hover)) .sidebar-nav-btn,
|
||
.dark .group\/projects-item:hover:not(:has(.sidebar-row-action:hover)) .sidebar-nav-btn,
|
||
.dark .group\/recent-item:hover:not(:has(.sidebar-row-action:hover)) .sidebar-nav-btn,
|
||
.dark .group\/run-item:hover:not(:has(.sidebar-row-action:hover)) .sidebar-nav-btn {
|
||
color: #fff !important;
|
||
}
|
||
|
||
.sidebar-row-action {
|
||
@apply absolute top-0 bottom-0 right-0 inline-flex cursor-pointer items-center justify-end pl-2 pr-1.5 opacity-0 pointer-events-none outline-none;
|
||
}
|
||
.sidebar-row-action[data-state="open"] {
|
||
@apply opacity-100 pointer-events-auto;
|
||
}
|
||
.sidebar-row-action-glyph {
|
||
@apply inline-flex size-6 items-center justify-center rounded-full text-sidebar-foreground/55;
|
||
}
|
||
/* Secondary row action (the pinned-chat unpin button) sits just left of
|
||
the primary "…" options button. */
|
||
.sidebar-row-action.is-unpin-action {
|
||
right: 1.875rem;
|
||
}
|
||
|
||
/* Branch picker chevron buttons sit beside action bar icon buttons
|
||
(size-8, rounded-full). Height + radius match for visual
|
||
alignment, but width is tighter so the small chevron glyph reads
|
||
as a compact control rather than a full-size icon button. */
|
||
.aui-branch-chevron-btn {
|
||
@apply inline-flex h-8 w-6 cursor-pointer items-center justify-center rounded-full p-0 text-chat-icon-fg transition-colors hover:bg-chat-icon-bg-hover hover:text-chat-icon-fg-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent;
|
||
}
|
||
.sidebar-row-action:hover .sidebar-row-action-glyph,
|
||
.sidebar-row-action[data-state="open"] .sidebar-row-action-glyph {
|
||
@apply text-nav-fg;
|
||
/* A step darker than the row hover so the circle reads on top of it. */
|
||
background-color: color-mix(in srgb, var(--foreground) 11%, transparent);
|
||
}
|
||
.dark .sidebar-row-action:hover .sidebar-row-action-glyph,
|
||
.dark .sidebar-row-action[data-state="open"] .sidebar-row-action-glyph {
|
||
color: #fff;
|
||
}
|
||
|
||
.sidebar-sticky-label {
|
||
@apply rounded-none bg-sidebar pt-0 pb-[8px] pl-[16px] pr-4 text-[14px]! leading-[17px] font-medium normal-case focus-visible:ring-0! focus-visible:outline-none transition-shadow duration-150;
|
||
/* Muted section-header gray, matching Gemini's "Notebooks"/"Recents".
|
||
Lightened from #5f6368 so the label reads as a header, clearly
|
||
lighter than the near-black nav items. */
|
||
color: #80868b;
|
||
letter-spacing: 0;
|
||
}
|
||
.sidebar-sticky-label-following {
|
||
@apply pt-[21px];
|
||
}
|
||
.dark .sidebar-sticky-label {
|
||
/* Muted gray, clearly dimmer than the near-white nav items (#ececee) so
|
||
"Train"/"Recents" read as section headers — like Gemini's dark mode. */
|
||
color: #9aa0a6;
|
||
letter-spacing: 0;
|
||
}
|
||
/* Panel input fields. Light mode matches the settings fields: white
|
||
fill with a subtle border. Dark mode keeps the borderless
|
||
translucent surface shared with the rest of the panel. */
|
||
.panel-input-group {
|
||
@apply !h-9 min-h-9 min-w-0 items-stretch gap-0 rounded-full pr-0 transition-colors focus-within:ring-0 focus-within:shadow-none;
|
||
border: 1px solid var(--border) !important;
|
||
background-color: var(--background);
|
||
}
|
||
.panel-input-group:has([data-slot="input-group-control"]:focus-visible) {
|
||
border-color: var(--ring-soft) !important;
|
||
box-shadow: none;
|
||
}
|
||
.dark .panel-input-group,
|
||
.dark .panel-input-group:has([data-slot="input-group-control"]:focus-visible) {
|
||
border: 0 !important;
|
||
background-color: var(--panel-input-surface);
|
||
}
|
||
|
||
/* Larger panel text containers (system prompt preview button and
|
||
chat-template textarea) share the same treatment. */
|
||
.panel-text-surface {
|
||
@apply rounded-[20px] transition-colors;
|
||
border: 1px solid var(--border);
|
||
background-color: var(--background);
|
||
}
|
||
.dark .panel-text-surface {
|
||
border-color: transparent;
|
||
background-color: var(--panel-input-surface);
|
||
}
|
||
.dark .panel-text-surface:hover {
|
||
border-color: transparent;
|
||
background-color: var(--panel-input-surface-hover);
|
||
}
|
||
/* Typing/clicking into the box darkens its border (dark mode surfaces are
|
||
borderless, so the brighter hover fill marks focus there). */
|
||
.panel-text-surface:focus-within {
|
||
border-color: var(--ring-soft);
|
||
}
|
||
.dark .panel-text-surface:focus-within {
|
||
border-color: transparent;
|
||
background-color: var(--panel-input-surface-hover);
|
||
}
|
||
|
||
/* Sidebar sliders: soft neutral grays — active fill and thumb stay
|
||
in the same neutral family as the panel surface so the controls
|
||
read as quiet, modern, and uncluttered. Flat (no shadow), small
|
||
thumb, no ring. The track's translucent neutral adapts to either
|
||
theme; the fill/thumb pick a mid-gray with enough contrast to
|
||
read on the panel without competing with text. */
|
||
/* Inactive track: barely-there alpha so it reads as a faint hint
|
||
rather than a visible bar — the active fill carries the value,
|
||
the track just suggests the slider's extent. Same alpha both
|
||
themes; the black/white base flips automatically per theme. */
|
||
.panel-slider [data-slot="slider-track"] {
|
||
height: 0.25rem !important;
|
||
background-color: rgb(0 0 0 / 0.025) !important;
|
||
}
|
||
.dark .panel-slider [data-slot="slider-track"] {
|
||
background-color: rgb(255 255 255 / 0.025) !important;
|
||
}
|
||
/* Sliders in the right-side parameters panel.
|
||
*
|
||
* Color: every interactive surface (active fill, thumb body, thumb
|
||
* border, hover/press halo) resolves through a single token —
|
||
* `--panel-surface-fg-muted` — so the slider always belongs to the
|
||
* same gray family as the panel's muted text. Theme switching and
|
||
* future tone tweaks happen in one place.
|
||
*
|
||
* Pressure feedback: only the halo expresses interaction. The
|
||
* shared <Slider /> component (components/ui/slider.tsx) applies
|
||
* `hover:scale-110`, `active:scale-95`, `hover:ring-4`, and
|
||
* `shadow-sm` to the thumb via Tailwind utilities. Suppressing
|
||
* `transform` and `box-shadow` on the base rule prevents those from
|
||
* competing with the halo's transition — without that, two
|
||
* animations run on different durations/curves and the interaction
|
||
* reads as jittery.
|
||
*
|
||
* Track-press detection: Radix's slider thumb only exposes
|
||
* `data-disabled` and `data-orientation` (verified against the
|
||
* package source) — there is no active-state attribute on the
|
||
* thumb. We anchor the press selector on the slider root
|
||
* (`.panel-slider:active`), which receives `:active` for any
|
||
* pointer-down inside the slider, including presses that start on
|
||
* the track. This is the only DOM-faithful way to show the halo
|
||
* during a track-press without patching the shared component.
|
||
*
|
||
* Halo lifecycle: deliberately no `:focus` — pointer focus persists
|
||
* after release and would leave a stale halo. `:focus-visible`
|
||
* keeps keyboard navigation accessible (Tab + arrows). */
|
||
.panel-slider .bg-primary {
|
||
background-color: var(--panel-slider-fg) !important;
|
||
}
|
||
.panel-slider [data-slot="slider-thumb"] {
|
||
width: 0.875rem !important;
|
||
height: 0.875rem !important;
|
||
background-color: var(--panel-slider-fg) !important;
|
||
border-color: var(--panel-slider-fg) !important;
|
||
transform: none !important;
|
||
box-shadow: none !important;
|
||
transition: box-shadow 140ms ease-out !important;
|
||
}
|
||
.panel-slider [data-slot="slider-thumb"]:hover,
|
||
.panel-slider [data-slot="slider-thumb"]:focus-visible,
|
||
.panel-slider:active [data-slot="slider-thumb"] {
|
||
box-shadow: 0 0 0 10px
|
||
color-mix(in srgb, var(--panel-slider-fg) 18%, transparent) !important;
|
||
}
|
||
/* Active press: slightly larger / more opaque ring than passive
|
||
hover, so the haptic reads stronger when the user is actively
|
||
manipulating the value. */
|
||
.panel-slider:active [data-slot="slider-thumb"] {
|
||
box-shadow: 0 0 0 12px
|
||
color-mix(in srgb, var(--panel-slider-fg) 22%, transparent) !important;
|
||
}
|
||
|
||
/* Inline numeric input — used for slider values and Context Length.
|
||
Designed to read as *editable text* rather than a pill button so
|
||
it doesn't mirror the Select/dropdown components on the panel.
|
||
Default: transparent box, no border, no ring; the component sets
|
||
an inline width that hugs the value. Hover/focus: very light bg
|
||
fade-in, just enough to read as interactive without competing
|
||
with the slider row's quiet aesthetic. */
|
||
.panel-number-input {
|
||
@apply h-7 min-w-8 shrink-0 rounded-full border-0 bg-transparent px-2 text-right text-[13px]! font-medium tabular-nums text-nav-fg shadow-none transition-colors hover:bg-black/[0.04] focus:bg-black/[0.05] focus-visible:ring-0! focus-visible:outline-none md:text-[13px]!;
|
||
}
|
||
.dark .panel-number-input {
|
||
@apply hover:bg-white/[0.04] focus:bg-white/[0.06];
|
||
}
|
||
|
||
/* Switch — unsloth-green track when active, slider-gray thumb in
|
||
both states. Keeps the on-state recognizable as an "engaged"
|
||
primary control while the moving thumb sits in the same neutral
|
||
palette as the panel sliders, tying every control in the panel
|
||
to a single gray family. Unchecked track keeps shadcn's default
|
||
bg-input for the standard off affordance. */
|
||
.panel-switch[data-state="checked"] {
|
||
background-color: var(--primary) !important;
|
||
}
|
||
.panel-switch [data-slot="switch-thumb"] {
|
||
background-color: var(--panel-slider-fg) !important;
|
||
}
|
||
.panel-switch[data-state="checked"] [data-slot="switch-thumb"] {
|
||
background-color: #ffffff !important;
|
||
}
|
||
|
||
.tooltip-compact {
|
||
@apply rounded-[11px] border-transparent bg-black px-2.5 py-1.5 text-[11px] font-medium leading-snug text-white shadow-md;
|
||
}
|
||
|
||
/* Dialog popups: borderless; chatbox shadow in light, flat card
|
||
surface in dark. */
|
||
.dialog-soft-surface {
|
||
@apply border-0 ring-0 bg-background/98 shadow-[0_2px_8px_-2px_rgba(0,0,0,0.16)] dark:bg-card dark:shadow-none;
|
||
}
|
||
|
||
/* Rich tooltip — used for the context-usage and token-counter
|
||
popups (multi-row metric breakdowns). Same black surface as the
|
||
compact tooltips so chat-area popovers feel like one family.
|
||
Corner radius matches the user-profile dropdown in the left
|
||
sidebar (14px) so panel-level menu surfaces share a single
|
||
roundness. Uses the heading font with tracking for the structured
|
||
content. Same in both themes. */
|
||
.tooltip-rich {
|
||
@apply rounded-[16px] border-transparent bg-black px-4 py-3 font-heading tracking-wide text-white shadow-[0_8px_28px_-6px_rgba(0,0,0,0.32)];
|
||
}
|
||
/* Row-label color override — the popups reuse the existing prose
|
||
`text-muted-foreground` class. Fixed light gray on the black
|
||
surface keeps the label clearly legible while staying distinct
|
||
from the values (full white). */
|
||
.tooltip-rich .text-muted-foreground {
|
||
color: #b1b1b1 !important;
|
||
}
|
||
.tooltip-rich .border-border\/40 {
|
||
border-color: rgb(255 255 255 / 0.12) !important;
|
||
}
|
||
|
||
.app-user-menu [data-slot="dropdown-menu-item"],
|
||
.app-user-menu [data-slot="dropdown-menu-sub-trigger"] {
|
||
height: 36px;
|
||
padding: 0 0.75rem !important;
|
||
gap: 9.5px !important;
|
||
border-radius: 12px;
|
||
font-weight: 500;
|
||
font-size: 15px;
|
||
line-height: 20px;
|
||
letter-spacing: 0;
|
||
color: var(--nav-fg);
|
||
}
|
||
.dark .app-user-menu [data-slot="dropdown-menu-item"],
|
||
.dark .app-user-menu [data-slot="dropdown-menu-sub-trigger"] {
|
||
letter-spacing: 0;
|
||
}
|
||
.app-user-menu [data-slot="dropdown-menu-item"] svg,
|
||
.app-user-menu [data-slot="dropdown-menu-sub-trigger"] svg {
|
||
width: 19px !important;
|
||
height: 19px !important;
|
||
flex-shrink: 0;
|
||
}
|
||
.app-user-menu [data-slot="dropdown-menu-item"]:focus,
|
||
.app-user-menu [data-slot="dropdown-menu-sub-trigger"]:focus,
|
||
.app-user-menu [data-slot="dropdown-menu-sub-trigger"][data-state="open"] {
|
||
background-color: var(--nav-surface-hover);
|
||
color: #000;
|
||
}
|
||
.dark .app-user-menu [data-slot="dropdown-menu-item"]:focus,
|
||
.dark .app-user-menu [data-slot="dropdown-menu-sub-trigger"]:focus,
|
||
.dark .app-user-menu [data-slot="dropdown-menu-sub-trigger"][data-state="open"] {
|
||
/* --nav-surface-hover is tuned for the page bg; on the lighter menu
|
||
surface it is invisible, so use the menu hover token instead. */
|
||
background-color: var(--accent);
|
||
color: #fff;
|
||
}
|
||
.app-user-menu [data-slot="dropdown-menu-item"]:focus *,
|
||
.app-user-menu [data-slot="dropdown-menu-sub-trigger"]:focus *,
|
||
.app-user-menu [data-slot="dropdown-menu-sub-trigger"][data-state="open"] * {
|
||
color: #000 !important;
|
||
}
|
||
.dark .app-user-menu [data-slot="dropdown-menu-item"]:focus *,
|
||
.dark .app-user-menu [data-slot="dropdown-menu-sub-trigger"]:focus *,
|
||
.dark .app-user-menu [data-slot="dropdown-menu-sub-trigger"][data-state="open"] * {
|
||
color: #fff !important;
|
||
}
|
||
|
||
.menu-flat-destructive {
|
||
--destructive: #dc4848;
|
||
}
|
||
.dark .menu-flat-destructive {
|
||
--destructive: #ed7878;
|
||
}
|
||
.app-user-menu [data-slot="dropdown-menu-item"][data-variant="destructive"],
|
||
.app-user-menu [data-slot="dropdown-menu-item"][data-variant="destructive"]:focus {
|
||
color: var(--destructive);
|
||
}
|
||
.app-user-menu [data-slot="dropdown-menu-item"][data-variant="destructive"]:focus {
|
||
background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
|
||
}
|
||
.app-user-menu [data-slot="dropdown-menu-item"][data-variant="destructive"]:focus * {
|
||
color: var(--destructive) !important;
|
||
}
|
||
|
||
/* Elevated surface shadow (use ring-* for borders) */
|
||
.shadow-border {
|
||
/* Chatbox shadow; dark mode drops it. */
|
||
--tw-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.16);
|
||
--tw-shadow-colored: 0 2px 8px -2px var(--tw-shadow-color);
|
||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
|
||
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||
}
|
||
|
||
.dark .shadow-border {
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* Settings dialog: no shadow in dark mode. */
|
||
.dark .settings-surface.shadow-border {
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* Lift the dialog off the page bg; halfway to --card keeps the inner
|
||
bg-muted / bg-background fills readable. */
|
||
.dark .settings-surface {
|
||
background-color: color-mix(in srgb, var(--background) 50%, var(--card));
|
||
}
|
||
|
||
/* App-wide: every clickable control shows the hand cursor. Disabled ones
|
||
(native :disabled, aria-disabled, Radix data-disabled) keep the default. */
|
||
button:not(:disabled):not([aria-disabled="true"]),
|
||
summary,
|
||
label[for],
|
||
select:not(:disabled),
|
||
a[href],
|
||
:is(
|
||
[role="button"],
|
||
[role="tab"],
|
||
[role="switch"],
|
||
[role="radio"],
|
||
[role="checkbox"],
|
||
[role="menuitem"],
|
||
[role="menuitemcheckbox"],
|
||
[role="menuitemradio"],
|
||
[role="option"],
|
||
[role="combobox"],
|
||
[role="link"]
|
||
):not([aria-disabled="true"]):not([data-disabled]):not(:disabled) {
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Model selector: pointer cursor on every clickable element. */
|
||
.unsloth-model-selector-trigger,
|
||
.unsloth-model-selector-menu button {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.unsloth-model-selector-trigger:disabled,
|
||
.unsloth-model-selector-menu button:disabled {
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* Chat search box: borderless, soft Gemini-style elevation. */
|
||
.chat-search-surface {
|
||
border: none;
|
||
/* Pin to the dark --radius so rounded-3xl corners stay consistent. */
|
||
--radius: 0.625rem;
|
||
/* Prominent, wide ChatGPT-style elevation. */
|
||
box-shadow: 0 24px 70px -16px rgba(0, 0, 0, 0.28),
|
||
0 8px 24px -12px rgba(0, 0, 0, 0.18);
|
||
}
|
||
|
||
/* Dark: page-bg shadow so the dialog does not merge into same-color
|
||
content behind it (same convention as the dropdowns). */
|
||
.dark .chat-search-surface {
|
||
box-shadow: 0 4px 14px var(--background);
|
||
}
|
||
|
||
.menu-soft-surface,
|
||
.menu-soft-surface-up {
|
||
/* Light: chatbox shadow geometry. */
|
||
--menu-soft-edge: rgba(0, 0, 0, 0.14);
|
||
--menu-soft-shadow: rgba(0, 0, 0, 0.16);
|
||
--menu-soft-offset-y: 2px;
|
||
--menu-soft-blur: 8px;
|
||
--menu-soft-spread: -2px;
|
||
@apply bg-popover text-popover-foreground;
|
||
box-shadow:
|
||
inset 0 0 0 1px var(--menu-soft-edge),
|
||
0 var(--menu-soft-offset-y) var(--menu-soft-blur)
|
||
var(--menu-soft-spread) var(--menu-soft-shadow);
|
||
}
|
||
.dark .menu-soft-surface,
|
||
.dark .menu-soft-surface-up {
|
||
--menu-soft-edge: rgba(255, 255, 255, 0.07);
|
||
--menu-soft-shadow: rgba(0, 0, 0, 0.28);
|
||
--menu-soft-offset-y: 8px;
|
||
--menu-soft-blur: 28px;
|
||
--menu-soft-spread: -6px;
|
||
}
|
||
.dark .menu-soft-surface-up {
|
||
--menu-soft-offset-y: -6px;
|
||
--menu-soft-spread: -8px;
|
||
}
|
||
|
||
/* Model selector: drop the inset edge ring, keep the soft drop shadow.
|
||
Pin --radius to the light value so the corners match in both themes. */
|
||
.unsloth-model-selector-menu.menu-soft-surface {
|
||
--radius: 1.25rem;
|
||
box-shadow: 0 var(--menu-soft-offset-y) var(--menu-soft-blur)
|
||
var(--menu-soft-spread) var(--menu-soft-shadow);
|
||
}
|
||
|
||
.dark .unsloth-model-selector-menu.menu-soft-surface {
|
||
/* Match the left sidebar background. */
|
||
background-color: var(--sidebar);
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* List menus: one radius in both themes, slightly tighter than --radius-lg
|
||
and matching the sidebar buttons. !important beats per-menu rounded-*. */
|
||
[data-slot="dropdown-menu-content"],
|
||
[data-slot="dropdown-menu-sub-content"],
|
||
[data-slot="select-content"],
|
||
[data-slot="combobox-content"] {
|
||
border-radius: 14px !important;
|
||
}
|
||
|
||
/* Account menu: a touch rounder than standard list menus. */
|
||
[data-slot="dropdown-menu-content"].app-user-menu.menu-soft-surface-up {
|
||
border-radius: 18px !important;
|
||
}
|
||
|
||
/* Every dropdown/menu/select/popover: borderless, chatbox shadow in light,
|
||
none in dark. !important so it also overrides the bespoke menu shadows. */
|
||
[data-slot="dropdown-menu-content"],
|
||
[data-slot="dropdown-menu-sub-content"],
|
||
[data-slot="select-content"],
|
||
[data-slot="combobox-content"],
|
||
[data-slot="popover-content"] {
|
||
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.16) !important;
|
||
}
|
||
/* Dark: keep the chat-box dropdown shadow so menus don't merge into a
|
||
same-color surface (e.g. a menu overlapping the composer). */
|
||
.dark [data-slot="dropdown-menu-content"],
|
||
.dark [data-slot="dropdown-menu-sub-content"],
|
||
.dark [data-slot="select-content"],
|
||
.dark [data-slot="combobox-content"],
|
||
.dark [data-slot="popover-content"] {
|
||
box-shadow: 0 4px 14px var(--background) !important;
|
||
}
|
||
|
||
/* Model selector: shadow in the page-bg color so it lifts off the
|
||
composer it overlaps (chatbox geometry). Account menu stays flat. */
|
||
.dark .unsloth-model-selector-menu {
|
||
box-shadow: 0 2px 8px -2px var(--background) !important;
|
||
}
|
||
.dark .app-user-menu.menu-soft-surface-up {
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
/* Context menus (chat, run, project): drop the inset edge ring, keep the soft shadow. */
|
||
.app-user-menu.menu-soft-surface {
|
||
box-shadow: 0 var(--menu-soft-offset-y) var(--menu-soft-blur)
|
||
var(--menu-soft-spread) var(--menu-soft-shadow);
|
||
}
|
||
|
||
/* Account menu: drop the inset edge ring and use the composer's soft shadow. */
|
||
.app-user-menu.menu-soft-surface-up {
|
||
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.16);
|
||
}
|
||
.dark .app-user-menu.menu-soft-surface-up {
|
||
box-shadow: 0 8px 28px -6px rgba(0, 0, 0, 0.28);
|
||
}
|
||
|
||
.chat-composer-surface {
|
||
@apply relative flex w-full flex-col rounded-[32px] bg-background dark:bg-card px-1 pt-2 outline-none transition-shadow;
|
||
font-family: var(--font-sans);
|
||
background-clip: padding-box;
|
||
background-color: #ffffff;
|
||
/* Gemini-style composer shadow. */
|
||
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.16);
|
||
transition: box-shadow 0.1s;
|
||
}
|
||
|
||
.dark .chat-composer-surface {
|
||
background-color: var(--card);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.composer-pill-btn {
|
||
@apply flex cursor-pointer items-center gap-1.5 rounded-full py-1.5 pl-2 pr-2.5 text-[14px] font-medium text-muted-foreground/70 transition-colors hover:bg-primary/10 dark:hover:bg-white/[0.1] disabled:cursor-not-allowed disabled:opacity-40;
|
||
}
|
||
|
||
/* Caret pills (RAG, MCP): the chevron carries its own whitespace, so the
|
||
trailing padding is tightened to keep the hover pill balanced. */
|
||
.composer-pill-btn:has(.composer-pill-caret) {
|
||
@apply pr-1.5;
|
||
}
|
||
|
||
/* Icon-only (compact) pills drop their label, so make the button a square
|
||
and center the glyph; the rounded-full hover highlight then reads as a
|
||
circle around the icon rather than a wide rounded rectangle. */
|
||
[data-pill-compact="true"] .composer-pill-btn:not([data-keep-label]) {
|
||
@apply size-8 justify-center px-0;
|
||
}
|
||
|
||
.composer-pill-btn[data-active="true"] {
|
||
color: var(--primary);
|
||
}
|
||
/* Permission-level pill: higher-contrast grey than the resting pills so
|
||
the active level stays legible (darker in light mode, lighter in dark).
|
||
Full access keeps the danger yellow below. */
|
||
.composer-pill-btn.composer-pill-permissions:not([data-variant="danger"]) {
|
||
color: color-mix(in oklab, var(--foreground) 60%, transparent);
|
||
}
|
||
.dark .composer-pill-btn.composer-pill-permissions:not([data-variant="danger"]) {
|
||
color: color-mix(in oklab, var(--foreground) 72%, transparent);
|
||
}
|
||
/* Bypass permissions badge: bright yellow text, no resting fill; the
|
||
rounded hover pill picks up the yellow accent like other toggles. */
|
||
.composer-pill-btn[data-variant="danger"] {
|
||
background-color: transparent;
|
||
color: var(--bypass);
|
||
}
|
||
.composer-pill-btn[data-variant="danger"]:hover {
|
||
background-color: color-mix(in oklab, var(--bypass) 7%, transparent);
|
||
}
|
||
/* Match the hover-X circle to the yellow accent instead of the green primary. */
|
||
.composer-pill-btn[data-variant="danger"] .composer-pill-x {
|
||
background-color: color-mix(in oklab, var(--bypass) 13%, transparent);
|
||
}
|
||
|
||
/* With more than 4 tools on, drop pill labels to icons only to cut clutter.
|
||
Compare keeps its label via data-keep-label. */
|
||
[data-pill-compact="true"]
|
||
.composer-pill-btn:not([data-keep-label])
|
||
> span:not(.composer-pill-glyph) {
|
||
display: none;
|
||
}
|
||
|
||
/* Drop the MCP dropdown caret when collapsed so the icon is not squished. */
|
||
[data-pill-compact="true"]
|
||
.composer-pill-btn:not([data-keep-label])
|
||
.composer-pill-caret {
|
||
display: none;
|
||
}
|
||
|
||
/* Fixed-width icon slot so every pill's icon occupies the same space and
|
||
the labels line up on an even rhythm, regardless of icon size. */
|
||
.composer-pill-glyph {
|
||
@apply relative inline-flex w-[19px] shrink-0 items-center justify-center transition-opacity;
|
||
}
|
||
|
||
/* On hover the icon swaps for an X inside a soft circle (ChatGPT-style),
|
||
filling the icon slot so every pill's X is identical and centered. */
|
||
.composer-pill-x {
|
||
@apply pointer-events-none absolute inset-0 m-auto size-[19px] rounded-full bg-primary/15 p-[3px] opacity-0 transition-opacity dark:bg-white/[0.14];
|
||
}
|
||
|
||
/* Icon-only (compact) pills are too small for the circle, so show a bare x. */
|
||
[data-pill-compact="true"]
|
||
.composer-pill-btn:not([data-keep-label])
|
||
.composer-pill-x {
|
||
@apply size-[15px] bg-transparent p-0 dark:bg-transparent;
|
||
}
|
||
|
||
/* Compact pills hide their labels, so surface the name as a hover
|
||
tooltip styled like .tooltip-compact. */
|
||
[data-pill-compact="true"]
|
||
.composer-pill-btn:not([data-keep-label])[data-pill-label] {
|
||
position: relative;
|
||
}
|
||
[data-pill-compact="true"]
|
||
.composer-pill-btn:not([data-keep-label])[data-pill-label]:hover::after {
|
||
content: attr(data-pill-label);
|
||
/* Always one nowrap line, so always a full pill. */
|
||
@apply pointer-events-none absolute bottom-[calc(100%+6px)] left-1/2 z-50 -translate-x-1/2 rounded-full bg-black px-2.5 py-1.5 text-[11px] font-medium leading-snug whitespace-nowrap text-white shadow-md;
|
||
}
|
||
|
||
/* Compact caret pills (RAG, MCP) open their menu on click instead of
|
||
toggling off, so keep the icon and skip the X swap. No data-active
|
||
requirement: the off-switch glyph rules below hide the icon on hover
|
||
even for inactive pills, which left a blank slot in compact mode. */
|
||
[data-pill-compact="true"]
|
||
.composer-pill-btn:not([data-keep-label]):has(.composer-pill-caret):hover
|
||
.composer-pill-glyph
|
||
> :not(.composer-pill-x) {
|
||
opacity: 1;
|
||
}
|
||
[data-pill-compact="true"]
|
||
.composer-pill-btn:not([data-keep-label]):has(.composer-pill-caret)
|
||
.composer-pill-x {
|
||
display: none;
|
||
}
|
||
|
||
/* Hovering an active pill swaps the icon for an X (click to turn off). */
|
||
.composer-pill-btn[data-active="true"]:hover .composer-pill-glyph > :not(.composer-pill-x),
|
||
.unsloth-thinking-pill[data-active="true"]:hover .composer-pill-glyph > :not(.composer-pill-x) {
|
||
@apply opacity-0;
|
||
}
|
||
|
||
.composer-pill-btn[data-active="true"]:hover .composer-pill-x,
|
||
.unsloth-thinking-pill[data-active="true"]:hover .composer-pill-x {
|
||
@apply opacity-100;
|
||
}
|
||
|
||
/* Pills whose icon is an off switch (RAG, MCP) only render while the
|
||
feature is on, so reveal the X on hover even when the pill is not in
|
||
its active look (MCP with no servers enabled, RAG without a model). */
|
||
.composer-pill-btn:has(> .composer-pill-glyph[role="button"]):hover
|
||
.composer-pill-glyph
|
||
> :not(.composer-pill-x) {
|
||
@apply opacity-0;
|
||
}
|
||
|
||
.composer-pill-btn:has(> .composer-pill-glyph[role="button"]):hover
|
||
.composer-pill-x {
|
||
@apply opacity-100;
|
||
}
|
||
|
||
.composer-input {
|
||
@apply mt-2 mb-1 mx-3 min-h-12 w-[calc(100%-1.5rem)] resize-none overflow-y-auto bg-transparent pl-2 pr-4 pt-2 pb-3 text-sm font-[450] outline-none placeholder:text-muted-foreground focus-visible:ring-0;
|
||
}
|
||
|
||
.composer-action-wrapper {
|
||
@apply relative mx-2 mb-2 flex items-center justify-between;
|
||
}
|
||
|
||
.composer-footer-note {
|
||
@apply mt-1.5 text-center text-[11px] tracking-[0em] text-muted-foreground;
|
||
font-family: var(--font-sans);
|
||
}
|
||
|
||
/* Pill composer; own classes so compare-mode keeps its stacked layout. */
|
||
.unsloth-composer-surface {
|
||
@apply relative flex w-full flex-col rounded-[32px] bg-background dark:bg-card px-3 py-3 outline-none transition-shadow;
|
||
font-family: var(--font-sans);
|
||
background-clip: padding-box;
|
||
background-color: #ffffff;
|
||
/* Gemini-style composer shadow. */
|
||
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.16);
|
||
transition: box-shadow 0.1s;
|
||
}
|
||
|
||
.unsloth-composer-surface:focus-within {
|
||
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.16);
|
||
}
|
||
|
||
.dark .unsloth-composer-surface {
|
||
background-color: var(--card);
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* Keep the expand/collapse width swap instant. A transition on width (e.g.
|
||
the reduced-motion blanket rule) makes getComputedStyle().width lag a
|
||
frame, so autosize measures the stale width and leaves a stray blank row. */
|
||
.unsloth-composer-line,
|
||
.unsloth-composer-line .unsloth-composer-input,
|
||
.unsloth-composer-left {
|
||
transition-property: none !important;
|
||
}
|
||
|
||
/* Composer row: one centered line when empty; two rows (input over controls)
|
||
when filled, so the textarea never remounts. */
|
||
.unsloth-composer-line {
|
||
@apply flex w-full flex-wrap items-center gap-0.5 px-1;
|
||
}
|
||
|
||
.unsloth-composer-left {
|
||
@apply flex shrink-0 items-center gap-0.5;
|
||
order: 1;
|
||
/* Pull the plus button closer to the composer edge. */
|
||
margin-left: -0.25rem;
|
||
}
|
||
|
||
.unsloth-composer-line .unsloth-composer-input {
|
||
order: 2;
|
||
}
|
||
|
||
.unsloth-composer-line .aui-composer-action-wrapper {
|
||
order: 3;
|
||
margin-left: auto;
|
||
/* Inset the send circle from the edge, Gemini-style. */
|
||
margin-right: -0.125rem;
|
||
}
|
||
|
||
.unsloth-composer-line[data-expanded="true"] .unsloth-composer-input {
|
||
order: 1;
|
||
flex-basis: 100%;
|
||
width: 100%;
|
||
/* Sits close to the left edge, near the plus. */
|
||
padding-left: 0.375rem;
|
||
padding-top: 0.5rem;
|
||
padding-bottom: 0.5rem;
|
||
}
|
||
|
||
/* Two-row gap between text and controls. On the line, not the input, so
|
||
the placeholder max-height clamp never crops it like padding would. */
|
||
.unsloth-composer-line[data-expanded="true"] {
|
||
row-gap: 0.75rem;
|
||
}
|
||
|
||
.unsloth-composer-line[data-expanded="true"] .unsloth-composer-left {
|
||
order: 2;
|
||
}
|
||
|
||
/* Empty (placeholder shown): clamp back to one row. max-height beats the
|
||
autosize textarea's inline !important height, so a cleared message leaves
|
||
no stale tall box or stray scrollbar. */
|
||
.unsloth-composer-input:placeholder-shown {
|
||
max-height: 40px !important;
|
||
overflow-y: hidden !important;
|
||
}
|
||
|
||
.unsloth-composer-input {
|
||
@apply min-h-[40px] min-w-0 flex-1 resize-none overflow-y-auto bg-transparent pl-0.5 pr-2 py-2 text-[15px] font-[450] leading-6 outline-none placeholder:text-muted-foreground focus-visible:ring-0;
|
||
}
|
||
|
||
.unsloth-composer-plus {
|
||
@apply flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full text-foreground transition-colors hover:bg-muted-foreground/15 disabled:cursor-not-allowed disabled:opacity-40;
|
||
}
|
||
|
||
.unsloth-composer-plus[data-state="open"] {
|
||
@apply bg-muted-foreground/15;
|
||
/* Radix's modal menu sets body pointer-events:none; re-enable on the open
|
||
trigger so the cursor and click-to-close work. */
|
||
pointer-events: auto;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Open menu rotates the plus 45deg into an x. Ease-in-out for a smooth
|
||
spin; keep it at 45deg so it never passes back through a "+". */
|
||
.unsloth-composer-plus svg {
|
||
transition: transform 250ms cubic-bezier(0.65, 0, 0.35, 1);
|
||
will-change: transform;
|
||
}
|
||
|
||
.unsloth-composer-plus[data-state="open"] svg {
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
/* Keyboard focus shows a subtle brand ring, not the browser's blue outline;
|
||
mouse clicks (no :focus-visible) stay ring-free. */
|
||
.composer-pill-btn:focus-visible,
|
||
.unsloth-thinking-pill:focus-visible,
|
||
.unsloth-composer-plus:focus-visible {
|
||
outline: none;
|
||
box-shadow: 0 0 0 1px var(--ring-soft);
|
||
}
|
||
|
||
/* Clickable controls never show the browser's blue outline (Radix re-focuses
|
||
triggers on menu close, which lights them up). Mouse focus also drops the
|
||
Tailwind ring; keyboard focus (:focus-visible) keeps custom rings so the
|
||
focused control stays visible. Inputs keep their own focus styles. Zeroing
|
||
the ring vars leaves decorative shadow-* utilities intact. */
|
||
button:focus,
|
||
a:focus,
|
||
summary:focus,
|
||
[role="button"]:focus {
|
||
outline: none !important;
|
||
}
|
||
/* Pressed controls are exempt: their ring marks SELECTION, and the just
|
||
clicked control is exactly the one holding mouse focus. */
|
||
button:focus:not(:focus-visible):not([aria-pressed="true"]),
|
||
a:focus:not(:focus-visible),
|
||
summary:focus:not(:focus-visible),
|
||
[role="button"]:focus:not(:focus-visible):not([aria-pressed="true"]) {
|
||
--tw-ring-shadow: 0 0 #0000 !important;
|
||
--tw-ring-offset-shadow: 0 0 #0000 !important;
|
||
}
|
||
|
||
/* The greeting is a heading: it follows the user's heading font and
|
||
defaults to Hellix. Restored on the element because the base h1 rule
|
||
reads --font-heading with !important and .aui-thread-root resets
|
||
that var to sans for chat prose. */
|
||
.unsloth-welcome-title {
|
||
--font-heading: var(
|
||
--custom-heading-font,
|
||
"Hellix",
|
||
"Space Grotesk Variable",
|
||
var(--font-sans)
|
||
);
|
||
font-family: var(
|
||
--custom-heading-font,
|
||
"Hellix",
|
||
"Space Grotesk Variable",
|
||
var(--font-sans)
|
||
);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Right-side Thinking pill (toggle or dropdown). pl-2 matches the left
|
||
pills so the hover X is not pushed in too far. */
|
||
.unsloth-thinking-pill {
|
||
@apply inline-flex shrink-0 cursor-pointer items-center gap-1 rounded-full py-1.5 pl-2 pr-2.5 text-[14px] font-medium text-muted-foreground transition-colors hover:bg-primary/10 dark:hover:bg-white/[0.1] disabled:cursor-not-allowed disabled:opacity-40;
|
||
/* Reserve a text line so the icon-only (inactive) pill matches the
|
||
text pills' height instead of collapsing to the icon. */
|
||
min-height: calc(1lh + 0.75rem);
|
||
}
|
||
|
||
.unsloth-thinking-pill[data-active="true"] {
|
||
color: var(--primary);
|
||
}
|
||
|
||
.unsloth-thinking-pill[data-state="open"] {
|
||
@apply bg-muted-foreground/10;
|
||
/* See .unsloth-composer-plus: re-enable pointer-events on the open trigger. */
|
||
pointer-events: auto;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Smaller tick for selected Thinking options. */
|
||
.unsloth-tick {
|
||
width: 0.8rem !important;
|
||
height: 0.8rem !important;
|
||
}
|
||
|
||
/* Soft elevation; [data-slot] outranks the component ring-1, dropping the border. */
|
||
.unsloth-plus-menu[data-slot] {
|
||
/* Concentric with the item hover boxes: container radius =
|
||
item radius (12px) + side gutter (9px), so the curves run parallel.
|
||
!important beats the global 14px dropdown radius. */
|
||
border-radius: 21px !important;
|
||
padding-top: 0.5rem;
|
||
padding-bottom: 0.5rem;
|
||
/* Side gutter ~matches the 0.5rem top/bottom padding so the hover box
|
||
sits evenly inset on all four sides. */
|
||
padding-left: 9px;
|
||
padding-right: 9px;
|
||
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.16);
|
||
}
|
||
|
||
/* Width does not change the concentric radius; the MCP menu uses the same
|
||
item radius + gutter, so it keeps the same container radius. */
|
||
.unsloth-plus-menu.mcp-menu[data-slot] {
|
||
border-radius: 22px !important;
|
||
}
|
||
|
||
/* One-line menus keep the standard menu shape (same radius as multi-line),
|
||
so a lone row doesn't balloon into a fully rounded pill. */
|
||
|
||
.dark .unsloth-plus-menu[data-slot] {
|
||
background-color: var(--card);
|
||
/* Shadow tinted to the page bg so it blends, not a dark halo. */
|
||
box-shadow: 0 4px 14px var(--background);
|
||
}
|
||
|
||
/* Compact items; also applied to portaled sub-content. */
|
||
.unsloth-plus-menu :is(
|
||
[data-slot="dropdown-menu-item"],
|
||
[data-slot="dropdown-menu-sub-trigger"]
|
||
) {
|
||
@apply gap-3 pl-3 pr-3 py-2 text-[14px];
|
||
cursor: pointer;
|
||
/* Pin hover-box radius so dark matches light (container radius minus the
|
||
side gutter keeps the curves concentric). */
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.unsloth-plus-menu [data-slot="dropdown-menu-label"] {
|
||
@apply pl-3 pr-3 py-1.5 text-[12px];
|
||
}
|
||
|
||
/* Active (green) items keep their primary text and icon color on hover. */
|
||
.unsloth-plus-menu [data-slot="dropdown-menu-item"].text-primary:is(:hover, :focus, :focus-visible, [data-highlighted]),
|
||
.unsloth-plus-menu [data-slot="dropdown-menu-item"].text-primary:is(:hover, :focus, :focus-visible, [data-highlighted]) svg {
|
||
color: var(--primary) !important;
|
||
}
|
||
|
||
/* Light hover: neutral grey, not the green accent. */
|
||
.unsloth-plus-menu :is(
|
||
[data-slot="dropdown-menu-item"],
|
||
[data-slot="dropdown-menu-sub-trigger"]
|
||
):is(:hover, :focus, :focus-visible, [data-highlighted], [data-state="open"]) {
|
||
background-color: rgba(0, 0, 0, 0.06) !important;
|
||
}
|
||
|
||
/* Dark hover: the accent nearly matches the surface, so use a clear overlay. */
|
||
.dark .unsloth-plus-menu :is(
|
||
[data-slot="dropdown-menu-item"],
|
||
[data-slot="dropdown-menu-sub-trigger"]
|
||
):is(:hover, :focus, :focus-visible, [data-highlighted], [data-state="open"]) {
|
||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||
}
|
||
|
||
/* Hover tints only the background; the item and every descendant (text, icons,
|
||
labels) keep their resting color, overriding Radix's focus:**:text-accent-
|
||
foreground. The active green rule above still wins via higher specificity. */
|
||
.unsloth-plus-menu :is(
|
||
[data-slot="dropdown-menu-item"],
|
||
[data-slot="dropdown-menu-sub-trigger"]
|
||
):is(:hover, :focus, :focus-visible, [data-highlighted], [data-state="open"]),
|
||
.unsloth-plus-menu :is(
|
||
[data-slot="dropdown-menu-item"],
|
||
[data-slot="dropdown-menu-sub-trigger"]
|
||
):is(:hover, :focus, :focus-visible, [data-highlighted], [data-state="open"]) * {
|
||
color: inherit !important;
|
||
}
|
||
|
||
.unsloth-plus-menu :is(
|
||
[data-slot="dropdown-menu-item"],
|
||
[data-slot="dropdown-menu-sub-trigger"]
|
||
)
|
||
svg {
|
||
width: 1.15rem;
|
||
height: 1.15rem;
|
||
}
|
||
|
||
/* Destructive items keep red text and a red-tinted hover, not the grey one. */
|
||
.unsloth-plus-menu [data-slot="dropdown-menu-item"][data-variant="destructive"],
|
||
.unsloth-plus-menu [data-slot="dropdown-menu-item"][data-variant="destructive"] * {
|
||
color: var(--destructive) !important;
|
||
}
|
||
.unsloth-plus-menu [data-slot="dropdown-menu-item"][data-variant="destructive"]:is(:hover, :focus, :focus-visible, [data-highlighted]) {
|
||
background-color: color-mix(in oklab, var(--destructive) 10%, transparent) !important;
|
||
}
|
||
|
||
/* Thinking menu: tighter gap; nowrap keeps "Preserve thinking" on one line
|
||
so the menu sizes to its content. */
|
||
.unsloth-thinking-menu :is(
|
||
[data-slot="dropdown-menu-item"],
|
||
[data-slot="dropdown-menu-sub-trigger"]
|
||
) {
|
||
@apply gap-1.5 pl-2.5 pr-2.5;
|
||
white-space: nowrap;
|
||
}
|
||
.artifact-panel-shell {
|
||
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.16);
|
||
}
|
||
|
||
.dark .artifact-panel-shell {
|
||
box-shadow: none;
|
||
}
|
||
|
||
.chat-artifact-split[data-artifact-layout-animating="true"] > [data-panel] {
|
||
transition:
|
||
flex-basis 260ms var(--ease-out-cubic),
|
||
flex-grow 260ms var(--ease-out-cubic),
|
||
flex-shrink 260ms var(--ease-out-cubic);
|
||
will-change: flex-basis, flex-grow;
|
||
}
|
||
|
||
.chat-artifact-pop-surface {
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
transform: scale(0.965) translateY(8px);
|
||
transform-origin: center center;
|
||
transition:
|
||
opacity 180ms var(--ease-out-cubic),
|
||
transform 220ms var(--ease-out-cubic);
|
||
will-change: opacity, transform;
|
||
}
|
||
|
||
.chat-artifact-pop-surface[data-artifact-surface-visible="true"] {
|
||
pointer-events: auto;
|
||
opacity: 1;
|
||
transform: scale(1) translateY(0);
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
html:not(.force-motion) .chat-artifact-pop-surface {
|
||
transition: none;
|
||
transform: none;
|
||
}
|
||
}
|
||
|
||
.artifact-card-shimmer {
|
||
background: linear-gradient(
|
||
105deg,
|
||
transparent 0%,
|
||
color-mix(in oklch, var(--muted-foreground) 4%, transparent) 40%,
|
||
color-mix(in oklch, var(--muted-foreground) 8%, transparent) 50%,
|
||
color-mix(in oklch, var(--muted-foreground) 4%, transparent) 60%,
|
||
transparent 100%
|
||
);
|
||
transform: translateX(-120%);
|
||
animation: artifact-card-shimmer 1.55s var(--ease-out-cubic) infinite;
|
||
}
|
||
|
||
.artifact-loading-line {
|
||
width: 48%;
|
||
background: color-mix(in oklch, var(--primary) 88%, transparent);
|
||
transform: translate3d(-125%, 0, 0) scaleX(0.78);
|
||
transform-origin: center center;
|
||
animation: artifact-loading-line 1.7s linear infinite;
|
||
}
|
||
|
||
.artifact-panel-shell::before,
|
||
.artifact-panel-shell::after {
|
||
content: "";
|
||
position: absolute;
|
||
z-index: 20;
|
||
pointer-events: none;
|
||
transition:
|
||
border-color 150ms var(--ease-out-cubic),
|
||
background-color 150ms var(--ease-out-cubic),
|
||
box-shadow 150ms var(--ease-out-cubic),
|
||
transform 150ms var(--ease-out-cubic);
|
||
}
|
||
|
||
.artifact-panel-shell::before {
|
||
inset: 0;
|
||
border: 2px solid transparent;
|
||
border-radius: inherit;
|
||
-webkit-mask: linear-gradient(90deg, #000 0 24px, transparent 24px);
|
||
mask: linear-gradient(90deg, #000 0 24px, transparent 24px);
|
||
}
|
||
|
||
.artifact-panel-shell::after {
|
||
top: 50%;
|
||
left: -2px;
|
||
height: 28px;
|
||
width: 4px;
|
||
border-radius: 999px;
|
||
background: transparent;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
[data-slot="resizable-handle"]:hover
|
||
+ [data-slot="resizable-panel"]
|
||
.artifact-panel-shell::before,
|
||
[data-slot="resizable-handle"]:active
|
||
+ [data-slot="resizable-panel"]
|
||
.artifact-panel-shell::before,
|
||
[data-slot="resizable-handle"][data-resize-handle-state="hover"]
|
||
+ [data-slot="resizable-panel"]
|
||
.artifact-panel-shell::before,
|
||
[data-slot="resizable-handle"][data-resize-handle-state="drag"]
|
||
+ [data-slot="resizable-panel"]
|
||
.artifact-panel-shell::before {
|
||
border-color: color-mix(in oklch, var(--primary) 58%, var(--border));
|
||
}
|
||
|
||
[data-slot="resizable-handle"]:hover
|
||
+ [data-slot="resizable-panel"]
|
||
.artifact-panel-shell::after,
|
||
[data-slot="resizable-handle"]:active
|
||
+ [data-slot="resizable-panel"]
|
||
.artifact-panel-shell::after,
|
||
[data-slot="resizable-handle"][data-resize-handle-state="hover"]
|
||
+ [data-slot="resizable-panel"]
|
||
.artifact-panel-shell::after,
|
||
[data-slot="resizable-handle"][data-resize-handle-state="drag"]
|
||
+ [data-slot="resizable-panel"]
|
||
.artifact-panel-shell::after {
|
||
background: color-mix(in oklch, var(--primary) 58%, var(--border));
|
||
box-shadow: none;
|
||
transform: translateY(-50%) scaleY(1.06);
|
||
}
|
||
|
||
@keyframes artifact-card-shimmer {
|
||
to {
|
||
transform: translateX(120%);
|
||
}
|
||
}
|
||
|
||
/* Indeterminate loading bar: a 1/3-width segment sweeping the track. */
|
||
.loading-bar-slide {
|
||
animation: loading-bar-slide 1.3s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes loading-bar-slide {
|
||
from {
|
||
transform: translateX(-110%);
|
||
}
|
||
to {
|
||
transform: translateX(420%);
|
||
}
|
||
}
|
||
|
||
@keyframes artifact-loading-line {
|
||
0% {
|
||
transform: translate3d(-125%, 0, 0) scaleX(0.78);
|
||
}
|
||
35% {
|
||
transform: translate3d(-18%, 0, 0) scaleX(0.96);
|
||
}
|
||
62% {
|
||
transform: translate3d(72%, 0, 0) scaleX(1.12);
|
||
}
|
||
82% {
|
||
transform: translate3d(132%, 0, 0) scaleX(1.26);
|
||
}
|
||
94% {
|
||
transform: translate3d(188%, 0, 0) scaleX(1.36);
|
||
}
|
||
100% {
|
||
transform: translate3d(220%, 0, 0) scaleX(1.42);
|
||
}
|
||
}
|
||
|
||
/* Fine-tuning Studio: equal default height, expandable when needed (md+) */
|
||
.min-h-studio-config-column {
|
||
@apply md:min-h-[520px];
|
||
}
|
||
|
||
.h-studio-config-column {
|
||
@apply md:h-[520px];
|
||
}
|
||
|
||
[data-streamdown="unordered-list"] {
|
||
list-style-type: disc;
|
||
list-style-position: outside;
|
||
padding-left: 1.25rem;
|
||
margin-block: 0.5rem;
|
||
}
|
||
|
||
[data-streamdown="ordered-list"] {
|
||
list-style-type: decimal;
|
||
list-style-position: outside;
|
||
padding-left: 1.25rem;
|
||
margin-block: 0.5rem;
|
||
}
|
||
|
||
[data-streamdown="list-item"] {
|
||
display: list-item;
|
||
}
|
||
|
||
/* Flatten code blocks: single border, language label, then code directly */
|
||
[data-streamdown="code-block-body"] {
|
||
border: none !important;
|
||
border-radius: 0 !important;
|
||
background: transparent !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.aui-thread-root [data-streamdown="code-block-body"] {
|
||
/* Keep overlay scrollbars below one-line code. */
|
||
padding-bottom: 0.625rem !important;
|
||
}
|
||
|
||
[data-streamdown="code-block"] {
|
||
gap: 0.25rem;
|
||
padding: 0.75rem 1rem;
|
||
border-radius: 1.5rem;
|
||
/* Wide lines must scroll inside the thread column, not widen past the composer (flex min-width:auto). */
|
||
max-width: 100%;
|
||
min-width: 0;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
[data-streamdown="code-block-header"] {
|
||
padding-left: 0;
|
||
}
|
||
|
||
.aui-thread-root [data-streamdown="code-block"] code > span::before {
|
||
content: none !important;
|
||
display: none !important;
|
||
margin: 0 !important;
|
||
width: 0 !important;
|
||
}
|
||
|
||
/* Chat thread: code slightly smaller by default; step up when the thread column is wide. */
|
||
.aui-thread-root [data-streamdown="code-block"] {
|
||
font-size: 0.8125rem;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.aui-thread-root [data-streamdown="code-block-header"] {
|
||
font-size: 0.6875rem;
|
||
}
|
||
|
||
@container (min-width: 36rem) {
|
||
.aui-thread-root [data-streamdown="code-block"] {
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.aui-thread-root [data-streamdown="code-block-header"] {
|
||
font-size: 0.75rem;
|
||
}
|
||
}
|
||
|
||
/* Chat: use the app sans stack for UI + prose. */
|
||
.aui-thread-root {
|
||
--font-heading: var(--font-sans);
|
||
font-family: var(--font-sans);
|
||
}
|
||
|
||
/* Normalize the trailing margin of the last element inside an
|
||
assistant message so the gap above the action bar is the same
|
||
regardless of whether the response ends with a paragraph
|
||
(margin-bottom: 0 by Tailwind preflight) or a streamdown block
|
||
like a code fence (margin-bottom: 1rem from `my-4`). Browser
|
||
block layout doesn't collapse trailing margin into a sibling
|
||
container, so we zero it explicitly along the deepest
|
||
`:last-child` path. Streamdown wraps content in several
|
||
nested divs, so code blocks land 4–5 levels deep — the chain
|
||
walks that depth without using a generic descendant `:last-child`
|
||
(which would also zero last-paragraph-in-list margins). The
|
||
visible gap is then driven solely by the footer's own `mt-*`. */
|
||
.aui-assistant-message-content > *:last-child,
|
||
.aui-assistant-message-content > *:last-child > *:last-child,
|
||
.aui-assistant-message-content > *:last-child > *:last-child > *:last-child,
|
||
.aui-assistant-message-content > *:last-child > *:last-child > *:last-child > *:last-child,
|
||
.aui-assistant-message-content > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child,
|
||
.aui-assistant-message-content > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
/* The streamdown code-block wrapper carries `my-4` (16px top + 16px
|
||
bottom margin). The bottom margin is what stretches the gap
|
||
between the code-block box and the action-bar below it on a
|
||
trailing code block. We zero `margin-bottom` on every code block
|
||
inside an assistant message body. CSS margin collapsing handles
|
||
the non-trailing case correctly: when a code block is followed by
|
||
a paragraph (or any block with `my-4` mt), the rendered gap is
|
||
`max(prev.mb, next.mt)` — so removing the code block's `mb` still
|
||
leaves the next element's `mt-4` as the visible spacer. The only
|
||
case actually affected is the trailing position (no next element),
|
||
where `mb=0` collapses the gap to just the footer's `mt-2`,
|
||
matching a text-trailing message. The wrapper's own
|
||
`padding-bottom` is preserved, so the last line of code keeps its
|
||
natural breathing room inside the box. */
|
||
.aui-assistant-message-content [data-streamdown="code-block"] {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
/* Keep monospace for code fences and inline code (not KaTeX). The custom
|
||
Code font (--custom-code-font) overrides when set, else Fira Code. */
|
||
.aui-thread-root [data-streamdown="code-block"] pre,
|
||
.aui-thread-root [data-streamdown="code-block"] code {
|
||
font-family: var(--custom-code-font, "Fira Code", ui-monospace, monospace);
|
||
}
|
||
|
||
.aui-thread-root :where(p, li, td, th, blockquote, h1, h2, h3, h4, h5, h6) code {
|
||
font-family: var(--custom-code-font, "Fira Code", ui-monospace, monospace);
|
||
}
|
||
|
||
/* Align fenced code blocks with the main chat column even when nested in lists. */
|
||
.aui-thread-root [data-streamdown="list-item"] > [data-streamdown="code-block"],
|
||
.aui-thread-root [data-streamdown="list-item"] [data-streamdown="code-block"] {
|
||
margin-left: -1.25rem;
|
||
width: calc(100% + 1.25rem);
|
||
max-width: calc(100% + 1.25rem);
|
||
}
|
||
|
||
.dark .aui-thread-root [data-streamdown="code-block"] {
|
||
/* Streamdown `pre` uses `dark:bg-[var(--shiki-dark-bg,...)]`; keep one surface on the outer shell. */
|
||
--shiki-dark-bg: transparent;
|
||
background: var(--color-code-block);
|
||
border: 1px solid oklch(1 0 0 / 0.08);
|
||
}
|
||
|
||
/* Streamdown code-block stability hardening.
|
||
*
|
||
* Two streamdown internals cause a visible "reload"-style flicker on
|
||
* trailing code blocks the moment streaming ends. Both are addressable
|
||
* purely in CSS without patching the library:
|
||
*
|
||
* 1. `content-visibility: auto` + `contain-intrinsic-size: auto 200px`
|
||
* (set inline by streamdown's <ot> wrapper). The IntersectionObserver
|
||
* that gates content-visibility flips rendered height between the
|
||
* 200px placeholder and the actual code-block height as the block
|
||
* sits near the viewport edge during stream finalization. The
|
||
* height jump is small but visible, and the rendering optimization
|
||
* is unnecessary for chat content (thread length is bounded). We
|
||
* force `visible` to keep the rendered height of code blocks fully
|
||
* determined by their actual content at all times.
|
||
*
|
||
* 2. `[data-sd-animate]` (`sd-fadeIn`, 150ms). Streamdown wraps each
|
||
* streaming text segment in a span carrying this attribute. When
|
||
* shiki re-renders the code body at stream end, those wrapper
|
||
* spans get re-keyed and the fade animation replays across the
|
||
* whole block at once — exactly the visual that reads as the chat
|
||
* area "reloading for a frame." We disable the animation only
|
||
* inside code blocks; prose token fade-in elsewhere is untouched. */
|
||
.aui-thread-root [data-streamdown="code-block"] {
|
||
content-visibility: visible !important;
|
||
contain-intrinsic-size: none !important;
|
||
}
|
||
.aui-thread-root [data-streamdown="code-block"] [data-sd-animate] {
|
||
animation: none !important;
|
||
}
|
||
}
|
||
|
||
/* No border line; same drop shadow as the composer (.unsloth-composer-surface).
|
||
!important because Sonner injects its base rules at runtime. */
|
||
[data-sonner-toast][data-styled='true'] {
|
||
padding: 12px 18px !important;
|
||
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.16) !important;
|
||
}
|
||
|
||
[data-sonner-toast][data-styled='true']:has([data-close-button]):not(:has([data-cancel])) {
|
||
padding-right: 48px !important;
|
||
}
|
||
|
||
[data-sonner-toast][data-styled='true']:has([data-cancel]):has([data-close-button]) {
|
||
padding-right: 88px !important;
|
||
}
|
||
|
||
[data-sonner-toast][data-styled='true'].chat-model-load-toast,
|
||
[data-sonner-toast][data-styled='true'].chat-model-loaded-toast {
|
||
padding-top: 14px !important;
|
||
padding-bottom: 14px !important;
|
||
}
|
||
|
||
/* Downloading state shows a progress bar as the last row; give it a little
|
||
extra breathing room below the bar. */
|
||
[data-sonner-toast][data-styled='true'].chat-model-load-toast:has([role='progressbar']) {
|
||
padding-bottom: 18px !important;
|
||
}
|
||
|
||
[data-sonner-toast][data-styled='true'].chat-model-loaded-toast [data-close-button] {
|
||
top: calc(50% - 0.25px) !important;
|
||
transform: translateY(-50%) !important;
|
||
}
|
||
|
||
[data-sonner-toast][data-styled='true'].chat-model-load-toast:not(:has([data-cancel])) [data-close-button] {
|
||
top: calc(50% - 0.25px) !important;
|
||
transform: translateY(-50%) !important;
|
||
}
|
||
|
||
[data-sonner-toast][data-styled="true"]:has([data-cancel]) [data-cancel] {
|
||
position: absolute !important;
|
||
right: 36px !important;
|
||
top: 50% !important;
|
||
transform: translateY(-50%) !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
/* Dark toasts share the chatbox surface color (.chat-composer-surface
|
||
uses var(--card) in dark); the composer shadow lifts them off the page. */
|
||
.dark [data-sonner-toast][data-styled='true'] {
|
||
background-color: var(--card) !important;
|
||
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.16) !important;
|
||
}
|
||
|
||
/* Selectable toast text; non-selectable toast buttons. */
|
||
[data-sonner-toast],
|
||
[data-sonner-toast] [data-content],
|
||
[data-sonner-toast] [data-title],
|
||
[data-sonner-toast] [data-description],
|
||
[data-sonner-toast] p,
|
||
[data-sonner-toast] span {
|
||
-webkit-user-select: text;
|
||
user-select: text;
|
||
}
|
||
|
||
/* Text cursor only on actual text nodes, so the toast container does
|
||
not pretend to be an input. */
|
||
[data-sonner-toast] [data-title],
|
||
[data-sonner-toast] [data-description],
|
||
[data-sonner-toast] p,
|
||
[data-sonner-toast] span {
|
||
cursor: text;
|
||
}
|
||
|
||
[data-sonner-toast] button,
|
||
[data-sonner-toast] [data-button],
|
||
[data-sonner-toast] [data-cancel],
|
||
[data-sonner-toast] [data-close-button] {
|
||
-webkit-user-select: none;
|
||
user-select: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Flat scrollbar chrome */
|
||
* {
|
||
scrollbar-width: thin;
|
||
scrollbar-color: oklch(0.5 0 0 / 0.54) transparent;
|
||
}
|
||
|
||
.dark * {
|
||
scrollbar-color: oklch(0.67 0 0 / 0.5) transparent;
|
||
}
|
||
|
||
/* Webkit (Chrome, Safari, Edge) */
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
background: transparent;
|
||
border: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
border: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
::-webkit-scrollbar-track-piece {
|
||
background: transparent;
|
||
border: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: oklch(0.5 0 0 / 0.54);
|
||
border-radius: 9999px;
|
||
border: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
::-webkit-scrollbar-corner {
|
||
background: transparent;
|
||
border: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
::-webkit-scrollbar-button {
|
||
display: none;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.dark *::-webkit-scrollbar-thumb {
|
||
background: oklch(0.67 0 0 / 0.5);
|
||
}
|
||
|
||
/* Composer textarea: keep the scroll thumb faint until the user hovers or
|
||
drags the thumb itself, so a tall draft never shows a heavy dark rail. */
|
||
.composer-input,
|
||
.unsloth-composer-input {
|
||
scrollbar-color: oklch(0.5 0 0 / 0.16) transparent;
|
||
}
|
||
|
||
.composer-input::-webkit-scrollbar-thumb,
|
||
.unsloth-composer-input::-webkit-scrollbar-thumb {
|
||
background: oklch(0.5 0 0 / 0.16);
|
||
}
|
||
|
||
.composer-input::-webkit-scrollbar-thumb:hover,
|
||
.unsloth-composer-input::-webkit-scrollbar-thumb:hover,
|
||
.composer-input::-webkit-scrollbar-thumb:active,
|
||
.unsloth-composer-input::-webkit-scrollbar-thumb:active {
|
||
background: oklch(0.5 0 0 / 0.45);
|
||
}
|
||
|
||
.dark .composer-input,
|
||
.dark .unsloth-composer-input {
|
||
scrollbar-color: oklch(0.72 0 0 / 0.18) transparent;
|
||
}
|
||
|
||
.dark .composer-input::-webkit-scrollbar-thumb,
|
||
.dark .unsloth-composer-input::-webkit-scrollbar-thumb {
|
||
background: oklch(0.72 0 0 / 0.18);
|
||
}
|
||
|
||
.dark .composer-input::-webkit-scrollbar-thumb:hover,
|
||
.dark .unsloth-composer-input::-webkit-scrollbar-thumb:hover,
|
||
.dark .composer-input::-webkit-scrollbar-thumb:active,
|
||
.dark .unsloth-composer-input::-webkit-scrollbar-thumb:active {
|
||
background: oklch(0.72 0 0 / 0.5);
|
||
}
|
||
|
||
/* Sidebars, settings and search: hide the scroll thumb at rest and reveal it
|
||
only while the area is hovered, so the rail never sits visible over content. */
|
||
.sidebar-scroll-fade,
|
||
.run-settings-scroll,
|
||
.hover-scrollbar {
|
||
scrollbar-color: transparent transparent;
|
||
}
|
||
|
||
.sidebar-scroll-fade::-webkit-scrollbar-thumb,
|
||
.run-settings-scroll::-webkit-scrollbar-thumb,
|
||
.hover-scrollbar::-webkit-scrollbar-thumb {
|
||
background: transparent;
|
||
}
|
||
|
||
.sidebar-scroll-fade:hover,
|
||
.run-settings-scroll:hover,
|
||
.hover-scrollbar:hover {
|
||
scrollbar-color: oklch(0.5 0 0 / 0.4) transparent;
|
||
}
|
||
|
||
.sidebar-scroll-fade:hover::-webkit-scrollbar-thumb,
|
||
.run-settings-scroll:hover::-webkit-scrollbar-thumb,
|
||
.hover-scrollbar:hover::-webkit-scrollbar-thumb {
|
||
background: oklch(0.5 0 0 / 0.4);
|
||
}
|
||
|
||
.dark .sidebar-scroll-fade:hover,
|
||
.dark .run-settings-scroll:hover,
|
||
.dark .hover-scrollbar:hover {
|
||
scrollbar-color: oklch(0.72 0 0 / 0.4) transparent;
|
||
}
|
||
|
||
.dark .sidebar-scroll-fade:hover::-webkit-scrollbar-thumb,
|
||
.dark .run-settings-scroll:hover::-webkit-scrollbar-thumb,
|
||
.dark .hover-scrollbar:hover::-webkit-scrollbar-thumb {
|
||
background: oklch(0.72 0 0 / 0.4);
|
||
}
|
||
|
||
/* Run settings: always reserve the scrollbar gutter so the header close
|
||
button keeps its position whether or not the scrollbar is showing. */
|
||
.run-settings-scroll {
|
||
scrollbar-gutter: stable;
|
||
}
|
||
|
||
/* Chat viewport: solid track matching sidebar so the scrollbar reads as a
|
||
full-height rail flush to the right edge, without a separate decorative strip. */
|
||
.aui-thread-viewport {
|
||
scrollbar-color: oklch(0.5 0 0 / 0.54) var(--sidebar);
|
||
/* Reserve scrollbar space always so absolute-positioned overlays (topbar)
|
||
can stop flush with the gutter edge without covering the scrollbar. */
|
||
scrollbar-gutter: stable;
|
||
}
|
||
|
||
/* Marker class applied only to actual streaming-thread viewports
|
||
(see ThreadPrimitive.Viewport in components/assistant-ui/thread.tsx).
|
||
Scoped separately from `.aui-thread-viewport` because that class is
|
||
reused elsewhere for shared scrollbar styling on non-streaming scroll
|
||
areas; the stabilizer must only attach to viewports the
|
||
useIntentAwareAutoScroll hook actually drives. */
|
||
.aui-stream-viewport {
|
||
/* Scroll stabilizer: compensates for transient scrollHeight shrinks
|
||
(most visibly, shiki re-highlighting a trailing code block the
|
||
instant streaming ends). The useIntentAwareAutoScroll hook sets
|
||
this variable to the exact pixel amount of any content shrink
|
||
observed while the follow window is active; that padding keeps
|
||
scrollHeight monotonic, so the browser never auto-clamps scrollTop,
|
||
so no jump is ever painted. Released back to 0 as content
|
||
genuinely grows past its prior high-water mark, and on user
|
||
detach so the bottom stays flush when they come back. */
|
||
padding-bottom: var(--aui-scroll-stabilizer, 0px);
|
||
}
|
||
|
||
.dark .aui-thread-viewport {
|
||
scrollbar-color: oklch(0.72 0 0 / 0.25) #23252a;
|
||
}
|
||
|
||
.dark .aui-thread-viewport::-webkit-scrollbar-thumb {
|
||
background: oklch(0.72 0 0 / 0.25);
|
||
}
|
||
|
||
.aui-thread-viewport::-webkit-scrollbar-track {
|
||
background: var(--sidebar);
|
||
}
|
||
|
||
.dark .aui-thread-viewport::-webkit-scrollbar-track {
|
||
background: #23252a;
|
||
}
|
||
|
||
|
||
/* Search list: re-enable the native scrollbar (CommandList defaults to no-scrollbar). */
|
||
.cmd-native-scrollbar {
|
||
scrollbar-width: thin;
|
||
-ms-overflow-style: auto;
|
||
}
|
||
.cmd-native-scrollbar::-webkit-scrollbar {
|
||
display: block;
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
/*---break---*/
|
||
|
||
@layer base {
|
||
* {
|
||
@apply border-border outline-ring/50;
|
||
}
|
||
|
||
body {
|
||
@apply bg-background text-foreground;
|
||
}
|
||
}
|
||
|
||
::view-transition-old(root),
|
||
::view-transition-new(root) {
|
||
animation: none;
|
||
mix-blend-mode: normal;
|
||
}
|
||
|
||
/* Keep Sonner close button inside the toast and pin to theme tokens (--gray2 hover ignores data-sonner-theme). */
|
||
[data-sonner-toast][data-styled="true"] [data-close-button] {
|
||
top: 8px !important;
|
||
transform: none !important;
|
||
background: var(--popover) !important;
|
||
color: var(--popover-foreground) !important;
|
||
border-color: transparent !important;
|
||
}
|
||
|
||
/* Keep the (borderless) close button blended with the dark toast surface. */
|
||
.dark [data-sonner-toast][data-styled="true"] [data-close-button] {
|
||
background: var(--card) !important;
|
||
}
|
||
|
||
[data-sonner-toast][data-styled="true"] [data-close-button] svg {
|
||
stroke-width: 2.25;
|
||
}
|
||
[data-sonner-toast][data-styled="true"]:hover [data-close-button]:hover {
|
||
background: var(--muted) !important;
|
||
color: var(--popover-foreground) !important;
|
||
border-color: transparent !important;
|
||
}
|
||
|
||
.generated-image-loading-card {
|
||
position: relative;
|
||
overflow: hidden;
|
||
contain: paint;
|
||
}
|
||
|
||
.generated-image-loading-wave {
|
||
position: relative;
|
||
display: grid;
|
||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||
gap: 14px;
|
||
width: min(66%, 18rem);
|
||
padding: 1.5rem;
|
||
border-radius: 1.5rem;
|
||
}
|
||
|
||
.generated-image-loading-dot {
|
||
width: 7px;
|
||
height: 7px;
|
||
border-radius: 9999px;
|
||
background: color-mix(in oklch, var(--muted-foreground) 82%, var(--primary));
|
||
opacity: 0.12;
|
||
transform: translate3d(0, 4px, 0) scale(0.72);
|
||
animation: generated-image-dot-wave 1850ms var(--ease-out-quart) infinite;
|
||
animation-delay: calc((var(--dot-row) * 72ms) + (var(--dot-col) * 72ms));
|
||
will-change: transform, opacity;
|
||
}
|
||
|
||
@keyframes generated-image-dot-wave {
|
||
0%,
|
||
22%,
|
||
100% {
|
||
opacity: 0.1;
|
||
transform: translate3d(0, 4px, 0) scale(0.72);
|
||
}
|
||
|
||
46% {
|
||
opacity: 0.46;
|
||
transform: translate3d(0, -3px, 0) scale(0.96);
|
||
}
|
||
|
||
66% {
|
||
opacity: 0.2;
|
||
transform: translate3d(0, 0, 0) scale(0.82);
|
||
}
|
||
}
|
||
|
||
/*
|
||
* prefers-reduced-motion: honour the OS-level "reduce motion" preference.
|
||
* Tailwind animate-in/out, Radix open/close transforms, infinite shine/pulse
|
||
* keyframes, and Framer Motion layout transitions all ignore the media query
|
||
* by default. Forcing every animation/transition to ~0ms collapses zoom-ins,
|
||
* slide-ins, and continuous shimmers to a single frame without removing the
|
||
* end state. Hover colour changes become instant rather than fading, which is
|
||
* the documented WCAG outcome (motion is "minimised, not removed").
|
||
*
|
||
* .animate-spin and generated image loading dots are the exceptions: loading
|
||
* indicators across Studio (tool execution loaders, sonner toasts, Tauri
|
||
* startup / update screens, the <Spinner /> primitive, and image generation
|
||
* cards). Freezing them removes the only visual signal that work is in flight,
|
||
* so they keep animating.
|
||
*/
|
||
@media (prefers-reduced-motion: reduce) {
|
||
/* html.force-motion (Reduce motion set to Off) opts back out of the
|
||
OS preference, so these rules only apply without it. */
|
||
html:not(.force-motion) *,
|
||
html:not(.force-motion) *::before,
|
||
html:not(.force-motion) *::after {
|
||
animation-duration: 0.01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 0.01ms !important;
|
||
scroll-behavior: auto !important;
|
||
}
|
||
|
||
html:not(.force-motion) .animate-spin {
|
||
animation-duration: 1.5s !important;
|
||
animation-iteration-count: infinite !important;
|
||
}
|
||
|
||
html:not(.force-motion) .generated-image-loading-dot {
|
||
animation-duration: 1850ms !important;
|
||
animation-iteration-count: infinite !important;
|
||
}
|
||
|
||
html:not(.force-motion) .loading-bar-slide {
|
||
animation-duration: 1.3s !important;
|
||
animation-iteration-count: infinite !important;
|
||
}
|
||
|
||
/* Keep the plus/x morph animating under reduced motion (small rotation,
|
||
like the spinners above). */
|
||
html:not(.force-motion) .unsloth-composer-plus svg {
|
||
transition-duration: 250ms !important;
|
||
}
|
||
}
|
||
|
||
/*
|
||
* Tool-call chevron visibility:
|
||
* - A solo tool call (not wrapped in a multi-tool group) always shows its
|
||
* collapsible chevron.
|
||
* - When the tool call is part of a multi-tool group (.aui-tool-group-root),
|
||
* the chevron stays hidden and only reveals on hover / keyboard focus.
|
||
*/
|
||
.aui-tool-fallback-trigger-chevron {
|
||
opacity: 1;
|
||
}
|
||
.aui-tool-group-root .aui-tool-fallback-trigger-chevron {
|
||
opacity: 0;
|
||
}
|
||
.aui-tool-group-root .aui-tool-fallback-trigger:hover .aui-tool-fallback-trigger-chevron,
|
||
.aui-tool-group-root .aui-tool-fallback-trigger:focus-visible .aui-tool-fallback-trigger-chevron {
|
||
opacity: 1;
|
||
}
|