@geminilight/mindos 0.5.20 → 0.5.21

package/app/components/settings/PluginsTab.tsx

@@ -2,12 +2,8 @@
 
 import { Puzzle } from 'lucide-react';
 import { getAllRenderers, setRendererEnabled } from '@/lib/renderers/registry';
-
-interface PluginsTabProps {
-  pluginStates: Record<string, boolean>;
-  setPluginStates: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
-  t: any;
-}
+import { Toggle } from './Primitives';
+import type { PluginsTabProps } from './types';
 
 export function PluginsTab({ pluginStates, setPluginStates, t }: PluginsTabProps) {
   return (
@@ -58,28 +54,9 @@ export function PluginsTab({ pluginStates, setPluginStates, t }: PluginsTabProps
                   </div>
 
                   {isCore ? (
-                    <span
-                      className="shrink-0 w-9 h-5 rounded-full bg-amber-600 relative cursor-not-allowed opacity-60"
-                      title={t.settings.plugins.coreHint ?? 'Core renderer — always enabled'}
-                    >
-                      <span className="absolute top-[3px] left-[18px] w-3.5 h-3.5 rounded-full shadow-sm bg-white" />
-                    </span>
+                    <Toggle checked={true} disabled />
                   ) : (
-                    <button
-                      onClick={() => {
-                        const next = !enabled;
-                        setRendererEnabled(renderer.id, next);
-                        setPluginStates(s => ({ ...s, [renderer.id]: next }));
-                      }}
-                      role="switch"
-                      aria-checked={enabled}
-                      className={`shrink-0 w-9 h-5 rounded-full transition-colors relative ${enabled ? 'bg-amber-600' : 'bg-muted border border-border'}`}
-                      title={enabled ? t.settings.plugins.enabled : t.settings.plugins.disabled}
-                    >
-                      <span
-                        className={`absolute top-[3px] w-3.5 h-3.5 rounded-full shadow-sm transition-all ${enabled ? 'left-[18px] bg-white' : 'left-[3px] bg-muted-foreground/50'}`}
-                      />
-                    </button>
+                    <Toggle checked={enabled} onChange={(next) => { setRendererEnabled(renderer.id, next); setPluginStates(s => ({ ...s, [renderer.id]: next })); }} title={enabled ? t.settings.plugins.enabled : t.settings.plugins.disabled} />
                   )}
                 </div>
               </div>

package/app/components/settings/Primitives.tsx

@@ -39,6 +39,50 @@ export function EnvBadge({ overridden }: { overridden: boolean }) {
   );
 }
 
+/**
+ * 🟢 MINOR #6: Toggle component with aria accessibility
+ * @param {boolean} checked - Toggle state
+ * @param {function} onChange - Called when toggle state changes (if no onClick provided)
+ * @param {string} size - 'sm' (h-4 w-7) or 'md' (h-5 w-9)
+ * @param {boolean} disabled - Disable toggle
+ * @param {string} title - Tooltip text
+ * @param {function} onClick - Custom click handler (takes priority over onChange). Call onChange directly if needed.
+ *
+ * Usage:
+ * - Basic: `<Toggle checked={x} onChange={setX} />`
+ * - With custom handler: `<Toggle checked={x} onClick={(e) => { e.stopPropagation(); await save(); }} />`
+ * - In lists: Use `onClick` to prevent event bubbling; manually call `onChange` for state sync
+ */
+export function Toggle({ checked, onChange, size = 'md', disabled, title, onClick }: {
+  checked: boolean;
+  onChange?: (checked: boolean) => void;
+  size?: 'sm' | 'md';
+  disabled?: boolean;
+  title?: string;
+  onClick?: (e: React.MouseEvent) => void;
+}) {
+  const sm = size === 'sm';
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      title={title}
+      onClick={onClick ?? (() => onChange?.(!checked))}
+      className={`relative inline-flex shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60 ${
+        sm ? 'h-4 w-7' : 'h-5 w-9'
+      } ${checked ? 'bg-amber-500' : 'bg-muted'}`}
+    >
+      <span
+        className={`pointer-events-none inline-block rounded-full bg-white shadow-sm transition-transform ${
+          sm ? 'h-3 w-3' : 'h-4 w-4'
+        } ${checked ? (sm ? 'translate-x-3' : 'translate-x-4') : 'translate-x-0'}`}
+      />
+    </button>
+  );
+}
+
 export function ApiKeyInput({ value, onChange, placeholder, disabled }: {
   value: string;
   onChange: (v: string) => void;
@@ -58,3 +102,28 @@ export function ApiKeyInput({ value, onChange, placeholder, disabled }: {
     />
   );
 }
+
+/**
+ * 💡 SUGGESTION #10: Unified primary button primitive for amber actions
+ * Replaces inline `style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}` pattern
+ */
+export function PrimaryButton({ children, disabled, onClick, type = 'button', className = '', ...props }: {
+  children: React.ReactNode;
+  disabled?: boolean;
+  onClick?: () => void;
+  type?: 'button' | 'submit';
+  className?: string;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${className}`}
+      style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

package/app/components/settings/ShortcutsTab.tsx

@@ -1,13 +1,11 @@
 'use client';
 
-interface ShortcutsTabProps {
-  t: any;
-}
+import type { ShortcutsTabProps } from './types';
 
 export function ShortcutsTab({ t }: ShortcutsTabProps) {
   return (
     <div className="space-y-1">
-      {t.shortcuts.map((s: { description: string; keys: string[] }, i: number) => (
+      {t.shortcuts.map((s: { readonly description: string; readonly keys: readonly string[] }, i: number) => (
         <div key={i} className="flex items-center justify-between py-2.5 border-b border-border last:border-0">
           <span className="text-sm text-foreground">{s.description}</span>
           <div className="flex items-center gap-1">

package/app/components/settings/SyncTab.tsx

@@ -2,26 +2,12 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { RefreshCw, AlertCircle, CheckCircle2, Loader2, GitBranch, ExternalLink, Eye, EyeOff } from 'lucide-react';
-import { SectionLabel } from './Primitives';
+import { SectionLabel, PrimaryButton } from './Primitives';
 import { apiFetch } from '@/lib/api';
+import type { SyncStatus, SyncTabProps } from './types';
+import type { Messages } from '@/lib/i18n';
 
-export interface SyncStatus {
-  enabled: boolean;
-  provider?: string;
-  remote?: string;
-  branch?: string;
-  lastSync?: string | null;
-  lastPull?: string | null;
-  unpushed?: string;
-  conflicts?: Array<{ file: string; time: string }>;
-  lastError?: string | null;
-  autoCommitInterval?: number;
-  autoPullInterval?: number;
-}
-
-interface SyncTabProps {
-  t: any;
-}
+export { SyncStatus }; // Re-export for backward compatibility
 
 export function timeAgo(iso: string | null | undefined): string {
   if (!iso) return 'never';
@@ -40,7 +26,7 @@ function isValidGitUrl(url: string): 'https' | 'ssh' | false {
   return false;
 }
 
-function SyncEmptyState({ t, onInitComplete }: { t: any; onInitComplete: () => void }) {
+function SyncEmptyState({ t, onInitComplete }: { t: Messages; onInitComplete: () => void }) {
   const syncT = t.settings?.sync;
 
   const [remoteUrl, setRemoteUrl] = useState('');
@@ -169,18 +155,16 @@ function SyncEmptyState({ t, onInitComplete }: { t: any; onInitComplete: () => v
       </div>
 
       {/* Connect button */}
-      <button
-        type="button"
+      <PrimaryButton
         onClick={handleConnect}
         disabled={!isValid || connecting}
-        className="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-        style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
+        className="flex items-center gap-2"
       >
         {connecting && <Loader2 size={14} className="animate-spin" />}
         {connecting
           ? (syncT?.connecting ?? 'Connecting...')
           : (syncT?.connectButton ?? 'Connect & Start Sync')}
-      </button>
+      </PrimaryButton>
 
       {/* Error */}
       {error && (

package/app/components/settings/types.ts

@@ -1,4 +1,5 @@
-import type { Locale } from '@/lib/i18n';
+import type { Locale, Messages } from '@/lib/i18n';
+import type React from 'react';
 
 export interface ProviderConfig {
   apiKey: string;
@@ -32,7 +33,7 @@ export interface SettingsData {
   envValues?: Record<string, string>;
 }
 
-export type Tab = 'ai' | 'appearance' | 'knowledge' | 'mcp' | 'plugins' | 'shortcuts' | 'sync';
+export type Tab = 'ai' | 'appearance' | 'knowledge' | 'mcp' | 'plugins' | 'sync';
 
 export const CONTENT_WIDTHS = [
   { value: '680px', label: 'Narrow (680px)' },
@@ -47,3 +48,116 @@ export const FONTS = [
   { value: 'geist', label: 'Geist', style: { fontFamily: 'var(--font-geist-sans), sans-serif' } },
   { value: 'ibm-plex-mono', label: 'IBM Plex Mono (mono)', style: { fontFamily: "'IBM Plex Mono', monospace" } },
 ];
+
+/* ── MCP Types ────────────────────────────────────────────────── */
+
+export interface McpStatus {
+  running: boolean;
+  transport: string;
+  endpoint: string;
+  port: number;
+  toolCount: number;
+  authConfigured: boolean;
+}
+
+export interface AgentInfo {
+  key: string;
+  name: string;
+  present: boolean;
+  installed: boolean;
+  scope?: string;
+  transport?: string;
+  configPath?: string;
+  hasProjectScope: boolean;
+  hasGlobalScope: boolean;
+  preferredTransport: 'stdio' | 'http';
+  // Snippet generation fields
+  format: 'json' | 'toml';
+  configKey: string;
+  globalNestedKey?: string;
+  globalPath: string;
+  projectPath?: string | null;
+}
+
+export interface SkillInfo {
+  name: string;
+  description: string;
+  path: string;
+  source: 'builtin' | 'user';
+  enabled: boolean;
+  editable: boolean;
+}
+
+/** 🟢 MINOR #7: Moved from SyncTab.tsx for consistency */
+export interface SyncStatus {
+  enabled: boolean;
+  provider?: string;
+  remote?: string;
+  branch?: string;
+  lastSync?: string | null;
+  lastPull?: string | null;
+  unpushed?: string;
+  conflicts?: Array<{ file: string; time: string }>;
+  lastError?: string | null;
+  autoCommitInterval?: number;
+  autoPullInterval?: number;
+}
+
+export interface McpTabProps {
+  t: Messages;
+}
+
+export interface AppearanceTabProps {
+  font: string;
+  setFont: (v: string) => void;
+  contentWidth: string;
+  setContentWidth: (v: string) => void;
+  dark: boolean;
+  setDark: (v: boolean) => void;
+  locale: Locale;
+  setLocale: (v: Locale) => void;
+  t: Messages;
+}
+
+export interface AiTabProps {
+  data: SettingsData;
+  updateAi: (patch: Partial<AiSettings>) => void;
+  updateAgent: (patch: Partial<AgentSettings>) => void;
+  t: Messages;
+}
+
+export interface KnowledgeTabProps {
+  data: SettingsData;
+  setData: React.Dispatch<React.SetStateAction<SettingsData | null>>;
+  t: Messages;
+}
+
+export interface PluginsTabProps {
+  pluginStates: Record<string, boolean>;
+  setPluginStates: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+  t: Messages;
+}
+
+export interface SyncTabProps {
+  t: Messages;
+}
+
+export interface McpServerStatusProps {
+  status: McpStatus | null;
+  agents: AgentInfo[];
+  t: Messages;
+}
+
+export interface McpAgentInstallProps {
+  agents: AgentInfo[];
+  t: Messages;
+  onRefresh: () => void;
+}
+
+export interface McpSkillsSectionProps {
+  t: Messages;
+}
+
+export interface ShortcutsTabProps {
+  t: Messages;
+}