ompchamber 0.3.0

package/src/client/components/settings/categories/TokenUsageSettings.tsx

@@ -0,0 +1,264 @@
+
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { Check, ChevronDown, RefreshCw } from 'lucide-preact';
+import type { BreakdownTab, CadenceType, ChartMetric, ChartSeriesPoint, SettingsState, TimeRangeType } from '@/shared/types';
+import { TokenUsageMetricsGrid } from '@/client/components/settings/categories/token-usage-settings/MetricsGrid';
+import { TokenUsageBreakdown } from '@/client/components/settings/categories/token-usage-settings/Breakdown';
+import { UsageChart } from '@/client/components/settings/categories/token-usage-settings/Chart';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+
+interface TokenUsageSettingsProps {
+  settings: SettingsState;
+  onUpdate: (updater: Partial<SettingsState> | ((prev: SettingsState) => SettingsState)) => void;
+}
+
+export function TokenUsageSettings({ settings: _settings, onUpdate: _onUpdate }: TokenUsageSettingsProps) {
+  const [cadence, setCadence] = useState<CadenceType>('daily');
+  const [timeRange, setTimeRange] = useState<TimeRangeType>('30d');
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [chartMetric, setChartMetric] = useState<ChartMetric>('cost');
+  const [breakdownTab, setBreakdownTab] = useState<BreakdownTab>('model');
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const today = new Date().toISOString().slice(0, 10);
+  const monthAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().slice(0, 10);
+  const [customFrom, setCustomFrom] = useState(monthAgo);
+  const [customTo, setCustomTo] = useState(today);
+
+  const [timeRanges, setTimeRanges] = useState<any[]>([]);
+  const [activeMetrics, setActiveMetrics] = useState<any>(null);
+  const [activeBreakdownRows, setActiveBreakdownRows] = useState<any[]>([]);
+  const [chartSeries, setChartSeries] = useState<ChartSeriesPoint[]>([]);
+
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useOnClickOutside(dropdownRef, () => setIsDropdownOpen(false));
+
+  const loadData = useCallback(() => {
+    setIsRefreshing(true);
+    const customParams = timeRange === 'custom' ? `&customFrom=${customFrom}&customTo=${customTo}` : '';
+    fetch(`/api/telemetry/tokens?timeRange=${timeRange}&breakdownTab=${breakdownTab}&cadence=${cadence}${customParams}`)
+      .then(res => res.json())
+      .then(data => {
+        if (data.timeRanges) setTimeRanges(data.timeRanges);
+        if (data.metrics) setActiveMetrics(data.metrics);
+        if (data.breakdownRows) setActiveBreakdownRows(data.breakdownRows);
+        if (data.chartSeries) setChartSeries(data.chartSeries);
+      })
+      .catch(err => console.error('Failed to load token telemetry:', err))
+      .finally(() => setIsRefreshing(false));
+  }, [timeRange, breakdownTab, cadence, customFrom, customTo]);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  const handleRefresh = () => {
+    loadData();
+  };
+
+  const selectedRangeObj = timeRanges.find((r) => r.id === timeRange) || timeRanges[0] || { id: timeRange, label: timeRange, dateRange: 'Current Period' };
+  const periodLabel = timeRange === 'custom'
+    ? `${customFrom} to ${customTo}`
+    : selectedRangeObj.dateRange;
+
+  if (!activeMetrics) {
+    return (
+      <div className="flex items-center justify-center p-8 text-ink/40 text-xs">
+        Loading token usage telemetry...
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full space-y-4 text-ink pb-2 text-xs">
+      {/* Filter and Controls Bar */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-3 border-b border-ink/10">
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-semibold text-ink/75">{periodLabel}</span>
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          {/* Cadence Switcher: Daily -> Weekly -> Monthly */}
+          <div className="flex items-center bg-paper border border-ink/15 rounded-md text-[11px] font-medium overflow-hidden">
+            <button
+              onClick={() => setCadence('daily')}
+              className={`px-2.5 py-1 transition-colors ${
+                cadence === 'daily' ? 'bg-ink/10 text-ink font-semibold' : 'text-ink/65 hover:bg-ink/5 hover:text-ink'
+              }`}
+            >
+              Daily
+            </button>
+            <button
+              onClick={() => setCadence('weekly')}
+              className={`px-2.5 py-1 transition-colors ${
+                cadence === 'weekly' ? 'bg-ink/10 text-ink font-semibold' : 'text-ink/65 hover:bg-ink/5 hover:text-ink'
+              }`}
+            >
+              Weekly
+            </button>
+            <button
+              onClick={() => setCadence('monthly')}
+              className={`px-2.5 py-1 transition-colors ${
+                cadence === 'monthly' ? 'bg-ink/10 text-ink font-semibold' : 'text-ink/65 hover:bg-ink/5 hover:text-ink'
+              }`}
+            >
+              Monthly
+            </button>
+          </div>
+
+          {/* Time Range Dropdown */}
+          <div className="relative" ref={dropdownRef}>
+            <button
+              onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+              className="flex items-center gap-1.5 px-2.5 py-1 bg-paper border border-ink/15 rounded-md text-[11px] font-medium hover:bg-ink/5 text-ink/80 transition-colors"
+            >
+              <span>{selectedRangeObj.label}</span>
+              <ChevronDown size={12} className={`transition-transform duration-150 ${isDropdownOpen ? 'rotate-180' : ''}`} />
+            </button>
+
+            {isDropdownOpen && (
+              <div className="absolute right-0 top-full mt-1 w-44 bg-paper border border-ink/15 rounded-md shadow-lg z-30 py-1 text-[11px] divide-y divide-ink/5">
+                {timeRanges.map((range) => (
+                  <button
+                    key={range.id}
+                    onClick={() => {
+                      setTimeRange(range.id);
+                      if (range.id !== 'custom') setIsDropdownOpen(false);
+                    }}
+                    className={`w-full flex items-center justify-between px-3 py-1.5 text-left hover:bg-ink/5 transition-colors ${
+                      timeRange === range.id ? 'font-semibold text-ink bg-ink/5' : 'text-ink/70'
+                    }`}
+                  >
+                    <span>{range.label}</span>
+                    {timeRange === range.id && <Check size={12} className="text-ink" />}
+                  </button>
+                ))}
+                {timeRange === 'custom' && (
+                  <div className="px-3 py-2 space-y-2">
+                    <label className="block">
+                      <span className="text-[9px] font-mono uppercase tracking-wider text-ink/40">From</span>
+                      <input
+                        type="date"
+                        value={customFrom}
+                        max={customTo}
+                        onChange={(e) => setCustomFrom(e.currentTarget.value)}
+                        className="mt-0.5 w-full bg-paper border border-ink/15 rounded px-1.5 py-1 text-[11px] text-ink focus:outline-none focus:border-ink/40"
+                      />
+                    </label>
+                    <label className="block">
+                      <span className="text-[9px] font-mono uppercase tracking-wider text-ink/40">To</span>
+                      <input
+                        type="date"
+                        value={customTo}
+                        min={customFrom}
+                        max={today}
+                        onChange={(e) => setCustomTo(e.currentTarget.value)}
+                        className="mt-0.5 w-full bg-paper border border-ink/15 rounded px-1.5 py-1 text-[11px] text-ink focus:outline-none focus:border-ink/40"
+                      />
+                    </label>
+                    <button
+                      onClick={() => setIsDropdownOpen(false)}
+                      className="w-full bg-ink/10 hover:bg-ink/20 text-ink font-semibold rounded px-2 py-1 transition-colors"
+                    >
+                      Apply
+                    </button>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Refresh Button */}
+          <button
+            onClick={handleRefresh}
+            className="p-1.5 bg-paper border border-ink/15 rounded-md hover:bg-ink/5 text-ink/80 transition-colors"
+            title="Refresh Token Telemetry"
+          >
+            <RefreshCw size={12} className={isRefreshing ? 'animate-spin text-ink' : ''} />
+          </button>
+        </div>
+      </div>
+
+      {/* Top Section: Cost & Chart */}
+      <div className="grid grid-cols-1 xl:grid-cols-2 gap-3">
+        {/* Raw Token Cost */}
+        <div className="bg-paper border border-ink/15 rounded-lg p-3.5 shadow-xs flex flex-col justify-between">
+          <div>
+            <div className="text-[10px] font-mono font-semibold text-ink/40 tracking-wider uppercase mb-2">
+              USAGECONFIG.RAWTOKENCOST
+            </div>
+            <div className="flex items-baseline gap-1 mb-0.5">
+              <span className="text-2xl font-bold tracking-tight text-ink">{activeMetrics.rawCost}</span>
+              <span className="text-xs font-semibold text-ink/50">*</span>
+            </div>
+            <p className="text-[11px] text-ink/50 mb-4">* if billed at full API rate</p>
+          </div>
+
+          <div>
+            <div className="h-1.5 w-full bg-ink/10 rounded-full mb-2 overflow-hidden flex">
+              <div className="h-full bg-ink/80 rounded-full" style={{ width: '100%' }}></div>
+            </div>
+            <div className="flex items-center justify-between text-[11px]">
+              <div className="flex items-center gap-1.5">
+                <div className="w-2 h-2 rounded-full bg-ink/80"></div>
+                <span className="font-semibold text-ink">DeepSeek</span>
+              </div>
+              <div className="flex items-center gap-3 text-ink/70">
+                <span className="font-bold text-ink">{activeMetrics.rawCost}</span>
+                <span>100.0% share</span>
+                <span>{activeMetrics.processedTokens}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      {/* Cost / Token Chart */}
+      <div className="bg-paper border border-ink/15 rounded-lg p-3.5 shadow-xs flex flex-col">
+        <div className="flex justify-between items-start mb-3">
+          <div className="flex items-center gap-2">
+            <span className="font-semibold text-xs text-ink capitalize">{cadence} {chartMetric}</span>
+            <div className="flex items-center gap-1">
+              <div className="w-1.5 h-1.5 rounded-full bg-ink/80"></div>
+              <span className="text-[11px] text-ink/60">DeepSeek</span>
+            </div>
+          </div>
+          <div className="flex bg-ink/5 rounded p-0.5">
+            <button
+              onClick={() => setChartMetric('cost')}
+              className={`px-2 py-0.5 rounded text-[9px] font-bold tracking-wider transition-colors ${
+                chartMetric === 'cost' ? 'bg-paper shadow-xs text-ink' : 'text-ink/50 hover:text-ink'
+              }`}
+            >
+              COST
+            </button>
+            <button
+              onClick={() => setChartMetric('tokens')}
+              className={`px-2 py-0.5 rounded text-[9px] font-bold tracking-wider transition-colors ${
+                chartMetric === 'tokens' ? 'bg-paper shadow-xs text-ink' : 'text-ink/50 hover:text-ink'
+              }`}
+            >
+              TOKENS
+            </button>
+          </div>
+        </div>
+        <UsageChart cadence={cadence} metric={chartMetric} series={chartSeries} />
+      </div>
+      </div>
+
+      {/* Grid of 5 Stats (Aligned & Symmetrical) */}
+      <TokenUsageMetricsGrid activeMetrics={activeMetrics} />
+
+      {/* Bottom Section: Breakdown & Cost Quality */}
+      <TokenUsageBreakdown
+        breakdownTab={breakdownTab}
+        setBreakdownTab={setBreakdownTab}
+        activeBreakdownRows={activeBreakdownRows}
+        activeMetrics={activeMetrics}
+        cadence={cadence}
+      />
+
+      <div className="text-center text-[10px] text-ink/40 pt-2">
+        Scanned {activeMetrics.scannedTranscripts} transcripts (1 outside the window) · {activeMetrics.usageRecords} usage records · 0.1s
+      </div>
+    </div>
+  );
+}

package/src/client/components/settings/categories/UsageSettings.tsx

@@ -0,0 +1,77 @@
+import { useState } from 'preact/hooks';
+import { AlertCircle, RefreshCw } from 'lucide-preact';
+import { UsageSidebarList } from '@/client/components/settings/categories/usage-settings/SidebarList';
+import type { UsageProviderId } from '@/client/components/settings/categories/usage-settings/providers';
+import { ProviderDetail } from '@/client/components/settings/categories/usage-settings/ProviderDetail';
+import { formatDateTime } from '@/client/components/settings/categories/usage-settings/format';
+import { useUsageReport } from '@/client/hooks/settings/useUsageReport';
+
+/** Settings → Usage: provider balances, quota, and 30-day spend. */
+export function UsageSettings() {
+  const { report, isLoading, error, reload } = useUsageReport();
+  const [selectedProviderId, setSelectedProviderId] = useState<UsageProviderId>('kenari');
+
+  if (error && !report) {
+    return (
+      <div className="flex h-full w-full flex-col items-center justify-center gap-2 p-8 text-center text-xs">
+        <AlertCircle size={16} className="text-error" />
+        <p className="text-error text-xs">{error}</p>
+        <button
+          type="button"
+          onClick={() => reload()}
+          className="text-[11px] font-semibold text-ink/70 hover:text-ink underline underline-offset-2"
+        >
+          Try again
+        </button>
+      </div>
+    );
+  }
+
+  if (!report) {
+    return (
+      <div className="flex h-full w-full items-center justify-center text-ink/40 text-xs">
+        Loading provider usage...
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full w-full overflow-hidden bg-paper text-xs text-ink">
+      <UsageSidebarList
+        report={report}
+        selectedProviderId={selectedProviderId}
+        onSelectProvider={setSelectedProviderId}
+      />
+
+      <div className="flex-1 h-full overflow-hidden flex flex-col">
+        <div className="px-3.5 py-2.5 border-b border-ink/10 flex items-center justify-between gap-3 flex-shrink-0">
+          <div className="flex items-center gap-2 min-w-0">
+            <span className="text-xs font-semibold text-ink/75 truncate">
+              Updated {formatDateTime(report.generatedAt)}
+            </span>
+            {report.isMock && (
+              <span className="text-[10px] font-mono uppercase tracking-wider bg-ink/5 border border-ink/15 rounded px-1.5 py-0.5 text-ink/60">
+                Mock
+              </span>
+            )}
+          </div>
+          <button
+            type="button"
+            onClick={() => reload()}
+            disabled={isLoading}
+            className="p-1.5 bg-paper border border-ink/15 rounded-md hover:bg-ink/5 text-ink/80 transition-colors disabled:opacity-50 flex-shrink-0"
+            title="Refresh usage"
+          >
+            <RefreshCw size={12} className={isLoading ? 'animate-spin text-ink' : ''} />
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto scrollbar-overlay-container scrollbar-overlay-static p-3.5 space-y-4">
+          {error && <p className="text-error text-xs">{error}</p>}
+
+          <ProviderDetail providerId={selectedProviderId} report={report} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/components/settings/categories/agent-settings/DetailPane.tsx

@@ -0,0 +1,333 @@
+import { useEffect, useState } from 'preact/hooks';
+import type { FormEvent, FunctionComponent } from 'preact/compat';
+import { Check, Copy, Info, Minus, PenTool, Plus, Trash2 } from 'lucide-preact';
+import type { AgentItem, AgentMode, AgentScope } from '@/shared/types';
+
+interface AgentDetailPaneProps {
+  agent: AgentItem;
+  isNew?: boolean;
+  onSave: (updatedAgent: AgentItem) => void;
+  onDelete?: (agentId: string) => void;
+}
+
+const AVAILABLE_MODELS = [
+  'Not selected',
+  'claude-3-7-sonnet-20250219',
+  'claude-3-5-sonnet-20241022',
+  'claude-3-5-haiku-20241022',
+  'gpt-4o',
+  'gpt-4o-mini',
+  'o3-mini',
+  'gemini-2.5-pro-preview-03-25',
+  'gemini-2.5-flash',
+  'deepseek-chat-v3',
+  'deepseek-reasoner-r1',
+];
+
+export const AgentDetailPane: FunctionComponent<AgentDetailPaneProps> = ({
+  agent,
+  isNew = false,
+  onSave,
+  onDelete,
+}) => {
+  const [formData, setFormData] = useState<AgentItem>(agent);
+  const [savedSuccess, setSavedSuccess] = useState(false);
+  const [copiedPrompt, setCopiedPrompt] = useState(false);
+
+  useEffect(() => {
+    setFormData(agent);
+    setSavedSuccess(false);
+  }, [agent]);
+
+  const handleSave = (e: FormEvent) => {
+    e.preventDefault();
+    onSave(formData);
+    setSavedSuccess(true);
+    setTimeout(() => setSavedSuccess(false), 2000);
+  };
+
+  const handleCopyPrompt = () => {
+    navigator.clipboard.writeText(formData.systemPrompt);
+    setCopiedPrompt(true);
+    setTimeout(() => setCopiedPrompt(false), 1800);
+  };
+
+  const adjustTemp = (delta: number) => {
+    setFormData((prev) => {
+      const current = prev.temperature ?? 0.7;
+      const next = Math.max(0, Math.min(2.0, parseFloat((current + delta).toFixed(2))));
+      return { ...prev, temperature: next };
+    });
+  };
+
+  const adjustTopP = (delta: number) => {
+    setFormData((prev) => {
+      const current = prev.topP ?? 0.95;
+      const next = Math.max(0, Math.min(1.0, parseFloat((current + delta).toFixed(2))));
+      return { ...prev, topP: next };
+    });
+  };
+
+  return (
+    <form onSubmit={handleSave} className="flex-1 flex flex-col h-full scrollbar-overlay-container scrollbar-overlay-static bg-paper text-ink p-6 md:p-8 space-y-6">
+      {/* SECTION 1: Identity & Role */}
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <h2 className="text-xs font-bold uppercase tracking-wider text-ink">
+            Identity & Role
+          </h2>
+          {formData.isBuiltIn && (
+            <span className="text-[10px] font-mono px-2 py-0.5 rounded-md bg-ink/5 border border-ink/10 text-ink/60">
+              Built-in System Agent (Read-only System Core)
+            </span>
+          )}
+        </div>
+
+        {/* Name and Scope row */}
+        <div className="flex items-center gap-3">
+          <div className="flex-1">
+            <label className="block text-xs font-semibold text-ink/80 mb-1.5">
+              Agent Name
+            </label>
+            <div className="flex items-center border border-ink/20 hover:border-ink/40 focus-within:border-ink rounded-lg bg-paper transition-colors">
+              <span className="px-3 py-2 font-mono text-xs text-ink/40 border-r border-ink/15 select-none">
+                @
+              </span>
+              <input
+                type="text"
+                value={formData.name}
+                onChange={(e) => setFormData({ ...formData, name: e.currentTarget.value })}
+                required
+                placeholder="agent-name"
+                disabled={formData.isBuiltIn}
+                className="w-full text-xs font-mono px-3 py-2 bg-transparent focus:outline-none disabled:opacity-60 text-ink"
+              />
+            </div>
+          </div>
+
+          <div className="w-40">
+            <label className="block text-xs font-semibold text-ink/80 mb-1.5">
+              Scope
+            </label>
+            <select
+              value={formData.scope}
+              onChange={(e) => setFormData({ ...formData, scope: e.currentTarget.value as AgentScope })}
+              disabled={formData.isBuiltIn}
+              className="w-full text-xs py-2 px-3 rounded-lg border border-ink/20 hover:border-ink/40 bg-paper focus:outline-none focus:border-ink disabled:opacity-60 text-ink transition-colors cursor-pointer"
+            >
+              <option value="user">user</option>
+              <option value="project">project</option>
+              <option value="system">system</option>
+            </select>
+          </div>
+        </div>
+
+        {/* Description */}
+        <div>
+          <label className="block text-xs font-semibold text-ink/80 mb-1.5">
+            Description
+          </label>
+          <textarea
+            value={formData.description}
+            onChange={(e) => setFormData({ ...formData, description: e.currentTarget.value })}
+            placeholder="What does this agent do?"
+            rows={2}
+            className="w-full text-xs p-3 rounded-lg border border-ink/20 hover:border-ink/40 bg-paper focus:outline-none focus:border-ink placeholder:text-ink/30 text-ink transition-colors"
+          />
+        </div>
+
+        {/* Mode Segmented Pills */}
+        <div>
+          <div className="flex items-center gap-1.5 mb-1.5">
+            <label className="text-xs font-semibold text-ink/80">Mode</label>
+            <span title="Defines agent delegation context (primary, subagent, or all)">
+              <Info className="w-3.5 h-3.5 text-ink/40" />
+            </span>
+          </div>
+          <div className="inline-flex rounded-lg border border-ink/15 p-0.5 bg-ink/5">
+            {(['primary', 'subagent', 'all'] as AgentMode[]).map((mode) => (
+              <button
+                type="button"
+                key={mode}
+                onClick={() => setFormData({ ...formData, mode })}
+                className={`px-3 py-1 text-xs rounded-md transition-colors cursor-pointer capitalize ${
+                  formData.mode === mode
+                    ? 'bg-paper text-ink shadow-xs font-semibold'
+                    : 'text-ink/60 hover:text-ink'
+                }`}
+              >
+                {mode}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="border-t border-ink/10" />
+
+      {/* SECTION 2: Model & Parameters */}
+      <div className="space-y-3">
+        <h2 className="text-xs font-bold uppercase tracking-wider text-ink">
+          Model & Parameters
+        </h2>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {/* Override Model */}
+          <div>
+            <label className="block text-xs font-semibold text-ink/80 mb-1.5">
+              Override Model
+            </label>
+            <div className="flex items-center border border-ink/20 hover:border-ink/40 focus-within:border-ink rounded-lg bg-paper transition-colors">
+              <span className="px-2.5 text-ink/40">
+                <PenTool className="w-3.5 h-3.5" />
+              </span>
+              <select
+                value={formData.overrideModel || 'Not selected'}
+                onChange={(e) => setFormData({ ...formData, overrideModel: e.currentTarget.value })}
+                className="w-full text-xs font-mono py-2 pr-3 bg-transparent focus:outline-none cursor-pointer text-ink"
+              >
+                {AVAILABLE_MODELS.map((m) => (
+                  <option key={m} value={m}>
+                    {m}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {/* Thinking Variant */}
+          <div>
+            <div className="flex items-center gap-1 mb-1.5">
+              <label className="text-xs font-semibold text-ink/80">Thinking Variant</label>
+              <span title="Controls chain-of-thought token depth">
+                <Info className="w-3.5 h-3.5 text-ink/40" />
+              </span>
+            </div>
+            <input
+              type="text"
+              value={formData.thinkingVariant || 'default'}
+              onChange={(e) => setFormData({ ...formData, thinkingVariant: e.currentTarget.value })}
+              placeholder="default"
+              className="w-full text-xs font-mono px-3 py-2 rounded-lg border border-ink/20 hover:border-ink/40 bg-paper focus:outline-none focus:border-ink text-ink transition-colors"
+            />
+          </div>
+
+          {/* Temperature Stepper */}
+          <div>
+            <div className="flex items-center gap-1 mb-1.5">
+              <label className="text-xs font-semibold text-ink/80">Temperature</label>
+              <span title="Higher values make output more random, lower values more deterministic">
+                <Info className="w-3.5 h-3.5 text-ink/40" />
+              </span>
+            </div>
+            <div className="flex items-center border border-ink/20 rounded-lg max-w-[150px] bg-paper overflow-hidden">
+              <button
+                type="button"
+                onClick={() => adjustTemp(-0.05)}
+                className="px-3 py-1.5 text-ink/60 hover:text-ink hover:bg-ink/5 transition-colors cursor-pointer"
+              >
+                <Minus className="w-3.5 h-3.5" />
+              </button>
+              <span className="flex-1 text-center font-mono text-xs font-medium text-ink">
+                {formData.temperature != null ? formData.temperature.toFixed(2) : '—'}
+              </span>
+              <button
+                type="button"
+                onClick={() => adjustTemp(0.05)}
+                className="px-3 py-1.5 text-ink/60 hover:text-ink hover:bg-ink/5 transition-colors cursor-pointer"
+              >
+                <Plus className="w-3.5 h-3.5" />
+              </button>
+            </div>
+          </div>
+
+          {/* Top P Stepper */}
+          <div>
+            <div className="flex items-center gap-1 mb-1.5">
+              <label className="text-xs font-semibold text-ink/80">Top P</label>
+              <span title="Nucleus sampling cutoff">
+                <Info className="w-3.5 h-3.5 text-ink/40" />
+              </span>
+            </div>
+            <div className="flex items-center border border-ink/20 rounded-lg max-w-[150px] bg-paper overflow-hidden">
+              <button
+                type="button"
+                onClick={() => adjustTopP(-0.05)}
+                className="px-3 py-1.5 text-ink/60 hover:text-ink hover:bg-ink/5 transition-colors cursor-pointer"
+              >
+                <Minus className="w-3.5 h-3.5" />
+              </button>
+              <span className="flex-1 text-center font-mono text-xs font-medium text-ink">
+                {formData.topP != null ? formData.topP.toFixed(2) : '—'}
+              </span>
+              <button
+                type="button"
+                onClick={() => adjustTopP(0.05)}
+                className="px-3 py-1.5 text-ink/60 hover:text-ink hover:bg-ink/5 transition-colors cursor-pointer"
+              >
+                <Plus className="w-3.5 h-3.5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="border-t border-ink/10" />
+
+      {/* SECTION 3: System Prompt */}
+      <div className="space-y-2 flex-1 flex flex-col">
+        <div className="flex items-center justify-between">
+          <label className="text-xs font-bold uppercase tracking-wider text-ink">
+            System Prompt
+          </label>
+          <button
+            type="button"
+            onClick={handleCopyPrompt}
+            className="flex items-center gap-1.5 text-xs text-ink/60 hover:text-ink transition-colors cursor-pointer"
+          >
+            {copiedPrompt ? <Check className="w-3.5 h-3.5 text-ink" /> : <Copy className="w-3.5 h-3.5" />}
+            <span>{copiedPrompt ? 'Copied' : 'Copy'}</span>
+          </button>
+        </div>
+        <textarea
+          value={formData.systemPrompt}
+          onChange={(e) => setFormData({ ...formData, systemPrompt: e.currentTarget.value })}
+          rows={7}
+          placeholder="You are an expert coding assistant..."
+          className="w-full flex-1 min-h-[140px] text-xs font-mono p-3 rounded-lg border border-ink/20 hover:border-ink/40 bg-ink/5 focus:outline-none focus:border-ink leading-relaxed transition-colors"
+        />
+      </div>
+
+      {/* Footer Controls */}
+      <div className="pt-3 border-t border-ink/10 flex items-center justify-between">
+        <div>
+          {!formData.isBuiltIn && !isNew && onDelete && (
+            <button
+              type="button"
+              onClick={() => onDelete(formData.id)}
+              className="flex items-center gap-1.5 px-3.5 py-2 rounded-lg border border-ink/20 hover:border-error hover:text-error text-ink/70 text-xs font-medium transition-colors cursor-pointer"
+            >
+              <Trash2 className="w-3.5 h-3.5" />
+              Delete Agent
+            </button>
+          )}
+        </div>
+
+        <div className="flex items-center gap-3">
+          {savedSuccess && (
+            <span className="flex items-center gap-1 text-xs text-ink font-medium">
+              <Check className="w-3.5 h-3.5" />
+              Saved successfully
+            </span>
+          )}
+          <button
+            type="submit"
+            className="px-4 py-2 rounded-lg bg-ink text-paper text-xs font-medium hover:bg-ink/90 transition-colors shadow-xs cursor-pointer"
+          >
+            {isNew ? 'Create Agent' : 'Save Agent'}
+          </button>
+        </div>
+      </div>
+    </form>
+  );
+};