@actuate-media/cms-admin 0.56.0 → 0.57.0

package/src/components/CoauthorResultPopover.tsx

@@ -1,9 +1,13 @@
 'use client'
 
-import { useEffect, useRef } from 'react'
-import { Check, Copy, Loader2, Sparkles, X } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
+import { Check, Copy, Loader2, Sparkles, Wand2, X } from 'lucide-react'
+import type { BrandAlignmentScoreResult } from '@actuate-media/cms-core/brand-voice'
 import type { CoauthorAction, ProofreadChange } from '../lib/coauthor-client.js'
 import { coauthorActionLabel } from '../lib/coauthor-client.js'
+import { fixBrandVoiceContent } from '../lib/brand-voice-client.js'
+import { BrandVoiceAlignmentBadge } from './BrandVoiceAlignmentBadge.js'
+import { toast } from 'sonner'
 
 export interface CoauthorResultPopoverProps {
   open: boolean
@@ -13,6 +17,9 @@ export interface CoauthorResultPopoverProps {
   after: string
   error?: string
   changes?: ProofreadChange[]
+  brandAlignment?: BrandAlignmentScoreResult
+  /** Called when fix-to-brand updates the after text. */
+  onAfterChange?: (text: string, alignment?: BrandAlignmentScoreResult) => void
   /** Label for the apply target, e.g. "Apply to editor" or "Replace selection". */
   applyLabel?: string
   onApply: () => void
@@ -39,12 +46,15 @@ export function CoauthorResultPopover({
   after,
   error,
   changes,
+  brandAlignment,
+  onAfterChange,
   applyLabel,
   onApply,
   onCopy,
   onDiscard,
 }: CoauthorResultPopoverProps) {
   const dialogRef = useRef<HTMLDivElement>(null)
+  const [fixing, setFixing] = useState(false)
 
   useEffect(() => {
     if (!open) return
@@ -65,8 +75,35 @@ export function CoauthorResultPopover({
 
   if (!open) return null
 
-  const applyDisabled = loading || !!error || after.length === 0
-  const copyDisabled = loading || !!error || after.length === 0
+  const applyDisabled = loading || fixing || !!error || after.length === 0
+  const copyDisabled = loading || fixing || !!error || after.length === 0
+  const showFix =
+    !loading &&
+    !error &&
+    after.length > 0 &&
+    brandAlignment &&
+    brandAlignment.score < 85 &&
+    onAfterChange
+
+  async function handleFix() {
+    if (!onAfterChange || !after.trim()) return
+    setFixing(true)
+    try {
+      const res = await fixBrandVoiceContent({ content: after, channel: 'blog' })
+      if (!res.ok || !res.result) {
+        toast.error(res.error ?? 'Could not fix copy for brand voice.')
+        return
+      }
+      onAfterChange(res.result.text, res.result.afterScore)
+      toast.success(
+        res.result.usedAi
+          ? 'Copy revised to match brand voice.'
+          : 'Applied brand voice rule fixes.',
+      )
+    } finally {
+      setFixing(false)
+    }
+  }
 
   return (
     <div
@@ -81,20 +118,23 @@ export function CoauthorResultPopover({
         aria-label={`AI ${coauthorActionLabel(action)} result`}
         tabIndex={-1}
         onClick={(e) => e.stopPropagation()}
-        className="w-full max-w-2xl rounded-lg bg-white shadow-2xl outline-none"
+        className="bg-card w-full max-w-2xl rounded-lg shadow-2xl outline-none"
       >
-        <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3">
-          <div className="flex items-center gap-2 text-sm font-medium text-gray-900">
-            <Sparkles className="h-4 w-4 text-blue-600" aria-hidden />
+        <div className="border-border flex items-center justify-between border-b px-4 py-3">
+          <div className="text-foreground flex items-center gap-2 text-sm font-medium">
+            <Sparkles className="text-primary h-4 w-4" aria-hidden />
             <span>AI {coauthorActionLabel(action)}</span>
             {loading && (
-              <Loader2 className="ml-1 h-4 w-4 animate-spin text-gray-400" aria-label="Loading" />
+              <Loader2
+                className="text-muted-foreground ml-1 h-4 w-4 animate-spin"
+                aria-label="Loading"
+              />
             )}
           </div>
           <button
             type="button"
             onClick={onDiscard}
-            className="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
+            className="text-muted-foreground hover:bg-accent hover:text-muted-foreground rounded p-1"
             aria-label="Close"
           >
             <X className="h-4 w-4" />
@@ -105,34 +145,34 @@ export function CoauthorResultPopover({
           <section aria-labelledby="coauthor-before">
             <h3
               id="coauthor-before"
-              className="mb-2 text-xs font-medium tracking-wide text-gray-500 uppercase"
+              className="text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase"
             >
               Before
             </h3>
-            <pre className="max-h-72 overflow-auto rounded border border-gray-200 bg-gray-50 p-3 text-sm whitespace-pre-wrap text-gray-700">
+            <pre className="border-border bg-muted text-foreground max-h-72 overflow-auto rounded border p-3 text-sm whitespace-pre-wrap">
               {before}
             </pre>
           </section>
           <section aria-labelledby="coauthor-after">
             <h3
               id="coauthor-after"
-              className="mb-2 text-xs font-medium tracking-wide text-gray-500 uppercase"
+              className="text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase"
             >
               After
             </h3>
             {loading ? (
               <div
-                className="flex h-72 items-center justify-center rounded border border-dashed border-gray-200 bg-gray-50 text-sm text-gray-400"
+                className="border-border bg-muted text-muted-foreground flex h-72 items-center justify-center rounded border border-dashed text-sm"
                 role="status"
               >
                 Thinking…
               </div>
             ) : error ? (
-              <div className="flex h-72 items-center justify-center rounded border border-dashed border-red-200 bg-red-50 p-3 text-sm text-red-600">
+              <div className="border-destructive/30 bg-destructive/10 text-destructive flex h-72 items-center justify-center rounded border border-dashed p-3 text-sm">
                 {error}
               </div>
             ) : (
-              <pre className="max-h-72 overflow-auto rounded border border-blue-200 bg-blue-50 p-3 text-sm whitespace-pre-wrap text-gray-900">
+              <pre className="border-info/30 bg-info/10 text-foreground max-h-72 overflow-auto rounded border p-3 text-sm whitespace-pre-wrap">
                 {after}
               </pre>
             )}
@@ -140,18 +180,18 @@ export function CoauthorResultPopover({
         </div>
 
         {changes && changes.length > 0 && !loading && !error && (
-          <div className="border-t border-gray-200 px-4 py-3">
-            <h3 className="mb-2 text-xs font-medium tracking-wide text-gray-500 uppercase">
+          <div className="border-border border-t px-4 py-3">
+            <h3 className="text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase">
               Changes ({changes.length})
             </h3>
             <ul className="max-h-32 space-y-1 overflow-auto text-xs">
               {changes.map((change, i) => (
-                <li key={i} className="flex items-start gap-2 rounded bg-gray-50 px-2 py-1">
-                  <span className="text-red-600 line-through">{change.original}</span>
-                  <span className="text-gray-400">→</span>
-                  <span className="text-green-700">{change.corrected}</span>
+                <li key={i} className="bg-muted flex items-start gap-2 rounded px-2 py-1">
+                  <span className="text-destructive line-through">{change.original}</span>
+                  <span className="text-muted-foreground">→</span>
+                  <span className="text-success">{change.corrected}</span>
                   {change.reason && (
-                    <span className="ml-auto text-gray-500 italic">{change.reason}</span>
+                    <span className="text-muted-foreground ml-auto italic">{change.reason}</span>
                   )}
                 </li>
               ))}
@@ -159,11 +199,32 @@ export function CoauthorResultPopover({
           </div>
         )}
 
-        <div className="flex items-center justify-end gap-2 border-t border-gray-200 bg-gray-50 px-4 py-3">
+        {brandAlignment && !loading && !error && (
+          <div className="border-border flex flex-wrap items-center justify-between gap-3 border-t px-4 py-3">
+            <BrandVoiceAlignmentBadge alignment={brandAlignment} />
+            {showFix && (
+              <button
+                type="button"
+                onClick={handleFix}
+                disabled={fixing}
+                className="border-border bg-card text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                {fixing ? (
+                  <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden />
+                ) : (
+                  <Wand2 className="h-3.5 w-3.5" aria-hidden />
+                )}
+                Fix to match brand voice
+              </button>
+            )}
+          </div>
+        )}
+
+        <div className="border-border bg-muted flex items-center justify-end gap-2 border-t px-4 py-3">
           <button
             type="button"
             onClick={onDiscard}
-            className="rounded-md border border-gray-200 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50"
+            className="border-border bg-card text-foreground hover:bg-accent rounded-md border px-3 py-1.5 text-sm"
           >
             <X className="mr-1.5 inline h-3.5 w-3.5" aria-hidden />
             Discard
@@ -172,7 +233,7 @@ export function CoauthorResultPopover({
             type="button"
             onClick={onCopy}
             disabled={copyDisabled}
-            className="rounded-md border border-gray-200 bg-white px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+            className="border-border bg-card text-foreground hover:bg-accent rounded-md border px-3 py-1.5 text-sm disabled:cursor-not-allowed disabled:opacity-50"
           >
             <Copy className="mr-1.5 inline h-3.5 w-3.5" aria-hidden />
             Copy
@@ -181,7 +242,7 @@ export function CoauthorResultPopover({
             type="button"
             onClick={onApply}
             disabled={applyDisabled}
-            className="rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+            className="bg-primary hover:bg-primary/90 rounded-md px-3 py-1.5 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
           >
             <Check className="mr-1.5 inline h-3.5 w-3.5" aria-hidden />
             {applyLabel ?? 'Apply'}

package/src/components/CommandPalette.tsx

@@ -31,6 +31,7 @@ import {
   type CoauthorAction,
   type ProofreadChange,
 } from '../lib/coauthor-client.js'
+import type { BrandAlignmentScoreResult } from '@actuate-media/cms-core/brand-voice'
 import {
   isAiSlashCommandInput,
   orderedAiActions,
@@ -116,6 +117,7 @@ interface AiResultState {
   after: string
   error?: string
   changes?: ProofreadChange[]
+  brandAlignment?: BrandAlignmentScoreResult
   /** Editor captured at submission time; null means clipboard-only. */
   target: Editor | null
 }
@@ -258,6 +260,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
         loading: false,
         after: outcome.result.text,
         changes: outcome.result.changes,
+        brandAlignment: outcome.result.brandAlignment,
         error: undefined,
       }))
     },
@@ -294,6 +297,13 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
     }
   }, [aiResult.after])
 
+  const handleAiAfterChange = useCallback(
+    (after: string, brandAlignment?: BrandAlignmentScoreResult) => {
+      setAiResult((prev) => ({ ...prev, after, brandAlignment }))
+    },
+    [],
+  )
+
   const handleAiDiscard = useCallback(() => {
     setAiResult(INITIAL_AI_RESULT)
   }, [])
@@ -314,6 +324,8 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
       after={aiResult.after}
       error={aiResult.error}
       changes={aiResult.changes}
+      brandAlignment={aiResult.brandAlignment}
+      onAfterChange={handleAiAfterChange}
       applyLabel={aiResult.target ? 'Apply to editor' : 'Copy to clipboard'}
       onApply={handleAiApply}
       onCopy={handleAiCopy}
@@ -340,7 +352,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
           onClick={(e) => e.stopPropagation()}
         >
           <Command
-            className="w-full overflow-hidden rounded-lg bg-white shadow-2xl"
+            className="bg-card w-full overflow-hidden rounded-lg shadow-2xl"
             onKeyDown={(e) => {
               if (e.key === 'Escape') {
                 onOpenChange(false)
@@ -349,30 +361,30 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
             }}
             shouldFilter={!hasQuery}
           >
-            <div className="flex items-center border-b border-gray-200 px-4">
-              <Search className="mr-3 h-5 w-5 shrink-0 text-gray-400" />
+            <div className="border-border flex items-center border-b px-4">
+              <Search className="text-muted-foreground mr-3 h-5 w-5 shrink-0" />
               <Command.Input
                 value={search}
                 onValueChange={setSearch}
                 placeholder="Search, jump to, or type /ai to use the AI co-author…"
-                className="w-full bg-transparent py-4 text-base placeholder:text-gray-400 focus:outline-none"
+                className="placeholder:text-muted-foreground w-full bg-transparent py-4 text-base focus:outline-none"
               />
               {loading && (
-                <div className="mr-2 h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-gray-300 border-t-gray-600" />
+                <div className="border-border mr-2 h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-t-gray-600" />
               )}
-              <kbd className="hidden shrink-0 rounded bg-gray-100 px-2 py-1 font-mono text-xs text-gray-600 sm:inline-block">
+              <kbd className="bg-muted text-muted-foreground hidden shrink-0 rounded px-2 py-1 font-mono text-xs sm:inline-block">
                 ESC
               </kbd>
             </div>
 
             <Command.List className="max-h-[400px] overflow-y-auto p-2">
-              <Command.Empty className="py-6 text-center text-sm text-gray-500">
+              <Command.Empty className="text-muted-foreground py-6 text-center text-sm">
                 {loading ? 'Searching...' : 'No results found.'}
               </Command.Empty>
 
               {isAiMode && (
                 <Command.Group heading="AI co-author" className="px-2 py-2">
-                  <div className="mb-2 flex items-center gap-1 text-xs font-medium text-gray-500">
+                  <div className="text-muted-foreground mb-2 flex items-center gap-1 text-xs font-medium">
                     <Sparkles className="h-3 w-3" aria-hidden /> AI CO-AUTHOR
                   </div>
                   {aiActions.map((action) => {
@@ -384,23 +396,23 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                         key={`ai-${action}`}
                         value={`ai ${action}`}
                         onSelect={() => runSlashAction(action, aiPayload)}
-                        className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                        className="hover:bg-accent data-[selected=true]:bg-muted flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2"
                       >
-                        <Icon className="h-4 w-4 text-blue-600" />
+                        <Icon className="text-primary h-4 w-4" />
                         <div className="flex min-w-0 flex-col">
                           <span className="font-medium">
                             {coauthorActionLabel(action)}
                             {previewable && (
-                              <span className="ml-1 font-normal text-gray-500">
+                              <span className="text-muted-foreground ml-1 font-normal">
                                 “{truncatePreview(aiPayload)}”
                               </span>
                             )}
                           </span>
-                          <span className="text-xs text-gray-400">
+                          <span className="text-muted-foreground text-xs">
                             {coauthorActionDescription(action)}
                           </span>
                         </div>
-                        <kbd className="ml-auto rounded bg-gray-100 px-1.5 py-0.5 font-mono text-[10px] text-gray-500">
+                        <kbd className="bg-muted text-muted-foreground ml-auto rounded px-1.5 py-0.5 font-mono text-[10px]">
                           /ai {action}
                         </kbd>
                       </Command.Item>
@@ -411,17 +423,19 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
 
               {!isAiMode && !hasQuery && recentItems.length > 0 && (
                 <Command.Group heading="Recent" className="px-2 py-2">
-                  <div className="mb-2 text-xs font-medium text-gray-500">RECENT</div>
+                  <div className="text-muted-foreground mb-2 text-xs font-medium">RECENT</div>
                   {recentItems.map((item) => (
                     <Command.Item
                       key={`recent-${item.id}`}
                       value={`recent ${item.label}`}
                       onSelect={() => handleSelect(item.path, item)}
-                      className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                      className="hover:bg-accent data-[selected=true]:bg-muted flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2"
                     >
-                      <Clock className="h-4 w-4 text-gray-400" />
+                      <Clock className="text-muted-foreground h-4 w-4" />
                       <span>{item.label}</span>
-                      <span className="ml-auto text-xs text-gray-400 capitalize">{item.type}</span>
+                      <span className="text-muted-foreground ml-auto text-xs capitalize">
+                        {item.type}
+                      </span>
                     </Command.Item>
                   ))}
                 </Command.Group>
@@ -429,7 +443,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
 
               {!isAiMode && hasQuery && documents.length > 0 && (
                 <Command.Group heading="Documents" className="px-2 py-2">
-                  <div className="mb-2 text-xs font-medium text-gray-500">DOCUMENTS</div>
+                  <div className="text-muted-foreground mb-2 text-xs font-medium">DOCUMENTS</div>
                   {documents.map((doc) => (
                     <Command.Item
                       key={`doc-${doc.id}`}
@@ -442,12 +456,12 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                           type: 'document',
                         })
                       }
-                      className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                      className="hover:bg-accent data-[selected=true]:bg-muted flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2"
                     >
-                      <FileText className="h-4 w-4 text-gray-500" />
+                      <FileText className="text-muted-foreground h-4 w-4" />
                       <div className="flex min-w-0 flex-col">
                         <span className="truncate">{doc.title ?? doc.slug ?? doc.id}</span>
-                        <span className="text-xs text-gray-400">
+                        <span className="text-muted-foreground text-xs">
                           {doc.collection} &middot; {doc.status}
                         </span>
                       </div>
@@ -458,7 +472,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
 
               {!isAiMode && hasQuery && media.length > 0 && (
                 <Command.Group heading="Media" className="mt-1 px-2 py-2">
-                  <div className="mb-2 text-xs font-medium text-gray-500">MEDIA</div>
+                  <div className="text-muted-foreground mb-2 text-xs font-medium">MEDIA</div>
                   {media.map((m) => (
                     <Command.Item
                       key={`media-${m.id}`}
@@ -471,12 +485,12 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                           type: 'media',
                         })
                       }
-                      className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                      className="hover:bg-accent data-[selected=true]:bg-muted flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2"
                     >
-                      <Image className="h-4 w-4 text-gray-500" />
+                      <Image className="text-muted-foreground h-4 w-4" />
                       <div className="flex min-w-0 flex-col">
                         <span className="truncate">{m.filename}</span>
-                        <span className="text-xs text-gray-400">{m.mimeType}</span>
+                        <span className="text-muted-foreground text-xs">{m.mimeType}</span>
                       </div>
                     </Command.Item>
                   ))}
@@ -485,7 +499,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
 
               {!isAiMode && hasQuery && users.length > 0 && (
                 <Command.Group heading="Users" className="mt-1 px-2 py-2">
-                  <div className="mb-2 text-xs font-medium text-gray-500">USERS</div>
+                  <div className="text-muted-foreground mb-2 text-xs font-medium">USERS</div>
                   {users.map((u) => (
                     <Command.Item
                       key={`user-${u.id}`}
@@ -498,12 +512,12 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                           type: 'user',
                         })
                       }
-                      className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                      className="hover:bg-accent data-[selected=true]:bg-muted flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2"
                     >
-                      <Users className="h-4 w-4 text-gray-500" />
+                      <Users className="text-muted-foreground h-4 w-4" />
                       <div className="flex min-w-0 flex-col">
                         <span className="truncate">{u.name}</span>
-                        <span className="text-xs text-gray-400">
+                        <span className="text-muted-foreground text-xs">
                           {u.email} &middot; {u.role}
                         </span>
                       </div>
@@ -514,7 +528,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
 
               {!isAiMode && (!hasQuery || !hasResults) && (
                 <Command.Group heading="Navigation" className="px-2 py-2">
-                  <div className="mb-2 text-xs font-medium text-gray-500">NAVIGATION</div>
+                  <div className="text-muted-foreground mb-2 text-xs font-medium">NAVIGATION</div>
                   {navigationCommands.map((cmd) => {
                     const Icon = cmd.icon
                     return (
@@ -522,9 +536,9 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                         key={cmd.id}
                         value={cmd.label}
                         onSelect={() => handleSelect(cmd.action)}
-                        className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                        className="hover:bg-accent data-[selected=true]:bg-muted flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2"
                       >
-                        <Icon className="h-4 w-4 text-gray-500" />
+                        <Icon className="text-muted-foreground h-4 w-4" />
                         <span>{cmd.label}</span>
                       </Command.Item>
                     )
@@ -534,7 +548,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
 
               {!isAiMode && (
                 <Command.Group heading="Actions" className="mt-2 px-2 py-2">
-                  <div className="mb-2 text-xs font-medium text-gray-500">ACTIONS</div>
+                  <div className="text-muted-foreground mb-2 text-xs font-medium">ACTIONS</div>
                   {staticActions.map((cmd) => {
                     const Icon = cmd.icon
                     return (
@@ -549,9 +563,9 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                             type: 'action',
                           })
                         }
-                        className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                        className="hover:bg-accent data-[selected=true]:bg-muted flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2"
                       >
-                        <Icon className="h-4 w-4 text-gray-500" />
+                        <Icon className="text-muted-foreground h-4 w-4" />
                         <span>{cmd.label}</span>
                       </Command.Item>
                     )
@@ -560,19 +574,19 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
               )}
             </Command.List>
 
-            <div className="flex items-center justify-between border-t border-gray-200 bg-gray-50 px-4 py-3 text-xs text-gray-500">
+            <div className="border-border bg-muted text-muted-foreground flex items-center justify-between border-t px-4 py-3 text-xs">
               <div className="flex items-center gap-4">
                 <span className="flex items-center gap-1">
-                  <kbd className="rounded border border-gray-300 bg-white px-1.5 py-0.5 text-[10px]">
+                  <kbd className="border-border bg-card rounded border px-1.5 py-0.5 text-[10px]">
                     ↑
                   </kbd>
-                  <kbd className="rounded border border-gray-300 bg-white px-1.5 py-0.5 text-[10px]">
+                  <kbd className="border-border bg-card rounded border px-1.5 py-0.5 text-[10px]">
                     ↓
                   </kbd>
                   to navigate
                 </span>
                 <span className="flex items-center gap-1">
-                  <kbd className="rounded border border-gray-300 bg-white px-1.5 py-0.5 text-[10px]">
+                  <kbd className="border-border bg-card rounded border px-1.5 py-0.5 text-[10px]">
                     ↵
                   </kbd>
                   to select