@agent-native/core 0.97.0 → 0.98.0

package/corpus/core/src/client/AgentPanel.tsx

@@ -127,6 +127,7 @@ const AGENT_PANEL_OPEN_SETTINGS_EVENT = "agent-panel:open-settings";
 
 function settingsRouteHashForSection(section?: string | null): string {
   const normalized = section?.replace(/^#/, "").toLowerCase() ?? "";
+  if (normalized === "voice") return "#voice";
   if (
     normalized.startsWith("secrets") ||
     normalized.includes("api") ||
@@ -365,12 +366,12 @@ function ChatLoadingSkeleton({
               )}
             >
               <div className="px-3 pt-3">
-                <div className="h-5 w-3/5 rounded bg-muted animate-pulse" />
+                <div className="h-5 w-3/5 rounded bg-muted animate-pulse motion-reduce:animate-none" />
               </div>
               <div className="mt-auto flex items-center gap-2 px-3 py-2">
-                <div className="h-5 w-5 rounded bg-muted animate-pulse" />
-                <div className="ml-auto h-4 w-28 rounded bg-muted animate-pulse" />
-                <div className="h-7 w-7 rounded-md bg-muted animate-pulse" />
+                <div className="h-5 w-5 rounded bg-muted animate-pulse motion-reduce:animate-none" />
+                <div className="ml-auto h-4 w-28 rounded bg-muted animate-pulse motion-reduce:animate-none" />
+                <div className="h-7 w-7 rounded-md bg-muted animate-pulse motion-reduce:animate-none" />
               </div>
             </div>
           </div>
@@ -383,7 +384,7 @@ function ChatLoadingSkeleton({
       {renderHeader ? renderHeader(stubProps) : null}
       {/* Composer-shaped placeholder keeps layout stable during chunk load */}
       <div className="mt-auto shrink-0 border-t border-border p-3">
-        <div className="h-16 rounded-xl bg-muted/40 animate-pulse" />
+        <div className="h-16 rounded-xl bg-muted/40 animate-pulse motion-reduce:animate-none" />
       </div>
     </div>
   );

package/corpus/core/src/client/CommandMenu.tsx

@@ -73,11 +73,22 @@ export function openAgentSettings(
     typeof section === "string" ? section : section?.section;
 
   openAgentSidebar();
-  window.dispatchEvent(
-    new CustomEvent("agent-panel:open-settings", {
-      detail: normalizedSection ? { section: normalizedSection } : undefined,
-    }),
-  );
+  // Voice mode unmounts the chat surface while its dock is collapsed, so its
+  // settings listener does not exist until opening the sidebar remounts it.
+  // Deliver after the open-state render can commit instead of racing React's
+  // concurrent remount. Non-visual runtimes fall back to the next task.
+  const dispatchSettings = () => {
+    window.dispatchEvent(
+      new CustomEvent("agent-panel:open-settings", {
+        detail: normalizedSection ? { section: normalizedSection } : undefined,
+      }),
+    );
+  };
+  if (typeof window.requestAnimationFrame === "function") {
+    window.requestAnimationFrame(dispatchSettings);
+  } else {
+    window.setTimeout(dispatchSettings, 0);
+  }
 }
 
 export function focusAgentChat() {

package/corpus/core/src/client/FeedbackButton.tsx

@@ -433,7 +433,7 @@ export function FeedbackButton({
           <TooltipPrimitive.Portal>
             <TooltipPrimitive.Content
               sideOffset={6}
-              className="z-[100040] overflow-hidden rounded-md border border-border bg-popover px-2 py-1 text-[11px] text-foreground shadow-md animate-in fade-in-0 zoom-in-95"
+              className="z-[100040] overflow-hidden rounded-md border border-border bg-popover px-2 py-1 text-[11px] text-foreground shadow-md animate-in fade-in-0 zoom-in-95 origin-[var(--radix-tooltip-content-transform-origin)]"
             >
               {resolvedLabel}
             </TooltipPrimitive.Content>
@@ -486,7 +486,7 @@ export function FeedbackButton({
           align={align}
           sideOffset={8}
           collisionPadding={16}
-          className="z-[100040] overflow-hidden rounded-lg border border-border bg-popover shadow-xl outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+          className="z-[100040] overflow-hidden rounded-lg border border-border bg-popover shadow-xl outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-popover-content-transform-origin)]"
           style={surfaceStyle}
         >
           {submitted ? (

package/corpus/core/src/client/app-providers.tsx

@@ -22,10 +22,12 @@
  *       ...
  *     </AppProviders>
  *
- *   When `isPublicPath` is true the providers render without `<ClientOnly>`,
- *   streaming real markup to the client. When false (the default) the standard
- *   `<ClientOnly fallback={clientOnlyFallback}>` gate wraps everything.
- *   When `clientOnlyFallback` is omitted, `<DefaultSpinner />` is used.
+ *   When `isPublicPath` is true the providers render without `<ClientOnly>` or
+ *   a session gate, streaming real markup to the client. When false (the
+ *   default), `<ClientOnly>` hydrates the shared SSR shell and
+ *   `<RequireSession>` redirects signed-out visitors to the framework sign-in
+ *   page before private app chrome mounts. When `clientOnlyFallback` is
+ *   omitted, `<DefaultSpinner />` is used.
  *
  * Customisation props:
  *   themeAttribute           — passed to next-themes ThemeProvider `attribute`.
@@ -58,6 +60,7 @@ import {
   AgentNativeI18nProvider,
   type AgentNativeI18nProviderProps,
 } from "./i18n.js";
+import { RequireSession } from "./require-session.js";
 
 export interface AppProvidersProps {
   /** QueryClient instance — create with `createAgentNativeQueryClient()`. */
@@ -119,6 +122,13 @@ export interface AppProvidersProps {
    */
   clientOnlyFallback?: React.ReactNode;
 
+  /**
+   * Skip the default client-side session gate on a private path. Use only for
+   * surfaces that authenticate by another mechanism, such as an MCP embed with
+   * its own scoped token. Public/SEO routes should use `isPublicPath` instead.
+   */
+  sessionBypass?: boolean;
+
   children: React.ReactNode;
 }
 
@@ -173,6 +183,7 @@ export function AppProviders({
   queryClient,
   isPublicPath = false,
   clientOnlyFallback,
+  sessionBypass = false,
   defaultTheme,
   themeAttribute,
   tooltipDelayDuration,
@@ -210,7 +221,9 @@ export function AppProviders({
         disableThemeTransitions={disableThemeTransitions}
         i18n={i18n}
       >
-        {children}
+        <RequireSession bypass={sessionBypass} fallback={fallback}>
+          {children}
+        </RequireSession>
       </ProvidersInner>
     </ClientOnly>
   );

package/corpus/core/src/client/chat/tool-call-display.tsx

@@ -397,7 +397,7 @@ function ToolOutputPopover({
 
 // ─── Collapsible height animation ─────────────────────────────────────────────
 
-function AnimatedCollapse({
+export function AnimatedCollapse({
   open,
   children,
 }: {
@@ -452,7 +452,7 @@ function AnimatedCollapse({
   return (
     <div
       ref={ref}
-      className="overflow-hidden transition-[height] duration-200 ease-out"
+      className="overflow-hidden transition-[height] duration-200 ease-[var(--ease-collapse)]"
       style={{ height: height === "auto" ? "auto" : `${height}px` }}
       onTransitionEnd={onTransitionEnd}
     >
@@ -804,7 +804,7 @@ function ToolCallDisplayGeneric({
               {canExpand && (
                 <IconChevronRight
                   className={cn(
-                    "absolute size-3.5 opacity-0 transition-all group-hover/tool:opacity-100",
+                    "absolute size-3.5 opacity-0 transition-[opacity,transform] group-hover/tool:opacity-100",
                     isExpanded && "rotate-90",
                   )}
                 />

package/corpus/core/src/client/composer/PastedTextChip.tsx

@@ -121,7 +121,7 @@ export function PastedTextChip({
           align="start"
           sideOffset={6}
           collisionPadding={12}
-          className="z-50 w-[min(560px,calc(100vw-32px))] rounded-lg border border-border bg-popover text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95"
+          className="z-50 w-[min(560px,calc(100vw-32px))] rounded-lg border border-border bg-popover text-popover-foreground shadow-lg origin-[var(--radix-popover-content-transform-origin)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95"
         >
           <div className="flex items-center justify-between gap-2 border-b border-border px-3 py-2">
             <div className="flex items-center gap-2 min-w-0">

package/corpus/core/src/client/composer/RealtimeVoiceMode.tsx

@@ -4,9 +4,16 @@ import {
   IconLoader2,
   IconMicrophone,
   IconPhoneOff,
+  IconSettings,
   IconVolume,
 } from "@tabler/icons-react";
-import { useEffect, useId, useState, useSyncExternalStore } from "react";
+import {
+  type MouseEvent,
+  useEffect,
+  useId,
+  useState,
+  useSyncExternalStore,
+} from "react";
 
 import {
   Popover,
@@ -50,6 +57,7 @@ export interface RealtimeVoiceModeCopy {
   showChat: string;
   hideChat: string;
   endVoiceMode: string;
+  microphoneSettings: string;
   status: Record<RealtimeVoiceModeState, string>;
   errors: {
     unsupported: string;
@@ -138,7 +146,12 @@ export function RealtimeVoiceModeEntry({
         side="top"
         align="end"
         sideOffset={10}
-        className="w-[min(22rem,calc(100vw-2rem))] p-4"
+        className={cn(
+          "p-4",
+          setupRequired
+            ? "w-[min(30rem,calc(100vw-2rem))]"
+            : "w-[min(22rem,calc(100vw-2rem))]",
+        )}
         aria-labelledby={titleId}
         aria-describedby={descriptionId}
       >
@@ -155,7 +168,7 @@ export function RealtimeVoiceModeEntry({
             </p>
           </div>
 
-          <div className="flex flex-col-reverse gap-2 sm:flex-row sm:flex-wrap sm:justify-end">
+          <div className="flex flex-col-reverse gap-2 sm:flex-row sm:flex-nowrap sm:justify-end">
             <Button
               type="button"
               variant="ghost"
@@ -179,6 +192,7 @@ export function RealtimeVoiceModeEntry({
                 <Button
                   type="button"
                   size="sm"
+                  className="whitespace-nowrap"
                   disabled={connectingBuilder}
                   onClick={() => choose(onConnectBuilder ?? onStartVoiceMode)}
                 >
@@ -212,6 +226,7 @@ export interface RealtimeVoiceModeDockProps {
   audioLevels?: RealtimeVoiceAudioLevelStore;
   onToggleChat: () => void;
   onEndVoiceMode: () => void;
+  onOpenMicrophoneSettings?: () => void;
   errorMessage?: string | null;
   className?: string;
 }
@@ -236,9 +251,11 @@ function usePrefersReducedMotion(): boolean {
 function VoiceWaveform({
   level,
   reducedMotion,
+  activity,
 }: {
   level: number;
   reducedMotion: boolean;
+  activity: "user" | "assistant";
 }) {
   const visibleLevel = reducedMotion ? 0.45 : level;
   return (
@@ -246,12 +263,13 @@ function VoiceWaveform({
       aria-hidden="true"
       className="flex h-6 items-center justify-center gap-0.5"
       data-realtime-voice-waveform="true"
+      data-realtime-voice-waveform-activity={activity}
     >
       {WAVEFORM_WEIGHTS.map((weight, index) => (
         <span
           key={index}
-          className="w-0.5 rounded-full bg-current transition-[height] duration-75 ease-out motion-reduce:transition-none"
-          style={{ height: `${4 + visibleLevel * 16 * weight}px` }}
+          className="h-5 w-0.5 origin-center rounded-full bg-current transition-transform duration-75 ease-out motion-reduce:transition-none"
+          style={{ transform: `scaleY(${0.2 + visibleLevel * 0.8 * weight})` }}
         />
       ))}
     </span>
@@ -260,16 +278,16 @@ function VoiceWaveform({
 
 const ORB_STATE_CLASSES: Record<RealtimeVoiceModeState, string> = {
   connecting:
-    "bg-secondary text-secondary-foreground ring-4 ring-secondary/40 hover:bg-secondary/80",
+    "bg-secondary text-secondary-foreground ring-secondary/40 hover:bg-secondary/80",
   listening:
-    "bg-primary text-primary-foreground ring-4 ring-primary/15 hover:bg-primary/90",
+    "bg-primary text-primary-foreground ring-primary/20 hover:bg-primary/90",
   speaking:
-    "bg-foreground text-background ring-4 ring-foreground/15 hover:bg-foreground/90",
+    "bg-foreground text-background ring-foreground/20 hover:bg-foreground/90",
   working:
-    "bg-secondary text-secondary-foreground ring-4 ring-secondary/40 hover:bg-secondary/80",
+    "bg-secondary text-secondary-foreground ring-secondary/40 hover:bg-secondary/80",
   error:
-    "bg-destructive text-destructive-foreground ring-4 ring-destructive/15 hover:bg-destructive/90",
-  ending: "bg-muted text-muted-foreground ring-4 ring-muted/40 cursor-wait",
+    "bg-destructive text-destructive-foreground ring-destructive/20 hover:bg-destructive/90",
+  ending: "cursor-wait bg-muted text-muted-foreground ring-muted/40",
 };
 
 function VoiceStateIcon({ state }: { state: RealtimeVoiceModeState }) {
@@ -303,10 +321,13 @@ export function RealtimeVoiceModeDock({
   audioLevels = SILENT_AUDIO_LEVELS,
   onToggleChat,
   onEndVoiceMode,
+  onOpenMicrophoneSettings,
   errorMessage,
   className,
 }: RealtimeVoiceModeDockProps) {
   const statusId = useId();
+  const controlsId = useId();
+  const [controlsOpen, setControlsOpen] = useState(false);
   const levels = useSyncExternalStore(
     audioLevels.subscribe,
     audioLevels.getSnapshot,
@@ -323,6 +344,13 @@ export function RealtimeVoiceModeDock({
   const toggleLabel = chatVisible ? copy.hideChat : copy.showChat;
   const ending = state === "ending";
   const errorDetailVisible = state === "error" && Boolean(errorMessage);
+  const orbScale = reducedMotion ? 1 : 1 + Math.min(activityLevel, 1) * 0.07;
+
+  const closeControlsUnlessFocused = (event: MouseEvent<HTMLDivElement>) => {
+    if (!event.currentTarget.contains(document.activeElement)) {
+      setControlsOpen(false);
+    }
+  };
 
   return (
     <div
@@ -344,33 +372,75 @@ export function RealtimeVoiceModeDock({
       ) : null}
 
       <div
-        id={statusId}
-        role={state === "error" && !errorDetailVisible ? "alert" : "status"}
-        aria-live={
-          state === "error" && !errorDetailVisible ? "assertive" : "polite"
-        }
-        className="rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground shadow-sm"
+        className="group pointer-events-auto flex items-center gap-2"
+        onMouseEnter={() => setControlsOpen(true)}
+        onMouseLeave={closeControlsUnlessFocused}
+        onFocusCapture={() => setControlsOpen(true)}
+        onBlurCapture={(event) => {
+          if (
+            !event.currentTarget.contains(event.relatedTarget as Node | null)
+          ) {
+            setControlsOpen(false);
+          }
+        }}
       >
-        {copy.status[state]}
-      </div>
+        <div
+          id={controlsId}
+          data-realtime-voice-controls={controlsOpen ? "open" : "closed"}
+          className={cn(
+            "flex items-center gap-1 rounded-full border border-border/70 bg-background/95 p-1 ps-3 shadow-lg backdrop-blur-md transition-[transform,opacity] duration-150 ease-out motion-reduce:transition-none",
+            controlsOpen
+              ? "pointer-events-auto translate-x-0 opacity-100"
+              : "pointer-events-none opacity-0 ltr:translate-x-2 rtl:-translate-x-2 group-hover:pointer-events-auto group-hover:translate-x-0 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-x-0 group-focus-within:opacity-100",
+          )}
+        >
+          <div
+            id={statusId}
+            role={state === "error" && !errorDetailVisible ? "alert" : "status"}
+            aria-live={
+              state === "error" && !errorDetailVisible ? "assertive" : "polite"
+            }
+            className="me-1 whitespace-nowrap text-xs font-medium text-foreground"
+          >
+            {copy.status[state]}
+          </div>
 
-      <div className="pointer-events-auto flex items-center gap-2">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              type="button"
-              variant="outline"
-              size="icon"
-              disabled={ending}
-              onClick={onEndVoiceMode}
-              aria-label={copy.endVoiceMode}
-              className="size-10 rounded-full bg-background shadow-md"
-            >
-              <IconPhoneOff />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>{copy.endVoiceMode}</TooltipContent>
-        </Tooltip>
+          {onOpenMicrophoneSettings ? (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  disabled={ending}
+                  onClick={onOpenMicrophoneSettings}
+                  aria-label={copy.microphoneSettings}
+                  className="size-8 rounded-full text-muted-foreground transition-transform duration-150 ease-out active:scale-[0.97]"
+                >
+                  <IconSettings />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>{copy.microphoneSettings}</TooltipContent>
+            </Tooltip>
+          ) : null}
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                disabled={ending}
+                onClick={onEndVoiceMode}
+                aria-label={copy.endVoiceMode}
+                className="size-8 rounded-full text-destructive transition-transform duration-150 ease-out hover:bg-destructive/10 hover:text-destructive active:scale-[0.97]"
+              >
+                <IconPhoneOff />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{copy.endVoiceMode}</TooltipContent>
+          </Tooltip>
+        </div>
 
         <Tooltip>
           <TooltipTrigger asChild>
@@ -378,23 +448,51 @@ export function RealtimeVoiceModeDock({
               type="button"
               size="icon"
               disabled={ending}
-              onClick={onToggleChat}
+              onClick={() => {
+                setControlsOpen(true);
+                onToggleChat();
+              }}
               aria-label={toggleLabel}
               aria-pressed={chatVisible}
               aria-describedby={statusId}
+              aria-controls={controlsId}
+              aria-expanded={controlsOpen}
               className={cn(
-                "size-14 rounded-full shadow-lg",
+                "relative isolate size-16 overflow-visible rounded-full ring-4 shadow-xl transition-transform duration-150 ease-out focus-visible:ring-offset-2 active:scale-[0.97] motion-reduce:transition-none",
                 ORB_STATE_CLASSES[state],
               )}
             >
-              {activity === "idle" ? (
-                <VoiceStateIcon state={state} />
-              ) : (
-                <VoiceWaveform
-                  level={activityLevel}
-                  reducedMotion={reducedMotion}
+              <span
+                aria-hidden="true"
+                className={cn(
+                  "pointer-events-none absolute -inset-2 -z-10 rounded-full bg-current opacity-0 blur-md transition-[transform,opacity] duration-150 ease-out motion-reduce:transition-none",
+                  activity !== "idle" && "opacity-20",
+                )}
+                style={{ transform: `scale(${orbScale})` }}
+              />
+              <span
+                aria-hidden="true"
+                className="pointer-events-none absolute inset-1 overflow-hidden rounded-full bg-gradient-to-br from-background/70 via-background/15 to-transparent opacity-70"
+              >
+                <span className="absolute start-2.5 top-2 size-3 rounded-full bg-background/70 blur-[1px]" />
+                <span
+                  className="absolute -bottom-2 -end-1 h-8 w-10 rounded-full bg-background/25 blur-md transition-transform duration-150 ease-out motion-reduce:transition-none"
+                  style={{
+                    transform: `scale(${reducedMotion ? 1 : 1 + activityLevel * 0.25})`,
+                  }}
                 />
-              )}
+              </span>
+              <span className="relative z-10 flex items-center justify-center">
+                {activity === "idle" ? (
+                  <VoiceStateIcon state={state} />
+                ) : (
+                  <VoiceWaveform
+                    level={activityLevel}
+                    reducedMotion={reducedMotion}
+                    activity={activity}
+                  />
+                )}
+              </span>
             </Button>
           </TooltipTrigger>
           <TooltipContent>{toggleLabel}</TooltipContent>

package/corpus/core/src/client/composer/TiptapComposer.tsx

@@ -2750,7 +2750,7 @@ export function TiptapComposer({
                     onClick={() => void submitComposer("immediate")}
                     disabled={!canSend}
                     data-agent-composer-slot="send-button"
-                    className="agent-composer-send-button shrink-0 flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-30 disabled:cursor-not-allowed"
+                    className="agent-composer-send-button shrink-0 flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground hover:opacity-90 transition-[opacity,transform] duration-150 active:scale-[0.97] disabled:opacity-30 disabled:cursor-not-allowed"
                   >
                     <IconArrowUp className="h-3.5 w-3.5" />
                   </button>

package/corpus/core/src/client/composer/VoiceButton.tsx

@@ -21,7 +21,10 @@ import {
   TooltipTrigger,
 } from "../components/ui/tooltip.js";
 import { useBuilderConnectFlow } from "../settings/useBuilderStatus.js";
-import { useVoiceProviderStatus } from "../voice-provider-status.js";
+import {
+  type VoiceProviderStatus,
+  useVoiceProviderStatus,
+} from "../voice-provider-status.js";
 import { RealtimeVoiceModeEntry } from "./RealtimeVoiceMode.js";
 import {
   useRealtimeVoiceModeCopy,
@@ -45,6 +48,18 @@ export interface VoiceButtonProps {
   disabled?: boolean;
 }
 
+export function isRealtimeVoiceSetupRequired(
+  status: VoiceProviderStatus | null,
+  builderConfigured: boolean | null,
+): boolean {
+  return (
+    status !== null &&
+    !status.builder &&
+    !status.openai &&
+    builderConfigured === false
+  );
+}
+
 export function VoiceButton({ voice, isMac, disabled }: VoiceButtonProps) {
   const { state, start, stop, supported } = voice;
   const realtimeVoice = useRealtimeVoiceModeOptional();
@@ -68,9 +83,10 @@ export function VoiceButton({ voice, isMac, disabled }: VoiceButtonProps) {
       <RealtimeVoiceModeEntry
         copy={realtimeCopy}
         disabled={disabled}
-        setupRequired={
-          builderConnect.hasFetchedStatus && !builderConnect.configured
-        }
+        setupRequired={isRealtimeVoiceSetupRequired(
+          voiceProviders.status,
+          builderConnect.statusResolved ? builderConnect.configured : null,
+        )}
         openAiConfigured={voiceProviders.status?.openai === true}
         connectingBuilder={builderConnect.connecting}
         onConnectBuilder={builderConnect.start}
@@ -104,7 +120,7 @@ export function VoiceButton({ voice, isMac, disabled }: VoiceButtonProps) {
           disabled={disabled || transcribing}
           aria-label={label}
           aria-pressed={recording}
-          className={`shrink-0 flex h-7 w-7 items-center justify-center rounded-md disabled:opacity-30 disabled:cursor-not-allowed ${
+          className={`shrink-0 flex h-7 w-7 items-center justify-center rounded-md transition-colors duration-150 disabled:opacity-30 disabled:cursor-not-allowed ${
             recording
               ? "text-[#00B5FF] bg-[#00B5FF]/10 hover:bg-[#00B5FF]/20"
               : "text-muted-foreground hover:text-foreground hover:bg-accent/50"