@tiagojct/subsub 0.22.0 → 0.23.0

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 Sub-Sub follows the version numbers of npm: a change in the second number (0.13) adds features or changes how you use it; a change in the third (0.13.1) only fixes.
 
+## 0.23.0 (2026-10-24)
+
+- The browser view is set like the website. Replies and notes have the website's headings (a fine rule above each section), its numbered steps and a slightly larger text. A note opens on the lighter field of a page, and the list of notes is grouped by folder under small-capital heads, with the date on the right. The empty conversation has the website's running head and a larger heading. Notes and the model in the top bar are plain text buttons, as in the website's menu. A command you send (`/read ...`) is shown in the mono. The working line is drawn dotted, dashed and solid, as in the terminal, instead of a moving gradient. Scrollbars are thin. On a phone, Notes is no longer cut to "No..." (the theme button is in the side panel there).
+- In the browser view, the sections of the side panel (Library, Actions, Conversations) and the two groups of actions (Research, Library) fold at their heading. With the others folded, the list of conversations takes the whole panel. The browser remembers which ones you folded.
+
 ## 0.22.0 (2026-10-24)
 
 - `subsub tui`: Sub-Sub on the whole terminal. It is a full-screen client of pi's RPC mode, like the browser view, with the look of `subsub`: a conversation that scrolls (mouse wheel, PgUp and PgDn), a side panel from 110 columns (mode, library, keys, earlier conversations), an editor that completes commands, and the footer. Alt+N, Alt+L, Alt+A and Alt+M open the notes, the library search and the actions, and switch the mode, as in `subsub`. `/sessions` and `/new` change the conversation, `/model` chooses the model, `/restart` starts pi again in the same conversation, `/quit` leaves. Ctrl+O shows the output of tool rows, Esc stops a running answer, and Ctrl+C twice quits. `--light` or `--dark` set the colours when the terminal does not say (the default is dark), and `--librarian` starts in the Librarian.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tiagojct/subsub",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "Sub-Sub: a research assistant that works from your own Zotero library, in the browser or the terminal, built on pi",
   "type": "module",
   "license": "MIT",

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.",

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">