@geminilight/mindos 0.6.69 → 0.6.70

package/app/components/ask/ProviderModelCapsule.tsx

@@ -180,7 +180,7 @@ export default function ProviderModelCapsule({
     const goUp = rect.top > window.innerHeight - rect.bottom && rect.top > 280;
     setDropdownStyle({
       position: 'fixed',
-      left: Math.min(rect.left, window.innerWidth - 230),
+      left: Math.min(rect.left, window.innerWidth - 270),
       ...(goUp ? { bottom: window.innerHeight - rect.top + 6 } : { top: rect.bottom + 6 }),
       zIndex: 50,
     });
@@ -487,7 +487,7 @@ export default function ProviderModelCapsule({
         ref={providerPanelRef}
         role="listbox"
         aria-label={t.ask?.providerCapsule ?? 'Provider'}
-        className="w-[220px] rounded-lg border border-border bg-card shadow-lg py-1 animate-in fade-in-0 zoom-in-95 duration-100"
+        className="w-[260px] rounded-lg border border-border bg-card shadow-lg py-1 animate-in fade-in-0 zoom-in-95 duration-100"
         style={{ maxHeight: '70vh', overflowY: 'auto' }}
       >
         {providerIds.map((id) => {
@@ -512,15 +512,17 @@ export default function ProviderModelCapsule({
                 <button
                   type="button" role="option" aria-selected={isSelected}
                   onClick={() => handleSelectProvider(id as ProviderSelection)}
-                  className="flex flex-1 items-center gap-2 px-3 py-1.5 min-w-0"
+                  className="flex flex-1 items-center gap-2 px-3 py-1.5 min-w-0 text-left"
                 >
-                  <div className="flex-1 min-w-0 truncate">
-                    <span className={`text-xs ${isSelected ? 'font-medium text-foreground' : 'text-foreground/80'}`}>
-                      {provName}
+                  <span className={`shrink-0 text-xs ${isSelected ? 'font-medium text-foreground' : 'text-foreground/80'}`}>
+                    {provName}
+                  </span>
+                  {provModel && (
+                    <span className="min-w-0 truncate rounded bg-muted/70 px-1.5 py-px text-[10px] font-mono leading-tight text-muted-foreground">
+                      {provModel}
                     </span>
-                    <span className="text-2xs text-muted-foreground ml-1.5">{provModel}</span>
-                  </div>
-                  {isSelected && <Check size={11} className="shrink-0 text-[var(--amber)]" />}
+                  )}
+                  {isSelected && <Check size={11} className="shrink-0 ml-auto text-[var(--amber)]" />}
                 </button>
                 {canExpand && (
                   <button

package/app/components/ask/SessionHistoryPanel.tsx

@@ -0,0 +1,398 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { Search, Trash2, Pencil, Pin, PinOff, FolderInput, MessageSquare, SquarePen, X } from 'lucide-react';
+import type { ChatSession } from '@/lib/types';
+import { sessionTitle } from '@/hooks/useAskSession';
+import { useLocale } from '@/lib/stores/locale-store';
+
+interface SessionHistoryPanelProps {
+  sessions: ChatSession[];
+  activeSessionId: string | null;
+  onLoad: (id: string) => void;
+  onDelete: (id: string) => void;
+  onRename: (id: string, title: string) => void;
+  onTogglePin: (id: string) => void;
+  onClearAll: () => void;
+  onClose: () => void;
+  onNewChat: () => void;
+}
+
+// ── Helpers ──
+
+function formatRelativeTime(date: Date): string {
+  const now = Date.now();
+  const diff = now - date.getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return 'just now';
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d ago`;
+  return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+}
+
+function getTimeGroup(ts: number): 'pinned' | 'today' | 'yesterday' | 'week' | 'older' {
+  const now = new Date();
+  const date = new Date(ts);
+  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+  const startOfYesterday = startOfToday - 86400000;
+  const startOfWeek = startOfToday - now.getDay() * 86400000;
+  if (ts >= startOfToday) return 'today';
+  if (ts >= startOfYesterday) return 'yesterday';
+  if (ts >= startOfWeek) return 'week';
+  return 'older';
+}
+
+function sessionPreview(s: ChatSession): string {
+  const firstUser = s.messages.find(m => m.role === 'user');
+  if (!firstUser) return '';
+  const text = firstUser.content.replace(/\s+/g, ' ').trim();
+  return text.length > 60 ? `${text.slice(0, 60)}...` : text;
+}
+
+// ── Main Component ──
+
+export default function SessionHistoryPanel({
+  sessions, activeSessionId,
+  onLoad, onDelete, onRename, onTogglePin, onClearAll,
+  onClose, onNewChat,
+}: SessionHistoryPanelProps) {
+  const { t } = useLocale();
+  const ask = t.ask;
+  const [query, setQuery] = useState('');
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editValue, setEditValue] = useState('');
+  const [confirmClearAll, setConfirmClearAll] = useState(false);
+  const clearTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const searchRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Focus search on mount
+  useEffect(() => { searchRef.current?.focus(); }, []);
+
+  // Focus rename input
+  useEffect(() => { if (editingId) setTimeout(() => inputRef.current?.focus(), 0); }, [editingId]);
+
+  // Clear timer cleanup
+  useEffect(() => () => { if (clearTimer.current) clearTimeout(clearTimer.current); }, []);
+
+  // Filter sessions by search query
+  const filtered = useMemo(() => {
+    if (!query.trim()) return sessions;
+    const q = query.toLowerCase();
+    return sessions.filter(s => {
+      const title = sessionTitle(s).toLowerCase();
+      if (title.includes(q)) return true;
+      return s.messages.some(m => m.content.toLowerCase().includes(q));
+    });
+  }, [sessions, query]);
+
+  // Group sessions by time
+  const groups = useMemo(() => {
+    const pinned: ChatSession[] = [];
+    const today: ChatSession[] = [];
+    const yesterday: ChatSession[] = [];
+    const week: ChatSession[] = [];
+    const older: ChatSession[] = [];
+
+    for (const s of filtered) {
+      if (s.pinned) { pinned.push(s); continue; }
+      const group = getTimeGroup(s.updatedAt);
+      if (group === 'today') today.push(s);
+      else if (group === 'yesterday') yesterday.push(s);
+      else if (group === 'week') week.push(s);
+      else older.push(s);
+    }
+    return { pinned, today, yesterday, week, older };
+  }, [filtered]);
+
+  const pinnedCount = sessions.filter(s => s.pinned).length;
+  // Only count sessions with messages (non-empty)
+  const totalCount = sessions.filter(s => s.messages.length > 0).length;
+
+  const handleLoad = useCallback((id: string) => {
+    onLoad(id);
+    onClose();
+  }, [onLoad, onClose]);
+
+  const handleNewChat = useCallback(() => {
+    onNewChat();
+    onClose();
+  }, [onNewChat, onClose]);
+
+  const startRename = useCallback((s: ChatSession) => {
+    setEditingId(s.id);
+    setEditValue(sessionTitle(s));
+  }, []);
+
+  const commitRename = useCallback(() => {
+    if (editingId && editValue.trim()) {
+      onRename(editingId, editValue.trim());
+    }
+    setEditingId(null);
+  }, [editingId, editValue, onRename]);
+
+  const handleClearAll = useCallback(() => {
+    if (!confirmClearAll) {
+      setConfirmClearAll(true);
+      if (clearTimer.current) clearTimeout(clearTimer.current);
+      clearTimer.current = setTimeout(() => setConfirmClearAll(false), 3000);
+      return;
+    }
+    if (clearTimer.current) clearTimeout(clearTimer.current);
+    onClearAll();
+    setConfirmClearAll(false);
+  }, [confirmClearAll, onClearAll]);
+
+  // Keyboard: Esc to close
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && !editingId) onClose();
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [onClose, editingId]);
+
+  const renderGroup = (label: string, items: ChatSession[]) => {
+    if (items.length === 0) return null;
+    return (
+      <div key={label}>
+        <div className="text-2xs font-medium text-muted-foreground/50 uppercase tracking-wider px-1 py-2">
+          {label}
+        </div>
+        <div className="flex flex-col gap-1">
+          {items.map(s => (
+            <SessionCard
+              key={s.id}
+              session={s}
+              isActive={s.id === activeSessionId}
+              editing={editingId === s.id}
+              editValue={editValue}
+              onEditValueChange={setEditValue}
+              inputRef={inputRef}
+              onLoad={() => handleLoad(s.id)}
+              onStartRename={() => startRename(s)}
+              onCommitRename={commitRename}
+              onCancelRename={() => setEditingId(null)}
+              onDelete={() => onDelete(s.id)}
+              onTogglePin={() => onTogglePin(s.id)}
+              ask={ask}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  const hasResults = filtered.length > 0;
+
+  return (
+    <div className="flex flex-col flex-1 min-h-0 animate-in fade-in-0 duration-150">
+      {/* Search bar */}
+      <div className="px-4 pt-3 pb-2 shrink-0">
+        <div className="relative">
+          <Search size={13} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground/50" />
+          <input
+            ref={searchRef}
+            type="text"
+            value={query}
+            onChange={e => setQuery(e.target.value)}
+            placeholder={ask?.historySearch ?? 'Search conversations...'}
+            className="w-full pl-8 pr-8 py-2 text-xs rounded-lg border border-border bg-background text-foreground placeholder:text-muted-foreground/40 outline-none focus-visible:border-[var(--amber)]/40 transition-colors"
+          />
+          {query && (
+            <button
+              type="button"
+              onClick={() => setQuery('')}
+              className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded text-muted-foreground/40 hover:text-foreground"
+            >
+              <X size={12} />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Stats bar */}
+      <div className="flex items-center justify-between px-4 pb-2 shrink-0">
+        <span className="text-2xs text-muted-foreground/60">
+          {ask?.historyStats?.(totalCount) ?? `${totalCount} conversations`}
+          {pinnedCount > 0 && <> &middot; {pinnedCount} {ask?.historyPinned ?? 'pinned'}</>}
+        </span>
+        <button
+          type="button"
+          onClick={handleNewChat}
+          className="flex items-center gap-1 text-2xs text-[var(--amber)] hover:text-[var(--amber)]/80 transition-colors"
+        >
+          <SquarePen size={11} />
+          <span>{t.hints?.newChat ?? 'New chat'}</span>
+        </button>
+      </div>
+
+      {/* Scrollable list */}
+      <div className="flex-1 overflow-y-auto min-h-0 px-3 pb-3">
+        {hasResults ? (
+          <div className="flex flex-col gap-1">
+            {renderGroup(ask?.historyPinned ?? 'Pinned', groups.pinned)}
+            {renderGroup(ask?.historyToday ?? 'Today', groups.today)}
+            {renderGroup(ask?.historyYesterday ?? 'Yesterday', groups.yesterday)}
+            {renderGroup(ask?.historyThisWeek ?? 'This week', groups.week)}
+            {renderGroup(ask?.historyOlder ?? 'Older', groups.older)}
+          </div>
+        ) : (
+          <div className="flex flex-col items-center justify-center py-12 text-center">
+            <MessageSquare size={32} className="text-muted-foreground/20 mb-3" />
+            <p className="text-sm text-muted-foreground/60">
+              {query ? 'No matching conversations' : (ask?.historyEmpty ?? 'No conversations yet')}
+            </p>
+            {!query && (
+              <p className="text-2xs text-muted-foreground/40 mt-1">
+                {ask?.historyEmptyHint ?? 'Start a new chat to begin'}
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Footer */}
+      {totalCount > 0 && (
+        <div className="flex items-center justify-between px-4 py-2.5 border-t border-border/40 shrink-0">
+          <button
+            type="button"
+            onClick={handleClearAll}
+            className={`text-2xs px-2 py-0.5 rounded-md transition-colors ${
+              confirmClearAll
+                ? 'bg-error/10 text-error font-medium'
+                : 'text-muted-foreground/50 hover:text-error hover:bg-muted'
+            }`}
+          >
+            <span className="flex items-center gap-1">
+              <Trash2 size={10} />
+              {confirmClearAll ? (ask?.confirmClear ?? 'Confirm clear?') : (ask?.clearAll ?? 'Clear all')}
+            </span>
+          </button>
+          <span className="text-2xs text-muted-foreground/40 tabular-nums">
+            {ask?.historyCapacity?.(totalCount) ?? `${totalCount} of 30`}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── Session Card ──
+
+function SessionCard({
+  session: s, isActive, editing, editValue, onEditValueChange, inputRef,
+  onLoad, onStartRename, onCommitRename, onCancelRename, onDelete, onTogglePin,
+  ask,
+}: {
+  session: ChatSession;
+  isActive: boolean;
+  editing: boolean;
+  editValue: string;
+  onEditValueChange: (v: string) => void;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  onLoad: () => void;
+  onStartRename: () => void;
+  onCommitRename: () => void;
+  onCancelRename: () => void;
+  onDelete: () => void;
+  onTogglePin: () => void;
+  ask: Record<string, any>;
+}) {
+  const title = sessionTitle(s);
+  const preview = sessionPreview(s);
+  const msgCount = s.messages.length;
+
+  return (
+    <div
+      className={`group relative rounded-lg transition-colors cursor-pointer ${
+        isActive
+          ? 'bg-[var(--amber)]/8 border border-[var(--amber)]/15'
+          : 'hover:bg-muted/60 border border-transparent'
+      }`}
+      onClick={onLoad}
+    >
+      {/* Active indicator */}
+      {isActive && (
+        <span className="absolute left-0 top-3 bottom-3 w-[2px] rounded-r-full bg-[var(--amber)]" />
+      )}
+
+      <div className="px-3 py-2.5">
+        {/* Title row */}
+        <div className="flex items-center gap-1.5 mb-0.5">
+          {s.pinned && <Pin size={10} className="shrink-0 text-[var(--amber)]/60 -rotate-45" />}
+          {editing ? (
+            <input
+              ref={inputRef}
+              type="text"
+              value={editValue}
+              onChange={e => onEditValueChange(e.target.value)}
+              onBlur={onCommitRename}
+              onKeyDown={e => {
+                if (e.key === 'Enter') { e.preventDefault(); onCommitRename(); }
+                if (e.key === 'Escape') { e.preventDefault(); onCancelRename(); }
+              }}
+              onClick={e => e.stopPropagation()}
+              className="flex-1 min-w-0 bg-transparent border-b border-[var(--amber)] outline-none text-xs font-medium text-foreground"
+            />
+          ) : (
+            <span className="flex-1 min-w-0 text-xs font-medium text-foreground truncate">
+              {title}
+            </span>
+          )}
+          <span className="text-2xs text-muted-foreground/40 shrink-0 tabular-nums">
+            {formatRelativeTime(new Date(s.updatedAt))}
+          </span>
+        </div>
+
+        {/* Preview */}
+        {!editing && preview && (
+          <p className="text-2xs text-muted-foreground/50 truncate mt-0.5 pl-0.5">
+            {preview}
+          </p>
+        )}
+
+        {/* Meta row */}
+        {!editing && (
+          <div className="flex items-center justify-between mt-1.5">
+            <span className="text-2xs text-muted-foreground/40 flex items-center gap-1">
+              <MessageSquare size={9} />
+              {ask?.historyMsgs?.(msgCount) ?? `${msgCount} msgs`}
+            </span>
+
+            {/* Action buttons — visible on hover */}
+            <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity" onClick={e => e.stopPropagation()}>
+              <button
+                type="button"
+                onClick={onTogglePin}
+                className={`p-1 rounded-md transition-colors ${s.pinned ? 'text-[var(--amber)] hover:text-muted-foreground' : 'text-muted-foreground/40 hover:text-[var(--amber)]'}`}
+                title={s.pinned ? 'Unpin' : 'Pin'}
+              >
+                {s.pinned ? <PinOff size={11} /> : <Pin size={11} />}
+              </button>
+              <button
+                type="button"
+                onClick={onStartRename}
+                className="p-1 rounded-md text-muted-foreground/40 hover:text-foreground hover:bg-muted/60 transition-colors"
+                title={ask?.renameSession ?? 'Rename'}
+              >
+                <Pencil size={11} />
+              </button>
+              <button
+                type="button"
+                onClick={onDelete}
+                className="p-1 rounded-md text-muted-foreground/40 hover:text-error hover:bg-error/5 transition-colors"
+                title="Delete"
+              >
+                <Trash2 size={11} />
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/app/components/settings/AiTab.tsx

@@ -12,6 +12,7 @@ import { type Provider, generateProviderId } from '@/lib/custom-endpoints';
 import { useCustomProviderForm, type TestResult } from './useCustomProviderForm';
 import CustomProviderFields from './CustomProviderFields';
 import { TestButton } from './TestButton';
+import WebPortSection from './WebPortSection';
 
 export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
   const { locale } = useLocale();
@@ -367,7 +368,10 @@ export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
         )}
       </SettingCard>
 
-      {/* ── Card 3: Display Mode ── */}
+      {/* ── Card 3: Web Server Port ── */}
+      <WebPortSection m={t.settings?.mcp ?? {}} />
+
+      {/* ── Card 4: Display Mode ── */}
       <AskDisplayMode />
     </div>
   );

package/app/components/settings/KnowledgeTab.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect, useCallback, useSyncExternalStore, useRef } from 'react';
-import { Copy, Check, RefreshCw, Trash2, Sparkles, ChevronDown, ChevronRight, Loader2, Cpu, Zap, Database as DatabaseIcon, HardDrive, RotateCcw, FlaskConical } from 'lucide-react';
+import { Copy, Check, RefreshCw, Trash2, Sparkles, ChevronDown, ChevronRight, Loader2, Cpu, Zap, Database as DatabaseIcon, HardDrive, RotateCcw, FlaskConical, Search } from 'lucide-react';
 import { toast } from '@/lib/toast';
 import type { KnowledgeTabProps } from './types';
 import { Field, Input, EnvBadge, SectionLabel, Toggle, SettingCard, SettingRow, PasswordInput } from './Primitives';
@@ -97,6 +97,16 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
       .catch(err => console.error('Failed to restart walkthrough:', err));
   }, []);
 
+  // Embedding config
+  const embeddingData = data.embedding ?? { enabled: false, baseUrl: '', apiKey: '', model: '' };
+  const embeddingStatus = data.embeddingStatus ?? { enabled: false, ready: false, building: false, docCount: 0 };
+
+  const EMBEDDING_PRESETS = [
+    { label: 'OpenAI', baseUrl: 'https://api.openai.com/v1', model: 'text-embedding-3-small' },
+    { label: 'DeepSeek', baseUrl: 'https://api.deepseek.com/v1', model: 'deepseek-embed' },
+    { label: 'Ollama', baseUrl: 'http://localhost:11434/v1', model: 'nomic-embed-text' },
+  ];
+
   const origin = useSyncExternalStore(
     () => () => {},
     () => `${window.location.protocol}//${window.location.hostname}`,
@@ -285,6 +295,87 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
         </SettingCard>
       )}
 
+      {/* ── Card: Embedding Search (optional RAG) ── */}
+      <SettingCard
+        icon={<Search size={15} />}
+        title="Embedding Search"
+        description="Enable semantic search with vector embeddings. Complements keyword search — finds notes by meaning, not just exact words."
+      >
+        <SettingRow label="Enable embedding search" hint="When enabled, search results combine keyword matching (BM25) with semantic similarity. Requires an embedding API.">
+          <Toggle
+            checked={embeddingData.enabled}
+            onChange={() => {
+              setData(d => d ? { ...d, embedding: { ...embeddingData, enabled: !embeddingData.enabled } } : d);
+            }}
+          />
+        </SettingRow>
+
+        {embeddingData.enabled && (
+          <>
+            {/* Preset buttons */}
+            <div className="flex gap-2 flex-wrap">
+              {EMBEDDING_PRESETS.map(p => (
+                <button
+                  key={p.label}
+                  type="button"
+                  onClick={() => {
+                    setData(d => d ? { ...d, embedding: { ...embeddingData, baseUrl: p.baseUrl, model: p.model } } : d);
+                  }}
+                  className={`px-2.5 py-1 text-xs rounded-md border transition-colors ${
+                    embeddingData.baseUrl === p.baseUrl
+                      ? 'border-[var(--amber)] text-[var(--amber)] bg-[var(--amber)]/10'
+                      : 'border-border text-muted-foreground hover:text-foreground hover:bg-muted'
+                  }`}
+                >
+                  {p.label}
+                </button>
+              ))}
+            </div>
+
+            <Field label="Base URL" hint="OpenAI-compatible embedding endpoint">
+              <Input
+                value={embeddingData.baseUrl}
+                onChange={e => setData(d => d ? { ...d, embedding: { ...embeddingData, baseUrl: e.target.value } } : d)}
+                placeholder="https://api.openai.com/v1"
+              />
+            </Field>
+
+            <Field label="API Key" hint="Leave empty for local providers (e.g., Ollama)">
+              <PasswordInput
+                value={embeddingData.apiKey}
+                onChange={v => setData(d => d ? { ...d, embedding: { ...embeddingData, apiKey: v } } : d)}
+                placeholder="sk-..."
+              />
+            </Field>
+
+            <Field label="Model" hint="Embedding model name">
+              <Input
+                value={embeddingData.model}
+                onChange={e => setData(d => d ? { ...d, embedding: { ...embeddingData, model: e.target.value } } : d)}
+                placeholder="text-embedding-3-small"
+              />
+            </Field>
+
+            {/* Status indicator */}
+            <div className="flex items-center gap-2 text-xs text-muted-foreground pt-1">
+              {embeddingStatus.building ? (
+                <>
+                  <Loader2 size={12} className="animate-spin" />
+                  <span>Building embedding index...</span>
+                </>
+              ) : embeddingStatus.ready ? (
+                <>
+                  <Check size={12} className="text-success" />
+                  <span>{embeddingStatus.docCount} documents indexed</span>
+                </>
+              ) : (
+                <span>Index will be built on first search</span>
+              )}
+            </div>
+          </>
+        )}
+      </SettingCard>
+
       {/* ── Card 4: Labs — experimental features ── */}
       <SettingCard icon={<FlaskConical size={15} />} title={a.labsTitle ?? 'Labs'} description={a.labsDesc ?? 'Experimental features that are still in development.'}>
         <div className="space-y-3">

package/app/components/settings/McpConnectGuides.tsx

@@ -11,6 +11,7 @@ import { copyToClipboard } from '@/lib/clipboard';
 import CustomSelect from '@/components/CustomSelect';
 import type { SelectItem } from '@/components/CustomSelect';
 import AgentInstall from './McpAgentInstall';
+import McpPortSection from './McpPortSection';
 
 export function useCopyField() {
   const [copiedField, setCopiedField] = useState<string | null>(null);
@@ -236,6 +237,9 @@ function McpGuide({ status, agents, activeSkillName, connectedAgents, detectedAg
       {/* MCP Status */}
       <McpStatusInline status={status} restarting={restarting} onRestart={onRestart} onRefresh={onRefresh} m={m} />
 
+      {/* MCP Port Configuration */}
+      {m && <McpPortSection m={m} />}
+
       {/* Local (stdio) */}
       <div className="space-y-2.5">
         <div className="flex items-center gap-2">