claude-smart 0.2.30 → 0.2.32

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

@@ -5,7 +5,6 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import {
   ArrowLeft,
-  Trash2,
   Save,
   AlertTriangle,
   Pencil,
@@ -20,12 +19,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 } from "@/lib/status";
@@ -54,7 +53,6 @@ export default function ProjectSkillDetailPage({
 }) {
   const { id } = use(params);
   const router = useRouter();
-  const { reflexioUrl } = useSettings();
 
   const [playbook, setPlaybook] = useState<UserPlaybook | null>(null);
   const [notFound, setNotFound] = useState(false);
@@ -71,7 +69,7 @@ export default function ProjectSkillDetailPage({
   useEffect(() => {
     let cancelled = false;
     reflexio
-      .getUserPlaybooks({ reflexioUrl })
+      .getUserPlaybooks({})
       .then((res) => {
         if (cancelled) return;
         const found = (res.user_playbooks ?? []).find(
@@ -90,7 +88,7 @@ export default function ProjectSkillDetailPage({
     return () => {
       cancelled = true;
     };
-  }, [id, reflexioUrl]);
+  }, [id]);
 
   const dirty = useMemo(() => {
     if (!playbook) return false;
@@ -114,7 +112,6 @@ export default function ProjectSkillDetailPage({
           trigger: form.trigger || null,
           rationale: form.rationale || null,
         },
-        reflexioUrl,
       );
       setPlaybook({
         ...playbook,
@@ -132,15 +129,9 @@ export default function ProjectSkillDetailPage({
 
   const remove = async () => {
     if (!playbook) return;
-    if (
-      !confirm(
-        `Delete project-specific skill #${playbook.user_playbook_id}? This cannot be undone.`,
-      )
-    )
-      return;
     setDeleting(true);
     try {
-      await reflexio.deleteUserPlaybook(playbook.user_playbook_id, reflexioUrl);
+      await reflexio.deleteUserPlaybook(playbook.user_playbook_id);
       router.push("/skills");
     } catch (e) {
       setError(e instanceof Error ? e.message : String(e));
@@ -229,7 +220,7 @@ export default function ProjectSkillDetailPage({
         <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>
@@ -323,8 +314,8 @@ export default function ProjectSkillDetailPage({
 
           {playbook && (
             <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">
@@ -365,8 +356,8 @@ export default function ProjectSkillDetailPage({
               </div>
 
               {playbook.source_interaction_ids?.length > 0 && (
-                <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">
                     Extracted from
                   </h3>
                   <p className="text-xs text-muted-foreground mb-2">
@@ -437,7 +428,7 @@ function Prose({ text, muted = false }: { text: string; muted?: boolean }) {
   return (
     <div
       className={cn(
-        "rounded-xl border border-border bg-card px-4 py-3",
+        "rounded-lg border border-border bg-card px-4 py-3",
         muted && "bg-muted/30",
       )}
     >
@@ -465,7 +456,7 @@ function AutoTextarea({
       onChange={(e) => onChange(e.target.value)}
       rows={rows}
       placeholder={placeholder}
-      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"
     />
   );
 }
@@ -575,23 +566,16 @@ 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 project-specific skill permanently. It will stop being
-          injected into future sessions.
-        </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 project-specific skill"
+      description="Delete this claude-smart skill permanently."
+      consequences={[
+        "This skill will stop being injected into future sessions for this project.",
+        "Historical session records may still show prior uses.",
+      ]}
+      onDelete={onDelete}
+      deleting={deleting}
+      disabled={disabled}
+    />
   );
 }

package/plugin/dashboard/app/skills/shared/[id]/page.tsx

@@ -5,7 +5,6 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import {
   ArrowLeft,
-  Trash2,
   Save,
   AlertTriangle,
   Pencil,
@@ -20,6 +19,7 @@ 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";
@@ -32,7 +32,6 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { reflexio } from "@/lib/reflexio-client";
-import { useSettings } from "@/hooks/use-settings";
 import { formatTimestamp, truncateId } from "@/lib/format";
 import { cn } from "@/lib/utils";
 import { agentPlaybookStatusLabel, statusLabel } from "@/lib/status";
@@ -85,7 +84,6 @@ export default function SharedSkillDetailPage({
 }) {
   const { id } = use(params);
   const router = useRouter();
-  const { reflexioUrl } = useSettings();
 
   const [playbook, setPlaybook] = useState<AgentPlaybook | null>(null);
   const [notFound, setNotFound] = useState(false);
@@ -105,7 +103,7 @@ export default function SharedSkillDetailPage({
   useEffect(() => {
     let cancelled = false;
     reflexio
-      .getAgentPlaybooks({ reflexioUrl })
+      .getAgentPlaybooks({})
       .then((res) => {
         if (cancelled) return;
         const found = (res.agent_playbooks ?? []).find(
@@ -124,7 +122,7 @@ export default function SharedSkillDetailPage({
     return () => {
       cancelled = true;
     };
-  }, [id, reflexioUrl]);
+  }, [id]);
 
   const dirty = useMemo(() => {
     if (!playbook) return false;
@@ -150,7 +148,6 @@ export default function SharedSkillDetailPage({
           rationale: form.rationale || null,
           playbook_status: form.playbookStatus,
         },
-        reflexioUrl,
       );
       setPlaybook({
         ...playbook,
@@ -186,7 +183,6 @@ export default function SharedSkillDetailPage({
           agent_playbook_id: playbook.agent_playbook_id,
           playbook_status: nextStatus,
         },
-        reflexioUrl,
       );
       setPlaybook((current) =>
         current ? { ...current, playbook_status: nextStatus } : current,
@@ -201,15 +197,9 @@ export default function SharedSkillDetailPage({
 
   const remove = async () => {
     if (!playbook) return;
-    if (
-      !confirm(
-        `Delete shared skill #${playbook.agent_playbook_id}? This cannot be undone.`,
-      )
-    )
-      return;
     setDeleting(true);
     try {
-      await reflexio.deleteAgentPlaybook(playbook.agent_playbook_id, reflexioUrl);
+      await reflexio.deleteAgentPlaybook(playbook.agent_playbook_id);
       router.push("/skills");
     } catch (e) {
       setError(e instanceof Error ? e.message : String(e));
@@ -299,7 +289,7 @@ export default function SharedSkillDetailPage({
         <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>
@@ -464,8 +454,8 @@ export default function SharedSkillDetailPage({
 
           {playbook && (
             <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">
@@ -545,7 +535,7 @@ function Prose({ text, muted = false }: { text: string; muted?: boolean }) {
   return (
     <div
       className={cn(
-        "rounded-xl border border-border bg-card px-4 py-3",
+        "rounded-lg border border-border bg-card px-4 py-3",
         muted && "bg-muted/30",
       )}
     >
@@ -573,7 +563,7 @@ function AutoTextarea({
       onChange={(e) => onChange(e.target.value)}
       rows={rows}
       placeholder={placeholder}
-      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"
     />
   );
 }
@@ -808,23 +798,16 @@ 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 shared skill permanently. It will stop being
-          available in the dashboard.
-        </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 shared skill"
+      description="Delete this shared claude-smart skill permanently."
+      consequences={[
+        "This shared skill will stop being available to claude-smart.",
+        "Historical session records may still show prior uses.",
+      ]}
+      onDelete={onDelete}
+      deleting={deleting}
+      disabled={disabled}
+    />
   );
 }

package/plugin/dashboard/components/common/delete-learning-danger-zone.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { useEffect, useId, useState } from "react";
+import { AlertTriangle, Trash2, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+type DeleteLearningDangerZoneProps = {
+  learningName: string;
+  description: string;
+  consequences: string[];
+  deleting: boolean;
+  disabled?: boolean;
+  onDelete: () => void | Promise<void>;
+};
+
+const REQUIRED_CONFIRMATION = "DELETE";
+
+export function DeleteLearningDangerZone({
+  learningName,
+  description,
+  consequences,
+  deleting,
+  disabled = false,
+  onDelete,
+}: DeleteLearningDangerZoneProps) {
+  const [open, setOpen] = useState(false);
+  const [confirmation, setConfirmation] = useState("");
+  const titleId = useId();
+  const descriptionId = useId();
+  const canDelete = confirmation === REQUIRED_CONFIRMATION && !deleting;
+
+  useEffect(() => {
+    if (!open) return;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && !deleting) {
+        setOpen(false);
+        setConfirmation("");
+      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [deleting, open]);
+
+  const close = () => {
+    if (deleting) return;
+    setOpen(false);
+    setConfirmation("");
+  };
+
+  const confirmDelete = async () => {
+    if (!canDelete) return;
+    await onDelete();
+  };
+
+  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">
+            {description}
+          </p>
+        </div>
+        <Button
+          variant="destructive"
+          size="sm"
+          onClick={() => setOpen(true)}
+          disabled={deleting || disabled}
+        >
+          <Trash2 className="h-3.5 w-3.5" />
+          Delete
+        </Button>
+      </section>
+
+      {open && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 p-4 backdrop-blur-sm"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={titleId}
+          aria-describedby={descriptionId}
+        >
+          <div className="w-full max-w-md rounded-xl border border-border bg-card shadow-lg">
+            <div className="flex items-start justify-between gap-4 border-b border-border px-5 py-4">
+              <div className="flex items-start gap-3">
+                <div className="mt-0.5 rounded-full bg-destructive/10 p-2 text-destructive">
+                  <AlertTriangle className="h-4 w-4" />
+                </div>
+                <div>
+                  <h2 id={titleId} className="text-base font-semibold">
+                    Delete learning?
+                  </h2>
+                  <p
+                    id={descriptionId}
+                    className="mt-1 text-sm text-muted-foreground"
+                  >
+                    This permanently deletes {learningName}.
+                  </p>
+                </div>
+              </div>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={close}
+                disabled={deleting}
+                aria-label="Close"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+
+            <div className="space-y-4 px-5 py-4">
+              <ul className="list-disc space-y-1.5 pl-5 text-sm text-muted-foreground">
+                {consequences.map((item) => (
+                  <li key={item}>{item}</li>
+                ))}
+                <li>This cannot be undone.</li>
+              </ul>
+
+              <label className="block space-y-2">
+                <span className="text-sm font-medium">
+                  Type DELETE to confirm
+                </span>
+                <Input
+                  value={confirmation}
+                  onChange={(event) => setConfirmation(event.target.value)}
+                  placeholder="DELETE"
+                  autoFocus
+                  disabled={deleting}
+                />
+              </label>
+            </div>
+
+            <div className="flex items-center justify-end gap-2 border-t border-border px-5 py-4">
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={close}
+                disabled={deleting}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="button"
+                variant="destructive"
+                size="sm"
+                onClick={confirmDelete}
+                disabled={!canDelete || disabled}
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+                {deleting ? "Deleting..." : "Delete learning"}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

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

@@ -17,12 +17,14 @@ export function EmptyState({
   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",
+        "flex flex-col items-center justify-center text-center py-12 px-6 border border-dashed border-border rounded-lg bg-card/72",
         className,
       )}
     >
       {Icon && (
-        <Icon className="h-8 w-8 text-muted-foreground/60 mb-3" strokeWidth={1.5} />
+        <div className="mb-3 flex h-12 w-12 items-center justify-center rounded-lg border border-primary/15 bg-primary/10 text-primary">
+          <Icon className="h-6 w-6" strokeWidth={1.5} />
+        </div>
       )}
       <div className="text-sm font-medium text-foreground">{title}</div>
       {description && (

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

@@ -17,7 +17,7 @@ export function LearningsBadge({
     <Badge
       variant="outline"
       className={cn(
-        "border-amber-500/40 gap-1",
+        "border-amber-500/45 bg-amber-500/10 text-amber-700 gap-1 dark:text-amber-300",
         isSmall ? "h-4 px-1.5 text-[10px] shrink-0" : "h-5",
         className,
       )}

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

@@ -14,14 +14,16 @@ export function PageHeader({
   return (
     <div
       className={cn(
-        "border-b border-border px-6 py-5 flex flex-wrap items-start justify-between gap-4",
+        "border-b border-border bg-background/72 px-6 py-6 flex flex-wrap items-start justify-between gap-4 backdrop-blur",
         className,
       )}
     >
       <div className="min-w-[min(18rem,100%)] flex-1">
-        <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
+        <h1 className="text-2xl font-semibold">{title}</h1>
         {description && (
-          <p className="text-sm text-muted-foreground mt-0.5">{description}</p>
+          <p className="text-sm text-muted-foreground mt-1 max-w-3xl">
+            {description}
+          </p>
         )}
       </div>
       {actions && (

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

@@ -75,11 +75,11 @@ export function PageTabs({
         );
 
         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",
+          "relative rounded-lg border px-4 py-3 text-left transition-colors",
+          "hover:border-primary/35 hover:bg-accent/45 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",
+            ? "border-primary/35 bg-card text-foreground shadow-sm before:absolute before:inset-x-4 before:top-0 before:h-0.5 before:rounded-full before:bg-primary"
+            : "border-border bg-background/70 text-muted-foreground",
         );
 
         if (item.href) {

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

@@ -17,22 +17,26 @@ export function StatCard({
   return (
     <div
       className={cn(
-        "rounded-xl border border-border bg-card px-5 py-4 flex items-start justify-between gap-4",
+        "rounded-lg border border-border bg-card/92 px-5 py-4 flex items-start justify-between gap-4 shadow-sm",
         className,
       )}
     >
       <div className="min-w-0">
-        <div className="text-xs uppercase tracking-wide text-muted-foreground font-medium">
+        <div className="text-xs uppercase text-muted-foreground font-semibold">
           {label}
         </div>
-        <div className="mt-1.5 text-2xl font-semibold tracking-tight tabular-nums">
+        <div className="mt-2 text-3xl font-semibold tabular-nums text-foreground">
           {value}
         </div>
         {hint && (
-          <div className="text-xs text-muted-foreground mt-1">{hint}</div>
+          <div className="text-xs text-muted-foreground mt-1.5">{hint}</div>
         )}
       </div>
-      {Icon && <Icon className="h-4 w-4 text-muted-foreground mt-0.5" />}
+      {Icon && (
+        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-primary/15 bg-primary/10 text-primary">
+          <Icon className="h-4 w-4" />
+        </div>
+      )}
     </div>
   );
 }

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

@@ -11,13 +11,20 @@ export function Sidebar() {
 
   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 className="px-3 py-5">
+        <div className="mb-6 rounded-lg border border-sidebar-border bg-background/55 p-3">
+          <div className="flex items-center gap-2">
+            <div className="h-2.5 w-2.5 rounded-full bg-primary" />
+            <div className="font-semibold text-sm text-sidebar-foreground">
+              Claude-Smart
+            </div>
+          </div>
+          <div className="mt-1 text-[11px] text-muted-foreground">
+            Sessions, preferences, skills, and runtime controls.
+          </div>
         </div>
 
-        <nav className="space-y-0.5">
+        <nav className="space-y-1">
           {navItems.map((item) => {
             const active =
               pathname === item.href || pathname.startsWith(`${item.href}/`);
@@ -27,13 +34,21 @@ export function Sidebar() {
                 key={item.href}
                 href={item.href}
                 className={cn(
-                  "flex items-center gap-2 px-2 py-1.5 text-sm rounded-md transition-colors",
+                  "group relative flex items-center gap-2 rounded-lg px-2.5 py-2 text-sm transition-colors",
                   active
-                    ? "bg-accent text-accent-foreground font-medium"
-                    : "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+                    ? "bg-sidebar-accent text-sidebar-accent-foreground font-medium shadow-sm"
+                    : "text-muted-foreground hover:bg-background/70 hover:text-foreground",
                 )}
               >
-                <Icon className="h-4 w-4 shrink-0" />
+                {active && (
+                  <span className="absolute left-0 top-1/2 h-5 w-0.5 -translate-y-1/2 rounded-full bg-primary" />
+                )}
+                <Icon
+                  className={cn(
+                    "h-4 w-4 shrink-0",
+                    active ? "text-primary" : "text-muted-foreground",
+                  )}
+                />
                 <span className="truncate">{item.label}</span>
               </Link>
             );