@geminilight/mindos 0.3.0 → 0.4.0

package/app/components/UpdateBanner.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { X } from 'lucide-react';
+import { useLocale } from '@/lib/LocaleContext';
+import { apiFetch } from '@/lib/api';
+
+interface UpdateInfo {
+  current: string;
+  latest: string;
+}
+
+export default function UpdateBanner() {
+  const { t } = useLocale();
+  const [info, setInfo] = useState<UpdateInfo | null>(null);
+
+  useEffect(() => {
+    // Don't check for updates on setup or login pages
+    if (typeof window !== 'undefined') {
+      const path = window.location.pathname;
+      if (path === '/setup' || path === '/login') return;
+    }
+
+    const timer = setTimeout(async () => {
+      try {
+        const data = await apiFetch<{ hasUpdate: boolean; latest: string; current: string }>('/api/update-check');
+        if (!data.hasUpdate) return;
+
+        const dismissed = localStorage.getItem('mindos_update_dismissed');
+        if (data.latest === dismissed) return;
+
+        setInfo({ latest: data.latest, current: data.current });
+      } catch {
+        // Network error / API failure — silent
+      }
+    }, 3000); // Check 3s after page load, don't block first paint
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!info) return null;
+
+  const handleDismiss = () => {
+    localStorage.setItem('mindos_update_dismissed', info.latest);
+    setInfo(null);
+  };
+
+  const updateT = t.updateBanner;
+
+  return (
+    <div
+      className="flex items-center justify-between gap-3 px-4 py-2 text-xs"
+      style={{ background: 'var(--amber-subtle, rgba(200,135,30,0.08))', borderBottom: '1px solid var(--border)' }}
+    >
+      <div className="flex items-center gap-2 min-w-0">
+        <span className="font-medium" style={{ color: 'var(--amber)' }}>
+          {updateT?.newVersion
+            ? updateT.newVersion(info.latest, info.current)
+            : `MindOS v${info.latest} available (current: v${info.current})`}
+        </span>
+        <span className="text-muted-foreground">
+          {updateT?.runUpdate ?? 'Run'}{' '}
+          <code className="px-1 py-0.5 rounded bg-muted font-mono text-[11px]">mindos update</code>
+          {updateT?.orSee ? (
+            <>
+              {' '}{updateT.orSee}{' '}
+              <a
+                href="https://github.com/GeminiLight/mindos/releases"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline hover:text-foreground transition-colors"
+              >
+                {updateT.releaseNotes}
+              </a>
+            </>
+          ) : (
+            <>
+              {' '}or{' '}
+              <a
+                href="https://github.com/GeminiLight/mindos/releases"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline hover:text-foreground transition-colors"
+              >
+                view release notes
+              </a>
+            </>
+          )}
+        </span>
+      </div>
+      <button
+        onClick={handleDismiss}
+        className="p-0.5 rounded hover:bg-muted transition-colors shrink-0"
+        style={{ color: 'var(--muted-foreground)' }}
+        title="Dismiss"
+      >
+        <X size={14} />
+      </button>
+    </div>
+  );
+}

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 })),
+};