@bibobonking/opensol 0.0.0-stage → 3.0.2

package/src/components/ToolCallCard.tsx

@@ -0,0 +1,177 @@
+import { useEffect, useState } from 'react'
+import { ArrowRight } from 'lucide-react'
+import type { ToolMessage, ToolName } from '../types'
+import { toolLabel, toolSummary } from '../agent/tools'
+import { resolveApproval } from '../agent/approval'
+import { useUi } from '../store/ui'
+import { cn } from '../lib/utils'
+
+function statusMeta(status: ToolMessage['status']) {
+  switch (status) {
+    case 'awaiting':
+      return { label: 'Needs approval', className: 'text-warning', dot: 'bg-warning' }
+    case 'running':
+      return { label: 'Running', className: 'text-accent', dot: 'bg-accent' }
+    case 'done':
+      return { label: 'Done', className: 'text-success', dot: 'bg-success' }
+    case 'denied':
+      return { label: 'Denied', className: 'text-muted', dot: 'bg-faint' }
+    default:
+      return { label: 'Failed', className: 'text-danger', dot: 'bg-danger' }
+  }
+}
+
+function durationLabel(ms?: number) {
+  if (ms === undefined) return ''
+  return ms < 1000 ? `${ms}ms` : `${(ms / 1000).toFixed(1)}s`
+}
+
+function approvalCopy(name: ToolName) {
+  switch (name) {
+    case 'shell':
+      return 'OpenSol wants to run this command in the open workspace.'
+    case 'write_file':
+      return 'OpenSol wants to create or overwrite this file on disk.'
+    case 'edit_file':
+    case 'rewrite_file':
+      return 'OpenSol wants to change this file on disk.'
+    case 'git':
+      return 'OpenSol wants to change the Git state of this repository.'
+    case 'subagent':
+      return 'OpenSol wants to start a read-only subagent to investigate.'
+    case 'web_search':
+      return 'OpenSol wants to search the web.'
+    case 'read_url':
+      return 'OpenSol wants to read this public page.'
+    default:
+      return 'OpenSol wants to use this tool.'
+  }
+}
+
+export function ToolCallCard({ message, compact = false }: { message: ToolMessage; compact?: boolean }) {
+  const [open, setOpen] = useState((!compact && message.status === 'awaiting') || message.status === 'error')
+  const [copied, setCopied] = useState(false)
+  const notify = useUi((state) => state.notify)
+  const status = statusMeta(message.status)
+  const summary = toolSummary(message.call.name, message.call.args)
+  const args = message.call.args
+  const command = typeof args.command === 'string' ? args.command : ''
+  const content =
+    typeof args.content === 'string'
+      ? args.content
+      : typeof args.newText === 'string'
+        ? args.newText
+        : typeof args.oldText === 'string'
+          ? args.oldText
+          : ''
+
+  useEffect(() => {
+    if (message.status === 'awaiting' || message.status === 'error') setOpen(true)
+  }, [message.status])
+
+  const copyOutput = async () => {
+    try {
+      await navigator.clipboard.writeText(message.result ?? '')
+      setCopied(true)
+      window.setTimeout(() => setCopied(false), 1600)
+    } catch {
+      notify('Clipboard access was blocked by the browser.', 'error')
+    }
+  }
+
+  const trailing =
+    message.status === 'done' && message.durationMs !== undefined
+      ? durationLabel(message.durationMs)
+      : message.status === 'done'
+        ? ''
+        : status.label.toLowerCase()
+
+  return (
+    <div className="text-[12.5px]">
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className="group/row flex w-full min-w-0 items-baseline gap-1.5 py-[3px] text-left"
+        aria-expanded={open}
+      >
+        <ArrowRight
+          size={12}
+          strokeWidth={2}
+          className={cn(
+            'relative top-[1px] shrink-0 self-center text-faint transition-transform duration-200 ease-out group-hover/row:text-ink',
+            open && 'rotate-90',
+          )}
+        />
+        <span className="shrink-0 font-medium text-ink">{toolLabel(message.call.name)}</span>
+        <span className="min-w-0 flex-1 truncate font-mono text-[11.5px] text-muted">{summary || '—'}</span>
+        {trailing && (
+          <span className={cn('shrink-0 text-[11px]', message.status === 'running' ? 'text-shimmer' : message.status === 'done' ? 'text-faint' : status.className)}>
+            {trailing}
+          </span>
+        )}
+      </button>
+
+      {message.status === 'awaiting' && (
+        <div className="animate-fade py-1 pl-[18px]">
+          <p className="text-[12px] leading-relaxed text-warning">{approvalCopy(message.call.name)}</p>
+          <p className="mt-1 flex items-center gap-4 text-[12px] font-medium">
+            <button
+              type="button"
+              onClick={() => resolveApproval(message.call.id, true)}
+              className="text-ink underline decoration-ink/30 underline-offset-[3px] transition-colors hover:decoration-ink"
+            >
+              Allow once →
+            </button>
+            <button
+              type="button"
+              onClick={() => resolveApproval(message.call.id, false)}
+              className="text-muted transition-colors hover:text-ink"
+            >
+              Deny
+            </button>
+          </p>
+        </div>
+      )}
+
+      {open && (
+        <div className="animate-fade space-y-2 pb-1.5 pl-[18px] pt-0.5">
+          {command && (
+            <pre className="thin-scroll max-h-40 overflow-auto whitespace-pre-wrap break-words font-mono text-[11.5px] leading-relaxed text-ink">
+              $ {command}
+            </pre>
+          )}
+          {content && (
+            <pre className="thin-scroll max-h-48 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed text-muted">
+              {content.length > 4000 ? `${content.slice(0, 4000)}\n… ${content.length - 4000} more characters` : content}
+            </pre>
+          )}
+
+          {message.result !== undefined && (
+            <div>
+              <p className="mb-1 flex items-center gap-3 text-[11px] text-faint">
+                <span>{message.status === 'error' ? 'Error' : 'Output'}</span>
+                <button type="button" onClick={copyOutput} className="transition-colors hover:text-ink">
+                  {copied ? 'Copied' : 'Copy'}
+                </button>
+              </p>
+              <pre
+                className={cn(
+                  'thin-scroll max-h-72 overflow-auto whitespace-pre-wrap break-words font-mono text-[11.5px] leading-[1.65]',
+                  message.status === 'error' ? 'text-danger' : 'text-muted',
+                )}
+              >
+                {message.result || '(no output)'}
+              </pre>
+            </div>
+          )}
+
+          {message.result === undefined && !command && !content && message.status !== 'awaiting' && (
+            <p className="text-[11.5px] text-muted">
+              {message.status === 'running' ? 'Working…' : 'No result was recorded.'}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/TopBar.tsx

@@ -0,0 +1,182 @@
+import {
+  FolderOpen,
+  ListChecks,
+  Menu,
+  Moon,
+  PanelLeftOpen,
+  Rocket,
+  Search,
+  Settings,
+  Sparkles,
+  Sun,
+} from 'lucide-react'
+import type { ChatSession } from '../types'
+import { useSettings } from '../store/settings'
+import { useUi } from '../store/ui'
+import { useWorkspace } from '../store/workspace'
+import { useActiveModel } from '../store/models'
+import { cn } from '../lib/utils'
+import { themeIsDark } from '../lib/themes'
+import { LogoMark } from './Logo'
+import { ContextBar } from './ContextBar'
+
+export type ChatViewMode = 'chat' | 'trajectory'
+
+const isApple = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform)
+
+export function TopBar({
+  session,
+  view,
+  onViewChange,
+}: {
+  session: ChatSession | null
+  view: ChatViewMode
+  onViewChange: (view: ChatViewMode) => void
+}) {
+  const settings = useSettings()
+  const update = useSettings((state) => state.update)
+  const sidebarCollapsed = useUi((state) => state.sidebarCollapsed)
+  const toggleSidebar = useUi((state) => state.toggleSidebar)
+  const setMobileOpen = useUi((state) => state.setMobileSidebarOpen)
+  const setPaletteOpen = useUi((state) => state.setPaletteOpen)
+  const openSettings = useUi((state) => state.openSettings)
+  const workspaceOpen = useUi((state) => state.workspaceOpen)
+  const setWorkspaceOpen = useUi((state) => state.setWorkspaceOpen)
+  const setDeployOpen = useUi((state) => state.setDeployOpen)
+  const workspace = useWorkspace((state) => state.info)
+  const activeModel = useActiveModel()
+
+  // Go through the theme registry so Night Owl, Claude Code, Solar and plugin themes count as dark.
+  const isDark = themeIsDark(
+    settings.theme,
+    typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches,
+  )
+  const hasConversation = Boolean(session && session.messages.length > 0)
+  const turns = session?.messages.filter((message) => message.role === 'user').length ?? 0
+
+  return (
+    <header className="relative flex h-12 shrink-0 items-center gap-2 border-b border-line/60 bg-panel/80 px-3 backdrop-blur-xl sm:px-4">
+      <button
+        type="button"
+        className="icon-button lg:hidden"
+        onClick={() => setMobileOpen(true)}
+        aria-label="Open menu"
+      >
+        <Menu size={18} />
+      </button>
+
+      {sidebarCollapsed && (
+        <button
+          type="button"
+          className="icon-button hidden lg:inline-flex"
+          onClick={toggleSidebar}
+          title="Expand sidebar"
+          aria-label="Expand sidebar"
+        >
+          <PanelLeftOpen size={17} />
+        </button>
+      )}
+
+      <div className="flex min-w-0 flex-1 items-center gap-2">
+        {!session && <LogoMark size={19} className="lg:hidden" />}
+        {workspace.available && (
+          <>
+            <span className="hidden max-w-[120px] shrink-0 truncate text-[13px] text-faint md:inline">{workspace.name}</span>
+            <span className="hidden text-faint/50 md:inline">/</span>
+          </>
+        )}
+        <h1 className="min-w-0 truncate text-[13.5px] font-medium tracking-[-0.01em] text-ink">
+          {session?.title ?? 'New conversation'}
+        </h1>
+        {hasConversation && (
+          <span className="hidden shrink-0 items-center gap-1 rounded-md border border-line bg-canvas px-1.5 py-0.5 text-[10.5px] font-medium text-muted sm:inline-flex">
+            {settings.mode === 'plan' ? <ListChecks size={11} /> : <Sparkles size={11} />}
+            {settings.mode === 'plan' ? 'Plan mode' : 'Build mode'}
+          </span>
+        )}
+        {hasConversation && (
+          <span className="hidden shrink-0 text-[11.5px] tabular-nums text-faint md:inline">
+            {turns} turn{turns === 1 ? '' : 's'}
+          </span>
+        )}
+      </div>
+
+      {hasConversation && (
+        <div className="absolute left-1/2 hidden -translate-x-1/2 items-center rounded-lg bg-raised p-0.5 md:inline-flex">
+          {(['chat', 'trajectory'] as const).map((value) => (
+            <button
+              key={value}
+              type="button"
+              onClick={() => onViewChange(value)}
+              aria-pressed={view === value}
+              className={cn(
+                'h-6 rounded-md px-3 text-[11.5px] font-medium capitalize transition-all duration-200',
+                view === value ? 'bg-panel text-ink shadow-pill' : 'text-muted hover:text-ink',
+              )}
+            >
+              {value}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div className="flex shrink-0 items-center gap-0.5">
+        {hasConversation && (
+          <div className="mr-3 hidden sm:block">
+            <ContextBar messages={session?.messages ?? []} model={activeModel} sessionId={session?.id ?? null} />
+          </div>
+        )}
+        <button
+          type="button"
+          onClick={() => setWorkspaceOpen(!workspaceOpen)}
+          title={workspace.available ? workspace.root : 'Choose a workspace folder'}
+          className={cn(
+            'mr-1 hidden min-w-0 items-center gap-1.5 rounded-lg border px-2.5 py-1 text-[12px] transition-all duration-150 sm:inline-flex',
+            workspaceOpen
+              ? 'border-accent/30 bg-accent-soft text-accent'
+              : 'border-line text-muted hover:bg-raised/60 hover:text-ink',
+          )}
+        >
+          <FolderOpen size={13} className="shrink-0" />
+          <span className="max-w-[140px] truncate">{workspace.available ? workspace.name : 'No folder'}</span>
+        </button>
+        <button
+          type="button"
+          className="icon-button hidden sm:inline-flex"
+          onClick={() => setDeployOpen(true)}
+          title="Deploy the open workspace or another project"
+          aria-label="Deploy"
+        >
+          <Rocket size={16} strokeWidth={1.7} />
+        </button>
+        <button
+          type="button"
+          className="icon-button"
+          onClick={() => setPaletteOpen(true)}
+          title={`Search and commands (${isApple ? '⌘' : 'Ctrl'} K)`}
+          aria-label="Open search and commands"
+        >
+          <Search size={16} />
+        </button>
+        <button
+          type="button"
+          className="icon-button hidden sm:inline-flex"
+          onClick={() => update({ theme: isDark ? 'light' : 'dark' })}
+          title={isDark ? 'Switch to light theme' : 'Switch to dark theme'}
+          aria-label="Toggle theme"
+        >
+          {isDark ? <Sun size={16} /> : <Moon size={16} />}
+        </button>
+        <button
+          type="button"
+          className="icon-button"
+          onClick={() => openSettings('general')}
+          title="Settings"
+          aria-label="Open settings"
+        >
+          <Settings size={16} />
+        </button>
+      </div>
+    </header>
+  )
+}

package/src/components/TrajectoryView.tsx

@@ -0,0 +1,178 @@
+import { useMemo } from 'react'
+import {
+  AlertCircle,
+  Check,
+  ChevronRight,
+  FileText,
+  SquareTerminal,
+  UserRound,
+  Wrench,
+} from 'lucide-react'
+import type { ChatSession, Message } from '../types'
+import { toolLabel, toolSummary } from '../agent/tools'
+import { cn } from '../lib/utils'
+import { LogoMark } from './Logo'
+
+function timeOf(timestamp: number) {
+  return new Date(timestamp).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
+}
+
+function preview(text: string, length = 180) {
+  const clean = text.replace(/\s+/g, ' ').trim()
+  return clean.length > length ? `${clean.slice(0, length)}…` : clean
+}
+
+function statusTone(message: Extract<Message, { role: 'tool' }>) {
+  switch (message.status) {
+    case 'running':
+      return { label: 'Running', className: 'text-accent', dot: 'bg-accent animate-pulse' }
+    case 'awaiting':
+      return { label: 'Needs approval', className: 'text-warning', dot: 'bg-warning' }
+    case 'done':
+      return { label: 'Done', className: 'text-success', dot: 'bg-success' }
+    case 'denied':
+      return { label: 'Denied', className: 'text-muted', dot: 'bg-faint' }
+    default:
+      return { label: 'Failed', className: 'text-danger', dot: 'bg-danger' }
+  }
+}
+
+export function TrajectoryView({ session }: { session: ChatSession }) {
+  const events = useMemo(() => session.messages, [session.messages])
+  const toolCount = events.filter((message) => message.role === 'tool').length
+
+  if (events.length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center px-6">
+        <div className="text-center">
+          <Wrench size={20} className="mx-auto text-faint" />
+          <p className="mt-2 text-[13px] font-medium text-ink">No trajectory yet</p>
+          <p className="mt-1 text-[11.5px] text-muted">Send a message to see every step here.</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="thin-scroll h-full overflow-y-auto">
+      <div className="mx-auto w-full max-w-[800px] px-4 pb-12 pt-7 sm:px-6">
+        <div className="mb-5 flex items-center justify-between gap-3 border-b border-line pb-3">
+          <div>
+            <p className="text-[13px] font-medium text-ink">Trajectory</p>
+            <p className="mt-0.5 text-[11px] text-muted">
+              {events.length} step{events.length === 1 ? '' : 's'} · {toolCount} tool call{toolCount === 1 ? '' : 's'}
+            </p>
+          </div>
+          <span className="rounded-full border border-line px-2 py-0.5 text-[10px] text-faint">Read-only view</span>
+        </div>
+
+        <div className="relative">
+          <span className="absolute bottom-3 left-[13px] top-3 w-px bg-line" aria-hidden="true" />
+          <div className="space-y-4">
+            {events.map((message) => {
+              if (message.role === 'user') {
+                return (
+                  <div key={message.id} className="relative flex gap-3">
+                    <span className="relative z-10 flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-line bg-panel text-muted">
+                      <UserRound size={13} />
+                    </span>
+                    <div className="min-w-0 flex-1 rounded-xl border border-line bg-panel px-3 py-2">
+                      <div className="flex items-center justify-between gap-2">
+                        <span className="text-[11.5px] font-medium text-ink">You</span>
+                        <span className="text-[9.5px] tabular-nums text-faint">{timeOf(message.createdAt)}</span>
+                      </div>
+                      <p className="mt-1 line-clamp-3 text-[12px] leading-relaxed text-muted">{message.content || 'Attachment only'}</p>
+                    </div>
+                  </div>
+                )
+              }
+
+              if (message.role === 'assistant') {
+                const hasText = Boolean(message.content.trim() || message.reasoning.trim())
+                return (
+                  <div key={message.id} className="relative flex gap-3">
+                    <span className="relative z-10 flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-line bg-panel">
+                      <LogoMark size={15} />
+                    </span>
+                    <div className="min-w-0 flex-1 rounded-xl border border-line bg-panel px-3 py-2">
+                      <div className="flex flex-wrap items-center justify-between gap-2">
+                        <span className="flex min-w-0 items-center gap-1.5 text-[11.5px] font-medium text-ink">
+                          OpenSol
+                          {message.model && (
+                            <span className="truncate text-[10px] font-normal text-faint">{message.model}</span>
+                          )}
+                        </span>
+                        <span className="flex items-center gap-1.5 text-[9.5px] tabular-nums text-faint">
+                          {message.stopped && <span className="text-muted">Stopped</span>}
+                          {timeOf(message.createdAt)}
+                        </span>
+                      </div>
+                      {hasText ? (
+                        <p className="mt-1 line-clamp-4 whitespace-pre-wrap text-[12px] leading-relaxed text-muted">
+                          {preview(message.content || message.reasoning)}
+                        </p>
+                      ) : (
+                        <p className="mt-1 text-[11px] italic text-faint">Model turn with no text.</p>
+                      )}
+                      {message.error && (
+                        <p className="mt-1.5 flex items-start gap-1.5 text-[11px] leading-relaxed text-danger">
+                          <AlertCircle size={11} className="mt-0.5 shrink-0" />
+                          {message.error}
+                        </p>
+                      )}
+                      {message.toolCalls.length > 0 && (
+                        <p className="mt-1.5 text-[10px] text-faint">
+                          {message.toolCalls.length} tool call{message.toolCalls.length === 1 ? '' : 's'} in this round
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                )
+              }
+
+              const status = statusTone(message)
+              const isShell = message.call.name === 'shell'
+              const isFile = ['read_file', 'write_file', 'edit_file', 'rewrite_file'].includes(message.call.name)
+              const Icon = isShell ? SquareTerminal : isFile ? FileText : Wrench
+              return (
+                <div key={message.id} className="relative flex gap-3">
+                  <span className="relative z-10 flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-line bg-panel text-muted">
+                    <Icon size={12} />
+                  </span>
+                  <div className="min-w-0 flex-1 rounded-xl border border-line/80 bg-raised/25 px-3 py-2">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <span className="text-[11.5px] font-medium text-ink">{toolLabel(message.call.name)}</span>
+                      <span className="min-w-0 flex-1 truncate font-mono text-[10.5px] text-muted">
+                        {toolSummary(message.call.name, message.call.args) || '—'}
+                      </span>
+                      <span className={cn('flex shrink-0 items-center gap-1 text-[10px] font-medium', status.className)}>
+                        {message.status === 'done' ? (
+                          <Check size={10} />
+                        ) : (
+                          <span className={cn('h-1.5 w-1.5 rounded-full', status.dot)} />
+                        )}
+                        {status.label}
+                        {message.durationMs !== undefined && message.status === 'done'
+                          ? ` · ${message.durationMs < 1000 ? `${message.durationMs}ms` : `${(message.durationMs / 1000).toFixed(1)}s`}`
+                          : ''}
+                      </span>
+                    </div>
+                    {message.result && (
+                      <p className="mt-1.5 line-clamp-2 whitespace-pre-wrap break-words font-mono text-[10.5px] leading-relaxed text-faint">
+                        {preview(message.result, 160)}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+
+        <p className="mt-6 flex items-center justify-center gap-1 text-[10px] text-faint">
+          End of trajectory <ChevronRight size={10} />
+        </p>
+      </div>
+    </div>
+  )
+}