@promptbook/cli 0.113.0-9 → 0.114.0-0

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

@@ -1,12 +1,27 @@
 'use client';
 
 import { useState } from 'react';
+import Link from 'next/link';
 import { SquareTerminal } from 'lucide-react';
+import { buildAdminChatTaskDetailHref } from '@/src/utils/adminChatTaskLinks';
 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 { TaskManagerTaskTargetLink } from './TaskManagerTaskTargetLink';
 import { TaskManagerTaskTerminalDialog } from './TaskManagerTaskTerminalDialog';
+import {
+    buildTaskRunReportRows,
+    formatTaskDateTime,
+    formatTaskDuration,
+    formatTaskKind,
+    getTaskQueueAgeMs,
+    getTaskRuntimeDurationMs,
+    getTaskTotalDurationMs,
+    isTaskStuck,
+    TaskInfoBlock,
+    TaskStatusBadge,
+    truncateTaskText,
+} from './taskManagerTaskPresentation';
 import type { useTaskManagerState } from './useTaskManagerState';
 
 /**
@@ -22,36 +37,10 @@ type TaskManagerTaskRowProps = {
     onRunTaskAction: ReturnType<typeof useTaskManagerState>['runTaskAction'];
     stuckThresholdMinutes: ReturnType<typeof useTaskManagerState>['stuckThresholdMinutes'];
     task: AdminChatTaskRecord;
-};
-
-/**
- * Props for the compact status badge.
- *
- * @private function of TaskManagerTaskRow
- */
-type TaskStatusBadgeProps = {
-    isStuck: boolean;
-    task: AdminChatTaskRecord;
-};
-
-/**
- * One labeled info row shown in a task detail block.
- *
- * @private function of TaskManagerTaskRow
- */
-type TaskInfoRow = {
-    label: string;
-    secondary?: string | null;
-    value: string;
-};
-
-/**
- * Props for the compact task info block.
- *
- * @private function of TaskManagerTaskRow
- */
-type TaskInfoBlockProps = {
-    rows: ReadonlyArray<TaskInfoRow>;
+    /**
+     * Whether to render the originating-server cell (VPS-wide view only).
+     */
+    showServerColumn?: boolean;
 };
 
 /**
@@ -65,195 +54,6 @@ type TaskManagerTaskActionsProps = Pick<TaskManagerTaskRowProps, 'busyAction' |
     onOpenTerminal: () => void;
 };
 
-/**
- * Badge color classes keyed by display status.
- *
- * @private function of TaskManagerTaskRow
- */
-const TASK_STATUS_CLASS_MAP: Record<string, string> = {
-    RUNNING: 'border-blue-200 bg-blue-50 text-blue-700',
-    QUEUED: 'border-slate-200 bg-slate-50 text-slate-700',
-    PAUSED: 'border-orange-200 bg-orange-50 text-orange-700',
-    RETRYING: 'border-amber-200 bg-amber-50 text-amber-700',
-    FAILED: 'border-rose-200 bg-rose-50 text-rose-700',
-    COMPLETED: 'border-emerald-200 bg-emerald-50 text-emerald-700',
-    CANCELLED: 'border-gray-200 bg-gray-100 text-gray-700',
-    STUCK: 'border-orange-300 bg-orange-50 text-orange-800',
-};
-
-/**
- * Renders a compact vertical info block inside the table.
- *
- * @private function of TaskManagerTaskRow
- */
-function TaskInfoBlock({ rows }: TaskInfoBlockProps) {
-    return rows.map((row) => (
-        <div key={`${row.label}-${row.value}`} className="mb-2 last:mb-0">
-            <div className="text-[10px] font-semibold uppercase tracking-wide text-gray-400">{row.label}</div>
-            <div className="break-all text-[11px] text-gray-800">{row.value}</div>
-            {row.secondary ? <div className="break-all text-[11px] text-gray-500">{row.secondary}</div> : null}
-        </div>
-    ));
-}
-
-/**
- * Resolves the effective badge label for a task.
- *
- * @private function of TaskManagerTaskRow
- */
-function resolveTaskStatusLabel(task: AdminChatTaskRecord): string {
-    if (task.status === 'QUEUED' && task.pausedAt) {
-        return 'PAUSED';
-    }
-
-    if (task.status === 'QUEUED' && task.retryCount > 0) {
-        return 'RETRYING';
-    }
-
-    return task.status;
-}
-
-/**
- * Compact badge rendering the effective task status.
- *
- * @private function of TaskManagerTaskRow
- */
-function TaskStatusBadge({ isStuck, task }: TaskStatusBadgeProps) {
-    const label = resolveTaskStatusLabel(task);
-    const tone = isStuck ? TASK_STATUS_CLASS_MAP.STUCK : TASK_STATUS_CLASS_MAP[label] || TASK_STATUS_CLASS_MAP.QUEUED;
-
-    return <span className={`rounded-full border px-2 py-0.5 text-[11px] font-semibold ${tone}`}>{label}</span>;
-}
-
-/**
- * Formats a durable task kind for display.
- *
- * @private function of TaskManagerTaskRow
- */
-function formatTaskKind(kind: AdminChatTaskRecord['kind']): string {
-    if (kind === 'CHAT_COMPLETION') {
-        return 'Chat completion';
-    }
-
-    if (kind === 'CHAT_TIMEOUT') {
-        return 'Chat timeout';
-    }
-
-    if (kind === 'VPS_SELF_UPDATE') {
-        return 'Self-update';
-    }
-
-    if (kind === 'BROWSER_PREVIEW') {
-        return 'Browser preview';
-    }
-
-    return kind;
-}
-
-/**
- * Formats one timestamp for compact table display.
- *
- * @private function of TaskManagerTaskRow
- */
-function formatDateTime(value: string | null, language: ServerLanguageCode): string {
-    return formatServerLanguageHumanReadableDate(value, language, { fallbackLabel: '-' });
-}
-
-/**
- * Formats a duration in milliseconds.
- *
- * @private function of TaskManagerTaskRow
- */
-function formatDuration(durationMs: number | null): string {
-    if (durationMs === null || !Number.isFinite(durationMs) || durationMs < 0) {
-        return '-';
-    }
-
-    const totalSeconds = Math.floor(durationMs / 1000);
-    const days = Math.floor(totalSeconds / 86_400);
-    const hours = Math.floor((totalSeconds % 86_400) / 3_600);
-    const minutes = Math.floor((totalSeconds % 3_600) / 60);
-    const seconds = totalSeconds % 60;
-    const parts: Array<string> = [];
-
-    if (days > 0) {
-        parts.push(`${days}d`);
-    }
-    if (hours > 0) {
-        parts.push(`${hours}h`);
-    }
-    if (minutes > 0) {
-        parts.push(`${minutes}m`);
-    }
-    if (seconds > 0 || parts.length === 0) {
-        parts.push(`${seconds}s`);
-    }
-
-    return parts.slice(0, 2).join(' ');
-}
-
-/**
- * Computes the current queue age for one task.
- *
- * @private function of TaskManagerTaskRow
- */
-function getQueueAgeMs(task: AdminChatTaskRecord): number | null {
-    const queuedAtMs = Date.parse(task.queuedAt);
-    return Number.isNaN(queuedAtMs) ? null : Date.now() - queuedAtMs;
-}
-
-/**
- * Computes runtime duration for running tasks.
- *
- * @private function of TaskManagerTaskRow
- */
-function getRuntimeDurationMs(task: AdminChatTaskRecord): number | null {
-    if (task.status !== 'RUNNING' || !task.startedAt) {
-        return null;
-    }
-
-    const startedAtMs = Date.parse(task.startedAt);
-    return Number.isNaN(startedAtMs) ? null : Date.now() - startedAtMs;
-}
-
-/**
- * Computes total duration for finished tasks.
- *
- * @private function of TaskManagerTaskRow
- */
-function getTotalDurationMs(task: AdminChatTaskRecord): number | null {
-    if (!task.startedAt || !task.finishedAt) {
-        return null;
-    }
-
-    const startedAtMs = Date.parse(task.startedAt);
-    const finishedAtMs = Date.parse(task.finishedAt);
-    if (Number.isNaN(startedAtMs) || Number.isNaN(finishedAtMs)) {
-        return null;
-    }
-
-    return Math.max(0, finishedAtMs - startedAtMs);
-}
-
-/**
- * Detects tasks running longer than the selected threshold.
- *
- * @private function of TaskManagerTaskRow
- */
-function isTaskStuck(task: AdminChatTaskRecord, thresholdMinutes: number): boolean {
-    const runtimeMs = getRuntimeDurationMs(task);
-    return runtimeMs !== null && runtimeMs >= thresholdMinutes * 60_000;
-}
-
-/**
- * Truncates long error text for compact table rendering.
- *
- * @private function of TaskManagerTaskRow
- */
-function truncateText(value: string, limit: number): string {
-    return value.length > limit ? `${value.slice(0, limit - 1)}…` : value;
-}
-
 /**
  * Resolves the row highlight tone for one task.
  *
@@ -346,6 +146,7 @@ export function TaskManagerTaskRow({
     onRunTaskAction,
     stuckThresholdMinutes,
     task,
+    showServerColumn = false,
 }: TaskManagerTaskRowProps) {
     const [isTerminalDialogOpen, setIsTerminalDialogOpen] = useState(false);
     const isStuck = isTaskStuck(task, stuckThresholdMinutes);
@@ -353,8 +154,22 @@ export function TaskManagerTaskRow({
 
     return (
         <tr className={resolveTaskRowClassName(task, isStuck)}>
+            {showServerColumn ? (
+                <td className="px-4 py-3 align-top">
+                    <div className="font-medium text-gray-800">{task.serverName || 'VPS'}</div>
+                    {task.serverDomain ? (
+                        <div className="mt-1 font-mono text-[10px] text-gray-500">{task.serverDomain}</div>
+                    ) : null}
+                </td>
+            ) : null}
             <td className="px-4 py-3 align-top">
-                <div className="font-mono text-[11px] font-semibold text-gray-900">{task.id}</div>
+                <Link
+                    href={buildAdminChatTaskDetailHref(task.id, task.serverDomain)}
+                    className="font-mono text-[11px] font-semibold text-blue-700 underline-offset-2 hover:underline"
+                    title="Open the task detail page"
+                >
+                    {task.id}
+                </Link>
                 <div className="mt-2 flex flex-wrap gap-2">
                     <TaskStatusBadge task={task} isStuck={isStuck} />
                     <span className="rounded-full border border-gray-200 bg-gray-50 px-2 py-0.5 font-medium text-gray-600">
@@ -372,26 +187,37 @@ export function TaskManagerTaskRow({
                     {task.recurrenceIntervalMs ? (
                         <div>
                             Recurrence:{' '}
-                            <span className="text-gray-700">Every {formatDuration(task.recurrenceIntervalMs)}</span>
+                            <span className="text-gray-700">Every {formatTaskDuration(task.recurrenceIntervalMs)}</span>
                         </div>
                     ) : null}
                     {task.cancelRequestedAt ? (
                         <div className="font-medium text-orange-700">Cancellation requested</div>
                     ) : null}
                     {task.pausedAt ? (
-                        <div className="font-medium text-orange-700">Paused {formatDateTime(task.pausedAt, language)}</div>
+                        <div className="font-medium text-orange-700">
+                            Paused {formatTaskDateTime(task.pausedAt, language)}
+                        </div>
                     ) : null}
                 </div>
             </td>
 
             <td className="px-4 py-3 align-top">
+                <div className="mb-2 last:mb-0">
+                    <div className="text-[10px] font-semibold uppercase tracking-wide text-gray-400">User</div>
+                    {task.userId > 0 ? (
+                        <Link
+                            href={`/admin/users/${encodeURIComponent(task.username || String(task.userId))}`}
+                            className="break-all text-[11px] text-blue-700 hover:underline"
+                        >
+                            #{task.userId}
+                        </Link>
+                    ) : (
+                        <span className="break-all text-[11px] text-gray-800">#{task.userId}</span>
+                    )}
+                    <div className="break-all text-[11px] text-gray-500">{task.username || '-'}</div>
+                </div>
                 <TaskInfoBlock
                     rows={[
-                        {
-                            label: 'User',
-                            value: `#${task.userId}`,
-                            secondary: task.username || '-',
-                        },
                         {
                             label: 'Agent',
                             value: task.agentName || task.agentPermanentId,
@@ -400,15 +226,18 @@ export function TaskManagerTaskRow({
                         { label: 'Chat', value: task.chatId },
                     ]}
                 />
+                <div className="mt-2">
+                    <TaskManagerTaskTargetLink task={task} />
+                </div>
             </td>
 
             <td className="px-4 py-3 align-top">
                 <TaskInfoBlock
                     rows={[
-                        { label: 'Created', value: formatDateTime(task.createdAt, language) },
-                        { label: 'Started', value: formatDateTime(task.startedAt, language) },
-                        { label: 'Updated', value: formatDateTime(task.updatedAt, language) },
-                        { label: 'Finished', value: formatDateTime(task.finishedAt, language) },
+                        { label: 'Created', value: formatTaskDateTime(task.createdAt, language) },
+                        { label: 'Started', value: formatTaskDateTime(task.startedAt, language) },
+                        { label: 'Updated', value: formatTaskDateTime(task.updatedAt, language) },
+                        { label: 'Finished', value: formatTaskDateTime(task.finishedAt, language) },
                     ]}
                 />
             </td>
@@ -416,10 +245,10 @@ export function TaskManagerTaskRow({
             <td className="px-4 py-3 align-top">
                 <TaskInfoBlock
                     rows={[
-                        { label: 'Queue age', value: formatDuration(getQueueAgeMs(task)) },
-                        { label: 'Runtime', value: formatDuration(getRuntimeDurationMs(task)) },
-                        { label: 'Total', value: formatDuration(getTotalDurationMs(task)) },
-                        { label: 'Heartbeat', value: formatDateTime(task.lastHeartbeatAt, language) },
+                        { label: 'Queue age', value: formatTaskDuration(getTaskQueueAgeMs(task)) },
+                        { label: 'Runtime', value: formatTaskDuration(getTaskRuntimeDurationMs(task)) },
+                        { label: 'Total', value: formatTaskDuration(getTaskTotalDurationMs(task)) },
+                        { label: 'Heartbeat', value: formatTaskDateTime(task.lastHeartbeatAt, language) },
                     ]}
                 />
             </td>
@@ -429,8 +258,9 @@ export function TaskManagerTaskRow({
                     rows={[
                         { label: 'Queue', value: task.queueName || '-' },
                         { label: 'Worker', value: task.workerId || '-' },
-                        { label: 'Lease expires', value: formatDateTime(task.leaseExpiresAt, language) },
-                        { label: 'Paused at', value: formatDateTime(task.pausedAt, language) },
+                        { label: 'Lease expires', value: formatTaskDateTime(task.leaseExpiresAt, language) },
+                        { label: 'Paused at', value: formatTaskDateTime(task.pausedAt, language) },
+                        ...buildTaskRunReportRows(task.runReport),
                     ]}
                 />
             </td>
@@ -439,12 +269,10 @@ export function TaskManagerTaskRow({
                 <div className="space-y-2">
                     {task.lastErrorSummary || task.lastErrorDetails ? (
                         <>
-                            {task.lastErrorSummary ? <div>{truncateText(task.lastErrorSummary, 220)}</div> : null}
+                            {task.lastErrorSummary ? <div>{truncateTaskText(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>
+                                    <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>

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

@@ -0,0 +1,57 @@
+'use client';
+
+import { resolveAdminChatTaskTargetLink } from '@/src/utils/adminChatTaskLinks';
+import type { AdminChatTaskRecord } from '@/src/utils/chatTasksAdmin';
+import { ArrowUpRight, ExternalLink } from 'lucide-react';
+import Link from 'next/link';
+
+/**
+ * Props for the shared task target link.
+ *
+ * @private function of the admin task manager
+ */
+type TaskManagerTaskTargetLinkProps = {
+    task: AdminChatTaskRecord;
+};
+
+/**
+ * Shared button that opens the Agents Server page one task operates on (task → page).
+ *
+ * Renders the "Open chat" / "Open update" / "Open page" button described by
+ * `resolveAdminChatTaskTargetLink`, and renders nothing when the task kind has no linkable
+ * target, so callers can drop it in unconditionally. Reused by the task row and the task
+ * detail page so the forward link stays identical everywhere (DRY).
+ *
+ * @private function of the admin task manager
+ */
+export function TaskManagerTaskTargetLink({ task }: TaskManagerTaskTargetLinkProps) {
+    const targetLink = resolveAdminChatTaskTargetLink(task);
+    if (!targetLink) {
+        return null;
+    }
+
+    const className =
+        'inline-flex items-center gap-1 rounded-md border border-blue-200 bg-blue-50 px-3 py-1.5 font-semibold text-blue-700 hover:bg-blue-100';
+
+    if (targetLink.isExternal) {
+        return (
+            <a
+                href={targetLink.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={className}
+                title={targetLink.title}
+            >
+                <ExternalLink className="h-3.5 w-3.5" />
+                {targetLink.label}
+            </a>
+        );
+    }
+
+    return (
+        <Link href={targetLink.href} className={className} title={targetLink.title}>
+            <ArrowUpRight className="h-3.5 w-3.5" />
+            {targetLink.label}
+        </Link>
+    );
+}

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

@@ -55,7 +55,9 @@ function resolveTerminalStatusLabel(session: AdminTerminalSession | null, isLoad
  */
 export function TaskManagerTaskTerminalDialog({ task, onClose }: TaskManagerTaskTerminalDialogProps) {
     const terminal = useAdminTerminalSession({
-        basePath: `/api/admin/chat-tasks/${encodeURIComponent(task.id)}/terminal`,
+        basePath: `/api/admin/chat-tasks/${encodeURIComponent(task.id)}/terminal${
+            task.serverDomain ? `?serverDomain=${encodeURIComponent(task.serverDomain)}` : ''
+        }`,
         loadErrorMessage: 'Failed to load the task terminal.',
         startErrorMessage: 'Failed to open the task terminal.',
         sendErrorMessage: 'The task terminal is read-only.',

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

@@ -1,5 +1,7 @@
 import type { ServerLanguageCode } from '@/src/languages/ServerLanguageRegistry';
+import type { AdminChatTaskSortField } from '@/src/utils/chatTasksAdmin';
 import type { useTaskManagerState } from './useTaskManagerState';
+import { AdminSortableTableHeaderCell } from '../_components/AdminSortableTableHeaderCell';
 import { Card } from '../../../components/Homepage/Card';
 import { TaskManagerTaskRow } from './TaskManagerTaskRow';
 
@@ -12,6 +14,24 @@ type TaskManagerTasksCardProps = {
     isSuperAdmin: boolean;
     language: ServerLanguageCode;
     state: ReturnType<typeof useTaskManagerState>;
+    /**
+     * Whether to show the originating-server column (VPS-wide view only).
+     */
+    showServerColumn?: boolean;
+};
+
+/**
+ * User-facing labels for sortable task-manager columns.
+ *
+ * @private function of TaskManagerTasksCard
+ */
+const TASK_MANAGER_SORT_LABELS: Record<Exclude<AdminChatTaskSortField, 'default'>, string> = {
+    task: 'task',
+    ownership: 'ownership',
+    timeline: 'timeline',
+    duration: 'duration',
+    queue: 'queue',
+    lastError: 'last error',
 };
 
 /**
@@ -39,12 +59,32 @@ function resolveEmptyStateMessage(view: ReturnType<typeof useTaskManagerState>['
     return 'No active background tasks right now.';
 }
 
+/**
+ * Resolves the table sort status line.
+ *
+ * @private function of TaskManagerTasksCard
+ */
+function resolveTaskManagerSortDescription(state: ReturnType<typeof useTaskManagerState>): string {
+    if (state.sortBy === 'default') {
+        return 'Running work is ordered by start time; queued work by creation time.';
+    }
+
+    return `Sorted by ${TASK_MANAGER_SORT_LABELS[state.sortBy]} ${
+        state.sortOrder === 'asc' ? 'ascending' : 'descending'
+    }.`;
+}
+
 /**
  * Renders the main task table, loading states, and pagination controls.
  *
  * @private function of TaskManagerClient
  */
-export function TaskManagerTasksCard({ isSuperAdmin, language, state }: TaskManagerTasksCardProps) {
+export function TaskManagerTasksCard({
+    isSuperAdmin,
+    language,
+    state,
+    showServerColumn = false,
+}: TaskManagerTasksCardProps) {
     const firstVisibleTaskIndex = Math.min((state.page - 1) * state.pageSize + 1, state.total);
     const lastVisibleTaskIndex = Math.min(state.page * state.pageSize, state.total);
 
@@ -53,11 +93,20 @@ export function TaskManagerTasksCard({ isSuperAdmin, language, state }: TaskMana
             <div className="flex items-center justify-between gap-4">
                 <div>
                     <h2 className="text-lg font-medium text-gray-900">Background tasks ({state.total.toLocaleString()})</h2>
-                    <p className="mt-1 text-sm text-gray-500">
-                        Sorted by started time for running work and creation time for queued work.
-                    </p>
+                    <p className="mt-1 text-sm text-gray-500">{resolveTaskManagerSortDescription(state)}</p>
+                </div>
+                <div className="flex items-center gap-3">
+                    {state.isRefreshing ? <span className="text-xs font-medium text-blue-600">Refreshing…</span> : null}
+                    <button
+                        type="button"
+                        onClick={() => void state.cancelAllActiveTasks()}
+                        disabled={state.isCancellingAllActiveTasks || !state.hasActiveTasks}
+                        className="rounded-md border border-red-200 bg-red-50 px-3 py-1.5 text-xs font-semibold text-red-700 disabled:cursor-not-allowed disabled:opacity-60"
+                        title="Cancel all active (queued + running) background tasks across all users"
+                    >
+                        {state.isCancellingAllActiveTasks ? 'Cancelling all…' : 'Cancel all active tasks'}
+                    </button>
                 </div>
-                {state.isRefreshing ? <span className="text-xs font-medium text-blue-600">Refreshing…</span> : null}
             </div>
 
             {state.isLoading ? (
@@ -71,12 +120,69 @@ export function TaskManagerTasksCard({ isSuperAdmin, language, state }: TaskMana
                     <table className="min-w-full divide-y divide-gray-200 text-xs">
                         <thead className="bg-gray-50 text-gray-500">
                             <tr>
-                                <th className="px-4 py-3 text-left font-semibold">Task</th>
-                                <th className="px-4 py-3 text-left font-semibold">Ownership</th>
-                                <th className="px-4 py-3 text-left font-semibold">Timeline</th>
-                                <th className="px-4 py-3 text-left font-semibold">Duration</th>
-                                <th className="px-4 py-3 text-left font-semibold">Queue</th>
-                                <th className="px-4 py-3 text-left font-semibold">Last error</th>
+                                {showServerColumn ? (
+                                    <th className="px-4 py-3 text-left font-semibold">Server</th>
+                                ) : null}
+                                <AdminSortableTableHeaderCell
+                                    className="px-4 py-3 text-left font-semibold"
+                                    label="task"
+                                    sortBy="task"
+                                    activeSortBy={state.sortBy}
+                                    sortOrder={state.sortOrder}
+                                    onSortChange={state.handleSortChange}
+                                >
+                                    Task
+                                </AdminSortableTableHeaderCell>
+                                <AdminSortableTableHeaderCell
+                                    className="px-4 py-3 text-left font-semibold"
+                                    label="ownership"
+                                    sortBy="ownership"
+                                    activeSortBy={state.sortBy}
+                                    sortOrder={state.sortOrder}
+                                    onSortChange={state.handleSortChange}
+                                >
+                                    Ownership
+                                </AdminSortableTableHeaderCell>
+                                <AdminSortableTableHeaderCell
+                                    className="px-4 py-3 text-left font-semibold"
+                                    label="timeline"
+                                    sortBy="timeline"
+                                    activeSortBy={state.sortBy}
+                                    sortOrder={state.sortOrder}
+                                    onSortChange={state.handleSortChange}
+                                >
+                                    Timeline
+                                </AdminSortableTableHeaderCell>
+                                <AdminSortableTableHeaderCell
+                                    className="px-4 py-3 text-left font-semibold"
+                                    label="duration"
+                                    sortBy="duration"
+                                    activeSortBy={state.sortBy}
+                                    sortOrder={state.sortOrder}
+                                    onSortChange={state.handleSortChange}
+                                >
+                                    Duration
+                                </AdminSortableTableHeaderCell>
+                                <AdminSortableTableHeaderCell
+                                    className="px-4 py-3 text-left font-semibold"
+                                    label="queue"
+                                    sortBy="queue"
+                                    activeSortBy={state.sortBy}
+                                    sortOrder={state.sortOrder}
+                                    onSortChange={state.handleSortChange}
+                                >
+                                    Queue
+                                </AdminSortableTableHeaderCell>
+                                <AdminSortableTableHeaderCell
+                                    className="px-4 py-3 text-left font-semibold"
+                                    label="last error"
+                                    sortBy="lastError"
+                                    activeSortBy={state.sortBy}
+                                    sortOrder={state.sortOrder}
+                                    onSortChange={state.handleSortChange}
+                                >
+                                    Last error
+                                </AdminSortableTableHeaderCell>
                                 <th className="px-4 py-3 text-right font-semibold">Actions</th>
                             </tr>
                         </thead>
@@ -91,6 +197,7 @@ export function TaskManagerTasksCard({ isSuperAdmin, language, state }: TaskMana
                                     isSuperAdmin={isSuperAdmin}
                                     onRunTaskAction={state.runTaskAction}
                                     stuckThresholdMinutes={state.stuckThresholdMinutes}
+                                    showServerColumn={showServerColumn}
                                 />
                             ))}
                         </tbody>