@geminilight/mindos 0.2.1 → 0.4.0

package/app/components/renderers/{AgentInspectorRenderer.tsx → agent-inspector/AgentInspectorRenderer.tsx}

@@ -128,10 +128,10 @@ function OpCard({ op }: { op: AgentOp }) {
         onClick={() => setExpanded(v => !v)}
       >
         {/* kind badge */}
-        <span style={{
+        <span className="font-display" style={{
           display: 'inline-flex', alignItems: 'center', gap: 4,
           padding: '2px 8px', borderRadius: 999, fontSize: '0.68rem',
-          fontFamily: "'IBM Plex Mono',monospace", fontWeight: 600,
+          fontWeight: 600,
           background: style.bg, color: style.text, border: `1px solid ${style.border}`,
           flexShrink: 0,
         }}>
@@ -140,16 +140,17 @@ function OpCard({ op }: { op: AgentOp }) {
         </span>
 
         {/* tool name */}
-        <span style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.78rem', color: 'var(--foreground)', fontWeight: 600, flexShrink: 0 }}>
+        <span className="font-display" style={{ fontSize: '0.78rem', color: 'var(--foreground)', fontWeight: 600, flexShrink: 0 }}>
           {toolShort}
         </span>
 
         {/* file path */}
         {filePath && (
           <span
-            style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.72rem', color: 'var(--amber)', flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', cursor: 'pointer' }}
+            style={{ fontSize: '0.72rem', color: 'var(--amber)', flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', cursor: 'pointer' }}
             onClick={e => { e.stopPropagation(); router.push('/view/' + filePath.split('/').map(encodeURIComponent).join('/')); }}
             title={filePath}
+            className="font-display"
           >
             {filePath}
           </span>
@@ -162,7 +163,7 @@ function OpCard({ op }: { op: AgentOp }) {
             : <AlertCircle size={13} style={{ color: '#c85050' }} />
           }
           {/* timestamp */}
-          <span style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.68rem', color: 'var(--muted-foreground)', opacity: 0.6 }} title={formatTs(op.ts)}>
+          <span className="font-display" style={{ fontSize: '0.68rem', color: 'var(--muted-foreground)', opacity: 0.6 }} title={formatTs(op.ts)}>
             {relativeTs(op.ts)}
           </span>
           {/* chevron */}
@@ -177,10 +178,10 @@ function OpCard({ op }: { op: AgentOp }) {
           <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: op.message ? 8 : 0 }}>
             {Object.entries(op.params).map(([k, v]) => (
               <div key={k} style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
-                <span style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.68rem', color: 'var(--muted-foreground)', opacity: 0.7, flexShrink: 0, minWidth: 80 }}>
+                <span className="font-display" style={{ fontSize: '0.68rem', color: 'var(--muted-foreground)', opacity: 0.7, flexShrink: 0, minWidth: 80 }}>
                   {k}
                 </span>
-                <span style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.72rem', color: 'var(--foreground)', wordBreak: 'break-all', lineHeight: 1.5 }}>
+                <span className="font-display" style={{ fontSize: '0.72rem', color: 'var(--foreground)', wordBreak: 'break-all', lineHeight: 1.5 }}>
                   {truncateContent(v)}
                 </span>
               </div>
@@ -188,7 +189,7 @@ function OpCard({ op }: { op: AgentOp }) {
           </div>
           {/* result message */}
           {op.message && (
-            <div style={{ marginTop: 6, padding: '5px 9px', borderRadius: 5, fontSize: '0.72rem', fontFamily: "'IBM Plex Mono',monospace",
+            <div className="font-display" style={{ marginTop: 6, padding: '5px 9px', borderRadius: 5, fontSize: '0.72rem',
               background: op.result === 'error' ? 'rgba(200,80,80,0.08)' : 'rgba(122,173,128,0.08)',
               color: op.result === 'error' ? '#c85050' : '#7aad80',
               border: `1px solid ${op.result === 'error' ? 'rgba(200,80,80,0.2)' : 'rgba(122,173,128,0.2)'}`,
@@ -197,7 +198,7 @@ function OpCard({ op }: { op: AgentOp }) {
             </div>
           )}
           {/* absolute timestamp */}
-          <div style={{ marginTop: 6, fontSize: '0.65rem', fontFamily: "'IBM Plex Mono',monospace", color: 'var(--muted-foreground)', opacity: 0.5 }}>
+          <div className="font-display" style={{ marginTop: 6, fontSize: '0.65rem', color: 'var(--muted-foreground)', opacity: 0.5 }}>
             {formatTs(op.ts)}
           </div>
         </div>
@@ -231,7 +232,7 @@ export function AgentInspectorRenderer({ content }: RendererContext) {
 
   if (ops.length === 0) {
     return (
-      <div style={{ padding: '3rem 1rem', textAlign: 'center', color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono',monospace", fontSize: 12 }}>
+      <div className="font-display" style={{ padding: '3rem 1rem', textAlign: 'center', color: 'var(--muted-foreground)', fontSize: 12 }}>
         <Terminal size={28} style={{ margin: '0 auto 10px', opacity: 0.3 }} />
         <p>No agent operations logged yet.</p>
         <p style={{ marginTop: 6, opacity: 0.6, fontSize: 11 }}>
@@ -254,10 +255,11 @@ export function AgentInspectorRenderer({ content }: RendererContext) {
             <button
               key={k}
               onClick={() => setFilter(k)}
+              className="font-display"
               style={{
                 display: 'inline-flex', alignItems: 'center', gap: 4,
                 padding: '3px 10px', borderRadius: 999, fontSize: '0.7rem',
-                fontFamily: "'IBM Plex Mono',monospace", cursor: 'pointer', border: 'none',
+                cursor: 'pointer', border: 'none',
                 background: active ? (style?.bg ?? 'var(--accent)') : 'var(--muted)',
                 color: active ? (style?.text ?? 'var(--foreground)') : 'var(--muted-foreground)',
                 outline: active ? `1px solid ${style?.border ?? 'var(--border)'}` : 'none',

package/app/components/renderers/agent-inspector/manifest.ts

@@ -0,0 +1,14 @@
+import type { RendererDefinition } from '@/lib/renderers/registry';
+
+export const manifest: RendererDefinition = {
+  id: 'agent-inspector',
+  name: 'Agent Inspector',
+  description: 'Visualizes agent tool-call logs as a filterable timeline. Auto-activates on .agent-log.json (JSON Lines format).',
+  author: 'MindOS',
+  icon: '🔍',
+  tags: ['agent', 'inspector', 'log', 'mcp', 'tools'],
+  builtin: true,
+  entryPath: '.agent-log.json',
+  match: ({ filePath }) => /\.agent-log\.json$/i.test(filePath),
+  load: () => import('./AgentInspectorRenderer').then(m => ({ default: m.AgentInspectorRenderer })),
+};

package/app/components/renderers/{BacklinksRenderer.tsx → backlinks/BacklinksRenderer.tsx}

@@ -51,7 +51,7 @@ export function BacklinksRenderer({ filePath }: RendererContext) {
 
   if (loading) {
     return (
-      <div style={{ padding: '3rem 1rem', textAlign: 'center', fontFamily: "'IBM Plex Mono',monospace", fontSize: 12, color: 'var(--muted-foreground)' }}>
+      <div className="font-display" style={{ padding: '3rem 1rem', textAlign: 'center', fontSize: 12, color: 'var(--muted-foreground)' }}>
         Scanning backlinks…
       </div>
     );
@@ -63,7 +63,7 @@ export function BacklinksRenderer({ filePath }: RendererContext) {
     <div style={{ maxWidth: 720, margin: '0 auto', padding: '1.5rem 0' }}>
       {/* header */}
       <div style={{ marginBottom: '1.5rem', display: 'flex', alignItems: 'center', gap: 8 }}>
-        <span style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: 11, color: 'var(--muted-foreground)' }}>
+        <span className="font-display" style={{ fontSize: 11, color: 'var(--muted-foreground)' }}>
           {items.length === 0 ? 'No backlinks found' : `${items.length} file${items.length === 1 ? '' : 's'} link here`}
         </span>
       </div>
@@ -78,7 +78,7 @@ export function BacklinksRenderer({ filePath }: RendererContext) {
           fontSize: 13,
         }}>
           <FileText size={28} style={{ margin: '0 auto 10px', opacity: 0.3 }} />
-          <p style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: 12 }}>
+          <p className="font-display" style={{ fontSize: 12 }}>
             No other files link to <strong style={{ color: 'var(--foreground)' }}>{basename(filePath)}</strong> yet.
           </p>
         </div>
@@ -112,11 +112,11 @@ export function BacklinksRenderer({ filePath }: RendererContext) {
                   background: 'var(--muted)',
                 }}>
                   <FileText size={13} style={{ color: 'var(--muted-foreground)', flexShrink: 0 }} />
-                  <span style={{ fontFamily: "'IBM Plex Sans',sans-serif", fontWeight: 600, fontSize: '0.85rem', color: 'var(--foreground)', flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  <span style={{ fontWeight: 600, fontSize: '0.85rem', color: 'var(--foreground)', flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                     {name}
                   </span>
                   {dir && (
-                    <span style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.68rem', color: 'var(--muted-foreground)', opacity: 0.6, flexShrink: 0 }}>
+                    <span className="font-display" style={{ fontSize: '0.68rem', color: 'var(--muted-foreground)', opacity: 0.6, flexShrink: 0 }}>
                       {dir}
                     </span>
                   )}
@@ -131,7 +131,7 @@ export function BacklinksRenderer({ filePath }: RendererContext) {
                     background: 'var(--background)',
                   }}>
                     {snippet.split('\n').map((line: string, j: number) => (
-                      <div key={j} style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.72rem', color: 'var(--muted-foreground)', lineHeight: 1.6, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+                      <div key={j} className="font-display" style={{ fontSize: '0.72rem', color: 'var(--muted-foreground)', lineHeight: 1.6, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
                         <SnippetLine text={line} />
                       </div>
                     ))}

package/app/components/renderers/backlinks/manifest.ts

@@ -0,0 +1,14 @@
+import type { RendererDefinition } from '@/lib/renderers/registry';
+
+export const manifest: RendererDefinition = {
+  id: 'backlinks',
+  name: 'Backlinks Explorer',
+  description: 'Shows all files that link to the current page via wikilinks or markdown links, with highlighted snippet context.',
+  author: 'MindOS',
+  icon: '🔗',
+  tags: ['backlinks', 'wiki', 'links', 'references'],
+  builtin: true,
+  entryPath: 'BACKLINKS.md',
+  match: ({ filePath }) => /\bBACKLINKS\b.*\.md$/i.test(filePath),
+  load: () => import('./BacklinksRenderer').then(m => ({ default: m.BacklinksRenderer })),
+};

package/app/components/renderers/config/manifest.ts

@@ -0,0 +1,14 @@
+import type { RendererDefinition } from '@/lib/renderers/registry';
+
+export const manifest: RendererDefinition = {
+  id: 'config-panel',
+  name: 'Config Panel',
+  description: 'Renders CONFIG.json as an editable control panel based on uiSchema/keySpecs. Changes are written back to the JSON file directly.',
+  author: 'MindOS',
+  icon: '🧩',
+  tags: ['config', 'json', 'settings', 'schema'],
+  builtin: true,
+  entryPath: 'CONFIG.json',
+  match: ({ filePath, extension }) => extension === 'json' && /(^|\/)CONFIG\.json$/i.test(filePath),
+  load: () => import('./ConfigRenderer').then(m => ({ default: m.ConfigRenderer })),
+};

package/app/components/renderers/csv/BoardView.tsx

@@ -50,7 +50,7 @@ export function BoardView({ headers, rows, cfg, saveAction }: {
       <div className="flex-shrink-0 w-64 flex flex-col gap-2">
         <div className="flex items-center gap-2 px-1 py-1.5">
           <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ background: tc.text }} />
-          <span className="text-xs font-semibold uppercase tracking-wider truncate" style={{ color: tc.text, fontFamily: "'IBM Plex Mono',monospace" }}>{group}</span>
+          <span className="text-xs font-semibold uppercase tracking-wider truncate font-display" style={{ color: tc.text }}>{group}</span>
           <span className="text-xs ml-auto shrink-0" style={{ color: 'var(--muted-foreground)', opacity: 0.5 }}>{cards.length}</span>
         </div>
         <div
@@ -74,14 +74,14 @@ export function BoardView({ headers, rows, cfg, saveAction }: {
                 className="rounded-lg border p-3 flex flex-col gap-1.5 cursor-grab active:cursor-grabbing hover:bg-muted/50 transition-colors"
                 style={{ borderColor: 'var(--border)', background: 'var(--card)' }}
               >
-                <p className="text-sm font-medium leading-snug" style={{ color: 'var(--foreground)', fontFamily: "'IBM Plex Sans',sans-serif" }}>{title}</p>
+                <p className="text-sm font-medium leading-snug" style={{ color: 'var(--foreground)' }}>{title}</p>
                 {desc && <p className="text-xs leading-relaxed line-clamp-2" style={{ color: 'var(--muted-foreground)' }}>{desc}</p>}
                 <div className="flex flex-wrap gap-1 mt-0.5">
                   {headers.map((h, ci) => {
                     if (ci === groupIdx || ci === titleIdx || ci === descIdx) return null;
                     const v = row[ci]; if (!v) return null;
-                    return <span key={ci} className="text-[10px] px-1.5 py-0.5 rounded"
-                      style={{ background: 'var(--muted)', color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono',monospace" }}
+                    return <span key={ci} className="text-[10px] px-1.5 py-0.5 rounded font-display"
+                      style={{ background: 'var(--muted)', color: 'var(--muted-foreground)' }}
                     >{h}: {v}</span>;
                   })}
                 </div>
@@ -115,27 +115,27 @@ export function BoardView({ headers, rows, cfg, saveAction }: {
                 if (e.key === 'Escape') { setNewColInput(''); setShowNewCol(false); }
               }}
               placeholder="Column name…"
-              className="text-xs bg-transparent outline-none w-full"
-              style={{ color: 'var(--foreground)', borderBottom: '1px solid var(--amber)', fontFamily: "'IBM Plex Mono',monospace" }}
+              className="text-xs bg-transparent outline-none w-full font-display"
+              style={{ color: 'var(--foreground)', borderBottom: '1px solid var(--amber)' }}
             />
             <div className="flex gap-2">
               <button onClick={() => {
                 setNewColInput('');
                 setShowNewCol(false);
               }}
-                className="text-xs px-2 py-1 rounded"
-                style={{ background: 'var(--amber)', color: '#131210', fontFamily: "'IBM Plex Mono',monospace" }}
+                className="text-xs px-2 py-1 rounded font-display"
+                style={{ background: 'var(--amber)', color: '#131210' }}
               >Create</button>
               <button onClick={() => { setNewColInput(''); setShowNewCol(false); }}
-                className="text-xs px-2 py-1 rounded"
-                style={{ color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono',monospace" }}
+                className="text-xs px-2 py-1 rounded font-display"
+                style={{ color: 'var(--muted-foreground)' }}
               >Cancel</button>
             </div>
           </div>
         ) : (
           <button onClick={() => setShowNewCol(true)}
-            className="flex items-center gap-1.5 text-xs px-3 py-2 rounded-xl border border-dashed w-full transition-colors hover:bg-muted"
-            style={{ borderColor: 'var(--border)', color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono',monospace" }}
+            className="flex items-center gap-1.5 text-xs px-3 py-2 rounded-xl border border-dashed w-full transition-colors hover:bg-muted font-display"
+            style={{ borderColor: 'var(--border)', color: 'var(--muted-foreground)' }}
           >
             <Plus size={12} /> Add column
           </button>

package/app/components/renderers/csv/ConfigPanel.tsx

@@ -10,15 +10,15 @@ export function ConfigPanel({ headers, cfg, view, onClose, onChange }: {
   onClose: () => void;
   onChange: (cfg: CsvConfig) => void;
 }) {
-  const labelStyle: React.CSSProperties = { color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.72rem' };
-  const selectStyle: React.CSSProperties = { background: 'var(--background)', color: 'var(--foreground)', borderColor: 'var(--border)', fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.72rem' };
+  const labelStyle: React.CSSProperties = { color: 'var(--muted-foreground)', fontSize: '0.72rem' };
+  const selectStyle: React.CSSProperties = { background: 'var(--background)', color: 'var(--foreground)', borderColor: 'var(--border)', fontSize: '0.72rem' };
 
   function FieldSelect({ label, value, onChange: onCh }: { label: string; value: string; onChange: (v: string) => void }) {
     return (
       <div className="flex items-center justify-between gap-2">
-        <span style={labelStyle}>{label}</span>
+        <span className="font-display" style={labelStyle}>{label}</span>
         <select value={value} onChange={e => onCh(e.target.value)}
-          className="rounded px-2 py-1 outline-none border" style={selectStyle}
+          className="rounded px-2 py-1 outline-none border font-display" style={selectStyle}
         >
           <option value="">— none —</option>
           {headers.map(h => <option key={h} value={h}>{h}</option>)}
@@ -47,9 +47,9 @@ export function ConfigPanel({ headers, cfg, view, onClose, onChange }: {
             <div className="flex rounded overflow-hidden border" style={{ borderColor: 'var(--border)' }}>
               {(['asc', 'desc'] as const).map(d => (
                 <button key={d} onClick={() => onChange({ ...cfg, table: { ...cfg.table, sortDir: d } })}
-                  className="px-3 py-1 text-xs transition-colors"
+                  className="px-3 py-1 text-xs transition-colors font-display"
                   style={{
-                    fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.72rem',
+                    fontSize: '0.72rem',
                     background: cfg.table.sortDir === d ? 'var(--amber)' : 'var(--background)',
                     color: cfg.table.sortDir === d ? '#131210' : 'var(--muted-foreground)',
                   }}
@@ -77,9 +77,8 @@ export function ConfigPanel({ headers, cfg, view, onClose, onChange }: {
                       : [...cfg.table.hiddenFields, h];
                     onChange({ ...cfg, table: { ...cfg.table, hiddenFields: next } });
                   }}
-                    className="text-[11px] px-2 py-0.5 rounded transition-colors"
+                    className="text-[11px] px-2 py-0.5 rounded transition-colors font-display"
                     style={{
-                      fontFamily: "'IBM Plex Mono',monospace",
                       background: hidden ? 'var(--muted)' : 'var(--amber-dim)',
                       color: hidden ? 'var(--muted-foreground)' : 'var(--amber)',
                     }}

package/app/components/renderers/{CsvRenderer.tsx → csv/CsvRenderer.tsx}

@@ -3,12 +3,12 @@
 import { useState, useMemo, useCallback, useEffect } from 'react';
 import { LayoutGrid, Columns, Table2, Settings2 } from 'lucide-react';
 import type { RendererContext } from '@/lib/renderers/registry';
-import type { ViewType, CsvConfig } from './csv/types';
-import { defaultConfig, loadConfig, saveConfig, parseCSV } from './csv/types';
-import { TableView } from './csv/TableView';
-import { GalleryView } from './csv/GalleryView';
-import { BoardView } from './csv/BoardView';
-import { ConfigPanel } from './csv/ConfigPanel';
+import type { ViewType, CsvConfig } from './types';
+import { defaultConfig, loadConfig, saveConfig, parseCSV } from './types';
+import { TableView } from './TableView';
+import { GalleryView } from './GalleryView';
+import { BoardView } from './BoardView';
+import { ConfigPanel } from './ConfigPanel';
 
 const VIEW_TABS: { id: ViewType; icon: React.ReactNode; label: string }[] = [
   { id: 'table',   icon: <Table2 size={13} />,    label: 'Table' },
@@ -42,9 +42,8 @@ export function CsvRenderer({ filePath, content, saveAction }: RendererContext)
         <div className="flex items-center gap-0.5 p-1 rounded-lg" style={{ background: 'var(--muted)' }}>
           {VIEW_TABS.map(tab => (
             <button key={tab.id} onClick={() => updateConfig({ ...cfg, activeView: tab.id })}
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-medium transition-colors"
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-medium transition-colors font-display"
               style={{
-                fontFamily: "'IBM Plex Mono',monospace",
                 background: view === tab.id ? 'var(--card)' : 'transparent',
                 color: view === tab.id ? 'var(--foreground)' : 'var(--muted-foreground)',
                 boxShadow: view === tab.id ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
@@ -53,7 +52,7 @@ export function CsvRenderer({ filePath, content, saveAction }: RendererContext)
           ))}
         </div>
         <div className="flex-1" />
-        <span className="text-xs" style={{ color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono',monospace", opacity: 0.5 }}>
+        <span className="text-xs font-display" style={{ color: 'var(--muted-foreground)', opacity: 0.5 }}>
           {rows.length} rows
         </span>
         <div className="relative">

package/app/components/renderers/csv/GalleryView.tsx

@@ -19,15 +19,15 @@ export function GalleryView({ headers, rows, cfg }: { headers: string[]; rows: s
             style={{ borderColor: 'var(--border)', background: 'var(--card)' }}
           >
             {tag && tc && <span className="self-start text-[11px] px-2 py-0.5 rounded-full font-medium"
-              style={{ background: tc.bg, color: tc.text, fontFamily: "'IBM Plex Mono',monospace" }}>{tag}</span>}
-            <p className="text-sm font-semibold leading-snug" style={{ color: 'var(--foreground)', fontFamily: "'IBM Plex Sans',sans-serif" }}>{title}</p>
+              style={{ background: tc.bg, color: tc.text }}>{tag}</span>}
+            <p className="text-sm font-semibold leading-snug" style={{ color: 'var(--foreground)' }}>{title}</p>
             {desc && <p className="text-xs leading-relaxed line-clamp-3" style={{ color: 'var(--muted-foreground)' }}>{desc}</p>}
             <div className="mt-1 flex flex-col gap-0.5">
               {headers.map((h, ci) => {
                 if (ci === titleIdx || ci === descIdx || ci === tagIdx) return null;
                 const v = row[ci]; if (!v) return null;
                 return <div key={ci} className="flex items-baseline gap-1.5 text-xs">
-                  <span style={{ color: 'var(--muted-foreground)', opacity: 0.6, fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.68rem' }}>{h}</span>
+                  <span className="font-display" style={{ color: 'var(--muted-foreground)', opacity: 0.6, fontSize: '0.68rem' }}>{h}</span>
                   <span className="truncate" style={{ color: 'var(--muted-foreground)' }}>{v}</span>
                 </div>;
               })}

package/app/components/renderers/csv/TableView.tsx

@@ -71,7 +71,6 @@ export function TableView({ headers, rows, cfg, saveAction }: {
 
   const thStyle: React.CSSProperties = {
     borderBottom: '1px solid var(--border)',
-    fontFamily: "'IBM Plex Sans',sans-serif",
     fontSize: '0.72rem',
     letterSpacing: '0.05em',
     textTransform: 'uppercase',
@@ -110,7 +109,7 @@ export function TableView({ headers, rows, cfg, saveAction }: {
                     <td colSpan={visibleIndices.length + 1} className="px-4 py-1.5"
                       style={{ background: 'var(--accent)', borderBottom: '1px solid var(--border)', borderTop: '1px solid var(--border)' }}
                     >
-                      <span className="text-xs font-semibold" style={{ color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono',monospace" }}>
+                      <span className="text-xs font-semibold font-display" style={{ color: 'var(--muted-foreground)' }}>
                         {section.key} · {section.rows.length}
                       </span>
                     </td>
@@ -147,15 +146,15 @@ export function TableView({ headers, rows, cfg, saveAction }: {
         </table>
       </div>
       <div className="px-4 py-2 flex items-center justify-between" style={{ background: 'var(--muted)', borderTop: '1px solid var(--border)' }}>
-        <span className="text-xs" style={{ color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono',monospace" }}>
+        <span className="text-xs font-display" style={{ color: 'var(--muted-foreground)' }}>
           {localRows.length} rows · {headers.length} cols
         </span>
         {!showAdd
           ? <button onClick={() => setShowAdd(true)} className="flex items-center gap-1 text-xs px-2.5 py-1 rounded-md"
-              style={{ color: 'var(--amber)', background: 'var(--amber-dim)', fontFamily: "'IBM Plex Mono',monospace" }}
+              style={{ color: 'var(--amber)', background: 'var(--amber-dim)' }}
             ><Plus size={12} /> Add row</button>
           : <button onClick={() => setShowAdd(false)} className="text-xs px-2.5 py-1 rounded-md"
-              style={{ color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono',monospace" }}
+              style={{ color: 'var(--muted-foreground)' }}
             >Cancel</button>
         }
       </div>

package/app/components/renderers/csv/manifest.ts

@@ -0,0 +1,14 @@
+import type { RendererDefinition } from '@/lib/renderers/registry';
+
+export const manifest: RendererDefinition = {
+  id: 'csv',
+  name: 'CSV Views',
+  description: 'Renders any CSV file as Table, Gallery, or Board. Each view is independently configurable — choose which columns map to title, description, tag, and group.',
+  author: 'MindOS',
+  icon: '📊',
+  tags: ['csv', 'table', 'gallery', 'board', 'data'],
+  builtin: true,
+  entryPath: 'Resources/Products.csv',
+  match: ({ extension, filePath }) => extension === 'csv' && !/\bTODO\b/i.test(filePath),
+  load: () => import('./CsvRenderer').then(m => ({ default: m.CsvRenderer })),
+};

package/app/components/renderers/{DiffRenderer.tsx → diff/DiffRenderer.tsx}

@@ -182,7 +182,8 @@ function DiffCard({ entry, saveAction, fullContent }: {
       <div style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '10px 14px', borderBottom: expanded ? '1px solid var(--border)' : 'none' }}>
         <FileEdit size={13} style={{ color: 'var(--amber)', flexShrink: 0 }} />
         <span
-          style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.78rem', color: 'var(--amber)', flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', cursor: 'pointer' }}
+          className="font-display"
+          style={{ fontSize: '0.78rem', color: 'var(--amber)', flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', cursor: 'pointer' }}
           onClick={() => router.push('/view/' + entry.path.split('/').map(encodeURIComponent).join('/'))}
           title={entry.path}
         >
@@ -190,16 +191,16 @@ function DiffCard({ entry, saveAction, fullContent }: {
         </span>
 
         {/* diff stats */}
-        <span style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.7rem', color: '#7aad80', flexShrink: 0 }}>+{added}</span>
-        <span style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.7rem', color: '#c85050', flexShrink: 0 }}>−{removed}</span>
+        <span className="font-display" style={{ fontSize: '0.7rem', color: '#7aad80', flexShrink: 0 }}>+{added}</span>
+        <span className="font-display" style={{ fontSize: '0.7rem', color: '#c85050', flexShrink: 0 }}>−{removed}</span>
 
         {/* tool badge */}
-        <span style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.65rem', padding: '1px 7px', borderRadius: 999, background: 'var(--muted)', color: 'var(--muted-foreground)', flexShrink: 0 }}>
+        <span className="font-display" style={{ fontSize: '0.65rem', padding: '1px 7px', borderRadius: 999, background: 'var(--muted)', color: 'var(--muted-foreground)', flexShrink: 0 }}>
           {toolShort}
         </span>
 
         {/* timestamp */}
-        <span style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.65rem', color: 'var(--muted-foreground)', opacity: 0.6, flexShrink: 0 }}>
+        <span className="font-display" style={{ fontSize: '0.65rem', color: 'var(--muted-foreground)', opacity: 0.6, flexShrink: 0 }}>
           {relativeTs(entry.ts)}
         </span>
 
@@ -222,7 +223,7 @@ function DiffCard({ entry, saveAction, fullContent }: {
             </button>
           </>
         ) : (
-          <span style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.68rem', color: approved ? '#7aad80' : '#c85050' }}>
+          <span className="font-display" style={{ fontSize: '0.68rem', color: approved ? '#7aad80' : '#c85050' }}>
             {approved ? '✓ approved' : '✕ reverted'}
           </span>
         )}
@@ -237,7 +238,7 @@ function DiffCard({ entry, saveAction, fullContent }: {
 
       {/* diff view */}
       {expanded && (
-        <div style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.72rem', lineHeight: 1.5, overflowX: 'auto' }}>
+        <div className="font-display" style={{ fontSize: '0.72rem', lineHeight: 1.5, overflowX: 'auto' }}>
           {collapsed.map((line, i) => {
             if (line.type === 'collapse') {
               return (
@@ -280,7 +281,7 @@ export function DiffRenderer({ content, saveAction }: RendererContext) {
 
   if (entries.length === 0) {
     return (
-      <div style={{ padding: '3rem 1rem', textAlign: 'center', color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono',monospace", fontSize: 12 }}>
+      <div className="font-display" style={{ padding: '3rem 1rem', textAlign: 'center', color: 'var(--muted-foreground)', fontSize: 12 }}>
         <GitCompare size={28} style={{ margin: '0 auto 10px', opacity: 0.3 }} />
         <p>No agent diffs logged yet.</p>
         <p style={{ marginTop: 6, opacity: 0.6, fontSize: 11 }}>
@@ -296,7 +297,7 @@ export function DiffRenderer({ content, saveAction }: RendererContext) {
   return (
     <div style={{ maxWidth: 800, margin: '0 auto', padding: '1.5rem 0' }}>
       {/* stats bar */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: '1.2rem', fontFamily: "'IBM Plex Mono',monospace", fontSize: 11, color: 'var(--muted-foreground)' }}>
+      <div className="font-display" style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: '1.2rem', fontSize: 11, color: 'var(--muted-foreground)' }}>
         <span>{entries.length} change{entries.length !== 1 ? 's' : ''}</span>
         <span style={{ color: '#7aad80' }}>+{totalAdded}</span>
         <span style={{ color: '#c85050' }}>−{totalRemoved}</span>

package/app/components/renderers/diff/manifest.ts

@@ -0,0 +1,14 @@
+import type { RendererDefinition } from '@/lib/renderers/registry';
+
+export const manifest: RendererDefinition = {
+  id: 'diff-viewer',
+  name: 'Diff Viewer',
+  description: 'Visualizes agent file changes as a side-by-side diff timeline. Auto-activates on Agent-Diff.md with embedded agent-diff blocks.',
+  author: 'MindOS',
+  icon: '📝',
+  tags: ['diff', 'agent', 'changes', 'history'],
+  builtin: true,
+  entryPath: 'Agent-Diff.md',
+  match: ({ filePath }) => /\bAgent-Diff\b.*\.md$/i.test(filePath),
+  load: () => import('./DiffRenderer').then(m => ({ default: m.DiffRenderer })),
+};

package/app/components/renderers/{GraphRenderer.tsx → graph/GraphRenderer.tsx}

@@ -136,9 +136,8 @@ const WikiNode = memo(function WikiNode({ data }: NodeProps) {
     <div
       onClick={handleClick}
       title={id as string}
-      className="group"
+      className="group font-display"
       style={{
-        fontFamily: "'IBM Plex Mono', monospace",
         fontSize: 10 * scale,
         padding: `${4 * scale}px ${12 * scale}px`,
         borderRadius: 999, // Pill shape
@@ -326,7 +325,7 @@ export function GraphRenderer({ filePath }: RendererContext) {
           justifyContent: 'center',
         }}
       >
-        <span style={{ color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono', monospace", fontSize: 12 }}>
+        <span className="font-display" style={{ color: 'var(--muted-foreground)', fontSize: 12 }}>
           {loading ? 'Building graph…' : 'Loading…'}
         </span>
       </div>
@@ -346,8 +345,8 @@ export function GraphRenderer({ filePath }: RendererContext) {
         }}
       >
         <span
+          className="font-display"
           style={{
-            fontFamily: "'IBM Plex Mono', monospace",
             fontSize: 11,
             color: 'var(--muted-foreground)',
           }}
@@ -368,11 +367,11 @@ export function GraphRenderer({ filePath }: RendererContext) {
             <button
               key={btn.id}
               onClick={() => setScope(btn.id)}
+              className="font-display"
               style={{
                 padding: '3px 12px',
                 borderRadius: 5,
                 fontSize: 11,
-                fontFamily: "'IBM Plex Mono', monospace",
                 cursor: 'pointer',
                 border: 'none',
                 outline: 'none',

package/app/components/renderers/graph/manifest.ts

@@ -0,0 +1,14 @@
+import type { RendererDefinition } from '@/lib/renderers/registry';
+
+export const manifest: RendererDefinition = {
+  id: 'graph',
+  name: 'Wiki Graph',
+  description: 'Force-directed graph of wikilink references across all markdown files. Supports Global and Local (2-hop) scope filters.',
+  author: 'MindOS',
+  icon: '🕸️',
+  tags: ['graph', 'wiki', 'links', 'visualization'],
+  builtin: true,
+  entryPath: 'README.md',
+  match: ({ extension }) => extension === 'md',
+  load: () => import('./GraphRenderer').then(m => ({ default: m.GraphRenderer })),
+};

package/app/components/renderers/{SummaryRenderer.tsx → summary/SummaryRenderer.tsx}

@@ -34,7 +34,7 @@ function renderMarkdown(md: string): string {
     .replace(/^# (.+)$/gm, '<h1 style="font-size:1rem;font-weight:700;color:var(--foreground);margin:1.2em 0 .4em">$1</h1>')
     .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
     .replace(/\*(.+?)\*/g, '<em>$1</em>')
-    .replace(/`(.+?)`/g, '<code style="font-family:\'IBM Plex Mono\',monospace;font-size:.82em;padding:1px 5px;border-radius:4px;background:var(--muted)">$1</code>')
+    .replace(/`(.+?)`/g, '<code class="font-display" style="font-size:.82em;padding:1px 5px;border-radius:4px;background:var(--muted)">$1</code>')
     .replace(/^[-*] (.+)$/gm, '<li style="margin:.2em 0;padding-left:.3em">$1</li>')
     .replace(/(<li[^>]*>.*<\/li>\n?)+/g, s => `<ul style="margin:.4em 0;padding-left:1.4em;list-style:disc">${s}</ul>`)
     .replace(/\n{2,}/g, '</p><p style="margin:.5em 0;font-size:.85rem;line-height:1.7;color:var(--foreground)">')
@@ -136,7 +136,7 @@ Be specific. Reference actual content from the files. Keep the total response un
     <div style={{ maxWidth: 720, margin: '0 auto', padding: '1.5rem 0' }}>
       {/* header row */}
       <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: '1.5rem', flexWrap: 'wrap' }}>
-        <span style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: 11, color: 'var(--muted-foreground)' }}>
+        <span className="font-display" style={{ fontSize: 11, color: 'var(--muted-foreground)' }}>
           {recentFiles.length > 0
             ? `${recentFiles.length} recently modified files`
             : 'Loading recent files…'}
@@ -144,6 +144,7 @@ Be specific. Reference actual content from the files. Keep the total response un
         <button
           onClick={generate}
           disabled={streaming || recentFiles.length === 0}
+          className="font-display"
           style={{
             display: 'flex',
             alignItems: 'center',
@@ -151,7 +152,6 @@ Be specific. Reference actual content from the files. Keep the total response un
             padding: '5px 14px',
             borderRadius: 7,
             fontSize: 12,
-            fontFamily: "'IBM Plex Mono',monospace",
             cursor: streaming || recentFiles.length === 0 ? 'not-allowed' : 'pointer',
             border: 'none',
             background: streaming ? 'var(--muted)' : 'var(--amber)',
@@ -176,6 +176,7 @@ Be specific. Reference actual content from the files. Keep the total response un
             <a
               key={f.path}
               href={`/view/${encodePath(f.path)}`}
+              className="font-display"
               style={{
                 display: 'inline-flex',
                 alignItems: 'center',
@@ -183,7 +184,6 @@ Be specific. Reference actual content from the files. Keep the total response un
                 padding: '3px 10px',
                 borderRadius: 999,
                 fontSize: '0.7rem',
-                fontFamily: "'IBM Plex Mono',monospace",
                 background: 'var(--muted)',
                 color: 'var(--muted-foreground)',
                 textDecoration: 'none',
@@ -207,7 +207,7 @@ Be specific. Reference actual content from the files. Keep the total response un
 
       {/* error */}
       {error && (
-        <div style={{ padding: '10px 14px', borderRadius: 8, background: 'rgba(200,60,60,0.1)', border: '1px solid rgba(200,60,60,0.3)', color: '#c83c3c', fontFamily: "'IBM Plex Mono',monospace", fontSize: 12, marginBottom: '1rem' }}>
+        <div className="font-display" style={{ padding: '10px 14px', borderRadius: 8, background: 'rgba(200,60,60,0.1)', border: '1px solid rgba(200,60,60,0.3)', color: '#c83c3c', fontSize: 12, marginBottom: '1rem' }}>
           {error}
         </div>
       )}
@@ -235,7 +235,7 @@ Be specific. Reference actual content from the files. Keep the total response un
           color: 'var(--muted-foreground)',
         }}>
           <Sparkles size={28} style={{ margin: '0 auto 10px', opacity: 0.3, color: 'var(--amber)' }} />
-          <p style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: 12 }}>
+          <p className="font-display" style={{ fontSize: 12 }}>
             Click <strong style={{ color: 'var(--foreground)' }}>Generate briefing</strong> to summarize recent changes with AI.
           </p>
         </div>