claude-smart 0.2.31 → 0.2.32

package/plugin/dashboard/app/globals.css

@@ -7,8 +7,8 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-sans: var(--dashboard-font-sans);
+  --font-mono: var(--dashboard-font-mono);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -48,72 +48,76 @@
 }
 
 :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);
+  --dashboard-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", sans-serif;
+  --dashboard-font-mono: "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono",
+    Menlo, monospace;
+  --background: oklch(0.982 0.006 197);
+  --foreground: oklch(0.19 0.018 236);
+  --card: oklch(0.997 0.003 197);
+  --card-foreground: oklch(0.19 0.018 236);
+  --popover: oklch(0.997 0.003 197);
+  --popover-foreground: oklch(0.19 0.018 236);
+  --primary: oklch(0.48 0.142 202);
+  --primary-foreground: oklch(0.99 0.006 197);
+  --secondary: oklch(0.939 0.025 202);
+  --secondary-foreground: oklch(0.245 0.038 218);
+  --muted: oklch(0.949 0.011 218);
+  --muted-foreground: oklch(0.486 0.024 230);
+  --accent: oklch(0.928 0.054 185);
+  --accent-foreground: oklch(0.235 0.052 205);
+  --destructive: oklch(0.58 0.216 27);
+  --border: oklch(0.882 0.018 218);
+  --input: oklch(0.892 0.018 218);
+  --ring: oklch(0.65 0.104 192);
+  --chart-1: oklch(0.68 0.13 188);
+  --chart-2: oklch(0.62 0.15 154);
+  --chart-3: oklch(0.72 0.16 82);
+  --chart-4: oklch(0.64 0.16 24);
+  --chart-5: oklch(0.54 0.13 258);
+  --radius: 0.5rem;
+  --sidebar: oklch(0.964 0.013 213);
+  --sidebar-foreground: oklch(0.22 0.026 236);
+  --sidebar-primary: oklch(0.48 0.142 202);
+  --sidebar-primary-foreground: oklch(0.99 0.006 197);
+  --sidebar-accent: oklch(0.918 0.043 190);
+  --sidebar-accent-foreground: oklch(0.24 0.054 206);
+  --sidebar-border: oklch(0.862 0.02 218);
+  --sidebar-ring: oklch(0.65 0.104 192);
 }
 
 .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);
+  --background: oklch(0.154 0.022 236);
+  --foreground: oklch(0.938 0.012 202);
+  --card: oklch(0.205 0.027 236);
+  --card-foreground: oklch(0.938 0.012 202);
+  --popover: oklch(0.205 0.027 236);
+  --popover-foreground: oklch(0.938 0.012 202);
+  --primary: oklch(0.72 0.119 188);
+  --primary-foreground: oklch(0.154 0.022 236);
+  --secondary: oklch(0.265 0.029 235);
+  --secondary-foreground: oklch(0.914 0.014 202);
+  --muted: oklch(0.258 0.027 235);
+  --muted-foreground: oklch(0.69 0.026 219);
+  --accent: oklch(0.306 0.054 202);
+  --accent-foreground: oklch(0.9 0.05 183);
+  --destructive: oklch(0.66 0.21 24);
+  --border: oklch(0.332 0.031 236);
+  --input: oklch(0.354 0.034 236);
+  --ring: oklch(0.72 0.119 188);
+  --chart-1: oklch(0.72 0.119 188);
+  --chart-2: oklch(0.72 0.14 148);
+  --chart-3: oklch(0.78 0.15 82);
+  --chart-4: oklch(0.68 0.17 24);
+  --chart-5: oklch(0.69 0.12 258);
+  --sidebar: oklch(0.184 0.027 236);
+  --sidebar-foreground: oklch(0.916 0.014 202);
+  --sidebar-primary: oklch(0.72 0.119 188);
+  --sidebar-primary-foreground: oklch(0.154 0.022 236);
+  --sidebar-accent: oklch(0.29 0.051 202);
+  --sidebar-accent-foreground: oklch(0.9 0.05 183);
+  --sidebar-border: oklch(0.332 0.031 236);
+  --sidebar-ring: oklch(0.72 0.119 188);
 }
 
 @layer base {
@@ -122,8 +126,18 @@
   }
   body {
     @apply bg-background text-foreground;
+    background-image:
+      linear-gradient(to right, oklch(0.88 0.018 218 / 0.45) 1px, transparent 1px),
+      linear-gradient(to bottom, oklch(0.88 0.018 218 / 0.45) 1px, transparent 1px);
+    background-size: 32px 32px;
+    background-position: -1px -1px;
   }
   html {
     @apply font-sans;
   }
-}
+  .dark body {
+    background-image:
+      linear-gradient(to right, oklch(0.38 0.032 236 / 0.28) 1px, transparent 1px),
+      linear-gradient(to bottom, oklch(0.38 0.032 236 / 0.28) 1px, transparent 1px);
+  }
+}

package/plugin/dashboard/app/layout.tsx

@@ -1,16 +1,10 @@
 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",
@@ -22,16 +16,25 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className={`${inter.variable} h-full`} suppressHydrationWarning>
-      <body className="h-full flex flex-col antialiased font-sans">
+    <html
+      lang="en"
+      className="h-full"
+      suppressHydrationWarning
+    >
+      <body
+        className="h-full flex flex-col antialiased font-sans"
+        suppressHydrationWarning
+      >
         <Providers>
           <StallBanner />
           <TopBar />
           <div className="flex flex-1 min-h-0">
-            <aside className="hidden lg:block w-60 border-r border-border shrink-0">
+            <aside className="hidden lg:block w-64 border-r border-sidebar-border bg-sidebar/95 shrink-0">
               <Sidebar />
             </aside>
-            <main className="flex-1 min-w-0 flex flex-col">{children}</main>
+            <main className="flex-1 min-w-0 flex flex-col bg-background/88">
+              {children}
+            </main>
           </div>
         </Providers>
       </body>

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

@@ -5,7 +5,6 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import {
   ArrowLeft,
-  Trash2,
   Save,
   AlertTriangle,
   Pencil,
@@ -23,12 +22,12 @@ import {
 } from "lucide-react";
 import { PageHeader } from "@/components/common/page-header";
 import { EmptyState } from "@/components/common/empty-state";
+import { DeleteLearningDangerZone } from "@/components/common/delete-learning-danger-zone";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
 import { reflexio } from "@/lib/reflexio-client";
-import { useSettings } from "@/hooks/use-settings";
 import { formatTimestamp, truncateId } from "@/lib/format";
 import { cn } from "@/lib/utils";
 import { statusLabel as status } from "@/lib/status";
@@ -42,7 +41,6 @@ export default function PreferenceDetailPage({
   const { id: rawId } = use(params);
   const id = decodeURIComponent(rawId);
   const router = useRouter();
-  const { reflexioUrl } = useSettings();
 
   const [profile, setProfile] = useState<UserProfile | null>(null);
   const [notFound, setNotFound] = useState(false);
@@ -55,7 +53,7 @@ export default function PreferenceDetailPage({
   useEffect(() => {
     let cancelled = false;
     reflexio
-      .getAllProfiles({ reflexioUrl, limit: 500 })
+      .getAllProfiles({ limit: 500 })
       .then((res) => {
         if (cancelled) return;
         const found = (res.user_profiles ?? []).find(
@@ -74,7 +72,7 @@ export default function PreferenceDetailPage({
     return () => {
       cancelled = true;
     };
-  }, [id, reflexioUrl]);
+  }, [id]);
 
   const dirty = useMemo(
     () => !!profile && profile.content !== content,
@@ -92,7 +90,6 @@ export default function PreferenceDetailPage({
           profile_id: profile.profile_id,
           content,
         },
-        reflexioUrl,
       );
       setProfile({ ...profile, content });
       setEditing(false);
@@ -105,12 +102,10 @@ export default function PreferenceDetailPage({
 
   const remove = async () => {
     if (!profile) return;
-    if (!confirm("Delete this preference? This cannot be undone.")) return;
     setDeleting(true);
     try {
       await reflexio.deleteUserProfile(
         { user_id: profile.user_id, profile_id: profile.profile_id },
-        reflexioUrl,
       );
       router.push("/preferences");
     } catch (e) {
@@ -200,7 +195,7 @@ export default function PreferenceDetailPage({
         <div className="mx-auto max-w-5xl grid gap-6 lg:grid-cols-[1fr_280px]">
           <div className="space-y-6 min-w-0">
             {error && (
-              <div className="rounded-xl border border-destructive/30 bg-destructive/5 text-destructive px-4 py-3 text-sm flex items-start gap-2">
+              <div className="rounded-lg border border-destructive/30 bg-destructive/5 text-destructive px-4 py-3 text-sm flex items-start gap-2">
                 <AlertTriangle className="h-4 w-4 mt-0.5 shrink-0" />
                 <span>{error}</span>
               </div>
@@ -237,7 +232,7 @@ export default function PreferenceDetailPage({
                   onChange={(e) => setContent(e.target.value)}
                   rows={6}
                   placeholder="e.g. Project bans pytest-asyncio; uses anyio with trio backend for async tests."
-                  className="w-full rounded-xl border border-input bg-transparent px-4 py-3 text-sm leading-relaxed font-sans resize-y outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 placeholder:text-muted-foreground"
+                  className="w-full rounded-lg border border-input bg-transparent px-4 py-3 text-sm leading-relaxed font-sans resize-y outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 placeholder:text-muted-foreground"
                 />
               ) : (
                 <Prose text={profile?.content ?? ""} />
@@ -270,7 +265,7 @@ export default function PreferenceDetailPage({
                 title="Custom features"
                 hint="Structured metadata attached to this preference."
               >
-                <div className="rounded-xl border border-border bg-card overflow-hidden">
+                <div className="rounded-lg border border-border bg-card overflow-hidden">
                   <dl className="divide-y divide-border">
                     {customEntries.map(([k, v]) => (
                       <div
@@ -306,8 +301,8 @@ export default function PreferenceDetailPage({
 
           {profile && (
             <aside className="space-y-3 lg:sticky lg:top-6 lg:self-start">
-              <div className="rounded-xl border border-border bg-card p-4">
-                <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-3">
+              <div className="rounded-lg border border-border bg-card p-4">
+                <h3 className="text-xs font-semibold uppercase text-muted-foreground mb-3">
                   Metadata
                 </h3>
                 <dl className="space-y-2.5 text-sm">
@@ -391,7 +386,7 @@ function Prose({ text }: { text: string }) {
     return <p className="text-sm text-muted-foreground italic">—</p>;
   }
   return (
-    <div className="rounded-xl border border-border bg-card px-4 py-3">
+    <div className="rounded-lg border border-border bg-card px-4 py-3">
       <p className="text-sm leading-relaxed whitespace-pre-wrap break-words">
         {text}
       </p>
@@ -509,23 +504,17 @@ function DangerZone({
   disabled: boolean;
 }) {
   return (
-    <section className="rounded-xl border border-destructive/30 bg-destructive/5 p-4 flex items-start justify-between gap-4">
-      <div className="min-w-0">
-        <h3 className="text-sm font-semibold text-destructive">Danger zone</h3>
-        <p className="text-xs text-muted-foreground mt-0.5">
-          Deleting removes this preference permanently. Preferences regenerate from
-          fresh interactions, so this is safe but not reversible.
-        </p>
-      </div>
-      <Button
-        variant="destructive"
-        size="sm"
-        onClick={onDelete}
-        disabled={deleting || disabled}
-      >
-        <Trash2 className="h-3.5 w-3.5" />
-        {deleting ? "Deleting…" : "Delete"}
-      </Button>
-    </section>
+    <DeleteLearningDangerZone
+      learningName="this preference"
+      description="Delete this claude-smart preference permanently."
+      consequences={[
+        "This preference will stop being applied in future claude-smart responses.",
+        "Historical session records may still show prior uses.",
+        "Future interactions may learn a similar preference again, but this record cannot be restored.",
+      ]}
+      onDelete={onDelete}
+      deleting={deleting}
+      disabled={disabled}
+    />
   );
 }

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { Users, ChevronRight } from "lucide-react";
 import { PageHeader } from "@/components/common/page-header";
@@ -8,40 +8,92 @@ import { EmptyState } from "@/components/common/empty-state";
 import { DeleteAllButton } from "@/components/common/delete-all-button";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { reflexio } from "@/lib/reflexio-client";
-import { useSettings } from "@/hooks/use-settings";
 import { formatRelative, truncateId } from "@/lib/format";
-import type { UserProfile } from "@/lib/types";
+import type { PlaybookApplicationStat, UserProfile } from "@/lib/types";
+
+type PreferenceSort = "newest" | "applied";
+
+function profileStatKey(profile: UserProfile): string {
+  return `profile:profile:${profile.profile_id}`;
+}
 
 export default function PreferencesPage() {
-  const { reflexioUrl } = useSettings();
   const [profiles, setProfiles] = useState<UserProfile[] | null>(null);
+  const [appStats, setAppStats] = useState<PlaybookApplicationStat[] | null>(
+    null,
+  );
   const [error, setError] = useState<string | null>(null);
+  const [sortBy, setSortBy] = useState<PreferenceSort>("newest");
   const [filter, setFilter] = useState("");
 
   useEffect(() => {
     let cancelled = false;
-    reflexio
-      .getAllProfiles({ reflexioUrl })
-      .then((res) => {
+    async function load() {
+      try {
+        const [profileRes, statsRes] = await Promise.all([
+          reflexio.getAllProfiles(),
+          fetch("/api/rules/applied?daysBack=30&limit=200", {
+            cache: "no-store",
+          })
+            .then((r) => r.json())
+            .catch(() => ({
+              success: false,
+              stats: [] as PlaybookApplicationStat[],
+            })),
+        ]);
+        if (cancelled) return;
+        setProfiles(profileRes.user_profiles ?? []);
+        setAppStats(statsRes.stats ?? []);
+        setError(null);
+      } catch (e) {
         if (!cancelled) {
-          setProfiles(res.user_profiles ?? []);
-          setError(null);
+          setError(e instanceof Error ? e.message : String(e));
         }
-      })
-      .catch((e) => {
-        if (!cancelled) setError(e instanceof Error ? e.message : String(e));
-      });
+      }
+    }
+    load();
     return () => {
       cancelled = true;
     };
-  }, [reflexioUrl]);
+  }, []);
 
-  const filtered = (profiles ?? []).filter(
-    (p) =>
-      p.content.toLowerCase().includes(filter.toLowerCase()) ||
-      p.user_id.toLowerCase().includes(filter.toLowerCase()),
-  );
+  const statsByProfile = 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 filtered = useMemo(() => {
+    const query = filter.toLowerCase();
+    const matches = (profiles ?? []).filter(
+      (p) =>
+        p.content.toLowerCase().includes(query) ||
+        p.user_id.toLowerCase().includes(query),
+    );
+    return matches.sort((a, b) => {
+      if (sortBy === "applied") {
+        const aStat = statsByProfile.get(profileStatKey(a));
+        const bStat = statsByProfile.get(profileStatKey(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.last_modified_timestamp - a.last_modified_timestamp;
+    });
+  }, [filter, profiles, sortBy, statsByProfile]);
 
   return (
     <div className="flex-1 overflow-auto">
@@ -49,19 +101,33 @@ export default function PreferencesPage() {
         title="Preferences"
         description="Project-scoped preferences extracted from interactions."
         actions={
-          <div className="flex items-center gap-2">
+          <div className="flex max-w-full flex-wrap items-center justify-end gap-2">
+            <Select
+              value={sortBy}
+              onValueChange={(v) => setSortBy((v as PreferenceSort) ?? "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={filter}
               onChange={(e) => setFilter(e.target.value)}
               placeholder="Filter"
-              className="h-8 w-56 text-xs"
+              className="h-9 w-56 text-xs bg-background/80"
             />
             <DeleteAllButton
               label={`Delete all${profiles && profiles.length > 0 ? ` (${profiles.length})` : ""}`}
               confirmMessage={`Delete ALL ${profiles?.length ?? 0} preferences? Preferences regenerate from fresh interactions, but this cannot be undone.`}
               disabled={!profiles || profiles.length === 0}
               onConfirm={async () => {
-                await reflexio.deleteAllProfiles(reflexioUrl);
+                await reflexio.deleteAllProfiles();
                 setProfiles([]);
               }}
             />
@@ -72,7 +138,7 @@ export default function PreferencesPage() {
       <div className="p-6">
         {error && (
           <div className="rounded-lg border border-destructive/30 bg-destructive/5 text-destructive px-4 py-3 text-sm mb-4">
-            {error}. Is reflexio running on the URL in the top bar?
+            {error}. Is reflexio running on the configured backend URL?
           </div>
         )}
 
@@ -85,42 +151,76 @@ export default function PreferencesPage() {
             description="Keep using Claude with claude-smart enabled — preferences will appear here automatically as the extractor learns patterns from your interactions."
           />
         ) : (
-          <div className="grid gap-3 md:grid-cols-2">
-            {filtered.map((p) => (
-              <Link
-                key={p.profile_id}
-                href={`/preferences/${encodeURIComponent(p.profile_id)}`}
-                className="group 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]">
-                      {truncateId(p.user_id, 32, 8)}
-                    </Badge>
-                    {p.status && (
-                      <Badge variant="secondary" className="h-5 text-[10px]">
-                        {p.status}
+          <div className="overflow-hidden rounded-lg border border-border bg-card/92 shadow-sm">
+            {filtered.map((p) => {
+              const stat = statsByProfile.get(profileStatKey(p));
+              return (
+                <Link
+                  key={p.profile_id}
+                  href={`/preferences/project/${encodeURIComponent(p.profile_id)}`}
+                  className="group block border-b border-border px-4 py-3.5 transition-colors last:border-b-0 hover:bg-accent/35"
+                >
+                  <header className="mb-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+                    <div className="flex min-w-0 flex-wrap items-center gap-2">
+                      <Badge variant="outline" className="h-5 font-mono text-[10px]">
+                        {truncateId(p.user_id, 32, 8)}
                       </Badge>
-                    )}
-                  </div>
-                  <div className="flex items-center gap-1.5 shrink-0">
-                    <span className="text-[11px] text-muted-foreground">
-                      {formatRelative(p.last_modified_timestamp)}
-                    </span>
-                    <ChevronRight className="h-3.5 w-3.5 text-muted-foreground/60 group-hover:text-foreground transition-colors" />
-                  </div>
-                </header>
-                <p className="text-sm leading-relaxed line-clamp-4">{p.content}</p>
-                {p.source && (
-                  <p className="text-[11px] text-muted-foreground mt-2 font-mono">
-                    source: {p.source}
+                      {p.status && (
+                        <Badge variant="secondary" className="h-5 text-[10px]">
+                          {p.status}
+                        </Badge>
+                      )}
+                      <PreferenceApplicationStatBadge stat={stat} />
+                    </div>
+                    <div className="flex items-center gap-1.5 shrink-0">
+                      <span className="text-[11px] text-muted-foreground">
+                        {formatRelative(p.last_modified_timestamp)}
+                      </span>
+                      <ChevronRight className="h-3.5 w-3.5 text-muted-foreground/60 group-hover:text-foreground transition-colors" />
+                    </div>
+                  </header>
+                  <p className="max-w-5xl text-sm leading-relaxed line-clamp-3">
+                    {p.content}
                   </p>
-                )}
-              </Link>
-            ))}
+                  {p.source && (
+                    <p className="text-[11px] text-muted-foreground mt-2 font-mono">
+                      source: {p.source}
+                    </p>
+                  )}
+                </Link>
+              );
+            })}
           </div>
         )}
       </div>
     </div>
   );
 }
+
+function PreferenceApplicationStatBadge({
+  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 preference. 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>
+  );
+}

package/plugin/dashboard/app/preferences/project/[id]/page.tsx

@@ -0,0 +1 @@
+export { default } from "../../[id]/page";