@cryptiklemur/lattice 1.23.1 → 1.23.3

package/client/src/components/analytics/AnalyticsView.tsx

@@ -33,7 +33,7 @@ function SectionHeader(props: { label: string }) {
   return (
     <div className="flex items-center gap-3 pt-4 pb-1">
       <div className="h-px flex-1 bg-base-content/10" />
-      <span className="text-[9px] font-mono font-bold uppercase tracking-[0.15em] text-base-content/40">{props.label}</span>
+      <span className="text-[10px] font-mono font-bold uppercase tracking-[0.15em] text-base-content/40">{props.label}</span>
       <div className="h-px flex-1 bg-base-content/10" />
     </div>
   );
@@ -69,7 +69,7 @@ export function AnalyticsView() {
     <div className="flex flex-col h-full overflow-hidden bg-base-100 bg-lattice-grid">
       <div className="flex items-center justify-between px-2 sm:px-4 min-h-10 sm:min-h-12 border-b border-base-300 flex-shrink-0">
         <div className="flex items-center gap-2.5">
-          <h1 className="text-sm font-mono font-semibold text-base-content">Analytics</h1>
+          <h1 className="text-[17px] font-mono font-bold text-base-content">Analytics</h1>
           {analytics.loading && analytics.data && (
             <span className="w-3.5 h-3.5 border-2 border-base-content/15 border-t-primary/60 rounded-full animate-spin" />
           )}
@@ -77,7 +77,7 @@ export function AnalyticsView() {
         <PeriodSelector value={analytics.period} onChange={analytics.setPeriod} />
       </div>
 
-      <div className={"flex-1 overflow-y-auto px-6 py-4 transition-opacity duration-200 " + (analytics.loading && analytics.data ? "opacity-50" : "opacity-100")}>
+      <div className={"flex-1 overflow-y-auto px-3 py-3 sm:px-6 sm:py-4 transition-opacity duration-200 " + (analytics.loading && analytics.data ? "opacity-50" : "opacity-100")}>
         {analytics.loading && !analytics.data && (
           <div className="flex flex-col gap-4 max-w-[1200px] mx-auto">
             <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">

package/client/src/components/analytics/ChartCard.tsx

@@ -69,8 +69,8 @@ export function ChartCard(props: ChartCardProps) {
 
   const cardContent = (
     <>
-      <div className="flex items-center justify-between mb-4">
-        <span className="text-[10px] font-mono font-bold uppercase tracking-widest text-base-content/35">
+      <div className="flex items-center justify-between mb-3 sm:mb-4">
+        <span className="text-[11px] font-mono font-bold uppercase tracking-wider text-base-content/40">
           {props.title}
         </span>
         <div className="flex items-center gap-2">
@@ -121,7 +121,7 @@ export function ChartCard(props: ChartCardProps) {
         <div
           ref={cardRef}
           aria-label={props.title}
-          className={"rounded-xl border border-base-content/8 bg-base-300/50 p-4 invisible " + (props.className || "")}
+          className={"rounded-xl border border-base-content/8 bg-base-300/50 p-3 sm:p-4 invisible " + (props.className || "")}
         >
           {cardContent}
         </div>
@@ -180,7 +180,7 @@ export function ChartCard(props: ChartCardProps) {
     <div
       ref={cardRef}
       aria-label={props.title}
-      className={"group rounded-xl border border-base-content/8 bg-base-300/50 p-4 cursor-pointer hover:border-base-content/12 transition-all duration-200 " + (props.className || "")}
+      className={"group rounded-xl border border-base-content/8 bg-base-300/50 p-3 sm:p-4 cursor-pointer hover:border-base-content/12 transition-all duration-200 " + (props.className || "")}
     >
       {cardContent}
     </div>

package/client/src/components/analytics/PeriodSelector.tsx

@@ -1,6 +1,6 @@
 type Period = "24h" | "7d" | "30d" | "90d" | "all";
 
-var PERIODS: Array<{ value: Period; label: string }> = [
+const PERIODS: Array<{ value: Period; label: string }> = [
   { value: "24h", label: "24h" },
   { value: "7d", label: "7d" },
   { value: "30d", label: "30d" },
@@ -17,7 +17,7 @@ export function PeriodSelector({ value, onChange }: PeriodSelectorProps) {
   return (
     <div role="radiogroup" aria-label="Time period" className="flex items-center gap-1">
       {PERIODS.map(function (period) {
-        var isActive = period.value === value;
+        const isActive = period.value === value;
         return (
           <button
             key={period.value}
@@ -25,7 +25,7 @@ export function PeriodSelector({ value, onChange }: PeriodSelectorProps) {
             aria-checked={isActive}
             onClick={function () { onChange(period.value); }}
             className={[
-              "px-2.5 py-1 rounded-md border text-[10px] font-mono font-bold uppercase tracking-widest transition-colors",
+              "min-h-[44px] min-w-[36px] px-3 py-2.5 sm:px-2.5 sm:py-1 rounded-md border text-[10px] font-mono font-bold uppercase tracking-widest transition-colors",
               isActive
                 ? "bg-primary/15 text-primary border-primary/30"
                 : "text-base-content/35 border-base-content/8 hover:text-base-content/60 hover:border-base-content/20",

package/client/src/components/analytics/QuickStats.tsx

@@ -62,45 +62,45 @@ export function QuickStats() {
     <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
       <div className="bg-base-content/[0.03] border border-base-content/8 rounded-xl p-3.5">
         <div className="flex items-center justify-between mb-1">
-          <span className="text-[10px] font-mono font-semibold uppercase tracking-wider text-base-content/35">Cost</span>
+          <span className="text-[10px] font-mono font-bold uppercase tracking-wider text-base-content/40">Cost</span>
           {costSparkData.length > 1 && (
             <div role="img" aria-label={"Cost trend: " + (costSparkData[costSparkData.length - 1].v > costSparkData[0].v ? "increasing" : costSparkData[costSparkData.length - 1].v < costSparkData[0].v ? "decreasing" : "stable")}>
               <Sparkline data={costSparkData} stroke={colors.primary} />
             </div>
           )}
         </div>
-        <div className="text-[22px] font-mono text-base-content/85">${d.totalCost.toFixed(2)}</div>
+        <div className="text-[20px] font-mono text-base-content">${d.totalCost.toFixed(2)}</div>
       </div>
 
       <div className="bg-base-content/[0.03] border border-base-content/8 rounded-xl p-3.5">
         <div className="flex items-center justify-between mb-1">
-          <span className="text-[10px] font-mono font-semibold uppercase tracking-wider text-base-content/35">Sessions</span>
+          <span className="text-[10px] font-mono font-bold uppercase tracking-wider text-base-content/40">Sessions</span>
           {sessionsSparkData.length > 1 && (
             <div role="img" aria-label={"Sessions trend: " + (sessionsSparkData[sessionsSparkData.length - 1].v > sessionsSparkData[0].v ? "increasing" : sessionsSparkData[sessionsSparkData.length - 1].v < sessionsSparkData[0].v ? "decreasing" : "stable")}>
               <Sparkline data={sessionsSparkData} stroke={colors.success} />
             </div>
           )}
         </div>
-        <div className="text-[22px] font-mono text-base-content/85">{d.totalSessions}</div>
+        <div className="text-[20px] font-mono text-base-content">{d.totalSessions}</div>
       </div>
 
       <div className="bg-base-content/[0.03] border border-base-content/8 rounded-xl p-3.5">
         <div className="flex items-center justify-between mb-1">
-          <span className="text-[10px] font-mono font-semibold uppercase tracking-wider text-base-content/35">Tokens</span>
+          <span className="text-[10px] font-mono font-bold uppercase tracking-wider text-base-content/40">Tokens</span>
           {tokensSparkData.length > 1 && (
             <div role="img" aria-label={"Tokens trend: " + (tokensSparkData[tokensSparkData.length - 1].v > tokensSparkData[0].v ? "increasing" : tokensSparkData[tokensSparkData.length - 1].v < tokensSparkData[0].v ? "decreasing" : "stable")}>
               <Sparkline data={tokensSparkData} stroke={colors.warning} />
             </div>
           )}
         </div>
-        <div className="text-[22px] font-mono text-base-content/85">{formatTokens(totalTokens)}</div>
+        <div className="text-[20px] font-mono text-base-content">{formatTokens(totalTokens)}</div>
       </div>
 
       <div className="bg-base-content/[0.03] border border-base-content/8 rounded-xl p-3.5">
         <div className="mb-1">
-          <span className="text-[10px] font-mono font-semibold uppercase tracking-wider text-base-content/35">Cache Hit</span>
+          <span className="text-[10px] font-mono font-bold uppercase tracking-wider text-base-content/40">Cache Hit</span>
         </div>
-        <div className="text-[22px] font-mono text-base-content/85 mb-2">{cacheHitPct}%</div>
+        <div className="text-[20px] font-mono text-base-content mb-2">{cacheHitPct}%</div>
         <div
           className="w-full h-1 rounded-full bg-base-content/10 overflow-hidden"
           role="progressbar"

package/client/src/components/analytics/charts/CacheEfficiencyChart.tsx

@@ -30,15 +30,15 @@ function CustomTooltip({ active, payload, label }: { active?: boolean; payload?:
 }
 
 export function CacheEfficiencyChart({ data }: CacheEfficiencyChartProps) {
-  var fullscreenHeight = useChartFullscreen();
-  var colors = getChartColors();
-  var displayData = data.map(function (d) {
+  const fullscreenHeight = useChartFullscreen();
+  const colors = getChartColors();
+  const displayData = data.map(function (d) {
     return { date: d.date, rate: d.rate * 100 };
   });
 
   return (
     <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
-      <AreaChart data={displayData} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+      <AreaChart data={displayData} margin={{ top: 4, right: 4, left: -15, bottom: 0 }}>
         <defs>
           <linearGradient id="cacheEffGrad" x1="0" y1="0" x2="0" y2="1">
             <stop offset="5%" stopColor={colors.success} stopOpacity={0.8} />

package/client/src/components/analytics/charts/CostAreaChart.tsx

@@ -42,11 +42,11 @@ function CustomTooltip({ active, payload, label }: { active?: boolean; payload?:
 }
 
 export function CostAreaChart({ data }: CostAreaChartProps) {
-  var fullscreenHeight = useChartFullscreen();
-  var colors = getChartColors();
+  const fullscreenHeight = useChartFullscreen();
+  const colors = getChartColors();
   return (
     <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
-      <AreaChart data={data} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+      <AreaChart data={data} margin={{ top: 4, right: 4, left: -15, bottom: 0 }}>
         <defs>
           <linearGradient id="opusGrad" x1="0" y1="0" x2="0" y2="1">
             <stop offset="5%" stopColor={colors.secondary} stopOpacity={0.8} />

package/client/src/components/analytics/charts/CostDistributionChart.tsx

@@ -30,11 +30,11 @@ function CustomTooltip({ active, payload, label }: { active?: boolean; payload?:
 }
 
 export function CostDistributionChart({ data }: CostDistributionChartProps) {
-  var fullscreenHeight = useChartFullscreen();
-  var colors = getChartColors();
+  const fullscreenHeight = useChartFullscreen();
+  const colors = getChartColors();
   return (
     <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
-      <AreaChart data={data} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+      <AreaChart data={data} margin={{ top: 4, right: 4, left: -15, bottom: 0 }}>
         <defs>
           <linearGradient id="distGrad" x1="0" y1="0" x2="0" y2="1">
             <stop offset="5%" stopColor={colors.primary} stopOpacity={0.8} />

package/client/src/components/analytics/charts/CumulativeCostChart.tsx

@@ -30,11 +30,11 @@ function CustomTooltip({ active, payload, label }: { active?: boolean; payload?:
 }
 
 export function CumulativeCostChart({ data }: CumulativeCostChartProps) {
-  var fullscreenHeight = useChartFullscreen();
-  var colors = getChartColors();
+  const fullscreenHeight = useChartFullscreen();
+  const colors = getChartColors();
   return (
     <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
-      <AreaChart data={data} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+      <AreaChart data={data} margin={{ top: 4, right: 4, left: -15, bottom: 0 }}>
         <defs>
           <linearGradient id="cumulativeGrad" x1="0" y1="0" x2="0" y2="1">
             <stop offset="5%" stopColor={colors.primary} stopOpacity={0.7} />

package/client/src/components/analytics/charts/DailySummaryCards.tsx

@@ -14,14 +14,14 @@ interface DailySummaryCardsProps {
 }
 
 function formatCardDate(dateStr: string): string {
-  var d = new Date(dateStr + "T00:00:00");
-  var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  const d = new Date(dateStr + "T00:00:00");
+  const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
   return days[d.getDay()] + " " + (d.getMonth() + 1) + "/" + d.getDate();
 }
 
 export function DailySummaryCards({ data }: DailySummaryCardsProps) {
-  var colors = getChartColors();
-  var MODEL_COLORS: Record<string, string> = {
+  const colors = getChartColors();
+  const MODEL_COLORS: Record<string, string> = {
     opus: colors.model.opus,
     sonnet: colors.model.sonnet,
     haiku: colors.model.haiku,
@@ -35,23 +35,23 @@ export function DailySummaryCards({ data }: DailySummaryCardsProps) {
     );
   }
 
-  var reversed = data.slice().reverse();
+  const reversed = data.slice().reverse();
 
   return (
     <div className="flex gap-3 overflow-x-auto snap-x snap-mandatory pb-2 scrollbar-thin">
       {reversed.map(function (d) {
-        var mixEntries = Object.entries(d.modelMix);
+        const mixEntries = Object.entries(d.modelMix);
 
         return (
           <div
             key={d.date}
             className="flex-shrink-0 snap-start rounded-lg bg-base-300 border border-base-content/5 px-3 py-2.5 w-[140px]"
           >
-            <p className="text-[11px] font-mono font-bold text-base-content/60 mb-1.5">
+            <p className="text-[10px] font-mono font-bold uppercase tracking-wider text-base-content/40 mb-1.5">
               {formatCardDate(d.date)}
             </p>
 
-            <div className="text-[10px] font-mono text-base-content/50 space-y-0.5">
+            <div className="text-[11px] font-mono text-base-content space-y-0.5">
               <p><span className="text-base-content/30">sessions </span>{d.sessions}</p>
               <p><span className="text-base-content/30">cost </span>${d.cost.toFixed(2)}</p>
               {d.topTool && (
@@ -62,8 +62,8 @@ export function DailySummaryCards({ data }: DailySummaryCardsProps) {
             {mixEntries.length > 0 && (
               <div className="mt-2 h-[4px] rounded-full overflow-hidden flex bg-base-content/5">
                 {mixEntries.map(function (entry) {
-                  var model = entry[0];
-                  var pct = entry[1];
+                  const model = entry[0];
+                  const pct = entry[1];
                   if (pct <= 0) return null;
                   return (
                     <div

package/client/src/components/analytics/charts/SessionComplexityList.tsx

@@ -13,11 +13,12 @@ export function SessionComplexityList({ data }: SessionComplexityListProps) {
     );
   }
 
-  var maxScore = data.length > 0 ? data[0].score : 1;
+  const maxScore = data.length > 0 ? data[0].score : 1;
 
   return (
-    <div className="flex flex-col gap-1 max-h-[400px] overflow-y-auto">
-      <div className="grid grid-cols-[2.5rem_1fr_4rem_3rem_3rem_3.5rem] gap-2 px-2 py-1 text-[9px] font-mono text-base-content/30 uppercase tracking-wider">
+    <div className="overflow-x-auto">
+    <div className="flex flex-col gap-1 max-h-[400px] overflow-y-auto min-w-[370px]">
+      <div className="grid grid-cols-[2.5rem_1fr_4rem_3rem_3rem_3.5rem] gap-2 px-2 py-1 text-[10px] font-mono text-base-content/30 uppercase tracking-wider">
         <span>Rank</span>
         <span>Session</span>
         <span className="text-right">Score</span>
@@ -58,5 +59,6 @@ export function SessionComplexityList({ data }: SessionComplexityListProps) {
         );
       })}
     </div>
+    </div>
   );
 }

package/client/src/components/analytics/charts/TokenFlowChart.tsx

@@ -46,11 +46,11 @@ function formatTokens(v: number): string {
 }
 
 export function TokenFlowChart({ data }: TokenFlowChartProps) {
-  var fullscreenHeight = useChartFullscreen();
-  var colors = getChartColors();
+  const fullscreenHeight = useChartFullscreen();
+  const colors = getChartColors();
   return (
     <ResponsiveContainer width="100%" height={fullscreenHeight || 200}>
-      <AreaChart data={data} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+      <AreaChart data={data} margin={{ top: 4, right: 4, left: -15, bottom: 0 }}>
         <defs>
           <linearGradient id="inputGrad" x1="0" y1="0" x2="0" y2="1">
             <stop offset="5%" stopColor={colors.primary} stopOpacity={0.8} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptiklemur/lattice",
-  "version": "1.23.1",
+  "version": "1.23.3",
   "description": "Multi-machine agentic dashboard for Claude Code. Monitor sessions, manage MCP servers and skills, orchestrate across mesh-networked nodes.",
   "license": "MIT",
   "author": "Aaron Scherer <me@aaronscherer.me>",