ompchamber 0.3.0

package/src/client/components/settings/categories/provider-settings/LoginModal.tsx

@@ -0,0 +1,224 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { AlertCircle, CheckCircle2, Globe, Key, Loader2 } from 'lucide-preact';
+import type { ProviderItem } from '@/shared/types';
+import { ProviderIcon } from '@/client/components/settings/categories/provider-settings/Icons';
+import { Modal } from '@/client/components/common/Modal';
+
+interface LoginModalProps {
+  isOpen: boolean;
+  provider: ProviderItem;
+  onClose: () => void;
+  onAuthenticated: () => void;
+}
+
+interface UiRequest {
+  id: string;
+  method?: string;
+  title?: string;
+  launchUrl?: string;
+  placeholder?: string;
+}
+
+/**
+ * OAuth/API-key login flow against POST /api/omp/login (SSE). Renders
+ * extension_ui_request prompts: open_url becomes a launch link, input asks
+ * for a credential, notify shows status. Replies are forwarded via the same
+ * endpoint so the throwaway omp process completes its flow.
+ */
+export function LoginModal({ isOpen, provider, onClose, onAuthenticated }: LoginModalProps) {
+  const [status, setStatus] = useState<'connecting' | 'waiting' | 'success' | 'failed'>('connecting');
+  const [openUrl, setOpenUrl] = useState<string | null>(null);
+  const [inputPrompt, setInputPrompt] = useState<UiRequest | null>(null);
+  const [notifyText, setNotifyText] = useState<string | null>(null);
+  const [inputValue, setInputValue] = useState('');
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const respondRef = useRef<((payload: Record<string, unknown>) => void) | null>(null);
+  // Read through a ref: the parent recreates this handler on every render, and
+  // a changing dependency would abort + restart the login stream mid-flow.
+  const onAuthenticatedRef = useRef(onAuthenticated);
+  onAuthenticatedRef.current = onAuthenticated;
+
+  useEffect(() => {
+    if (!isOpen) return;
+    setStatus('connecting');
+    setOpenUrl(null);
+    setInputPrompt(null);
+    setNotifyText(null);
+    setErrorMessage(null);
+    setInputValue('');
+
+    const controller = new AbortController();
+    const respond = (payload: Record<string, unknown>) => {
+      fetch('/api/omp/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+        signal: controller.signal,
+      }).catch(() => {});
+    };
+    respondRef.current = respond;
+
+    fetch('/api/omp/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ providerId: provider.slug }),
+      signal: controller.signal,
+    })
+      .then(async (response) => {
+        if (!response.body) throw new Error('Streaming not supported');
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+        for (;;) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const parts = buffer.split('\n\n');
+          buffer = parts.pop() ?? '';
+          for (const part of parts) {
+            const line = part.split('\n').find((l) => l.startsWith('data: '));
+            if (!line) continue;
+            try {
+              const frame = JSON.parse(line.slice(6)) as UiRequest & { type: string; success?: boolean; error?: string };
+              if (frame.type === 'extension_ui_request') {
+                setStatus('waiting');
+                if (frame.method === 'open_url' && frame.launchUrl) {
+                  setOpenUrl(frame.launchUrl);
+                  window.open(frame.launchUrl, '_blank', 'noopener');
+                } else if (frame.method === 'input') {
+                  setInputPrompt(frame);
+                } else if (frame.method === 'notify') {
+                  setNotifyText(frame.title ?? '');
+                  if (frame.title) respond({ id: frame.id, accepted: true });
+                } else {
+                  respond({ id: frame.id, cancelled: true });
+                }
+              } else if (frame.type === 'login_result') {
+                setStatus(frame.success ? 'success' : 'failed');
+                if (!frame.success) setErrorMessage(frame.error ?? 'Login failed');
+                if (frame.success) onAuthenticatedRef.current();
+                controller.abort();
+                return;
+              }
+            } catch { /* malformed frame — skip */ }
+          }
+        }
+      })
+      .catch((err) => {
+        if (controller.signal.aborted) return;
+        setStatus('failed');
+        setErrorMessage(err instanceof Error ? err.message : String(err));
+      });
+
+    return () => {
+      controller.abort();
+      respondRef.current = null;
+    };
+  }, [isOpen, provider.slug]);
+
+  const submitInput = (cancelled: boolean) => {
+    if (!inputPrompt) return;
+    respondRef.current?.(cancelled
+      ? { id: inputPrompt.id, cancelled: true }
+      : { id: inputPrompt.id, value: inputValue });
+    setInputPrompt(null);
+    setStatus('connecting');
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <Modal
+      onClose={onClose}
+      header={
+        <div className="flex items-center gap-2.5">
+          <ProviderIcon icon={provider.icon} size={18} />
+          <div>
+            <h3 className="text-sm font-semibold text-ink">Sign in to {provider.name}</h3>
+            <p className="text-[11px] text-ink/50 font-mono">{provider.slug}</p>
+          </div>
+        </div>
+      }
+      footer={
+        <div className="px-5 py-3 border-t border-ink/10 flex justify-end">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-3.5 py-1.5 rounded-md border border-ink/20 text-xs font-medium text-ink hover:bg-ink/5 transition-colors cursor-pointer"
+          >
+            {status === 'success' ? 'Done' : 'Close'}
+          </button>
+        </div>
+      }
+    >
+      <div className="p-5 space-y-4">
+        {status === 'connecting' && (
+          <div className="flex items-center gap-2.5 text-xs text-ink/70">
+            <Loader2 size={14} className="animate-spin" />
+            Starting login flow...
+          </div>
+        )}
+
+        {status === 'waiting' && (
+          <div className="space-y-4">
+            {openUrl && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-2 text-xs font-semibold text-ink">
+                  <Globe size={13} className="text-ink/50" /> OAuth browser
+                </div>
+                <p className="text-xs text-ink/60">Complete the sign-in in the opened browser tab.</p>
+                <button
+                  type="button"
+                  onClick={() => window.open(openUrl, '_blank', 'noopener')}
+                  className="text-xs text-ink underline underline-offset-2 break-all text-left"
+                >
+                  {openUrl}
+                </button>
+              </div>
+            )}
+            {inputPrompt && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-2 text-xs font-semibold text-ink">
+                  <Key size={13} className="text-ink/50" /> {inputPrompt.title ?? 'Credential'}
+                </div>
+                <input
+                  type="text"
+                  autoFocus
+                  value={inputValue}
+                  onChange={(e) => setInputValue(e.currentTarget.value)}
+                  onKeyDown={(e) => e.key === 'Enter' && submitInput(false)}
+                  placeholder={inputPrompt.placeholder ?? 'Paste your API key'}
+                  className="w-full bg-paper border border-ink/20 rounded-md px-3 py-1.5 text-xs text-ink outline-none focus:border-ink/60 font-mono"
+                />
+                <div className="flex justify-end gap-2">
+                  <button type="button" onClick={() => submitInput(true)} className="px-3 py-1.5 rounded-md border border-ink/20 text-xs text-ink hover:bg-ink/5 transition-colors cursor-pointer">
+                    Cancel
+                  </button>
+                  <button type="button" onClick={() => submitInput(false)} className="px-3.5 py-1.5 rounded-md bg-ink text-canvas text-xs font-medium hover:opacity-90 transition-opacity cursor-pointer">
+                    Submit
+                  </button>
+                </div>
+              </div>
+            )}
+            {notifyText && <p className="text-xs text-ink/60">{notifyText}</p>}
+            {!openUrl && !inputPrompt && !notifyText && (
+              <p className="text-xs text-ink/50">Waiting for the provider flow...</p>
+            )}
+          </div>
+        )}
+
+        {status === 'success' && (
+          <div className="flex items-center gap-2 text-xs text-emerald-500 font-medium">
+            <CheckCircle2 size={14} /> Signed in. Credentials stored by omp.
+          </div>
+        )}
+        {status === 'failed' && (
+          <div className="flex items-start gap-2 text-xs text-error font-medium">
+            <AlertCircle size={14} className="mt-0.5 shrink-0" />
+            <span>{errorMessage ?? 'Login failed'}</span>
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}

package/src/client/components/settings/categories/provider-settings/ModelCapabilitiesModal.tsx

@@ -0,0 +1,114 @@
+import { Check, Cpu, Eye, ShieldCheck, SlidersHorizontal, Sparkles, Terminal } from 'lucide-preact';
+import type { ProviderModel } from '@/shared/types';
+import { Modal } from '@/client/components/common/Modal';
+
+interface ModelCapabilitiesModalProps {
+  isOpen: boolean;
+  model: ProviderModel | null;
+  onClose: () => void;
+}
+
+export function ModelCapabilitiesModal({
+  isOpen,
+  model,
+  onClose,
+}: ModelCapabilitiesModalProps) {
+  if (!isOpen || !model) return null;
+
+  const capabilities = [
+    {
+      title: 'Tool & Function Calling',
+      desc: 'Allows autonomous agents to invoke CLI scripts, read files, and manipulate workspace files.',
+      enabled: model.hasTools,
+      icon: Terminal,
+    },
+    {
+      title: 'Multimodal Vision',
+      desc: 'Analyzes visual screenshots, terminal diffs, diagrams, and image uploads directly.',
+      enabled: model.hasVision,
+      icon: Eye,
+    },
+    {
+      title: 'Extended Reasoning & Thinking Blocks',
+      desc: 'Provides deep chain-of-thought scratchpad tokens before outputting code patches.',
+      enabled: !!model.hasReasoning,
+      icon: Cpu,
+    },
+    {
+      title: 'Structured Output (JSON Schema)',
+      desc: 'Forces strict conformance to specified JSON schemas for deterministic tool execution.',
+      enabled: true,
+      icon: ShieldCheck,
+    },
+    {
+      title: 'Streaming Inference',
+      desc: 'Delivers real-time incremental token chunks to the chat timeline with zero latency.',
+      enabled: true,
+      icon: Sparkles,
+    },
+  ];
+
+  return (
+    <Modal
+      onClose={onClose}
+      header={
+        <div className="flex items-center gap-2">
+          <SlidersHorizontal size={16} className="text-ink/70" />
+          <div>
+            <h3 className="text-sm font-semibold text-ink">
+              Model Capabilities & Tools
+            </h3>
+            <p className="text-[11px] text-ink/50 truncate max-w-[280px]">
+              {model.name}
+            </p>
+          </div>
+        </div>
+      }
+      footer={
+        <div className="px-5 py-3 border-t border-ink/10 flex justify-end">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-4 py-1.5 rounded-md bg-ink text-canvas text-xs font-medium hover:opacity-90 transition-opacity cursor-pointer"
+          >
+            Close
+          </button>
+        </div>
+      }
+    >
+      <div className="p-5 space-y-3">
+        {capabilities.map((cap) => {
+          const Icon = cap.icon;
+          return (
+            <div
+              key={cap.title}
+              className="flex items-start gap-3 p-2.5 rounded-lg bg-ink/5 border border-ink/10"
+            >
+              <div className="p-1.5 rounded bg-ink/10 text-ink mt-0.5">
+                <Icon size={14} />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center justify-between">
+                  <span className="text-xs font-semibold text-ink">{cap.title}</span>
+                  {cap.enabled ? (
+                    <span className="inline-flex items-center gap-1 text-[10px] text-emerald-500 font-semibold uppercase tracking-wider">
+                      <Check size={11} strokeWidth={2.5} />
+                      Supported
+                    </span>
+                  ) : (
+                    <span className="text-[10px] text-ink/40 font-medium uppercase tracking-wider">
+                      Not supported
+                    </span>
+                  )}
+                </div>
+                <p className="text-[11px] text-ink/60 mt-0.5 leading-relaxed">
+                  {cap.desc}
+                </p>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </Modal>
+  );
+}

package/src/client/components/settings/categories/provider-settings/ModelConfigModal.tsx

@@ -0,0 +1,155 @@
+import { useState } from 'preact/hooks';
+import type { FormEvent } from 'preact/compat';
+import { Check, Settings2 } from 'lucide-preact';
+import type { ProviderModel } from '@/shared/types';
+import { Modal } from '@/client/components/common/Modal';
+
+interface ModelConfigModalProps {
+  isOpen: boolean;
+  model: ProviderModel | null;
+  onClose: () => void;
+  onSaveModelConfig: (modelId: string, updates: Partial<ProviderModel>) => void;
+}
+
+export function ModelConfigModal({
+  isOpen,
+  model,
+  onClose,
+  onSaveModelConfig,
+}: ModelConfigModalProps) {
+  if (!isOpen || !model) return null;
+
+  const [temperature, setTemperature] = useState<number>(model.temperature ?? 0.7);
+  const [maxTokens, setMaxTokens] = useState<number>(model.maxTokens ?? 384000);
+  const [topP, setTopP] = useState<number>(model.topP ?? 0.95);
+  const [reasoningEffort, setReasoningEffort] = useState<'low' | 'medium' | 'high'>(
+    model.reasoningEffort ?? 'medium'
+  );
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    onSaveModelConfig(model.id, {
+      temperature,
+      maxTokens,
+      topP,
+      reasoningEffort,
+    });
+    onClose();
+  };
+
+  return (
+    <Modal
+      onClose={onClose}
+      header={
+        <div className="flex items-center gap-2">
+          <Settings2 size={16} className="text-ink/70" />
+          <div>
+            <h3 className="text-sm font-semibold text-ink">
+              Model Configuration
+            </h3>
+            <p className="text-[11px] text-ink/50 truncate max-w-[280px]">
+              {model.name}
+            </p>
+          </div>
+        </div>
+      }
+      form={{ onSubmit: handleSubmit, className: 'p-5 space-y-4' }}
+      footer={
+        <div className="pt-2 flex items-center justify-end gap-2 border-t border-ink/10">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-3.5 py-1.5 rounded-md border border-ink/20 text-xs font-medium text-ink hover:bg-ink/5 transition-colors cursor-pointer"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            className="px-3.5 py-1.5 rounded-md bg-ink text-canvas text-xs font-medium hover:opacity-90 transition-opacity cursor-pointer flex items-center gap-1.5"
+          >
+            <Check size={14} />
+            <span>Save Parameters</span>
+          </button>
+        </div>
+      }
+    >
+      {/* Temperature Slider */}
+      <div>
+        <div className="flex items-center justify-between mb-1 text-xs">
+          <span className="font-semibold text-ink">Sampling Temperature</span>
+          <span className="font-mono text-ink/70 font-semibold">{temperature.toFixed(2)}</span>
+        </div>
+        <input
+          type="range"
+          min="0.0"
+          max="2.0"
+          step="0.05"
+          value={temperature}
+          onChange={(e) => setTemperature(parseFloat(e.currentTarget.value))}
+          className="w-full accent-ink cursor-pointer"
+        />
+        <p className="text-[10px] text-ink/40 mt-0.5">
+          Controls randomness: lower is more deterministic, higher is more creative.
+        </p>
+      </div>
+
+      {/* Top P Slider */}
+      <div>
+        <div className="flex items-center justify-between mb-1 text-xs">
+          <span className="font-semibold text-ink">Top P (Nucleus Sampling)</span>
+          <span className="font-mono text-ink/70 font-semibold">{topP.toFixed(2)}</span>
+        </div>
+        <input
+          type="range"
+          min="0.1"
+          max="1.0"
+          step="0.05"
+          value={topP}
+          onChange={(e) => setTopP(parseFloat(e.currentTarget.value))}
+          className="w-full accent-ink cursor-pointer"
+        />
+      </div>
+
+      {/* Max Output Tokens */}
+      <div>
+        <label className="block text-xs font-semibold text-ink mb-1">
+          Max Output Tokens
+        </label>
+        <input
+          type="number"
+          min={1024}
+          max={1000000}
+          step={1024}
+          value={maxTokens}
+          onChange={(e) => setMaxTokens(parseInt(e.currentTarget.value, 10) || 4096)}
+          className="w-full bg-paper border border-ink/20 rounded-md px-3 py-1.5 text-xs text-ink outline-none focus:border-ink/60 font-mono"
+        />
+      </div>
+
+      {/* Reasoning Effort (if supported) */}
+      {model.hasReasoning && (
+        <div>
+          <label className="block text-xs font-semibold text-ink mb-1.5">
+            Reasoning Effort
+          </label>
+          <div className="grid grid-cols-3 gap-2">
+            {(['low', 'medium', 'high'] as const).map((lvl) => (
+              <button
+                key={lvl}
+                type="button"
+                onClick={() => setReasoningEffort(lvl)}
+                className={`py-1.5 rounded-md text-xs font-medium border text-center transition-colors cursor-pointer capitalize ${
+                  reasoningEffort === lvl
+                    ? 'border-ink/50 bg-ink/10 text-ink'
+                    : 'border-ink/15 text-ink/60 hover:border-ink/30'
+                }`}
+              >
+                {lvl}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </Modal>
+  );
+}

package/src/client/components/settings/categories/provider-settings/ModelsList.tsx

@@ -0,0 +1,191 @@
+import { useState } from 'preact/hooks';
+import { Eye, EyeOff, Image as ImageIcon, RefreshCw, Search, Settings2, SlidersHorizontal } from 'lucide-preact';
+import type { ProviderModel } from '@/shared/types';
+import { formatContextWindow } from '@/shared/lib/code/format';
+import { formatPrice } from '@/shared/lib/format/number';
+
+interface ProviderModelsListProps {
+  models: ProviderModel[];
+  onToggleModelVisibility: (modelId: string) => void;
+  onHideAll: () => void;
+  onShowAll: () => void;
+  onFetchModels: () => Promise<void>;
+  canFetchModels: boolean;
+  isFetchingModels: boolean;
+  onOpenModelConfig: (model: ProviderModel) => void;
+  onOpenModelCapabilities: (model: ProviderModel) => void;
+}
+
+export function ProviderModelsList({
+  models,
+  onToggleModelVisibility,
+  onHideAll,
+  onShowAll,
+  onFetchModels,
+  canFetchModels,
+  isFetchingModels,
+  onOpenModelConfig,
+  onOpenModelCapabilities,
+}: ProviderModelsListProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const filteredModels = models.filter((m) =>
+    m.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <div className="space-y-3.5">
+      {/* 1. Header with count & hide all / show all */}
+      <div className="flex items-center justify-between gap-4">
+        <div className="text-xs font-semibold text-ink">
+          Available Models <span className="font-normal text-ink/60">({models.length})</span>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={onFetchModels}
+            disabled={!canFetchModels || isFetchingModels}
+            title={canFetchModels ? 'Fetch models from provider endpoint' : 'This provider has no fetchable endpoint'}
+            className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded bg-ink text-canvas text-[11px] font-medium hover:opacity-90 transition-opacity cursor-pointer border border-ink disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            <RefreshCw size={12} className={isFetchingModels ? 'animate-spin' : ''} />
+            <span>{isFetchingModels ? 'fetching...' : 'fetch models'}</span>
+          </button>
+          <button
+            type="button"
+            onClick={onHideAll}
+            className="px-2.5 py-1 rounded bg-ink/5 hover:bg-ink/10 text-[11px] font-medium text-ink/80 hover:text-ink transition-colors cursor-pointer border border-ink/10"
+          >
+            hide all
+          </button>
+          <button
+            type="button"
+            onClick={onShowAll}
+            className="px-2.5 py-1 rounded bg-ink/5 hover:bg-ink/10 text-[11px] font-medium text-ink/80 hover:text-ink transition-colors cursor-pointer border border-ink/10"
+          >
+            show all
+          </button>
+        </div>
+      </div>
+
+      {/* 2. Filter Search Input */}
+      <div className="relative flex items-center">
+        <Search size={14} className="absolute left-3 text-ink/40 pointer-events-none" />
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.currentTarget.value)}
+          placeholder="Filter models..."
+          className="w-full bg-paper border border-ink/15 rounded-lg pl-9 pr-3 py-2 text-xs text-ink placeholder-ink/40 focus:outline-none focus:border-ink/40 transition-colors shadow-2xs"
+        />
+        {searchQuery && (
+          <button
+            type="button"
+            onClick={() => setSearchQuery('')}
+            className="absolute right-3 text-[11px] text-ink/40 hover:text-ink cursor-pointer"
+          >
+            clear
+          </button>
+        )}
+      </div>
+
+      {/* 3. Model Rows */}
+      <div className="space-y-1 pt-1">
+        {filteredModels.length === 0 ? (
+          <div className="py-8 text-center text-xs text-ink/40">
+            No models found matching "{searchQuery}"
+          </div>
+        ) : (
+          filteredModels.map((model) => (
+            <div
+              key={model.id}
+              className={`flex items-center justify-between gap-3 px-3 py-2.5 rounded-lg hover:bg-ink/5 transition-colors group ${
+                !model.isVisible ? 'opacity-50' : ''
+              }`}
+            >
+              {/* Left: Model Name */}
+              <div className="min-w-0 flex-1">
+                <span className={`text-xs font-medium truncate block ${
+                  model.isVisible ? 'text-ink' : 'text-ink/60 line-through decoration-ink/40'
+                }`}>
+                  {model.name}
+                </span>
+              </div>
+
+              {/* Right: Price & Context Badge & Action Icons */}
+              <div className="flex items-center gap-2 flex-shrink-0">
+                {/* Pricing Badge (per 1M tokens) */}
+                {(model.priceInput !== undefined || model.priceOutput !== undefined) && (
+                  <span
+                    title={`$${model.priceInput ?? '?'} in / $${model.priceOutput ?? '?'} out per 1M tokens`}
+                    className="text-[11px] font-mono px-2 py-0.5 rounded bg-ink/5 text-ink/70 border border-ink/10"
+                  >
+                    {formatPrice(model.priceInput)} / {formatPrice(model.priceOutput)}
+                  </span>
+                )}
+
+                {/* Context Window Badge */}
+                {model.contextWindow && (
+                  <span className="text-[11px] font-mono px-2 py-0.5 rounded bg-ink/5 text-ink/70 border border-ink/10">
+                    {formatContextWindow(model.contextWindow)}
+                  </span>
+                )}
+
+                {/* Tool Calling / Steering Button */}
+                {model.hasTools && (
+                  <button
+                    type="button"
+                    onClick={() => onOpenModelCapabilities(model)}
+                    title="Tool Calling & Steering Capabilities"
+                    className="p-1 rounded text-ink/50 hover:text-ink hover:bg-ink/10 transition-colors cursor-pointer"
+                  >
+                    <SlidersHorizontal size={13} strokeWidth={1.8} />
+                  </button>
+                )}
+
+                {/* Model Configuration (Gear) Button */}
+                <button
+                  type="button"
+                  onClick={() => onOpenModelConfig(model)}
+                  title="Configure Model Parameters"
+                  className="p-1 rounded text-ink/50 hover:text-ink hover:bg-ink/10 transition-colors cursor-pointer"
+                >
+                  <Settings2 size={13} strokeWidth={1.8} />
+                </button>
+
+                {/* Vision Capability Icon */}
+                {model.hasVision && (
+                  <div
+                    title="Multimodal / Vision inputs enabled"
+                    className="p-1 text-ink/60"
+                  >
+                    <ImageIcon size={13} strokeWidth={1.8} />
+                  </div>
+                )}
+
+                {/* Visibility Toggle (Eye) Button */}
+                <button
+                  type="button"
+                  onClick={() => onToggleModelVisibility(model.id)}
+                  title={model.isVisible ? 'Hide model from chat picker' : 'Show model in chat picker'}
+                  className={`p-1 rounded transition-colors cursor-pointer ${
+                    model.isVisible
+                      ? 'text-ink/60 hover:text-ink hover:bg-ink/10'
+                      : 'text-ink/30 hover:text-ink/70 hover:bg-ink/10'
+                  }`}
+                >
+                  {model.isVisible ? (
+                    <Eye size={14} strokeWidth={1.8} />
+                  ) : (
+                    <EyeOff size={14} strokeWidth={1.8} />
+                  )}
+                </button>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}