@geminilight/mindos 0.5.20 → 0.5.22

package/app/components/settings/MonitoringTab.tsx

@@ -0,0 +1,202 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { Activity, Cpu, Database, HardDrive, Loader2, RefreshCw, Zap } from 'lucide-react';
+import { apiFetch } from '@/lib/api';
+import type { Messages } from '@/lib/i18n';
+
+interface MonitoringData {
+  system: {
+    uptimeMs: number;
+    memory: { heapUsed: number; heapTotal: number; rss: number };
+    nodeVersion: string;
+  };
+  application: {
+    agentRequests: number;
+    toolExecutions: number;
+    totalTokens: { input: number; output: number };
+    avgResponseTimeMs: number;
+    errors: number;
+  };
+  knowledgeBase: {
+    root: string;
+    fileCount: number;
+    totalSizeBytes: number;
+  };
+  mcp: {
+    running: boolean;
+    port: number;
+  };
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+}
+
+function formatUptime(ms: number): string {
+  const s = Math.floor(ms / 1000);
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ${s % 60}s`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h ${m % 60}m`;
+  const d = Math.floor(h / 24);
+  return `${d}d ${h % 24}h`;
+}
+
+function ProgressBar({ value, max, className }: { value: number; max: number; className?: string }) {
+  const pct = max > 0 ? Math.min(100, (value / max) * 100) : 0;
+  return (
+    <div className={`h-2 w-full rounded-full bg-muted ${className ?? ''}`}>
+      <div
+        className={`h-full rounded-full transition-all duration-300 ${pct > 85 ? 'bg-destructive' : 'bg-amber-500'}`}
+        style={{ width: `${pct}%` }}
+      />
+    </div>
+  );
+}
+
+function StatCard({ label, value, sub }: { label: string; value: string | number; sub?: string }) {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <span className="text-xs text-muted-foreground">{label}</span>
+      <span className="text-sm font-medium tabular-nums">{value}</span>
+      {sub && <span className="text-[10px] text-muted-foreground">{sub}</span>}
+    </div>
+  );
+}
+
+export interface MonitoringTabProps {
+  t: Messages;
+}
+
+export function MonitoringTab({ t }: MonitoringTabProps) {
+  const [data, setData] = useState<MonitoringData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  const mon = t.settings.monitoring;
+
+  const fetchData = useCallback(async () => {
+    try {
+      const d = await apiFetch<MonitoringData>('/api/monitoring', { timeout: 5000 });
+      setData(d);
+      setError(false);
+    } catch {
+      setError(true);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+    const id = setInterval(fetchData, 5000);
+    return () => clearInterval(id);
+  }, [fetchData]);
+
+  if (loading && !data) {
+    return (
+      <div className="flex justify-center py-8">
+        <Loader2 size={18} className="animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (error && !data) {
+    return (
+      <div className="text-center py-8 text-sm text-muted-foreground">
+        {mon.fetchError || 'Failed to load monitoring data'}
+      </div>
+    );
+  }
+
+  if (!data) return null;
+
+  const { system, application, knowledgeBase, mcp } = data;
+  const heapPct = system.memory.heapTotal > 0
+    ? Math.round((system.memory.heapUsed / system.memory.heapTotal) * 100)
+    : 0;
+
+  return (
+    <div className="space-y-6">
+      {/* System */}
+      <section>
+        <h3 className="flex items-center gap-1.5 text-xs font-semibold text-foreground mb-3">
+          <Cpu size={13} className="text-muted-foreground" />
+          {mon.system || 'System'}
+        </h3>
+        <div className="space-y-3">
+          <div>
+            <div className="flex justify-between text-xs mb-1">
+              <span className="text-muted-foreground">{mon.heapMemory || 'Heap Memory'}</span>
+              <span className="tabular-nums">{formatBytes(system.memory.heapUsed)} / {formatBytes(system.memory.heapTotal)} ({heapPct}%)</span>
+            </div>
+            <ProgressBar value={system.memory.heapUsed} max={system.memory.heapTotal} />
+          </div>
+          <div className="grid grid-cols-3 gap-4">
+            <StatCard label={mon.rss || 'RSS'} value={formatBytes(system.memory.rss)} />
+            <StatCard label={mon.uptime || 'Uptime'} value={formatUptime(system.uptimeMs)} />
+            <StatCard label={mon.nodeVersion || 'Node'} value={system.nodeVersion} />
+          </div>
+        </div>
+      </section>
+
+      {/* Application */}
+      <section>
+        <h3 className="flex items-center gap-1.5 text-xs font-semibold text-foreground mb-3">
+          <Zap size={13} className="text-muted-foreground" />
+          {mon.application || 'Application'}
+        </h3>
+        <div className="grid grid-cols-3 gap-4">
+          <StatCard label={mon.requests || 'Requests'} value={application.agentRequests} />
+          <StatCard label={mon.toolCalls || 'Tool Calls'} value={application.toolExecutions} />
+          <StatCard label={mon.avgResponse || 'Avg Response'} value={application.avgResponseTimeMs > 0 ? `${application.avgResponseTimeMs}ms` : '—'} />
+          <StatCard
+            label={mon.tokens || 'Tokens'}
+            value={`${(application.totalTokens.input + application.totalTokens.output).toLocaleString()}`}
+            sub={`↑${application.totalTokens.input.toLocaleString()} ↓${application.totalTokens.output.toLocaleString()}`}
+          />
+          <StatCard label={mon.errors || 'Errors'} value={application.errors} />
+        </div>
+      </section>
+
+      {/* Knowledge Base */}
+      <section>
+        <h3 className="flex items-center gap-1.5 text-xs font-semibold text-foreground mb-3">
+          <Database size={13} className="text-muted-foreground" />
+          {mon.knowledgeBase || 'Knowledge Base'}
+        </h3>
+        <div className="grid grid-cols-3 gap-4">
+          <StatCard label={mon.files || 'Files'} value={knowledgeBase.fileCount} />
+          <StatCard label={mon.totalSize || 'Total Size'} value={formatBytes(knowledgeBase.totalSizeBytes)} />
+          <StatCard label={mon.rootPath || 'Root'} value={knowledgeBase.root.split('/').pop() ?? knowledgeBase.root} sub={knowledgeBase.root} />
+        </div>
+      </section>
+
+      {/* MCP */}
+      <section>
+        <h3 className="flex items-center gap-1.5 text-xs font-semibold text-foreground mb-3">
+          <HardDrive size={13} className="text-muted-foreground" />
+          MCP
+        </h3>
+        <div className="grid grid-cols-3 gap-4">
+          <StatCard
+            label={mon.mcpStatus || 'Status'}
+            value={mcp.running ? (mon.mcpRunning || 'Running') : (mon.mcpStopped || 'Stopped')}
+          />
+          <StatCard label={mon.mcpPort || 'Port'} value={mcp.port} />
+        </div>
+      </section>
+
+      {/* Refresh indicator */}
+      <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground">
+        <RefreshCw size={10} className={loading ? 'animate-spin' : ''} />
+        {mon.autoRefresh || 'Auto-refresh every 5s'}
+      </div>
+    </div>
+  );
+}

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' | 'monitoring' | 'agents';
 
 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;
+}

package/app/instrumentation.ts

@@ -7,9 +7,14 @@ export async function register() {
       const configPath = join(homedir(), '.mindos', 'config.json');
       const config = JSON.parse(readFileSync(configPath, 'utf-8'));
       if (config.sync?.enabled && config.mindRoot) {
-        // Resolve absolute path to avoid Turbopack bundling issues
+        // Turbopack statically analyzes ALL forms of require/import — including
+        // createRequire() calls. The only way to load a runtime-computed path
+        // is to hide the require call inside a Function constructor, which is
+        // opaque to bundler static analysis.
         const syncModule = resolve(process.cwd(), '..', 'bin', 'lib', 'sync.js');
-        const { startSyncDaemon } = await import(/* webpackIgnore: true */ syncModule);
+        // eslint-disable-next-line @typescript-eslint/no-implied-eval
+        const dynamicRequire = new Function('id', 'return require(id)') as (id: string) => any;
+        const { startSyncDaemon } = dynamicRequire(syncModule);
         await startSyncDaemon(config.mindRoot);
       }
     } catch {