@bibobonking/opensol 3.1.1 → 3.1.3

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',