@bibobonking/opensol 3.1.2 → 3.1.4

package/server/lib/tools.mjs

@@ -5,6 +5,7 @@ import {
   chmod,
   lstat,
   mkdir,
+  mkdtemp,
   readdir,
   readFile,
   realpath,
@@ -14,6 +15,7 @@ import {
   writeFile,
 } from 'node:fs/promises'
 import { isIP } from 'node:net'
+import os from 'node:os'
 import path from 'node:path'
 import { HttpError } from './http.mjs'
 import { loadState, loadSecretsSafe } from './store.mjs'
@@ -971,6 +973,39 @@ export async function checkpointSummary(id) {
   return checkpoint ? describeCheckpoint(checkpoint) : null
 }
 
+/**
+ * Skills are uploaded as text files. Materialise them in a throwaway folder,
+ * run one command there, and delete the folder so nothing leaks between calls.
+ */
+async function runSkillScript({ files, command }) {
+  if (!files || typeof files !== 'object') throw new HttpError(400, 'The skill has no files.', 'bad_skill')
+  const entries = Object.entries(files).filter(
+    (entry) => typeof entry[1] === 'string' && typeof entry[0] === 'string' && entry[0].trim(),
+  )
+  if (entries.length === 0) throw new HttpError(400, 'The skill has no files.', 'bad_skill')
+  if (entries.length > 200) throw new HttpError(400, 'A skill may ship at most 200 files.', 'skill_too_large')
+  const root = await mkdtemp(path.join(os.tmpdir(), 'opensol-skill-'))
+  try {
+    for (const [relative, content] of entries) {
+      const clean = relative.replace(/\\/g, '/').replace(/^\/+/, '')
+      const absolute = path.resolve(root, clean)
+      if (!absolute.startsWith(`${root}${path.sep}`)) {
+        throw new HttpError(400, `Unsafe path in skill files: ${relative}`, 'bad_skill')
+      }
+      await mkdir(path.dirname(absolute), { recursive: true })
+      await writeFile(absolute, content.slice(0, 512 * 1024))
+    }
+    const result = await runProcess('/bin/bash', ['-lc', String(command ?? '')], {
+      cwd: root,
+      timeoutMs: 120_000,
+      env: { OPENSOL_SKILL_ROOT: root },
+    })
+    return result
+  } finally {
+    await rm(root, { recursive: true, force: true }).catch(() => undefined)
+  }
+}
+
 export async function executeTool(name, args = {}, { mode = 'build', checkpoint = '' } = {}) {
   const input = args && typeof args === 'object' ? args : {}
   // The prompt promises the daemon enforces plan mode, so enforce it here and not only in the UI.
@@ -981,6 +1016,9 @@ export async function executeTool(name, args = {}, { mode = 'build', checkpoint
       'plan_readonly',
     )
   }
+  if (mode === 'plan' && name === 'skill_run') {
+    throw new HttpError(403, 'Plan mode is read-only. Skill scripts may change the machine.', 'plan_readonly')
+  }
   if (checkpoint && FILE_MUTATIONS.has(name)) {
     try {
       const { root, absolute, relative } = await resolveWorkspacePath(String(input.path ?? ''), { allowRoot: false })
@@ -1017,6 +1055,8 @@ export async function executeTool(name, args = {}, { mode = 'build', checkpoint
       return readUrl(String(input.url ?? ''))
     case 'git':
       return runGit(String(input.action ?? 'status'), input, { mode })
+    case 'skill_run':
+      return runSkillScript({ files: input.files, command: input.command })
     default:
       throw new HttpError(400, `Unknown tool: ${name}`, 'unknown_tool')
   }

package/src/agent/adapters/openai-responses.ts

@@ -190,7 +190,11 @@ export async function streamOpenAIResponses(request: AdapterRequest): Promise<Ad
       const done = itemRecord(event.response)
       const value = itemRecord(done.usage)
       if (typeof value.input_tokens === 'number' || typeof value.output_tokens === 'number') {
-        usage = { input: Number(value.input_tokens) || undefined, output: Number(value.output_tokens) || undefined }
+        usage = {
+          input: Number(value.input_tokens) || undefined,
+          output: Number(value.output_tokens) || undefined,
+          cost: typeof value.cost === 'number' ? value.cost : undefined,
+        }
         handlers.onUsage(usage)
       }
     }

package/src/agent/adapters/openai.ts

@@ -95,6 +95,10 @@ export async function streamOpenAI(request: AdapterRequest): Promise<AdapterResu
   if (settings.provider === 'openai' || settings.provider === 'openrouter') {
     body.stream_options = { include_usage: true }
   }
+  if (settings.provider === 'openrouter') {
+    // Ask OpenRouter to include the credit cost in the final usage chunk.
+    body.usage = { include: true }
+  }
   if (usesCompletionTokens(settings.provider, modelId)) {
     body.max_completion_tokens = settings.maxTokens
   } else {
@@ -134,8 +138,17 @@ export async function streamOpenAI(request: AdapterRequest): Promise<AdapterResu
     }
 
     if (payload.usage && typeof payload.usage === 'object') {
-      const value = payload.usage as { prompt_tokens?: number; completion_tokens?: number }
-      usage = { input: value.prompt_tokens, output: value.completion_tokens }
+      const value = payload.usage as {
+        prompt_tokens?: number
+        completion_tokens?: number
+        cost?: number
+        total_cost?: number
+      }
+      usage = {
+        input: value.prompt_tokens,
+        output: value.completion_tokens,
+        cost: typeof value.cost === 'number' ? value.cost : typeof value.total_cost === 'number' ? value.total_cost : undefined,
+      }
       handlers.onUsage(usage)
     }
 

package/src/agent/prompt.ts

@@ -36,13 +36,10 @@ export function buildSystemPrompt(settings: AppSettings, mode: AgentMode = setti
   if (skills.length > 0) {
     chunks.push(
       [
-        '## Loaded skills',
-        'Apply these skills when the task matches their purpose. They refine the working rules above; they never override safety, tool permissions or plan mode.',
-        ...skills.map(
-          (skill) =>
-            `<skill name="${skill.name}">\nPurpose: ${skill.description}\n${skill.instructions.trim()}\n</skill>`,
-        ),
-      ].join('\n\n'),
+        '## Available skills',
+        'Call the `skill` tool to load the full instructions (and run scripts from the skill folder) when a task matches one of these. Do not guess a skill’s contents.',
+        ...skills.map((skill) => `- ${skill.name} (${skill.id}): ${skill.description}`),
+      ].join('\n'),
     )
   }
 

package/src/agent/tools.ts

@@ -519,6 +519,7 @@ export function toolLabel(name: ToolName): string {
     read_url: 'Read URL',
     git: 'Git',
     subagent: 'Subagent',
+    skill: 'Skill',
   }
   return labels[name as BuiltinToolName] ?? 'Tool'
 }

package/src/components/DeployModal.tsx

@@ -9,12 +9,14 @@ import {
   Play,
   Rocket,
   ShieldCheck,
+  Sparkles,
   Square,
   Triangle,
   Terminal,
+  X,
 } from 'lucide-react'
 import type { DeployProviderId, DeployResult } from '../types'
-import { streamDeploy } from '../lib/daemon'
+import { inspectDeploy, streamDeploy, type DeployInspection } from '../lib/daemon'
 import { cn } from '../lib/utils'
 import { useSettings } from '../store/settings'
 import { useUi } from '../store/ui'
@@ -74,9 +76,11 @@ export function DeployModal() {
 
   const [provider, setProvider] = useState<DeployProviderId>('cloudflare')
   const [path, setPath] = useState('')
-  const [outputDir, setOutputDir] = useState('dist')
+  const [outputDir, setOutputDir] = useState('')
   const [buildCommand, setBuildCommand] = useState('')
   const [projectName, setProjectName] = useState('')
+  const [inspection, setInspection] = useState<DeployInspection | null>(null)
+  const [inspecting, setInspecting] = useState(false)
   const [running, setRunning] = useState(false)
   const [logs, setLogs] = useState<LogLine[]>([])
   const [result, setResult] = useState<DeployResult | null>(null)
@@ -89,10 +93,15 @@ export function DeployModal() {
   const meta = PROVIDERS.find((entry) => entry.id === provider) ?? PROVIDERS[0]
   const tool = deployTools?.[provider]
   const configured = Boolean(deploySecrets?.[provider]?.configured)
+  const lastUrl = deploySecrets?.[provider]?.fields?.lastUrl ?? ''
 
   useEffect(() => {
     if (!open) return
     setPath(workspaceRoot)
+    setOutputDir('')
+    setBuildCommand('')
+    setProjectName('')
+    setInspection(null)
     setResult(null)
     setError('')
     setLogs([])
@@ -100,6 +109,30 @@ export function DeployModal() {
     setCopied(false)
   }, [open, workspaceRoot])
 
+  const detect = async (target = path) => {
+    if (!target.trim()) return
+    setInspecting(true)
+    try {
+      const info = await inspectDeploy(target.trim())
+      setInspection(info)
+      if (info.buildCommand) setBuildCommand((value) => value || info.buildCommand)
+      if (info.outputDir) setOutputDir((value) => value || info.outputDir)
+      if (info.name) setProjectName((value) => value || info.name)
+    } catch (cause) {
+      setInspection(null)
+      setError(cause instanceof Error ? cause.message : 'Could not inspect that folder.')
+    } finally {
+      setInspecting(false)
+    }
+  }
+
+  // Fill the form from the real project once the path settles.
+  useEffect(() => {
+    if (!open || !path.trim()) return
+    const timer = window.setTimeout(() => void detect(path), 450)
+    return () => window.clearTimeout(timer)
+  }, [open, path])
+
   useEffect(() => {
     if (!open) return
     const node = logRef.current
@@ -201,7 +234,7 @@ export function DeployModal() {
           </div>
         </div>
         <button type="button" className="icon-button -mr-1 shrink-0" onClick={close} aria-label="Close deploy panel">
-          <span className="text-[18px] leading-none">×</span>
+          <X size={16} />
         </button>
       </div>
 
@@ -221,16 +254,16 @@ export function DeployModal() {
                       onClick={() => setProvider(entry.id)}
                       disabled={running}
                       className={cn(
-                        'flex items-start gap-2.5 rounded-xl border px-3 py-2.5 text-left transition-colors disabled:opacity-60',
+                        'group/host flex items-start gap-2.5 rounded-xl border px-3 py-2.5 text-left transition-all duration-200 disabled:opacity-60',
                         active
-                          ? 'border-accent/35 bg-accent-soft/45'
-                          : 'border-line bg-panel hover:bg-raised/50',
+                          ? 'border-accent/40 bg-gradient-to-br from-accent-soft/80 to-panel shadow-pill'
+                          : 'border-line bg-panel hover:border-line hover:bg-raised/50',
                       )}
                     >
                       <span
                         className={cn(
-                          'mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg',
-                          active ? 'bg-accent text-on-accent' : 'bg-raised text-muted',
+                          'mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg transition-colors',
+                          active ? 'bg-accent text-on-accent shadow-pill' : 'bg-raised text-muted group-hover/host:text-ink',
                         )}
                       >
                         <Icon size={13} />
@@ -254,6 +287,18 @@ export function DeployModal() {
               </div>
             </div>
 
+            {lastUrl && (
+              <a
+                href={lastUrl}
+                target="_blank"
+                rel="noreferrer"
+                className="flex items-center gap-1.5 rounded-lg border border-line bg-raised/30 px-2.5 py-1.5 text-[9.5px] text-muted hover:text-ink"
+              >
+                <ExternalLink size={10} className="shrink-0 text-faint" />
+                <span className="truncate">Last deploy: {lastUrl}</span>
+              </a>
+            )}
+
             {!configured && (
               <div className="rounded-xl border border-warning/25 bg-warning/[0.045] p-3">
                 <p className="flex items-start gap-1.5 text-[10.5px] leading-relaxed text-muted">
@@ -300,10 +345,27 @@ export function DeployModal() {
                 spellCheck={false}
                 className="h-9 w-full rounded-lg border border-line bg-panel px-2.5 font-mono text-[10.5px] text-ink outline-none transition-colors placeholder:text-faint focus:border-accent/50 disabled:opacity-60"
               />
-              <p className="mt-1 text-[9px] leading-relaxed text-faint">
-                {workspaceAvailable ? `Open workspace: ${workspaceName}` : 'No workspace open.'} Another folder must
-                already exist on this machine.
-              </p>
+              <div className="mt-1.5 flex items-center gap-2">
+                <p className="min-w-0 flex-1 truncate text-[9px] leading-relaxed text-faint">
+                  {workspaceAvailable ? `Open workspace: ${workspaceName}` : 'No workspace open.'} Any folder that already exists on this machine.
+                </p>
+                <button
+                  type="button"
+                  onClick={() => void detect()}
+                  disabled={running || inspecting || !path.trim()}
+                  className="inline-flex h-6 shrink-0 items-center gap-1 rounded-md border border-line bg-panel px-1.5 text-[9px] font-medium text-muted hover:text-ink disabled:opacity-40"
+                >
+                  {inspecting ? <Spinner size={9} /> : <Sparkles size={9} />}
+                  Detect
+                </button>
+              </div>
+              {inspection && (
+                <div className="mt-2 flex flex-wrap items-center gap-1.5 rounded-lg border border-line bg-raised/40 px-2 py-1.5 text-[9px] text-muted">
+                  <span className="rounded bg-panel px-1.5 py-0.5 font-medium text-ink">{inspection.framework}</span>
+                  {inspection.existingOutputs.length > 0 && <span>build output: {inspection.existingOutputs.join(', ')}</span>}
+                  {!inspection.hasPackageJson && <span>static folder, no package.json</span>}
+                </div>
+              )}
             </div>
 
             <div className="grid grid-cols-2 gap-2.5">
@@ -316,7 +378,7 @@ export function DeployModal() {
                   value={outputDir}
                   onChange={(event) => setOutputDir(event.target.value)}
                   disabled={running}
-                  placeholder="dist"
+                  placeholder="auto"
                   spellCheck={false}
                   className="h-8 w-full rounded-lg border border-line bg-panel px-2 font-mono text-[10.5px] text-ink outline-none focus:border-accent/50 disabled:opacity-60"
                 />
@@ -338,13 +400,13 @@ export function DeployModal() {
             </div>
 
             <div className="flex flex-wrap gap-1">
-              {['dist', 'build', 'out', '.'].map((value) => (
+              {['auto', 'dist', 'build', 'out', '.'].map((value) => (
                 <button
                   key={value}
                   type="button"
                   onClick={() => setOutputDir(value)}
                   disabled={running}
-                  className={cn('chip h-7 px-2 text-[9.5px]', outputDir === value && 'chip-active')}
+                  className={cn('chip h-7 px-2 text-[9.5px]', (outputDir || 'auto') === value && 'chip-active')}
                 >
                   {value}
                 </button>

package/src/components/FileIcon.tsx

@@ -0,0 +1,108 @@
+import type { LucideIcon } from 'lucide-react'
+import {
+  Braces,
+  FileArchive,
+  FileAudio,
+  FileCode2,
+  FileCog,
+  FileImage,
+  FileKey2,
+  FileLock2,
+  FileText,
+  FileVideo,
+  Folder,
+  FolderOpen,
+  Palette,
+  Terminal,
+} from 'lucide-react'
+import { cn } from '../lib/utils'
+
+const TYPES: Record<string, { icon: LucideIcon; tone: string }> = {
+  ts: { icon: FileCode2, tone: 'text-sky-500' },
+  tsx: { icon: FileCode2, tone: 'text-sky-500' },
+  js: { icon: FileCode2, tone: 'text-amber-400' },
+  jsx: { icon: FileCode2, tone: 'text-amber-400' },
+  mjs: { icon: FileCode2, tone: 'text-amber-400' },
+  cjs: { icon: FileCode2, tone: 'text-amber-400' },
+  rs: { icon: FileCode2, tone: 'text-orange-400' },
+  go: { icon: FileCode2, tone: 'text-cyan-400' },
+  py: { icon: FileCode2, tone: 'text-emerald-400' },
+  rb: { icon: FileCode2, tone: 'text-rose-400' },
+  java: { icon: FileCode2, tone: 'text-red-400' },
+  css: { icon: Palette, tone: 'text-fuchsia-400' },
+  scss: { icon: Palette, tone: 'text-pink-400' },
+  sass: { icon: Palette, tone: 'text-pink-400' },
+  less: { icon: Palette, tone: 'text-pink-400' },
+  html: { icon: FileCode2, tone: 'text-orange-500' },
+  vue: { icon: FileCode2, tone: 'text-emerald-500' },
+  svelte: { icon: FileCode2, tone: 'text-orange-500' },
+  json: { icon: Braces, tone: 'text-yellow-500' },
+  jsonc: { icon: Braces, tone: 'text-yellow-500' },
+  yaml: { icon: FileCog, tone: 'text-teal-400' },
+  yml: { icon: FileCog, tone: 'text-teal-400' },
+  toml: { icon: FileCog, tone: 'text-teal-400' },
+  ini: { icon: FileCog, tone: 'text-teal-400' },
+  env: { icon: FileKey2, tone: 'text-amber-500' },
+  md: { icon: FileText, tone: 'text-violet-400' },
+  mdx: { icon: FileText, tone: 'text-violet-400' },
+  txt: { icon: FileText, tone: 'text-slate-400' },
+  csv: { icon: FileText, tone: 'text-emerald-400' },
+  svg: { icon: FileImage, tone: 'text-purple-400' },
+  png: { icon: FileImage, tone: 'text-purple-400' },
+  jpg: { icon: FileImage, tone: 'text-purple-400' },
+  jpeg: { icon: FileImage, tone: 'text-purple-400' },
+  gif: { icon: FileImage, tone: 'text-purple-400' },
+  webp: { icon: FileImage, tone: 'text-purple-400' },
+  ico: { icon: FileImage, tone: 'text-purple-400' },
+  mp3: { icon: FileAudio, tone: 'text-rose-400' },
+  wav: { icon: FileAudio, tone: 'text-rose-400' },
+  mp4: { icon: FileVideo, tone: 'text-rose-400' },
+  mov: { icon: FileVideo, tone: 'text-rose-400' },
+  zip: { icon: FileArchive, tone: 'text-amber-500' },
+  gz: { icon: FileArchive, tone: 'text-amber-500' },
+  tar: { icon: FileArchive, tone: 'text-amber-500' },
+  lock: { icon: FileLock2, tone: 'text-slate-400' },
+  sh: { icon: Terminal, tone: 'text-emerald-400' },
+  bash: { icon: Terminal, tone: 'text-emerald-400' },
+  zsh: { icon: Terminal, tone: 'text-emerald-400' },
+  sql: { icon: FileText, tone: 'text-cyan-400' },
+}
+
+const SPECIAL: Array<{ match: RegExp; icon: LucideIcon; tone: string }> = [
+  { match: /^(dockerfile|makefile|justfile)$/i, icon: FileCog, tone: 'text-sky-400' },
+  { match: /^\.env/i, icon: FileKey2, tone: 'text-amber-500' },
+  { match: /^(\.gitignore|\.gitattributes|\.npmignore|\.dockerignore)$/i, icon: FileCog, tone: 'text-slate-400' },
+  { match: /^package(-lock)?\.json$/i, icon: Braces, tone: 'text-emerald-400' },
+  { match: /^(vite|webpack|rollup|tsconfig|tailwind|postcss)\./i, icon: FileCog, tone: 'text-sky-400' },
+  { match: /^readme/i, icon: FileText, tone: 'text-violet-400' },
+  { match: /^skill\.md$/i, icon: FileText, tone: 'text-accent' },
+]
+
+export function fileTone(path: string): { icon: LucideIcon; tone: string } {
+  const name = path.split('/').pop() ?? path
+  const special = SPECIAL.find((entry) => entry.match.test(name))
+  if (special) return { icon: special.icon, tone: special.tone }
+  const extension = /\.([a-z0-9]+)$/i.exec(name)?.[1]?.toLowerCase() ?? ''
+  return TYPES[extension] ?? { icon: FileText, tone: 'text-faint' }
+}
+
+export function FileIcon({
+  path,
+  type = 'file',
+  open = false,
+  size = 13,
+  className,
+}: {
+  path: string
+  type?: 'file' | 'dir' | 'link'
+  open?: boolean
+  size?: number
+  className?: string
+}) {
+  if (type === 'dir') {
+    const Icon = open ? FolderOpen : Folder
+    return <Icon size={size} className={cn('shrink-0 fill-amber-400/25 text-amber-500', className)} />
+  }
+  const { icon: Icon, tone } = fileTone(path)
+  return <Icon size={size} className={cn('shrink-0', tone, className)} />
+}

package/src/components/HomeDashboard.tsx

@@ -1,10 +1,10 @@
 import { useMemo, useState } from 'react'
-import { Activity, CalendarDays, Clock3, Cpu, MessageSquare, Sparkles } from 'lucide-react'
+import { Activity, CalendarDays, Clock3, Cpu, CreditCard, MessageSquare, Sparkles } from 'lucide-react'
 import { useChats } from '../store/chats'
 import { useSettings } from '../store/settings'
 import { useWorkspace } from '../store/workspace'
 import { cn } from '../lib/utils'
-import { computeUsage, formatTokens, shortModelName, type UsageRange } from '../lib/usage'
+import { computeUsage, formatCredits, formatTokens, shortModelName, type UsageRange } from '../lib/usage'
 import { PixleSol } from './PixleSol'
 
 const RANGES: Array<{ value: UsageRange; label: string }> = [
@@ -118,6 +118,7 @@ export function HomeDashboard() {
               <Stat icon={Activity} label="Sessions" value={String(stats.sessions)} />
               <Stat icon={MessageSquare} label="Messages" value={String(stats.messages)} />
               <Stat icon={Sparkles} label="Total tokens" value={stats.tokens ? formatTokens(stats.tokens) : '0'} />
+              <Stat icon={CreditCard} label="Credits spent" value={formatCredits(stats.credits)} />
               <Stat icon={CalendarDays} label="Active days" value={String(stats.activeDays)} />
               <Stat icon={Clock3} label="Peak hour" value={stats.peakHour} />
               <Stat icon={Cpu} label="Favorite model" value={shortModelName(stats.favoriteModel)} />
@@ -143,6 +144,12 @@ export function HomeDashboard() {
               {stats.messages === 0
                 ? 'No activity in this range yet. Send a message to start the graph.'
                 : `You've used ~${formatTokens(stats.tokens)} tokens across ${stats.messages} messages.`}
+              {stats.credits > 0 && (
+                <>
+                  <span className="px-1.5 text-line">·</span>
+                  {formatCredits(stats.credits)} in provider credits
+                </>
+              )}
               {stats.favoriteModel !== '—' && (
                 <>
                   <span className="px-1.5 text-line">·</span>

package/src/components/Logo.tsx

@@ -1,6 +1,6 @@
 import { cn } from '../lib/utils'
 
-/** The OpenSol sun: a solid core with eight round-capped rays. Inherits `currentColor`. */
+/** The OpenSol aperture: a broken solar ring around a solid core. Inherits `currentColor`. */
 export function LogoMark({ size = 28, className, spin = false }: { size?: number; className?: string; spin?: boolean }) {
   return (
     <span
@@ -9,10 +9,16 @@ export function LogoMark({ size = 28, className, spin = false }: { size?: number
       aria-hidden="true"
     >
       <svg viewBox="0 0 32 32" width={size} height={size} fill="none" className={cn(spin && 'animate-spin-slow')}>
-        <circle cx="16" cy="16" r="6.2" fill="currentColor" />
-        <g stroke="currentColor" strokeWidth="2.4" strokeLinecap="round">
-          <path d="M16 3.6v3.2M16 25.2v3.2M3.6 16h3.2M25.2 16h3.2" />
-          <path d="M7.2 7.2l2.2 2.2M22.6 22.6l2.2 2.2M7.2 24.8l2.2-2.2M22.6 9.4l2.2-2.2" opacity="0.55" />
+        <circle cx="16" cy="16" r="5.1" fill="currentColor" />
+        <circle cx="16" cy="16" r="8.4" stroke="currentColor" strokeWidth="0.9" opacity="0.22" />
+        <g stroke="currentColor" strokeWidth="2.15" strokeLinecap="round">
+          <path d="M16 4.4a11.6 11.6 0 0 1 9.7 5.5" />
+          <path d="M27.6 16a11.6 11.6 0 0 1-5.5 9.7" opacity="0.6" />
+          <path d="M16 27.6a11.6 11.6 0 0 1-9.7-5.5" opacity="0.32" />
+          <path d="M4.4 16a11.6 11.6 0 0 1 5.5-9.7" opacity="0.8" />
+        </g>
+        <g stroke="currentColor" strokeWidth="1.7" strokeLinecap="round">
+          <path d="M16 1.5v2.2M30.5 16h-2.2M16 30.5v-2.2M1.5 16h2.2" opacity="0.9" />
         </g>
       </svg>
     </span>

package/src/components/ModelDeck.tsx

@@ -178,6 +178,8 @@ export function ModelDeck({ open, onClose }: { open: boolean; onClose: () => voi
   const [manual, setManual] = useState('')
   const [showManual, setShowManual] = useState(false)
   const [cursor, setCursor] = useState(0)
+  /** Only keyboard moves scroll the list; scrolling on hover fights the pointer and jitters. */
+  const keyboardCursor = useRef(true)
   const listRef = useRef<HTMLDivElement>(null)
   const searchRef = useRef<HTMLInputElement>(null)
 
@@ -226,11 +228,13 @@ export function ModelDeck({ open, onClose }: { open: boolean; onClose: () => voi
   }, [models, query])
 
   useLayoutEffect(() => {
+    keyboardCursor.current = true
     setCursor(0)
   }, [query, provider])
 
   useEffect(() => {
-    listRef.current?.querySelector<HTMLElement>(`[data-row="${cursor}"]`)?.scrollIntoView({ block: 'center' })
+    if (!keyboardCursor.current) return
+    listRef.current?.querySelector<HTMLElement>(`[data-row="${cursor}"]`)?.scrollIntoView({ block: 'nearest' })
   }, [cursor])
 
   const choose = (model: ModelInfo) => {
@@ -258,9 +262,11 @@ export function ModelDeck({ open, onClose }: { open: boolean; onClose: () => voi
   const onSearchKey = (event: KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'ArrowDown') {
       event.preventDefault()
+      keyboardCursor.current = true
       setCursor((value) => Math.min(filtered.length - 1, value + 1))
     } else if (event.key === 'ArrowUp') {
       event.preventDefault()
+      keyboardCursor.current = true
       setCursor((value) => Math.max(0, value - 1))
     } else if (event.key === 'Enter') {
       event.preventDefault()
@@ -472,7 +478,11 @@ export function ModelDeck({ open, onClose }: { open: boolean; onClose: () => voi
                           setCursor(i)
                           choose(model)
                         }}
-                        onMouseMove={() => highlighted || setCursor(i)}
+                        onMouseEnter={() => {
+                          if (highlighted) return
+                          keyboardCursor.current = false
+                          setCursor(i)
+                        }}
                         style={{ animationDelay: `${Math.min(i * 22, 260)}ms` }}
                         className={cn(
                           'deck-row group/row relative mb-1 flex w-full items-center gap-3 overflow-hidden rounded-2xl px-3 py-2.5 text-left transition-colors',