samagotchi 0.119.0 → 0.121.0

data/lib/samagotchi/web/public/app.js

@@ -39,7 +39,7 @@ import { renderInfoBar } from "./info_bar.js";
 import { sessionBar, workerBadgeFor } from "./info_bar_model.js";
 import { createShownTexts } from "./shown_texts.js";
 import { emptySessionState, sessionStateFrom } from "./session_state.js";
-import { admitImages, chipName, chipsTemplate, imageFiles, thumbsTemplate } from "./images.js";
+import { thumbsTemplate } from "./images.js";
 import { normalize, failedTurnText, cantText, withLiveStatus, withoutWorker } from "./format.js";
 import { createTurnView, turnHistoryNodes } from "./turn_view.js";
 import { elementOf, emptyAnswerTemplate } from "./turn_html.js";
@@ -62,11 +62,10 @@ import { actionLine, annotationActions, composerWithAction } from "./annotate_ac
 import { copyText, installCopy } from "./copy.js";
 import { createQuestionCards } from "./question_cards.js";
 import { splitSnapshotCards } from "./card.js";
-import { PROMPT_LINE_PX, PROMPT_MIN_PX, promptHeight } from "./composer_size.js";
-import { GRIP_KEY, createComposerGrip } from "./composer_grip.js";
+import { PROMPT_LINE_PX, PROMPT_MIN_PX } from "./composer_size.js";
+import { mountComposer } from "./composer_mount.js";
 import { readStored, writeStored } from "./storage.js";
 import { createCommandList } from "./command_list.js";
-import { createPromptHistory } from "./prompt_history.js";
 import { ALL_SESSIONS_HASH, sessionHash, sessionIdFromHash } from "./route.js";
 import { scopeDir, scopeTemplate } from "./scope.js";
 import { render } from "./vendor/lit-html.js";
@@ -283,7 +282,7 @@ const workingSet = view === "stage" && document.body.dataset.workingSet === "1"
 document.body.classList.toggle("working-set", !!workingSet);
 const turnDom = view === "stage"
   ? createStageView({
-    ...viewArgs, isNearBottom: () => atHistoryEnd(), dockEl: $("#dock"), centerEl: $("#center"), composerEl,
+    ...viewArgs, isNearBottom: () => atHistoryEnd(), dockEl: $("#dock"), centerEl: $("#center"),
     renderMarkdown, linkRefs: linkRefsIn, workingSet,
   })
   : createTurnView(viewArgs);
@@ -345,7 +344,7 @@ const deliveryControl = createDeliveryControl({
       participantTurn: !!liveTurn.participantTurn,
     };
   },
-  composerEmpty: () => !promptEl.value.trim() && !chips.length,
+  composerEmpty: () => !composer.hasDraft(),
   send: (delivery) => handleSendTurn({ delivery }),
   session: () => selected,
 });
@@ -407,9 +406,10 @@ const sentIds = new Set();
 const earlyRestores = new Map();
 
 // The page's scope (scope.js): ?dir= is the folder a project view came
-// from (new sessions start there); the server names its project, if any.
+// from (new sessions start there), else on a bare page chi web's start
+// folder (data-scope-dir); the server names its project, if any.
 const scope = {
-  dir: scopeDir(location.search),
+  dir: scopeDir(location.search) || document.body.dataset.scopeDir || null,
   projectName: document.body.dataset.projectName || null,
   projectDir: document.body.dataset.projectDir || "",
   serverDir: document.body.dataset.serverDir || "",
@@ -838,7 +838,7 @@ function clearSelection() {
   setMarkdownWarning(null);
   markdownTip.show(null);
   setCapabilities(null, null);
-  composerGrip.newVisit();
+  composer.newVisit();
   updateComposerMode();
   updateInfoBar();
   focusPrompt();
@@ -873,7 +873,7 @@ async function select(id) {
   resyncAttempts = 0; // this session has its own re-read budget
   resetSessionState();
   resetTurnView();
-  composerGrip.newVisit();
+  composer.newVisit();
   updateInfoBar();
   contextChips.load(id);
   participantsControl.load(id);
@@ -941,7 +941,7 @@ async function resync({ endText = null } = {}) {
     if (id !== selected) return;
     // An archived session opens folded: decided once per visit, from its
     // first answer (the list may not hold it yet, or ever under ?dir).
-    composerGrip.decideVisit(data.session?.archived);
+    composer.decideVisit(data.session?.archived);
     const kept = keptCommandBubbles(historyEl, id);
     resetTurnView();
     renderSessionView(data, { kept });
@@ -1452,7 +1452,7 @@ const streamHandlers = createStreamHandlers({
     },
   },
   composer: {
-    empty: () => !promptEl.value.trim() && !chips.length,
+    empty: () => !composer.hasDraft(),
     refill: (text) => {
       // A failed turn's line back: seen, so the composer opens (this visit).
       openForVisit();
@@ -1548,7 +1548,7 @@ const sendTurnControl = createSendTurn({
   composer: {
     el: promptEl,
     button: actionBtn,
-    chips: () => chips,
+    chips: () => composer.chips(),
     setChips,
     fit: fitPrompt,
     clear: clearComposer,
@@ -1622,96 +1622,59 @@ $("#newBtn").addEventListener("click", () => {
   startPage.loadModels({ asked: true });
 });
 
-actionBtn.addEventListener("click", () => {
-  if (!queueRefused(false)) handleSendTurn();
-});
-
-// ── Images: paste or drop into the composer, chips until sent ─────────────
-const chipsEl = $("#chips");
 const lightboxEl = $("#lightbox");
-let chips = [];
-
-function renderChips() {
-  render(chipsTemplate(chips), chipsEl);
-  chipsEl.hidden = !chips.length;
-  drawFoldControls();
-}
-
-// A chip that goes frees its preview; one kept in +list+ keeps it.
-function setChips(list) {
-  for (const c of chips) if (c.file && c.src && !list.includes(c)) URL.revokeObjectURL(c.src);
-  chips = list;
-  renderChips();
-}
-
-// A paste's, a drop's or the image button's files: the images the message
-// may still take become chips (images.js admitImages); a toast says why the
-// rest stayed out. Whether any went in.
-function addImageFiles(files) {
-  const { take, refused } = admitImages(files, chips.length);
-  if (refused) showToast(refused);
-  if (!take.length) return false;
-  for (const file of take) chips.push({ file, name: chipName(file, chips.length), src: URL.createObjectURL(file) });
-  renderChips();
-  focusPrompt();
-  return true;
-}
-
-chipsEl.addEventListener("click", (e) => {
-  const btn = e.target.closest(".chip-remove");
-  if (!btn) return;
-  const [chip] = chips.splice(Number(btn.dataset.index), 1);
-  if (chip?.file && chip.src) URL.revokeObjectURL(chip.src);
-  renderChips();
-});
-// The image button: the file picker's images join the chips. Its value is
-// cleared after each pick, so the same file can be picked again.
-attachBtn.addEventListener("click", () => attachInput.click());
-attachInput.addEventListener("change", () => {
-  addImageFiles([...attachInput.files]);
-  attachInput.value = "";
-});
-// ── Composer height: grows with the text; the top-edge grip sets a floor ───
-// The floor is saved as it was set; fitPrompt holds it to half the window it is
-// drawn in (composer_size.js), so a floor saved in a bigger window fits this one
-// and comes back when the window is big again.
-let promptFloor = Number(readStored(GRIP_KEY)) || null;
 
 // The empty box: one line in a session, three on the start page.
 function promptMinPx() {
   return document.body.classList.contains("has-session") ? PROMPT_LINE_PX : PROMPT_MIN_PX;
 }
 
+// The composer (composer_mount.js): the box, its height, image chips, grip
+// and fold, ↑/↓ history and keys. The owner's parts come in as hooks: the
+// draft's origin (noteDraft), the / list's keys, the delivery line's Esc and
+// queue, the info bar's Stop turn and drop while folded, typing anywhere.
+const composer = mountComposer({
+  els: {
+    composer: composerEl, prompt: promptEl, button: actionBtn, chips: $("#chips"), attachBtn, attachInput,
+    grip: $("#composeGrip"),
+  },
+  minPx: promptMinPx,
+  toast: (text) => showToast(text),
+  onWrite: () => noteDraft(),
+  // ↑/↓: the prompt history shared with the TUI.
+  loadHistory: fetchHistory,
+  // Alt/Option+Enter: queued for after the running turn (D6), only to a
+  // worker that queues (else it would steer): the text stays, a note says why.
+  send: ({ queue }) => {
+    if (!selected) return handleSendTurn();
+    if (!queueRefused(queue)) handleSendTurn(queue ? { delivery: "queue" } : {});
+  },
+  keyFirst: (e) => commandList.handleKey(e),
+  // Esc lets go of a choice armed on the delivery line.
+  escape: () => deliveryControl.disarm(),
+  fold: {
+    infoCancelBtn,
+    infoBarEl: $("#infoBar"),
+    session: () => selected,
+    waiting: () => !!(waitingOn(allSessions.find((s) => s.id === selected)) || questionCards.pendingQuestion()),
+    turnRunning: () => liveTurn.running,
+    allViewOpen,
+    lightboxOpen: () => !lightboxEl.hidden,
+  },
+});
+// Bound here, not hoisted: no top-level code above this line may call them.
+const { openForVisit, focusPrompt, drawFoldControls } = composer;
+// Hoisted, for the hooks above that name them (called once the page runs).
 function fitPrompt() {
-  const borders = promptEl.offsetHeight - promptEl.clientHeight;
-  promptEl.style.height = "0px";
-  const { height, scrolls } = promptHeight({ contentPx: promptEl.scrollHeight + borders, floorPx: promptFloor, viewportPx: window.innerHeight, minPx: promptMinPx() });
-  promptEl.style.height = `${height}px`;
-  promptEl.style.overflowY = scrolls ? "auto" : "hidden";
+  composer.fit();
+}
+function setChips(list) {
+  composer.setChips(list);
+}
+function refreshHistory() {
+  composer.refreshHistory();
 }
 
-promptEl.addEventListener("input", fitPrompt);
-window.addEventListener("resize", fitPrompt);
-fitPrompt();
-
-promptEl.addEventListener("paste", (e) => {
-  const files = imageFiles(e.clipboardData);
-  // Text pasted along with an image still lands in the textarea.
-  if (addImageFiles(files) && !e.clipboardData.getData("text/plain")) e.preventDefault();
-});
-composerEl.addEventListener("dragover", (e) => {
-  if (![...(e.dataTransfer?.types || [])].includes("Files")) return;
-  e.preventDefault();
-  composerEl.classList.add("dropping");
-});
-composerEl.addEventListener("dragleave", () => composerEl.classList.remove("dropping"));
-composerEl.addEventListener("drop", (e) => {
-  composerEl.classList.remove("dropping");
-  const files = imageFiles(e.dataTransfer);
-  if (!files.length) return;
-  e.preventDefault();
-  addImageFiles(files);
-});
 // The × on a message queued for after the turn takes it back (unqueue.js).
 const unqueue = createUnqueue({
   sessionId: () => selected,
@@ -1720,7 +1683,7 @@ const unqueue = createUnqueue({
   copy: (text) => copyText(text),
   // Edit: the removed text back into an empty composer (never over a draft).
   putBack: (text) => {
-    if (promptEl.value.trim() || chips.length) return false;
+    if (composer.hasDraft()) return false;
     openForVisit();
     promptEl.value = text;
     noteDraft();
@@ -1743,27 +1706,6 @@ document.addEventListener("keydown", (e) => {
 cancelBtn.addEventListener("click", () => handleCancel());
 infoCancelBtn.addEventListener("click", () => handleCancel());
 
-// The composer's grip and fold (composer_grip.js).
-const composerGrip = createComposerGrip({
-  composeGrip: $("#composeGrip"),
-  promptEl,
-  infoCancelBtn,
-  infoBarEl: $("#infoBar"),
-  session: () => selected,
-  fitPrompt,
-  promptMinPx,
-  floor: () => promptFloor,
-  setFloor: (px) => { promptFloor = px; },
-  draft: () => !!(promptEl.value.trim() || chips.length),
-  waiting: () => !!(waitingOn(allSessions.find((s) => s.id === selected)) || questionCards.pendingQuestion()),
-  turnRunning: () => liveTurn.running,
-  allViewOpen,
-  lightboxOpen: () => !lightboxEl.hidden,
-  imageFiles,
-  addImageFiles,
-});
-// Bound here, not hoisted: no top-level code above this line may call them.
-const { openForVisit, focusPrompt, drawFoldControls } = composerGrip;
 // The / autocomplete (command_list.js): the session's commands while the
 // composer holds one "/word".
 const commandList = createCommandList({
@@ -1776,43 +1718,6 @@ const commandList = createCommandList({
   },
 });
 
-// ↑/↓: the prompt history shared with the TUI (prompt_history.js), from a
-// copy fetched on focus and after each send (keydown can't wait for one).
-const promptHistory = createPromptHistory();
-function refreshHistory() {
-  fetchHistory().then((entries) => promptHistory.setEntries(entries), () => {});
-}
-promptEl.addEventListener("focus", refreshHistory);
-function historyKey(e) {
-  if (e.isComposing || e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) return false;
-  const step = e.key === "ArrowUp" ? promptHistory.up : e.key === "ArrowDown" ? promptHistory.down : null;
-  const recalled = step?.({ value: promptEl.value, start: promptEl.selectionStart, end: promptEl.selectionEnd });
-  if (!recalled) return false;
-  e.preventDefault();
-  promptEl.value = recalled.value;
-  noteDraft();
-  promptEl.setSelectionRange(recalled.caret, recalled.caret);
-  fitPrompt();
-  return true;
-}
-
-promptEl.addEventListener("keydown", (e) => {
-  if (commandList.handleKey(e)) return;
-  if (historyKey(e)) return;
-  // Esc lets go of a choice armed on the delivery line.
-  if (e.key === "Escape" && deliveryControl.disarm()) {
-    e.preventDefault();
-    return;
-  }
-  // An IME's Enter picks the composition, it doesn't send.
-  if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
-    e.preventDefault();
-    if (!selected) handleSendTurn();
-    // Alt/Option+Enter: queued for after the running turn (D6), only to a
-    // worker that queues (else it would steer): the text stays, a note says why.
-    else if (!queueRefused(e.altKey)) handleSendTurn(e.altKey ? { delivery: "queue" } : {});
-  }
-});
 $("#infoStopBtn").addEventListener("click", () => sessionActions.stopSelected());
 $("#infoDeleteBtn").addEventListener("click", () => {
   if (selected) confirmDelete(selected);
@@ -1829,7 +1734,7 @@ $("#infoArchiveBtn").addEventListener("click", () => sessionActions.toggleArchiv
 // @return the displaced draft's text, or null
 function fillOpener(created, continuedId) {
   const { value, displaced } = openerFill({
-    text: promptEl.value, hasChips: chips.length > 0, draftFrom, continuedId, linkId: created.id, created,
+    text: promptEl.value, hasChips: composer.chips().length > 0, draftFrom, continuedId, linkId: created.id, created,
   });
   if (value === null) return null;
   openForVisit();
@@ -1892,8 +1797,14 @@ turnDom.scrollEl?.addEventListener("scroll", annotateBar.schedule, true);
 turnRoots().forEach((root) => installCopy(root));
 
 // Notifications (notifications.js): an OS notification and a title count
-// when a session needs the user while this tab is not in front.
-const notifications = createNotifications({ button: $("#notifyBtn"), scoped: !!scope.dir });
+// when a session needs the user while this tab is not in front. On a
+// project's page the Home Screen app's device tidy-up still covers every
+// project: it gets a stream of every session of its own (allEvents).
+const notifications = createNotifications({
+  button: $("#notifyBtn"),
+  scoped: !!scope.dir,
+  allEvents: (handlers, opts) => openEvents(handlers, opts),
+});
 
 // The latest-sessions strip can be hidden for more chat room; the choice
 // stays per browser (it replaced zen mode, so a zen user starts hidden).

data/lib/samagotchi/web/public/composer.css

@@ -0,0 +1,73 @@
+/* The composer (composer_mount.js): the message box, its image chips, grip and fold, its key hint and its toolbar row
+   (the image button, Send). Shared by the owner's page (index.html) and the participant page (participant.html);
+   linked after tokens.css and before a page's own <style>, so a page's rules of the same weight win. The owner's
+   own parts stay in index.html: the card (#dock), the delivery line, Stop turn, the start page's picker and chips,
+   the / list, and the 16px text fields for iOS. */
+/* The image button's icon mask (the stroke only shapes the mask; the icon takes currentColor); index.html's phone info
+   bar and all view's cards use it too. */
+:root{--icon-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2.75' width='12' height='10.5' rx='1.5'/%3E%3Ccircle cx='5.75' cy='6.25' r='1.1'/%3E%3Cpath d='m2.5 12.5 3.75-3.75 2.5 2.5 1.75-1.75 3 3'/%3E%3C/svg%3E")}
+#composer{display:flex;flex-direction:column;gap:8px;padding:14px 14px 10px}
+#composer .compose-col{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
+#composer.dropping{outline:2px dashed var(--accent);outline-offset:-4px}
+/* In a session the composer is a row: the line's row wraps above the text field and the buttons. */
+body.has-session #composer{flex-wrap:wrap;row-gap:6px}
+#chips{display:flex;flex-wrap:wrap;gap:6px}
+#chips[hidden]{display:none}
+.chip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-bg);border:1px solid var(--border-strong);border-radius:8px;padding:3px 4px 3px 3px;font-size:12px;max-width:220px}
+.chip img{width:32px;height:32px;object-fit:cover;border-radius:5px}
+.chip .chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.chip .chip-remove{background:transparent;color:var(--text-3);padding:0 6px;min-height:0;font-size:14px}
+#composer textarea{flex:1 1 auto;min-height:72px;resize:none;background:transparent;border:0;color:var(--text);padding:2px;border-radius:0;font-size:15px;line-height:1.45}
+/* An edge grip: the thin handle on an edge between two panes (the composer's,
+   the latest-sessions strip's). The pill is the handle's look, a 36×4 px bar
+   centred on the edge, drawn on hover, while dragging or focused; the id
+   rules hold each grip's own box: height and margins (they depend on the flex
+   gap around it: none for the composer's, main's 16 px for the strip's) and
+   its own states. */
+.edge-grip{position:relative;z-index:2;cursor:ns-resize;touch-action:none}
+.edge-grip::after{content:"";position:absolute;left:50%;top:3px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--border-strong);opacity:0;transition:opacity .12s ease}
+.edge-grip:hover::after,.edge-grip.dragging::after{opacity:1}
+.edge-grip:hover::after,.edge-grip.dragging::after{background:var(--accent)}
+.edge-grip:focus-visible{outline:none}
+.edge-grip:focus-visible::after{opacity:1;box-shadow:0 0 0 2px var(--accent-ring)}
+#composeGrip{height:10px;margin:-5px 0}
+#composeGrip:has(+ #composer:hover)::after{opacity:1}
+/* Folded (composer_grip.js, composer_fold.js): the grip is the handle on the info bar's top edge, drawn always, wider so it reads as a control;
+   draft = the accent, waiting = the attention colour; .will-fold = a drag past the fold threshold (released it hides the box). */
+body.has-session.composer-folded #composeGrip::after{opacity:1;width:48px;margin-left:-24px}
+#composeGrip.draft::after{background:var(--accent)}
+#composeGrip.waiting::after{background:var(--warn)}
+#composeGrip.will-fold::after{opacity:1;background:var(--accent)}
+/* A phone has no hover: the pill is always there and the hit zone is taller, ~96 px wide and centred (full width would cover the
+   info bar's buttons while folded, the stage card's bottom in the stage view); it reaches 7 px below the edge, the info bar's
+   border and padding, so it never covers a button of the bar. */
+@media(max-width:600px){
+  #composeGrip{width:96px;height:26px;margin:-19px auto -7px}
+  #composeGrip::after{top:17px;opacity:1}
+}
+#composer textarea::placeholder{color:var(--text-faint)}
+/* Key hint: its line is always reserved, so focusing never shifts the layout. */
+#composeHint{order:1;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:14px;color:var(--text-faint);padding-left:2px;opacity:0;transition:opacity .12s ease;user-select:none}
+#composer:focus-within #composeHint:not(:empty){opacity:1}
+#composer textarea:focus{outline:none}
+/* The toolbar row: model picker · hint · Cancel · Send (the JS display toggles decide what shows). */
+#composer .actions-col{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
+#composer .actions-col button{white-space:nowrap;font-size:12px;padding:0 12px;height:28px;min-height:28px;line-height:28px}
+#composer .actions-col .split{order:3;display:flex;gap:4px;margin-left:auto}
+#composer #actionBtn{min-width:64px;font-weight:600}
+/* The image button (app.js: a click opens #attachInput, the hidden file picker; a phone's offers the camera and the photo library):
+   an icon just left of Start / Send, quiet like the model picker; hidden in a session a terminal owns, and on a phone while a turn runs. */
+#composer .actions-col .attach-btn{order:2;flex:none;width:28px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text-muted)}
+#composer .actions-col .attach-btn::before{content:"";display:block;width:16px;height:16px;margin:auto;background:currentColor;-webkit-mask:var(--icon-image) center/contain no-repeat;mask:var(--icon-image) center/contain no-repeat}
+#composer .actions-col .attach-btn:hover{filter:none;color:var(--text);background:color-mix(in srgb,var(--bg-hover) 75%,transparent)}
+#composer .actions-col .attach-btn[hidden]{display:none}
+/* In a session the composer is one row: the text field (one line, growing with its text; fitPrompt sets its height)
+   and Cancel · Send at its bottom right. The key hint is in the placeholder there, so its row goes. */
+body.has-session #composer{flex-direction:row;align-items:flex-end;padding:10px}
+body.has-session #composer textarea{min-height:0}
+body.has-session #composeHint{display:none}
+body.has-session #composer .actions-col{flex-wrap:nowrap;flex-shrink:0}
+/* The composer folded away (composer_grip.js: the grip dragged down, Enter/Space on it): the info bar is the page's bottom edge. */
+body.has-session.composer-folded #composer{display:none}
+/* Phones: the key hint is cut off at this width, and phones have no Shift+Enter. */
+@media(max-width:600px){#composeHint{display:none}}

data/lib/samagotchi/web/public/composer_grip.js

@@ -2,20 +2,24 @@ import { GRIP_CLICK_FOLD_MS, GRIP_OPEN_PX, gripFloor, gripFolds, gripGesture } f
 import { COMPOSER_FOLD_KEY, composerFolded, foldHandle, opensOnKey } from "./composer_fold.js";
 import { readStored, removeStored, writeStored } from "./storage.js";
 
-// The composer's grip and fold (used by app.js): the grip's drag, click and keys,
-// the fold's state per visit and its page-wide listeners. app.js keeps the box's
-// height (fitPrompt) and the grip's floor (+floor+ / +setFloor+), which
+// The composer's grip and fold (made by composer_mount.js): the grip's drag, click
+// and keys, the fold's state per visit and its page-wide listeners. The mount keeps
+// the box's height (fitPrompt) and the grip's floor (+floor+ / +setFloor+), which
 // fitPrompt reads; the floor is saved under GRIP_KEY.
 export const GRIP_KEY = "chi_composer_floor";
 
 // +session+: the open session's id, or null (the start page). +draft+,
 // +waiting+, +turnRunning+, +allViewOpen+, +lightboxOpen+: what the page
 // shows now. +imageFiles+ / +addImageFiles+: a drop's images and the chips.
+// The owner page's own parts (composer_mount.js passes them through):
+// +infoCancelBtn+ (Stop turn in the info bar while folded) and +infoBarEl+
+// (a file dropped on it while folded), either may be null; +typeAnywhere+:
+// typing on the page opens a folded composer.
 export function createComposerGrip({
-  composeGrip, promptEl, infoCancelBtn, infoBarEl,
+  composeGrip, promptEl, infoCancelBtn = null, infoBarEl = null,
   session, fitPrompt, promptMinPx, floor, setFloor,
-  draft, waiting, turnRunning, allViewOpen, lightboxOpen,
-  imageFiles, addImageFiles,
+  draft, waiting = () => false, turnRunning = () => false, allViewOpen = () => false, lightboxOpen = () => false,
+  imageFiles, addImageFiles, typeAnywhere = true,
   doc = globalThis.document, win = globalThis.window,
 }) {
   // The composer's fold (composer_fold.js): the grip, which is the handle
@@ -214,7 +218,7 @@ export function createComposerGrip({
   // while folded. The start page's grip only resizes: no role, no fold state.
   function drawFoldControls() {
     const folded = isComposerFolded();
-    infoCancelBtn.style.display = folded && turnRunning() ? "" : "none";
+    if (infoCancelBtn) infoCancelBtn.style.display = folded && turnRunning() ? "" : "none";
     if (!session()) {
       composeGrip.removeAttribute("role");
       composeGrip.removeAttribute("aria-expanded");
@@ -233,18 +237,20 @@ export function createComposerGrip({
   promptEl.addEventListener("input", () => drawFoldControls());
   // Typing on the page opens a folded composer: the key lands in the box
   // (the class goes before the focus, so the browser types it there).
-  doc.addEventListener("keydown", (e) => {
-    if (!isComposerFolded()) return;
-    if (!opensOnKey(e, { active: doc.activeElement, allView: allViewOpen(), lightbox: lightboxOpen() })) return;
-    setComposerFolded(false);
-    promptEl.focus();
-  });
+  if (typeAnywhere) {
+    doc.addEventListener("keydown", (e) => {
+      if (!isComposerFolded()) return;
+      if (!opensOnKey(e, { active: doc.activeElement, allView: allViewOpen(), lightbox: lightboxOpen() })) return;
+      setComposerFolded(false);
+      promptEl.focus();
+    });
+  }
   // A file dropped on the folded info bar: open (for the visit), then add it.
-  infoBarEl.addEventListener("dragover", (e) => {
+  infoBarEl?.addEventListener("dragover", (e) => {
     if (!isComposerFolded() || ![...(e.dataTransfer?.types || [])].includes("Files")) return;
     e.preventDefault();
   });
-  infoBarEl.addEventListener("drop", (e) => {
+  infoBarEl?.addEventListener("drop", (e) => {
     if (!isComposerFolded()) return;
     const files = imageFiles(e.dataTransfer);
     if (!files.length) return;