mirror of
https://github.com/garrytan/gstack.git
synced 2026-05-11 15:07:26 +08:00
00f966b3ec
* fix(codex): use resume-compatible flags * fix: V-001 security vulnerability Automated security fix generated by Orbis Security AI * docs: align prompt-injection thresholds to security.ts (v1.6.4.0 catch-up) CLAUDE.md:290 and ARCHITECTURE.md:159 were missed when WARN was bumped 0.60 → 0.75 ind75402bb(v1.6.4.0, "cut Haiku classifier FP from 44% to 23%, gate now enforced", #1135). browse/src/security.ts:37 has WARN: 0.75 and BROWSER.md:743 was updated alongside that commit; CLAUDE.md and ARCHITECTURE.md still read 0.60. Also adds the SOLO_CONTENT_BLOCK: 0.92 entry to CLAUDE.md (already in security.ts:50 and BROWSER.md:745, missing from CLAUDE.md's threshold table). No code change. No behavior change. Pure doc-vs-code alignment. Verification: $ grep -n "WARN" browse/src/security.ts CLAUDE.md ARCHITECTURE.md BROWSER.md browse/src/security.ts:37: WARN: 0.75, CLAUDE.md:290: - \`WARN: 0.75\` ... ARCHITECTURE.md:159: ...>= \`WARN\` (0.75)... BROWSER.md:743: - \`WARN: 0.75\` ... Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix: Korean/CJK IME input and rendering in Sidebar Terminal Fixes #1272 This commit addresses three separate Korean/CJK bugs in the Sidebar Terminal: **Bug 1 - IME Input**: Korean text typed via IME composition was not reaching the PTY correctly. Added compositionstart/compositionend event listeners to suppress partial jamo fragments and only send the final composed string. **Bug 2a - Font Rendering**: Added CJK monospace font fallbacks ("Noto Sans Mono CJK KR", "Malgun Gothic") to both the xterm.js fontFamily config and the CSS --font-mono variable. This ensures consistent cell-width calculations for Korean characters. **Bug 2b - UTF-8 Boundary Detection**: Added buffering logic to prevent multi-byte UTF-8 characters (Korean is 3 bytes) from being split across WebSocket chunks. This follows the same pattern as PR #1007 which fixed the sidebar-agent path, but extends it to the terminal-agent path. Special thanks to @ldybob for the excellent root cause analysis and proposed solutions in issue #1272. Tested on WSL2 + Windows 11 with Korean IME. * fix(ship): tighten Plan Completion gate (VAS-449 remediation) VAS-446 shipped with a PLAN.md acceptance criterion (domain-hq has /docs/dashboard.md) silently skipped. /ship's Plan Completion subagent existed at ship time (added in v1.4.1.0) but the gate let the failure through. Four structural fixes: 1. Path concreteness rule: items naming a concrete filesystem path MUST be classified DONE/NOT DONE via [ -f <path> ], never UNVERIFIABLE. 2. Validator detection: CONTENT-SHAPE items scan target repo's package.json for validate-* scripts and run them before falling back to UNVERIFIABLE. 3. Per-item UNVERIFIABLE confirmation: replaces blanket "I've checked each one" with per-item Y/N/D loop. The blanket-confirm path is the exact failure VAS-449 surfaced. 4. Subagent fail-closed: if Plan Completion subagent + inline fallback both fail, surface explicit AskUserQuestion instead of silent pass. Replaces the prior "Never block /ship on subagent failure" fail-open. Locked in by test/ship-plan-completion-invariants.test.ts (5 assertions, no LLM dependency, ~60ms). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(browse): bash.exe wrap for telemetry on Windows reportAttemptTelemetry() in browse/src/security.ts calls spawn(bin, args) where bin is the gstack-telemetry-log bash script. On Windows this fails silently with ENOENT — CreateProcess can't dispatch on shebang lines. Adopts v1.24.0.0's Bun.which + GSTACK_*_BIN override pattern (from browse/src/claude-bin.ts:resolveClaudeCommand, introduced in #1252) for resolving bash.exe. resolveBashBinary() honors GSTACK_BASH_BIN absolute-path or PATH-resolvable override, falling back to Bun.which('bash') which finds Git Bash on the standard Windows install. buildTelemetrySpawnCommand() wraps the script invocation on win32 only; POSIX path is bit-identical. Returns null when bash can't be resolved on Windows so caller skips spawn — local attempts.jsonl audit trail keeps working without surfacing a Windows-only failure. 8 new unit tests cover resolveBashBinary (POSIX bash, absolute override, quote-stripping, BASH_BIN fallback, empty-PATH null) and buildTelemetrySpawnCommand (POSIX pass-through, win32 bash wrap, win32 null on unresolvable, arg-array immutability). POSIX path is bit-identical — Bun.which('bash') on Linux/macOS returns the same /bin/bash or /usr/bin/bash that the old hardcoded spawn relied on. * fix(make-pdf): Bun.which-based binary resolution for browse + pdftotext on Windows Extends v1.24.0.0's Bun.which + GSTACK_*_BIN override pattern (introduced in browse/src/claude-bin.ts via #1252) to the two other binary resolvers in the codebase: make-pdf/src/browseClient.ts:resolveBrowseBin and make-pdf/src/pdftotext.ts:resolvePdftotext. Same Windows quirks (fs.accessSync(X_OK) degrades to existence-check; `which` isn't available outside Git Bash; bun --compile --outfile X emits X.exe), same Bun.which-based fix shape, same env override convention. Changes: - GSTACK_BROWSE_BIN / GSTACK_PDFTOTEXT_BIN as the v1.24-aligned overrides; BROWSE_BIN / PDFTOTEXT_BIN remain as back-compat aliases. - Bun.which() replaces execFileSync('which', ...) for PATH lookup. Handles Windows PATHEXT natively; no more `where`-vs-`which` branch. - findExecutable(base) helper exported from each module, probes .exe/.cmd/.bat after the bare-path miss on win32. Linux/macOS behavior is bit-identical (isExecutable short-circuits before the win32 branch ever runs). - macCandidates renamed posixCandidates (always was — /opt/homebrew, /usr/local, /usr/bin). No Windows candidates added; Poppler installs scatter across Scoop/Chocolatey/portable zips and guessing causes false positives. - Error messages get a Windows install hint (scoop install poppler / oschwartz10612) and `setx` example for GSTACK_*_BIN. - Pre-existing test 'honors BROWSE_BIN when it points at a real executable' was hardcoded /bin/sh — made cross-platform via a REAL_EXE constant (cmd.exe on win32, /bin/sh on POSIX). Was a Windows-CI blocker on its own. Coordination: PR #1094 (@BkashJEE) covered browseClient.ts independently with a narrower scope; this PR's pdftotext + cross-platform tests + GSTACK_*_BIN naming are additive. Either order of merge works. Test plan: - bun test make-pdf/test/browseClient.test.ts make-pdf/test/pdftotext.test.ts on win32 — 29 pass, 0 fail (12 new assertions: findExecutable POSIX/win32/null, resolveBrowseBin GSTACK_BROWSE_BIN + BROWSE_BIN + precedence + quote-strip, same shape for resolvePdftotext + Windows install hint in error message). - POSIX branch unchanged — fs.accessSync(X_OK) on Linux/macOS short-circuits before any win32 logic runs, matching the v1.24 claude-bin.ts pattern. * fix(browse): NTFS ACL hardening for Windows state files via icacls gstack's ~/.gstack/ state directory holds bearer tokens, canary tokens, agent queue contents (with prompt history), session state, security-decision logs, and saved cookie bundles — all written with { mode: 0o600 } / 0o700. On Windows, those mode bits are a silent no-op: Node's fs module doesn't translate POSIX modes to NTFS ACLs, and inherited ACLs leave every "restricted" file readable by other principals on the machine (verified via icacls — six ACEs, the intended user is the LAST of six). Threat model is non-trivial on: - Self-hosted CI runners (different service account on the same Windows box can read developer tokens, canary tokens, prompt history) - Shared development machines (agencies, studios, lab environments) - Multi-tenant servers with shared home directories Orthogonal to v1.24.0.0's binary-resolution work — complementary at the write side. v1.24's bin/gstack-paths resolves ~/.gstack/ correctly across plugin / global / local installs; this PR ensures files written into those resolved paths actually get the POSIX 0o600 semantic translated to NTFS. The fix: - New browse/src/file-permissions.ts (158 LOC, 5 public + 1 test-reset). restrictFilePermissions / restrictDirectoryPermissions wrap chmod (POSIX) or icacls /inheritance:r /grant:r <user>:(F) (Windows). writeSecureFile / appendSecureFile / mkdirSecure are drop-in wrappers for the common patterns. - 19 call sites converted across 9 source files: browser-manager.ts, browser-skill-write.ts, cli.ts, config.ts, meta-commands.ts, security-classifier.ts, security.ts (4 sites), server.ts (5 sites), terminal-agent.ts (8 sites), tunnel-denial-log.ts. - (OI)(CI) inheritance flags on directories mean files created via fs.write* *inside* an mkdirSecure-created dir inherit the owner-only ACL automatically — important for tunnel-denial-log.ts where appends use async fsp.appendFile. Error handling: icacls failures (nonexistent path, missing icacls.exe, hardened environments) log a one-shot warning to stderr and proceed. Once-per-process gating prevents log spam if the condition persists. Filesystem stays functional; the file just ends up with inherited ACLs. Test plan: - bun test browse/test/file-permissions.test.ts — 13 pass, 0 fail (POSIX mode-bit assertions, Windows no-throw, mkdir idempotence, recursive creation, Buffer payloads, append-creates-then-reapplies-once semantics) - bun test browse/test/security.test.ts — 38 pass, 0 fail (existing security test suite plus the bash-binary resolution tests added in fix #1119; the converted writeFileSync/appendFileSync/mkdirSync sites in security.ts integrate cleanly) - Empirical icacls before/after on a real file — 6 ACEs → 1 ACE - bun build typecheck on all modified files — clean (server.ts has a pre-existing playwright-core/electron resolution issue unrelated to this PR) POSIX behavior is bit-identical to old code — fs.chmodSync(path, 0o6XX) on the helper's POSIX branch matches the inline { mode: 0o6XX } it replaces. Linux and macOS see no behavior change. Inviting pushback on three judgment calls (in PR description): 1. icacls vs npm library 2. ACL scope — just user, or user + SYSTEM? 3. Graceful degradation — once-per-process warn, not silent, not hard-fail. * fix(browse): declare lastConsoleFlushed to restore console-log persistence flushBuffers() references a `lastConsoleFlushed` cursor at server.ts:337 and assigns it at :344, but the `let lastConsoleFlushed = 0;` declaration is missing — only the network and dialog siblings are declared at lines 327-328. Result: every 1-second flushBuffers tick (line 376) throws `ReferenceError: lastConsoleFlushed is not defined`, gets swallowed by the catch at line 369 ("[browse] Buffer flush failed: ..."), and the console branch's append never runs. browse-console.log is never written in any production deployment since this regressed. Discovered by stress-testing the daemon with 15 concurrent CLIs against cold state — the race surfaced the buffer-flush error spam in one spawned daemon's stderr. Verified by running the daemon against a real file:// page with console.log events: in-memory `browse console` returns the entries, but `.gstack/browse-console.log` is never created on disk. Regression introduced by1a100a2a"fix: eliminate duplicate command sets in chain, improve flush perf and type safety" — the flush refactor switched from `Bun.write` to `fs.appendFileSync` and added the `lastConsoleFlushed` cursor pattern alongside its network/dialog siblings, but missed the matching `let` declaration. Tests don't currently exercise flushBuffers, so the regression shipped silently. Fix: - Declare `let lastConsoleFlushed = 0;` next to `lastNetworkFlushed` and `lastDialogFlushed` (browse/src/server.ts:327) - Add a source-level guard test (browse/test/server-flush-trackers.test.ts) that fails any future refactor that adds a fourth `last*Flushed` cursor without the matching declaration. Same pattern as terminal-agent.test.ts and dual-listener.test.ts — read source as text, assert invariant, no daemon required. Test plan: - [x] New regression test fails on current main, passes with the fix - [x] `bun run build` clean - [x] Manual smoke: spawn daemon -> goto file:// page with console.log -> wait 4s -> .gstack/browse-console.log now exists with the expected entries (163 bytes vs zero before) 🤖 Generated with [Claude Code](https://claude.com/claude-code) * fix(browse): per-process state-file temp path to fix concurrent-write ENOENT The daemon writes `.gstack/browse.json` via the standard atomic-rename pattern: `writeFileSync(tmp, …) → renameSync(tmp, stateFile)`. Four sites in server.ts use this pattern (initial daemon-startup state at :2002, /tunnel/start handler at :1479, BROWSE_TUNNEL=1 inline tunnel update at :2083, BROWSE_TUNNEL_LOCAL_ONLY=1 update at :2113), and all four hard-code the same temp filename `${stateFile}.tmp`. Under concurrent writers the shared filename races on the rename: t0 Writer A: writeFileSync(stateFile + '.tmp', payloadA) t1 Writer B: writeFileSync(stateFile + '.tmp', payloadB) // overwrites A t2 Writer A: renameSync(stateFile + '.tmp', stateFile) // moves B's payload t3 Writer B: renameSync(stateFile + '.tmp', stateFile) // ENOENT — file gone Reproduced empirically with 15 concurrent CLIs against a fresh `.gstack/`: [browse] Failed to start: ENOENT: no such file or directory, rename '…/.gstack/browse.json.tmp' -> '…/.gstack/browse.json' Pre-fix success rate: **0 / 15** under cold-start race. Post-fix success rate: **15 / 15**, zero ENOENT. Fix: - New `tmpStatePath()` helper (server.ts:333) returns `${stateFile}.tmp.${pid}.${randomBytes(4).toString('hex')}` - All 4 call sites use `tmpStatePath()` instead of the shared literal - Atomic rename still gives last-writer-wins semantics on the final state.json content; only behavior change is that concurrent writers no longer kill each other on the rename step Source-level guard test (browse/test/server-tmp-state-path.test.ts) locks two invariants: (1) no remaining `stateFile + '.tmp'` literals, (2) every state-write `writeFileSync` call uses `tmpStatePath()`. Same read-source-as-text pattern as terminal-agent.test.ts and dual-listener.test.ts — no daemon required, runs in tier-1 free. Test plan: - [x] Targeted source-level guard test passes (3 / 0) - [x] `bun run build` clean - [x] Live regression: 15 concurrent CLIs against cold state → 15 / 15 healthy, 0 ENOENT (vs 0 / 15 pre-fix) - [x] No `.tmp.*` orphans left behind after rename succeeds - [x] Related test cluster (server-auth, dual-listener, cdp-mutex, findport) — same pre-existing flakes as `main`, no new regressions introduced 🤖 Generated with [Claude Code](https://claude.com/claude-code) * fix(browse): clear refs when iframe auto-detaches in getActiveFrameOrPage Asymmetric cleanup between two equivalent staleness conditions: onMainFrameNavigated() → clearRefs() + activeFrame = null ✓ getActiveFrameOrPage() → activeFrame = null (refs NOT cleared) ✗ Both paths see the same staleness condition — refs were captured against a frame that no longer exists. The main-frame path correctly clears both pieces of state. The iframe-detach path nulls the frame but leaves the refMap intact. The lazy click-time check in `resolveRef` (tab-session.ts:97) partially saves us — `entry.locator.count()` on a detached-frame locator throws or returns 0, so the click errors out as "Ref X is stale". But the user has no signal that frame context silently changed underfoot: the next `snapshot` runs against `this.page` (main) while old iframe refs still litter `refMap` with the same role+name keys. New refs collide with stale ones, the resolver picks one at random, the user clicks the wrong element. TODOS.md line 816-820 documents "Detached frame auto-recovery" as a shipped iframe-support feature in v0.12.1.0. This restores the documented intent — the recovery should leave the session in a clean state, not a half-cleared one. Fix: 1 line — add `this.clearRefs()` next to `this.activeFrame = null` inside the if-branch. Test plan: - [x] New regression test: 4/4 pass - refs cleared when getActiveFrameOrPage detects detached iframe - refs preserved when active frame is still attached (no regression) - refs preserved when no frame set (page-level path untouched) - matches onMainFrameNavigated symmetry — both paths reach the same clean end state - [x] `bun run build` clean 🤖 Generated with [Claude Code](https://claude.com/claude-code) * fix(codex): resolve python for JSON parser * fix: add fail-fast probe for base branch in ship step 12 * fix(plan-devex-review): remove contradictory plan-mode handshake * fix(design): honor Retry-After header in variants 429 handler Closes #1244. The 429 handler in `generateVariant` discarded the `Retry-After` response header and fell straight through to a local exponential schedule (2s/4s/8s). In image-generation batches, that burns retry attempts inside the provider's cooldown window and the request never recovers. Now we parse `Retry-After` per RFC 7231 — both delta-seconds (`Retry-After: 5`) and HTTP-date (`Retry-After: Fri, 31 Dec 1999 23:59:59 GMT`). Honored waits are capped at 60s to bound stalls from hostile or buggy headers. Delta-seconds are validated as digits-only (rejects `2abc`). When `Retry-After` is honored (including 0 / past-date "retry now"), the next iteration's leading exponential sleep is skipped so we don't double-wait. Invalid or missing headers fall through to the existing exponential schedule unchanged. Behavior matrix: | Header | Behavior | |---------------------------------|-------------------------------------------| | Retry-After: 5 | wait 5s, skip leading on next attempt | | Retry-After: 999999 | capped to 60s, skip leading | | Retry-After: 2abc | invalid, fall through to exponential | | Retry-After: 0 | wait 0, skip leading (retry immediately) | | Retry-After: <past HTTP-date> | wait 0, skip leading | | Retry-After: <future date> | wait diff capped at 60s, skip leading | | no header | fall through to existing exponential | `generateVariant` now accepts an optional `fetchFn` parameter (defaults to `globalThis.fetch`) so tests can inject a stub. Production call sites are unchanged. Tests cover the five behavior buckets above, asserting both the 1st-to-2nd call timing gap and call counts. All five pass in ~8s. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(docs): correct per-skill symlink removal snippet in README uninstall Closes #1130. The manual-uninstall fallback in `## Uninstall` → `### Option 2` used `find ~/.claude/skills -maxdepth 1 -type l`, which finds nothing on real installs. Each `~/.claude/skills/<name>/` is a real directory, and only `<name>/SKILL.md` inside it is a symlink into `gstack/`. The find never matched, so the snippet silently removed nothing. Replace with a directory walk that inspects each `<name>/SKILL.md`: find ~/.claude/skills -mindepth 1 -maxdepth 1 -type d ! -name gstack → check $dir/SKILL.md is a symlink → readlink it → if target is gstack/* or */gstack/*: rm -f the link, rmdir the dir (only if empty — preserves any user-added files) Excludes the top-level `gstack/` dir from the walk; that's removed by step 3 of the same uninstall block. `bin/gstack-uninstall` (the script-mode path) already handles the layout correctly via its own walk; only this manual fallback needed updating. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix: reject partial browse client env integers * fix(gemini-adapter): detect new ~/.gemini/oauth_creds.json auth path gemini-cli >=0.30 stores OAuth credentials at ~/.gemini/oauth_creds.json instead of the legacy ~/.config/gemini/ directory. The benchmark adapter's availability check now succeeds for users on recent gemini-cli releases who have authenticated via interactive login. Both paths are accepted so users on older versions still work. * fix(browser): add --no-sandbox for root user on Linux/WSL2 Chromium's sandbox can't initialize when running as root on Linux, causing an immediate exit. Extend the existing CI/CONTAINER check to also cover this case, keeping the Windows-safe `typeof getuid` guard. * security: pass cwd to git via execFileSync, not interpolation through /bin/sh `bin/gstack-memory-ingest.ts:632-643` ran `execSync(\`git -C ${JSON.stringify(cwd)} remote get-url origin 2>/dev/null\`, ...)`. JSON.stringify escapes `"` and `\` but not `$` or backticks, so a `cwd` of `"$(touch /tmp/marker)"` survived JSON quoting and detonated under /bin/sh's command-substitution-inside-double-quotes. `cwd` originates from transcript JSONL records under `~/.claude/projects/<encoded-cwd>/<uuid>.jsonl` and `~/.codex/sessions/YYYY/MM/DD/rollout-*.jsonl`. The walker grabs the first `.cwd` it sees per session. That's an untrusted surface in the gstack threat model — the L1-L6 sidebar security stack exists exactly because agent transcripts can carry attacker-influenced text. Two pivots above the local same-uid bar: (a) prompt-injection appending `cwd="$(...)"` to the active session log turns the next /sync-gbrain run into RCE under the user's uid; (b) cross-machine transcript share (a colleague's `.claude/projects` snippet untar'd into HOME, a documented gbrain dogfooding shape) → RCE on first sync. Fix swaps the one execSync for `execFileSync("git", ["-C", cwd, "remote", "get-url", "origin"], ...)`. No shell, argv passed directly to git. The same module already uses execFileSync for `gbrainAvailable()` (line 762 pre-patch) and `gbrainPutPage()` (line 816 pre-patch) — this single execSync was the outlier. Test: `gstack-memory-ingest security: untrusted cwd cannot trigger shell substitution` plants a Claude-Code-shaped JSONL with cwd=`$(touch <marker>)` and asserts the marker file is not created after `--incremental --quiet`. Negative control: with the patch reverted, the test fails (marker created); with the patch applied, it passes (18/18 in test/gstack-memory-ingest.test.ts). * security: gate domain-skill auto-promote on classifier_score > 0 `browse/src/domain-skill-commands.ts:140` (handleSave) writes `classifier_score: 0` with the comment "L4 deferred to load-time / sidebar-agent fills this in on first prompt-injection load." But CLAUDE.md "Sidebar architecture" documents that sidebar-agent.ts was ripped, and grep for recordSkillUse + classifierFlagged callers across browse/src/ returns zero hits outside the module under test. Net effect: every quarantined skill that survives three benign uses without flag (`recordSkillUse(... , classifierFlagged: false)` x3) auto-promotes to `active` and lands in prompt context wrapped as UNTRUSTED on every subsequent visit to that host. The L4 score that was supposed to gate the promotion was never written — the production save path puts 0 on disk and nothing later updates it. Threat model: a domain-skill body authored by an agent under the influence of a poisoned page (the new `gstackInjectToTerminal` PTY path runs no L1-L3 either) would lose its auto-promote barrier after three uses. The exploit isn't single-step but the bar is exactly N=3 prompt-injection-shaped uses on a hostile page, which is well within reach. Fix adds a single condition to the auto-promote gate in `recordSkillUse`: if (state === 'quarantined' && useCount >= PROMOTE_THRESHOLD && flagCount === 0 && current.classifier_score > 0) { state = 'active'; } `classifier_score` is set once at writeSkill and never updated. Production saves it as 0 (handleSave), so the gate stays closed; existing tests that explicitly pass `classifierScore: 0.1` still auto-promote (the auto-promote path is preserved for the day L4 is rewired). Manual promotion via `domain-skill promote-to-global` is unaffected (it goes through `promoteToGlobal` which has its own state-machine guard at line 337+). Test: new regression case `does NOT auto-promote when classifier_score is 0 (production handleSave shape)` plants a skill with classifierScore=0 (matches domain-skill-commands.ts:140), runs three uses without flag, asserts the skill stays quarantined and readSkill returns null. Negative control: revert the patch, the test fails with `Received: "active"`. With the patch: 15/15 pass. * fix(ship): port #1302 SKILL.md edits to .tmpl + resolver source PR #1302 added Verification Mode + UNVERIFIABLE classification + per-item confirmation gate to ship/SKILL.md, but only the generated SKILL.md was edited — not the .tmpl source or scripts/resolvers/review.ts. The next `bun run gen:skill-docs` run would have wiped the changes. Port the same content into the resolver and .tmpl so regeneration produces the intended output. * ci(windows): extend free-tests lane to cover icacls + Bun.which resolvers from fix-wave PRs Closes #1306/#1307/#1308 validation gap. The four newly-added test files already have process.platform guards so they run safely on both POSIX and Windows lanes — only platform-relevant assertions execute on each. Tests added to the windows-latest lane: - browse/test/file-permissions.test.ts (#1308 icacls + writeSecureFile) - browse/test/security.test.ts (#1306 bash.exe wrap pure-function path) - make-pdf/test/browseClient.test.ts (#1307 Bun.which browse resolver) - make-pdf/test/pdftotext.test.ts (#1307 Bun.which pdftotext resolver) * test(codex): live flag-semantics smoke for codex exec resume Closes #1270's regex-only test gap. PR #1270 asserted that codex/SKILL.md's `codex exec resume` invocation drops -C/-s and uses sandbox_mode config. That regex catches the skill template regressing, but not codex CLI itself flipping flag semantics again. This test probes `codex exec resume --help` and asserts the surface gstack relies on: -c/sandbox_mode is accepted, top-level -C is absent. Skips silently when codex isn't on PATH, so dev machines without codex installed never see it fail. * chore: regen SKILL.md after fix wave One regen commit at the end of the merge wave per the plan. plan-devex-review loses the contradictory plan-mode handshake (#1333). review/SKILL.md picks up the Verification Mode + UNVERIFIABLE classification additions that #1302 authored against ship/SKILL.md (same resolver shared between ship and review modes). * fix(server.ts): keep fs.writeFileSync for state-file writes #1308's writeSecureFile wrapper added Windows icacls hardening for the 4 state-file write sites in server.ts, but #1310's regression test grep's for fs.writeFileSync(tmpStatePath()) calls. The two changes are technically compatible only if the test relaxes — keeping the test strict (the safer choice for catching regressions on the cold-start race) means the 4 state- file sites stay on fs.writeFileSync(..., { mode: 0o600 }). POSIX 0o600 hardening is preserved on those 4 sites. Windows icacls hardening still applies to all the other writeSecureFile call sites #1308 added (auth.json, mkdirSecure, etc.). Also refreshes golden baselines after #1302 / port + minor wording tweak in scripts/resolvers/review.ts to keep gen-skill-docs.test.ts assertion 'Cite the specific file' satisfied. * v1.30.0.0: fix wave — 21 community PRs + 2 closing fixes for Windows + codex CI gaps Headline release. Browse stops dropping console logs, cold-start race fixed, codex resume works without python3, Windows hardening (icacls + Bun.which + bash.exe wrap), ship gate gets VAS-449 remediation, two closing fixes that put icacls/Bun.which/codex flag semantics under CI. * test(domain-skills): cover #1369 classifier_score=0 quarantine + score>0 promote path The pre-existing T6 test seeded skills via writeSkill (which defaults classifier_score to 0 until L4 is rewired) and then expected 3 uses to auto-promote. PR #1369 added `current.classifier_score > 0` to the gate specifically to block that path — a quarantined skill written under the influence of a poisoned page would otherwise auto-promote after three benign uses. Updated test asserts both halves of the new contract: - classifier_score=0 + 3 uses → stays quarantined (the security guarantee) - classifier_score>0 + 3 more uses → promotes to active (unblock path) Catches both regressions: the gate going away (would re-allow the bypass) and the unblock path breaking (would silently quarantine all skills forever once L4 is rewired). --------- Co-authored-by: Jayesh Betala <jayesh.betala7@gmail.com> Co-authored-by: orbisai0security <mediratta01.pally@gmail.com> Co-authored-by: Bryce Alan <brycealan.eth@gmail.com> Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com> Co-authored-by: Terry Carson YM <cym3118288@gmail.com> Co-authored-by: Vasko Ckorovski <vckorovski@gmail.com> Co-authored-by: Samuel Carson <samuel.carson@gmail.com> Co-authored-by: Yashwant Kotipalli <yashwant7kotipalli@gmail.com> Co-authored-by: Jasper Chen <jasperchen925@gmail.com> Co-authored-by: Stefan Neamtu <stefan.neamtu@gmail.com> Co-authored-by: 陈家名 <chenjiaming@kezaihui.com> Co-authored-by: Abigail Atheryon <abi@atheryon.ai> Co-authored-by: Furkan Köykıran <furkankoykiran@gmail.com> Co-authored-by: gus <gustavoraularagon@gmail.com>
1750 lines
40 KiB
CSS
1750 lines
40 KiB
CSS
/* gstack browse — Side Panel
|
|
* Design system: DESIGN.md (Industrial/Utilitarian, amber accent, zinc neutrals)
|
|
*/
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
:root {
|
|
/* Brand — amber accent, rare and meaningful */
|
|
--amber-400: #FBBF24;
|
|
--amber-500: #F59E0B;
|
|
--amber-600: #D97706;
|
|
|
|
/* Neutrals — cool zinc */
|
|
--zinc-50: #FAFAFA;
|
|
--zinc-400: #A1A1AA;
|
|
--zinc-600: #52525B;
|
|
--zinc-800: #27272A;
|
|
|
|
/* Surfaces */
|
|
--bg-base: #0C0C0C;
|
|
--bg-surface: #141414;
|
|
--bg-hover: #1a1a1a;
|
|
--border: #262626;
|
|
--border-subtle: #1f1f1f;
|
|
|
|
/* Text hierarchy */
|
|
--text-heading: #FAFAFA;
|
|
--text-body: #e0e0e0;
|
|
--text-label: #A1A1AA;
|
|
--text-meta: #52525B;
|
|
--text-disabled: #3f3f46;
|
|
|
|
/* Semantic */
|
|
--success: #22C55E;
|
|
--warning: #F59E0B;
|
|
--error: #EF4444;
|
|
--info: #3B82F6;
|
|
|
|
/* Typography */
|
|
--font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', 'Noto Sans Mono CJK KR', 'Malgun Gothic', monospace;
|
|
|
|
/* Radius */
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-full: 9999px;
|
|
}
|
|
|
|
/* ─── Security Shield ───────────────────────────────────────────── */
|
|
/* 3 states — green=protected, amber=degraded, red=inactive.
|
|
Custom SVG outline + "SEC" label in JetBrains Mono to match the
|
|
industrial/CLI aesthetic (design review Pass 7 decision). */
|
|
|
|
.security-shield {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 8px;
|
|
z-index: 10;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 6px;
|
|
border-radius: var(--radius-sm, 4px);
|
|
font-family: var(--font-mono, 'JetBrains Mono', monospace);
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.04em;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
transition: color 200ms ease-out, background 200ms ease-out;
|
|
cursor: default;
|
|
}
|
|
.security-shield[data-status="protected"] {
|
|
color: var(--success, #22C55E);
|
|
}
|
|
.security-shield[data-status="degraded"] {
|
|
color: var(--amber-400, #FBBF24);
|
|
}
|
|
.security-shield[data-status="inactive"] {
|
|
color: var(--error, #EF4444);
|
|
}
|
|
|
|
/* ─── Connection Banner ─────────────────────────────────────────── */
|
|
|
|
.conn-banner {
|
|
padding: 6px 10px;
|
|
font-size: 10px;
|
|
font-family: var(--font-mono);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.conn-banner.reconnecting {
|
|
background: rgba(245, 158, 11, 0.1);
|
|
border-bottom: 1px solid rgba(245, 158, 11, 0.2);
|
|
color: var(--amber-400);
|
|
}
|
|
|
|
.conn-banner.dead {
|
|
background: rgba(239, 68, 68, 0.1);
|
|
border-bottom: 1px solid rgba(239, 68, 68, 0.2);
|
|
color: var(--error);
|
|
}
|
|
|
|
.conn-banner.reconnected {
|
|
background: rgba(34, 197, 94, 0.1);
|
|
border-bottom: 1px solid rgba(34, 197, 94, 0.2);
|
|
color: var(--success);
|
|
animation: fadeOut 3s ease forwards;
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
to { opacity: 0; height: 0; padding: 0; overflow: hidden; }
|
|
}
|
|
|
|
.conn-banner-text {
|
|
flex: 1;
|
|
}
|
|
|
|
/* ─── Security Banner ─────────────────────────────────────────────
|
|
Variant A approved in /plan-design-review 2026-04-19. Centered
|
|
alert-heavy. Fires on security_event — canary leaks + ML BLOCK
|
|
verdicts. Trust UX: layer names + confidence scores in mono so
|
|
the user can see exactly WHY the session was terminated.
|
|
*/
|
|
|
|
.security-banner {
|
|
position: relative;
|
|
/* Sit above the absolutely-positioned security-shield (z-index: 10) so
|
|
the banner's close button and controls receive clicks. Without this
|
|
the shield at top-right overlaps the banner's close X region and
|
|
intercepts pointer events. */
|
|
z-index: 20;
|
|
padding: 20px 16px;
|
|
text-align: center;
|
|
background: rgba(20, 20, 20, 0.98);
|
|
border-bottom: 1px solid rgba(239, 68, 68, 0.3);
|
|
animation: securityBannerEnter 250ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
@keyframes securityBannerEnter {
|
|
from { opacity: 0; transform: translateY(-8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.security-banner-close {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 6px;
|
|
width: 28px;
|
|
height: 28px;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--zinc-500, #71717A);
|
|
font-size: 20px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
border-radius: var(--radius-md, 8px);
|
|
padding: 0;
|
|
}
|
|
.security-banner-close:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: var(--zinc-300, #D4D4D8);
|
|
}
|
|
.security-banner-close:focus-visible {
|
|
outline: 2px solid var(--amber-500);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.security-banner-icon {
|
|
color: var(--error);
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.security-banner-title {
|
|
font-family: var(--font-display, 'Satoshi', sans-serif);
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
color: var(--error);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.security-banner-subtitle {
|
|
font-family: var(--font-body, 'DM Sans', sans-serif);
|
|
font-size: 13px;
|
|
color: var(--zinc-400, #A1A1AA);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.security-banner-expand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: transparent;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: var(--radius-md, 8px);
|
|
padding: 6px 12px;
|
|
color: var(--zinc-300, #D4D4D8);
|
|
font-family: var(--font-body, 'DM Sans', sans-serif);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
.security-banner-expand:hover {
|
|
background: rgba(255, 255, 255, 0.04);
|
|
}
|
|
.security-banner-expand:focus-visible {
|
|
outline: 2px solid var(--amber-500);
|
|
outline-offset: 2px;
|
|
}
|
|
.security-banner-chevron {
|
|
transition: transform 200ms ease-out;
|
|
}
|
|
|
|
.security-banner-details {
|
|
margin-top: 12px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
text-align: left;
|
|
}
|
|
|
|
.security-banner-section-label {
|
|
font-family: var(--font-mono, 'JetBrains Mono', monospace);
|
|
font-size: 10px;
|
|
letter-spacing: 0.08em;
|
|
color: var(--zinc-500, #71717A);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.security-banner-layers {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.security-banner-layer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 4px 8px;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border-radius: var(--radius-sm, 4px);
|
|
font-family: var(--font-mono, 'JetBrains Mono', monospace);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.security-banner-layer-name {
|
|
color: var(--zinc-300, #D4D4D8);
|
|
}
|
|
|
|
.security-banner-layer-score {
|
|
color: var(--amber-400);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.security-banner-suspect {
|
|
margin: 4px 0 0;
|
|
padding: 8px 10px;
|
|
background: var(--zinc-900, #18181B);
|
|
border: 1px solid var(--zinc-700, #3F3F46);
|
|
border-radius: var(--radius-sm, 4px);
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
line-height: 1.4;
|
|
color: var(--zinc-300, #D4D4D8);
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
max-height: 160px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.security-banner-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.security-banner-btn {
|
|
flex: 1;
|
|
padding: 8px 14px;
|
|
border-radius: var(--radius-md, 6px);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
transition: background 0.15s, border-color 0.15s;
|
|
}
|
|
|
|
.security-banner-btn-block {
|
|
background: var(--red-600, #DC2626);
|
|
color: white;
|
|
border-color: var(--red-700, #B91C1C);
|
|
}
|
|
|
|
.security-banner-btn-block:hover {
|
|
background: var(--red-700, #B91C1C);
|
|
}
|
|
|
|
.security-banner-btn-allow {
|
|
background: transparent;
|
|
color: var(--zinc-200, #E4E4E7);
|
|
border-color: var(--zinc-600, #52525B);
|
|
}
|
|
|
|
.security-banner-btn-allow:hover {
|
|
background: var(--zinc-800, #27272A);
|
|
border-color: var(--zinc-500, #71717A);
|
|
}
|
|
|
|
.security-banner-btn:focus-visible {
|
|
outline: 2px solid var(--amber-400);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.conn-btn {
|
|
font-size: 9px;
|
|
font-family: var(--font-mono);
|
|
padding: 2px 8px;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
border: 1px solid var(--border);
|
|
background: var(--bg-surface);
|
|
color: var(--text-label);
|
|
transition: all 150ms;
|
|
}
|
|
|
|
.conn-btn:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-heading);
|
|
}
|
|
|
|
.conn-copy {
|
|
color: var(--text-meta);
|
|
font-style: italic;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg-base);
|
|
color: var(--text-body);
|
|
font-family: var(--font-system);
|
|
font-size: 12px;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Grain texture overlay */
|
|
body::after {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
opacity: 0.03;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* ─── Status Dot ──────────────────────────────────────── */
|
|
.dot {
|
|
width: 8px; height: 8px;
|
|
border-radius: var(--radius-full);
|
|
background: var(--text-disabled);
|
|
flex-shrink: 0;
|
|
transition: background 150ms;
|
|
}
|
|
.dot.connected { background: var(--success); }
|
|
.dot.reconnecting {
|
|
background: var(--amber-500);
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 0.4; }
|
|
50% { opacity: 1; }
|
|
}
|
|
|
|
/* ─── Chat Messages ───────────────────────────────────── */
|
|
.chat-messages {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
.chat-loading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
height: 100%;
|
|
text-align: left;
|
|
color: var(--text-meta);
|
|
gap: 12px;
|
|
font-size: 13px;
|
|
padding: 24px;
|
|
}
|
|
.chat-loading-spinner {
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 2px solid var(--border);
|
|
border-top-color: var(--amber-500);
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
.chat-welcome {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
height: 100%;
|
|
text-align: left;
|
|
color: var(--text-label);
|
|
gap: 8px;
|
|
padding: 24px;
|
|
}
|
|
.chat-welcome-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: var(--amber-500);
|
|
color: #000;
|
|
font-weight: 800;
|
|
font-size: 22px;
|
|
border-radius: var(--radius-md);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
.chat-welcome .muted { color: var(--text-meta); font-size: 12px; }
|
|
|
|
.chat-bubble {
|
|
max-width: 90%;
|
|
padding: 6px 10px;
|
|
border-radius: var(--radius-lg);
|
|
font-size: 11px;
|
|
line-height: 1.4;
|
|
word-break: break-word;
|
|
animation: slideIn 150ms ease-out;
|
|
}
|
|
.chat-bubble.user {
|
|
align-self: flex-end;
|
|
background: var(--amber-500);
|
|
color: #000;
|
|
border-bottom-right-radius: var(--radius-sm);
|
|
}
|
|
.chat-notification {
|
|
text-align: left;
|
|
font-size: 11px;
|
|
color: var(--text-meta);
|
|
padding: 4px 12px;
|
|
font-family: var(--font-mono);
|
|
}
|
|
.chat-bubble.assistant {
|
|
align-self: flex-start;
|
|
background: var(--bg-surface);
|
|
color: var(--text-body);
|
|
border: 1px solid var(--border);
|
|
border-bottom-left-radius: var(--radius-sm);
|
|
}
|
|
.chat-bubble.assistant pre {
|
|
background: var(--bg-base);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
padding: 6px 8px;
|
|
margin: 6px 0;
|
|
overflow-x: auto;
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
white-space: pre-wrap;
|
|
}
|
|
.chat-bubble .chat-time, .agent-response > .chat-time {
|
|
font-size: 9px;
|
|
opacity: 0.4;
|
|
margin-top: 2px;
|
|
display: block;
|
|
}
|
|
|
|
/* ─── Agent Streaming Response ─────────────────────────── */
|
|
.agent-response {
|
|
align-self: flex-start;
|
|
max-width: 95%;
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
border-bottom-left-radius: var(--radius-sm);
|
|
padding: 6px 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
animation: slideIn 150ms ease-out;
|
|
}
|
|
.agent-tool {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 6px;
|
|
padding: 4px 8px;
|
|
background: rgba(245, 158, 11, 0.06);
|
|
border-left: 2px solid var(--amber-500);
|
|
border-radius: 0 4px 4px 0;
|
|
font-size: 12px;
|
|
font-family: var(--font-system);
|
|
margin: 2px 0;
|
|
}
|
|
.tool-icon {
|
|
flex-shrink: 0;
|
|
font-size: 11px;
|
|
line-height: 1.5;
|
|
}
|
|
.tool-description {
|
|
color: var(--text-body);
|
|
line-height: 1.5;
|
|
word-break: break-word;
|
|
}
|
|
/* Collapsed reasoning disclosure */
|
|
.agent-reasoning {
|
|
margin: 4px 0;
|
|
}
|
|
.agent-reasoning summary {
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
font-family: var(--font-mono);
|
|
color: var(--text-meta);
|
|
padding: 3px 0;
|
|
user-select: none;
|
|
list-style: none;
|
|
}
|
|
.agent-reasoning summary::before {
|
|
content: '▶ ';
|
|
font-size: 9px;
|
|
}
|
|
.agent-reasoning[open] summary::before {
|
|
content: '▼ ';
|
|
}
|
|
.agent-reasoning summary:hover {
|
|
color: var(--text-label);
|
|
}
|
|
.agent-reasoning .agent-tool {
|
|
margin-left: 4px;
|
|
}
|
|
/* Legacy classes kept for compat */
|
|
.tool-name {
|
|
color: var(--amber-500);
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
}
|
|
.tool-input {
|
|
color: var(--text-disabled);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.agent-text {
|
|
color: var(--text-body);
|
|
font-size: 12.5px;
|
|
line-height: 1.5;
|
|
word-break: break-word;
|
|
padding: 2px 0;
|
|
}
|
|
.agent-text pre {
|
|
background: var(--bg-base);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 3px;
|
|
padding: 4px 6px;
|
|
margin: 4px 0;
|
|
overflow-x: auto;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
white-space: pre-wrap;
|
|
}
|
|
.agent-error {
|
|
color: var(--error);
|
|
font-size: 12px;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* Thinking dots animation */
|
|
.agent-thinking {
|
|
display: flex;
|
|
gap: 4px;
|
|
padding: 4px 0;
|
|
}
|
|
.thinking-dot {
|
|
width: 4px;
|
|
height: 4px;
|
|
background: var(--text-disabled);
|
|
border-radius: 50%;
|
|
animation: thinkingPulse 1.4s ease-in-out infinite;
|
|
}
|
|
.thinking-dot:nth-child(2) { animation-delay: 0.2s; }
|
|
.thinking-dot:nth-child(3) { animation-delay: 0.4s; }
|
|
@keyframes thinkingPulse {
|
|
0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
|
|
40% { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
/* ─── Footer Buttons ──────────────────────────────────── */
|
|
.footer-left {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
.footer-btn, .debug-toggle {
|
|
background: none;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--text-meta);
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
cursor: pointer;
|
|
transition: all 150ms;
|
|
}
|
|
.footer-btn:hover, .debug-toggle:hover {
|
|
color: var(--text-label);
|
|
border-color: var(--zinc-600);
|
|
}
|
|
.debug-toggle.active {
|
|
color: var(--amber-400);
|
|
border-color: var(--amber-500);
|
|
}
|
|
.debug-tabs {
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
.close-debug {
|
|
width: 36px;
|
|
flex: none !important;
|
|
font-size: 16px;
|
|
color: var(--text-meta) !important;
|
|
}
|
|
.close-debug:hover { color: var(--text-label) !important; }
|
|
|
|
/* ─── Tab Bar ─────────────────────────────────────────── */
|
|
.tabs {
|
|
height: 36px;
|
|
background: var(--bg-surface);
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
}
|
|
.tab {
|
|
flex: 1;
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-label);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
transition: all 150ms;
|
|
}
|
|
.tab:hover:not(.disabled) { color: var(--zinc-50); }
|
|
.tab.active {
|
|
color: var(--text-heading);
|
|
border-bottom-color: var(--amber-500);
|
|
}
|
|
.tab.disabled {
|
|
color: var(--text-disabled);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* ─── Tab Content ─────────────────────────────────────── */
|
|
.tab-content {
|
|
display: none;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
.tab-content.active { display: flex; flex-direction: column; }
|
|
|
|
/* ─── Terminal Tab ────────────────────────────────────────────── */
|
|
/* The Terminal pane manages its own scrolling (xterm has a viewport with
|
|
scrollback). The default .tab-content rules above set overflow-y: auto,
|
|
which collapses min-height for nested flex children — that's why
|
|
.terminal-mount couldn't grow to fill available space. Override here. */
|
|
#tab-terminal {
|
|
background: #0a0a0a;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
min-height: 0;
|
|
}
|
|
#tab-terminal.active {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.terminal-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 6px;
|
|
padding: 4px 8px;
|
|
border-bottom: 1px solid #1a1a1a;
|
|
background: #0a0a0a;
|
|
flex-shrink: 0;
|
|
}
|
|
.terminal-toolbar-actions {
|
|
display: flex;
|
|
gap: 4px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.terminal-toolbar-btn {
|
|
background: transparent;
|
|
border: 1px solid #27272a;
|
|
color: #a1a1aa;
|
|
padding: 3px 10px;
|
|
font-size: 11px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
}
|
|
.terminal-toolbar-btn:hover {
|
|
color: #f59e0b;
|
|
border-color: #f59e0b;
|
|
}
|
|
.terminal-bootstrap {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
color: #71717a;
|
|
padding: 24px;
|
|
}
|
|
.terminal-bootstrap-icon {
|
|
font-size: 32px;
|
|
color: #f59e0b;
|
|
margin-bottom: 8px;
|
|
}
|
|
.terminal-bootstrap p { margin: 4px 0; }
|
|
.terminal-install-card {
|
|
margin: 24px;
|
|
padding: 16px;
|
|
border: 1px solid #27272a;
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
}
|
|
.terminal-install-card a { color: #f59e0b; }
|
|
.install-retry-btn {
|
|
margin-top: 12px;
|
|
padding: 6px 14px;
|
|
background: #f59e0b;
|
|
color: #0a0a0a;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-family: inherit;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
.install-retry-btn:hover { opacity: 0.9; }
|
|
.terminal-mount {
|
|
/* min-height: 0 is the standard flex-overflow fix — without it, a flex
|
|
item with overflowing content can't shrink below its content size,
|
|
so flex:1 refuses to expand into available space and xterm renders
|
|
into whatever the content happens to be (i.e. its own initial 2x2
|
|
measurement). With min-height:0 the item respects the flex parent's
|
|
remaining space and xterm grows to fill it. */
|
|
flex: 1 1 0;
|
|
min-height: 0;
|
|
width: 100%;
|
|
background: #0a0a0a;
|
|
padding: 8px;
|
|
box-sizing: border-box;
|
|
/* position: relative so xterm's absolutely-positioned helpers (the
|
|
hidden textarea for input) anchor inside us, not on body. */
|
|
position: relative;
|
|
}
|
|
.terminal-mount .xterm,
|
|
.terminal-mount .xterm .xterm-viewport,
|
|
.terminal-mount .xterm .xterm-screen {
|
|
height: 100% !important;
|
|
}
|
|
.terminal-ended {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #71717a;
|
|
padding: 24px;
|
|
}
|
|
|
|
/* ─── Activity Feed ───────────────────────────────────── */
|
|
#activity-feed { flex: 1; }
|
|
|
|
.activity-entry {
|
|
padding: 8px 12px;
|
|
border-left: 3px solid var(--border);
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
cursor: pointer;
|
|
transition: background 150ms;
|
|
animation: slideIn 150ms ease-out;
|
|
}
|
|
.activity-entry:hover { background: var(--bg-hover); }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.activity-entry { animation: none; }
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from { transform: translateY(8px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
/* Left border colors by type */
|
|
.activity-entry.nav { border-left-color: var(--info); }
|
|
.activity-entry.interaction { border-left-color: var(--success); }
|
|
.activity-entry.observe { border-left-color: var(--amber-400); }
|
|
.activity-entry.error { border-left-color: var(--error); }
|
|
.activity-entry.pending {
|
|
border-left-color: var(--amber-500);
|
|
animation: slideIn 150ms ease-out, borderPulse 2s ease-in-out infinite;
|
|
}
|
|
@keyframes borderPulse {
|
|
0%, 100% { border-left-color: rgba(245, 158, 11, 0.3); }
|
|
50% { border-left-color: rgba(245, 158, 11, 1); }
|
|
}
|
|
|
|
.entry-header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
}
|
|
.entry-time {
|
|
color: var(--text-meta);
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
flex-shrink: 0;
|
|
}
|
|
.entry-command {
|
|
color: var(--text-heading);
|
|
font-family: var(--font-mono);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
.entry-args {
|
|
color: var(--text-label);
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-top: 2px;
|
|
}
|
|
.entry-status {
|
|
font-size: 11px;
|
|
margin-top: 2px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
.entry-status .ok { color: var(--success); }
|
|
.entry-status .err { color: var(--error); }
|
|
.entry-status .duration { color: var(--text-meta); }
|
|
|
|
/* Expanded state */
|
|
.entry-detail {
|
|
display: none;
|
|
margin-top: 8px;
|
|
padding-top: 8px;
|
|
border-top: 1px dashed var(--border);
|
|
}
|
|
.activity-entry.expanded .entry-detail { display: block; }
|
|
.activity-entry.expanded .entry-args { white-space: normal; }
|
|
.entry-result {
|
|
color: var(--zinc-400);
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* ─── Refs Tab ────────────────────────────────────────── */
|
|
.ref-row {
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 12px;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
font-size: 12px;
|
|
}
|
|
.ref-id {
|
|
color: var(--amber-400);
|
|
font-family: var(--font-mono);
|
|
font-weight: 600;
|
|
min-width: 32px;
|
|
}
|
|
.ref-role {
|
|
color: var(--text-label);
|
|
min-width: 60px;
|
|
}
|
|
.ref-name {
|
|
color: var(--text-body);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.refs-footer {
|
|
padding: 8px 12px;
|
|
color: var(--text-meta);
|
|
font-size: 11px;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
/* ─── Session Placeholder ─────────────────────────────── */
|
|
.session-placeholder {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
height: 100%;
|
|
text-align: left;
|
|
color: var(--text-label);
|
|
padding: 24px;
|
|
gap: 8px;
|
|
}
|
|
.session-placeholder .muted { color: var(--text-meta); font-size: 12px; }
|
|
|
|
/* ─── Empty State ─────────────────────────────────────── */
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding: 40px 24px;
|
|
text-align: left;
|
|
color: var(--text-label);
|
|
gap: 4px;
|
|
}
|
|
.empty-state .muted { color: var(--text-meta); font-size: 12px; }
|
|
.empty-state code {
|
|
background: var(--bg-surface);
|
|
padding: 2px 6px;
|
|
border-radius: var(--radius-sm);
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* ─── Gap Banner ──────────────────────────────────────── */
|
|
.gap-banner {
|
|
background: rgba(245, 158, 11, 0.08);
|
|
border-bottom: 1px solid var(--amber-500);
|
|
color: var(--amber-400);
|
|
font-size: 11px;
|
|
padding: 6px 12px;
|
|
animation: bannerSlide 250ms ease-out;
|
|
}
|
|
@keyframes bannerSlide {
|
|
from { transform: translateY(-100%); }
|
|
to { transform: translateY(0); }
|
|
}
|
|
|
|
/* ─── Command Bar ─────────────────────────────────────── */
|
|
/* ─── Quick Actions Toolbar ─────────────────────────────── */
|
|
|
|
.quick-actions {
|
|
display: flex;
|
|
gap: 6px;
|
|
padding: 4px 8px;
|
|
background: var(--bg-surface);
|
|
border-top: 1px solid var(--border-subtle);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.quick-action-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
height: 26px;
|
|
padding: 0 10px;
|
|
background: none;
|
|
border: 1px solid var(--zinc-600);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--text-label);
|
|
font-family: var(--font-system);
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
transition: all 150ms;
|
|
}
|
|
|
|
.quick-action-btn:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: var(--text-body);
|
|
border-color: var(--zinc-400);
|
|
}
|
|
|
|
.quick-action-btn:active {
|
|
transform: scale(0.96);
|
|
}
|
|
|
|
.quick-action-btn.disabled, .inspector-action-btn.disabled {
|
|
pointer-events: none;
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.quick-action-btn.loading {
|
|
pointer-events: none;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.quick-action-btn.loading::after {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
border: 2px solid var(--zinc-600);
|
|
border-top-color: var(--amber-400);
|
|
border-radius: 50%;
|
|
animation: spin 0.6s linear infinite;
|
|
}
|
|
|
|
.command-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 8px;
|
|
background: var(--bg-surface);
|
|
border-top: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
.command-prompt {
|
|
color: var(--amber-500);
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
flex-shrink: 0;
|
|
user-select: none;
|
|
}
|
|
.command-input {
|
|
flex: 1;
|
|
background: var(--bg-base);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 6px 8px;
|
|
color: var(--text-heading);
|
|
font-family: var(--font-system);
|
|
font-size: 11px;
|
|
outline: none;
|
|
transition: border-color 150ms;
|
|
}
|
|
.command-input:focus { border-color: var(--amber-500); }
|
|
.command-input::placeholder { color: var(--text-disabled); font-size: 10px; }
|
|
.command-input.sent {
|
|
border-color: var(--success);
|
|
transition: border-color 150ms;
|
|
}
|
|
.command-input.error {
|
|
border-color: var(--error);
|
|
animation: shake 300ms ease;
|
|
}
|
|
.command-input.error::placeholder {
|
|
color: var(--error);
|
|
opacity: 0.8;
|
|
}
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-4px); }
|
|
75% { transform: translateX(4px); }
|
|
}
|
|
.send-btn {
|
|
width: 26px;
|
|
height: 26px;
|
|
background: var(--amber-500);
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
color: #000;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
transition: all 150ms;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.send-btn:hover { background: var(--amber-400); }
|
|
.send-btn:active { transform: scale(0.93); }
|
|
.send-btn:disabled {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
}
|
|
.stop-btn {
|
|
width: 26px;
|
|
height: 26px;
|
|
background: var(--error);
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
color: #fff;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
line-height: 26px;
|
|
text-align: center;
|
|
}
|
|
.stop-btn:hover { background: #dc2626; }
|
|
.stop-btn:active { transform: scale(0.93); }
|
|
|
|
/* ─── Footer ──────────────────────────────────────────── */
|
|
footer {
|
|
height: 28px;
|
|
background: var(--bg-surface);
|
|
border-top: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 8px;
|
|
font-size: 10px;
|
|
color: var(--text-meta);
|
|
flex-shrink: 0;
|
|
}
|
|
#footer-url {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 50%;
|
|
}
|
|
.footer-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.footer-port {
|
|
color: var(--text-meta);
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
transition: color 150ms;
|
|
}
|
|
.footer-port:hover { color: var(--text-label); }
|
|
.port-input {
|
|
width: 56px;
|
|
padding: 2px 6px;
|
|
background: var(--bg-base);
|
|
border: 1px solid var(--zinc-600);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--text-heading);
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
outline: none;
|
|
transition: border-color 150ms;
|
|
}
|
|
.port-input:focus { border-color: var(--amber-500); }
|
|
|
|
/* ─── Experimental Banner ─────────────────────────────── */
|
|
.experimental-banner {
|
|
background: rgba(59, 130, 246, 0.08);
|
|
border: 1px solid rgba(59, 130, 246, 0.15);
|
|
color: var(--zinc-400);
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
font-size: 11px;
|
|
margin: 6px 12px;
|
|
text-align: left;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ─── Browser Tab Bar ─────────────────────────────────── */
|
|
.browser-tabs {
|
|
display: flex;
|
|
gap: 1px;
|
|
padding: 4px 8px;
|
|
background: var(--bg-base);
|
|
border-bottom: 1px solid var(--border);
|
|
overflow-x: auto;
|
|
flex-shrink: 0;
|
|
scrollbar-width: none;
|
|
}
|
|
.browser-tabs::-webkit-scrollbar { display: none; }
|
|
.browser-tab {
|
|
padding: 4px 10px;
|
|
font-size: 11px;
|
|
font-family: var(--font-system);
|
|
color: var(--text-meta);
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
max-width: 140px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
flex-shrink: 0;
|
|
transition: background 100ms, color 100ms;
|
|
}
|
|
.browser-tab:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-label);
|
|
}
|
|
.browser-tab.active {
|
|
background: var(--bg-surface);
|
|
color: var(--text-body);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
/* ─── Inspector Tab ──────────────────────────────────── */
|
|
|
|
.inspector-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 10px;
|
|
background: var(--bg-surface);
|
|
border-bottom: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.inspector-pick-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
height: 28px;
|
|
padding: 0 10px;
|
|
background: none;
|
|
border: 1px solid var(--amber-500);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--amber-500);
|
|
font-family: var(--font-system);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 150ms;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.inspector-pick-btn:hover {
|
|
background: rgba(245, 158, 11, 0.1);
|
|
color: var(--amber-400);
|
|
}
|
|
|
|
.inspector-pick-btn.active {
|
|
background: var(--amber-500);
|
|
color: #000;
|
|
}
|
|
|
|
.inspector-pick-icon {
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* ─── Action Buttons (Cleanup, Screenshot) ─────────────────── */
|
|
|
|
.inspector-action-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 28px;
|
|
width: 28px;
|
|
padding: 0;
|
|
background: none;
|
|
border: 1px solid var(--zinc-600);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--text-label);
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: all 150ms;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.inspector-action-btn:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: var(--text-body);
|
|
border-color: var(--zinc-400);
|
|
}
|
|
|
|
.inspector-action-btn:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.inspector-action-btn.loading {
|
|
pointer-events: none;
|
|
opacity: 0.5;
|
|
position: relative;
|
|
}
|
|
|
|
.inspector-action-btn.loading::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 12px;
|
|
height: 12px;
|
|
border: 2px solid var(--zinc-600);
|
|
border-top-color: var(--amber-400);
|
|
border-radius: 50%;
|
|
animation: spin 0.6s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.inspector-selected {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--text-body);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.inspector-mode-badge {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
padding: 1px 6px;
|
|
border-radius: var(--radius-sm);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.inspector-mode-badge.basic {
|
|
background: var(--zinc-800);
|
|
color: var(--zinc-400);
|
|
}
|
|
|
|
.inspector-mode-badge.cdp {
|
|
background: rgba(34, 197, 94, 0.15);
|
|
color: var(--success);
|
|
}
|
|
|
|
/* Inspector content area */
|
|
.inspector-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Empty state */
|
|
.inspector-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding: 40px 24px;
|
|
text-align: left;
|
|
gap: 6px;
|
|
}
|
|
|
|
.inspector-empty-icon {
|
|
font-size: 24px;
|
|
color: var(--zinc-600);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.inspector-empty p {
|
|
color: var(--zinc-400);
|
|
font-size: 13px;
|
|
margin: 0;
|
|
}
|
|
|
|
.inspector-empty .muted {
|
|
color: var(--zinc-600);
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Loading state */
|
|
.inspector-loading {
|
|
padding: 16px 12px;
|
|
}
|
|
|
|
.inspector-loading-text {
|
|
font-size: 12px;
|
|
color: var(--amber-500);
|
|
margin-bottom: 12px;
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
.inspector-skeleton {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.inspector-skeleton-bar {
|
|
height: 12px;
|
|
background: var(--zinc-800);
|
|
border-radius: var(--radius-sm);
|
|
animation: shimmer 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.inspector-skeleton-bar:nth-child(1) { width: 80%; }
|
|
.inspector-skeleton-bar:nth-child(2) { width: 60%; }
|
|
.inspector-skeleton-bar:nth-child(3) { width: 70%; }
|
|
|
|
@keyframes shimmer {
|
|
0%, 100% { opacity: 0.3; }
|
|
50% { opacity: 0.7; }
|
|
}
|
|
|
|
/* Error state */
|
|
.inspector-error {
|
|
padding: 16px 12px;
|
|
color: var(--error);
|
|
font-size: 12px;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* Inspector sections */
|
|
.inspector-section {
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.inspector-section-header {
|
|
font-family: var(--font-system);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--zinc-400);
|
|
padding: 8px 12px 4px;
|
|
}
|
|
|
|
.inspector-section-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
background: none;
|
|
border: none;
|
|
font-family: var(--font-system);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--zinc-400);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
transition: color 150ms;
|
|
}
|
|
|
|
.inspector-section-toggle:hover {
|
|
color: var(--text-body);
|
|
}
|
|
|
|
.inspector-toggle-arrow {
|
|
font-size: 10px;
|
|
color: var(--zinc-400);
|
|
flex-shrink: 0;
|
|
width: 12px;
|
|
}
|
|
|
|
.inspector-section-body {
|
|
padding: 4px 12px 8px;
|
|
}
|
|
|
|
.inspector-section-body.collapsed {
|
|
display: none;
|
|
}
|
|
|
|
.inspector-rule-count {
|
|
font-size: 11px;
|
|
font-weight: 400;
|
|
color: var(--zinc-600);
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.inspector-no-data {
|
|
color: var(--zinc-600);
|
|
font-size: 11px;
|
|
font-style: italic;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
/* ─── Box Model ──────────────────────────────────────── */
|
|
|
|
.inspector-boxmodel {
|
|
padding: 8px 12px 12px;
|
|
}
|
|
|
|
.boxmodel-margin,
|
|
.boxmodel-border,
|
|
.boxmodel-padding,
|
|
.boxmodel-content {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px dashed;
|
|
text-align: center;
|
|
}
|
|
|
|
.boxmodel-margin {
|
|
background: rgba(245, 158, 11, 0.08);
|
|
border-color: rgba(245, 158, 11, 0.3);
|
|
padding: 14px 20px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.boxmodel-border {
|
|
background: rgba(161, 161, 170, 0.08);
|
|
border-color: rgba(161, 161, 170, 0.3);
|
|
padding: 14px 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
.boxmodel-padding {
|
|
background: rgba(34, 197, 94, 0.08);
|
|
border-color: rgba(34, 197, 94, 0.3);
|
|
padding: 14px 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
.boxmodel-content {
|
|
background: rgba(59, 130, 246, 0.08);
|
|
border-color: rgba(59, 130, 246, 0.3);
|
|
padding: 8px 12px;
|
|
width: 100%;
|
|
min-height: 28px;
|
|
}
|
|
|
|
.boxmodel-content span {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--text-body);
|
|
}
|
|
|
|
.boxmodel-label {
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 4px;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--zinc-400);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.boxmodel-value {
|
|
position: absolute;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--text-body);
|
|
}
|
|
|
|
.boxmodel-value.boxmodel-top { top: 1px; left: 50%; transform: translateX(-50%); }
|
|
.boxmodel-value.boxmodel-right { right: 4px; top: 50%; transform: translateY(-50%); }
|
|
.boxmodel-value.boxmodel-bottom { bottom: 1px; left: 50%; transform: translateX(-50%); }
|
|
.boxmodel-value.boxmodel-left { left: 4px; top: 50%; transform: translateY(-50%); }
|
|
|
|
/* ─── Matched Rules ──────────────────────────────────── */
|
|
|
|
.inspector-rule {
|
|
padding: 6px 0;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.inspector-rule:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.inspector-rule-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.inspector-selector {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
color: var(--amber-400);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 35ch;
|
|
}
|
|
|
|
.inspector-specificity {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
background: var(--zinc-600);
|
|
color: var(--zinc-400);
|
|
padding: 0 4px;
|
|
border-radius: var(--radius-sm);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.inspector-rule-props {
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.inspector-prop {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.inspector-prop.overridden {
|
|
text-decoration: line-through;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.inspector-prop-name {
|
|
color: var(--zinc-400);
|
|
}
|
|
|
|
.inspector-prop-value {
|
|
color: var(--text-body);
|
|
}
|
|
|
|
.inspector-important {
|
|
color: var(--error);
|
|
font-size: 10px;
|
|
}
|
|
|
|
.inspector-rule-source {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--zinc-600);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* UA rules */
|
|
.inspector-ua-rules {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.inspector-ua-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
background: none;
|
|
border: none;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--zinc-600);
|
|
cursor: pointer;
|
|
padding: 4px 0;
|
|
transition: color 150ms;
|
|
}
|
|
|
|
.inspector-ua-toggle:hover {
|
|
color: var(--zinc-400);
|
|
}
|
|
|
|
.inspector-ua-body.collapsed {
|
|
display: none;
|
|
}
|
|
|
|
/* ─── Computed Styles ────────────────────────────────── */
|
|
|
|
.inspector-computed-row {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
padding: 0 0 0 4px;
|
|
}
|
|
|
|
.inspector-computed-row .inspector-prop-name {
|
|
color: var(--zinc-400);
|
|
}
|
|
|
|
.inspector-computed-row .inspector-prop-value {
|
|
color: var(--text-body);
|
|
}
|
|
|
|
/* ─── Quick Edit ─────────────────────────────────────── */
|
|
|
|
.inspector-quickedit-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.inspector-quickedit-row {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.inspector-quickedit-row .inspector-prop-name {
|
|
color: var(--zinc-400);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.inspector-quickedit-value {
|
|
color: var(--text-body);
|
|
cursor: pointer;
|
|
padding: 1px 4px;
|
|
border-radius: 2px;
|
|
transition: background 150ms;
|
|
min-width: 40px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.inspector-quickedit-value:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.inspector-quickedit-input {
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
background: var(--bg-base);
|
|
border: 1px solid var(--amber-500);
|
|
border-radius: 2px;
|
|
color: var(--text-heading);
|
|
padding: 1px 4px;
|
|
outline: none;
|
|
width: 100%;
|
|
}
|
|
|
|
/* ─── Send to Agent ──────────────────────────────────── */
|
|
|
|
.inspector-send {
|
|
padding: 8px 12px;
|
|
background: var(--bg-surface);
|
|
border-top: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
position: sticky;
|
|
bottom: 0;
|
|
}
|
|
|
|
.inspector-send-btn {
|
|
width: 100%;
|
|
height: 32px;
|
|
background: var(--amber-500);
|
|
border: none;
|
|
border-radius: var(--radius-md);
|
|
color: #000;
|
|
font-family: var(--font-system);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 150ms;
|
|
}
|
|
|
|
.inspector-send-btn:hover {
|
|
background: var(--amber-400);
|
|
}
|
|
|
|
.inspector-send-btn:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
/* ─── Accessibility ───────────────────────────────────── */
|
|
:focus-visible {
|
|
outline: 2px solid var(--amber-500);
|
|
outline-offset: 1px;
|
|
}
|