@geminilight/mindos 0.1.0

package/app/app/view/[...path]/page.tsx

@@ -0,0 +1,93 @@
+import { notFound } from 'next/navigation';
+import { getFileContent, saveFileContent, isDirectory, getDirEntries, createFile, getFileTree } from '@/lib/fs';
+import type { FileNode } from '@/lib/types';
+import ViewPageClient from './ViewPageClient';
+import DirView from '@/components/DirView';
+import Papa from 'papaparse';
+
+interface PageProps {
+  params: Promise<{ path: string[] }>;
+}
+
+function collectDirectories(nodes: FileNode[]): string[] {
+  const dirs: string[] = [];
+  for (const n of nodes) {
+    if (n.type === 'directory') {
+      dirs.push(n.path);
+      if (n.children) dirs.push(...collectDirectories(n.children));
+    }
+  }
+  return dirs;
+}
+
+export default async function ViewPage({ params }: PageProps) {
+  const { path: segments } = await params;
+  const filePath = segments.map(decodeURIComponent).join('/');
+
+  // Directory: show folder listing
+  if (isDirectory(filePath)) {
+    const entries = getDirEntries(filePath);
+    return <DirView dirPath={filePath} entries={entries} />;
+  }
+
+  const extension = filePath.split('.').pop()?.toLowerCase() || '';
+
+  async function saveAction(newContent: string) {
+    'use server';
+    saveFileContent(filePath, newContent);
+  }
+
+  async function appendRowAction(newRow: string[]): Promise<{ newContent: string }> {
+    'use server';
+    const current = getFileContent(filePath);
+    const parsed = Papa.parse<string[]>(current, { skipEmptyLines: true });
+    const rows = parsed.data as string[][];
+    rows.push(newRow);
+    const newContent = Papa.unparse(rows);
+    saveFileContent(filePath, newContent);
+    return { newContent };
+  }
+
+  async function createDraftAction(targetPath: string, draftContent: string) {
+    'use server';
+    createFile(targetPath, draftContent);
+  }
+
+  let content = '';
+  let exists = true;
+  try {
+    content = getFileContent(filePath);
+  } catch {
+    exists = false;
+  }
+
+  if (!exists) {
+    // Special draft entry used by homepage "New Notes"
+    if (filePath === 'Untitled.md') {
+      const draftDirectories = collectDirectories(getFileTree());
+      return (
+        <ViewPageClient
+          filePath={filePath}
+          content=""
+          extension="md"
+          saveAction={saveAction}
+          initialEditing
+          isDraft
+          draftDirectories={draftDirectories}
+          createDraftAction={createDraftAction}
+        />
+      );
+    }
+    notFound();
+  }
+
+  return (
+    <ViewPageClient
+      filePath={filePath}
+      content={content}
+      extension={extension}
+      saveAction={saveAction}
+      appendRowAction={extension === 'csv' ? appendRowAction : undefined}
+    />
+  );
+}

package/app/components/AskFab.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { useState } from 'react';
+import { usePathname } from 'next/navigation';
+import { Sparkles } from 'lucide-react';
+import AskModal from './AskModal';
+
+export default function AskFab() {
+  const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+  const currentFile = pathname.startsWith('/view/')
+    ? pathname.slice('/view/'.length).split('/').map(decodeURIComponent).join('/')
+    : undefined;
+
+  return (
+    <>
+      <button
+        onClick={() => setOpen(true)}
+        className="
+          group
+          fixed z-40
+          bottom-5 right-5
+          md:bottom-5 md:right-5
+          flex items-center justify-center
+          gap-0 hover:gap-2
+          p-3 md:p-[11px] rounded-xl
+          text-white font-medium text-[13px]
+          shadow-md shadow-amber-900/15
+          transition-all duration-200 ease-out
+          hover:shadow-lg hover:shadow-amber-800/25
+          active:scale-95
+          cursor-pointer
+          overflow-hidden
+        "
+        style={{
+          fontFamily: "'IBM Plex Mono', monospace",
+          background: 'linear-gradient(135deg, #b07c2e 0%, #c8873a 50%, #d4943f 100%)',
+          marginBottom: 'env(safe-area-inset-bottom, 0px)',
+        }}
+        title="MindOS Agent (⌘/)"
+        aria-label="MindOS Agent"
+      >
+        <Sparkles size={16} className="relative z-10 shrink-0" />
+
+        <span className="
+          relative z-10
+          max-w-0 group-hover:max-w-[120px]
+          opacity-0 group-hover:opacity-100
+          transition-all duration-200 ease-out
+          whitespace-nowrap overflow-hidden
+        ">
+          MindOS Agent
+        </span>
+      </button>
+
+      <AskModal open={open} onClose={() => setOpen(false)} currentFile={currentFile} />
+    </>
+  );
+}

package/app/components/AskModal.tsx

@@ -0,0 +1,398 @@
+'use client';
+
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { X, Sparkles, Send, AtSign, Paperclip, StopCircle, RotateCcw, History } from 'lucide-react';
+import { useLocale } from '@/lib/LocaleContext';
+import type { Message } from '@/lib/types';
+import { useAskSession } from '@/hooks/useAskSession';
+import { useFileUpload } from '@/hooks/useFileUpload';
+import { useMention } from '@/hooks/useMention';
+import MessageList from '@/components/ask/MessageList';
+import MentionPopover from '@/components/ask/MentionPopover';
+import SessionHistory from '@/components/ask/SessionHistory';
+import FileChip from '@/components/ask/FileChip';
+
+interface AskModalProps {
+  open: boolean;
+  onClose: () => void;
+  currentFile?: string;
+}
+
+export default function AskModal({ open, onClose, currentFile }: AskModalProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const abortRef = useRef<AbortController | null>(null);
+  const { t } = useLocale();
+
+  const [input, setInput] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadingPhase, setLoadingPhase] = useState<'connecting' | 'thinking' | 'streaming'>('connecting');
+  const [attachedFiles, setAttachedFiles] = useState<string[]>([]);
+  const [maxSteps, setMaxSteps] = useState(20);
+  const [showHistory, setShowHistory] = useState(false);
+
+  const session = useAskSession(currentFile);
+  const upload = useFileUpload();
+  const mention = useMention();
+
+  // Focus and reset on open
+  useEffect(() => {
+    let cancelled = false;
+    if (open) {
+      setTimeout(() => inputRef.current?.focus(), 50);
+      void (async () => {
+        if (cancelled) return;
+        await session.initSessions();
+      })();
+      setInput('');
+      setAttachedFiles(currentFile ? [currentFile] : []);
+      upload.clearAttachments();
+      mention.resetMention();
+      setShowHistory(false);
+    } else {
+      abortRef.current?.abort();
+    }
+    return () => { cancelled = true; };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, currentFile]);
+
+  // Persist session on message changes
+  useEffect(() => {
+    if (!open || !session.activeSessionId) return;
+    session.persistSession(session.messages, session.activeSessionId);
+    return () => session.clearPersistTimer();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, session.messages, session.activeSessionId]);
+
+  // Esc to close (or dismiss mention)
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        if (mention.mentionQuery !== null) { mention.resetMention(); return; }
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [open, onClose, mention]);
+
+  const handleInputChange = useCallback((val: string) => {
+    setInput(val);
+    mention.updateMentionFromInput(val);
+  }, [mention]);
+
+  const selectMention = useCallback((filePath: string) => {
+    const atIdx = input.lastIndexOf('@');
+    setInput(input.slice(0, atIdx));
+    mention.resetMention();
+    if (!attachedFiles.includes(filePath)) {
+      setAttachedFiles(prev => [...prev, filePath]);
+    }
+    setTimeout(() => inputRef.current?.focus(), 0);
+  }, [input, attachedFiles, mention]);
+
+  const handleInputKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (mention.mentionQuery === null) return;
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      mention.navigateMention('down');
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      mention.navigateMention('up');
+    } else if (e.key === 'Enter' || e.key === 'Tab') {
+      if (mention.mentionResults.length > 0) {
+        e.preventDefault();
+        selectMention(mention.mentionResults[mention.mentionIndex]);
+      }
+    }
+  }, [mention, selectMention]);
+
+  const handleStop = useCallback(() => { abortRef.current?.abort(); }, []);
+
+  const handleSubmit = useCallback(async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (mention.mentionQuery !== null) return;
+    const text = input.trim();
+    if (!text || isLoading) return;
+
+    const userMsg: Message = { role: 'user', content: text };
+    const requestMessages = [...session.messages, userMsg];
+    session.setMessages([...requestMessages, { role: 'assistant', content: '' }]);
+    setInput('');
+    setAttachedFiles(currentFile ? [currentFile] : []);
+    setIsLoading(true);
+    setLoadingPhase('connecting');
+
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    try {
+      const res = await fetch('/api/ask', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          messages: requestMessages,
+          currentFile,
+          attachedFiles,
+          uploadedFiles: upload.localAttachments,
+          maxSteps,
+        }),
+        signal: controller.signal,
+      });
+
+      if (!res.ok) {
+        let errorMsg = `Request failed (${res.status})`;
+        try {
+          const errBody = await res.json();
+          if (errBody.error) errorMsg = errBody.error;
+        } catch {}
+        throw new Error(errorMsg);
+      }
+
+      if (!res.body) throw new Error('No response body');
+
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder();
+      let assistantContent = '';
+      setLoadingPhase('thinking');
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        const chunk = decoder.decode(value, { stream: true });
+        if (chunk) setLoadingPhase('streaming');
+        assistantContent += chunk;
+        session.setMessages(prev => {
+          const updated = [...prev];
+          updated[updated.length - 1] = { role: 'assistant', content: assistantContent };
+          return updated;
+        });
+      }
+
+      if (!assistantContent.trim()) {
+        session.setMessages(prev => {
+          const updated = [...prev];
+          updated[updated.length - 1] = { role: 'assistant', content: `__error__${t.ask.errorNoResponse}` };
+          return updated;
+        });
+      }
+    } catch (err) {
+      if ((err as Error).name === 'AbortError') {
+        session.setMessages(prev => {
+          const updated = [...prev];
+          const lastIdx = updated.length - 1;
+          if (lastIdx >= 0 && updated[lastIdx].role === 'assistant' && !updated[lastIdx].content.trim()) {
+            updated[lastIdx] = { role: 'assistant', content: `__error__${t.ask.stopped}` };
+          }
+          return updated;
+        });
+      } else {
+        const errMsg = err instanceof Error ? err.message : 'Something went wrong';
+        session.setMessages(prev => {
+          const updated = [...prev];
+          const lastIdx = updated.length - 1;
+          if (lastIdx >= 0 && updated[lastIdx].role === 'assistant' && !updated[lastIdx].content.trim()) {
+            updated[lastIdx] = { role: 'assistant', content: `__error__${errMsg}` };
+            return updated;
+          }
+          return [...updated, { role: 'assistant', content: `__error__${errMsg}` }];
+        });
+      }
+    } finally {
+      setIsLoading(false);
+      abortRef.current = null;
+    }
+  }, [input, session, isLoading, currentFile, attachedFiles, upload.localAttachments, mention.mentionQuery, maxSteps, t.ask.errorNoResponse, t.ask.stopped]);
+
+  const handleResetSession = useCallback(() => {
+    if (isLoading) return;
+    session.resetSession();
+    setInput('');
+    setAttachedFiles(currentFile ? [currentFile] : []);
+    upload.clearAttachments();
+    mention.resetMention();
+    setShowHistory(false);
+    setTimeout(() => inputRef.current?.focus(), 0);
+  }, [isLoading, currentFile, session, upload, mention]);
+
+  const handleLoadSession = useCallback((id: string) => {
+    session.loadSession(id);
+    setShowHistory(false);
+    setInput('');
+    setAttachedFiles(currentFile ? [currentFile] : []);
+    upload.clearAttachments();
+    mention.resetMention();
+    setTimeout(() => inputRef.current?.focus(), 0);
+  }, [session, currentFile, upload, mention]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-end md:items-start justify-center md:pt-[10vh] modal-backdrop"
+      onClick={(e) => e.target === e.currentTarget && onClose()}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label={t.ask.title}
+        className="w-full md:max-w-2xl md:mx-4 bg-card border-t md:border border-border rounded-t-2xl md:rounded-xl shadow-2xl flex flex-col h-[92vh] md:h-auto md:max-h-[75vh]"
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
+          {/* Mobile drag indicator */}
+          <div className="absolute top-2 left-1/2 -translate-x-1/2 w-8 h-1 rounded-full bg-muted-foreground/20 md:hidden" />
+          <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+            <Sparkles size={15} style={{ color: 'var(--amber)' }} />
+            <span style={{ fontFamily: "'IBM Plex Mono', monospace" }}>{t.ask.title}</span>
+            {currentFile && (
+              <span className="text-xs text-muted-foreground font-normal truncate max-w-[200px]">
+                — {currentFile.split('/').pop()}
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-1">
+            <button type="button" onClick={() => setShowHistory(v => !v)} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title="Session history">
+              <History size={14} />
+            </button>
+            <button type="button" onClick={handleResetSession} disabled={isLoading} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors disabled:opacity-40" title="New session">
+              <RotateCcw size={14} />
+            </button>
+            <button onClick={onClose} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors">
+              <X size={15} />
+            </button>
+          </div>
+        </div>
+
+        {showHistory && (
+          <SessionHistory
+            sessions={session.sessions}
+            activeSessionId={session.activeSessionId}
+            onLoad={handleLoadSession}
+            onDelete={session.deleteSession}
+          />
+        )}
+
+        {/* Messages */}
+        <MessageList
+          messages={session.messages}
+          isLoading={isLoading}
+          loadingPhase={loadingPhase}
+          emptyPrompt={t.ask.emptyPrompt}
+          suggestions={t.ask.suggestions}
+          onSuggestionClick={setInput}
+          labels={{ connecting: t.ask.connecting, thinking: t.ask.thinking, generating: t.ask.generating }}
+        />
+
+        {/* Input area */}
+        <div className="border-t border-border shrink-0">
+          {/* Attached file chips */}
+          {attachedFiles.length > 0 && (
+            <div className="px-4 pt-2.5 pb-1">
+              <div className="text-[11px] text-muted-foreground/70 mb-1.5">Knowledge Base Context</div>
+              <div className="flex flex-wrap gap-1.5">
+                {attachedFiles.map(f => (
+                  <FileChip key={f} path={f} onRemove={() => setAttachedFiles(prev => prev.filter(x => x !== f))} />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {upload.localAttachments.length > 0 && (
+            <div className="px-4 pb-1">
+              <div className="text-[11px] text-muted-foreground/70 mb-1.5">Uploaded Files</div>
+              <div className="flex flex-wrap gap-1.5">
+                {upload.localAttachments.map((f, idx) => (
+                  <FileChip key={`${f.name}-${idx}`} path={f.name} variant="upload" onRemove={() => upload.removeAttachment(idx)} />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {upload.uploadError && (
+            <div className="px-4 pb-1 text-xs text-red-400">{upload.uploadError}</div>
+          )}
+
+          {/* @-mention dropdown */}
+          {mention.mentionQuery !== null && mention.mentionResults.length > 0 && (
+            <MentionPopover
+              results={mention.mentionResults}
+              selectedIndex={mention.mentionIndex}
+              onSelect={selectMention}
+            />
+          )}
+
+          <form onSubmit={handleSubmit} className="flex items-center gap-2 px-3 py-3">
+            <button type="button" onClick={() => upload.uploadInputRef.current?.click()} className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0" title="Attach local file">
+              <Paperclip size={15} />
+            </button>
+
+            <input
+              ref={upload.uploadInputRef}
+              type="file"
+              className="hidden"
+              multiple
+              accept=".txt,.md,.markdown,.csv,.json,.yaml,.yml,.xml,.html,.htm,.pdf,text/plain,text/markdown,text/csv,application/json,application/pdf"
+              onChange={async (e) => {
+                const inputEl = e.currentTarget;
+                await upload.pickFiles(inputEl.files);
+                inputEl.value = '';
+              }}
+            />
+
+            <button
+              type="button"
+              onClick={() => {
+                const el = inputRef.current;
+                if (!el) return;
+                const pos = el.selectionStart ?? input.length;
+                const newVal = input.slice(0, pos) + '@' + input.slice(pos);
+                handleInputChange(newVal);
+                setTimeout(() => { el.focus(); el.setSelectionRange(pos + 1, pos + 1); }, 0);
+              }}
+              className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0"
+              title="@ mention file"
+            >
+              <AtSign size={15} />
+            </button>
+
+            <input
+              ref={inputRef}
+              value={input}
+              onChange={e => handleInputChange(e.target.value)}
+              onKeyDown={handleInputKeyDown}
+              placeholder={t.ask.placeholder}
+              disabled={isLoading}
+              className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none disabled:opacity-50"
+            />
+
+            {isLoading ? (
+              <button type="button" onClick={handleStop} className="p-1.5 rounded-md transition-colors shrink-0 text-muted-foreground hover:text-foreground hover:bg-muted" title={t.ask.stopTitle}>
+                <StopCircle size={15} />
+              </button>
+            ) : (
+              <button type="submit" disabled={!input.trim()} className="p-1.5 rounded-md disabled:opacity-40 disabled:cursor-not-allowed transition-opacity shrink-0" style={{ background: 'var(--amber)', color: '#131210' }}>
+                <Send size={14} />
+              </button>
+            )}
+          </form>
+        </div>
+
+        {/* Footer hint — desktop only */}
+        <div className="hidden md:flex px-4 pb-2 items-center gap-3 text-xs text-muted-foreground/50 shrink-0">
+          <span><kbd className="font-mono">↵</kbd> {t.ask.send}</span>
+          <span><kbd className="font-mono">@</kbd> {t.ask.attachFile}</span>
+          <span className="inline-flex items-center gap-1">
+            <span>Agent steps</span>
+            <select value={maxSteps} onChange={(e) => setMaxSteps(Number(e.target.value))} disabled={isLoading} className="bg-transparent border border-border rounded px-1.5 py-0.5 text-[11px] text-foreground">
+              <option value={10}>10</option>
+              <option value={20}>20</option>
+              <option value={30}>30</option>
+            </select>
+          </span>
+          <span><kbd className="font-mono">ESC</kbd> {t.search.close}</span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/app/components/Backlinks.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { Link as LinkIcon, FileText } from 'lucide-react';
+import { useLocale } from '@/lib/LocaleContext';
+import { apiFetch } from '@/lib/api';
+import type { BacklinkItem } from '@/lib/types';
+
+export default function Backlinks({ filePath }: { filePath: string }) {
+  const [backlinks, setBacklinks] = useState<BacklinkItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const { t } = useLocale();
+
+  useEffect(() => {
+    setLoading(true);
+    apiFetch<BacklinkItem[]>(`/api/backlinks?path=${encodeURIComponent(filePath)}`)
+      .then(data => {
+        setBacklinks(Array.isArray(data) ? data : []);
+        setLoading(false);
+      })
+      .catch(() => {
+        setBacklinks([]);
+        setLoading(false);
+      });
+  }, [filePath]);
+
+  if (!loading && backlinks.length === 0) return null;
+
+  return (
+    <div className="mt-12 pt-8 border-t border-border">
+      <div className="flex items-center gap-2 mb-6 text-muted-foreground">
+        <LinkIcon size={16} className="text-amber-500/70" />
+        <h3 className="text-sm font-semibold tracking-wider uppercase" style={{ fontFamily: "'IBM Plex Mono', monospace" }}>
+          {t.common?.relatedFiles || 'Related Files'}
+        </h3>
+        <span className="text-xs bg-muted px-1.5 py-0.5 rounded-full font-mono">
+          {backlinks.length}
+        </span>
+      </div>
+
+      <div className="grid gap-3">
+        {loading ? (
+          <div className="space-y-3">
+            {[1, 2].map(i => (
+              <div key={i} className="h-20 bg-muted/30 rounded-lg animate-pulse" />
+            ))}
+          </div>
+        ) : (
+          backlinks.map((link) => (
+            <Link
+              key={link.filePath}
+              href={`/view/${link.filePath.split('/').map(encodeURIComponent).join('/')}`}
+              className="group block p-4 rounded-xl border border-border/50 bg-card/30 hover:bg-muted/30 hover:border-amber-500/30 transition-all duration-200"
+            >
+              <div className="flex items-start gap-3">
+                <div className="mt-1 p-1.5 rounded-md bg-muted group-hover:bg-amber-500/10 transition-colors">
+                  <FileText size={14} className="text-muted-foreground group-hover:text-amber-500" />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="font-medium text-sm text-foreground group-hover:text-amber-500 transition-colors truncate mb-1">
+                    {link.filePath}
+                  </div>
+                  <div className="text-xs text-muted-foreground line-clamp-2 leading-relaxed italic opacity-80 group-hover:opacity-100 transition-opacity">
+                    {link.snippets[0] || ''}
+                  </div>
+                </div>
+              </div>
+            </Link>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

package/app/components/Breadcrumb.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import Link from 'next/link';
+import { ChevronRight, Home } from 'lucide-react';
+
+export default function Breadcrumb({ filePath }: { filePath: string }) {
+  const parts = filePath.split('/');
+  return (
+    <nav className="flex items-center gap-1 text-xs text-muted-foreground flex-wrap" style={{ fontFamily: "'IBM Plex Mono', monospace" }}>
+      <Link href="/" className="hover:text-foreground transition-colors">
+        <Home size={14} />
+      </Link>
+      {parts.map((part, i) => {
+        const isLast = i === parts.length - 1;
+        const href = '/view/' + parts.slice(0, i + 1).map(encodeURIComponent).join('/');
+        return (
+          <span key={i} className="flex items-center gap-1">
+            <ChevronRight size={12} className="text-muted-foreground/50" />
+            {isLast ? (
+              <span className="text-foreground font-medium" suppressHydrationWarning>{part}</span>
+            ) : (
+              <Link href={href} className="hover:text-foreground transition-colors truncate max-w-[200px]" suppressHydrationWarning>
+                {part}
+              </Link>
+            )}
+          </span>
+        );
+      })}
+    </nav>
+  );
+}