@aion0/forge 0.6.3 → 0.8.0

package/components/SettingsModal.tsx

@@ -426,6 +426,9 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
         {/* Agents */}
         <AgentsSection settings={settings} setSettings={setSettings} />
 
+        {/* Temper memory (used by chat backend) */}
+        <TemperSection settings={settings} setSettings={setSettings} secretStatus={secretStatus} setEditingSecret={setEditingSecret} />
+
         {/* Telegram Notifications */}
         <div className="space-y-2">
           <label className="text-xs text-[var(--text-secondary)] font-semibold uppercase">
@@ -850,21 +853,33 @@ function ProfileRow({ id, cfg, inputClass, onUpdate, onDelete }: {
             </div>
           </div>
           {isApi ? (
-            <div className="flex gap-2">
-              <div className="flex-1">
-                <label className="text-[8px] text-[var(--text-secondary)]">Provider</label>
-                <select value={cfg.provider || 'anthropic'} onChange={e => onUpdate({ ...cfg, provider: e.target.value })} className={inputClass}>
-                  <option value="anthropic">Anthropic</option>
-                  <option value="google">Google</option>
-                  <option value="openai">OpenAI</option>
-                  <option value="grok">Grok</option>
-                </select>
+            <>
+              <div className="flex gap-2">
+                <div className="flex-1">
+                  <label className="text-[8px] text-[var(--text-secondary)]">Provider</label>
+                  <select value={cfg.provider || 'anthropic'} onChange={e => onUpdate({ ...cfg, provider: e.target.value })} className={inputClass}>
+                    <option value="anthropic">Anthropic</option>
+                    <option value="openai">OpenAI</option>
+                    <option value="litellm">LiteLLM (OpenAI-compatible proxy)</option>
+                    <option value="grok">Grok</option>
+                    <option value="google">Google</option>
+                  </select>
+                </div>
+                <div className="flex-1">
+                  <label className="text-[8px] text-[var(--text-secondary)]">API Key</label>
+                  <input type="password" value={cfg.apiKey || ''} onChange={e => onUpdate({ ...cfg, apiKey: e.target.value })} className={inputClass} />
+                </div>
               </div>
-              <div className="flex-1">
-                <label className="text-[8px] text-[var(--text-secondary)]">API Key (optional)</label>
-                <input type="password" value={cfg.apiKey || ''} onChange={e => onUpdate({ ...cfg, apiKey: e.target.value })} className={inputClass} />
+              <div>
+                <label className="text-[8px] text-[var(--text-secondary)]">Base URL (optional · LiteLLM / Azure / self-hosted proxy)</label>
+                <input
+                  value={cfg.baseUrl || ''}
+                  onChange={e => onUpdate({ ...cfg, baseUrl: e.target.value })}
+                  placeholder={cfg.provider === 'anthropic' ? 'https://api.anthropic.com' : 'http://127.0.0.1:4000/v1'}
+                  className={inputClass + ' font-mono'}
+                />
               </div>
-            </div>
+            </>
           ) : (
             <>
               <div>
@@ -936,6 +951,7 @@ function AddProfileForm({ type, baseAgents, onAdd }: {
   const [base, setBase] = useState(baseAgents[0]?.id || 'claude');
   const [model, setModel] = useState('');
   const [provider, setProvider] = useState('anthropic');
+  const [baseUrl, setBaseUrl] = useState('');
   const [envText, setEnvText] = useState('');
   const [apiKey, setApiKey] = useState('');
 
@@ -996,10 +1012,10 @@ function AddProfileForm({ type, baseAgents, onAdd }: {
     if (type === 'cli') {
       onAdd(id, { cliType: base === 'claude' ? 'claude-code' : base, name: name || id, model: model || undefined, env: parseEnv() });
     } else {
-      onAdd(id, { type: 'api', name: name || id, provider, model: model || undefined, apiKey: apiKey || undefined });
+      onAdd(id, { type: 'api', name: name || id, provider, model: model || undefined, apiKey: apiKey || undefined, baseUrl: baseUrl || undefined });
     }
     setOpen(false);
-    setId(''); setName(''); setModel(''); setApiKey(''); setEnvText('');
+    setId(''); setName(''); setModel(''); setApiKey(''); setEnvText(''); setBaseUrl('');
   };
 
   return (
@@ -1068,9 +1084,10 @@ function AddProfileForm({ type, baseAgents, onAdd }: {
               <label className="text-[8px] text-[var(--text-secondary)]">Provider</label>
               <select value={provider} onChange={e => setProvider(e.target.value)} className={inputClass}>
                 <option value="anthropic">Anthropic</option>
-                <option value="google">Google</option>
                 <option value="openai">OpenAI</option>
+                <option value="litellm">LiteLLM (OpenAI-compatible proxy)</option>
                 <option value="grok">Grok</option>
+                <option value="google">Google</option>
               </select>
             </div>
             <div className="flex-1">
@@ -1079,9 +1096,18 @@ function AddProfileForm({ type, baseAgents, onAdd }: {
             </div>
           </div>
           <div>
-            <label className="text-[8px] text-[var(--text-secondary)]">API Key (optional, uses provider key if empty)</label>
+            <label className="text-[8px] text-[var(--text-secondary)]">API Key</label>
             <input type="password" value={apiKey} onChange={e => setApiKey(e.target.value)} placeholder="sk-..." className={inputClass} />
           </div>
+          <div>
+            <label className="text-[8px] text-[var(--text-secondary)]">Base URL (optional · LiteLLM / Azure / self-hosted)</label>
+            <input
+              value={baseUrl}
+              onChange={e => setBaseUrl(e.target.value)}
+              placeholder={provider === 'anthropic' ? 'https://api.anthropic.com' : 'http://127.0.0.1:4000/v1'}
+              className={inputClass + ' font-mono'}
+            />
+          </div>
         </>
       )}
       <div className="flex gap-2">
@@ -1556,33 +1582,196 @@ function AgentsSection({ settings, setSettings }: { settings: any; setSettings:
         </div>
       </div>
 
-      {/* ── Providers Section ── */}
-      <div className="mt-4 pt-3 border-t border-[var(--border)]">
-        <label className="text-xs text-[var(--text-secondary)] font-semibold uppercase mb-2 block">API Providers</label>
-        {['anthropic', 'google', 'openai', 'grok'].map(name => {
-          const provider = settings.providers?.[name] || {};
-          const secretKey = `providers.${name}.apiKey`;
-          const hasKey = (provider.apiKey && provider.apiKey !== '••••••••') || settings._secretStatus?.[secretKey];
+      {/* ── Chat default agent ── */}
+      <ChatAgentSelect settings={settings} setSettings={setSettings} />
+    </div>
+  );
+}
+
+// ─── Temper memory section ────────────────────────────────
+//
+// When configured, Forge's chat backend pre-fetches pinned blocks + all
+// blocks + a semantic search for each user turn, inlines them into the
+// system prompt, and exposes memory_* tools to the LLM. Leave both URL
+// and key empty to skip memory I/O entirely.
+function TemperSection({ settings, setSettings, secretStatus, setEditingSecret }: {
+  settings: any;
+  setSettings: (s: any) => void;
+  secretStatus: Record<string, boolean>;
+  setEditingSecret: (e: { field: string; label: string } | null) => void;
+}) {
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState<string>('');
+  const [status, setStatus] = useState<{ backend: 'temper' | 'local'; ok: boolean; pinned: number } | null>(null);
+
+  // Probe the active backend on mount so the badge is accurate before
+  // the user clicks Test. Cheap — local just counts a row in sqlite,
+  // Temper does one GET.
+  useEffect(() => {
+    let aborted = false;
+    fetch('/api/chat/temper-ping', { method: 'POST' })
+      .then(r => r.json())
+      .then(j => {
+        if (aborted) return;
+        if (j && (j.backend === 'temper' || j.backend === 'local')) {
+          setStatus({ backend: j.backend, ok: !!j.ok, pinned: j.pinned ?? 0 });
+        }
+      })
+      .catch(() => { /* ignore — badge stays "?" */ });
+    return () => { aborted = true; };
+  }, []);
+
+  async function test() {
+    setTesting(true);
+    setTestResult('');
+    try {
+      // Save first so server-side test sees current values
+      await fetch('/api/settings', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(settings),
+      });
+      const r = await fetch('/api/chat/temper-ping', { method: 'POST' });
+      const j = await r.json();
+      setTestResult(j.ok ? `✓ ${j.message}` : `✗ ${j.message}`);
+      if (j && (j.backend === 'temper' || j.backend === 'local')) {
+        setStatus({ backend: j.backend, ok: !!j.ok, pinned: j.pinned ?? 0 });
+      }
+    } catch (e) {
+      setTestResult('✗ ' + (e instanceof Error ? e.message : String(e)));
+    } finally { setTesting(false); }
+  }
+
+  const isLocal = status?.backend === 'local';
+  const badgeColor = !status
+    ? 'border-[var(--border)] text-[var(--text-secondary)]'
+    : status.ok && status.backend === 'temper'
+      ? 'border-green-500 text-green-400'
+      : status.ok
+        ? 'border-[var(--accent)] text-[var(--accent)]'
+        : 'border-red-500 text-red-400';
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center gap-2">
+        <label className="text-xs text-[var(--text-secondary)] font-semibold uppercase">
+          Memory
+        </label>
+        <span className={`text-[9px] uppercase tracking-wide px-1.5 py-[1px] rounded border ${badgeColor}`}>
+          {!status ? 'checking…' : status.backend === 'temper' ? `Temper · ${status.pinned} pinned` : `Local · ${status.pinned} pinned`}
+        </span>
+      </div>
+      <p className="text-[10px] text-[var(--text-secondary)]">
+        Long-term memory backend for the chat agent. Pinned blocks auto-inject into every system prompt; the LLM gets memory_* tools to read/write on demand.
+      </p>
+
+      {/* Backend selector — explicit override, or auto-pick based on credentials */}
+      <div className="flex items-center gap-3 pt-1">
+        <span className="text-[10px] text-[var(--text-secondary)] uppercase">Backend</span>
+        {(['auto', 'local', 'temper'] as const).map((mode) => {
+          const active = (settings.memoryBackend || 'auto') === mode;
           return (
-            <div key={name} className="flex items-center gap-2 px-2 py-1.5 mb-1 rounded" style={{ background: 'var(--bg-tertiary)' }}>
-              <span className="text-[10px] text-[var(--text-primary)] w-20 font-semibold capitalize">{name}</span>
+            <label
+              key={mode}
+              className={`flex items-center gap-1 text-[10px] cursor-pointer px-2 py-0.5 rounded border transition-colors ${
+                active
+                  ? 'border-[var(--accent)] text-[var(--accent)] bg-[var(--accent)]/5'
+                  : 'border-[var(--border)] text-[var(--text-secondary)] hover:border-[var(--accent)]/40'
+              }`}
+            >
               <input
-                type="password"
-                placeholder="API Key"
-                value={provider.apiKey || ''}
-                onChange={e => setSettings({
-                  ...settings,
-                  providers: { ...settings.providers, [name]: { ...provider, apiKey: e.target.value } }
-                })}
-                className="flex-1 text-[9px] px-2 py-0.5 bg-[var(--bg-secondary)] border border-[var(--border)] rounded text-[var(--text-primary)] font-mono focus:outline-none focus:border-[var(--accent)]"
+                type="radio"
+                name="memoryBackend"
+                value={mode}
+                checked={active}
+                onChange={() => setSettings({ ...settings, memoryBackend: mode })}
+                className="sr-only"
               />
-              <span className={`text-[8px] ${hasKey ? 'text-green-400' : 'text-gray-600'}`}>
-                {hasKey ? '● set' : '○'}
-              </span>
-            </div>
+              {mode === 'auto' ? 'Auto' : mode === 'local' ? 'Local (SQLite)' : 'Temper'}
+            </label>
           );
         })}
       </div>
+      <p className="text-[10px] text-[var(--text-secondary)] leading-snug">
+        <b>Auto</b>: Temper if URL+key are set, otherwise local.&nbsp;
+        <b>Local</b>: always SQLite in <code>workflow.db</code> (keyword search).&nbsp;
+        <b>Temper</b>: always Temper for semantic + graph search via Graphiti.
+        {isLocal && (
+          <>
+            <br />
+            <span className="italic">Local mode active — <code>memory_search</code> is keyword LIKE; <code>memory_remember_event</code> appends rows without graph extraction.</span>
+          </>
+        )}
+      </p>
+      <input
+        value={settings.temperUrl || ''}
+        onChange={e => setSettings({ ...settings, temperUrl: e.target.value })}
+        placeholder="http://127.0.0.1:18088"
+        className="w-full px-2 py-1.5 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] font-mono focus:outline-none focus:border-[var(--accent)]"
+      />
+      <SecretField
+        label="API Key"
+        description="X-API-Key header value"
+        isSet={!!secretStatus.temperKey || !!settings.temperKey}
+        onEdit={() => setEditingSecret({ field: 'temperKey', label: 'Temper API Key' })}
+      />
+      <input
+        value={settings.temperNamespace || ''}
+        onChange={e => setSettings({ ...settings, temperNamespace: e.target.value })}
+        placeholder="Namespace override (optional · empty = use the key's default)"
+        className="w-full px-2 py-1.5 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] font-mono focus:outline-none focus:border-[var(--accent)]"
+      />
+      <div className="flex items-center gap-3">
+        <button
+          type="button"
+          onClick={test}
+          disabled={testing}
+          className="text-[10px] px-2 py-0.5 border border-[var(--accent)] text-[var(--accent)] rounded hover:bg-[var(--accent)] hover:text-white transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+        >
+          {testing ? 'Testing…' : 'Test'}
+        </button>
+        {testResult && (
+          <span className={`text-[10px] ${testResult.startsWith('✓') ? 'text-green-400' : 'text-red-400'}`}>{testResult}</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── Chat default agent selector ──────────────────────────
+//
+// Forge's chat backend (used by extension, web /chat tab, forge chat CLI,
+// Telegram /chat) picks the API profile listed here. The user can override
+// per-session by setting Session.provider to a profile id.
+function ChatAgentSelect({ settings, setSettings }: { settings: any; setSettings: (s: any) => void }) {
+  const apiProfiles = Object.entries(settings.agents || {})
+    .filter(([, a]: [string, any]) => a && a.type === 'api' && a.enabled !== false);
+
+  return (
+    <div className="mt-4 pt-3 border-t border-[var(--border)]">
+      <label className="text-xs text-[var(--text-secondary)] font-semibold uppercase mb-2 block">Chat backend</label>
+      <div className="flex items-center gap-2">
+        <span className="text-[9px] text-[var(--text-secondary)]">Default chat agent:</span>
+        <select
+          value={settings.chatAgent || ''}
+          onChange={e => setSettings({ ...settings, chatAgent: e.target.value })}
+          className="bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-2 py-0.5 text-[10px] text-[var(--text-primary)]"
+        >
+          <option value="">(first available API profile)</option>
+          {apiProfiles.map(([id, a]: [string, any]) => (
+            <option key={id} value={id}>{a.name || id} — {a.provider}/{a.model || '?'}</option>
+          ))}
+        </select>
+      </div>
+      {apiProfiles.length === 0 ? (
+        <div className="text-[9px] text-[var(--text-secondary)] mt-1.5">
+          No API profile yet. Add one in the Profiles section above (type: API). LiteLLM proxies are supported via the Base URL field.
+        </div>
+      ) : (
+        <div className="text-[9px] text-[var(--text-secondary)] mt-1.5">
+          Used by the extension chat, <code className="font-mono">forge chat</code>, and Telegram <code className="font-mono">/chat</code>. Per-session override is possible via the Session.provider field.
+        </div>
+      )}
     </div>
   );
 }

package/components/SkillsPanel.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback, lazy, Suspense } from 'react';
 import { useSidebarResize } from '@/hooks/useSidebarResize';
 
 const PluginsPanel = lazy(() => import('./PluginsPanel'));
+const ConnectorsPanel = lazy(() => import('./ConnectorsPanel'));
 const CraftsMarketplacePanelLazy = lazy(() => import('./CraftsMarketplacePanel'));
 
 type ItemType = 'skill' | 'command';
@@ -140,7 +141,7 @@ export default function SkillsPanel({ projectFilter }: { projectFilter?: string
   const [syncing, setSyncing] = useState(false);
   const [loading, setLoading] = useState(true);
   const [installTarget, setInstallTarget] = useState<{ skill: string; show: boolean }>({ skill: '', show: false });
-  const [typeFilter, setTypeFilter] = useState<'all' | 'skill' | 'command' | 'local' | 'rules' | 'plugins' | 'crafts'>('all');
+  const [typeFilter, setTypeFilter] = useState<'all' | 'skill' | 'command' | 'local' | 'rules' | 'plugins' | 'connectors' | 'crafts'>('all');
   const [localItems, setLocalItems] = useState<{ name: string; type: string; scope: string; fileCount: number; projectPath?: string }[]>([]);
   // Rules (CLAUDE.md templates)
   const [rulesTemplates, setRulesTemplates] = useState<{ id: string; name: string; description: string; tags: string[]; builtin: boolean; isDefault: boolean; content: string }[]>([]);
@@ -373,7 +374,7 @@ export default function SkillsPanel({ projectFilter }: { projectFilter?: string
         <div className="flex items-center gap-2">
           <span className="text-xs font-semibold text-[var(--text-primary)]">Marketplace</span>
           <div className="flex items-center bg-[var(--bg-tertiary)] rounded p-0.5">
-            {([['all', `All (${skills.length})`], ['skill', `Skills (${skillCount})`], ['command', `Commands (${commandCount})`], ['local', `Local (${localCount})`], ['rules', 'Rules'], ['plugins', 'Plugins'], ['crafts', 'Crafts']] as const).map(([value, label]) => (
+            {([['all', `All (${skills.length})`], ['skill', `Skills (${skillCount})`], ['command', `Commands (${commandCount})`], ['local', `Local (${localCount})`], ['rules', 'Rules'], ['plugins', 'Plugins'], ['connectors', 'Connectors'], ['crafts', 'Crafts']] as const).map(([value, label]) => (
               <button
                 key={value}
                 onClick={() => setTypeFilter(value)}
@@ -398,7 +399,7 @@ export default function SkillsPanel({ projectFilter }: { projectFilter?: string
         </button>
       </div>
       {/* Search — hide on rules tab */}
-      {typeFilter !== 'rules' && typeFilter !== 'plugins' && typeFilter !== 'crafts' && <div className="px-3 py-1.5 border-b border-[var(--border)] shrink-0">
+      {typeFilter !== 'rules' && typeFilter !== 'plugins' && typeFilter !== 'connectors' && typeFilter !== 'crafts' && <div className="px-3 py-1.5 border-b border-[var(--border)] shrink-0">
         <input
           type="text"
           value={searchQuery}
@@ -408,7 +409,7 @@ export default function SkillsPanel({ projectFilter }: { projectFilter?: string
         />
       </div>}
 
-      {typeFilter === 'rules' || typeFilter === 'plugins' || typeFilter === 'crafts' ? null : skills.length === 0 ? (
+      {typeFilter === 'rules' || typeFilter === 'plugins' || typeFilter === 'connectors' || typeFilter === 'crafts' ? null : skills.length === 0 ? (
         <div className="flex-1 flex flex-col items-center justify-center gap-2 text-[var(--text-secondary)]">
           <p className="text-xs">No skills yet</p>
           <button onClick={sync} className="text-xs px-3 py-1 bg-[var(--accent)] text-white rounded hover:opacity-90">
@@ -986,6 +987,13 @@ export default function SkillsPanel({ projectFilter }: { projectFilter?: string
         </Suspense>
       )}
 
+      {/* Connectors — full-page view */}
+      {typeFilter === 'connectors' && (
+        <Suspense fallback={<div className="p-4 text-xs text-[var(--text-secondary)]">Loading...</div>}>
+          <ConnectorsPanel />
+        </Suspense>
+      )}
+
       {/* Crafts — registry browse view */}
       {typeFilter === 'crafts' && (
         <Suspense fallback={<div className="p-4 text-xs text-[var(--text-secondary)]">Loading...</div>}>

package/components/WebTerminal.tsx

@@ -186,13 +186,20 @@ function MouseToggle() {
     setMouseOn(next);
   };
 
+  // Hover-only hint shown on the ON/OFF button. The inline always-visible
+  // text used to crowd the toolbar; tooltip keeps the toolbar clean and the
+  // hint still one hover away.
+  const hint = mouseOn
+    ? 'mouse ON — scroll: trackpad · copy: Shift+drag\nclick to disable (easier text select)'
+    : 'mouse OFF — scroll: Ctrl+B [ · copy: drag\nclick to enable (trackpad scroll)';
+
   return (
     <div className="flex items-center gap-1 mr-2">
-      <span className="text-[8px] text-gray-600">
-        {mouseOn ? 'scroll: trackpad · copy: Shift+drag' : 'scroll: Ctrl+B [ · copy: drag'}
-      </span>
-      <button onClick={toggle} title={mouseOn ? 'Click to disable mouse (easier text select)' : 'Click to enable mouse (trackpad scroll)'}
-        className={`text-[9px] px-1.5 py-0.5 rounded border transition-colors ${mouseOn ? 'border-green-600/40 text-green-400 bg-green-500/10' : 'border-gray-600 text-gray-500'}`}>
+      <button
+        onClick={toggle}
+        title={hint}
+        className={`text-[9px] px-1.5 py-0.5 rounded border transition-colors ${mouseOn ? 'border-green-600/40 text-green-400 bg-green-500/10' : 'border-gray-600 text-gray-500'}`}
+      >
         🖱️ {mouseOn ? 'ON' : 'OFF'}
       </button>
     </div>
@@ -771,11 +778,27 @@ const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function Web
         {/* Toolbar */}
         <div className="flex items-center gap-1 px-2 ml-auto">
           <MouseToggle />
-          <button onClick={() => onSplit('vertical')} className="text-[10px] px-2 py-0.5 text-gray-400 hover:text-white hover:bg-[var(--term-border)] rounded">
-            Split Right
+          <button
+            onClick={() => onSplit('vertical')}
+            className="px-1.5 py-0.5 text-gray-400 hover:text-white hover:bg-[var(--term-border)] rounded"
+            title="Split right (vertical pane)"
+            aria-label="Split right"
+          >
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.2">
+              <rect x="1" y="1" width="5" height="12" rx="0.5" />
+              <rect x="8" y="1" width="5" height="12" rx="0.5" />
+            </svg>
           </button>
-          <button onClick={() => onSplit('horizontal')} className="text-[10px] px-2 py-0.5 text-gray-400 hover:text-white hover:bg-[var(--term-border)] rounded">
-            Split Down
+          <button
+            onClick={() => onSplit('horizontal')}
+            className="px-1.5 py-0.5 text-gray-400 hover:text-white hover:bg-[var(--term-border)] rounded"
+            title="Split down (horizontal pane)"
+            aria-label="Split down"
+          >
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.2">
+              <rect x="1" y="1" width="12" height="5" rx="0.5" />
+              <rect x="1" y="8" width="12" height="5" rx="0.5" />
+            </svg>
           </button>
           <button
             onClick={() => { refreshSessions(); setShowSessionPicker(v => !v); }}