chamba 0.7.0 → 0.9.0

package/templates/webterm/public/app/main.js

@@ -19,18 +19,25 @@
 //
 //   state.js        what the server last told this window, and the URL's key
 //   dom.js          the elements index.html ships with
-//   theme.js        the palette, this workspace's colour, and the session colours
+//   palette.js      the eleven workspace colours, the six session slots, and the rules over them
+//   theme.js        the colour this workspace is wearing, and the session colours that follow from it
 //   note.js         the status pill over the terminal
 //   terminal.js     the terminal, its size, and the keystrokes that go straight to the PTY
 //   tabs.js         the session bar, its two animations, renaming, and reordering
+//   anchored.js     a panel hung off the body under the button that opened it, and how it closes
 //   new-session.js  the panel behind the chevron: which agent, and which directory
+//   workspace-color.js  the colour this workspace wears: the button in the bar, and the panel of eleven
 //   alerts.js       the browser tab (title and drawn favicon), and the chime
 //   cards.js        the overlay cards
 //   connection.js   the socket, the reconnect loop, and the curtain
 //   frames.js       what to do with each frame the server sends
 //   pane-shell.js   the pane itself: the tool tabs, the three widths, the drag and the spine
+//   pane-shape.js   the shape a pane has beside one session, and the store that keeps one for each
 //   pane.js         the Pages tool: the chips bar and the page
-//   specs-host.js   the Specs tool: its frame, and the credentials the shell hands into it
+//   tool-host.js    a tool's frame, and the credentials the shell hands into it
+//   home-host.js    the Home tool: which tool it is, and its panel
+//   specs-host.js   the Specs tool, the same way
+//   reviews-host.js the Code Reviews tool, the same way again
 //   pane-frame.js   a published page in a sandboxed frame, and the answer that comes back out of it
 //   pane-arrival.js which page an incoming list opens by itself, and when none of them does
 //   status-strip.js the attached session's model, context, quota meters and version, above the composer
@@ -45,9 +52,9 @@
 // router talks to every feature and every feature answers back - so a module that ran another module's code at
 // load time would be reaching into something half-built. Everything with an order to it happens here.
 //
-// Reading at load time follows from the same thing: a module may read from one that imports nothing itself
-// (dom.js, state.js, theme.js), since a leaf is always finished by the time anything else runs, and never from
-// one inside the cycle, whose values may not exist yet.
+// Reading at load time follows from the same thing: a module may read from one that sits outside the cycle
+// (dom.js, state.js, theme.js, and palette.js under it), since such a module is always finished by the time
+// anything else runs, and never from one inside the cycle, whose values may not exist yet.
 //
 // Every module is imported here, including the ones this file has nothing to call. Several exist for what they
 // do when they load - the microphone button, the chevron panel's Escape key, the workspace colour, the draft
@@ -58,22 +65,29 @@
 import { refreshBrowserTab } from "./alerts.js";
 import { installClipboard } from "./clipboard.js";
 import { refreshComposer } from "./composer.js";
-import { connect } from "./connection.js";
+import { connect, LAST_SID_KEY } from "./connection.js";
+import "./anchored.js";
 import "./cards.js";
 import "./dictation.js";
 import "./dom.js";
+import "./palette.js";
 import "./drafts.js";
 import "./frames.js";
+import "./home-host.js";
 import "./new-session.js";
 import "./note.js";
 import "./pane.js";
 import "./pane-arrival.js";
+import "./pane-shape.js";
 import "./pane-frame.js";
+import "./reviews-host.js";
 import "./specs-host.js";
+import "./tool-host.js";
 import "./state.js";
 import "./status-strip.js";
 import "./strip-format.js";
 import "./theme.js";
+import "./workspace-color.js";
 import { mountPane } from "./pane-shell.js";
 import { renderBar } from "./tabs.js";
 import { mountTerminal, term } from "./terminal.js";
@@ -83,8 +97,10 @@ import { mountTerminal, term } from "./terminal.js";
 mountTerminal();
 installClipboard();
 refreshComposer();
-// After every tool has registered, which is what makes the pane something to draw.
-mountPane();
+// After every tool has registered, which is what makes the pane something to draw. In the shape of the
+// session this window was last on, which is the session the server is about to be asked for: the pane is drawn
+// once, in what it will be, rather than at the defaults and then again a frame later.
+mountPane(sessionStorage.getItem(LAST_SID_KEY));
 renderBar();
 // Before the first frame arrives, so the icon carries this workspace's frame from the moment the page loads.
 refreshBrowserTab();

package/templates/webterm/public/app/new-session.js

@@ -16,6 +16,7 @@
 // Nothing typed here is trusted: the server resolves whatever path arrives and refuses what is not a directory in the
 // workspace, and it refuses an agent it does not run.
 
+import { createAnchoredPanel } from "./anchored.js";
 import { sendFrame } from "./connection.js";
 import { noteMsg } from "./note.js";
 import { agents, defaultAgent, defaultCwd, KEY_QUERY } from "./state.js";
@@ -23,36 +24,17 @@ import { focusTerminal } from "./terminal.js";
 
 const DIR_LIST_ID = "dirlist";
 
-let newPopEl = null;
+const panel = createAnchoredPanel("newtab-more");
 
-function closeNewPop() {
-    if (!newPopEl) return;
-    newPopEl.remove();
-    newPopEl = null;
-    document.removeEventListener("pointerdown", onNewPopOutside, true);
-}
-
-// Put an open panel back under its button after the bar was rebuilt. A frame arrives whenever anything in the
-// container moves, and a panel that closed itself every time one did would be unusable; a button that is gone
-// (the session limit) takes it with it. Clamped to the window, since the bar can be scrolled far to the right.
+// Put an open panel back under its button after the bar was rebuilt. Called from renderBar().
 export function repositionNewPop() {
-    if (!newPopEl) return;
-    const anchor = document.getElementById("newtab-more");
-    if (!anchor) {
-        closeNewPop();
-        return;
-    }
-    const box = anchor.getBoundingClientRect();
-    const width = newPopEl.offsetWidth;
-    const left = Math.min(box.right - width, window.innerWidth - width - 8);
-    newPopEl.style.top = `${Math.round(box.bottom + 6)}px`;
-    newPopEl.style.left = `${Math.round(Math.max(8, left))}px`;
+    panel.reposition();
 }
 
-function onNewPopOutside(event) {
-    // The button itself is left alone: its own click handler toggles, and closing here first would reopen it.
-    if (newPopEl?.contains(event.target) || event.target.closest?.("#newtab-more")) return;
-    closeNewPop();
+// Called when the socket drops. The panel hangs off the body, where the bar's offline rules cannot reach it,
+// and nothing it offers can be answered with the socket down.
+export function closeNewPop() {
+    panel.close();
 }
 
 // Fill the picker's suggestions from the container. Fetched when the panel opens rather than kept around, so
@@ -118,8 +100,8 @@ function popLabel(text) {
 }
 
 export function toggleNewPop() {
-    if (newPopEl) {
-        closeNewPop();
+    if (panel.isOpen()) {
+        panel.close();
         return;
     }
     const state = { agent: defaultAgent };
@@ -144,7 +126,7 @@ export function toggleNewPop() {
     pop.append(popLabel("Directory"), field, list);
 
     const start = () => {
-        closeNewPop();
+        panel.close();
         sendFrame({ t: "new", cwd: field.value.trim(), agent: state.agent });
     };
     const row = document.createElement("div");
@@ -154,7 +136,7 @@ export function toggleNewPop() {
     cancel.className = "btn";
     cancel.textContent = "Cancel";
     cancel.addEventListener("click", () => {
-        closeNewPop();
+        panel.close();
         focusTerminal();
     });
     const go = document.createElement("button");
@@ -171,18 +153,8 @@ export function toggleNewPop() {
         start();
     });
 
-    document.body.append(pop);
-    newPopEl = pop;
-    repositionNewPop();
+    panel.open(pop);
     field.focus();
     field.select();
     fillDirList(list);
-    // Capture, so a click on a tab closes this before that tab switches session.
-    document.addEventListener("pointerdown", onNewPopOutside, true);
 }
-
-document.addEventListener("keydown", (event) => {
-    if (event.key !== "Escape" || !newPopEl) return;
-    closeNewPop();
-    focusTerminal();
-});

package/templates/webterm/public/app/palette.js

@@ -0,0 +1,58 @@
+// palette.js - the colours a workspace can wear, the slots a session rotates through, and the rules between them.
+//
+// Data and arithmetic only. Nothing here reads a browser global or does anything at load, which is what lets
+// the tests import this file and check the rules by running them rather than by matching the source text.
+// theme.js is what puts any of it on the page.
+//
+// The ids are the stored contract: a workspace remembers "azure" and never a hex, so a later version can move
+// a shade without stranding a workspace on a value nobody chose. An id this version does not know means
+// nothing is stored, and the workspace falls back to the colour the port gives it.
+
+// Cyberpunk neons on a near-black bar, in hue order, and deliberately free of yellow, orange and red - those
+// read as a warning here, and the bar has enough to say without one. Two rules hold over this list, and both
+// are checked in tests/webterm-sessions.test.ts: every colour clears 3:1 against the interface's grounds, and
+// no two are closer than 17.2 in CIE76, which is lime beside green, the closest pair this table already holds.
+export const PALETTE = [
+    { id: "lime", hex: "#7ae62f" },
+    { id: "green", hex: "#3fe54f" },
+    { id: "spring-green", hex: "#2fe58a" },
+    { id: "turquoise", hex: "#1fe0cf" },
+    { id: "azure", hex: "#29b6ff" },
+    { id: "blue", hex: "#5c86ff" },
+    { id: "indigo", hex: "#305efe" },
+    { id: "neon-violet", hex: "#b45cff" },
+    { id: "magenta", hex: "#f24bff" },
+    { id: "orchid", hex: "#ff4ecb" },
+    { id: "rose", hex: "#ff2e88" },
+];
+
+// The six slots a session dot rotates through, written out in the order the interface has always had them.
+// Restricting the hue-ordered list above to these six gives a different order - azure and magenta change
+// places - so the order is a written fact here rather than a side effect of the table. Deriving it would move
+// the automatic colour of every workspace whose port is congruent to 2 or 4 modulo 6, and shift the dot order
+// of every session already open.
+export const SESSION_IDS = ["spring-green", "turquoise", "magenta", "neon-violet", "azure", "rose"];
+
+/** The hex for one id, or null when this version does not know the id. */
+export function hexFor(id) {
+    return PALETTE.find((colour) => colour.id === id)?.hex ?? null;
+}
+
+// The colour a workspace wears before anyone picks one, worked out over the six in their order and never over
+// the eleven. Ports are handed out lowest-free-first per workspace, so neighbours land on different colours.
+// The eleven are the set the user picks from, and they take no part in this: any other reading would move the
+// colour of every workspace where nobody ever chose one.
+export function automaticId(seed) {
+    return SESSION_IDS[seed % SESSION_IDS.length];
+}
+
+// Every session slot except the one the workspace is wearing, so "never the workspace colour" is a property of
+// the list the tabs index into rather than a rule someone has to remember. The pool is always five long: when
+// the workspace wears a colour from outside the six, the slot the port would have chosen is the one held back,
+// which leaves the registry's PALETTE_SIZE untouched and the dots where they were.
+//
+// `autoId` is the id automaticId() gave this window, and is always one of the six.
+export function sessionColors(workspaceId, autoId) {
+    const taken = SESSION_IDS.includes(workspaceId) ? workspaceId : autoId;
+    return SESSION_IDS.filter((id) => id !== taken).map(hexFor);
+}

package/templates/webterm/public/app/pane-shape.js

@@ -0,0 +1,169 @@
+// pane-shape.js - what a pane's shape is, the rules that decide one, and the store that keeps one per session.
+//
+// The pane's own DOM-free module, so every rule here can be run rather than read as source: a browser entry
+// written by an older version, a spoiled field, a session that ended, and the arithmetic of a drag. Nothing
+// here holds an element or reaches another module, and each function is given whatever it works on, which is
+// what lets a test hand it a plain object and a window width of its own choosing.
+//
+// The shape itself is one session's answer to how the pane looks beside it: how wide, whether it is put away,
+// whether it has the whole row, which tool is open, how big a page is drawn, and which palette the
+// reading is in. Nothing in it is about the work, so a shape that is lost costs a drag of the divider.
+
+// One entry for the whole interface, holding a shape for each session. Named the way the interface names its
+// own: webterm-color and webterm-drafts are its neighbours.
+export const PANE_KEY = "webterm-pane";
+
+// The tools there are to open, which a shape holds one of. Their ids and nothing else about them: what a tool
+// is made of is the pane's business, and all this module asks is whether a stored id is one of them.
+export const HOME = "home";
+export const PAGES = "pages";
+export const SPECS = "specs";
+export const REVIEWS = "reviews";
+const SHAPE_TOOLS = [HOME, PAGES, SPECS, REVIEWS];
+// The tool a session opens on. Home, because it is the reading of the repository a session starts in, and
+// because a stored shape naming another tool keeps that tool: this is what a session with no shape gets.
+const DEFAULT_TOOL = HOME;
+
+// Narrower than this and the pane is not a pane any more, so it becomes the spine instead. The mock's
+// threshold, and the width the spine itself takes.
+export const COLLAPSE_AT = 150;
+// What the pane opens at, in a fraction of the window. Half is the default width itself rather than a pixel
+// count, so a pane nobody has dragged stays at half through a window resize.
+export const DEFAULT_FRACTION = 0.5;
+// The most of the window a drag may give the pane.
+const MAX_FRACTION = 0.7;
+// How much further than that a drag has to go before it means the far end. Past the clamp the pane stops
+// following the pointer, so without this the only way to the full width is the button, and a drag that keeps
+// going reads as a request nothing answers. Wide enough that reaching the clamp is not the same as passing
+// it, and the way back is the drag itself: anything short of this is a width again, which is the state the
+// pane returns to when the pointer comes back.
+const FULL_AT = 90;
+// The least of the window the pane may come back into. Reopening is not the same as resizing: whatever width
+// it was put away at, a pane the user has just asked for has to be wide enough to read a page in.
+const MIN_OPEN_FRACTION = 1 / 3;
+
+/** What a session nobody has shaped opens on. */
+export function defaultShape() {
+    return { width: null, collapsed: false, full: false, tool: DEFAULT_TOOL, size: null, theme: null };
+}
+
+// --- How wide ----------------------------------------------------------------------------------------------------------------------------
+
+/**
+ * Where a drag of the divider leaves the pane: a width, put away, or the whole row.
+ *
+ * `wanted` is what the pointer asks for, and `before` is the width the pane had when the drag started. Both
+ * ends of the drag are the same rule read at a different threshold: past the near one the pane is put away
+ * and hands its old width back, rather than keeping the sliver the pointer passed through on the way there;
+ * past the far one it takes the row; and anywhere between them it is the width under the pointer, clamped.
+ *
+ * The clamp is what the pane is left holding, so coming back from the far end lands there rather than
+ * wherever the pointer had run to.
+ */
+export function draggedTo(wanted, windowWidth, before) {
+    const ceiling = windowWidth * MAX_FRACTION;
+    const full = wanted > ceiling + FULL_AT;
+    if (wanted < COLLAPSE_AT) return { width: before, collapsed: true, full };
+    return { width: Math.min(wanted, ceiling), collapsed: false, full };
+}
+
+/**
+ * The width a pane that is being brought back has to open into, which is the width it was put away at unless
+ * that would be a sliver.
+ *
+ * A pane dragged shut, or one a narrower window left narrow, has to come back as something a page fits in.
+ * A pane with no width of its own keeps none: the default fraction is wide enough by definition.
+ */
+export function reopenedFrom(shape, windowWidth) {
+    if (shape.width === null) return null;
+    return Math.max(shape.width, windowWidth * MIN_OPEN_FRACTION);
+}
+
+/**
+ * Whether the pane is at the width it opens at: no width of its own, no far end, and not the spine.
+ *
+ * What the half-width button is lit by, and therefore what a drag takes away and that button gives back.
+ */
+export function isDefaultWidth(shape) {
+    return shape.width === null && !shape.full && !shape.collapsed;
+}
+
+// --- The store ---------------------------------------------------------------------------------------------------------------------------
+
+/** One stored shape, field by field: anything missing or malformed falls back to that field's default. */
+export function adoptShape(stored) {
+    const shape = defaultShape();
+    if (stored === null || typeof stored !== "object") return shape;
+    if (typeof stored.width === "number" && stored.width >= COLLAPSE_AT) shape.width = stored.width;
+    if (typeof stored.collapsed === "boolean") shape.collapsed = stored.collapsed;
+    if (typeof stored.full === "boolean") shape.full = stored.full;
+    if (SHAPE_TOOLS.includes(stored.tool)) shape.tool = stored.tool;
+    // The multiplier is stored rather than its position, so a session that was left at a size this version no
+    // longer offers falls back to the default instead of landing between two steps.
+    if (typeof stored.size === "number" && Number.isFinite(stored.size)) shape.size = stored.size;
+    if (stored.theme === "dark" || stored.theme === "light") shape.theme = stored.theme;
+    return shape;
+}
+
+/**
+ * Every shape in the store, as it stands right now.
+ *
+ * An entry from the version that kept one shape for the whole window carries no `sessions`, and there is no
+ * session it could be meant for, so it is dropped rather than handed to the first session that asks. So is
+ * anything unreadable: a shape nobody can parse means the pane opens on its defaults, and never less.
+ */
+export function readShapes(storage) {
+    const shapes = new Map();
+    let held = null;
+    try {
+        held = JSON.parse(storage.getItem(PANE_KEY) ?? "{}")?.sessions ?? null;
+    } catch {
+        return shapes;
+    }
+    if (held === null || typeof held !== "object" || Array.isArray(held)) return shapes;
+    for (const [sid, shape] of Object.entries(held)) {
+        if (sid !== "") shapes.set(sid, adoptShape(shape));
+    }
+    return shapes;
+}
+
+/** Write the whole store. Storage that refuses only means the pane keeps its shape for this page's lifetime. */
+export function writeShapes(storage, shapes) {
+    try {
+        storage.setItem(PANE_KEY, JSON.stringify({ sessions: Object.fromEntries(shapes) }));
+    } catch {
+        // Nothing to do about a disabled or full store, and nothing worth saying to the user about it.
+    }
+}
+
+/**
+ * One session's shape into the store, and every other session's left as it stands.
+ *
+ * Read, merge, write, because the store is shared by every window of one origin. A window that wrote its own
+ * whole map back would hand another session's pane to whatever that window last saw of it, which is how two
+ * windows quietly undo each other.
+ */
+export function mergeShape(storage, sid, shape) {
+    if (!sid) return;
+    const shapes = readShapes(storage);
+    shapes.set(sid, shape);
+    writeShapes(storage, shapes);
+}
+
+/**
+ * Drop the shape of every session that is no longer live, and say whether anything went.
+ *
+ * The store outlives the page, so a shape nobody drops here is kept for as long as the browser holds the
+ * origin. Called with the session list the server sends, the way the drafts and the composer history are.
+ */
+export function pruneShapes(storage, live) {
+    const shapes = readShapes(storage);
+    let removed = false;
+    for (const sid of [...shapes.keys()]) {
+        if (live.has(sid)) continue;
+        shapes.delete(sid);
+        removed = true;
+    }
+    if (removed) writeShapes(storage, shapes);
+    return removed;
+}