bitpull 0.1.23 → 0.1.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bitpull",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "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,97 @@
+/* BitPull's own look for the projects page: the dashboard's colours, nothing borrowed from other editors. */
+:root { --bg:#fafaf7; --surface:#fff; --raised:#f2f1ec; --text:#1d1d1b; --muted:#6b6b66; --line:#e4e2dc; --accent:#2f5bd3; --accent-ink:#fff; --good:#1f7a4d; --warn:#9a6700; --bad:#b3261e;
+  --side:260px; --agent:360px; --bottom:200px; }
+@media (prefers-color-scheme: dark) { :root { --bg:#151514; --surface:#1e1e1c; --raised:#262624; --text:#ecebe6; --muted:#a2a19b; --line:#33322f; --accent:#7c9cf2; --accent-ink:#10131c; --good:#5cc28f; --warn:#e3b341; --bad:#f2847b; } }
+* { box-sizing: border-box; }
+html, body { height: 100%; margin: 0; }
+body { background: var(--bg); color: var(--text); font: 13.5px/1.45 system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif; overflow: hidden; }
+[hidden] { display: none !important; }
+:where(#top, #side, #agent, #modal, #bottom, #review, #tabs, #activity) button { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 6px; padding: 5px 10px; font: inherit; font-weight: 600; cursor: pointer; }
+:where(#ide, #modal) button:disabled { opacity: .55; cursor: default; }
+:where(#ide, #modal) button.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); font-weight: 500; }
+:where(#ide, #modal) button.danger { background: var(--bad); color: #fff; }
+:where(#ide, #modal) button.icon { background: transparent; color: var(--muted); padding: 2px 6px; font-weight: 500; }
+:where(#ide, #modal) button.icon:hover, :where(#ide, #modal) button.ghost:hover { background: var(--raised); }
+:where(#ide, #modal) button.small { padding: 2px 8px; font-size: 12px; }
+/* Form fields of our own panels only: Monaco has hidden inputs of its own that must keep their style. */
+:where(#top, #side, #agent, #modal, #bottom) :is(input[type=text], input[type=number], select, textarea) { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font: inherit; }
+:where(#side, #agent, #modal) textarea { width: 100%; resize: vertical; }
+#top select { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font: inherit; }
+a { color: var(--accent); }
+.grow { flex: 1; }
+.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
+.row.end { justify-content: flex-end; }
+.muted { color: var(--muted); }
+.small { font-size: 12px; }
+#ide { display: flex; flex-direction: column; height: 100%; }
+#top { display: flex; gap: 6px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
+#top select { max-width: 220px; }
+#back { font-weight: 600; text-decoration: none; margin-inline-end: 6px; }
+#body { flex: 1; display: grid; grid-template-columns: 44px var(--side) 4px minmax(200px, 1fr) 4px var(--agent); min-height: 0; }
+#activity { display: flex; flex-direction: column; gap: 2px; padding: 6px 4px; border-inline-end: 1px solid var(--line); background: var(--surface); }
+#activity button { background: transparent; color: var(--muted); padding: 7px; border-radius: 8px; }
+#activity button.on { color: var(--text); background: var(--raised); }
+#activity svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }
+#side { overflow: auto; background: var(--surface); padding: 6px; min-width: 0; }
+#side section { display: flex; flex-direction: column; gap: 6px; }
+.panel-head { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 2px 2px 4px; }
+.panel-sub { font-size: 12px; color: var(--muted); margin-top: 8px; }
+.split { background: transparent; }
+.split.v { cursor: col-resize; }
+.split.h { cursor: row-resize; height: 4px; }
+.split:hover { background: var(--accent); opacity: .5; }
+#ide ul.list, #ide ul.tree, #modal ul.list { list-style: none; margin: 0; padding: 0; }
+ul.list li, ul.tree li > .item { padding: 3px 6px; border-radius: 5px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; gap: 6px; align-items: center; }
+ul.list li:hover, ul.tree li > .item:hover, ul.list li.on, ul.tree li > .item.on { background: var(--raised); }
+ul.tree ul { list-style: none; margin: 0; padding-inline-start: 12px; }
+.item .name { overflow: hidden; text-overflow: ellipsis; }
+.item .acts { margin-inline-start: auto; display: none; }
+.item:hover .acts { display: inline-flex; }
+.badge { font-size: 11px; padding: 0 6px; border-radius: 99px; background: var(--raised); color: var(--muted); }
+.badge.bad { color: var(--bad); } .badge.warn { color: var(--warn); } .badge.good { color: var(--good); }
+#center { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+#tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--surface); min-height: 32px; }
+#tabs .tab { display: flex; gap: 6px; align-items: center; padding: 6px 10px; border-inline-end: 1px solid var(--line); cursor: pointer; white-space: nowrap; color: var(--muted); }
+#tabs .tab.on { color: var(--text); background: var(--bg); }
+#tabs .tab .dirty { color: var(--warn); }
+#tabs .tab button { padding: 0 4px; background: transparent; color: var(--muted); }
+#review { display: flex; gap: 6px; align-items: center; padding: 5px 10px; border-bottom: 1px solid var(--line); background: var(--raised); flex-wrap: wrap; }
+#editor-wrap { position: relative; flex: 1; min-height: 80px; }
+#editor, #diff { position: absolute; inset: 0; }
+#welcome { position: absolute; inset: 0; padding: 40px; overflow: auto; }
+#bottom { height: var(--bottom); display: flex; flex-direction: column; border-top: 1px solid var(--line); background: var(--surface); min-height: 0; }
+.bottom-tabs { display: flex; gap: 2px; align-items: center; padding: 2px 6px; border-bottom: 1px solid var(--line); }
+.bottom-tabs button[data-bottom] { background: transparent; color: var(--muted); font-weight: 500; }
+.bottom-tabs button.on { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
+#bottom > div[data-bpanel] { flex: 1; overflow: auto; min-height: 0; }
+#output { margin: 0; padding: 6px 10px; white-space: pre-wrap; font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace; direction: ltr; text-align: left; }
+#terminal-host { height: 100%; padding: 6px 10px; }
+#agent { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); padding: 6px; gap: 6px; }
+#agents { display: flex; flex-direction: column; gap: 6px; max-height: 40%; overflow: auto; }
+#agent-log { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px; }
+.ev { white-space: pre-wrap; overflow-wrap: anywhere; }
+.ev.user { align-self: flex-end; background: var(--raised); padding: 6px 10px; border-radius: 10px; max-width: 90%; }
+.ev.action, .ev.notice { color: var(--muted); font-size: 12px; }
+.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: 6px; padding: 4px 6px; max-height: 160px; overflow: auto; direction: ltr; text-align: left; }
+#agent-pending, #agent-limit { border: 1px solid var(--accent); border-radius: 8px; padding: 8px; background: var(--bg); }
+#agent-limit { border-color: var(--warn); }
+#agent-pending code, .code { font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; background: var(--raised); padding: 4px 6px; border-radius: 5px; display: block; white-space: pre-wrap; overflow-wrap: anywhere; direction: ltr; text-align: left; }
+#composer { position: relative; }
+.popup { position: absolute; bottom: 100%; inset-inline-start: 0; inset-inline-end: 0; max-height: 220px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.25); z-index: 5; }
+#modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh; z-index: 20; }
+#modal .box { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; width: min(620px, calc(100% - 32px)); max-height: 80vh; overflow: auto; }
+#modal h3 { margin: 0 0 8px; font-size: 15px; }
+#modal input[type=text], #modal textarea { width: 100%; }
+#modal dl { margin: 0; } #modal dt { font-weight: 600; margin-top: 8px; } #modal dd { margin: 2px 0 0; color: var(--muted); }
+#tip { position: fixed; z-index: 30; max-width: 320px; background: var(--text); color: var(--bg); padding: 6px 9px; border-radius: 7px; font-size: 12px; pointer-events: none; }
+@media (max-width: 900px) {
+  /* A narrow window scrolls: files, then the editor at a usable height, then the agent. */
+  #body { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto auto; overflow-y: auto; }
+  #side { grid-column: 2; max-height: 30vh; }
+  .split { display: none; }
+  #center { grid-column: 1 / -1; height: 75vh; }
+  #bottom { height: 25vh; }
+  #agent { grid-column: 1 / -1; height: 80vh; }
+  #activity { grid-row: 1; }
+}

package/ui/ide.html

@@ -0,0 +1,134 @@
+<!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; }
+    var css = document.createElement("link");
+    css.rel = "stylesheet";
+    css.href = "/ui/ide.css";
+    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="top">
+    <a id="back" href="#" data-i18n="ide.back" data-tip="tip.ide.back"></a>
+    <select id="folder" data-tip="tip.pj.folder"></select>
+    <button class="ghost" id="folder-add" data-i18n="pj.folder.add" data-tip="tip.pj.folder.add"></button>
+    <span class="grow"></span>
+    <button class="ghost" id="quick-open" data-i18n="ide.quick" data-tip="tip.ide.quick"></button>
+    <button class="ghost" id="preview" data-i18n="ide.preview" data-tip="tip.ide.preview"></button>
+    <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>
+    <button class="ghost" id="limits-open" data-i18n="pj.limits" data-tip="tip.pj.limits"></button>
+  </header>
+  <div id="body">
+    <nav id="activity">
+      <button data-side="files" class="on" data-tip="tip.ide.files"><svg viewBox="0 0 24 24"><path d="M4 4h6l2 2h8v13H4z"/></svg></button>
+      <button data-side="search" data-tip="tip.ide.search"><svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="M15 15l5 5"/></svg></button>
+      <button data-side="git" data-tip="tip.ide.git"><svg viewBox="0 0 24 24"><circle cx="6" cy="6" r="2.5"/><circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="9" r="2.5"/><path d="M6 8.5v7M18 11.5c0 4-12 2-12 4"/></svg></button>
+      <button data-side="outline" data-tip="tip.ide.outline"><svg viewBox="0 0 24 24"><path d="M5 6h14M8 11h11M8 16h11M5 11h0M5 16h0"/></svg></button>
+      <button data-side="history" data-tip="tip.ide.history"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 7v5l3 2"/></svg></button>
+    </nav>
+    <aside id="side">
+      <section data-panel="files">
+        <div class="panel-head"><span data-i18n="ide.files"></span><span class="grow"></span>
+          <button class="icon" id="new-file" data-tip="tip.ide.new_file">+</button>
+          <button class="icon" id="new-dir" data-tip="tip.ide.new_dir">+▢</button>
+          <button class="icon" id="refresh" data-tip="tip.ide.refresh">⟳</button></div>
+        <ul id="tree" class="tree" role="tree"></ul>
+      </section>
+      <section data-panel="search" hidden>
+        <div class="panel-head" data-i18n="ide.search"></div>
+        <input type="text" id="search-q" data-i18n-placeholder="ide.search.placeholder">
+        <div class="row small"><label data-tip="tip.ide.search.case"><input type="checkbox" id="search-case"> Aa</label><label data-tip="tip.ide.search.regex"><input type="checkbox" id="search-regex"> .*</label></div>
+        <div id="search-info" class="muted small"></div>
+        <ul id="search-results" class="list"></ul>
+      </section>
+      <section data-panel="git" hidden>
+        <div class="panel-head"><span data-i18n="ide.git"></span><span class="grow"></span><button class="icon" id="git-refresh" data-tip="tip.ide.refresh">⟳</button></div>
+        <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 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 class="panel-sub" data-i18n="ide.git.staged"></div>
+        <ul id="git-staged" class="list"></ul>
+        <div class="panel-sub" data-i18n="ide.git.changes"></div>
+        <ul id="git-changes" class="list"></ul>
+        <div id="git-msg" class="muted small"></div>
+      </section>
+      <section data-panel="outline" hidden>
+        <div class="panel-head" data-i18n="ide.outline"></div>
+        <ul id="outline" class="list"></ul>
+      </section>
+      <section data-panel="history" hidden>
+        <div class="panel-head" data-i18n="ide.history"></div>
+        <p class="muted small" data-i18n="ide.history.hint"></p>
+        <ul id="history" class="list"></ul>
+      </section>
+    </aside>
+    <div class="split v" data-split="side" data-tip="tip.ide.resize"></div>
+    <main id="center">
+      <div id="tabs" role="tablist"></div>
+      <div id="review" hidden>
+        <span id="review-title"></span><span class="grow"></span>
+        <span id="review-hunks"></span>
+        <button 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="diff" dir="ltr" hidden></div>
+        <div id="welcome"><h2 data-i18n="ide.welcome"></h2><p class="muted" data-i18n="ide.welcome.text"></p><ul id="keys" class="muted small"></ul></div>
+      </div>
+      <div class="split h" data-split="bottom" data-tip="tip.ide.resize"></div>
+      <section id="bottom">
+        <div class="bottom-tabs"><button data-bottom="problems" class="on" data-i18n="ide.problems" data-tip="tip.ide.problems"></button><button data-bottom="output" data-i18n="ide.output" data-tip="tip.ide.output"></button><button data-bottom="terminal" data-i18n="pj.tab.terminal" data-tip="tip.ide.terminal"></button>
+          <span class="grow"></span><button class="ghost small" id="problems-run" data-i18n="ide.problems.run" data-tip="tip.ide.problems.run"></button><button class="icon" id="bottom-close" data-tip="tip.ide.close">×</button></div>
+        <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>
+      </section>
+    </main>
+    <div class="split v" data-split="agent" data-tip="tip.ide.resize"></div>
+    <aside id="agent">
+      <div class="panel-head"><button class="ghost" id="agents-toggle" data-tip="tip.ide.agents"></button><span class="grow"></span><button id="agent-new" data-i18n="ide.agent.new" data-tip="tip.ide.agent.new"></button></div>
+      <div id="agents" hidden><input type="text" id="agents-q" data-i18n-placeholder="ide.agents.search"><ul id="agents-list" class="list"></ul></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 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">
+        <textarea id="prompt" rows="3" data-i18n-placeholder="ide.prompt.placeholder"></textarea>
+        <ul id="mention" class="list popup" hidden></ul>
+        <div class="row"><span id="mode-hint" class="muted small grow"></span>
+          <button class="ghost" id="agent-undo" data-i18n="pj.undo" data-tip="tip.pj.undo" hidden></button>
+          <button class="danger" id="agent-stop" data-i18n="pj.stop" data-tip="tip.pj.stop" hidden></button>
+          <button id="agent-send" data-i18n="pj.send" data-tip="tip.pj.send"></button></div>
+      </div>
+    </aside>
+  </div>
+</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>