procdeck 0.3.0 → 0.5.0

package/dist/public.d.ts

@@ -46,6 +46,12 @@ export type ProcSpec = {
     readonly needs?: ReadonlyArray<string>;
     /** What "ready" means for dependents. Defaults to "listening". */
     readonly readyWhen?: "listening" | "started";
+    /**
+     * Route this proc's assigned `${port}` through procdeck's HTTP observer
+     * (`procdeck http` captures requests/responses). Defaults to true for
+     * procs that use `${port}`; false hands the proc the public port directly.
+     */
+    readonly observe?: boolean;
     readonly preflight?: Preflight;
     readonly alerts?: ReadonlyArray<Alert>;
 };
@@ -57,6 +63,12 @@ export type ProcdeckConfig = {
     readonly name?: string;
     /** Port for the web UI and the `*.localhost` proxy. Defaults to 4820. */
     readonly port?: number;
+    /**
+     * Interface the UI and proxy bind to. Defaults to "127.0.0.1" (loopback
+     * only — the UI types into real terminals). "0.0.0.0" to reach the deck
+     * from another machine or from a container's host.
+     */
+    readonly host?: string;
     readonly procs: ReadonlyArray<ProcSpec>;
 };
 /** Identity helper that gives config files their types. */

package/dist/public.js

@@ -1,4 +1,4 @@
-import "./chunk-MLKGABMK.js";
+import "./chunk-SIAA4J6H.js";
 
 // src/public.ts
 var defineConfig = (config) => config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "procdeck",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Interactive dev-process multiplexer with a web UI: terminal panes in a browser tab, declarative dependencies, assigned ports and a *.localhost reverse proxy.",
   "keywords": [
     "cli",
@@ -50,11 +50,13 @@
   },
   "devDependencies": {
     "@effect/platform-browser": "4.0.0-beta.106",
-    "effect": "4.0.0-beta.106",
+    "@effect/platform-node-shared": "4.0.0-beta.106",
     "@types/node": "^22.10.1",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-search": "^0.16.0",
+    "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^6.0.0",
+    "effect": "4.0.0-beta.106",
     "foldkit": "^0.141.2",
     "tsup": "^8.5.1",
     "typescript": "^7.0.2",

package/readme.md

@@ -44,27 +44,40 @@ which port is which**.
   callback server mid-handshake.
 - **Alerts.** Regexes matched against a rolling tail of pane output; a match raises a
   badge in the UI ("needs login").
+- **Knows when you're not looking.** Crashed, blocked or alerting procs and unread error
+  lines count into the tab title (`(2) garage`) and a red dot on the favicon; turn on the
+  bell and a crash or alert while the tab is hidden becomes a system notification.
 - **Whole-tree restarts.** `pnpm` → `wrangler` → `workerd`: killing the pid would leave
   the grandchild holding the port. procdeck signals the process group, escalating
   SIGTERM → SIGKILL, and Ctrl-C tears down every tree it spawned.
 - **Single or grid layout.** One pane at a time with a sidebar, or every pane tiled
-  (⌥G); each pane header carries its address, status and restart/stop/clear.
+  (⌥G, ⌥Z zooms one tile in and out); each pane header carries its address, status and
+  restart/stop/clear. Too many tiles? **Pin** the ones you watch (📌, ⌥P) — the grid
+  shows only those and the rest collapse into a tray strip with their status dots and
+  badges, one click from a peek. Layout, pins, selected pane and theme (system / light /
+  dark — terminals included) survive a reload.
+- **Runs in the background.** `procdeck up` starts the deck, opens the UI and returns
+  — no terminal tab kept hostage. `down`, `restart`, `status`, `logs` and `open` work
+  from anywhere inside the project; `procdeck ls` lists every deck on the machine;
+  ⏻ in the UI shuts one down. Prefer a terminal? `up --fg`.
 - **Installable as an app.** The UI ships a web-app manifest named after the deck
   (`name` in the config, else the directory), so "⤓ install" in the bar — or File →
   Add to Dock in Safari — gives each project its own window and Dock icon. Works over
-  plain `http://localhost`, no HTTPS needed.
+  plain `http://localhost`, no HTTPS needed. Several projects? The deck name in the
+  bar lists the other running decks, one click away.
 
 ## Install
 
-Nothing to install, if you don't want to — write a `procdeck.config.json` (see
-[Config](#config)) and run:
+Nothing to install, if you don't want to:
 
 ```sh
+npx procdeck init                 # writes procdeck.config.json from your workspace's dev scripts
 npx procdeck                      # picks up ./procdeck.config.json
 npx procdeck decks/backend.json   # or point it at any config file
 ```
 
-Open <http://localhost:4820> for the panes. Requires **Node ≥ 22**.
+The deck comes up in the background, the UI opens at <http://localhost:4820>, and the
+terminal is yours again. Requires **Node ≥ 22**.
 
 Or add it to the project, which is what you want if you keep the config in TypeScript:
 
@@ -72,16 +85,42 @@ Or add it to the project, which is what you want if you keep the config in TypeS
 pnpm add -D procdeck      # npm i -D procdeck · bun add -d procdeck
 ```
 
+## Commands
+
+```sh
+procdeck init               # write procdeck.config.json: one proc per workspace dev script
+procdeck up [config]        # start (detached) and open the UI — idempotent
+procdeck down               # stop: every process tree is terminated
+procdeck restart            # down + up — after editing the config or updating procdeck
+procdeck status             # this project's deck: address, uptime, every proc's state
+procdeck ls                 # every running deck on this machine
+procdeck open               # open the UI — no port to remember
+procdeck logs [-f]          # procdeck's own log (startup, shutdown, errors)
+procdeck up --fg            # foreground instead: Ctrl-C stops the deck
+```
+
+`procdeck` alone is `procdeck up`. Without a config path, the nearest
+`procdeck.config.{json,ts,js,mjs}` up from the current directory is used, so every
+command works from any subdirectory of the project. Running decks register in
+`~/.procdeck/instances/` (one JSON per deck — that is how `down`, `ls` and the UI's
+deck switcher find them; stale entries are pruned by pid), and a detached deck's own
+output goes to `~/.procdeck/logs/`. `--no-open` skips the browser. Updating procdeck
+needs a `procdeck restart` — the running deck keeps the old code until then.
+
+The server binds **127.0.0.1 only** — the UI types into real terminals, so it is not
+something to put on the LAN by accident. `"host": "0.0.0.0"` in the config opens it up
+(a devcontainer whose browser is on the host, a VM). No telemetry, no service worker.
+
 ## Try the example
 
 In a clone of this repo:
 
 ```sh
 pnpm install
-pnpm dev          # builds the UI, starts the example stack
+pnpm dev          # builds the UI, starts the example stack in the foreground
 ```
 
-> **Install footprint.** ~1.8 MB, one dependency. The server is shipped as a bundle, so
+> **Install footprint.** ~2 MB, one dependency. The server is shipped as a bundle, so
 > nothing but the PTY bindings is installed — and those are
 > [`@lydell/node-pty`](https://github.com/lydell/node-pty): the same sources as
 > [node-pty](https://github.com/microsoft/node-pty), distributed as per-platform packages.
@@ -94,6 +133,16 @@ ports) entirely through `${port}` templates. See [`example/`](example/).
 
 ## Config
 
+`procdeck init` writes a first one from what is already there, trying in order: a
+**Procfile** (already a list of processes); **workspaces** (`pnpm-workspace.yaml`,
+`workspaces` in `package.json`) — one proc per package with a `dev` (or `start:dev`,
+`serve`, `watch`, `start`) script, run through the package manager your lockfile
+points at (`pnpm --filter web dev`, `yarn workspace web dev`, …); **plain
+subdirectories** — `backend/`, `frontend/`, each with its own `package.json` (its own
+lockfile decides the manager) or a recognisable non-JS project (Django, Go, Rust, Rails,
+Phoenix, docker compose), run with `cwd` set; and finally the **root itself**. Ports and
+dependencies are yours to add; the tips it prints say how.
+
 Two formats, one schema. **JSON** needs nothing from your toolchain — no TypeScript, and
 procdeck itself doesn't have to be a dependency. Point `$schema` at the published schema
 and the editor completes and validates every field:
@@ -181,7 +230,10 @@ Tips:
 | `supervisor.ts` | Effect layer: scoped lifecycle, port assignment, `PubSub` fan-out, per-proc state.                   |
 | `ports.ts`      | Free-port allocation and `pgrep`+`lsof` listening-port discovery.                                    |
 | `server.ts`     | `effect/unstable/http` router behind a small Node↔web-handler bridge; SSE downstream, POST upstream; `Host`-routed reverse proxy with WebSocket pass-through. |
-| `cli.ts`        | Entry point and signal handling.                                                                     |
+| `registry.ts`   | `~/.procdeck/instances/<id>.json` per running deck: how `down`/`ls`/the deck switcher find decks.     |
+| `lifecycle.ts`  | Detaching (`up` re-spawns itself as `up --fg` and waits for the registry entry), `down`, port probe.   |
+| `init.ts`       | `procdeck init`: workspace scan → a first config (one proc per package with a dev script).            |
+| `cli.ts`        | `effect/unstable/cli` commands; `up --fg` is the server, everything else talks to the registry/API.    |
 
 Design notes worth keeping:
 
@@ -195,11 +247,21 @@ Design notes worth keeping:
 - **SSE, not WebSocket.** Logs only flow towards the browser; commands are ordinary
   POSTs. No upgrade handshake, no extra dependency, and `EventSource` reconnects by
   itself.
-- **`PubSub.sliding({ capacity, replay })`** doubles as the fan-out to every open tab
-  _and_ the scrollback ring buffer — a tab opened late replays the backlog for free.
+- **Per-proc backlog, one stream per subscriber.** Each proc keeps its last 256 KB of
+  output; a subscriber (an SSE connection) gets every proc's backlog and status, a
+  `synced` marker, then live events from a `PubSub` it subscribed to *before* the
+  snapshot — no gap, and a per-proc chunk counter cuts the duplicate at the seam. A
+  tab opened on a deck that has run for days still shows every pane's history, and
+  the UI knows exactly which chunks are news (unread tallies, notifications).
 - **The supervisor is `Effect.acquireRelease`.** Shutdown is not a code path anyone has
   to remember to call: closing the scope terminates every process tree. The SSE response
   stream lives in the request scope, so a dropped tab cleans up its subscription too.
+  Ctrl-C, `procdeck down` and the UI's ⏻ are all the same SIGTERM into the same scope.
+- **Detached is just `up --fg` in the background.** No daemon, no IPC: `up` spawns
+  itself detached with its output in a log file, and waits for the child's registry
+  entry to appear — written only after `listen` succeeds — so "up" means reachable.
+  The registry is plain files pruned by pid; every deck serves its own UI, and the
+  deck switcher is a list of links.
 
 ## Tests
 
@@ -220,8 +282,6 @@ self-heal — if it still fails, PTY allocation itself is probably blocked (sand
 
 ## Status
 
-A working prototype, macOS/Linux only (PTYs, `pgrep`, `lsof`). Known prototype-grade
-shortcuts: the replay buffer counts events rather than bytes (a chatty proc can evict a
-quiet one's history), and statuses are a mutated map rather than `SubscriptionRef`s.
-Not done yet: an injected FAB overlay inside the developed apps, dependency-death
-policy (a dependency dying does _not_ cascade — deliberately), and an npm release.
+macOS/Linux only (PTYs, `pgrep`, `lsof`). Known shortcut: statuses are a mutated map
+rather than `SubscriptionRef`s. Not done yet: an injected FAB overlay inside the developed apps, and a dependency-death
+policy (a dependency dying does _not_ cascade — deliberately).

package/schema.json

@@ -31,6 +31,19 @@
         }
       ]
     },
+    "host": {
+      "type": "string",
+      "description": "Interface the UI and proxy bind to. Defaults to \"127.0.0.1\" — loopback only, because the UI types into real terminals. Set \"0.0.0.0\" to reach the deck from another machine or from a container's host.",
+      "examples": [
+        "127.0.0.1",
+        "0.0.0.0"
+      ],
+      "allOf": [
+        {
+          "minLength": 1
+        }
+      ]
+    },
     "procs": {
       "type": "array",
       "items": {
@@ -125,6 +138,10 @@
             ],
             "description": "What \"ready\" means for dependents: \"listening\" (default) — the process tree opened a TCP port; \"started\" — it merely spawned, for procs that never listen."
           },
+          "observe": {
+            "type": "boolean",
+            "description": "Route this proc's assigned `${port}` through procdeck's HTTP observer, capturing requests and responses for `procdeck http`. Defaults to true for procs that use `${port}`; false hands the proc the public port directly (no traffic capture)."
+          },
           "preflight": {
             "type": "object",
             "properties": {

package/ui/dist/assets/index-BwFe3unL.css

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2014 The xterm.js authors. All rights reserved.
+ * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
+ * https://github.com/chjj/term.js
+ * @license MIT
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ * Originally forked from (with the author's permission):
+ *   Fabrice Bellard's javascript vt100 for jslinux:
+ *   http://bellard.org/jslinux/
+ *   Copyright (c) 2011 Fabrice Bellard
+ *   The original design remains. The terminal itself
+ *   has been extended to include xterm CSI codes, among
+ *   other features.
+ */.xterm{cursor:text;position:relative;user-select:none;-ms-user-select:none;-webkit-user-select:none}.xterm.focus,.xterm:focus{outline:none}.xterm .xterm-helpers{position:absolute;top:0;z-index:5}.xterm .xterm-helper-textarea{padding:0;border:0;margin:0;position:absolute;opacity:0;left:-9999em;top:0;width:0;height:0;z-index:-5;white-space:nowrap;overflow:hidden;resize:none}.xterm .composition-view{background:#000;color:#fff;display:none;position:absolute;white-space:nowrap;z-index:1}.xterm .composition-view.active{display:block}.xterm .xterm-viewport{background-color:#000;overflow-y:scroll;cursor:default;position:absolute;right:0;left:0;top:0;bottom:0}.xterm .xterm-screen{position:relative}.xterm .xterm-screen canvas{position:absolute;left:0;top:0}.xterm-char-measure-element{display:inline-block;visibility:hidden;position:absolute;top:0;left:-9999em;line-height:normal}.xterm.enable-mouse-events{cursor:default}.xterm.xterm-cursor-pointer,.xterm .xterm-cursor-pointer{cursor:pointer}.xterm.column-select.focus{cursor:crosshair}.xterm .xterm-accessibility:not(.debug),.xterm .xterm-message{position:absolute;left:0;top:0;bottom:0;right:0;z-index:10;color:transparent;pointer-events:none}.xterm .xterm-accessibility-tree:not(.debug) *::selection{color:transparent}.xterm .xterm-accessibility-tree{font-family:monospace;-webkit-user-select:text;user-select:text;white-space:pre}.xterm .xterm-accessibility-tree>div{transform-origin:left;width:fit-content}.xterm .live-region{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.xterm-dim{opacity:1!important}.xterm-underline-1{text-decoration:underline}.xterm-underline-2{text-decoration:double underline}.xterm-underline-3{text-decoration:wavy underline}.xterm-underline-4{text-decoration:dotted underline}.xterm-underline-5{text-decoration:dashed underline}.xterm-overline{text-decoration:overline}.xterm-overline.xterm-underline-1{text-decoration:overline underline}.xterm-overline.xterm-underline-2{text-decoration:overline double underline}.xterm-overline.xterm-underline-3{text-decoration:overline wavy underline}.xterm-overline.xterm-underline-4{text-decoration:overline dotted underline}.xterm-overline.xterm-underline-5{text-decoration:overline dashed underline}.xterm-strikethrough{text-decoration:line-through}.xterm-screen .xterm-decoration-container .xterm-decoration{z-index:6;position:absolute}.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer{z-index:7}.xterm-decoration-overview-ruler{z-index:8;position:absolute;top:0;right:0;pointer-events:none}.xterm-decoration-top{z-index:2;position:relative}.xterm .xterm-scrollable-element>.scrollbar{cursor:default}.xterm .xterm-scrollable-element>.scrollbar>.scra{cursor:pointer;font-size:11px!important}.xterm .xterm-scrollable-element>.visible{opacity:1;background:#0000;transition:opacity .1s linear;z-index:11}.xterm .xterm-scrollable-element>.invisible{opacity:0;pointer-events:none}.xterm .xterm-scrollable-element>.invisible.fade{transition:opacity .8s linear}.xterm .xterm-scrollable-element>.shadow{position:absolute;display:none}.xterm .xterm-scrollable-element>.shadow.top{display:block;top:0;left:3px;height:3px;width:100%;box-shadow:var(--vscode-scrollbar-shadow, #000) 0 6px 6px -6px inset}.xterm .xterm-scrollable-element>.shadow.left{display:block;top:3px;left:0;height:100%;width:3px;box-shadow:var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset}.xterm .xterm-scrollable-element>.shadow.top-left-corner{display:block;top:0;left:0;height:3px;width:3px}.xterm .xterm-scrollable-element>.shadow.top.left{box-shadow:var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset}:root{--bg: #0e1116;--panel: #151a21;--hover: #1b212a;--control: #1f2630;--border: #232a34;--text: #d8dee9;--muted: #7b8794;--accent: #4c9aff;--accent-bg: #16202e;--accent-border: #2a3a52;--ok: #3fb950;--warn: #d29922;--on-warn: #1a1005;--bad: #f85149;--overlay: rgba(31, 38, 48, .85);color-scheme:dark}@media(prefers-color-scheme:light){:root:not([data-theme=dark]){--bg: #ffffff;--panel: #f6f8fa;--hover: #eaeef2;--control: #f6f8fa;--border: #d0d7de;--text: #1f2328;--muted: #656d76;--accent: #0969da;--accent-bg: #ddf4ff;--accent-border: #b6e3ff;--ok: #1a7f37;--warn: #bf8700;--on-warn: #ffffff;--bad: #cf222e;--overlay: rgba(246, 248, 250, .9);color-scheme:light}}:root[data-theme=light]{--bg: #ffffff;--panel: #f6f8fa;--hover: #eaeef2;--control: #f6f8fa;--border: #d0d7de;--text: #1f2328;--muted: #656d76;--accent: #0969da;--accent-bg: #ddf4ff;--accent-border: #b6e3ff;--ok: #1a7f37;--warn: #bf8700;--on-warn: #ffffff;--bad: #cf222e;--overlay: rgba(246, 248, 250, .9);color-scheme:light}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:13px/1.45 ui-sans-serif,system-ui,sans-serif}.layout{height:100vh;display:grid;grid-template-columns:260px 1fr;grid-template-rows:auto minmax(0,1fr)}.layout.grid{grid-template-columns:1fr}.layout.grid aside{display:none}.layout aside{grid-area:2 / 1}.layout main{grid-area:2 / 2}.layout.grid main{grid-area:2 / 1}.banner{grid-area:2 / 1 / 3 / -1;align-self:start;z-index:2;padding:4px 14px;font-size:12px;color:var(--on-warn);background:var(--warn);animation:banner-pulse 1.6s ease-in-out infinite}.layout.down aside,.layout.down main{opacity:.55;transition:opacity .4s}.banner.down{color:var(--text);background:var(--control);border-bottom:1px solid var(--border);animation:none}@keyframes banner-pulse{50%{opacity:.75}}header{grid-column:1 / -1;display:flex;gap:8px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--border);background:var(--panel)}header h1{margin:0 8px 0 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}header .meta{margin-left:0}header .meta.error{color:var(--bad)}.deck{position:relative;margin-right:6px}button.deck-name{color:var(--text);font-size:12px;font-weight:600;background:none;border-color:transparent;padding:3px 6px}button.deck-name .caret{margin-left:5px;font-size:10px;color:var(--muted)}.deck.open button.deck-name{background:var(--control);border-color:var(--border)}.switcher{position:absolute;top:calc(100% + 4px);left:0;z-index:5;min-width:220px;max-width:360px;padding:4px;display:flex;flex-direction:column;gap:2px;background:var(--panel);border:1px solid var(--border);border-radius:6px;box-shadow:0 8px 24px #00000059;font-size:12px}.switcher>.meta{padding:6px 8px;white-space:normal;line-height:1.4}.switcher a{display:flex;gap:8px;align-items:baseline;padding:6px 8px;border-radius:4px;color:var(--text);text-decoration:none}.switcher a:hover{background:var(--hover)}.switcher a .name{font-weight:600}.switcher a .meta{margin-left:auto}.deck-actions{margin-left:auto;display:inline-flex;gap:6px}.deck-actions .bell{padding:4px 8px;filter:grayscale(1);opacity:.5}.deck-actions .bell.on{filter:none;opacity:1;border-color:var(--accent)}.deck-actions .bell.denied{filter:none;opacity:.8;border-color:var(--warn)}.deck-actions .install{color:var(--accent);margin-right:8px}.deck-actions .shutdown{margin-left:6px;color:var(--muted)}.deck-actions .shutdown:hover:not(:disabled){color:var(--bad);border-color:var(--bad)}aside{background:var(--panel);border-right:1px solid var(--border);overflow-y:auto}.proc{padding:10px 16px;border-bottom:1px solid var(--border);cursor:pointer;display:grid;grid-template-columns:8px 1fr;gap:10px;align-items:baseline}.proc:hover{background:var(--hover)}.proc.active{background:var(--hover);box-shadow:inset 2px 0 0 var(--accent)}.dot{width:8px;height:8px;border-radius:50%;background:var(--muted);align-self:center}.dot.running{background:var(--ok)}.dot.starting{background:var(--warn)}.dot.waiting{background:var(--accent)}.dot.exited{background:var(--bad)}.dot.blocked{background:transparent;border:2px solid var(--bad)}.badge{margin-left:6px;padding:1px 5px;border-radius:8px;font-size:10px;font-weight:600;color:var(--on-warn);background:var(--warn);vertical-align:1px}.badge.err{color:#fff;background:var(--bad);cursor:help}.proc .name{font-weight:600}.proc-body{min-width:0}.sub{display:flex;align-items:center;gap:5px;margin-top:4px}.up{margin-left:auto;color:var(--muted);font-size:10px;font-family:ui-monospace,SFMono-Regular,monospace;font-variant-numeric:tabular-nums}.up.exit{color:var(--bad);opacity:.85}.proc .cmd{color:var(--muted);font-size:11px;font-family:ui-monospace,SFMono-Regular,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}main{display:grid;grid-template-rows:minmax(0,1fr) auto;min-width:0;min-height:0}.meta{color:var(--muted);font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;margin-left:auto}button{font:inherit;color:var(--text);background:var(--control);border:1px solid var(--border);border-radius:6px;padding:4px 12px;cursor:pointer}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.35;cursor:default}a{color:var(--accent)}.links{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden}a.port{font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;text-decoration:none;color:var(--accent);background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:5px;padding:1px 6px;white-space:nowrap}a.port:hover{border-color:var(--accent)}.links-more{color:var(--muted);font-size:11px;white-space:nowrap;cursor:help}input.search{font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:4px 9px;width:200px}input.search:focus{outline:none;border-color:var(--accent)}.hints{padding:10px 16px;color:var(--muted);font-size:10px;line-height:1.7}.to-bottom{position:absolute;right:18px;bottom:14px;z-index:5;font-size:11px;padding:3px 12px;border-radius:12px;background:var(--overlay)}.to-bottom[hidden]{display:none}.segmented{display:inline-flex;margin-left:4px}.segmented button{padding:4px 9px;border-radius:0;font-size:13px;line-height:1.2}.segmented button:first-child{border-radius:6px 0 0 6px}.segmented button+button{margin-left:-1px}.segmented button:last-child{border-radius:0 6px 6px 0}.segmented.theme{margin-right:8px}.segmented button.on{color:var(--accent);border-color:var(--accent);background:var(--accent-bg);position:relative;z-index:1}.terminals{position:relative;min-height:0;background:var(--bg)}.tile{display:flex;flex-direction:column;min-height:0;min-width:0}.tile[hidden]{display:none}.term{position:relative;flex:1;min-height:0}.terminals.single .tile{position:absolute;top:0;right:0;bottom:0;left:0}.terminals.single .term{margin:8px 4px 4px 10px}.terminals.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(180px,1fr);gap:6px;padding:6px;overflow-y:auto}.terminals.grid.cols-1{grid-template-columns:minmax(0,1fr)}.terminals.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.terminals.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:1100px){.terminals.grid.cols-3,.terminals.grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.terminals.grid{grid-template-columns:minmax(0,1fr)}}.tray{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:4px 10px;border-top:1px solid var(--border);background:var(--panel);font-size:11px}.tray-item{display:inline-flex;align-items:center}.tray .peek{display:inline-flex;align-items:center;gap:6px;padding:2px 6px;background:transparent;border-color:transparent}.tray .peek:hover{background:var(--hover);border-color:var(--border)}.tray .peek.active{border-color:var(--accent)}.tray .peek .name{font-weight:600}.tray .pin{opacity:0}.tray-item:hover .pin{opacity:.6}button.pin{padding:0 4px;font-size:11px;line-height:1.4;background:transparent;border-color:transparent;filter:grayscale(1);opacity:.3}button.pin:hover{opacity:.8;border-color:var(--accent)}button.pin.on{opacity:1;filter:none}.proc .name button.pin{margin-left:4px;vertical-align:1px;opacity:0}.proc:hover .name button.pin,.proc .name button.pin.on{opacity:.3}.proc .name button.pin.on{opacity:1}.terminals.grid .tile{border:1px solid var(--border);border-radius:6px;overflow:hidden}.terminals.grid .tile.active{border-color:var(--accent)}.terminals.grid .term{margin:4px 2px 2px 6px}.tile-head{display:flex;align-items:center;gap:8px;padding:4px 8px;font-size:11px;background:var(--panel);border-bottom:1px solid var(--border);-webkit-user-select:none;user-select:none;min-width:0}.terminals.grid .tile-head{cursor:pointer}.tile-head .name{font-weight:600;white-space:nowrap}.tile-head .links{flex-shrink:0;overflow:visible}.tile-head .meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:3ch}.pane-actions{display:inline-flex;gap:2px;flex-shrink:0;opacity:.4;transition:opacity .12s}.tile:hover .pane-actions,.tile.active .pane-actions{opacity:1}.pane-actions button{padding:1px 7px;font-size:12px;line-height:1.3;background:transparent;border-color:transparent}.pane-actions button:hover:not(:disabled){background:var(--control);border-color:var(--accent)}.traffic{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;height:100%}.traffic-bar{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:8px 12px;border-bottom:1px solid var(--border)}.traffic-bar>button{padding:4px 9px;font-size:13px}.traffic-bar button.on{color:var(--accent);border-color:var(--accent);background:var(--accent-bg)}.traffic-spacer{flex:1}.traffic-list{overflow:auto;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}.traffic-empty{padding:24px;color:var(--muted);font:13px/1.6 ui-sans-serif,system-ui,sans-serif;max-width:60ch}.traffic-row{display:grid;grid-template-columns:92px 8ch 5ch minmax(0,1fr) auto 6ch 7ch;gap:10px;align-items:baseline;padding:2px 12px;border-bottom:1px solid var(--border);cursor:pointer;white-space:nowrap}.traffic-row:hover{background:var(--hover)}.traffic-row.open{background:var(--accent-bg)}.traffic-row .proc-tag{color:var(--accent);overflow:hidden;text-overflow:ellipsis}.traffic-row .method{font-weight:600}.traffic-row .method.ws{color:var(--accent)}.traffic-row .path{overflow:hidden;text-overflow:ellipsis}.traffic-row .status.ok{color:var(--ok)}.traffic-row .status.warn{color:var(--warn)}.traffic-row .status.bad{color:var(--bad)}.traffic-row .status.ws{color:var(--muted)}.traffic-row .meta:last-child,.traffic-row .meta:nth-last-child(2){text-align:right}.traffic-detail{padding:6px 12px 12px 114px;border-bottom:1px solid var(--border);background:var(--panel)}.traffic-detail .detail-label{color:var(--muted);font:11px/2 ui-sans-serif,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em}.traffic-detail pre{margin:0 0 8px;padding:8px 10px;background:var(--bg);border:1px solid var(--border);border-radius:6px;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word;max-height:40vh;overflow:auto}