jettypod 4.4.116 → 4.4.120

package/apps/dashboard/components/KanbanCard.tsx

@@ -0,0 +1,506 @@
+'use client';
+
+import { useState, memo } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { m } from 'framer-motion';
+import type { WorkItem } from '@/lib/db';
+import { EditableTitle } from './EditableTitle';
+import { CardMenu } from './CardMenu';
+import { CopyableId } from './CopyableId';
+import { WaveCompletionAnimation } from './WaveCompletionAnimation';
+import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
+import { MODE_LABELS } from '@/lib/constants';
+import { TypeIcon } from './TypeIcon';
+import { shadow } from '@/lib/shadows';
+
+function getModeLabel(item: WorkItem): string {
+  if (!item.mode) return '';
+  const base = MODE_LABELS[item.mode]?.label || item.mode;
+  if (item.current_step && item.total_steps) {
+    return `${base} ${item.current_step}/${item.total_steps}`;
+  }
+  return base;
+}
+
+// Session indicator icon - shows when item has an active Claude session
+function SessionIndicatorIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+    </svg>
+  );
+}
+
+export interface KanbanCardProps {
+  item: WorkItem;
+  epicTitle?: string | null;
+  showEpic?: boolean;
+  isInFlight?: boolean;
+  onTitleSave?: (id: number, newTitle: string) => Promise<void>;
+  onStatusChange?: (id: number, newStatus: string) => Promise<void | { success: boolean; notFound?: boolean }>;
+  onReject?: (id: number, reason: string) => Promise<void>;
+  onTriggerClaude?: (id: number, title: string, type: string, conversational?: boolean, description?: string | null) => void;
+  hasActiveSession?: boolean;
+  onOpenSession?: (id: string) => void;
+  onCloseSession?: (id: string) => void;
+  onRestart?: (id: number) => void;
+  usageAllowed?: boolean;
+  // Animation state lifted to board level
+  isCompletingAnimation?: boolean;
+  onAnimationComplete?: () => void;
+  isHighlighted?: boolean;
+}
+
+export const KanbanCard = memo(function KanbanCard({ item, epicTitle, showEpic = false, isInFlight = false, onTitleSave, onStatusChange, onReject, onTriggerClaude, hasActiveSession, onOpenSession, onCloseSession, onRestart, usageAllowed = true, isCompletingAnimation = false, onAnimationComplete, isHighlighted = false }: KanbanCardProps) {
+  const [expanded, setExpanded] = useState(false);
+  const [showRejectInput, setShowRejectInput] = useState(false);
+  const [rejectReason, setRejectReason] = useState('');
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+  const router = useRouter();
+
+  const handleOpenSession = (e: React.MouseEvent) => {
+    e.stopPropagation(); // Prevent card navigation
+    if (onOpenSession) {
+      onOpenSession(String(item.id));
+    }
+  };
+
+  const handleStart = async (e: React.MouseEvent) => {
+    e.stopPropagation(); // Prevent card navigation
+    if (onStatusChange) {
+      await onStatusChange(item.id, 'in_progress');
+      if (onTriggerClaude) {
+        onTriggerClaude(item.id, item.title, item.type, !!item.conversational, item.description);
+      }
+    }
+  };
+
+  const handleRestart = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (onRestart) {
+      onRestart(item.id);
+    }
+  };
+
+  const canStart = item.status === 'backlog' || item.status === 'cancelled';
+
+  // An item is reviewable when it has ready_for_review flag set
+  // This applies to kanban-visible items: features, standalone chores/bugs, and items under epics
+  const isReviewable = !!item.ready_for_review;
+
+  const handleAccept = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (onStatusChange) {
+      await onStatusChange(item.id, 'done');
+    }
+    if (onCloseSession) {
+      onCloseSession(String(item.id));
+    }
+  };
+
+  const handleRejectClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setShowRejectInput(true);
+  };
+
+  const handleRejectConfirm = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (onReject && rejectReason.trim()) {
+      await onReject(item.id, rejectReason.trim());
+      setShowRejectInput(false);
+      setRejectReason('');
+    }
+  };
+
+  const handleRejectCancel = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setShowRejectInput(false);
+    setRejectReason('');
+  };
+
+  // Calculate chores for expandable section
+  const allChores = item.chores || [];
+  const incompleteChores = allChores.filter(c => c.status !== 'done');
+  const hasChores = allChores.length > 0;
+  const hasIncompleteChores = incompleteChores.length > 0;
+
+  // Calculate bugs for expandable section
+  const allBugs = item.bugs || [];
+  const incompleteBugs = allBugs.filter(b => b.status !== 'done');
+  const hasBugs = allBugs.length > 0;
+
+  const handleCardClick = () => {
+    router.push(`/work/${item.id}`);
+  };
+
+  const handleTitleSave = async (id: number, newTitle: string) => {
+    if (onTitleSave) {
+      await onTitleSave(id, newTitle);
+    }
+  };
+
+  // Status changes are now handled by the board-level wrapper that triggers animation
+  const handleStatusChange = async (id: number, newStatus: string) => {
+    if (onStatusChange) {
+      await onStatusChange(id, newStatus);
+    }
+  };
+
+  const isDone = item.status === 'done';
+
+  const getCardStyles = () => {
+    return {
+      className: 'bg-white dark:bg-zinc-800',
+      boxShadow: shadow.sm,
+      hoverBoxShadow: shadow.lg,
+    };
+  };
+
+  const cardStyles = getCardStyles();
+
+  const cardContent = (
+    <WaveCompletionAnimation isPlaying={isCompletingAnimation} onComplete={onAnimationComplete || (() => {})}>
+      <div
+        className={`rounded-xl overflow-hidden transition-[color,background-color,border-color,box-shadow,transform,translate,opacity] duration-200 ease-out hover:-translate-y-0.5 ${cardStyles.className}`}
+        style={{ boxShadow: cardStyles.boxShadow }}
+        onMouseEnter={(e) => { e.currentTarget.style.boxShadow = cardStyles.hoverBoxShadow; }}
+        onMouseLeave={(e) => { e.currentTarget.style.boxShadow = cardStyles.boxShadow; }}
+        data-testid={`kanban-card-${item.id}`}>
+        <div
+          onClick={handleCardClick}
+          className="block p-4 cursor-pointer"
+        >
+        <div className="flex items-start gap-3">
+          <span className="text-base flex-shrink-0"><TypeIcon type={item.type} /></span>
+          <div className="flex-1 min-w-0">
+            {isDone ? (
+              /* Compact layout for done cards: ID and title inline, no mode badge */
+              <div className="flex items-start gap-3">
+                <CopyableId id={item.id} title={item.title} type={item.type} />
+                {hasActiveSession && (
+                  <button
+                    onClick={handleOpenSession}
+                    className="p-1 rounded hover:bg-zinc-100 dark:hover:bg-zinc-700 text-[#819D9F] transition-colors duration-200 ease-out"
+                    aria-label="Open active session"
+                    data-testid={`session-indicator-${item.id}`}
+                    title="Open session"
+                  >
+                    <SessionIndicatorIcon className="w-4 h-4" />
+                  </button>
+                )}
+                <span className="text-base font-medium text-zinc-900 dark:text-zinc-100">
+                  {item.title || <span className="text-zinc-400 italic">(Untitled)</span>}
+                </span>
+              </div>
+            ) : (
+              /* Standard layout: ID + mode badge on line 1, title below */
+              <>
+                <div className="flex items-start justify-between mb-1.5">
+                  <div className="flex items-center gap-3 flex-wrap">
+                    <CopyableId id={item.id} title={item.title} type={item.type} />
+                    {hasActiveSession && (
+                      <button
+                        onClick={handleOpenSession}
+                        className="p-1 rounded hover:bg-zinc-100 dark:hover:bg-zinc-700 text-[#819D9F] transition-colors duration-200 ease-out"
+                        aria-label="Open active session"
+                        data-testid={`session-indicator-${item.id}`}
+                        title="Open session"
+                      >
+                        <SessionIndicatorIcon className="w-4 h-4" />
+                      </button>
+                    )}
+                    {item.mode && MODE_LABELS[item.mode] && (
+                      <span className={`text-xs px-2 py-1 rounded ${MODE_LABELS[item.mode].color}`}>
+                        {getModeLabel(item)}
+                      </span>
+                    )}
+                  </div>
+                  {isReviewable ? (
+                    <div className="flex items-center gap-1.5 flex-shrink-0">
+                      {item.status !== 'done' && onStatusChange && (
+                        <Button
+                          onClick={handleAccept}
+                          variant="secondary"
+                          size="xs"
+                          aria-label="Accept work item"
+                          data-testid={`accept-button-${item.id}`}
+                        >
+                          Accept
+                        </Button>
+                      )}
+                      {onReject && (
+                        <Button
+                          onClick={handleRejectClick}
+                          variant="secondary"
+                          size="xs"
+                          aria-label="Reject work item"
+                          data-testid={`reject-button-${item.id}`}
+                        >
+                          Reject
+                        </Button>
+                      )}
+                    </div>
+                  ) : item.rejection_reason && !isDone ? (
+                    <div className="flex items-center gap-1.5 flex-shrink-0">
+                      <span
+                        className="text-xs px-2 py-1 rounded bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
+                        data-testid={`rejected-badge-${item.id}`}
+                      >
+                        Rejected
+                      </span>
+                      {!hasActiveSession && onRestart && (
+                        <Button
+                          onClick={handleRestart}
+                          variant="secondary"
+                          size="xs"
+                          aria-label="Restart work on rejected item"
+                          data-testid={`restart-button-${item.id}`}
+                        >
+                          restart
+                        </Button>
+                      )}
+                    </div>
+                  ) : null}
+                  {canStart && onStatusChange && (
+                    <Button
+                      onClick={handleStart}
+                      variant="secondary"
+                      size="xs"
+                      aria-label="Start work"
+                      data-testid={`start-button-${item.id}`}
+                    >
+                      Start
+                    </Button>
+                  )}
+                </div>
+                <EditableTitle
+                  title={item.title}
+                  itemId={item.id}
+                  onSave={handleTitleSave}
+                  clickToEdit={false}
+                  isEditing={isEditingTitle}
+                  onEditingChange={setIsEditingTitle}
+                />
+              </>
+            )}
+            {showEpic && epicTitle && (() => {
+              const epicId = item.parent_id || item.epic_id;
+              return epicId ? (
+                <Link
+                  href={`/work/${epicId}`}
+                  onClick={(e) => e.stopPropagation()}
+                  className="group/epic text-sm text-zinc-400 dark:text-zinc-500 mt-2 flex items-center gap-1.5 hover:text-zinc-600 dark:hover:text-zinc-300"
+                >
+                  <TypeIcon type="epic" className="w-5 h-5 inline" />
+                  <span className="group-hover/epic:underline">{epicTitle}</span>
+                </Link>
+              ) : (
+                <p className="text-sm text-zinc-400 dark:text-zinc-500 mt-2 flex items-center gap-1.5">
+                  <TypeIcon type="epic" className="w-5 h-5 inline" />
+                  <span>{epicTitle}</span>
+                </p>
+              );
+            })()}
+          </div>
+          <div className="flex items-center gap-1.5">
+            {onStatusChange && (
+              <CardMenu
+                itemId={item.id}
+                itemTitle={item.title}
+                itemType={item.type}
+                itemDescription={item.description}
+                conversational={!!item.conversational}
+                currentStatus={item.status}
+                onStatusChange={handleStatusChange}
+                onTriggerClaude={onTriggerClaude}
+                hasActiveSession={hasActiveSession}
+                onOpenSession={onOpenSession}
+                usageAllowed={usageAllowed}
+                onEditName={() => setIsEditingTitle(true)}
+                onUnaccept={item.status === 'done' && onReject ? () => setShowRejectInput(true) : undefined}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+      {/* Rejection reason input */}
+      {showRejectInput && (
+        <div className="px-4 pb-4 border-t border-zinc-200 dark:border-zinc-700" onClick={(e) => e.stopPropagation()}>
+          <div className="mt-3">
+            <Input
+              type="text"
+              value={rejectReason}
+              onChange={(e) => setRejectReason(e.target.value)}
+              onKeyDown={(e) => {
+                e.stopPropagation();
+                if (e.key === 'Enter' && rejectReason.trim()) {
+                  handleRejectConfirm(e as unknown as React.MouseEvent);
+                }
+                if (e.key === 'Escape') {
+                  handleRejectCancel(e as unknown as React.MouseEvent);
+                }
+              }}
+              placeholder="Rejection reason..."
+              size="sm"
+              error
+              autoFocus
+              data-testid={`reject-reason-input-${item.id}`}
+            />
+            <div className="flex items-center gap-1.5 mt-2">
+              <Button
+                onClick={handleRejectConfirm}
+                disabled={!rejectReason.trim()}
+                variant="destructive"
+                size="sm"
+                data-testid={`reject-confirm-${item.id}`}
+              >
+                Reject
+              </Button>
+              <Button
+                onClick={handleRejectCancel}
+                variant="ghost"
+                size="sm"
+                data-testid={`reject-cancel-${item.id}`}
+              >
+                Cancel
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+      {/* Rejected indicator */}
+      {item.rejection_reason && (
+        <div className="px-4 pb-3 border-t border-red-200 dark:border-red-800">
+          <div className="mt-2 flex items-start gap-2 text-base text-red-600 dark:text-red-400">
+            <span className="flex-shrink-0">⚠️</span>
+            <span className="italic">{item.rejection_reason}</span>
+          </div>
+        </div>
+      )}
+      {/* Show expandable section for features with chores or bugs */}
+      {(hasChores || hasBugs) && (
+        <div className={"border-t border-zinc-200 dark:border-zinc-700"}>
+          <button
+            onClick={() => setExpanded(!expanded)}
+            className={`w-full px-4 py-2 flex items-start gap-2 text-base transition-colors duration-200 ease-out ${
+              isDone
+                ? 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-700/50'
+                : 'text-zinc-600 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-700/50'
+            }`}
+          >
+            <span className="mt-0.5">{expanded ? '▼' : '▶'}</span>
+            <div className="flex flex-col gap-1">
+              {hasChores && (
+                <div className="flex items-center gap-2">
+                  <TypeIcon type="chore" />
+                  <span>
+                    {isDone
+                      ? `${allChores.length === 0 ? 'no' : allChores.length} chore${allChores.length !== 1 ? 's' : ''}`
+                      : `${incompleteChores.length === 0 ? 'no' : incompleteChores.length}${item.mode ? ` ${item.mode} mode` : ''} chore${incompleteChores.length !== 1 ? 's' : ''} left`}
+                  </span>
+                </div>
+              )}
+              {hasBugs && (
+                <div className="flex items-center gap-2">
+                  <TypeIcon type="bug" />
+                  <span>
+                    {isDone
+                      ? `${allBugs.length === 0 ? 'no' : allBugs.length} bug${allBugs.length !== 1 ? 's' : ''}`
+                      : `${incompleteBugs.length === 0 ? 'no' : incompleteBugs.length} bug${incompleteBugs.length !== 1 ? 's' : ''} left`}
+                  </span>
+                </div>
+              )}
+            </div>
+          </button>
+          {expanded && (
+            <div className="px-4 pb-3 space-y-1.5">
+              {allChores.map((chore) => {
+                const isComplete = chore.status === 'done';
+                return (
+                  <Link
+                    key={chore.id}
+                    href={`/work/${chore.id}`}
+                    className={`block py-1.5 px-3 text-base rounded transition-colors duration-200 ease-out ${
+                      isComplete
+                        ? 'bg-zinc-100 dark:bg-zinc-800/50'
+                        : 'hover:bg-zinc-100 dark:hover:bg-zinc-700'
+                    }`}
+                  >
+                    <div className="flex items-center gap-3">
+                      <span className={`font-mono ${isComplete ? 'text-zinc-500' : 'text-zinc-400'}`}>#{chore.id}</span>
+                      {!isDone && chore.mode && MODE_LABELS[chore.mode] && (
+                        <span className={`px-1 py-0.5 rounded text-[10px] ${MODE_LABELS[chore.mode].color}`}>
+                          {getModeLabel(chore)}
+                        </span>
+                      )}
+                      <span className={`truncate ${
+                        isComplete
+                          ? 'text-zinc-500'
+                          : 'text-zinc-700 dark:text-zinc-300'
+                      }`}>
+                        {chore.title || <span className="text-zinc-400 italic">(Untitled)</span>}
+                      </span>
+                    </div>
+                  </Link>
+                );
+              })}
+              {allBugs.map((bug) => {
+                const isComplete = bug.status === 'done';
+                return (
+                  <Link
+                    key={bug.id}
+                    href={`/work/${bug.id}`}
+                    className={`block py-1.5 px-3 text-base rounded transition-colors duration-200 ease-out ${
+                      isComplete
+                        ? 'bg-zinc-100 dark:bg-zinc-800/50'
+                        : 'hover:bg-zinc-100 dark:hover:bg-zinc-700'
+                    }`}
+                  >
+                    <div className="flex items-center gap-3">
+                      <span className={`font-mono ${isComplete ? 'text-zinc-500' : 'text-zinc-400'}`}>#{bug.id}</span>
+                      <TypeIcon type="bug" />
+                      <span className={`truncate ${
+                        isComplete
+                          ? 'text-zinc-500'
+                          : 'text-zinc-700 dark:text-zinc-300'
+                      }`}>
+                        {bug.title || <span className="text-zinc-400 italic">(Untitled)</span>}
+                      </span>
+                    </div>
+                  </Link>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
+      </div>
+    </WaveCompletionAnimation>
+  );
+
+  if (isHighlighted) {
+    return (
+      <m.div
+        animate={{
+          boxShadow: [
+            '0 0 0 0px rgba(129, 157, 159, 0)',
+            '0 0 0 3px rgba(129, 157, 159, 0.4)',
+            '0 0 0 0px rgba(129, 157, 159, 0)',
+          ],
+        }}
+        transition={{
+          duration: 2,
+          repeat: Infinity,
+          ease: 'easeInOut',
+        }}
+        className="rounded-xl"
+      >
+        {cardContent}
+      </m.div>
+    );
+  }
+
+  return cardContent;
+});

package/apps/dashboard/components/LazyMarkdown.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import ReactMarkdown, { type Components } from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+export default function LazyMarkdown({ children, components }: { children: string; components?: Components }) {
+  return (
+    <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
+      {children}
+    </ReactMarkdown>
+  );
+}

package/apps/dashboard/components/MainNav.tsx

@@ -3,9 +3,9 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { useClaudeSession } from '../contexts/ClaudeSessionContext';
-import { useConnectionStatus } from '../contexts/ConnectionStatusContext';
+import { useSessionActions } from '../contexts/ClaudeSessionContext';
 import { ProjectSwitcher } from './ProjectSwitcher';
+import { Button } from '@/components/ui/Button';
 
 interface MainNavProps {
   projectName: string;
@@ -13,8 +13,7 @@ interface MainNavProps {
 
 export function MainNav({ projectName }: MainNavProps) {
   const pathname = usePathname();
-  const { openSessionPanel } = useClaudeSession();
-  const { status: connectionStatus } = useConnectionStatus();
+  const { openSessionPanel } = useSessionActions();
 
   const isBacklogActive = pathname === '/';
   const isTestsActive = pathname === '/tests';
@@ -23,108 +22,75 @@ export function MainNav({ projectName }: MainNavProps) {
 
   return (
     <header className="sticky top-0 z-10 border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 flex-shrink-0">
-      <div className="max-w-6xl mx-auto px-4 py-4">
+      <div className="px-5 py-5">
         <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-4">
             <Image
-              src="/jettypod_wordmark.png"
+              src="/jettypod_logo.png"
               alt="JettyPod"
-              width={100}
-              height={24}
+              width={36}
+              height={36}
               priority
+              className="rounded-full"
             />
             <ProjectSwitcher projectName={projectName} />
             {isBacklogActive ? (
-              <span className="px-2.5 py-1 text-sm text-zinc-900 dark:text-zinc-100 font-medium">
+              <span className="px-3 py-1.5 text-base text-zinc-900 dark:text-zinc-100 font-medium">
                 Backlog
               </span>
             ) : (
               <Link
                 href="/"
-                className="px-2.5 py-1 text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors"
+                className="px-3 py-1.5 text-base text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors duration-200 ease-out"
               >
                 Backlog
               </Link>
             )}
             {isTestsActive ? (
-              <span className="px-2.5 py-1 text-sm text-zinc-900 dark:text-zinc-100 font-medium">
+              <span className="px-3 py-1.5 text-base text-zinc-900 dark:text-zinc-100 font-medium">
                 Tests
               </span>
             ) : (
               <Link
                 href="/tests"
-                className="px-2.5 py-1 text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors"
+                className="px-3 py-1.5 text-base text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors duration-200 ease-out"
               >
                 Tests
               </Link>
             )}
             {isPrototypesActive ? (
-              <span className="px-2.5 py-1 text-sm text-zinc-900 dark:text-zinc-100 font-medium">
+              <span className="px-3 py-1.5 text-base text-zinc-900 dark:text-zinc-100 font-medium">
                 Prototypes
               </span>
             ) : (
               <Link
                 href="/prototypes"
-                className="px-2.5 py-1 text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors"
+                className="px-3 py-1.5 text-base text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors duration-200 ease-out"
               >
                 Prototypes
               </Link>
             )}
             {isSettingsActive ? (
-              <span className="px-2.5 py-1 text-sm text-zinc-900 dark:text-zinc-100 font-medium">
+              <span className="px-3 py-1.5 text-base text-zinc-900 dark:text-zinc-100 font-medium">
                 Settings
               </span>
             ) : (
               <Link
                 href="/settings"
-                className="px-2.5 py-1 text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors"
+                className="px-3 py-1.5 text-base text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors duration-200 ease-out"
               >
                 Settings
               </Link>
             )}
-            {/* Connection Status Indicator */}
-            <div className="flex items-center gap-2" data-testid="connection-status">
-              <span
-                className={`w-2 h-2 rounded-full ${
-                  connectionStatus === 'connected'
-                    ? 'bg-green-500'
-                    : connectionStatus === 'reconnecting'
-                    ? 'bg-yellow-500 animate-pulse'
-                    : 'bg-red-500'
-                }`}
-              />
-              <span className="text-xs text-zinc-500 dark:text-zinc-400">
-                {connectionStatus === 'connected'
-                  ? 'Live updates active'
-                  : connectionStatus === 'reconnecting'
-                  ? 'Reconnecting...'
-                  : 'Disconnected'}
-              </span>
-            </div>
           </div>
           <div className="flex items-center">
-            <button
+            <Button
               onClick={openSessionPanel}
-              className="px-4 py-2 text-xs font-medium rounded-xl transition-all duration-200 hover:-translate-y-1 hover:scale-[1.01] active:translate-y-0 active:scale-100"
-              style={{
-                cursor: 'pointer',
-                background: 'linear-gradient(145deg, #ffffff 0%, #faf9f7 10%, #f0f4f4 35%, #c8d9da 55%, #819D9F 90%)',
-                color: '#3d4d4e',
-                boxShadow: `
-                  0 1px 1px rgba(0, 0, 0, 0.02),
-                  0 2px 4px rgba(0, 0, 0, 0.03),
-                  0 6px 12px rgba(0, 0, 0, 0.05),
-                  0 12px 24px rgba(0, 0, 0, 0.06),
-                  0 20px 40px rgba(129, 157, 159, 0.2),
-                  0 32px 64px rgba(129, 157, 159, 0.18),
-                  inset 0 2px 4px rgba(255, 255, 255, 1),
-                  inset 0 -2px 4px rgba(129, 157, 159, 0.05)
-                `,
-              }}
+              size="sm"
               data-testid="nav-claude-sessions-button"
             >
               Claude Sessions
-            </button>
+            </Button>
           </div>
         </div>
       </div>