taskchef 8.3.2 → 8.4.0

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

@@ -0,0 +1,147 @@
+import { Box, Button, Paper, Stack, Text, Title } from "@mantine/core";
+import { useRef, type PointerEvent as ReactPointerEvent } from "react";
+import { IconArrowUpRight } from "@tabler/icons-react";
+import { hasLinkedCodexThread, latestTurnPresentation } from "../../state.js";
+import type { Task, TaskStatus } from "../types";
+import { LinkedText } from "./LinkedText";
+import { RelativeTime } from "./RelativeTime";
+
+const lanes: { status: TaskStatus; label: string }[] = [
+  { status: "working", label: "Working" },
+  { status: "needs_input", label: "Needs input" },
+  { status: "completed", label: "Completed" },
+  { status: "failed", label: "Failed" },
+  { status: null, label: "Unresolved" },
+];
+const knownStatuses = new Set<TaskStatus>(["working", "needs_input", "completed", "failed"]);
+
+function laneFor(task: Task): TaskStatus {
+  return knownStatuses.has(task.status) ? task.status : null;
+}
+
+export function TaskBoard({
+  completedLimit,
+  onMoreCompleted,
+  onOpenCodex,
+  onOpenDetail,
+  tasks,
+}: {
+  completedLimit: number;
+  onMoreCompleted: () => void;
+  onOpenCodex: (task: Task) => void;
+  onOpenDetail: (task: Task) => void;
+  tasks: Task[];
+}) {
+  const boardRef = useRef<HTMLDivElement>(null);
+  const dragRef = useRef<{ pointerId: number; startX: number; scrollLeft: number; moved: boolean } | null>(null);
+  const suppressClickRef = useRef(false);
+
+  function onPointerDown(event: ReactPointerEvent<HTMLDivElement>) {
+    if (event.pointerType !== "mouse" || event.button !== 0 || !event.isPrimary) return;
+    const target = event.target as Element;
+    if (target.closest("button, a, input, textarea, select, [contenteditable], .taskchef-board-card, h1, h2, h3, p, span")) return;
+    const board = boardRef.current;
+    if (!board || board.scrollWidth <= board.clientWidth) return;
+    dragRef.current = { pointerId: event.pointerId, startX: event.clientX, scrollLeft: board.scrollLeft, moved: false };
+    board.setPointerCapture(event.pointerId);
+  }
+
+  function onPointerMove(event: ReactPointerEvent<HTMLDivElement>) {
+    const drag = dragRef.current;
+    const board = boardRef.current;
+    if (!drag || !board || drag.pointerId !== event.pointerId) return;
+    const delta = event.clientX - drag.startX;
+    if (!drag.moved && Math.abs(delta) < 6) return;
+    if (!drag.moved) {
+      drag.moved = true;
+      board.classList.add("taskchef-board-dragging");
+    }
+    event.preventDefault();
+    board.scrollLeft = drag.scrollLeft - delta;
+  }
+
+  function endPointer(event: ReactPointerEvent<HTMLDivElement>) {
+    const drag = dragRef.current;
+    const board = boardRef.current;
+    if (!drag || !board || drag.pointerId !== event.pointerId) return;
+    dragRef.current = null;
+    board.classList.remove("taskchef-board-dragging");
+    if (board.hasPointerCapture(event.pointerId)) board.releasePointerCapture(event.pointerId);
+    if (drag.moved) {
+      suppressClickRef.current = true;
+      window.setTimeout(() => { suppressClickRef.current = false; }, 0);
+    }
+  }
+
+  const visibleLanes = lanes.filter((lane) => lane.status !== null || tasks.some((task) => laneFor(task) === null));
+  return (
+    <Box
+      aria-label="Task board"
+      className="taskchef-board"
+      component="section"
+      onClickCapture={(event) => {
+        if (!suppressClickRef.current) return;
+        event.preventDefault();
+        event.stopPropagation();
+        suppressClickRef.current = false;
+      }}
+      onPointerCancel={endPointer}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={endPointer}
+      ref={boardRef}
+      tabIndex={0}
+    >
+      {visibleLanes.map(({ status, label }) => {
+        const matching = tasks.filter((task) => laneFor(task) === status);
+        const shown = status === "completed" ? matching.slice(0, completedLimit) : matching;
+        return (
+          <Box aria-label={`${label}, ${matching.length} tasks`} className="taskchef-board-lane" component="section" key={label}>
+            <Box className="taskchef-board-lane-heading">
+              <Title order={2} size="h5">{label}</Title>
+              <Text aria-label={`${matching.length} tasks`} c="dimmed" size="sm">{matching.length}</Text>
+            </Box>
+            <Stack gap="sm">
+              {shown.map((task) => <BoardCard key={task.id} onOpenCodex={onOpenCodex} onOpenDetail={onOpenDetail} task={task} />)}
+              {matching.length === 0 && <Text c="dimmed" className="taskchef-board-empty" size="sm">No tasks</Text>}
+              {status === "completed" && matching.length > shown.length && (
+                <Button className="taskchef-board-more" onClick={onMoreCompleted} size="compact-sm" variant="subtle">
+                  Show {Math.min(5, matching.length - shown.length)} more · {shown.length} of {matching.length}
+                </Button>
+              )}
+            </Stack>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
+function BoardCard({ task, onOpenCodex, onOpenDetail }: {
+  task: Task;
+  onOpenCodex: (task: Task) => void;
+  onOpenDetail: (task: Task) => void;
+}) {
+  const latest = latestTurnPresentation(task);
+  const excerpt = task.status === "working" ? latest.requestSummary : latest.resultSummary;
+  const linked = hasLinkedCodexThread(task);
+  return (
+    <Paper className="taskchef-board-card" component="article" px="sm" pt="sm" pb={6} withBorder>
+      <Title className="taskchef-board-title" order={3} size="h5">
+        <button className="taskchef-title-button" onClick={() => onOpenDetail(task)} type="button">{task.title}</button>
+      </Title>
+      <Text className="taskchef-board-project" size="xs">{task.project.name}</Text>
+      <Text className="taskchef-board-excerpt taskchef-preserve-lines" size="sm">
+        <LinkedText task={task} text={excerpt} />
+      </Text>
+      <Box className="taskchef-board-card-footer">
+        <RelativeTime label="Updated time" value={task.meaningfulUpdatedAt ?? task.updatedAt} />
+        {linked ? (
+          <button aria-label={`Open chat for ${task.title}`} className="taskchef-board-chat" onClick={() => onOpenCodex(task)} title="Open chat" type="button">
+            <IconArrowUpRight aria-hidden size={19} stroke={1.6} />
+          </button>
+        ) : task.status === "working" ? <Text c="dimmed" className="taskchef-board-link-pending" size="xs">Chat link pending</Text> : null}
+      </Box>
+    </Paper>
+  );
+}

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

@@ -1,9 +1,9 @@
 import { Box, Paper, Stack, Text, Title } from "@mantine/core";
+import { IconArrowUpRight } from "@tabler/icons-react";
 import { latestTurnPresentation } from "../../state.js";
 import type { Task } from "../types";
 import { GitHubLinks } from "./GitHubLinks";
 import { LinkedText } from "./LinkedText";
-import { OpenChatButton } from "./OpenChatButton";
 import { ShimmerText } from "./ShimmerText";
 import { StatusBadge } from "./StatusBadge";
 import { TaskCardStats } from "./TaskCardStats";
@@ -19,7 +19,7 @@ export function TaskCard({
 }) {
   const latest = latestTurnPresentation(task);
   return (
-    <Paper className="taskchef-task-row" component="article" p="md" radius="md" withBorder>
+    <Paper className="taskchef-task-row" component="article" pb={8} pt="md" px="sm" radius="md" withBorder>
       <Stack className="taskchef-task-main" gap="sm">
           <Box>
             <Box className="taskchef-card-heading">
@@ -30,7 +30,6 @@ export function TaskCard({
               </Title>
               <Stack align="flex-end" className="taskchef-card-metadata" gap={4}>
                 <StatusBadge status={task.status} />
-                <OpenChatButton onClick={() => onOpenCodex(task)} taskTitle={task.title} />
               </Stack>
             </Box>
             <Text c="dimmed" mt={2} size="xs">{task.project.name}</Text>
@@ -50,7 +49,12 @@ export function TaskCard({
           </Box>
 
           <GitHubLinks task={task} />
-          <TaskCardStats task={task} />
+          <Box className="taskchef-list-card-footer">
+            <TaskCardStats task={task} />
+            <button aria-label={`Open chat for ${task.title}`} className="taskchef-board-chat" onClick={() => onOpenCodex(task)} title="Open chat" type="button">
+              <IconArrowUpRight aria-hidden size={19} stroke={1.6} />
+            </button>
+          </Box>
       </Stack>
     </Paper>
   );

package/src/dashboard/react/components/TaskCardStats.test.tsx

@@ -128,7 +128,7 @@ describe("task card stats", () => {
     expect(container.querySelectorAll(".taskchef-shimmer")).toHaveLength(1);
   });
 
-  test("places Open chat beneath the status badge and keeps callbacks working", () => {
+  test("places statistics and icon-only Open chat together in the card footer", () => {
     const openChat = vi.fn();
     const openDetail = vi.fn();
     const { container } = render(<MantineProvider><TaskCard
@@ -137,9 +137,16 @@ describe("task card stats", () => {
       task={fixtureTask()}
     /></MantineProvider>);
     const metadata = container.querySelector(".taskchef-card-metadata") as HTMLElement;
+    const footer = container.querySelector(".taskchef-list-card-footer") as HTMLElement;
+    const stats = container.querySelector(".taskchef-card-stats") as HTMLElement;
     expect(metadata.children[0]).toHaveClass("taskchef-status-badge");
-    expect(within(metadata).getByRole("button", { name: /open chat/i })).toBe(metadata.children[1]);
-    fireEvent.click(within(metadata).getByRole("button", { name: /open chat/i }));
+    expect(metadata.children).toHaveLength(1);
+    expect(footer.children[0]).toBe(stats);
+    const button = within(footer).getByRole("button", { name: /open chat/i });
+    expect(footer.children[1]).toBe(button);
+    expect(button).toHaveClass("taskchef-board-chat");
+    expect(button).not.toHaveTextContent("Open chat");
+    fireEvent.click(button);
     fireEvent.click(screen.getByRole("button", { name: /^review checkout reconciliation$/i }));
     expect(openChat).toHaveBeenCalledOnce();
     expect(openDetail).toHaveBeenCalledOnce();

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

@@ -19,7 +19,6 @@ export function TaskCardStats({ task }: { task: Task }) {
         <RelativeTime
           icon={<IconHistory aria-hidden size={14} />}
           label={`Updated time for ${task.title}`}
-          tooltipLabel="Updated at"
           value={task.meaningfulUpdatedAt ?? task.updatedAt}
         />
       </StatCell>

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

@@ -97,7 +97,7 @@ export function TaskDetail({
           <Menu position="bottom-start" shadow="md" withinPortal zIndex={360}>
             <Menu.Target>
               <Tooltip label="More task actions">
-                <ActionIcon aria-label="More task actions" disabled={busy} variant="default">
+                <ActionIcon aria-label="More task actions" className="taskchef-detail-more" disabled={busy} variant="default">
                   <IconDots aria-hidden size={17} />
                 </ActionIcon>
               </Tooltip>

package/src/dashboard/react/styles.css

@@ -16,27 +16,32 @@ body {
 }
 
 .taskchef-shell { min-height: 100vh; background: var(--taskchef-page); }
-.taskchef-shell header { border-bottom: 1px solid var(--taskchef-border); }
-.taskchef-header { padding-top: 28px; padding-bottom: 22px; }
+.taskchef-header-shell { border-bottom: 1px solid var(--taskchef-border); }
+.taskchef-header { max-width: 1510px; padding: 10px clamp(12px, 3vw, 48px); }
+.taskchef-header-layout { min-width: 0; min-height: 36px; gap: 8px; }
 .taskchef-header-copy { min-width: 0; }
-.taskchef-header-actions { align-self: stretch; flex: none; }
-.taskchef-connection { align-self: flex-end; }
-.taskchef-header-icon-row { justify-content: flex-end; }
+.taskchef-header-actions { flex: none; }
+.taskchef-connection { flex: none; margin-inline-start: 5px; }
 .taskchef-icon-button { flex: none; }
-.taskchef-version { margin-inline-start: 0.45rem; color: var(--taskchef-muted); font-weight: 600; letter-spacing: 0; text-transform: none; }
-.taskchef-brand-icon, .taskchef-brand-icon img { display: block; width: 42px; height: 42px; }
-.taskchef-main { padding-top: var(--mantine-spacing-md); }
-.taskchef-toolbar { padding-top: var(--mantine-spacing-md); background: light-dark(rgb(255 255 255 / 86%), rgb(34 39 36 / 88%)); }
-.taskchef-toolbar .mantine-InputWrapper-root { flex: 1 1 190px; max-width: 240px; }
+.taskchef-brand-title { min-width: 0; color: var(--taskchef-accent); font-size: 0.875rem; font-weight: 750; letter-spacing: 0.035em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
+.taskchef-version { margin-inline-start: 0.45rem; color: var(--taskchef-muted); font-size: 0.78em; font-weight: 600; letter-spacing: 0; text-transform: none; }
+.taskchef-brand-icon, .taskchef-brand-icon img { display: block; flex: none; width: 28px; height: 28px; }
+.taskchef-main { max-width: 1510px; padding-top: 8px; padding-inline: clamp(16px, 3vw, 48px); }
+.taskchef-toolbar { max-width: none; margin-bottom: 22px; padding: 8px 0 var(--mantine-spacing-md); border: 0; border-bottom: 1px solid var(--taskchef-border); background: transparent; box-shadow: none; }
+.taskchef-toolbar-filters { width: min(100%, 488px); min-width: 0; }
+.taskchef-toolbar-filters .mantine-InputWrapper-root { flex: 1 1 0; width: 0; min-width: 0; max-width: 240px; }
 .taskchef-toolbar .mantine-InputWrapper-label, .taskchef-filter-label { font-size: var(--mantine-font-size-sm); font-weight: 600; line-height: var(--mantine-line-height-sm); }
 .taskchef-toolbar .mantine-SegmentedControl-root { max-width: 650px; }
-.taskchef-results-summary { margin-top: 12px; color: var(--taskchef-muted); font-size: var(--mantine-font-size-xs); line-height: 1.35; white-space: nowrap; }
+.taskchef-results-summary { max-width: 1080px; margin-top: 12px; color: var(--taskchef-muted); font-size: var(--mantine-font-size-xs); line-height: 1.35; white-space: nowrap; }
+.taskchef-list { max-width: 1080px; }
 .taskchef-task-row { container-type: inline-size; background: light-dark(#fff, #202421); box-shadow: 0 1px 0 light-dark(rgb(22 31 25 / 3%), transparent); }
 .taskchef-task-row:hover { border-color: light-dark(var(--mantine-color-teal-4), var(--mantine-color-teal-8)); }
 .taskchef-task-main { min-width: 0; flex: 1; }
 .taskchef-card-heading,
 .taskchef-turn-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--mantine-spacing-sm); }
 .taskchef-card-metadata { width: max-content; min-width: 0; max-width: min(25rem, 45cqw); }
+.taskchef-list-card-footer { display: flex; align-items: end; gap: 4px; min-width: 0; }
+.taskchef-list-card-footer .taskchef-card-stats { flex: 1 1 auto; min-width: 0; margin-top: 2px; }
 .taskchef-status-badge { flex: none; font-size: var(--mantine-font-size-xs); }
 .taskchef-title-button {
   all: unset;
@@ -68,6 +73,47 @@ body {
 .taskchef-stat + .taskchef-stat { border-inline-start: 1px solid var(--taskchef-border); }
 .taskchef-empty { border-style: dashed; background: transparent; }
 
+.taskchef-toolbar .mantine-Select-input { width: 100%; height: 30px; min-height: 30px; padding-inline-start: 12px; font-size: var(--mantine-font-size-xs); }
+.taskchef-toolbar-view .mantine-SegmentedControl-root, .taskchef-toolbar-status .mantine-SegmentedControl-root { width: max-content; max-width: 100%; height: 30px; padding: 0; }
+.taskchef-toolbar-view .mantine-SegmentedControl-label, .taskchef-toolbar-status .mantine-SegmentedControl-label { display: flex; align-items: center; height: 100%; padding-inline: 12px; font-size: var(--mantine-font-size-xs); text-align: start; }
+.taskchef-board {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: min(340px, calc(100% - 36px));
+  align-items: stretch;
+  gap: 18px;
+  width: 100%;
+  min-width: 0;
+  min-height: max(360px, calc(100dvh - 270px));
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: thin;
+}
+.taskchef-board:focus-visible { outline: 2px solid var(--mantine-color-teal-6); outline-offset: 2px; }
+.taskchef-board-dragging { scroll-snap-type: none; user-select: none; cursor: grabbing; }
+.taskchef-board-lane { min-width: 0; scroll-snap-align: start; cursor: grab; }
+.taskchef-board-lane-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 13px 6px; margin-bottom: 6px; }
+.taskchef-board-lane-heading h2 { font-size: var(--mantine-font-size-sm); font-weight: 680; }
+.taskchef-board-empty { padding: 12px 4px; }
+.taskchef-board-card { display: flex; flex-direction: column; min-width: 0; cursor: auto; background: light-dark(#fff, #202421); border-color: var(--taskchef-border); box-shadow: 0 1px 2px light-dark(rgb(22 31 25 / 3%), transparent); }
+.taskchef-board-card:hover { border-color: light-dark(#bdc8c0, #5b685e); }
+.taskchef-board-project { color: var(--taskchef-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.taskchef-board-title { line-height: 1.3; }
+.taskchef-board-project { margin-top: 8px; }
+.taskchef-board-title .taskchef-title-button { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
+.taskchef-board-excerpt { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; margin-top: 18px; color: var(--taskchef-text); }
+.taskchef-board-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; margin-top: auto; padding-top: 10px; }
+.taskchef-board-card-footer .taskchef-time { padding-inline-start: 0; }
+.taskchef-board-chat { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--taskchef-muted); cursor: pointer; }
+.taskchef-board-chat:hover { background: var(--taskchef-surface-muted); color: var(--taskchef-text); }
+.taskchef-board-chat:focus-visible { outline: 2px solid var(--mantine-color-teal-6); outline-offset: 2px; }
+.taskchef-open-chat, .taskchef-detail-more { height: 26px; min-height: 26px; }
+.taskchef-open-chat .mantine-Button-section[data-position="left"] { margin-inline-end: 4px; }
+.taskchef-detail-more { width: 26px; min-width: 26px; }
+.taskchef-board-link-pending { text-align: right; }
+.taskchef-board-more { align-self: flex-start; padding-inline: 4px; color: var(--taskchef-muted); }
+
 .taskchef-notifications {
   position: fixed;
   z-index: 400;
@@ -120,7 +166,7 @@ body {
 .taskchef-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
 
 @media (max-width: 48em) {
-  .taskchef-toolbar .mantine-InputWrapper-root { max-width: none; }
+  .taskchef-toolbar-filters .mantine-InputWrapper-root { max-width: none; }
   .taskchef-toolbar .mantine-Group-root { align-items: stretch; }
   .taskchef-toolbar .mantine-SegmentedControl-root { overflow-x: auto; }
   .taskchef-notifications { right: 16px; bottom: 16px; width: min(330px, calc(100vw - 32px)); }
@@ -130,8 +176,15 @@ body {
 }
 
 @media (max-width: 34em) {
-  .taskchef-header { padding-top: 22px; padding-bottom: 18px; }
-  .taskchef-brand-icon, .taskchef-brand-icon img { width: 36px; height: 36px; }
+  .taskchef-header { padding-inline: 8px; padding-block: 7px; }
+  .taskchef-header-layout { min-height: 32px; gap: 4px; }
+  .taskchef-header-copy { gap: 5px; }
+  .taskchef-brand-title { font-size: clamp(0.625rem, 2.7vw, 0.75rem); letter-spacing: 0.015em; line-height: 1.15; white-space: normal; }
+  .taskchef-version { margin-inline-start: 0.3rem; }
+  .taskchef-brand-icon, .taskchef-brand-icon img { width: 24px; height: 24px; }
+  .taskchef-header-actions { gap: 0; }
+  .taskchef-icon-button { width: 32px; min-width: 32px; height: 32px; min-height: 32px; }
+  .taskchef-connection { gap: 5px; margin-inline-start: 2px; }
 }
 
 @container (max-width: 27.5rem) {

package/src/dashboard/state.js

@@ -49,10 +49,13 @@ export function taskStatusLabel(task) {
   return task.status === null ? "unresolved" : task.status.replaceAll("_", " ");
 }
 
+export function hasLinkedCodexThread(task) {
+  return typeof task.threadId === "string" && CODEX_THREAD_ID_PATTERN.test(task.threadId);
+}
+
 export function isArchiveTaskEligible(task) {
   return task.status !== "working"
-    && typeof task.threadId === "string"
-    && CODEX_THREAD_ID_PATTERN.test(task.threadId);
+    && hasLinkedCodexThread(task);
 }
 
 export function canArchiveTask(task) {