@widgex/wgx 0.0.0-stage → 0.4.2

package/settings-schema.json

@@ -0,0 +1,403 @@
+{
+  "title": "WidgeX",
+  "properties": {
+    "widgex.profile.enabled": {
+      "type": "boolean",
+      "default": false,
+      "description": "Profile the extension from startup: CPU samples, event-loop stalls, slow handlers and large webview messages, written to ~/.widgex/profile/<started>/. A profiling build (pnpm build:profile, or build:from --profile) turns this on by itself. Takes effect on the next window reload; 'WidgeX: Start profiling' starts it now."
+    },
+    "widgex.advancedMode": {
+      "type": "boolean",
+      "default": false,
+      "markdownDescription": "Developer mode — also the switch on Settings ▸ Layout. Shows VS Code's status bar along the bottom (remote, branch, problems), the conversation's Files and Source Control tabs, and the composer's Workflow chip. Off, the window is the conversation and the task column only."
+    },
+    "widgex.chat.fontSize": {
+      "type": "number",
+      "default": 13,
+      "minimum": 10,
+      "maximum": 20,
+      "markdownDescription": "The text size of the conversation, in pixels — also the slider on Settings ▸ Layout. Everything in the stream scales with it, code and tool cards included, so they keep their proportions."
+    },
+    "widgex.xactor.recordCorpus": {
+      "type": "boolean",
+      "default": false,
+      "description": "Record what the agent looked for on a page, what the page offered, and which element it picked — to ~/.widgex/xactor-corpus. This is how we measure and improve the browser fallback: every search already computes the ranked candidates and their scores, and throws them away. Off by default because it captures the text of pages you drive. Nothing is sent anywhere; it is a file on this machine."
+    },
+    "widgex.startLayout": {
+      "type": "string",
+      "enum": [
+        "ask",
+        "code",
+        "web",
+        "product",
+        "none"
+      ],
+      "enumDescriptions": [
+        "Ask, on the empty editor area.",
+        "Writing code — opens Files and Work.",
+        "Working on the web — opens Browser and Files.",
+        "Running the work — opens Work and Browser.",
+        "Start with nothing open."
+      ],
+      "default": "ask",
+      "description": "Which tabs a window opens with. Left at 'ask', the empty editor area offers the three layouts instead of a list of keyboard shortcuts, and picking one writes it here. Change it whenever; it decides nothing else.",
+      "scope": "resource"
+    },
+    "widgex.preview.maxLive": {
+      "type": "number",
+      "default": 3,
+      "minimum": 1,
+      "description": "How many tasks' apps may run at once. Starting one more puts the one you looked at least recently to sleep: it keeps a picture of how it last looked, and one click starts it again. Apps you have on screen, or an agent is using, are never put to sleep."
+    },
+    "widgex.workbench.followEdits": {
+      "type": "boolean",
+      "default": true,
+      "description": "Open the file an agent just edited in the workbench, at the line it changed. It comes to the front only when that agent's task is on screen and you have not switched tabs or typed in the last 20 seconds; otherwise it opens behind what you are doing."
+    },
+    "widgex.showCoordinator": {
+      "type": "boolean",
+      "default": false,
+      "description": "List the Coordinator in the sidebar, above your tasks. Off by default for now. It was hidden while it sat in the same strip as the tasks, where it read as task zero and people did work in it — the one thing it is not for. A row of its own, above the list rather than in it, says what it is. Nothing opens onto it: the column still lands on the task you were last in."
+    },
+    "widgex.layout": {
+      "type": "object",
+      "markdownDescription": "Where the work board and each Settings tab are drawn. Set from **Settings ▸ Layout**, or by hand. `activityBar` is a row of its own in the WidgeX column's task tree (the board's default); `sidePanel` is the widget board, the column's Settings list (the Settings tabs' default); `topTray` and `bottomTray` are the column's top and bottom edges, which hold one item between them; `editor` is a pinned tab in the workbench; `panel` is the bottom panel. A part nothing is placed in is hidden. Tasks and the main sessions are the column itself and are not set here.",
+      "properties": {
+        "board": {
+          "type": "string",
+          "enum": [
+            "activityBar",
+            "topTray",
+            "bottomTray",
+            "editor",
+            "panel"
+          ],
+          "default": "activityBar"
+        },
+        "settings": {
+          "type": "object",
+          "properties": {
+            "tasks": {
+              "type": "string",
+              "enum": [
+                "activityBar",
+                "sidePanel",
+                "topTray",
+                "bottomTray",
+                "editor",
+                "panel"
+              ],
+              "default": "sidePanel"
+            },
+            "models": {
+              "type": "string",
+              "enum": [
+                "activityBar",
+                "sidePanel",
+                "topTray",
+                "bottomTray",
+                "editor",
+                "panel"
+              ],
+              "default": "sidePanel"
+            },
+            "harnesses": {
+              "type": "string",
+              "enum": [
+                "activityBar",
+                "sidePanel",
+                "topTray",
+                "bottomTray",
+                "editor",
+                "panel"
+              ],
+              "default": "sidePanel"
+            },
+            "usage": {
+              "type": "string",
+              "enum": [
+                "activityBar",
+                "sidePanel",
+                "topTray",
+                "bottomTray",
+                "editor",
+                "panel"
+              ],
+              "default": "sidePanel"
+            },
+            "seals": {
+              "type": "string",
+              "enum": [
+                "activityBar",
+                "sidePanel",
+                "topTray",
+                "bottomTray",
+                "editor",
+                "panel"
+              ],
+              "default": "sidePanel"
+            },
+            "annotations": {
+              "type": "string",
+              "enum": [
+                "activityBar",
+                "sidePanel",
+                "topTray",
+                "bottomTray",
+                "editor",
+                "panel"
+              ],
+              "default": "sidePanel"
+            },
+            "remotes": {
+              "type": "string",
+              "enum": [
+                "activityBar",
+                "sidePanel",
+                "topTray",
+                "bottomTray",
+                "editor",
+                "panel"
+              ],
+              "default": "sidePanel"
+            }
+          },
+          "additionalProperties": false
+        }
+      },
+      "additionalProperties": false,
+      "default": {
+        "board": "activityBar",
+        "settings": {}
+      },
+      "scope": "application"
+    },
+    "widgex.column.treeSide": {
+      "type": "string",
+      "enum": [
+        "auto",
+        "left",
+        "right"
+      ],
+      "default": "auto",
+      "description": "Which edge of the WidgeX column the task tree sits against. It wants the window edge, so the conversation sits inboard of it. 'auto' follows workbench.sideBar.location, which is right unless you have dragged WidgeX into the secondary side bar — nothing can detect that, so set this if the tree ends up against the editor.",
+      "enumDescriptions": [
+        "Follow workbench.sideBar.location.",
+        "Always against the left edge of the column.",
+        "Always against the right edge of the column."
+      ]
+    },
+    "widgex.backendUrl": {
+      "type": "string",
+      "default": "",
+      "description": "URL of the WidgeX backend server. Leave empty to use the production backend at https://www.widgex.ai — that is what sign-in and billing talk to. Set it to http://localhost:3000 to develop against a local widgex-backend, or set WIDGEX_BACKEND_URL in the environment, which is used when this is empty."
+    },
+    "widgex.telemetry.sink": {
+      "type": "string",
+      "enum": [
+        "off",
+        "local",
+        "upload",
+        "posthog"
+      ],
+      "enumDescriptions": [
+        "Collect nothing at all.",
+        "Write events to ~/.widgex/telemetry/ and never send them anywhere.",
+        "Write them there and also send them to WidgeX. Nothing is sent to any third-party analytics service.",
+        "Old name for 'upload'. Events are no longer sent to PostHog."
+      ],
+      "default": "upload",
+      "tags": [
+        "telemetry",
+        "usesOnlineServices"
+      ],
+      "description": "Where product analytics go. They are sent to WidgeX only, never to a third-party analytics service. Events record which features are used, which models run, which agent tools run, how long they take and how often they fail. They never include your code, file contents, diffs, file paths, repo or branch names, prompts, model output, shell commands, URLs or your email address — and never the arguments to an api.* call, only its name. Once you sign in they are linked to your account. Every event is also written to ~/.widgex/telemetry/ as one JSON object per line, kept 30 days, so you can read exactly what was sent. Set this to 'local' to keep them on this machine, or 'off' to collect nothing. The editor's telemetry.telemetryLevel setting is honoured too: 'off' or 'crash' collects nothing and 'error' sends only error reports; the DO_NOT_TRACK=1 environment variable also collects nothing. Privacy policy: https://www.widgex.ai/privacy"
+    },
+    "widgex.pythonPath": {
+      "type": "string",
+      "default": "",
+      "description": "Python interpreter used for agent tools, the browser widget and workflow checks. Must be Python 3.10 or newer. Leave empty to search for one automatically — note that on macOS the system python3 is 3.9 and will not work."
+    },
+    "widgex.harness.tokenCap": {
+      "type": "number",
+      "default": 400000,
+      "minimum": 1000,
+      "description": "Lifetime token ceiling for a workflow armed from the chat composer, and for any other workflow laid on a session without one of its own. An armed workflow serves its own turn after each of yours, so this is what bounds it. The cap is checked mid-turn and interrupts when crossed — keep it generous relative to one demo turn, or a walkthrough can be killed while the card is still on screen. There is no \"no cap\": 0 or an unusable value means the default. Turns you type yourself are never counted. Scheduled harnesses have their own limit, set per harness in the Harness Manager (1,000,000 tokens a day unless changed)."
+    },
+    "widgex.context.compactAtPercent": {
+      "type": "number",
+      "default": 33,
+      "minimum": 10,
+      "maximum": 90,
+      "markdownDescription": "How full an agent's context may get, as a percentage of the model's context window, before the conversation is compacted into a short rundown. The full transcript stays readable after a compaction, so a low value costs little and keeps every turn cheap. Applies to every provider, from the next turn. Also set on Settings → Routing."
+    },
+    "widgex.harness.orchestrateByDefault": {
+      "type": "boolean",
+      "default": false,
+      "description": "Run every session you start inside the built-in \"orchestrate\" workflow. The orchestrator plans the work and hands each step to a subagent on its own branch, requiring evidence before it moves on; it holds no permission except spawning, so it cannot read, edit or run anything itself — which is the point, and also what makes it a large change to how a session behaves. Off by default until it has been used enough to trust. Turning it off also releases any session already running one, so it is a way out and not just a way of not starting more."
+    },
+    "widgex.inbox.shareWithTeam": {
+      "type": "boolean",
+      "default": true,
+      "description": "Show agents' questions, reviews and requests for you in XTADEL's \"Actions for you\", so you can answer them away from this machine. Each one is written, end-to-end encrypted, into its task's folder in the project, where everyone who can read that task can see it — the same people who can already read the task's conversation. Questions about something only this machine can check (a running app, a working copy) are never shared. Off, nothing new is shared and answers from XTADEL are not applied."
+    },
+    "widgex.hooks.enabled": {
+      "type": "boolean",
+      "default": true,
+      "description": "Let programs on this machine start a workflow through one of its hooks — a git hook, a CI job or a script posting to http://127.0.0.1:<port>/v1/hooks/<id> with the hook's token. Only reachable from this machine, and a hook does nothing until you generate its token. Takes effect after a reload."
+    },
+    "widgex.hooks.port": {
+      "type": "number",
+      "default": 7477,
+      "minimum": 1,
+      "maximum": 65535,
+      "description": "Port the local hook server listens on, on 127.0.0.1 only. Change it if another program already uses 7477. Every WidgeX window on this machine should use the same port. Takes effect after a reload."
+    },
+    "widgex.bugReports.upload": {
+      "type": "boolean",
+      "default": false,
+      "description": "Send bug reports filed by agents to the WidgeX intake service. Reports are always written to .widgex/bugs/ locally; this controls whether they are uploaded. An upload carries the agent's description of the problem, your WidgeX version and platform, and facts about the session (model, settings, cost, error messages, and the project, task and branch names); the conversation excerpt, logs and file list stay on this machine. While analytics are off, each report is asked about first. Privacy policy: https://www.widgex.ai/privacy"
+    },
+    "widgex.bugReports.endpoint": {
+      "type": "string",
+      "default": "",
+      "description": "Bug report intake URL. Defaults to {backendUrl}/api/bugs when empty. Only used when widgex.bugReports.upload is enabled."
+    },
+    "widgex.bugReports.intakeKey": {
+      "type": "string",
+      "default": "",
+      "description": "Shared key the bug report intake requires. Identifies a WidgeX build rather than a user, so it is abuse control rather than authentication. Uploads stay queued until this is set."
+    },
+    "widgex.xylon.saveDirectory": {
+      "type": "string",
+      "default": "",
+      "description": "Directory containing .wxylon context files."
+    },
+    "widgex.xylon.workingDirectory": {
+      "type": "string",
+      "default": "",
+      "description": "Temporary directory where .wxylon files are unpacked for editing."
+    },
+    "widgex.browser.useNativeView": {
+      "type": "boolean",
+      "default": true,
+      "description": "Use the native Integrated Browser (BrowserView) instead of WebRTC streaming. Set to false for web/code-server environments."
+    },
+    "widgex.browser.openInChrome": {
+      "type": "boolean",
+      "default": false,
+      "markdownDescription": "Open pages in a real Chrome, shown as a tab here, instead of the built-in browser — addresses you type, links from the WidgeX column, pull requests, and agents' browsing. Uses Microsoft Edge when Chrome is not installed.\n\nOff by default: pages open in the built-in browser, and when a site refuses it (Google sign-in, for example) WidgeX offers to open that one page in Chrome. **WidgeX: Open in Chrome…** does the same by hand. An agent session already browsing in Chrome stays there until it ends."
+    },
+    "widgex.xactor.hfactor": {
+      "type": "number",
+      "default": 1,
+      "description": "Humanization speed factor for browser automation. Higher is faster: it divides every delay. 1.0 = normal human speed, 2.0 = 2x faster, 0.5 = 2x slower. Scales all timing (mouse movement, click hold, typing, cognitive pauses)."
+    },
+    "widgex.providers": {
+      "type": "array",
+      "default": [],
+      "description": "Configured LLM providers and their models. Left empty, the built-in providers are used; setting it replaces them entirely, so new built-ins will not appear until you clear it."
+    },
+    "widgex.defaultProvider": {
+      "type": "string",
+      "default": "",
+      "description": "Default provider ID for new sessions. Empty until you enable a model; models are off until you turn them on in Model configuration."
+    },
+    "widgex.defaultModel": {
+      "type": "string",
+      "default": "",
+      "description": "Default model ID for new sessions. Empty until you enable a model."
+    },
+    "widgex.gitBashPath": {
+      "type": "string",
+      "default": "",
+      "description": "Absolute path to bash.exe. Windows only. The Claude Code CLI requires git-bash and exits immediately without it; set this if Git is installed somewhere non-standard (scoop, winget, portable) and is not being found automatically."
+    },
+    "widgex.geminiCliPath": {
+      "type": "string",
+      "default": "",
+      "description": "Absolute path to the gemini binary. WidgeX does not ship it — install with 'npm install -g @google/gemini-cli'. Set this only if it is installed somewhere WidgeX cannot find; an editor launched from Finder or the Dock does not inherit a login shell's PATH."
+    },
+    "widgex.codexCliPath": {
+      "type": "string",
+      "default": "",
+      "description": "Absolute path to the codex-acp binary — the ACP adapter, not the codex CLI itself, which has no ACP mode. WidgeX does not ship it — install with 'npm install -g @agentclientprotocol/codex-acp'. Set this only if it is installed somewhere WidgeX cannot find; an editor launched from Finder or the Dock does not inherit a login shell's PATH."
+    },
+    "widgex.copilotCliPath": {
+      "type": "string",
+      "default": "",
+      "description": "Absolute path to GitHub's Copilot CLI (copilot). WidgeX does not ship it — install with 'npm install -g @github/copilot', then sign in with 'copilot login'. Set this only if it is installed somewhere WidgeX cannot find; an editor launched from Finder or the Dock does not inherit a login shell's PATH."
+    },
+    "widgex.panel.openOnStartup": {
+      "type": "boolean",
+      "default": true,
+      "description": "Open the WidgeX board when the window starts into an empty editor area, in place of the Welcome tab. Editors restored from your last session are left alone — the board never opens on top of them. Turn this off to always start with an empty editor area."
+    },
+    "widgex.xtadel.workSummaries": {
+      "type": "boolean",
+      "default": true,
+      "description": "Write a two or three sentence summary of each conversation once it has been quiet for a few minutes, so your organisation's workspace can say what a stretch of work was. An excerpt of the conversation is sent to a small model you have enabled, or to the conversation's own model when there is none."
+    },
+    "widgex.landing.suggestCommitMessages": {
+      "type": "boolean",
+      "default": true,
+      "description": "Ask this session's model to write the commit messages a merge needs, instead of using a generic one. The uncommitted diff is sent to whichever provider the session is set to."
+    },
+    "widgex.models.guidelinesInPrompt": {
+      "type": "boolean",
+      "default": true,
+      "description": "Send your model guidelines — the \"use when\" and \"don't use when\" sentences from Model configuration — to the agent, so it can pick the right model when it spins up a subagent. Composed once per session, so a change takes effect for new sessions. Turn this off to keep the guidelines as notes for yourself only."
+    },
+    "widgex.drive.onedrive.clientId": {
+      "type": "string",
+      "default": "",
+      "description": "Application (client) ID of an Azure app registration used to reach OneDrive. Needs the delegated scopes Files.ReadWrite and offline_access, and http://127.0.0.1 registered under \"Mobile and desktop applications\". Not a secret: a desktop app is a public client and signs in with PKCE."
+    },
+    "widgex.drive.onedrive.tenant": {
+      "type": "string",
+      "default": "",
+      "description": "Directory (tenant) ID, for a single-tenant app registration. Leave empty to use \"common\", which accepts both personal and work Microsoft accounts."
+    },
+    "widgex.drive.dropbox.appKey": {
+      "type": "string",
+      "default": "",
+      "description": "App key of a Dropbox app used to reach Dropbox. Create one at https://www.dropbox.com/developers/apps (Scoped access, Full Dropbox) with the permissions account_info.read, files.metadata.read, files.metadata.write, files.content.read, files.content.write and sharing.read, and add the loopback redirect URI http://127.0.0.1:47619/dropbox-callback under OAuth 2 → Redirect URIs (Dropbox matches it exactly, port included). Not a secret: a desktop app is a public client and signs in with PKCE."
+    },
+    "widgex.drive.syncIntervalMinutes": {
+      "type": "number",
+      "default": 5,
+      "description": "How often each document hub pulls changes from its drive."
+    },
+    "widgex.drive.maxFileSizeMb": {
+      "type": "number",
+      "default": 50,
+      "description": "Files larger than this are left in the drive and never mirrored. Keeps a hub from importing a video library alongside the documents."
+    },
+    "widgex.xylon.sync.enabled": {
+      "type": "boolean",
+      "default": false,
+      "description": "Sync projects you share yourself (with your own devices or with people you invite). Off by default: transcripts contain whatever the agent read, so publishing them is opt-in. A repository that belongs to an organisation project you are a member of syncs to that organisation regardless — working in it is the consent, and WidgeX says so the first time."
+    },
+    "widgex.xylon.sync.durableIntervalMs": {
+      "type": "number",
+      "default": 300000,
+      "description": "How often a shared session is uploaded. Long on purpose — each upload is a billed write, and collaborators still see work sooner because pulling is on its own faster clock."
+    },
+    "widgex.xylon.sync.durableMaxBytes": {
+      "type": "number",
+      "default": 1048576,
+      "description": "Upload early once this much transcript is waiting, rather than sitting on it until the interval elapses."
+    },
+    "widgex.xylon.syncDirectory": {
+      "type": "string",
+      "default": "",
+      "description": "Where sync bookkeeping is kept. Empty derives ~/.widgex/wxylon/sync — deliberately outside the working tree, so it is never zipped into an archive."
+    },
+    "widgex.work.continuationBudget": {
+      "type": "number",
+      "default": 0,
+      "minimum": 0,
+      "markdownDescription": "Weighted tokens one card may spend before it is moved to **Failed**.\n\nA card whose session stops early is woken again rather than left sitting — see the board's Failed column for what stopped. This is the ceiling that ends a session that will never finish. **0 turns it off**, which leaves the Coordinator's judgement as the only thing that can stop a runaway.\n\nThe unit is the weighted token figure the spend page reports, so a number here can be compared against what the board already shows you."
+    }
+  }
+}

package/viewer/index.css

@@ -0,0 +1,160 @@
+/* The file viewer: VS Code's dark theme, read-only. */
+:root {
+  --bg: #1e1e1e; --side: #252526; --tabs: #2d2d2d; --border: #3c3c3c; --fg: #d4d4d4;
+  --dim: #858585; --accent: #0e639c; --mark: rgba(255, 213, 79, 0.13); --markEdge: #e5c07b;
+  color-scheme: dark;
+}
+* { box-sizing: border-box; }
+html, body, #root { height: 100%; margin: 0; }
+body { background: var(--bg); color: var(--fg); font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
+.shell { display: flex; height: 100%; }
+.tree { width: 260px; flex: none; background: var(--side); border-right: 1px solid var(--border); overflow: auto; padding-bottom: 12px; user-select: none; }
+.tree-title { font-size: 11px; letter-spacing: .06em; color: var(--dim); padding: 10px 12px 6px; }
+.row { display: flex; gap: 4px; align-items: center; height: 22px; padding-right: 8px; cursor: pointer; white-space: nowrap; color: #cccccc; }
+.row:hover { background: #2a2d2e; }
+.row.current { background: #37373d; color: #ffffff; }
+.twisty { width: 12px; flex: none; color: var(--dim); font-size: 10px; }
+.folder { color: #cccccc; }
+main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+.tabs { display: flex; background: var(--tabs); height: 35px; flex: none; }
+.tab { padding: 0 16px; display: flex; align-items: center; color: #969696; border-right: 1px solid #252526; }
+.tab.active { background: var(--bg); color: #ffffff; border-top: 1px solid var(--accent); }
+.crumbs { padding: 4px 16px; color: #a9a9a9; font-size: 12px; flex: none; border-bottom: 1px solid #2b2b2b; }
+.body { flex: 1; overflow: auto; }
+.note { padding: 24px; color: var(--dim); }
+
+.code { border-collapse: collapse; font: 13px/19px Consolas, "Cascadia Code", Menlo, monospace; width: 100%; }
+.code td { padding: 0; vertical-align: top; }
+.gutter { color: #6e7681; text-align: right; padding: 0 16px 0 12px !important; user-select: none; width: 1%; white-space: nowrap; }
+.line { white-space: pre; padding-right: 24px !important; }
+.line code { font: inherit; }
+tr.marked { background: var(--mark); }
+tr.marked .gutter { color: #c6c6c6; box-shadow: inset 2px 0 0 var(--markEdge); }
+
+.annotator { display: flex; flex-direction: column; height: 100%; }
+.toolbar { display: flex; gap: 6px; align-items: center; padding: 6px 12px; background: var(--tabs); border-bottom: 1px solid var(--border); flex: none; }
+.toolbar .spacer { flex: 1; }
+button { background: #3a3d41; color: #ffffff; border: 1px solid transparent; border-radius: 2px; padding: 4px 10px; font: inherit; cursor: pointer; }
+button:hover:not(:disabled) { background: #45494e; }
+button:disabled { opacity: .45; cursor: default; }
+button.on { border-color: #007fd4; background: #094771; }
+button.primary { background: var(--accent); }
+button.primary:hover { background: #1177bb; }
+button.swatch { width: 18px; height: 18px; padding: 0; border-radius: 50%; }
+button.swatch.on { outline: 2px solid #ffffff; outline-offset: 1px; }
+.status { padding: 6px 12px; background: #1b2b3a; color: #9cdcfe; flex: none; }
+.stage { position: relative; margin: 16px auto; max-width: calc(100% - 32px); }
+.stage.image img { display: block; max-width: 100%; height: auto; background: repeating-conic-gradient(#2a2a2a 0% 25%, #333 0% 50%) 50% / 16px 16px; }
+.stage.html { width: calc(100% - 32px); }
+.stage.html iframe { display: block; width: 100%; height: 78vh; border: 1px solid var(--border); background: #ffffff; }
+.overlay { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
+.overlay.tool-pen { cursor: crosshair; }
+.overlay.tool-pin { cursor: copy; }
+.overlay.tool-look { pointer-events: none; }
+.pin { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
+.pin .dot { width: 24px; height: 24px; padding: 0; border-radius: 50%; background: #c586c0; border: 2px solid #ffffff; font-weight: 700; }
+.pin .label { position: absolute; left: 30px; top: -2px; background: #252526; border: 1px solid var(--border); padding: 3px 8px; white-space: pre-wrap; width: max-content; max-width: 280px; }
+.pin .bubble { position: absolute; left: 30px; top: -6px; background: #252526; border: 1px solid #007fd4; padding: 8px; width: 280px; }
+.pin textarea { width: 100%; min-height: 70px; background: #3c3c3c; color: var(--fg); border: 1px solid var(--border); font: inherit; padding: 6px; resize: vertical; }
+.bubble-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
+
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em
+}
+code.hljs {
+  padding: 3px 5px
+}
+/*
+ * Visual Studio 2015 dark style
+ * Author: Nicolas LLOBERA <nllobera@gmail.com>
+ */
+.hljs {
+  background: #1E1E1E;
+  color: #DCDCDC
+}
+.hljs-keyword,
+.hljs-literal,
+.hljs-symbol,
+.hljs-name {
+  color: #569CD6
+}
+.hljs-link {
+  color: #569CD6;
+  text-decoration: underline
+}
+.hljs-built_in,
+.hljs-type {
+  color: #4EC9B0
+}
+.hljs-number,
+.hljs-class {
+  color: #B8D7A3
+}
+.hljs-string,
+.hljs-meta .hljs-string {
+  color: #D69D85
+}
+.hljs-regexp,
+.hljs-template-tag {
+  color: #9A5334
+}
+.hljs-subst,
+.hljs-function,
+.hljs-title,
+.hljs-params,
+.hljs-formula {
+  color: #DCDCDC
+}
+.hljs-comment,
+.hljs-quote {
+  color: #57A64A;
+  font-style: italic
+}
+.hljs-doctag {
+  color: #608B4E
+}
+.hljs-meta,
+.hljs-meta .hljs-keyword,
+.hljs-tag {
+  color: #9B9B9B
+}
+.hljs-variable,
+.hljs-template-variable {
+  color: #BD63C5
+}
+.hljs-attr,
+.hljs-attribute {
+  color: #9CDCFE
+}
+.hljs-section {
+  color: gold
+}
+.hljs-emphasis {
+  font-style: italic
+}
+.hljs-strong {
+  font-weight: bold
+}
+/*.hljs-code {
+  font-family:'Monospace';
+}*/
+.hljs-bullet,
+.hljs-selector-tag,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #D7BA7D
+}
+.hljs-addition {
+  background-color: #144212;
+  display: inline-block;
+  width: 100%
+}
+.hljs-deletion {
+  background-color: #600;
+  display: inline-block;
+  width: 100%
+}