agentlytics 0.0.7 → 0.0.10

package/ui/src/components/ChatSidebar.jsx

@@ -0,0 +1,313 @@
+import { useState, useEffect, useRef } from 'react'
+import { X, User, Bot, Wrench, Settings, Play, CheckCircle, ChevronRight, ChevronDown, Download, Send, Search } from 'lucide-react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { fetchChat, BASE } from '../lib/api'
+import { editorColor, editorLabel, formatDateTime, formatNumber } from '../lib/constants'
+
+const ROLE_CONFIG = {
+  user: { icon: User, label: 'User', borderColor: 'rgba(34,197,94,0.2)', bg: 'rgba(34,197,94,0.05)' },
+  assistant: { icon: Bot, label: 'Assistant', borderColor: 'rgba(99,102,241,0.2)', bg: 'rgba(99,102,241,0.05)' },
+  system: { icon: Settings, label: 'System', borderColor: 'rgba(107,114,128,0.2)', bg: 'rgba(107,114,128,0.05)' },
+  tool: { icon: Wrench, label: 'Tool', borderColor: 'rgba(234,179,8,0.2)', bg: 'rgba(234,179,8,0.05)' },
+}
+
+function parseContent(content) {
+  const segments = []
+  const regex = /\[tool-call: ([^\]]+)\]|\[tool-result: ([^\]]+)\]\s*(.*?)(?=\n\[tool-|$)/gs
+  let lastIdx = 0
+  let match
+  while ((match = regex.exec(content)) !== null) {
+    if (match.index > lastIdx) {
+      const text = content.slice(lastIdx, match.index).trim()
+      if (text) segments.push({ type: 'text', value: text })
+    }
+    if (match[1]) {
+      segments.push({ type: 'tool-call', name: match[1].replace(/\(.*\)$/, '').trim(), args: match[1] })
+    } else if (match[2]) {
+      segments.push({ type: 'tool-result', name: match[2].trim(), preview: (match[3] || '').trim() })
+    }
+    lastIdx = match.index + match[0].length
+  }
+  if (lastIdx < content.length) {
+    const text = content.slice(lastIdx).trim()
+    if (text) segments.push({ type: 'text', value: text })
+  }
+  return segments.length > 0 ? segments : [{ type: 'text', value: content }]
+}
+
+function summarizeToolArgs(name, args) {
+  if (!args || typeof args !== 'object') return ''
+  if (args.file_path || args.TargetFile) return args.file_path || args.TargetFile
+  if (args.CommandLine || args.command) return args.CommandLine || args.command
+  if (args.Query || args.query) return `${args.Query || args.query}${args.SearchPath ? ` in ${args.SearchPath}` : ''}`
+  if (args.Url || args.url) return args.Url || args.url
+  const vals = Object.values(args).filter(v => typeof v === 'string' && v.length > 0 && v.length < 120)
+  return vals.length > 0 ? vals[0] : ''
+}
+
+function ToolArgsDiff({ args }) {
+  const old = args.old_string || args.old_text || args.oldText || args.search || null
+  const nw = args.new_string || args.new_text || args.newText || args.replace || null
+  if (old == null && nw == null) return null
+  const maxLines = 8
+  const oldLines = (old || '').split('\n').slice(0, maxLines)
+  const newLines = (nw || '').split('\n').slice(0, maxLines)
+  return (
+    <div className="mt-1 text-[9px] font-mono overflow-x-auto" style={{ border: '1px solid var(--c-border)' }}>
+      {(args.file_path || args.TargetFile) && (
+        <div className="px-2 py-0.5" style={{ background: 'var(--c-code-bg)', color: 'var(--c-text)' }}>{args.file_path || args.TargetFile}</div>
+      )}
+      {old && oldLines.map((line, i) => (
+        <div key={'o' + i} className="px-2" style={{ background: 'rgba(248,113,113,0.1)', color: '#f87171' }}>
+          <span style={{ color: 'var(--c-text3)', userSelect: 'none' }}>- </span>{line}
+        </div>
+      ))}
+      {old && oldLines.length < (old || '').split('\n').length && (
+        <div className="px-2" style={{ color: 'var(--c-text3)' }}>  ... {(old || '').split('\n').length - maxLines} more lines</div>
+      )}
+      {nw && newLines.map((line, i) => (
+        <div key={'n' + i} className="px-2" style={{ background: 'rgba(52,211,153,0.1)', color: '#34d399' }}>
+          <span style={{ color: 'var(--c-text3)', userSelect: 'none' }}>+ </span>{line}
+        </div>
+      ))}
+      {nw && newLines.length < (nw || '').split('\n').length && (
+        <div className="px-2" style={{ color: 'var(--c-text3)' }}>  ... {(nw || '').split('\n').length - maxLines} more lines</div>
+      )}
+    </div>
+  )
+}
+
+function ToolArgsDetail({ args }) {
+  if (!args || Object.keys(args).length === 0) return null
+  const hasDiff = args.old_string || args.new_string || args.old_text || args.new_text || args.search || args.replace
+  if (hasDiff) return <ToolArgsDiff args={args} />
+  const file = args.file_path || args.TargetFile || args.filePath || args.path || null
+  const cmd = args.CommandLine || args.command || null
+  const query = args.Query || args.query || args.search_term || null
+  const url = args.Url || args.url || null
+  return (
+    <div className="mt-1 text-[9px] font-mono overflow-x-auto" style={{ background: 'var(--c-code-bg)', border: '1px solid var(--c-border)' }}>
+      {file && <div className="px-2 py-0.5" style={{ color: 'var(--c-text)' }}>file: {file}</div>}
+      {cmd && <div className="px-2 py-0.5" style={{ color: 'var(--c-text)' }}>cmd: {cmd}</div>}
+      {query && <div className="px-2 py-0.5" style={{ color: 'var(--c-text)' }}>query: {query}</div>}
+      {url && <div className="px-2 py-0.5" style={{ color: 'var(--c-text)' }}>url: {url}</div>}
+      {!file && !cmd && !query && !url && (
+        <pre className="px-2 py-1 whitespace-pre-wrap break-all" style={{ color: 'var(--c-text2)' }}>{JSON.stringify(args, null, 2)}</pre>
+      )}
+    </div>
+  )
+}
+
+function ToolCallBlock({ name, args, detail }) {
+  const [open, setOpen] = useState(false)
+  const hasDetail = detail && Object.keys(detail).length > 0
+  return (
+    <div className="my-1 px-2 py-1 text-[10px]" style={{ background: 'var(--c-code-bg)', border: '1px solid var(--c-border)' }}>
+      <div className="flex items-center gap-1.5 cursor-pointer" onClick={() => hasDetail && setOpen(!open)}>
+        {hasDetail
+          ? (open ? <ChevronDown size={9} style={{ color: '#a78bfa' }} /> : <ChevronRight size={9} style={{ color: '#a78bfa' }} />)
+          : <Play size={9} style={{ color: '#a78bfa' }} />
+        }
+        <span className="font-bold" style={{ color: 'var(--c-white)' }}>{name}</span>
+        {args !== name && !hasDetail && <span className="truncate" style={{ color: 'var(--c-text2)' }}>{args}</span>}
+        {hasDetail && <span className="truncate" style={{ color: 'var(--c-text2)' }}>{summarizeToolArgs(name, detail)}</span>}
+      </div>
+      {open && hasDetail && <ToolArgsDetail args={detail} />}
+    </div>
+  )
+}
+
+function ToolResultBlock({ name, preview }) {
+  const [open, setOpen] = useState(false)
+  const isNoisy = preview.length > 120 || preview.startsWith('{') || preview.includes('contentId')
+  const short = isNoisy ? `${name} completed` : preview.substring(0, 120)
+  return (
+    <div className="my-1 px-2 py-1 text-[10px]" style={{ background: 'var(--c-code-bg)', border: '1px solid var(--c-border)' }}>
+      <div className="flex items-center gap-1.5 cursor-pointer" onClick={() => preview && setOpen(!open)}>
+        <CheckCircle size={9} style={{ color: '#34d399' }} />
+        <span className="truncate" style={{ color: 'var(--c-text)' }}>{short}</span>
+        {isNoisy && preview && <span style={{ color: 'var(--c-text3)' }}>{open ? '[-]' : '[+]'}</span>}
+      </div>
+      {open && <pre className="mt-1 text-[9px] overflow-x-auto whitespace-pre-wrap break-all" style={{ color: 'var(--c-text2)' }}>{preview}</pre>}
+    </div>
+  )
+}
+
+function MessageContent({ content, toolCallDetails }) {
+  const segments = parseContent(content)
+  let toolIdx = 0
+  return segments.map((seg, i) => {
+    if (seg.type === 'tool-call') {
+      const detail = toolCallDetails ? toolCallDetails.find(tc => tc.name === seg.name && toolCallDetails.indexOf(tc) >= toolIdx) : null
+      if (detail) toolIdx = toolCallDetails.indexOf(detail) + 1
+      return <ToolCallBlock key={i} name={seg.name} args={seg.args} detail={detail?.args} />
+    }
+    if (seg.type === 'tool-result') return <ToolResultBlock key={i} name={seg.name} preview={seg.preview} />
+    return <div key={i} className="md-body text-[12px] leading-relaxed"><ReactMarkdown remarkPlugins={[remarkGfm]}>{seg.value}</ReactMarkdown></div>
+  })
+}
+
+export default function ChatSidebar({ chatId, onClose }) {
+  const [chat, setChat] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [msgFilter, setMsgFilter] = useState('')
+  const scrollRef = useRef(null)
+
+  useEffect(() => {
+    if (!chatId) return
+    setLoading(true)
+    setChat(null)
+    fetchChat(chatId).then(data => {
+      setChat(data)
+      setLoading(false)
+    })
+  }, [chatId])
+
+  // Scroll to bottom when chat loads
+  useEffect(() => {
+    if (!loading && chat && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+    }
+  }, [loading, chat])
+
+  // Reset filter when chat changes
+  useEffect(() => {
+    setMsgFilter('')
+  }, [chatId])
+
+  if (!chatId) return null
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 z-40 transition-opacity"
+        style={{ background: 'rgba(0,0,0,0.3)' }}
+        onClick={onClose}
+      />
+
+      {/* Sidebar */}
+      <div
+        className="fixed top-0 right-0 bottom-0 z-50 flex flex-col shadow-2xl sidebar-slide-in"
+        style={{
+          width: 'min(580px, 90vw)',
+          background: 'var(--c-bg)',
+          borderLeft: '1px solid var(--c-border)',
+        }}
+      >
+        {/* Header */}
+        <div className="flex items-center gap-3 px-4 py-3 shrink-0" style={{ borderBottom: '1px solid var(--c-border)' }}>
+          <button onClick={onClose} className="p-1 rounded transition hover:bg-[var(--c-bg3)]" style={{ color: 'var(--c-text2)' }}>
+            <X size={14} />
+          </button>
+          {chat && (
+            <div className="flex-1 min-w-0">
+              <div className="text-sm font-medium truncate" style={{ color: 'var(--c-white)' }}>
+                {chat.name || '(untitled)'}
+              </div>
+              <div className="flex items-center gap-2 text-[10px]" style={{ color: 'var(--c-text2)' }}>
+                <span className="inline-flex items-center gap-1">
+                  <span className="w-1.5 h-1.5 rounded-full" style={{ background: editorColor(chat.source) }} />
+                  {editorLabel(chat.source)}
+                </span>
+                {chat.mode && <span>· {chat.mode}</span>}
+                <span>{formatDateTime(chat.createdAt)}</span>
+              </div>
+            </div>
+          )}
+          {chat && (
+            <a
+              href={`${BASE}/api/chats/${chat.id}/markdown`}
+              download
+              className="flex items-center gap-1 px-2 py-1 text-[10px] transition shrink-0"
+              style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
+            >
+              <Download size={11} /> .md
+            </a>
+          )}
+        </div>
+
+        {/* Stats row */}
+        {chat?.stats && (
+          <div className="flex items-center gap-3 px-4 py-2 text-[10px] shrink-0" style={{ borderBottom: '1px solid var(--c-border)', color: 'var(--c-text2)' }}>
+            <span>{chat.stats.totalMessages} msgs</span>
+            <span>{chat.stats.toolCalls.length} tools</span>
+            {chat.stats.totalInputTokens > 0 && <span>{formatNumber(chat.stats.totalInputTokens)} in</span>}
+            {chat.stats.totalOutputTokens > 0 && <span>{formatNumber(chat.stats.totalOutputTokens)} out</span>}
+            {chat.stats.models.length > 0 && (
+              <span className="ml-auto font-mono truncate" style={{ color: 'var(--c-accent)', opacity: 0.7 }}>
+                {[...new Set(chat.stats.models)].join(', ')}
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* Search bar */}
+        {chat && chat.messages.length > 0 && (
+          <div className="shrink-0 px-4 py-2" style={{ borderBottom: '1px solid var(--c-border)' }}>
+            <div className="relative">
+              <Search size={11} className="absolute left-2.5 top-1/2 -translate-y-1/2" style={{ color: 'var(--c-text3)' }} />
+              <input
+                type="text"
+                placeholder="Filter messages..."
+                value={msgFilter}
+                onChange={e => setMsgFilter(e.target.value)}
+                className="w-full pl-7 pr-3 py-1 text-[11px] outline-none"
+                style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Messages */}
+        <div ref={scrollRef} className="flex-1 overflow-y-auto scrollbar-thin px-4 py-3 space-y-2">
+          {loading && (
+            <div className="text-[11px] py-12 text-center" style={{ color: 'var(--c-text3)' }}>Loading conversation...</div>
+          )}
+          {!loading && chat && chat.messages.length === 0 && (
+            <div className="text-[11px] py-12 text-center" style={{ color: 'var(--c-text3)' }}>
+              {chat.encrypted ? '🔒 This conversation is encrypted.' : 'No messages found.'}
+            </div>
+          )}
+          {!loading && chat && chat.messages
+            .filter(msg => !msgFilter || msg.content.toLowerCase().includes(msgFilter.toLowerCase()))
+            .map((msg, i) => {
+              const cfg = ROLE_CONFIG[msg.role] || ROLE_CONFIG.system
+              const Icon = cfg.icon
+              return (
+                <div key={i} className="rounded-r px-3 py-2" style={{ borderLeft: `2px solid ${cfg.borderColor}`, background: cfg.bg }}>
+                  <div className="flex items-center gap-1.5 text-[10px] mb-1" style={{ color: 'var(--c-text2)' }}>
+                    <Icon size={11} />
+                    <span className="font-medium">{cfg.label}</span>
+                    {msg.model && <span className="font-mono" style={{ color: 'var(--c-accent)', opacity: 0.6 }}>· {msg.model}</span>}
+                  </div>
+                  <div className="text-[12px]" style={{ color: 'var(--c-text)' }}>
+                    <MessageContent content={msg.content} toolCallDetails={chat.toolCallDetails} />
+                  </div>
+                </div>
+              )
+            })}
+        </div>
+
+        {/* Fake disabled chat input */}
+        <div className="shrink-0 px-4 py-3" style={{ borderTop: '1px solid var(--c-border)' }}>
+          <div
+            className="flex items-center gap-2 px-3 py-2.5 rounded-lg"
+            style={{
+              background: 'var(--c-bg3)',
+              border: '1px solid var(--c-border)',
+              opacity: 0.5,
+              cursor: 'not-allowed',
+            }}
+          >
+            <span className="flex-1 text-[12px]" style={{ color: 'var(--c-text3)' }}>
+              Message is read-only...
+            </span>
+            <Send size={13} style={{ color: 'var(--c-text3)' }} />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

package/ui/src/components/DateRangePicker.jsx

@@ -0,0 +1,104 @@
+import { Calendar, X } from 'lucide-react'
+import { useTheme } from '../lib/theme'
+
+const PRESETS = [
+  { label: '7d',  days: 7 },
+  { label: '30d', days: 30 },
+  { label: '90d', days: 90 },
+  { label: '1y',  days: 365 },
+]
+
+// value: { from: 'YYYY-MM-DD', to: 'YYYY-MM-DD' } | null
+// onChange: called with same shape, or null to clear
+export default function DateRangePicker({ value, onChange }) {
+  const { dark } = useTheme()
+  const today = new Date().toISOString().split('T')[0]
+  const active = !!value
+
+  function applyPreset(days) {
+    const to = new Date()
+    const from = new Date(to.getTime() - days * 86400000)
+    onChange({
+      from: from.toISOString().split('T')[0],
+      to: to.toISOString().split('T')[0],
+    })
+  }
+
+  function setFrom(from) {
+    onChange({ from, to: value?.to || today })
+  }
+
+  function setTo(to) {
+    onChange({ from: value?.from || today, to })
+  }
+
+  return (
+    <div className="flex items-center gap-1.5 flex-wrap">
+      <Calendar size={12} style={{ color: active ? 'var(--c-accent)' : 'var(--c-text3)', flexShrink: 0 }} />
+
+      {/* Preset buttons */}
+      {PRESETS.map(p => {
+        const isActive = active && (() => {
+          const diff = Math.round((Date.now() - new Date(value.from).getTime()) / 86400000)
+          return diff >= p.days - 1 && diff <= p.days + 1
+        })()
+        return (
+          <button
+            key={p.label}
+            onClick={() => applyPreset(p.days)}
+            className="px-2 py-0.5 text-[10px] transition"
+            style={{
+              border: isActive ? '1px solid var(--c-accent)' : '1px solid var(--c-border)',
+              color: isActive ? 'var(--c-accent)' : 'var(--c-text2)',
+              background: isActive ? 'rgba(99,102,241,0.1)' : 'transparent',
+            }}
+          >
+            {p.label}
+          </button>
+        )
+      })}
+
+      {/* Custom date inputs */}
+      <input
+        type="date"
+        value={value?.from || ''}
+        max={value?.to || today}
+        onChange={e => setFrom(e.target.value)}
+        className="px-1.5 py-0.5 text-[10px] outline-none cursor-pointer"
+        style={{
+          background: 'var(--c-bg3)',
+          color: 'var(--c-text)',
+          border: '1px solid var(--c-border)',
+          colorScheme: dark ? 'dark' : 'light',
+        }}
+      />
+      <span className="text-[10px]" style={{ color: 'var(--c-text3)' }}>—</span>
+      <input
+        type="date"
+        value={value?.to || ''}
+        min={value?.from || ''}
+        max={today}
+        onChange={e => setTo(e.target.value)}
+        className="px-1.5 py-0.5 text-[10px] outline-none cursor-pointer"
+        style={{
+          background: 'var(--c-bg3)',
+          color: 'var(--c-text)',
+          border: '1px solid var(--c-border)',
+          colorScheme: dark ? 'dark' : 'light',
+        }}
+      />
+
+      {/* Clear button */}
+      {active && (
+        <button
+          onClick={() => onChange(null)}
+          className="flex items-center gap-0.5 px-2 py-0.5 text-[10px] transition"
+          style={{ border: '1px solid var(--c-accent)', color: 'var(--c-accent)' }}
+        >
+          <X size={9} /> clear
+        </button>
+      )}
+    </div>
+  )
+}
+

package/ui/src/index.css

@@ -60,6 +60,12 @@ body {
 .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; }

package/ui/src/lib/api.js

@@ -1,8 +1,15 @@
-const BASE = '';
+export const BASE = '';
+
+// Append optional dateFrom/dateTo (ms timestamps) to URLSearchParams
+function appendDateParams(q, params) {
+  if (params.dateFrom) q.set('dateFrom', params.dateFrom);
+  if (params.dateTo) q.set('dateTo', params.dateTo);
+}
 
 export async function fetchOverview(params = {}) {
   const q = new URLSearchParams();
   if (params.editor) q.set('editor', params.editor);
+  appendDateParams(q, params);
   const qs = q.toString();
   const res = await fetch(`${BASE}/api/overview${qs ? '?' + qs : ''}`);
   return res.json();
@@ -15,6 +22,7 @@ export async function fetchChats(params = {}) {
   if (params.limit) q.set('limit', params.limit);
   if (params.offset) q.set('offset', params.offset);
   if (params.named === false) q.set('named', 'false');
+  appendDateParams(q, params);
   const res = await fetch(`${BASE}/api/chats?${q}`);
   return res.json();
 }
@@ -24,14 +32,18 @@ export async function fetchChat(id) {
   return res.json();
 }
 
-export async function fetchProjects() {
-  const res = await fetch(`${BASE}/api/projects`);
+export async function fetchProjects(params = {}) {
+  const q = new URLSearchParams();
+  appendDateParams(q, params);
+  const qs = q.toString();
+  const res = await fetch(`${BASE}/api/projects${qs ? '?' + qs : ''}`);
   return res.json();
 }
 
 export async function fetchDailyActivity(params = {}) {
   const q = new URLSearchParams();
   if (params.editor) q.set('editor', params.editor);
+  appendDateParams(q, params);
   const qs = q.toString();
   const res = await fetch(`${BASE}/api/daily-activity${qs ? '?' + qs : ''}`);
   return res.json();
@@ -42,6 +54,7 @@ export async function fetchDeepAnalytics(params = {}) {
   if (params.editor) q.set('editor', params.editor);
   if (params.folder) q.set('folder', params.folder);
   if (params.limit) q.set('limit', params.limit);
+  appendDateParams(q, params);
   const res = await fetch(`${BASE}/api/deep-analytics?${q}`);
   return res.json();
 }
@@ -64,6 +77,7 @@ export function refetchAgents(onProgress) {
 export async function fetchDashboardStats(params = {}) {
   const q = new URLSearchParams();
   if (params.editor) q.set('editor', params.editor);
+  appendDateParams(q, params);
   const qs = q.toString();
   const res = await fetch(`${BASE}/api/dashboard-stats${qs ? '?' + qs : ''}`);
   return res.json();

package/ui/src/lib/constants.js

@@ -9,9 +9,11 @@ export const EDITOR_COLORS = {
   'vscode-insiders': '#60a5fa',
   'zed': '#10b981',
   'opencode': '#ec4899',
+  'codex': '#0f766e',
   'gemini-cli': '#4285f4',
   'copilot-cli': '#8957e5',
   'cursor-agent': '#f59e0b',
+  'commandcode': '#e11d48',
 };
 
 export const EDITOR_LABELS = {
@@ -25,9 +27,11 @@ export const EDITOR_LABELS = {
   'vscode-insiders': 'VS Code Insiders',
   'zed': 'Zed',
   'opencode': 'OpenCode',
+  'codex': 'Codex',
   'gemini-cli': 'Gemini CLI',
   'copilot-cli': 'Copilot CLI',
   'cursor-agent': 'Cursor Agent',
+  'commandcode': 'Command Code',
 };
 
 export function editorColor(src) {
@@ -50,6 +54,18 @@ export function formatDate(ts) {
   return new Date(ts).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
 }
 
+/**
+ * Convert { from: 'YYYY-MM-DD', to: 'YYYY-MM-DD' } date range to API ms timestamps.
+ * Returns {} if range is null/incomplete.
+ */
+export function dateRangeToApiParams(range) {
+  if (!range?.from || !range?.to) return {};
+  return {
+    dateFrom: new Date(range.from).getTime(),
+    dateTo: new Date(range.to + 'T23:59:59').getTime(),
+  };
+}
+
 export function formatDateTime(ts) {
   if (!ts) return '';
   return new Date(ts).toLocaleString();

package/ui/src/pages/ChatDetail.jsx

@@ -1,9 +1,9 @@
 import { useState, useEffect } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
-import { ArrowLeft, User, Bot, Wrench, Settings, Play, CheckCircle, ChevronRight, ChevronDown } from 'lucide-react'
+import { ArrowLeft, User, Bot, Wrench, Settings, Play, CheckCircle, ChevronRight, ChevronDown, Download } from 'lucide-react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
-import { fetchChat } from '../lib/api'
+import { fetchChat, BASE } from '../lib/api'
 import { editorColor, editorLabel, formatDateTime, formatNumber } from '../lib/constants'
 import KpiCard from '../components/KpiCard'
 
@@ -184,7 +184,7 @@ export default function ChatDetail() {
       {/* Header */}
       <div className="card p-5 mb-4">
         <div className="flex items-start justify-between">
-          <div>
+          <div className="flex-1 min-w-0">
             <h2 className="text-xl font-semibold mb-1" style={{ color: 'var(--c-white)' }}>{chat.name || '(untitled)'}</h2>
             <div className="flex items-center gap-3 text-xs" style={{ color: 'var(--c-text2)' }}>
               <span className="inline-flex items-center gap-1.5">
@@ -200,6 +200,16 @@ export default function ChatDetail() {
               <span className="ml-3 font-mono" style={{ color: 'var(--c-text3)' }}>{chat.id}</span>
             </div>
           </div>
+          <a
+            href={`${BASE}/api/chats/${chat.id}/markdown`}
+            download
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-medium transition shrink-0"
+            style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
+            onMouseEnter={e => e.currentTarget.style.background = 'var(--c-bg2)'}
+            onMouseLeave={e => e.currentTarget.style.background = 'var(--c-bg3)'}
+          >
+            <Download size={13} /> Export .md
+          </a>
         </div>
       </div>
 

package/ui/src/pages/Dashboard.jsx

@@ -5,8 +5,9 @@ import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearSca
 import { Doughnut, Bar, Line } from 'react-chartjs-2'
 import KpiCard from '../components/KpiCard'
 import ActivityHeatmap from '../components/ActivityHeatmap'
+import DateRangePicker from '../components/DateRangePicker'
+import { editorColor, editorLabel, formatNumber, dateRangeToApiParams } from '../lib/constants'
 import { fetchDailyActivity, fetchOverview as fetchOverviewApi, fetchDashboardStats, fetchShareImage } from '../lib/api'
-import { editorColor, editorLabel, formatNumber } from '../lib/constants'
 import { useTheme } from '../lib/theme'
 
 ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, PointElement, LineElement, Filler)
@@ -29,6 +30,7 @@ export default function Dashboard({ overview }) {
   const [filteredData, setFilteredData] = useState(null)
   const [stats, setStats] = useState(null)
   const [selectedEditor, setSelectedEditor] = useState(null)
+  const [dateRange, setDateRange] = useState(null)
   const { dark } = useTheme()
   const [sharing, setSharing] = useState(false)
   const txtColor = dark ? '#888' : '#555'
@@ -50,27 +52,23 @@ export default function Dashboard({ overview }) {
   const noLegend = { legend: { display: false }, tooltip: { bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 } } }
 
   useEffect(() => {
-    fetchDailyActivity().then(setDailyData)
-    fetchDashboardStats().then(setStats)
-  }, [])
-
-  useEffect(() => {
+    const dateParams = dateRangeToApiParams(dateRange)
     if (!selectedEditor) {
       setFilteredData(null)
-      fetchDailyActivity().then(setDailyData)
-      fetchDashboardStats().then(setStats)
+      fetchDailyActivity(dateParams).then(setDailyData)
+      fetchDashboardStats(dateParams).then(setStats)
       return
     }
     Promise.all([
-      fetchOverviewApi({ editor: selectedEditor }),
-      fetchDailyActivity({ editor: selectedEditor }),
-      fetchDashboardStats({ editor: selectedEditor }),
+      fetchOverviewApi({ editor: selectedEditor, ...dateParams }),
+      fetchDailyActivity({ editor: selectedEditor, ...dateParams }),
+      fetchDashboardStats({ editor: selectedEditor, ...dateParams }),
     ]).then(([ov, daily, st]) => {
       setFilteredData(ov)
       setDailyData(daily)
       setStats(st)
     })
-  }, [selectedEditor])
+  }, [selectedEditor, dateRange])
 
   if (!overview) return <div className="text-sm py-12 text-center" style={{ color: 'var(--c-text2)' }}>loading...</div>
 
@@ -209,8 +207,9 @@ export default function Dashboard({ overview }) {
 
   return (
     <div className="fade-in space-y-3">
-      {/* Share button */}
-      <div className="flex justify-end">
+      {/* Top bar */}
+      <div className="flex items-center justify-end gap-3">
+        <DateRangePicker value={dateRange} onChange={setDateRange} />
         <button
           onClick={handleShare}
           disabled={sharing}
@@ -261,6 +260,7 @@ export default function Dashboard({ overview }) {
         )}
       </div>
 
+
       {/* KPIs row 1: Core stats */}
       <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-2">
         <KpiCard label="total sessions" value={formatNumber(d.totalChats)} sub={sel ? editorLabel(sel.id) : `${allEditors.length} editors`} />