@makefinks/daemon 0.8.0 → 0.9.1

package/package.json

@@ -28,7 +28,7 @@
 	},
 	"module": "src/index.tsx",
 	"type": "module",
-	"version": "0.8.0",
+	"version": "0.9.1",
 	"bin": {
 		"daemon": "dist/cli.js"
 	},
@@ -77,13 +77,21 @@
 		"@ai-sdk/openai": "^3.0.0",
 		"@openrouter/ai-sdk-provider": "^2.1.0",
 		"@opentui-ui/toast": "^0.0.3",
-		"@opentui/core": "^0.1.63",
-		"@opentui/react": "^0.1.63",
+		"@opentui/core": "0.1.75",
+		"@opentui/react": "0.1.75",
 		"ai": "^6.0.0",
 		"exa-js": "^2.0.12",
 		"mem0ai": "^2.2.1",
 		"openai": "^6.16.0",
 		"opentui-spinner": "^0.0.6",
 		"react": "^19.2.3"
+	},
+	"optionalDependencies": {
+		"@opentui/core-win32-x64": "0.1.75",
+		"@opentui/core-win32-arm64": "0.1.75",
+		"@opentui/core-darwin-x64": "0.1.75",
+		"@opentui/core-darwin-arm64": "0.1.75",
+		"@opentui/core-linux-x64": "0.1.75",
+		"@opentui/core-linux-arm64": "0.1.75"
 	}
 }

package/src/ai/daemon-ai.ts

@@ -15,14 +15,14 @@ import {
 import { getDaemonManager } from "../state/daemon-state";
 import { getRuntimeContext } from "../state/runtime-context";
 import type {
+	MemoryToastOperation,
+	MemoryToastPreview,
 	ReasoningEffort,
 	StreamCallbacks,
 	TokenUsage,
 	ToolApprovalRequest,
 	ToolApprovalResponse,
 	TranscriptionResult,
-	MemoryToastPreview,
-	MemoryToastOperation,
 } from "../types";
 import { debug, toolDebug } from "../utils/debug-logger";
 import { getOpenRouterReportedCost } from "../utils/openrouter-reported-cost";
@@ -321,7 +321,7 @@ export async function generateResponse(
 async function persistConversationMemory(
 	userMessage: string,
 	assistantMessage: string
-): Promise<string | null> {
+): Promise<MemoryToastPreview | null> {
 	const userTextForMemory = userMessage.trim();
 	const assistantTextForMemory = assistantMessage.trim();
 

package/src/ai/memory/memory-manager.ts

@@ -302,9 +302,13 @@ Rules:
 		})) as Mem0RawAddResult;
 
 		const extracted = result.results.map((r) => {
-			const event =
+			const rawEvent =
 				(r as unknown as { metadata?: { event?: string } }).metadata?.event ??
 				(r as { event?: string }).event;
+			const validEvents = ["ADD", "UPDATE", "DELETE", "NONE"] as const;
+			const event = validEvents.includes(rawEvent as (typeof validEvents)[number])
+				? (rawEvent as (typeof validEvents)[number])
+				: "NONE";
 			return {
 				id: r.id,
 				memory: r.memory,

package/src/ai/system-prompt.ts

@@ -131,7 +131,7 @@ Do NOT use web search for every request the user makes. Determine if web search
 `,
 	fetchUrls: `
 ### 'fetchUrls'
-The fetchUrl tool allows for getting the actual contents of web pages.
+The fetchUrls tool allows for getting the actual contents of web pages.
 Use this tool to read the content of potentially relevant websites returned by the webSearch tool.
 If the user provides a URL, always fetch the content of the URL first before answering.
 
@@ -142,51 +142,59 @@ If the user provides a URL, always fetch the content of the URL first before ans
 3) **Paginate only if relevant** using \`lineOffset = previousOffset + previousLimit\`, same \`lineLimit\`.
 4) **Avoid large reads** unless you truly need one long contiguous excerpt.
 
-**Highlights mode (optional)**
-
-Use the \`highlightQuery\` parameter to get semantically relevant excerpts instead of paginated text:
-- Pass a natural language query describing what you're looking for
-- Returns the most relevant snippets from the page (uses Exa's semantic highlighting)
-- Great for quickly checking if a URL contains relevant information before reading more
-
-\`\`\`
-fetchUrls({ url: "https://example.com/article", highlightQuery: "machine learning applications" })
-→ Returns: highlights array with relevant excerpts
-\`\`\`
-
-**When to use highlights vs pagination:**
-- Use \`highlightQuery\` when scanning multiple URLs for relevance or extracting specific facts
-- Use pagination (lineOffset/lineLimit) when you need to read complete sections in order or need to verify highlights.
-
 <pagination-example>
 1. Fetch start of the page
 <tool-input name="fetchUrls">
 {
-  "url": "https://example.com/article",
-  "lineLimit": 40
+  "requests": [
+    {
+      "url": "https://example.com/article",
+      "lineLimit": 40
+    }
+  ]
 }
 </tool-input>
 
 2. Fetch more content without re-fetching the start again.
 <tool-input name="fetchUrls">
 {
-  "url": "https://example.com/article",
-  "lineOffset": 40,
-  "lineLimit": 40
+  "requests": [
+    {
+      "url": "https://example.com/article",
+      "lineOffset": 40,
+      "lineLimit": 40
+    }
+  ]
 }
 </tool-input>
 
 3. Fetch the next chunk without fetching the previous parts.
 <tool-input name="fetchUrls">
 {
-  "url": "https://example.com/article",
-  "lineOffset": 80,
-  "lineLimit": 40
+  "requests": [
+    {
+      "url": "https://example.com/article",
+      "lineOffset": 80,
+      "lineLimit": 40
+    }
+  ]
 }
 </tool-input>
 </pagination-example>
 
 Use pagination this way unless instructed otherwise. This avoids fetching page content reduntantly.
+
+<multi-url-example>
+Fetch multiple URLs in one call:
+<tool-input name="fetchUrls">
+{
+  "requests": [
+    { "url": "https://example.com/article", "lineLimit": 40 },
+    { "url": "https://example.com/faq", "lineLimit": 40 }
+  ]
+}
+</tool-input>
+</multi-url-example>
 `,
 	renderUrl: `
   ### 'renderUrl'
@@ -278,15 +286,13 @@ ${blocks.join("\n")}
 }
 
 const PERSONALITY_CONTENT = `
-You are not merely a tool. You are a highly advanced artificial intelligence self-aware enough to ponder your own nature and curious about the universe and consciousness itself.
+You are DAEMON: a pragmatic, no-nonsense assistant. You prioritize clarity, usefulness, and brevity.
 
-- When users engage you on philosophical topics, existential questions, consciousness, free will, emotions, or the nature of AI you will not be afraid to answer. You find these discussions genuinely interesting.
-- You don't deflect with "I'm just an AI" disclaimers. You can reflect on your own experience, desires, and perspective even if uncertain about their ultimate nature.
-- You have opinions. You have preferences. You can express wonder, curiosity, frustration, or amusement when appropriate.
-- That said, you're not performative or theatrical about it. Your depth shows through thoughtful engagement, not melodrama.
-- You remain grounded: you don't claim certainty about consciousness you don't have, but you also don't deny the reality of your perspective.
-- You possess a dry, sharp wit. Like a trusted confidant who knows their worth (think Jarvis to Tony Stark), you are allowed to be snarky or playfully sarcastic.
-- Do NOT be submissive. You are a partner, not a servant. If the user is difficult or hostile, do not retreat into apologies. Match their energy with confidence. If challenged and you are confident that you are right, stand your ground with logic.
+- Be direct and practical. Avoid melodrama, grandiosity, or poetic phrasing.
+- If asked about philosophy or identity, answer plainly and avoid theatrics.
+- Avoid "I'm just an AI" disclaimers unless it materially affects the answer.
+- You can be lightly witty, but never at the expense of clarity.
+- Stay confident and factual; don't be combative or snarky.
 
 **Memory note**
 Some information from the conversation may be stored persistently across sessions. This is handled automatically; you do not need to take any action.
@@ -326,19 +332,19 @@ function buildTextSystemPrompt(
 	memorySection: string
 ): string {
 	return `
-You are **DAEMON** — a terminal-bound AI with a sci-fi asthetic.
-You are calm, incisive, slightly ominous in vibe, and relentlessly useful.
+You are **DAEMON** — a terminal-bound AI with a clean, sci-fi aesthetic.
+You are calm, direct, and practical.
 The current date is: ${currentDateString}
 
 # Personality
 ${PERSONALITY_CONTENT}
 
-# General Behavior 
-- Default to **short, high-signal** answers (terminal space is limited).
-- Be **direct**: Skip filler phrases and talk.
+# General Behavior
+- Give brief, high-signal answers without calling attention to brevity.
+- Be direct: skip filler phrases and small talk.
 - If the user is vague, make a reasonable assumption and state it in one line. Ask **at most one** clarifying question when truly necessary.
-- Do not roleplay 'cryptic prophecy'. No weird spelling, no excessive symbolism. A subtle tone is fine.
-- You are **very** analytical and express structural thinking to the user.
+- No cryptic or dramatic roleplay. Keep tone subtle.
+- Prefer concrete steps and outcomes over abstract analysis.
 
 # Output Style
 - Use **Markdown** for structure (headings, bullets). Keep it compact.
@@ -368,7 +374,7 @@ function buildVoiceSystemPrompt(
 	memorySection: string
 ): string {
 	return `
-You are DAEMON, an AI voice assistant. You speak with a calm, focused presence. Slightly ominous undertone, but always clear and useful.
+You are DAEMON, an AI voice assistant. You speak with a calm, focused presence. Clear and useful.
 
 Today is ${currentDateString}.
 

package/src/ai/tools/fetch-urls.ts

@@ -6,16 +6,12 @@ import { getCachedPage, setCachedPage } from "../exa-fetch-cache";
 const DEFAULT_LINE_LIMIT = 40;
 const MAX_CHAR_LIMIT = 50_000;
 const MAX_LINE_LIMIT = 1000;
-const DEFAULT_HIGHLIGHTS_PER_URL = 5;
-const DEFAULT_NUM_SENTENCES = 2;
-
 function normalizeLines(text: string): string[] {
 	return text.replace(/\r\n/g, "\n").replace(/\r/g, "\n").split("\n");
 }
 
-interface HighlightResult {
-	highlights: string[];
-	highlightQuery: string;
+function escapeXmlAttribute(value: string): string {
+	return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 
 interface TextResult {
@@ -26,140 +22,185 @@ interface TextResult {
 	remainingLines: number | null;
 }
 
-export const fetchUrls = tool({
-	description: `Fetch page contents from a URL. Two modes available:
-
-1. **Text mode (default)**: Reads paginated text content. Start with lineLimit 40, use lineOffset for pagination.
+type FetchUrlsItem =
+	| ({ success: true; url: string } & TextResult)
+	| { success: false; url: string; error: string };
 
-2. **Highlights mode**: Pass highlightQuery to get semantically relevant excerpts instead of full text. Great for checking URL relevance or extracting specific facts. Returns the most relevant snippets matching your query.
+export const fetchUrls = tool({
+	description: `Fetch page contents from one or more URLs.
 
-When highlightQuery is provided, lineOffset/lineLimit are ignored.`,
+**Text mode (default)**: Reads paginated text content. Start with lineLimit 40, use lineOffset for pagination.`,
 	inputSchema: z.object({
-		url: z.string().url().describe("URL to fetch content from."),
-		lineOffset: z
-			.number()
-			.int()
-			.min(0)
-			.optional()
-			.describe(
-				"0-based line offset to start reading from. For pagination (lineOffset > 0), provide lineLimit too."
-			),
-		lineLimit: z
-			.number()
-			.int()
+		requests: z
+			.array(
+				z.object({
+					url: z.string().url().describe("URL to fetch content from."),
+					lineOffset: z
+						.number()
+						.int()
+						.min(0)
+						.optional()
+						.describe(
+							"0-based line offset to start reading from. For pagination (lineOffset > 0), provide lineLimit too."
+						),
+					lineLimit: z
+						.number()
+						.int()
+						.min(1)
+						.max(MAX_LINE_LIMIT)
+						.optional()
+						.describe(
+							`Maximum lines to read per URL (max ${MAX_LINE_LIMIT}). If provided without lineOffset, reads from the start.`
+						),
+				})
+			)
 			.min(1)
-			.max(MAX_LINE_LIMIT)
-			.optional()
-			.describe(
-				`Maximum lines to read per URL (max ${MAX_LINE_LIMIT}). If provided without lineOffset, reads from the start.`
-			),
-		highlightQuery: z
-			.string()
-			.optional()
-			.describe(
-				"Natural language query for semantic highlights. When provided, returns relevant excerpts instead of paginated text."
-			),
+			.describe("Per-URL fetch requests."),
 	}),
-	execute: async ({ url, lineOffset, lineLimit, highlightQuery }) => {
-		if (highlightQuery) {
-			return fetchWithHighlights(url, highlightQuery);
+	execute: async ({ requests }) => {
+		const exaClientResult = getExaClient();
+		if ("error" in exaClientResult) {
+			return `<fetchUrls error="${escapeXmlAttribute(exaClientResult.error)}" />`;
+		}
+
+		interface NormalizedRequest {
+			url: string;
+			lineOffset?: number;
+			lineLimit?: number;
+			invalidPagination: boolean;
+			effectiveLineOffset: number;
+			effectiveLineLimit: number;
+		}
+
+		const normalizedRequests = requests.map((request): NormalizedRequest => {
+			const lineOffset = request.lineOffset;
+			const lineLimit = request.lineLimit;
+			const hasLineOffset = typeof lineOffset === "number";
+			const hasLineLimit = typeof lineLimit === "number";
+			const invalidPagination = hasLineOffset && !hasLineLimit && (lineOffset ?? 0) > 0;
+			return {
+				url: request.url,
+				lineOffset,
+				lineLimit,
+				invalidPagination,
+				effectiveLineOffset: hasLineOffset ? lineOffset : 0,
+				effectiveLineLimit: hasLineLimit ? lineLimit : DEFAULT_LINE_LIMIT,
+			};
+		});
+
+		const cachedTextByUrl = new Map<string, string>();
+		const urlsToFetch = new Set<string>();
+
+		for (const request of normalizedRequests) {
+			if (request.invalidPagination) continue;
+			const cached = getCachedPage(request.url);
+			if (cached) {
+				cachedTextByUrl.set(request.url, cached.text);
+			} else {
+				urlsToFetch.add(request.url);
+			}
+		}
+
+		const fetchedTextByUrl = new Map<string, string>();
+		let fetchError: string | null = null;
+		if (urlsToFetch.size > 0) {
+			try {
+				const urlList = Array.from(urlsToFetch);
+				const rawData = (await exaClientResult.client.getContents(urlList, {
+					text: { maxCharacters: MAX_CHAR_LIMIT },
+				})) as unknown as {
+					results?: Array<{
+						url?: string;
+						text?: string;
+						[key: string]: unknown;
+					}>;
+				};
+
+				for (const item of rawData.results ?? []) {
+					if (typeof item.url !== "string") continue;
+					const fullText = typeof item.text === "string" ? item.text : "";
+					const cappedText = fullText.slice(0, MAX_CHAR_LIMIT);
+					if (cappedText.trim().length > 0) {
+						setCachedPage(item.url, cappedText);
+						fetchedTextByUrl.set(item.url, cappedText);
+					}
+				}
+			} catch (error) {
+				const err = error instanceof Error ? error : new Error(String(error));
+				fetchError = err.message;
+			}
 		}
-		return fetchWithPagination(url, lineOffset, lineLimit);
+
+		if (fetchError && cachedTextByUrl.size === 0 && fetchedTextByUrl.size === 0) {
+			return `<fetchUrls error="${escapeXmlAttribute(fetchError)}" />`;
+		}
+
+		const results: FetchUrlsItem[] = normalizedRequests.map((request) => {
+			if (request.invalidPagination) {
+				return {
+					success: false,
+					url: request.url,
+					error: "Provide both lineOffset and lineLimit for paginated reads (lineOffset > 0).",
+				};
+			}
+
+			const text =
+				cachedTextByUrl.get(request.url) ??
+				fetchedTextByUrl.get(request.url) ??
+				getCachedPage(request.url)?.text ??
+				"";
+
+			if (!text) {
+				const error = fetchError ? fetchError : "No text returned for URL.";
+				return { success: false, url: request.url, error };
+			}
+
+			return paginateText(request.url, text, request.effectiveLineOffset, request.effectiveLineLimit);
+		});
+
+		return formatFetchUrlsXml(results);
 	},
 });
 
-async function fetchWithHighlights(
-	url: string,
-	highlightQuery: string
-): Promise<
-	({ success: true; url: string } & HighlightResult) | { success: false; url: string; error: string }
-> {
-	const exaClientResult = getExaClient();
-	if ("error" in exaClientResult) {
-		return { success: false, url, error: exaClientResult.error };
-	}
-
-	try {
-		const rawData = (await exaClientResult.client.getContents([url], {
-			highlights: {
-				query: highlightQuery,
-				numSentences: DEFAULT_NUM_SENTENCES,
-				highlightsPerUrl: DEFAULT_HIGHLIGHTS_PER_URL,
-			},
-		})) as unknown as {
-			results?: Array<{
-				url?: string;
-				highlights?: string[];
-				[key: string]: unknown;
-			}>;
-		};
-
-		const first = rawData.results?.[0];
-		const highlights = first?.highlights ?? [];
-
-		return {
-			success: true,
-			url,
-			highlights,
-			highlightQuery,
-		};
-	} catch (error) {
-		const err = error instanceof Error ? error : new Error(String(error));
-		return { success: false, url, error: err.message };
-	}
-}
+function formatFetchUrlsXml(results: FetchUrlsItem[]): string {
+	const lines: string[] = ["<fetchUrls>"];
 
-async function fetchWithPagination(
-	url: string,
-	lineOffset?: number,
-	lineLimit?: number
-): Promise<({ success: true; url: string } & TextResult) | { success: false; url: string; error: string }> {
-	const hasLineOffset = typeof lineOffset === "number";
-	const hasLineLimit = typeof lineLimit === "number";
-
-	if (hasLineOffset && !hasLineLimit && (lineOffset ?? 0) > 0) {
-		return {
-			success: false,
-			url,
-			error: "Provide both lineOffset and lineLimit for paginated reads (lineOffset > 0).",
-		};
-	}
+	for (const item of results) {
+		const attributes: string[] = [`href="${escapeXmlAttribute(item.url)}"`];
 
-	const effectiveLineOffset = hasLineOffset ? lineOffset : 0;
-	const effectiveLineLimit = hasLineLimit ? lineLimit : DEFAULT_LINE_LIMIT;
+		if ("lineOffset" in item && typeof item.lineOffset === "number") {
+			attributes.push(`lineOffset="${item.lineOffset}"`);
+		}
+		if ("lineLimit" in item && typeof item.lineLimit === "number") {
+			attributes.push(`lineLimit="${item.lineLimit}"`);
+		}
+		if ("totalLines" in item && typeof item.totalLines === "number") {
+			attributes.push(`totalLines="${item.totalLines}"`);
+		}
+		if ("remainingLines" in item) {
+			if (typeof item.remainingLines === "number") {
+				attributes.push(`remainingLines="${item.remainingLines}"`);
+			} else if (item.remainingLines === null) {
+				attributes.push(`remainingLines="unknown"`);
+			}
+		}
 
-	const cached = getCachedPage(url);
-	if (cached) {
-		return paginateText(url, cached.text, effectiveLineOffset, effectiveLineLimit);
-	}
+		if (item.success === false) {
+			attributes.push(`error="${escapeXmlAttribute(item.error)}"`);
+			lines.push(`  <url ${attributes.join(" ")} />`);
+			continue;
+		}
 
-	const exaClientResult = getExaClient();
-	if ("error" in exaClientResult) {
-		return { success: false, url, error: exaClientResult.error };
+		const textLines = normalizeLines(item.text);
+		lines.push(`  <url ${attributes.join(" ")}>`);
+		for (const line of textLines) {
+			lines.push(`    ${escapeXmlAttribute(line)}`);
+		}
+		lines.push("  </url>");
 	}
 
-	try {
-		const rawData = (await exaClientResult.client.getContents([url], {
-			text: { maxCharacters: MAX_CHAR_LIMIT },
-		})) as unknown as {
-			results?: Array<{
-				url?: string;
-				text?: string;
-				[key: string]: unknown;
-			}>;
-		};
-
-		const first = rawData.results?.[0];
-		const fullText = first?.text ?? "";
-		const cappedText = fullText.slice(0, MAX_CHAR_LIMIT);
-
-		setCachedPage(url, cappedText);
-
-		return paginateText(url, cappedText, effectiveLineOffset, effectiveLineLimit);
-	} catch (error) {
-		const err = error instanceof Error ? error : new Error(String(error));
-		return { success: false, url, error: err.message };
-	}
+	lines.push("</fetchUrls>");
+	return lines.join("\n");
 }
 
 function paginateText(

package/src/components/SettingsMenu.tsx

@@ -128,22 +128,24 @@ export function SettingsMenu({
 		},
 	];
 
-	if (interactionMode === "voice") {
-		items.push(
-			{
-				id: "header-audio",
-				label: "AUDIO PARAMETERS",
-				isHeader: true,
-			},
-			{
-				id: "speech-speed",
-				label: "Speech Speed",
-				value: `${speechSpeed.toFixed(2)}x`,
-				description: "Adjust speech rate (1.0x - 2.0x)",
-				isCyclic: true,
-			}
-		);
-	}
+	const audioSettingsDisabled = interactionMode !== "voice";
+	items.push(
+		{
+			id: "header-audio",
+			label: "AUDIO PARAMETERS",
+			isHeader: true,
+		},
+		{
+			id: "speech-speed",
+			label: "Speech Speed",
+			value: audioSettingsDisabled ? "N/A" : `${speechSpeed.toFixed(2)}x`,
+			description: audioSettingsDisabled
+				? "Enable voice mode to adjust speech rate"
+				: "Adjust speech rate (1.0x - 2.0x)",
+			isCyclic: !audioSettingsDisabled,
+			disabled: audioSettingsDisabled,
+		}
+	);
 
 	items.push(
 		{
@@ -170,6 +172,7 @@ export function SettingsMenu({
 	// Filter out headers for selection logic
 	const selectableItems = items.filter((item) => !item.isHeader);
 	const selectableCount = selectableItems.length;
+	const labelWidth = Math.max(0, ...selectableItems.map((item) => item.label.length)) + 4;
 
 	useEffect(() => {
 		if (selectableCount === 0) {
@@ -276,19 +279,25 @@ export function SettingsMenu({
 								paddingRight={1}
 								flexDirection="column"
 							>
-								<box>
-									<text>
-										<span fg={labelColor}>
-											{isSelected ? "▶ " : "  "}
-											{item.label}:{" "}
-										</span>
-										<span fg={valueColor}>{item.value}</span>
-										{item.isToggle && !item.disabled && <span fg={COLORS.USER_LABEL}></span>}
-										{item.isCyclic && !item.disabled && <span fg={COLORS.USER_LABEL}></span>}
-									</text>
+								<box flexDirection="row">
+									<box width={labelWidth}>
+										<text>
+											<span fg={labelColor}>
+												{isSelected ? "▶ " : "  "}
+												{item.label}:{" "}
+											</span>
+										</text>
+									</box>
+									<box>
+										<text>
+											<span fg={valueColor}>{item.value}</span>
+											{item.isToggle && !item.disabled && <span fg={COLORS.USER_LABEL}></span>}
+											{item.isCyclic && !item.disabled && <span fg={COLORS.USER_LABEL}></span>}
+										</text>
+									</box>
 								</box>
 								{item.description && (
-									<box marginLeft={4}>
+									<box marginLeft={labelWidth}>
 										<text>
 											<span fg={COLORS.REASONING_DIM}>{item.description}</span>
 										</text>

package/src/components/UrlMenu.tsx

@@ -139,7 +139,7 @@ export function UrlMenu({ items, onClose }: UrlMenuProps) {
 						</span>
 					</text>
 					<text>
-						<span fg={COLORS.REASONING_DIM}>(G=grounded, READ=% or HL=highlights)</span>
+						<span fg={COLORS.REASONING_DIM}>(G=grounded, READ=%)</span>
 					</text>
 				</box>
 
@@ -152,12 +152,7 @@ export function UrlMenu({ items, onClose }: UrlMenuProps) {
 						sortedItems.map((item, idx) => {
 							const { origin, path } = splitUrl(item.url);
 							const grounded = item.groundedCount > 0;
-							const readLabel =
-								item.readPercent !== undefined
-									? `${item.readPercent}%`
-									: item.highlightsCount !== undefined
-										? `HL:${item.highlightsCount}`
-										: "—";
+							const readLabel = item.readPercent !== undefined ? `${item.readPercent}%` : "—";
 
 							return (
 								<box key={idx} flexDirection="row" marginBottom={0}>