bitpull 0.1.23 → 0.1.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bitpull",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "description": "BitPull (bitpull.cloud): share signed, AI-readable code, computing power and open AI models with AI tools through MCP. CLI and MCP server.",
   "mcpName": "io.github.SamuealPK/bitpull",
   "bin": {
@@ -8,7 +8,8 @@
   },
   "files": [
     "bitpull.cjs",
-    "README.md"
+    "README.md",
+    "ui"
   ],
   "engines": {
     "node": ">=20"

package/ui/ide-terminal.js

@@ -0,0 +1,57 @@
+// Plugs the terminal into the Projects editor: the bottom panel's "Terminal" tab, ⌘J/Ctrl+J, a shell in
+// the project's folder, and the agent's commands shown read-only in an "Agent" tab. The agent never types
+// into a shell: its commands run through the Projects path, with its approvals, and only appear here.
+import { mountTerminal } from "./terminal.js";
+
+function register() {
+  const ide = window.BitPullIDE;
+  if (!ide || !ide.terminal) return setTimeout(register, 50);
+  let host = null;
+  let opts = null;
+  let term = null;
+  let current = null;
+  const start = () => {
+    if (term || !host || !opts || !opts.folder) return;
+    term = mountTerminal(host, { cwd: opts.folder, token: opts.token, t: opts.t });
+  };
+  ide.terminal.register({
+    mount(container, o) {
+      host = container;
+      opts = { ...o };
+    },
+    open() {
+      start();
+      if (term) term.fit();
+    },
+    close() {
+      /* the panel hides it; shells keep running until the page closes */
+    },
+    newTab() {
+      start();
+      if (term) term.newTab();
+    },
+    runVisible(command) {
+      start();
+      current = term ? term.runVisible(command) : null;
+      return current;
+    },
+    agentOutput(text) {
+      if (current) current.write(String(text).replace(/\r?\n/g, "\r\n"));
+    },
+    agentDone(code) {
+      if (current) current.done(code);
+      current = null;
+    },
+    folderChanged(folder) {
+      if (!opts) return;
+      opts.folder = folder;
+      // A new folder is a new place to work: the old shells close, new ones open there.
+      if (term) {
+        term.dispose();
+        term = null;
+        start();
+      }
+    },
+  });
+}
+register();

package/ui/ide.css

@@ -0,0 +1,271 @@
+/* BitPull projects: the layout and look of a modern code editor (VS Code conventions), BitPull's own icons. */
+:root {
+  --surface: var(--bg); --bg: #1f1f1f; --side: #181818; --bar: #181818; --raised: #2a2d2e; --hover: #2a2d2e; --sel: #37373d; --sel-focus: #04395e;
+  --text: #cccccc; --bright: #e7e7e7; --muted: #9d9d9d; --faint: #6e7681; --line: #2b2b2b; --line2: #3c3c3c;
+  --accent: #0078d4; --accent-ink: #ffffff; --focus: #0078d4; --input: #313131;
+  --good: #73c991; --warn: #cca700; --bad: #f14c4c; --mod: #e2c08d; --new: #73c991; --del: #c74e39; --ign: #8c8c8c;
+  --guide: #585858; --tab: #181818; --tab-on: #1f1f1f;
+  --w-side: 260px; --w-agent: 380px; --s-panel: 240px;
+  color-scheme: dark;
+}
+@media (prefers-color-scheme: light) {
+  :root { --bg: #ffffff; --side: #f8f8f8; --bar: #f8f8f8; --raised: #f2f2f2; --hover: #f2f2f2; --sel: #e4e6f1; --sel-focus: #cce5ff;
+    --text: #3b3b3b; --bright: #1f1f1f; --muted: #6e6e6e; --faint: #8b8b8b; --line: #e5e5e5; --line2: #cecece;
+    --accent: #005fb8; --focus: #005fb8; --input: #ffffff; --good: #388a34; --warn: #bf8803; --bad: #e51400; --mod: #895503; --new: #388a34; --del: #ad0707; --ign: #8e8e90;
+    --guide: #cfcfcf; --tab: #f8f8f8; --tab-on: #ffffff; color-scheme: light; }
+}
+* { box-sizing: border-box; }
+html, body { height: 100%; margin: 0; }
+body { background: var(--bg); color: var(--text); font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Noto Sans", sans-serif; overflow: hidden; }
+[hidden] { display: none !important; }
+.grow { flex: 1 1 auto; min-width: 0; }
+.muted { color: var(--muted); }
+.small { font-size: 12px; }
+.pad { padding: 6px 12px; }
+.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
+.row.end { justify-content: flex-end; }
+a { color: var(--accent); }
+
+/* ---- icons: drawn in the page, coloured by their text colour ---- */
+svg.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; display: block; flex: none; }
+svg.f { width: 16px; height: 16px; display: block; flex: none; }
+
+/* ---- buttons ---- */
+:where(#ide, #modal, #menu) button { font: inherit; color: inherit; cursor: pointer; }
+:where(#ide, #modal) button:focus-visible, :where(#ide, #modal) input:focus-visible, :where(#ide, #modal) select:focus-visible, :where(#ide, #modal) textarea:focus-visible, .item:focus-visible { outline: 1px solid var(--focus); outline-offset: -1px; }
+button.primary, #modal button.primary { background: var(--accent); color: var(--accent-ink); border: 1px solid transparent; border-radius: 4px; padding: 4px 12px; }
+button.primary:hover { filter: brightness(1.1); }
+button.ghost { background: transparent; border: 1px solid var(--line2); border-radius: 4px; padding: 4px 10px; color: var(--text); }
+button.ghost:hover { background: var(--hover); }
+button.danger, #modal button.danger { background: var(--bad); color: #fff; border: 0; border-radius: 4px; padding: 4px 12px; }
+button.ib { background: transparent; border: 0; border-radius: 5px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--text); }
+button.ib:hover { background: var(--hover); }
+button.ib.danger { color: var(--bad); background: transparent; }
+button:disabled { opacity: .5; cursor: default; }
+button.wide { width: 100%; display: flex; gap: 6px; justify-content: center; align-items: center; padding: 5px 10px; }
+
+/* ---- form fields ---- */
+:where(#ide, #modal) :is(input[type=text], input[type=number], select, textarea) { background: var(--input); color: var(--bright); border: 1px solid var(--line2); border-radius: 4px; padding: 4px 6px; font: inherit; min-width: 0; }
+:where(#ide, #modal) textarea { width: 100%; resize: none; }
+.field { display: flex; align-items: center; gap: 4px; background: var(--input); border: 1px solid var(--line2); border-radius: 4px; padding: 0 4px; }
+.field:focus-within { border-color: var(--focus); }
+.field input[type=text] { border: 0 !important; background: transparent !important; flex: 1; padding: 4px 2px !important; outline: none; }
+.field .opt { display: inline-flex; align-items: center; border-radius: 3px; padding: 0 3px; color: var(--muted); cursor: pointer; font-size: 12px; }
+.field .opt input { position: absolute; opacity: 0; pointer-events: none; }
+.field .opt:has(input:checked) { background: var(--sel-focus); color: var(--bright); outline: 1px solid var(--focus); }
+.field svg.i { color: var(--muted); }
+
+/* ---- the frame ---- */
+#ide { display: grid; grid-template-rows: 35px minmax(0, 1fr) 22px; height: 100%; }
+#titlebar { display: flex; align-items: center; gap: 2px; padding: 0 6px; background: var(--bar); border-bottom: 1px solid var(--line); min-width: 0; }
+button.tb { background: transparent; border: 0; border-radius: 5px; height: 26px; min-width: 26px; padding: 0 6px; display: inline-flex; align-items: center; gap: 5px; color: var(--text); }
+button.tb:hover, button.tb.on { background: var(--hover); }
+button.tb.folder { font-weight: 600; max-width: 260px; }
+#folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+button.tb.search { width: min(520px, 46vw); justify-content: center; border: 1px solid var(--line2); background: var(--input); height: 24px; }
+button.tb.search span.muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+#workbench { display: grid; min-height: 0; min-width: 0; overflow: hidden; }
+#activity { grid-area: act; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 4px; background: var(--side); border-inline-end: 1px solid var(--line); }
+#activity button { position: relative; background: transparent; border: 0; width: 48px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--faint); }
+#activity button svg.i { width: 22px; height: 22px; stroke-width: 1.4; }
+#activity button:hover, #activity button.on { color: var(--bright); }
+#activity button.on::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
+#side { grid-area: side; background: var(--side); overflow: hidden; display: flex; flex-direction: column; min-width: 0; border-inline-end: 1px solid var(--line); }
+#side > section { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: auto; }
+#editor-area { grid-area: edit; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
+#panel { grid-area: panel; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); border-top: 1px solid var(--line); }
+#panel.at-left, #panel.at-right { border-top: 0; border-inline-start: 1px solid var(--line); }
+#panel.at-top { border-top: 0; border-bottom: 1px solid var(--line); }
+#agent { grid-area: agent; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--side); border-inline-start: 1px solid var(--line); }
+.sash { position: relative; z-index: 4; }
+.sash[data-split="side"] { grid-area: s1; }
+.sash[data-split="panel"] { grid-area: s2; }
+.sash[data-split="agent"] { grid-area: s3; }
+.sash.v { cursor: col-resize; }
+.sash.h { cursor: row-resize; }
+.sash::after { content: ""; position: absolute; inset: 0; margin: -2px; }
+.sash:hover::after, .sash.drag::after { background: var(--focus); opacity: .8; margin: 0; }
+.sash.v:hover::after, .sash.v.drag::after { inset-inline: -1px; }
+.sash.h:hover::after, .sash.h.drag::after { inset-block: -1px; }
+
+/* ---- side bar ---- */
+.view-title { display: flex; align-items: center; height: 35px; padding: 0 8px 0 20px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); flex: none; }
+.pane { display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--line); flex: none; }
+.pane:first-of-type { border-top: 0; }
+.pane.open { flex: 1 1 0; }
+.pane-head { display: flex; align-items: center; gap: 2px; height: 22px; padding-inline: 2px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--text); cursor: pointer; user-select: none; flex: none; }
+.pane-head .twist { color: var(--text); transition: transform .1s; }
+.pane.open .pane-head .twist { transform: rotate(90deg); }
+:dir(rtl) .pane-head .twist { transform: scaleX(-1); }
+:dir(rtl) .pane.open .pane-head .twist { transform: rotate(90deg); }
+.pane-acts { display: none; gap: 2px; }
+.pane-head:hover .pane-acts, .pane:focus-within .pane-acts { display: inline-flex; }
+.pane-body { overflow: auto; min-height: 0; flex: 1; display: none; }
+.pane.open .pane-body { display: block; }
+.pane-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sub-head { padding: 6px 12px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
+
+/* ---- lists and the tree ---- */
+#ide ul.list, #ide ul.tree, #modal ul.list, #menu ul { list-style: none; margin: 0; padding: 0; }
+ul.list li { display: flex; gap: 6px; align-items: center; height: 22px; padding: 0 12px; cursor: pointer; white-space: nowrap; overflow: hidden; }
+ul.list li .name { overflow: hidden; text-overflow: ellipsis; }
+ul.list li:hover { background: var(--hover); }
+ul.list li.on { background: var(--sel); }
+ul.tree ul { list-style: none; margin: 0; padding: 0; }
+ul.tree .item { position: relative; display: flex; align-items: center; gap: 4px; height: 22px; padding-inline-end: 8px; cursor: pointer; white-space: nowrap; color: var(--text); }
+ul.tree .item:hover { background: var(--hover); }
+ul.tree .item.on { background: var(--sel); }
+#side:focus-within ul.tree .item.on { background: var(--sel-focus); outline: 1px solid var(--focus); outline-offset: -1px; }
+ul.tree .item .twist { width: 16px; color: var(--text); flex: none; }
+ul.tree .item.open .twist svg { transform: rotate(90deg); }
+:dir(rtl) ul.tree .item .twist svg { transform: scaleX(-1); }
+:dir(rtl) ul.tree .item.open .twist svg { transform: rotate(90deg); }
+ul.tree .item .name { overflow: hidden; text-overflow: ellipsis; }
+ul.tree .item .git { margin-inline-start: auto; font-size: 11px; font-weight: 600; padding-inline-start: 6px; }
+ul.tree .item.dot .name, ul.tree .item.ignored .name { color: var(--ign); }
+ul.tree .item.ignored svg.f { opacity: .55; }
+ul.tree .item.git-M .name, ul.tree .item.git-M .git { color: var(--mod); }
+ul.tree .item.git-U .name, ul.tree .item.git-U .git, ul.tree .item.git-A .name, ul.tree .item.git-A .git { color: var(--new); }
+ul.tree .item.git-D .name, ul.tree .item.git-D .git { color: var(--del); }
+ul.tree .item .acts { display: none; gap: 1px; margin-inline-start: 4px; }
+ul.tree .item:hover .acts { display: inline-flex; }
+ul.tree .item:hover .git { display: none; }
+.guide { position: absolute; top: 0; bottom: 0; width: 1px; background: transparent; }
+#side:hover .guide { background: var(--guide); opacity: .45; }
+.badge { font-size: 11px; padding: 0 6px; border-radius: 9px; background: var(--raised); color: var(--muted); flex: none; }
+.badge.bad { color: var(--bad); } .badge.warn { color: var(--warn); } .badge.good { color: var(--good); }
+.count { font-size: 11px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--raised); color: var(--text); text-align: center; }
+
+/* ---- editor area ---- */
+#tabs-row { display: flex; align-items: stretch; height: 35px; background: var(--tab); border-bottom: 1px solid var(--line); flex: none; }
+#tabs { display: flex; overflow-x: auto; overflow-y: hidden; flex: 1; scrollbar-width: none; }
+#tabs .tab { display: flex; gap: 6px; align-items: center; padding: 0 6px 0 10px; border-inline-end: 1px solid var(--line); cursor: pointer; white-space: nowrap; color: var(--muted); min-width: 0; position: relative; background: var(--tab); }
+#tabs .tab:hover { color: var(--text); }
+#tabs .tab.on { color: var(--bright); background: var(--tab-on); }
+#tabs .tab.on::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent); }
+#tabs .tab .x { width: 20px; height: 20px; border: 0; background: transparent; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; visibility: hidden; padding: 0; color: inherit; }
+#tabs .tab:hover .x, #tabs .tab.on .x { visibility: visible; }
+#tabs .tab .x:hover { background: var(--hover); }
+#tabs .tab.dirty .x { visibility: visible; }
+#tabs .tab.dirty .x svg { display: none; }
+#tabs .tab.dirty .x::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
+#tabs .tab.dirty .x:hover svg { display: block; }
+#tabs .tab.dirty .x:hover::before { display: none; }
+.tabs-acts { display: flex; align-items: center; gap: 2px; padding: 0 6px; }
+#crumbs { display: flex; align-items: center; gap: 2px; height: 22px; padding: 0 12px; font-size: 12.5px; white-space: nowrap; overflow: hidden; flex: none; }
+#crumbs span.sep { opacity: .7; }
+#crumbs .c { cursor: default; display: inline-flex; align-items: center; gap: 4px; }
+#crumbs span.sep { display: inline-flex; }
+#crumbs svg { width: 14px; height: 14px; }
+#crumbs .c:last-child { color: var(--text); }
+#review { display: flex; gap: 6px; align-items: center; padding: 4px 10px; border-bottom: 1px solid var(--line); background: var(--side); flex-wrap: wrap; flex: none; }
+#editor-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; }
+#editor, #editor2 { position: relative; flex: 1 1 0; min-width: 0; height: 100%; overflow: hidden; }
+#editor2 { border-inline-start: 1px solid var(--line); }
+#diff { position: absolute; inset: 0; }
+#welcome { position: absolute; inset: 0; overflow: auto; display: flex; align-items: center; justify-content: center; background: var(--bg); }
+.welcome-box { max-width: 560px; padding: 24px; text-align: center; }
+.welcome-box .logo { color: var(--line2); display: flex; justify-content: center; margin-bottom: 8px; }
+.welcome-box .logo svg.i { width: 96px; height: 96px; stroke-width: .8; }
+.welcome-box h2 { font-weight: 400; color: var(--text); margin: 6px 0; font-size: 20px; }
+table.keys { margin: 18px auto 0; border-collapse: collapse; color: var(--muted); }
+table.keys td { padding: 4px 10px; text-align: start; }
+table.keys td:last-child { text-align: end; }
+kbd { font: 11px ui-monospace, Menlo, Consolas, monospace; background: var(--raised); border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 3px; padding: 1px 5px; margin-inline: 1px; color: var(--text); }
+
+/* ---- panel ---- */
+.panel-head { display: flex; align-items: center; height: 35px; padding: 0 8px; flex: none; }
+.ptabs { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
+.ptabs button[data-bottom] { background: transparent; border: 0; padding: 0 8px; height: 26px; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .02em; position: relative; }
+.ptabs button[data-bottom]:hover { color: var(--text); }
+.ptabs button[data-bottom].on { color: var(--bright); }
+.ptabs button[data-bottom].on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -4px; height: 1px; background: var(--bright); }
+#panel:not(.icons) .ptabs .pic { display: none; }
+.pacts { display: flex; gap: 2px; }
+.panel-body { flex: 1; min-height: 0; position: relative; }
+.panel-body > div[data-bpanel] { position: absolute; inset: 0; overflow: auto; }
+#output { margin: 0; padding: 4px 16px; white-space: pre-wrap; font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace; direction: ltr; text-align: left; }
+#terminal-host { position: absolute; inset: 0; }
+#problems li { height: 22px; }
+table.grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
+table.grid th { text-align: start; font-weight: 600; color: var(--muted); padding: 4px 12px; border-bottom: 1px solid var(--line); }
+table.grid td { padding: 3px 12px; border-bottom: 1px solid var(--line); }
+table.grid tr:hover td { background: var(--hover); }
+
+/* the terminal, with icon buttons like an editor's */
+.bp-term { background: var(--bg) !important; }
+.bp-term .xterm, .bp-term .xterm-viewport, .bp-term .xterm-screen, .bp-term-pane { background: var(--bg) !important; }
+.bp-term-bar button.ib { padding: 0 !important; width: 24px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 0 !important; }
+.bp-term-bar button.ib:hover { background: var(--hover); }
+.bp-term-bar { border-bottom: 0 !important; padding: 0 8px 0 12px !important; height: 28px; flex-direction: row-reverse; }
+.bp-term-bar .bp-tabs { justify-content: flex-start; }
+.bp-term-bar button { font-size: 12px !important; padding: 2px 8px !important; }
+.bp-term-pane { padding: 2px 0 0 14px !important; }
+
+/* ---- agent ---- */
+.agent-top { padding: 8px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--line); flex: none; }
+ul.list.agents { max-height: 150px; overflow: auto; }
+ul.list.agents li { padding: 0 6px; border-radius: 4px; }
+.agent-title { padding: 6px 12px 0; }
+#agent-log { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 8px 12px; min-height: 0; }
+.ev { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
+.ev.user { background: var(--input); border: 1px solid var(--line2); padding: 6px 10px; border-radius: 6px; }
+.ev.action, .ev.notice { color: var(--muted); font-size: 12px; display: flex; gap: 6px; align-items: center; }
+.ev.error { color: var(--bad); }
+.ev.output { font: 11.5px/1.4 ui-monospace, Menlo, Consolas, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; max-height: 180px; overflow: auto; direction: ltr; text-align: left; }
+#agent-pending, #agent-limit { margin: 0 12px 8px; border: 1px solid var(--focus); border-radius: 6px; padding: 10px; background: var(--bg); }
+#agent-limit { border-color: var(--warn); }
+#agent-pending code, .code { font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; background: var(--input); padding: 6px 8px; border-radius: 4px; display: block; white-space: pre-wrap; overflow-wrap: anywhere; direction: ltr; text-align: left; margin: 6px 0; }
+#agent-changes { padding: 0 12px; }
+#agent-status { padding: 2px 12px 6px; }
+#composer { position: relative; margin: 0 8px 8px; border: 1px solid var(--line2); border-radius: 8px; background: var(--input); padding: 6px; }
+#composer:focus-within { border-color: var(--focus); }
+#composer textarea { border: 0 !important; background: transparent !important; outline: none; padding: 2px 4px !important; min-height: 52px; max-height: 240px; }
+.composer-bar { display: flex; align-items: center; gap: 4px; }
+.composer-bar select { border: 0 !important; background: transparent !important; color: var(--muted) !important; font-size: 12px !important; padding: 2px 4px !important; max-width: 46%; }
+.composer-bar select:hover { color: var(--text) !important; background: var(--hover) !important; }
+button.send { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--bright); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
+button.send:disabled { opacity: .35; }
+#mode-hint { padding: 4px 4px 0; }
+#mode-hint.auto { color: var(--warn); }
+.popup { position: absolute; bottom: 100%; inset-inline: 0; max-height: 220px; overflow: auto; background: var(--side); border: 1px solid var(--line2); border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.35); z-index: 5; margin-bottom: 4px; }
+
+/* ---- status bar ---- */
+#statusbar { display: flex; align-items: center; gap: 2px; padding: 0 6px; background: var(--bar); border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); min-width: 0; overflow: hidden; }
+.sb { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px; white-space: nowrap; background: transparent; border: 0; color: inherit; font: inherit; }
+button.sb:hover { background: var(--hover); color: var(--text); }
+.sb svg.i { width: 14px; height: 14px; }
+#sb-mode.auto { color: var(--warn); }
+
+/* ---- menus, modal, tooltip ---- */
+.menu { position: fixed; z-index: 40; min-width: 200px; max-width: 360px; background: var(--side); border: 1px solid var(--line2); border-radius: 6px; padding: 4px; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
+.menu li { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
+.menu li:hover, .menu li.on { background: var(--sel-focus); color: var(--bright); }
+.menu li .check { width: 14px; }
+.menu li .keys { margin-inline-start: auto; color: var(--muted); font-size: 12px; padding-inline-start: 16px; }
+.menu li.sep { height: 1px; padding: 0; margin: 4px 2px; background: var(--line2); cursor: default; }
+.menu li.head { cursor: default; color: var(--muted); font-size: 11px; text-transform: uppercase; height: 22px; }
+.menu li.head:hover { background: transparent; color: var(--muted); }
+#modal { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: flex-start; justify-content: center; padding-top: 8vh; z-index: 30; }
+#modal .box { background: var(--side); border: 1px solid var(--line2); border-radius: 8px; padding: 14px; width: min(620px, calc(100% - 32px)); max-height: 80vh; overflow: auto; box-shadow: 0 8px 32px rgba(0,0,0,.45); }
+#modal h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--bright); }
+#modal input[type=text], #modal textarea { width: 100%; }
+#modal ul.list li { border-radius: 4px; padding: 0 8px; }
+#modal ul.list li.on { background: var(--sel-focus); }
+#modal ul.list li .keys { margin-inline-start: auto; color: var(--muted); font-size: 12px; }
+#modal dl { margin: 0; } #modal dt { font-weight: 600; margin-top: 8px; } #modal dd { margin: 2px 0 0; color: var(--muted); }
+#modal button { padding: 4px 12px; border-radius: 4px; border: 1px solid var(--line2); background: transparent; }
+#tip { position: fixed; z-index: 50; max-width: 320px; background: var(--side); color: var(--text); border: 1px solid var(--line2); padding: 4px 8px; border-radius: 4px; font-size: 12px; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
+
+/* ---- a narrow window: one column that scrolls ---- */
+#ide.narrow #workbench { overflow-y: auto; overflow-x: hidden; }
+#ide.narrow .sash { display: none; }
+#ide.narrow #activity { flex-direction: row; justify-content: flex-start; padding: 0 4px; border-inline-end: 0; border-bottom: 1px solid var(--line); }
+#ide.narrow #activity button { height: 36px; width: 40px; }
+#ide.narrow #activity button.on::before { top: auto; bottom: 0; left: 6px; right: 6px; width: auto; height: 2px; }
+#ide.narrow button.tb.search { width: auto; flex: 1; }
+#ide.narrow #palette-label { display: none; }
+
+/* Monaco draws long lines under the minimap, whose canvas is slightly transparent: a solid ground hides them. */
+.monaco-editor .minimap { background: var(--bg); }

package/ui/ide.html

@@ -0,0 +1,178 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>BitPull · Projects</title>
+<link rel="icon" href="data:,">
+<script>
+// The token stays in the address's fragment, which never reaches a server. With it the page asks the app
+// for a cookie that opens its own files (the editor), then loads them.
+(function () {
+  var p = new URLSearchParams(location.hash.slice(1));
+  window.__BITPULL__ = { token: p.get("token") || "", lang: p.get("lang") || "", folder: p.get("folder") || "" };
+  fetch("/api/ui/session", { method: "POST", headers: { "x-bitpull-token": window.__BITPULL__.token } }).then(function (r) {
+    if (!r.ok) { document.body.textContent = "BitPull: open this page from the app."; return; }
+    // Monaco's own stylesheet: without it the editor has no gutter and draws its minimap anywhere.
+    ["/ui/monaco/vs/editor/editor.main.css", "/ui/ide.css"].forEach(function (href) {
+      var css = document.createElement("link");
+      css.rel = "stylesheet";
+      css.href = href;
+      document.head.appendChild(css);
+    });
+    var s = document.createElement("script");
+    s.src = "/ui/ide.js";
+    document.body.appendChild(s);
+    var term = document.createElement("script");
+    term.type = "module";
+    term.src = "/ui/ide-terminal.js";
+    document.body.appendChild(term);
+  });
+})();
+</script>
+</head>
+<body>
+<div id="ide" hidden>
+  <header id="titlebar">
+    <button class="tb" id="back" data-tip="tip.ide.back" data-icon="back"></button>
+    <button class="tb folder" id="folder-btn" data-tip="tip.pj.folder"><span data-icon="folder"></span><span id="folder-name"></span><span data-icon="chevron-down"></span></button>
+    <select id="folder" hidden></select>
+    <div class="grow"></div>
+    <button class="tb search" id="palette-btn" data-tip="tip.ide.palette"><span data-icon="search"></span><span id="palette-label" class="muted"></span></button>
+    <div class="grow"></div>
+    <button class="tb" id="toggle-side" data-tip="tip.ide.toggle.side" data-icon="layout-left"></button>
+    <button class="tb" id="toggle-panel" data-tip="tip.ide.toggle.panel" data-icon="layout-bottom"></button>
+    <button class="tb" id="toggle-agent" data-tip="tip.ide.toggle.agent" data-icon="layout-right"></button>
+    <button class="tb" id="settings-btn" data-tip="tip.ide.settings" data-icon="gear"></button>
+  </header>
+  <div id="workbench">
+    <nav id="activity">
+      <button data-side="files" class="on" data-tip="tip.ide.files" data-icon="files"></button>
+      <button data-side="search" data-tip="tip.ide.search" data-icon="search"></button>
+      <button data-side="git" data-tip="tip.ide.git" data-icon="git"></button>
+      <button id="views-more" data-tip="tip.ide.views" data-icon="chevron-down"></button>
+    </nav>
+    <aside id="side">
+      <section data-panel="files">
+        <div class="view-title"><span data-i18n="ide.explorer"></span></div>
+        <div class="pane open" data-pane="tree">
+          <div class="pane-head"><span data-icon="chevron-right" class="twist"></span><span id="tree-title" class="pane-name"></span><span class="grow"></span>
+            <span class="pane-acts"><button class="ib" id="new-file" data-tip="tip.ide.new_file" data-icon="new-file"></button><button class="ib" id="new-dir" data-tip="tip.ide.new_dir" data-icon="new-folder"></button><button class="ib" id="refresh" data-tip="tip.ide.refresh" data-icon="refresh"></button><button class="ib" id="collapse-all" data-tip="tip.ide.collapse" data-icon="collapse"></button></span></div>
+          <div class="pane-body"><ul id="tree" class="tree" role="tree"></ul></div>
+        </div>
+        <div class="pane" data-pane="outline">
+          <div class="pane-head"><span data-icon="chevron-right" class="twist"></span><span class="pane-name" data-i18n="ide.outline"></span></div>
+          <div class="pane-body"><ul id="outline" class="list"></ul></div>
+        </div>
+        <div class="pane" data-pane="history">
+          <div class="pane-head"><span data-icon="chevron-right" class="twist"></span><span class="pane-name" data-i18n="ide.history"></span></div>
+          <div class="pane-body"><p class="muted small pad" data-i18n="ide.history.hint"></p><ul id="history" class="list"></ul></div>
+        </div>
+      </section>
+      <section data-panel="search" hidden>
+        <div class="view-title"><span data-i18n="ide.search"></span></div>
+        <div class="pad">
+          <div class="field"><input type="text" id="search-q" data-i18n-placeholder="ide.search.placeholder"><label class="opt" data-tip="tip.ide.search.case"><input type="checkbox" id="search-case"><span>Aa</span></label><label class="opt" data-tip="tip.ide.search.regex"><input type="checkbox" id="search-regex"><span>.*</span></label></div>
+          <div id="search-info" class="muted small"></div>
+        </div>
+        <ul id="search-results" class="list"></ul>
+      </section>
+      <section data-panel="git" hidden>
+        <div class="view-title"><span data-i18n="ide.git"></span><span class="grow"></span><button class="ib" id="git-refresh" data-tip="tip.ide.refresh" data-icon="refresh"></button></div>
+        <div class="pad">
+          <div id="git-branch" class="muted small"></div>
+          <textarea id="git-message" rows="2" data-i18n-placeholder="ide.git.message"></textarea>
+          <div class="row"><button class="primary grow" id="git-commit" data-i18n="ide.git.commit" data-tip="tip.ide.git.commit"></button><button class="ghost" id="git-push" data-i18n="ide.git.push" data-tip="tip.ide.git.push"></button></div>
+        </div>
+        <div class="sub-head" data-i18n="ide.git.staged"></div>
+        <ul id="git-staged" class="list"></ul>
+        <div class="sub-head" data-i18n="ide.git.changes"></div>
+        <ul id="git-changes" class="list"></ul>
+        <div id="git-msg" class="muted small pad"></div>
+      </section>
+      <section data-panel="outline" hidden>
+        <div class="view-title"><span data-i18n="ide.outline"></span></div>
+        <ul id="outline-view" class="list"></ul>
+      </section>
+      <section data-panel="history" hidden>
+        <div class="view-title"><span data-i18n="ide.history"></span></div>
+        <ul id="history-view" class="list"></ul>
+      </section>
+    </aside>
+    <div class="sash" data-split="side" data-tip="tip.ide.resize"></div>
+    <main id="editor-area">
+      <div id="tabs-row"><div id="tabs" role="tablist"></div><div class="tabs-acts"><button class="ib" id="split-editor" data-tip="tip.ide.split" data-icon="split"></button><button class="ib" id="editor-more" data-tip="tip.ide.more" data-icon="more"></button></div></div>
+      <div id="crumbs" class="muted"></div>
+      <div id="review" hidden>
+        <span id="review-title"></span><span class="grow"></span>
+        <span id="review-hunks"></span>
+        <button class="primary" id="review-accept" data-tip="tip.ide.review.accept"></button>
+        <button class="ghost" id="review-reject" data-tip="tip.ide.review.reject"></button>
+        <button class="ghost" id="review-close" data-i18n="ide.close" data-tip="tip.ide.close"></button>
+      </div>
+      <div id="editor-wrap">
+        <div id="editor" dir="ltr"></div>
+        <div id="editor2" dir="ltr" hidden></div>
+        <div id="diff" dir="ltr" hidden></div>
+        <div id="welcome"><div class="welcome-box"><div class="logo" data-icon="logo"></div><h2 data-i18n="ide.welcome"></h2><p class="muted" data-i18n="ide.welcome.text"></p><table id="keys" class="keys"></table></div></div>
+      </div>
+    </main>
+    <div class="sash" data-split="panel" data-tip="tip.ide.resize"></div>
+    <section id="panel">
+      <div class="panel-head">
+        <div class="ptabs"><button data-bottom="problems" class="on" data-tip="tip.ide.problems"><span data-icon="problems" class="pic"></span><span data-i18n="ide.problems"></span><span id="problems-count" class="count" hidden></span></button><button data-bottom="output" data-tip="tip.ide.output"><span data-icon="output" class="pic"></span><span data-i18n="ide.output"></span></button><button data-bottom="terminal" data-tip="tip.ide.terminal"><span data-icon="terminal" class="pic"></span><span data-i18n="pj.tab.terminal"></span></button><button data-bottom="ports" data-tip="tip.ide.ports" hidden><span data-icon="ports" class="pic"></span><span data-i18n="ide.ports"></span><span id="ports-count" class="count" hidden></span></button><button class="ib" id="panel-more" data-tip="tip.ide.panel.more" data-icon="more"></button></div>
+        <span class="grow"></span>
+        <div class="pacts"><button class="ib" id="problems-run" data-tip="tip.ide.problems.run" data-icon="play"></button><button class="ib" id="panel-max" data-tip="tip.ide.panel.max" data-icon="maximize"></button><button class="ib" id="bottom-close" data-tip="tip.ide.close" data-icon="close"></button></div>
+      </div>
+      <div class="panel-body">
+        <div data-bpanel="problems"><ul id="problems" class="list"></ul></div>
+        <div data-bpanel="output" hidden><pre id="output"></pre></div>
+        <div data-bpanel="terminal" hidden><div id="terminal-host"></div></div>
+        <div data-bpanel="ports" hidden><table id="ports" class="grid"><thead><tr><th data-i18n="ide.ports.port"></th><th data-i18n="ide.ports.address"></th><th data-i18n="ide.ports.process"></th><th></th></tr></thead><tbody></tbody></table><p id="ports-empty" class="muted small pad" data-i18n="ide.ports.none"></p></div>
+      </div>
+    </section>
+    <div class="sash" data-split="agent" data-tip="tip.ide.resize"></div>
+    <aside id="agent">
+      <div class="agent-top">
+        <div class="field"><span data-icon="search"></span><input type="text" id="agents-q" data-i18n-placeholder="ide.agents.search"></div>
+        <button class="ghost wide" id="agent-new" data-tip="tip.ide.agent.new"><span data-icon="plus"></span><span data-i18n="ide.agent.new"></span></button>
+        <ul id="agents-list" class="list agents"></ul>
+      </div>
+      <div class="agent-title"><span id="agents-toggle" class="muted small"></span></div>
+      <div id="agent-log"></div>
+      <div id="agent-pending" hidden></div>
+      <div id="agent-limit" hidden><strong data-i18n="ide.limit.title"></strong><p id="agent-limit-text" class="small"></p>
+        <div class="row"><button class="primary" id="limit-go" data-i18n="ide.limit.go" data-tip="tip.pj.continue"></button><button class="ghost" id="limit-stop" data-i18n="ide.limit.stop" data-tip="tip.pj.stop"></button><button class="ghost" id="limit-edit" data-i18n="ide.limit.edit" data-tip="tip.pj.limits"></button></div></div>
+      <div id="agent-changes" class="small"></div>
+      <div id="agent-status" class="muted small"></div>
+      <div id="composer">
+        <ul id="mention" class="list popup" hidden></ul>
+        <textarea id="prompt" rows="3" data-i18n-placeholder="ide.prompt.placeholder"></textarea>
+        <div class="composer-bar">
+          <select id="model" data-tip="tip.pj.model"></select>
+          <select id="mode" data-tip="tip.ide.mode"><option value="ask" data-i18n="pj.mode.ask"></option><option value="edits" data-i18n="pj.mode.edits"></option><option value="auto" data-i18n="pj.mode.auto"></option></select>
+          <span class="grow"></span>
+          <button class="ib" id="agent-undo" data-tip="tip.pj.undo" data-icon="undo" hidden></button>
+          <button class="ib danger" id="agent-stop" data-tip="tip.pj.stop" data-icon="stop" hidden></button>
+          <button class="send" id="agent-send" data-tip="tip.pj.send" data-icon="send"></button>
+        </div>
+        <div id="mode-hint" class="muted small"></div>
+      </div>
+    </aside>
+  </div>
+  <footer id="statusbar">
+    <button class="sb" id="sb-branch" data-tip="tip.ide.git" hidden><span data-icon="git"></span><span></span></button>
+    <button class="sb" id="sb-problems" data-tip="tip.ide.problems"><span data-icon="error"></span><span id="sb-errors">0</span><span data-icon="warning"></span><span id="sb-warnings">0</span></button>
+    <span class="grow"></span>
+    <span class="sb" id="sb-pos" hidden></span>
+    <span class="sb" id="sb-lang" hidden></span>
+    <span class="sb" id="sb-enc" hidden>UTF-8</span>
+    <button class="sb" id="sb-model" data-tip="tip.pj.model"></button>
+    <button class="sb" id="sb-mode" data-tip="tip.ide.mode"></button>
+  </footer>
+</div>
+<div id="menu" class="menu" hidden></div>
+<div id="modal" hidden><div class="box"><h3 id="modal-title"></h3><div id="modal-body"></div><div class="row end" id="modal-buttons"></div></div></div>
+<div id="tip" role="tooltip" hidden></div>
+</body>
+</html>