@tiagojct/subsub 0.21.0 → 0.23.0

package/src/web.ts

@@ -14,20 +14,15 @@
  *   stops by itself, so a shortcut can start it without a terminal.
  */
 
-import { spawn, type ChildProcess } from "node:child_process";
 import { randomBytes, timingSafeEqual } from "node:crypto";
 import { createReadStream, existsSync, mkdirSync, readdirSync, readFileSync, renameSync, statSync, writeFileSync, appendFileSync } from "node:fs";
 import { createServer, type IncomingMessage, type Server, type ServerResponse } from "node:http";
 import { homedir } from "node:os";
 import { basename, dirname, extname, join, normalize, relative, resolve, sep } from "node:path";
-import { StringDecoder } from "node:string_decoder";
 import { agentDirFor, chooseCwd, PACKAGE_DIR, packageVersion } from "./cli.ts";
-import { configPath, expand, loadConfig, RECOMMENDED_MODELS, readConfigFile, saveConfig, type SubsubConfig, uiLanguage, withStarbuck } from "./config.ts";
+import { configPath, loadConfig, RECOMMENDED_MODELS, readConfigFile, saveConfig, type SubsubConfig, uiLanguage, withStarbuck } from "./config.ts";
 import { TESTED_MODELS } from "./init.ts";
 import { KEY_PROVIDERS, saveApiKey } from "./keys.ts";
-import { NOTE_DIRS, obsidianRoot, SETTINGS_DIR } from "./layout.ts";
-import { field, frontMatter } from "./notes.ts";
-import { realish, within } from "./paths.ts";
 
 // ---------------------------------------------------------------- options
 
@@ -68,130 +63,10 @@ export { KEY_PROVIDERS, saveApiKey } from "./keys.ts";
 import { allowedFile, listNotes, openExternal, openFile, OPENABLE, wikilinkTarget } from "./files.ts";
 export { allowedFile, listNotes, openExternal, OPENABLE, wikilinkTarget };
 
-// ---------------------------------------------------------------- pi in RPC mode
-
-type Listener = (ev: any) => void;
-
-/** pi as a child process in RPC mode. Strict JSONL: records end at LF only. */
-export class Agent {
-	proc?: ChildProcess;
-	private decoder = new StringDecoder("utf8");
-	private buf = "";
-	private n = 0;
-	private pending = new Map<string, { resolve: (v: any) => void; reject: (e: Error) => void; timer: NodeJS.Timeout }>();
-	private listeners = new Set<Listener>();
-	stderr = "";
-	onExit?: (code: number | null) => void;
-
-	private readonly command: string;
-	private readonly args: string[];
-	private readonly cwd: string;
-	private readonly env: NodeJS.ProcessEnv;
-
-	constructor(command: string, args: string[], cwd: string, env: NodeJS.ProcessEnv) {
-		this.command = command;
-		this.args = args;
-		this.cwd = cwd;
-		this.env = env;
-	}
-
-	start(extra: string[] = []): void {
-		this.buf = "";
-		this.decoder = new StringDecoder("utf8");
-		const proc = spawn(this.command, [...this.args, ...extra], { cwd: this.cwd, env: this.env, stdio: ["pipe", "pipe", "pipe"], windowsHide: true });
-		this.proc = proc;
-		proc.stdout!.on("data", (chunk: Buffer) => this.feed(this.decoder.write(chunk)));
-		proc.stderr!.on("data", (d: Buffer) => {
-			this.stderr = (this.stderr + d.toString()).slice(-20_000);
-		});
-		proc.once("exit", (code) => {
-			if (this.proc !== proc) return;
-			this.proc = undefined;
-			for (const p of this.pending.values()) {
-				clearTimeout(p.timer);
-				p.reject(new Error(`pi stopped (code ${code}). ${this.stderr.slice(-500)}`));
-			}
-			this.pending.clear();
-			this.onExit?.(code);
-		});
-	}
-
-	private feed(text: string): void {
-		this.buf += text;
-		let i: number;
-		while ((i = this.buf.indexOf("\n")) >= 0) {
-			const line = this.buf.slice(0, i).replace(/\r$/, "");
-			this.buf = this.buf.slice(i + 1);
-			if (!line.trim()) continue;
-			let rec: any;
-			try {
-				rec = JSON.parse(line);
-			} catch {
-				continue;
-			}
-			if (rec.type === "response" && typeof rec.id === "string" && this.pending.has(rec.id)) {
-				const p = this.pending.get(rec.id)!;
-				this.pending.delete(rec.id);
-				clearTimeout(p.timer);
-				if (rec.success === false) p.reject(new Error(rec.error ?? `${rec.command} failed`));
-				else p.resolve(rec.data);
-				continue;
-			}
-			for (const l of this.listeners) l(rec);
-		}
-	}
-
-	on(l: Listener): () => void {
-		this.listeners.add(l);
-		return () => this.listeners.delete(l);
-	}
-
-	write(rec: unknown): void {
-		const stdin = this.proc?.stdin;
-		if (!stdin || !stdin.writable) throw new Error("pi is not running");
-		stdin.write(`${JSON.stringify(rec)}\n`);
-	}
-
-	request<T = any>(cmd: Record<string, unknown>, timeoutMs = 30_000): Promise<T> {
-		const id = `w${++this.n}`;
-		return new Promise<T>((resolvePromise, reject) => {
-			const timer = setTimeout(() => {
-				this.pending.delete(id);
-				reject(new Error(`pi did not answer ${String(cmd.type)} in time`));
-			}, timeoutMs);
-			this.pending.set(id, { resolve: resolvePromise, reject, timer });
-			try {
-				this.write({ ...cmd, id });
-			} catch (err) {
-				clearTimeout(timer);
-				this.pending.delete(id);
-				reject(err as Error);
-			}
-		});
-	}
+// ---------------------------------------------------------------- pi in RPC mode (src/rpc.ts)
 
-	async stop(): Promise<void> {
-		const proc = this.proc;
-		if (!proc) return;
-		this.proc = undefined;
-		for (const p of this.pending.values()) {
-			clearTimeout(p.timer);
-			p.reject(new Error("pi was stopped"));
-		}
-		this.pending.clear();
-		await new Promise<void>((done) => {
-			const t = setTimeout(() => {
-				proc.kill("SIGKILL");
-				done();
-			}, 3000);
-			proc.once("exit", () => {
-				clearTimeout(t);
-				done();
-			});
-			proc.kill();
-		});
-	}
-}
+import { Agent, findLibrary, isDialog, Side, withHints } from "./rpc.ts";
+export { Agent };
 
 // ---------------------------------------------------------------- helpers
 
@@ -223,14 +98,6 @@ const CSP = [
 	"frame-ancestors 'none'",
 ].join("; ");
 
-function readText(path: string): string {
-	try {
-		return readFileSync(path, "utf8");
-	} catch {
-		return "";
-	}
-}
-
 function same(a: string, b: string): boolean {
 	const x = Buffer.from(a);
 	const y = Buffer.from(b);
@@ -319,7 +186,7 @@ export async function startWeb(opts: WebOptions, env: NodeJS.ProcessEnv = proces
 	const clients = new Set<ServerResponse>();
 	const dialogs = new Map<string, any>();
 	let subsubState: unknown = null;
-	let lastFind: { q?: string } | null = null;
+	const side = new Side();
 	let busy = false;
 	let lastSeen = Date.now();
 	let restarting = false;
@@ -344,22 +211,12 @@ export async function startWeb(opts: WebOptions, env: NodeJS.ProcessEnv = proces
 
 	agent.on((ev) => {
 		if (ev.type === "extension_ui_request") {
-			if (["select", "confirm", "input", "editor"].includes(ev.method)) {
+			if (isDialog(ev)) {
 				dialogs.set(ev.id, ev);
 				broadcast(ev);
-			} else if (ev.method === "setStatus" && ev.statusKey === "subsub.web") {
-				try {
-					subsubState = ev.statusText ? JSON.parse(ev.statusText) : null;
-				} catch {
-					subsubState = null;
-				}
+			} else if (side.take(ev) === "state") {
+				subsubState = side.state;
 				broadcast({ type: "subsub_state", state: subsubState });
-			} else if (ev.method === "setStatus" && ev.statusKey === "subsub.find") {
-				try {
-					lastFind = ev.statusText ? JSON.parse(ev.statusText) : null;
-				} catch {
-					lastFind = null;
-				}
 			} else if (ev.method === "notify") {
 				broadcast(ev);
 			}
@@ -401,13 +258,7 @@ export async function startWeb(opts: WebOptions, env: NodeJS.ProcessEnv = proces
 			out.session = await agent.request({ type: "get_state" });
 			lastSession = (out.session as { sessionFile?: string }).sessionFile ?? lastSession;
 			out.messages = ((await agent.request({ type: "get_messages" })) as { messages: unknown[] }).messages;
-			const commands = ((await agent.request({ type: "get_commands" })) as { commands: Array<Record<string, any>> }).commands;
-			// RPC has no argument hints: read them from the prompt files.
-			out.commands = commands.map((c) => {
-				const front = c.source === "prompt" && c.sourceInfo?.path ? frontMatter(readText(c.sourceInfo.path)) : undefined;
-				const hint = front && field(front, "argument-hint");
-				return hint ? { ...c, hint } : c;
-			});
+			out.commands = withHints(((await agent.request({ type: "get_commands" })) as { commands: Array<Record<string, any>> }).commands);
 		} catch (err) {
 			out.error = (err as Error).message;
 		}
@@ -658,8 +509,7 @@ export async function startWeb(opts: WebOptions, env: NodeJS.ProcessEnv = proces
 				case "GET /api/library": {
 					const q = (url.searchParams.get("q") ?? "").replace(/\s+/g, " ").trim().slice(0, 200);
 					if (!q) return send(res, 200, { q, items: [] });
-					await agent.request({ type: "prompt", message: `/subsub-find ${q}` });
-					return send(res, 200, lastFind?.q === q ? lastFind : { q, items: [] });
+					return send(res, 200, await findLibrary(agent, side, q));
 				}
 				case "POST /api/session/name": {
 					const body = await readJson(req);

package/web/app.css

@@ -115,9 +115,13 @@ body {
 }
 
 button, input, select, textarea { font: inherit; color: inherit; }
-a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
+a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
 a:hover { text-decoration-thickness: 2px; }
 svg { flex: none; }
+/* Scrollbars as fine rules, not as grey bars. */
+* { scrollbar-width: thin; }
+/* The name breaks nowhere, least of all at its hyphen. */
+.nobr { white-space: nowrap; }
 
 .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
 [hidden] { display: none !important; }
@@ -164,20 +168,20 @@ button:disabled { opacity: 0.45; cursor: default; }
 .icon-btn:hover { color: var(--text); background: var(--surface); }
 .icon-btn[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
 
-.model-btn.needs { color: var(--warn); border-color: var(--warn); font-family: var(--sans); }
+/* Top bar text buttons, as the website's navigation: muted, inked and underlined on hover or when open. */
 .chip-btn {
-	max-width: 16rem;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	font-family: var(--mono);
-	font-size: 0.78rem;
+	flex: none;
+	padding: 0.35rem 0.5rem;
+	font-size: 0.9rem;
 	color: var(--muted);
-	border-color: var(--rule);
-	background: var(--raised);
-	padding: 0.35rem 0.65rem;
+	white-space: nowrap;
+	text-underline-offset: 0.35em;
+	text-decoration-thickness: 1px;
 }
-.chip-btn:hover { color: var(--text); border-color: var(--rule-strong); }
+.chip-btn:hover { color: var(--text); text-decoration-line: underline; }
+.chip-btn.model-btn { flex: 0 1 auto; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); font-size: 0.8rem; }
+/* No model yet: pending, so gamboge and dashed. */
+.model-btn.needs { color: var(--warn); border-color: var(--warn); border-style: dashed; font-family: var(--sans); }
 
 select {
 	appearance: none;
@@ -319,7 +323,7 @@ select:hover { border-color: var(--rule-strong); }
 .new-btn:hover { border-color: var(--text); }
 .new-btn svg { width: 16px; height: 16px; color: var(--accent); }
 
-.actions { display: flex; flex-direction: column; }
+.actions, .actions > div { display: flex; flex-direction: column; }
 .actions button {
 	text-align: left;
 	padding: 0.32rem 0.5rem;
@@ -329,9 +333,35 @@ select:hover { border-color: var(--rule-strong); }
 }
 .actions button:hover { background: var(--bg); }
 .actions .group { margin: 0.6rem 0 0.15rem; padding: 0 0.5rem; font-family: var(--serif); font-style: italic; font-size: 0.86rem; color: var(--muted); }
-.actions .group:first-child { margin-top: 0; }
+.actions > :first-child .group { margin-top: 0; }
+
+/* Sections and action groups fold at their heading; a fine chevron points down when open, right when folded. */
+.side .fold {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.55em;
+	padding: 0;
+	border: 0;
+	border-radius: 0;
+	font-size: inherit;
+	letter-spacing: inherit;
+	color: inherit;
+	text-align: left;
+}
+.side .fold:hover { color: var(--text); background: none; }
+.side .fold::after {
+	content: "";
+	width: 0.34em;
+	height: 0.34em;
+	border-right: 1px solid currentColor;
+	border-bottom: 1px solid currentColor;
+	transform: translateY(-0.15em) rotate(45deg);
+}
+.side .fold[aria-expanded="false"]::after { transform: rotate(-45deg); }
+[data-fold].folded > :not(h2, .side-subhead, .group) { display: none; }
 
 .side .grow { flex: 1; display: flex; flex-direction: column; min-height: 8rem; }
+.side .grow.folded { flex: none; min-height: 0; }
 .side-subhead { display: flex; justify-content: space-between; align-items: baseline; padding-right: 0.3rem; }
 
 .search {
@@ -423,7 +453,6 @@ body.layout-full { --measure: 72rem; }
 	padding: 0.6rem 0.6rem 0.6rem 0.9rem;
 	border: 1px solid var(--rule);
 	border-top: 2px solid var(--warn);
-	border-radius: var(--radius);
 	background: var(--raised);
 	display: flex;
 	gap: 0.75rem;
@@ -454,14 +483,16 @@ body.layout-full { --measure: 72rem; }
 	overflow-wrap: anywhere;
 	font-size: 0.95rem;
 }
+/* A command is code: it is set in the mono, as the website's plate draws it. */
+.msg.user .bubble.cmd { font-family: var(--mono); font-size: 0.86rem; }
 .msg.user details.bubble summary { cursor: pointer; color: var(--muted); }
 .msg.user details.bubble[open] summary { margin-bottom: 0.4rem; }
 
 /* Replies read as text, in the serif. */
 .md {
 	font-family: var(--serif);
-	font-size: 1.02rem;
-	line-height: 1.68;
+	font-size: 1.0625rem;
+	line-height: 1.65;
 	font-variant-numeric: oldstyle-nums proportional-nums;
 	overflow-wrap: anywhere;
 }
@@ -470,16 +501,20 @@ body.layout-full { --measure: 72rem; }
 .md p, .md ul, .md ol { margin: 0.7rem 0; }
 .md li { margin: 0.2rem 0; }
 .md li::marker { color: var(--faint); }
+/* Numbered steps as on the website: the number in the accent, lining figures. */
+.md ol > li::marker { color: var(--accent); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
+/* Headings as on the website: roman, weight 500 for the large ones, a fine rule above a section. */
 .md h1, .md h2, .md h3, .md h4 {
 	font-family: var(--serif);
-	line-height: 1.3;
-	margin: 1.6rem 0 0.5rem;
+	line-height: 1.25;
+	margin: 1.8rem 0 0.6rem;
 	font-weight: 600;
+	text-wrap: balance;
 }
-.md h1 { font-size: 1.3rem; }
-.md h2 { font-size: 1.12rem; }
-.md h3 { font-size: 1rem; }
-.md h4 { font-size: 0.92rem; color: var(--muted); }
+.md h1 { font-size: 1.5rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.012em; }
+.md h2 { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.008em; padding-top: 0.5rem; border-top: 1px solid var(--rule-strong); }
+.md h3 { font-size: 1.04rem; }
+.md h4 { font-size: 0.95rem; color: var(--muted); }
 .md strong { font-weight: 600; }
 .md hr { border: 0; border-top: 1px solid var(--rule); margin: 1.5rem 0; }
 .msg.assistant + .msg.assistant { margin-top: 0.9rem; }
@@ -568,7 +603,7 @@ body.layout-full { --measure: 72rem; }
 
 .msg-actions { display: flex; gap: 0.25rem; margin-top: 0.4rem; opacity: 0; transition: opacity 0.12s ease; }
 .msg.assistant:hover .msg-actions, .msg-actions:focus-within { opacity: 1; }
-.msg-action-btn { font-size: 0.75rem; padding: 0.15rem 0.45rem; color: var(--faint); }
+.msg-action-btn { font-family: var(--sans); font-size: 0.75rem; padding: 0.15rem 0.45rem; color: var(--faint); }
 .msg-action-btn:hover { color: var(--text); background: var(--surface); }
 .msg-action-btn.copied { color: var(--add); }
 .table-actions { display: flex; justify-content: flex-end; margin: -0.35rem 0 0.9rem; }
@@ -633,7 +668,6 @@ body.layout-full { --measure: 72rem; }
 .note {
 	margin-top: 1rem;
 	padding: 0.6rem 0.9rem;
-	border-radius: var(--radius);
 	background: var(--surface);
 	border: 1px solid var(--rule);
 	font-size: 0.88rem;
@@ -659,44 +693,48 @@ body.layout-full { --measure: 72rem; }
 	gap: 0.55rem;
 	align-items: center;
 }
+/* Working is drawn by line, as in the terminal: dotted, dashed, solid. Without motion it stays dashed: pending. */
 .working::before {
 	content: "";
 	width: 28px;
-	height: 3px;
-	border-radius: 2px;
-	background: linear-gradient(90deg, var(--accent) 0 40%, var(--rule) 40% 100%);
-	background-size: 250% 100%;
-	animation: sweep 1.3s ease-in-out infinite alternate;
+	border-top: 2px dashed var(--accent);
+	animation: lines 1.5s steps(1, end) infinite;
 }
-@keyframes sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
+@keyframes lines { 0% { border-top-style: dotted; } 33% { border-top-style: dashed; } 67% { border-top-style: solid; } }
 @keyframes pulse { 50% { opacity: 0.3; } }
 
 /* Empty conversation. */
 .empty { padding-top: 11vh; }
-.empty .kicker {
+/* The running head of the website's plates: the name, an italic middle, the mode in its colour. */
+.empty .runhead {
 	display: flex;
 	justify-content: space-between;
-	margin: 0 0 1.5rem;
-	padding-bottom: 0.3rem;
+	align-items: baseline;
+	gap: 0.5rem 1.5rem;
+	margin: 0 0 1.75rem;
+	padding-bottom: 0.35rem;
 	border-bottom: 1px solid var(--text);
 	font-family: var(--serif);
-	font-size: 1rem;
+	font-size: 1.02rem;
+	line-height: 1.3;
 	font-variant-caps: all-small-caps;
 	letter-spacing: 0.08em;
-	color: var(--accent);
+	color: var(--muted);
 }
-.empty .kicker::before { content: "Sub-Sub"; color: var(--muted); order: -1; }
+.empty .runhead .mid { font-style: italic; font-variant-caps: normal; letter-spacing: 0; text-align: center; }
+.empty .runhead .mode { color: var(--accent); }
 .empty h1 {
 	font-family: var(--serif);
 	font-weight: 500;
-	font-size: clamp(1.6rem, 3.2vw, 2.15rem);
-	line-height: 1.2;
-	letter-spacing: -0.015em;
-	margin: 0 0 0.6rem;
+	font-size: clamp(2rem, 3.6vw, 2.75rem);
+	line-height: 1.06;
+	letter-spacing: -0.018em;
+	margin: 0 0 0.9rem;
+	text-wrap: balance;
 }
-.empty .lede { color: var(--muted); max-width: 34rem; margin: 0 0 1.75rem; }
+.empty .lede { font-family: var(--serif); font-size: 1.08rem; line-height: 1.55; color: var(--muted); max-width: 36rem; margin: 0 0 2rem; text-wrap: pretty; }
 /* Suggestions: a short list of lines to start from, not a row of cards. */
-.chips { display: grid; max-width: 34rem; border-bottom: 1px solid var(--rule-strong); }
+.chips { display: grid; max-width: 36rem; border-bottom: 1px solid var(--rule-strong); }
 .chips button {
 	text-align: left;
 	border: 0;
@@ -792,7 +830,7 @@ body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0;
 }
 .modal-kicker::after { content: "Sub-Sub"; color: var(--muted); }
 .modal-kicker:empty { display: none; }
-.modal h2 { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin: 0 0 0.3rem; overflow-wrap: anywhere; }
+.modal h2 { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.35rem; overflow-wrap: anywhere; }
 .modal h3 { font-family: var(--serif); font-size: 0.98rem; font-weight: 400; font-variant-caps: all-small-caps; letter-spacing: 0.08em; color: var(--muted); margin: 1.4rem 0 0.5rem; }
 .modal .hint { color: var(--muted); margin: 0 0 1rem; font-size: 0.88rem; }
 
@@ -888,8 +926,7 @@ body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0;
 
 /* ---------------------------------------------------------------- library search and notes */
 
-#notes-btn { font-family: var(--sans); }
-#notes-btn[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
+#notes-btn[aria-expanded="true"] { color: var(--text); text-decoration-line: underline; }
 
 .items { list-style: none; margin: 0; padding: 0; max-height: 18rem; overflow-y: auto; }
 .items:empty { display: none; }
@@ -910,11 +947,12 @@ body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0;
 .session-tools button { width: auto; padding: 0.1rem 0.35rem; font-size: 0.7rem; color: var(--muted); }
 .session-tools button:hover { color: var(--text); background: var(--bg); }
 
+/* A note is a page: the lighter plate field, as on the website. */
 .note-pane {
 	grid-row: 2;
 	grid-column: 3;
-	border-left: 1px solid var(--rule);
-	background: var(--surface);
+	border-left: 1px solid var(--rule-strong);
+	background: var(--raised);
 	display: flex;
 	flex-direction: column;
 	min-height: 0;
@@ -923,7 +961,7 @@ body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0;
 .note-pane[hidden] { display: none; }
 .note-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--rule); }
 .note-name { flex: 1; min-width: 0; font-family: var(--mono); font-size: 0.8rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.note-pane > .search { margin: 0.6rem 0.9rem 0; width: auto; }
+.note-pane > .search { margin: 0.6rem 0.9rem 0; width: auto; background: var(--bg); }
 .note-body { flex: 1; overflow-y: auto; padding: 0.9rem 1.1rem 1.5rem; }
 .note-body .front { font-size: 0.74rem; color: var(--muted); margin: 0 0 1rem; }
 /* What a note was written from, drawn by line: solid for the full text, dashed for the abstract,
@@ -940,11 +978,25 @@ body > p.empty { text-align: center; color: var(--muted); padding: 30vh 1rem 0;
 #note-read[aria-pressed="true"] { color: var(--accent); text-decoration: underline; }
 .note-body .front summary { cursor: pointer; }
 .note-body .front pre { background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.5rem 0.7rem; margin: 0.4rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
-.note-list { list-style: none; margin: 0; padding: 0; }
-.note-list button { width: 100%; text-align: left; padding: 0.4rem 0.5rem; border-radius: 0; display: grid; gap: 0.1rem; }
+/* The notes, one folder per section under a small-capitals head, rows ruled as in a table. */
+.note-list section + section { margin-top: 1.4rem; }
+.note-list h3 {
+	margin: 0;
+	padding: 0 0.5rem 0.25rem;
+	border-bottom: 1px solid var(--text);
+	font-family: var(--serif);
+	font-size: 1rem;
+	font-weight: 400;
+	font-variant-caps: all-small-caps;
+	letter-spacing: 0.08em;
+	color: var(--muted);
+}
+.note-list ul { list-style: none; margin: 0; padding: 0; }
+.note-list li + li { border-top: 1px solid var(--rule); }
+.note-list button { width: 100%; text-align: left; padding: 0.5rem; border-radius: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
 .note-list button:hover { background: var(--bg); }
-.note-list .rel { font-size: 0.84rem; overflow-wrap: anywhere; }
-.note-list .when { font-size: 0.72rem; color: var(--faint); }
+.note-list .rel { min-width: 0; font-size: 0.9rem; overflow-wrap: anywhere; }
+.note-list .when { flex: none; font-size: 0.74rem; color: var(--faint); font-variant-numeric: tabular-nums; }
 .note-body img.note-img { display: block; max-width: 100%; height: auto; margin: 0.8rem 0; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; }
 a[data-note] { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-soft); text-underline-offset: 0.18em; cursor: pointer; }
 
@@ -980,6 +1032,7 @@ a[data-note] { color: var(--accent); text-decoration: underline; text-decoration
 @media (max-width: 30rem) {
 	.brand > span { display: none; }
 	.modes button { padding: 0.28rem 0.6rem; }
+	.empty .runhead .mid { display: none; }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/web/app.js

@@ -296,6 +296,16 @@ function hasCommand(name) {
 	return commands.length === 0 || commands.some((c) => c.name === base);
 }
 
+// Side panel sections and action groups fold at their heading; the folded ones are remembered on this computer.
+const folded = new Set((localStorage.getItem("subsub-folded") || "").split(" ").filter(Boolean));
+function setFold(box, on) {
+	box.classList.toggle("folded", on);
+	box.querySelector(".fold").setAttribute("aria-expanded", String(!on));
+	if (on) folded.add(box.dataset.fold);
+	else folded.delete(box.dataset.fold);
+	localStorage.setItem("subsub-folded", [...folded].join(" "));
+}
+
 function renderActions() {
 	const box = $("actions");
 	box.replaceChildren();
@@ -305,8 +315,9 @@ function renderActions() {
 	for (const [group, label] of groups) {
 		const list = ACTIONS[group].filter(shown);
 		if (!list.length) continue;
-		box.append(el("p", { class: "group", text: t(label) }));
-		for (const a of list) box.append(actionButton(a));
+		const g = el("div", { "data-fold": `actions-${group}` }, el("p", { class: "group" }, el("button", { type: "button", class: "fold", text: t(label) })), list.map(actionButton));
+		setFold(g, folded.has(g.dataset.fold));
+		box.append(g);
 	}
 }
 
@@ -315,7 +326,10 @@ function actionButton(a) {
 		type: "button",
 		text: a[lang] ?? a.en,
 		onclick: () => {
-			if (a.item) return $("library-search").focus();
+			if (a.item) {
+				setFold($("library-search").closest("[data-fold]"), false);
+				return $("library-search").focus();
+			}
 			closeSide();
 			if (a.send) sendMessage(`/${a.cmd}`);
 			else {
@@ -407,16 +421,34 @@ function renderNoteList() {
 	const q = $("note-filter").value.trim().toLowerCase();
 	const list = notesList.filter((n) => !q || n.rel.toLowerCase().includes(q));
 	const fmt = new Intl.DateTimeFormat(lang === "pt" ? "pt-PT" : "en-GB", { day: "numeric", month: "short", year: "numeric" });
+	// One group per folder (Inbox, Literature, ...), newest first inside each, as the server sorts them.
+	const groups = new Map();
+	for (const n of list) {
+		const [folder, ...rest] = n.rel.split(/[\\/]/);
+		if (!groups.has(folder)) groups.set(folder, []);
+		groups.get(folder).push({ ...n, name: rest.join("/").replace(/\.md$/i, "") || folder });
+	}
 	body.replaceChildren(
 		list.length
 			? el(
-					"ul",
+					"div",
 					{ class: "note-list" },
-					list.map((n) =>
+					[...groups].map(([folder, notes]) =>
 						el(
-							"li",
+							"section",
 							{},
-							el("button", { type: "button", onclick: () => openNote(n.path) }, el("span", { class: "rel", text: n.rel }), el("span", { class: "when", text: fmt.format(new Date(n.modified)) })),
+							el("h3", { text: folder }),
+							el(
+								"ul",
+								{},
+								notes.map((n) =>
+									el(
+										"li",
+										{},
+										el("button", { type: "button", title: n.rel, onclick: () => openNote(n.path) }, el("span", { class: "rel", text: n.name }), el("span", { class: "when", text: fmt.format(new Date(n.modified)) })),
+									),
+								),
+							),
 						),
 					),
 				)
@@ -692,7 +724,7 @@ function renderEmpty() {
 		el(
 			"div",
 			{ class: "empty" },
-			el("p", { class: "kicker", text: t(mode()) }),
+			el("p", { class: "runhead" }, el("span", { class: "nobr", text: "Sub-Sub" }), el("span", { class: "mid", text: t("tagline") }), el("span", { class: "mode", text: t(mode()) })),
 			el("h1", { text: t("emptyTitle") }),
 			el("p", { class: "lede", text: t(mode() === "librarian" ? "emptyLibrarian" : "emptyResearcher") }),
 			setupList(),
@@ -732,7 +764,7 @@ function userMessage(text) {
 	if (text.length > 700) {
 		const first = text.split("\n").find((l) => l.trim()) ?? "";
 		bubble = el("details", { class: "bubble" }, el("summary", { text: first.length > 120 ? `${first.slice(0, 117)}...` : first }), el("div", { text }));
-	} else bubble = el("div", { class: "bubble", text });
+	} else bubble = el("div", { class: /^\/\S/.test(text) ? "bubble cmd" : "bubble", text });
 	log.append(el("div", { class: "msg user" }, bubble));
 	scrollDown(true);
 }
@@ -1517,6 +1549,11 @@ $("theme-btn-side")?.addEventListener("click", () => {
 	closeSide();
 	toggleTheme();
 });
+$("side").addEventListener("click", (e) => {
+	const box = e.target.closest(".fold")?.closest("[data-fold]");
+	if (box) setFold(box, !box.classList.contains("folded"));
+});
+for (const box of document.querySelectorAll(".side section[data-fold]")) setFold(box, folded.has(box.dataset.fold));
 $("session-search")?.addEventListener("input", (e) => renderSessionsList(e.target.value));
 $("library-search").addEventListener("input", searchLibrary);
 $("notes-btn").addEventListener("click", () => ($("note-pane").hidden ? showNoteList() : showPane(false)));

package/web/i18n.js

@@ -84,6 +84,7 @@ export const STRINGS = {
 		saved: "Saved.",
 		busy: "Wait until Sub-Sub finishes.",
 		emptyTitle: "What would you like to do?",
+		tagline: "A research assistant for Zotero",
 		quit: "Close Sub-Sub",
 		quitDone: "Sub-Sub is closed. You can close this tab.",
 		earlier: "Earlier messages were summarised.",
@@ -226,6 +227,7 @@ export const STRINGS = {
 		saved: "Guardado.",
 		busy: "Espere que o Sub-Sub termine.",
 		emptyTitle: "O que quer fazer?",
+		tagline: "Um assistente de investigação para o Zotero",
 		quit: "Fechar o Sub-Sub",
 		quitDone: "O Sub-Sub está fechado. Pode fechar este separador.",
 		earlier: "As mensagens anteriores foram resumidas.",