feat(tool-trend): drill-down on bar click

- New endpoint GET /api/tools/bucket?since=&until=&tool=
  Returns sessions active in a time bucket with their tool call
  counts (sorted desc, capped at 50). Optional tool filter.
- ToolTrend bars now clickable: opens an inline drill-down list
  showing the bucket window, session count, agent badge, cwd,
  and tool call count per session.
- Click a session row → onOpenSession (jumps to detail view).
- ✕ button to dismiss the drill-down.

Smoke test: 2 sessions / 178 calls in a sample 1h window.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: anbei.yuan

crates/pawscope-server/src/api.rs

@@ -600,3 +600,77 @@ pub async fn tools_trend(
     }))
     .into_response()
 }
+
+#[derive(Debug, Deserialize)]
+pub struct ToolBucketQuery {
+    pub since: String,
+    pub until: String,
+    #[serde(default)]
+    pub tool: Option<String>,
+    #[serde(default)]
+    pub limit: Option<usize>,
+}
+
+#[derive(Debug, Serialize)]
+struct BucketHit {
+    session_id: String,
+    agent: String,
+    cwd: Option<String>,
+    count: u64,
+    last_event_at: String,
+}
+
+pub async fn tools_bucket(
+    Query(p): Query<ToolBucketQuery>,
+    State(s): State<AppState>,
+) -> impl IntoResponse {
+    let since = match chrono::DateTime::parse_from_rfc3339(&p.since) {
+        Ok(t) => t.with_timezone(&chrono::Utc),
+        Err(e) => return (StatusCode::BAD_REQUEST, format!("since: {e}")).into_response(),
+    };
+    let until = match chrono::DateTime::parse_from_rfc3339(&p.until) {
+        Ok(t) => t.with_timezone(&chrono::Utc),
+        Err(e) => return (StatusCode::BAD_REQUEST, format!("until: {e}")).into_response(),
+    };
+    let limit = p.limit.unwrap_or(50).clamp(1, 200);
+    let tool_filter = p.tool.as_deref();
+
+    let sessions = match s.adapter.list_sessions().await {
+        Ok(v) => v,
+        Err(e) => return (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()).into_response(),
+    };
+
+    let mut hits: Vec<BucketHit> = Vec::new();
+    for sess in &sessions {
+        let detail = match s.adapter.get_detail(&sess.id).await {
+            Ok(d) => d,
+            Err(_) => continue,
+        };
+        let mut count: u64 = 0;
+        for tc in &detail.tool_calls {
+            if tc.timestamp < since || tc.timestamp >= until {
+                continue;
+            }
+            if let Some(t) = tool_filter {
+                if tc.name != t {
+                    continue;
+                }
+            }
+            count += 1;
+        }
+        if count == 0 {
+            continue;
+        }
+        hits.push(BucketHit {
+            session_id: sess.id.clone(),
+            agent: format!("{:?}", sess.agent).to_lowercase(),
+            cwd: Some(sess.cwd.display().to_string()),
+            count,
+            last_event_at: sess.last_event_at.to_rfc3339(),
+        });
+    }
+    hits.sort_by(|a, b| b.count.cmp(&a.count));
+    hits.truncate(limit);
+
+    Json(hits).into_response()
+}

crates/pawscope-server/src/lib.rs

@@ -36,6 +36,7 @@ pub fn build_app(adapter: Arc<dyn AgentAdapter>) -> (Router, AppState) {
         .route("/api/realms", get(api::realm_detail))
         .route("/api/prompts/search", get(api::prompts_search))
         .route("/api/tools/trend", get(api::tools_trend))
+        .route("/api/tools/bucket", get(api::tools_bucket))
         .route("/api/skills", get(skills::list_skills))
         .route("/api/skills/content", get(skills::skill_content))
         .route("/api/skills/usage", get(skills::skill_usage))

web/src/api.ts

@@ -133,6 +133,25 @@ export async function fetchToolsTrend(hours = 168, top = 6): Promise<ToolTrendRe
   return r.json();
 }
 
+export interface BucketHit {
+  session_id: string;
+  agent: string;
+  cwd: string | null;
+  count: number;
+  last_event_at: string;
+}
+export async function fetchToolsBucket(
+  since: string,
+  until: string,
+  tool?: string,
+): Promise<BucketHit[]> {
+  const params = new URLSearchParams({ since, until, limit: '50' });
+  if (tool) params.set('tool', tool);
+  const r = await fetch(`/api/tools/bucket?${params}`);
+  if (!r.ok) throw new Error(`tools bucket ${r.status}`);
+  return r.json();
+}
+
 export interface PromptHit {
   session_id: string;
   agent: string;

web/src/components/OverviewPanel.tsx

@@ -737,7 +737,7 @@ export function OverviewPanel({
           </div>
         </section>
 
-        <ToolTrend />
+        <ToolTrend onOpenSession={onOpenSession} />
 
         <section className="text-[11px] text-slate-600 px-1">
           Messages: ↑ {data.total_user_messages.toLocaleString()} user · ↓ {data.total_assistant_messages.toLocaleString()} assistant

web/src/components/ToolTrend.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { fetchToolsTrend, type ToolTrendResponse } from '../api';
+import { fetchToolsBucket, fetchToolsTrend, type BucketHit, type ToolTrendResponse } from '../api';
 import { useT } from '../i18n';
 
 const COLORS = [
@@ -14,12 +14,15 @@ const RANGES: { key: '24h' | '7d' | '30d'; hours: number }[] = [
   { key: '30d', hours: 720 },
 ];
 
-export function ToolTrend() {
+export function ToolTrend({ onOpenSession }: { onOpenSession?: (id: string) => void }) {
   const { t } = useT();
   const [range, setRange] = useState<'24h' | '7d' | '30d'>('7d');
   const [data, setData] = useState<ToolTrendResponse | null>(null);
   const [loading, setLoading] = useState(false);
   const [hover, setHover] = useState<{ idx: number; x: number; y: number } | null>(null);
+  const [drill, setDrill] = useState<{ idx: number; since: string; until: string; hits: BucketHit[] | null }>(
+    { idx: -1, since: '', until: '', hits: null },
+  );
 
   useEffect(() => {
     setLoading(true);
@@ -118,6 +121,18 @@ export function ToolTrend() {
                 return (
                   <g
                     key={i}
+                    style={{ cursor: 'pointer' }}
+                    onClick={() => {
+                      const bucketHourSpan = data.hours / data.totals.length;
+                      const untilTs = endTs - (data.totals.length - 1 - i) * 3600_000;
+                      const sinceTs = untilTs - bucketHourSpan * 3600_000;
+                      const since = new Date(sinceTs).toISOString();
+                      const until = new Date(untilTs).toISOString();
+                      setDrill({ idx: i, since, until, hits: null });
+                      fetchToolsBucket(since, until)
+                        .then((hits) => setDrill({ idx: i, since, until, hits }))
+                        .catch(() => setDrill({ idx: i, since, until, hits: [] }));
+                    }}
                     onMouseEnter={(e) => {
                       const rect = (e.currentTarget.ownerSVGElement as SVGSVGElement).getBoundingClientRect();
                       setHover({
@@ -201,6 +216,45 @@ export function ToolTrend() {
                 </div>
               ))}
             </div>
+
+            {drill.idx >= 0 && (
+              <div className="mt-4 border-t border-slate-800 pt-3">
+                <div className="flex items-center gap-2 text-[11px] text-slate-400 mb-2">
+                  <span className="font-mono text-slate-200">
+                    {new Date(drill.since).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
+                    {' → '}
+                    {new Date(drill.until).toLocaleString([], { hour: '2-digit', minute: '2-digit' })}
+                  </span>
+                  <span className="text-slate-500">·</span>
+                  <span>{drill.hits ? `${drill.hits.length} sessions` : '…'}</span>
+                  <button
+                    onClick={() => setDrill({ idx: -1, since: '', until: '', hits: null })}
+                    className="ml-auto text-slate-500 hover:text-slate-200 text-xs"
+                  >✕</button>
+                </div>
+                {drill.hits && drill.hits.length === 0 ? (
+                  <div className="text-[11px] text-slate-600 py-2">no sessions in this bucket</div>
+                ) : (
+                  <ul className="divide-y divide-slate-800/60">
+                    {(drill.hits ?? []).map((h) => (
+                      <li
+                        key={h.session_id}
+                        onClick={() => onOpenSession?.(h.session_id)}
+                        className="py-1.5 px-1 flex items-center gap-2 cursor-pointer hover:bg-slate-800/40 rounded"
+                      >
+                        <span className="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-slate-800/70 text-slate-300 font-mono">
+                          {h.agent}
+                        </span>
+                        <span className="text-[11px] text-slate-300 font-mono truncate flex-1">
+                          {h.cwd ?? h.session_id}
+                        </span>
+                        <span className="text-[11px] tabular-nums text-cyan-300">{h.count}</span>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+            )}
           </>
         )}
       </div>