context-mode 1.0.80 → 1.0.82

package/insight/src/routes/sessions_.$dbHash.$sessionId.tsx

@@ -0,0 +1,181 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { api, type SessionEventData } from "@/lib/api";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { RatioBar, formatDuration, COLORS } from "@/components/analytics";
+import { ArrowLeft, ChevronDown, ChevronRight, Zap, Clock, Layers } from "lucide-react";
+
+export const Route = createFileRoute("/sessions_/$dbHash/$sessionId")({ component: EventView });
+
+function EventRow({ e }: { e: { id: number; type: string; priority: number; data: string | null; created_at: string | null } }) {
+  const [expanded, setExpanded] = useState(false);
+  const raw = e.data || "-";
+  const truncated = raw.length > 100 ? raw.slice(0, 100) + "..." : raw;
+  const needsExpand = raw.length > 100;
+
+  return (
+    <div
+      className={`flex gap-3 py-2 border-b border-border/50 text-sm ${needsExpand ? "cursor-pointer hover:bg-accent/30" : ""}`}
+      onClick={() => needsExpand && setExpanded(prev => !prev)}
+    >
+      <span className="text-xs text-muted-foreground font-mono whitespace-nowrap min-w-[130px]">
+        {e.created_at || "-"}
+      </span>
+      <Badge variant={e.priority >= 3 ? "default" : "secondary"} className="text-[10px] shrink-0 h-5">
+        {e.type}
+      </Badge>
+      <div className="flex-1 min-w-0">
+        <span className={`text-xs ${expanded ? "whitespace-pre-wrap break-words" : "block truncate"} ${
+          e.priority >= 4 ? "text-red-500 font-semibold" : e.priority >= 3 ? "text-amber-500" : "text-muted-foreground"
+        }`}>
+          {expanded ? raw : truncated}
+        </span>
+      </div>
+      {needsExpand && (
+        <span className="shrink-0 text-muted-foreground">
+          {expanded ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function EventView() {
+  const { dbHash, sessionId } = Route.useParams();
+  const [data, setData] = useState<SessionEventData | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    api.events(dbHash, sessionId).then(d => { setData(d); setLoading(false); });
+  }, [dbHash, sessionId]);
+
+  if (loading || !data) return <p className="text-muted-foreground animate-pulse">Loading session...</p>;
+
+  // Compute type counts
+  const typeCounts: Record<string, number> = {};
+  data.events.forEach(e => { typeCounts[e.type] = (typeCounts[e.type] || 0) + 1; });
+  const typeEntries = Object.entries(typeCounts).sort((a, b) => b[1] - a[1]);
+  const uniqueTypes = typeEntries.length;
+
+  // Compute duration from first to last event
+  let durationMin = 0;
+  if (data.events.length >= 2) {
+    const first = data.events[0]?.created_at;
+    const last = data.events[data.events.length - 1]?.created_at;
+    if (first && last) {
+      const start = new Date(first).getTime();
+      const end = new Date(last).getTime();
+      if (!isNaN(start) && !isNaN(end) && end > start) {
+        durationMin = (end - start) / 60000;
+      }
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <Link to="/sessions" className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors">
+        <ArrowLeft className="h-4 w-4" /> Back to Sessions
+      </Link>
+
+      <div className="flex items-center gap-3">
+        <h2 className="text-2xl font-semibold">Session Detail</h2>
+        {data.resume && <Badge variant="outline" className="text-emerald-500 border-emerald-500/30">Resume available</Badge>}
+      </div>
+
+      {/* KPI Strip */}
+      <div className="grid grid-cols-3 gap-3">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">Events</CardTitle>
+            <Zap className="h-4 w-4 text-blue-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tabular-nums">{data.events.length}</div>
+            <p className="text-[11px] text-muted-foreground mt-0.5">total in session</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">Duration</CardTitle>
+            <Clock className="h-4 w-4 text-purple-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tabular-nums">{formatDuration(durationMin)}</div>
+            <p className="text-[11px] text-muted-foreground mt-0.5">first to last event</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">Types</CardTitle>
+            <Layers className="h-4 w-4 text-emerald-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tabular-nums">{uniqueTypes}</div>
+            <p className="text-[11px] text-muted-foreground mt-0.5">unique event types</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Event type breakdown as ratio bar */}
+      {typeEntries.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm">Event Breakdown</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <RatioBar items={typeEntries.slice(0, 8).map(([ type, count ], i) => ({
+              label: type, value: count, color: COLORS[i % COLORS.length],
+            }))} />
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Event type badges */}
+      <div className="flex flex-wrap gap-1.5">
+        {typeEntries.map(([type, count]) => (
+          <Badge key={type} variant="secondary" className="text-[10px]">{type}: {count}</Badge>
+        ))}
+      </div>
+
+      {/* Event list */}
+      <Card>
+        <CardContent className="pt-4">
+          <ScrollArea className="h-[600px]">
+            <div className="space-y-0">
+              {data.events.map(e => (
+                <EventRow key={e.id} e={e} />
+              ))}
+            </div>
+          </ScrollArea>
+        </CardContent>
+      </Card>
+
+      {data.resume?.snapshot && (
+        <Collapsible>
+          <Card>
+            <CollapsibleTrigger className="w-full">
+              <CardHeader className="flex flex-row items-center justify-between cursor-pointer hover:bg-accent/50 transition-colors">
+                <CardTitle className="text-sm">
+                  Resume Snapshot ({data.resume.event_count} events, {data.resume.consumed ? "consumed" : "pending"})
+                </CardTitle>
+                <ChevronDown className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <CardContent>
+                <ScrollArea className="max-h-96">
+                  <pre className="text-xs text-muted-foreground whitespace-pre-wrap break-words font-mono">
+                    {data.resume.snapshot}
+                  </pre>
+                </ScrollArea>
+              </CardContent>
+            </CollapsibleContent>
+          </Card>
+        </Collapsible>
+      )}
+    </div>
+  );
+}

package/insight/src/styles.css

@@ -0,0 +1,104 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/geist";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-heading: var(--font-sans);
+  --font-sans: 'Geist Variable', sans-serif;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --radius: 0.625rem;
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}

package/insight/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "target": "ES2022",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "baseUrl": ".",
+    "paths": {
+      "#/*": ["./src/*"],
+      "@/*": ["./src/*"]
+    },
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    /* Linting */
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  }
+}

package/insight/vite.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite'
+import { devtools } from '@tanstack/devtools-vite'
+
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+import viteReact from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+const config = defineConfig({
+  resolve: { tsconfigPaths: true },
+  plugins: [
+    devtools(),
+    tailwindcss(),
+    tanstackRouter({ target: 'react', autoCodeSplitting: true }),
+    viteReact(),
+  ],
+})
+
+export default config

package/openclaw.plugin.json

@@ -3,7 +3,7 @@
   "name": "Context Mode",
   "kind": "tool",
   "description": "OpenClaw plugin that saves 98% of your context window. Sandboxed code execution in 11 languages, FTS5 knowledge base with BM25 ranking, and intent-driven search.",
-  "version": "1.0.80",
+  "version": "1.0.82",
   "sandbox": {
     "mode": "permissive",
     "filesystem_access": "full",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "context-mode",
-  "version": "1.0.80",
+  "version": "1.0.82",
   "type": "module",
   "description": "MCP plugin that saves 98% of your context window. Works with Claude Code, Gemini CLI, VS Code Copilot, OpenCode, and Codex CLI. Sandboxed code execution, FTS5 knowledge base, and intent-driven search.",
   "author": "Mert Koseoğlu",
@@ -46,6 +46,7 @@
     "build",
     "hooks",
     "configs",
+    "insight",
     "server.bundle.mjs",
     "cli.bundle.mjs",
     "skills",