@geminilight/mindos 0.1.0

package/app/app/api/graph/route.ts

@@ -0,0 +1,113 @@
+export const dynamic = 'force-dynamic';
+import { NextResponse } from 'next/server';
+import path from 'path';
+import { collectAllFiles, getFileContent } from '@/lib/fs';
+
+export interface GraphNode {
+  id: string;    // relative file path
+  label: string; // basename without extension
+  folder: string; // dirname
+}
+
+export interface GraphEdge {
+  source: string;
+  target: string;
+}
+
+export interface GraphData {
+  nodes: GraphNode[];
+  edges: GraphEdge[];
+}
+
+function extractLinks(content: string, sourcePath: string, fileSet: Set<string>, basenameMap: Map<string, string[]>): string[] {
+  const targets: string[] = [];
+  const sourceDir = path.dirname(sourcePath);
+
+  // WikiLinks: [[target]] or [[target|alias]] or [[target#section]]
+  const wikiRe = /\[\[([^\]|#]+)(?:[|#][^\]]*)?/g;
+  let m: RegExpExecArray | null;
+  while ((m = wikiRe.exec(content)) !== null) {
+    const raw = m[1].trim();
+    if (!raw) continue;
+
+    // Try exact match
+    if (fileSet.has(raw)) {
+      targets.push(raw);
+      continue;
+    }
+    // Try with .md
+    const withMd = raw.endsWith('.md') ? raw : raw + '.md';
+    if (fileSet.has(withMd)) {
+      targets.push(withMd);
+      continue;
+    }
+    // Try basename lookup (case-insensitive)
+    const lower = path.basename(withMd).toLowerCase();
+    const candidates = basenameMap.get(lower);
+    if (candidates && candidates.length === 1) {
+      targets.push(candidates[0]);
+    }
+    // skip if ambiguous (multiple candidates)
+  }
+
+  // Markdown links: [text](relative/path.md) or [text](relative/path.md#section)
+  const mdLinkRe = /\[[^\]]+\]\(([^)]+\.md)(?:#[^)]*)?\)/g;
+  while ((m = mdLinkRe.exec(content)) !== null) {
+    const raw = m[1].trim();
+    if (!raw || raw.startsWith('http')) continue;
+    const resolved = path.normalize(path.join(sourceDir, raw));
+    if (fileSet.has(resolved)) {
+      targets.push(resolved);
+    }
+  }
+
+  return targets;
+}
+
+export async function GET() {
+  try {
+    const allFiles = collectAllFiles().filter(f => f.endsWith('.md'));
+    const fileSet = new Set(allFiles);
+
+    // Build basename → relPath[] lookup
+    const basenameMap = new Map<string, string[]>();
+    for (const f of allFiles) {
+      const key = path.basename(f).toLowerCase();
+      if (!basenameMap.has(key)) basenameMap.set(key, []);
+      basenameMap.get(key)!.push(f);
+    }
+
+    const nodes: GraphNode[] = allFiles.map(f => ({
+      id: f,
+      label: path.basename(f, '.md'),
+      folder: path.dirname(f),
+    }));
+
+    const edgeSet = new Set<string>();
+    const edges: GraphEdge[] = [];
+
+    for (const filePath of allFiles) {
+      let content: string;
+      try {
+        content = getFileContent(filePath);
+      } catch {
+        continue;
+      }
+
+      const targets = extractLinks(content, filePath, fileSet, basenameMap);
+      for (const target of targets) {
+        if (target === filePath) continue; // skip self-edges
+        const key = `${filePath}||${target}`;
+        if (!edgeSet.has(key)) {
+          edgeSet.add(key);
+          edges.push({ source: filePath, target });
+        }
+      }
+    }
+
+    return NextResponse.json({ nodes, edges } satisfies GraphData);
+  } catch (err) {
+    console.error('[graph] Error building graph:', err);
+    return NextResponse.json({ error: 'Failed to build graph' }, { status: 500 });
+  }
+}

package/app/app/api/recent-files/route.ts

@@ -0,0 +1,10 @@
+export const dynamic = 'force-dynamic';
+import { NextRequest, NextResponse } from 'next/server';
+import { getRecentlyModified } from '@/lib/fs';
+
+export async function GET(req: NextRequest) {
+  const limitParam = req.nextUrl.searchParams.get('limit');
+  const limit = limitParam ? parseInt(limitParam, 10) : 10;
+  const files = getRecentlyModified(Math.min(limit, 30));
+  return NextResponse.json(files);
+}

package/app/app/api/search/route.ts

@@ -0,0 +1,17 @@
+export const dynamic = 'force-dynamic';
+import { NextRequest, NextResponse } from 'next/server';
+import { searchFiles } from '@/lib/fs';
+
+export async function GET(request: NextRequest) {
+  const q = request.nextUrl.searchParams.get('q') || '';
+  if (!q.trim()) {
+    return NextResponse.json([]);
+  }
+  try {
+    const results = searchFiles(q);
+    return NextResponse.json(results);
+  } catch (err) {
+    console.error('Search error:', err);
+    return NextResponse.json({ error: 'Search failed' }, { status: 500 });
+  }
+}

package/app/app/api/settings/reset-token/route.ts

@@ -0,0 +1,21 @@
+export const dynamic = 'force-dynamic';
+import { NextResponse } from 'next/server';
+import { readSettings, writeSettings } from '@/lib/settings';
+import { randomBytes } from 'crypto';
+
+function generateToken(): string {
+  const hex = randomBytes(12).toString('hex'); // 24 hex chars
+  return (hex.match(/.{4}/g) as string[]).join('-');
+}
+
+// POST /api/settings/reset-token — generate a new auth token and persist it
+export async function POST() {
+  try {
+    const current = readSettings();
+    const newToken = generateToken();
+    writeSettings({ ...current, authToken: newToken });
+    return NextResponse.json({ ok: true, token: newToken });
+  } catch (err) {
+    return NextResponse.json({ error: String(err) }, { status: 500 });
+  }
+}

package/app/app/api/settings/route.ts

@@ -0,0 +1,123 @@
+export const dynamic = 'force-dynamic';
+import { NextRequest, NextResponse } from 'next/server';
+import { readSettings, writeSettings, ServerSettings } from '@/lib/settings';
+import { invalidateCache } from '@/lib/fs';
+
+function maskToken(token: string | undefined): string {
+  if (!token) return '';
+  // Show first 4 and last 4 chars: xxxx-••••-••••-••••-••••-xxxx
+  const parts = token.split('-');
+  if (parts.length >= 2) {
+    return parts[0] + '-' + parts.slice(1, -1).map(() => '••••').join('-') + '-' + parts[parts.length - 1];
+  }
+  return token.length > 8 ? token.slice(0, 4) + '••••••••' + token.slice(-4) : '***set***';
+}
+
+export async function GET() {
+  const settings = readSettings();
+
+  const envValues = {
+    AI_PROVIDER:       process.env.AI_PROVIDER || '',
+    ANTHROPIC_API_KEY: process.env.ANTHROPIC_API_KEY ? '***set***' : '',
+    ANTHROPIC_MODEL:   process.env.ANTHROPIC_MODEL || '',
+    OPENAI_API_KEY:    process.env.OPENAI_API_KEY ? '***set***' : '',
+    OPENAI_MODEL:      process.env.OPENAI_MODEL || '',
+    OPENAI_BASE_URL:   process.env.OPENAI_BASE_URL || '',
+    MIND_ROOT:         process.env.MIND_ROOT || '',
+  };
+
+  // Mask API keys
+  const anthropic = settings.ai.providers.anthropic;
+  const openai    = settings.ai.providers.openai;
+
+  const masked = {
+    ai: {
+      provider: settings.ai.provider,
+      providers: {
+        anthropic: {
+          apiKey: anthropic?.apiKey ? '***set***' : '',
+          model:  anthropic?.model  ?? '',
+        },
+        openai: {
+          apiKey:  openai?.apiKey  ? '***set***' : '',
+          model:   openai?.model   ?? '',
+          baseUrl: openai?.baseUrl ?? '',
+        },
+      },
+    },
+    mindRoot: settings.mindRoot,
+    webPassword: settings.webPassword ? '***set***' : '',
+    authToken: maskToken(settings.authToken),
+    mcpPort: settings.mcpPort ?? 8787,
+    envOverrides: {
+      AI_PROVIDER:       !!process.env.AI_PROVIDER,
+      ANTHROPIC_API_KEY: !!process.env.ANTHROPIC_API_KEY,
+      ANTHROPIC_MODEL:   !!process.env.ANTHROPIC_MODEL,
+      OPENAI_API_KEY:    !!process.env.OPENAI_API_KEY,
+      OPENAI_MODEL:      !!process.env.OPENAI_MODEL,
+      OPENAI_BASE_URL:   !!process.env.OPENAI_BASE_URL,
+      MIND_ROOT:         !!process.env.MIND_ROOT,
+    },
+    envValues,
+  };
+  return NextResponse.json(masked);
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const body = await req.json() as Partial<ServerSettings>;
+    const current = readSettings();
+
+    // Merge providers, preserving masked keys
+    const incomingAnthropic = body.ai?.providers?.anthropic;
+    const incomingOpenai    = body.ai?.providers?.openai;
+    const curAnthropic      = current.ai.providers.anthropic;
+    const curOpenai         = current.ai.providers.openai;
+
+    // Resolve webPassword: '***set***' means keep existing, '' means clear, anything else = new value
+    const incomingWebPassword = body.webPassword;
+    const resolvedWebPassword = incomingWebPassword === '***set***'
+      ? current.webPassword
+      : (incomingWebPassword ?? current.webPassword);
+
+    // authToken is read-only via POST (use /api/settings/reset-token to regenerate)
+    // but allow clearing it by passing empty string
+    const incomingAuthToken = body.authToken;
+    const resolvedAuthToken = (incomingAuthToken === '' || incomingAuthToken === undefined)
+      ? (incomingAuthToken === '' ? '' : current.authToken)
+      : current.authToken;
+
+    const next: ServerSettings = {
+      ai: {
+        provider: body.ai?.provider ?? current.ai.provider,
+        providers: {
+          anthropic: {
+            ...curAnthropic,
+            ...(incomingAnthropic ?? {}),
+            apiKey: incomingAnthropic?.apiKey === '***set***'
+              ? (curAnthropic.apiKey ?? '')
+              : (incomingAnthropic?.apiKey ?? curAnthropic.apiKey ?? ''),
+            model: incomingAnthropic?.model ?? curAnthropic.model ?? 'claude-sonnet-4-6',
+          },
+          openai: {
+            ...curOpenai,
+            ...(incomingOpenai ?? {}),
+            apiKey: incomingOpenai?.apiKey === '***set***'
+              ? (curOpenai.apiKey ?? '')
+              : (incomingOpenai?.apiKey ?? curOpenai.apiKey ?? ''),
+            model: incomingOpenai?.model ?? curOpenai.model ?? 'gpt-5.4',
+          },
+        },
+      },
+      mindRoot: body.mindRoot ?? current.mindRoot,
+      webPassword: resolvedWebPassword,
+      authToken: resolvedAuthToken,
+    };
+
+    writeSettings(next);
+    if (next.mindRoot !== current.mindRoot) invalidateCache();
+    return NextResponse.json({ ok: true });
+  } catch (err) {
+    return NextResponse.json({ error: String(err) }, { status: 500 });
+  }
+}

package/app/app/error.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useEffect } from 'react';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error('Page error:', error);
+  }, [error]);
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[50vh] gap-4 px-6">
+      <div className="text-center">
+        <h2 className="text-lg font-semibold text-foreground mb-2">Something went wrong</h2>
+        <p className="text-sm text-muted-foreground max-w-md">
+          {error.message || 'An unexpected error occurred while rendering this page.'}
+        </p>
+      </div>
+      <button
+        onClick={reset}
+        className="px-4 py-2 rounded-md text-sm font-medium transition-colors"
+        style={{ background: 'var(--muted)', color: 'var(--foreground)' }}
+      >
+        Try again
+      </button>
+    </div>
+  );
+}

package/app/app/globals.css

@@ -0,0 +1,368 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+body {
+  font-family: 'IBM Plex Sans', var(--font-geist-sans), system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
+}
+
+:root {
+  --background: #f8f6f1;
+  --foreground: #1c1a17;
+  --card: #f2efe9;
+  --card-foreground: #1c1a17;
+  --popover: #f2efe9;
+  --popover-foreground: #1c1a17;
+  --primary: #1c1a17;
+  --primary-foreground: #f8f6f1;
+  --secondary: #e8e4db;
+  --secondary-foreground: #1c1a17;
+  --muted: #e8e4db;
+  --muted-foreground: #7a7568;
+  --accent: #d9d3c6;
+  --accent-foreground: #1c1a17;
+  --destructive: oklch(0.58 0.22 27);
+  --border: rgba(28, 26, 23, 0.1);
+  --input: rgba(28, 26, 23, 0.12);
+  --ring: rgba(28, 26, 23, 0.3);
+  --radius: 0.5rem;
+  --amber: #c8873a;
+  --amber-dim: rgba(200, 135, 58, 0.12);
+  --sidebar: #ede9e1;
+  --sidebar-foreground: #1c1a17;
+  --sidebar-primary: #1c1a17;
+  --sidebar-primary-foreground: #f8f6f1;
+  --sidebar-accent: #d9d3c6;
+  --sidebar-accent-foreground: #1c1a17;
+  --sidebar-border: rgba(28, 26, 23, 0.08);
+  --sidebar-ring: rgba(28, 26, 23, 0.3);
+}
+
+.dark {
+  --background: #131210;
+  --foreground: #e8e4dc;
+  --card: #1c1a17;
+  --card-foreground: #e8e4dc;
+  --popover: #1c1a17;
+  --popover-foreground: #e8e4dc;
+  --primary: #e8e4dc;
+  --primary-foreground: #131210;
+  --secondary: #252219;
+  --secondary-foreground: #e8e4dc;
+  --muted: #252219;
+  --muted-foreground: #8a8275;
+  --accent: #2e2b22;
+  --accent-foreground: #e8e4dc;
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: rgba(232, 228, 220, 0.08);
+  --input: rgba(232, 228, 220, 0.1);
+  --ring: rgba(232, 228, 220, 0.2);
+  --amber: #d4954a;
+  --amber-dim: rgba(212, 149, 74, 0.12);
+  --sidebar: #1c1a17;
+  --sidebar-foreground: #e8e4dc;
+  --sidebar-primary: #d4954a;
+  --sidebar-primary-foreground: #131210;
+  --sidebar-accent: #252219;
+  --sidebar-accent-foreground: #e8e4dc;
+  --sidebar-border: rgba(232, 228, 220, 0.07);
+  --sidebar-ring: rgba(232, 228, 220, 0.2);
+}
+
+@layer base {
+  * { @apply border-border outline-ring/50; }
+  body { @apply bg-background text-foreground; }
+}
+
+/* Content width — controlled by Settings > Appearance */
+:root { --content-width: 780px; }
+.content-width { max-width: var(--content-width-override, var(--content-width)); margin-left: auto; margin-right: auto; }
+
+::-webkit-scrollbar { width: 5px; height: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
+
+.sidebar-panel {
+}
+.sidebar-panel::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 15%;
+  bottom: 15%;
+  width: 1.5px;
+  background: linear-gradient(to bottom, transparent, var(--amber), transparent);
+  opacity: 0.45;
+  border-radius: 99px;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.prose {
+  font-family: var(--prose-font-override, 'Lora', Georgia, serif);
+  color: var(--prose-body);
+  line-height: 1.85;
+  font-size: 0.95rem;
+}
+@media (min-width: 640px) {
+  .prose { font-size: 1rem; }
+}
+.prose h1, .prose h2, .prose h3, .prose h4 {
+  font-family: 'IBM Plex Sans', sans-serif;
+  color: var(--prose-heading);
+  font-weight: 600;
+  line-height: 1.3;
+  margin-top: 1.5em;
+  margin-bottom: 0.6em;
+  letter-spacing: -0.01em;
+}
+@media (min-width: 640px) {
+  .prose h1, .prose h2, .prose h3, .prose h4 {
+    margin-top: 2em;
+    margin-bottom: 0.75em;
+  }
+}
+.prose h1 { font-size: 1.85rem; margin-top: 0; }
+.prose h2 { font-size: 1.35rem; border-bottom: 1px solid var(--prose-border); padding-bottom: 0.4em; }
+.prose h3 { font-size: 1.15rem; }
+.prose h4 { font-size: 1.05rem; }
+.prose p { margin-top: 0; margin-bottom: 1.1em; }
+.prose a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(200,135,58,0.35); transition: text-decoration-color 0.15s; }
+.prose a:hover { text-decoration-color: var(--amber); }
+.prose strong { color: var(--prose-heading); font-weight: 600; }
+.prose em { font-style: italic; color: var(--prose-muted); }
+.prose ul, .prose ol { margin: 0.5em 0 1.1em 0; padding-left: 1.6em; }
+.prose ul { list-style-type: disc; }
+.prose ol { list-style-type: decimal; }
+.prose li { margin-bottom: 0.3em; }
+.prose blockquote { border-left: 2px solid var(--amber); padding-left: 1.1em; margin: 1.2em 0; color: var(--prose-subtle); font-style: italic; }
+.prose code:not(pre code) { background: var(--prose-code-border); color: var(--prose-heading); padding: 0.15em 0.45em; border-radius: 4px; font-size: 0.855em; font-family: 'IBM Plex Mono', monospace; }
+.prose pre { background: var(--prose-pre-bg); border: 1px solid var(--prose-code-border); border-radius: 8px; padding: 0.9em 1em; overflow-x: auto; margin: 1.2em 0; color: var(--prose-pre-color); max-width: 100%; }
+@media (min-width: 640px) {
+  .prose pre { padding: 1.1em 1.3em; }
+}
+.prose pre code { background: transparent; color: inherit; padding: 0; font-size: 0.82em; font-family: 'IBM Plex Mono', monospace; word-break: break-all; }
+@media (min-width: 640px) {
+  .prose pre code { font-size: 0.855em; word-break: normal; }
+}
+.prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 0.85em; font-family: 'IBM Plex Sans', sans-serif; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
+@media (min-width: 640px) {
+  .prose table { font-size: 0.9em; display: table; overflow-x: visible; }
+}
+.prose thead th { background: var(--prose-th-bg); color: var(--prose-heading); font-weight: 600; padding: 0.6em 0.9em; border: 1px solid var(--prose-border); text-align: left; font-size: 0.78em; letter-spacing: 0.05em; text-transform: uppercase; }
+.prose tbody td { padding: 0.55em 0.9em; border: 1px solid var(--prose-code-border); color: var(--prose-muted); }
+.prose tbody tr:nth-child(even) { background: var(--prose-th-bg); }
+.prose img { max-width: 100%; border-radius: 6px; border: 1px solid var(--prose-code-border); }
+.prose hr { border: none; border-top: 1px solid var(--prose-border); margin: 2.5em 0; }
+
+:root {
+  --prose-body: #3a3730;
+  --prose-heading: #1c1a17;
+  --prose-muted: #5a5750;
+  --prose-subtle: #7a7568;
+  --prose-border: #ddd9d0;
+  --prose-code-border: rgba(28,26,23,0.1);
+  --prose-th-bg: rgba(28,26,23,0.03);
+  --prose-pre-bg: #eae6de;
+  --prose-pre-color: #2a2724;
+  --hljs-comment: #8a8275;
+  --hljs-keyword: #9b4a1a;
+  --hljs-string: #4a7a46;
+  --hljs-variable: #7a6830;
+  --hljs-number: #2a5a8a;
+  --hljs-title: #6a3a8a;
+  --hljs-builtin: #2a6a40;
+  --hljs-deletion: #8a3030;
+}
+.dark {
+  --prose-body: #c8c2b8;
+  --prose-heading: #e8e4dc;
+  --prose-muted: #9a9488;
+  --prose-subtle: #7a7568;
+  --prose-border: rgba(232, 228, 220, 0.1);
+  --prose-code-border: rgba(232, 228, 220, 0.08);
+  --prose-th-bg: rgba(232, 228, 220, 0.03);
+  --prose-pre-bg: #0a0906;
+  --prose-pre-color: #c8c2b8;
+  --hljs-comment: #6a6560;
+  --hljs-keyword: #d4954a;
+  --hljs-string: #a5c4a0;
+  --hljs-variable: #d4c08a;
+  --hljs-number: #8ab4d8;
+  --hljs-title: #c8a0d8;
+  --hljs-builtin: #7aad80;
+  --hljs-deletion: #c86060;
+}
+
+.hljs { color: var(--prose-pre-color); background: var(--prose-pre-bg); }
+.hljs-comment, .hljs-meta { color: var(--hljs-comment); font-style: italic; }
+.hljs-keyword, .hljs-selector-tag, .hljs-tag { color: var(--hljs-keyword); }
+.hljs-string, .hljs-attr { color: var(--hljs-string); }
+.hljs-template-variable, .hljs-variable { color: var(--hljs-variable); }
+.hljs-number, .hljs-literal, .hljs-type { color: var(--hljs-number); }
+.hljs-title, .hljs-name, .hljs-selector-id, .hljs-selector-class { color: var(--hljs-title); }
+.hljs-symbol, .hljs-bullet, .hljs-link { color: var(--hljs-keyword); }
+.hljs-built_in, .hljs-addition { color: var(--hljs-builtin); }
+.hljs-deletion { color: var(--hljs-deletion); }
+
+@keyframes fadeSlideUp {
+  from { opacity: 0; transform: translateY(5px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.animate-in { animation: fadeSlideUp 0.22s ease both; }
+
+/* Mobile bottom-sheet modal entrance */
+@keyframes slideUp {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0); }
+}
+@media (max-width: 767px) {
+  .modal-backdrop > [role="dialog"] {
+    animation: slideUp 0.3s ease-out both;
+  }
+}
+
+.modal-backdrop {
+  background: rgba(10, 9, 6, 0.72);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+/* Hide scrollbar but keep scroll functionality */
+.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
+.scrollbar-none::-webkit-scrollbar { display: none; }
+
+/* iOS safe areas */
+@supports (padding: env(safe-area-inset-bottom)) {
+  .safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }
+}
+
+/* Tap highlight removal for mobile */
+@media (hover: none) {
+  button, a { -webkit-tap-highlight-color: transparent; }
+}
+
+/* ─── Tiptap WYSIWYG editor ─────────────────────────────────────────── */
+.wysiwyg-wrapper {
+  height: 100%;
+  cursor: text;
+}
+
+/* Tiptap uses ProseMirror internally */
+.wysiwyg-editor {
+  min-height: 100%;
+  caret-color: var(--amber);
+  color: var(--foreground);
+}
+
+/* Placeholder */
+.wysiwyg-editor p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  color: var(--muted-foreground);
+  opacity: 0.45;
+  float: left;
+  pointer-events: none;
+  height: 0;
+}
+
+/* Selection */
+.wysiwyg-editor ::selection {
+  background: var(--amber);
+  color: #131210;
+  opacity: 0.35;
+}
+
+/* Task list */
+.wysiwyg-editor ul[data-type="taskList"] {
+  list-style: none;
+  padding: 0;
+}
+.wysiwyg-editor ul[data-type="taskList"] li {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+}
+.wysiwyg-editor ul[data-type="taskList"] li > label {
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+.wysiwyg-editor ul[data-type="taskList"] li > label input[type="checkbox"] {
+  accent-color: var(--amber);
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+}
+.wysiwyg-editor ul[data-type="taskList"] li[data-checked="true"] > div {
+  text-decoration: line-through;
+  opacity: 0.5;
+}
+
+/* Tables */
+.wysiwyg-editor table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 1.5rem 0;
+}
+.wysiwyg-editor th,
+.wysiwyg-editor td {
+  border: 1px solid var(--border);
+  padding: 0.5rem 0.75rem;
+  min-width: 60px;
+}
+.wysiwyg-editor th {
+  background: var(--muted);
+  font-weight: 600;
+}
+.wysiwyg-editor .selectedCell {
+  background: color-mix(in srgb, var(--amber) 12%, transparent);
+}
+
+/* Focus ring on the editor area */
+.wysiwyg-wrapper:focus-within {
+  outline: none;
+}