@geminilight/mindos 0.3.0 → 0.5.0

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>

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

@@ -0,0 +1,14 @@
+import type { RendererDefinition } from '@/lib/renderers/registry';
+
+export const manifest: RendererDefinition = {
+  id: 'summary',
+  name: 'AI Briefing',
+  description: 'Streams an AI-generated daily briefing summarizing your most recently modified files — key changes, recurring themes, and suggested next actions.',
+  author: 'MindOS',
+  icon: '✨',
+  tags: ['ai', 'summary', 'briefing', 'daily'],
+  builtin: true,
+  entryPath: 'DAILY.md',
+  match: ({ filePath }) => /\b(SUMMARY|summary|Summary|BRIEFING|briefing|Briefing|DAILY|daily|Daily)\b.*\.md$/i.test(filePath),
+  load: () => import('./SummaryRenderer').then(m => ({ default: m.SummaryRenderer })),
+};

package/app/components/renderers/{TimelineRenderer.tsx → timeline/TimelineRenderer.tsx}

@@ -71,7 +71,7 @@ function renderInline(text: string): string {
   return text
     .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
     .replace(/\*(.+?)\*/g, '<em>$1</em>')
-    .replace(/`(.+?)`/g, '<code style="font-family:\'IBM Plex Mono\',monospace;font-size:0.85em;padding:1px 5px;border-radius:4px;background:var(--muted)">$1</code>')
+    .replace(/`(.+?)`/g, '<code class="font-display" style="font-size:0.85em;padding:1px 5px;border-radius:4px;background:var(--muted)">$1</code>')
     .replace(/\[\[([^\]|]+)(?:\|([^\]]+))?\]\]/g, (_, target, alias) =>
       `<span style="color:var(--amber);cursor:pointer" title="${target}">${alias ?? target}</span>`)
     .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" style="color:var(--amber)">$1</a>');
@@ -131,7 +131,7 @@ export function TimelineRenderer({ content }: RendererContext) {
 
   if (entries.length === 0) {
     return (
-      <div style={{ padding: '3rem 1rem', textAlign: 'center', color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono',monospace", fontSize: 13 }}>
+      <div className="font-display" style={{ padding: '3rem 1rem', textAlign: 'center', color: 'var(--muted-foreground)', fontSize: 13 }}>
         No timeline entries found. Add <code style={{ background: 'var(--muted)', padding: '1px 6px', borderRadius: 4 }}>## 2025-01-15</code> headings to create entries.
       </div>
     );
@@ -141,7 +141,7 @@ export function TimelineRenderer({ content }: RendererContext) {
     <div style={{ maxWidth: 720, margin: '0 auto', padding: '1.5rem 0' }}>
       {/* count pill */}
       <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)' }}>
           {entries.length} {entries.length === 1 ? 'entry' : 'entries'}
         </span>
       </div>
@@ -176,11 +176,11 @@ export function TimelineRenderer({ content }: RendererContext) {
             }}>
               {/* header */}
               <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap', marginBottom: 8 }}>
-                <span style={{ fontFamily: "'IBM Plex Sans',sans-serif", fontWeight: 600, fontSize: '0.9rem', color: 'var(--foreground)' }}>
+                <span style={{ fontWeight: 600, fontSize: '0.9rem', color: 'var(--foreground)' }}>
                   {entry.heading}
                 </span>
                 {entry.date && (
-                  <span style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.7rem', color: 'var(--muted-foreground)', opacity: 0.7, flexShrink: 0 }}>
+                  <span className="font-display" style={{ fontSize: '0.7rem', color: 'var(--muted-foreground)', opacity: 0.7, flexShrink: 0 }}>
                     {formatDate(entry.date)}
                   </span>
                 )}
@@ -197,7 +197,7 @@ export function TimelineRenderer({ content }: RendererContext) {
                   {entry.tags.map(tag => {
                     const c = tagColor(tag);
                     return (
-                      <span key={tag} style={{ fontSize: '0.68rem', padding: '1px 8px', borderRadius: 999, fontFamily: "'IBM Plex Mono',monospace", background: c.bg, color: c.text }}>
+                      <span key={tag} className="font-display" style={{ fontSize: '0.68rem', padding: '1px 8px', borderRadius: 999, background: c.bg, color: c.text }}>
                         #{tag}
                       </span>
                     );

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

@@ -0,0 +1,14 @@
+import type { RendererDefinition } from '@/lib/renderers/registry';
+
+export const manifest: RendererDefinition = {
+  id: 'timeline',
+  name: 'Timeline',
+  description: 'Renders changelog and journal files as a vertical timeline. Any markdown with ## date headings (e.g. ## 2025-01-15) becomes a card in the feed.',
+  author: 'MindOS',
+  icon: '📅',
+  tags: ['timeline', 'changelog', 'journal', 'history'],
+  builtin: true,
+  entryPath: 'CHANGELOG.md',
+  match: ({ filePath }) => /\b(CHANGELOG|changelog|TIMELINE|timeline|journal|Journal|diary|Diary)\b.*\.md$/i.test(filePath),
+  load: () => import('./TimelineRenderer').then(m => ({ default: m.TimelineRenderer })),
+};

package/app/components/renderers/{TodoRenderer.tsx → todo/TodoRenderer.tsx}

@@ -358,7 +358,7 @@ function SectionCard({
       >
         <div className="flex items-center gap-2">
           <span className={`w-2 h-2 rounded-full shrink-0 ${style.dot}`} />
-          <span className={`text-xs font-semibold uppercase tracking-wider ${style.label}`} style={{ fontFamily: "'IBM Plex Mono', monospace" }}>
+          <span className={`text-xs font-semibold uppercase tracking-wider ${style.label} font-display`}>
             {name}
           </span>
           <span className="text-xs text-muted-foreground">{done}/{total}</span>
@@ -441,7 +441,7 @@ export function TodoRenderer({ content, saveAction }: RendererContext) {
     <div className="max-w-[900px] mx-auto xl:mr-[220px] px-0 py-2">
       {/* Summary header */}
       <div className="mb-6">
-        <p className="text-xs text-muted-foreground" style={{ fontFamily: "'IBM Plex Mono', monospace" }}>
+        <p className="text-xs text-muted-foreground font-display">
           {totalDone} / {totalItems} completed
         </p>
         <div className="mt-1.5 w-48 h-1.5 bg-muted rounded-full overflow-hidden">

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

@@ -0,0 +1,14 @@
+import type { RendererDefinition } from '@/lib/renderers/registry';
+
+export const manifest: RendererDefinition = {
+  id: 'todo',
+  name: 'TODO Board',
+  description: 'Renders TODO.md/TODO.csv as an interactive kanban board grouped by section. Check items off directly — changes are written back to the source file.',
+  author: 'MindOS',
+  icon: '✅',
+  tags: ['productivity', 'tasks', 'markdown'],
+  builtin: true,
+  entryPath: 'TODO.md',
+  match: ({ filePath }) => /\bTODO\b.*\.(md|csv)$/i.test(filePath),
+  load: () => import('./TodoRenderer').then(m => ({ default: m.TodoRenderer })),
+};

package/app/components/renderers/{WorkflowRenderer.tsx → workflow/WorkflowRenderer.tsx}

@@ -75,7 +75,7 @@ function parseWorkflow(content: string): { meta: WorkflowMeta; steps: WorkflowSt
 function renderInline(text: string): string {
   return text
     .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-    .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(/\*(.+?)\*/g, '<em>$1</em>');
 }
 
@@ -188,7 +188,7 @@ function StepCard({
       <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '11px 14px' }}>
         <StatusIcon status={step.status} />
         <span
-          style={{ flex: 1, fontFamily: "'IBM Plex Sans',sans-serif", fontWeight: 600, fontSize: '.88rem', color: 'var(--foreground)', cursor: hasBody || hasOutput ? 'pointer' : 'default' }}
+          style={{ flex: 1, fontWeight: 600, fontSize: '.88rem', color: 'var(--foreground)', cursor: hasBody || hasOutput ? 'pointer' : 'default' }}
           onClick={() => (hasBody || hasOutput) && setExpanded(v => !v)}
         >
           {step.heading}
@@ -204,7 +204,7 @@ function StepCard({
                 style={{
                   display: 'flex', alignItems: 'center', gap: 4,
                   padding: '3px 10px', borderRadius: 6, fontSize: '0.72rem',
-                  fontFamily: "'IBM Plex Mono',monospace", cursor: canRun ? 'pointer' : 'not-allowed',
+                  cursor: canRun ? 'pointer' : 'not-allowed',
                   border: 'none', background: canRun ? 'var(--amber)' : 'var(--muted)',
                   color: canRun ? '#131210' : 'var(--muted-foreground)',
                   opacity: canRun ? 1 : 0.5,
@@ -216,7 +216,7 @@ function StepCard({
                 onClick={onSkip}
                 style={{
                   padding: '3px 8px', borderRadius: 6, fontSize: '0.72rem',
-                  fontFamily: "'IBM Plex Mono',monospace", cursor: 'pointer',
+                  cursor: 'pointer',
                   border: '1px solid var(--border)', background: 'transparent',
                   color: 'var(--muted-foreground)',
                 }}
@@ -226,12 +226,12 @@ function StepCard({
             </>
           )}
           {step.status === 'running' && (
-            <span style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.7rem', color: 'var(--amber)' }}>executing…</span>
+            <span className="font-display" style={{ fontSize: '0.7rem', color: 'var(--amber)' }}>executing…</span>
           )}
           {(step.status === 'done' || step.status === 'error') && (
             <button
               onClick={() => setExpanded(v => !v)}
-              style={{ padding: '3px 8px', borderRadius: 6, fontSize: '0.72rem', fontFamily: "'IBM Plex Mono',monospace", cursor: 'pointer', border: '1px solid var(--border)', background: 'transparent', color: 'var(--muted-foreground)' }}
+              style={{ padding: '3px 8px', borderRadius: 6, fontSize: '0.72rem', cursor: 'pointer', border: '1px solid var(--border)', background: 'transparent', color: 'var(--muted-foreground)' }}
             >
               <ChevronDown size={11} style={{ display: 'inline', transform: expanded ? 'rotate(180deg)' : 'none', transition: 'transform .15s' }} />
             </button>
@@ -251,10 +251,10 @@ function StepCard({
             <div style={{ padding: '10px 14px', background: 'var(--background)', position: 'relative' }}>
               <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginBottom: 6 }}>
                 <Sparkles size={11} style={{ color: 'var(--amber)' }} />
-                <span style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.68rem', color: 'var(--muted-foreground)', textTransform: 'uppercase', letterSpacing: '.06em' }}>AI Output</span>
+                <span className="font-display" style={{ fontSize: '0.68rem', color: 'var(--muted-foreground)', textTransform: 'uppercase', letterSpacing: '.06em' }}>AI Output</span>
                 {step.status === 'running' && <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--amber)', animation: 'pulse 1.2s ease-in-out infinite', marginLeft: 4 }} />}
               </div>
-              <div style={{ fontFamily: "'IBM Plex Sans',sans-serif", fontSize: '.82rem', lineHeight: 1.7, color: 'var(--foreground)', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+              <div style={{ fontSize: '.82rem', lineHeight: 1.7, color: 'var(--foreground)', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
                 {step.output}
               </div>
             </div>
@@ -326,7 +326,7 @@ export function WorkflowRenderer({ filePath, content }: RendererContext) {
 
   if (steps.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 }}>
         No steps found. Add <code style={{ background: 'var(--muted)', padding: '1px 5px', borderRadius: 4 }}>## Step N: …</code> headings to define workflow steps.
       </div>
     );
@@ -337,7 +337,7 @@ export function WorkflowRenderer({ filePath, content }: RendererContext) {
       {/* header */}
       <div style={{ marginBottom: '1.2rem' }}>
         {parsed.meta.description && (
-          <p style={{ fontFamily: "'IBM Plex Sans',sans-serif", fontSize: '.82rem', color: 'var(--muted-foreground)', lineHeight: 1.6, marginBottom: 12 }}>
+          <p style={{ fontSize: '.82rem', color: 'var(--muted-foreground)', lineHeight: 1.6, marginBottom: 12 }}>
             {parsed.meta.description}
           </p>
         )}
@@ -348,7 +348,7 @@ export function WorkflowRenderer({ filePath, content }: RendererContext) {
           <div style={{ flex: 1, minWidth: 120, height: 4, borderRadius: 999, background: 'var(--border)', overflow: 'hidden' }}>
             <div style={{ height: '100%', width: `${progress}%`, background: 'var(--amber)', borderRadius: 999, transition: 'width .3s' }} />
           </div>
-          <span style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.7rem', color: 'var(--muted-foreground)', flexShrink: 0 }}>
+          <span className="font-display" style={{ fontSize: '0.7rem', color: 'var(--muted-foreground)', flexShrink: 0 }}>
             {doneCount}/{steps.length} done
           </span>
 
@@ -360,7 +360,7 @@ export function WorkflowRenderer({ filePath, content }: RendererContext) {
               style={{
                 display: 'flex', alignItems: 'center', gap: 5,
                 padding: '4px 12px', borderRadius: 7, fontSize: '0.75rem',
-                fontFamily: "'IBM Plex Mono',monospace", cursor: running ? 'not-allowed' : 'pointer',
+                cursor: running ? 'not-allowed' : 'pointer',
                 border: 'none', background: running ? 'var(--muted)' : 'var(--amber)',
                 color: running ? 'var(--muted-foreground)' : '#131210',
                 opacity: running ? 0.7 : 1,
@@ -374,7 +374,7 @@ export function WorkflowRenderer({ filePath, content }: RendererContext) {
           {/* reset */}
           <button
             onClick={reset}
-            style={{ padding: '4px 10px', borderRadius: 7, fontSize: '0.75rem', fontFamily: "'IBM Plex Mono',monospace", cursor: 'pointer', border: '1px solid var(--border)', background: 'transparent', color: 'var(--muted-foreground)', display: 'flex', alignItems: 'center', gap: 4 }}
+            style={{ padding: '4px 10px', borderRadius: 7, fontSize: '0.75rem', cursor: 'pointer', border: '1px solid var(--border)', background: 'transparent', color: 'var(--muted-foreground)', display: 'flex', alignItems: 'center', gap: 4 }}
           >
             <RotateCcw size={11} /> Reset
           </button>

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

@@ -0,0 +1,14 @@
+import type { RendererDefinition } from '@/lib/renderers/registry';
+
+export const manifest: RendererDefinition = {
+  id: 'workflow',
+  name: 'Workflow Runner',
+  description: 'Parses step-by-step workflow markdown into an interactive runner. Execute steps sequentially with AI assistance.',
+  author: 'MindOS',
+  icon: '⚡',
+  tags: ['workflow', 'automation', 'steps', 'ai'],
+  builtin: true,
+  entryPath: 'Workflow.md',
+  match: ({ filePath }) => /\b(Workflow|workflow|WORKFLOW)\b.*\.md$/i.test(filePath),
+  load: () => import('./WorkflowRenderer').then(m => ({ default: m.WorkflowRenderer })),
+};