sync: update from private repo (dfadcd5f)

ui/src/components/detail/DetailHeader.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { DetailTabId } from '../../lib/urlState';
 import { shareTask, unshareTask } from '../../api';
+import { tabAppearClass } from './detailTabs';
 
 interface Tab { id: DetailTabId; labelKey: string; }
 
@@ -31,7 +32,7 @@ interface DetailHeaderProps {
   onContinue?: () => void;
 }
 
-function ShareButton({ taskId, shareToken, onShareChange }: { taskId: number; shareToken: string | null; onShareChange?: () => void }) {
+export function ShareButton({ taskId, shareToken, onShareChange, testid }: { taskId: number; shareToken: string | null; onShareChange?: () => void; testid?: string }) {
   const { t } = useTranslation('detail');
   const [copied, setCopied] = useState(false);
   const qc = useQueryClient();
@@ -70,6 +71,7 @@ function ShareButton({ taskId, shareToken, onShareChange }: { taskId: number; sh
       <button
         onClick={() => shareMutation.mutate()}
         disabled={shareMutation.isPending}
+        data-testid={testid}
         title={shareMutation.isPending ? t('share.sharing') : t('share.publish')}
         aria-label={t('share.publish')}
         className={`${iconBtnBase} border-hairline bg-canvas text-slate-600 hover:text-slate-900 hover:bg-surface`}
@@ -99,7 +101,7 @@ function ShareButton({ taskId, shareToken, onShareChange }: { taskId: number; sh
   };
 
   return (
-    <div className="flex items-center gap-1">
+    <div className="flex items-center gap-1" data-testid={testid}>
       <button
         onClick={handleCopy}
         title={copied ? t('share.copied') : t('share.copy')}
@@ -139,7 +141,7 @@ function ShareButton({ taskId, shareToken, onShareChange }: { taskId: number; sh
   );
 }
 
-function ContinueButton({ latestJobStatus, onClick }: { latestJobStatus: string | null; onClick: () => void }) {
+export function ContinueButton({ latestJobStatus, onClick, testid }: { latestJobStatus: string | null; onClick: () => void; testid?: string }) {
   const { t } = useTranslation('detail');
   // Mirror the spec/backend TERMINAL list (worker maps abort outcomes to
   // 'failed', so 'aborted' is intentionally absent).
@@ -151,6 +153,7 @@ function ContinueButton({ latestJobStatus, onClick }: { latestJobStatus: string
     <button
       onClick={onClick}
       disabled={!enabled}
+      data-testid={testid}
       title={enabled ? t('continue.label') : t('continue.disabled')}
       aria-label={t('continue.label')}
       className={`${iconBtnBase} border-hairline bg-canvas text-slate-600 hover:text-slate-900 hover:bg-surface`}
@@ -218,6 +221,7 @@ export function DetailHeader({ title, subtitle, tabs, activeTab, tabTransitionPe
           )}
           <button
             onClick={onClose}
+            data-testid="detail-panel-close"
             aria-label={t('panel.close')}
             className="hidden sm:inline-flex items-center justify-center w-7 h-7 rounded-md text-slate-400 hover:text-slate-700 hover:bg-surface-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
           >
@@ -239,9 +243,10 @@ export function DetailHeader({ title, subtitle, tabs, activeTab, tabTransitionPe
             <button
               key={tab.id}
               role="tab"
+              data-testid={`detail-tab-${tab.id}`}
               aria-selected={active}
               onClick={() => onTabChange(tab.id)}
-              className={`whitespace-nowrap pb-2.5 text-xs border-b-2 active:scale-[0.97] transition-[transform,color,border-color] duration-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring inline-flex items-center gap-1.5 ${
+              className={`whitespace-nowrap pb-2.5 text-xs border-b-2 active:scale-[0.97] transition-[transform,color,border-color] duration-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring inline-flex items-center gap-1.5 ${tabAppearClass(tab.id)} ${
                 active
                   ? 'border-accent text-slate-900 font-semibold'
                   : 'border-transparent text-slate-500 font-medium hover:text-slate-800'