agentlytics 0.2.11 → 0.2.12

package/server.js

@@ -727,6 +727,108 @@ app.get('/api/all-projects', (req, res) => {
   }
 });
 
+// ============================================================
+// GSD endpoints
+// ============================================================
+
+app.get('/api/gsd/projects', (req, res) => {
+  try {
+    res.json(cache.getCachedGSDProjects());
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+app.get('/api/gsd/phases', (req, res) => {
+  try {
+    const { folder } = req.query;
+    if (!folder) return res.status(400).json({ error: 'folder query param required' });
+    res.json(cache.getCachedGSDPhases(folder));
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+app.get('/api/gsd/plan', (req, res) => {
+  try {
+    const { folder, phase } = req.query;
+    if (!folder || !phase) return res.status(400).json({ error: 'folder and phase query params required' });
+    const gsd = require('./editors/gsd');
+    const detail = gsd.getGSDPlanDetail(folder, phase);
+    if (!detail) return res.status(404).json({ error: 'Plan not found' });
+    res.json(detail);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+app.get('/api/gsd/overview', (req, res) => {
+  try {
+    res.json(cache.getCachedGSDOverview());
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+app.get('/api/gsd/config', (req, res) => {
+  try {
+    const { folder } = req.query;
+    if (!folder) return res.status(400).json({ error: 'folder query param required' });
+    const configPath = require('path').join(folder, '.planning', 'config.json');
+    if (!fs.existsSync(configPath)) return res.json(null);
+    res.json(JSON.parse(fs.readFileSync(configPath, 'utf-8')));
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+app.get('/api/gsd/phase-tokens', (req, res) => {
+  try {
+    const { folder } = req.query;
+    if (!folder) return res.status(400).json({ error: 'folder query param required' });
+    res.json(cache.getGSDPhaseTokens(folder));
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// Generic .planning file reader
+// type: 'state' (project-level STATE.md) | 'research' | 'verification' | 'summary' (phase-level, requires phase param)
+app.get('/api/gsd/file', (req, res) => {
+  try {
+    const { folder, phase: phaseDir, type } = req.query;
+    if (!folder || !type) return res.status(400).json({ error: 'folder and type required' });
+
+    const planningDir = path.join(folder, '.planning');
+    let content = null;
+
+    if (type === 'state') {
+      const filePath = path.join(planningDir, 'STATE.md');
+      if (fs.existsSync(filePath)) content = fs.readFileSync(filePath, 'utf-8');
+    } else if (phaseDir) {
+      const phaseFullDir = path.join(planningDir, 'phases', phaseDir);
+      const pattern = type === 'research' ? /RESEARCH\.md$/i
+        : type === 'verification' ? /VERIFICATION\.md$/i
+        : type === 'summary' ? /SUMMARY\.md$/i
+        : null;
+      if (pattern && fs.existsSync(phaseFullDir)) {
+        const files = fs.readdirSync(phaseFullDir).filter(f => pattern.test(f)).sort();
+        if (files.length > 0) {
+          const sections = files.map(f => {
+            const c = fs.readFileSync(path.join(phaseFullDir, f), 'utf-8');
+            return files.length > 1 ? `## ${f}\n\n${c}` : c;
+          });
+          content = sections.join('\n\n---\n\n');
+        }
+      }
+    }
+
+    res.json({ content });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
 // SPA fallback
 app.get('*', (req, res) => {
   res.sendFile(path.join(__dirname, 'public', 'index.html'));

package/ui/src/App.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { Routes, Route, NavLink, useLocation } from 'react-router-dom'
-import { Activity, BarChart3, GitCompare, MessageSquare, FolderOpen, DollarSign, CreditCard, Sun, Moon, RefreshCw, AlertTriangle, Github, Terminal, Database, Users, Plug, Copy, Check, Settings as SettingsIcon, Package, ChevronDown } from 'lucide-react'
+import { Activity, BarChart3, GitCompare, MessageSquare, FolderOpen, DollarSign, CreditCard, Sun, Moon, RefreshCw, AlertTriangle, Github, Terminal, Database, Users, Plug, Copy, Check, Settings as SettingsIcon, Package, ChevronDown, Target } from 'lucide-react'
 import { fetchOverview, refetchAgents, fetchMode, fetchRelayConfig, getAuthToken, setOnAuthFailure } from './lib/api'
 import { useTheme } from './lib/theme'
 import { useLive } from './hooks/useLive'
@@ -21,6 +21,7 @@ import Subscriptions from './pages/Subscriptions'
 import MCPs from './pages/MCPs'
 import RelayDashboard from './pages/RelayDashboard'
 import RelayUserDetail from './pages/RelayUserDetail'
+import GSD from './pages/GSD'
 
 function NavDropdown({ icon: Icon, label, items }) {
   const [open, setOpen] = useState(false)
@@ -154,6 +155,7 @@ export default function App() {
       { to: '/compare', icon: GitCompare, label: 'Compare' },
     ]},
     { to: '/artifacts', icon: Package, label: 'Artifacts' },
+    { to: '/gsd', icon: Target, label: 'GSD' },
     { to: '/mcps', icon: Plug, label: 'MCPs' },
     { to: '/sql', icon: Database, label: 'SQL' },
   ]
@@ -284,6 +286,7 @@ export default function App() {
             <Route path="/artifacts" element={<Artifacts />} />
             <Route path="/mcps" element={<MCPs />} />
             <Route path="/sql" element={<SqlViewer />} />
+            <Route path="/gsd" element={<GSD />} />
             <Route path="/settings" element={<Settings />} />
           </Routes>
         )}

package/ui/src/components/ChatSidebar.jsx

@@ -1,8 +1,9 @@
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect, useRef, useCallback } from 'react'
 import { X, Download, Send, Search } from 'lucide-react'
 import { fetchChat, BASE } from '../lib/api'
 import { editorColor, editorLabel, formatDateTime, formatNumber } from '../lib/constants'
 import MessageContent, { ROLE_CONFIG } from './MessageRenderer'
+import TokenTimeline from './TokenTimeline'
 
 export default function ChatSidebar({ chatId, onClose, fetchFn, extraHeader, username }) {
   const [chat, setChat] = useState(null)
@@ -47,6 +48,17 @@ export default function ChatSidebar({ chatId, onClose, fetchFn, extraHeader, use
     setMsgFilter('')
   }, [chatId])
 
+  const handleScrollToMessage = useCallback((msgIndex) => {
+    if (!scrollRef.current) return
+    const el = scrollRef.current.querySelector(`[data-msg-index="${msgIndex}"]`)
+    if (el) {
+      el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      el.style.outline = '1.5px solid var(--c-accent)'
+      el.style.outlineOffset = '2px'
+      setTimeout(() => { el.style.outline = 'none' }, 1500)
+    }
+  }, [])
+
   if (!chatId) return null
 
   return (
@@ -107,6 +119,13 @@ export default function ChatSidebar({ chatId, onClose, fetchFn, extraHeader, use
             {chat.stats.toolCalls?.length > 0 && <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.createdAt && chat.lastUpdatedAt && (() => {
+              const ms = new Date(chat.lastUpdatedAt).getTime() - new Date(chat.createdAt).getTime()
+              if (ms <= 0) return null
+              const mins = Math.floor(ms / 60000)
+              const label = mins < 60 ? `${mins}m` : `${Math.floor(mins / 60)}h ${mins % 60}m`
+              return <span>{label}</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(', ')}
@@ -115,6 +134,16 @@ export default function ChatSidebar({ chatId, onClose, fetchFn, extraHeader, use
           </div>
         )}
 
+        {/* Token Timeline */}
+        {chat && chat.messages.length > 0 && (
+          <TokenTimeline
+            messages={chat.messages}
+            createdAt={chat.createdAt}
+            lastUpdatedAt={chat.lastUpdatedAt}
+            onScrollToMessage={handleScrollToMessage}
+          />
+        )}
+
         {/* Search bar */}
         {chat && chat.messages.length > 0 && (
           <div className="shrink-0 px-4 py-2" style={{ borderBottom: '1px solid var(--c-border)' }}>
@@ -148,7 +177,7 @@ export default function ChatSidebar({ chatId, onClose, fetchFn, extraHeader, use
               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 key={i} data-msg-index={i} className="rounded-r px-3 py-2" style={{ borderLeft: `2px solid ${cfg.borderColor}`, background: cfg.bg, transition: 'outline 0.3s' }}>
                   <div className="flex items-center gap-1.5 text-[11px] mb-1" style={{ color: 'var(--c-text2)' }}>
                     <Icon size={11} />
                     <span className="font-medium">{msg.role === 'user' && (username || chat?.username) ? (username || chat.username) : cfg.label}</span>

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/lib/api.js

@@ -234,6 +234,49 @@ export async function fetchMCPs() {
   return res.json();
 }
 
+// ── GSD API ──
+
+export async function fetchGSDProjects() {
+  const res = await fetch(`${BASE}/api/gsd/projects`);
+  return res.json();
+}
+
+export async function fetchGSDPhases(folder) {
+  const q = new URLSearchParams({ folder });
+  const res = await fetch(`${BASE}/api/gsd/phases?${q}`);
+  return res.json();
+}
+
+export async function fetchGSDPlan(folder, phase) {
+  const q = new URLSearchParams({ folder, phase });
+  const res = await fetch(`${BASE}/api/gsd/plan?${q}`);
+  return res.json();
+}
+
+export async function fetchGSDOverview() {
+  const res = await fetch(`${BASE}/api/gsd/overview`);
+  return res.json();
+}
+
+export async function fetchGSDConfig(folder) {
+  const q = new URLSearchParams({ folder });
+  const res = await fetch(`${BASE}/api/gsd/config?${q}`);
+  return res.json();
+}
+
+export async function fetchGSDPhaseTokens(folder) {
+  const q = new URLSearchParams({ folder });
+  const res = await fetch(`${BASE}/api/gsd/phase-tokens?${q}`);
+  return res.json();
+}
+
+export async function fetchGSDFile(folder, type, phaseDir) {
+  const q = new URLSearchParams({ folder, type });
+  if (phaseDir) q.set('phase', phaseDir);
+  const res = await fetch(`${BASE}/api/gsd/file?${q}`);
+  return res.json();
+}
+
 // ── Relay API ──
 
 export async function fetchMode() {