jettypod 4.4.116 → 4.4.120

package/apps/dashboard/components/RealTimeTestsWrapper.tsx

@@ -2,7 +2,10 @@
 
 import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
 import { useWebSocket, type WebSocketMessage } from '../hooks/useWebSocket';
+import { useSessionActions } from '../contexts/ClaudeSessionContext';
 import type { TestDashboardData, TestFeature } from '@/lib/tests';
+import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
 
 interface RealTimeTestsWrapperProps {
   initialData: TestDashboardData;
@@ -31,6 +34,10 @@ const statusColors = {
 
 const SELECTED_FEATURE_KEY = 'tests-selected-feature-id';
 
+function parseUtcDate(dateStr: string): Date {
+  return new Date(dateStr.endsWith('Z') ? dateStr : dateStr.replace(' ', 'T') + 'Z');
+}
+
 type StepStatus = 'pending' | 'running' | 'passed' | 'failed';
 
 export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps) {
@@ -49,6 +56,7 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
 
   const elapsedStartRef = useRef<Record<string, number>>({});
   const allFeaturesRef = useRef<TestFeature[]>([]);
+  const { createFixScenarioSession } = useSessionActions();
 
   const refreshUndefinedSteps = useCallback(() => {
     fetch('/api/tests/undefined')
@@ -342,43 +350,43 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
       <div className="flex-shrink-0 px-6 py-4 border-b border-zinc-200">
         <div className="flex gap-4">
           <div className="flex items-center gap-2 px-4 py-2 bg-zinc-100 rounded-lg">
-            <span className="text-sm text-zinc-500">Total</span>
+            <span className="text-base text-zinc-500">Total</span>
             <span className="font-mono font-semibold text-zinc-900">
               {data.summary.total}
             </span>
           </div>
           <button
             onClick={() => setStatusFilter(statusFilter === 'pass' ? null : 'pass')}
-            className={`flex items-center gap-2 px-4 py-2 bg-green-50 rounded-lg cursor-pointer transition-all ${
+            className={`flex items-center gap-2 px-4 py-2 bg-green-50 rounded-lg cursor-pointer transition-[color,background-color,box-shadow] duration-200 ease-out ${
               statusFilter === 'pass' ? 'ring-2 ring-green-500' : 'hover:bg-green-100'
             }`}
             data-testid="status-badge-passing"
           >
-            <span className="text-sm text-green-600">Passing</span>
+            <span className="text-base text-green-600">Passing</span>
             <span className="font-mono font-semibold text-green-700">
               {data.summary.passing}
             </span>
           </button>
           <button
             onClick={() => setStatusFilter(statusFilter === 'fail' ? null : 'fail')}
-            className={`flex items-center gap-2 px-4 py-2 bg-red-50 rounded-lg cursor-pointer transition-all ${
+            className={`flex items-center gap-2 px-4 py-2 bg-red-50 rounded-lg cursor-pointer transition-[color,background-color,box-shadow] duration-200 ease-out ${
               statusFilter === 'fail' ? 'ring-2 ring-red-500' : 'hover:bg-red-100'
             }`}
             data-testid="status-badge-failing"
           >
-            <span className="text-sm text-red-600">Failing</span>
+            <span className="text-base text-red-600">Failing</span>
             <span className="font-mono font-semibold text-red-700">
               {data.summary.failing}
             </span>
           </button>
           <button
             onClick={() => setStatusFilter(statusFilter === 'pending' ? null : 'pending')}
-            className={`flex items-center gap-2 px-4 py-2 bg-amber-50 rounded-lg cursor-pointer transition-all ${
+            className={`flex items-center gap-2 px-4 py-2 bg-amber-50 rounded-lg cursor-pointer transition-[color,background-color,box-shadow] duration-200 ease-out ${
               statusFilter === 'pending' ? 'ring-2 ring-amber-500' : 'hover:bg-amber-100'
             }`}
             data-testid="status-badge-pending"
           >
-            <span className="text-sm text-amber-600">Pending</span>
+            <span className="text-base text-amber-600">Pending</span>
             <span className="font-mono font-semibold text-amber-700">
               {data.summary.pending}
             </span>
@@ -386,7 +394,7 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
           {statusFilter && (
             <button
               onClick={() => setStatusFilter(null)}
-              className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-500 hover:text-zinc-700 rounded-lg hover:bg-zinc-100 transition-colors"
+              className="flex items-center gap-1 px-3 py-2 text-base text-zinc-500 hover:text-zinc-700 rounded-lg hover:bg-zinc-100 transition-colors duration-200 ease-out"
               data-testid="clear-status-filter"
             >
               <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
@@ -396,8 +404,8 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
             </button>
           )}
           {data.summary.lastRun && (
-            <div className="flex items-center gap-2 px-4 py-2 text-sm text-zinc-500">
-              Last run: {new Date(data.summary.lastRun).toLocaleString()}
+            <div className="flex items-center gap-2 px-4 py-2 text-base text-zinc-500">
+              Last run: {parseUtcDate(data.summary.lastRun).toLocaleString()}
             </div>
           )}
         </div>
@@ -408,13 +416,13 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
         {/* Left Sidebar - Feature List */}
         <div className="w-80 flex-shrink-0 border-r border-zinc-200 flex flex-col overflow-hidden">
           {/* Search */}
-          <div className="p-3 border-b border-zinc-200">
-            <input
+          <div className="p-4 border-b border-zinc-200">
+            <Input
               type="text"
               placeholder="Search features..."
               value={searchText}
               onChange={(e) => setSearchText(e.target.value)}
-              className="w-full px-3 py-2 text-sm border border-zinc-200 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-zinc-300 focus:border-transparent placeholder:text-zinc-400"
+              size="sm"
             />
           </div>
 
@@ -424,17 +432,17 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
               <div className="flex flex-col items-center justify-center h-full px-6 text-center">
                 {statusFilter && searchText ? (
                   <>
-                    <span className="text-zinc-400 text-sm">No {statusFilter === 'pass' ? 'passing' : statusFilter === 'fail' ? 'failing' : 'pending'} features matching &ldquo;{searchText}&rdquo;</span>
+                    <span className="text-zinc-400 text-base">No {statusFilter === 'pass' ? 'passing' : statusFilter === 'fail' ? 'failing' : 'pending'} features matching &ldquo;{searchText}&rdquo;</span>
                     <div className="flex gap-2 mt-2">
                       <button
                         onClick={() => setStatusFilter(null)}
-                        className="text-xs text-zinc-500 hover:text-zinc-700 underline"
+                        className="text-base text-zinc-500 hover:text-zinc-700 underline"
                       >
                         Clear filter
                       </button>
                       <button
                         onClick={() => setSearchText('')}
-                        className="text-xs text-zinc-500 hover:text-zinc-700 underline"
+                        className="text-base text-zinc-500 hover:text-zinc-700 underline"
                       >
                         Clear search
                       </button>
@@ -442,28 +450,28 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
                   </>
                 ) : statusFilter ? (
                   <>
-                    <span className="text-zinc-400 text-sm">No {statusFilter === 'pass' ? 'passing' : statusFilter === 'fail' ? 'failing' : 'pending'} features</span>
+                    <span className="text-zinc-400 text-base">No {statusFilter === 'pass' ? 'passing' : statusFilter === 'fail' ? 'failing' : 'pending'} features</span>
                     <button
                       onClick={() => setStatusFilter(null)}
-                      className="mt-2 text-xs text-zinc-500 hover:text-zinc-700 underline"
+                      className="mt-2 text-base text-zinc-500 hover:text-zinc-700 underline"
                     >
                       Clear filter
                     </button>
                   </>
                 ) : searchText ? (
                   <>
-                    <span className="text-zinc-400 text-sm">No results for &ldquo;{searchText}&rdquo;</span>
+                    <span className="text-zinc-400 text-base">No results for &ldquo;{searchText}&rdquo;</span>
                     <button
                       onClick={() => setSearchText('')}
-                      className="mt-2 text-xs text-zinc-500 hover:text-zinc-700 underline"
+                      className="mt-2 text-base text-zinc-500 hover:text-zinc-700 underline"
                     >
                       Clear search
                     </button>
                   </>
                 ) : (
                   <>
-                    <span className="text-zinc-400 text-sm">No features found</span>
-                    <span className="text-zinc-300 text-xs mt-1">Add .feature files to get started</span>
+                    <span className="text-zinc-400 text-base">No features found</span>
+                    <span className="text-zinc-300 text-base mt-1">Add .feature files to get started</span>
                   </>
                 )}
               </div>
@@ -478,21 +486,21 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
                 <button
                   key={feature.id}
                   onClick={() => setSelectedFeatureId(feature.id)}
-                  className={`w-full text-left px-4 py-3 border-b border-zinc-100 hover:bg-zinc-50 transition-colors ${
+                  className={`w-full text-left px-4 py-3 border-b border-zinc-100 hover:bg-zinc-50 transition-colors duration-200 ease-out ${
                     isSelected ? 'bg-zinc-100 border-l-2 border-l-zinc-900' : ''
                   }`}
                 >
-                  <div className="flex items-center justify-between gap-2">
-                    <span className={`text-sm font-medium truncate ${
+                  <div className="flex items-center justify-between gap-3">
+                    <span className={`text-base font-medium truncate ${
                       status === 'fail' ? 'text-red-700' : 'text-zinc-900'
                     }`}>
                       {feature.title}
                     </span>
-                    <span className={`flex-shrink-0 text-xs font-mono px-2 py-0.5 rounded-full ${statusColors[status]}`}>
+                    <span className={`flex-shrink-0 text-xs font-mono px-2.5 py-1 rounded-full ${statusColors[status]}`}>
                       {passingCount}/{totalCount}
                     </span>
                   </div>
-                  <div className="text-xs text-zinc-400 mt-0.5 truncate">
+                  <div className="text-base text-zinc-400 mt-0.5 truncate">
                     {feature.featureFile}
                   </div>
                 </button>
@@ -504,42 +512,33 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
         {/* Right Panel - Detail */}
         <div className="flex-1 overflow-y-auto">
           {selectedFeature ? (
-            <div className="p-6">
-              <div className="mb-6">
-                <div className="flex items-start justify-between gap-4">
+            <div className="p-8">
+              <div className="mb-8">
+                <div className="flex items-start justify-between gap-5">
                   <div>
                     <h2 className="text-lg font-semibold text-zinc-900">{selectedFeature.title}</h2>
-                    <p className="text-sm text-zinc-500 font-mono mt-1">{selectedFeature.featureFile}</p>
+                    <p className="text-base text-zinc-500 font-mono mt-1">{selectedFeature.featureFile}</p>
                     {selectedFeature.description && (
-                      <p className="text-sm text-zinc-600 mt-2">{selectedFeature.description}</p>
+                      <p className="text-base text-zinc-600 mt-2">{selectedFeature.description}</p>
                     )}
                   </div>
-                  <button
+                  <Button
                     onClick={() => {
                       if (!runningAll && runningScenarios.size === 0) {
                         runAllScenarios(selectedFeature);
                       }
                     }}
                     disabled={runningAll || runningScenarios.size > 0}
-                    className={`flex-shrink-0 px-3 py-1.5 text-sm font-medium rounded-lg transition-colors ${
-                      runningAll || runningScenarios.size > 0
-                        ? 'text-zinc-400 bg-zinc-50 cursor-not-allowed'
-                        : 'text-white bg-zinc-900 hover:bg-zinc-800'
-                    }`}
+                    loading={runningAll}
+                    size="sm"
+                    className="flex-shrink-0"
                   >
-                    {runningAll ? (
-                      <span className="flex items-center gap-2">
-                        <span className="inline-block w-3.5 h-3.5 border-2 border-zinc-300 border-t-white rounded-full animate-spin" />
-                        Running All...
-                      </span>
-                    ) : (
-                      'Run All'
-                    )}
-                  </button>
+                    {runningAll ? 'Running All...' : 'Run All'}
+                  </Button>
                 </div>
               </div>
 
-              <div className="space-y-4">
+              <div className="space-y-5">
                 {selectedFeature.scenarios.map(scenario => {
                   const scenarioKey = `${selectedFeature.featureFile}::${scenario.title}`;
                   const isRunning = runningScenarios.has(scenarioKey);
@@ -548,32 +547,39 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
                   return (
                   <div
                     key={scenario.id}
-                    className={`rounded-lg border ${
+                    className={`rounded-lg ${
                       isRunning
-                        ? 'border-blue-200 bg-blue-50'
+                        ? 'border-2 border-[#819D9F]/30 bg-[#e8f0f0]'
                         : scenario.status === 'fail'
-                        ? 'border-red-200 bg-red-50'
+                        ? 'border-2 border-red-200 bg-red-50'
                         : scenario.status === 'pending'
-                        ? 'border-amber-200 bg-amber-50'
-                        : 'border-zinc-200 bg-white'
+                        ? 'border-2 border-amber-200 bg-amber-50'
+                        : 'bg-white'
                     }`}
                   >
-                    <div className="flex items-center justify-between p-4">
-                      <div className="flex items-center gap-2">
-                        <span className="text-sm">
+                    <div className="flex items-center justify-between p-5">
+                      <div className="flex items-center gap-3">
+                        <span className="text-base">
                           {isRunning ? '🔄' : scenario.status === 'pass' ? '✅' : scenario.status === 'fail' ? '❌' : '⏳'}
                         </span>
-                        <span className={`text-sm font-medium ${
-                          isRunning ? 'text-blue-700' : scenario.status === 'fail' ? 'text-red-700' : 'text-zinc-900'
+                        <span className={`text-base font-medium ${
+                          isRunning ? 'text-[#5a7d7f]' : scenario.status === 'fail' ? 'text-red-700' : 'text-zinc-900'
                         }`}>
                           {scenario.title}
                         </span>
                       </div>
-                      <div className="flex items-center gap-2">
+                      <div className="flex items-center gap-3">
                         {isRunning && elapsed !== undefined ? (
-                          <span className="text-xs font-mono text-blue-500">{elapsed}s</span>
+                          <span className="text-xs font-mono text-[#819D9F]">{elapsed}s</span>
                         ) : (
-                          <span className="text-xs font-mono text-zinc-400">{scenario.duration}</span>
+                          <div className="flex items-center gap-3">
+                            <span className="text-xs font-mono text-zinc-400">{scenario.duration}</span>
+                            {scenario.lastRun && (
+                              <span className="text-xs text-zinc-400" title={parseUtcDate(scenario.lastRun).toLocaleString()}>
+                                {parseUtcDate(scenario.lastRun).toLocaleString()}
+                              </span>
+                            )}
+                          </div>
                         )}
                         <button
                           onClick={(e) => {
@@ -583,7 +589,7 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
                             }
                           }}
                           disabled={isRunning}
-                          className={`px-2 py-1 text-xs font-medium rounded transition-colors ${
+                          className={`px-3 py-1.5 text-base font-medium rounded transition-colors duration-200 ease-out ${
                             isRunning
                               ? 'text-zinc-400 bg-zinc-50 cursor-not-allowed'
                               : 'text-zinc-600 bg-zinc-100 hover:bg-zinc-200'
@@ -591,7 +597,7 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
                         >
                           {isRunning ? (
                             <span className="flex items-center gap-1">
-                              <span className="inline-block w-3 h-3 border-2 border-blue-300 border-t-blue-600 rounded-full animate-spin" />
+                              <span className="inline-block w-3 h-3 border-2 border-[#819D9F]/50 border-t-[#5a7d7f] rounded-full animate-spin" />
                               Running...
                             </span>
                           ) : (
@@ -603,8 +609,8 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
 
                     {/* Gherkin Steps */}
                     {scenario.steps && scenario.steps.length > 0 && (
-                      <div className="px-4 pb-3 border-t border-zinc-100">
-                        <div className="mt-3 space-y-1">
+                      <div className="px-5 pb-4 border-t border-zinc-100">
+                        <div className="mt-4 space-y-1.5">
                           {scenario.steps.map((step: string, i: number) => {
                             const isFailedStep = scenario.failedStep && step.includes(scenario.failedStep.replace(/^(Given |When |Then |And |But )/, ''));
                             const scenarioUndefined = undefinedStepsMap[scenario.title] || [];
@@ -613,9 +619,9 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
                             return (
                               <div
                                 key={i}
-                                className={`text-xs font-mono py-1 px-2 rounded flex items-center gap-1.5 ${
+                                className={`text-xs font-mono py-1.5 px-3 rounded flex items-center gap-2 ${
                                   stepStatus === 'running'
-                                    ? 'bg-blue-100 text-blue-900 border-l-2 border-blue-500'
+                                    ? 'bg-[#e8f0f0] text-zinc-900 border-l-2 border-[#819D9F]'
                                     : stepStatus === 'passed'
                                     ? 'bg-green-50 text-green-800 border-l-2 border-green-400'
                                     : stepStatus === 'failed'
@@ -631,7 +637,7 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
                               >
                                 {stepStatus === 'running' && (
                                   <span className="flex-shrink-0">
-                                    <span className="inline-block w-2.5 h-2.5 border-2 border-blue-300 border-t-blue-600 rounded-full animate-spin" />
+                                    <span className="inline-block w-2.5 h-2.5 border-2 border-[#819D9F]/50 border-t-[#5a7d7f] rounded-full animate-spin" />
                                   </span>
                                 )}
                                 {stepStatus === 'passed' && (
@@ -660,17 +666,34 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
 
                     {/* Error Details */}
                     {scenario.status === 'fail' && scenario.error && (
-                      <div className="px-4 pb-4">
+                      <div className="px-5 pb-5">
                         {scenario.failedStep && (
-                          <div className="mb-2 text-xs font-medium text-red-700">
+                          <div className="mb-3 text-base font-medium text-red-700">
                             Failed at: {scenario.failedStep}
                           </div>
                         )}
-                        <div className="p-3 bg-red-100 rounded border border-red-200">
+                        <div className="p-4 bg-red-100 rounded border-2 border-red-200">
                           <pre className="text-xs text-red-800 whitespace-pre-wrap font-mono">
                             {scenario.error}
                           </pre>
                         </div>
+                        <Button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            createFixScenarioSession(
+                              selectedFeature.featureFile,
+                              scenario.title,
+                              scenario.error!,
+                              scenario.failedStep,
+                              scenario.steps
+                            );
+                          }}
+                          className="mt-4"
+                          variant="accent"
+                          size="sm"
+                        >
+                          Fix with Claude
+                        </Button>
                       </div>
                     )}
                   </div>
@@ -682,11 +705,11 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
             <div className="flex flex-col items-center justify-center h-full text-center px-6">
               {allFeatures.length === 0 ? (
                 <>
-                  <span className="text-zinc-400 text-sm">No test features available</span>
-                  <span className="text-zinc-300 text-xs mt-1">Create BDD feature files in the features/ directory to see test results here.</span>
+                  <span className="text-zinc-400 text-base">No test features available</span>
+                  <span className="text-zinc-300 text-base mt-1">Create BDD feature files in the features/ directory to see test results here.</span>
                 </>
               ) : (
-                <span className="text-zinc-400 text-sm">Select a feature from the sidebar to view its scenarios</span>
+                <span className="text-zinc-400 text-base">Select a feature from the sidebar to view its scenarios</span>
               )}
             </div>
           )}

package/apps/dashboard/components/ReviewFooter.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+
+interface ReviewFooterProps {
+  workItemId: string;
+  onAccepted: () => void;
+  onRejected: (reason: string) => void;
+}
+
+export function ReviewFooter({ workItemId, onAccepted, onRejected }: ReviewFooterProps) {
+  const [showRejectInput, setShowRejectInput] = useState(false);
+  const [rejectReason, setRejectReason] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const handleAccept = async () => {
+    setErrorMessage(null);
+    setIsSubmitting(true);
+    try {
+      const res = await fetch(`/api/work/${workItemId}/status`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status: 'done' }),
+      });
+      if (!res.ok) throw new Error('Failed to update status');
+      onAccepted();
+    } catch {
+      setErrorMessage('Failed to accept. Please try again.');
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleRejectClick = () => {
+    setShowRejectInput(true);
+  };
+
+  const handleRejectConfirm = async () => {
+    if (!rejectReason.trim()) return;
+    setErrorMessage(null);
+    setIsSubmitting(true);
+    try {
+      const res = await fetch(`/api/work/${workItemId}/status`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status: 'in_progress', rejectionReason: rejectReason.trim() }),
+      });
+      if (!res.ok) throw new Error('Failed to update status');
+      const reason = rejectReason.trim();
+      setIsSubmitting(false);
+      setShowRejectInput(false);
+      setRejectReason('');
+      onRejected(reason);
+    } catch {
+      setErrorMessage('Failed to reject. Please try again.');
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleRejectCancel = () => {
+    setShowRejectInput(false);
+    setRejectReason('');
+  };
+
+  return (
+    <div className="border-t border-zinc-200 px-5 py-5 flex-shrink-0" data-testid="review-footer">
+      <p className="text-base font-semibold text-zinc-900 mb-1.5">
+        This work is done. How does it look?
+      </p>
+      <p className="text-base text-zinc-500 mb-4">
+        Just a heads up. This chat will close after acceptance.
+      </p>
+
+      {errorMessage && (
+        <p className="text-sm text-red-600 mb-3" data-testid="review-error-message">{errorMessage}</p>
+      )}
+
+      {!showRejectInput ? (
+        <div className="flex items-center gap-2" data-testid="review-actions">
+          <Button
+            onClick={handleAccept}
+            loading={isSubmitting}
+            data-testid="review-accept-button"
+          >
+            Accept
+          </Button>
+          <Button
+            onClick={handleRejectClick}
+            variant="secondary"
+            data-testid="review-reject-button"
+          >
+            Reject
+          </Button>
+        </div>
+      ) : (
+        <div data-testid="review-reject-input-area">
+          <Input
+            type="text"
+            value={rejectReason}
+            onChange={(e) => setRejectReason(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && rejectReason.trim()) {
+                handleRejectConfirm();
+              }
+              if (e.key === 'Escape') {
+                handleRejectCancel();
+              }
+            }}
+            placeholder="Rejection reason..."
+            size="sm"
+            error
+            autoFocus
+            data-testid="review-reject-reason-input"
+          />
+          <div className="flex items-center gap-1.5 mt-2">
+            <Button
+              onClick={handleRejectConfirm}
+              disabled={!rejectReason.trim()}
+              loading={isSubmitting}
+              variant="destructive"
+              size="sm"
+              data-testid="review-reject-confirm"
+            >
+              Reject
+            </Button>
+            <Button
+              onClick={handleRejectCancel}
+              variant="ghost"
+              size="sm"
+              data-testid="review-reject-cancel"
+            >
+              Cancel
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/apps/dashboard/components/SessionList.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { motion } from 'framer-motion';
+import { m } from 'framer-motion';
+import { Button } from '@/components/ui/Button';
 
 export interface SessionItem {
   id: string;
@@ -26,23 +27,23 @@ export function SessionList({
   return (
     <div className="flex-1 flex flex-col" data-testid="session-list">
       {/* Header */}
-      <div className="px-4 py-3 border-b border-zinc-800">
+      <div className="px-5 py-4 border-b border-zinc-800">
         <div className="flex items-center justify-between">
-          <h2 className="text-sm font-semibold text-white">Sessions</h2>
-          <button
+          <h2 className="text-base font-semibold text-white">Sessions</h2>
+          <Button
             onClick={onNewSession}
-            className="px-3 py-1.5 text-xs font-medium bg-blue-600 hover:bg-blue-500 text-white rounded transition-colors"
+            size="sm"
             data-testid="new-session-button"
           >
             New Session
-          </button>
+          </Button>
         </div>
       </div>
 
       {/* Session List */}
       <div className="flex-1 overflow-y-auto">
         {sessions.length === 0 ? (
-          <div className="p-4 text-center text-zinc-500 text-sm" data-testid="empty-session-state">
+          <div className="p-6 text-center text-zinc-500 text-base" data-testid="empty-session-state">
             No sessions yet. Click New Session to start.
           </div>
         ) : (
@@ -50,39 +51,39 @@ export function SessionList({
             {sessions.map((session) => (
               <div
                 key={session.id}
-                className="flex items-center hover:bg-zinc-800/50 transition-colors"
+                className="flex items-center hover:bg-zinc-800/50 transition-colors duration-200 ease-out"
                 data-testid={`session-item-${session.id}`}
               >
-                <motion.button
+                <m.button
                   onClick={() => onSelectSession(session.id)}
-                  className="flex-1 px-4 py-3 text-left"
+                  className="flex-1 px-5 py-4 text-left"
                   whileHover={{ x: 4 }}
                 >
-                  <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-3">
                     <SessionIcon hasFeature={!!session.featureId} />
                     <div className="flex-1 min-w-0">
-                      <p className="text-sm font-medium text-white truncate">
+                      <p className="text-base font-medium text-white truncate">
                         {session.featureId ? session.featureTitle : session.title}
                       </p>
                       {session.featureId && (
-                        <span className="inline-flex items-center px-1.5 py-0.5 mt-1 text-xs font-medium bg-blue-900/50 text-blue-300 rounded">
+                        <span className="inline-flex items-center px-2 py-1 mt-1.5 text-xs font-medium bg-[#819D9F]/20 text-[#a3bfc0] rounded">
                           #{session.featureId}
                         </span>
                       )}
                       {!session.featureId && (
-                        <p className="text-xs text-zinc-500 mt-0.5">Unlinked session</p>
+                        <p className="text-base text-zinc-500 mt-1">Unlinked session</p>
                       )}
                     </div>
                     <ChevronIcon />
                   </div>
-                </motion.button>
+                </m.button>
                 {onCloseSession && (
                   <button
                     onClick={(e) => {
                       e.stopPropagation();
                       onCloseSession(session.id);
                     }}
-                    className="p-2 mr-2 rounded hover:bg-zinc-700 text-zinc-500 hover:text-zinc-300 transition-colors"
+                    className="p-2.5 mr-3 rounded hover:bg-zinc-700 text-zinc-500 hover:text-zinc-300 transition-colors duration-200 ease-out"
                     aria-label="Close session"
                     data-testid={`close-session-${session.id}`}
                   >
@@ -101,10 +102,10 @@ export function SessionList({
 function SessionIcon({ hasFeature }: { hasFeature: boolean }) {
   return (
     <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
-      hasFeature ? 'bg-blue-900/50' : 'bg-zinc-800'
+      hasFeature ? 'bg-[#819D9F]/20' : 'bg-zinc-800'
     }`}>
       <svg
-        className={`w-4 h-4 ${hasFeature ? 'text-blue-400' : 'text-zinc-400'}`}
+        className={`w-4 h-4 ${hasFeature ? 'text-[#819D9F]' : 'text-zinc-400'}`}
         fill="none"
         stroke="currentColor"
         viewBox="0 0 24 24"