@geminilight/mindos 0.1.0

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

@@ -0,0 +1,43 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+
+export function EditableCell({ value, onCommit }: { value: string; onCommit: (v: string) => void }) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const ref = useRef<HTMLInputElement>(null);
+  useEffect(() => { setDraft(value); }, [value]);
+  useEffect(() => { if (editing) ref.current?.select(); }, [editing]);
+  function commit() { setEditing(false); if (draft !== value) onCommit(draft); else setDraft(value); }
+  if (editing) return (
+    <input ref={ref} 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" onClick={e => e.stopPropagation()}
+      style={{ color: 'var(--foreground)', borderBottom: '1px solid var(--amber)', minWidth: 60 }}
+    />
+  );
+  return (
+    <div className="truncate text-sm cursor-text" style={{ color: 'var(--foreground)', minWidth: 60 }}
+      onClick={() => setEditing(true)} title={value}
+    >{value || <span style={{ color: 'var(--muted-foreground)', opacity: 0.3 }}>—</span>}</div>
+  );
+}
+
+export function AddRowTr({ headers, visibleIndices, onAdd, onCancel }: { headers: string[]; visibleIndices: number[]; onAdd: (r: string[]) => void; onCancel: () => void }) {
+  const [vals, setVals] = useState(() => Array(headers.length).fill(''));
+  function set(i: number, v: string) { setVals(prev => { const n = [...prev]; n[i] = v; return n; }); }
+  return (
+    <tr style={{ background: 'color-mix(in srgb, var(--amber) 6%, transparent)', borderTop: '1px solid var(--amber)' }}>
+      {visibleIndices.map((ci, pos) => (
+        <td key={ci} className="px-3 py-2" style={{ borderBottom: '1px solid var(--border)' }}>
+          <input autoFocus={pos === 0} value={vals[ci]} onChange={e => set(ci, e.target.value)}
+            onKeyDown={e => { if (e.key === 'Enter') onAdd(vals); if (e.key === 'Escape') onCancel(); }}
+            placeholder={headers[ci]} className="w-full bg-transparent outline-none text-sm placeholder:opacity-30"
+            style={{ color: 'var(--foreground)', borderBottom: '1px solid var(--border)' }}
+          />
+        </td>
+      ))}
+      <td className="px-2 py-2" style={{ borderBottom: '1px solid var(--border)' }} />
+    </tr>
+  );
+}

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

@@ -0,0 +1,40 @@
+'use client';
+
+import type { GalleryConfig } from './types';
+import { tagColor } from './types';
+
+export function GalleryView({ headers, rows, cfg }: { headers: string[]; rows: string[][]; cfg: GalleryConfig }) {
+  const titleIdx = headers.indexOf(cfg.titleField);
+  const descIdx = headers.indexOf(cfg.descField);
+  const tagIdx = headers.indexOf(cfg.tagField);
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+      {rows.map((row, i) => {
+        const title = titleIdx >= 0 ? row[titleIdx] : row[0] ?? '';
+        const desc = descIdx >= 0 ? row[descIdx] : '';
+        const tag = tagIdx >= 0 ? row[tagIdx] : '';
+        const tc = tag ? tagColor(tag) : null;
+        return (
+          <div key={i} className="rounded-xl border p-4 flex flex-col gap-2 hover:bg-muted/50 transition-colors"
+            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>
+            {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="truncate" style={{ color: 'var(--muted-foreground)' }}>{v}</span>
+                </div>;
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,164 @@
+'use client';
+
+import { useState, useMemo, useEffect } from 'react';
+import { ChevronUp, ChevronDown, Plus, Trash2 } from 'lucide-react';
+import type { TableConfig } from './types';
+import { serializeCSV } from './types';
+import { EditableCell, AddRowTr } from './EditableCell';
+
+export function TableView({ headers, rows, cfg, saveAction }: {
+  headers: string[];
+  rows: string[][];
+  cfg: TableConfig;
+  saveAction: (content: string) => Promise<void>;
+}) {
+  const [localRows, setLocalRows] = useState(rows);
+  const [showAdd, setShowAdd] = useState(false);
+  useEffect(() => { setLocalRows(rows); }, [rows]);
+
+  const visibleIndices = useMemo(
+    () => headers.map((_, i) => i).filter(i => !cfg.hiddenFields.includes(headers[i])),
+    [headers, cfg.hiddenFields],
+  );
+
+  const sortIdx = headers.indexOf(cfg.sortField);
+
+  const processedRows = useMemo(() => {
+    let result = [...localRows];
+    if (sortIdx >= 0) {
+      result.sort((a, b) => {
+        const va = a[sortIdx] ?? '', vb = b[sortIdx] ?? '';
+        const na = parseFloat(va), nb = parseFloat(vb);
+        const cmp = (!isNaN(na) && !isNaN(nb)) ? na - nb : va.localeCompare(vb);
+        return cfg.sortDir === 'asc' ? cmp : -cmp;
+      });
+    }
+    return result;
+  }, [localRows, sortIdx, cfg.sortDir]);
+
+  const groupIdx = headers.indexOf(cfg.groupField);
+
+  type Section = { key: string | null; rows: { row: string[]; orig: string[] }[] };
+  const sections = useMemo((): Section[] => {
+    if (groupIdx < 0) return [{ key: null, rows: processedRows.map(r => ({ row: r, orig: r })) }];
+    const map = new Map<string, string[][]>();
+    for (const row of processedRows) {
+      const k = row[groupIdx] || '(empty)';
+      if (!map.has(k)) map.set(k, []);
+      map.get(k)!.push(row);
+    }
+    return [...map.entries()].map(([key, rs]) => ({ key, rows: rs.map(r => ({ row: r, orig: r })) }));
+  }, [processedRows, groupIdx]);
+
+  async function commitCell(origRow: string[], colIdx: number, val: string) {
+    const updated = localRows.map(r => r === origRow ? r.map((c, ci) => ci === colIdx ? val : c) : r);
+    setLocalRows(updated);
+    await saveAction(serializeCSV(headers, updated));
+  }
+
+  async function deleteRow(origRow: string[]) {
+    const updated = localRows.filter(r => r !== origRow);
+    setLocalRows(updated);
+    await saveAction(serializeCSV(headers, updated));
+  }
+
+  async function addRow(newRow: string[]) {
+    const updated = [...localRows, newRow];
+    setLocalRows(updated);
+    setShowAdd(false);
+    await saveAction(serializeCSV(headers, updated));
+  }
+
+  const thStyle: React.CSSProperties = {
+    borderBottom: '1px solid var(--border)',
+    fontFamily: "'IBM Plex Sans',sans-serif",
+    fontSize: '0.72rem',
+    letterSpacing: '0.05em',
+    textTransform: 'uppercase',
+    color: 'var(--muted-foreground)',
+    fontWeight: 600,
+  };
+
+  let rowCounter = 0;
+
+  return (
+    <div className="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)' }}>
+              {visibleIndices.map(ci => (
+                <th key={ci} className="px-4 py-2.5 text-left whitespace-nowrap" style={thStyle}>
+                  <div className="flex items-center gap-1">
+                    {headers[ci]}
+                    {cfg.sortField === headers[ci] && (
+                      cfg.sortDir === 'asc'
+                        ? <ChevronUp size={10} style={{ color: 'var(--amber)' }} />
+                        : <ChevronDown size={10} style={{ color: 'var(--amber)' }} />
+                    )}
+                  </div>
+                </th>
+              ))}
+              <th className="w-8" style={{ ...thStyle, background: 'var(--muted)' }} />
+            </tr>
+          </thead>
+          <tbody>
+            {sections.map(section => (
+              <>
+                {section.key !== null && (
+                  <tr key={`grp-${section.key}`}>
+                    <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" }}>
+                        {section.key} · {section.rows.length}
+                      </span>
+                    </td>
+                  </tr>
+                )}
+                {section.rows.map(({ row, orig }) => {
+                  const ri = rowCounter++;
+                  return (
+                    <tr key={ri} className="group transition-colors"
+                      style={{ background: ri % 2 === 0 ? 'var(--background)' : 'var(--card)' }}
+                      onMouseEnter={e => (e.currentTarget.style.background = 'var(--muted)')}
+                      onMouseLeave={e => (e.currentTarget.style.background = ri % 2 === 0 ? 'var(--background)' : 'var(--card)')}
+                    >
+                      {visibleIndices.map(ci => (
+                        <td key={ci} className="px-4 py-2 max-w-xs" style={{ borderBottom: '1px solid var(--border)' }}>
+                          <EditableCell value={row[ci] ?? ''} onCommit={v => commitCell(orig, ci, v)} />
+                        </td>
+                      ))}
+                      <td className="px-2 py-2" style={{ borderBottom: '1px solid var(--border)' }}>
+                        <button onClick={() => deleteRow(orig)}
+                          className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded hover:bg-destructive/10"
+                          style={{ color: 'var(--muted-foreground)' }}
+                        ><Trash2 size={12} /></button>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </>
+            ))}
+            {showAdd && (
+              <AddRowTr headers={headers} visibleIndices={visibleIndices} onAdd={addRow} onCancel={() => setShowAdd(false)} />
+            )}
+          </tbody>
+        </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" }}>
+          {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" }}
+            ><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" }}
+            >Cancel</button>
+        }
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,87 @@
+import Papa from 'papaparse';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type ViewType = 'table' | 'gallery' | 'board';
+
+export interface TableConfig {
+  sortField: string;
+  sortDir: 'asc' | 'desc';
+  groupField: string;
+  hiddenFields: string[];
+}
+
+export interface GalleryConfig {
+  titleField: string;
+  descField: string;
+  tagField: string;
+}
+
+export interface BoardConfig {
+  groupField: string;
+  titleField: string;
+  descField: string;
+}
+
+export interface CsvConfig {
+  activeView: ViewType;
+  table: TableConfig;
+  gallery: GalleryConfig;
+  board: BoardConfig;
+}
+
+export function defaultConfig(headers: string[]): CsvConfig {
+  return {
+    activeView: 'table',
+    table: { sortField: '', sortDir: 'asc', groupField: '', hiddenFields: [] },
+    gallery: { titleField: headers[0] ?? '', descField: headers[1] ?? '', tagField: headers[2] ?? '' },
+    board: { groupField: headers[headers.length - 1] ?? '', titleField: headers[0] ?? '', descField: headers[1] ?? '' },
+  };
+}
+
+function configKey(filePath: string) { return `mindos-csv-config:${filePath}`; }
+
+export function loadConfig(filePath: string, headers: string[]): CsvConfig {
+  try {
+    const raw = localStorage.getItem(configKey(filePath));
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      const def = defaultConfig(headers);
+      return { ...def, ...parsed, table: { ...def.table, ...parsed.table }, gallery: { ...def.gallery, ...parsed.gallery }, board: { ...def.board, ...parsed.board } };
+    }
+  } catch { /* ignore */ }
+  return defaultConfig(headers);
+}
+
+export function saveConfig(filePath: string, cfg: CsvConfig) {
+  try { localStorage.setItem(configKey(filePath), JSON.stringify(cfg)); } catch { /* ignore */ }
+}
+
+// ─── Parse / serialize ────────────────────────────────────────────────────────
+
+export function parseCSV(content: string) {
+  const result = Papa.parse<string[]>(content, { skipEmptyLines: true });
+  const data = result.data as string[][];
+  return { headers: data[0] ?? [], rows: data.slice(1) };
+}
+
+export function serializeCSV(headers: string[], rows: string[][]) {
+  return Papa.unparse([headers, ...rows]);
+}
+
+// ─── Tag color ────────────────────────────────────────────────────────────────
+
+const TAG_COLORS = [
+  { bg: 'rgba(200,135,58,0.12)', text: 'var(--amber)' },
+  { bg: 'rgba(122,173,128,0.12)', text: '#7aad80' },
+  { bg: 'rgba(138,180,216,0.12)', text: '#8ab4d8' },
+  { bg: 'rgba(200,160,216,0.12)', text: '#c8a0d8' },
+  { bg: 'rgba(200,96,96,0.12)', text: '#c86060' },
+  { bg: 'rgba(150,150,150,0.12)', text: 'var(--muted-foreground)' },
+];
+
+export function tagColor(val: string) {
+  let h = 0;
+  for (let i = 0; i < val.length; i++) h = (h * 31 + val.charCodeAt(i)) & 0xffff;
+  return TAG_COLORS[h % TAG_COLORS.length];
+}

package/app/components/settings/AiTab.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import { AlertCircle } from 'lucide-react';
+import type { AiSettings, ProviderConfig, SettingsData } from './types';
+import { Field, Select, Input, EnvBadge, ApiKeyInput } from './Primitives';
+
+interface AiTabProps {
+  data: SettingsData;
+  updateAi: (patch: Partial<AiSettings>) => void;
+  t: any;
+}
+
+export function AiTab({ data, updateAi, t }: AiTabProps) {
+  const env = data.envOverrides ?? {};
+  const envVal = data.envValues ?? {};
+  const provider = data.ai.provider;
+
+  function patchProvider(name: 'anthropic' | 'openai', patch: Partial<ProviderConfig>) {
+    updateAi({
+      providers: {
+        ...data.ai.providers,
+        [name]: { ...data.ai.providers?.[name], ...patch },
+      },
+    });
+  }
+
+  const anthropic = data.ai.providers?.anthropic ?? { apiKey: '', model: '' };
+  const openai    = data.ai.providers?.openai    ?? { apiKey: '', model: '', baseUrl: '' };
+
+  const activeApiKey = provider === 'anthropic' ? anthropic.apiKey : openai.apiKey;
+  const activeEnvKey = provider === 'anthropic' ? env.ANTHROPIC_API_KEY : env.OPENAI_API_KEY;
+  const missingApiKey = !activeApiKey && !activeEnvKey;
+
+  return (
+    <div className="space-y-5">
+      <Field label={<>{t.settings.ai.provider} <EnvBadge overridden={env.AI_PROVIDER} /></>}>
+        <Select
+          value={provider}
+          onChange={e => updateAi({ provider: e.target.value as 'anthropic' | 'openai' })}
+        >
+          <option value="anthropic">Anthropic (Claude)</option>
+          <option value="openai">OpenAI / compatible</option>
+        </Select>
+      </Field>
+
+      {provider === 'anthropic' ? (
+        <>
+          <Field label={<>{t.settings.ai.model} <EnvBadge overridden={env.ANTHROPIC_MODEL} /></>}>
+            <Input
+              value={anthropic.model}
+              onChange={e => patchProvider('anthropic', { model: e.target.value })}
+              placeholder={envVal.ANTHROPIC_MODEL || 'claude-sonnet-4-6'}
+            />
+          </Field>
+          <Field
+            label={<>{t.settings.ai.apiKey} <EnvBadge overridden={env.ANTHROPIC_API_KEY} /></>}
+            hint={env.ANTHROPIC_API_KEY ? t.settings.ai.envFieldNote('ANTHROPIC_API_KEY') : t.settings.ai.keyHint}
+          >
+            <ApiKeyInput
+              value={anthropic.apiKey}
+              onChange={v => patchProvider('anthropic', { apiKey: v })}
+            />
+          </Field>
+        </>
+      ) : (
+        <>
+          <Field label={<>{t.settings.ai.model} <EnvBadge overridden={env.OPENAI_MODEL} /></>}>
+            <Input
+              value={openai.model}
+              onChange={e => patchProvider('openai', { model: e.target.value })}
+              placeholder={envVal.OPENAI_MODEL || 'gpt-5.4'}
+            />
+          </Field>
+          <Field
+            label={<>{t.settings.ai.apiKey} <EnvBadge overridden={env.OPENAI_API_KEY} /></>}
+            hint={env.OPENAI_API_KEY ? t.settings.ai.envFieldNote('OPENAI_API_KEY') : t.settings.ai.keyHint}
+          >
+            <ApiKeyInput
+              value={openai.apiKey}
+              onChange={v => patchProvider('openai', { apiKey: v })}
+            />
+          </Field>
+          <Field
+            label={<>{t.settings.ai.baseUrl} <EnvBadge overridden={env.OPENAI_BASE_URL} /></>}
+            hint={t.settings.ai.baseUrlHint}
+          >
+            <Input
+              value={openai.baseUrl ?? ''}
+              onChange={e => patchProvider('openai', { baseUrl: e.target.value })}
+              placeholder={envVal.OPENAI_BASE_URL || 'https://api.openai.com/v1'}
+            />
+          </Field>
+        </>
+      )}
+
+      {missingApiKey && (
+        <div className="flex items-start gap-2 text-xs text-destructive/80 bg-destructive/8 border border-destructive/20 rounded-lg px-3 py-2.5">
+          <AlertCircle size={13} className="shrink-0 mt-0.5" />
+          <span>{t.settings.ai.noApiKey}</span>
+        </div>
+      )}
+
+      {Object.values(env).some(Boolean) && (
+        <div className="flex items-start gap-2 text-xs text-amber-500/80 bg-amber-500/8 border border-amber-500/20 rounded-lg px-3 py-2.5">
+          <AlertCircle size={13} className="shrink-0 mt-0.5" />
+          <span>{t.settings.ai.envHint}</span>
+        </div>
+      )}
+    </div>
+  );
+}

package/app/components/settings/AppearanceTab.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { Locale } from '@/lib/i18n';
+import { CONTENT_WIDTHS, FONTS } from './types';
+import { Field, Select } from './Primitives';
+
+interface AppearanceTabProps {
+  font: string;
+  setFont: (v: string) => void;
+  contentWidth: string;
+  setContentWidth: (v: string) => void;
+  dark: boolean;
+  setDark: (v: boolean) => void;
+  locale: Locale;
+  setLocale: (v: Locale) => void;
+  t: any;
+}
+
+export function AppearanceTab({ font, setFont, contentWidth, setContentWidth, dark, setDark, locale, setLocale, t }: AppearanceTabProps) {
+  return (
+    <div className="space-y-5">
+      <Field label={t.settings.appearance.readingFont}>
+        <Select value={font} onChange={e => setFont(e.target.value)}>
+          {FONTS.map(f => (
+            <option key={f.value} value={f.value}>{f.label}</option>
+          ))}
+        </Select>
+        <p className="text-xs text-muted-foreground mt-1.5 px-0.5" style={{ fontFamily: FONTS.find(f => f.value === font)?.style.fontFamily }}>
+          {t.settings.appearance.fontPreview}
+        </p>
+      </Field>
+
+      <Field label={t.settings.appearance.contentWidth}>
+        <div className="grid grid-cols-2 gap-2">
+          {CONTENT_WIDTHS.map(w => (
+            <button
+              key={w.value}
+              type="button"
+              onClick={() => setContentWidth(w.value)}
+              className={`px-3 py-2 text-sm rounded-lg border transition-colors text-left ${
+                contentWidth === w.value
+                  ? 'border-amber-500 bg-amber-500/10 text-foreground'
+                  : 'border-border text-muted-foreground hover:border-border/80 hover:bg-muted'
+              }`}
+            >
+              {w.label}
+            </button>
+          ))}
+        </div>
+      </Field>
+
+      <Field label={t.settings.appearance.colorTheme}>
+        <div className="grid grid-cols-2 gap-2">
+          {[
+            { value: 'dark', label: t.settings.appearance.dark },
+            { value: 'light', label: t.settings.appearance.light },
+          ].map(opt => (
+            <button
+              key={opt.value}
+              type="button"
+              onClick={() => {
+                const isDark = opt.value === 'dark';
+                setDark(isDark);
+                document.documentElement.classList.toggle('dark', isDark);
+                localStorage.setItem('theme', opt.value);
+              }}
+              className={`px-3 py-2 text-sm rounded-lg border transition-colors text-left ${
+                (opt.value === 'dark') === dark
+                  ? 'border-amber-500 bg-amber-500/10 text-foreground'
+                  : 'border-border text-muted-foreground hover:border-border/80 hover:bg-muted'
+              }`}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      </Field>
+
+      <Field label={t.settings.appearance.language}>
+        <div className="grid grid-cols-2 gap-2">
+          {([['en', 'English'], ['zh', '中文']] as [Locale, string][]).map(([code, label]) => (
+            <button
+              key={code}
+              type="button"
+              onClick={() => setLocale(code)}
+              className={`px-3 py-2 text-sm rounded-lg border transition-colors text-left ${
+                locale === code
+                  ? 'border-amber-500 bg-amber-500/10 text-foreground'
+                  : 'border-border text-muted-foreground hover:border-border/80 hover:bg-muted'
+              }`}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      </Field>
+
+      <p className="text-xs text-muted-foreground">{t.settings.appearance.browserNote}</p>
+    </div>
+  );
+}