@townco/debugger 0.1.28 → 0.1.30

package/src/pages/FindSessions.tsx

@@ -0,0 +1,247 @@
+import { Search } from "lucide-react";
+import { useEffect, useState } from "react";
+import type { SessionAnalysis } from "@/analysis/types";
+import { DebuggerLayout } from "@/components/DebuggerLayout";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+interface SimilarSession {
+  session_id: string;
+  distance: number;
+  analysis?: SessionAnalysis;
+}
+
+export function FindSessions() {
+  const [sessions, setSessions] = useState<SessionAnalysis[]>([]);
+  const [selectedSessionId, setSelectedSessionId] = useState<string>("");
+  const [similarSessions, setSimilarSessions] = useState<SimilarSession[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch all analyzed sessions on mount
+  useEffect(() => {
+    fetch("/api/session-analyses")
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.analyses) {
+          setSessions(data.analyses);
+        }
+      })
+      .catch((err) => {
+        console.error("Failed to fetch sessions:", err);
+      });
+  }, []);
+
+  const handleFindSimilar = async () => {
+    if (!selectedSessionId) {
+      setError("Please select a session");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    setSimilarSessions([]);
+
+    try {
+      const response = await fetch(
+        `/api/session-analyses/${selectedSessionId}/similar?limit=10`,
+      );
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || "Failed to find similar sessions");
+      }
+
+      const data = await response.json();
+
+      // Fetch full analysis data for each similar session
+      const similarWithAnalysis = await Promise.all(
+        data.similar.map(async (similar: SimilarSession) => {
+          try {
+            const analysisRes = await fetch(
+              `/api/session-analyses?sessionId=${similar.session_id}`,
+            );
+            if (analysisRes.ok) {
+              const analysis = await analysisRes.json();
+              return { ...similar, analysis };
+            }
+          } catch (err) {
+            console.error(`Failed to fetch analysis for ${similar.session_id}:`, err);
+          }
+          return similar;
+        }),
+      );
+
+      setSimilarSessions(similarWithAnalysis);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unknown error");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const selectedSession = sessions.find(
+    (s) => s.session_id === selectedSessionId,
+  );
+
+  return (
+    <DebuggerLayout title="Find Similar Sessions" showNav={true}>
+      <div className="h-full overflow-auto p-6">
+        <div className="max-w-4xl mx-auto space-y-6">
+          {/* Search Section */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Search by Similarity</CardTitle>
+              <CardDescription>
+                Find sessions similar to a selected session using AI embeddings
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Select Session</label>
+                <Select
+                  value={selectedSessionId}
+                  onValueChange={setSelectedSessionId}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Choose a session to find similar ones" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {sessions.length === 0 && (
+                      <div className="px-2 py-6 text-center text-sm text-muted-foreground">
+                        No analyzed sessions found.
+                        <br />
+                        Analyze sessions first to use similarity search.
+                      </div>
+                    )}
+                    {sessions.map((session) => (
+                      <SelectItem
+                        key={session.session_id}
+                        value={session.session_id}
+                      >
+                        <div className="flex flex-col items-start">
+                          <span className="font-mono text-xs">
+                            {session.session_id}
+                          </span>
+                          <span className="text-xs text-muted-foreground truncate max-w-[300px]">
+                            {session.task.user_query}
+                          </span>
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {selectedSession && (
+                <div className="p-4 bg-muted rounded-lg space-y-2">
+                  <div className="text-sm">
+                    <span className="font-medium">Intent:</span>{" "}
+                    <span className="text-muted-foreground">
+                      {selectedSession.task.intent_type}
+                    </span>
+                  </div>
+                  <div className="text-sm">
+                    <span className="font-medium">Summary:</span>{" "}
+                    <span className="text-muted-foreground">
+                      {selectedSession.task.task_summary}
+                    </span>
+                  </div>
+                  <div className="text-sm">
+                    <span className="font-medium">Outcome:</span>{" "}
+                    <span className="text-muted-foreground">
+                      {selectedSession.outcome.status}
+                    </span>
+                  </div>
+                </div>
+              )}
+
+              <Button
+                onClick={handleFindSimilar}
+                disabled={!selectedSessionId || loading}
+                className="w-full"
+              >
+                <Search className="mr-2 size-4" />
+                {loading ? "Searching..." : "Find Similar Sessions"}
+              </Button>
+
+              {error && (
+                <div className="p-4 bg-destructive/10 text-destructive rounded-lg text-sm">
+                  {error}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Results Section */}
+          {similarSessions.length > 0 && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Similar Sessions</CardTitle>
+                <CardDescription>
+                  {similarSessions.length} similar session
+                  {similarSessions.length !== 1 ? "s" : ""} found
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-3">
+                  {similarSessions.map((similar) => {
+                    if (!similar.analysis) return null;
+
+                    return (
+                      <a
+                        key={similar.session_id}
+                        href={`/sessions/${similar.session_id}`}
+                        className="block p-4 border rounded-lg hover:bg-muted/50 transition-colors"
+                      >
+                        <div className="flex items-start justify-between gap-4">
+                          <div className="flex-1 space-y-1">
+                            <div className="flex items-center gap-2">
+                              <span className="font-mono text-xs text-muted-foreground">
+                                {similar.session_id}
+                              </span>
+                              <span className="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded">
+                                {similar.analysis.task.intent_type}
+                              </span>
+                            </div>
+                            <p className="text-sm line-clamp-2">
+                              {similar.analysis.task.user_query}
+                            </p>
+                            <p className="text-xs text-muted-foreground line-clamp-1">
+                              {similar.analysis.task.task_summary}
+                            </p>
+                          </div>
+                          <div className="flex flex-col items-end gap-1">
+                            <span className="text-xs font-medium px-2 py-1 bg-muted rounded">
+                              {similar.distance.toFixed(3)}
+                            </span>
+                            <span className="text-xs text-muted-foreground">
+                              distance
+                            </span>
+                          </div>
+                        </div>
+                      </a>
+                    );
+                  })}
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </div>
+    </DebuggerLayout>
+  );
+}

package/src/pages/SessionList.tsx

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
+import type { SessionAnalysis } from "../analysis/types";
+import { AnalyzeAllButton } from "../components/AnalyzeAllButton";
 import { DebuggerLayout } from "../components/DebuggerLayout";
 import type { Session } from "../types";
 
@@ -24,8 +26,32 @@ function formatRelativeTime(nanoseconds: number): string {
   return "just now";
 }
 
+function formatIntentType(intentType: string): string {
+  return intentType
+    .split("_")
+    .map((word) => word.charAt(0) + word.slice(1).toLowerCase())
+    .join(" ");
+}
+
+function getOutcomeColor(status: string): string {
+  switch (status) {
+    case "SUCCESS":
+      return "text-green-600 dark:text-green-400";
+    case "FAILURE":
+      return "text-red-600 dark:text-red-400";
+    case "PARTIAL_SUCCESS":
+      return "text-yellow-600 dark:text-yellow-400";
+    case "ABORTED":
+    case "TIMEOUT":
+      return "text-gray-600 dark:text-gray-400";
+    default:
+      return "text-muted-foreground";
+  }
+}
+
 interface SessionWithMessage extends Session {
   firstMessage?: string;
+  analysis?: SessionAnalysis;
 }
 
 export function SessionList() {
@@ -36,7 +62,7 @@ export function SessionList() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  // Fetch sessions, comparison session IDs, and first messages
+  // Fetch sessions, comparison session IDs, first messages, and analyses
   const fetchSessions = useCallback(() => {
     setLoading(true);
     Promise.all([
@@ -48,11 +74,23 @@ export function SessionList() {
         if (!res.ok) return { sessionIds: [] };
         return res.json();
       }),
+      fetch("/api/session-analyses?limit=1000").then((res) => {
+        if (!res.ok) return { analyses: [] };
+        return res.json();
+      }),
     ])
-      .then(async ([sessionsData, comparisonData]) => {
+      .then(async ([sessionsData, comparisonData, analysesData]) => {
         const comparisonIds = new Set<string>(comparisonData.sessionIds || []);
         setComparisonSessionIds(comparisonIds);
 
+        // Create a map of session_id to analysis
+        const analysesMap = new Map<string, SessionAnalysis>(
+          (analysesData.analyses || []).map((a: SessionAnalysis) => [
+            a.session_id,
+            a,
+          ]),
+        );
+
         // Filter sessions first, then fetch first messages only for filtered sessions
         const filtered = (sessionsData as Session[]).filter(
           (s) => !comparisonIds.has(s.session_id),
@@ -61,18 +99,28 @@ export function SessionList() {
         // Fetch first messages for all filtered sessions in parallel
         const sessionsWithMessages = await Promise.all(
           filtered.map(async (session) => {
+            const sessionWithData: SessionWithMessage = { ...session };
+
+            // Add first message
             try {
               const res = await fetch(
                 `/api/session-first-message/${session.session_id}`,
               );
               if (res.ok) {
                 const data = await res.json();
-                return { ...session, firstMessage: data.message };
+                sessionWithData.firstMessage = data.message;
               }
             } catch {
               // Ignore errors fetching first message
             }
-            return session;
+
+            // Add analysis if exists
+            const analysis = analysesMap.get(session.session_id);
+            if (analysis) {
+              sessionWithData.analysis = analysis;
+            }
+
+            return sessionWithData;
           }),
         );
 
@@ -122,6 +170,10 @@ export function SessionList() {
           <Button variant="outline" onClick={fetchSessions} disabled={loading}>
             Refresh
           </Button>
+          <AnalyzeAllButton
+            sessionIds={filteredSessions.map((s) => s.session_id)}
+            onComplete={fetchSessions}
+          />
         </div>
 
         {filteredSessions.length === 0 ? (
@@ -134,22 +186,36 @@ export function SessionList() {
                 href={`/sessions/${session.session_id}`}
                 className="block"
               >
-                <div className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-muted/50 transition-colors cursor-pointer border">
-                  <code className="text-xs text-muted-foreground shrink-0">
+                <div className="grid grid-cols-[80px_1fr_180px_160px_120px_80px] items-center gap-3 px-3 py-2 rounded-md hover:bg-muted/50 transition-colors cursor-pointer border">
+                  <code className="text-xs text-muted-foreground">
                     {session.session_id.slice(0, 8)}
                   </code>
-                  <span className="text-sm truncate flex-1">
+                  <span className="text-sm truncate">
                     {session.firstMessage || "No message"}
                   </span>
-                  <span className="text-xs text-muted-foreground shrink-0">
+                  <span className="text-xs text-muted-foreground text-right">
+                    {session.analysis
+                      ? formatIntentType(session.analysis.task.intent_type)
+                      : ""}
+                  </span>
+                  <span
+                    className={`text-xs text-right ${
+                      session.analysis
+                        ? getOutcomeColor(session.analysis.outcome.status)
+                        : ""
+                    }`}
+                  >
+                    {session.analysis ? session.analysis.outcome.status : ""}
+                  </span>
+                  <span className="text-xs text-muted-foreground text-right">
                     {session.trace_count}{" "}
-                    {session.trace_count === 1 ? "trace" : "traces"} ·{" "}
+                    {session.trace_count === 1 ? "trace" : "traces"}{" "}
                     {formatDuration(
                       session.first_trace_time,
                       session.last_trace_time,
                     )}
                   </span>
-                  <span className="text-xs text-muted-foreground shrink-0">
+                  <span className="text-xs text-muted-foreground text-right">
                     {formatRelativeTime(session.last_trace_time)}
                   </span>
                 </div>

package/src/pages/SessionView.tsx

@@ -1,4 +1,7 @@
+import { useEffect, useState } from "react";
+import type { SessionAnalysis } from "../analysis/types";
 import { DebuggerLayout } from "../components/DebuggerLayout";
+import { SessionAnalysisButton } from "../components/SessionAnalysisButton";
 import { SessionTimelineView } from "../components/SessionTimelineView";
 
 interface SessionViewProps {
@@ -6,9 +9,38 @@ interface SessionViewProps {
 }
 
 export function SessionView({ sessionId }: SessionViewProps) {
+  const [existingAnalysis, setExistingAnalysis] =
+    useState<SessionAnalysis | null>(null);
+  const [loadingAnalysis, setLoadingAnalysis] = useState(true);
+
+  // Check for existing analysis on mount
+  useEffect(() => {
+    fetch(`/api/session-analyses?sessionId=${sessionId}`)
+      .then((res) => {
+        if (res.ok) return res.json();
+        return null;
+      })
+      .then((analysis) => {
+        setExistingAnalysis(analysis);
+        setLoadingAnalysis(false);
+      })
+      .catch(() => {
+        setLoadingAnalysis(false);
+      });
+  }, [sessionId]);
+
   return (
     <DebuggerLayout title={`Session: ${sessionId}`} showBackButton backHref="/">
-      <div className="flex-1 overflow-y-auto">
+      <div className="relative flex-1 overflow-y-auto">
+        <div className="absolute top-4 right-4 z-10">
+          {!loadingAnalysis && (
+            <SessionAnalysisButton
+              sessionId={sessionId}
+              existingAnalysis={existingAnalysis}
+              onAnalysisComplete={(analysis) => setExistingAnalysis(analysis)}
+            />
+          )}
+        </div>
         <SessionTimelineView sessionId={sessionId} />
       </div>
     </DebuggerLayout>