Initial commit

src/components/layout/status-bar-stats.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import { useMemo } from "react"
+import { BarChart3 } from "lucide-react"
+import { useFolderContext } from "@/contexts/folder-context"
+import { AGENT_LABELS } from "@/lib/types"
+import { AgentIcon } from "@/components/agent-icon"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+export function StatusBarStats() {
+  const { stats } = useFolderContext()
+
+  const activeAgents = useMemo(
+    () => stats?.by_agent.filter((a) => a.conversation_count > 0) ?? [],
+    [stats]
+  )
+
+  if (!stats) return null
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button className="flex items-center gap-1.5 hover:text-foreground transition-colors">
+          <BarChart3 className="h-3 w-3" />
+          <span>{stats.total_conversations} conversations</span>
+          <span className="flex items-center gap-1 ml-1">
+            {activeAgents.map((a) => (
+              <AgentIcon
+                key={a.agent_type}
+                agentType={a.agent_type}
+                className="w-3 h-3"
+              />
+            ))}
+          </span>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent side="top" align="start" className="w-64 p-3">
+        <div className="text-xs font-medium mb-2">
+          {stats.total_conversations} conversations / {stats.total_messages}{" "}
+          messages
+        </div>
+        <div className="space-y-1.5">
+          {activeAgents.map((a) => (
+            <div key={a.agent_type} className="flex items-center gap-2 text-xs">
+              <AgentIcon agentType={a.agent_type} className="w-3.5 h-3.5" />
+              <span className="text-muted-foreground">
+                {AGENT_LABELS[a.agent_type]}
+              </span>
+              <span className="ml-auto text-muted-foreground">
+                {a.conversation_count}
+              </span>
+            </div>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}