@tiagojct/subsub 0.22.0 → 0.24.0

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

@@ -12,6 +12,8 @@ let session = null; // pi's session state
 let busy = false;
 let commands = [];
 let providers = [];
+/** The login form's choice for a provider that pi does not include (src/providers.ts CUSTOM_DEFAULT_NAME). */
+const OTHER_PROVIDER = "custom";
 const dialogs = []; // waiting dialog requests, oldest first
 let shownDialog = null;
 let currentMsg = null; // assistant message being streamed
@@ -255,7 +257,10 @@ function renderHeader() {
 	$("starbuck-label").title = t("starbuckHint");
 	const m = state?.model ?? session?.model;
 	const none = !m || !m.id || m.id === "unknown";
-	$("model-btn").textContent = $("model-btn-side").textContent = none ? t("noModel") : m.id;
+	// With a cost limit in the settings, the conversation's cost and the limit follow the model.
+	const c = state?.cost;
+	const cost = c && typeof c.spent === "number" ? ` · $${c.spent.toFixed(2)}/$${c.limit.toFixed(2)}` : "";
+	$("model-btn").textContent = $("model-btn-side").textContent = none ? t("noModel") : m.id + cost;
 	for (const b of [$("model-btn"), $("model-btn-side")]) b.classList.toggle("needs", none);
 	const lib = $("library");
 	const txt = lib.querySelector(".library-text") ?? lib;
@@ -296,6 +301,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 +320,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 +331,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 {
@@ -349,7 +368,9 @@ function renderItems(items, message) {
 	if (message) return ul.append(el("li", { class: "muted", text: message }));
 	const researcher = mode() === "researcher";
 	for (const it of items) {
-		const ref = it.citekey || it.key;
+		// A group library's item says its library (keep in step with itemRef in src/screens.ts).
+		const ref = it.library ? `${it.citekey || it.key} in ${it.library}` : it.citekey || it.key;
+		const scope = it.library ? `groups/${it.library.split(":")[1]}` : "library";
 		const run = (cmd) => () => {
 			closeSide();
 			sendMessage(`/${cmd} ${ref}`);
@@ -359,13 +380,13 @@ function renderItems(items, message) {
 				"li",
 				{},
 				el("div", { class: "item-title", text: it.title || it.key }),
-				el("div", { class: "item-meta", text: [it.authors, it.year, it.citekey].filter(Boolean).join(" · ") }),
+				el("div", { class: "item-meta", text: [it.authors, it.year, it.citekey, it.group].filter(Boolean).join(" · ") }),
 				el(
 					"div",
 					{ class: "item-actions" },
 					researcher ? el("button", { type: "button", text: t("readItem"), onclick: run("read") }) : null,
 					researcher ? el("button", { type: "button", text: t("noteItem"), onclick: run("lit-note") }) : null,
-					el("a", { href: `zotero://select/library/items/${encodeURIComponent(it.key)}`, text: "Zotero" }),
+					el("a", { href: `zotero://select/${scope}/items/${encodeURIComponent(it.key)}`, text: "Zotero" }),
 				),
 			),
 		);
@@ -407,16 +428,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 +731,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 +771,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);
 }
@@ -1228,15 +1267,22 @@ async function openModels() {
 	const ul = $("models");
 	ul.replaceChildren(el("li", { class: "empty-models", text: "…" }));
 	const sel = $("login-provider");
-	sel.replaceChildren(...providers.map((p) => el("option", { value: p.id, text: p.label })));
+	sel.replaceChildren(...providers.map((p) => el("option", { value: p.id, text: p.label })), el("option", { value: OTHER_PROVIDER, text: t("otherProvider") }));
 	const link = $("login-link");
 	const setLink = () => {
 		const p = providers.find((x) => x.id === sel.value);
+		const other = sel.value === OTHER_PROVIDER;
+		link.hidden = other;
 		link.href = p?.url ?? "#";
+		$("login-url-row").hidden = !other;
+		$("login-model-row").hidden = !other;
+		$("login-url").required = other;
+		$("login-model").required = other;
+		$("login-key").required = !other;
 		const free = { google: "freeGoogle", openrouter: "freeOpenRouter" }[sel.value];
 		$("login-free").hidden = !free;
 		$("login-free").textContent = free ? t(free) : "";
-		$("login-where").textContent = p?.where ? t(`where_${p.where}`) : "";
+		$("login-where").textContent = other ? t("otherNote") : p?.where ? t(`where_${p.where}`) : "";
 	};
 	sel.onchange = setLink;
 	setLink();
@@ -1329,7 +1375,7 @@ $("login-form")?.addEventListener("submit", async (e) => {
 	btn.disabled = true;
 	btn.textContent = t("saving");
 	try {
-		await api("/api/login", { provider: $("login-provider").value, key: $("login-key").value });
+		await api("/api/login", { provider: $("login-provider").value, key: $("login-key").value, baseUrl: $("login-url").value, model: $("login-model").value });
 		$("login-key").value = "";
 		note(t("saved"));
 		await openModels();
@@ -1517,6 +1563,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

@@ -24,7 +24,7 @@ export const STRINGS = {
 		starbuckReport: "Write the Starbuck report to {x}?",
 		approveHint: "Nothing changes until you select Yes.",
 		zoteroChecking: "Zotero: checking",
-		zoteroDown: "Zotero is not running",
+		zoteroDown: "Zotero is closed: search only",
 		items: "{n} items",
 		toReview: "{n} to check",
 		toReviewHint: "Items that Sub-Sub tagged and that wait for your check (they carry the _agent tag). Select Library overview, or ask Sub-Sub to list them.",
@@ -59,6 +59,10 @@ export const STRINGS = {
 		save: "Save",
 		getKey: "Get a key",
 		keyNote: "The key is saved on this computer, in Sub-Sub's settings folder, and is sent only to that provider.",
+		otherProvider: "Another provider (OpenAI API)",
+		serverUrl: "Server address",
+		modelId: "Model id",
+		otherNote: "A server that speaks the OpenAI API: your institution's, or a local one (Ollama, LM Studio). The key can stay empty for a local server. Your messages go to that server.",
 		freeGoogle: "Free to try: a Google AI Studio key needs no card. The free tier limits the text sent each minute and the requests each day, enough to try Sub-Sub, and gemini-3.1-flash-lite is the tested free model. You must be 18 or older. In the EU, the UK and Switzerland, Google does not use your prompts to improve its products; elsewhere, on the free tier, it may.",
 		freeOpenRouter: "Free to try: models whose names end in :free cost nothing, with 50 requests a day (1000 after you buy 10 dollars of credit). The providers of some free models may keep your prompts.",
 		trouble_quota: "The model provider refused the request: a limit of your account was reached. Free tiers limit the text sent each minute and the requests each day. Wait a minute and ask Sub-Sub to continue; if it happens again, the daily limit is used up (it resets the next day). Or choose another model with the model button.",
@@ -84,6 +88,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.",
@@ -166,7 +171,7 @@ export const STRINGS = {
 		starbuckReport: "Escrever o relatório do Starbuck em {x}?",
 		approveHint: "Nada muda até selecionar Sim.",
 		zoteroChecking: "Zotero: a verificar",
-		zoteroDown: "O Zotero não está aberto",
+		zoteroDown: "O Zotero está fechado: só pesquisa",
 		items: "{n} itens",
 		toReview: "{n} por verificar",
 		toReviewHint: "Itens que o Sub-Sub etiquetou e que esperam a sua verificação (têm a etiqueta _agent). Selecione Resumo da biblioteca, ou peça ao Sub-Sub para os listar.",
@@ -201,6 +206,10 @@ export const STRINGS = {
 		save: "Guardar",
 		getKey: "Obter uma chave",
 		keyNote: "A chave fica guardada neste computador, na pasta de definições do Sub-Sub, e só é enviada a esse fornecedor.",
+		otherProvider: "Outro fornecedor (API da OpenAI)",
+		serverUrl: "Endereço do servidor",
+		modelId: "Identificador do modelo",
+		otherNote: "Um servidor que fala a API da OpenAI: o da sua instituição, ou um servidor local (Ollama, LM Studio). Num servidor local, a chave pode ficar vazia. As suas mensagens vão para esse servidor.",
 		freeGoogle: "Para experimentar sem pagar: uma chave do Google AI Studio não pede cartão. O nível gratuito limita o texto enviado por minuto e os pedidos por dia, o que chega para experimentar o Sub-Sub; o modelo gratuito testado é o gemini-3.1-flash-lite. Tem de ter 18 anos ou mais. Na UE, no Reino Unido e na Suíça, a Google não usa os seus pedidos para melhorar os produtos; noutros países, no nível gratuito, pode usar.",
 		freeOpenRouter: "Para experimentar sem pagar: os modelos cujo nome termina em :free não custam nada, com 50 pedidos por dia (1000 depois de comprar 10 dólares de crédito). Os fornecedores de alguns modelos gratuitos podem guardar os seus pedidos.",
 		trouble_quota: "O fornecedor do modelo recusou o pedido: atingiu um limite da sua conta. Os níveis gratuitos limitam o texto enviado por minuto e os pedidos por dia. Espere um minuto e peça ao Sub-Sub para continuar; se voltar a acontecer, esgotou o limite diário (renova-se no dia seguinte). Ou escolha outro modelo no botão do modelo.",
@@ -226,6 +235,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.",
@@ -314,6 +324,7 @@ export const ACTIONS = {
 		{ cmd: "subsub", send: true, en: "Library overview", pt: "Resumo da biblioteca" },
 		{ cmd: "tag-batch 10", send: true, en: "Tag 10 items", pt: "Etiquetar 10 itens" },
 		{ cmd: "clean-tags", send: true, en: "Clean up tags", pt: "Limpar etiquetas" },
+		{ cmd: "check-library", send: true, en: "Check the library", pt: "Verificar a biblioteca" },
 		{ cmd: "import-queue", send: true, en: "Import the queue", pt: "Importar a fila" },
 		{ cmd: "history", send: true, en: "Recent changes", pt: "Alterações recentes" },
 		{ cmd: "undo", send: true, en: "Undo the last change", pt: "Desfazer a última alteração" },
@@ -339,6 +350,7 @@ export const SUGGESTIONS = {
 export const TOOLS = {
 	en: {
 		find_items: "search the library",
+		list_libraries: "list the libraries",
 		get_figure: "cut a figure out of the PDF",
 		standalone_items: "list files without a parent item",
 		set_parent_items: "give files a parent item",
@@ -400,6 +412,7 @@ export const TOOLS = {
 	},
 	pt: {
 		find_items: "pesquisar na biblioteca",
+		list_libraries: "listar as bibliotecas",
 		get_figure: "recortar uma figura do PDF",
 		standalone_items: "listar ficheiros sem item principal",
 		set_parent_items: "dar um item principal aos ficheiros",

package/web/index.html

@@ -24,7 +24,7 @@
 				<button type="button" class="chip-btn" id="notes-btn" aria-controls="note-pane" aria-expanded="false" data-i18n="notes" data-i18n-title="notesHint">Notes</button>
 				<button type="button" class="chip-btn model-btn wide-only" id="model-btn"></button>
 				<button type="button" class="icon-btn wide-only" id="width-btn" aria-pressed="false"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h16M4 12l3.5-3.5M4 12l3.5 3.5M20 12l-3.5-3.5M20 12l-3.5 3.5"/></svg><span class="visually-hidden" id="width-btn-text">Wide</span></button>
-				<button type="button" class="icon-btn" id="theme-btn"></button>
+				<button type="button" class="icon-btn wide-only" id="theme-btn"></button>
 			</div>
 		</header>
 
@@ -38,18 +38,18 @@
 					<button type="button" class="secondary" id="theme-btn-side"></button>
 				</label>
 			</section>
-			<section>
-				<h2 data-i18n="groupLibrary">Library</h2>
+			<section data-fold="library">
+				<h2><button type="button" class="fold" aria-expanded="true" data-i18n="groupLibrary">Library</button></h2>
 				<input type="search" id="library-search" class="search" data-i18n-placeholder="librarySearch" placeholder="Search your library" autocomplete="off">
 				<ul class="items" id="items" aria-live="polite"></ul>
 			</section>
-			<section>
-				<h2 data-i18n="actions">Actions</h2>
+			<section data-fold="actions">
+				<h2><button type="button" class="fold" aria-expanded="true" data-i18n="actions">Actions</button></h2>
 				<div class="actions" id="actions"></div>
 			</section>
-			<section class="grow">
+			<section class="grow" data-fold="conversations">
 				<div class="side-subhead">
-					<h2 data-i18n="conversations">Conversations</h2>
+					<h2><button type="button" class="fold" aria-expanded="true" data-i18n="conversations">Conversations</button></h2>
 					<button type="button" class="link-btn" id="export-btn" data-i18n="export" data-i18n-title="exportTitle">Export</button>
 				</div>
 				<input type="search" id="session-search" class="search" data-i18n-placeholder="searchConversations" placeholder="Search conversations" autocomplete="off">
@@ -120,6 +120,12 @@
 			<label><span data-i18n="provider">Provider</span>
 				<select id="login-provider"></select>
 			</label>
+			<label id="login-url-row" hidden><span data-i18n="serverUrl">Server address</span>
+				<input type="url" id="login-url" autocomplete="off" spellcheck="false" placeholder="https://llm.example.org/v1">
+			</label>
+			<label id="login-model-row" hidden><span data-i18n="modelId">Model id</span>
+				<input type="text" id="login-model" autocomplete="off" spellcheck="false">
+			</label>
 			<label><span data-i18n="apiKey">API key</span>
 				<input type="password" id="login-key" autocomplete="off" spellcheck="false" required>
 			</label>