claude-smart 0.2.23 → 0.2.24

package/plugin/dashboard/app/dashboard/page.tsx

@@ -0,0 +1,227 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import {
+  BookOpen,
+  MessageSquare,
+  Sparkles,
+  Activity,
+  ExternalLink,
+} from "lucide-react";
+import { LearningsBadge } from "@/components/common/learnings-badge";
+import { PageHeader } from "@/components/common/page-header";
+import { StatCard } from "@/components/common/stat-card";
+import { EmptyState } from "@/components/common/empty-state";
+import { Badge } from "@/components/ui/badge";
+import { reflexio } from "@/lib/reflexio-client";
+import { useSettings } from "@/hooks/use-settings";
+import { formatRelative, truncateId } from "@/lib/format";
+import { agentPlaybookStatusLabel } from "@/lib/status";
+import type { AgentPlaybook, SessionSummary, UserPlaybook } from "@/lib/types";
+
+export default function DashboardPage() {
+  const { reflexioUrl } = useSettings();
+  const [sessions, setSessions] = useState<SessionSummary[] | null>(null);
+  const [projectSkills, setProjectSkills] = useState<UserPlaybook[] | null>(null);
+  const [sharedSkills, setSharedSkills] = useState<AgentPlaybook[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      setError(null);
+      try {
+        const [sRes, projectRes, sharedRes] = await Promise.all([
+          fetch("/api/sessions", { cache: "no-store" }).then((r) => r.json()),
+          reflexio
+            .getUserPlaybooks({ reflexioUrl })
+            .catch(() => ({ user_playbooks: [] as UserPlaybook[] })),
+          reflexio
+            .getAgentPlaybooks({ reflexioUrl })
+            .catch(() => ({ agent_playbooks: [] as AgentPlaybook[] })),
+        ]);
+        if (cancelled) return;
+        setSessions(sRes.sessions ?? []);
+        setProjectSkills(projectRes.user_playbooks ?? []);
+        setSharedSkills(sharedRes.agent_playbooks ?? []);
+      } catch (e) {
+        if (!cancelled)
+          setError(e instanceof Error ? e.message : "failed to load");
+      }
+    }
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [reflexioUrl]);
+
+  // CURRENT project-specific skills arrive as `status: null` (response_model_exclude_none
+  // strips the field). Anything else (e.g. "archived", "pending") is excluded.
+  const currentProjectSkills = (projectSkills ?? []).filter((p) => p.status == null);
+  const approvedSharedSkills = (sharedSkills ?? []).filter(
+    (p) => agentPlaybookStatusLabel(p) === "APPROVED",
+  );
+  const learningInteractionTotal = (sessions ?? []).reduce(
+    (acc, s) => acc + s.learning_interaction_count,
+    0,
+  );
+  return (
+    <div className="flex-1 overflow-auto">
+      <PageHeader
+        title="Dashboard"
+        description="Overview of claude-smart learning across sessions and projects."
+      />
+
+      <div className="p-6 space-y-6">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
+          <StatCard
+            label="Sessions recorded"
+            value={sessions?.length ?? "—"}
+            hint="JSONL buffers on disk"
+            icon={Activity}
+          />
+          <StatCard
+            label="Project-specific skills"
+            value={currentProjectSkills.length || "—"}
+            hint="current project-specific rules"
+            icon={BookOpen}
+          />
+          <StatCard
+            label="Shared skills"
+            value={approvedSharedSkills.length || "—"}
+            hint="approved shared rules"
+            icon={BookOpen}
+          />
+          <StatCard
+            label="Interactions with learnings applied"
+            value={learningInteractionTotal}
+            hint="turns where a skill or preference was cited"
+            icon={Sparkles}
+          />
+        </div>
+
+        {error && (
+          <div className="rounded-lg border border-destructive/30 bg-destructive/5 text-destructive px-4 py-3 text-sm">
+            {error}
+          </div>
+        )}
+
+        <section>
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="text-sm font-semibold">Recent sessions</h2>
+            <Link
+              href="/sessions"
+              className="text-xs text-muted-foreground hover:text-foreground inline-flex items-center gap-1"
+            >
+              View all <ExternalLink className="h-3 w-3" />
+            </Link>
+          </div>
+          {sessions && sessions.length > 0 ? (
+            <div className="rounded-xl border border-border divide-y divide-border bg-card">
+              {sessions.slice(0, 5).map((s) => (
+                <Link
+                  key={s.session_id}
+                  href={`/sessions/${s.session_id}`}
+                  className="flex items-center justify-between px-4 py-3 hover:bg-accent/40 transition-colors"
+                >
+                  <div className="min-w-0 flex items-center gap-3">
+                    <MessageSquare className="h-4 w-4 text-muted-foreground shrink-0" />
+                    <code className="font-mono text-xs truncate">
+                      {truncateId(s.session_id, 10, 6)}
+                    </code>
+                    <LearningsBadge count={s.learning_interaction_count} />
+                  </div>
+                  <div className="flex items-center gap-4 text-xs text-muted-foreground shrink-0">
+                    <span>{s.turn_count} turns</span>
+                    <span>{formatRelative(s.last_activity)}</span>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          ) : (
+            <EmptyState
+              icon={MessageSquare}
+              title="No sessions yet"
+              description="Run Claude Code with claude-smart enabled — sessions will appear here."
+            />
+          )}
+        </section>
+
+        <section>
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="text-sm font-semibold">Recent skills</h2>
+            <Link
+              href="/skills"
+              className="text-xs text-muted-foreground hover:text-foreground inline-flex items-center gap-1"
+            >
+              View all <ExternalLink className="h-3 w-3" />
+            </Link>
+          </div>
+          {currentProjectSkills.length > 0 || approvedSharedSkills.length > 0 ? (
+            <div className="grid gap-3 sm:grid-cols-2">
+              {currentProjectSkills.slice(0, 2).map((p) => (
+                <Link
+                  key={`project:${p.user_playbook_id}`}
+                  href={`/skills/project/${p.user_playbook_id}`}
+                  className="block rounded-xl border border-border bg-card p-4 hover:bg-accent/40 transition-colors"
+                >
+                  <div className="flex items-center justify-between gap-2 mb-2">
+                    <Badge variant="outline" className="font-mono text-[10px]">
+                      {p.agent_version || "default"}
+                    </Badge>
+                    <Badge variant="secondary" className="text-[10px]">
+                      project-specific
+                    </Badge>
+                    <span className="text-[11px] text-muted-foreground">
+                      {formatRelative(p.created_at)}
+                    </span>
+                  </div>
+                  <p className="text-sm line-clamp-3">{p.content}</p>
+                  {p.trigger && (
+                    <p className="text-xs text-muted-foreground mt-2 line-clamp-1">
+                      <span className="font-medium">trigger:</span> {p.trigger}
+                    </p>
+                  )}
+                </Link>
+              ))}
+              {approvedSharedSkills.slice(0, 2).map((p) => (
+                <Link
+                  key={`shared:${p.agent_playbook_id}`}
+                  href={`/skills/shared/${p.agent_playbook_id}`}
+                  className="block rounded-xl border border-border bg-card p-4 hover:bg-accent/40 transition-colors"
+                >
+                  <div className="flex items-center justify-between gap-2 mb-2">
+                    <div className="flex items-center gap-2">
+                      <Badge variant="outline" className="font-mono text-[10px]">
+                        {p.agent_version || "default"}
+                      </Badge>
+                      <Badge variant="secondary" className="text-[10px]">
+                        shared
+                      </Badge>
+                    </div>
+                    <span className="text-[11px] text-muted-foreground">
+                      {formatRelative(p.created_at)}
+                    </span>
+                  </div>
+                  <p className="text-sm line-clamp-3">{p.content}</p>
+                  {p.trigger && (
+                    <p className="text-xs text-muted-foreground mt-2 line-clamp-1">
+                      <span className="font-medium">trigger:</span> {p.trigger}
+                    </p>
+                  )}
+                </Link>
+              ))}
+            </div>
+          ) : (
+            <EmptyState
+              icon={BookOpen}
+              title="No skills yet"
+              description="Keep using Claude with claude-smart enabled. Skills are extracted automatically when patterns emerge."
+            />
+          )}
+        </section>
+      </div>
+    </div>
+  );
+}

package/plugin/dashboard/app/globals.css

@@ -0,0 +1,129 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-geist-mono);
+  --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);
+  --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);
+  --chart-1: oklch(0.809 0.105 251.813);
+  --chart-2: oklch(0.623 0.214 259.815);
+  --chart-3: oklch(0.546 0.245 262.881);
+  --chart-4: oklch(0.488 0.243 264.376);
+  --chart-5: oklch(0.424 0.199 265.638);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.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);
+  --chart-1: oklch(0.809 0.105 251.813);
+  --chart-2: oklch(0.623 0.214 259.815);
+  --chart-3: oklch(0.546 0.245 262.881);
+  --chart-4: oklch(0.488 0.243 264.376);
+  --chart-5: oklch(0.424 0.199 265.638);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-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/plugin/dashboard/app/layout.tsx

@@ -0,0 +1,40 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import { Providers } from "./providers";
+import { Sidebar } from "@/components/layout/sidebar";
+import { TopBar } from "@/components/layout/top-bar";
+import { StallBanner } from "@/components/stall-banner";
+
+const inter = Inter({
+  variable: "--font-sans",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Claude-Smart Dashboard",
+  description: "Manage sessions, preferences, skills, and configuration",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className={`${inter.variable} h-full`} suppressHydrationWarning>
+      <body className="h-full flex flex-col antialiased font-sans">
+        <Providers>
+          <StallBanner />
+          <TopBar />
+          <div className="flex flex-1 min-h-0">
+            <aside className="hidden lg:block w-60 border-r border-border shrink-0">
+              <Sidebar />
+            </aside>
+            <main className="flex-1 min-w-0 flex flex-col">{children}</main>
+          </div>
+        </Providers>
+      </body>
+    </html>
+  );
+}

package/plugin/dashboard/app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function RootPage() {
+  redirect("/dashboard");
+}