@tiagojct/subsub 0.6.0 → 0.6.1

package/README.md

@@ -55,7 +55,8 @@ The Zotero servers (zotero-local-mcp) run from PyPI through uv. To run them from
 - pi runs in RPC mode with the Sub-Sub extension. Sub-Sub's approval dialog (the server preview) appears in the page, and the change runs only after you select Yes.
 - The server listens only on 127.0.0.1. The address that opens the page carries a random key, which becomes an HttpOnly, SameSite=Strict cookie; other requests need that cookie, the right Host header and a same-origin JSON request. The page has a strict content security policy and shows model output without raw HTML.
 - One server per user: a second `subsub web` opens the running one. Without an open page for 10 minutes (and with nothing waiting for approval), the server stops. `--stay` keeps it running; `--idle N` sets the minutes; `--no-open` does not open a browser; `--librarian` starts in the librarian mode.
-- Labels are in European Portuguese when the language setting is Portuguese, otherwise in English.
+- Labels are in European Portuguese when the language setting is Portuguese, otherwise in English. A theme button in the header toggles light, dark, and system themes.
+- Fast approval shortcuts (`y` to apply, `n` to decline), one-click copy buttons on code blocks and notes, conversation search, and export to Markdown.
 - The model button lists the models you can use and saves an API key for a provider in the same file as `/login`. Sign-ins through a provider's website stay in the terminal (`/login`).
 - A log is kept in `~/.subsub/web.log`.
 

package/dist/config.js

@@ -19,8 +19,9 @@ import { dirname, join, resolve } from "node:path";
 export const PROFILES = ["reader", "scholar", "author", "editor"];
 /** The Zotero server release that this Sub-Sub version runs when there is no local server folder. */
 export const SERVER_VERSION = "0.4.1";
-export function expand(p) {
-    return resolve(p.replace(/^~(?=$|\/)/, homedir()));
+export function expand(p, home) {
+    const base = home ?? process.env.HOME ?? homedir();
+    return resolve(p.replace(/^~(?=$|\/)/, base));
 }
 export function parseEnvFile(path) {
     const out = {};
@@ -41,7 +42,7 @@ export function parseEnvFile(path) {
     return out;
 }
 export function configPath(env = process.env) {
-    return expand(env.SUBSUB_CONFIG ?? "~/.config/subsub/config.json");
+    return expand(env.SUBSUB_CONFIG ?? "~/.config/subsub/config.json", env.HOME);
 }
 export function readConfigFile(file) {
     if (!existsSync(file))
@@ -68,6 +69,7 @@ export function isProfile(x) {
     return typeof x === "string" && PROFILES.includes(x);
 }
 export function loadConfig(env = process.env) {
+    const home = env.HOME;
     const file = configPath(env);
     let user = {};
     if (existsSync(file)) {
@@ -78,16 +80,18 @@ export function loadConfig(env = process.env) {
             throw new Error(`Sub-Sub: cannot read ${file}: ${err.message}`);
         }
     }
-    const envCandidates = [
-        user.envFile,
-        env.ZOTERO_MCP_ENV,
-        "~/.config/zotero-local-mcp/env",
-        "~/.config/opencode/zotero.env",
-    ].filter((x) => Boolean(x));
-    const envFile = envCandidates.map(expand).find((p) => existsSync(p));
-    const envValues = envFile ? parseEnvFile(envFile) : {};
+    const explicitEnv = user.envFile ?? env.ZOTERO_MCP_ENV;
+    const envFile = explicitEnv
+        ? expand(explicitEnv, home)
+        : [
+            "~/.config/zotero-local-mcp/env",
+            "~/.config/opencode/zotero.env",
+        ]
+            .map((p) => expand(p, home))
+            .find((p) => existsSync(p));
+    const envValues = envFile && existsSync(envFile) ? parseEnvFile(envFile) : {};
     const vaultRaw = user.vault ?? env.ZOTERO_VAULT ?? envValues.ZOTERO_VAULT;
-    const vault = vaultRaw ? expand(vaultRaw) : undefined;
+    const vault = vaultRaw ? expand(vaultRaw, home) : undefined;
     const mode = user.defaultMode === "librarian" ? "librarian" : "researcher";
     return {
         configFile: file,
@@ -96,7 +100,7 @@ export function loadConfig(env = process.env) {
         about: typeof user.about === "string" && user.about.trim() ? user.about.trim() : undefined,
         language: typeof user.language === "string" && user.language.trim() ? user.language.trim() : "English",
         setup: user.setup,
-        serverDir: expand(user.serverDir ?? "~/Projects/zotero-local-mcp"),
+        serverDir: expand(user.serverDir ?? "~/Projects/zotero-local-mcp", home),
         envFile,
         vault,
         models: user.models ?? {
@@ -104,14 +108,14 @@ export function loadConfig(env = process.env) {
             researcher: "opencode-go/mimo-v2.6-pro",
         },
         defaultMode: mode,
-        vaultContext: (user.vaultContext ?? (vault ? [join(vault, ".claude", "CLAUDE.md")] : [])).map(expand),
+        vaultContext: (user.vaultContext ?? (vault ? [join(vault, ".claude", "CLAUDE.md")] : [])).map((p) => expand(p, home)),
         sharedRules: user.sharedRules
-            ? expand(user.sharedRules)
+            ? expand(user.sharedRules, home)
             : vault
                 ? join(vault, "Systems", "Zotero agent.md")
                 : undefined,
         startTimeout: user.startTimeout ?? 45,
-        uvPath: user.uvPath ? expand(user.uvPath) : undefined,
+        uvPath: user.uvPath ? expand(user.uvPath, home) : undefined,
         look: user.look,
         quotes: user.quotes,
         themes: user.themes,
@@ -119,11 +123,12 @@ export function loadConfig(env = process.env) {
 }
 /** uv is often missing from PATH when pi is started outside a login shell. */
 export function findUv(cfg, env = process.env, platform = process.platform) {
+    const home = env.HOME;
     const unix = ["~/.local/bin/uv", "/opt/homebrew/bin/uv", "/usr/local/bin/uv", "~/.cargo/bin/uv"];
     const windows = ["~/.local/bin/uv.exe", "~/.cargo/bin/uv.exe", env.LOCALAPPDATA ? join(env.LOCALAPPDATA, "uv", "uv.exe") : ""];
     const candidates = [cfg.uvPath, env.SUBSUB_UV, ...(platform === "win32" ? windows : unix)]
         .filter((x) => Boolean(x))
-        .map(expand);
+        .map((p) => expand(p, home));
     return candidates.find((p) => existsSync(p)) ?? "uv";
 }
 /**

package/dist/init.js

@@ -63,11 +63,12 @@ export async function zoteroReachable(fetchFn = fetch) {
     }
 }
 export async function runInit(io, flags, env = process.env, deps = {}) {
-    const home = deps.home ?? homedir();
-    const configFile = configPath(env);
+    const home = deps.home ?? env.HOME ?? homedir();
+    const initEnv = { ...env, HOME: home };
+    const configFile = configPath(initEnv);
     const existing = readConfigFile(configFile);
-    const current = loadConfig(env);
-    const envFile = current.envFile ?? expand(env.ZOTERO_MCP_ENV ?? join(home, ".config", "zotero-local-mcp", "env"));
+    const current = loadConfig(initEnv);
+    const envFile = current.envFile ?? expand(initEnv.ZOTERO_MCP_ENV ?? join(home, ".config", "zotero-local-mcp", "env"), home);
     const envValues = existsSync(envFile) ? parseEnvFile(envFile) : {};
     const created = [];
     io.say(existsSync(configFile) ? `Sub-Sub settings (${configFile}). Press Enter to keep the value in brackets.` : "Sub-Sub setup. Press Enter to take the value in brackets.");
@@ -79,10 +80,10 @@ export async function runInit(io, flags, env = process.env, deps = {}) {
     const userName = (await io.ask("Your name, for Sub-Sub's replies (Enter for none)", flags.name ?? existing.userName ?? "")).trim();
     const about = (await io.ask('One line about you, e.g. "a master\'s student in health informatics" (optional)', flags.about ?? existing.about ?? "")).trim();
     const language = (await io.ask("Language for replies and notes (a language, or auto for the language you write in)", flags.language ?? existing.language ?? "English")).trim() || "English";
-    const notes = expand((await io.ask("Notes folder (Markdown files; an Obsidian vault works)", flags.notes ?? current.vault ?? envValues.ZOTERO_VAULT ?? join(home, "Documents", "Sub-Sub"))).trim());
+    const notes = expand((await io.ask("Notes folder (Markdown files; an Obsidian vault works)", flags.notes ?? current.vault ?? envValues.ZOTERO_VAULT ?? join(home, "Documents", "Sub-Sub"))).trim(), home);
     const profileDefault = flags.profile ?? existing.profile ?? (fmup ? "reader" : "scholar");
     const profile = await io.choose("Profile (change it later with /profile)", PROFILES.map((p) => ({ value: p, label: `${PROFILE_SPECS[p].label}: ${PROFILE_SPECS[p].summary}` })), isProfile(profileDefault) ? profileDefault : "scholar");
-    const vocab = envValues.ZOTERO_VOCAB ? expand(envValues.ZOTERO_VOCAB) : join(notes, "Systems", "Zotero tags.md");
+    const vocab = envValues.ZOTERO_VOCAB ? expand(envValues.ZOTERO_VOCAB, home) : join(notes, "Systems", "Zotero tags.md");
     let tags = "keep";
     if (existsSync(vocab)) {
         io.say(`Tag list: keeping ${vocab}.`);
@@ -96,7 +97,7 @@ export async function runInit(io, flags, env = process.env, deps = {}) {
         { value: "later", label: "Choose later in Sub-Sub (/login, then /model)" },
         { value: "opencode-go", label: `OpenCode Go, tested: ${TESTED_MODELS.librarian} for the librarian, ${TESTED_MODELS.researcher} for the researcher` },
     ];
-    const agentDir = env.SUBSUB_AGENT_DIR ? expand(env.SUBSUB_AGENT_DIR) : join(home, ".subsub", "agent");
+    const agentDir = initEnv.SUBSUB_AGENT_DIR ? expand(initEnv.SUBSUB_AGENT_DIR, home) : join(home, ".subsub", "agent");
     const modelDefault = existing.models ? "keep" : hasProvider(agentDir, "opencode") ? "opencode-go" : "later";
     const models = await io.choose("Models", modelOptions, flags.models ?? modelDefault);
     // ---- write
@@ -132,7 +133,7 @@ export async function runInit(io, flags, env = process.env, deps = {}) {
         patch.models = {};
     if (models === "opencode-go")
         patch.models = TESTED_MODELS;
-    saveConfig(patch, env);
+    saveConfig(patch, initEnv);
     const zotero = await zoteroReachable(deps.fetch);
     io.say("");
     io.say(`Saved: ${configFile}`);

package/docs/Subsub.md

@@ -58,8 +58,10 @@ Templates (type the name, then the argument):
 2. To add a shortcut (Applications on macOS), type `subsub shortcut`. To remove it, type `subsub shortcut --remove`.
 3. The server listens only on 127.0.0.1 and needs the random key in the address that `subsub web` opens. A second `subsub web` opens the running one.
 4. The server stops 10 minutes after the last page closes. `subsub web --stay` keeps it running.
-5. The labels are in European Portuguese when the language setting is Portuguese.
-6. The model button lists the models and saves an API key for a provider (the same auth.json as `/login`).
+5. The labels are in European Portuguese when the language setting is Portuguese. A theme toggle button in the header switches between light, dark and system themes.
+6. Faster review: in approval dialogs, press `y` to apply or `n` to cancel without using the mouse.
+7. One-click copy buttons appear on every code block and assistant note. The sidebar includes real-time conversation search and an Export button to download the discussion as Markdown.
+8. The model button lists the models and saves an API key for a provider (the same auth.json as `/login`).
 
 The log is in ~/.subsub/web.log.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tiagojct/subsub",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Sub-Sub: a Zotero librarian and research assistant in the browser or the terminal, built on pi",
   "type": "module",
   "license": "MIT",

package/src/config.ts

@@ -59,8 +59,9 @@ export interface SubsubConfig {
 	themes?: Partial<Record<Mode, string>> | false;
 }
 
-export function expand(p: string): string {
-	return resolve(p.replace(/^~(?=$|\/)/, homedir()));
+export function expand(p: string, home?: string): string {
+	const base = home ?? process.env.HOME ?? homedir();
+	return resolve(p.replace(/^~(?=$|\/)/, base));
 }
 
 export function parseEnvFile(path: string): Record<string, string> {
@@ -81,7 +82,7 @@ export function parseEnvFile(path: string): Record<string, string> {
 }
 
 export function configPath(env: NodeJS.ProcessEnv = process.env): string {
-	return expand(env.SUBSUB_CONFIG ?? "~/.config/subsub/config.json");
+	return expand(env.SUBSUB_CONFIG ?? "~/.config/subsub/config.json", env.HOME);
 }
 
 export function readConfigFile(file: string): Record<string, unknown> {
@@ -108,6 +109,7 @@ export function isProfile(x: unknown): x is Profile {
 }
 
 export function loadConfig(env: NodeJS.ProcessEnv = process.env): SubsubConfig {
+	const home = env.HOME;
 	const file = configPath(env);
 	let user: Partial<SubsubConfig> = {};
 	if (existsSync(file)) {
@@ -117,16 +119,18 @@ export function loadConfig(env: NodeJS.ProcessEnv = process.env): SubsubConfig {
 			throw new Error(`Sub-Sub: cannot read ${file}: ${(err as Error).message}`);
 		}
 	}
-	const envCandidates = [
-		user.envFile,
-		env.ZOTERO_MCP_ENV,
-		"~/.config/zotero-local-mcp/env",
-		"~/.config/opencode/zotero.env",
-	].filter((x): x is string => Boolean(x));
-	const envFile = envCandidates.map(expand).find((p) => existsSync(p));
-	const envValues = envFile ? parseEnvFile(envFile) : {};
+	const explicitEnv = user.envFile ?? env.ZOTERO_MCP_ENV;
+	const envFile = explicitEnv
+		? expand(explicitEnv, home)
+		: [
+				"~/.config/zotero-local-mcp/env",
+				"~/.config/opencode/zotero.env",
+		  ]
+				.map((p) => expand(p, home))
+				.find((p) => existsSync(p));
+	const envValues = envFile && existsSync(envFile) ? parseEnvFile(envFile) : {};
 	const vaultRaw = user.vault ?? env.ZOTERO_VAULT ?? envValues.ZOTERO_VAULT;
-	const vault = vaultRaw ? expand(vaultRaw) : undefined;
+	const vault = vaultRaw ? expand(vaultRaw, home) : undefined;
 	const mode = user.defaultMode === "librarian" ? "librarian" : "researcher";
 	return {
 		configFile: file,
@@ -135,7 +139,7 @@ export function loadConfig(env: NodeJS.ProcessEnv = process.env): SubsubConfig {
 		about: typeof user.about === "string" && user.about.trim() ? user.about.trim() : undefined,
 		language: typeof user.language === "string" && user.language.trim() ? user.language.trim() : "English",
 		setup: user.setup,
-		serverDir: expand(user.serverDir ?? "~/Projects/zotero-local-mcp"),
+		serverDir: expand(user.serverDir ?? "~/Projects/zotero-local-mcp", home),
 		envFile,
 		vault,
 		models: user.models ?? {
@@ -143,14 +147,14 @@ export function loadConfig(env: NodeJS.ProcessEnv = process.env): SubsubConfig {
 			researcher: "opencode-go/mimo-v2.6-pro",
 		},
 		defaultMode: mode,
-		vaultContext: (user.vaultContext ?? (vault ? [join(vault, ".claude", "CLAUDE.md")] : [])).map(expand),
+		vaultContext: (user.vaultContext ?? (vault ? [join(vault, ".claude", "CLAUDE.md")] : [])).map((p) => expand(p, home)),
 		sharedRules: user.sharedRules
-			? expand(user.sharedRules)
+			? expand(user.sharedRules, home)
 			: vault
 				? join(vault, "Systems", "Zotero agent.md")
 				: undefined,
 		startTimeout: user.startTimeout ?? 45,
-		uvPath: user.uvPath ? expand(user.uvPath) : undefined,
+		uvPath: user.uvPath ? expand(user.uvPath, home) : undefined,
 		look: user.look,
 		quotes: user.quotes,
 		themes: user.themes,
@@ -159,11 +163,12 @@ export function loadConfig(env: NodeJS.ProcessEnv = process.env): SubsubConfig {
 
 /** uv is often missing from PATH when pi is started outside a login shell. */
 export function findUv(cfg: Pick<SubsubConfig, "uvPath">, env: NodeJS.ProcessEnv = process.env, platform: string = process.platform): string {
+	const home = env.HOME;
 	const unix = ["~/.local/bin/uv", "/opt/homebrew/bin/uv", "/usr/local/bin/uv", "~/.cargo/bin/uv"];
 	const windows = ["~/.local/bin/uv.exe", "~/.cargo/bin/uv.exe", env.LOCALAPPDATA ? join(env.LOCALAPPDATA, "uv", "uv.exe") : ""];
 	const candidates = [cfg.uvPath, env.SUBSUB_UV, ...(platform === "win32" ? windows : unix)]
 		.filter((x): x is string => Boolean(x))
-		.map(expand);
+		.map((p) => expand(p, home));
 	return candidates.find((p) => existsSync(p)) ?? "uv";
 }
 

package/src/init.ts

@@ -85,11 +85,12 @@ export async function runInit(
 	env: NodeJS.ProcessEnv = process.env,
 	deps: { fetch?: typeof fetch; home?: string } = {},
 ): Promise<InitResult> {
-	const home = deps.home ?? homedir();
-	const configFile = configPath(env);
+	const home = deps.home ?? env.HOME ?? homedir();
+	const initEnv: NodeJS.ProcessEnv = { ...env, HOME: home };
+	const configFile = configPath(initEnv);
 	const existing = readConfigFile(configFile) as Record<string, any>;
-	const current = loadConfig(env);
-	const envFile = current.envFile ?? expand(env.ZOTERO_MCP_ENV ?? join(home, ".config", "zotero-local-mcp", "env"));
+	const current = loadConfig(initEnv);
+	const envFile = current.envFile ?? expand(initEnv.ZOTERO_MCP_ENV ?? join(home, ".config", "zotero-local-mcp", "env"), home);
 	const envValues = existsSync(envFile) ? parseEnvFile(envFile) : {};
 	const created: string[] = [];
 
@@ -109,6 +110,7 @@ export async function runInit(
 	const language = (await io.ask("Language for replies and notes (a language, or auto for the language you write in)", flags.language ?? existing.language ?? "English")).trim() || "English";
 	const notes = expand(
 		(await io.ask("Notes folder (Markdown files; an Obsidian vault works)", flags.notes ?? current.vault ?? envValues.ZOTERO_VAULT ?? join(home, "Documents", "Sub-Sub"))).trim(),
+		home,
 	);
 	const profileDefault = flags.profile ?? existing.profile ?? (fmup ? "reader" : "scholar");
 	const profile = await io.choose(
@@ -117,7 +119,7 @@ export async function runInit(
 		isProfile(profileDefault) ? profileDefault : "scholar",
 	);
 
-	const vocab = envValues.ZOTERO_VOCAB ? expand(envValues.ZOTERO_VOCAB) : join(notes, "Systems", "Zotero tags.md");
+	const vocab = envValues.ZOTERO_VOCAB ? expand(envValues.ZOTERO_VOCAB, home) : join(notes, "Systems", "Zotero tags.md");
 	let tags = "keep";
 	if (existsSync(vocab)) {
 		io.say(`Tag list: keeping ${vocab}.`);
@@ -136,7 +138,7 @@ export async function runInit(
 		{ value: "later", label: "Choose later in Sub-Sub (/login, then /model)" },
 		{ value: "opencode-go", label: `OpenCode Go, tested: ${TESTED_MODELS.librarian} for the librarian, ${TESTED_MODELS.researcher} for the researcher` },
 	];
-	const agentDir = env.SUBSUB_AGENT_DIR ? expand(env.SUBSUB_AGENT_DIR) : join(home, ".subsub", "agent");
+	const agentDir = initEnv.SUBSUB_AGENT_DIR ? expand(initEnv.SUBSUB_AGENT_DIR, home) : join(home, ".subsub", "agent");
 	const modelDefault = existing.models ? "keep" : hasProvider(agentDir, "opencode") ? "opencode-go" : "later";
 	const models = await io.choose("Models", modelOptions, flags.models ?? modelDefault);
 
@@ -172,7 +174,7 @@ export async function runInit(
 	};
 	if (models === "later") patch.models = {};
 	if (models === "opencode-go") patch.models = TESTED_MODELS;
-	saveConfig(patch, env);
+	saveConfig(patch, initEnv);
 
 	const zotero = await zoteroReachable(deps.fetch);
 	io.say("");

package/web/app.css

@@ -14,7 +14,7 @@
 	--side-w: 17rem;
 }
 @media (prefers-color-scheme: dark) {
-	:root {
+	:root:not([data-theme="light"]) {
 		--gl-bg: #10161c;
 		--gl-surface: #171f26;
 		--gl-surface-raised: #1f2932;
@@ -31,9 +31,28 @@
 		--warn: #e3b35c;
 	}
 }
+[data-theme="dark"], html[data-theme="dark"] {
+	--gl-bg: #10161c;
+	--gl-surface: #171f26;
+	--gl-surface-raised: #1f2932;
+	--gl-text: #e8eef2;
+	--gl-text-muted: #9aa4ab;
+	--gl-border: #2a3540;
+	--gl-accent: #3d97ff;
+	--gl-accent-bright: #6cb2ff;
+	--gl-accent-deep: #007aff;
+	--gl-on-accent: #0b1218;
+	--gl-tint-pale: #93b7c9;
+	--add: #8fcf9a;
+	--rem: #f0a39c;
+	--warn: #e3b35c;
+}
 body[data-mode="librarian"] { --mode: #a8520f; --mode-deep: #7f3d09; --on-mode: #fff8f0; }
 @media (prefers-color-scheme: dark) {
-	body[data-mode="librarian"] { --mode: #e0832a; --mode-deep: #f09a48; --on-mode: #140c04; }
+	:root:not([data-theme="light"]) body[data-mode="librarian"] { --mode: #e0832a; --mode-deep: #f09a48; --on-mode: #140c04; }
+}
+[data-theme="dark"] body[data-mode="librarian"], html[data-theme="dark"] body[data-mode="librarian"] {
+	--mode: #e0832a; --mode-deep: #f09a48; --on-mode: #140c04;
 }
 
 *, *::before, *::after { box-sizing: border-box; }
@@ -41,6 +60,7 @@ html, body { height: 100%; }
 body {
 	margin: 0; background: var(--gl-bg); color: var(--gl-text);
 	font-family: var(--gl-font-sans); font-size: 1rem; line-height: 1.55;
+	transition: background-color 0.2s ease, color 0.2s ease;
 }
 button, input, select, textarea { font: inherit; color: inherit; }
 a { color: var(--gl-accent); }
@@ -74,23 +94,34 @@ button:disabled { opacity: 0.5; cursor: default; }
 .modes button { border-radius: var(--gl-radius-pill); padding: 0.3rem 0.9rem; color: var(--gl-text-muted); }
 .modes button[aria-pressed="true"] { background: var(--mode); color: var(--on-mode); font-weight: 600; }
 .status { margin-left: auto; display: flex; align-items: center; gap: 0.5rem 0.9rem; flex-wrap: wrap; font-size: 0.88rem; }
-.library { color: var(--gl-text-muted); }
+.library { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--gl-text-muted); }
+.library-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--gl-border); flex: none; transition: background 0.2s ease, box-shadow 0.2s ease; }
+.library.reachable .library-dot { background: var(--add); box-shadow: 0 0 6px var(--add); }
+.library.down .library-dot { background: var(--rem); box-shadow: 0 0 6px var(--rem); }
 .library.down { color: var(--rem); font-weight: 600; }
+.library.checking .library-dot { background: var(--warn); animation: pulse 1.2s ease-in-out infinite; }
 .status select { border: 1px solid var(--gl-border); border-radius: var(--gl-radius-md); background: var(--gl-surface-raised); padding: 0.3rem 0.5rem; }
-.model-btn { font-family: var(--gl-font-mono); font-size: 0.8rem; border: 1px solid var(--gl-border); }
+.model-btn, .theme-btn { font-family: var(--gl-font-mono); font-size: 0.8rem; border: 1px solid var(--gl-border); }
+.theme-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.6rem; }
 
 .side { border-right: 1px solid var(--gl-border); background: var(--gl-surface); padding: 1rem; display: flex; flex-direction: column; gap: 1.25rem; overflow-y: auto; }
 .side h2 { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gl-text-muted); margin: 0 0 0.5rem; font-weight: 600; }
-.side .grow { flex: 1; }
+.side .grow { flex: 1; display: flex; flex-direction: column; min-height: 0; }
+.side-subhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
+.side-subhead h2 { margin: 0; }
+.search-wrap { margin-bottom: 0.6rem; }
+.search-wrap input { width: 100%; font-size: 0.8rem; padding: 0.35rem 0.55rem; border: 1px solid var(--gl-border); border-radius: var(--gl-radius-md); background: var(--gl-surface-raised); color: var(--gl-text); }
+.search-wrap input:focus { outline: none; border-color: var(--mode); }
 .actions { display: flex; flex-direction: column; gap: 0.25rem; }
 .actions button { text-align: left; padding: 0.35rem 0.6rem; border-radius: var(--gl-radius-md); }
 .actions button:hover { background: var(--gl-bg); }
 .actions hr { border: 0; border-top: 1px solid var(--gl-border); margin: 0.35rem 0; width: 100%; }
-.sessions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
-.sessions button { width: 100%; text-align: left; padding: 0.4rem 0.6rem; display: block; }
+.sessions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; overflow-y: auto; flex: 1; }
+.sessions button { width: 100%; text-align: left; padding: 0.4rem 0.6rem; display: block; border-radius: var(--gl-radius-md); }
 .sessions button:hover { background: var(--gl-bg); }
 .sessions .current button { background: var(--gl-bg); border-color: var(--gl-border); }
-.sessions .when { display: block; font-size: 0.75rem; color: var(--gl-text-muted); }
+.sessions .when { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--gl-text-muted); margin-top: 0.15rem; }
+.sessions .badge { font-family: var(--gl-font-mono); font-size: 0.7rem; background: var(--gl-surface-raised); border: 1px solid var(--gl-border); border-radius: var(--gl-radius-sm); padding: 0 0.3rem; }
 .sessions .what { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.88rem; }
 .side-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
 .version { font-size: 0.75rem; color: var(--gl-text-muted); font-family: var(--gl-font-mono); }
@@ -112,6 +143,27 @@ button:disabled { opacity: 0.5; cursor: default; }
 .md code { font-family: var(--gl-font-mono); font-size: 0.86em; background: var(--gl-surface); border: 1px solid var(--gl-border); border-radius: var(--gl-radius-sm); padding: 0.05em 0.3em; }
 .md pre { background: var(--gl-surface); border: 1px solid var(--gl-border); border-radius: var(--gl-radius-md); padding: 0.75rem; overflow-x: auto; font-size: 0.85rem; }
 .md pre code { background: none; border: 0; padding: 0; }
+.pre-wrap { position: relative; margin: 0.6rem 0; }
+.pre-wrap pre { margin: 0; }
+.copy-btn {
+	position: absolute; top: 0.4rem; right: 0.4rem;
+	font-family: var(--gl-font-mono); font-size: 0.72rem;
+	background: var(--gl-surface-raised); border: 1px solid var(--gl-border);
+	border-radius: var(--gl-radius-sm); padding: 0.15rem 0.5rem;
+	color: var(--gl-text-muted); cursor: pointer; opacity: 0;
+	transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+	z-index: 2;
+}
+.pre-wrap:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; }
+.copy-btn:hover { color: var(--gl-text); border-color: var(--mode); }
+.copy-btn.copied { opacity: 1; color: var(--add); border-color: var(--add); }
+
+.msg-actions { display: flex; gap: 0.4rem; margin-top: 0.45rem; opacity: 0; transition: opacity 0.15s ease; }
+.msg.assistant:hover .msg-actions, .msg-actions:focus-within { opacity: 1; }
+.msg-action-btn { font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: var(--gl-radius-sm); color: var(--gl-text-muted); border: 1px solid transparent; background: none; }
+.msg-action-btn:hover { color: var(--gl-text); background: var(--gl-surface-raised); border-color: var(--gl-border); }
+.msg-action-btn.copied { color: var(--add); border-color: var(--add); }
+
 .md blockquote { margin: 0.6rem 0; padding-left: 0.9rem; border-left: 3px solid var(--gl-tint-pale); color: var(--gl-text-muted); }
 .md table { border-collapse: collapse; display: block; overflow-x: auto; font-size: 0.9rem; }
 .md th, .md td { border-bottom: 1px solid var(--gl-border); padding: 0.3rem 0.6rem; text-align: left; vertical-align: top; }
@@ -158,14 +210,15 @@ button:disabled { opacity: 0.5; cursor: default; }
 /* ---- dialogs */
 .modal { border: 1px solid var(--gl-border); border-radius: var(--gl-radius-lg); background: var(--gl-surface-raised); color: var(--gl-text); padding: 1.25rem 1.4rem; width: min(40rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5); }
 .modal.wide { width: min(46rem, calc(100vw - 2rem)); }
-.modal::backdrop { background: rgba(16, 22, 28, 0.55); }
+.modal::backdrop { background: rgba(16, 22, 28, 0.55); backdrop-filter: blur(2px); }
 .modal h2 { font-family: var(--gl-font-serif); font-size: 1.25rem; margin: 0 0 0.25rem; }
 .modal h3 { font-size: 0.95rem; margin: 1.25rem 0 0.5rem; }
 .modal .hint { color: var(--gl-text-muted); margin: 0 0 0.75rem; font-size: 0.9rem; }
 .preview { font-family: var(--gl-font-mono); font-size: 0.82rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--gl-surface); border: 1px solid var(--gl-border); border-radius: var(--gl-radius-md); padding: 0.75rem; max-height: 55vh; overflow-y: auto; margin: 0 0 1rem; }
-.preview .add { color: var(--add); font-weight: 600; }
-.preview .rem { color: var(--rem); font-weight: 600; }
-.modal-buttons { display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
+.preview .add { color: var(--add); background: rgba(29, 122, 58, 0.12); padding: 0.1em 0.35em; border-radius: var(--gl-radius-sm); font-weight: 600; }
+.preview .rem { color: var(--rem); background: rgba(179, 38, 30, 0.12); padding: 0.1em 0.35em; border-radius: var(--gl-radius-sm); font-weight: 600; }
+.modal-buttons { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
+.modal-shortcut-hint { font-size: 0.76rem; color: var(--gl-text-muted); font-family: var(--gl-font-mono); margin-right: auto; }
 .modal-head { display: flex; justify-content: space-between; align-items: center; }
 .modal input[type="text"], .modal input[type="password"], .modal textarea, .modal select { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--gl-border); border-radius: var(--gl-radius-md); background: var(--gl-bg); }
 .modal textarea { min-height: 12rem; font-family: var(--gl-font-mono); font-size: 0.85rem; }

package/web/app.js

@@ -77,11 +77,49 @@ function md(text) {
 	}
 }
 
-// ---------------------------------------------------------------- header, side panel
+// ---------------------------------------------------------------- theme & language
+
+let currentTheme = localStorage.getItem("subsub-theme") || "auto";
+
+function themeLabel(theme) {
+	if (theme === "light") return t("themeLight");
+	if (theme === "dark") return t("themeDark");
+	return t("themeAuto");
+}
+
+function updateThemeUI() {
+	const icon = currentTheme === "light" ? "☀️" : currentTheme === "dark" ? "🌙" : "💻";
+	const label = `${icon} ${themeLabel(currentTheme)}`;
+	const btn = $("theme-btn");
+	if (btn) {
+		btn.textContent = label;
+		btn.title = t("themeToggle");
+	}
+	const sideBtn = $("theme-btn-side");
+	if (sideBtn) sideBtn.textContent = label;
+}
+
+function setTheme(theme) {
+	currentTheme = theme;
+	localStorage.setItem("subsub-theme", theme);
+	if (theme === "auto") {
+		delete document.documentElement.dataset.theme;
+	} else {
+		document.documentElement.dataset.theme = theme;
+	}
+	updateThemeUI();
+}
+
+function toggleTheme() {
+	if (currentTheme === "auto") setTheme("light");
+	else if (currentTheme === "light") setTheme("dark");
+	else setTheme("auto");
+}
 
 function applyLang() {
 	document.documentElement.lang = lang === "pt" ? "pt-PT" : "en";
 	for (const e of document.querySelectorAll("[data-i18n]")) e.textContent = t(e.dataset.i18n);
+	updateThemeUI();
 }
 
 function mode() {
@@ -95,24 +133,29 @@ function renderHeader() {
 	const m = state?.model ?? session?.model;
 	$("model-btn").textContent = $("model-btn-side").textContent = m ? m.id : t("noModel");
 	const lib = $("library");
+	const txt = lib.querySelector(".library-text") ?? lib;
 	const L = state?.library;
-	lib.classList.remove("down");
-	if (!L || L.zotero === "checking") lib.textContent = t("zoteroChecking");
-	else if (L.zotero === "down") {
-		lib.textContent = t("zoteroDown");
+	lib.classList.remove("down", "reachable", "checking");
+	if (!L || L.zotero === "checking") {
+		txt.textContent = t("zoteroChecking");
+		lib.classList.add("checking");
+	} else if (L.zotero === "down") {
+		txt.textContent = t("zoteroDown");
 		lib.classList.add("down");
 	} else {
 		const parts = [t("items", { n: L.items ?? "?" })];
 		if (L.toReview) parts.push(t("toReview", { n: L.toReview }));
-		lib.textContent = `Zotero: ${parts.join(", ")}`;
+		txt.textContent = `Zotero: ${parts.join(", ")}`;
+		lib.classList.add("reachable");
 	}
 	if (state?.down?.length) {
-		lib.textContent += ` | ${t("serversDown", { x: state.down.join(", ") })}`;
+		txt.textContent += ` | ${t("serversDown", { x: state.down.join(", ") })}`;
 		lib.classList.add("down");
 	}
 	$("input").placeholder = mode() === "librarian" ? t("placeholderLibrarian") : t("placeholderResearcher");
 	renderActions();
 	renderBanner();
+	updateThemeUI();
 }
 
 function hasCommand(name) {
@@ -156,21 +199,21 @@ function renderBanner() {
 	} else b.hidden = true;
 }
 
-async function loadSessions() {
-	let list = [];
-	try {
-		list = (await api("/api/sessions")).sessions ?? [];
-	} catch {
-		return;
-	}
+let loadedSessions = [];
+
+function renderSessionsList(filterText = "") {
 	const ul = $("sessions");
 	ul.replaceChildren();
-	if (!list.length) {
+	const q = filterText.trim().toLowerCase();
+	const filtered = q
+		? loadedSessions.filter((s) => (s.name || s.first || "").toLowerCase().includes(q))
+		: loadedSessions;
+	if (!filtered.length) {
 		ul.append(el("li", { class: "muted small", text: t("noConversations") }));
 		return;
 	}
 	const fmt = new Intl.DateTimeFormat(lang === "pt" ? "pt-PT" : "en-GB", { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" });
-	for (const s of list) {
+	for (const s of filtered) {
 		const current = session?.sessionFile === s.path;
 		ul.append(
 			el(
@@ -192,13 +235,57 @@ async function loadSessions() {
 						},
 					},
 					el("span", { class: "what", text: s.name || s.first || "…" }),
-					el("span", { class: "when", text: fmt.format(new Date(s.modified)) }),
+					el(
+						"span",
+						{ class: "when" },
+						el("span", { text: fmt.format(new Date(s.modified)) }),
+						s.messages ? el("span", { class: "badge", text: `${s.messages}` }) : null,
+					),
 				),
 			),
 		);
 	}
 }
 
+async function loadSessions() {
+	try {
+		loadedSessions = (await api("/api/sessions")).sessions ?? [];
+	} catch {
+		return;
+	}
+	renderSessionsList($("session-search")?.value ?? "");
+}
+
+function exportConversation() {
+	const msgs = [];
+	const items = log.querySelectorAll(".msg");
+	if (!items.length) {
+		note(t("noConversations"), "warning");
+		return;
+	}
+	for (const m of items) {
+		if (m.classList.contains("user")) {
+			const text = m.querySelector(".bubble")?.innerText ?? "";
+			if (text && text !== "/subsub-refresh") msgs.push(`### User\n\n${text}\n`);
+		} else if (m.classList.contains("assistant")) {
+			const text = Array.from(m.querySelectorAll(".md")).map((d) => d.innerText).join("\n\n");
+			if (text) msgs.push(`### Sub-Sub (${mode()})\n\n${text}\n`);
+		}
+	}
+	if (!msgs.length) return;
+	const date = new Date().toISOString().slice(0, 10);
+	const content = `# Sub-Sub Research Session (${date})\n\n**Mode**: ${mode()}  \n**Profile**: ${state?.profile ?? "scholar"}  \n\n---\n\n${msgs.join("\n---\n\n")}`;
+	const blob = new Blob([content], { type: "text/markdown;charset=utf-8" });
+	const url = URL.createObjectURL(blob);
+	const a = document.createElement("a");
+	a.href = url;
+	a.download = `Sub-Sub-${mode()}-${date}.md`;
+	document.body.append(a);
+	a.click();
+	a.remove();
+	URL.revokeObjectURL(url);
+}
+
 function closeSide() {
 	$("side").classList.remove("open");
 	$("menu-btn").setAttribute("aria-expanded", "false");
@@ -261,6 +348,7 @@ function textOf(content) {
 const sentTemplates = [];
 
 function userMessage(text) {
+	if (String(text).trim() === "/subsub-refresh") return;
 	clearEmpty();
 	let bubble;
 	if (text.length > 700) {
@@ -332,6 +420,35 @@ function finishTool(id, result, isError) {
 	if (isError) row.querySelector(".label").textContent = `${toolLabel(row.dataset.name)} (${t("failed")})`;
 }
 
+function attachCopyButtons(root) {
+	for (const pre of root.querySelectorAll("pre")) {
+		if (pre.parentElement?.classList.contains("pre-wrap")) continue;
+		const wrap = el("div", { class: "pre-wrap" });
+		pre.parentNode.insertBefore(wrap, pre);
+		wrap.append(pre);
+		const btn = el("button", {
+			type: "button",
+			class: "copy-btn",
+			text: t("copy"),
+			onclick: async () => {
+				const code = pre.querySelector("code")?.innerText ?? pre.innerText;
+				try {
+					await navigator.clipboard.writeText(code);
+					btn.textContent = t("copied");
+					btn.classList.add("copied");
+					setTimeout(() => {
+						btn.textContent = t("copy");
+						btn.classList.remove("copied");
+					}, 2000);
+				} catch {
+					btn.textContent = t("error");
+				}
+			},
+		});
+		wrap.append(btn);
+	}
+}
+
 /** A container for one assistant message; blocks are keyed by content index. */
 function startAssistant() {
 	clearEmpty();
@@ -357,6 +474,7 @@ function paint(msg) {
 		msg.raf = 0;
 		for (const b of msg.blocks.values()) if (b.kind === "text" && b.dirty) {
 			b.node.innerHTML = md(b.text);
+			attachCopyButtons(b.node);
 			b.dirty = false;
 		}
 		scrollDown();
@@ -366,10 +484,13 @@ function paint(msg) {
 function renderAssistantFinal(message, msg = startAssistant()) {
 	msg.box.replaceChildren();
 	msg.blocks.clear();
+	let fullText = "";
 	for (const c of message.content ?? []) {
 		if (c.type === "text" && c.text?.trim()) {
+			fullText += (fullText ? "\n\n" : "") + c.text;
 			const node = el("div", { class: "md" });
 			node.innerHTML = md(c.text);
+			attachCopyButtons(node);
 			msg.box.append(node);
 		} else if (c.type === "toolCall") {
 			const row = toolRow(c.id, c.name, c.arguments);
@@ -377,6 +498,32 @@ function renderAssistantFinal(message, msg = startAssistant()) {
 			msg.box.append(row);
 		}
 	}
+	if (fullText.trim()) {
+		const actions = el(
+			"div",
+			{ class: "msg-actions" },
+			el("button", {
+				type: "button",
+				class: "msg-action-btn",
+				text: t("copyNote"),
+				onclick: async (e) => {
+					const btn = e.currentTarget;
+					try {
+						await navigator.clipboard.writeText(fullText);
+						btn.textContent = t("copied");
+						btn.classList.add("copied");
+						setTimeout(() => {
+							btn.textContent = t("copyNote");
+							btn.classList.remove("copied");
+						}, 2000);
+					} catch {
+						btn.textContent = t("error");
+					}
+				},
+			}),
+		);
+		msg.box.append(actions);
+	}
 	if (message.stopReason === "error" && message.errorMessage) msg.box.append(el("div", { class: "note error", text: message.errorMessage }));
 	if (message.stopReason === "aborted") msg.box.append(el("div", { class: "note", text: t("stopped") }));
 	if (!msg.box.children.length) msg.box.remove();
@@ -388,7 +535,11 @@ function renderHistory(messages) {
 	toolRows.clear();
 	currentMsg = null;
 	for (const m of messages ?? []) {
-		if (m.role === "user") userMessage(textOf(m.content));
+		if (m.role === "user") {
+			const txt = textOf(m.content).trim();
+			if (txt === "/subsub-refresh") continue;
+			userMessage(txt);
+		}
 		else if (m.role === "assistant") renderAssistantFinal(m);
 		else if (m.role === "toolResult") finishTool(m.toolCallId, m, m.isError);
 		else if (m.role === "custom" && m.display) note(textOf(m.content));
@@ -447,7 +598,10 @@ function onEvent(ev) {
 			refreshSession();
 			break;
 		case "message_start":
-			if (ev.message?.role === "user") userMessage(sentTemplates.shift() ?? textOf(ev.message.content));
+			if (ev.message?.role === "user") {
+				const txt = (sentTemplates.shift() ?? textOf(ev.message.content)).trim();
+				if (txt !== "/subsub-refresh") userMessage(txt);
+			}
 			else if (ev.message?.role === "assistant") startAssistant();
 			else if (ev.message?.role === "custom" && ev.message.display) note(textOf(ev.message.content));
 			if (working) log.append(working);
@@ -599,6 +753,7 @@ function nextDialog() {
 	};
 	if (d.method === "confirm") {
 		buttons.append(
+			el("span", { class: "modal-shortcut-hint", text: t("confirmShortcutHint") }),
 			el("button", { type: "button", class: "secondary", text: t("no"), onclick: () => answer({ confirmed: false }) }),
 			el("button", { type: "button", class: "primary", text: t("yes"), onclick: () => answer({ confirmed: true }) }),
 		);
@@ -614,6 +769,17 @@ function nextDialog() {
 			el("button", { type: "button", class: "primary", text: t("ok"), onclick: () => answer({ value: field.value }) }),
 		);
 	}
+	dlg.onkeydown = (e) => {
+		if (d.method === "confirm") {
+			if (e.key === "y" || e.key === "Y" || (e.key === "Enter" && (e.metaKey || e.ctrlKey))) {
+				e.preventDefault();
+				answer({ confirmed: true });
+			} else if (e.key === "n" || e.key === "N") {
+				e.preventDefault();
+				answer({ confirmed: false });
+			}
+		}
+	};
 	dlg.oncancel = (e) => {
 		e.preventDefault();
 		answer(d.method === "confirm" ? { confirmed: false } : { cancelled: true });
@@ -823,6 +989,13 @@ $("menu-btn").addEventListener("click", (e) => {
 	side.classList.toggle("open");
 	$("menu-btn").setAttribute("aria-expanded", String(side.classList.contains("open")));
 });
+$("theme-btn")?.addEventListener("click", toggleTheme);
+$("theme-btn-side")?.addEventListener("click", () => {
+	closeSide();
+	toggleTheme();
+});
+$("session-search")?.addEventListener("input", (e) => renderSessionsList(e.target.value));
+$("export-btn")?.addEventListener("click", exportConversation);
 $("quit-btn").addEventListener("click", async () => {
 	try {
 		await api("/api/quit", {});
@@ -855,5 +1028,6 @@ function connect() {
 	};
 }
 
+setTheme(currentTheme);
 applyLang();
 connect();

package/web/glauca.css

@@ -45,7 +45,9 @@
 
 /* Pruina is the light default; Profundum is dark. */
 :root,
-[data-mode="light"] {
+[data-mode="light"],
+[data-theme="light"],
+html[data-theme="light"] {
   --gl-bg: #f0f4f6;
   --gl-surface: #f7fafb;
   --gl-surface-raised: #ffffff;
@@ -63,7 +65,9 @@
   --gl-on-tint: #f2f7fb;
 }
 
-[data-mode="dark"] {
+[data-mode="dark"],
+[data-theme="dark"],
+html[data-theme="dark"] {
   --gl-bg: #10161c;
   --gl-surface: #171f26;
   --gl-surface-raised: #1f2932;
@@ -80,3 +84,23 @@
   --gl-tint-pale: #93b7c9;
   --gl-on-tint: #0d1720;
 }
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --gl-bg: #10161c;
+    --gl-surface: #171f26;
+    --gl-surface-raised: #1f2932;
+    --gl-text: #e8eef2;
+    --gl-text-muted: #8c8c8c;
+    --gl-border: #2a3540;
+    --gl-accent: #3d97ff;
+    --gl-accent-bright: #6cb2ff;
+    --gl-accent-deep: #007aff;
+    --gl-on-accent: #0b1218;
+    --gl-tint-deep: #142430;
+    --gl-tint: #2b4356;
+    --gl-tint-bright: #4d7391;
+    --gl-tint-pale: #93b7c9;
+    --gl-on-tint: #0d1720;
+  }
+}

package/web/i18n.js

@@ -63,6 +63,18 @@ export const STRINGS = {
 		menu: "Menu",
 		commands: "Commands",
 		error: "Error",
+		theme: "Theme",
+		themeAuto: "System",
+		themeLight: "Light",
+		themeDark: "Dark",
+		themeToggle: "Toggle theme",
+		copy: "Copy",
+		copied: "Copied!",
+		copyNote: "Copy text",
+		searchConversations: "Search conversations...",
+		export: "Export",
+		exportTitle: "Export conversation",
+		confirmShortcutHint: "Y to approve, N to decline",
 	},
 	pt: {
 		researcher: "Investigador",
@@ -125,6 +137,18 @@ export const STRINGS = {
 		menu: "Menu",
 		commands: "Comandos",
 		error: "Erro",
+		theme: "Tema",
+		themeAuto: "Sistema",
+		themeLight: "Claro",
+		themeDark: "Escuro",
+		themeToggle: "Mudar tema",
+		copy: "Copiar",
+		copied: "Copiado!",
+		copyNote: "Copiar texto",
+		searchConversations: "Procurar conversas...",
+		export: "Exportar",
+		exportTitle: "Exportar conversa",
+		confirmShortcutHint: "Y para aprovar, N para recusar",
 	},
 };
 

package/web/index.html

@@ -20,7 +20,7 @@
 				<button type="button" data-mode="librarian" aria-pressed="false" data-i18n="librarian">Librarian</button>
 			</div>
 			<div class="status">
-				<span class="library" id="library"></span>
+				<span class="library" id="library"><span class="library-dot" aria-hidden="true"></span><span class="library-text"></span></span>
 				<label class="profile"><span class="visually-hidden" data-i18n="profile">Profile</span>
 					<select id="profile">
 						<option value="reader">Reader</option>
@@ -30,6 +30,7 @@
 					</select>
 				</label>
 				<button type="button" class="ghost model-btn" id="model-btn"></button>
+				<button type="button" class="ghost theme-btn" id="theme-btn" aria-label="Toggle theme" title="Toggle theme"></button>
 			</div>
 		</header>
 
@@ -47,13 +48,22 @@
 				<label><span data-i18n="model">Model</span>
 					<button type="button" class="secondary model-btn" id="model-btn-side"></button>
 				</label>
+				<label><span data-i18n="theme">Theme</span>
+					<button type="button" class="secondary theme-btn" id="theme-btn-side"></button>
+				</label>
 			</section>
 			<section>
 				<h2 data-i18n="actions">Actions</h2>
 				<div class="actions" id="actions"></div>
 			</section>
 			<section class="grow">
-				<h2 data-i18n="conversations">Conversations</h2>
+				<div class="side-subhead">
+					<h2 data-i18n="conversations">Conversations</h2>
+					<button type="button" class="ghost small" id="export-btn" title="Export conversation as Markdown" data-i18n="export">Export</button>
+				</div>
+				<div class="search-wrap">
+					<input type="search" id="session-search" placeholder="Search conversations..." autocomplete="off">
+				</div>
 				<ul class="sessions" id="sessions"></ul>
 			</section>
 			<footer class="side-foot">