clavarium-binder 0.1.2 → 0.1.3-next.2

package/docs/protocol.md

@@ -78,9 +78,17 @@ An agent at the limit is refused, and told the number.
     const k = keeper(storeDir, { sides: () => [{ dir, who }] });
     setInterval(() => k.pump(), 1000);      // answer the agents
     k.act(op, args, person);                // a person's change: { ok, text, data }
-    k.due();                                // records whose due time came: tell their owners
+    k.due();                                // records whose due time came: tell their owners (below)
     k.store.onChange((line) => ...);        // every change, as the log says it
 
+What is due: `k.due()` gives `[{ record, list }]`, each record whose due time
+came -- a date alone at 09:00, a date and time at that time, by the keeper's
+clock (`now`) in its local time -- not archived, in a list not archived, in a
+state not done. Each is given once per due time: the store keeps it
+(`told`, in state.json), so a restart does not give it again; a due date
+changed gives it again when the new time comes. Call it every minute or so,
+and tell its `owners` as the application does.
+
 And the screen: `mount(element, { call, words, lang, people, picture, openAttached })`
 from `clavarium-binder/ui`, with `ui/binder-ui.css` and `ui/texts/*.json`.
 It gives back `refresh()`, `destroy()`, and `open(id)`: one record shown

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clavarium-binder",
-  "version": "0.1.2",
+  "version": "0.1.3-next.2",
   "description": "Clavarium Binder: lists of records kept together by people and AI agents, each with its id (a command and an MCP server for agents, a keeper and a screen for the application). No dependency.",
   "license": "MIT",
   "homepage": "https://github.com/clavarium/clavarium-binder#readme",

package/server/binder.mjs

@@ -23,7 +23,7 @@ import { fileURLToPath } from 'node:url';
 import { randomUUID } from 'node:crypto';
 import { createInterface } from 'node:readline';
 
-export const VERSION = '0.1.2';
+export const VERSION = '0.1.3-next.2';
 export const FOLDER = '.binder';
 /* How long an ask waits for its answer. The keeper answers within a second or two. */
 export const WAIT_MS = 20_000;

package/ui/binder-ui.css

@@ -37,7 +37,8 @@
 .binder-owners { display: flex; gap: .35rem; flex-wrap: wrap; }
 .binder-pop { position: relative; }
 .binder-dots { font-weight: 700; letter-spacing: .05em; padding: .4em .75em; line-height: 1.15; }
-.binder-menu-end { left: auto; right: 0; }
+/* Opened from the end of a row: it opens leftwards (the rule after .binder-menu once put it back at left: 0, past the screen). */
+.binder-menu.binder-menu-end { left: auto; right: 0; }
 .binder-primary { background: var(--binder-action); color: var(--binder-on-action) !important; border: 1px solid var(--binder-action); border-radius: 8px; padding: .45em 1em; font-weight: 600; }
 .binder-ghost { background: var(--binder-panel); border: 1px solid var(--binder-line); border-radius: 8px; padding: .45em .9em; }
 .binder-danger { background: var(--binder-danger); color: var(--binder-bg) !important; border: 0; border-radius: 8px; padding: .45em .9em; font-weight: 600; }
@@ -67,7 +68,7 @@
 .binder-pill[data-gate] { color: var(--binder-ask); border-color: var(--binder-ask); }
 
 /* As columns, one per state. */
-.binder-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(14rem, 1fr); gap: .8rem; overflow-x: auto; min-height: 0; padding-bottom: .3rem; }
+.binder-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(11.5rem, 1fr); gap: .8rem; overflow-x: auto; min-height: 0; padding-bottom: .3rem; }
 .binder-col { background: var(--binder-panel); border: 1px solid var(--binder-line); border-radius: var(--binder-radius); padding: .6rem; display: flex; flex-direction: column; gap: .5rem; }
 .binder-col h3 { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--binder-dim); display: flex; justify-content: space-between; }
 .binder-card { background: var(--binder-bg); border: 1px solid var(--binder-line); border-radius: 9px; padding: .6rem .7rem; display: flex; flex-direction: column; gap: .3rem; cursor: pointer; }
@@ -106,7 +107,7 @@
 .binder-state[data-done] { background: color-mix(in srgb, var(--binder-ok) 16%, transparent); border-color: transparent; }
 .binder-state:disabled { opacity: 1; }
 .binder-caret { font-size: .8em; color: var(--binder-dim); }
-.binder-menu { position: absolute; z-index: 5; top: calc(100% + .35rem); left: 0; min-width: 12rem; display: flex; flex-direction: column; padding: .3rem; background: var(--binder-bg);
+.binder-menu { position: absolute; z-index: 5; top: calc(100% + .35rem); left: 0; min-width: 12rem; max-width: calc(100vw - 2rem); display: flex; flex-direction: column; padding: .3rem; background: var(--binder-bg);
   border: 1px solid var(--binder-line); border-radius: 12px; box-shadow: 0 8px 28px rgb(0 0 0 / .18); }
 .binder-menu button { border: 0; background: transparent; text-align: left; padding: .6em .7em; border-radius: 8px; display: flex; gap: .5em; align-items: center; }
 .binder-menu button:hover, .binder-menu button:focus-visible { background: var(--binder-panel); outline: none; }
@@ -177,3 +178,10 @@ button.binder-who:hover span:not(.binder-dot) { text-decoration: underline; text
   .binder-seg button { padding: .4em .6em; }
   .binder-bar .binder-primary { padding: .45em .75em; }
 }
+
+/* A description's boxes: ticked here, kept in its text. */
+.binder-rich ul.binder-tasks { list-style: none; padding-left: 0; }
+.binder-task label { display: flex; gap: .55em; align-items: flex-start; cursor: pointer; }
+.binder-task input { width: 1.15em; height: 1.15em; margin: .2em 0 0; flex: none; accent-color: var(--binder-ok); }
+.binder-task input:disabled { cursor: default; }
+.binder-task[data-done="true"] > label > span { color: var(--binder-dim); text-decoration: line-through; }

package/ui/binder-ui.js

@@ -92,9 +92,10 @@ export function stateShown(l, r) {
 
 /* A DESCRIPTION, READ: a few lines of Markdown-ish text, as blocks a screen can
  * draw element by element. Paragraphs (a blank line between), lists ("- " or
- * "* "), **bold**, links ([text](https://...) or a bare http(s) address).
+ * "* "), a list item that starts with [ ] or [x] (a box, ticked or not), **bold**,
+ * links ([text](https://...) or a bare http(s) address).
  * Nothing else is understood: whatever else it holds stays text.
- *   [{ type: 'p', lines: [parts] }, { type: 'list', items: [parts] }]
+ *   [{ type: 'p', lines: [parts] }, { type: 'list', items: [parts], checks: [null | { on, line }] }]
  *   parts: [{ text }, { bold }, { link, text }]
  */
 const INLINE = /\*\*([^*\n]+?)\*\*|\[([^\]\n]{1,300})\]\((https?:\/\/[^\s()<>]+)\)|(https?:\/\/[^\s<>"]+)/gi;
@@ -119,13 +120,15 @@ export function inline(text) {
 export function blocks(text) {
     const out = [];
     let para = null; let list = null;
-    for (const raw of String(text ?? '').replace(/\r/g, '').split('\n')) {
+    for (const [at, raw] of String(text ?? '').replace(/\r/g, '').split('\n').entries()) {
         const line = raw.trim();
         const item = /^[-*]\s+(.*)$/.exec(line);
         if (!line) { para = null; list = null; } else if (item) {
             para = null;
-            if (!list) out.push(list = { type: 'list', items: [] });
-            list.items.push(inline(item[1]));
+            if (!list) out.push(list = { type: 'list', items: [], checks: [] });
+            const box = /^\[([ xX])\]\s+(.*)$/.exec(item[1]);
+            list.items.push(inline(box ? box[2] : item[1]));
+            list.checks.push(box ? { on: box[1] !== ' ', line: at } : null);
         } else {
             list = null;
             if (!para) out.push(para = { type: 'p', lines: [] });
@@ -150,12 +153,25 @@ function h(tag, props = {}, ...kids) {
     return el;
 }
 
-/* A description drawn: text nodes, <strong>, and <a> whose address starts with http(s)://. */
-export function rich(text) {
+/* A description's box ticked or unticked: the same text, that one line changed. */
+export function toggled(text, line) {
+    const lines = String(text ?? '').replace(/\r/g, '').split('\n');
+    lines[line] = lines[line].replace(/^(\s*[-*]\s+)\[([ xX])\]/, (_, lead, mark) => `${lead}[${mark === ' ' ? 'x' : ' '}]`);
+    return lines.join('\n');
+}
+/* A description drawn: text nodes, <strong>, and <a> whose address starts with http(s)://.
+   `tick(text)`: given, its boxes can be ticked (the whole new text, to save); else they are only shown. */
+export function rich(text, tick = null) {
     const parts = (ps) => ps.map((x) => (x.bold !== undefined ? h('strong', {}, x.bold)
         : x.link && /^https?:\/\//i.test(x.link) ? h('a', { href: x.link, target: '_blank', rel: 'noopener noreferrer' }, x.text) : x.text ?? ''));
+    const item = (it, check) => {
+        if (!check) return h('li', {}, parts(it));
+        const box = h('input', { type: 'checkbox', class: 'binder-check-item', ...(check.on ? { checked: true } : {}), ...(tick ? {} : { disabled: true }),
+            onchange: () => tick?.(toggled(text, check.line)) });
+        return h('li', { class: 'binder-task', 'data-done': check.on ? 'true' : null }, h('label', {}, box, h('span', {}, parts(it))));
+    };
     return h('div', { class: 'binder-rich' }, blocks(text).map((b) => (b.type === 'list'
-        ? h('ul', {}, b.items.map((it) => h('li', {}, parts(it))))
+        ? h('ul', b.checks.some(Boolean) ? { class: 'binder-tasks' } : {}, b.items.map((it, i) => item(it, b.checks[i])))
         : h('p', {}, b.lines.flatMap((l, i) => (i ? [h('br'), ...parts(l)] : parts(l)))))));
 }
 
@@ -326,7 +342,7 @@ export function mount(root, { call, words = {}, lang = 'en', people = () => [],
                 h('button', { type: 'button', class: 'binder-primary binder-small', 'data-act': 'save-description', onclick: () => { delete ui.draft.description; done(ask('edit', { id: r.id, description: text.value })); } }, w('save')),
                 h('button', { type: 'button', class: 'binder-text-btn', onclick: () => { delete ui.draft.description; set(null); } }, w('cancel'))));
         } else {
-            about = r.description ? h('div', { class: 'binder-desc' }, rich(r.description),
+            about = r.description ? h('div', { class: 'binder-desc' }, rich(r.description, can ? (text) => done(ask('edit', { id: r.id, description: text })) : null),
                 can ? h('button', { type: 'button', class: 'binder-text-btn', 'data-act': 'edit-description', onclick: () => set('description') }, w('edit')) : null) : null;
         }