@geminilight/mindos 0.1.0

package/app/components/ask/SessionHistory.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { Trash2 } from 'lucide-react';
+import type { ChatSession } from '@/lib/types';
+import { sessionTitle } from '@/hooks/useAskSession';
+
+interface SessionHistoryProps {
+  sessions: ChatSession[];
+  activeSessionId: string | null;
+  onLoad: (id: string) => void;
+  onDelete: (id: string) => void;
+}
+
+export default function SessionHistory({ sessions, activeSessionId, onLoad, onDelete }: SessionHistoryProps) {
+  return (
+    <div className="border-b border-border px-4 py-2.5 max-h-[190px] overflow-y-auto">
+      <div className="text-[11px] text-muted-foreground mb-2">Session History</div>
+      <div className="flex flex-col gap-1.5">
+        {sessions.length === 0 && (
+          <div className="text-xs text-muted-foreground/70">No saved sessions.</div>
+        )}
+        {sessions.map((s) => (
+          <div key={s.id} className="flex items-center gap-1.5">
+            <button
+              type="button"
+              onClick={() => onLoad(s.id)}
+              className={`flex-1 text-left px-2 py-1.5 rounded text-xs transition-colors ${
+                activeSessionId === s.id
+                  ? 'bg-accent text-foreground'
+                  : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+              }`}
+            >
+              <div className="truncate">{sessionTitle(s)}</div>
+              <div className="text-[10px] opacity-60">{new Date(s.updatedAt).toLocaleString()}</div>
+            </button>
+            <button
+              type="button"
+              onClick={() => onDelete(s.id)}
+              className="p-1 rounded text-muted-foreground hover:text-red-400 hover:bg-muted"
+              title="Delete session"
+            >
+              <Trash2 size={12} />
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/app/components/renderers/AgentInspectorRenderer.tsx

@@ -0,0 +1,277 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Terminal, FileEdit, FilePlus, Trash2, Search, Clock, ChevronDown, AlertCircle, CheckCircle2 } from 'lucide-react';
+import type { RendererContext } from '@/lib/renderers/registry';
+
+// ─── Log entry format ─────────────────────────────────────────────────────────
+// Each entry is a fenced JSON block in the markdown:
+//
+// ```agent-op
+// { "ts": "2025-01-15T10:30:00Z", "tool": "mindos_write_file",
+//   "params": { "path": "...", "content": "..." },
+//   "result": "ok" | "error", "message": "..." }
+// ```
+
+interface AgentOp {
+  ts: string;
+  tool: string;
+  params: Record<string, unknown>;
+  result: 'ok' | 'error';
+  message?: string;
+}
+
+// ─── Parser ───────────────────────────────────────────────────────────────────
+
+function parseOps(content: string): AgentOp[] {
+  const ops: AgentOp[] = [];
+  const re = /```agent-op\n([\s\S]*?)```/g;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(content)) !== null) {
+    try {
+      const op = JSON.parse(m[1].trim()) as AgentOp;
+      if (op.tool && op.ts) ops.push(op);
+    } catch { /* skip malformed */ }
+  }
+  // newest first
+  return ops.sort((a, b) => new Date(b.ts).getTime() - new Date(a.ts).getTime());
+}
+
+// ─── Tool metadata ────────────────────────────────────────────────────────────
+
+type OpKind = 'read' | 'write' | 'create' | 'delete' | 'search' | 'other';
+
+function opKind(tool: string): OpKind {
+  if (/read|list|get|search/.test(tool)) {
+    if (/search/.test(tool)) return 'search';
+    return 'read';
+  }
+  if (/create/.test(tool)) return 'create';
+  if (/delete/.test(tool)) return 'delete';
+  if (/write|update|insert|append/.test(tool)) return 'write';
+  return 'other';
+}
+
+const KIND_STYLE: Record<OpKind, { bg: string; text: string; border: string }> = {
+  read:   { bg: 'rgba(138,180,216,0.10)', text: '#8ab4d8', border: 'rgba(138,180,216,0.25)' },
+  write:  { bg: 'rgba(200,135,58,0.10)',  text: 'var(--amber)', border: 'rgba(200,135,58,0.25)' },
+  create: { bg: 'rgba(122,173,128,0.10)', text: '#7aad80', border: 'rgba(122,173,128,0.25)' },
+  delete: { bg: 'rgba(200,80,80,0.10)',   text: '#c85050', border: 'rgba(200,80,80,0.25)' },
+  search: { bg: 'rgba(200,160,216,0.10)', text: '#c8a0d8', border: 'rgba(200,160,216,0.25)' },
+  other:  { bg: 'var(--muted)', text: 'var(--muted-foreground)', border: 'var(--border)' },
+};
+
+function OpIcon({ kind, size = 13 }: { kind: OpKind; size?: number }) {
+  if (kind === 'read')   return <Clock size={size} />;
+  if (kind === 'write')  return <FileEdit size={size} />;
+  if (kind === 'create') return <FilePlus size={size} />;
+  if (kind === 'delete') return <Trash2 size={size} />;
+  if (kind === 'search') return <Search size={size} />;
+  return <Terminal size={size} />;
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function formatTs(ts: string): string {
+  try {
+    const d = new Date(ts);
+    return d.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' });
+  } catch { return ts; }
+}
+
+function relativeTs(ts: string): string {
+  const diff = Date.now() - new Date(ts).getTime();
+  const m = Math.floor(diff / 60000);
+  const h = Math.floor(diff / 3600000);
+  const d = Math.floor(diff / 86400000);
+  if (m < 1) return 'just now';
+  if (m < 60) return `${m}m ago`;
+  if (h < 24) return `${h}h ago`;
+  return `${d}d ago`;
+}
+
+function getFilePath(params: Record<string, unknown>): string | null {
+  return typeof params.path === 'string' ? params.path : null;
+}
+
+function truncateContent(v: unknown, max = 120): string {
+  const s = typeof v === 'string' ? v : JSON.stringify(v);
+  return s.length > max ? s.slice(0, max) + '…' : s;
+}
+
+// ─── Single op card ───────────────────────────────────────────────────────────
+
+function OpCard({ op }: { op: AgentOp }) {
+  const router = useRouter();
+  const [expanded, setExpanded] = useState(false);
+  const kind = opKind(op.tool);
+  const style = KIND_STYLE[kind];
+  const filePath = getFilePath(op.params);
+
+  const toolShort = op.tool.replace('mindos_', '');
+
+  return (
+    <div style={{
+      background: 'var(--card)',
+      border: `1px solid var(--border)`,
+      borderRadius: 10,
+      overflow: 'hidden',
+      marginBottom: 8,
+    }}>
+      {/* Header row */}
+      <div
+        style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', cursor: 'pointer', userSelect: 'none' }}
+        onClick={() => setExpanded(v => !v)}
+      >
+        {/* kind badge */}
+        <span style={{
+          display: 'inline-flex', alignItems: 'center', gap: 4,
+          padding: '2px 8px', borderRadius: 999, fontSize: '0.68rem',
+          fontFamily: "'IBM Plex Mono',monospace", fontWeight: 600,
+          background: style.bg, color: style.text, border: `1px solid ${style.border}`,
+          flexShrink: 0,
+        }}>
+          <OpIcon kind={kind} size={10} />
+          {kind}
+        </span>
+
+        {/* tool name */}
+        <span style={{ fontFamily: "'IBM Plex Mono',monospace", 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' }}
+            onClick={e => { e.stopPropagation(); router.push('/view/' + filePath.split('/').map(encodeURIComponent).join('/')); }}
+            title={filePath}
+          >
+            {filePath}
+          </span>
+        )}
+
+        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
+          {/* result */}
+          {op.result === 'ok'
+            ? <CheckCircle2 size={13} style={{ color: '#7aad80' }} />
+            : <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)}>
+            {relativeTs(op.ts)}
+          </span>
+          {/* chevron */}
+          <ChevronDown size={12} style={{ color: 'var(--muted-foreground)', transform: expanded ? 'rotate(180deg)' : 'none', transition: 'transform .15s' }} />
+        </div>
+      </div>
+
+      {/* Expanded params */}
+      {expanded && (
+        <div style={{ borderTop: '1px solid var(--border)', padding: '10px 14px', background: 'var(--background)' }}>
+          {/* params table */}
+          <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 }}>
+                  {k}
+                </span>
+                <span style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.72rem', color: 'var(--foreground)', wordBreak: 'break-all', lineHeight: 1.5 }}>
+                  {truncateContent(v)}
+                </span>
+              </div>
+            ))}
+          </div>
+          {/* result message */}
+          {op.message && (
+            <div style={{ marginTop: 6, padding: '5px 9px', borderRadius: 5, fontSize: '0.72rem', fontFamily: "'IBM Plex Mono',monospace",
+              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)'}`,
+            }}>
+              {op.message}
+            </div>
+          )}
+          {/* absolute timestamp */}
+          <div style={{ marginTop: 6, fontSize: '0.65rem', fontFamily: "'IBM Plex Mono',monospace", color: 'var(--muted-foreground)', opacity: 0.5 }}>
+            {formatTs(op.ts)}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Filter bar ───────────────────────────────────────────────────────────────
+
+const KINDS: Array<OpKind | 'all'> = ['all', 'write', 'create', 'delete', 'read', 'search'];
+
+// ─── Main renderer ────────────────────────────────────────────────────────────
+
+export function AgentInspectorRenderer({ content }: RendererContext) {
+  const [filter, setFilter] = useState<OpKind | 'all'>('all');
+  const ops = useMemo(() => parseOps(content), [content]);
+
+  const filtered = useMemo(() =>
+    filter === 'all' ? ops : ops.filter(op => opKind(op.tool) === filter),
+    [ops, filter]);
+
+  const counts = useMemo(() => {
+    const c: Record<string, number> = { all: ops.length };
+    for (const op of ops) {
+      const k = opKind(op.tool);
+      c[k] = (c[k] ?? 0) + 1;
+    }
+    return c;
+  }, [ops]);
+
+  if (ops.length === 0) {
+    return (
+      <div style={{ padding: '3rem 1rem', textAlign: 'center', color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono',monospace", 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 }}>
+          Agent writes appear here as <code style={{ background: 'var(--muted)', padding: '1px 5px', borderRadius: 4 }}>```agent-op</code> blocks.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ maxWidth: 760, margin: '0 auto', padding: '1.5rem 0' }}>
+      {/* filter bar */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: '1.2rem', flexWrap: 'wrap' }}>
+        {KINDS.map(k => {
+          const cnt = counts[k] ?? 0;
+          if (k !== 'all' && !cnt) return null;
+          const style = k !== 'all' ? KIND_STYLE[k] : undefined;
+          const active = filter === k;
+          return (
+            <button
+              key={k}
+              onClick={() => setFilter(k)}
+              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',
+                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',
+                transition: 'all .1s',
+              }}
+            >
+              {k !== 'all' && <OpIcon kind={k} size={10} />}
+              {k} <span style={{ opacity: 0.6 }}>({cnt})</span>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* ops list */}
+      <div>
+        {filtered.map((op, i) => <OpCard key={i} op={op} />)}
+      </div>
+    </div>
+  );
+}

package/app/components/renderers/BacklinksRenderer.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { FileText, ExternalLink } from 'lucide-react';
+import { encodePath } from '@/lib/utils';
+import type { RendererContext } from '@/lib/renderers/registry';
+import { apiFetch } from '@/lib/api';
+
+interface BacklinkItem {
+  filePath: string;
+  snippets: string[];
+}
+
+function basename(p: string) {
+  return p.split('/').pop()?.replace(/\.md$/, '') ?? p;
+}
+
+function dirname(p: string) {
+  const parts = p.split('/');
+  return parts.length > 1 ? parts.slice(0, -1).join('/') : '';
+}
+
+// Highlight [[...]] and [text](url) references in snippet
+function SnippetLine({ text }: { text: string }) {
+  // Replace wikilinks and md links with styled spans
+  const parts = text.split(/(\[\[[^\]]+\]\]|\[[^\]]+\]\([^)]+\))/g);
+  return (
+    <span>
+      {parts.map((part, i) => {
+        if (/^\[\[/.test(part) || /^\[/.test(part)) {
+          return <span key={i} style={{ color: 'var(--amber)', fontWeight: 500 }}>{part}</span>;
+        }
+        return <span key={i}>{part}</span>;
+      })}
+    </span>
+  );
+}
+
+export function BacklinksRenderer({ filePath }: RendererContext) {
+  const router = useRouter();
+  const [backlinks, setBacklinks] = useState<BacklinkItem[] | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    apiFetch<BacklinkItem[]>(`/api/backlinks?path=${encodeURIComponent(filePath)}`)
+      .then((data) => { setBacklinks(data); setLoading(false); })
+      .catch(() => setLoading(false));
+  }, [filePath]);
+
+  if (loading) {
+    return (
+      <div style={{ padding: '3rem 1rem', textAlign: 'center', fontFamily: "'IBM Plex Mono',monospace", fontSize: 12, color: 'var(--muted-foreground)' }}>
+        Scanning backlinks…
+      </div>
+    );
+  }
+
+  const items = backlinks ?? [];
+
+  return (
+    <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)' }}>
+          {items.length === 0 ? 'No backlinks found' : `${items.length} file${items.length === 1 ? '' : 's'} link here`}
+        </span>
+      </div>
+
+      {items.length === 0 ? (
+        <div style={{
+          border: '1px dashed var(--border)',
+          borderRadius: 10,
+          padding: '2.5rem 1.5rem',
+          textAlign: 'center',
+          color: 'var(--muted-foreground)',
+          fontSize: 13,
+        }}>
+          <FileText size={28} style={{ margin: '0 auto 10px', opacity: 0.3 }} />
+          <p style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: 12 }}>
+            No other files link to <strong style={{ color: 'var(--foreground)' }}>{basename(filePath)}</strong> yet.
+          </p>
+        </div>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+          {items.map(({ filePath: src, snippets }) => {
+            const name = basename(src);
+            const dir = dirname(src);
+            return (
+              <div
+                key={src}
+                style={{
+                  background: 'var(--card)',
+                  border: '1px solid var(--border)',
+                  borderRadius: 10,
+                  overflow: 'hidden',
+                  cursor: 'pointer',
+                  transition: 'border-color .15s',
+                }}
+                onClick={() => router.push('/view/' + encodePath(src))}
+                onMouseEnter={e => (e.currentTarget.style.borderColor = 'rgba(200,135,58,0.4)')}
+                onMouseLeave={e => (e.currentTarget.style.borderColor = 'var(--border)')}
+              >
+                {/* file header */}
+                <div style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 8,
+                  padding: '10px 14px',
+                  borderBottom: snippets.length > 0 ? '1px solid var(--border)' : 'none',
+                  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' }}>
+                    {name}
+                  </span>
+                  {dir && (
+                    <span style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.68rem', color: 'var(--muted-foreground)', opacity: 0.6, flexShrink: 0 }}>
+                      {dir}
+                    </span>
+                  )}
+                  <ExternalLink size={11} style={{ color: 'var(--muted-foreground)', opacity: 0.5, flexShrink: 0 }} />
+                </div>
+
+                {/* snippets */}
+                {snippets.map((snippet: string, i: number) => (
+                  <div key={i} style={{
+                    padding: '8px 14px',
+                    borderBottom: i < snippets.length - 1 ? '1px solid var(--border)' : 'none',
+                    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' }}>
+                        <SnippetLine text={line} />
+                      </div>
+                    ))}
+                  </div>
+                ))}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}