memhouse 0.0.1 → 0.3.0

package/ui/src/components/ShareModal.jsx

@@ -0,0 +1,305 @@
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { X, Download, Share2, BarChart3, DollarSign, Clock, Cpu, Braces, User, Sun, Moon, FolderOpen } from 'lucide-react'
+import { fetchShareImage, fetchProjects } from '../lib/api'
+
+const TOGGLE_ITEMS = [
+  { key: 'showEditors', label: 'Editors', icon: BarChart3 },
+  { key: 'showCosts', label: 'Est. Costs', icon: DollarSign },
+  { key: 'showHours', label: 'Peak Hours', icon: Clock },
+  { key: 'showModels', label: 'Top Models', icon: Cpu },
+  { key: 'showTokens', label: 'Token Footer', icon: Braces },
+]
+
+export default function ShareModal({ open, onClose }) {
+  const [opts, setOpts] = useState({
+    showEditors: true,
+    showCosts: true,
+    showHours: true,
+    showModels: true,
+    showTokens: true,
+    username: '',
+    theme: 'dark',
+  })
+  const [svg, setSvg] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [downloading, setDownloading] = useState(false)
+  const [projects, setProjects] = useState([])
+  const debounceRef = useRef(null)
+  const backdropRef = useRef(null)
+
+  const loadPreview = useCallback(async (currentOpts) => {
+    setLoading(true)
+    try {
+      const result = await fetchShareImage(currentOpts)
+      if (result && !result.startsWith('{')) setSvg(result)
+    } catch (e) {
+      console.error('Preview failed:', e)
+    }
+    setLoading(false)
+  }, [])
+
+  useEffect(() => {
+    if (!open) return
+    loadPreview(opts)
+    fetchProjects().then(p => setProjects(p || [])).catch(() => {})
+  }, [open])
+
+  const updateOpt = (key, value) => {
+    const next = { ...opts, [key]: value }
+    setOpts(next)
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    debounceRef.current = setTimeout(() => loadPreview(next), 300)
+  }
+
+  const handleDownloadPng = async () => {
+    if (!svg) return
+    setDownloading(true)
+    try {
+      const scale = 2
+      const svgBlob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' })
+      const url = URL.createObjectURL(svgBlob)
+      const img = new Image()
+      img.width = 1200 * scale
+      img.height = 675 * scale
+      await new Promise((resolve, reject) => {
+        img.onload = resolve
+        img.onerror = reject
+        img.src = url
+      })
+      const canvas = document.createElement('canvas')
+      canvas.width = 1200 * scale
+      canvas.height = 675 * scale
+      const ctx = canvas.getContext('2d')
+      ctx.drawImage(img, 0, 0, 1200 * scale, 675 * scale)
+      URL.revokeObjectURL(url)
+      canvas.toBlob((blob) => {
+        if (!blob) return
+        const a = document.createElement('a')
+        a.href = URL.createObjectURL(blob)
+        a.download = 'agentlytics.png'
+        a.click()
+        setTimeout(() => URL.revokeObjectURL(a.href), 1000)
+      }, 'image/png')
+    } catch (e) {
+      console.error('PNG conversion failed:', e)
+      const blob = new Blob([svg], { type: 'image/svg+xml' })
+      const a = document.createElement('a')
+      a.href = URL.createObjectURL(blob)
+      a.download = 'agentlytics.svg'
+      a.click()
+      URL.revokeObjectURL(a.href)
+    }
+    setDownloading(false)
+  }
+
+  const handleDownloadSvg = () => {
+    if (!svg) return
+    const blob = new Blob([svg], { type: 'image/svg+xml' })
+    const a = document.createElement('a')
+    a.href = URL.createObjectURL(blob)
+    a.download = 'agentlytics.svg'
+    a.click()
+    URL.revokeObjectURL(a.href)
+  }
+
+  const handleShareTwitter = async () => {
+    await handleDownloadPng()
+    const text = encodeURIComponent("Here's my agentic coding stats using agentlytics.io\n\nrun `npx agentlytics` to get yours ✨\n\ngithub.com/f/agentlytics")
+    window.open(`https://x.com/intent/post?text=${text}`, '_blank')
+  }
+
+  if (!open) return null
+
+  return (
+    <div
+      ref={backdropRef}
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      style={{ background: 'rgba(0,0,0,0.85)', backdropFilter: 'blur(8px)' }}
+      onClick={(e) => e.target === backdropRef.current && onClose()}
+    >
+      <div
+        className="w-full relative flex flex-col"
+        style={{
+          maxWidth: 960,
+          maxHeight: '90vh',
+          background: 'var(--c-bg)',
+          border: '1px solid var(--c-border)',
+          borderRadius: 12,
+        }}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-3" style={{ borderBottom: '1px solid var(--c-border)' }}>
+          <div className="flex items-center gap-2">
+            <Share2 size={14} style={{ color: 'var(--c-accent)' }} />
+            <span className="text-[13px] font-semibold" style={{ color: 'var(--c-white)' }}>Share Stats</span>
+          </div>
+          <button onClick={onClose} className="p-1 rounded hover:opacity-70 transition" style={{ color: 'var(--c-text2)' }}>
+            <X size={16} />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-auto p-5" style={{ minHeight: 0 }}>
+          <div className="flex gap-5" style={{ flexDirection: 'row' }}>
+
+            {/* Sidebar: toggles */}
+            <div className="flex-shrink-0" style={{ width: 200 }}>
+              <div className="text-[11px] font-medium mb-3" style={{ color: 'var(--c-text2)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                Customize
+              </div>
+
+              <div className="mb-4">
+                <div className="text-[11px] font-medium mb-2" style={{ color: 'var(--c-text2)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                  Project
+                </div>
+                <div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md" style={{ border: '1px solid var(--c-border)', background: 'var(--c-bg)' }}>
+                  <FolderOpen size={11} style={{ color: 'var(--c-text3)' }} />
+                  <select
+                    value={opts.folder || ''}
+                    onChange={(e) => updateOpt('folder', e.target.value || undefined)}
+                    className="bg-transparent outline-none text-[12px] w-full cursor-pointer"
+                    style={{ color: 'var(--c-text)', appearance: 'none' }}
+                  >
+                    <option value="">All Projects</option>
+                    {projects.map(p => (
+                      <option key={p.folder} value={p.folder}>
+                        {p.name} ({p.totalSessions})
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+
+              <div className="space-y-1.5">
+                {TOGGLE_ITEMS.map(({ key, label, icon: Icon }) => {
+                  const active = opts[key]
+                  return (
+                    <button
+                      key={key}
+                      onClick={() => updateOpt(key, !active)}
+                      className="flex items-center gap-2 w-full px-2.5 py-2 rounded-md text-[12px] transition"
+                      style={{
+                        background: active ? 'var(--c-accent-bg, rgba(99,102,241,0.1))' : 'transparent',
+                        border: `1px solid ${active ? 'var(--c-accent, #6366f1)' : 'var(--c-border)'}`,
+                        color: active ? 'var(--c-accent, #818cf8)' : 'var(--c-text2)',
+                        opacity: active ? 1 : 0.6,
+                      }}
+                    >
+                      <Icon size={12} />
+                      {label}
+                    </button>
+                  )
+                })}
+              </div>
+
+              <div className="mt-4">
+                <div className="text-[11px] font-medium mb-2" style={{ color: 'var(--c-text2)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                  Theme
+                </div>
+                <div className="flex gap-1.5">
+                  {[{ key: 'dark', icon: Moon, label: 'Dark' }, { key: 'light', icon: Sun, label: 'Light' }].map(({ key, icon: Icon, label }) => {
+                    const active = opts.theme === key
+                    return (
+                      <button
+                        key={key}
+                        onClick={() => updateOpt('theme', key)}
+                        className="flex items-center gap-1.5 flex-1 justify-center px-2 py-1.5 rounded-md text-[11px] transition"
+                        style={{
+                          background: active ? 'var(--c-accent-bg, rgba(99,102,241,0.1))' : 'transparent',
+                          border: `1px solid ${active ? 'var(--c-accent, #6366f1)' : 'var(--c-border)'}`,
+                          color: active ? 'var(--c-accent, #818cf8)' : 'var(--c-text2)',
+                          opacity: active ? 1 : 0.6,
+                        }}
+                      >
+                        <Icon size={11} />
+                        {label}
+                      </button>
+                    )
+                  })}
+                </div>
+              </div>
+
+              <div className="mt-4">
+                <div className="text-[11px] font-medium mb-2" style={{ color: 'var(--c-text2)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                  Username
+                </div>
+                <div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md" style={{ border: '1px solid var(--c-border)', background: 'var(--c-bg)' }}>
+                  <User size={11} style={{ color: 'var(--c-text3)' }} />
+                  <input
+                    type="text"
+                    placeholder="optional"
+                    value={opts.username}
+                    onChange={(e) => updateOpt('username', e.target.value)}
+                    className="bg-transparent outline-none text-[12px] w-full"
+                    style={{ color: 'var(--c-text)' }}
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Preview */}
+            <div className="flex-1 min-w-0">
+              <div className="text-[11px] font-medium mb-3" style={{ color: 'var(--c-text2)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                Preview
+              </div>
+              <div
+                className="rounded-lg overflow-hidden relative"
+                style={{
+                  border: '1px solid var(--c-border)',
+                  background: '#09090f',
+                  minHeight: 200,
+                }}
+              >
+                {loading && (
+                  <div className="absolute inset-0 flex items-center justify-center" style={{ background: 'rgba(0,0,0,0.5)', zIndex: 2 }}>
+                    <span className="text-[12px]" style={{ color: 'var(--c-text2)' }}>Generating...</span>
+                  </div>
+                )}
+                {svg && (
+                  <div
+                    className="w-full [&>svg]:w-full [&>svg]:h-auto [&>svg]:block"
+                    dangerouslySetInnerHTML={{ __html: svg }}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer: actions */}
+        <div className="flex items-center justify-between px-5 py-3" style={{ borderTop: '1px solid var(--c-border)' }}>
+          <span className="text-[11px]" style={{ color: 'var(--c-text3)' }}>
+            Tip: Toggle sections to customize your share card
+          </span>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handleDownloadSvg}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-[12px] rounded-md transition hover:opacity-80"
+              style={{ border: '1px solid var(--c-border)', color: 'var(--c-text)' }}
+            >
+              <Download size={12} />
+              SVG
+            </button>
+            <button
+              onClick={handleDownloadPng}
+              disabled={downloading}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-[12px] rounded-md transition hover:opacity-80"
+              style={{ border: '1px solid var(--c-border)', color: 'var(--c-text)', opacity: downloading ? 0.5 : 1 }}
+            >
+              <Download size={12} />
+              {downloading ? 'Converting...' : 'PNG'}
+            </button>
+            <button
+              onClick={handleShareTwitter}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-[12px] rounded-md transition hover:opacity-80"
+              style={{ background: '#6366f1', color: '#fff' }}
+            >
+              <Share2 size={12} />
+              Share on X
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/ui/src/components/TokenTimeline.jsx

@@ -0,0 +1,258 @@
+import { useState, useRef, useCallback, useMemo } from 'react'
+import { Activity, ChevronDown, ChevronUp, Clock } from 'lucide-react'
+import { formatNumber } from '../lib/constants'
+
+const CHART_H = 56
+const POINT_STEP = 52
+const PAD_X = 20
+const PAD_Y = 6
+const BUCKET_MINUTES = 5
+const BUCKET_MSG_COUNT = 8
+
+const AVG_TOKEN_SPEED = 80
+
+function formatDuration(ms) {
+  if (ms < 60000) return `${Math.round(ms / 1000)}s`
+  const mins = Math.floor(ms / 60000)
+  if (mins < 60) return `${mins}m`
+  const hrs = Math.floor(mins / 60)
+  const rem = mins % 60
+  return rem > 0 ? `${hrs}h ${rem}m` : `${hrs}h`
+}
+
+function lerp(a, b, t) {
+  return a + (b - a) * Math.max(0, Math.min(1, t))
+}
+
+function tokenColor(ratio) {
+  const r = Math.round(lerp(52, 239, ratio))
+  const g = Math.round(lerp(211, 68, ratio))
+  const b = Math.round(lerp(153, 68, ratio))
+  return `rgb(${r},${g},${b})`
+}
+
+function buildTimeBuckets(messages, createdAt, lastUpdatedAt) {
+  const start = new Date(createdAt).getTime()
+  const end = new Date(lastUpdatedAt).getTime()
+  const duration = Math.max(end - start, 1)
+  const bucketMs = BUCKET_MINUTES * 60 * 1000
+  const bucketCount = Math.max(1, Math.ceil(duration / bucketMs))
+
+  const buckets = Array.from({ length: bucketCount }, (_, i) => ({
+    label: `${i * BUCKET_MINUTES}m`,
+    tokens: 0,
+    messageIndices: [],
+  }))
+
+  messages.forEach((msg, idx) => {
+    const totalTokens = (msg.inputTokens || 0) + (msg.outputTokens || 0)
+    const msgTime = start + (idx / Math.max(messages.length - 1, 1)) * duration
+    const bucketIdx = Math.min(Math.floor((msgTime - start) / bucketMs), bucketCount - 1)
+    buckets[bucketIdx].tokens += totalTokens
+    buckets[bucketIdx].messageIndices.push(idx)
+  })
+
+  return buckets
+}
+
+function buildSeqBuckets(messages) {
+  const bucketCount = Math.max(1, Math.ceil(messages.length / BUCKET_MSG_COUNT))
+
+  const buckets = Array.from({ length: bucketCount }, () => ({
+    label: '',
+    tokens: 0,
+    messageIndices: [],
+  }))
+
+  messages.forEach((msg, idx) => {
+    const chars = typeof msg.content === 'string' ? msg.content.length : 0
+    const totalTokens = Math.round(chars / 4)
+    const bucketIdx = Math.min(Math.floor(idx / BUCKET_MSG_COUNT), bucketCount - 1)
+    buckets[bucketIdx].tokens += totalTokens
+    buckets[bucketIdx].messageIndices.push(idx)
+  })
+
+  return buckets
+}
+
+export default function TokenTimeline({ messages, createdAt, lastUpdatedAt, onScrollToMessage }) {
+  const [open, setOpen] = useState(true)
+  const [hoveredIdx, setHoveredIdx] = useState(null)
+  const scrollContainerRef = useRef(null)
+
+  const hasRealTokens = useMemo(() => {
+    if (!messages) return false
+    return messages.some(m => (m.inputTokens || 0) + (m.outputTokens || 0) > 0)
+  }, [messages])
+
+  const buckets = useMemo(() => {
+    if (!messages || messages.length === 0) return []
+    if (hasRealTokens) return buildTimeBuckets(messages, createdAt, lastUpdatedAt)
+    return buildSeqBuckets(messages)
+  }, [messages, createdAt, lastUpdatedAt, hasRealTokens])
+
+  const maxTokens = useMemo(() => Math.max(...buckets.map(b => b.tokens), 1), [buckets])
+
+  const totalTokens = useMemo(() => buckets.reduce((s, b) => s + b.tokens, 0), [buckets])
+
+  const durationLabel = useMemo(() => {
+    if (hasRealTokens && createdAt && lastUpdatedAt) {
+      const ms = new Date(lastUpdatedAt).getTime() - new Date(createdAt).getTime()
+      if (ms > 0) return formatDuration(ms)
+    }
+    if (totalTokens > 0) {
+      const estSeconds = totalTokens / AVG_TOKEN_SPEED
+      return '~' + formatDuration(estSeconds * 1000)
+    }
+    return null
+  }, [hasRealTokens, createdAt, lastUpdatedAt, totalTokens])
+
+  const handlePointClick = useCallback((bucket) => {
+    if (bucket.messageIndices.length > 0 && onScrollToMessage) {
+      onScrollToMessage(bucket.messageIndices[0])
+    }
+  }, [onScrollToMessage])
+
+  if (!messages || messages.length === 0 || totalTokens === 0) return null
+
+  const svgW = PAD_X * 2 + Math.max((buckets.length - 1) * POINT_STEP, 0)
+  const svgH = CHART_H + PAD_Y * 2 + (hasRealTokens ? 16 : 4)
+
+  const points = buckets.map((b, i) => {
+    const x = PAD_X + i * POINT_STEP
+    const ratio = b.tokens / maxTokens
+    const y = PAD_Y + CHART_H - ratio * CHART_H
+    return { x, y, ratio, bucket: b }
+  })
+
+  const linePath = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ')
+
+  const areaPath = points.length > 0
+    ? `${linePath} L ${points[points.length - 1].x} ${PAD_Y + CHART_H} L ${points[0].x} ${PAD_Y + CHART_H} Z`
+    : ''
+
+  return (
+    <div className="shrink-0" style={{ borderBottom: '1px solid var(--c-border)' }}>
+      {/* Toggle button */}
+      <button
+        onClick={() => setOpen(o => !o)}
+        className="flex items-center gap-2 w-full px-4 py-1.5 text-[11px] transition hover:bg-[var(--c-bg3)]"
+        style={{ color: 'var(--c-text2)' }}
+      >
+        <Activity size={12} style={{ color: 'var(--c-accent)' }} />
+        <span className="font-medium">Token Timeline</span>
+        <span style={{ color: 'var(--c-text3)' }}>
+          ({formatNumber(totalTokens)} tokens{!hasRealTokens ? ', est.' : ''})
+        </span>
+        {durationLabel && (
+          <span className="inline-flex items-center gap-1" style={{ color: 'var(--c-text3)' }}>
+            <Clock size={10} /> {durationLabel}
+          </span>
+        )}
+        <span className="ml-auto">
+          {open ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
+        </span>
+      </button>
+
+      {/* Collapsible chart area */}
+      {open && (
+        <div className="px-2 pb-2 pt-0">
+          <div
+            ref={scrollContainerRef}
+            className="overflow-x-auto scrollbar-thin"
+            style={{ scrollBehavior: 'smooth' }}
+          >
+            <svg
+              width={svgW}
+              height={svgH}
+              style={{ display: 'block', minWidth: svgW }}
+            >
+              <defs>
+                <linearGradient id="tokenAreaGrad" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stopColor="var(--c-accent)" stopOpacity="0.15" />
+                  <stop offset="100%" stopColor="var(--c-accent)" stopOpacity="0.02" />
+                </linearGradient>
+              </defs>
+
+              {/* Baseline */}
+              <line
+                x1={PAD_X} y1={PAD_Y + CHART_H}
+                x2={PAD_X + (buckets.length - 1) * POINT_STEP} y2={PAD_Y + CHART_H}
+                stroke="var(--c-border)" strokeWidth="1"
+              />
+
+              {/* Area fill */}
+              {areaPath && <path d={areaPath} fill="url(#tokenAreaGrad)" />}
+
+              {/* Line */}
+              {points.length > 1 && (
+                <path d={linePath} fill="none" stroke="var(--c-accent)" strokeWidth="1.5" strokeLinejoin="round" />
+              )}
+
+              {/* Data points + labels */}
+              {points.map((p, i) => {
+                const isHovered = hoveredIdx === i
+                const color = tokenColor(p.ratio)
+                return (
+                  <g
+                    key={i}
+                    style={{ cursor: p.bucket.tokens > 0 ? 'pointer' : 'default' }}
+                    onMouseEnter={() => setHoveredIdx(i)}
+                    onMouseLeave={() => setHoveredIdx(null)}
+                    onClick={() => handlePointClick(p.bucket)}
+                  >
+                    <circle cx={p.x} cy={p.y} r={12} fill="transparent" />
+
+                    <circle
+                      cx={p.x} cy={p.y}
+                      r={isHovered ? 5 : 3}
+                      fill={p.bucket.tokens > 0 ? color : 'var(--c-border)'}
+                      stroke={isHovered ? 'var(--c-white)' : 'none'}
+                      strokeWidth={1.5}
+                      style={{ transition: 'r 0.15s' }}
+                    />
+
+                    {isHovered && (
+                      <line
+                        x1={p.x} y1={p.y} x2={p.x} y2={PAD_Y + CHART_H}
+                        stroke="var(--c-text3)" strokeWidth="0.5" strokeDasharray="2,2"
+                      />
+                    )}
+
+                    {isHovered && p.bucket.tokens > 0 && (
+                      <g>
+                        <rect
+                          x={p.x - 32} y={p.y - 22}
+                          width={64} height={16} rx={3}
+                          fill="var(--c-bg)" stroke="var(--c-border)" strokeWidth="0.5"
+                        />
+                        <text
+                          x={p.x} y={p.y - 11}
+                          textAnchor="middle" fontSize="9" fontFamily="monospace"
+                          fill="var(--c-white)"
+                        >
+                          {formatNumber(p.bucket.tokens)} tok
+                        </text>
+                      </g>
+                    )}
+
+                    {/* X label — only for time-based buckets */}
+                    {hasRealTokens && p.bucket.label && (
+                      <text
+                        x={p.x} y={PAD_Y + CHART_H + 12}
+                        textAnchor="middle" fontSize="9" fontFamily="monospace"
+                        fill="var(--c-text3)"
+                      >
+                        {p.bucket.label}
+                      </text>
+                    )}
+                  </g>
+                )
+              })}
+            </svg>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/ui/src/hooks/useLive.jsx

@@ -0,0 +1,15 @@
+import { useState, useEffect, useCallback } from 'react'
+
+const KEY = 'agentlytics-live'
+
+export function useLive() {
+  const [live, setLive] = useState(() => localStorage.getItem(KEY) === 'true')
+
+  useEffect(() => {
+    localStorage.setItem(KEY, live)
+  }, [live])
+
+  const toggle = useCallback(() => setLive(l => !l), [])
+
+  return { live, toggle }
+}

package/ui/src/index.css

@@ -0,0 +1,83 @@
+@import "tailwindcss";
+
+@theme {
+  --color-bg-900: #0e0e0e;
+  --color-bg-800: #161616;
+  --color-bg-700: #1e1e1e;
+  --color-bg-600: #272727;
+  --color-accent: #6366f1;
+  --color-accent-light: #818cf8;
+  --color-accent-dim: #4f46e5;
+}
+
+:root {
+  --c-bg: #0e0e0e; --c-bg2: #161616; --c-bg3: #1e1e1e; --c-bg4: #272727;
+  --c-text: #a0a0a0; --c-text2: #666; --c-text3: #444;
+  --c-white: #e0e0e0; --c-border: rgba(255,255,255,0.06);
+  --c-card: rgba(255,255,255,0.025); --c-card-hover: rgba(99,102,241,0.25);
+  --c-header: rgba(14,14,14,0.85);
+  --c-code-bg: rgba(255,255,255,0.05); --c-pre-bg: rgba(0,0,0,0.4);
+  --c-md-strong: #d0d0d0;
+}
+
+.light {
+  --c-bg: #f5f5f5; --c-bg2: #ebebeb; --c-bg3: #e0e0e0; --c-bg4: #d6d6d6;
+  --c-text: #444; --c-text2: #888; --c-text3: #bbb;
+  --c-white: #111; --c-border: rgba(0,0,0,0.08);
+  --c-card: rgba(0,0,0,0.025); --c-card-hover: rgba(99,102,241,0.2);
+  --c-header: rgba(245,245,245,0.9);
+  --c-code-bg: rgba(0,0,0,0.05); --c-pre-bg: rgba(0,0,0,0.04);
+  --c-md-strong: #111;
+}
+
+body {
+  margin: 0;
+  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
+  background: var(--c-bg);
+  color: var(--c-text);
+  min-height: 100vh;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.card {
+  background: var(--c-card);
+  border: 1px solid var(--c-border);
+  border-radius: 0;
+  transition: border-color 0.15s;
+}
+
+* { border-radius: 0 !important; }
+.card:hover { border-color: var(--c-card-hover); }
+
+.scrollbar-thin { scrollbar-width: thin; scrollbar-color: transparent transparent; }
+.scrollbar-thin:hover { scrollbar-color: var(--c-border) transparent; }
+.scrollbar-thin::-webkit-scrollbar { width: 3px; }
+.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
+.scrollbar-thin::-webkit-scrollbar-thumb { background: transparent; }
+.scrollbar-thin:hover::-webkit-scrollbar-thumb { background: var(--c-border); }
+
+.fade-in { animation: fadeIn 0.2s ease-out; }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
+
+.sidebar-slide-in { animation: slideInRight 0.2s ease-out; }
+@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
+
+.pulse-dot { animation: pulseDot 1.5s ease-in-out infinite; }
+@keyframes pulseDot { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.5); } 50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(34,197,94,0); } }
+
+/* Markdown */
+.md-body h1,.md-body h2,.md-body h3 { font-weight:600; margin:8px 0 4px; color:var(--c-white); }
+.md-body h1 { font-size:1.15em; } .md-body h2 { font-size:1.05em; } .md-body h3 { font-size:1em; }
+.md-body p { margin:4px 0; line-height:1.6; }
+.md-body ul,.md-body ol { padding-left:1.3em; margin:3px 0; }
+.md-body li { margin:1px 0; }
+.md-body code { background:var(--c-code-bg); padding:1px 4px; border-radius:3px; font-size:0.9em; }
+.md-body pre { background:var(--c-pre-bg); padding:10px; border-radius:6px; overflow-x:auto; margin:6px 0; border:1px solid var(--c-border); }
+.md-body pre code { background:none; padding:0; }
+.md-body strong { color:var(--c-md-strong); }
+.md-body a { color:#818cf8; text-decoration:underline; }
+.md-body blockquote { border-left:2px solid rgba(99,102,241,0.3); padding-left:10px; color:var(--c-text2); margin:6px 0; }
+.md-body table { border-collapse:collapse; margin:6px 0; }
+.md-body th,.md-body td { border:1px solid var(--c-border); padding:4px 8px; font-size:0.9em; }
+.md-body th { background:var(--c-code-bg); }