@geminilight/mindos 0.5.42 → 0.5.44

package/app/components/explore/use-cases.ts

@@ -1,30 +1,58 @@
-export type UseCaseCategory = 'getting-started' | 'cross-agent' | 'knowledge-evolution' | 'advanced';
+/** Capability axis — maps to product pillars */
+export type UseCaseCategory = 'knowledge-management' | 'memory-sync' | 'auto-execute' | 'experience-evolution' | 'human-insights' | 'audit-control';
+
+/** Scenario axis — maps to user journey phase */
+export type UseCaseScenario = 'first-day' | 'daily' | 'project' | 'advanced';
 
 export interface UseCase {
   id: string;
   icon: string;
   category: UseCaseCategory;
+  scenario: UseCaseScenario;
 }
 
 /**
  * C1-C9 use case definitions.
  * All display text (title, description, prompt) comes from i18n — this file is structure only.
+ *
+ * Category (capability axis):
+ *   knowledge-management — Inject, organize, and maintain knowledge
+ *   memory-sync         — Record once, all Agents know
+ *   auto-execute        — One sentence, auto-execute
+ *   experience-evolution — Gets smarter with use
+ *   human-insights      — Understand and manage relationships
+ *   audit-control       — You have final say
+ *
+ * Scenario (journey axis):
+ *   first-day — Onboarding / first-time tasks
+ *   daily     — Everyday workflows
+ *   project   — Project-scoped work
+ *   advanced  — Power-user patterns
  */
 export const useCases: UseCase[] = [
-  { id: 'c1', icon: '👤', category: 'getting-started' },
-  { id: 'c2', icon: '📥', category: 'getting-started' },
-  { id: 'c3', icon: '🔄', category: 'cross-agent' },
-  { id: 'c4', icon: '🔁', category: 'knowledge-evolution' },
-  { id: 'c5', icon: '💡', category: 'cross-agent' },
-  { id: 'c6', icon: '🚀', category: 'cross-agent' },
-  { id: 'c7', icon: '🔍', category: 'knowledge-evolution' },
-  { id: 'c8', icon: '🤝', category: 'knowledge-evolution' },
-  { id: 'c9', icon: '🛡️', category: 'advanced' },
+  { id: 'c1', icon: '👤', category: 'memory-sync',           scenario: 'first-day' },
+  { id: 'c2', icon: '📥', category: 'knowledge-management',  scenario: 'daily' },
+  { id: 'c3', icon: '🔄', category: 'memory-sync',           scenario: 'project' },
+  { id: 'c4', icon: '🔁', category: 'experience-evolution',  scenario: 'daily' },
+  { id: 'c5', icon: '💡', category: 'auto-execute',          scenario: 'daily' },
+  { id: 'c6', icon: '🚀', category: 'auto-execute',          scenario: 'project' },
+  { id: 'c7', icon: '🔍', category: 'knowledge-management',  scenario: 'project' },
+  { id: 'c8', icon: '🤝', category: 'human-insights',        scenario: 'daily' },
+  { id: 'c9', icon: '🛡️', category: 'audit-control',        scenario: 'advanced' },
 ];
 
 export const categories: UseCaseCategory[] = [
-  'getting-started',
-  'cross-agent',
-  'knowledge-evolution',
+  'knowledge-management',
+  'memory-sync',
+  'auto-execute',
+  'experience-evolution',
+  'human-insights',
+  'audit-control',
+];
+
+export const scenarios: UseCaseScenario[] = [
+  'first-day',
+  'daily',
+  'project',
   'advanced',
 ];

package/app/components/panels/DiscoverPanel.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { useState } from 'react';
 import Link from 'next/link';
-import { ChevronDown, ChevronRight, ExternalLink, Blocks, Zap } from 'lucide-react';
+import { Lightbulb, Blocks, Zap, LayoutTemplate, ChevronRight, User, Download, RefreshCw, Repeat, Rocket, Search, Handshake, ShieldCheck } from 'lucide-react';
 import PanelHeader from './PanelHeader';
 import { useLocale } from '@/lib/LocaleContext';
 import { useCases } from '@/components/explore/use-cases';
@@ -14,56 +13,61 @@ interface DiscoverPanelProps {
   onMaximize?: () => void;
 }
 
-/** Collapsible section with count badge */
-function Section({
+/** Navigation entry — clickable row linking to a page or showing coming soon */
+function NavEntry({
   icon,
   title,
-  count,
-  defaultOpen = true,
-  children,
+  badge,
+  href,
+  onClick,
 }: {
   icon: React.ReactNode;
   title: string;
-  count?: number;
-  defaultOpen?: boolean;
-  children: React.ReactNode;
+  badge?: React.ReactNode;
+  href?: string;
+  onClick?: () => void;
 }) {
-  const [open, setOpen] = useState(defaultOpen);
+  const content = (
+    <>
+      <span className="flex items-center justify-center w-7 h-7 rounded-md bg-muted shrink-0">{icon}</span>
+      <span className="text-sm font-medium text-foreground flex-1">{title}</span>
+      {badge}
+      <ChevronRight size={14} className="text-muted-foreground shrink-0" />
+    </>
+  );
+
+  const className = "flex items-center gap-3 px-4 py-2.5 hover:bg-muted/50 transition-colors cursor-pointer";
+
+  if (href) {
+    return <Link href={href} className={className}>{content}</Link>;
+  }
+  return <button onClick={onClick} className={`${className} w-full`}>{content}</button>;
+}
+
+/** Coming soon badge */
+function ComingSoonBadge({ label }: { label: string }) {
   return (
-    <div>
-      <button
-        onClick={() => setOpen(v => !v)}
-        className="flex items-center gap-2 w-full px-4 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider hover:text-foreground transition-colors"
-      >
-        {open ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
-        <span className="flex items-center gap-1.5">
-          {icon}
-          {title}
-        </span>
-        {count !== undefined && (
-          <span className="ml-auto text-2xs tabular-nums opacity-60">{count}</span>
-        )}
-      </button>
-      {open && <div className="pb-2">{children}</div>}
-    </div>
+    <span className="text-2xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground shrink-0">
+      {label}
+    </span>
   );
 }
 
-/** Compact use case row for panel display */
+/** Compact use case row */
 function UseCaseRow({
   icon,
   title,
   prompt,
   tryLabel,
 }: {
-  icon: string;
+  icon: React.ReactNode;
   title: string;
   prompt: string;
   tryLabel: string;
 }) {
   return (
-    <div className="group flex items-center gap-2 px-4 py-1.5 hover:bg-muted/50 transition-colors rounded-sm mx-1">
-      <span className="text-sm leading-none shrink-0" suppressHydrationWarning>{icon}</span>
+    <div className="group flex items-center gap-2.5 px-4 py-1.5 hover:bg-muted/50 transition-colors rounded-sm mx-1">
+      <span className="text-muted-foreground shrink-0">{icon}</span>
       <span className="text-xs text-foreground truncate flex-1">{title}</span>
       <button
         onClick={() => openAskModal(prompt, 'user')}
@@ -75,29 +79,18 @@ function UseCaseRow({
   );
 }
 
-/** Coming soon placeholder */
-function ComingSoonSection({
-  icon,
-  title,
-  description,
-  comingSoonLabel,
-}: {
-  icon: React.ReactNode;
-  title: string;
-  description: string;
-  comingSoonLabel: string;
-}) {
-  return (
-    <Section icon={icon} title={title} defaultOpen={false}>
-      <div className="px-4 py-3 mx-1">
-        <p className="text-xs text-muted-foreground leading-relaxed">{description}</p>
-        <span className="inline-block mt-2 text-2xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground">
-          {comingSoonLabel}
-        </span>
-      </div>
-    </Section>
-  );
-}
+/** Map use case id → lucide icon */
+const useCaseIcons: Record<string, React.ReactNode> = {
+  c1: <User size={12} />,          // Inject Identity
+  c2: <Download size={12} />,      // Save Information
+  c3: <RefreshCw size={12} />,     // Cross-Agent Handoff
+  c4: <Repeat size={12} />,        // Experience → SOP
+  c5: <Lightbulb size={12} />,     // Capture Ideas
+  c6: <Rocket size={12} />,        // Project Cold Start
+  c7: <Search size={12} />,        // Research & Archive
+  c8: <Handshake size={12} />,     // Network Management
+  c9: <ShieldCheck size={12} />,   // Audit & Correct
+};
 
 export default function DiscoverPanel({ active, maximized, onMaximize }: DiscoverPanelProps) {
   const { t } = useLocale();
@@ -117,54 +110,51 @@ export default function DiscoverPanel({ active, maximized, onMaximize }: Discove
     <div className={`flex flex-col h-full ${active ? '' : 'hidden'}`}>
       <PanelHeader title={d.title} maximized={maximized} onMaximize={onMaximize} />
       <div className="flex-1 overflow-y-auto min-h-0">
-        {/* Use Cases */}
-        <Section icon={<span className="text-xs" suppressHydrationWarning>🎯</span>} title={d.useCases} count={useCases.length}>
-          <div className="flex flex-col">
-            {useCases.map(uc => {
-              const data = getUseCaseText(uc.id);
-              if (!data) return null;
-              return (
-                <UseCaseRow
-                  key={uc.id}
-                  icon={uc.icon}
-                  title={data.title}
-                  prompt={data.prompt}
-                  tryLabel={d.tryIt}
-                />
-              );
-            })}
-          </div>
-        </Section>
-
-        <div className="mx-4 border-t border-border" />
-
-        {/* Plugin Market — Coming Soon */}
-        <ComingSoonSection
-          icon={<Blocks size={11} />}
-          title={d.pluginMarket}
-          description={d.pluginMarketDesc}
-          comingSoonLabel={d.comingSoon}
-        />
+        {/* Navigation entries */}
+        <div className="py-2">
+          <NavEntry
+            icon={<Lightbulb size={14} className="text-[var(--amber)]" />}
+            title={d.useCases}
+            badge={<span className="text-2xs tabular-nums text-muted-foreground">{useCases.length}</span>}
+            href="/explore"
+          />
+          <NavEntry
+            icon={<Blocks size={14} className="text-muted-foreground" />}
+            title={d.pluginMarket}
+            badge={<ComingSoonBadge label={d.comingSoon} />}
+          />
+          <NavEntry
+            icon={<Zap size={14} className="text-muted-foreground" />}
+            title={d.skillMarket}
+            badge={<ComingSoonBadge label={d.comingSoon} />}
+          />
+          <NavEntry
+            icon={<LayoutTemplate size={14} className="text-muted-foreground" />}
+            title={d.spaceTemplates}
+            badge={<ComingSoonBadge label={d.comingSoon} />}
+          />
+        </div>
 
         <div className="mx-4 border-t border-border" />
 
-        {/* Skill Market — Coming Soon */}
-        <ComingSoonSection
-          icon={<Zap size={11} />}
-          title={d.skillMarket}
-          description={d.skillMarketDesc}
-          comingSoonLabel={d.comingSoon}
-        />
-
-        {/* View all link */}
-        <div className="px-4 py-3 mt-2">
-          <Link
-            href="/explore"
-            className="inline-flex items-center gap-1.5 text-xs text-[var(--amber)] hover:opacity-80 transition-opacity"
-          >
-            {d.viewAll}
-            <ExternalLink size={11} />
-          </Link>
+        {/* Quick try — use case list */}
+        <div className="py-2">
+          <div className="px-4 py-1.5">
+            <span className="text-2xs font-medium text-muted-foreground uppercase tracking-wider">{d.useCases}</span>
+          </div>
+          {useCases.map(uc => {
+            const data = getUseCaseText(uc.id);
+            if (!data) return null;
+            return (
+              <UseCaseRow
+                key={uc.id}
+                icon={useCaseIcons[uc.id] || <Lightbulb size={12} />}
+                title={data.title}
+                prompt={data.prompt}
+                tryLabel={d.tryIt}
+              />
+            );
+          })}
         </div>
       </div>
     </div>

package/app/components/settings/AppearanceTab.tsx

@@ -1,112 +1,172 @@
 'use client';
 
 import { useState } from 'react';
-import { ChevronDown, ChevronRight } from 'lucide-react';
+import { ChevronDown, ChevronRight, Sun, Moon, Monitor, Type, Columns3, Globe } from 'lucide-react';
 import { Locale } from '@/lib/i18n';
 import { CONTENT_WIDTHS, FONTS, AppearanceTabProps } from './types';
-import { Field, Select } from './Primitives';
+
+/* ── Segmented Control ── */
+function SegmentedControl<T extends string>({ options, value, onChange }: {
+  options: { value: T; label: string; icon?: React.ReactNode }[];
+  value: T;
+  onChange: (v: T) => void;
+}) {
+  return (
+    <div className="flex rounded-lg border border-border bg-muted/30 p-0.5 gap-0.5">
+      {options.map(opt => (
+        <button
+          key={opt.value}
+          type="button"
+          onClick={() => onChange(opt.value)}
+          className={`flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-all ${
+            value === opt.value
+              ? 'bg-card text-foreground shadow-sm'
+              : 'text-muted-foreground hover:text-foreground'
+          }`}
+        >
+          {opt.icon}
+          {opt.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/* ── Setting Group ── */
+function SettingGroup({ icon, label, children }: { icon: React.ReactNode; label: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-2.5">
+      <div className="flex items-center gap-2">
+        <span className="text-muted-foreground">{icon}</span>
+        <span className="text-xs font-medium text-foreground">{label}</span>
+      </div>
+      {children}
+    </div>
+  );
+}
 
 export function AppearanceTab({ font, setFont, contentWidth, setContentWidth, dark, setDark, locale, setLocale, t }: AppearanceTabProps) {
   const [showShortcuts, setShowShortcuts] = useState(false);
+  const [themePref, setThemePref] = useState<string>(() =>
+    typeof window !== 'undefined' ? (localStorage.getItem('theme') ?? 'system') : 'system'
+  );
+  const [localePref, setLocalePref] = useState<string>(() =>
+    typeof window !== 'undefined' ? (localStorage.getItem('locale') ?? 'system') : 'system'
+  );
+  const a = t.settings.appearance;
 
   return (
-    <div className="space-y-5">
-      <Field label={t.settings.appearance.readingFont}>
-        <Select value={font} onChange={e => setFont(e.target.value)}>
+    <div className="space-y-6">
+      {/* Font */}
+      <SettingGroup icon={<Type size={14} />} label={a.readingFont}>
+        <div className="flex flex-wrap gap-1.5">
           {FONTS.map(f => (
-            <option key={f.value} value={f.value}>{f.label}</option>
+            <button
+              key={f.value}
+              type="button"
+              onClick={() => setFont(f.value)}
+              className={`px-3 py-1.5 text-xs rounded-lg border transition-all ${
+                font === f.value
+                  ? 'border-amber-500 bg-amber-500/10 text-foreground font-medium shadow-sm'
+                  : 'border-border text-muted-foreground hover:text-foreground hover:bg-muted'
+              }`}
+              style={{ fontFamily: f.style.fontFamily }}
+            >
+              {f.label}
+            </button>
           ))}
-        </Select>
-        <p className="text-xs text-muted-foreground mt-1.5 px-0.5" style={{ fontFamily: FONTS.find(f => f.value === font)?.style.fontFamily }}>
-          {t.settings.appearance.fontPreview}
+        </div>
+        <p
+          className="text-sm text-muted-foreground leading-relaxed px-0.5 mt-1"
+          style={{ fontFamily: FONTS.find(f => f.value === font)?.style.fontFamily }}
+        >
+          {a.fontPreview}
         </p>
-      </Field>
+      </SettingGroup>
 
-      <Field label={t.settings.appearance.contentWidth}>
-        <div className="grid grid-cols-2 gap-2">
+      {/* Content Width */}
+      <SettingGroup icon={<Columns3 size={14} />} label={a.contentWidth}>
+        <div className="flex flex-wrap gap-1.5">
           {CONTENT_WIDTHS.map(w => (
             <button
               key={w.value}
               type="button"
               onClick={() => setContentWidth(w.value)}
-              className={`px-3 py-2 text-sm rounded-lg border transition-colors text-left ${
+              className={`px-3 py-1.5 text-xs rounded-lg border transition-all ${
                 contentWidth === w.value
-                  ? 'border-amber-500 bg-amber-500/10 text-foreground'
-                  : 'border-border text-muted-foreground hover:border-border/80 hover:bg-muted'
+                  ? 'border-amber-500 bg-amber-500/10 text-foreground font-medium shadow-sm'
+                  : 'border-border text-muted-foreground hover:text-foreground hover:bg-muted'
               }`}
             >
               {w.label}
             </button>
           ))}
         </div>
-      </Field>
+      </SettingGroup>
 
-      <Field label={t.settings.appearance.colorTheme}>
-        <div className="grid grid-cols-2 gap-2">
-          {[
-            { value: 'dark', label: t.settings.appearance.dark },
-            { value: 'light', label: t.settings.appearance.light },
-          ].map(opt => (
-            <button
-              key={opt.value}
-              type="button"
-              onClick={() => {
-                const isDark = opt.value === 'dark';
-                setDark(isDark);
-                document.documentElement.classList.toggle('dark', isDark);
-                localStorage.setItem('theme', opt.value);
-              }}
-              className={`px-3 py-2 text-sm rounded-lg border transition-colors text-left ${
-                (opt.value === 'dark') === dark
-                  ? 'border-amber-500 bg-amber-500/10 text-foreground'
-                  : 'border-border text-muted-foreground hover:border-border/80 hover:bg-muted'
-              }`}
-            >
-              {opt.label}
-            </button>
-          ))}
-        </div>
-      </Field>
+      {/* Theme */}
+      <SettingGroup icon={<Sun size={14} />} label={a.colorTheme}>
+        <SegmentedControl
+          options={[
+            { value: 'system', label: a.system, icon: <Monitor size={12} /> },
+            { value: 'dark', label: a.dark, icon: <Moon size={12} /> },
+            { value: 'light', label: a.light, icon: <Sun size={12} /> },
+          ]}
+          value={themePref}
+          onChange={v => {
+            setThemePref(v);
+            localStorage.setItem('theme', v);
+            const isDark = v === 'system'
+              ? window.matchMedia('(prefers-color-scheme: dark)').matches
+              : v === 'dark';
+            setDark(isDark);
+            document.documentElement.classList.toggle('dark', isDark);
+          }}
+        />
+      </SettingGroup>
 
-      <Field label={t.settings.appearance.language}>
-        <div className="grid grid-cols-2 gap-2">
-          {([['en', 'English'], ['zh', '中文']] as [Locale, string][]).map(([code, label]) => (
-            <button
-              key={code}
-              type="button"
-              onClick={() => setLocale(code)}
-              className={`px-3 py-2 text-sm rounded-lg border transition-colors text-left ${
-                locale === code
-                  ? 'border-amber-500 bg-amber-500/10 text-foreground'
-                  : 'border-border text-muted-foreground hover:border-border/80 hover:bg-muted'
-              }`}
-            >
-              {label}
-            </button>
-          ))}
-        </div>
-      </Field>
+      {/* Language */}
+      <SettingGroup icon={<Globe size={14} />} label={a.language}>
+        <SegmentedControl
+          options={[
+            { value: 'system', label: a.system, icon: <Monitor size={12} /> },
+            { value: 'en', label: 'English' },
+            { value: 'zh', label: '中文' },
+          ]}
+          value={localePref}
+          onChange={v => {
+            setLocalePref(v);
+            localStorage.setItem('locale', v);
+            const resolved: Locale = v === 'system'
+              ? (navigator.language.startsWith('zh') ? 'zh' : 'en')
+              : v as Locale;
+            setLocale(resolved);
+            // Sync cookie for SSR (write resolved value, not 'system')
+            document.cookie = `locale=${resolved};path=/;max-age=31536000;SameSite=Lax`;
+          }}
+        />
+      </SettingGroup>
 
-      <p className="text-xs text-muted-foreground">{t.settings.appearance.browserNote}</p>
+      <p className="text-xs text-muted-foreground/60 px-0.5">{a.browserNote}</p>
 
       {/* Keyboard Shortcuts */}
       <div className="border-t border-border pt-4">
         <button
           type="button"
           onClick={() => setShowShortcuts(!showShortcuts)}
-          className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground uppercase tracking-wider hover:text-foreground transition-colors"
+          className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
         >
           {showShortcuts ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
           {t.settings.tabs.shortcuts}
         </button>
         {showShortcuts && (
-          <div className="mt-3 space-y-1">
+          <div className="mt-3 space-y-0.5">
             {t.shortcuts.map((s: { readonly description: string; readonly keys: readonly string[] }, i: number) => (
-              <div key={i} className="flex items-center justify-between py-2 border-b border-border last:border-0">
-                <span className="text-sm text-foreground">{s.description}</span>
+              <div key={i} className="flex items-center justify-between py-1.5 px-1">
+                <span className="text-xs text-foreground">{s.description}</span>
                 <div className="flex items-center gap-1">
                   {s.keys.map((k: string, j: number) => (
-                    <kbd key={j} className="px-2 py-0.5 text-xs font-mono bg-muted border border-border rounded text-foreground">{k}</kbd>
+                    <kbd key={j} className="px-1.5 py-0.5 text-2xs font-mono bg-muted border border-border rounded text-muted-foreground">{k}</kbd>
                   ))}
                 </div>
               </div>

package/app/components/settings/SettingsContent.tsx

@@ -153,8 +153,8 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
     { id: 'ai', label: t.settings.tabs.ai, icon: <Sparkles size={iconSize} /> },
     { id: 'mcp', label: t.settings.tabs.mcp ?? 'MCP & Skills', icon: <Plug size={iconSize} /> },
     { id: 'knowledge', label: t.settings.tabs.knowledge, icon: <Settings size={iconSize} /> },
-    { id: 'sync', label: t.settings.tabs.sync ?? 'Sync', icon: <RefreshCw size={iconSize} /> },
     { id: 'appearance', label: t.settings.tabs.appearance, icon: <Palette size={iconSize} /> },
+    { id: 'sync', label: t.settings.tabs.sync ?? 'Sync', icon: <RefreshCw size={iconSize} /> },
     { id: 'update', label: t.settings.tabs.update ?? 'Update', icon: <Download size={iconSize} />, badge: hasUpdate },
   ];