@promptbook/cli 0.113.0-8 → 0.113.0-9

package/apps/agents-server/src/app/admin/task-manager/TaskManagerTaskRow.tsx

@@ -1,6 +1,12 @@
+'use client';
+
+import { useState } from 'react';
+import { SquareTerminal } from 'lucide-react';
 import type { AdminChatTaskRecord } from '@/src/utils/chatTasksAdmin';
 import type { ServerLanguageCode } from '@/src/languages/ServerLanguageRegistry';
 import { formatServerLanguageHumanReadableDate } from '@/src/utils/localization/formatServerLanguageHumanReadableDate';
+import { TaskManagerTaskLogActions } from './TaskManagerTaskLogActions';
+import { TaskManagerTaskTerminalDialog } from './TaskManagerTaskTerminalDialog';
 import type { useTaskManagerState } from './useTaskManagerState';
 
 /**
@@ -11,6 +17,7 @@ import type { useTaskManagerState } from './useTaskManagerState';
 type TaskManagerTaskRowProps = {
     busyAction: ReturnType<typeof useTaskManagerState>['busyAction'];
     busyTaskId: ReturnType<typeof useTaskManagerState>['busyTaskId'];
+    isSuperAdmin: boolean;
     language: ServerLanguageCode;
     onRunTaskAction: ReturnType<typeof useTaskManagerState>['runTaskAction'];
     stuckThresholdMinutes: ReturnType<typeof useTaskManagerState>['stuckThresholdMinutes'];
@@ -54,6 +61,8 @@ type TaskInfoBlockProps = {
  */
 type TaskManagerTaskActionsProps = Pick<TaskManagerTaskRowProps, 'busyAction' | 'onRunTaskAction' | 'task'> & {
     isBusy: boolean;
+    isSuperAdmin: boolean;
+    onOpenTerminal: () => void;
 };
 
 /**
@@ -267,13 +276,32 @@ function resolveTaskRowClassName(task: AdminChatTaskRecord, isStuck: boolean): s
  *
  * @private function of TaskManagerTaskRow
  */
-function TaskManagerTaskActions({ busyAction, isBusy, onRunTaskAction, task }: TaskManagerTaskActionsProps) {
+function TaskManagerTaskActions({
+    busyAction,
+    isBusy,
+    isSuperAdmin,
+    onOpenTerminal,
+    onRunTaskAction,
+    task,
+}: TaskManagerTaskActionsProps) {
     const isDurableChatTask = task.kind === 'CHAT_COMPLETION' || task.kind === 'CHAT_TIMEOUT';
     const isCancelable = isDurableChatTask && (task.status === 'QUEUED' || task.status === 'RUNNING');
     const isRetryable = isDurableChatTask && task.status === 'FAILED';
 
     return (
-        <div className="flex justify-end gap-2">
+        <div className="flex flex-wrap justify-end gap-2">
+            {isSuperAdmin ? (
+                <button
+                    type="button"
+                    onClick={onOpenTerminal}
+                    className="inline-flex items-center gap-1 rounded-md border border-slate-300 bg-slate-900 px-3 py-1.5 font-semibold text-white hover:bg-slate-800"
+                    title="Open the read-only live CLI terminal of this task"
+                >
+                    <SquareTerminal className="h-3.5 w-3.5" />
+                    Terminal
+                </button>
+            ) : null}
+
             {isCancelable ? (
                 <button
                     type="button"
@@ -296,7 +324,7 @@ function TaskManagerTaskActions({ busyAction, isBusy, onRunTaskAction, task }: T
                 </button>
             ) : null}
 
-            {!isCancelable && !isRetryable ? (
+            {!isCancelable && !isRetryable && !isSuperAdmin ? (
                 <span className="rounded-md border border-gray-200 bg-gray-50 px-3 py-1.5 font-medium text-gray-500">
                     -
                 </span>
@@ -313,11 +341,13 @@ function TaskManagerTaskActions({ busyAction, isBusy, onRunTaskAction, task }: T
 export function TaskManagerTaskRow({
     busyAction,
     busyTaskId,
+    isSuperAdmin,
     language,
     onRunTaskAction,
     stuckThresholdMinutes,
     task,
 }: TaskManagerTaskRowProps) {
+    const [isTerminalDialogOpen, setIsTerminalDialogOpen] = useState(false);
     const isStuck = isTaskStuck(task, stuckThresholdMinutes);
     const isBusy = busyTaskId === task.id;
 
@@ -406,21 +436,26 @@ export function TaskManagerTaskRow({
             </td>
 
             <td className="max-w-xs px-4 py-3 align-top text-[11px] leading-relaxed text-gray-600">
-                {task.lastErrorSummary || task.lastErrorDetails ? (
-                    <div className="space-y-2">
-                        {task.lastErrorSummary ? <div>{truncateText(task.lastErrorSummary, 220)}</div> : null}
-                        {task.lastErrorDetails ? (
-                            <details className="rounded-md border border-gray-200 bg-gray-50 p-2">
-                                <summary className="cursor-pointer font-medium text-gray-700">Show details</summary>
-                                <pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-words text-[10px] leading-relaxed text-gray-600">
-                                    {task.lastErrorDetails}
-                                </pre>
-                            </details>
-                        ) : null}
-                    </div>
-                ) : (
-                    '-'
-                )}
+                <div className="space-y-2">
+                    {task.lastErrorSummary || task.lastErrorDetails ? (
+                        <>
+                            {task.lastErrorSummary ? <div>{truncateText(task.lastErrorSummary, 220)}</div> : null}
+                            {task.lastErrorDetails ? (
+                                <details className="rounded-md border border-gray-200 bg-gray-50 p-2">
+                                    <summary className="cursor-pointer font-medium text-gray-700">
+                                        Show details
+                                    </summary>
+                                    <pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-words text-[10px] leading-relaxed text-gray-600">
+                                        {task.lastErrorDetails}
+                                    </pre>
+                                </details>
+                            ) : null}
+                        </>
+                    ) : (
+                        '-'
+                    )}
+                    <TaskManagerTaskLogActions task={task} />
+                </div>
             </td>
 
             <td className="px-4 py-3 align-top">
@@ -428,8 +463,13 @@ export function TaskManagerTaskRow({
                     task={task}
                     busyAction={busyAction}
                     isBusy={isBusy}
+                    isSuperAdmin={isSuperAdmin}
+                    onOpenTerminal={() => setIsTerminalDialogOpen(true)}
                     onRunTaskAction={onRunTaskAction}
                 />
+                {isTerminalDialogOpen ? (
+                    <TaskManagerTaskTerminalDialog task={task} onClose={() => setIsTerminalDialogOpen(false)} />
+                ) : null}
             </td>
         </tr>
     );

package/apps/agents-server/src/app/admin/task-manager/TaskManagerTaskTerminalDialog.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import { Loader2, X } from 'lucide-react';
+import { AdminXtermTerminal } from '@/src/components/AdminTerminal/AdminXtermTerminal';
+import {
+    useAdminTerminalSession,
+    type AdminTerminalSession,
+} from '@/src/components/AdminTerminal/useAdminTerminalSession';
+import { Dialog } from '@/src/components/Portal/Dialog';
+import type { AdminChatTaskRecord } from '@/src/utils/chatTasksAdmin';
+
+/**
+ * Props for the read-only live terminal dialog of one background task.
+ *
+ * @private function of TaskManagerTaskRow
+ */
+type TaskManagerTaskTerminalDialogProps = {
+    task: AdminChatTaskRecord;
+    onClose: () => void;
+};
+
+/**
+ * Resolves the compact status label shown next to the terminal.
+ *
+ * @private function of TaskManagerTaskTerminalDialog
+ */
+function resolveTerminalStatusLabel(session: AdminTerminalSession | null, isLoading: boolean): string {
+    if (isLoading && !session) {
+        return 'Connecting…';
+    }
+
+    if (!session) {
+        return 'Terminal unavailable';
+    }
+
+    if (session.isRunning) {
+        return 'Live';
+    }
+
+    if (session.exitCode === 0) {
+        return 'Finished successfully';
+    }
+
+    if (session.exitCode !== null) {
+        return 'Finished with an error or cancelled';
+    }
+
+    return 'Not running';
+}
+
+/**
+ * Super-admin dialog streaming the read-only CLI terminal of one background task in real time.
+ *
+ * @private function of TaskManagerTaskRow
+ */
+export function TaskManagerTaskTerminalDialog({ task, onClose }: TaskManagerTaskTerminalDialogProps) {
+    const terminal = useAdminTerminalSession({
+        basePath: `/api/admin/chat-tasks/${encodeURIComponent(task.id)}/terminal`,
+        loadErrorMessage: 'Failed to load the task terminal.',
+        startErrorMessage: 'Failed to open the task terminal.',
+        sendErrorMessage: 'The task terminal is read-only.',
+        stopErrorMessage: 'The task terminal cannot be stopped from here.',
+        startSuccessMessage: 'Task terminal opened.',
+        finishSuccessMessage: 'The task finished successfully.',
+        finishErrorMessage: 'The task finished with an error or was cancelled.',
+    });
+
+    return (
+        <Dialog onClose={onClose} className="w-[min(70rem,95vw)] p-6" ariaLabel={`Task terminal ${task.id}`}>
+            <div className="space-y-4">
+                <div className="flex items-start justify-between gap-4">
+                    <div className="min-w-0">
+                        <h2 className="text-lg font-semibold text-slate-900">Task terminal</h2>
+                        <p className="mt-1 break-all font-mono text-xs text-slate-500">{task.id}</p>
+                        <p className="mt-1 text-sm text-slate-600">
+                            Read-only live view of everything this task prints while it runs — the output of the
+                            whole Agents Server is not shown here, only this task&apos;s own terminal.
+                        </p>
+                    </div>
+                    <button
+                        type="button"
+                        onClick={onClose}
+                        className="shrink-0 rounded-md border border-slate-200 bg-white p-2 text-slate-500 hover:bg-slate-50"
+                        aria-label="Close task terminal"
+                    >
+                        <X className="h-4 w-4" />
+                    </button>
+                </div>
+
+                {terminal.errorMessage ? (
+                    <div className="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
+                        {terminal.errorMessage}
+                    </div>
+                ) : null}
+
+                <div className="flex flex-wrap items-center justify-between gap-3">
+                    <h3 className="text-sm font-semibold text-slate-700">Terminal output</h3>
+                    <span className="inline-flex items-center gap-2 text-xs text-slate-500">
+                        {terminal.isLoadingSession ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : null}
+                        {resolveTerminalStatusLabel(terminal.session, terminal.isLoadingSession)}
+                    </span>
+                </div>
+
+                <AdminXtermTerminal
+                    terminalId={terminal.session?.id || task.id}
+                    output={terminal.session?.output || ''}
+                    emptyState={
+                        terminal.isLoadingSession
+                            ? 'Connecting to the task terminal…'
+                            : 'No terminal output has been captured for this task on this server instance yet.'
+                    }
+                    isRunning={Boolean(terminal.session?.isRunning)}
+                    isReadOnly
+                    isPlainTextOutput
+                    ariaLabel={`Read-only terminal of task ${task.id}`}
+                />
+
+                <p className="text-xs text-slate-500">
+                    The terminal shows output captured while the task is processed by this server instance; output
+                    produced before the last server restart is not available.
+                </p>
+            </div>
+        </Dialog>
+    );
+}

package/apps/agents-server/src/app/admin/task-manager/TaskManagerTasksCard.tsx

@@ -9,6 +9,7 @@ import { TaskManagerTaskRow } from './TaskManagerTaskRow';
  * @private function of TaskManagerClient
  */
 type TaskManagerTasksCardProps = {
+    isSuperAdmin: boolean;
     language: ServerLanguageCode;
     state: ReturnType<typeof useTaskManagerState>;
 };
@@ -43,7 +44,7 @@ function resolveEmptyStateMessage(view: ReturnType<typeof useTaskManagerState>['
  *
  * @private function of TaskManagerClient
  */
-export function TaskManagerTasksCard({ language, state }: TaskManagerTasksCardProps) {
+export function TaskManagerTasksCard({ isSuperAdmin, language, state }: TaskManagerTasksCardProps) {
     const firstVisibleTaskIndex = Math.min((state.page - 1) * state.pageSize + 1, state.total);
     const lastVisibleTaskIndex = Math.min(state.page * state.pageSize, state.total);
 
@@ -87,6 +88,7 @@ export function TaskManagerTasksCard({ language, state }: TaskManagerTasksCardPr
                                     language={language}
                                     busyAction={state.busyAction}
                                     busyTaskId={state.busyTaskId}
+                                    isSuperAdmin={isSuperAdmin}
                                     onRunTaskAction={state.runTaskAction}
                                     stuckThresholdMinutes={state.stuckThresholdMinutes}
                                 />

package/apps/agents-server/src/app/admin/task-manager/page.tsx

@@ -1,16 +1,17 @@
 import { ForbiddenPage } from '../../../components/ForbiddenPage/ForbiddenPage';
 import { isUserAdmin } from '../../../utils/isUserAdmin';
+import { isUserGlobalAdmin } from '../../../utils/isUserGlobalAdmin';
 import { TaskManagerClient } from './TaskManagerClient';
 
 /**
  * Admin task-manager page showing durable background chat work across the server.
  */
 export default async function AdminTaskManagerPage() {
-    const isAdmin = await isUserAdmin();
+    const [isAdmin, isSuperAdmin] = await Promise.all([isUserAdmin(), isUserGlobalAdmin()]);
 
     if (!isAdmin) {
         return <ForbiddenPage />;
     }
 
-    return <TaskManagerClient />;
+    return <TaskManagerClient isSuperAdmin={isSuperAdmin} />;
 }

package/apps/agents-server/src/app/admin/update/AdvancedOriginRepositoryPanel.tsx

@@ -31,20 +31,24 @@ export function AdvancedOriginRepositoryPanel({
     isDisabled,
 }: AdvancedOriginRepositoryPanelProps) {
     return (
-        <div className="rounded-xl border border-slate-200 bg-white">
+        <div className="min-w-0 rounded-xl border border-slate-200 bg-white">
             <button
                 type="button"
                 onClick={onToggleExpanded}
                 className="flex w-full items-center justify-between gap-3 px-4 py-3 text-sm font-semibold text-slate-700"
             >
-                <span className="inline-flex items-center gap-2">
-                    <Settings2 className="h-4 w-4" />
+                <span className="inline-flex min-w-0 items-center gap-2">
+                    <Settings2 className="h-4 w-4 shrink-0" />
                     Advanced
                 </span>
-                {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+                {isExpanded ? (
+                    <ChevronUp className="h-4 w-4 shrink-0" />
+                ) : (
+                    <ChevronDown className="h-4 w-4 shrink-0" />
+                )}
             </button>
             {isExpanded && (
-                <div className="space-y-3 border-t border-slate-100 px-4 py-3 text-sm text-slate-600">
+                <div className="min-w-0 space-y-3 border-t border-slate-100 px-4 py-3 text-sm text-slate-600">
                     <label className="block">
                         <span className="text-xs font-semibold uppercase tracking-wide text-slate-500">
                             Upstream repository URL
@@ -58,15 +62,16 @@ export function AdvancedOriginRepositoryPanel({
                             className="mt-1 w-full rounded-md border border-slate-300 bg-white px-3 py-2 font-mono text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-60"
                         />
                     </label>
-                    <p className="text-xs text-slate-500">
-                        Defaults to <span className="font-mono">{overview?.defaultOriginRepositoryUrl}</span>. Only
+                    <p className="break-words text-xs text-slate-500">
+                        Defaults to{' '}
+                        <span className="break-all font-mono">{overview?.defaultOriginRepositoryUrl}</span>. Only
                         change this if you self-host a fork of the original Promptbook repository — the new value is
                         persisted in the standalone VPS <code>.env</code>.
                     </p>
                     {overview && !overview.isOriginRepositoryDefault && (
-                        <div className="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800">
+                        <div className="break-words rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800">
                             <strong>Custom origin active:</strong> updates currently pull from{' '}
-                            <span className="font-mono">{overview.originRepositoryUrl}</span>.
+                            <span className="break-all font-mono">{overview.originRepositoryUrl}</span>.
                         </div>
                     )}
                 </div>

package/apps/agents-server/src/app/admin/update/AutomaticSelfUpdateConfigurationCard.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { CalendarClock, Loader2, Save } from 'lucide-react';
+import type { UpdateClientState } from './useUpdateClientState';
+
+/**
+ * Props for the automatic self-update configuration card.
+ *
+ * @private type of `<AutomaticSelfUpdateConfigurationCard/>`
+ */
+type AutomaticSelfUpdateConfigurationCardProps = {
+    readonly state: UpdateClientState;
+};
+
+/**
+ * Branch-aware automatic self-update configuration persisted into the VPS `.env` file.
+ *
+ * @private internal component of `<UpdateClient/>`
+ */
+export function AutomaticSelfUpdateConfigurationCard({ state }: AutomaticSelfUpdateConfigurationCardProps) {
+    const isDisabled = state.isLoading || state.isSavingAutomaticConfiguration || state.isUpdateRunning;
+    const environments = (state.overview?.environments ?? []).filter((environment) => !environment.isCustom);
+
+    return (
+        <div className="min-w-0 space-y-4">
+            <div className="flex min-w-0 items-start justify-between gap-3">
+                <div className="min-w-0">
+                    <h2 className="text-lg font-semibold text-slate-900">Automatic self-update</h2>
+                    <p className="mt-1 text-sm text-slate-500">
+                        Scheduled checks use the selected branch and the cron interval stored in the VPS{' '}
+                        <code>.env</code>.
+                    </p>
+                </div>
+                <CalendarClock className="mt-1 h-5 w-5 shrink-0 text-slate-400" />
+            </div>
+
+            <label className="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-medium text-slate-800">
+                <input
+                    type="checkbox"
+                    checked={state.automaticConfigurationDraft.isEnabled}
+                    onChange={(event) => state.changeAutomaticUpdateEnabled(event.target.checked)}
+                    disabled={isDisabled}
+                    className="h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-60"
+                />
+                Enable automatic updates
+            </label>
+
+            <div className="grid min-w-0 gap-3 sm:grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)]">
+                <label className="block min-w-0 text-sm font-medium text-slate-700">
+                    Branch
+                    <select
+                        value={state.automaticConfigurationDraft.environmentId}
+                        onChange={(event) => state.selectAutomaticUpdateEnvironment(event.target.value)}
+                        disabled={isDisabled}
+                        className="mt-1 w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-500"
+                    >
+                        {environments.map((environment) => (
+                            <option key={environment.id} value={environment.id}>
+                                {environment.label} ({environment.branch})
+                            </option>
+                        ))}
+                    </select>
+                </label>
+
+                <label className="block min-w-0 text-sm font-medium text-slate-700">
+                    Cron interval
+                    <input
+                        type="text"
+                        value={state.automaticConfigurationDraft.cronExpression}
+                        onChange={(event) => state.changeAutomaticUpdateCronExpression(event.target.value)}
+                        disabled={isDisabled}
+                        placeholder="0 0 * * *"
+                        className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 font-mono text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-500"
+                    />
+                </label>
+            </div>
+
+            <button
+                type="button"
+                onClick={() => void state.saveAutomaticConfiguration()}
+                disabled={isDisabled || !state.isAutomaticConfigurationChanged}
+                className="inline-flex w-full items-center justify-center gap-2 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-60"
+            >
+                {state.isSavingAutomaticConfiguration ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                    <Save className="h-4 w-4" />
+                )}
+                Save automatic configuration
+            </button>
+        </div>
+    );
+}

package/apps/agents-server/src/app/admin/update/CurrentDeploymentCard.tsx

@@ -42,22 +42,24 @@ export function CurrentDeploymentCard({ overview, language }: CurrentDeploymentC
     return (
         <div className="space-y-4">
             <div className="flex items-start gap-3">
-                <Server className="mt-0.5 h-5 w-5 text-blue-600" />
-                <div>
+                <Server className="mt-0.5 h-5 w-5 shrink-0 text-blue-600" />
+                <div className="min-w-0">
                     <h2 className="text-lg font-semibold text-slate-900">Current deployment</h2>
                     <p className="mt-1 text-sm text-slate-500">
                         The server currently tracks the{' '}
                         <span className="font-medium">{overview?.currentEnvironment.label || 'Production'}</span>{' '}
                         environment on branch{' '}
-                        <span className="font-mono">{overview?.currentEnvironment.branch || 'production'}</span>.
+                        <span className="break-all font-mono">
+                            {overview?.currentEnvironment.branch || 'production'}.
+                        </span>
                     </p>
                 </div>
             </div>
 
-            <dl className="grid gap-4 text-sm text-slate-600 sm:grid-cols-2">
-                <div className="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3">
+            <dl className="grid min-w-0 gap-4 text-sm text-slate-600 sm:grid-cols-2">
+                <div className="min-w-0 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3">
                     <dt className="text-xs font-semibold uppercase tracking-wide text-slate-500">Branch</dt>
-                    <dd className="mt-1 font-mono text-slate-900">
+                    <dd className="mt-1 break-all font-mono text-slate-900">
                         {overview?.currentEnvironment.branch || 'production'}
                     </dd>
                 </div>
@@ -77,19 +79,19 @@ export function CurrentDeploymentCard({ overview, language }: CurrentDeploymentC
                     authoredAt={overview?.latestRemoteCommitDate ?? null}
                     language={language}
                 />
-                <div className="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3">
+                <div className="min-w-0 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3">
                     <dt className="text-xs font-semibold uppercase tracking-wide text-slate-500">
                         Update availability
                     </dt>
-                    <dd className="mt-1 flex items-center gap-2 text-slate-900">
+                    <dd className="mt-1 flex min-w-0 items-center gap-2 break-words text-slate-900">
                         {overview?.isUpdateAvailable ? (
                             <>
-                                <TriangleAlert className="h-4 w-4 text-amber-500" />
+                                <TriangleAlert className="h-4 w-4 shrink-0 text-amber-500" />
                                 {driftLabel}
                             </>
                         ) : (
                             <>
-                                <CheckCircle2 className="h-4 w-4 text-emerald-600" />
+                                <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-600" />
                                 Up to date
                             </>
                         )}
@@ -100,7 +102,7 @@ export function CurrentDeploymentCard({ overview, language }: CurrentDeploymentC
             {overview?.repositoryDirectory && (
                 <div className="text-xs text-slate-500">
                     Managed repository:
-                    <span className="ml-2 font-mono text-slate-700">{overview.repositoryDirectory}</span>
+                    <span className="ml-2 break-all font-mono text-slate-700">{overview.repositoryDirectory}</span>
                 </div>
             )}
         </div>
@@ -123,9 +125,9 @@ function CommitSummaryCard({
     const commitHashLabel = commitSha || shortCommitSha || 'Unknown hash';
 
     return (
-        <div className="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3">
+        <div className="min-w-0 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3">
             <dt className="text-xs font-semibold uppercase tracking-wide text-slate-500">{label}</dt>
-            <dd className="mt-1 text-slate-900">{subject || 'Unknown commit subject'}</dd>
+            <dd className="mt-1 break-words text-slate-900">{subject || 'Unknown commit subject'}</dd>
             <div className="mt-2 break-all font-mono text-xs text-slate-600">{commitHashLabel}</div>
             <div className="mt-1 text-xs text-slate-500">{formatHumanReadableTimestamp(authoredAt, language)}</div>
         </div>

package/apps/agents-server/src/app/admin/update/CustomCommitPicker.tsx

@@ -121,9 +121,9 @@ export function CustomCommitPicker({ language, selectedRef, onSelectRef, isDisab
     );
 
     return (
-        <div className="space-y-3">
-            <div className="grid gap-3 sm:grid-cols-[1fr_auto_auto]">
-                <label className="relative block">
+        <div className="min-w-0 space-y-3">
+            <div className="grid min-w-0 gap-3 sm:grid-cols-[minmax(0,1fr)_auto_auto]">
+                <label className="relative block min-w-0">
                     <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                     <input
                         type="search"
@@ -152,8 +152,8 @@ export function CustomCommitPicker({ language, selectedRef, onSelectRef, isDisab
                 />
             </div>
 
-            <div className="flex items-center justify-between gap-3">
-                <label className="flex-1 text-xs text-slate-500">
+            <div className="flex min-w-0 items-center justify-between gap-3">
+                <label className="min-w-0 flex-1 text-xs text-slate-500">
                     <span className="block font-semibold uppercase tracking-wide">Or paste a ref directly</span>
                     <input
                         type="text"
@@ -168,7 +168,7 @@ export function CustomCommitPicker({ language, selectedRef, onSelectRef, isDisab
                     type="button"
                     onClick={() => void loadCandidates()}
                     disabled={isDisabled || isLoading}
-                    className="self-end inline-flex items-center gap-2 rounded-md border border-slate-300 bg-white px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-60"
+                    className="inline-flex shrink-0 items-center gap-2 self-end rounded-md border border-slate-300 bg-white px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-60"
                 >
                     <RefreshCcw className={`h-3.5 w-3.5 ${isLoading ? 'animate-spin' : ''}`} />
                     Refresh
@@ -181,7 +181,7 @@ export function CustomCommitPicker({ language, selectedRef, onSelectRef, isDisab
                 </div>
             )}
 
-            <div className="max-h-96 overflow-y-auto rounded-xl border border-slate-200 bg-white">
+            <div className="max-h-96 min-w-0 overflow-y-auto rounded-xl border border-slate-200 bg-white">
                 {isLoading && candidates.length === 0 ? (
                     <div className="flex items-center justify-center gap-2 px-4 py-6 text-sm text-slate-500">
                         <Loader2 className="h-4 w-4 animate-spin" />
@@ -215,7 +215,7 @@ export function CustomCommitPicker({ language, selectedRef, onSelectRef, isDisab
                                                 : 'hover:bg-slate-50'
                                         } disabled:cursor-not-allowed disabled:opacity-60`}
                                     >
-                                        <div className="flex items-center gap-2">
+                                        <div className="flex min-w-0 flex-wrap items-center gap-2">
                                             <span className="font-mono text-xs text-slate-500">
                                                 {candidate.shortCommitSha}
                                             </span>
@@ -228,7 +228,7 @@ export function CustomCommitPicker({ language, selectedRef, onSelectRef, isDisab
                                             {candidate.tags.map((tag) => (
                                                 <span
                                                     key={`tag-${tag}`}
-                                                    className="inline-flex rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-[10px] font-mono text-amber-800"
+                                                    className="inline-flex min-w-0 break-all rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-[10px] font-mono text-amber-800"
                                                 >
                                                     {tag}
                                                 </span>
@@ -236,7 +236,7 @@ export function CustomCommitPicker({ language, selectedRef, onSelectRef, isDisab
                                             {candidate.branches.map((branch) => (
                                                 <span
                                                     key={`branch-${branch}`}
-                                                    className="inline-flex rounded-full border border-sky-200 bg-sky-50 px-2 py-0.5 text-[10px] font-mono text-sky-800"
+                                                    className="inline-flex min-w-0 break-all rounded-full border border-sky-200 bg-sky-50 px-2 py-0.5 text-[10px] font-mono text-sky-800"
                                                 >
                                                     {branch}
                                                 </span>