@geminilight/mindos 0.5.34 → 0.5.35

package/app/components/AskFab.tsx

@@ -27,7 +27,7 @@ export default function AskFab({ onToggle, askPanelOpen }: AskFabProps) {
         ${askPanelOpen ? 'opacity-0 pointer-events-none translate-y-2' : 'opacity-100 translate-y-0'}
       `}
       style={{
-        background: 'linear-gradient(135deg, #b07c2e 0%, #c8873a 50%, #d4943f 100%)',
+        background: 'linear-gradient(135deg, var(--amber), color-mix(in srgb, var(--amber) 80%, white))',
       }}
       title="MindOS Agent (⌘/)"
       aria-label="MindOS Agent"

package/app/components/GuideCard.tsx

@@ -15,6 +15,10 @@ const DIR_ICONS: Record<string, string> = {
 
 const EMPTY_FILES = ['INSTRUCTION.md', 'README.md', 'CONFIG.json'];
 
+/* Shared amber-subtle background — used as inline style because Tailwind can't handle
+   CSS var() with fallback in arbitrary values: bg-[var(--amber-subtle,rgba(...))] breaks. */
+const amberSubtleBg = 'var(--amber-subtle, rgba(200,135,30,0.08))';
+
 interface GuideCardProps {
   /** Called when user clicks a file/dir to open it in FileView */
   onNavigate?: (path: string) => void;
@@ -39,7 +43,6 @@ export default function GuideCard({ onNavigate }: GuideCardProps) {
           setGuideState(gs);
           if (gs.step1Done) setBrowsedCount(1);
         } else {
-          // Guide inactive or dismissed — clear local state
           setGuideState(null);
         }
       })
@@ -49,13 +52,9 @@ export default function GuideCard({ onNavigate }: GuideCardProps) {
   useEffect(() => {
     fetchGuideState();
 
-    // Listen for walkthrough-triggered first visit (WalkthroughProvider owns ?welcome=1 detection)
-    const handleFirstVisit = () => {
-      setIsFirstVisit(true);
-    };
+    const handleFirstVisit = () => { setIsFirstVisit(true); };
     window.addEventListener('mindos:first-visit', handleFirstVisit);
 
-    // Re-fetch when guide state is updated (e.g. after AskFab patches askedAI)
     const handleGuideUpdate = () => fetchGuideState();
     window.addEventListener('focus', handleGuideUpdate);
     window.addEventListener('guide-state-updated', handleGuideUpdate);
@@ -66,14 +65,12 @@ export default function GuideCard({ onNavigate }: GuideCardProps) {
     };
   }, [fetchGuideState]);
 
-  // Auto-expand KB task on first visit
   useEffect(() => {
     if (isFirstVisit && guideState && !guideState.step1Done) {
       setExpanded('kb');
     }
   }, [isFirstVisit, guideState]);
 
-  // Patch guideState to backend
   const patchGuide = useCallback((patch: Partial<GuideState>) => {
     setGuideState(prev => prev ? { ...prev, ...patch } : prev);
     fetch('/api/setup', {
@@ -93,7 +90,6 @@ export default function GuideCard({ onNavigate }: GuideCardProps) {
     if (browsedCount === 0) {
       setBrowsedCount(1);
       patchGuide({ step1Done: true });
-      // Collapse after a beat
       setTimeout(() => setExpanded(null), 300);
     }
   }, [browsedCount, patchGuide, onNavigate]);
@@ -109,8 +105,6 @@ export default function GuideCard({ onNavigate }: GuideCardProps) {
     const isEmpty = gs?.template === 'empty';
     const prompt = isEmpty ? g.ai.promptEmpty : g.ai.prompt;
     openAskModal(prompt, 'guide');
-    // Don't optimistically set askedAI here — wait until user actually sends a message
-    // AskFab.onFirstMessage will PATCH askedAI:true
   }, [guideState, g]);
 
   const handleNextStepClick = useCallback(() => {
@@ -119,13 +113,11 @@ export default function GuideCard({ onNavigate }: GuideCardProps) {
     const steps = g.done.steps;
     if (idx < steps.length) {
       openAskModal(steps[idx].prompt, 'guide-next');
-      // Optimistic local update — AskFab will persist to backend on first message
       patchGuide({ nextStepIndex: idx + 1 });
     }
   }, [guideState, g, patchGuide]);
 
   const handleSyncClick = useCallback(() => {
-    // Dispatch ⌘, to open Settings modal
     window.dispatchEvent(new KeyboardEvent('keydown', { key: ',', metaKey: true, bubbles: true }));
   }, []);
 
@@ -144,10 +136,8 @@ export default function GuideCard({ onNavigate }: GuideCardProps) {
     return () => { if (autoDismissRef.current) clearTimeout(autoDismissRef.current); };
   }, [allNextDone_, handleDismiss]);
 
-  // Don't render if no active guide
   if (!guideState) return null;
 
-  // Hide GuideCard while walkthrough is active
   const walkthroughActive = guideState.walkthroughStep !== undefined
     && guideState.walkthroughStep >= 0
     && guideState.walkthroughStep < walkthroughSteps.length
@@ -165,21 +155,19 @@ export default function GuideCard({ onNavigate }: GuideCardProps) {
   // After all next-steps done → final state (auto-dismisses after 8s)
   if (allDone && allNextDone) {
     return (
-      <div className="mb-6 rounded-xl border px-5 py-4 flex items-center gap-3 animate-in fade-in duration-300"
-        style={{ background: 'var(--amber-subtle, rgba(200,135,30,0.08))', borderColor: 'var(--amber)' }}>
-        <Sparkles size={16} className="animate-spin-slow" style={{ color: 'var(--amber)' }} />
-        <span className="text-sm font-semibold flex-1" style={{ color: 'var(--foreground)' }}>
+      <div className="mb-6 rounded-xl border border-[var(--amber)] px-5 py-4 flex items-center gap-3 animate-in fade-in duration-300"
+        style={{ background: amberSubtleBg }}>
+        <Sparkles size={16} className="animate-spin-slow text-[var(--amber)]" />
+        <span className="text-sm font-semibold flex-1 text-foreground">
           ✨ {g.done.titleFinal}
         </span>
         <Link
           href="/explore"
-          className="text-xs font-medium transition-colors hover:opacity-80"
-          style={{ color: 'var(--amber)' }}
+          className="text-xs font-medium text-[var(--amber)] transition-colors hover:opacity-80"
         >
           {t.walkthrough.exploreCta}
         </Link>
-        <button onClick={handleDismiss} className="p-1 rounded hover:bg-muted transition-colors"
-          style={{ color: 'var(--muted-foreground)' }}>
+        <button onClick={handleDismiss} className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground">
           <X size={14} />
         </button>
       </div>
@@ -190,23 +178,21 @@ export default function GuideCard({ onNavigate }: GuideCardProps) {
   if (allDone) {
     const step = nextSteps[nextIdx];
     return (
-      <div className="mb-6 rounded-xl border px-5 py-4 animate-in fade-in duration-300"
-        style={{ background: 'var(--amber-subtle, rgba(200,135,30,0.08))', borderColor: 'var(--amber)' }}>
+      <div className="mb-6 rounded-xl border border-[var(--amber)] px-5 py-4 animate-in fade-in duration-300"
+        style={{ background: amberSubtleBg }}>
         <div className="flex items-center gap-3">
-          <Sparkles size={16} style={{ color: 'var(--amber)' }} />
-          <span className="text-sm font-semibold flex-1" style={{ color: 'var(--foreground)' }}>
+          <Sparkles size={16} className="text-[var(--amber)]" />
+          <span className="text-sm font-semibold flex-1 text-foreground">
             🎉 {g.done.title}
           </span>
-          <button onClick={handleDismiss} className="p-1 rounded hover:bg-muted transition-colors"
-            style={{ color: 'var(--muted-foreground)' }}>
+          <button onClick={handleDismiss} className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground">
             <X size={14} />
           </button>
         </div>
         {step && (
           <button
             onClick={handleNextStepClick}
-            className="mt-3 flex items-center gap-2 text-sm transition-colors hover:opacity-80 cursor-pointer animate-in fade-in slide-in-from-left-2 duration-300"
-            style={{ color: 'var(--amber)' }}
+            className="mt-3 flex items-center gap-2 text-sm text-[var(--amber)] transition-colors hover:opacity-80 cursor-pointer animate-in fade-in slide-in-from-left-2 duration-300"
           >
             <ChevronRight size={14} />
             <span>{step.hint}</span>
@@ -218,60 +204,32 @@ export default function GuideCard({ onNavigate }: GuideCardProps) {
 
   // Main guide card with 3 tasks
   return (
-    <div className="mb-6 rounded-xl border overflow-hidden"
-      style={{ background: 'var(--amber-subtle, rgba(200,135,30,0.08))', borderColor: 'var(--amber)' }}>
+    <div className="mb-6 rounded-xl border border-[var(--amber)] overflow-hidden"
+      style={{ background: amberSubtleBg }}>
 
       {/* Header */}
       <div className="flex items-center gap-3 px-5 pt-4 pb-2">
-        <Sparkles size={16} style={{ color: 'var(--amber)' }} />
-        <span className="text-sm font-semibold flex-1 font-display" style={{ color: 'var(--foreground)' }}>
+        <Sparkles size={16} className="text-[var(--amber)]" />
+        <span className="text-sm font-semibold flex-1 font-display text-foreground">
           {g.title}
         </span>
-        <button onClick={handleDismiss} className="p-1 rounded hover:bg-muted transition-colors"
-          style={{ color: 'var(--muted-foreground)' }}>
+        <button onClick={handleDismiss} className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground">
           <X size={14} />
         </button>
       </div>
 
       {/* Task cards */}
       <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 px-5 py-3">
-        {/* ① Explore KB */}
-        <TaskCard
-          icon={<FolderOpen size={16} />}
-          title={g.kb.title}
-          cta={g.kb.cta}
-          done={step1Done}
-          active={expanded === 'kb'}
-          onClick={() => step1Done ? null : setExpanded(expanded === 'kb' ? null : 'kb')}
-        />
-        {/* ② Chat with AI */}
-        <TaskCard
-          icon={<MessageCircle size={16} />}
-          title={g.ai.title}
-          cta={g.ai.cta}
-          done={step2Done}
-          active={expanded === 'ai'}
-          onClick={() => {
-            if (!step2Done) handleStartAI();
-          }}
-        />
-        {/* ③ Sync (optional) */}
-        <TaskCard
-          icon={<RefreshCw size={16} />}
-          title={g.sync.title}
-          cta={g.sync.cta}
-          done={false}
-          optional={g.sync.optional}
-          active={false}
-          onClick={handleSyncClick}
-        />
+        <TaskCard icon={<FolderOpen size={16} />} title={g.kb.title} cta={g.kb.cta} done={step1Done} active={expanded === 'kb'} onClick={() => step1Done ? null : setExpanded(expanded === 'kb' ? null : 'kb')} />
+        <TaskCard icon={<MessageCircle size={16} />} title={g.ai.title} cta={g.ai.cta} done={step2Done} active={expanded === 'ai'} onClick={() => { if (!step2Done) handleStartAI(); }} />
+        <TaskCard icon={<RefreshCw size={16} />} title={g.sync.title} cta={g.sync.cta} done={false} optional={g.sync.optional} active={false} onClick={handleSyncClick} />
       </div>
 
       {/* Expanded content: Explore KB */}
       {expanded === 'kb' && !step1Done && (
         <div className="px-5 pb-4 animate-in slide-in-from-top-2 duration-200">
-          <div className="rounded-lg border p-4" style={{ background: 'var(--card)', borderColor: 'var(--border)' }}>
-            <p className="text-xs mb-3" style={{ color: 'var(--muted-foreground)' }}>
+          <div className="rounded-lg border border-border bg-card p-4">
+            <p className="text-xs mb-3 text-muted-foreground">
               {isEmptyTemplate ? g.kb.emptyDesc : g.kb.fullDesc}
             </p>
 
@@ -279,12 +237,11 @@ export default function GuideCard({ onNavigate }: GuideCardProps) {
               <div className="flex flex-col gap-1.5">
                 {EMPTY_FILES.map(file => (
                   <button key={file} onClick={() => handleFileOpen(file)}
-                    className="text-left text-xs px-3 py-2 rounded-lg border transition-colors hover:border-amber-500/30 hover:bg-muted/50"
-                    style={{ borderColor: 'var(--border)', color: 'var(--foreground)' }}>
+                    className="text-left text-xs px-3 py-2 rounded-lg border border-border text-foreground transition-colors hover:border-amber-500/30 hover:bg-muted/50">
                     📄 {(g.kb.emptyFiles as Record<string, string>)[file.split('.')[0].toLowerCase()] || file}
                   </button>
                 ))}
-                <p className="text-xs mt-2" style={{ color: 'var(--muted-foreground)', opacity: 0.7 }}>
+                <p className="text-xs mt-2 text-muted-foreground opacity-70">
                   {g.kb.emptyHint}
                 </p>
               </div>
@@ -293,29 +250,27 @@ export default function GuideCard({ onNavigate }: GuideCardProps) {
                 <div className="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
                   {Object.entries(DIR_ICONS).map(([key, icon]) => (
                     <button key={key} onClick={() => handleFileOpen(key.charAt(0).toUpperCase() + key.slice(1))}
-                      className="text-left text-xs px-3 py-2 rounded-lg border transition-colors hover:border-amber-500/30 hover:bg-muted/50"
-                      style={{ borderColor: 'var(--border)', color: 'var(--foreground)' }}>
+                      className="text-left text-xs px-3 py-2 rounded-lg border border-border text-foreground transition-colors hover:border-amber-500/30 hover:bg-muted/50">
                       <span className="mr-1.5">{icon}</span>
                       <span className="capitalize">{key}</span>
-                      <span className="block text-2xs mt-0.5" style={{ color: 'var(--muted-foreground)' }}>
+                      <span className="block text-2xs mt-0.5 text-muted-foreground">
                         {(g.kb.dirs as Record<string, string>)[key]}
                       </span>
                     </button>
                   ))}
                 </div>
-                <p className="text-xs mt-3" style={{ color: 'var(--amber)' }}>
+                <p className="text-xs mt-3 text-[var(--amber)]">
                   💡 {g.kb.instructionHint}
                 </p>
               </>
             )}
 
-            <div className="flex items-center justify-between mt-3 pt-3" style={{ borderTop: '1px solid var(--border)' }}>
-              <span className="text-xs" style={{ color: 'var(--muted-foreground)' }}>
+            <div className="flex items-center justify-between mt-3 pt-3 border-t border-border">
+              <span className="text-xs text-muted-foreground">
                 {g.kb.progress(browsedCount)}
               </span>
               <button onClick={handleSkipKB}
-                className="text-xs px-3 py-1 rounded-lg transition-colors hover:bg-muted"
-                style={{ color: 'var(--muted-foreground)' }}>
+                className="text-xs px-3 py-1 rounded-lg text-muted-foreground transition-colors hover:bg-muted">
                 {g.skip}
               </button>
             </div>
@@ -326,10 +281,8 @@ export default function GuideCard({ onNavigate }: GuideCardProps) {
   );
 }
 
-// Expose callback for AskModal integration
 export { type GuideCardProps };
 
-// Reusable sub-component
 function TaskCard({ icon, title, cta, done, active, optional, onClick }: {
   icon: React.ReactNode;
   title: string;
@@ -348,25 +301,22 @@ function TaskCard({ icon, title, cta, done, active, optional, onClick }: {
         transition-all duration-150
         ${done ? 'opacity-60' : 'hover:border-amber-500/30 hover:bg-muted/50 cursor-pointer'}
         ${active ? 'border-amber-500/40 bg-muted/50' : ''}
+        ${done || active ? 'border-[var(--amber)]' : 'border-border'}
       `}
-      style={{ borderColor: done || active ? 'var(--amber)' : 'var(--border)' }}
     >
-      <span
-        className={done ? 'animate-in zoom-in-50 duration-300' : ''}
-        style={{ color: done ? 'var(--success)' : 'var(--amber)' }}
-      >
+      <span className={`${done ? 'animate-in zoom-in-50 duration-300 text-success' : 'text-[var(--amber)]'}`}>
         {done ? <Check size={16} /> : icon}
       </span>
-      <span className="text-xs font-medium" style={{ color: 'var(--foreground)' }}>
+      <span className="text-xs font-medium text-foreground">
         {title}
       </span>
       {optional && (
-        <span className="text-2xs px-1.5 py-0.5 rounded-full" style={{ background: 'var(--muted)', color: 'var(--muted-foreground)' }}>
+        <span className="text-2xs px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">
           {optional}
         </span>
       )}
       {!done && !optional && (
-        <span className="text-2xs" style={{ color: 'var(--amber)' }}>
+        <span className="text-2xs text-[var(--amber)]">
           {cta} →
         </span>
       )}

package/app/components/HomeContent.tsx

@@ -52,8 +52,7 @@ export default function HomeContent({ recent, existingFiles }: { recent: RecentF
   const formatTime = (mtime: number) => relativeTime(mtime, t.home.relativeTime);
 
   // Only show renderers that are available (have entryPath + file exists) as quick-access chips
-  const renderers = getAllRenderers().filter(r => r.entryPath);
-  const availablePlugins = renderers.filter(r => r.entryPath && existingSet.has(r.entryPath));
+  const availablePlugins = getAllRenderers().filter(r => r.entryPath && existingSet.has(r.entryPath));
 
   const lastFile = recent[0];
 
@@ -63,38 +62,29 @@ export default function HomeContent({ recent, existingFiles }: { recent: RecentF
       {/* Hero */}
       <div className="mb-10">
         <div className="flex items-center gap-2 mb-3">
-          <div className="w-1 h-5 rounded-full" style={{ background: 'var(--amber)' }} />
-          <h1 className="text-2xl font-semibold tracking-tight font-display" style={{ color: 'var(--foreground)' }}>
+          <div className="w-1 h-5 rounded-full bg-[var(--amber)]" />
+          <h1 className="text-2xl font-semibold tracking-tight font-display text-foreground">
             MindOS
           </h1>
         </div>
-        <p className="text-sm leading-relaxed mb-5" style={{ color: 'var(--muted-foreground)', paddingLeft: '1rem' }}>
+        <p className="text-sm leading-relaxed mb-5 text-muted-foreground pl-4">
           {t.app.tagline}
         </p>
 
         {/* AI-first command bar */}
-        <div
-          className="w-full max-w-[620px] flex flex-col sm:flex-row items-stretch sm:items-center gap-2"
-          style={{
-            marginLeft: '1rem',
-          }}
-        >
+        <div className="w-full max-w-[620px] flex flex-col sm:flex-row items-stretch sm:items-center gap-2 ml-4">
           {/* Ask AI (primary) */}
           <button
             onClick={triggerAsk}
             title="⌘/"
             data-walkthrough="ask-button"
-            className="flex-1 flex items-center gap-3 px-4 py-3 rounded-xl border transition-all duration-150 hover:border-amber-500/50 hover:bg-amber-500/8"
-            style={{ background: 'var(--card)', borderColor: 'var(--border)' }}
+            className="flex-1 flex items-center gap-3 px-4 py-3 rounded-xl border border-border bg-card transition-all duration-150 hover:border-amber-500/50 hover:bg-amber-500/8"
           >
-            <Sparkles size={15} style={{ color: 'var(--amber)' }} className="shrink-0" />
-            <span className="text-sm flex-1 text-left" style={{ color: 'var(--foreground)' }}>
+            <Sparkles size={15} className="shrink-0 text-[var(--amber)]" />
+            <span className="text-sm flex-1 text-left text-foreground" aria-live="polite" aria-atomic="true">
               {suggestions[suggestionIdx]}
             </span>
-            <kbd
-              className="hidden sm:inline-flex items-center gap-0.5 px-2 py-0.5 rounded text-xs font-mono font-medium"
-              style={{ background: 'var(--amber-dim)', color: 'var(--amber)' }}
-            >
+            <kbd className="hidden sm:inline-flex items-center gap-0.5 px-2 py-0.5 rounded text-xs font-mono font-medium bg-[var(--amber-dim)] text-[var(--amber)]">
               ⌘/
             </kbd>
           </button>
@@ -103,27 +93,22 @@ export default function HomeContent({ recent, existingFiles }: { recent: RecentF
           <button
             onClick={triggerSearch}
             title="⌘K"
-            className="flex items-center gap-2 px-3 py-3 rounded-xl border text-sm transition-colors shrink-0 hover:bg-muted"
-            style={{ borderColor: 'var(--border)', color: 'var(--muted-foreground)' }}
+            className="flex items-center gap-2 px-3 py-3 rounded-xl border border-border text-sm text-muted-foreground transition-colors shrink-0 hover:bg-muted"
           >
             <Search size={14} />
             <span className="hidden sm:inline">{t.home.shortcuts.searchFiles}</span>
-            <kbd className="hidden sm:inline-flex items-center px-1.5 py-0.5 rounded text-2xs font-mono" style={{ background: 'var(--muted)' }}>
+            <kbd className="hidden sm:inline-flex items-center px-1.5 py-0.5 rounded text-2xs font-mono bg-muted">
               ⌘K
             </kbd>
           </button>
         </div>
 
         {/* Quick Actions */}
-        <div className="flex flex-wrap gap-2.5 mt-4" style={{ paddingLeft: '1rem' }}>
+        <div className="flex flex-wrap gap-2.5 mt-4 pl-4">
           {lastFile && (
             <Link
               href={`/view/${encodePath(lastFile.path)}`}
-              className="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg text-sm font-medium transition-all duration-150 hover:translate-x-0.5"
-              style={{
-                background: 'var(--amber-dim)',
-                color: 'var(--amber)',
-              }}
+              className="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg text-sm font-medium transition-all duration-150 hover:translate-x-0.5 bg-[var(--amber-dim)] text-[var(--amber)]"
             >
               <ArrowRight size={14} />
               <span>{t.home.continueEditing}</span>
@@ -134,21 +119,14 @@ export default function HomeContent({ recent, existingFiles }: { recent: RecentF
           )}
           <Link
             href="/view/Untitled.md"
-            className="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg text-sm font-medium transition-colors"
-            style={{
-              background: 'var(--muted)',
-              color: 'var(--muted-foreground)',
-            }}
+            className="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg text-sm font-medium transition-colors bg-muted text-muted-foreground"
           >
             <FilePlus size={14} />
             <span>{t.home.newNote}</span>
           </Link>
           <Link
             href="/explore"
-            className="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg text-sm font-medium transition-all duration-150 hover:translate-x-0.5"
-            style={{
-              color: 'var(--amber)',
-            }}
+            className="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg text-sm font-medium transition-all duration-150 hover:translate-x-0.5 text-[var(--amber)]"
           >
             <Compass size={14} />
             <span>{t.explore.title}</span>
@@ -157,13 +135,12 @@ export default function HomeContent({ recent, existingFiles }: { recent: RecentF
 
         {/* Plugin quick-access chips — only show available plugins */}
         {availablePlugins.length > 0 && (
-          <div className="flex flex-wrap gap-1.5 mt-3" style={{ paddingLeft: '1rem' }}>
+          <div className="flex flex-wrap gap-1.5 mt-3 pl-4">
             {availablePlugins.map(r => (
               <Link
                 key={r.id}
                 href={`/view/${encodePath(r.entryPath!)}`}
-                className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 hover:bg-muted/60"
-                style={{ color: 'var(--muted-foreground)' }}
+                className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs text-muted-foreground transition-all duration-100 hover:bg-muted/60"
               >
                 <span className="text-sm leading-none" suppressHydrationWarning>{r.icon}</span>
                 <span>{r.name}</span>
@@ -182,15 +159,15 @@ export default function HomeContent({ recent, existingFiles }: { recent: RecentF
         return (
         <section className="mb-12">
           <div className="flex items-center gap-2 mb-5">
-            <Clock size={13} style={{ color: 'var(--amber)' }} />
-            <h2 className="text-xs font-semibold uppercase tracking-[0.08em] font-display" style={{ color: 'var(--muted-foreground)' }}>
+            <Clock size={13} className="text-[var(--amber)]" />
+            <h2 className="text-xs font-semibold uppercase tracking-[0.08em] font-display text-muted-foreground">
               {t.home.recentlyModified}
             </h2>
           </div>
 
           <div className="relative pl-4">
             {/* Timeline line */}
-            <div className="absolute left-0 top-1 bottom-1 w-px" style={{ background: 'var(--border)' }} />
+            <div className="absolute left-0 top-1 bottom-1 w-px bg-border" />
 
             <div className="flex flex-col gap-0.5">
               {visibleRecent.map(({ path: filePath, mtime }, idx) => {
@@ -201,6 +178,7 @@ export default function HomeContent({ recent, existingFiles }: { recent: RecentF
                   <div key={filePath} className="relative group">
                     {/* Timeline dot */}
                     <div
+                      aria-hidden="true"
                       className={`absolute -left-4 top-1/2 -translate-y-1/2 rounded-full transition-all duration-150 group-hover:scale-150 ${idx === 0 ? 'w-2 h-2' : 'w-1.5 h-1.5'}`}
                       style={{
                         background: idx === 0 ? 'var(--amber)' : 'var(--border)',
@@ -212,14 +190,14 @@ export default function HomeContent({ recent, existingFiles }: { recent: RecentF
                       className="flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-100 group-hover:translate-x-0.5 hover:bg-muted"
                     >
                       {isCSV
-                        ? <Table size={13} className="shrink-0" style={{ color: 'var(--success)' }} />
-                        : <FileText size={13} className="shrink-0" style={{ color: 'var(--muted-foreground)' }} />
+                        ? <Table size={13} className="shrink-0 text-success" />
+                        : <FileText size={13} className="shrink-0 text-muted-foreground" />
                       }
                       <div className="flex-1 min-w-0">
-                        <span className="text-sm font-medium truncate block" style={{ color: 'var(--foreground)' }} suppressHydrationWarning>{name}</span>
-                        {dir && <span className="text-xs truncate block" style={{ color: 'var(--muted-foreground)', opacity: 0.6 }} suppressHydrationWarning>{dir}</span>}
+                        <span className="text-sm font-medium truncate block text-foreground" suppressHydrationWarning>{name}</span>
+                        {dir && <span className="text-xs truncate block text-muted-foreground opacity-60" suppressHydrationWarning>{dir}</span>}
                       </div>
-                      <span className="text-xs shrink-0 tabular-nums font-display" style={{ color: 'var(--muted-foreground)', opacity: 0.5 }} suppressHydrationWarning>
+                      <span className="text-xs shrink-0 tabular-nums font-display text-muted-foreground opacity-50" suppressHydrationWarning>
                         {formatTime(mtime)}
                       </span>
                     </Link>
@@ -233,8 +211,7 @@ export default function HomeContent({ recent, existingFiles }: { recent: RecentF
               <button
                 onClick={() => setShowAll(v => !v)}
                 aria-expanded={showAll}
-                style={{ color: 'var(--amber)' }}
-                className="flex items-center gap-1.5 mt-2 ml-3 text-xs font-medium transition-colors hover:opacity-80 cursor-pointer font-display"
+                className="flex items-center gap-1.5 mt-2 ml-3 text-xs font-medium text-[var(--amber)] transition-colors hover:opacity-80 cursor-pointer font-display"
               >
                 <ChevronDown
                   size={12}
@@ -250,8 +227,8 @@ export default function HomeContent({ recent, existingFiles }: { recent: RecentF
       })()}
 
       {/* Footer */}
-      <div className="mt-16 flex items-center gap-1.5 text-xs font-display" style={{ color: 'var(--muted-foreground)', opacity: 0.6 }}>
-        <Sparkles size={10} style={{ color: 'var(--amber)' }} />
+      <div className="mt-16 flex items-center gap-1.5 text-xs font-display text-muted-foreground opacity-60">
+        <Sparkles size={10} className="text-[var(--amber)]" />
         <span>{t.app.footer}</span>
       </div>
     </div>

package/app/components/OnboardingView.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { Sparkles, Globe, BookOpen, FileText, Loader2, GitBranch } from 'lucide-react';
+import { Sparkles, Globe, BookOpen, FileText, Loader2, GitBranch, AlertCircle } from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
 
 type Template = 'en' | 'zh' | 'empty';
@@ -33,11 +33,13 @@ export default function OnboardingView() {
   const { t } = useLocale();
   const router = useRouter();
   const [loading, setLoading] = useState<Template | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
   const ob = t.onboarding;
 
   async function handleSelect(template: Template) {
     setLoading(template);
+    setError(null);
     try {
       const res = await fetch('/api/init', {
         method: 'POST',
@@ -51,6 +53,7 @@ export default function OnboardingView() {
       router.refresh();
     } catch (e) {
       console.error('[Onboarding] init failed:', e);
+      setError(e instanceof Error ? e.message : 'Unknown error');
       setLoading(null);
     }
   }
@@ -60,22 +63,33 @@ export default function OnboardingView() {
       {/* Header */}
       <div className="text-center mb-10">
         <div className="inline-flex items-center gap-2 mb-4">
-          <Sparkles size={18} style={{ color: 'var(--amber)' }} />
-          <h1
-            className="text-2xl font-semibold tracking-tight font-display"
-            style={{ color: 'var(--foreground)' }}
-          >
+          <Sparkles size={18} className="text-[var(--amber)]" />
+          <h1 className="text-2xl font-semibold tracking-tight font-display text-foreground">
             MindOS
           </h1>
         </div>
-        <p
-          className="text-sm leading-relaxed max-w-md mx-auto"
-          style={{ color: 'var(--muted-foreground)' }}
-        >
+        <p className="text-sm leading-relaxed max-w-md mx-auto text-muted-foreground">
           {ob.subtitle}
         </p>
       </div>
 
+      {/* Error banner */}
+      {error && (
+        <div
+          role="alert"
+          className="max-w-2xl mx-auto mb-6 flex items-center gap-2.5 px-4 py-3 rounded-lg border border-destructive/30 bg-destructive/5 text-sm text-destructive"
+        >
+          <AlertCircle size={16} className="shrink-0" />
+          <span className="flex-1">{ob.initError ?? 'Initialization failed. Please try again.'} ({error})</span>
+          <button
+            onClick={() => setError(null)}
+            className="text-xs underline shrink-0 hover:opacity-80"
+          >
+            {ob.dismiss ?? 'Dismiss'}
+          </button>
+        </div>
+      )}
+
       {/* Template cards */}
       <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-2xl mx-auto mb-10">
         {TEMPLATES.map((tpl) => {
@@ -86,37 +100,26 @@ export default function OnboardingView() {
               key={tpl.id}
               disabled={isDisabled}
               onClick={() => handleSelect(tpl.id)}
-              className="group relative flex flex-col items-start gap-3 p-5 rounded-xl border text-left transition-all duration-150 hover:border-amber-500/50 hover:bg-amber-500/5 disabled:opacity-60 disabled:cursor-not-allowed"
-              style={{ background: 'var(--card)', borderColor: 'var(--border)' }}
+              className="group relative flex flex-col items-start gap-3 p-5 rounded-xl border border-border bg-card text-left transition-all duration-150 hover:border-amber-500/50 hover:bg-amber-500/5 disabled:opacity-60 disabled:cursor-not-allowed"
             >
               {/* Icon + title */}
               <div className="flex items-center gap-2.5 w-full">
-                <span style={{ color: 'var(--amber)' }}>{tpl.icon}</span>
-                <span
-                  className="text-sm font-semibold"
-                  style={{ color: 'var(--foreground)' }}
-                >
+                <span className="text-[var(--amber)]">{tpl.icon}</span>
+                <span className="text-sm font-semibold text-foreground">
                   {ob.templates[tpl.id].title}
                 </span>
                 {isLoading && (
-                  <Loader2 size={14} className="animate-spin ml-auto" style={{ color: 'var(--amber)' }} />
+                  <Loader2 size={14} className="animate-spin ml-auto text-[var(--amber)]" />
                 )}
               </div>
 
               {/* Description */}
-              <p className="text-xs leading-relaxed" style={{ color: 'var(--muted-foreground)' }}>
+              <p className="text-xs leading-relaxed text-muted-foreground">
                 {ob.templates[tpl.id].desc}
               </p>
 
               {/* Directory preview */}
-              <div
-                className="w-full rounded-lg px-3 py-2 text-xs leading-relaxed font-display"
-                style={{
-                  background: 'var(--muted)',
-                  color: 'var(--muted-foreground)',
-                  opacity: 0.8,
-                }}
-              >
+              <div className="w-full rounded-lg px-3 py-2 text-xs leading-relaxed font-display bg-muted text-muted-foreground opacity-80">
                 {tpl.dirs.map((d) => (
                   <div key={d}>{d}</div>
                 ))}
@@ -127,27 +130,18 @@ export default function OnboardingView() {
       </div>
 
       {/* Import hint */}
-      <p
-        className="text-center text-xs leading-relaxed max-w-sm mx-auto font-display"
-        style={{ color: 'var(--muted-foreground)', opacity: 0.6 }}
-      >
+      <p className="text-center text-xs leading-relaxed max-w-sm mx-auto font-display text-muted-foreground opacity-60">
         {ob.importHint}
       </p>
 
       {/* Sync hint card */}
-      <div
-        className="max-w-md mx-auto mt-6 flex items-center gap-3 px-4 py-3 rounded-lg border text-left"
-        style={{ borderColor: 'var(--border)', background: 'var(--card)' }}
-      >
-        <GitBranch size={16} style={{ color: 'var(--muted-foreground)', flexShrink: 0 }} />
+      <div className="max-w-md mx-auto mt-6 flex items-center gap-3 px-4 py-3 rounded-lg border border-border bg-card text-left">
+        <GitBranch size={16} className="text-muted-foreground shrink-0" />
         <div className="min-w-0">
-          <p className="text-xs" style={{ color: 'var(--muted-foreground)' }}>
+          <p className="text-xs text-muted-foreground">
             {ob.syncHint ?? 'Want cross-device sync? Run'}
             {' '}
-            <code
-              className="font-mono px-1 py-0.5 rounded select-all"
-              style={{ background: 'var(--muted)', fontSize: '11px' }}
-            >
+            <code className="font-mono px-1 py-0.5 rounded select-all bg-muted text-[11px]">
               mindos sync init
             </code>
             {' '}

package/app/lib/i18n-en.ts

@@ -419,6 +419,8 @@ export const en = {
     importHint: 'Already have notes? Set MIND_ROOT to your existing directory in Settings.',
     syncHint: 'Want cross-device sync? Run',
     syncHintSuffix: 'in the terminal after setup.',
+    initError: 'Initialization failed. Please try again.',
+    dismiss: 'Dismiss',
   },
   shortcuts: [
     { keys: ['⌘', 'K'], description: 'Search' },

package/app/lib/i18n-zh.ts

@@ -444,6 +444,8 @@ export const zh = {
     importHint: '已有笔记？在设置中将 MIND_ROOT 指向已有目录即可。',
     syncHint: '需要跨设备同步？完成初始化后在终端运行',
     syncHintSuffix: '即可。',
+    initError: '初始化失败，请重试。',
+    dismiss: '关闭',
   },
   shortcuts: [
     { keys: ['⌘', 'K'], description: '搜索' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geminilight/mindos",
-  "version": "0.5.34",
+  "version": "0.5.35",
   "description": "MindOS — Human-Agent Collaborative Mind System. Local-first knowledge base that syncs your mind to all AI Agents via MCP.",
   "keywords": [
     "mindos",