npm - @geminilight/mindos - Versions diffs - 0.1.0 - Mend

@geminilight/mindos 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (282) hide show

package/app/app/icon.svg ADDED Viewed

@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <defs>
+    <linearGradient id="g-human" x1="14" y1="16" x2="2" y2="16" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#c8873a" stop-opacity="0.8"/>
+      <stop offset="100%" stop-color="#c8873a" stop-opacity="0.3"/>
+    </linearGradient>
+    <linearGradient id="g-agent" x1="14" y1="16" x2="30" y2="16" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#c8873a" stop-opacity="0.8"/>
+      <stop offset="100%" stop-color="#c8873a" stop-opacity="1"/>
+    </linearGradient>
+  </defs>
+  <!-- Human Loop (Left) — dashed, lighter -->
+  <path
+    d="M14,16 C10,23 3.2,23 3.2,16 C3.2,9 10,9 14,16"
+    stroke="url(#g-human)"
+    stroke-width="1.8"
+    stroke-dasharray="1.2 2.4"
+    stroke-linecap="round"
+  />
+  <!-- Agent Loop (Right) — solid, bolder -->
+  <path
+    d="M14,16 C18,7 28.8,7 28.8,16 C28.8,25 18,25 14,16"
+    stroke="url(#g-agent)"
+    stroke-width="2.6"
+    stroke-linecap="round"
+  />
+  <!-- Spark center -->
+  <path
+    d="M14,14.5 Q14,16 15.5,16 Q14,16 14,17.5 Q14,16 12.5,16 Q14,16 14,14.5 Z"
+    fill="#FEF3C7"
+  />
+</svg>

package/app/app/layout.tsx ADDED Viewed

@@ -0,0 +1,103 @@
+import type { Metadata } from 'next';
+import { Geist, Geist_Mono, IBM_Plex_Mono, IBM_Plex_Sans, Lora } from 'next/font/google';
+import { headers } from 'next/headers';
+import './globals.css';
+import { getFileTree } from '@/lib/fs';
+import SidebarLayout from '@/components/SidebarLayout';
+import { TooltipProvider } from '@/components/ui/tooltip';
+import { LocaleProvider } from '@/lib/LocaleContext';
+import ErrorBoundary from '@/components/ErrorBoundary';
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+});
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+});
+const ibmPlexMono = IBM_Plex_Mono({
+  variable: '--font-ibm-plex-mono',
+  weight: ['400', '500', '600'],
+  subsets: ['latin'],
+});
+const ibmPlexSans = IBM_Plex_Sans({
+  variable: '--font-ibm-plex-sans',
+  weight: ['300', '400', '500', '600'],
+  subsets: ['latin'],
+});
+const lora = Lora({
+  variable: '--font-lora',
+  weight: ['400', '500', '600'],
+  style: ['normal', 'italic'],
+  subsets: ['latin'],
+});
+export const metadata: Metadata = {
+  title: 'MindOS',
+  description: 'Personal knowledge base',
+  icons: { icon: '/logo-square.svg' },
+};
+export const viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  viewportFit: 'cover' as const,
+};
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  let fileTree: import('@/lib/types').FileNode[] = [];
+  try {
+    fileTree = getFileTree();
+  } catch (err) {
+    console.error('[RootLayout] Failed to load file tree:', err);
+  }
+  const headersList = await headers();
+  const isLoginPage = headersList.get('x-pathname') === '/login';
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        {/* Patch Node.removeChild/insertBefore to swallow errors caused by browser
+            extensions (translators, Grammarly, etc.) that mutate the DOM between SSR
+            and hydration. See: https://github.com/facebook/react/issues/17256 */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(function(){if(typeof Node!=='undefined'){var o=Node.prototype.removeChild;Node.prototype.removeChild=function(c){if(c.parentNode!==this){try{return o.call(c.parentNode,c)}catch(e){return c}}return o.call(this,c)};var i=Node.prototype.insertBefore;Node.prototype.insertBefore=function(n,r){if(r&&r.parentNode!==this){try{return i.call(r.parentNode,n,r)}catch(e){return i.call(this,n,null)}}return i.call(this,n,r)}}})();`,
+          }}
+        />
+        {/* Apply user appearance settings before first paint, preventing flash */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(function(){try{var s=localStorage.getItem('theme');var dark=s?s==='dark':window.matchMedia('(prefers-color-scheme: dark)').matches;document.documentElement.classList.toggle('dark',dark);var cw=localStorage.getItem('content-width');if(cw)document.documentElement.style.setProperty('--content-width-override',cw);var pf=localStorage.getItem('prose-font');var fm={lora:'"Lora", Georgia, serif','ibm-plex-sans':'"IBM Plex Sans", sans-serif',geist:'var(--font-geist-sans), sans-serif','ibm-plex-mono':'"IBM Plex Mono", monospace'};if(pf&&fm[pf])document.documentElement.style.setProperty('--prose-font-override',fm[pf]);}catch(e){}})();`,
+          }}
+        />
+      </head>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} ${ibmPlexMono.variable} ${ibmPlexSans.variable} ${lora.variable} antialiased bg-background text-foreground`}
+        suppressHydrationWarning
+      >
+        <LocaleProvider>
+          <TooltipProvider delay={300}>
+            <ErrorBoundary>
+              {isLoginPage ? children : (
+                <SidebarLayout fileTree={fileTree}>
+                  {children}
+                </SidebarLayout>
+              )}
+            </ErrorBoundary>
+          </TooltipProvider>
+        </LocaleProvider>
+      </body>
+    </html>
+  );
+}

package/app/app/login/page.tsx ADDED Viewed

@@ -0,0 +1,120 @@
+'use client';
+import { useState, Suspense } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Loader2, Lock } from 'lucide-react';
+function LoginForm() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    try {
+      const res = await fetch('/api/auth', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ password }),
+      });
+      if (res.ok) {
+        const rawRedirect = searchParams.get('redirect') ?? '/';
+        // Safety: only allow relative paths starting with / to prevent open redirect
+        const safe = rawRedirect.startsWith('/') && !rawRedirect.startsWith('//')
+          ? rawRedirect
+          : '/';
+        router.replace(safe);
+      } else {
+        setError('Incorrect password. Please try again.');
+        setPassword('');
+      }
+    } catch {
+      setError('Connection error. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  }
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center px-4">
+      <div className="bg-card border border-border rounded-xl shadow-2xl w-full max-w-sm p-8">
+        {/* Logo + title */}
+        <div className="flex flex-col items-center gap-3 mb-8">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" fill="none" width={40} height={40}>
+            <defs>
+              <linearGradient id="lp-grad-human" x1="35" y1="40" x2="5" y2="40" gradientUnits="userSpaceOnUse">
+                <stop offset="0%" stopColor="#c8873a" stopOpacity="0.8"/>
+                <stop offset="100%" stopColor="#c8873a" stopOpacity="0.3"/>
+              </linearGradient>
+              <linearGradient id="lp-grad-agent" x1="35" y1="40" x2="75" y2="40" gradientUnits="userSpaceOnUse">
+                <stop offset="0%" stopColor="#c8873a" stopOpacity="0.8"/>
+                <stop offset="100%" stopColor="#c8873a" stopOpacity="1"/>
+              </linearGradient>
+            </defs>
+            <g transform="translate(0, 20)">
+              <path d="M35,20 C25,35 8,35 8,20 C8,5 25,5 35,20" stroke="url(#lp-grad-human)" strokeWidth="3" strokeDasharray="2 4" strokeLinecap="round"/>
+              <path d="M35,20 C45,2 75,2 75,20 C75,38 45,38 35,20" stroke="url(#lp-grad-agent)" strokeWidth="4.5" strokeLinecap="round"/>
+              <path d="M35,17.5 Q35,20 37.5,20 Q35,20 35,22.5 Q35,20 32.5,20 Q35,20 35,17.5 Z" fill="#FEF3C7"/>
+            </g>
+          </svg>
+          <h1
+            className="text-xl font-semibold text-foreground tracking-tight"
+            style={{ fontFamily: "'IBM Plex Mono', monospace" }}
+          >
+            MindOS
+          </h1>
+          <p className="text-sm text-muted-foreground">Enter your password to continue</p>
+        </div>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-1.5">
+            <label className="text-sm font-medium text-foreground" htmlFor="password">
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+              placeholder="Enter password"
+              autoFocus
+              autoComplete="current-password"
+              required
+              className="w-full px-3 py-2 text-sm bg-background border border-border rounded-lg text-foreground placeholder:text-muted-foreground outline-none focus:ring-1 focus:ring-ring disabled:opacity-50"
+            />
+          </div>
+          {error && (
+            <p className="text-xs text-destructive">{error}</p>
+          )}
+          <button
+            type="submit"
+            disabled={loading || !password}
+            className="w-full flex items-center justify-center gap-2 py-2 px-4 rounded-lg text-sm font-medium transition-opacity disabled:opacity-50 disabled:cursor-not-allowed mt-2"
+            style={{ background: 'var(--amber)', color: '#131210' }}
+          >
+            {loading ? (
+              <Loader2 size={14} className="animate-spin" />
+            ) : (
+              <Lock size={14} />
+            )}
+            {loading ? 'Signing in…' : 'Sign in'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
+export default function LoginPage() {
+  return (
+    <Suspense>
+      <LoginForm />
+    </Suspense>
+  );
+}

package/app/app/page.tsx ADDED Viewed

@@ -0,0 +1,12 @@
+import { getRecentlyModified } from '@/lib/fs';
+import HomeContent from '@/components/HomeContent';
+export default function HomePage() {
+  let recent: { path: string; mtime: number }[] = [];
+  try {
+    recent = getRecentlyModified(15);
+  } catch (err) {
+    console.error('[HomePage] Failed to load recent files:', err);
+  }
+  return <HomeContent recent={recent} />;
+}

package/app/app/view/[...path]/ViewPageClient.tsx ADDED Viewed

@@ -0,0 +1,343 @@
+'use client';
+import { useState, useTransition, useCallback, useEffect, useSyncExternalStore } from 'react';
+import { useRouter } from 'next/navigation';
+import { Edit3, Save, X, Loader2, LayoutTemplate } from 'lucide-react';
+import MarkdownView from '@/components/MarkdownView';
+import JsonView from '@/components/JsonView';
+import CsvView from '@/components/CsvView';
+import Backlinks from '@/components/Backlinks';
+import Breadcrumb from '@/components/Breadcrumb';
+import MarkdownEditor, { MdViewMode } from '@/components/MarkdownEditor';
+import TableOfContents from '@/components/TableOfContents';
+import { resolveRenderer } from '@/lib/renderers/registry';
+import { encodePath } from '@/lib/utils';
+import '@/lib/renderers/index'; // registers all renderers
+interface ViewPageClientProps {
+  filePath: string;
+  content: string;
+  extension: string;
+  saveAction: (content: string) => Promise<void>;
+  appendRowAction?: (newRow: string[]) => Promise<{ newContent: string }>;
+  initialEditing?: boolean;
+  isDraft?: boolean;
+  draftDirectories?: string[];
+  createDraftAction?: (targetPath: string, content: string) => Promise<void>;
+}
+export default function ViewPageClient({
+  filePath,
+  content,
+  extension,
+  saveAction,
+  appendRowAction,
+  initialEditing = false,
+  isDraft = false,
+  draftDirectories = [],
+  createDraftAction,
+}: ViewPageClientProps) {
+  const hydrated = useSyncExternalStore(
+    () => () => {},
+    () => true,
+    () => false,
+  );
+  const useRaw = useSyncExternalStore(
+    (onStoreChange) => {
+      const listener = () => onStoreChange();
+      window.addEventListener('storage', listener);
+      window.addEventListener('mindos-use-raw-change', listener);
+      return () => {
+        window.removeEventListener('storage', listener);
+        window.removeEventListener('mindos-use-raw-change', listener);
+      };
+    },
+    () => {
+      const saved = localStorage.getItem('mindos-use-raw');
+      return saved !== null ? saved === 'true' : true;
+    },
+    () => false,
+  );
+  const router = useRouter();
+  const [editing, setEditing] = useState(initialEditing || content === '');
+  const [editContent, setEditContent] = useState(content);
+  const [savedContent, setSavedContent] = useState(content);
+  const [isPending, startTransition] = useTransition();
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const [saveSuccess, setSaveSuccess] = useState(false);
+  const [mdViewMode, setMdViewMode] = useState<MdViewMode>('wysiwyg');
+  const inferredName = filePath.split('/').pop() || 'Untitled.md';
+  const [showSaveAs, setShowSaveAs] = useState(isDraft);
+  const [saveDir, setSaveDir] = useState('');
+  const [saveName, setSaveName] = useState(inferredName);
+  // Keep first paint deterministic between server and client to avoid hydration mismatch.
+  const effectiveUseRaw = hydrated ? useRaw : false;
+  const handleToggleRaw = useCallback(() => {
+    const next = !useRaw;
+    localStorage.setItem('mindos-use-raw', String(next));
+    window.dispatchEvent(new Event('mindos-use-raw-change'));
+  }, [useRaw]);
+  const renderer = resolveRenderer(filePath, extension);
+  const isCsv = extension === 'csv';
+  const showRenderer = !editing && !effectiveUseRaw && !!renderer;
+  const handleEdit = useCallback(() => {
+    setEditContent(savedContent);
+    setEditing(true);
+    setSaveError(null);
+    setSaveSuccess(false);
+  }, [savedContent]);
+  const handleCancel = useCallback(() => {
+    if (isDraft) {
+      router.push('/');
+      return;
+    }
+    setEditing(false);
+    setSaveError(null);
+  }, [isDraft, router]);
+  const handleConfirmDraftSave = useCallback(() => {
+    const trimmed = saveName.trim();
+    if (!trimmed) {
+      setSaveError('Please enter a file name');
+      return;
+    }
+    if (!createDraftAction) {
+      setSaveError('Draft save is not available');
+      return;
+    }
+    const finalName = trimmed.endsWith('.md') || trimmed.endsWith('.csv') ? trimmed : `${trimmed}.md`;
+    const targetPath = saveDir ? `${saveDir}/${finalName}` : finalName;
+    setSaveError(null);
+    startTransition(async () => {
+      try {
+        await createDraftAction(targetPath, editContent);
+        setSavedContent(editContent);
+        setEditing(false);
+        setShowSaveAs(false);
+        setSaveSuccess(true);
+        setTimeout(() => setSaveSuccess(false), 2500);
+        router.push(`/view/${encodePath(targetPath)}`);
+        router.refresh();
+      } catch (err) {
+        setSaveError(err instanceof Error ? err.message : 'Failed to save');
+      }
+    });
+  }, [saveName, createDraftAction, saveDir, editContent, router]);
+  const handleSave = useCallback(() => {
+    if (isCsv) {
+      setEditing(false);
+      setSaveSuccess(true);
+      setTimeout(() => setSaveSuccess(false), 2500);
+      return;
+    }
+    if (isDraft) {
+      setShowSaveAs(true);
+      return;
+    }
+    setSaveError(null);
+    startTransition(async () => {
+      try {
+        await saveAction(editContent);
+        setSavedContent(editContent);
+        setEditing(false);
+        setSaveSuccess(true);
+        setTimeout(() => setSaveSuccess(false), 2500);
+      } catch (err) {
+        setSaveError(err instanceof Error ? err.message : 'Failed to save');
+      }
+    });
+  }, [isCsv, isDraft, saveAction, editContent]);
+  // Renderer's inline save — updates local savedContent without entering edit mode
+  const handleRendererSave = useCallback(async (newContent: string) => {
+    await saveAction(newContent);
+    setSavedContent(newContent);
+  }, [saveAction]);
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+        e.preventDefault();
+        if (editing) handleSave();
+      }
+      if (e.key === 'e' && !editing && document.activeElement?.tagName === 'BODY') {
+        handleEdit();
+      }
+      if (e.key === 'Escape' && editing) handleCancel();
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [editing, handleSave, handleEdit, handleCancel]);
+  return (
+    <div className="flex flex-col min-h-screen">
+      {/* Top bar */}
+      <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="content-width xl:mr-[220px] flex items-center justify-between gap-2">
+          <div className="min-w-0 flex-1">
+            <Breadcrumb filePath={filePath} />
+          </div>
+          <div className="flex items-center gap-1.5 md:gap-2 shrink-0">
+            {saveSuccess && (
+              <span className="text-xs flex items-center gap-1.5" style={{ color: '#7aad80', fontFamily: "'IBM Plex Mono', monospace" }}>
+                <span className="w-1.5 h-1.5 rounded-full" style={{ background: '#7aad80' }} />
+                <span className="hidden sm:inline">saved</span>
+              </span>
+            )}
+            {saveError && (
+              <span className="text-xs text-red-400 hidden sm:inline">{saveError}</span>
+            )}
+            {/* Renderer toggle — only shown when a custom renderer exists */}
+            {renderer && !editing && !isDraft && (
+              <button
+                onClick={handleToggleRaw}
+                className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
+                style={{
+                  background: effectiveUseRaw ? 'var(--muted)' : `${'var(--amber)'}22`,
+                  color: effectiveUseRaw ? 'var(--muted-foreground)' : 'var(--amber)',
+                  fontFamily: "'IBM Plex Mono', monospace",
+                }}
+                title={effectiveUseRaw ? `Switch to ${renderer.name}` : 'View raw'}
+              >
+                <LayoutTemplate size={13} />
+                <span className="hidden sm:inline">{effectiveUseRaw ? renderer.name : 'Raw'}</span>
+              </button>
+            )}
+            {!editing && !showRenderer && !isDraft && (
+              <button
+                onClick={handleEdit}
+                className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
+                style={{ background: 'var(--muted)', color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono', monospace" }}
+                onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--foreground)'; e.currentTarget.style.background = 'var(--accent)'; }}
+                onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--muted-foreground)'; e.currentTarget.style.background = 'var(--muted)'; }}
+              >
+                <Edit3 size={13} />
+                <span className="hidden sm:inline">Edit</span>
+              </button>
+            )}
+            {editing && (
+              <>
+                <button
+                  onClick={handleCancel}
+                  disabled={isPending}
+                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors disabled:opacity-50"
+                  style={{ background: 'var(--muted)', color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono', monospace" }}
+                  onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--accent)'; }}
+                  onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--muted)'; }}
+                >
+                  <X size={13} />
+                  <span className="hidden sm:inline">Cancel</span>
+                </button>
+                <button
+                  onClick={isDraft && showSaveAs ? handleConfirmDraftSave : handleSave}
+                  disabled={isPending}
+                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium disabled:opacity-50"
+                  style={{ background: 'var(--amber)', color: '#131210', fontFamily: "'IBM Plex Mono', monospace" }}
+                >
+                  {isPending ? <Loader2 size={13} className="animate-spin" /> : <Save size={13} />}
+                  <span className="hidden sm:inline">Save</span>
+                </button>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+      {/* Content */}
+      <div className="flex-1 px-4 md:px-6 py-6 md:py-8">
+        {editing ? (
+          <div className="content-width xl:mr-[220px]">
+            {isDraft && showSaveAs && (
+              <div className="mb-3 rounded-lg border border-border bg-card p-3 flex flex-col md:flex-row md:items-end gap-2">
+                <div className="flex-1 min-w-[180px]">
+                  <label className="text-xs text-muted-foreground">Directory</label>
+                  <select
+                    value={saveDir}
+                    onChange={(e) => setSaveDir(e.target.value)}
+                    className="mt-1 w-full px-2 py-1.5 text-sm bg-background border border-border rounded text-foreground"
+                  >
+                    <option value="">/</option>
+                    {draftDirectories.map((dir) => (
+                      <option key={dir} value={dir}>{dir}</option>
+                    ))}
+                  </select>
+                </div>
+                <div className="flex-1 min-w-[200px]">
+                  <label className="text-xs text-muted-foreground">File name</label>
+                  <input
+                    value={saveName}
+                    onChange={(e) => setSaveName(e.target.value)}
+                    onKeyDown={(e) => { if (e.key === 'Enter') handleConfirmDraftSave(); }}
+                    className="mt-1 w-full px-2 py-1.5 text-sm bg-background border border-border rounded text-foreground"
+                    placeholder="Untitled.md"
+                  />
+                </div>
+              </div>
+            )}
+            {isCsv ? (
+              <CsvView
+                content={editContent}
+                filePath={filePath}
+                appendAction={appendRowAction}
+                saveAction={async (c) => {
+                  await saveAction(c);
+                  setEditContent(c);
+                  setSavedContent(c);
+                }}
+              />
+            ) : (
+              <MarkdownEditor
+                value={editContent}
+                onChange={setEditContent}
+                viewMode={mdViewMode}
+                onViewModeChange={setMdViewMode}
+              />
+            )}
+          </div>
+        ) : showRenderer ? (
+          <div className="content-width xl:mr-[220px]">
+            <renderer.component
+              filePath={filePath}
+              content={savedContent}
+              extension={extension}
+              saveAction={handleRendererSave}
+            />
+            <Backlinks filePath={filePath} />
+          </div>
+        ) : (
+          <div className="content-width xl:mr-[220px]">
+            {extension === 'csv' ? (
+              <CsvView
+                content={savedContent}
+                filePath={filePath}
+              />
+            ) : extension === 'json' ? (
+              <JsonView content={savedContent} />
+            ) : (
+              <>
+                <MarkdownView content={savedContent} />
+                <TableOfContents content={savedContent} />
+              </>
+            )}
+            <Backlinks filePath={filePath} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/app/app/view/[...path]/error.tsx ADDED Viewed

@@ -0,0 +1,33 @@
+'use client';
+import { useEffect } from 'react';
+export default function ViewError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error('View 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">Failed to load file</h2>
+        <p className="text-sm text-muted-foreground max-w-md">
+          {error.message || 'The file could not be read or rendered.'}
+        </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/view/[...path]/loading.tsx ADDED Viewed

@@ -0,0 +1,15 @@
+export default function Loading() {
+  return (
+    <div className="flex items-center justify-center min-h-[50vh]">
+      <div className="flex flex-col items-center gap-3">
+        <div
+          className="w-6 h-6 border-2 rounded-full animate-spin"
+          style={{ borderColor: 'var(--border)', borderTopColor: 'var(--amber)' }}
+        />
+        <span className="text-xs text-muted-foreground" style={{ fontFamily: "'IBM Plex Mono', monospace" }}>
+          Loading...
+        </span>
+      </div>
+    </div>
+  );
+}