@geminilight/mindos 0.1.0

package/app/components/CsvView.tsx

@@ -0,0 +1,325 @@
+'use client';
+
+import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
+import Papa from 'papaparse';
+import { ChevronUp, ChevronDown, ChevronsUpDown, Plus, Trash2 } from 'lucide-react';
+
+interface CsvViewProps {
+  content: string;
+  filePath?: string;
+  appendAction?: (newRow: string[]) => Promise<{ newContent: string }>;
+  saveAction?: (newContent: string) => Promise<void>;
+}
+
+type SortDir = 'asc' | 'desc' | null;
+
+function serializeRows(headers: string[], rows: string[][]): string {
+  return Papa.unparse([headers, ...rows]);
+}
+
+// ─── Inline cell editor ───────────────────────────────────────────────────────
+
+function Cell({
+  value,
+  editable,
+  onCommit,
+}: {
+  value: string;
+  editable: boolean;
+  onCommit: (newVal: string) => void;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  function startEdit() {
+    if (!editable) return;
+    setDraft(value);
+    setEditing(true);
+  }
+
+  useEffect(() => {
+    if (editing) inputRef.current?.select();
+  }, [editing]);
+
+  function commit() {
+    setEditing(false);
+    if (draft !== value) onCommit(draft);
+  }
+
+  if (editing) {
+    return (
+      <input
+        ref={inputRef}
+        value={draft}
+        onChange={e => setDraft(e.target.value)}
+        onBlur={commit}
+        onKeyDown={e => {
+          if (e.key === 'Enter') commit();
+          if (e.key === 'Escape') { setDraft(value); setEditing(false); }
+        }}
+        className="w-full bg-transparent outline-none text-sm"
+        style={{
+          color: 'var(--foreground)',
+          borderBottom: '1px solid var(--amber)',
+          minWidth: 60,
+        }}
+        onClick={e => e.stopPropagation()}
+      />
+    );
+  }
+
+  return (
+    <div
+      className={`truncate text-sm ${editable ? 'cursor-text' : ''}`}
+      style={{ color: 'var(--foreground)', minWidth: 60 }}
+      onClick={editable ? startEdit : undefined}
+      title={value}
+    >
+      {value || <span style={{ color: 'var(--muted-foreground)', opacity: 0.4 }}>—</span>}
+    </div>
+  );
+}
+
+// ─── Add row form ─────────────────────────────────────────────────────────────
+
+function AddRowForm({
+  headers,
+  onAdd,
+  onCancel,
+}: {
+  headers: string[];
+  onAdd: (row: string[]) => void;
+  onCancel: () => void;
+}) {
+  const [values, setValues] = useState<string[]>(() => Array(headers.length).fill(''));
+  const firstRef = useRef<HTMLInputElement>(null);
+
+  function set(i: number, v: string) {
+    setValues(prev => { const next = [...prev]; next[i] = v; return next; });
+  }
+
+  function submit() {
+    onAdd(values);
+  }
+
+  return (
+    <tr style={{ background: 'color-mix(in srgb, var(--amber) 6%, transparent)', borderTop: '1px solid var(--amber)' }}>
+      {headers.map((h, i) => (
+        <td key={i} className="px-3 py-2" style={{ borderBottom: '1px solid var(--border)' }}>
+          <input
+            ref={i === 0 ? firstRef : undefined}
+            autoFocus={i === 0}
+            value={values[i]}
+            onChange={e => set(i, e.target.value)}
+            onKeyDown={e => {
+              if (e.key === 'Enter') submit();
+              if (e.key === 'Escape') onCancel();
+            }}
+            placeholder={h}
+            className="w-full bg-transparent outline-none text-sm placeholder:opacity-30"
+            style={{ color: 'var(--foreground)', borderBottom: '1px solid var(--border)' }}
+          />
+        </td>
+      ))}
+      {/* spacer for delete column */}
+      <td className="px-2 py-2" style={{ borderBottom: '1px solid var(--border)' }} />
+    </tr>
+  );
+}
+
+// ─── Main component ───────────────────────────────────────────────────────────
+
+export default function CsvView({ content: initialContent, appendAction, saveAction }: CsvViewProps) {
+  const [content, setContent] = useState(initialContent);
+  const [sortCol, setSortCol] = useState<number | null>(null);
+  const [sortDir, setSortDir] = useState<SortDir>(null);
+  const [showAdd, setShowAdd] = useState(false);
+
+  const parsed = useMemo(() => {
+    const result = Papa.parse<string[]>(content, { skipEmptyLines: true });
+    return result.data as string[][];
+  }, [content]);
+
+  const headers = parsed[0] || [];
+  const rows = parsed.slice(1);
+
+  const sortedRows = useMemo(() => {
+    if (sortCol === null || sortDir === null) return rows;
+    return [...rows].sort((a, b) => {
+      const va = a[sortCol] ?? '', vb = b[sortCol] ?? '';
+      const na = parseFloat(va), nb = parseFloat(vb);
+      if (!isNaN(na) && !isNaN(nb)) return sortDir === 'asc' ? na - nb : nb - na;
+      return sortDir === 'asc' ? va.localeCompare(vb) : vb.localeCompare(va);
+    });
+  }, [rows, sortCol, sortDir]);
+
+  function toggleSort(col: number) {
+    if (sortCol !== col) { setSortCol(col); setSortDir('asc'); return; }
+    if (sortDir === 'asc') { setSortDir('desc'); return; }
+    setSortCol(null); setSortDir(null);
+  }
+
+  // Update a single cell and persist
+  const handleCellCommit = useCallback(async (rowIdx: number, colIdx: number, newVal: string) => {
+    if (!saveAction) return;
+    // rowIdx here is index into sortedRows — need to map back to original rows
+    const updatedRows = rows.map((r, i) => {
+      // find which original row matches this sorted row
+      const sorted = sortedRows[rowIdx];
+      if (r === sorted) return r.map((cell, ci) => ci === colIdx ? newVal : cell);
+      return r;
+    });
+    const newContent = serializeRows(headers, updatedRows);
+    setContent(newContent);
+    await saveAction(newContent);
+  }, [saveAction, rows, sortedRows, headers]);
+
+  // Delete a row and persist
+  const handleDeleteRow = useCallback(async (rowIdx: number) => {
+    if (!saveAction) return;
+    const sorted = sortedRows[rowIdx];
+    const updatedRows = rows.filter(r => r !== sorted);
+    const newContent = serializeRows(headers, updatedRows);
+    setContent(newContent);
+    await saveAction(newContent);
+  }, [saveAction, rows, sortedRows, headers]);
+
+  // Append a new row
+  const handleAddRow = useCallback(async (newRow: string[]) => {
+    setShowAdd(false);
+    if (appendAction) {
+      const result = await appendAction(newRow);
+      setContent(result.newContent);
+    } else if (saveAction) {
+      const newContent = serializeRows(headers, [...rows, newRow]);
+      setContent(newContent);
+      await saveAction(newContent);
+    }
+  }, [appendAction, saveAction, headers, rows]);
+
+  const canEdit = !!saveAction || !!appendAction;
+
+  if (headers.length === 0) {
+    return <div className="text-sm py-4" style={{ color: 'var(--muted-foreground)' }}>Empty CSV file</div>;
+  }
+
+  return (
+    <div className="w-full rounded-xl overflow-hidden border" style={{ borderColor: 'var(--border)' }}>
+      <div className="overflow-x-auto">
+        <table className="min-w-full text-sm border-collapse">
+          <thead>
+            <tr style={{ background: 'var(--muted)' }}>
+              {headers.map((header, i) => (
+                <th
+                  key={i}
+                  onClick={() => toggleSort(i)}
+                  className="px-4 py-2.5 text-left font-semibold cursor-pointer select-none whitespace-nowrap transition-colors hover:bg-accent"
+                  style={{
+                    color: 'var(--foreground)',
+                    borderBottom: '1px solid var(--border)',
+                    fontFamily: "'IBM Plex Sans', sans-serif",
+                    fontSize: '0.75rem',
+                    letterSpacing: '0.04em',
+                    textTransform: 'uppercase',
+                  }}
+                >
+                  <div className="flex items-center gap-1.5">
+                    <span>{header}</span>
+                    {sortCol === i
+                      ? sortDir === 'asc'
+                        ? <ChevronUp size={11} style={{ color: 'var(--amber)' }} />
+                        : <ChevronDown size={11} style={{ color: 'var(--amber)' }} />
+                      : <ChevronsUpDown size={11} style={{ color: 'var(--muted-foreground)', opacity: 0.4 }} />
+                    }
+                  </div>
+                </th>
+              ))}
+              {canEdit && <th className="w-8" style={{ borderBottom: '1px solid var(--border)', background: 'var(--muted)' }} />}
+            </tr>
+          </thead>
+          <tbody>
+            {sortedRows.map((row, rowIdx) => (
+              <tr
+                key={rowIdx}
+                className="group transition-colors"
+                style={{
+                  background: rowIdx % 2 === 0 ? 'var(--background)' : 'var(--card)',
+                }}
+                onMouseEnter={e => (e.currentTarget.style.background = 'var(--muted)')}
+                onMouseLeave={e => (e.currentTarget.style.background = rowIdx % 2 === 0 ? 'var(--background)' : 'var(--card)')}
+              >
+                {headers.map((_, colIdx) => (
+                  <td
+                    key={colIdx}
+                    className="px-4 py-2.5 max-w-xs"
+                    style={{ borderBottom: '1px solid var(--border)' }}
+                  >
+                    <Cell
+                      value={row[colIdx] ?? ''}
+                      editable={!!saveAction}
+                      onCommit={(v) => handleCellCommit(rowIdx, colIdx, v)}
+                    />
+                  </td>
+                ))}
+                {canEdit && (
+                  <td className="px-2 py-2" style={{ borderBottom: '1px solid var(--border)' }}>
+                    {saveAction && (
+                      <button
+                        onClick={() => handleDeleteRow(rowIdx)}
+                        className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded hover:bg-destructive/10"
+                        style={{ color: 'var(--muted-foreground)' }}
+                        title="Delete row"
+                      >
+                        <Trash2 size={12} />
+                      </button>
+                    )}
+                  </td>
+                )}
+              </tr>
+            ))}
+
+            {/* Add row form */}
+            {showAdd && (
+              <AddRowForm
+                headers={headers}
+                onAdd={handleAddRow}
+                onCancel={() => setShowAdd(false)}
+              />
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Footer */}
+      <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" }}>
+          {rows.length} rows · {headers.length} cols
+        </span>
+
+        {canEdit && !showAdd && (
+          <button
+            onClick={() => setShowAdd(true)}
+            className="flex items-center gap-1 text-xs px-2.5 py-1 rounded-md transition-colors"
+            style={{ color: 'var(--amber)', background: 'var(--amber-dim)', fontFamily: "'IBM Plex Mono', monospace" }}
+          >
+            <Plus size={12} />
+            Add row
+          </button>
+        )}
+        {showAdd && (
+          <button
+            onClick={() => setShowAdd(false)}
+            className="text-xs px-2.5 py-1 rounded-md transition-colors"
+            style={{ color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono', monospace" }}
+          >
+            Cancel
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/app/components/DirView.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import { useState, useEffect, useMemo } from 'react';
+import Link from 'next/link';
+import { FileText, Table, Folder, FolderOpen, LayoutGrid, List } from 'lucide-react';
+import Breadcrumb from '@/components/Breadcrumb';
+import { encodePath } from '@/lib/utils';
+import { FileNode } from '@/lib/types';
+import { useLocale } from '@/lib/LocaleContext';
+
+interface DirViewProps {
+  dirPath: string;
+  entries: FileNode[];
+}
+
+function FileIcon({ node }: { node: FileNode }) {
+  if (node.type === 'directory') return <Folder size={16} className="text-yellow-400 shrink-0" />;
+  if (node.extension === '.csv') return <Table size={16} className="text-emerald-400 shrink-0" />;
+  return <FileText size={16} className="text-zinc-400 shrink-0" />;
+}
+
+function FileIconLarge({ node }: { node: FileNode }) {
+  if (node.type === 'directory') return <FolderOpen size={28} className="text-yellow-400" />;
+  if (node.extension === '.csv') return <Table size={28} className="text-emerald-400" />;
+  return <FileText size={28} className="text-zinc-400" />;
+}
+
+function countFiles(node: FileNode): number {
+  if (node.type === 'file') return 1;
+  return (node.children || []).reduce((acc, c) => acc + countFiles(c), 0);
+}
+
+const DIR_VIEW_KEY = 'mindos-dir-view';
+
+function useDirViewPref() {
+  const [view, setViewState] = useState<'grid' | 'list'>('grid');
+
+  useEffect(() => {
+    const saved = localStorage.getItem(DIR_VIEW_KEY);
+    if (saved === 'list' || saved === 'grid') setViewState(saved);
+  }, []);
+
+  const setView = (v: 'grid' | 'list') => {
+    setViewState(v);
+    localStorage.setItem(DIR_VIEW_KEY, v);
+  };
+
+  return [view, setView] as const;
+}
+
+export default function DirView({ dirPath, entries }: DirViewProps) {
+  const [view, setView] = useDirViewPref();
+  const { t } = useLocale();
+  const fileCounts = useMemo(() => {
+    const map = new Map<string, number>();
+    for (const e of entries) map.set(e.path, countFiles(e));
+    return map;
+  }, [entries]);
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      {/* Topbar */}
+      <div className="sticky top-[52px] md:top-0 z-20 border-b border-border px-4 md:px-6 py-2.5" style={{ background: 'var(--background)' }}>
+        <div className="max-w-[860px] mx-auto flex items-center justify-between gap-2">
+          <div className="min-w-0 flex-1">
+            <Breadcrumb filePath={dirPath} />
+          </div>
+          {/* View toggle */}
+          <div className="flex items-center gap-1 p-1 bg-muted rounded-lg shrink-0">
+            <button
+              onClick={() => setView('grid')}
+              className={`p-1.5 rounded transition-colors ${view === 'grid' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
+              title={t.dirView.gridView}
+            >
+              <LayoutGrid size={14} />
+            </button>
+            <button
+              onClick={() => setView('list')}
+              className={`p-1.5 rounded transition-colors ${view === 'list' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
+              title={t.dirView.listView}
+            >
+              <List size={14} />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 px-4 md:px-6 py-6">
+        <div className="max-w-[860px] mx-auto">
+          {entries.length === 0 ? (
+            <p className="text-muted-foreground text-sm">{t.dirView.emptyFolder}</p>
+          ) : view === 'grid' ? (
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 gap-3">
+              {entries.map(entry => (
+                <Link
+                  key={entry.path}
+                  href={`/view/${encodePath(entry.path)}`}
+                  className="flex flex-col items-center gap-2 p-4 rounded-xl border border-border bg-card hover:bg-accent hover:border-border/80 transition-all duration-100 text-center"
+                >
+                  <FileIconLarge node={entry} />
+                  <span className="text-xs text-foreground leading-snug line-clamp-2 w-full" suppressHydrationWarning>
+                    {entry.name}
+                  </span>
+                  {entry.type === 'directory' && (
+                    <span className="text-[10px] text-muted-foreground">{t.dirView.fileCount(fileCounts.get(entry.path) ?? 0)}</span>
+                  )}
+                </Link>
+              ))}
+            </div>
+          ) : (
+            <div className="flex flex-col divide-y divide-border border border-border rounded-xl overflow-hidden">
+              {entries.map(entry => (
+                <Link
+                  key={entry.path}
+                  href={`/view/${encodePath(entry.path)}`}
+                  className="flex items-center gap-3 px-4 py-3 bg-card hover:bg-accent transition-colors duration-100"
+                >
+                  <FileIcon node={entry} />
+                  <span className="flex-1 text-sm text-foreground truncate" suppressHydrationWarning>
+                    {entry.name}
+                  </span>
+                  {entry.type === 'directory' ? (
+                    <span className="text-xs text-muted-foreground shrink-0">{t.dirView.fileCount(fileCounts.get(entry.path) ?? 0)}</span>
+                  ) : entry.mtime ? (
+                    <span className="text-xs text-muted-foreground shrink-0 tabular-nums" style={{ fontFamily: "'IBM Plex Mono', monospace" }} suppressHydrationWarning>
+                      {new Date(entry.mtime).toLocaleDateString()}
+                    </span>
+                  ) : null}
+                </Link>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/app/components/Editor.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { useEffect, useRef, useCallback } from 'react';
+import { EditorView, basicSetup } from 'codemirror';
+import { markdown } from '@codemirror/lang-markdown';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { EditorState } from '@codemirror/state';
+
+interface EditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  language?: 'markdown' | 'plain';
+}
+
+const darkTheme = EditorView.theme({
+  '&': {
+    backgroundColor: '#09090b',
+    height: '100%',
+    fontSize: '0.875rem',
+    fontFamily: 'var(--font-geist-mono), ui-monospace, monospace',
+  },
+  '.cm-scroller': {
+    overflow: 'auto',
+    lineHeight: '1.6',
+  },
+  '.cm-content': {
+    padding: '16px',
+    caretColor: '#60a5fa',
+  },
+  '.cm-focused': {
+    outline: 'none',
+  },
+  '.cm-line': {
+    padding: '0 4px',
+  },
+  '.cm-gutters': {
+    backgroundColor: '#0d0d0f',
+    borderRight: '1px solid #27272a',
+    color: '#52525b',
+  },
+  '.cm-activeLineGutter': {
+    backgroundColor: '#18181b',
+  },
+  '.cm-activeLine': {
+    backgroundColor: '#18181b50',
+  },
+  '.cm-selectionBackground': {
+    backgroundColor: '#2563eb40',
+  },
+  '&.cm-focused .cm-selectionBackground': {
+    backgroundColor: '#2563eb60',
+  },
+  '.cm-cursor': {
+    borderLeftColor: '#60a5fa',
+    borderLeftWidth: '2px',
+  },
+});
+
+export default function Editor({ value, onChange, language = 'markdown' }: EditorProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  // Track whether update is from external value change
+  const isExternalUpdate = useRef(false);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const updateListener = EditorView.updateListener.of((update) => {
+      if (update.docChanged && !isExternalUpdate.current) {
+        onChangeRef.current(update.state.doc.toString());
+      }
+    });
+
+    const state = EditorState.create({
+      doc: value,
+      extensions: [
+        basicSetup,
+        oneDark,
+        darkTheme,
+        language === 'markdown' ? markdown() : [],
+        updateListener,
+        EditorView.lineWrapping,
+      ],
+    });
+
+    const view = new EditorView({
+      state,
+      parent: containerRef.current,
+    });
+
+    viewRef.current = view;
+
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Sync external value changes to editor
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    const current = view.state.doc.toString();
+    if (current !== value) {
+      isExternalUpdate.current = true;
+      view.dispatch({
+        changes: { from: 0, to: current.length, insert: value },
+      });
+      isExternalUpdate.current = false;
+    }
+  }, [value]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="h-full w-full overflow-hidden rounded-lg border border-zinc-800"
+      style={{ minHeight: '400px' }}
+    />
+  );
+}

package/app/components/EditorWrapper.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const Editor = dynamic(() => import('./Editor'), {
+  ssr: false,
+  loading: () => (
+    <div className="h-full w-full min-h-[400px] rounded-lg border border-zinc-800 bg-zinc-900 flex items-center justify-center">
+      <div className="flex items-center gap-2 text-zinc-500 text-sm">
+        <div className="w-4 h-4 border-2 border-zinc-600 border-t-zinc-300 rounded-full animate-spin" />
+        <span>Loading editor...</span>
+      </div>
+    </div>
+  ),
+});
+
+export default Editor;

package/app/components/ErrorBoundary.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { Component, type ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+export default class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    console.error('[ErrorBoundary]', error, info.componentStack);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) return this.props.fallback;
+
+      return (
+        <div className="flex items-center justify-center min-h-[50vh] px-4">
+          <div className="text-center max-w-md">
+            <h2 className="text-lg font-semibold text-foreground mb-2">Something went wrong</h2>
+            <p className="text-sm text-muted-foreground mb-4">
+              {this.state.error?.message || 'An unexpected error occurred.'}
+            </p>
+            <button
+              onClick={() => this.setState({ hasError: false, error: undefined })}
+              className="px-4 py-2 text-sm rounded-lg border border-border hover:bg-muted transition-colors"
+            >
+              Try again
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}