clavarium 0.1.5 → 0.2.0-next.1

package/npm-shrinkwrap.json

@@ -1,17 +1,17 @@
 {
   "name": "clavarium",
-  "version": "0.1.5",
+  "version": "0.2.0-next.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "clavarium",
-      "version": "0.1.5",
+      "version": "0.2.0-next.1",
       "license": "MIT",
       "dependencies": {
         "@xterm/addon-fit": "^0.11.0",
         "@xterm/xterm": "^6.0.0",
-        "clavarium-parley": "0.9.0",
+        "clavarium-parley": "0.10.0-next.2",
         "mermaid": "11.17.2",
         "node-pty": "^1.1.0",
         "pdfjs-dist": "6.4.299",
@@ -686,9 +686,9 @@
       }
     },
     "node_modules/clavarium-parley": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/clavarium-parley/-/clavarium-parley-0.9.0.tgz",
-      "integrity": "sha512-9JjM2GVlAq/a3n3G47QG/MSze8RjwiDH4aMqGQhJ92T4W/uDlRjCJiRwVyuPWx7PVAId/+r8sHNIPDAz7K0tzQ==",
+      "version": "0.10.0-next.2",
+      "resolved": "https://registry.npmjs.org/clavarium-parley/-/clavarium-parley-0.10.0-next.2.tgz",
+      "integrity": "sha512-/6pAEMEKgug1FerqBKzqoMcWmnR6eYWtfiGt1Oa1gz9vWFuupxXlTeUFurukgfqLiEVOU6U+g1qJUff8PtTLBQ==",
       "license": "MIT",
       "bin": {
         "parley": "bin/parley.mjs",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clavarium",
-  "version": "0.1.5",
+  "version": "0.2.0-next.1",
   "license": "MIT",
   "type": "module",
   "description": "A conversation is a VM with a terminal in it. Everything else is a folder.",
@@ -43,7 +43,7 @@
   "dependencies": {
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",
-    "clavarium-parley": "0.9.0",
+    "clavarium-parley": "0.10.0-next.2",
     "mermaid": "11.17.2",
     "node-pty": "^1.1.0",
     "pdfjs-dist": "6.4.299",

package/server/api.mjs

@@ -424,6 +424,10 @@ export async function handleApi(request, response, conversations, headers, resou
         if (asking) return send(200, conversations.setAskFirst(decodeURIComponent(asking[1]), body.on)), true;
         const naming = /^\/api\/conversations\/([^/]+)\/chat-name$/.exec(pathname);
         if (naming) return send(200, conversations.setChatName(decodeURIComponent(naming[1]), body.name)), true;
+        const titling = /^\/api\/conversations\/([^/]+)\/title$/.exec(pathname);
+        if (titling) return send(200, conversations.setTitle(decodeURIComponent(titling[1]), body.title)), true;
+        const hiding = /^\/api\/conversations\/([^/]+)\/hidden$/.exec(pathname);
+        if (hiding) return send(200, conversations.setHidden(decodeURIComponent(hiding[1]), body.on)), true;
         const marking = /^\/api\/conversations\/([^/]+)\/voice-mark$/.exec(pathname);
         if (marking) return send(200, conversations.setVoiceMark(decodeURIComponent(marking[1]), body.on)), true;
         const resuming = /^\/api\/conversations\/([^/]+)\/resume$/.exec(pathname);

package/server/conversations.mjs

@@ -6,7 +6,7 @@
  *   - Sleep is a button, never a guess: telling a long job from an idle tool
  *     cannot be done without reading the tool, and this server does not read.
  */
-import { isConversationName } from './names.mjs';
+import { isConversationName, identifierFrom, titleProblem } from './names.mjs';
 import { attachCommand, SOCKET } from './tmux.mjs';
 import { WORK, VM_USER, SHARING_STEP } from './vm.mjs';
 import { resumeOrFresh } from './tools.mjs';
@@ -189,7 +189,8 @@ export class Conversations {
 
     /* Whether a new machine may be made for this request: what `create`
        checks, and the server's room (capacity.mjs). Asked before `create`. */
-    async admit({ name, tool, memoryMb } = {}) {
+    async admit({ name, title, tool, memoryMb } = {}) {
+        if (!name && typeof title === 'string' && !titleProblem(title)) ({ name } = this.#naming({ title }));
         const chosen = this.#tools.find((t) => t.id === tool);
         /* What `create` refuses anyway is said by `create`. */
         if (!chosen || !isConversationName(name) || this.#store.get(name)) return;
@@ -201,7 +202,17 @@ export class Conversations {
     /* `workOnDisk`: the tool works on its machine's own disk instead of in a
        folder kept by the server. Faster for a large code project; but what
        it makes is then not seen from the page, and goes with the machine. */
-    create({ name, tool, memoryMb, workOnDisk }) {
+    /* A conversation is made from the name a person reads (`title`), its
+       identifier drawn from it, or from an identifier alone (the advanced
+       options, a blueprint). The identifier never changes afterwards. */
+    #naming({ name, title }) {
+        if (title !== undefined) { const problem = titleProblem(title); if (problem) throw new Refusal(400, problem); }
+        const id = name || (title !== undefined ? identifierFrom(title, (x) => Boolean(this.#store.get(x))) : name);
+        return { name: id, title: title !== undefined && title !== id ? title : undefined };
+    }
+
+    create({ name: given, title: read, tool, memoryMb, workOnDisk }) {
+        const { name, title } = this.#naming({ name: given, title: read });
         if (!isConversationName(name)) throw new Refusal(400, 'A name is 1 to 32 lower-case letters, digits or hyphens; it starts with a letter and does not end with a hyphen.');
         const chosen = this.#tools.find((t) => t.id === tool);
         if (!chosen) throw new Refusal(400, 'Unknown tool.');
@@ -211,7 +222,7 @@ export class Conversations {
         }
         if (this.#store.get(name)) throw new Refusal(409, 'A conversation already has this name.');
         const now = new Date().toISOString();
-        const conversation = { name, tool, memoryMb: memory, diskGb: DISK_GB, fixed: FIXES, work: workOnDisk === true ? 'disk' : 'kept', phase: 'building', step: 'Starting the machine', createdAt: now, buildingSince: now, progress: buildProgress(now) };
+        const conversation = { name, ...(title ? { title } : {}), tool, memoryMb: memory, diskGb: DISK_GB, fixed: FIXES, work: workOnDisk === true ? 'disk' : 'kept', phase: 'building', step: 'Starting the machine', createdAt: now, buildingSince: now, progress: buildProgress(now) };
         this.#store.put(conversation);
         this.built = this.#build(name, chosen, memory);
         return conversation;
@@ -450,6 +461,28 @@ export class Conversations {
         return this.#store.get(name);
     }
 
+    /* THE NAME A PERSON READS, changed at any time; its identifier stays.
+       Kept only when it differs from the identifier: a conversation made
+       before free names is read by its identifier, and nothing is rewritten. */
+    setTitle(name, title) {
+        const c = this.#store.get(name);
+        if (!c) throw new Refusal(404, 'No such conversation.');
+        const problem = titleProblem(title);
+        if (problem) throw new Refusal(400, problem);
+        this.#store.patch(name, { title: title === name ? undefined : title });
+        return this.#store.get(name);
+    }
+
+    /* Hidden from the list, like a hidden file: it runs, keeps its rights,
+       and is still in Access; the list says how many are hidden. */
+    setHidden(name, on) {
+        const c = this.#store.get(name);
+        if (!c) throw new Refusal(404, 'No such conversation.');
+        if (typeof on !== 'boolean') throw new Refusal(400, 'Say true (hidden from the list) or false (shown).');
+        this.#store.patch(name, { hidden: on ? true : undefined });
+        return this.#store.get(name);
+    }
+
     /* What is dictated into its terminal starts with a microphone sign, once
        per message (true, the default for a tool that is an AI), or not. */
     setVoiceMark(name, on) {

package/server/names.mjs

@@ -8,3 +8,34 @@ const NAME = /^[a-z](?:[a-z0-9-]{0,30}[a-z0-9])?$/;
 export function isConversationName(value) {
     return typeof value === 'string' && value.length <= NAME_MAX && NAME.test(value);
 }
+
+/* THE NAME A PERSON READS is free: spaces, capitals, accents, emoji. It never
+   reaches a command line (the identifier above does), and the page shows it
+   as text only. Refused: what cannot be seen or reorders what is seen
+   (control characters, line breaks, zero-width and bidirectional marks), and
+   spaces at either end, which would make two names look alike. */
+export const TITLE_MAX = 60;
+const UNSEEN_RANGES = [[0x0, 0x1f], [0x7f, 0x9f], [0xad, 0xad], [0x61c, 0x61c], [0x180e, 0x180e], [0x200b, 0x200f], [0x2028, 0x202e], [0x2060, 0x206f], [0xfeff, 0xfeff], [0xfff9, 0xfffb]];
+const UNSEEN = new RegExp(`[${UNSEEN_RANGES.map(([a, b]) => `\\u{${a.toString(16)}}-\\u{${b.toString(16)}}`).join('')}]`, 'u');
+
+/* The reason it is refused, or '' when it may be a name. */
+export function titleProblem(value) {
+    if (typeof value !== 'string' || value === '') return 'Give a name.';
+    if (UNSEEN.test(value)) return 'A name has no line breaks and no invisible or direction characters.';
+    if (value.trim() !== value) return 'A name does not start or end with a space.';
+    if ([...value].length > TITLE_MAX) return `A name is ${TITLE_MAX} characters at most.`;
+    return '';
+}
+
+/* The identifier drawn from a name: "Location voiture" -> location-voiture;
+   one taken -> location-voiture-2. `taken(id)` says whether it is. */
+export function identifierFrom(title, taken = () => false) {
+    let base = String(title ?? '').normalize('NFKD').replace(/[̀-ͯ]/g, '').toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-').replace(/^[^a-z]+/, '').replace(/-+$/, '');
+    if (!base) base = 'conversation';
+    for (let n = 1; ; n += 1) {
+        const tail = n === 1 ? '' : `-${n}`;
+        const id = `${base.slice(0, NAME_MAX - tail.length).replace(/-+$/, '')}${tail}`;
+        if (isConversationName(id) && !taken(id)) return id;
+    }
+}

package/server/toolbox.mjs

@@ -89,7 +89,7 @@ export class Toolbox {
             const sha256 = createHash('sha256').update(bytes).digest('hex');
             const there = existsSync(`${dir}/${file}`) ? createHash('sha256').update(readFileSync(`${dir}/${file}`)).digest('hex') : '';
             if (there !== sha256) { writeFileSync(`${dir}/.${file}.new`, bytes); renameSync(`${dir}/.${file}.new`, `${dir}/${file}`); }
-            const version = /-(\d+\.\d+\.\d+)\.tgz$/.exec(file)?.[1] ?? '';
+            const version = /-(\d+\.\d+\.\d+(?:-[0-9A-Za-z.]+)?)\.tgz$/.exec(file)?.[1] ?? '';
             tools.push({ name: source.name, version, file, sha256, usage: source.usage(`${TOOLS_PATH}/${file}`) });
         }
         const kept = new Set([...tools.map((t) => t.file), 'index.json', ...(this.#notes ? [NOTES] : [])]);

package/web/app.js

@@ -650,8 +650,8 @@
     function enter(keepSheets = false) {
         if (welcoming) return;
         const c = conversations.find((x) => x.name === current);
-        $('name').textContent = current || 'No conversation';
-        document.title = current ? `${current} - Clavarium` : 'Clavarium';
+        $('name').textContent = (c ? shownName(c) : current) || 'No conversation';
+        document.title = current ? `${c ? shownName(c) : current} - Clavarium` : 'Clavarium';
         $('tool').hidden = !c; $('tool').textContent = c?.toolLabel ?? '';
         paintActions();
         $('copy-open').hidden = !current || (home && (!c || c.phase !== 'ready'));
@@ -731,10 +731,20 @@
         if (!r.ok) throw Object.assign(new Error(j.error || 'The request failed.'), { kind: j.kind, retry: j.retry === true });
         return j;
     };
+    /* The name a person reads; a conversation made before free names is read by its identifier. */
+    const shownName = (c) => (c && typeof c.title === 'string' && c.title ? c.title : c?.name ?? '');
+    /* It needs its owner: it asks or waits, its answerer asks, it failed, its machine is unwell. Said even when it is hidden. */
+    const needsYou = (c) => Boolean((c.talk && (c.talk.waiting > 0 || c.talk.state === 'waiting')) || c.answerer?.needs || c.phase === 'failed'
+        || (c.phase === 'ready' && !c.asleep && ['warn', 'bad'].includes(c.health?.level)));
+    /* Hidden conversations are shown on a click on "N hidden", for this page only. */
+    let showHidden = false;
     function paint() {
         const items = $('items');
         items.replaceChildren();
+        const hidden = conversations.filter((c) => c.hidden === true);
         for (const c of conversations) {
+            /* The one open stays in sight, hidden or not. */
+            if (c.hidden === true && !showHidden && c.name !== current) continue;
             const b = document.createElement('button');
             b.type = 'button'; b.className = 'item'; b.dataset.phase = c.phase;
             /* Ready, but its tool not there yet: it still reads as under way. */
@@ -742,7 +752,9 @@
             if (c.name === current) b.setAttribute('aria-current', 'true');
             const title = document.createElement('b');
             const dot = document.createElement('span'); dot.className = 'dot';
-            title.append(dot, c.name);
+            title.append(dot, shownName(c));
+            if (c.title) b.title = c.name;
+            if (c.hidden === true) b.dataset.hidden = 'true';
             const sub = document.createElement('small');
             /* Under way: the step the panel shows, in its words (the tool named once). */
             const under = c.progress && ['building', 'restarting', 'ready'].includes(c.phase) ? stepNow(c.progress, c.toolLabel) : '';
@@ -761,6 +773,14 @@
             b.addEventListener('click', () => select(c.name));
             items.append(b);
         }
+        const toggle = $('hidden-toggle');
+        toggle.hidden = DEVICE || hidden.length === 0;
+        toggle.textContent = showHidden ? `Hide ${hidden.length} hidden` : `${hidden.length} hidden`;
+        toggle.setAttribute('aria-expanded', String(showHidden));
+        const calling = hidden.some(needsYou);
+        toggle.dataset.needs = String(calling);
+        toggle.title = calling ? 'A hidden conversation needs you' : '';
+        if (calling && !showHidden) { const dot = document.createElement('span'); dot.className = 'needs-dot'; dot.setAttribute('aria-label', 'one needs you'); toggle.append(' ', dot); }
         $('empty').hidden = conversations.length > 0;
         paintDeviceCount();
     }
@@ -832,16 +852,21 @@
         $('create').hidden = false;
         focusField($('create-name'));
     }
+    $('hidden-toggle').addEventListener('click', () => { showHidden = !showHidden; paint(); });
     $('new').addEventListener('click', () => { void openCreate(); });
     $('create-cancel').addEventListener('click', () => { $('create').hidden = true; });
+    /* The identifier drawn from the name, as the server draws it (names.mjs), shown before it is made; the server decides. */
+    const identifierOf = (title) => String(title).normalize('NFKD').replace(/[\u0300-\u036f]/g, '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^[^a-z]+/, '').replace(/-+$/, '').slice(0, 32).replace(/-+$/, '') || 'conversation';
+    $('create-name').addEventListener('input', () => { $('create-id').placeholder = identifierOf($('create-name').value.trim()); });
     $('create').addEventListener('submit', async (event) => {
         event.preventDefault();
-        const name = $('create-name').value.trim();
+        const title = $('create-name').value.trim();
+        const id = $('create-id').value.trim();
         try {
-            await post(`${API}/conversations`, { name, tool: chosenTool, workOnDisk: $('create-disk').checked });
-            $('create').hidden = true; $('create-name').value = ''; $('create-disk').checked = false;
+            const made = await post(`${API}/conversations`, { title, ...(id ? { name: id } : {}), tool: chosenTool, workOnDisk: $('create-disk').checked });
+            $('create').hidden = true; $('create-name').value = ''; $('create-id').value = ''; $('create-disk').checked = false;
             await refresh();
-            select(name);
+            select(made.name);
         } catch (error) { $('create-error').textContent = error.message; $('create-error').hidden = false; }
     });
 
@@ -1380,7 +1405,7 @@
         const facts = $('general-facts'); facts.replaceChildren();
         const fact = (term, value) => { const dt = document.createElement('dt'); dt.textContent = term; const dd = document.createElement('dd'); dd.textContent = value; facts.append(dt, dd); };
         if (here) {
-            fact('Name', here.name);
+            fact('Identifier', here.name);
             fact('Tool', here.toolLabel ?? here.tool);
             if (here.createdAt) fact('Created', new Date(here.createdAt).toLocaleString());
             fact('Machine', `${sizeWords(here.memoryMb)} of memory, ${here.diskGb ? `${here.diskGb} GB` : 'an unknown size of'} disk`);
@@ -1740,6 +1765,9 @@
         if (DEVICE) { $('talk-box').hidden = true; $('voice-mark-box').hidden = true; return; }
         const here = conversations.find((x) => x.name === current);
         if (document.activeElement !== $('chat-name')) $('chat-name').value = here?.chatName ?? '';
+        if (document.activeElement !== $('title-name')) $('title-name').value = shownName(here);
+        $('title-box').hidden = $('hide-box').hidden = DEVICE || !here;
+        for (const b of $('hide-on').children) b.setAttribute('aria-pressed', String((b.dataset.on === 'true') === (here?.hidden === true)));
         $('voice-mark-box').hidden = !here?.ai;
         for (const b of $('voice-mark').children) b.setAttribute('aria-pressed', String((b.dataset.on === 'true') === (here?.voiceMark === true)));
         await readTalk();
@@ -1758,6 +1786,19 @@
             catch (error) { $('panel-error').textContent = error.message; $('panel-error').hidden = false; }
         });
     }
+    $('title-form').addEventListener('submit', async (event) => {
+        event.preventDefault();
+        $('panel-error').hidden = true;
+        try { await post(`${API}/conversations/${encodeURIComponent(current)}/title`, { title: $('title-name').value.trim() }); $('title-name').blur(); await refresh(); enter(true); }
+        catch (error) { $('panel-error').textContent = error.message; $('panel-error').hidden = false; }
+    });
+    for (const b of $('hide-on').children) {
+        b.addEventListener('click', async () => {
+            $('panel-error').hidden = true;
+            try { await post(`${API}/conversations/${encodeURIComponent(current)}/hidden`, { on: b.dataset.on === 'true' }); await refresh(); for (const x of $('hide-on').children) x.setAttribute('aria-pressed', String(x === b)); }
+            catch (error) { $('panel-error').textContent = error.message; $('panel-error').hidden = false; }
+        });
+    }
     $('chat-name-form').addEventListener('submit', async (event) => {
         event.preventDefault();
         $('panel-error').hidden = true;
@@ -2092,7 +2133,7 @@
                 }
                 for (const c of ready.filter((x) => x.name !== accessFor)) {
                     const line = document.createElement('div'); line.className = 'given-row'; line.dataset.conversation = c.name;
-                    const who = document.createElement('span'); who.textContent = c.name;
+                    const who = document.createElement('span'); who.textContent = shownName(c);
                     const options = kind === 'mailbox' ? [['none', 'Off'], ['read', 'Read']] : [['none', 'Off'], ['read', 'Read'], ['write', 'Write']];
                     line.append(who, modes(options, resource.attachments?.[c.name] ?? 'none', async (access) => { await attachTo(c.name, resource.name, access, 'assets-error'); await paintAssets(); }, `What ${c.name} may do with ${resource.name}`));
                     inside.append(line);
@@ -2247,7 +2288,7 @@
                 const inside = document.createElement('div'); inside.className = 'asset-inside';
                 for (const c of ready.filter((x) => x.name !== accessFor)) {
                     const line = document.createElement('div'); line.className = 'given-row'; line.dataset.conversation = c.name;
-                    const who = document.createElement('span'); who.textContent = c.name;
+                    const who = document.createElement('span'); who.textContent = shownName(c);
                     line.append(who, modes([['off', 'Off'], ['use', 'Use']], secret.conversations.includes(c.name) ? 'use' : 'off', async (value) => { await handTo(c.name, secret.name, value === 'use', 'assets-error'); await paintAssets(); }, `Whether the tool of ${c.name} is handed ${secret.name}`));
                     inside.append(line);
                 }

package/web/index.html

@@ -15,7 +15,12 @@
     <div class="top"><b>Conversations</b><button type="button" id="new" class="primary">+ New</button></div>
     <form id="create" hidden autocomplete="off">
       <label for="create-name">Name</label>
-      <input id="create-name" name="name" required maxlength="32" pattern="[a-z]([a-z0-9-]{0,30}[a-z0-9])?" title="Lower-case letters, digits and hyphens; starts with a letter, does not end with a hyphen" placeholder="website-redesign" spellcheck="false" autocapitalize="none">
+      <input id="create-name" name="name" required maxlength="60" placeholder="Website redesign" spellcheck="false">
+      <details class="advanced"><summary>Advanced options</summary>
+        <label for="create-id">Identifier</label>
+        <input id="create-id" maxlength="32" pattern="[a-z]([a-z0-9\-]{0,30}[a-z0-9])?" title="Lower-case letters, digits and hyphens; starts with a letter, does not end with a hyphen" placeholder="website-redesign" spellcheck="false" autocapitalize="none">
+        <p class="hint">Used for its machine, its folders, its address and what is given to it. Drawn from the name when empty; it cannot be changed later. The name can.</p>
+      </details>
       <span class="legend">What runs in it</span>
       <div id="create-tools" class="choices" role="radiogroup" aria-label="What runs in it"></div>
       <label class="check"><input type="checkbox" id="create-disk"> Work on the machine's own disk</label>
@@ -25,6 +30,8 @@
         <span class="hint">a new machine takes a few minutes</span></div>
     </form>
     <div id="items"></div>
+    <!-- Hidden conversations still run; this shows them, and says when one needs you. -->
+    <button type="button" id="hidden-toggle" class="inline" hidden aria-expanded="false"></button>
     <p id="empty" class="hint" hidden>No conversation yet. A conversation is a machine of its own with one tool running in it.</p>
     <!-- Shown only when this server is short of disk or memory: opens Settings, This server. -->
     <button type="button" id="server-gauge" hidden></button>
@@ -104,6 +111,13 @@
           <summary><span class="chapter-title">General</span><span class="chapter-about">What it is, and how you talk with it.</span></summary>
           <div class="chapter-body">
             <dl id="general-facts" class="facts"></dl>
+            <div id="title-box" hidden>
+            <form id="title-form" class="row" autocomplete="off"><label for="title-name">Name</label><input id="title-name" maxlength="60" spellcheck="false"><button type="submit">Save</button></form>
+            </div>
+            <div id="hide-box" hidden>
+            <div class="row"><span>In the list</span><div class="levels" id="hide-on" role="group" aria-label="Hidden from the list"><button type="button" data-on="false">Shown</button><button type="button" data-on="true">Hidden</button></div></div>
+            <p class="hint">Hidden, it runs as before, keeps what it was given and stays in Access; "hidden" at the bottom of the list shows it.</p>
+            </div>
             <!-- WHAT ITS TOOL IS TOLD ABOUT WHERE IT IS: the exact text, made by the
                  server from these settings; the owner's own lines; told again on a click. -->
             <div id="guide-box">

package/web/style.css

@@ -1010,3 +1010,10 @@ button.inline:hover { color: var(--brass); }
 #server-gauge [data-level="bad"] .gauge-bar > span { background: var(--danger); }
 #server-gauge .gauge-n { color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
 #server-gauge [data-level="ok"] .gauge-word { color: var(--ink2); }
+/* Hidden conversations: a quiet link at the bottom of the list; a dot when one of them needs you. */
+#hidden-toggle { display: block; margin: .5rem .75rem; color: var(--ink2); font-size: .8rem; }
+#hidden-toggle[hidden] { display: none; }
+#hidden-toggle .needs-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brass); vertical-align: middle; }
+.item[data-hidden="true"] { opacity: .7; }
+#create .advanced { margin: .25rem 0; }
+#create .advanced summary { cursor: pointer; color: var(--ink2); font-size: .8rem; }