claude-code-templates
Version:
Component templates and tracking system for Claude Code
10 lines (9 loc) • 26.5 kB
JavaScript
import{r as h}from"./index.DBy5LfQW.js";const z="modulepreload",O=function(a){return"/"+a},D={},C=function(t,s,n){let o=Promise.resolve();if(s&&s.length>0){let i=function(u){return Promise.all(u.map(f=>Promise.resolve(f).then(x=>({status:"fulfilled",value:x}),x=>({status:"rejected",reason:x}))))};document.getElementsByTagName("link");const d=document.querySelector("meta[property=csp-nonce]"),c=d?.nonce||d?.getAttribute("nonce");o=i(s.map(u=>{if(u=O(u),u in D)return;D[u]=!0;const f=u.endsWith(".css"),x=f?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${u}"]${x}`))return;const v=document.createElement("link");if(v.rel=f?"stylesheet":z,f||(v.as="script"),v.crossOrigin="",v.href=u,c&&v.setAttribute("nonce",c),document.head.appendChild(v),f)return new Promise((g,b)=>{v.addEventListener("load",g),v.addEventListener("error",()=>b(new Error(`Unable to preload CSS for ${u}`)))})}))}function r(i){const d=new Event("vite:preloadError",{cancelable:!0});if(d.payload=i,window.dispatchEvent(d),!d.defaultPrevented)throw i}return o.then(i=>{for(const d of i||[])d.status==="rejected"&&r(d.reason);return t().catch(r)})};var A={exports:{}},S={};/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/var E;function M(){if(E)return S;E=1;var a=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function s(n,o,r){var i=null;if(r!==void 0&&(i=""+r),o.key!==void 0&&(i=""+o.key),"key"in o){r={};for(var d in o)d!=="key"&&(r[d]=o[d])}else r=o;return o=r.ref,{$$typeof:a,type:n,key:i,ref:o!==void 0?o:null,props:r}}return S.Fragment=t,S.jsx=s,S.jsxs=s,S}var I;function P(){return I||(I=1,A.exports=M()),A.exports}var e=P();class U{cache=new Map;DEFAULT_TTL=3e4;async request(t,s=this.DEFAULT_TTL){const n=performance.now(),o=this.cache.get(t);if(o&&n-o.ts<s)return o.data;const r=await fetch(t);if(!r.ok)throw new Error(`API ${t} returned ${r.status}`);const i=await r.json();return this.cache.set(t,{data:i,ts:n}),i}async getData(){const t=await this.request("/api/data");if(t.detailedTokenUsage){const s=t.detailedTokenUsage;t.detailedTokenUsage={...s,totalInput:s.totalInput??s.inputTokens??0,totalOutput:s.totalOutput??s.outputTokens??0,totalCacheCreation:s.totalCacheCreation??s.cacheCreationTokens??0,totalCacheRead:s.totalCacheRead??s.cacheReadTokens??0}}return t.conversations&&(t.conversations=t.conversations.map(s=>({...s,inputTokens:s.inputTokens??s.tokenUsage?.inputTokens??0,outputTokens:s.outputTokens??s.tokenUsage?.outputTokens??0,cacheCreationTokens:s.cacheCreationTokens??s.tokenUsage?.cacheCreationTokens??0,cacheReadTokens:s.cacheReadTokens??s.tokenUsage?.cacheReadTokens??0}))),t}async getConversations(t=0,s=20){const n=`/api/conversations?page=${t}&limit=${s}`;return this.request(n,1e4)}async getAgents(t,s){const n=new URLSearchParams;t&&n.set("startDate",t),s&&n.set("endDate",s);const o=n.toString(),r=await this.request(`/api/agents${o?"?"+o:""}`,6e4);return{totalAgentUses:r.totalAgentUses??r.totalAgentInvocations??0,totalAgentTypes:r.totalAgentTypes??0,topAgents:(r.topAgents??r.agentStats??[]).map(i=>({name:i.name??i.type??"Unknown",count:i.count??i.totalInvocations??0})),agentTypes:r.agentTypes??Object.fromEntries((r.agentStats??[]).map(i=>[i.type??i.name,i.totalInvocations??i.count??0]))}}async getActivity(){const t=await this.request("/api/activity",3e5);return{heatmapData:(t.heatmapData??t.dailyActivity??[]).map(s=>({date:s.date,value:s.value??s.conversations??0})),dateRange:t.dateRange??(t.startDate?{start:t.startDate,end:t.endDate}:void 0)}}async getHealth(){return this.request("/api/system/health",1e4)}async forceRefresh(){this.cache.clear(),await fetch("/api/refresh").catch(()=>null)}invalidate(t){t?this.cache.delete(t):this.cache.clear()}}const j=new U;class ${ws=null;handlers=new Map;statusHandlers=new Set;reconnectAttempts=0;maxReconnectAttempts=5;baseDelay=1e3;heartbeatInterval=null;reconnectTimeout=null;status="disconnected";connect(){if(this.ws&&(this.ws.readyState===WebSocket.OPEN||this.ws.readyState===WebSocket.CONNECTING))return;this.setStatus("connecting");const s=`${location.protocol==="https:"?"wss:":"ws:"}//${location.host}/ws`;try{this.ws=new WebSocket(s)}catch{this.setStatus("error"),this.scheduleReconnect();return}this.ws.onopen=()=>{this.reconnectAttempts=0,this.setStatus("connected"),this.send({type:"subscribe",channels:["data_updates","conversation_updates","system_updates"]}),this.startHeartbeat()},this.ws.onmessage=n=>{this.handleMessage(n.data)},this.ws.onerror=()=>{this.setStatus("error")},this.ws.onclose=()=>{this.stopHeartbeat(),this.status!=="disconnected"&&(this.setStatus("disconnected"),this.scheduleReconnect())}}disconnect(){this.stopHeartbeat(),this.reconnectTimeout&&(clearTimeout(this.reconnectTimeout),this.reconnectTimeout=null),this.setStatus("disconnected"),this.ws?.close(),this.ws=null}on(t,s){return this.handlers.has(t)||this.handlers.set(t,new Set),this.handlers.get(t).add(s),()=>this.handlers.get(t)?.delete(s)}onStatus(t){return this.statusHandlers.add(t),t(this.status),()=>this.statusHandlers.delete(t)}send(t){this.ws?.readyState===WebSocket.OPEN&&this.ws.send(JSON.stringify(t))}setStatus(t){this.status=t,this.statusHandlers.forEach(s=>s(t))}handleMessage(t){try{const s=JSON.parse(t),n=s.channel||s.type||s.event;if(!n)return;const o=this.handlers.get(n);o&&o.forEach(r=>r(s.data??s))}catch{}}startHeartbeat(){this.stopHeartbeat(),this.heartbeatInterval=setInterval(()=>{this.send({type:"ping"})},3e4)}stopHeartbeat(){this.heartbeatInterval&&(clearInterval(this.heartbeatInterval),this.heartbeatInterval=null)}scheduleReconnect(){if(this.reconnectAttempts>=this.maxReconnectAttempts)return;const t=Math.min(this.baseDelay*Math.pow(2,this.reconnectAttempts),3e4);this.reconnectAttempts++,this.reconnectTimeout=setTimeout(()=>{this.reconnectTimeout=null,this.connect()},t)}}const T=new $;function k({label:a,value:t,sub:s,delta:n,icon:o,sparklineData:r,loading:i}){const d=h.useRef(null);if(h.useEffect(()=>{if(!r?.length||!d.current)return;let x;return C(async()=>{const{createChart:v,sparklineOption:g,getThemeColors:b}=await import("./charts.B1IMVBBI.js");return{createChart:v,sparklineOption:g,getThemeColors:b}},[]).then(({createChart:v,sparklineOption:g,getThemeColors:b})=>{d.current&&(x=v(d.current,g(r,b())))}),()=>x?.dispose()},[r]),i)return e.jsxs("div",{className:"card",style:{minHeight:110},children:[e.jsx("div",{className:"skeleton",style:{height:11,width:"55%",marginBottom:14}}),e.jsx("div",{className:"skeleton",style:{height:44,width:"70%",marginBottom:10}}),e.jsx("div",{className:"skeleton",style:{height:11,width:"40%"}})]});const c=n==null?"var(--ink-muted)":n>0?"var(--green)":"var(--red)",u=n!=null&&n>0?"+":"",f=typeof t=="number"?t.toLocaleString():t??"—";return e.jsxs("div",{className:"card",style:{display:"flex",flexDirection:"column",gap:8},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[e.jsxs("span",{className:"text-label",children:[o&&e.jsx("span",{style:{marginRight:5},children:o}),a]}),n!=null&&e.jsxs("span",{className:"font-mono",style:{fontSize:11,color:c,background:c+"18",padding:"1px 6px",borderRadius:"var(--radius-sm)"},children:[u,n.toFixed(1),"%"]})]}),e.jsx("div",{className:"text-kpi",children:f}),s&&e.jsx("div",{style:{fontSize:11,color:"var(--ink-muted)"},children:s}),r?.length?e.jsx("div",{ref:d,style:{height:40,marginTop:4}}):null]})}function R({items:a,maxItems:t=8,valueLabel:s="Count",loading:n}){if(n)return e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:10},children:[80,65,55,40,30].map((c,u)=>e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx("div",{className:"skeleton",style:{height:11,width:`${c*.4}%`}}),e.jsx("div",{className:"skeleton",style:{height:6,flex:1}}),e.jsx("div",{className:"skeleton",style:{height:11,width:36}})]},u))});if(!a?.length)return e.jsx("div",{style:{color:"var(--ink-subtle)",fontSize:13,padding:"12px 0"},children:"No data available"});const o=[...a].sort((c,u)=>u.value-c.value),r=o.slice(0,t),i=o.slice(t);i.length>0&&r.push({name:`Other (${i.length})`,value:i.reduce((c,u)=>c+u.value,0),color:"var(--ink-subtle)"});const d=Math.max(...r.map(c=>c.value),1);return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:0},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",marginBottom:10},children:[e.jsx("span",{className:"text-label",children:"Name"}),e.jsx("span",{className:"text-label",children:s})]}),r.map((c,u)=>e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10,padding:"5px 0",borderBottom:u<r.length-1?"1px solid var(--border-subtle)":"none"},children:[e.jsx("span",{style:{fontSize:12,color:"var(--ink)",minWidth:90,maxWidth:140,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},title:c.name,children:c.name}),e.jsx("div",{style:{flex:1,background:"var(--bg-secondary)",borderRadius:2,height:5,overflow:"hidden"},children:e.jsx("div",{style:{width:`${c.value/d*100}%`,height:"100%",background:c.color||"var(--accent)",borderRadius:2,transition:"width 0.4s ease"}})}),e.jsx("span",{className:"font-mono",style:{fontSize:11,color:"var(--ink-muted)",minWidth:44,textAlign:"right"},children:c.label??c.value.toLocaleString()})]},u))]})}function w({title:a,subtitle:t,height:s=220,loading:n,children:o,getOption:r,className:i="",style:d}){const c=h.useRef(null),u=h.useRef(null),f=h.useCallback(async()=>{if(!c.current||!r)return;const{createChart:x}=await C(async()=>{const{createChart:b}=await import("./charts.B1IMVBBI.js");return{createChart:b}},[]),v=r(),g=v&&typeof v.then=="function"?await v:v;!g||Object.keys(g).length===0||(u.current?u.current.setOption(g,{notMerge:!0}):c.current&&(u.current=x(c.current,g)))},[r]);return h.useEffect(()=>{if(!r||!c.current)return;const x=new IntersectionObserver(v=>{v[0].isIntersecting&&(x.disconnect(),f())},{threshold:.1});return x.observe(c.current),()=>{x.disconnect(),u.current?.dispose(),u.current=null}},[]),h.useEffect(()=>{u.current&&r&&f()},[f]),e.jsxs("div",{className:`card ${i}`,style:{display:"flex",flexDirection:"column",gap:14,...d},children:[e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:13,fontWeight:500,color:"var(--ink)"},children:a}),t&&e.jsx("div",{style:{fontSize:11,color:"var(--ink-muted)",marginTop:2},children:t})]}),n?e.jsx("div",{className:"skeleton",style:{height:s==="auto"?160:s,borderRadius:"var(--radius-sm)"}}):r?e.jsx("div",{ref:c,style:{height:s}}):o]})}function H({data:a,loading:t,year:s}){const n=h.useRef(null),o=h.useRef(null),r=s??new Date().getFullYear();return h.useEffect(()=>{if(t||!n.current)return;let i=!0;return C(async()=>{const{createChart:d,activityHeatmapOption:c,getThemeColors:u}=await import("./charts.B1IMVBBI.js");return{createChart:d,activityHeatmapOption:c,getThemeColors:u}},[]).then(({createChart:d,activityHeatmapOption:c,getThemeColors:u})=>{if(!i||!n.current)return;o.current?.dispose();const f=(a||[]).filter(v=>v.date.startsWith(String(r))),x=u();o.current=d(n.current,c(f,x,r))}),()=>{i=!1,o.current?.dispose(),o.current=null}},[a,t,r]),t?e.jsx("div",{className:"skeleton",style:{height:160,borderRadius:"var(--radius-sm)"}}):e.jsxs("div",{children:[e.jsx("div",{ref:n,style:{height:160,width:"100%"}}),e.jsxs("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:6,gap:4,alignItems:"center"},children:[e.jsx("span",{style:{fontSize:10,color:"var(--ink-subtle)"},children:"Less"}),[.1,.3,.5,.75,1].map((i,d)=>e.jsx("div",{style:{width:10,height:10,borderRadius:2,background:`rgba(249, 115, 22, ${i})`}},d)),e.jsx("span",{style:{fontSize:10,color:"var(--ink-subtle)"},children:"More"})]})]})}function _(a){const t=Math.floor(a/6e4);return t<60?`${t}m`:`${Math.floor(t/60)}h ${t%60}m`}function W({sessionData:a,loading:t}){const[,s]=h.useState(0);if(h.useEffect(()=>{const i=setInterval(()=>s(d=>d+1),6e4);return()=>clearInterval(i)},[]),t)return e.jsxs("div",{className:"card",style:{minHeight:110},children:[e.jsx("div",{className:"skeleton",style:{height:11,width:"40%",marginBottom:14}}),e.jsx("div",{className:"skeleton",style:{height:36,width:"60%",marginBottom:12}}),e.jsx("div",{className:"skeleton",style:{height:11,width:"55%"}})]});const n=a?.totalSessions??0,o=a?.avgSessionLength,r=(a?.sessions??[]).slice(0,3);return e.jsxs("div",{className:"card",style:{display:"flex",flexDirection:"column",gap:10},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[e.jsx("span",{className:"text-label",children:"⏱ Sessions"}),e.jsx("span",{className:"font-mono",style:{fontSize:20,fontWeight:600,color:"var(--ink)"},children:n.toLocaleString()})]}),o!=null&&e.jsxs("div",{style:{fontSize:12,color:"var(--ink-muted)"},children:["Avg duration: ",e.jsx("span",{className:"font-mono",style:{color:"var(--ink)"},children:_(o)})]}),r.length>0&&e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:6,borderTop:"1px solid var(--border)",paddingTop:10,marginTop:2},children:[e.jsx("span",{className:"text-label",style:{marginBottom:2},children:"Recent"}),r.map((i,d)=>e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",fontSize:11,gap:8},children:[e.jsx("span",{style:{color:"var(--ink-muted)"},children:new Date(i.startTime).toLocaleDateString(void 0,{month:"short",day:"numeric"})}),e.jsxs("span",{className:"font-mono",style:{color:"var(--ink)"},children:[i.messageCount," msgs · ",_(i.duration)]})]},d))]}),n===0&&e.jsx("div",{style:{fontSize:12,color:"var(--ink-subtle)"},children:"No session data yet"})]})}function B(){const[a,t]=h.useState("dark");h.useEffect(()=>{const n=localStorage.getItem("theme"),o=document.documentElement.getAttribute("data-theme");t(n||o||"dark")},[]);function s(){const n=a==="dark"?"light":"dark";t(n),document.documentElement.setAttribute("data-theme",n),localStorage.setItem("theme",n)}return e.jsxs("button",{onClick:s,title:`Switch to ${a==="dark"?"light":"dark"} mode`,style:{background:"none",border:"1px solid var(--border)",borderRadius:"var(--radius-sm)",cursor:"pointer",padding:"5px 10px",color:"var(--ink-muted)",fontSize:12,display:"flex",alignItems:"center",gap:6,transition:"border-color 0.15s, color 0.15s"},onMouseEnter:n=>n.currentTarget.style.borderColor="var(--accent)",onMouseLeave:n=>n.currentTarget.style.borderColor="var(--border)",children:[e.jsx("span",{children:a==="dark"?"☀️":"🌙"}),e.jsx("span",{children:a==="dark"?"Light":"Dark"})]})}const q=[{value:"7d",label:"7D"},{value:"30d",label:"30D"},{value:"90d",label:"90D"},{value:"all",label:"All"}];function V({value:a,onChange:t}){return e.jsx("div",{style:{display:"flex",gap:2,background:"var(--bg-secondary)",borderRadius:"var(--radius-sm)",padding:2,border:"1px solid var(--border)"},children:q.map(s=>e.jsx("button",{onClick:()=>t(s.value),style:{padding:"3px 10px",border:"none",borderRadius:"var(--radius-sm)",cursor:"pointer",fontSize:12,fontWeight:a===s.value?600:400,background:a===s.value?"var(--bg-card)":"transparent",color:a===s.value?"var(--ink)":"var(--ink-muted)",boxShadow:a===s.value?"var(--shadow-sm)":"none",transition:"all 0.12s ease"},children:s.label},s.value))})}const J=[{id:"dashboard",icon:"📊",label:"Dashboard"},{id:"agents",icon:"🤖",label:"Agents"}];function F({view:a,onNavigate:t}){return e.jsxs("aside",{style:{width:192,flexShrink:0,borderRight:"1px solid var(--border)",background:"var(--bg-secondary)",display:"flex",flexDirection:"column",minHeight:"100vh"},children:[e.jsxs("div",{style:{padding:"16px 16px 14px",display:"flex",alignItems:"center",gap:10,borderBottom:"1px solid var(--border)"},children:[e.jsx("span",{style:{fontSize:22},children:"🔮"}),e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:12,fontWeight:600,color:"var(--ink)",lineHeight:1.2},children:"Claude Code"}),e.jsx("div",{style:{fontSize:10,color:"var(--ink-muted)"},children:"Analytics"})]})]}),e.jsx("nav",{style:{padding:"8px 0"},children:J.map(s=>{const n=a===s.id;return e.jsxs("button",{onClick:()=>t(s.id),style:{display:"flex",alignItems:"center",gap:10,padding:"8px 16px",background:n?"var(--bg-card)":"transparent",border:"none",borderLeft:`2px solid ${n?"var(--accent)":"transparent"}`,cursor:"pointer",color:n?"var(--ink)":"var(--ink-muted)",fontSize:13,fontWeight:n?500:400,transition:"all 0.12s ease",width:"100%",textAlign:"left"},children:[e.jsx("span",{style:{fontSize:15},children:s.icon}),s.label]},s.id)})})]})}function Y({lastUpdate:a,wsStatus:t,onRefresh:s}){const n=t==="connected",o=n?"var(--green)":t==="connecting"?"var(--accent)":"var(--ink-subtle)";return e.jsxs("header",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"10px 24px",borderBottom:"1px solid var(--border)",background:"var(--bg-card)",position:"sticky",top:0,zIndex:20,minHeight:48},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10},children:[e.jsx("div",{style:{width:7,height:7,borderRadius:"50%",background:o,boxShadow:n?`0 0 6px ${o}`:"none",transition:"background 0.3s, box-shadow 0.3s"}}),e.jsx("span",{style:{fontSize:12,color:"var(--ink-muted)"},children:n?"Live":t==="connecting"?"Connecting…":"Polling"}),a&&e.jsxs("span",{style:{fontSize:11,color:"var(--ink-subtle)"},children:["· ",new Date(a).toLocaleTimeString(void 0,{hour:"2-digit",minute:"2-digit"})]})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx("button",{onClick:s,style:{background:"none",border:"1px solid var(--border)",borderRadius:"var(--radius-sm)",padding:"4px 12px",cursor:"pointer",color:"var(--ink-muted)",fontSize:12,transition:"border-color 0.12s"},onMouseEnter:r=>r.currentTarget.style.borderColor="var(--accent)",onMouseLeave:r=>r.currentTarget.style.borderColor="var(--border)",children:"↻ Refresh"}),e.jsx(B,{})]})]})}function G({data:a,agents:t,activity:s,loading:n,timeRange:o,onTimeRangeChange:r}){const i=a?.summary,d=a?.detailedTokenUsage,c=h.useMemo(()=>{const l=a?.conversations??[];if(o==="all")return l;const y=o==="7d"?7:o==="30d"?30:90,p=new Date;return p.setDate(p.getDate()-y),l.filter(m=>m.lastModified&&new Date(m.lastModified)>=p)},[a?.conversations,o]),u=h.useCallback(()=>{if(!c.length)return{};const l={};c.forEach(p=>{if(!p.lastModified)return;const m=p.lastModified.substring(0,10);l[m]||(l[m]={input:0,output:0,cache:0}),l[m].input+=p.inputTokens??0,l[m].output+=p.outputTokens??0,l[m].cache+=(p.cacheCreationTokens??0)+(p.cacheReadTokens??0)});const y=Object.entries(l).sort(([p],[m])=>p.localeCompare(m)).map(([p,m])=>({date:p,...m}));return C(async()=>{const{tokenTimelineOption:p,getThemeColors:m}=await import("./charts.B1IMVBBI.js");return{tokenTimelineOption:p,getThemeColors:m}},[]).then(({tokenTimelineOption:p,getThemeColors:m})=>p(y,m()))},[c]),f=h.useCallback(()=>d?C(async()=>{const{tokenDistributionOption:l,getThemeColors:y}=await import("./charts.B1IMVBBI.js");return{tokenDistributionOption:l,getThemeColors:y}},[]).then(({tokenDistributionOption:l,getThemeColors:y})=>l({input:d.totalInput??0,output:d.totalOutput??0,cacheCreation:d.totalCacheCreation??0,cacheRead:d.totalCacheRead??0},y())):{},[d]),x=h.useMemo(()=>(t?.topAgents??[]).map(l=>({name:l.name,value:l.count})),[t]),v=h.useMemo(()=>(a?.activeProjects??[]).slice(0,10).map(l=>({name:(l.name??l.path?.split("/").pop())||"Unknown",value:l.conversations??l.fileCount??1})),[a?.activeProjects]),g=l=>l!=null?l.toLocaleString():"—",b=h.useMemo(()=>c.reduce((l,y)=>l+(y.tokens??0),0),[c]);return e.jsxs("div",{style:{padding:24,overflowY:"auto",flex:1},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:20},children:[e.jsx("h1",{style:{fontSize:15,fontWeight:600,color:"var(--ink)"},children:"Dashboard"}),e.jsx(V,{value:o,onChange:r})]}),e.jsxs("div",{className:"bento-grid",children:[e.jsx("div",{className:"col-span-3",children:e.jsx(k,{label:"Total Tokens",icon:"⚡",value:g(b||i?.totalTokens),sub:`Conversations: ${g(c.length)}`,loading:n})}),e.jsx("div",{className:"col-span-3",children:e.jsx(k,{label:"Conversations",icon:"💬",value:g(c.length||i?.totalConversations),sub:`Active: ${g(i?.activeConversations)}`,loading:n})}),e.jsx("div",{className:"col-span-3",children:e.jsx(k,{label:"Sessions",icon:"🕐",value:g(a?.sessionData?.totalSessions),sub:`Projects: ${g(a?.activeProjects?.length)}`,loading:n})}),e.jsx("div",{className:"col-span-3",children:e.jsx(k,{label:"Agent Uses",icon:"🤖",value:g(t?.totalAgentUses),sub:`Types: ${Object.keys(t?.agentTypes??{}).length}`,loading:n})}),e.jsx("div",{className:"col-span-8",children:e.jsx(w,{title:"Token Usage Over Time",subtitle:"Input · Output · Cache — stacked",height:220,loading:n,getOption:u})}),e.jsx("div",{className:"col-span-4",children:e.jsx(W,{sessionData:a?.sessionData,loading:n})}),e.jsx("div",{className:"col-span-12",children:e.jsxs("div",{className:"card",children:[e.jsx("div",{style:{fontSize:13,fontWeight:500,marginBottom:14},children:"Activity Heatmap"}),e.jsx(H,{data:s,loading:n})]})}),e.jsx("div",{className:"col-span-6",children:e.jsx(w,{title:"Agent Usage",subtitle:"By invocations",loading:n,children:e.jsx(R,{items:x,maxItems:8,valueLabel:"Uses",loading:n})})}),e.jsx("div",{className:"col-span-6",children:e.jsx(w,{title:"Projects",subtitle:"By conversations",loading:n,children:e.jsx(R,{items:v,maxItems:8,valueLabel:"Convs",loading:n})})}),e.jsx("div",{className:"col-span-4",children:e.jsx(w,{title:"Token Distribution",subtitle:"Input · Output · Cache",height:200,loading:n,getOption:f})}),e.jsx("div",{className:"col-span-8",children:e.jsxs("div",{className:"card",style:{display:"flex",flexDirection:"column",gap:12},children:[e.jsx("div",{style:{fontSize:13,fontWeight:500},children:"Recent Conversations"}),n?e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[...Array(5)].map((l,y)=>e.jsx("div",{className:"skeleton",style:{height:32}},y))}):e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:0},children:[(a?.conversations??[]).slice(0,7).map((l,y,p)=>e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12,padding:"7px 0",borderBottom:y<p.length-1?"1px solid var(--border-subtle)":"none"},children:[e.jsx("div",{style:{width:7,height:7,borderRadius:"50%",background:l.status==="active"?"var(--green)":"var(--ink-subtle)",flexShrink:0}}),e.jsx("span",{style:{flex:1,fontSize:12,color:"var(--ink)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:l.projectName??l.id?.substring(0,20)+"…"??"Unknown"}),e.jsxs("span",{className:"font-mono",style:{fontSize:11,color:"var(--ink-muted)",flexShrink:0},children:[(l.tokens??0).toLocaleString()," tok"]}),e.jsx("span",{style:{fontSize:11,color:"var(--ink-subtle)",flexShrink:0},children:l.lastModified?new Date(l.lastModified).toLocaleDateString(void 0,{month:"short",day:"numeric"}):""})]},l.id??y)),!a?.conversations?.length&&e.jsx("div",{style:{color:"var(--ink-subtle)",fontSize:12,padding:"8px 0"},children:"No conversations found in ~/.claude"})]})]})})]})]})}function Q({agents:a,loading:t}){const s=h.useMemo(()=>(a?.topAgents??[]).map(o=>({name:o.name,value:o.count})),[a]),n=h.useMemo(()=>Object.entries(a?.agentTypes??{}).map(([o,r])=>({name:o,value:r})).sort((o,r)=>r.value-o.value),[a]);return e.jsxs("div",{style:{padding:24,overflowY:"auto",flex:1},children:[e.jsx("h1",{style:{fontSize:15,fontWeight:600,marginBottom:20},children:"Agent Analytics"}),e.jsxs("div",{className:"bento-grid",children:[e.jsx("div",{className:"col-span-4",children:e.jsx(k,{label:"Total Agent Uses",icon:"🤖",value:(a?.totalAgentUses??0).toLocaleString(),loading:t})}),e.jsx("div",{className:"col-span-4",children:e.jsx(k,{label:"Agent Types",icon:"🧩",value:Object.keys(a?.agentTypes??{}).length,sub:"distinct types used",loading:t})}),e.jsx("div",{className:"col-span-4",children:e.jsx(k,{label:"Top Agent",icon:"⭐",value:a?.topAgents?.[0]?.name??"—",sub:a?.topAgents?.[0]?`${a.topAgents[0].count} uses`:"",loading:t})}),e.jsx("div",{className:"col-span-6",children:e.jsx(w,{title:"Top Agents",subtitle:"By total invocations",loading:t,children:e.jsx(R,{items:s,maxItems:12,valueLabel:"Uses",loading:t})})}),e.jsx("div",{className:"col-span-6",children:e.jsx(w,{title:"By Agent Type",subtitle:"Distribution across types",loading:t,children:e.jsx(R,{items:n,maxItems:12,valueLabel:"Uses",loading:t})})})]})]})}function Z(){const[a,t]=h.useState(()=>typeof window<"u"&&window.location.hash.replace("#","")||"dashboard"),[s,n]=h.useState(null),[o,r]=h.useState(null),[i,d]=h.useState([]),[c,u]=h.useState(!0),[f,x]=h.useState("disconnected"),[v,g]=h.useState("30d"),b=h.useCallback(p=>{t(p),typeof window<"u"&&(window.location.hash="#"+p)},[]);h.useEffect(()=>{function p(){t(window.location.hash.replace("#","")||"dashboard")}return window.addEventListener("hashchange",p),()=>window.removeEventListener("hashchange",p)},[]);const l=h.useCallback(async()=>{try{u(!0);const[p,m,N]=await Promise.all([j.getData().catch(()=>null),j.getAgents().catch(()=>null),j.getActivity().catch(()=>null)]);p&&n(p),m&&r(m),N&&d(N.heatmapData??[])}finally{u(!1)}},[]);h.useEffect(()=>{l()},[l]),h.useEffect(()=>{T.connect();const p=T.onStatus(x),m=T.on("data_updates",()=>{j.invalidate(),l()}),N=T.on("conversation_updates",()=>{j.invalidate("/api/data"),l()}),L=setInterval(()=>{j.invalidate(),l()},f==="connected"?3e4:1e4);return()=>{p(),m(),N(),clearInterval(L),T.disconnect()}},[l,f]);const y=h.useCallback(()=>{j.invalidate(),l()},[l]);return e.jsxs("div",{style:{display:"flex",minHeight:"100vh",background:"var(--bg-primary)"},children:[e.jsx(F,{view:a,onNavigate:b}),e.jsxs("div",{style:{flex:1,display:"flex",flexDirection:"column",overflow:"hidden",minWidth:0},children:[e.jsx(Y,{lastUpdate:s?.timestamp,wsStatus:f,onRefresh:y}),a==="dashboard"&&e.jsx(G,{data:s,agents:o,activity:i,loading:c,timeRange:v,onTimeRangeChange:g}),a==="agents"&&e.jsx(Q,{agents:o,loading:c}),a!=="dashboard"&&a!=="agents"&&e.jsx("div",{style:{padding:24},children:e.jsxs("div",{style:{color:"var(--ink-muted)",fontSize:13},children:['View "',a,'" not found.'," ",e.jsx("button",{onClick:()=>b("dashboard"),style:{color:"var(--accent)",background:"none",border:"none",cursor:"pointer",fontSize:13,textDecoration:"underline"},children:"Back to Dashboard"})]})})]})]})}export{Z as default};