From 4ab41d0e3867949cefb9c83b07b5f3c739905739 Mon Sep 17 00:00:00 2001
From: Hermes <hermes@chrissader.com>
Date: Thu, 9 Apr 2026 21:23:03 -0500
Subject: [PATCH] Platform breakdown on Pulse, cost display on sessions

---
 app/page.tsx                     |  2 ++
 components/PlatformBreakdown.tsx | 46 ++++++++++++++++++++++++++++++++
 components/SessionCard.tsx       |  8 +++++-
 3 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 components/PlatformBreakdown.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 6e4fe66..730e0af 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,6 +7,7 @@ import { StatusCard } from "@/components/StatusCard";
 import { StatsCard } from "@/components/StatsCard";
 import { SessionCard } from "@/components/SessionCard";
 import { MemorySnapshotCard } from "@/components/MemorySnapshotCard";
+import { PlatformBreakdown } from "@/components/PlatformBreakdown";
 import { useSessions } from "@/lib/hooks";
 import { usePullToRefresh } from "@/lib/usePullToRefresh";
 
@@ -28,6 +29,7 @@ export default function PulsePage() {
       <StatusCard />
       <StatsCard />
       <MemorySnapshotCard />
+      <PlatformBreakdown />
 
       <div className="grid grid-cols-4 gap-2">
         {QUICK_LINKS.map(({ href, label, icon: Icon }) => (
diff --git a/components/PlatformBreakdown.tsx b/components/PlatformBreakdown.tsx
new file mode 100644
index 0000000..185639a
--- /dev/null
+++ b/components/PlatformBreakdown.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { useSessions } from "@/lib/hooks";
+import { platformBadgeClass } from "@/lib/utils";
+
+export function PlatformBreakdown() {
+  const { data } = useSessions(50);
+  const items = data?.items || [];
+
+  if (items.length === 0) return null;
+
+  const counts: Record<string, number> = {};
+  for (const s of items) {
+    counts[s.source] = (counts[s.source] || 0) + 1;
+  }
+
+  const sorted = Object.entries(counts).sort((a, b) => b[1] - a[1]);
+  const total = items.length;
+
+  return (
+    <div className="card p-4">
+      <div className="section-label mb-3">Platforms</div>
+      <div className="space-y-2">
+        {sorted.map(([platform, count]) => {
+          const pct = Math.round((count / total) * 100);
+          return (
+            <div key={platform} className="flex items-center gap-3">
+              <span className={`badge ${platformBadgeClass(platform)} w-16 text-center`}>
+                {platform}
+              </span>
+              <div className="flex-1 h-1.5 rounded-full" style={{ background: "var(--border)" }}>
+                <div
+                  className="h-full rounded-full transition-all"
+                  style={{ width: pct + "%", background: "var(--accent)" }}
+                />
+              </div>
+              <span className="text-[11px] font-mono w-8 text-right" style={{ color: "var(--text-3)" }}>
+                {count}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/components/SessionCard.tsx b/components/SessionCard.tsx
index 7c6ef3e..635a6b6 100644
--- a/components/SessionCard.tsx
+++ b/components/SessionCard.tsx
@@ -8,13 +8,14 @@ import type { Session } from "@/lib/types";
 export function SessionCard({ session }: { session: Session }) {
   const tokens = session.input_tokens + session.output_tokens;
   const title = session.title || "Untitled session";
+  const cost = session.estimated_cost_usd;
 
   return (
     <Link href={`/history/${session.id}`}>
       <div className="flex items-center gap-3 py-3 px-1 border-b border-white/[0.04] active:bg-white/[0.02] transition-colors">
         <div className="flex-1 min-w-0">
           <div className="text-[14px] text-[var(--text-1)] truncate">{title}</div>
-          <div className="flex items-center gap-2 mt-0.5">
+          <div className="flex items-center gap-2 mt-0.5 flex-wrap">
             <span className={`badge ${platformBadgeClass(session.source)}`}>
               {session.source}
             </span>
@@ -26,6 +27,11 @@ export function SessionCard({ session }: { session: Session }) {
                 {formatTokens(tokens)}
               </span>
             )}
+            {cost != null && cost > 0 && (
+              <span className="text-[11px]" style={{ color: "var(--text-3)" }}>
+                ${cost.toFixed(2)}
+              </span>
+            )}
             <span className="text-[11px] ml-auto" style={{ color: "var(--text-3)" }}>
               {timeAgo(session.started_at)}
             </span>