jfl 0.2.4 → 0.3.0

package/dist/dashboard/components.d.ts

@@ -1,7 +1,7 @@
 /**
  * Dashboard reusable Preact components
  *
- * @purpose Preact+HTM component JS strings for Nav, Card, StatusBadge, Table, JournalEntry, etc.
+ * @purpose Preact+HTM component JS strings for Nav, Card, MetricCard, ChartCard, RunActivityChart, ActivityRow, etc.
  */
 export declare function getComponentsJS(): string;
 //# sourceMappingURL=components.d.ts.map

package/dist/dashboard/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/dashboard/components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wBAAgB,eAAe,IAAI,MAAM,CA4JxC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/dashboard/components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wBAAgB,eAAe,IAAI,MAAM,CAwjBxC"}

package/dist/dashboard/components.js

@@ -1,24 +1,47 @@
 /**
  * Dashboard reusable Preact components
  *
- * @purpose Preact+HTM component JS strings for Nav, Card, StatusBadge, Table, JournalEntry, etc.
+ * @purpose Preact+HTM component JS strings for Nav, Card, MetricCard, ChartCard, RunActivityChart, ActivityRow, etc.
  */
 export function getComponentsJS() {
     return `
-    function Nav({ currentPage, setPage, projectName, port }) {
-      const pages = [
+    function Nav({ currentPage, setPage, projectName, port, mode }) {
+      const m = mode || 'gtm'
+      const portfolioPages = [
+        { id: 'portfolio', label: 'Portfolio Overview' },
+        { id: 'evals', label: 'Leaderboard' },
+        { id: 'events', label: 'Events' },
+        { id: 'costs', label: 'Costs' },
+        { id: 'projects', label: 'Health' },
+      ]
+      const gtmPages = [
         { id: 'overview', label: 'Command Center' },
         { id: 'journal', label: 'Journal' },
         { id: 'agents', label: 'Agents' },
+        { id: 'evals', label: 'Evals' },
         { id: 'events', label: 'Events' },
+        { id: 'costs', label: 'Costs' },
+        { id: 'flows', label: 'Flows' },
         { id: 'sessions', label: 'Sessions' },
+        { id: 'scope', label: 'Scope' },
         { id: 'projects', label: 'Projects' },
       ]
+      const servicePages = [
+        { id: 'service', label: 'My Status' },
+        { id: 'journal', label: 'Journal' },
+        { id: 'evals', label: 'My Evals' },
+        { id: 'events', label: 'Events' },
+        { id: 'costs', label: 'Costs' },
+        { id: 'sessions', label: 'Sessions' },
+      ]
+
+      const pages = m === 'portfolio' ? portfolioPages : m === 'service' ? servicePages : gtmPages
 
       return html\`
         <div class="sidebar">
           <div class="sidebar-brand">
             <h1>\${projectName || 'Context Hub'}</h1>
+            <\${ModeBadge} mode=\${m} />
             <div class="port-badge">Port \${port}</div>
           </div>
           <ul class="nav-items">
@@ -45,6 +68,112 @@ export function getComponentsJS() {
       \`
     }
 
+    function MetricCard({ icon, value, label, description, onClick, color }) {
+      return html\`
+        <div class="metric-card" onClick=\${onClick}>
+          \${icon && html\`<div style="font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 0.5rem;">\${icon}</div>\`}
+          <div class="metric-value" style=\${color ? 'color:' + color : ''}>\${value}</div>
+          <div class="metric-label">\${label}</div>
+          \${description && html\`<div class="metric-description">\${description}</div>\`}
+        </div>
+      \`
+    }
+
+    function ChartCard({ title, subtitle, children }) {
+      return html\`
+        <div class="chart-card">
+          <div style="margin-bottom: 1rem;">
+            <div class="chart-card-title">\${title}</div>
+            \${subtitle && html\`<div class="chart-card-subtitle">\${subtitle}</div>\`}
+          </div>
+          \${children}
+        </div>
+      \`
+    }
+
+    function RunActivityChart({ events, days }) {
+      const numDays = days || 14
+      const now = new Date()
+      const buckets = []
+
+      for (let i = numDays - 1; i >= 0; i--) {
+        const d = new Date(now)
+        d.setDate(d.getDate() - i)
+        const key = d.toISOString().slice(0, 10)
+        buckets.push({ date: key, success: 0, failed: 0, other: 0, dayIndex: numDays - 1 - i })
+      }
+
+      const dateSet = new Set(buckets.map(b => b.date))
+
+      for (const e of (events || [])) {
+        const ts = e.ts || e.timestamp
+        if (!ts) continue
+        const day = new Date(ts).toISOString().slice(0, 10)
+        const bucket = buckets.find(b => b.date === day)
+        if (!bucket) continue
+        const t = (e.type || '').toLowerCase()
+        if (t.includes('completed') || t.includes('success')) bucket.success++
+        else if (t.includes('failed') || t.includes('error')) bucket.failed++
+        else bucket.other++
+      }
+
+      const maxCount = Math.max(1, ...buckets.map(b => b.success + b.failed + b.other))
+
+      return html\`
+        <div>
+          <div class="stacked-bars">
+            \${buckets.map((b, i) => {
+              const total = b.success + b.failed + b.other
+              const h = 80
+              const successH = total > 0 ? Math.max(2, Math.round((b.success / maxCount) * h)) : 0
+              const failedH = total > 0 ? Math.max(2, Math.round((b.failed / maxCount) * h)) : 0
+              const otherH = total > 0 ? Math.max(2, Math.round((b.other / maxCount) * h)) : 0
+
+              return html\`
+                <div key=\${i} class="stacked-bar" title=\${b.date + ': ' + total + ' events'}>
+                  \${total === 0 ? html\`<div class="stacked-bar-empty"></div>\` : html\`
+                    \${successH > 0 && html\`<div class="stacked-bar-segment stacked-bar-segment-success" style=\${'height:' + successH + 'px'}></div>\`}
+                    \${failedH > 0 && html\`<div class="stacked-bar-segment stacked-bar-segment-error" style=\${'height:' + failedH + 'px'}></div>\`}
+                    \${otherH > 0 && html\`<div class="stacked-bar-segment stacked-bar-segment-warning" style=\${'height:' + otherH + 'px'}></div>\`}
+                  \`}
+                </div>
+              \`
+            })}
+          </div>
+          <div style="display: flex; justify-content: space-between; margin-top: 0.25rem;">
+            <span class="stacked-bar-label">\${buckets[0]?.date.slice(5) || ''}</span>
+            <span class="stacked-bar-label">\${buckets[Math.floor(numDays / 2)]?.date.slice(5) || ''}</span>
+            <span class="stacked-bar-label">\${buckets[numDays - 1]?.date.slice(5) || ''}</span>
+          </div>
+        </div>
+      \`
+    }
+
+    function ActivityRow({ event, isNew }) {
+      const time = new Date(event.ts || event.timestamp).toLocaleTimeString()
+      const t = (event.type || '').toLowerCase()
+      let icon = ''
+      if (t.includes('completed') || t.includes('success')) icon = 'var(--success)'
+      else if (t.includes('failed') || t.includes('error')) icon = 'var(--error)'
+      else if (t.includes('started') || t.includes('start')) icon = 'var(--info)'
+      else icon = 'var(--dim)'
+
+      const detail = event.data
+        ? (typeof event.data === 'object'
+          ? (event.data.message || event.data.task || event.data.title || JSON.stringify(event.data).slice(0, 80))
+          : String(event.data))
+        : ''
+
+      return html\`
+        <div class=\${'activity-row' + (isNew ? ' activity-row-enter' : '')}>
+          <span style=\${'width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background:' + icon}></span>
+          <span style="font-size: 0.75rem; color: var(--dim); white-space: nowrap; min-width: 60px;">\${time}</span>
+          <\${TypeBadge} type=\${event.type} />
+          <span style="font-size: 0.8rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;">\${detail}</span>
+        </div>
+      \`
+    }
+
     function StatusBadge({ status }) {
       const s = (status || 'unknown').toLowerCase()
       return html\`<span class=\${'badge badge-' + s}>\${status}</span>\`
@@ -133,10 +262,21 @@ export function getComponentsJS() {
     }
 
     function LiveIndicator({ connected }) {
+      if (connected) {
+        return html\`
+          <span style="display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8rem; color: var(--muted-foreground);">
+            <span class="pulse-dot">
+              <span class="pulse-dot-ping" style="background: var(--success);"></span>
+              <span class="pulse-dot-core" style="background: var(--success);"></span>
+            </span>
+            Live
+          </span>
+        \`
+      }
       return html\`
-        <span style="display: inline-flex; align-items: center; font-size: 0.8rem;">
-          <span class="live-dot" style=\${'background: ' + (connected ? 'var(--success)' : 'var(--error)')}></span>
-          \${connected ? 'Live' : 'Disconnected'}
+        <span style="display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8rem; color: var(--error);">
+          <span style="width: 8px; height: 8px; border-radius: 50%; background: var(--error);"></span>
+          Disconnected
         </span>
       \`
     }
@@ -158,6 +298,278 @@ export function getComponentsJS() {
         </div>
       \`
     }
+
+    function Sparkline({ data, width, height, color }) {
+      const w = width || 60
+      const h = height || 20
+      const c = color || 'var(--accent)'
+      if (!data || data.length < 2) {
+        return html\`<svg width=\${w} height=\${h} class="sparkline"><line x1="0" y1=\${h/2} x2=\${w} y2=\${h/2} stroke="var(--dim)" stroke-width="1" stroke-dasharray="2,2" /></svg>\`
+      }
+      const min = Math.min(...data)
+      const max = Math.max(...data)
+      const range = max - min || 1
+      const pad = 2
+      const points = data.map((v, i) => {
+        const x = (i / (data.length - 1)) * w
+        const y = h - pad - ((v - min) / range) * (h - pad * 2)
+        return x + ',' + y
+      }).join(' ')
+      return html\`
+        <svg width=\${w} height=\${h} class="sparkline">
+          <polyline points=\${points} fill="none" stroke=\${c} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      \`
+    }
+
+    function EvalChart({ data, width, height, label }) {
+      const w = width || 500
+      const h = height || 200
+      const pad = { top: 10, right: 10, bottom: 25, left: 45 }
+      const cw = w - pad.left - pad.right
+      const ch = h - pad.top - pad.bottom
+
+      if (!data || data.length < 2) {
+        return html\`
+          <div class="eval-chart-container" style=\${'width:' + w + 'px;height:' + h + 'px;'}>
+            <div class="empty-state" style="padding: 2rem;">No eval data yet</div>
+          </div>
+        \`
+      }
+
+      const values = data.map(d => d.value)
+      const min = Math.min(...values) * 0.95
+      const max = Math.max(...values) * 1.05
+      const range = max - min || 1
+
+      const points = data.map((d, i) => {
+        const x = pad.left + (i / (data.length - 1)) * cw
+        const y = pad.top + ch - ((d.value - min) / range) * ch
+        return { x, y, value: d.value, ts: d.ts, model: d.model_version }
+      })
+
+      const polyline = points.map(p => p.x + ',' + p.y).join(' ')
+      const gradientPath = 'M' + points[0].x + ',' + (pad.top + ch) + ' L' + points.map(p => p.x + ',' + p.y).join(' L') + ' L' + points[points.length - 1].x + ',' + (pad.top + ch) + ' Z'
+
+      const yTicks = 5
+      const yLines = Array.from({ length: yTicks }, (_, i) => {
+        const val = min + (range * i) / (yTicks - 1)
+        const y = pad.top + ch - (i / (yTicks - 1)) * ch
+        return { val, y }
+      })
+
+      return html\`
+        <div class="eval-chart-container">
+          <svg width=\${w} height=\${h} viewBox=\${'0 0 ' + w + ' ' + h}>
+            <defs>
+              <linearGradient id="evalGrad" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stop-color="var(--accent)" stop-opacity="0.3" />
+                <stop offset="100%" stop-color="var(--accent)" stop-opacity="0" />
+              </linearGradient>
+            </defs>
+            \${yLines.map(t => html\`
+              <g key=\${t.val}>
+                <line x1=\${pad.left} y1=\${t.y} x2=\${w - pad.right} y2=\${t.y} stroke="var(--border)" stroke-width="0.5" />
+                <text x=\${pad.left - 5} y=\${t.y + 3} text-anchor="end" fill="var(--dim)" font-size="10">\${t.val.toFixed(2)}</text>
+              </g>
+            \`)}
+            <path d=\${gradientPath} fill="url(#evalGrad)" />
+            <polyline points=\${polyline} fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            \${points.map((p, i) => html\`
+              <g key=\${i} class="eval-point">
+                <circle cx=\${p.x} cy=\${p.y} r="3" fill="var(--card)" stroke="var(--accent)" stroke-width="1.5" />
+                <title>\${(p.model || '') + ' ' + p.value.toFixed(4) + '\\n' + new Date(p.ts).toLocaleDateString()}</title>
+              </g>
+            \`)}
+            \${label && html\`<text x=\${pad.left} y=\${h - 3} fill="var(--dim)" font-size="10">\${label}</text>\`}
+          </svg>
+        </div>
+      \`
+    }
+
+    function HealthCard({ child }) {
+      const dotClass = child.status === 'ok' ? 'health-dot-ok' : child.status === 'error' ? 'health-dot-error' : 'health-dot-down'
+      return html\`
+        <div class="card health-card">
+          <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
+            <span class=\${'health-dot ' + dotClass}></span>
+            <span style="font-weight: 700; font-size: 0.9rem;">\${child.name}</span>
+          </div>
+          \${child.composite != null && html\`
+            <div style="display: flex; align-items: center; gap: 0.75rem;">
+              <span class="metric-value" style="font-size: 1.5rem;">\${child.composite.toFixed(2)}</span>
+              \${child.delta != null && html\`<\${DeltaBadge} delta=\${child.delta} />\`}
+            </div>
+          \`}
+          \${child.sparkline && child.sparkline.length > 1 && html\`
+            <div style="margin-top: 0.5rem;">
+              <\${Sparkline} data=\${child.sparkline} width=\${120} height=\${24} />
+            </div>
+          \`}
+          \${child.activeSessions != null && html\`
+            <div style="font-size: 0.7rem; color: var(--dim); margin-top: 0.375rem;">\${child.activeSessions} active sessions</div>
+          \`}
+          <div style="font-size: 0.65rem; color: var(--dim); margin-top: 0.25rem;">Port \${child.port}</div>
+        </div>
+      \`
+    }
+
+    function DeltaBadge({ delta }) {
+      if (delta == null || delta === 0) {
+        return html\`<span class="delta-neutral">—</span>\`
+      }
+      const isUp = delta > 0
+      const cls = isUp ? 'delta-up' : 'delta-down'
+      const arrow = isUp ? '▲' : '▼'
+      return html\`<span class=\${cls}>\${arrow} \${Math.abs(delta).toFixed(3)}</span>\`
+    }
+
+    function CostBar({ prompt, completion }) {
+      const total = (prompt || 0) + (completion || 0)
+      if (total === 0) return html\`<div class="cost-bar"><div class="cost-bar-empty">—</div></div>\`
+      const pPct = Math.round((prompt / total) * 100)
+      const cPct = 100 - pPct
+      return html\`
+        <div class="cost-bar">
+          <div class="cost-bar-prompt" style=\${'width:' + pPct + '%'} title=\${'Prompt: ' + prompt.toLocaleString()}></div>
+          <div class="cost-bar-completion" style=\${'width:' + cPct + '%'} title=\${'Completion: ' + completion.toLocaleString()}></div>
+        </div>
+      \`
+    }
+
+    function UtilBar({ value, max, label }) {
+      const pct = max > 0 ? Math.min(100, Math.round((value / max) * 100)) : 0
+      const cls = pct < 60 ? 'util-bar-green' : pct < 85 ? 'util-bar-yellow' : 'util-bar-red'
+      return html\`
+        <div style="display: flex; align-items: center; gap: 0.5rem;">
+          <div class="util-bar" style="flex: 1;">
+            <div class=\${'util-bar-fill ' + cls} style=\${'width:' + pct + '%'}></div>
+          </div>
+          <span style="font-size: 0.65rem; color: var(--muted-foreground); font-weight: 600; min-width: 28px;">\${pct}%</span>
+        </div>
+      \`
+    }
+
+    function SuccessRateBar({ rate }) {
+      const pct = Math.round((rate || 0) * 100)
+      const color = pct >= 95 ? 'var(--success)' : pct >= 80 ? 'var(--warning)' : 'var(--error)'
+      return html\`
+        <div style="display: flex; align-items: center; gap: 0.375rem;">
+          <div class="success-bar">
+            <div class="success-bar-fill" style=\${'width:' + pct + '%; background:' + color}></div>
+          </div>
+          <span style="font-size: 0.65rem; color: var(--muted-foreground); font-weight: 600; min-width: 28px;">\${pct}%</span>
+        </div>
+      \`
+    }
+
+    function UtilizationRing({ value, max, label }) {
+      const pct = max > 0 ? Math.min(1, value / max) : 0
+      const r = 30
+      const circumference = 2 * Math.PI * r
+      const offset = circumference * (1 - pct)
+      const color = pct < 0.6 ? 'var(--success)' : pct < 0.85 ? 'var(--warning)' : 'var(--error)'
+      return html\`
+        <div class="util-ring">
+          <svg width="76" height="76" viewBox="0 0 76 76">
+            <circle cx="38" cy="38" r=\${r} fill="none" stroke="var(--border)" stroke-width="6" />
+            <circle cx="38" cy="38" r=\${r} fill="none" stroke=\${color} stroke-width="6"
+              stroke-dasharray=\${circumference} stroke-dashoffset=\${offset}
+              stroke-linecap="round" transform="rotate(-90 38 38)" />
+            <text x="38" y="35" text-anchor="middle" fill="var(--foreground)" font-size="14" font-weight="700">\${Math.round(pct * 100)}%</text>
+            \${label && html\`<text x="38" y="50" text-anchor="middle" fill="var(--dim)" font-size="9">\${label}</text>\`}
+          </svg>
+        </div>
+      \`
+    }
+
+    function ActiveAgentCard({ agent }) {
+      const a = agent
+      const isLive = a.status === 'active'
+      const duration = a.startedAt ? Math.round((Date.now() - new Date(a.startedAt).getTime()) / 1000) : null
+      const durationStr = duration !== null
+        ? duration < 60 ? duration + 's'
+        : duration < 3600 ? Math.round(duration / 60) + 'm'
+        : Math.round(duration / 3600) + 'h'
+        : ''
+
+      function feedColor(type) {
+        if (!type) return 'feed-line-dim'
+        if (type.includes('error') || type.includes('failed')) return 'feed-line-error'
+        if (type.includes('warn')) return 'feed-line-warn'
+        if (type.includes('health') || type.includes('analysis') || type.includes('info')) return 'feed-line-info'
+        if (type.includes('completed') || type.includes('complete') || type.includes('success')) return 'feed-line-success'
+        return 'feed-line-dim'
+      }
+
+      return html\`
+        <div class=\${'active-agent-card' + (isLive ? ' active-agent-card-live' : '')}>
+          <div class="active-agent-header">
+            <div style="display: flex; align-items: center; gap: 0.5rem;">
+              \${isLive ? html\`
+                <span class="pulse-dot">
+                  <span class="pulse-dot-ping" style="background: var(--success);"></span>
+                  <span class="pulse-dot-core" style="background: var(--success);"></span>
+                </span>
+              \` : html\`
+                <span class="agent-dot agent-dot-idle"></span>
+              \`}
+              <span style="font-weight: 700; font-size: 0.9rem;">\${a.name}</span>
+              \${a.model && html\`<span class="model-badge">\${a.model}</span>\`}
+            </div>
+            <span style="font-size: 0.75rem; color: var(--dim);">\${durationStr}</span>
+          </div>
+          \${a.currentTask && html\`
+            <div class="active-agent-task">\${a.currentTask}</div>
+          \`}
+          \${a.role && html\`<div style="font-size: 0.7rem; color: var(--dim); margin-bottom: 0.5rem;">\${a.role}</div>\`}
+          \${a.recentEvents && a.recentEvents.length > 0 && html\`
+            <div class="run-feed">
+              \${a.recentEvents.slice(0, 5).map((e, i) => html\`
+                <div key=\${i} class="run-feed-line">
+                  <span class="run-feed-seq">\${String(i + 1).padStart(2, '0')}</span>
+                  <span class=\${'run-feed-type ' + feedColor(e.type)}>\${(e.type || '').split(':').pop()}</span>
+                  <span class="run-feed-data">\${e.data ? (typeof e.data === 'object' ? (e.data.message || e.data.task || JSON.stringify(e.data).slice(0, 60)) : String(e.data)) : ''}</span>
+                </div>
+              \`)}
+            </div>
+          \`}
+        </div>
+      \`
+    }
+
+    function AgentCard({ agent }) {
+      const a = agent
+      const age = a.lastSeen ? Math.round((Date.now() - new Date(a.lastSeen).getTime()) / 1000) : null
+      const ageStr = age !== null
+        ? age < 60 ? age + 's ago'
+        : age < 3600 ? Math.round(age / 60) + 'm ago'
+        : Math.round(age / 3600) + 'h ago'
+        : ''
+
+      return html\`
+        <div style="display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--border);">
+          <div style="display: flex; align-items: center; gap: 0.625rem;">
+            <span class=\${'agent-dot agent-dot-' + a.status}></span>
+            <div>
+              <div style="font-size: 0.85rem; font-weight: 600;">\${a.name}</div>
+              \${a.role && html\`<div style="font-size: 0.7rem; color: var(--dim);">\${a.role}</div>\`}
+            </div>
+          </div>
+          <div style="display: flex; align-items: center; gap: 0.5rem; text-align: right;">
+            \${a.model && html\`<span class="model-badge">\${a.model}</span>\`}
+            \${a.runtime && a.runtime !== 'local' && html\`<span class="runtime-badge">\${a.runtime}</span>\`}
+            <span style="font-size: 0.65rem; color: var(--dim); min-width: 50px;">\${ageStr}</span>
+          </div>
+        </div>
+      \`
+    }
+
+    function ModeBadge({ mode }) {
+      const cls = 'mode-badge mode-' + mode
+      const label = mode === 'portfolio' ? 'PORTFOLIO' : mode === 'gtm' ? 'GTM' : mode === 'service' ? 'SERVICE' : 'STANDALONE'
+      return html\`<span class=\${cls}>\${label}</span>\`
+    }
   `;
 }
 //# sourceMappingURL=components.js.map

package/dist/dashboard/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/dashboard/components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,UAAU,eAAe;IAC7B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0JN,CAAA;AACH,CAAC"}
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../../src/dashboard/components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,UAAU,eAAe;IAC7B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsjBN,CAAA;AACH,CAAC"}

package/dist/dashboard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/dashboard/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,IAAI,MAAM,MAAM,CAAA;AAK5B,wBAAgB,qBAAqB,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAiG/E;AAWD,wBAAgB,qBAAqB,CACnC,GAAG,EAAE,IAAI,CAAC,eAAe,EACzB,GAAG,EAAE,IAAI,CAAC,cAAc,EACxB,WAAW,EAAE,MAAM,EACnB,IAAI,EAAE,MAAM,GACX,OAAO,CAiBT"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/dashboard/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,IAAI,MAAM,MAAM,CAAA;AAK5B,wBAAgB,qBAAqB,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CA4H/E;AAWD,wBAAgB,qBAAqB,CACnC,GAAG,EAAE,IAAI,CAAC,eAAe,EACzB,GAAG,EAAE,IAAI,CAAC,cAAc,EACxB,WAAW,EAAE,MAAM,EACnB,IAAI,EAAE,MAAM,GACX,OAAO,CAiBT"}

package/dist/dashboard/index.js

@@ -63,7 +63,7 @@ export function generateDashboardHTML(projectName, port) {
       }
       const res = await fetch(path, { ...opts, headers })
       if (res.status === 401) {
-        document.getElementById('app').innerHTML = '<div style="padding: 3rem; text-align: center; color: var(--error);"><h2>Unauthorized</h2><p style="color: var(--text-soft); margin-top: 0.5rem;">Token expired or invalid. Run: jfl context-hub dashboard</p></div>'
+        document.getElementById('app').innerHTML = '<div style="padding: 3rem; text-align: center; color: var(--error);"><h2>Unauthorized</h2><p style="color: var(--muted-foreground); margin-top: 0.5rem;">Token expired or invalid. Run: jfl context-hub dashboard</p></div>'
         throw new Error('Unauthorized')
       }
       return res.json()
@@ -77,16 +77,42 @@ export function generateDashboardHTML(projectName, port) {
 
     // App
     function App() {
-      const [page, setPage] = useState('overview')
+      const { mode, config, children, loading: modeLoading } = useWorkspaceMode()
+      const defaultPage = mode === 'portfolio' ? 'portfolio' : mode === 'service' ? 'service' : 'overview'
+      const [page, setPage] = useState(defaultPage)
 
-      const pageComponent = {
+      // Update default page when mode loads
+      useEffect(() => {
+        if (!modeLoading) {
+          const dp = mode === 'portfolio' ? 'portfolio' : mode === 'service' ? 'service' : 'overview'
+          setPage(prev => {
+            // Only update if still on the initial 'overview' default
+            if (prev === 'overview' && dp !== 'overview') return dp
+            return prev
+          })
+        }
+      }, [mode, modeLoading])
+
+      const pageMap = {
         overview: OverviewPage,
         journal: JournalPage,
         agents: AgentsPage,
         events: EventsPage,
         sessions: SessionsPage,
         projects: ProjectsPage,
-      }[page] || OverviewPage
+        portfolio: PortfolioOverviewPage,
+        evals: EvalsPage,
+        scope: ScopePage,
+        service: ServiceOverviewPage,
+        costs: CostsPage,
+        flows: FlowsPage,
+      }
+
+      const pageComponent = pageMap[page] || OverviewPage
+
+      if (modeLoading) {
+        return html\`<div class="loading" style="width: 100%; height: 100vh;">Loading dashboard</div>\`
+      }
 
       return html\`
         <\${Nav}
@@ -94,9 +120,10 @@ export function generateDashboardHTML(projectName, port) {
           setPage=\${setPage}
           projectName="${escapeHtml(projectName)}"
           port=\${${port}}
+          mode=\${mode}
         />
         <div class="main-content">
-          <\${pageComponent} />
+          <\${pageComponent} mode=\${mode} config=\${config} children=\${children} />
         </div>
       \`
     }

package/dist/dashboard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/dashboard/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAEvC,MAAM,UAAU,qBAAqB,CAAC,WAAmB,EAAE,IAAY;IACrE,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAA;IACnC,MAAM,UAAU,GAAG,eAAe,EAAE,CAAA;IACpC,MAAM,KAAK,GAAG,UAAU,EAAE,CAAA;IAE1B,OAAO;;;;;WAKE,UAAU,CAAC,WAAW,CAAC;;;;;;;;;;;WAWvB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAyCX,UAAU;;;MAGV,KAAK;;;;;;;;;;;;;;;;;;;yBAmBc,UAAU,CAAC,WAAW,CAAC;oBAC5B,IAAI;;;;;;;;;;;QAWhB,CAAA;AACR,CAAC;AAED,SAAS,UAAU,CAAC,GAAW;IAC7B,OAAO,GAAG;SACP,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;SACtB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC;SACvB,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;AAC3B,CAAC;AAED,MAAM,UAAU,qBAAqB,CACnC,GAAyB,EACzB,GAAwB,EACxB,WAAmB,EACnB,IAAY;IAEZ,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,GAAG,EAAE,oBAAoB,IAAI,EAAE,CAAC,CAAA;IAE/D,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE,CAAC;QAC3C,OAAO,KAAK,CAAA;IACd,CAAC;IAED,qCAAqC;IACrC,MAAM,WAAW,GAAG,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,aAAa,CAAA;IAEjE,MAAM,IAAI,GAAG,qBAAqB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAA;IACrD,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,cAAc,EAAE,0BAA0B;QAC1C,eAAe,EAAE,UAAU;KAC5B,CAAC,CAAA;IACF,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;IACb,OAAO,IAAI,CAAA;AACb,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/dashboard/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAEvC,MAAM,UAAU,qBAAqB,CAAC,WAAmB,EAAE,IAAY;IACrE,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAA;IACnC,MAAM,UAAU,GAAG,eAAe,EAAE,CAAA;IACpC,MAAM,KAAK,GAAG,UAAU,EAAE,CAAA;IAE1B,OAAO;;;;;WAKE,UAAU,CAAC,WAAW,CAAC;;;;;;;;;;;WAWvB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAyCX,UAAU;;;MAGV,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBA6Cc,UAAU,CAAC,WAAW,CAAC;oBAC5B,IAAI;;;;;;;;;;;;QAYhB,CAAA;AACR,CAAC;AAED,SAAS,UAAU,CAAC,GAAW;IAC7B,OAAO,GAAG;SACP,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;SACtB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC;SACvB,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;AAC3B,CAAC;AAED,MAAM,UAAU,qBAAqB,CACnC,GAAyB,EACzB,GAAwB,EACxB,WAAmB,EACnB,IAAY;IAEZ,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,GAAG,EAAE,oBAAoB,IAAI,EAAE,CAAC,CAAA;IAE/D,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE,CAAC;QAC3C,OAAO,KAAK,CAAA;IACd,CAAC;IAED,qCAAqC;IACrC,MAAM,WAAW,GAAG,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,aAAa,CAAA;IAEjE,MAAM,IAAI,GAAG,qBAAqB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAA;IACrD,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,cAAc,EAAE,0BAA0B;QAC1C,eAAe,EAAE,UAAU;KAC5B,CAAC,CAAA;IACF,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;IACb,OAAO,IAAI,CAAA;AACb,CAAC"}

package/dist/dashboard/pages.d.ts

@@ -1,7 +1,7 @@
 /**
  * Dashboard page components
  *
- * @purpose Command center pages: journal-first overview, events, agents, projects, sessions, journal
+ * @purpose Command center pages: mode-aware overview, evals, portfolio, scope, service, events, agents, projects, sessions, journal
  */
 export declare function getPagesJS(): string;
 //# sourceMappingURL=pages.d.ts.map

package/dist/dashboard/pages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pages.d.ts","sourceRoot":"","sources":["../../src/dashboard/pages.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wBAAgB,UAAU,IAAI,MAAM,CA+tBnC"}
+{"version":3,"file":"pages.d.ts","sourceRoot":"","sources":["../../src/dashboard/pages.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wBAAgB,UAAU,IAAI,MAAM,CAqiDnC"}