@aion0/forge 0.5.28 → 0.5.30

package/RELEASE_NOTES.md

@@ -1,17 +1,20 @@
-# Forge v0.5.28
+# Forge v0.5.30
 
-Released: 2026-04-09
+Released: 2026-04-10
 
-## Changes since v0.5.27
+## Changes since v0.5.29
+
+### Features
+- feat: shrink trend chart, add GitHub-style heatmap and weekday chart
+- feat: richer usage statistics with charts
+- feat: auto-expand docked terminals based on count
+- feat: workspace terminal dock mode with grid layout
 
 ### Bug Fixes
-- fix: restore notification polling for Telegram, add Suspense wrappers
+- fix: preserve workspace terminal state across tab/project switches
 
-### Performance
-- perf: notifications fetch on-demand instead of polling
-- perf: remove task completion polling (replaced by hook stop)
-- perf: reduce polling frequency and lazy-load non-essential components
-- perf: async terminal-cwd to avoid blocking event loop
+### Other
+- style: make project tab buttons more prominent
 
 
-**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.5.27...v0.5.28
+**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.5.29...v0.5.30

package/components/ProjectDetail.tsx

@@ -85,6 +85,9 @@ export default memo(function ProjectDetail({ projectPath, projectName, hasGit }:
   const [projectSkills, setProjectSkills] = useState<{ name: string; displayName: string; type: string; scope: string; version: string; installedVersion: string; hasUpdate: boolean; source: 'registry' | 'local' }[]>([]);
   const [showSkillsDetail, setShowSkillsDetail] = useState(false);
   const [projectTab, setProjectTab] = useState<'workspace' | 'sessions' | 'code' | 'skills' | 'claudemd' | 'pipelines'>('code');
+  // Lazy-mount workspace: only mount after first visit, keep mounted to preserve terminal state
+  const [wsMounted, setWsMounted] = useState(false);
+  useEffect(() => { if (projectTab === 'workspace') setWsMounted(true); }, [projectTab]);
   const wsViewRef = useRef<import('./WorkspaceView').WorkspaceViewHandle>(null);
   // Pipeline bindings state
   const [pipelineBindings, setPipelineBindings] = useState<{ id: number; workflowName: string; enabled: boolean; config: any; lastRunAt: string | null; nextRunAt: string | null }[]>([]);
@@ -566,52 +569,52 @@ export default memo(function ProjectDetail({ projectPath, projectName, hasGit }:
         </div>
         {/* Tab switcher */}
         <div className="flex items-center gap-2 mt-1.5">
-          <div className="flex bg-[var(--bg-tertiary)] rounded p-0.5">
+          <div className="flex bg-[var(--bg-tertiary)] rounded p-1 gap-0.5">
             <button
               onClick={() => setProjectTab('code')}
-              className={`text-[9px] px-2 py-0.5 rounded transition-colors ${
-                projectTab === 'code' ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+              className={`text-[11px] font-medium px-2.5 py-1 rounded transition-all ${
+                projectTab === 'code' ? 'bg-[var(--accent)]/20 text-[var(--accent)] shadow-sm ring-1 ring-[var(--accent)]/40' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]'
               }`}
             >Code</button>
             <button
               onClick={() => setProjectTab('workspace')}
-              className={`text-[9px] px-2 py-0.5 rounded transition-colors ${
-                projectTab === 'workspace' ? 'bg-[var(--accent)]/20 text-[var(--accent)] shadow-sm' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+              className={`text-[11px] font-medium px-2.5 py-1 rounded transition-all ${
+                projectTab === 'workspace' ? 'bg-[var(--accent)]/20 text-[var(--accent)] shadow-sm ring-1 ring-[var(--accent)]/40' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]'
               }`}
             >🔨 Workspace</button>
             <button
               onClick={() => setProjectTab('sessions')}
-              className={`text-[9px] px-2 py-0.5 rounded transition-colors ${
-                projectTab === 'sessions' ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+              className={`text-[11px] font-medium px-2.5 py-1 rounded transition-all ${
+                projectTab === 'sessions' ? 'bg-[var(--accent)]/20 text-[var(--accent)] shadow-sm ring-1 ring-[var(--accent)]/40' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]'
               }`}
             >Sessions</button>
             <button
               onClick={() => setProjectTab('skills')}
-              className={`text-[9px] px-2 py-0.5 rounded transition-colors ${
-                projectTab === 'skills' ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+              className={`text-[11px] font-medium px-2.5 py-1 rounded transition-all ${
+                projectTab === 'skills' ? 'bg-[var(--accent)]/20 text-[var(--accent)] shadow-sm ring-1 ring-[var(--accent)]/40' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]'
               }`}
             >
               Skills & Cmds
-              {projectSkills.length > 0 && <span className="ml-1 text-[8px] text-[var(--text-secondary)]">({projectSkills.length})</span>}
-              {projectSkills.some(s => s.hasUpdate) && <span className="ml-1 text-[8px] text-[var(--yellow)]">!</span>}
+              {projectSkills.length > 0 && <span className="ml-1 text-[9px] opacity-70">({projectSkills.length})</span>}
+              {projectSkills.some(s => s.hasUpdate) && <span className="ml-1 text-[9px] text-[var(--yellow)]">!</span>}
             </button>
             <button
               onClick={() => setProjectTab('claudemd')}
-              className={`text-[9px] px-2 py-0.5 rounded transition-colors ${
-                projectTab === 'claudemd' ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+              className={`text-[11px] font-medium px-2.5 py-1 rounded transition-all ${
+                projectTab === 'claudemd' ? 'bg-[var(--accent)]/20 text-[var(--accent)] shadow-sm ring-1 ring-[var(--accent)]/40' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]'
               }`}
             >
               CLAUDE.md
-              {claudeMdExists && <span className="ml-1 text-[8px] text-[var(--green)]">•</span>}
+              {claudeMdExists && <span className="ml-1 text-[9px] text-[var(--green)]">•</span>}
             </button>
             <button
               onClick={() => setProjectTab('pipelines')}
-              className={`text-[9px] px-2 py-0.5 rounded transition-colors ${
-                projectTab === 'pipelines' ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+              className={`text-[11px] font-medium px-2.5 py-1 rounded transition-all ${
+                projectTab === 'pipelines' ? 'bg-[var(--accent)]/20 text-[var(--accent)] shadow-sm ring-1 ring-[var(--accent)]/40' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]'
               }`}
             >
               Pipelines
-              {pipelineBindings.length > 0 && <span className="ml-1 text-[8px] text-[var(--text-secondary)]">({pipelineBindings.length})</span>}
+              {pipelineBindings.length > 0 && <span className="ml-1 text-[9px] opacity-70">({pipelineBindings.length})</span>}
             </button>
           </div>
         </div>
@@ -642,9 +645,9 @@ export default memo(function ProjectDetail({ projectPath, projectName, hasGit }:
         </div>
       )}
 
-      {/* Workspace tab */}
-      {projectTab === 'workspace' && (
-        <div className="flex-1 flex min-h-0 overflow-hidden">
+      {/* Workspace tab — always mounted to preserve terminal state, hidden via CSS */}
+      {wsMounted && (
+        <div className={`flex-1 flex min-h-0 overflow-hidden ${projectTab === 'workspace' ? '' : 'hidden'}`}>
           <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>
             <WorkspaceViewLazy
               ref={wsViewRef}

package/components/ProjectManager.tsx

@@ -21,7 +21,7 @@ interface ProjectTab {
   mountedAt: number; // timestamp for LRU eviction
 }
 
-const MAX_MOUNTED_TABS = 5;
+const MAX_MOUNTED_TABS = 20;
 function genTabId(): number { return Date.now() + Math.floor(Math.random() * 10000); }
 
 export default function ProjectManager() {

package/components/UsagePanel.tsx

@@ -1,26 +1,30 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 
 interface UsageData {
-  total: { input: number; output: number; cost: number; sessions: number; messages: number };
+  total: { input: number; output: number; cacheRead: number; cacheCreate: number; cost: number; sessions: number; messages: number };
   byProject: { name: string; input: number; output: number; cost: number; sessions: number }[];
   byModel: { model: string; input: number; output: number; cost: number; messages: number }[];
-  byDay: { date: string; input: number; output: number; cost: number }[];
+  byDay: { date: string; input: number; output: number; cacheRead: number; cacheCreate: number; cost: number; messages: number }[];
   bySource: { source: string; input: number; output: number; cost: number; messages: number }[];
 }
 
 function formatTokens(n: number): string {
+  if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(2)}B`;
   if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
   if (n >= 1_000) return `${(n / 1_000).toFixed(0)}K`;
   return String(n);
 }
 
 function formatCost(n: number): string {
+  if (n >= 1000) return `$${(n / 1000).toFixed(2)}k`;
+  if (n >= 100) return `$${n.toFixed(0)}`;
   return `$${n.toFixed(2)}`;
 }
 
-// Simple bar component
+// ─── Horizontal bar ──────────────────────────────────────
+
 function Bar({ value, max, color }: { value: number; max: number; color: string }) {
   const pct = max > 0 ? Math.min(100, (value / max) * 100) : 0;
   return (
@@ -30,6 +34,275 @@ function Bar({ value, max, color }: { value: number; max: number; color: string
   );
 }
 
+// ─── Stacked bar for tokens breakdown ─────────────────────
+
+function StackedBar({ input, output, cacheRead, cacheCreate }: { input: number; output: number; cacheRead: number; cacheCreate: number }) {
+  const total = input + output + cacheRead + cacheCreate;
+  if (total === 0) return <div className="h-2 bg-[var(--bg-tertiary)] rounded-full" />;
+  const inputPct = (input / total) * 100;
+  const outputPct = (output / total) * 100;
+  const cacheReadPct = (cacheRead / total) * 100;
+  const cacheCreatePct = (cacheCreate / total) * 100;
+  return (
+    <div className="h-2 bg-[var(--bg-tertiary)] rounded-full overflow-hidden flex">
+      <div className="h-full bg-blue-500" style={{ width: `${inputPct}%` }} title={`Input: ${formatTokens(input)}`} />
+      <div className="h-full bg-green-500" style={{ width: `${outputPct}%` }} title={`Output: ${formatTokens(output)}`} />
+      <div className="h-full bg-purple-500" style={{ width: `${cacheReadPct}%` }} title={`Cache read: ${formatTokens(cacheRead)}`} />
+      <div className="h-full bg-orange-500" style={{ width: `${cacheCreatePct}%` }} title={`Cache create: ${formatTokens(cacheCreate)}`} />
+    </div>
+  );
+}
+
+// ─── Pie/donut chart using SVG ─────────────────────────────
+
+interface PieSlice { label: string; value: number; color: string }
+
+function DonutChart({ data, size = 140 }: { data: PieSlice[]; size?: number }) {
+  const total = data.reduce((s, d) => s + d.value, 0);
+  if (total === 0) return <div className="text-[10px] text-[var(--text-secondary)]">No data</div>;
+
+  const radius = size / 2 - 4;
+  const innerRadius = radius * 0.6;
+  const cx = size / 2, cy = size / 2;
+
+  let startAngle = -Math.PI / 2; // start at top
+  const slices = data.map(slice => {
+    const fraction = slice.value / total;
+    const endAngle = startAngle + fraction * 2 * Math.PI;
+    const x1 = cx + radius * Math.cos(startAngle);
+    const y1 = cy + radius * Math.sin(startAngle);
+    const x2 = cx + radius * Math.cos(endAngle);
+    const y2 = cy + radius * Math.sin(endAngle);
+    const x3 = cx + innerRadius * Math.cos(endAngle);
+    const y3 = cy + innerRadius * Math.sin(endAngle);
+    const x4 = cx + innerRadius * Math.cos(startAngle);
+    const y4 = cy + innerRadius * Math.sin(startAngle);
+    const largeArc = fraction > 0.5 ? 1 : 0;
+    const d = `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} L ${x3} ${y3} A ${innerRadius} ${innerRadius} 0 ${largeArc} 0 ${x4} ${y4} Z`;
+    startAngle = endAngle;
+    return { d, color: slice.color, label: slice.label, value: slice.value, pct: fraction * 100 };
+  });
+
+  return (
+    <div className="flex items-center gap-3">
+      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        {slices.map((s, i) => (
+          <path key={i} d={s.d} fill={s.color}>
+            <title>{`${s.label}: ${formatCost(s.value)} (${s.pct.toFixed(1)}%)`}</title>
+          </path>
+        ))}
+        <text x={cx} y={cy - 4} textAnchor="middle" className="fill-[var(--text-primary)] text-[11px] font-bold">
+          {formatCost(total)}
+        </text>
+        <text x={cx} y={cy + 10} textAnchor="middle" className="fill-[var(--text-secondary)] text-[8px]">
+          total
+        </text>
+      </svg>
+      <div className="flex-1 space-y-1">
+        {slices.map((s, i) => (
+          <div key={i} className="flex items-center gap-1.5 text-[10px]">
+            <span className="w-2 h-2 rounded-sm shrink-0" style={{ background: s.color }} />
+            <span className="text-[var(--text-primary)] truncate flex-1">{s.label}</span>
+            <span className="text-[var(--text-secondary)] text-[9px] w-10 text-right">{s.pct.toFixed(1)}%</span>
+            <span className="text-[var(--text-primary)] w-12 text-right font-mono">{formatCost(s.value)}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ─── Line chart for trends ────────────────────────────────
+
+function LineChart({ data, width = 520, height = 80 }: { data: { date: string; cost: number; messages: number }[]; width?: number; height?: number }) {
+  if (data.length === 0) return <div className="text-[10px] text-[var(--text-secondary)] py-6 text-center">No data</div>;
+
+  // Reverse so earliest is on left
+  const points = [...data].reverse();
+  const padding = { top: 10, right: 10, bottom: 22, left: 40 };
+  const chartW = width - padding.left - padding.right;
+  const chartH = height - padding.top - padding.bottom;
+
+  const maxCost = Math.max(...points.map(p => p.cost), 0.001);
+  const maxMsgs = Math.max(...points.map(p => p.messages), 1);
+
+  const xStep = points.length > 1 ? chartW / (points.length - 1) : 0;
+  const pathCost = points.map((p, i) => {
+    const x = padding.left + i * xStep;
+    const y = padding.top + chartH - (p.cost / maxCost) * chartH;
+    return `${i === 0 ? 'M' : 'L'} ${x} ${y}`;
+  }).join(' ');
+
+  const areaCost = pathCost + ` L ${padding.left + (points.length - 1) * xStep} ${padding.top + chartH} L ${padding.left} ${padding.top + chartH} Z`;
+
+  // Y axis ticks (0, 50%, 100%)
+  const yTicks = [0, 0.5, 1];
+
+  return (
+    <svg width="100%" viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="xMidYMid meet">
+      {/* Grid lines */}
+      {yTicks.map((t, i) => {
+        const y = padding.top + chartH * (1 - t);
+        return (
+          <g key={i}>
+            <line x1={padding.left} y1={y} x2={padding.left + chartW} y2={y}
+              stroke="var(--border)" strokeWidth="0.5" strokeDasharray="2 2" />
+            <text x={padding.left - 4} y={y + 3} textAnchor="end" className="fill-[var(--text-secondary)] text-[8px]">
+              {formatCost(maxCost * t)}
+            </text>
+          </g>
+        );
+      })}
+
+      {/* Area fill */}
+      <path d={areaCost} fill="var(--accent)" opacity="0.15" />
+      {/* Line */}
+      <path d={pathCost} fill="none" stroke="var(--accent)" strokeWidth="1.5" />
+
+      {/* Points + labels (only a few to avoid overlap) */}
+      {points.map((p, i) => {
+        const x = padding.left + i * xStep;
+        const y = padding.top + chartH - (p.cost / maxCost) * chartH;
+        const showLabel = points.length <= 10 || i % Math.ceil(points.length / 7) === 0 || i === points.length - 1;
+        return (
+          <g key={p.date}>
+            <circle cx={x} cy={y} r="2" fill="var(--accent)" stroke="var(--bg-primary)" strokeWidth="0.5" />
+            {showLabel && (
+              <text x={x} y={height - 6} textAnchor="middle" className="fill-[var(--text-secondary)] text-[8px]">
+                {p.date.slice(5)}
+              </text>
+            )}
+          </g>
+        );
+      })}
+    </svg>
+  );
+}
+
+// ─── Heatmap by day (grid) ────────────────────────────────
+
+function Heatmap({ data, days: numDays = 90 }: { data: { date: string; cost: number }[]; days?: number }) {
+  if (data.length === 0) return null;
+  const max = Math.max(...data.map(d => d.cost), 0.01);
+
+  const costMap = new Map(data.map(d => [d.date, d.cost]));
+
+  // Build last N days
+  const days: { date: string; cost: number; dow: number }[] = [];
+  const today = new Date();
+  for (let i = numDays - 1; i >= 0; i--) {
+    const d = new Date(today);
+    d.setDate(today.getDate() - i);
+    const dateStr = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+    days.push({ date: dateStr, cost: costMap.get(dateStr) || 0, dow: d.getDay() });
+  }
+
+  const intensity = (c: number) => {
+    if (c === 0) return 0;
+    return Math.min(4, Math.ceil((c / max) * 4));
+  };
+
+  const bgClasses = [
+    'bg-[var(--bg-tertiary)]',
+    'bg-blue-900/40',
+    'bg-blue-700/60',
+    'bg-blue-500/80',
+    'bg-blue-400',
+  ];
+
+  // Organize by week (columns) × weekday (rows), GitHub-style
+  // Start with padding for the first week
+  const firstDow = days[0].dow;
+  const weeks: (typeof days[0] | null)[][] = [];
+  let currentWeek: (typeof days[0] | null)[] = Array(firstDow).fill(null);
+  for (const d of days) {
+    currentWeek.push(d);
+    if (currentWeek.length === 7) {
+      weeks.push(currentWeek);
+      currentWeek = [];
+    }
+  }
+  if (currentWeek.length > 0) {
+    while (currentWeek.length < 7) currentWeek.push(null);
+    weeks.push(currentWeek);
+  }
+
+  const dayLabels = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+
+  return (
+    <div className="flex gap-1">
+      {/* Weekday labels */}
+      <div className="flex flex-col gap-[2px] pt-0.5">
+        {dayLabels.map((l, i) => (
+          <div key={i} className="text-[7px] text-[var(--text-secondary)] h-[11px] leading-[11px]">
+            {i % 2 === 1 ? l : ''}
+          </div>
+        ))}
+      </div>
+      {/* Week columns */}
+      <div className="flex gap-[2px] overflow-x-auto">
+        {weeks.map((week, wi) => (
+          <div key={wi} className="flex flex-col gap-[2px]">
+            {week.map((day, di) => (
+              day ? (
+                <div
+                  key={di}
+                  className={`w-[11px] h-[11px] rounded-sm ${bgClasses[intensity(day.cost)]}`}
+                  title={`${day.date}: ${formatCost(day.cost)}`}
+                />
+              ) : (
+                <div key={di} className="w-[11px] h-[11px]" />
+              )
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ─── Weekday cost distribution ──────────────────────────
+
+function WeekdayChart({ data }: { data: { date: string; cost: number }[] }) {
+  if (data.length === 0) return null;
+  const byDow: number[] = Array(7).fill(0);
+  const countByDow: number[] = Array(7).fill(0);
+  for (const d of data) {
+    const date = new Date(d.date);
+    const dow = date.getDay();
+    byDow[dow] += d.cost;
+    countByDow[dow]++;
+  }
+  const avgByDow = byDow.map((sum, i) => countByDow[i] > 0 ? sum / countByDow[i] : 0);
+  const max = Math.max(...avgByDow, 0.01);
+  const labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+  return (
+    <div className="flex items-end gap-1 h-16">
+      {avgByDow.map((v, i) => {
+        const pct = (v / max) * 100;
+        const isWeekend = i === 0 || i === 6;
+        return (
+          <div key={i} className="flex-1 flex flex-col items-center gap-0.5">
+            <div className="w-full flex-1 flex items-end">
+              <div
+                className={`w-full rounded-t ${isWeekend ? 'bg-orange-500/60' : 'bg-blue-500/60'}`}
+                style={{ height: `${Math.max(pct, 2)}%` }}
+                title={`${labels[i]}: ${formatCost(v)} avg`}
+              />
+            </div>
+            <div className="text-[8px] text-[var(--text-secondary)]">{labels[i][0]}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ─── Main component ────────────────────────────────────────
+
+const MODEL_COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899'];
+
 export default function UsagePanel() {
   const [data, setData] = useState<UsageData | null>(null);
   const [days, setDays] = useState(7);
@@ -57,16 +330,51 @@ export default function UsagePanel() {
     setScanning(false);
   };
 
+  // Calculate averages and trends
+  const stats = useMemo(() => {
+    if (!data) return null;
+    const byDay = data.byDay;
+    const avgDaily = byDay.length > 0 ? data.total.cost / byDay.length : 0;
+    const avgPerSession = data.total.sessions > 0 ? data.total.cost / data.total.sessions : 0;
+    const avgPerMsg = data.total.messages > 0 ? data.total.cost / data.total.messages : 0;
+
+    // Trend: compare last half vs first half
+    let trend = 0;
+    if (byDay.length >= 4) {
+      const mid = Math.floor(byDay.length / 2);
+      const recent = byDay.slice(0, mid).reduce((s, d) => s + d.cost, 0);
+      const earlier = byDay.slice(mid).reduce((s, d) => s + d.cost, 0);
+      trend = earlier > 0 ? ((recent - earlier) / earlier) * 100 : 0;
+    }
+
+    // Cache efficiency
+    const totalInput = data.total.input + data.total.cacheRead;
+    const cacheHitRate = totalInput > 0 ? (data.total.cacheRead / totalInput) * 100 : 0;
+
+    return { avgDaily, avgPerSession, avgPerMsg, trend, cacheHitRate };
+  }, [data]);
+
   if (loading && !data) {
     return <div className="flex-1 flex items-center justify-center text-[var(--text-secondary)] text-xs">Loading usage data...</div>;
   }
 
-  if (!data) {
+  if (!data || !stats) {
     return <div className="flex-1 flex items-center justify-center text-[var(--text-secondary)] text-xs">Failed to load usage data</div>;
   }
 
   const maxProjectCost = data.byProject.length > 0 ? data.byProject[0].cost : 1;
-  const maxDayCost = data.byDay.length > 0 ? Math.max(...data.byDay.map(d => d.cost)) : 1;
+
+  // Prepare pie chart data
+  const modelPie: PieSlice[] = data.byModel.slice(0, 6).map((m, i) => ({
+    label: m.model.replace('claude-', ''),
+    value: m.cost,
+    color: MODEL_COLORS[i % MODEL_COLORS.length],
+  }));
+  const sourcePie: PieSlice[] = data.bySource.slice(0, 6).map((s, i) => ({
+    label: s.source,
+    value: s.cost,
+    color: MODEL_COLORS[i % MODEL_COLORS.length],
+  }));
 
   return (
     <div className="flex-1 flex flex-col min-h-0 overflow-y-auto">
@@ -93,54 +401,123 @@ export default function UsagePanel() {
         </button>
       </div>
 
-      <div className="p-4 space-y-6">
-        {/* Summary cards */}
+      <div className="p-4 space-y-5">
+        {/* ─── Summary cards ──────────────────────────────── */}
         <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
           <div className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg p-3">
             <div className="text-[9px] text-[var(--text-secondary)] uppercase">Total Cost</div>
             <div className="text-lg font-bold text-[var(--text-primary)]">{formatCost(data.total.cost)}</div>
+            {stats.trend !== 0 && (
+              <div className={`text-[9px] ${stats.trend > 0 ? 'text-red-400' : 'text-green-400'}`}>
+                {stats.trend > 0 ? '↑' : '↓'} {Math.abs(stats.trend).toFixed(0)}% vs prev period
+              </div>
+            )}
           </div>
           <div className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg p-3">
-            <div className="text-[9px] text-[var(--text-secondary)] uppercase">Input Tokens</div>
-            <div className="text-lg font-bold text-[var(--text-primary)]">{formatTokens(data.total.input)}</div>
+            <div className="text-[9px] text-[var(--text-secondary)] uppercase">Daily Avg</div>
+            <div className="text-lg font-bold text-[var(--text-primary)]">{formatCost(stats.avgDaily)}</div>
+            <div className="text-[9px] text-[var(--text-secondary)]">per day</div>
           </div>
           <div className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg p-3">
-            <div className="text-[9px] text-[var(--text-secondary)] uppercase">Output Tokens</div>
-            <div className="text-lg font-bold text-[var(--text-primary)]">{formatTokens(data.total.output)}</div>
+            <div className="text-[9px] text-[var(--text-secondary)] uppercase">Tokens</div>
+            <div className="text-lg font-bold text-[var(--text-primary)]">{formatTokens(data.total.input + data.total.output + data.total.cacheRead)}</div>
+            <div className="text-[9px] text-[var(--text-secondary)]">
+              {formatTokens(data.total.input)} in · {formatTokens(data.total.output)} out
+            </div>
           </div>
           <div className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg p-3">
-            <div className="text-[9px] text-[var(--text-secondary)] uppercase">Sessions</div>
-            <div className="text-lg font-bold text-[var(--text-primary)]">{data.total.sessions}</div>
-            <div className="text-[9px] text-[var(--text-secondary)]">{data.total.messages} messages</div>
+            <div className="text-[9px] text-[var(--text-secondary)] uppercase">Cache Hit</div>
+            <div className="text-lg font-bold text-[var(--text-primary)]">{stats.cacheHitRate.toFixed(0)}%</div>
+            <div className="text-[9px] text-[var(--text-secondary)]">{formatTokens(data.total.cacheRead)} cached</div>
+          </div>
+        </div>
+
+        {/* ─── Token breakdown stacked bar ──────────────── */}
+        <div>
+          <div className="flex items-center justify-between mb-1.5">
+            <h3 className="text-[11px] font-semibold text-[var(--text-secondary)] uppercase">Token Mix</h3>
+            <div className="flex items-center gap-3 text-[9px]">
+              <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm bg-blue-500"></span>Input</span>
+              <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm bg-green-500"></span>Output</span>
+              <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm bg-purple-500"></span>Cache R</span>
+              <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm bg-orange-500"></span>Cache W</span>
+            </div>
           </div>
+          <StackedBar
+            input={data.total.input}
+            output={data.total.output}
+            cacheRead={data.total.cacheRead}
+            cacheCreate={data.total.cacheCreate}
+          />
         </div>
 
-        {/* By Day — bar chart */}
+        {/* ─── Daily trend line chart ───────────────────── */}
         {data.byDay.length > 0 && (
           <div>
-            <h3 className="text-[11px] font-semibold text-[var(--text-secondary)] uppercase mb-2">Daily Cost</h3>
-            <div className="space-y-1">
-              {data.byDay.slice(0, 14).reverse().map(d => (
-                <div key={d.date} className="flex items-center gap-2 text-[10px]">
-                  <span className="text-[var(--text-secondary)] w-16 shrink-0">{d.date.slice(5)}</span>
-                  <Bar value={d.cost} max={maxDayCost} color="bg-[var(--accent)]" />
-                  <span className="text-[var(--text-primary)] w-16 text-right shrink-0">{formatCost(d.cost)}</span>
-                </div>
-              ))}
+            <h3 className="text-[11px] font-semibold text-[var(--text-secondary)] uppercase mb-2">Cost Trend</h3>
+            <div className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg p-3">
+              <LineChart data={data.byDay} />
             </div>
           </div>
         )}
 
-        {/* By Project */}
+        {/* ─── Activity heatmap (90 days) + weekday ─────── */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+          <div className="md:col-span-2">
+            <div className="flex items-center justify-between mb-2">
+              <h3 className="text-[11px] font-semibold text-[var(--text-secondary)] uppercase">Activity (last 90 days)</h3>
+              <div className="flex items-center gap-1 text-[8px] text-[var(--text-secondary)]">
+                <span>less</span>
+                <span className="w-2 h-2 rounded-sm bg-[var(--bg-tertiary)]"></span>
+                <span className="w-2 h-2 rounded-sm bg-blue-900/40"></span>
+                <span className="w-2 h-2 rounded-sm bg-blue-700/60"></span>
+                <span className="w-2 h-2 rounded-sm bg-blue-500/80"></span>
+                <span className="w-2 h-2 rounded-sm bg-blue-400"></span>
+                <span>more</span>
+              </div>
+            </div>
+            <div className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg p-3">
+              <Heatmap data={data.byDay} days={91} />
+            </div>
+          </div>
+          <div>
+            <h3 className="text-[11px] font-semibold text-[var(--text-secondary)] uppercase mb-2">Avg by Weekday</h3>
+            <div className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg p-3">
+              <WeekdayChart data={data.byDay} />
+            </div>
+          </div>
+        </div>
+
+        {/* ─── Pie charts row ───────────────────────────── */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {modelPie.length > 0 && (
+            <div>
+              <h3 className="text-[11px] font-semibold text-[var(--text-secondary)] uppercase mb-2">By Model</h3>
+              <div className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg p-3">
+                <DonutChart data={modelPie} />
+              </div>
+            </div>
+          )}
+          {sourcePie.length > 0 && (
+            <div>
+              <h3 className="text-[11px] font-semibold text-[var(--text-secondary)] uppercase mb-2">By Source</h3>
+              <div className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg p-3">
+                <DonutChart data={sourcePie} />
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* ─── By Project ──────────────────────────────── */}
         {data.byProject.length > 0 && (
           <div>
             <h3 className="text-[11px] font-semibold text-[var(--text-secondary)] uppercase mb-2">By Project</h3>
-            <div className="space-y-1.5">
+            <div className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg p-3 space-y-1.5">
               {data.byProject.map(p => (
                 <div key={p.name} className="flex items-center gap-2 text-[10px]">
                   <span className="text-[var(--text-primary)] w-28 truncate shrink-0" title={p.name}>{p.name}</span>
                   <Bar value={p.cost} max={maxProjectCost} color="bg-blue-500" />
-                  <span className="text-[var(--text-primary)] w-16 text-right shrink-0">{formatCost(p.cost)}</span>
+                  <span className="text-[var(--text-primary)] w-16 text-right shrink-0 font-mono">{formatCost(p.cost)}</span>
                   <span className="text-[var(--text-secondary)] w-12 text-right shrink-0">{p.sessions}s</span>
                 </div>
               ))}
@@ -148,11 +525,11 @@ export default function UsagePanel() {
           </div>
         )}
 
-        {/* By Model */}
+        {/* ─── By Model detailed table ─────────────────── */}
         {data.byModel.length > 0 && (
           <div>
-            <h3 className="text-[11px] font-semibold text-[var(--text-secondary)] uppercase mb-2">By Model</h3>
-            <div className="border border-[var(--border)] rounded overflow-hidden">
+            <h3 className="text-[11px] font-semibold text-[var(--text-secondary)] uppercase mb-2">Model Details</h3>
+            <div className="border border-[var(--border)] rounded-lg overflow-hidden">
               <table className="w-full text-[10px]">
                 <thead>
                   <tr className="bg-[var(--bg-tertiary)] text-[var(--text-secondary)]">
@@ -161,16 +538,20 @@ export default function UsagePanel() {
                     <th className="text-right px-3 py-1.5">Output</th>
                     <th className="text-right px-3 py-1.5">Cost</th>
                     <th className="text-right px-3 py-1.5">Msgs</th>
+                    <th className="text-right px-3 py-1.5">Avg/Msg</th>
                   </tr>
                 </thead>
                 <tbody>
                   {data.byModel.map(m => (
                     <tr key={m.model} className="border-t border-[var(--border)]/30">
                       <td className="px-3 py-1.5 text-[var(--text-primary)]">{m.model}</td>
-                      <td className="px-3 py-1.5 text-right text-[var(--text-secondary)]">{formatTokens(m.input)}</td>
-                      <td className="px-3 py-1.5 text-right text-[var(--text-secondary)]">{formatTokens(m.output)}</td>
-                      <td className="px-3 py-1.5 text-right text-[var(--text-primary)] font-medium">{formatCost(m.cost)}</td>
+                      <td className="px-3 py-1.5 text-right text-[var(--text-secondary)] font-mono">{formatTokens(m.input)}</td>
+                      <td className="px-3 py-1.5 text-right text-[var(--text-secondary)] font-mono">{formatTokens(m.output)}</td>
+                      <td className="px-3 py-1.5 text-right text-[var(--text-primary)] font-medium font-mono">{formatCost(m.cost)}</td>
                       <td className="px-3 py-1.5 text-right text-[var(--text-secondary)]">{m.messages}</td>
+                      <td className="px-3 py-1.5 text-right text-[var(--text-secondary)] font-mono">
+                        {m.messages > 0 ? `$${(m.cost / m.messages).toFixed(3)}` : '-'}
+                      </td>
                     </tr>
                   ))}
                 </tbody>
@@ -179,27 +560,28 @@ export default function UsagePanel() {
           </div>
         )}
 
-        {/* By Source */}
-        {data.bySource.length > 0 && (
-          <div>
-            <h3 className="text-[11px] font-semibold text-[var(--text-secondary)] uppercase mb-2">By Source</h3>
-            <div className="flex gap-3 flex-wrap">
-              {data.bySource.map(s => (
-                <div key={s.source} className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg px-3 py-2 min-w-[120px]">
-                  <div className="text-[9px] text-[var(--text-secondary)] uppercase">{s.source}</div>
-                  <div className="text-sm font-bold text-[var(--text-primary)]">{formatCost(s.cost)}</div>
-                  <div className="text-[9px] text-[var(--text-secondary)]">{s.messages} msgs</div>
-                </div>
-              ))}
+        {/* ─── Summary stats ────────────────────────────── */}
+        <div className="grid grid-cols-3 gap-2 text-[10px]">
+          <div className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded p-2">
+            <div className="text-[8px] text-[var(--text-secondary)] uppercase">Avg per session</div>
+            <div className="text-[12px] font-semibold text-[var(--text-primary)]">{formatCost(stats.avgPerSession)}</div>
+          </div>
+          <div className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded p-2">
+            <div className="text-[8px] text-[var(--text-secondary)] uppercase">Avg per message</div>
+            <div className="text-[12px] font-semibold text-[var(--text-primary)]">${stats.avgPerMsg.toFixed(3)}</div>
+          </div>
+          <div className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded p-2">
+            <div className="text-[8px] text-[var(--text-secondary)] uppercase">Sessions / day</div>
+            <div className="text-[12px] font-semibold text-[var(--text-primary)]">
+              {data.byDay.length > 0 ? (data.total.sessions / data.byDay.length).toFixed(1) : '0'}
             </div>
           </div>
-        )}
+        </div>
 
         {/* Note */}
         <div className="text-[9px] text-[var(--text-secondary)] border-t border-[var(--border)] pt-3">
           Cost estimates based on API pricing (Opus: $15/$75 per M tokens, Sonnet: $3/$15).
-          Actual cost may differ with Claude Max/Pro subscription.
-          Daily breakdown groups by session completion date.
+          Cache reads are ~90% cheaper. Actual cost may differ with Claude Max/Pro subscription.
         </div>
       </div>
     </div>

package/components/WorkspaceView.tsx

@@ -2211,7 +2211,7 @@ function FloatingTerminalInline({ agentLabel, agentIcon, projectPath, agentCliId
   return <div ref={containerRef} className="w-full h-full" style={{ background: '#0d1117' }} />;
 }
 
-function FloatingTerminal({ agentLabel, agentIcon, projectPath, agentCliId, cliCmd: cliCmdProp, cliType, workDir, preferredSessionName, existingSession, resumeMode, resumeSessionId, profileEnv, isPrimary, skipPermissions, persistentSession, boundSessionId, initialPos, onSessionReady, onClose }: {
+function FloatingTerminal({ agentLabel, agentIcon, projectPath, agentCliId, cliCmd: cliCmdProp, cliType, workDir, preferredSessionName, existingSession, resumeMode, resumeSessionId, profileEnv, isPrimary, skipPermissions, persistentSession, boundSessionId, initialPos, docked, onSessionReady, onClose }: {
   agentLabel: string;
   agentIcon: string;
   projectPath: string;
@@ -2229,6 +2229,7 @@ function FloatingTerminal({ agentLabel, agentIcon, projectPath, agentCliId, cliC
   persistentSession?: boolean;
   boundSessionId?: string;
   initialPos?: { x: number; y: number };
+  docked?: boolean;  // when true, render as grid cell instead of fixed floating window
   onSessionReady?: (name: string) => void;
   onClose: (killSession: boolean) => void;
 }) {
@@ -2292,11 +2293,36 @@ function FloatingTerminal({ agentLabel, agentIcon, projectPath, agentCliId, cliC
         }
       };
 
+      let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+      const reconnect = () => {
+        if (disposed || reconnectTimer) return;
+        term.write('\r\n\x1b[93m[Reconnecting...]\x1b[0m\r\n');
+        reconnectTimer = setTimeout(() => {
+          reconnectTimer = null;
+          if (disposed) return;
+          const newWs = new WebSocket(getWsUrl());
+          wsRef.current = newWs;
+          const sn = sessionNameRef.current || preferredSessionName;
+          newWs.onopen = () => {
+            newWs.send(JSON.stringify({ type: 'attach', sessionName: sn, cols: term.cols, rows: term.rows }));
+          };
+          newWs.onerror = () => { if (!disposed) reconnect(); };
+          newWs.onclose = () => { if (!disposed) reconnect(); };
+          newWs.onmessage = ws.onmessage;
+        }, 2000);
+      };
+
       ws.onerror = () => {
-        if (!disposed) term.write('\r\n\x1b[91m[Connection error]\x1b[0m\r\n');
+        if (!disposed) {
+          term.write('\r\n\x1b[91m[Connection error]\x1b[0m\r\n');
+          reconnect();
+        }
       };
       ws.onclose = () => {
-        if (!disposed) term.write('\r\n\x1b[90m[Disconnected]\x1b[0m\r\n');
+        if (!disposed) {
+          term.write('\r\n\x1b[90m[Disconnected]\x1b[0m\r\n');
+          reconnect();
+        }
       };
 
       let launched = false;
@@ -2390,16 +2416,19 @@ function FloatingTerminal({ agentLabel, agentIcon, projectPath, agentCliId, cliC
       };
 
       term.onData(data => {
-        if (ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: 'input', data }));
+        const activeWs = wsRef.current;
+        if (activeWs?.readyState === WebSocket.OPEN) activeWs.send(JSON.stringify({ type: 'input', data }));
       });
       term.onResize(({ cols, rows }) => {
-        if (ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: 'resize', cols, rows }));
+        const activeWs = wsRef.current;
+        if (activeWs?.readyState === WebSocket.OPEN) activeWs.send(JSON.stringify({ type: 'resize', cols, rows }));
       });
 
       return () => {
         disposed = true;
+        if (reconnectTimer) clearTimeout(reconnectTimer);
         ro.disconnect();
-        ws.close();
+        (wsRef.current || ws).close();
         term.dispose();
       };
     });
@@ -2409,13 +2438,16 @@ function FloatingTerminal({ agentLabel, agentIcon, projectPath, agentCliId, cliC
 
   return (
     <div
-      className="fixed z-50 bg-[#0d1117] border border-[#30363d] rounded-lg shadow-2xl flex flex-col overflow-hidden"
-      style={{ left: pos.x, top: pos.y, width: size.w, height: size.h }}
+      className={docked
+        ? "relative bg-[#0d1117] border border-[#30363d] rounded-lg flex flex-col overflow-hidden w-full h-full"
+        : "fixed z-50 bg-[#0d1117] border border-[#30363d] rounded-lg shadow-2xl flex flex-col overflow-hidden"
+      }
+      style={docked ? undefined : { left: pos.x, top: pos.y, width: size.w, height: size.h }}
     >
-      {/* Draggable header */}
+      {/* Header — draggable in floating mode, static in docked mode */}
       <div
-        className="flex items-center gap-2 px-3 py-1.5 bg-[#161b22] border-b border-[#30363d] cursor-move shrink-0 select-none"
-        onMouseDown={(e) => {
+        className={`flex items-center gap-2 px-3 py-1.5 bg-[#161b22] border-b border-[#30363d] shrink-0 select-none ${docked ? '' : 'cursor-move'}`}
+        onMouseDown={docked ? undefined : (e) => {
           e.preventDefault();
           dragRef.current = { startX: e.clientX, startY: e.clientY, origX: pos.x, origY: pos.y };
           setUserDragged(true);
@@ -2429,34 +2461,36 @@ function FloatingTerminal({ agentLabel, agentIcon, projectPath, agentCliId, cliC
         }}
       >
         <span className="text-sm">{agentIcon}</span>
-        <span className="text-[11px] font-semibold text-white">{agentLabel}</span>
-        <span className="text-[8px] text-gray-500">⌨️ manual terminal</span>
-        <button onClick={() => setShowCloseDialog(true)} className="ml-auto text-gray-500 hover:text-white text-sm">✕</button>
+        <span className="text-[11px] font-semibold text-white truncate">{agentLabel}</span>
+        {!docked && <span className="text-[8px] text-gray-500">⌨️ manual terminal</span>}
+        <button onClick={() => setShowCloseDialog(true)} className="ml-auto text-gray-500 hover:text-white text-sm shrink-0">✕</button>
       </div>
 
       {/* Terminal */}
       <div ref={containerRef} className="flex-1 min-h-0" style={{ background: '#0d1117' }} />
 
-      {/* Resize handle */}
-      <div
-        className="absolute bottom-0 right-0 w-4 h-4 cursor-se-resize"
-        onMouseDown={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          resizeRef.current = { startX: e.clientX, startY: e.clientY, origW: size.w, origH: size.h };
-          const onMove = (ev: MouseEvent) => {
-            if (!resizeRef.current) return;
-            setSize({ w: Math.max(400, resizeRef.current.origW + ev.clientX - resizeRef.current.startX), h: Math.max(250, resizeRef.current.origH + ev.clientY - resizeRef.current.startY) });
-          };
-          const onUp = () => { resizeRef.current = null; window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); };
-          window.addEventListener('mousemove', onMove);
-          window.addEventListener('mouseup', onUp);
-        }}
-      >
-        <svg viewBox="0 0 16 16" className="w-3 h-3 absolute bottom-0.5 right-0.5 text-gray-600">
-          <path d="M14 14L8 14L14 8Z" fill="currentColor" />
-        </svg>
-      </div>
+      {/* Resize handle — floating mode only */}
+      {!docked && (
+        <div
+          className="absolute bottom-0 right-0 w-4 h-4 cursor-se-resize"
+          onMouseDown={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            resizeRef.current = { startX: e.clientX, startY: e.clientY, origW: size.w, origH: size.h };
+            const onMove = (ev: MouseEvent) => {
+              if (!resizeRef.current) return;
+              setSize({ w: Math.max(400, resizeRef.current.origW + ev.clientX - resizeRef.current.startX), h: Math.max(250, resizeRef.current.origH + ev.clientY - resizeRef.current.startY) });
+            };
+            const onUp = () => { resizeRef.current = null; window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); };
+            window.addEventListener('mousemove', onMove);
+            window.addEventListener('mouseup', onUp);
+          }}
+        >
+          <svg viewBox="0 0 16 16" className="w-3 h-3 absolute bottom-0.5 right-0.5 text-gray-600">
+            <path d="M14 14L8 14L14 8Z" fill="currentColor" />
+          </svg>
+        </div>
+      )}
 
       {/* Close confirmation dialog */}
       {showCloseDialog && (
@@ -3417,6 +3451,27 @@ function WorkspaceViewInner({ projectPath, projectName, onClose }: {
   };
   const [floatingTerminals, setFloatingTerminals] = useState<{ agentId: string; label: string; icon: string; cliId: string; cliCmd?: string; cliType?: string; workDir?: string; tmuxSession?: string; sessionName: string; resumeMode?: boolean; resumeSessionId?: string; profileEnv?: Record<string, string>; isPrimary?: boolean; skipPermissions?: boolean; persistentSession?: boolean; boundSessionId?: string; initialPos?: { x: number; y: number } }[]>([]);
   const [termPicker, setTermPicker] = useState<{ agent: AgentConfig; sessName: string; workDir?: string; supportsSession?: boolean; currentSessionId: string | null; initialPos?: { x: number; y: number } } | null>(null);
+  // Terminal layout: floating (draggable windows) or docked (fixed grid at bottom)
+  const [terminalLayout, setTerminalLayout] = useState<'floating' | 'docked'>(() => {
+    if (typeof window === 'undefined') return 'floating';
+    return (localStorage.getItem('forge.termLayout') as 'floating' | 'docked') || 'floating';
+  });
+  const [dockColumns, setDockColumns] = useState<number>(() => {
+    if (typeof window === 'undefined') return 2;
+    return parseInt(localStorage.getItem('forge.termDockCols') || '2');
+  });
+  const [dockHeight, setDockHeight] = useState<number>(() => {
+    if (typeof window === 'undefined') return 320;
+    return parseInt(localStorage.getItem('forge.termDockHeight') || '320');
+  });
+  const updateTerminalLayout = (l: 'floating' | 'docked') => {
+    setTerminalLayout(l);
+    if (typeof window !== 'undefined') localStorage.setItem('forge.termLayout', l);
+  };
+  const updateDockColumns = (n: number) => {
+    setDockColumns(n);
+    if (typeof window !== 'undefined') localStorage.setItem('forge.termDockCols', String(n));
+  };
 
   // Expose focusAgent to parent
   useImperativeHandle(ref, () => ({
@@ -3742,6 +3797,32 @@ function WorkspaceViewInner({ projectPath, projectName, onClose }: {
           </>
         )}
         <div className="ml-auto flex items-center gap-2">
+          {/* Terminal layout switcher */}
+          <div className="flex items-center gap-0.5 px-1 py-0.5 rounded border border-[#30363d] bg-[#0d1117]">
+            <button
+              onClick={() => updateTerminalLayout('floating')}
+              className={`text-[8px] px-1.5 py-0.5 rounded ${terminalLayout === 'floating' ? 'bg-[#58a6ff]/20 text-[#58a6ff]' : 'text-gray-500 hover:text-white'}`}
+              title="Floating terminals (draggable windows)"
+            >⧉ Float</button>
+            <button
+              onClick={() => updateTerminalLayout('docked')}
+              className={`text-[8px] px-1.5 py-0.5 rounded ${terminalLayout === 'docked' ? 'bg-[#58a6ff]/20 text-[#58a6ff]' : 'text-gray-500 hover:text-white'}`}
+              title="Docked terminals (bottom grid)"
+            >▤ Dock</button>
+            {terminalLayout === 'docked' && (
+              <>
+                <span className="w-px h-3 bg-[#30363d] mx-0.5" />
+                {[1, 2, 3, 4].map(n => (
+                  <button
+                    key={n}
+                    onClick={() => updateDockColumns(n)}
+                    className={`text-[8px] px-1 py-0.5 rounded ${dockColumns === n ? 'bg-[#58a6ff]/20 text-[#58a6ff]' : 'text-gray-500 hover:text-white'}`}
+                    title={`${n} column${n > 1 ? 's' : ''}`}
+                  >{n}</button>
+                ))}
+              </>
+            )}
+          </div>
           <select value={mascotTheme} onChange={e => updateMascotTheme(e.target.value as MascotTheme)}
             className="text-[8px] px-1.5 py-0.5 rounded border border-[#30363d] bg-[#0d1117] text-gray-500 hover:text-white hover:border-[#58a6ff]/60 cursor-pointer focus:outline-none"
             title="Mascot theme">
@@ -3983,8 +4064,8 @@ function WorkspaceViewInner({ projectPath, projectName, onClose }: {
         />
       )}
 
-      {/* Floating terminals — positioned near their agent node */}
-      {floatingTerminals.map(ft => (
+      {/* Terminals — floating (draggable windows) or docked (bottom grid) */}
+      {terminalLayout === 'floating' && floatingTerminals.map(ft => (
         <FloatingTerminal
           key={ft.agentId}
           agentLabel={ft.label}
@@ -4015,6 +4096,67 @@ function WorkspaceViewInner({ projectPath, projectName, onClose }: {
         />
       ))}
 
+      {/* Docked terminals — bottom panel with grid layout */}
+      {terminalLayout === 'docked' && floatingTerminals.length > 0 && (
+        <div
+          className="fixed bottom-0 left-0 right-0 z-40 bg-[#0a0e14] border-t border-[#30363d] flex flex-col"
+          style={{ height: dockHeight }}
+        >
+          {/* Resize handle */}
+          <div
+            className="h-1 bg-[#30363d] hover:bg-[var(--accent)] cursor-ns-resize shrink-0"
+            onMouseDown={(e) => {
+              e.preventDefault();
+              const startY = e.clientY;
+              const startH = dockHeight;
+              const onMove = (ev: MouseEvent) => {
+                const newH = Math.max(200, Math.min(window.innerHeight - 100, startH - (ev.clientY - startY)));
+                setDockHeight(newH);
+              };
+              const onUp = () => {
+                window.removeEventListener('mousemove', onMove);
+                window.removeEventListener('mouseup', onUp);
+                if (typeof window !== 'undefined') localStorage.setItem('forge.termDockHeight', String(dockHeight));
+              };
+              window.addEventListener('mousemove', onMove);
+              window.addEventListener('mouseup', onUp);
+            }}
+          />
+          <div className="grid gap-1 p-1 flex-1 min-h-0" style={{ gridTemplateColumns: `repeat(${Math.min(floatingTerminals.length, dockColumns)}, minmax(0, 1fr))` }}>
+            {floatingTerminals.map(ft => (
+              <FloatingTerminal
+                key={ft.agentId}
+                agentLabel={ft.label}
+                agentIcon={ft.icon}
+                projectPath={projectPath}
+                agentCliId={ft.cliId}
+                cliCmd={ft.cliCmd}
+                cliType={ft.cliType}
+                workDir={ft.workDir}
+                preferredSessionName={ft.sessionName}
+                existingSession={ft.tmuxSession}
+                resumeMode={ft.resumeMode}
+                resumeSessionId={ft.resumeSessionId}
+                profileEnv={ft.profileEnv}
+                isPrimary={ft.isPrimary}
+                skipPermissions={ft.skipPermissions}
+                persistentSession={ft.persistentSession}
+                boundSessionId={ft.boundSessionId}
+                docked
+                onSessionReady={(name) => {
+                  if (workspaceId) wsApi(workspaceId, 'set_tmux_session', { agentId: ft.agentId, sessionName: name });
+                  setFloatingTerminals(prev => prev.map(t => t.agentId === ft.agentId ? { ...t, tmuxSession: name } : t));
+                }}
+                onClose={(killSession) => {
+                  setFloatingTerminals(prev => prev.filter(t => t.agentId !== ft.agentId));
+                  if (workspaceId) wsApi(workspaceId, 'close_terminal', { agentId: ft.agentId, kill: killSession });
+                }}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
       {/* User input request from agent (via bus) */}
       {userInputRequest && workspaceId && (
         <RunPromptDialog

package/lib/usage-scanner.ts

@@ -180,10 +180,10 @@ export function queryUsage(opts: {
   source?: string;
   model?: string;
 }): {
-  total: { input: number; output: number; cost: number; sessions: number; messages: number };
+  total: { input: number; output: number; cacheRead: number; cacheCreate: number; cost: number; sessions: number; messages: number };
   byProject: { name: string; input: number; output: number; cost: number; sessions: number }[];
   byModel: { model: string; input: number; output: number; cost: number; messages: number }[];
-  byDay: { date: string; input: number; output: number; cost: number }[];
+  byDay: { date: string; input: number; output: number; cacheRead: number; cacheCreate: number; cost: number; messages: number }[];
   bySource: { source: string; input: number; output: number; cost: number; messages: number }[];
 } {
   let where = '1=1';
@@ -202,6 +202,7 @@ export function queryUsage(opts: {
 
   const totalRow = db().prepare(`
     SELECT COALESCE(SUM(input_tokens), 0) as input, COALESCE(SUM(output_tokens), 0) as output,
+           COALESCE(SUM(cache_read_tokens), 0) as cacheRead, COALESCE(SUM(cache_create_tokens), 0) as cacheCreate,
            COALESCE(SUM(cost_usd), 0) as cost, COUNT(DISTINCT session_id) as sessions,
            COALESCE(SUM(message_count), 0) as messages
     FROM token_usage WHERE ${where}
@@ -226,11 +227,15 @@ export function queryUsage(opts: {
   }));
 
   const byDay = (db().prepare(`
-    SELECT day as date, SUM(input_tokens) as input, SUM(output_tokens) as output, SUM(cost_usd) as cost
+    SELECT day as date, SUM(input_tokens) as input, SUM(output_tokens) as output,
+           SUM(cache_read_tokens) as cacheRead, SUM(cache_create_tokens) as cacheCreate,
+           SUM(cost_usd) as cost, SUM(message_count) as messages
     FROM token_usage WHERE ${where} AND day != 'unknown'
     GROUP BY day ORDER BY day DESC LIMIT 30
   `).all(...params) as any[]).map(r => ({
-    date: r.date, input: r.input, output: r.output, cost: +r.cost.toFixed(4),
+    date: r.date, input: r.input, output: r.output,
+    cacheRead: r.cacheRead || 0, cacheCreate: r.cacheCreate || 0,
+    cost: +r.cost.toFixed(4), messages: r.messages || 0,
   }));
 
   const bySource = (db().prepare(`
@@ -243,7 +248,11 @@ export function queryUsage(opts: {
   }));
 
   return {
-    total: { input: totalRow.input, output: totalRow.output, cost: +totalRow.cost.toFixed(4), sessions: totalRow.sessions, messages: totalRow.messages },
+    total: {
+      input: totalRow.input, output: totalRow.output,
+      cacheRead: totalRow.cacheRead || 0, cacheCreate: totalRow.cacheCreate || 0,
+      cost: +totalRow.cost.toFixed(4), sessions: totalRow.sessions, messages: totalRow.messages,
+    },
     byProject, byModel, byDay, bySource,
   };
 }

package/lib/workspace/orchestrator.ts

@@ -1175,18 +1175,7 @@ export class WorkspaceOrchestrator extends EventEmitter {
         entry.worker = null;
       }
 
-      // 2b. For persistent sessions: send /clear to reset Claude's context if user is attached.
-      // This is a Claude Code slash command — no LLM call, just a local context reset.
-      if (entry.state.tmuxSession && entry.config.role?.trim()) {
-        let isAttached = false;
-        try {
-          const info = execSync(`tmux display-message -t "${entry.state.tmuxSession}" -p "#{session_attached}" 2>/dev/null`, { timeout: 3000, encoding: 'utf-8' }).trim();
-          isAttached = info !== '0';
-        } catch {}
-        if (isAttached) {
-          try { this.injectIntoSession(id, '/clear'); } catch {}
-        }
-      }
+      // Do NOT send /clear — preserves user's conversation context in attached terminals
       this.roleInjectState.delete(id);
 
       // 3. Kill tmux session (skip if user is attached to it)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aion0/forge",
-  "version": "0.5.28",
+  "version": "0.5.30",
   "description": "Unified AI workflow platform — multi-model task orchestration, persistent sessions, web terminal, remote access",
   "type": "module",
   "scripts": {