claude-smart 0.2.22 → 0.2.24

package/plugin/dashboard/components/common/delete-all-button.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useState } from "react";
+import { Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface Props {
+  label: string;
+  confirmMessage: string;
+  disabled?: boolean;
+  onConfirm: () => Promise<void>;
+}
+
+export function DeleteAllButton({
+  label,
+  confirmMessage,
+  disabled,
+  onConfirm,
+}: Props) {
+  const [busy, setBusy] = useState(false);
+
+  const click = async () => {
+    if (busy) return;
+    if (!confirm(confirmMessage)) return;
+    setBusy(true);
+    try {
+      await onConfirm();
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={click}
+      disabled={busy || disabled}
+      className="text-destructive hover:bg-destructive/10 hover:text-destructive border-destructive/30"
+    >
+      <Trash2 className="h-3.5 w-3.5" />
+      {busy ? "Deleting…" : label}
+    </Button>
+  );
+}

package/plugin/dashboard/components/common/empty-state.tsx

@@ -0,0 +1,34 @@
+import { cn } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  className,
+}: {
+  icon?: LucideIcon;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center text-center py-12 px-6 border border-dashed border-border rounded-xl bg-muted/20",
+        className,
+      )}
+    >
+      {Icon && (
+        <Icon className="h-8 w-8 text-muted-foreground/60 mb-3" strokeWidth={1.5} />
+      )}
+      <div className="text-sm font-medium text-foreground">{title}</div>
+      {description && (
+        <p className="text-sm text-muted-foreground mt-1 max-w-md">{description}</p>
+      )}
+      {action && <div className="mt-4">{action}</div>}
+    </div>
+  );
+}

package/plugin/dashboard/components/common/learnings-badge.tsx

@@ -0,0 +1,34 @@
+import { Sparkles } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+export function LearningsBadge({
+  count,
+  size = "md",
+  className,
+}: {
+  count: number;
+  size?: "md" | "sm";
+  className?: string;
+}) {
+  if (count <= 0) return null;
+  const isSmall = size === "sm";
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        "border-amber-500/40 gap-1",
+        isSmall ? "h-4 px-1.5 text-[10px] shrink-0" : "h-5",
+        className,
+      )}
+    >
+      <Sparkles
+        className={cn(
+          "text-amber-500",
+          isSmall ? "h-2.5 w-2.5" : "h-3 w-3",
+        )}
+      />
+      {count} learning applied
+    </Badge>
+  );
+}

package/plugin/dashboard/components/common/page-header.tsx

@@ -0,0 +1,34 @@
+import { cn } from "@/lib/utils";
+
+export function PageHeader({
+  title,
+  description,
+  actions,
+  className,
+}: {
+  title: string;
+  description?: string;
+  actions?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "border-b border-border px-6 py-5 flex flex-wrap items-start justify-between gap-4",
+        className,
+      )}
+    >
+      <div className="min-w-[min(18rem,100%)] flex-1">
+        <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
+        {description && (
+          <p className="text-sm text-muted-foreground mt-0.5">{description}</p>
+        )}
+      </div>
+      {actions && (
+        <div className="flex max-w-full flex-wrap items-center justify-end gap-2">
+          {actions}
+        </div>
+      )}
+    </div>
+  );
+}

package/plugin/dashboard/components/common/page-tabs.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import Link from "next/link";
+import type { LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface PageTabItem {
+  id: string;
+  label: string;
+  description?: string;
+  count?: number;
+  href?: string;
+  icon?: LucideIcon;
+}
+
+interface PageTabsProps {
+  items: PageTabItem[];
+  activeId: string;
+  onSelect?: (id: string) => void;
+  className?: string;
+}
+
+export function PageTabs({
+  items,
+  activeId,
+  onSelect,
+  className,
+}: PageTabsProps) {
+  return (
+    <div
+      className={cn(
+        "grid gap-2 sm:grid-cols-[repeat(auto-fit,minmax(220px,1fr))]",
+        className,
+      )}
+      role="tablist"
+    >
+      {items.map((item) => {
+        const active = item.id === activeId;
+        const Icon = item.icon;
+        const content = (
+          <>
+            <span className="flex items-start justify-between gap-3">
+              <span className="flex min-w-0 items-center gap-2">
+                {Icon && (
+                  <Icon
+                    className={cn(
+                      "mt-0.5 h-4 w-4 shrink-0",
+                      active ? "text-foreground" : "text-muted-foreground",
+                    )}
+                  />
+                )}
+                <span className="truncate text-sm font-semibold">
+                  {item.label}
+                </span>
+              </span>
+              {item.count !== undefined && (
+                <span
+                  className={cn(
+                    "rounded-md border px-1.5 py-0.5 font-mono text-[10px]",
+                    active
+                      ? "border-foreground/20 bg-background text-foreground"
+                      : "border-border bg-muted/40 text-muted-foreground",
+                  )}
+                >
+                  {item.count}
+                </span>
+              )}
+            </span>
+            {item.description && (
+              <span className="mt-1 block text-xs leading-relaxed text-muted-foreground">
+                {item.description}
+              </span>
+            )}
+          </>
+        );
+
+        const className = cn(
+          "relative rounded-lg border px-3 py-2.5 text-left transition-colors",
+          "hover:border-foreground/25 hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
+          active
+            ? "border-foreground/25 bg-card text-foreground shadow-sm before:absolute before:inset-x-3 before:top-0 before:h-0.5 before:rounded-full before:bg-foreground"
+            : "border-border bg-background/60 text-muted-foreground",
+        );
+
+        if (item.href) {
+          return (
+            <Link
+              key={item.id}
+              href={item.href}
+              className={className}
+              role="tab"
+              aria-selected={active}
+              aria-current={active ? "page" : undefined}
+            >
+              {content}
+            </Link>
+          );
+        }
+
+        return (
+          <button
+            key={item.id}
+            type="button"
+            className={className}
+            role="tab"
+            aria-selected={active}
+            onClick={() => onSelect?.(item.id)}
+          >
+            {content}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/plugin/dashboard/components/common/stat-card.tsx

@@ -0,0 +1,38 @@
+import { cn } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+
+export function StatCard({
+  label,
+  value,
+  hint,
+  icon: Icon,
+  className,
+}: {
+  label: string;
+  value: string | number;
+  hint?: string;
+  icon?: LucideIcon;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "rounded-xl border border-border bg-card px-5 py-4 flex items-start justify-between gap-4",
+        className,
+      )}
+    >
+      <div className="min-w-0">
+        <div className="text-xs uppercase tracking-wide text-muted-foreground font-medium">
+          {label}
+        </div>
+        <div className="mt-1.5 text-2xl font-semibold tracking-tight tabular-nums">
+          {value}
+        </div>
+        {hint && (
+          <div className="text-xs text-muted-foreground mt-1">{hint}</div>
+        )}
+      </div>
+      {Icon && <Icon className="h-4 w-4 text-muted-foreground mt-0.5" />}
+    </div>
+  );
+}

package/plugin/dashboard/components/layout/nav-items.ts

@@ -0,0 +1,22 @@
+import {
+  LayoutDashboard,
+  MessageSquare,
+  Users,
+  BookOpen,
+  Settings,
+  type LucideIcon,
+} from "lucide-react";
+
+export interface NavItem {
+  href: string;
+  label: string;
+  icon: LucideIcon;
+}
+
+export const navItems: NavItem[] = [
+  { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
+  { href: "/sessions", label: "Sessions", icon: MessageSquare },
+  { href: "/preferences", label: "Preferences", icon: Users },
+  { href: "/skills", label: "Skills", icon: BookOpen },
+  { href: "/configure", label: "Configure", icon: Settings },
+];

package/plugin/dashboard/components/layout/sidebar.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { navItems } from "./nav-items";
+
+export function Sidebar() {
+  const pathname = usePathname();
+
+  return (
+    <ScrollArea className="h-full">
+      <div className="px-3 py-4">
+        <div className="px-2 mb-6">
+          <div className="font-semibold text-sm">Claude-Smart</div>
+          <div className="text-[11px] text-muted-foreground font-mono">dashboard</div>
+        </div>
+
+        <nav className="space-y-0.5">
+          {navItems.map((item) => {
+            const active =
+              pathname === item.href || pathname.startsWith(`${item.href}/`);
+            const Icon = item.icon;
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  "flex items-center gap-2 px-2 py-1.5 text-sm rounded-md transition-colors",
+                  active
+                    ? "bg-accent text-accent-foreground font-medium"
+                    : "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+                )}
+              >
+                <Icon className="h-4 w-4 shrink-0" />
+                <span className="truncate">{item.label}</span>
+              </Link>
+            );
+          })}
+        </nav>
+      </div>
+    </ScrollArea>
+  );
+}

package/plugin/dashboard/components/layout/top-bar.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import Image from "next/image";
+import { Moon, Sun, Menu } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { useSettings } from "@/hooks/use-settings";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { Sidebar } from "./sidebar";
+
+export function TopBar() {
+  const { reflexioUrl, setReflexioUrl } = useSettings();
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <header className="h-14 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 flex items-center px-4 gap-3 shrink-0">
+      <Sheet>
+        <SheetTrigger
+          render={<Button variant="ghost" size="icon" className="lg:hidden" />}
+        >
+          <Menu className="h-4 w-4" />
+        </SheetTrigger>
+        <SheetContent side="left" className="w-72 p-0">
+          <Sidebar />
+        </SheetContent>
+      </Sheet>
+
+      <div className="flex items-center gap-2 flex-1 min-w-0">
+        <Image
+          src="/claude-smart-icon.png"
+          alt="claude-smart"
+          width={24}
+          height={24}
+          className="h-6 w-6 shrink-0"
+          priority
+        />
+        <span className="text-sm font-semibold whitespace-nowrap hidden sm:block">
+          Claude-Smart
+        </span>
+        <div className="mx-2 h-5 w-px bg-border hidden sm:block" />
+        <label className="text-xs text-muted-foreground whitespace-nowrap hidden sm:block">
+          Reflexio
+        </label>
+        <Input
+          value={reflexioUrl}
+          onChange={(e) => setReflexioUrl(e.target.value)}
+          placeholder="http://localhost:8071"
+          className="h-8 text-xs max-w-xs font-mono"
+        />
+      </div>
+
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-8 w-8"
+        onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      >
+        <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+        <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      </Button>
+    </header>
+  );
+}

package/plugin/dashboard/components/stall-banner.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useStallState } from "@/hooks/use-stall-state";
+
+/**
+ * Persistent top-of-page banner shown while reflexio learning is stalled.
+ * Renders nothing when state is null or clean.
+ */
+export function StallBanner() {
+  const state = useStallState();
+  if (!state || !state.stalled) return null;
+
+  const text = renderText(state.reason, state.reset_estimate);
+  if (!text) return null;
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className="w-full bg-amber-100 text-amber-900 border-b border-amber-300 px-4 py-2 text-sm dark:bg-amber-950 dark:text-amber-100 dark:border-amber-800"
+    >
+      {text}
+    </div>
+  );
+}
+
+function renderText(
+  reason: string | null,
+  resetEstimate: string | null,
+): string {
+  if (reason === "billing_error") {
+    if (resetEstimate) {
+      const formatted = formatReset(resetEstimate);
+      return `claude-smart: learning paused — Agent SDK credit exhausted (resets ~${formatted}).`;
+    }
+    return "claude-smart: learning paused — Agent SDK credit exhausted.";
+  }
+  if (reason === "auth_error") {
+    return "claude-smart: learning paused — please run /login in Claude Code.";
+  }
+  return "";
+}
+
+function formatReset(iso: string): string {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  return d.toLocaleString(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}

package/plugin/dashboard/components/ui/badge.tsx

@@ -0,0 +1,52 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }

package/plugin/dashboard/components/ui/button.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/plugin/dashboard/components/ui/collapsible.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"
+
+function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
+  return (
+    <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
+  )
+}
+
+function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
+  return (
+    <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

package/plugin/dashboard/components/ui/input.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/plugin/dashboard/components/ui/label.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }