taskchef 7.23.4 → 7.24.0

package/src/dashboard/react/App.tsx

@@ -0,0 +1,432 @@
+import {
+  Alert,
+  ActionIcon,
+  AppShell,
+  Box,
+  CloseButton,
+  Container,
+  Group,
+  MantineProvider,
+  Paper,
+  SegmentedControl,
+  Select,
+  Stack,
+  Text,
+  Title,
+  Tooltip,
+  createTheme,
+  useComputedColorScheme,
+  useMantineColorScheme,
+} from "@mantine/core";
+import { IconAlertTriangle, IconCircleFilled, IconMoon, IconSun } from "@tabler/icons-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  dismissNotification,
+  filterTasks,
+  manualTransitionExpectedState,
+  reconcileManualTransitionResponse,
+  reconcileNotifications,
+  statusFilterCounts,
+  STATUS_FILTERS,
+} from "../state.js";
+import { connectDashboard, dashboardVersion, manualTransition, openInCodex, taskDetail } from "./api";
+import { clearNotificationHistory, notificationClicked } from "./overlay-state";
+import { usageStillCalculating } from "./presentation";
+import type { DashboardSnapshot, NotificationSnapshot, Task } from "./types";
+import { NotificationCenter } from "./components/NotificationCenter";
+import { TaskCard } from "./components/TaskCard";
+import { TaskDetail } from "./components/TaskDetail";
+import { RelativeTimeProvider } from "./components/RelativeTime";
+
+const theme = createTheme({
+  primaryColor: "teal",
+  colors: {
+    teal: [
+      "#e6fcf5",
+      "#c3fae8",
+      "#96f2d7",
+      "#63e6be",
+      "#38d9a9",
+      "#20c997",
+      "#087f5b",
+      "#067052",
+      "#055e46",
+      "#044d39",
+    ],
+  },
+  defaultRadius: "md",
+  fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif",
+  headings: { fontFamily: "inherit", fontWeight: "680" },
+  components: {
+    Button: { defaultProps: { radius: "md" } },
+    Paper: { defaultProps: { radius: "md" } },
+  },
+});
+const styleNonce = document.querySelector<HTMLMetaElement>('meta[name="taskchef-style-nonce"]')?.content;
+
+interface NotificationState {
+  initialized: boolean;
+  announcements: NotificationSnapshot[];
+  notifications: NotificationSnapshot[];
+  seenIds: Set<string>;
+  signatures: Map<string, string>;
+}
+
+export function DashboardApp({
+  connect = true,
+  initialTasks = [],
+}: {
+  connect?: boolean;
+  initialTasks?: Task[];
+}) {
+  const [tasks, setTasks] = useState<Task[]>(initialTasks);
+  const [connected, setConnected] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+  const [version, setVersion] = useState<string | null>(null);
+  const [project, setProject] = useState("");
+  const [status, setStatus] = useState("");
+  const [date, setDate] = useState("all");
+  const [now, setNow] = useState(() => Date.now());
+  const [selectedTask, setSelectedTask] = useState<Task | null>(null);
+  const [detailOpened, setDetailOpened] = useState(false);
+  const [detailBusy, setDetailBusy] = useState(false);
+  const [detailError, setDetailError] = useState<string | null>(null);
+  const [detailNotice, setDetailNotice] = useState<string | null>(null);
+  const [highlightTurnRef, setHighlightTurnRef] = useState<string | null>(null);
+  const [notificationState, setNotificationState] = useState<NotificationState>({
+    initialized: initialTasks.length > 0,
+    announcements: [],
+    notifications: [],
+    seenIds: new Set(),
+    signatures: new Map(),
+  });
+  const selectedId = selectedTask?.id ?? null;
+  const selectedIdRef = useRef<string | null>(selectedId);
+  selectedIdRef.current = selectedId;
+  const detailGeneration = useRef(0);
+  const detailListUpdatedAt = useRef<string | null>(null);
+
+  const applySnapshot = useCallback((snapshot: DashboardSnapshot) => {
+    setTasks(snapshot.tasks);
+    setNotificationState((current) => {
+      const reconciled = reconcileNotifications(current, snapshot.tasks);
+      return {
+        initialized: true,
+        announcements: reconciled.additions,
+        notifications: reconciled.notifications,
+        seenIds: reconciled.seenIds,
+        signatures: reconciled.signatures,
+      };
+    });
+    setMessage(snapshot.healthy === false
+      ? "The task log is temporarily unavailable. Showing the last valid snapshot."
+      : null);
+    const currentSelectedId = selectedIdRef.current;
+    if (currentSelectedId) {
+      const updated = snapshot.tasks.find((task) => task.id === currentSelectedId);
+      if (updated) setSelectedTask((current) => current ? { ...current, ...updated } : updated);
+    }
+  }, []);
+
+  useEffect(() => {
+    const timer = window.setInterval(() => setNow(Date.now()), 30_000);
+    return () => window.clearInterval(timer);
+  }, []);
+
+  useEffect(() => {
+    if (!connect) return;
+    void dashboardVersion().then(setVersion).catch(() => setVersion(null));
+    const stream = connectDashboard({
+      onConnection: setConnected,
+      onError: setMessage,
+      onSnapshot: applySnapshot,
+    });
+    return () => stream.close();
+  }, [applySnapshot, connect]);
+
+  const loadDetail = useCallback(async (task: Task, focusTurnRef: string | null = null) => {
+    const generation = ++detailGeneration.current;
+    detailListUpdatedAt.current = task.updatedAt;
+    setSelectedTask((current) => current?.id === task.id ? { ...current, ...task } : task);
+    setDetailOpened(true);
+    setHighlightTurnRef(focusTurnRef);
+    setDetailError(null);
+    setDetailNotice(null);
+    try {
+      for (let attempt = 0; attempt <= 40; attempt += 1) {
+        if (generation !== detailGeneration.current) return;
+        const detail = await taskDetail(task.id);
+        if (generation !== detailGeneration.current) return;
+        setSelectedTask(detail);
+        if (!usageStillCalculating(detail) || attempt === 40) return;
+        await new Promise((resolve) => window.setTimeout(resolve, 1_500));
+      }
+    } catch {
+      if (generation === detailGeneration.current) {
+        setDetailError("Task activity is temporarily unavailable. Showing the latest list snapshot.");
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!detailOpened || !selectedId || !connect) return;
+    const listTask = tasks.find((task) => task.id === selectedId);
+    if (!listTask || listTask.updatedAt === detailListUpdatedAt.current) return;
+    void loadDetail(listTask, highlightTurnRef);
+    // A task signature update while detail is open refreshes the full projection.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tasks.find((task) => task.id === selectedId)?.updatedAt]);
+
+  const projects = useMemo(() => [
+    { label: "All projects", value: "" },
+    ...[...new Set(tasks.map((task) => task.project.name))].sort().map((value) => ({ label: value, value })),
+  ], [tasks]);
+  const visible = useMemo(() => filterTasks(tasks, { project, status, date, now }), [tasks, project, status, date, now]);
+  const counts = useMemo(() => statusFilterCounts(tasks, { project, date, now }), [tasks, project, date, now]);
+  const statusData = STATUS_FILTERS.map(({ label, value }: { label: string; value: string }) => ({
+    label: counts[value] > 0 ? `${label} ${counts[value]}` : label,
+    value,
+  }));
+
+  async function handleOpenCodex(task: Task) {
+    setDetailBusy(true);
+    try {
+      const result = await openInCodex(task.id);
+      if (result) setMessage(result);
+    } catch {
+      setMessage("Codex could not be opened. Open the project and select the recorded task instead.");
+    } finally {
+      setDetailBusy(false);
+    }
+  }
+
+  async function handleTransition(targetStatus: "completed" | "failed", actionId: string) {
+    if (!selectedTask) return { ok: false };
+    const requestTask = selectedTask;
+    const expected = manualTransitionExpectedState(requestTask);
+    setDetailBusy(true);
+    setDetailError(null);
+    const result = await manualTransition(requestTask, targetStatus, actionId);
+    setDetailBusy(false);
+    if (result.task) {
+      setSelectedTask((current) => reconcileManualTransitionResponse({
+        requestTask,
+        expected,
+        responseTask: result.task,
+        selectedTask: current,
+      }));
+      setTasks((current) => current.map((candidate) => candidate.id === requestTask.id
+        ? reconcileManualTransitionResponse({
+          requestTask,
+          expected,
+          responseTask: result.task,
+          selectedTask: candidate,
+        })
+        : candidate));
+    }
+    if (result.ok && result.task) {
+      setHighlightTurnRef(result.task.turnRef ?? result.task.turnId);
+      return { ok: true };
+    } else {
+      setDetailError(result.message ?? "Task state could not be changed.");
+      return { ok: false, rotateActionId: result.code === "stale_task" };
+    }
+  }
+
+  function handleNotificationOpen(notification: NotificationSnapshot) {
+    const currentTask = tasks.find((task) => task.id === notification.taskId);
+    const overlay = notificationClicked({
+      detailTaskId: selectedId,
+      detailOpened,
+      highlightTurnRef,
+      notifications: notificationState.notifications,
+      refreshGeneration: detailGeneration.current,
+    }, notification, Boolean(currentTask));
+    setNotificationState((current) => ({ ...current, notifications: overlay.notifications }));
+    if (!currentTask) {
+      setMessage("This task is no longer present in the current snapshot.");
+      return;
+    }
+    void loadDetail(currentTask, overlay.highlightTurnRef);
+  }
+
+  return (
+    <MantineProvider
+      defaultColorScheme="auto"
+      getStyleNonce={styleNonce ? () => styleNonce : undefined}
+      theme={theme}
+    >
+      <RelativeTimeProvider now={now}>
+      <AppShell className="taskchef-shell" padding={0}>
+        <Container className="taskchef-header" component="header" size={1080}>
+          <Group className="taskchef-header-layout" align="stretch" justify="space-between" wrap="nowrap">
+            <Box className="taskchef-header-copy">
+              <Text c="var(--taskchef-accent)" fw={750} size="xs" tt="uppercase">TaskChef {version && <span className="taskchef-version">v{version}</span>}</Text>
+              <Group gap="sm" mt={5} wrap="nowrap">
+                <BrandIcon />
+                <Title order={1} size="h2">Dashboard</Title>
+              </Group>
+            </Box>
+            <Stack align="flex-end" className="taskchef-header-actions" gap={0} justify="space-between">
+              <Group aria-live="polite" className="taskchef-connection" gap={7} role="status" wrap="nowrap">
+                <IconCircleFilled aria-hidden color={connected ? "var(--mantine-color-teal-6)" : "var(--mantine-color-yellow-6)"} size={9} />
+                <Text c="dimmed" size="xs">{connected ? "Live" : connect ? "Connecting…" : "Fixture preview"}</Text>
+              </Group>
+              <ThemeToggle />
+            </Stack>
+          </Group>
+        </Container>
+
+        <AppShell.Main>
+          <Container className="taskchef-main" pb={80} size={1080}>
+            <Paper className="taskchef-toolbar" p="sm" radius="md" withBorder>
+              <Stack gap="sm">
+                <Group align="end" gap="sm">
+                  <Select aria-label="Project" data={projects} label="Project" onChange={(value) => setProject(value ?? "")} size="sm" value={project} />
+                  <Select
+                    aria-label="Updated"
+                    data={[{ label: "Latest 24 hours", value: "24h" }, { label: "Latest 7 days", value: "7d" }, { label: "All time", value: "all" }]}
+                    label="Updated"
+                    onChange={(value) => setDate(value ?? "all")}
+                    size="sm"
+                    value={date}
+                  />
+                  <Box className="taskchef-task-count-field">
+                    <Text className="taskchef-filter-label" mb={3}>Tasks</Text>
+                    <Text className="taskchef-count-value" size="sm">{visible.length} of {tasks.length}</Text>
+                  </Box>
+                </Group>
+                <Box>
+                  <Text className="taskchef-filter-label" mb={5}>Status</Text>
+                  <SegmentedControl aria-label="Status" data={statusData} fullWidth onChange={setStatus} size="xs" value={status} />
+                </Box>
+              </Stack>
+            </Paper>
+
+            {message && (
+              <Alert color="yellow" icon={<IconAlertTriangle aria-hidden size={17} />} mt="md" role="status">
+                <Group gap="sm" justify="space-between" wrap="nowrap">
+                  <Text size="sm">{message}</Text>
+                  <CloseButton aria-label="Dismiss dashboard message" onClick={() => setMessage(null)} size="sm" />
+                </Group>
+              </Alert>
+            )}
+
+            <Stack aria-label="Tasks" component="section" gap="sm" mt="md">
+              {visible.map((task: Task) => (
+                <TaskCard key={task.id} onOpenCodex={handleOpenCodex} onOpenDetail={(value) => void loadDetail(value)} task={task} />
+              ))}
+              {visible.length === 0 && (
+                <Paper className="taskchef-empty" p={48} ta="center" withBorder>
+                  <Title order={2} size="h4">No tasks match these filters</Title>
+                  <Text c="dimmed" mt={4} size="sm">Choose a different project, date, or status.</Text>
+                </Paper>
+              )}
+            </Stack>
+          </Container>
+        </AppShell.Main>
+      </AppShell>
+
+      <TaskDetail
+        busy={detailBusy}
+        error={detailError}
+        highlightTurnRef={highlightTurnRef}
+        onClose={() => {
+          if (!detailBusy) {
+            detailGeneration.current += 1;
+            setDetailOpened(false);
+            setHighlightTurnRef(null);
+          }
+        }}
+        onCopy={() => {
+          if (!selectedTask) return;
+          setDetailNotice(null);
+          void navigator.clipboard.writeText(selectedTask.id).then(
+            () => setDetailNotice("Task ID copied."),
+            () => setDetailNotice("Clipboard access is unavailable. Copy the Task ID from metadata."),
+          );
+        }}
+        onOpenCodex={() => selectedTask && void handleOpenCodex(selectedTask)}
+        onTransition={handleTransition}
+        opened={detailOpened}
+        task={selectedTask}
+        notice={detailNotice}
+        notifications={detailOpened ? (
+          <NotificationCenter
+            announcements={notificationState.announcements}
+            notifications={notificationState.notifications}
+            onClear={() => setNotificationState((current) => ({
+              ...current,
+              notifications: clearNotificationHistory({
+                detailTaskId: selectedId,
+                detailOpened,
+                highlightTurnRef,
+                notifications: current.notifications,
+                refreshGeneration: detailGeneration.current,
+              }).notifications,
+            }))}
+            onDismiss={(notification) => setNotificationState((current) => ({ ...current, notifications: dismissNotification(current.notifications, notification.id) }))}
+            onOpen={handleNotificationOpen}
+            tasks={tasks}
+            withinPortal={false}
+          />
+        ) : null}
+      />
+      {!detailOpened && (
+        <NotificationCenter
+          announcements={notificationState.announcements}
+          notifications={notificationState.notifications}
+          onClear={() => setNotificationState((current) => ({
+            ...current,
+            notifications: clearNotificationHistory({
+              detailTaskId: selectedId,
+              detailOpened,
+              highlightTurnRef,
+              notifications: current.notifications,
+              refreshGeneration: detailGeneration.current,
+            }).notifications,
+          }))}
+          onDismiss={(notification) => setNotificationState((current) => ({ ...current, notifications: dismissNotification(current.notifications, notification.id) }))}
+          onOpen={handleNotificationOpen}
+          tasks={tasks}
+        />
+      )}
+      </RelativeTimeProvider>
+    </MantineProvider>
+  );
+}
+
+function ThemeToggle() {
+  const { setColorScheme } = useMantineColorScheme();
+  const colorScheme = useComputedColorScheme("light");
+  const next = colorScheme === "dark" ? "light" : "dark";
+  return (
+    <Tooltip label={`Use ${next} theme`}>
+      <ActionIcon
+        aria-label={`Use ${next} theme`}
+        color="gray"
+        onClick={() => setColorScheme(next)}
+        size="lg"
+        variant="subtle"
+      >
+        {colorScheme === "dark" ? <IconSun aria-hidden size={18} /> : <IconMoon aria-hidden size={18} />}
+      </ActionIcon>
+    </Tooltip>
+  );
+}
+
+function BrandIcon() {
+  const colorScheme = useComputedColorScheme("light");
+  return (
+    <img
+      alt=""
+      aria-hidden
+      className="taskchef-brand-icon"
+      height="42"
+      src={colorScheme === "dark" ? "/assets/taskchef-dark.svg" : "/assets/taskchef.svg"}
+      width="42"
+    />
+  );
+}
+
+export default DashboardApp;

package/src/dashboard/react/api.test.ts

@@ -0,0 +1,24 @@
+import { afterEach, expect, test, vi } from "vitest";
+import { fixtureTask } from "./fixtures";
+import { manualTransition } from "./api";
+
+afterEach(() => {
+  vi.useRealTimers();
+  vi.unstubAllGlobals();
+});
+
+test("times out a stalled manual transition and returns a retryable error", async () => {
+  vi.useFakeTimers();
+  vi.stubGlobal("fetch", vi.fn((_url: string, init?: RequestInit) => new Promise((_resolve, reject) => {
+    init?.signal?.addEventListener("abort", () => reject(new DOMException("Aborted", "AbortError")));
+  })));
+
+  const request = manualTransition(fixtureTask(), "completed", crypto.randomUUID());
+  await vi.advanceTimersByTimeAsync(10_000);
+
+  await expect(request).resolves.toMatchObject({
+    ok: false,
+    code: "request_timeout",
+    message: "Task state change timed out. Try again.",
+  });
+});

package/src/dashboard/react/api.ts

@@ -0,0 +1,95 @@
+import type { DashboardSnapshot, ManualTransitionResponse, Task, TaskStatus } from "./types";
+
+export interface DashboardStream {
+  close(): void;
+}
+
+export function connectDashboard({
+  onConnection,
+  onError,
+  onSnapshot,
+}: {
+  onConnection: (connected: boolean) => void;
+  onError: (message: string) => void;
+  onSnapshot: (snapshot: DashboardSnapshot) => void;
+}): DashboardStream {
+  const events = new EventSource("/api/events");
+  events.addEventListener("open", () => onConnection(true));
+  events.addEventListener("error", () => onConnection(false));
+  events.addEventListener("snapshot", (event) => {
+    onConnection(true);
+    onSnapshot(JSON.parse((event as MessageEvent).data) as DashboardSnapshot);
+  });
+  events.addEventListener("dashboard-error", (event) => {
+    const payload = JSON.parse((event as MessageEvent).data) as { message?: string };
+    onError(payload.message ?? "The task log is temporarily unavailable.");
+  });
+  return events;
+}
+
+async function jsonRequest<T>(url: string, init?: RequestInit): Promise<T> {
+  const response = await fetch(url, init);
+  const payload = await response.json().catch(() => ({}));
+  if (!response.ok) throw Object.assign(new Error(payload.message ?? "Request failed."), { payload });
+  return payload as T;
+}
+
+export async function dashboardVersion(): Promise<string> {
+  const health = await jsonRequest<{ taskchefVersion: string }>("/api/health");
+  return health.taskchefVersion;
+}
+
+export async function taskDetail(taskId: string): Promise<Task> {
+  return (await jsonRequest<{ task: Task }>(`/api/tasks/${encodeURIComponent(taskId)}`)).task;
+}
+
+export async function openInCodex(taskId: string): Promise<string | null> {
+  const result = await jsonRequest<{ message?: string }>(
+    `/api/tasks/${encodeURIComponent(taskId)}/open-codex`,
+    { method: "POST" },
+  );
+  return result.message ?? null;
+}
+
+export async function manualTransition(
+  task: Task,
+  targetStatus: Exclude<TaskStatus, "working" | "needs_input" | null>,
+  actionId: string,
+): Promise<ManualTransitionResponse> {
+  const controller = new AbortController();
+  const timeout = window.setTimeout(() => controller.abort(), 10_000);
+  try {
+    const result = await jsonRequest<{ task: Task }>(
+      `/api/tasks/${encodeURIComponent(task.id)}/manual-transition`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          schemaVersion: 1,
+          actionId,
+          expected: {
+            status: task.status,
+            turnRef: task.turnRef,
+            threadId: task.threadId,
+            updatedAt: task.updatedAt,
+          },
+          targetStatus,
+        }),
+        signal: controller.signal,
+      },
+    );
+    return { ok: true, task: result.task };
+  } catch (error) {
+    const payload = (error as { payload?: { code?: string; message?: string; task?: Task } }).payload;
+    return {
+      ok: false,
+      code: payload?.code ?? (controller.signal.aborted ? "request_timeout" : "network_error"),
+      message: payload?.message ?? (controller.signal.aborted
+        ? "Task state change timed out. Try again."
+        : "Task state changes are temporarily unavailable. Try again."),
+      task: payload?.task ?? null,
+    };
+  } finally {
+    window.clearTimeout(timeout);
+  }
+}

package/src/dashboard/react/components/ActivityTimeline.tsx

@@ -0,0 +1,63 @@
+import { Box, Paper, Stack, Text } from "@mantine/core";
+import { mergeProjectedTurns, turnPresentation } from "../../state.js";
+import { turnUsageView } from "../presentation";
+import type { Task } from "../types";
+import { RelativeTime } from "./RelativeTime";
+import { ShimmerText } from "./ShimmerText";
+import { StatusBadge } from "./StatusBadge";
+
+export function ActivityTimeline({ highlightTurnRef, task }: { highlightTurnRef: string | null; task: Task }) {
+  const turns = mergeProjectedTurns(task, []) as Task["turns"];
+  if (!turns?.length) return <Text c="dimmed" size="sm">No turn history has been recorded.</Text>;
+  return (
+    <Stack gap="sm">
+      {[...turns].reverse().map((turn, index) => {
+        const presentation = turnPresentation(turn);
+        const identity = turn.turnRef ?? turn.turnId ?? `turn-${index}`;
+        const highlighted = identity === highlightTurnRef;
+        const usage = turnUsageView(task, turn);
+        return (
+          <Paper
+            className={`taskchef-turn${highlighted ? " taskchef-turn-highlighted" : ""}`}
+            data-turn-ref={identity}
+            key={identity}
+            p="sm"
+            radius="md"
+            tabIndex={highlighted ? -1 : undefined}
+            withBorder
+          >
+            <Stack gap={7}>
+              <Box className="taskchef-turn-heading">
+                <StatusBadge status={presentation.status} />
+                <RelativeTime label="Turn update time" value={presentation.updatedAt} />
+              </Box>
+              {presentation.sourceLabel && <Text c="dimmed" size="xs">{presentation.sourceLabel}</Text>}
+              <Box>
+                <Text c="dimmed" className="taskchef-field-label" size="xs">Request</Text>
+                <Text className="taskchef-preserve-lines" size="sm">{turn.requestSummary ?? "Request not recorded."}</Text>
+              </Box>
+              <Box>
+                <Text c="dimmed" className="taskchef-field-label" size="xs">Result</Text>
+                <Text className="taskchef-preserve-lines" size="sm">
+                  {presentation.status === "working"
+                    ? <ShimmerText>{presentation.summary}</ShimmerText>
+                    : presentation.summary}
+                </Text>
+              </Box>
+              <Text
+                c="dimmed"
+                className={usage.kind === "calculating" || usage.kind === "pending" ? "taskchef-turn-usage" : undefined}
+                size="xs"
+              >
+                {usage.kind === "calculating" || usage.kind === "pending"
+                  ? <ShimmerText>{usage.label}</ShimmerText>
+                  : usage.label}
+              </Text>
+              <Text c="dimmed" className="taskchef-mono" size="xs">Turn ref: {identity ?? "—"}</Text>
+            </Stack>
+          </Paper>
+        );
+      })}
+    </Stack>
+  );
+}

package/src/dashboard/react/components/GitHubLinks.tsx

@@ -0,0 +1,25 @@
+import { Anchor, Group, Text } from "@mantine/core";
+import type { Task } from "../types";
+
+export function GitHubLinks({ task }: { task: Task }) {
+  const links = task.relatedGitHubLinks ?? [];
+  if (links.length === 0 && !task.relatedGitHubLinksTruncated) return null;
+  return (
+    <Group aria-label={`Related GitHub links for ${task.title}`} component="nav" gap={5} wrap="wrap">
+      {links.map((link) => (
+        <Anchor
+          aria-label={`${link.label}, GitHub ${link.type === "pull" ? "pull request" : link.type ?? "link"} (opens in a new tab)`}
+          className="taskchef-github-link"
+          href={link.url}
+          key={link.url}
+          rel="noopener noreferrer"
+          size="xs"
+          target="_blank"
+        >
+          {link.label}
+        </Anchor>
+      ))}
+      {task.relatedGitHubLinksTruncated && <Text c="dimmed" size="xs">More links in task history</Text>}
+    </Group>
+  );
+}