claude-smart 0.2.30 → 0.2.32

package/plugin/dashboard/app/rules/[id]/page.tsx

@@ -0,0 +1,51 @@
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { AlertTriangle, ArrowLeft } from "lucide-react";
+import { PageHeader } from "@/components/common/page-header";
+import { EmptyState } from "@/components/common/empty-state";
+import { Button } from "@/components/ui/button";
+import { resolveRuleLink } from "@/lib/session-reader";
+
+export const dynamic = "force-dynamic";
+
+export default async function RuleResolverPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id: rawId } = await params;
+  let id: string;
+  try {
+    id = decodeURIComponent(rawId);
+  } catch {
+    id = rawId;
+  }
+  const resolved = await resolveRuleLink(id);
+  if (resolved) {
+    redirect(resolved.href);
+  }
+
+  return (
+    <div className="flex-1 overflow-auto">
+      <PageHeader
+        title="Rule link not found"
+        description="This short claude-smart link could not be resolved from the local session registry."
+      />
+      <div className="p-6 max-w-2xl mx-auto">
+        <EmptyState
+          icon={AlertTriangle}
+          title="Rule link not found"
+          description="The session may have been cleared, or the short link may come from a different machine."
+          action={
+            <Link href="/sessions">
+              <Button variant="outline" size="sm">
+                <ArrowLeft className="h-3.5 w-3.5" />
+                Back to sessions
+              </Button>
+            </Link>
+          }
+        />
+      </div>
+    </div>
+  );
+}

package/plugin/dashboard/app/sessions/[sessionId]/page.tsx

@@ -121,7 +121,7 @@ export default function InteractionDetailPage({
                 <article
                   key={idx}
                   className={cn(
-                    "rounded-xl border px-4 py-3 bg-card",
+                    "rounded-lg border px-4 py-3 bg-card",
                     flagged
                       ? "border-destructive/30 bg-destructive/5"
                       : "border-border",
@@ -177,7 +177,7 @@ export default function InteractionDetailPage({
                                 <div className="mt-1 space-y-1.5">
                                   {hasInput && (
                                     <div>
-                                      <div className="text-[10px] font-mono uppercase tracking-wide text-muted-foreground/70 mb-0.5">
+                                      <div className="text-[10px] font-mono uppercase text-muted-foreground/70 mb-0.5">
                                         input
                                       </div>
                                       <pre className="whitespace-pre-wrap break-words rounded-md border border-border bg-muted/40 px-2 py-1 text-[10px] font-mono text-muted-foreground">
@@ -187,7 +187,7 @@ export default function InteractionDetailPage({
                                   )}
                                   {hasOutput && (
                                     <div>
-                                      <div className="text-[10px] font-mono uppercase tracking-wide text-muted-foreground/70 mb-0.5">
+                                      <div className="text-[10px] font-mono uppercase text-muted-foreground/70 mb-0.5">
                                         output
                                       </div>
                                       <pre className="whitespace-pre-wrap break-words rounded-md border border-border bg-muted/40 px-2 py-1 text-[10px] font-mono text-muted-foreground">
@@ -241,7 +241,7 @@ function CitedItemsRow({ items }: { items: CitedItem[] }) {
               ? item.source_kind === "agent_playbook"
                 ? `/skills/shared/${encodeURIComponent(targetId)}`
                 : `/skills/project/${encodeURIComponent(targetId)}`
-              : `/preferences/${encodeURIComponent(targetId)}`;
+              : `/preferences/project/${encodeURIComponent(targetId)}`;
           return (
             <Link
               key={item.id}

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

@@ -60,12 +60,12 @@ export default function SessionsPage() {
         actions={
           <div className="flex items-center gap-2">
             <div className="relative">
-              <Search className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+              <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
               <Input
                 value={filter}
                 onChange={(e) => setFilter(e.target.value)}
                 placeholder="Search sessions…"
-                className="h-8 w-64 pl-7 text-xs"
+                className="h-9 w-64 pl-8 text-xs bg-background/80"
               />
             </div>
             <DeleteAllButton
@@ -108,14 +108,14 @@ export default function SessionsPage() {
             {grouped.map(([label, items]) => (
               <section key={label}>
                 <div className="flex items-center gap-2 mb-2 px-1">
-                  <h2 className="text-[11px] uppercase tracking-wider font-medium text-muted-foreground">
+                  <h2 className="text-[11px] uppercase font-semibold text-muted-foreground">
                     {label}
                   </h2>
                   <span className="text-[11px] text-muted-foreground/70">
                     · {items.length}
                   </span>
                 </div>
-                <div className="rounded-xl border border-border divide-y divide-border bg-card overflow-hidden">
+                <div className="rounded-lg border border-border divide-y divide-border bg-card/90 overflow-hidden shadow-sm">
                   {items.map((s) => (
                     <div
                       key={s.session_id}
@@ -134,11 +134,14 @@ export default function SessionsPage() {
                           );
                         }
                       }}
-                      className="flex items-center gap-3 px-4 py-2.5 cursor-pointer hover:bg-accent/40 focus:bg-accent/40 focus:outline-none transition-colors"
+                      className="flex cursor-pointer flex-col gap-2 px-4 py-3 transition-colors hover:bg-accent/45 focus:bg-accent/45 focus:outline-none sm:flex-row sm:items-center"
                     >
-                      <MessageSquare className="h-4 w-4 text-muted-foreground shrink-0" />
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-2">
+                      <div className="flex min-w-0 items-start gap-3">
+                        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+                          <MessageSquare className="h-4 w-4" />
+                        </span>
+                        <div className="flex-1 min-w-0">
+                        <div className="flex flex-wrap items-center gap-2">
                           <p className="text-sm truncate">
                             {s.preview ?? (
                               <span className="text-muted-foreground italic">
@@ -167,10 +170,11 @@ export default function SessionsPage() {
                                   {s.published_up_to} published
                                 </span>
                               </>
-                            )}
+                          )}
+                        </div>
                         </div>
                       </div>
-                      <div className="text-xs text-muted-foreground shrink-0 tabular-nums">
+                      <div className="self-end text-xs text-muted-foreground tabular-nums sm:shrink-0">
                         {formatRelative(s.last_activity)}
                       </div>
                     </div>

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

@@ -2,7 +2,7 @@
 
 import { useEffect, useMemo, useState } from "react";
 import Link from "next/link";
-import { BookOpen, Layers3 } from "lucide-react";
+import { BookOpen, ChevronRight, Layers3 } from "lucide-react";
 import { PageHeader } from "@/components/common/page-header";
 import { EmptyState } from "@/components/common/empty-state";
 import { DeleteAllButton } from "@/components/common/delete-all-button";
@@ -17,7 +17,6 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { reflexio } from "@/lib/reflexio-client";
-import { useSettings } from "@/hooks/use-settings";
 import { formatRelative } from "@/lib/format";
 import { cn } from "@/lib/utils";
 import {
@@ -26,10 +25,17 @@ import {
   type AgentPlaybookStatusLabel,
   type StatusLabel,
 } from "@/lib/status";
-import type { AgentPlaybook, UserPlaybook } from "@/lib/types";
+import type {
+  AgentPlaybook,
+  PlaybookApplicationStat,
+  UserPlaybook,
+} from "@/lib/types";
 
 type SkillKind = "project" | "shared";
 type SkillStatus = StatusLabel | AgentPlaybookStatusLabel;
+type SkillSort = "newest" | "applied";
+
+const ALL_LIFECYCLE_STATUSES: (string | null)[] = [null, "pending", "archived"];
 
 const SHARED_STATUS_META: Record<
   AgentPlaybookStatusLabel,
@@ -86,27 +92,51 @@ function sharedSkill(p: AgentPlaybook): SkillCard {
   };
 }
 
+function skillStatKey(skill: SkillCard): string {
+  const sourceKind =
+    skill.kind === "shared" ? "agent_playbook" : "user_playbook";
+  return `playbook:${sourceKind}:${skill.id}`;
+}
+
 export default function SkillsPage() {
-  const { reflexioUrl } = useSettings();
   const [projectSkills, setProjectSkills] = useState<UserPlaybook[] | null>(null);
   const [sharedSkills, setSharedSkills] = useState<AgentPlaybook[] | null>(null);
+  const [appStats, setAppStats] = useState<PlaybookApplicationStat[] | null>(
+    null,
+  );
   const [error, setError] = useState<string | null>(null);
   const [activeKind, setActiveKind] = useState<SkillKind>("project");
   const [agentVersion, setAgentVersion] = useState<string>("__all__");
   const [statusFilter, setStatusFilter] = useState<string>("CURRENT");
+  const [sortBy, setSortBy] = useState<SkillSort>("newest");
   const [search, setSearch] = useState("");
 
   useEffect(() => {
     let cancelled = false;
     async function load() {
       try {
-        const [projectRes, sharedRes] = await Promise.all([
-          reflexio.getUserPlaybooks({ reflexioUrl, limit: 200 }),
-          reflexio.getAgentPlaybooks({ reflexioUrl, limit: 200 }),
+        const [projectRes, sharedRes, statsRes] = await Promise.all([
+          reflexio.getUserPlaybooks({
+            limit: 500,
+            statusFilter: ALL_LIFECYCLE_STATUSES,
+          }),
+          reflexio.getAgentPlaybooks({
+            limit: 500,
+            statusFilter: ALL_LIFECYCLE_STATUSES,
+          }),
+          fetch("/api/rules/applied?daysBack=30&limit=200", {
+            cache: "no-store",
+          })
+            .then((r) => r.json())
+            .catch(() => ({
+              success: false,
+              stats: [] as PlaybookApplicationStat[],
+            })),
         ]);
         if (cancelled) return;
         setProjectSkills(projectRes.user_playbooks ?? []);
         setSharedSkills(sharedRes.agent_playbooks ?? []);
+        setAppStats(statsRes.stats ?? []);
         setError(null);
       } catch (e) {
         if (!cancelled) setError(e instanceof Error ? e.message : String(e));
@@ -116,7 +146,15 @@ export default function SkillsPage() {
     return () => {
       cancelled = true;
     };
-  }, [reflexioUrl]);
+  }, []);
+
+  const statsByRule = useMemo(() => {
+    const map = new Map<string, PlaybookApplicationStat>();
+    for (const s of appStats ?? []) {
+      map.set(`${s.kind}:${s.source_kind ?? "unknown"}:${s.real_id}`, s);
+    }
+    return map;
+  }, [appStats]);
 
   const activeSkills = useMemo(() => {
     return activeKind === "project"
@@ -131,7 +169,7 @@ export default function SkillsPage() {
   }, [activeSkills]);
 
   const filtered = useMemo(() => {
-    return activeSkills.filter((p) => {
+    const matches = activeSkills.filter((p) => {
       if (agentVersion !== "__all__" && p.agentVersion !== agentVersion)
         return false;
       if (statusFilter !== "__all__" && p.status !== statusFilter) return false;
@@ -142,10 +180,24 @@ export default function SkillsPage() {
       }
       return true;
     });
-  }, [activeSkills, agentVersion, statusFilter, search]);
+    return matches.sort((a, b) => {
+      if (sortBy === "applied") {
+        const aStat = statsByRule.get(skillStatKey(a));
+        const bStat = statsByRule.get(skillStatKey(b));
+        const appliedDelta =
+          (bStat?.applied_count ?? 0) - (aStat?.applied_count ?? 0);
+        if (appliedDelta !== 0) return appliedDelta;
+        const recencyDelta =
+          (bStat?.last_applied_at ?? 0) - (aStat?.last_applied_at ?? 0);
+        if (recencyDelta !== 0) return recencyDelta;
+      }
+      return b.createdAt - a.createdAt;
+    });
+  }, [activeSkills, agentVersion, search, sortBy, statsByRule, statusFilter]);
 
   const projectCount = projectSkills?.length ?? 0;
   const sharedCount = sharedSkills?.length ?? 0;
+  const visibleActiveCount = filtered.length;
   const activeCount = activeKind === "project" ? projectCount : sharedCount;
   const loading = projectSkills === null || sharedSkills === null;
   const hasNoSharedSkills = activeKind === "shared" && sharedCount === 0;
@@ -167,7 +219,7 @@ export default function SkillsPage() {
               value={agentVersion}
               onValueChange={(v) => setAgentVersion(v ?? "__all__")}
             >
-              <SelectTrigger size="sm" className="w-40 text-xs">
+              <SelectTrigger size="sm" className="w-40 text-xs bg-background/80">
                 <SelectValue placeholder="Project" />
               </SelectTrigger>
               <SelectContent>
@@ -183,8 +235,10 @@ export default function SkillsPage() {
               value={statusFilter}
               onValueChange={(v) => setStatusFilter(v ?? "__all__")}
             >
-              <SelectTrigger size="sm" className="w-36 text-xs">
-                <SelectValue placeholder="Status" />
+              <SelectTrigger size="sm" className="w-36 text-xs bg-background/80">
+                <SelectValue placeholder="Status">
+                  {statusFilterLabel(activeKind, statusFilter)}
+                </SelectValue>
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="__all__">All</SelectItem>
@@ -218,11 +272,25 @@ export default function SkillsPage() {
                 )}
               </SelectContent>
             </Select>
+            <Select
+              value={sortBy}
+              onValueChange={(v) => setSortBy((v as SkillSort) ?? "newest")}
+            >
+              <SelectTrigger size="sm" className="w-36 text-xs bg-background/80">
+                <SelectValue placeholder="Sort">
+                  {sortBy === "applied" ? "Most applied" : "Newest"}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="newest">Newest</SelectItem>
+                <SelectItem value="applied">Most applied</SelectItem>
+              </SelectContent>
+            </Select>
             <Input
               value={search}
               onChange={(e) => setSearch(e.target.value)}
               placeholder="Search"
-              className="h-8 w-48 text-xs"
+              className="h-9 w-48 text-xs bg-background/80"
             />
             <DeleteAllButton
               label={`Delete ${activeKind === "project" ? "project" : "shared"}${activeCount > 0 ? ` (${activeCount})` : ""}`}
@@ -230,10 +298,10 @@ export default function SkillsPage() {
               disabled={activeCount === 0}
               onConfirm={async () => {
                 if (activeKind === "project") {
-                  await reflexio.deleteAllUserPlaybooks(reflexioUrl);
+                  await reflexio.deleteAllUserPlaybooks();
                   setProjectSkills([]);
                 } else {
-                  await reflexio.deleteAllAgentPlaybooks(reflexioUrl);
+                  await reflexio.deleteAllAgentPlaybooks();
                   setSharedSkills([]);
                 }
               }}
@@ -251,14 +319,14 @@ export default function SkillsPage() {
               id: "project",
               label: "Project-specific skills",
               description: "Repo-local rules learned from direct corrections",
-              count: projectCount,
+              count: activeKind === "project" ? visibleActiveCount : projectCount,
               icon: BookOpen,
             },
             {
               id: "shared",
               label: "Shared skills",
               description: "Rollups available across projects",
-              count: sharedCount,
+              count: activeKind === "shared" ? visibleActiveCount : sharedCount,
               icon: Layers3,
             },
           ]}
@@ -266,7 +334,7 @@ export default function SkillsPage() {
 
         {error && (
           <div className="rounded-lg border border-destructive/30 bg-destructive/5 text-destructive px-4 py-3 text-sm">
-            {error}. Is reflexio running on the URL in the top bar?
+            {error}. Is reflexio running on the configured backend URL?
           </div>
         )}
 
@@ -287,45 +355,60 @@ export default function SkillsPage() {
             }
           />
         ) : (
-          <div className="grid gap-3 lg:grid-cols-2">
-            {filtered.map((p) => (
-              <Link
-                key={`${p.kind}:${p.id}`}
-                href={`/skills/${p.kind}/${p.id}`}
-                className="block rounded-xl border border-border bg-card p-4 hover:bg-accent/40 transition-colors"
-              >
-                <header className="flex items-center justify-between gap-2 mb-2">
-                  <div className="flex items-center gap-2 min-w-0">
-                    <Badge variant="outline" className="h-5 font-mono text-[10px]">
-                      {p.agentVersion}
-                    </Badge>
-                    <StatusBadge kind={p.kind} status={p.status} />
-                    <Badge variant="secondary" className="h-5 text-[10px]">
-                      {p.kind === "project" ? "project-specific" : "shared"}
-                    </Badge>
-                  </div>
-                  <span className="text-[11px] text-muted-foreground shrink-0">
-                    {formatRelative(p.createdAt)}
-                  </span>
-                </header>
-                <p
-                  className={cn(
-                    "text-sm leading-relaxed line-clamp-4",
-                    !p.trigger && "text-muted-foreground italic",
-                  )}
+          <div className="overflow-hidden rounded-lg border border-border bg-card/92 shadow-sm">
+            {filtered.map((p) => {
+              const stat = statsByRule.get(skillStatKey(p));
+              return (
+                <Link
+                  key={`${p.kind}:${p.id}`}
+                  href={`/skills/${p.kind}/${p.id}`}
+                  className="group block border-b border-border px-4 py-3.5 transition-colors last:border-b-0 hover:bg-accent/35"
                 >
-                  {p.trigger || "Always applies"}
-                </p>
-                <p className="text-xs text-muted-foreground mt-2 line-clamp-2">
-                  <span className="font-medium">Rule:</span> {p.content}
-                </p>
-                {p.rationale && (
-                  <p className="text-xs text-muted-foreground mt-1 line-clamp-2">
-                    <span className="font-medium">Why:</span> {p.rationale}
+                  <header className="mb-2 flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
+                    <div className="flex min-w-0 flex-wrap items-center gap-2">
+                      <Badge
+                        variant="outline"
+                        className="h-5 max-w-56 truncate font-mono text-[10px]"
+                      >
+                        {p.agentVersion}
+                      </Badge>
+                      <StatusBadge kind={p.kind} status={p.status} />
+                      <Badge variant="secondary" className="h-5 text-[10px]">
+                        {p.kind === "project" ? "project-specific" : "shared"}
+                      </Badge>
+                      <ApplicationStatBadge stat={stat} />
+                    </div>
+                    <div className="flex shrink-0 items-center gap-1.5 pt-0.5">
+                      <span className="text-[11px] text-muted-foreground">
+                        {formatRelative(p.createdAt)}
+                      </span>
+                      <ChevronRight className="h-3.5 w-3.5 text-muted-foreground/60 transition-colors group-hover:text-foreground" />
+                    </div>
+                  </header>
+                  <p
+                    className={cn(
+                      "max-w-5xl text-sm leading-relaxed line-clamp-3",
+                      !p.trigger && "text-muted-foreground italic",
+                    )}
+                  >
+                    <span className="mr-2 align-baseline text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+                      Trigger
+                    </span>
+                    {p.trigger || "Always applies"}
                   </p>
-                )}
-              </Link>
-            ))}
+                  <p className="mt-2 max-w-5xl text-xs leading-relaxed text-muted-foreground line-clamp-2">
+                    <span className="font-medium text-foreground/80">Rule:</span>{" "}
+                    {p.content}
+                  </p>
+                  {p.rationale && (
+                    <p className="mt-1 max-w-5xl text-xs leading-relaxed text-muted-foreground line-clamp-2">
+                      <span className="font-medium text-foreground/80">Why:</span>{" "}
+                      {p.rationale}
+                    </p>
+                  )}
+                </Link>
+              );
+            })}
           </div>
         )}
       </div>
@@ -333,6 +416,42 @@ export default function SkillsPage() {
   );
 }
 
+function ApplicationStatBadge({ stat }: { stat: PlaybookApplicationStat | undefined }) {
+  if (!stat || stat.applied_count === 0) {
+    return (
+      <Badge
+        variant="outline"
+        className="h-5 text-[10px] text-muted-foreground"
+        title="No citations recorded yet for this rule. It will count once an assistant reply cites it."
+      >
+        Never applied
+      </Badge>
+    );
+  }
+  const last = formatRelative(stat.last_applied_at);
+  return (
+    <Badge
+      variant="secondary"
+      className="h-5 text-[10px]"
+      title={`Last applied ${last}`}
+    >
+      Applied {stat.applied_count}×{stat.last_applied_at ? ` · ${last}` : ""}
+    </Badge>
+  );
+}
+
+function statusFilterLabel(kind: SkillKind, status: string): string {
+  if (status === "__all__") return "All";
+  if (kind === "shared") {
+    const meta = SHARED_STATUS_META[status as AgentPlaybookStatusLabel];
+    if (meta) return meta.label;
+  }
+  if (status === "CURRENT") return "Current";
+  if (status === "PENDING") return "Pending";
+  if (status === "ARCHIVED") return "Archived";
+  return status;
+}
+
 function StatusBadge({
   kind,
   status,