@geminilight/mindos 0.5.41 → 0.5.43

package/app/components/panels/DiscoverPanel.tsx

@@ -0,0 +1,172 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { ChevronDown, ChevronRight, ExternalLink, Blocks, Zap } from 'lucide-react';
+import PanelHeader from './PanelHeader';
+import { useLocale } from '@/lib/LocaleContext';
+import { useCases } from '@/components/explore/use-cases';
+import { openAskModal } from '@/hooks/useAskModal';
+
+interface DiscoverPanelProps {
+  active: boolean;
+  maximized?: boolean;
+  onMaximize?: () => void;
+}
+
+/** Collapsible section with count badge */
+function Section({
+  icon,
+  title,
+  count,
+  defaultOpen = true,
+  children,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  count?: number;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  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>
+  );
+}
+
+/** Compact use case row for panel display */
+function UseCaseRow({
+  icon,
+  title,
+  prompt,
+  tryLabel,
+}: {
+  icon: string;
+  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>
+      <span className="text-xs text-foreground truncate flex-1">{title}</span>
+      <button
+        onClick={() => openAskModal(prompt, 'user')}
+        className="opacity-0 group-hover:opacity-100 text-2xs px-2 py-0.5 rounded text-[var(--amber)] bg-[var(--amber-dim)] hover:opacity-80 transition-all duration-150 shrink-0"
+      >
+        {tryLabel}
+      </button>
+    </div>
+  );
+}
+
+/** 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>
+  );
+}
+
+export default function DiscoverPanel({ active, maximized, onMaximize }: DiscoverPanelProps) {
+  const { t } = useLocale();
+  const d = t.panels.discover;
+  const e = t.explore;
+
+  /** Type-safe lookup for use case i18n */
+  const getUseCaseText = (id: string): { title: string; prompt: string } | undefined => {
+    const map: Record<string, { title: string; desc: string; prompt: string }> = {
+      c1: e.c1, c2: e.c2, c3: e.c3, c4: e.c4, c5: e.c5,
+      c6: e.c6, c7: e.c7, c8: e.c8, c9: e.c9,
+    };
+    return map[id];
+  };
+
+  return (
+    <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}
+        />
+
+        <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>
+        </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

@@ -32,6 +32,24 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
   const [contentWidth, setContentWidth] = useState('780px');
   const [dark, setDark] = useState(true);
 
+  // Update available badge on Update tab
+  const [hasUpdate, setHasUpdate] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    const dismissed = localStorage.getItem('mindos_update_dismissed');
+    const latest = localStorage.getItem('mindos_update_latest');
+    return !!latest && latest !== dismissed;
+  });
+  useEffect(() => {
+    const onAvail = () => setHasUpdate(true);
+    const onDismiss = () => setHasUpdate(false);
+    window.addEventListener('mindos:update-available', onAvail);
+    window.addEventListener('mindos:update-dismissed', onDismiss);
+    return () => {
+      window.removeEventListener('mindos:update-available', onAvail);
+      window.removeEventListener('mindos:update-dismissed', onDismiss);
+    };
+  }, []);
+
   const isPanel = variant === 'panel';
 
   // Init data when becoming visible
@@ -131,13 +149,13 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
   const env = data?.envOverrides ?? {};
   const iconSize = isPanel ? 12 : 13;
 
-  const TABS: { id: Tab; label: string; icon: React.ReactNode }[] = [
+  const TABS: { id: Tab; label: string; icon: React.ReactNode; badge?: boolean }[] = [
     { 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: 'update', label: t.settings.tabs.update ?? 'Update', icon: <Download size={iconSize} /> },
+    { id: 'update', label: t.settings.tabs.update ?? 'Update', icon: <Download size={iconSize} />, badge: hasUpdate },
   ];
 
   const activeTabLabel = TABS.find(t2 => t2.id === tab)?.label ?? '';
@@ -233,6 +251,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
             >
               {tabItem.icon}
               {tabItem.label}
+              {tabItem.badge && <span className="w-1.5 h-1.5 rounded-full bg-error shrink-0" />}
             </button>
           ))}
         </div>
@@ -283,6 +302,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
             >
               {tabItem.icon}
               {tabItem.label}
+              {tabItem.badge && <span className="w-1.5 h-1.5 rounded-full bg-error shrink-0" />}
             </button>
           ))}
         </div>
@@ -314,6 +334,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
                 )}
                 {tabItem.icon}
                 {tabItem.label}
+                {tabItem.badge && <span className="ml-auto w-1.5 h-1.5 rounded-full bg-error shrink-0" />}
               </button>
             ))}
           </nav>

package/app/lib/LocaleContext.tsx

@@ -15,12 +15,22 @@ const LocaleContext = createContext<LocaleContextValue>({
   t: messages['en'],
 });
 
+/** Read locale from localStorage (canonical client source), resolving 'system' */
 function getLocaleSnapshot(): Locale {
   const saved = localStorage.getItem('locale');
-  return saved === 'zh' ? 'zh' : 'en';
+  if (saved === 'zh') return 'zh';
+  if (saved === 'en') return 'en';
+  // 'system' or null — detect from browser
+  return navigator.language.startsWith('zh') ? 'zh' : 'en';
 }
 
-export function LocaleProvider({ children }: { children: ReactNode }) {
+interface LocaleProviderProps {
+  children: ReactNode;
+  /** Locale read from cookie on the server — ensures SSR matches client hydration */
+  ssrLocale?: Locale;
+}
+
+export function LocaleProvider({ children, ssrLocale = 'en' }: LocaleProviderProps) {
   const locale = useSyncExternalStore(
     (onStoreChange) => {
       const listener = () => onStoreChange();
@@ -28,11 +38,13 @@ export function LocaleProvider({ children }: { children: ReactNode }) {
       return () => window.removeEventListener('mindos-locale-change', listener);
     },
     getLocaleSnapshot,
-    () => 'en' as Locale,
+    () => ssrLocale,
   );
 
   const setLocale = (l: Locale) => {
-    localStorage.setItem('locale', l);
+    // Only write resolved locale to cookie + html lang (not localStorage — caller manages that)
+    document.cookie = `locale=${l};path=/;max-age=31536000;SameSite=Lax`;
+    document.documentElement.lang = l === 'zh' ? 'zh' : 'en';
     window.dispatchEvent(new Event('mindos-locale-change'));
   };
 

package/app/lib/actions.ts

@@ -46,8 +46,9 @@ export async function renameFileAction(oldPath: string, newName: string): Promis
  */
 export async function createSpaceAction(
   name: string,
-  description: string
-): Promise<{ success: boolean; error?: string }> {
+  description: string,
+  parentPath: string = ''
+): Promise<{ success: boolean; path?: string; error?: string }> {
   try {
     const trimmed = name.trim();
     if (!trimmed) return { success: false, error: 'Space name is required' };
@@ -55,15 +56,25 @@ export async function createSpaceAction(
       return { success: false, error: 'Space name must not contain path separators' };
     }
 
+    // Sanitize parentPath — reject traversal attempts
+    const cleanParent = parentPath.replace(/\/+$/, '').trim();
+    if (cleanParent.includes('..') || cleanParent.startsWith('/') || cleanParent.includes('\\')) {
+      return { success: false, error: 'Invalid parent path' };
+    }
+
+    // Build full path: parentPath + name
+    const prefix = cleanParent ? cleanParent + '/' : '';
+    const fullPath = `${prefix}${trimmed}`;
+
     // Strip emoji for clean title in README content
     const cleanName = trimmed.replace(/^[\p{Emoji_Presentation}\p{Extended_Pictographic}\s]+/u, '') || trimmed;
     const desc = description.trim() || '(Describe the purpose and usage of this space.)';
-    const readmeContent = `# ${cleanName}\n\n${desc}\n\n## 📁 Structure\n\n\`\`\`bash\n${trimmed}/\n├── INSTRUCTION.md\n├── README.md\n└── (your files here)\n\`\`\`\n\n## 💡 Usage\n\n(Add usage guidelines for this space.)\n`;
+    const readmeContent = `# ${cleanName}\n\n${desc}\n\n## 📁 Structure\n\n\`\`\`bash\n${fullPath}/\n├── INSTRUCTION.md\n├── README.md\n└── (your files here)\n\`\`\`\n\n## 💡 Usage\n\n(Add usage guidelines for this space.)\n`;
 
     // createFile triggers scaffoldIfNewSpace → auto-generates INSTRUCTION.md
-    createFile(`${trimmed}/README.md`, readmeContent);
+    createFile(`${fullPath}/README.md`, readmeContent);
     revalidatePath('/', 'layout');
-    return { success: true };
+    return { success: true, path: fullPath };
   } catch (err) {
     const msg = err instanceof Error ? err.message : 'Failed to create space';
     // Make "already exists" error more user-friendly

package/app/lib/i18n-en.ts

@@ -16,14 +16,23 @@ export const en = {
     other: 'Other',
     newSpace: 'New Space',
     spaceName: 'Space name',
-    spaceDescription: 'What is this space for?',
+    spaceDescription: 'Description',
+    spaceDescPlaceholder: 'Describe the purpose of this space',
+    spaceNameNoSlash: 'Name cannot contain / or \\',
+    spaceExists: 'A space with this name already exists',
+    spaceCreateFailed: 'Failed to create space',
+    noSpacesYet: 'No spaces yet. Create one to organize your knowledge.',
+    spaceLocation: 'Location',
+    rootLevel: 'Root',
+    optional: 'optional',
     createSpace: 'Create',
     cancelCreate: 'Cancel',
     continueEditing: 'Continue editing',
     newNote: 'New Notes',
-    plugins: 'Plugins',
+    plugins: 'Extensions',
     showMore: 'Show more',
     showLess: 'Show less',
+    viewAll: 'View all',
     createToActivate: 'Create {file} to activate',
     shortcuts: {
       searchFiles: 'Search files',
@@ -47,6 +56,7 @@ export const en = {
     settingsTitle: 'Settings',
     plugins: 'Plugins',
     agents: 'Agents',
+    discover: 'Discover',
     syncLabel: 'Sync',
     collapseTitle: 'Collapse sidebar',
     expandTitle: 'Expand sidebar',
@@ -143,6 +153,18 @@ export const en = {
       noFile: 'Entry file not found',
       createFile: 'Create {file} to activate',
     },
+    discover: {
+      title: 'Discover',
+      useCases: 'Use Cases',
+      useCasesDesc: 'Try MindOS scenarios hands-on',
+      pluginMarket: 'Plugin Market',
+      pluginMarketDesc: 'Extend how files are rendered and edited',
+      skillMarket: 'Skill Market',
+      skillMarketDesc: 'Add new abilities to your AI agents',
+      comingSoon: 'Coming soon',
+      viewAll: 'View all use cases',
+      tryIt: 'Try',
+    },
   },
   shortcutPanel: {
     title: 'Keyboard Shortcuts',
@@ -175,6 +197,10 @@ export const en = {
     fileCount: (n: number) => `${n} files`,
     newFile: 'New file',
   },
+  view: {
+    saveDirectory: 'Directory',
+    saveFileName: 'File name',
+  },
   findInPage: {
     placeholder: 'Find in document…',
     matchCount: (current: number, total: number) => `${current} of ${total}`,
@@ -222,6 +248,7 @@ export const en = {
       readingFont: 'Reading font',
       contentWidth: 'Content width',
       colorTheme: 'Color theme',
+      system: 'System',
       dark: 'Dark',
       light: 'Light',
       language: 'Language',