@bibobonking/opensol 3.0.2 → 3.1.0

package/src/components/McpTab.tsx

@@ -0,0 +1,337 @@
+import { useEffect, useState } from 'react'
+import { ChevronDown, Plug, Plus, RefreshCw, Trash2, Unplug, Wrench } from 'lucide-react'
+import type { McpServer } from '../types'
+import { useMcp } from '../store/mcp'
+import { useUi } from '../store/ui'
+import { cn } from '../lib/utils'
+import { Segmented, Spinner, Switch } from './ui'
+import type { McpServerInput } from '../lib/daemon'
+
+const field =
+  'h-9 w-full rounded-xl border border-line bg-panel px-3 text-[12px] text-ink outline-none transition-all placeholder:text-faint focus:border-accent/50 focus:shadow-[0_0_0_3px_rgb(var(--accent)/0.10)]'
+
+const PRESETS: Array<{ label: string; draft: Draft }> = [
+  { label: 'Filesystem', draft: { name: 'Filesystem', transport: 'stdio', command: 'npx', args: '-y @modelcontextprotocol/server-filesystem .', env: '', url: '', headers: '' } },
+  { label: 'Memory', draft: { name: 'Memory', transport: 'stdio', command: 'npx', args: '-y @modelcontextprotocol/server-memory', env: '', url: '', headers: '' } },
+  { label: 'Fetch', draft: { name: 'Fetch', transport: 'stdio', command: 'uvx', args: 'mcp-server-fetch', env: '', url: '', headers: '' } },
+]
+
+interface Draft {
+  name: string
+  transport: 'stdio' | 'http'
+  command: string
+  args: string
+  env: string
+  url: string
+  headers: string
+}
+
+const EMPTY: Draft = { name: '', transport: 'stdio', command: '', args: '', env: '', url: '', headers: '' }
+
+/** Shell-like split that keeps quoted segments together. */
+function splitArgs(value: string): string[] {
+  const out: string[] = []
+  const pattern = /"([^"]*)"|'([^']*)'|(\S+)/g
+  let match: RegExpExecArray | null
+  while ((match = pattern.exec(value))) out.push(match[1] ?? match[2] ?? match[3])
+  return out
+}
+
+function parsePairs(value: string, separator: string): Record<string, string> {
+  const out: Record<string, string> = {}
+  for (const line of value.split('\n')) {
+    const index = line.indexOf(separator)
+    if (index < 1) continue
+    out[line.slice(0, index).trim()] = line.slice(index + 1).trim()
+  }
+  return out
+}
+
+function toInput(server: McpServer): McpServerInput {
+  return {
+    id: server.id,
+    name: server.name,
+    transport: server.transport,
+    enabled: server.enabled,
+    approval: server.approval,
+    disabledTools: server.disabledTools,
+    command: server.command,
+    args: server.args,
+    env: server.env,
+    url: server.url,
+    headers: server.headers,
+  }
+}
+
+function StatusDot({ status }: { status: McpServer['status'] }) {
+  return (
+    <span
+      className={cn(
+        'h-2 w-2 shrink-0 rounded-full',
+        status === 'connected' && 'bg-success shadow-[0_0_0_3px_rgb(var(--success)/0.18)]',
+        status === 'connecting' && 'animate-breathe bg-warning',
+        status === 'error' && 'bg-danger',
+        (status === 'disconnected' || status === 'disabled') && 'bg-faint/60',
+      )}
+    />
+  )
+}
+
+export function McpTab() {
+  const servers = useMcp((state) => state.servers)
+  const loaded = useMcp((state) => state.loaded)
+  const loading = useMcp((state) => state.loading)
+  const error = useMcp((state) => state.error)
+  const load = useMcp((state) => state.load)
+  const save = useMcp((state) => state.save)
+  const act = useMcp((state) => state.act)
+  const notify = useUi((state) => state.notify)
+  const askConfirm = useUi((state) => state.askConfirm)
+  const [draft, setDraft] = useState<Draft | null>(null)
+  const [open, setOpen] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  const persist = async (next: McpServerInput[], message?: string) => {
+    setBusy(true)
+    try {
+      await save(next)
+      if (message) notify(message, 'success')
+    } catch (failure) {
+      notify(failure instanceof Error ? failure.message : 'Could not save MCP servers.', 'error')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const addServer = async () => {
+    if (!draft || !draft.name.trim()) return
+    const entry: McpServerInput =
+      draft.transport === 'stdio'
+        ? { name: draft.name.trim(), transport: 'stdio', command: draft.command.trim(), args: splitArgs(draft.args), env: parsePairs(draft.env, '=') }
+        : { name: draft.name.trim(), transport: 'http', url: draft.url.trim(), headers: parsePairs(draft.headers, ':') }
+    await persist([...servers.map(toInput), { ...entry, enabled: true, approval: 'ask' }], `Added ${entry.name}. Connecting…`)
+    setDraft(null)
+  }
+
+  const patch = (id: string, change: Partial<McpServerInput>) =>
+    persist(servers.map((server) => (server.id === id ? { ...toInput(server), ...change } : toInput(server))))
+
+  const remove = async (server: McpServer) => {
+    const ok = await askConfirm({
+      title: `Remove ${server.name}?`,
+      body: 'The server is disconnected and its tools disappear from the agent. Nothing on disk is deleted.',
+      confirmLabel: 'Remove server',
+      tone: 'danger',
+    })
+    if (ok) await persist(servers.filter((item) => item.id !== server.id).map(toInput), `Removed ${server.name}.`)
+  }
+
+  return (
+    <div className="space-y-5 px-5 py-6 sm:px-8">
+      <div className="settings-card">
+        <div className="flex items-start gap-3">
+          <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-accent-soft text-accent">
+            <Plug size={16} />
+          </span>
+          <div className="min-w-0 flex-1">
+            <p className="settings-label">Model Context Protocol</p>
+            <p className="settings-hint">
+              Connect MCP servers and their tools show up for the agent as <span className="font-mono">mcp__server__tool</span>. Local
+              (stdio) servers run as a process on this computer with your permissions, so only add servers you trust.
+            </p>
+          </div>
+          {!draft && (
+            <button
+              type="button"
+              onClick={() => setDraft({ ...EMPTY })}
+              className="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-full bg-ink px-3.5 text-[11.5px] font-medium text-panel transition-transform active:scale-95"
+            >
+              <Plus size={13} /> Add server
+            </button>
+          )}
+        </div>
+      </div>
+
+      {draft && (
+        <div className="settings-card animate-scalein space-y-3">
+          <div className="flex flex-wrap items-center gap-2">
+            <p className="settings-label mr-auto">New MCP server</p>
+            {PRESETS.map((preset) => (
+              <button key={preset.label} type="button" className="chip h-7 rounded-full px-3 text-[11px]" onClick={() => setDraft({ ...preset.draft })}>
+                {preset.label}
+              </button>
+            ))}
+          </div>
+          <div className="grid gap-3 sm:grid-cols-[1fr_auto]">
+            <input className={field} placeholder="Name (e.g. GitHub)" value={draft.name} onChange={(e) => setDraft({ ...draft, name: e.target.value })} />
+            <Segmented
+              options={[
+                { value: 'stdio', label: 'Local · stdio' },
+                { value: 'http', label: 'Remote · HTTP' },
+              ]}
+              value={draft.transport}
+              onChange={(value) => setDraft({ ...draft, transport: value })}
+              size="md"
+            />
+          </div>
+          {draft.transport === 'stdio' ? (
+            <>
+              <div className="grid gap-3 sm:grid-cols-[160px_1fr]">
+                <input className={cn(field, 'font-mono')} placeholder="command" value={draft.command} onChange={(e) => setDraft({ ...draft, command: e.target.value })} />
+                <input className={cn(field, 'font-mono')} placeholder="arguments" value={draft.args} onChange={(e) => setDraft({ ...draft, args: e.target.value })} />
+              </div>
+              <textarea
+                className={cn(field, 'h-20 resize-none py-2 font-mono')}
+                placeholder={'Environment, one per line\nAPI_KEY=…'}
+                value={draft.env}
+                onChange={(e) => setDraft({ ...draft, env: e.target.value })}
+              />
+            </>
+          ) : (
+            <>
+              <input className={cn(field, 'font-mono')} placeholder="https://example.com/mcp" value={draft.url} onChange={(e) => setDraft({ ...draft, url: e.target.value })} />
+              <textarea
+                className={cn(field, 'h-20 resize-none py-2 font-mono')}
+                placeholder={'Headers, one per line\nAuthorization: Bearer …'}
+                value={draft.headers}
+                onChange={(e) => setDraft({ ...draft, headers: e.target.value })}
+              />
+            </>
+          )}
+          <div className="flex justify-end gap-2">
+            <button type="button" className="chip h-8 rounded-full px-4" onClick={() => setDraft(null)}>
+              Cancel
+            </button>
+            <button
+              type="button"
+              disabled={busy || !draft.name.trim() || (draft.transport === 'stdio' ? !draft.command.trim() : !draft.url.trim())}
+              onClick={() => void addServer()}
+              className="inline-flex h-8 items-center gap-1.5 rounded-full bg-accent px-4 text-[11.5px] font-medium text-on-accent transition-transform active:scale-95 disabled:opacity-40"
+            >
+              {busy && <Spinner size={11} />} Save and connect
+            </button>
+          </div>
+        </div>
+      )}
+
+      {error && <p className="rounded-xl border border-danger/25 bg-danger/[0.05] px-3 py-2 text-[11.5px] text-danger">{error}</p>}
+      {!loaded && loading && (
+        <p className="flex items-center gap-2 text-[12px] text-faint">
+          <Spinner size={12} /> Loading servers…
+        </p>
+      )}
+      {loaded && servers.length === 0 && !draft && (
+        <p className="rounded-2xl border border-dashed border-line px-5 py-10 text-center text-[12px] text-muted">
+          No MCP servers yet. Add one to give the agent new tools.
+        </p>
+      )}
+
+      {servers.map((server, index) => {
+        const expanded = open === server.id
+        return (
+          <div key={server.id} style={{ animationDelay: `${index * 50}ms` }} className="settings-card animate-rise !p-0">
+            <div className="flex items-center gap-3 px-4 py-3.5">
+              <StatusDot status={server.status} />
+              <button type="button" className="min-w-0 flex-1 text-left" onClick={() => setOpen(expanded ? null : server.id)}>
+                <p className="flex items-center gap-2 text-[13px] font-medium text-ink">
+                  <span className="truncate">{server.name}</span>
+                  <span className="rounded-full bg-raised px-2 py-px font-mono text-[9.5px] text-faint">{server.transport}</span>
+                </p>
+                <p className="mt-0.5 truncate text-[11px] text-muted">
+                  {server.status === 'connected'
+                    ? `${server.tools.length} tool${server.tools.length === 1 ? '' : 's'}${server.serverInfo?.name ? ` · ${server.serverInfo.name} ${server.serverInfo.version ?? ''}` : ''}`
+                    : server.status === 'connecting'
+                      ? 'Connecting…'
+                      : server.status === 'error'
+                        ? server.error || 'Connection failed'
+                        : server.status === 'disabled'
+                          ? 'Turned off'
+                          : 'Not connected'}
+                </p>
+              </button>
+              {server.status === 'connected' || server.status === 'connecting' ? (
+                <>
+                  <button type="button" className="icon-button h-8 w-8" title="Reload tools" aria-label="Reload tools" onClick={() => void act(server.id, 'refresh')}>
+                    <RefreshCw size={13} className={cn(server.status === 'connecting' && 'animate-spin')} />
+                  </button>
+                  <button type="button" className="icon-button h-8 w-8" title="Disconnect" aria-label="Disconnect" onClick={() => void act(server.id, 'disconnect')}>
+                    <Unplug size={13} />
+                  </button>
+                </>
+              ) : (
+                <button
+                  type="button"
+                  className="chip h-8 rounded-full px-3.5 text-[11.5px]"
+                  disabled={!server.enabled}
+                  onClick={() => void act(server.id, 'connect')}
+                >
+                  Connect
+                </button>
+              )}
+              <Switch checked={server.enabled} onChange={(enabled) => void patch(server.id, { enabled })} label={`Enable ${server.name}`} />
+              <button type="button" className="icon-button h-8 w-8" aria-label="Expand" onClick={() => setOpen(expanded ? null : server.id)}>
+                <ChevronDown size={14} className={cn('transition-transform duration-300', expanded && 'rotate-180')} />
+              </button>
+            </div>
+            {expanded && (
+              <div className="animate-fade space-y-3 border-t border-line px-4 py-3.5">
+                <div className="flex flex-wrap items-center justify-between gap-2">
+                  <p className="font-mono text-[10.5px] text-faint">
+                    {server.transport === 'stdio' ? `${server.command} ${(server.args ?? []).join(' ')}` : server.url}
+                  </p>
+                  <div className="flex items-center gap-2">
+                    <span className="text-[11px] text-muted">Tool calls</span>
+                    <Segmented
+                      options={[
+                        { value: 'ask', label: 'Ask first' },
+                        { value: 'auto', label: 'Auto-run' },
+                      ]}
+                      value={server.approval}
+                      onChange={(approval) => void patch(server.id, { approval })}
+                    />
+                  </div>
+                </div>
+                {server.status === 'error' && server.error && <p className="text-[11.5px] text-danger">{server.error}</p>}
+                {server.tools.length > 0 && (
+                  <ul className="divide-y divide-line rounded-xl border border-line">
+                    {server.tools.map((tool) => {
+                      const off = server.disabledTools.includes(tool.name)
+                      return (
+                        <li key={tool.name} className="flex items-center gap-3 px-3 py-2">
+                          <Wrench size={12} className={cn('shrink-0', off ? 'text-faint' : 'text-accent')} />
+                          <div className="min-w-0 flex-1">
+                            <p className={cn('truncate font-mono text-[11.5px]', off ? 'text-faint line-through' : 'text-ink')}>{tool.name}</p>
+                            {tool.description && <p className="truncate text-[10.5px] text-muted">{tool.description}</p>}
+                          </div>
+                          {tool.readOnly && <span className="rounded-full bg-success/10 px-1.5 py-px text-[9px] text-success">read-only</span>}
+                          <Switch
+                            checked={!off}
+                            label={`Enable ${tool.name}`}
+                            onChange={(on) =>
+                              void patch(server.id, {
+                                disabledTools: on ? server.disabledTools.filter((n) => n !== tool.name) : [...server.disabledTools, tool.name],
+                              })
+                            }
+                          />
+                        </li>
+                      )
+                    })}
+                  </ul>
+                )}
+                <div className="flex justify-end">
+                  <button type="button" onClick={() => void remove(server)} className="inline-flex items-center gap-1.5 text-[11.5px] font-medium text-faint transition-colors hover:text-danger">
+                    <Trash2 size={12} /> Remove server
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/MessageItem.tsx

@@ -21,7 +21,8 @@ import { createId, useChats } from '../store/chats'
 import { toolLabel } from '../agent/tools'
 import { formatBytes, cn } from '../lib/utils'
 import { Markdown } from './Markdown'
-import { ToolCallCard } from './ToolCallCard'
+import { ToolCallCard, diffForTool } from './ToolCallCard'
+import { DiffBadge } from './DiffView'
 import { ArrowRight } from 'lucide-react'
 import { LogoMark } from './Logo'
 
@@ -168,7 +169,15 @@ function changedFiles(tools: ToolMessage[]): string[] {
 }
 
 /** Lets the person roll back every file the agent wrote or edited during one turn. */
-function UndoBar({ turnId, files }: { turnId: string; files: string[] }) {
+function UndoBar({
+  turnId,
+  files,
+  diff,
+}: {
+  turnId: string
+  files: string[]
+  diff: { added: number; removed: number } | null
+}) {
   const askConfirm = useUi((state) => state.askConfirm)
   const notify = useUi((state) => state.notify)
   const [state, setState] = useState<'idle' | 'working' | 'undone'>('idle')
@@ -204,6 +213,7 @@ function UndoBar({ turnId, files }: { turnId: string; files: string[] }) {
       <span className="min-w-0 truncate">
         {state === 'undone' ? 'Changes undone' : `Changed ${shown}${rest > 0 ? ` and ${rest} more` : ''}`}
       </span>
+      {state !== 'undone' && diff && <DiffBadge added={diff.added} removed={diff.removed} className="shrink-0" />}
       {state !== 'undone' && (
         <button
           type="button"
@@ -218,6 +228,48 @@ function UndoBar({ turnId, files }: { turnId: string; files: string[] }) {
   )
 }
 
+function ThoughtToggle({ text }: { text: string }) {
+  const [open, setOpen] = useState(false)
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className="group/think flex max-w-full items-baseline gap-1.5 py-0.5 text-left text-[12px]"
+        aria-expanded={open}
+      >
+        <ArrowRight
+          size={11}
+          strokeWidth={2}
+          className={cn('relative top-[1px] shrink-0 self-center text-faint transition-transform duration-200 ease-out', open && 'rotate-90')}
+        />
+        <span className="shrink-0 font-medium text-muted group-hover/think:text-ink">Thought</span>
+        {!open && <span className="min-w-0 truncate text-[11px] text-faint">{text.replace(/\s+/g, ' ').trim().slice(0, 100)}</span>}
+      </button>
+      {open && (
+        <div className="thin-scroll animate-fade max-h-40 overflow-y-auto whitespace-pre-wrap pl-[17px] font-mono text-[11px] leading-relaxed text-faint">
+          {text}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function totalDiff(tools: ToolMessage[]) {
+  let added = 0
+  let removed = 0
+  let any = false
+  for (const tool of tools) {
+    if (!FILE_EDIT_TOOLS.has(tool.call.name)) continue
+    const diff = diffForTool(tool)
+    if (!diff) continue
+    any = true
+    added += diff.added
+    removed += diff.removed
+  }
+  return any ? { added, removed } : null
+}
+
 export function TaskCompletedBox({
   tools,
   intermediateMessages = [],
@@ -291,6 +343,10 @@ export function TaskCompletedBox({
           {summary ? ` (${summary})` : ''}
         </span>
         {failed > 0 && <span className="shrink-0 text-[12px] text-danger">· {failed} failed</span>}
+        {(() => {
+          const total = totalDiff(tools)
+          return total ? <DiffBadge added={total.added} removed={total.removed} className="shrink-0 text-[11.5px]" /> : null
+        })()}
       </button>
 
       {open && (
@@ -300,11 +356,7 @@ export function TaskCompletedBox({
               <ToolCallCard key={item.tool.id} message={item.tool} compact={!detailed} />
             ) : (
               <div key={item.message.id} className="py-1">
-                {item.message.reasoning.trim() && (
-                  <div className="thin-scroll max-h-40 overflow-y-auto whitespace-pre-wrap font-mono text-[11px] leading-relaxed text-faint">
-                    {item.message.reasoning}
-                  </div>
-                )}
+                {item.message.reasoning.trim() && <ThoughtToggle text={item.message.reasoning} />}
                 {item.message.content.trim() && (
                   <div className="mt-1 text-[12.5px] leading-relaxed text-muted">
                     <Markdown content={item.message.content} />
@@ -347,7 +399,8 @@ export function AssistantBlock({
     message.provider ? state.byProvider[message.provider] : undefined,
   )
   const [copied, setCopied] = useState(false)
-  const [reasoningOpen, setReasoningOpen] = useState(streaming)
+  // Thoughts stay closed until the person opens them, even while the model is still thinking.
+  const [reasoningOpen, setReasoningOpen] = useState(false)
   const hasBody = Boolean(message.content.trim() || message.reasoning.trim() || message.error)
   const modelName =
     providerModels?.find((model) => model.id === message.model)?.name ?? message.model ?? ''
@@ -368,10 +421,6 @@ export function AssistantBlock({
     .filter(Boolean)
     .join(' · ')
 
-  useEffect(() => {
-    if (streaming) setReasoningOpen(true)
-  }, [streaming])
-
   const copy = async () => {
     try {
       await navigator.clipboard.writeText(message.content)
@@ -648,7 +697,7 @@ export function TurnBlock({
       )}
 
       {turn.user && changedFiles(allTools).length > 0 && (
-        <UndoBar turnId={turn.user.id} files={changedFiles(allTools)} />
+        <UndoBar turnId={turn.user.id} files={changedFiles(allTools)} diff={totalDiff(allTools)} />
       )}
     </div>
   )