@bibobonking/opensol 0.0.0-stage → 3.0.1

package/src/components/HomeDashboard.tsx

@@ -0,0 +1,189 @@
+import { useMemo, useState } from 'react'
+import { Activity, CalendarDays, Clock3, Cpu, 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 { PixleSol } from './PixleSol'
+
+const RANGES: Array<{ value: UsageRange; label: string }> = [
+  { value: 'all', label: 'All' },
+  { value: '30d', label: '30d' },
+  { value: '7d', label: '7d' },
+]
+
+const HEAT_LEVELS = [
+  'bg-raised',
+  'bg-accent/20',
+  'bg-accent/35',
+  'bg-accent/55',
+  'bg-accent/80',
+]
+
+function heatLevel(count: number, busiest: number) {
+  if (count <= 0) return 0
+  if (busiest <= 1) return 2
+  return Math.min(4, 1 + Math.floor((count / busiest) * 3))
+}
+
+function Stat({ icon: Icon, label, value }: { icon: typeof Activity; label: string; value: string }) {
+  return (
+    <div className="min-w-0 rounded-lg border border-line/70 bg-canvas px-3 py-2.5">
+      <p className="flex items-center gap-1.5 text-[11.5px] text-muted">
+        <Icon size={12} className="shrink-0 text-faint" />
+        <span className="truncate">{label}</span>
+      </p>
+      <p className="mt-0.5 truncate text-[20px] font-semibold tracking-[-0.03em] text-ink" title={value}>
+        {value}
+      </p>
+    </div>
+  )
+}
+
+export function HomeGreeting() {
+  const daemon = useSettings((state) => state.daemon)
+  const workspace = useWorkspace((state) => state.info)
+  const home = daemon?.home ?? ''
+  const name = home.split(/[\\/]/).filter(Boolean).pop() || workspace.name || 'there'
+  return (
+    <div className="flex flex-col items-center gap-4 text-center">
+      <div className="relative">
+        <span className="absolute inset-0 -z-10 m-auto h-16 w-16 rounded-full bg-accent/20 blur-2xl" aria-hidden="true" />
+        <PixleSol mood="wave" size={60} />
+      </div>
+      <h1 className="text-[28px] font-semibold leading-tight tracking-[-0.035em] text-ink sm:text-[34px]">
+        What should we build, <span className="text-solar">{name}</span>?
+      </h1>
+      <p className="-mt-2 text-[13.5px] text-muted">Local-first agent. Your folder, your keys, your machine.</p>
+    </div>
+  )
+}
+
+export function HomeDashboard() {
+  const sessions = useChats((state) => state.sessions)
+  const [range, setRange] = useState<UsageRange>('30d')
+  const [tab, setTab] = useState<'overview' | 'models'>('overview')
+  const stats = useMemo(() => computeUsage(sessions, range), [sessions, range])
+
+  const columns = useMemo(() => {
+    const weeks: typeof stats.heatmap[] = []
+    for (let index = 0; index < stats.heatmap.length; index += 7) {
+      weeks.push(stats.heatmap.slice(index, index + 7))
+    }
+    return weeks
+  }, [stats.heatmap])
+
+  const topModelTokens = stats.models[0]?.tokens ?? 0
+
+  return (
+    <div className="relative w-full">
+      <section className="relative overflow-hidden rounded-xl border border-line bg-panel">
+        <div className="relative flex flex-wrap items-center justify-between gap-2 border-b border-line/70 px-3 py-2.5">
+          <div className="inline-flex items-center rounded-lg bg-raised p-0.5">
+            {(['overview', 'models'] as const).map((value) => (
+              <button
+                key={value}
+                type="button"
+                onClick={() => setTab(value)}
+                className={cn(
+                  'h-6 rounded-md px-2.5 text-[11.5px] font-medium capitalize transition-colors',
+                  tab === value ? 'bg-panel text-ink shadow-pill' : 'text-muted hover:text-ink',
+                )}
+              >
+                {value}
+              </button>
+            ))}
+          </div>
+          <div className="inline-flex items-center gap-0.5 rounded-lg bg-raised p-0.5">
+            {RANGES.map((entry) => (
+              <button
+                key={entry.value}
+                type="button"
+                onClick={() => setRange(entry.value)}
+                className={cn(
+                  'h-6 rounded-md px-2.5 text-[11.5px] font-medium transition-colors',
+                  range === entry.value ? 'bg-panel text-ink shadow-pill' : 'text-muted hover:text-ink',
+                )}
+              >
+                {entry.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {tab === 'overview' ? (
+          <div className="relative p-3">
+            <div className="grid grid-cols-2 gap-1.5 sm:grid-cols-3">
+              <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={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)} />
+            </div>
+
+            <div className="mt-3 overflow-x-auto">
+              <div className="flex w-max gap-[3px]">
+                {columns.map((week, index) => (
+                  <div key={index} className="grid grid-rows-7 gap-[3px]">
+                    {week.map((day) => (
+                      <span
+                        key={day.key}
+                        className={cn('h-[11px] w-[11px] rounded-[2px]', HEAT_LEVELS[heatLevel(day.count, stats.busiestDay)])}
+                        title={`${day.key} · ${day.count} message${day.count === 1 ? '' : 's'}`}
+                      />
+                    ))}
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <p className="mt-2.5 text-[11px] leading-relaxed text-muted">
+              {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.favoriteModel !== '—' && (
+                <>
+                  <span className="px-1.5 text-line">·</span>
+                  {stats.favoriteShare}% on {shortModelName(stats.favoriteModel)}
+                </>
+              )}
+            </p>
+          </div>
+        ) : (
+          <div className="relative p-3">
+            {stats.models.length === 0 ? (
+              <div className="rounded-xl border border-dashed border-line px-4 py-8 text-center">
+                <Cpu size={18} className="mx-auto text-faint" />
+                <p className="mt-2 text-[12px] font-medium text-ink">No model usage yet</p>
+                <p className="mt-1 text-[11px] text-muted">Models appear here after you send a message.</p>
+              </div>
+            ) : (
+              <div className="space-y-2.5">
+                {stats.models.slice(0, 6).map((model) => (
+                  <div key={model.model}>
+                    <div className="flex items-baseline justify-between gap-3">
+                      <span className="min-w-0 truncate text-[12px] font-medium text-ink" title={model.model}>
+                        {shortModelName(model.model)}
+                      </span>
+                      <span className="shrink-0 text-[10.5px] tabular-nums text-faint">
+                        {formatTokens(model.tokens)} · {model.messages} msg
+                      </span>
+                    </div>
+                    <div className="mt-1 h-1.5 overflow-hidden rounded-full bg-raised">
+                      <div
+                        className="h-full rounded-full bg-accent/70"
+                        style={{ width: `${topModelTokens ? Math.max(4, (model.tokens / topModelTokens) * 100) : 4}%` }}
+                      />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </section>
+    </div>
+  )
+}

package/src/components/Logo.tsx

@@ -0,0 +1,41 @@
+import { cn } from '../lib/utils'
+
+/** The OpenSol sun: a solid core with eight round-capped rays. Inherits `currentColor`. */
+export function LogoMark({ size = 28, className, spin = false }: { size?: number; className?: string; spin?: boolean }) {
+  return (
+    <span
+      className={cn('inline-flex shrink-0 items-center justify-center text-accent', className)}
+      style={{ width: size, height: size }}
+      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" />
+        </g>
+      </svg>
+    </span>
+  )
+}
+
+export function LogoLockup({ compact = false }: { compact?: boolean }) {
+  return (
+    <div className="group/logo flex items-center gap-2">
+      <LogoMark size={compact ? 20 : 22} className="transition-transform duration-500 ease-out group-hover/logo:rotate-90" />
+      {!compact && (
+        <span className="text-[15px] font-semibold leading-none tracking-[-0.025em] text-ink">
+          Open<span className="text-accent">Sol</span>
+        </span>
+      )}
+    </div>
+  )
+}
+
+export function BrandFooter() {
+  return (
+    <p className="text-[11px] tracking-[0.01em] text-faint">
+      OpenSol <span className="px-1 text-line">/</span> by OpenSoft
+    </p>
+  )
+}

package/src/components/Markdown.tsx

@@ -0,0 +1,232 @@
+import { isValidElement, memo, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import rehypeHighlight from 'rehype-highlight'
+import { Check, Copy, Download, Maximize2, RotateCw, X } from 'lucide-react'
+import { cn, downloadText } from '../lib/utils'
+
+function extractLanguage(children: ReactNode): string {
+  const first = Array.isArray(children) ? children[0] : children
+  if (first && typeof first === 'object' && 'props' in first) {
+    const props = (first as { props?: { className?: string } }).props
+    const match = /language-([\w-]+)/.exec(props?.className ?? '')
+    if (match) return match[1]
+  }
+  return ''
+}
+
+/** Plain text of a (syntax-highlighted) React subtree. */
+function nodeText(node: ReactNode): string {
+  if (node === null || node === undefined || typeof node === 'boolean') return ''
+  if (typeof node === 'string' || typeof node === 'number') return String(node)
+  if (Array.isArray(node)) return node.map(nodeText).join('')
+  if (isValidElement(node)) return nodeText((node.props as { children?: ReactNode }).children)
+  return ''
+}
+
+/** Whether a code block is something the browser can run as a page. */
+function canPreview(language: string, code: string): boolean {
+  if (language === 'svg') return /<svg[\s>]/i.test(code)
+  if (language === 'html' || language === 'htm') {
+    return /<(html|body|canvas|script|style|svg|main|section|div|h1|button)\b/i.test(code)
+  }
+  return false
+}
+
+/** Turns a snippet into a complete document, so fragments and bare SVG still render. */
+function toDocument(language: string, code: string): string {
+  if (/<!doctype|<html[\s>]/i.test(code)) return code
+  const head =
+    '<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">'
+  if (language === 'svg') {
+    return `${head}<style>html,body{margin:0;min-height:100%}body{display:grid;place-items:center;background:#fff}svg{max-width:100%;height:auto}</style></head><body>${code}</body></html>`
+  }
+  return `${head}</head><body>${code}</body></html>`
+}
+
+function PreviewFrame({ html, reloadKey, className }: { html: string; reloadKey: number; className?: string }) {
+  const frameRef = useRef<HTMLIFrameElement>(null)
+
+  useEffect(() => {
+    const frame = frameRef.current
+    if (!frame) return
+    const onMessage = (event: MessageEvent) => {
+      if (event.source !== frame.contentWindow) return
+      if ((event.data as { type?: string } | null)?.type !== 'maxcode-preview-ready') return
+      frame.contentWindow?.postMessage({ type: 'maxcode-preview', html }, '*')
+    }
+    window.addEventListener('message', onMessage)
+    return () => window.removeEventListener('message', onMessage)
+  }, [html, reloadKey])
+
+  return (
+    <iframe
+      key={reloadKey}
+      ref={frameRef}
+      src="/preview-host.html"
+      title="Live preview"
+      // No allow-same-origin: the page cannot reach OpenSol, its cookies or the local daemon.
+      sandbox="allow-scripts allow-pointer-lock allow-forms allow-modals"
+      allow="fullscreen"
+      className={cn('block h-full w-full border-0 bg-white', className)}
+    />
+  )
+}
+
+function PreviewOverlay({ html, onClose }: { html: string; onClose: () => void }) {
+  const [reloadKey, setReloadKey] = useState(0)
+
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [onClose])
+
+  return createPortal(
+    <div className="fixed inset-0 z-[90] flex flex-col bg-canvas/95 p-3 backdrop-blur-sm sm:p-5" role="dialog" aria-label="Live preview">
+      <div className="mb-3 flex items-center justify-between">
+        <p className="text-[13.5px] font-medium text-ink">Live preview</p>
+        <div className="flex items-center gap-1">
+          <button type="button" className="icon-button" onClick={() => setReloadKey((value) => value + 1)} title="Restart" aria-label="Restart preview">
+            <RotateCw size={16} />
+          </button>
+          <button type="button" className="icon-button" onClick={onClose} title="Close (Esc)" aria-label="Close preview">
+            <X size={18} />
+          </button>
+        </div>
+      </div>
+      <div className="min-h-0 flex-1 overflow-hidden rounded-2xl border border-line bg-white shadow-float">
+        <PreviewFrame html={html} reloadKey={reloadKey} />
+      </div>
+    </div>,
+    document.body,
+  )
+}
+
+function CodeBlock({ children, streaming }: { children?: ReactNode; streaming?: boolean }) {
+  const [copied, setCopied] = useState(false)
+  const [view, setView] = useState<'code' | 'preview'>('code')
+  const [reloadKey, setReloadKey] = useState(0)
+  const [expanded, setExpanded] = useState(false)
+  const language = extractLanguage(children) || 'text'
+  const code = useMemo(() => nodeText(children), [children])
+  const previewable = !streaming && canPreview(language, code)
+  const html = useMemo(() => (previewable ? toDocument(language, code) : ''), [previewable, language, code])
+  const showingPreview = previewable && view === 'preview'
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(code)
+      setCopied(true)
+      window.setTimeout(() => setCopied(false), 1600)
+    } catch {
+      // Clipboard access can be blocked; leave the button unchanged.
+    }
+  }
+
+  return (
+    <div className="code-shell group/code">
+      <div className="code-head">
+        {previewable ? (
+          <div className="inline-flex items-center rounded-lg bg-raised/80 p-0.5" role="tablist" aria-label="Code or preview">
+            {(['code', 'preview'] as const).map((value) => (
+              <button
+                key={value}
+                type="button"
+                role="tab"
+                aria-selected={view === value}
+                onClick={() => setView(value)}
+                className={cn(
+                  'h-6 rounded-md px-2.5 text-[11.5px] font-medium capitalize transition-colors',
+                  view === value ? 'bg-panel text-ink shadow-pill' : 'text-muted hover:text-ink',
+                )}
+              >
+                {value}
+              </button>
+            ))}
+          </div>
+        ) : (
+          <span className="code-lang">{language}</span>
+        )}
+        <div className="flex items-center gap-0.5">
+          {showingPreview && (
+            <>
+              <button
+                type="button"
+                onClick={() => setReloadKey((value) => value + 1)}
+                className="inline-flex h-7 w-7 items-center justify-center rounded-md text-faint transition-colors hover:bg-panel hover:text-ink"
+                title="Restart"
+                aria-label="Restart preview"
+              >
+                <RotateCw size={13} />
+              </button>
+              <button
+                type="button"
+                onClick={() => setExpanded(true)}
+                className="inline-flex h-7 w-7 items-center justify-center rounded-md text-faint transition-colors hover:bg-panel hover:text-ink"
+                title="Full screen"
+                aria-label="Open preview full screen"
+              >
+                <Maximize2 size={13} />
+              </button>
+            </>
+          )}
+          {previewable && (
+            <button
+              type="button"
+              onClick={() => downloadText(language === 'svg' ? 'image.svg' : 'index.html', language === 'svg' ? code : html, language === 'svg' ? 'image/svg+xml' : 'text/html')}
+              className="inline-flex h-7 w-7 items-center justify-center rounded-md text-faint transition-colors hover:bg-panel hover:text-ink"
+              title="Download file"
+              aria-label="Download file"
+            >
+              <Download size={13} />
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={copy}
+            className="inline-flex h-7 items-center gap-1 rounded-md px-1.5 text-[11.5px] font-medium text-faint transition-colors hover:bg-panel hover:text-ink"
+            aria-label="Copy code"
+          >
+            {copied ? <Check size={13} /> : <Copy size={13} />}
+            {copied ? 'Copied' : 'Copy'}
+          </button>
+        </div>
+      </div>
+      {showingPreview ? (
+        <div className="h-[420px] min-h-[220px] resize-y overflow-hidden border-t border-line/60 bg-white">
+          <PreviewFrame html={html} reloadKey={reloadKey} />
+        </div>
+      ) : (
+        <pre className="code-pre thin-scroll">{children}</pre>
+      )}
+      {expanded && <PreviewOverlay html={html} onClose={() => setExpanded(false)} />}
+    </div>
+  )
+}
+
+function MarkdownImpl({ content, streaming }: { content: string; streaming?: boolean }) {
+  return (
+    <div className={cn('md', streaming && 'is-streaming')}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[[rehypeHighlight, { detect: true, ignoreMissing: true }]]}
+        components={{
+          pre: ({ children }) => <CodeBlock streaming={streaming}>{children}</CodeBlock>,
+          a: ({ children, href }) => (
+            <a href={href} target="_blank" rel="noreferrer noopener">
+              {children}
+            </a>
+          ),
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  )
+}
+
+export const Markdown = memo(MarkdownImpl)