bitpull 0.1.27 → 0.1.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bitpull",
-  "version": "0.1.27",
+  "version": "0.1.28",
   "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": {

package/ui/ide-terminal.js

@@ -12,7 +12,7 @@ function register() {
   let current = null;
   const start = () => {
     if (term || !host || !opts || !opts.folder) return;
-    term = mountTerminal(host, { cwd: opts.folder, token: opts.token, t: opts.t });
+    term = mountTerminal(host, { cwd: opts.folder, token: opts.token, t: opts.t, fontSize: opts.phone ? 12 : 13 });
   };
   ide.terminal.register({
     mount(container, o) {
@@ -30,6 +30,14 @@ function register() {
       start();
       if (term) term.newTab();
     },
+    input(d) {
+      start();
+      if (term) term.input(d);
+    },
+    ctrl(on, done) {
+      start();
+      if (term) term.ctrl(on, done);
+    },
     runVisible(command) {
       start();
       current = term ? term.runVisible(command) : null;

package/ui/ide.css

@@ -269,3 +269,67 @@ button.sb:hover { background: var(--hover); color: var(--text); }
 
 /* Monaco draws long lines under the minimap, whose canvas is slightly transparent: a solid ground hides them. */
 .monaco-editor .minimap { background: var(--bg); }
+
+/* ---- opened from the person's phone: one part at a time, chosen at the bottom, sized for fingers ---- */
+#ide.phone { grid-template-rows: 48px minmax(0, 1fr) auto; font-size: 15px; height: 100%; }
+#ide.phone #statusbar, #ide.phone #toggle-side, #ide.phone #toggle-panel, #ide.phone #toggle-agent, #ide.phone #palette-label,
+#ide.phone .sash, #ide.phone #split-editor, #ide.phone #crumbs, #ide.phone #panel-max, #ide.phone #bottom-close, #ide.phone #views-more,
+#ide.phone #activity button[data-side="files"], #ide.phone table.keys { display: none !important; }
+#ide.phone #titlebar { gap: 4px; padding: 0 4px; }
+#ide.phone button.tb { height: 42px; min-width: 42px; }
+#ide.phone button.tb svg.i { width: 20px; height: 20px; }
+#ide.phone button.tb.folder { flex: 1 1 auto; max-width: none; font-size: 16px; justify-content: flex-start; }
+#ide.phone #titlebar .grow { display: none; }
+#ide.phone button.tb.search { width: 42px; border: 0; background: transparent; justify-content: center; }
+#ide.phone #activity { flex-direction: row; justify-content: flex-start; padding: 0 4px; border-inline-end: 0; border-bottom: 1px solid var(--line); }
+#ide.phone #activity button { width: 56px; height: 48px; }
+#ide.phone #activity button.on::before { top: auto; bottom: 0; left: 10px; right: 10px; width: auto; height: 2px; }
+#ide.phone #side, #ide.phone #agent { border: 0; }
+#ide.phone .view-title { height: 40px; font-size: 12px; padding-inline-start: 16px; }
+#ide.phone .pane-head { height: 44px; font-size: 12px; padding-inline: 8px; }
+#ide.phone .pane-acts { display: inline-flex; gap: 4px; }
+#ide.phone button.ib { width: 40px; height: 40px; }
+#ide.phone button.ib svg.i { width: 20px; height: 20px; }
+#ide.phone ul.tree .item { height: 44px; font-size: 15px; padding-inline-end: 12px; }
+#ide.phone ul.tree .item svg.f { width: 18px; height: 18px; }
+#ide.phone ul.list li { height: 44px; font-size: 15px; }
+#ide.phone :is(input[type=text], input[type=number], select, textarea) { font-size: 16px !important; } /* below 16px iPhone zooms in */
+#ide.phone .field input[type=text] { padding: 8px 4px !important; }
+#ide.phone button.primary, #ide.phone button.ghost { min-height: 42px; padding: 6px 16px; font-size: 15px; }
+#ide.phone #tabs-row { height: 46px; }
+#ide.phone #tabs .tab { padding: 0 4px 0 12px; font-size: 14px; }
+#ide.phone #tabs .tab .x { visibility: visible; width: 36px; height: 36px; }
+#ide.phone .tabs-acts button.ib { width: 44px; height: 44px; }
+#ide.phone .panel-head { height: 46px; padding: 0 4px; }
+#ide.phone .ptabs { overflow-x: auto; scrollbar-width: none; }
+#ide.phone .ptabs button[data-bottom] { height: 42px; font-size: 12px; padding: 0 10px; flex: none; }
+#ide.phone .bp-term-bar { height: 44px !important; }
+#ide.phone .bp-term-bar button.ib { width: 42px !important; height: 40px !important; }
+#ide.phone .bp-term-bar button { font-size: 14px !important; padding: 6px 10px !important; }
+#ide.phone .bp-term-pane { padding: 2px 0 0 4px !important; }
+#ide.phone .agent-top { padding: 8px 10px; }
+#ide.phone ul.list.agents { max-height: 26vh; }
+#ide.phone #agent-log { padding: 10px 12px; font-size: 15px; }
+#ide.phone #composer { margin: 0 8px 8px; padding: 8px; border-radius: 14px; }
+#ide.phone #composer textarea { min-height: 48px; }
+#ide.phone .composer-bar { gap: 6px; flex-wrap: wrap; }
+#ide.phone .composer-bar select { font-size: 15px !important; min-height: 40px; max-width: 40%; }
+#ide.phone button.send { width: 42px; height: 42px; }
+#ide.phone button.send svg.i { width: 20px; height: 20px; }
+#ide.phone .welcome-box h2 { font-size: 18px; }
+#ide.phone ~ .menu li, #ide.phone ~ #menu li { height: 46px; font-size: 15px; }
+#ide.phone ~ #modal { padding-top: 4vh; }
+#ide.phone ~ #modal .box { width: calc(100% - 16px); max-height: 88vh; font-size: 15px; }
+#ide.phone ~ #modal button { min-height: 42px; }
+#ide.phone ~ #tip { display: none !important; } /* no hover on a phone: the tips stay as the buttons' names */
+#phone-nav { display: flex; background: var(--bar); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
+#phone-nav button { flex: 1 1 0; min-width: 0; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: transparent; border: 0; color: var(--muted); font-size: 11px; }
+#phone-nav button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+#phone-nav button svg.i { width: 24px; height: 24px; stroke-width: 1.3; }
+#phone-nav button.on { color: var(--bright); }
+#phone-nav button.on svg.i { color: var(--accent); }
+#ide.phone.typing #phone-nav { display: none; }
+#phone-keys { display: flex; gap: 6px; overflow-x: auto; padding: 6px 8px; border-top: 1px solid var(--line); background: var(--side); flex: none; scrollbar-width: none; }
+#phone-keys button { flex: none; min-width: 46px; height: 40px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 8px; background: var(--raised); color: var(--bright); font: 14px ui-monospace, Menlo, Consolas, monospace; }
+#phone-keys button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
+#ide.phone.typing .agent-top { display: none; }

package/ui/ide.js

@@ -5,6 +5,9 @@
 (function () {
   const BP = window.__BITPULL__ || {};
   const token = BP.token || "";
+  // Opened from the person's phone (bitpull.cloud/app): one screen at a time, sized for fingers.
+  // The computer's own window keeps the editor layout untouched.
+  const PHONE = token === "phone";
   const $ = (id) => document.getElementById(id);
   // Where the page's files are: /ui/~<build>/, which the webview keeps without asking again.
   const BASE = ((document.currentScript && document.currentScript.src) || "/ui/ide.js").replace(/ide\.js(\?.*)?$/, "");
@@ -213,7 +216,7 @@
       register(impl) {
         terminal = impl;
         clear($("terminal-host"));
-        impl.mount($("terminal-host"), { token, folder, lang, t });
+        impl.mount($("terminal-host"), { token, folder, lang, t, phone: PHONE });
         // Its buttons become icons, like the rest of the panel; the words stay as their name.
         const TERM_ICONS = { "term.new": "plus", "term.split": "split", "term.close": "trash" };
         const iconize = () => {
@@ -233,6 +236,7 @@
     get folder() { return folder; },
   };
   function showTerminal() {
+    if (PHONE) phoneTab = "terminal";
     showBottom("terminal");
     if (terminal) terminal.open();
     else clear($("terminal-host")).append(el("p", { class: "muted pad", text: t("ide.terminal.missing") }));
@@ -245,6 +249,7 @@
   );
   const narrow = () => innerWidth < 900;
   function layout() {
+    if (PHONE) return phoneLayout();
     const L = layoutState;
     const ws = $("workbench");
     $("ide").classList.toggle("narrow", narrow());
@@ -305,6 +310,67 @@
     store.set("layout", L);
     relayout();
   }
+  // ---- on a phone: one part at a time, chosen with the bar at the bottom ---------------------------------
+  let phoneTab = "files";
+  let phoneMore = "git";
+  const PHONE_PARTS = { files: "side", more: "side", editor: "editor-area", terminal: "panel", agent: "agent" };
+  function phoneLayout() {
+    const ws = $("workbench");
+    $("ide").classList.add("phone");
+    const more = phoneTab === "more";
+    ws.style.gridTemplateColumns = "minmax(0, 1fr)";
+    ws.style.gridTemplateAreas = more ? '"act" "main"' : '"main"';
+    ws.style.gridTemplateRows = more ? "auto minmax(0, 1fr)" : "minmax(0, 1fr)";
+    $("activity").hidden = !more;
+    for (const id of ["side", "editor-area", "panel", "agent"]) {
+      $(id).style.gridArea = "main";
+      $(id).hidden = PHONE_PARTS[phoneTab] !== id;
+    }
+    for (const sash of ws.querySelectorAll(".sash")) sash.hidden = true;
+    if ($("phone-keys")) $("phone-keys").hidden = !(phoneTab === "terminal" && currentBottom() === "terminal");
+    for (const b of document.querySelectorAll("#phone-nav button")) b.classList.toggle("on", b.dataset.tab === phoneTab);
+    for (const p of document.querySelectorAll(".pane")) p.classList.toggle("open", !!layoutState.panes[p.dataset.pane]);
+    relayout();
+  }
+  function phoneShow(tab) {
+    phoneTab = tab;
+    if (tab === "files") showSide("files");
+    else if (tab === "more") showSide(phoneMore);
+    else if (tab === "terminal") showTerminal();
+    else phoneLayout();
+  }
+  function phoneSetup() {
+    const nav = el("nav", { id: "phone-nav" });
+    for (const [tab, ic, label] of [["files", "files", "phone.files"], ["editor", "output", "phone.editor"], ["terminal", "terminal", "pj.tab.terminal"], ["agent", "logo", "phone.agent"], ["more", "more", "phone.more"]]) {
+      nav.append(el("button", { type: "button", "data-tab": tab, "data-tip": `tip.phone.${tab}`, "aria-label": t(label), onclick: () => phoneShow(tab) }, icon(ic), el("span", { text: t(label) })));
+    }
+    $("ide").append(nav);
+    // Keys a phone's keyboard lacks, for the terminal. Pressing them keeps the keyboard open.
+    const keys = el("div", { id: "phone-keys", hidden: true });
+    const KEYS = [["Esc", "\x1b"], ["Tab", "\t"], ["Ctrl", null], ["↑", "\x1b[A"], ["↓", "\x1b[B"], ["←", "\x1b[D"], ["→", "\x1b[C"], ["Ctrl+C", "\x03"], ["|", "|"], ["/", "/"], ["~", "~"], ["-", "-"]];
+    for (const [label, seq] of KEYS) {
+      const b = el("button", { type: "button", text: label, "data-tip": seq === null ? "tip.phone.ctrl" : "tip.phone.key", onpointerdown: (e) => e.preventDefault() });
+      b.addEventListener("click", () => {
+        if (!terminal) return;
+        if (seq === null) {
+          const on = !b.classList.contains("on");
+          b.classList.toggle("on", on);
+          if (terminal.ctrl) terminal.ctrl(on, () => b.classList.remove("on"));
+        } else if (terminal.input) terminal.input(seq);
+      });
+      keys.append(b);
+    }
+    $("panel").append(keys);
+    // With the keyboard open the page gets much shorter (the phone page fits it to what stays visible):
+    // then the bar steps aside to leave room, and the terminal's keys stay.
+    let tallest = innerHeight;
+    const keyboard = () => {
+      tallest = Math.max(tallest, innerHeight);
+      $("ide").classList.toggle("typing", innerHeight < tallest * 0.75);
+    };
+    addEventListener("resize", keyboard);
+    addEventListener("orientationchange", () => { tallest = 0; setTimeout(keyboard, 300); });
+  }
   /** Monaco and the terminal measure themselves after the grid has settled. */
   function relayout() {
     requestAnimationFrame(() => {
@@ -347,6 +413,7 @@
   $("panel-max").addEventListener("click", () => toggle("panelMax"));
 
   function showSide(name) {
+    if (PHONE) { if (name !== "files") phoneMore = name; phoneTab = name === "files" ? "files" : "more"; }
     layoutState.sideOpen = true;
     layoutState.sideView = name;
     for (const b of document.querySelectorAll("#activity button[data-side]")) b.classList.toggle("on", b.dataset.side === name);
@@ -449,7 +516,9 @@
     monaco.editor.defineTheme("bitpull-light", { base: "vs", inherit: true, rules: [], colors: { "editor.background": "#ffffff", "editorLineNumber.foreground": "#6e7681" } });
   }
   const theme = () => (dark() ? "bitpull-dark" : "bitpull-light");
-  const EDITOR_OPTS = () => ({ automaticLayout: false, theme: theme(), minimap: { enabled: true, renderCharacters: false, scale: 1 }, fontSize: 13, lineHeight: 20, fontFamily: 'Menlo, Monaco, "Cascadia Code", Consolas, "Courier New", monospace', tabSize: 2, renderWhitespace: "selection", smoothScrolling: true, scrollBeyondLastLine: false, fixedOverflowWidgets: true, padding: { top: 4 }, stickyScroll: { enabled: true }, bracketPairColorization: { enabled: true }, guides: { bracketPairs: "active", indentation: true } });
+  const EDITOR_OPTS = () => ({ automaticLayout: false, theme: theme(), minimap: { enabled: true, renderCharacters: false, scale: 1 }, fontSize: 13, lineHeight: 20, fontFamily: 'Menlo, Monaco, "Cascadia Code", Consolas, "Courier New", monospace', tabSize: 2, renderWhitespace: "selection", smoothScrolling: true, scrollBeyondLastLine: false, fixedOverflowWidgets: true, padding: { top: 4 }, stickyScroll: { enabled: true }, bracketPairColorization: { enabled: true }, guides: { bracketPairs: "active", indentation: true },
+    // A phone's screen: no minimap, long lines wrap, a size readable without zooming.
+    ...(PHONE ? { minimap: { enabled: false }, wordWrap: "on", fontSize: 14, lineHeight: 21, stickyScroll: { enabled: false }, folding: false, glyphMargin: false, lineNumbersMinChars: 3, lineDecorationsWidth: 6, scrollbar: { verticalScrollbarSize: 10, horizontalScrollbarSize: 10 } } : {}) });
   function wireEditor(ed) {
     ed.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => saveActive());
     ed.addAction({ id: "bitpull.inline", label: t("ide.inline"), keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK], contextMenuGroupId: "1_modification", run: () => inlineEdit() });
@@ -590,6 +659,8 @@
       if (r.secret) output(t("ide.secret_open", { path }));
     }
     activate(tab);
+    // On a phone a file chosen in the list, a search result or a problem opens on the editor's screen.
+    if (PHONE && phoneTab !== "editor" && phoneTab !== "agent") { phoneTab = "editor"; phoneLayout(); }
     const ed = focused || editor;
     if (line) { ed.revealLineInCenter(line); ed.setPosition({ lineNumber: line, column: 1 }); ed.focus(); }
   }
@@ -1330,8 +1401,9 @@
   (async () => {
     drawIcons(document);
     await loadWords();
+    if (PHONE) phoneSetup();
     $("ide").hidden = false;
-    $("back").addEventListener("click", () => { location.href = `/#token=${encodeURIComponent(token)}&lang=${encodeURIComponent(lang)}`; });
+    $("back").addEventListener("click", () => { location.href = `${PHONE ? "/remote/" : "/"}#token=${encodeURIComponent(token)}&lang=${encodeURIComponent(lang)}`; });
     for (const b of document.querySelectorAll("#activity button[data-side]")) b.classList.toggle("on", b.dataset.side === layoutState.sideView && layoutState.sideOpen);
     for (const p of document.querySelectorAll("#side > section")) p.hidden = p.dataset.panel !== layoutState.sideView;
     layout();
@@ -1339,6 +1411,7 @@
     renderModeHint();
     renderProblemCounts();
     showBottom(store.get("bottom", "problems") === "terminal" ? "problems" : store.get("bottom", "problems"));
+    if (PHONE) phoneShow("files");
     // Folders and models while the editor loads: the tree shows before Monaco is ready.
     const lists = Promise.all([loadModels().catch((err) => output(explain(err))), loadFolders().catch((err) => output(explain(err)))]).then(() => ($("folder").value ? setFolder($("folder").value) : null));
     try { monaco = await loadMonaco(); setupEditor(); } catch (err) { output(t("ide.err.editor_missing")); }

package/ui/terminal.js

@@ -92,7 +92,7 @@ export function mountTerminalSetting(el, { token, t = (k) => k, onChange } = {})
  * Mounts the terminal in `el`. `cwd` must be a folder the person authorised; `t` translates.
  * Returns the controls the page and the Projects view use.
  */
-export function mountTerminal(el, { cwd, token, t = (k) => k } = {}) {
+export function mountTerminal(el, { cwd, token, t = (k) => k, fontSize = 13 } = {}) {
   const ended = (code) => String(t("term.exited", { code })).replace("{code}", String(code));
   addCss();
   el.replaceChildren();
@@ -117,6 +117,8 @@ export function mountTerminal(el, { cwd, token, t = (k) => k } = {}) {
   el.appendChild(root);
 
   const tabs = []; // { title, panes: [{ term, fit, id?, box, readonly }] }
+  let ctrlNext = false;
+  let ctrlDone = null;
   let active = null;
   let ws = null;
   let ready = false;
@@ -179,7 +181,7 @@ export function mountTerminal(el, { cwd, token, t = (k) => k } = {}) {
   const makePane = (readonly) => {
     const box = document.createElement("div");
     box.className = "bp-term-pane";
-    const term = new Terminal({ cursorBlink: !readonly, disableStdin: readonly, fontSize: 13, fontFamily: "ui-monospace, Menlo, Consolas, monospace", theme: theme(), scrollback: 5000, convertEol: readonly });
+    const term = new Terminal({ cursorBlink: !readonly, disableStdin: readonly, fontSize, fontFamily: "ui-monospace, Menlo, Consolas, monospace", theme: theme(), scrollback: 5000, convertEol: readonly });
     const fit = new FitAddon();
     term.loadAddon(fit);
     term.open(box);
@@ -205,6 +207,13 @@ export function mountTerminal(el, { cwd, token, t = (k) => k } = {}) {
     waiting.set(pane.ref, pane);
     if (ready) pane.go();
     pane.term.onData((d) => {
+      // "Ctrl" pressed on a phone's extra keys: the next letter becomes Ctrl+letter.
+      if (ctrlNext && d.length === 1) {
+        const c = d.toUpperCase().charCodeAt(0);
+        if (c >= 64 && c <= 95) d = String.fromCharCode(c - 64);
+        ctrlNext = null;
+        if (ctrlDone) ctrlDone();
+      }
       if (!pane.id || !ready) return;
       // Huge pastes go in pieces: a message has a size limit.
       for (let i = 0; i < d.length; i += MAX_INPUT) ws.send(JSON.stringify({ t: "in", id: pane.id, d: d.slice(i, i + MAX_INPUT) }));
@@ -342,5 +351,20 @@ export function mountTerminal(el, { cwd, token, t = (k) => k } = {}) {
     () => message("term.failed", false),
   );
 
-  return { newTab, split, close, runVisible, dispose, fit: fitAll };
+  /** Keys from outside the terminal (a phone's extra keys): typed into the shell shown now. */
+  function input(d) {
+    const p = active && !active.readonly ? active.panes[active.panes.length - 1] : null;
+    if (!p) return;
+    if (p.id && ready) ws.send(JSON.stringify({ t: "in", id: p.id, d: String(d).slice(0, MAX_INPUT) }));
+    p.term.focus();
+  }
+  /** Makes the next letter typed a Ctrl+letter; done() runs once it is used. */
+  function ctrl(on, done) {
+    ctrlNext = !!on;
+    ctrlDone = on ? done : null;
+    const p = active && active.panes[active.panes.length - 1];
+    if (p) p.term.focus();
+  }
+
+  return { newTab, split, close, runVisible, dispose, fit: fitAll, input, ctrl };
 }