taskchef 8.6.2 → 8.7.0

package/src/mcp-app/react/NextTaskDetail.tsx

@@ -0,0 +1,147 @@
+import { Alert, Anchor, Badge, Box, Drawer, Group, Modal, ScrollArea, Stack, Text, Title, Tooltip } from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+import { IconArrowUpRight, IconClock, IconFolder, IconHelpCircle, IconHourglass, IconRobot } from "@tabler/icons-react";
+import { useCallback, useEffect, useState, type ReactNode } from "react";
+import type { Task, SavedUsage } from "../../dashboard/react/types";
+import { PullRequestInfo, nextRunLabel } from "../../dashboard/react/components/CardStatusIcons";
+import { OpenChatButton } from "../../dashboard/react/components/OpenChatButton";
+import { QueuedPrompts } from "../../dashboard/react/components/QueuedPrompts";
+import { TurnContent } from "../../dashboard/react/components/TurnContent";
+import { compactTokens, TokenBreakdown, useAnimatedUsage } from "../../dashboard/react/components/SavedUsageFormat";
+import { GitHubLinks } from "../../dashboard/react/components/GitHubLinks";
+import { formatWorkedDuration } from "../../dashboard/time.js";
+
+export function NextTaskDetail({ task, opened, busy, usageLoading = false, error, onClose, onOpenCodex, extraActions, loadImage }: {
+  task: Task | null; opened: boolean; busy: boolean; usageLoading?: boolean; error: string | null;
+  onClose: () => void; onOpenCodex: () => void; extraActions?: ReactNode; loadImage?: (task: Task, url?: string) => Promise<string | null>;
+}) {
+  const mobile = useMediaQuery("(max-width: 48em)");
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [annotationPopups, setAnnotationPopups] = useState<Set<string>>(() => new Set());
+  const annotationChange = useCallback((id: string, opened: boolean) => {
+    setAnnotationPopups(current => {
+      if (current.has(id) === opened) return current;
+      const next = new Set(current);
+      if (opened) next.add(id); else next.delete(id);
+      return next;
+    });
+  }, []);
+  const overlayOpen = lightboxOpen || annotationPopups.size > 0;
+  const [now, setNow] = useState(Date.now);
+  useEffect(() => {
+    if (!opened || task?.observed?.lastTurnEvent !== "inProgress") return;
+    setNow(Date.now());
+    const timer = window.setInterval(() => setNow(Date.now()), 60_000);
+    return () => window.clearInterval(timer);
+  }, [opened, task?.turnId, task?.observed?.lastTurnEvent]);
+  const latestUsage = useAnimatedUsage(task?.sessionUsage?.latest, task?.status === "working", task?.turnId);
+  const totalUsage = useAnimatedUsage(task?.sessionUsage?.total, task?.status === "working", task?.id);
+  if (!task) return null;
+  const start = Date.parse(task.observed?.lastTurnEventAt ?? "");
+  const duration = task.observed?.lastTurnEvent === "inProgress" && Number.isFinite(start)
+    ? Math.max(0, now - start) : task.observed?.latestTurnDurationMs;
+  const prs = task.detailPullRequests ?? task.pullRequests ?? [];
+  const firstRepo = new Set<string>();
+  const warnedRepo = new Set<string>();
+  const deniedRepos = new Set(prs.filter(pr => pr.accessIssue === "denied").map(pr => pr.url.split("/pull/")[0]));
+  const nextRun = task.scheduled && task.nextRunAt && Number.isFinite(Date.parse(task.nextRunAt)) ? nextRunLabel(task.nextRunAt) : null;
+  const count = task.observed?.directChildCount;
+  const source = task.observed?.source === "vscode" ? "Desktop" : task.observed?.source === "cli" ? "CLI" : task.observed?.source === "exec" ? "Exec" : null;
+  const input = task.inputSource === "ordinary" ? "Human" : task.inputSource === "scheduled" ? "Scheduled" : task.inputSource === "unverified" ? "Unknown" : null;
+  const label = task.status === "needs_input" || task.status === "interrupted" ? "Waiting for review" : task.status === "working" ? "Running" : task.status === "completed" ? "Done" : task.statusLabel;
+  const tokenIncomplete = !!task.sessionUsage && [task.sessionUsage.latest, task.sessionUsage.total].some(value => value.partial);
+  const costIncomplete = !!task.sessionUsage && [task.sessionUsage.latest, task.sessionUsage.total].some(value => value.costPartial);
+  const content = <Stack gap="md">
+    <Group justify="space-between" align="flex-start" wrap="nowrap" gap="xs" pr={8}>
+      <Group gap="xs" mt={0} className="taskchef-detail-meta">
+        <Tooltip label={task.project?.path || "No project"}><Text size="sm" c="dimmed" className="taskchef-detail-project"><IconFolder size={14} /><span>{task.project?.name || "No project"}</span></Text></Tooltip>
+        {label && <Badge variant="light" color="gray">{label}</Badge>}
+        {task.needsAnswer && <Badge variant="light" color="blue">Needs answer</Badge>}
+        {task.status === "interrupted" && <Badge variant="light" color="orange">Interrupted</Badge>}
+      </Group>
+      <Group gap="xs" wrap="nowrap" className="taskchef-detail-actions">
+        {extraActions}
+        <OpenChatButton loading={busy} onClick={onOpenCodex} taskTitle={task.title} />
+      </Group>
+    </Group>
+    {error && <Alert color="red">{error}</Alert>}
+    <Box className="taskchef-detail-layout">
+      <Box className="taskchef-detail-reply">
+        <TurnContent task={task} loadImage={loadImage} workedDurationMs={duration} onLightboxChange={setLightboxOpen} onAnnotationChange={annotationChange} />
+        {task.needsAnswer && <section aria-label="Pending questions" className="taskchef-pending-questions">
+          <div className="taskchef-question-header"><IconHelpCircle size={14} aria-hidden /><span>{task.pendingQuestions?.length === 1 ? "Question" : "Questions"}</span></div>
+          {(task.pendingQuestions ?? []).map(question => <Box key={question.id} mb="sm">
+            <Text size="sm" style={{ whiteSpace: "pre-wrap" }}>{question.title}</Text>
+            {question.options.length > 0 && <ol role="list">{question.options.map((option, index) => <li key={index}><span className="taskchef-question-number" aria-hidden>{index + 1}</span><span>{option}</span></li>)}</ol>}
+          </Box>)}
+          <div className="taskchef-question-footer"><Anchor component="button" type="button" size="sm" disabled={busy} onClick={onOpenCodex}><IconArrowUpRight size={14} aria-hidden />Open chat to answer</Anchor></div>
+        </section>}
+        <QueuedPrompts task={task} loadImage={loadImage} onLightboxChange={setLightboxOpen} />
+        <details className="taskchef-detail-technical">
+          <summary>Technical details</summary>
+          <Stack gap={8} mt="sm">
+            <TechnicalField label="Chat ID" value={task.id} />
+            {task.turnId && <TechnicalField label="Turn ID" value={task.turnId} />}
+            {source && <TechnicalField label="Source" value={source} />}
+            {input && <TechnicalField label="Last input" value={input} />}
+          </Stack>
+        </details>
+      </Box>
+      <Stack gap="lg" className="taskchef-detail-sidebar">
+        {(duration != null || nextRun || count != null) && <section aria-label="Activity">
+          <Title order={5} mb="sm">Activity</Title>
+          <Stack gap={10}>
+            {duration != null && <ActivityRow icon={<IconHourglass size={15} />}>{task.observed?.lastTurnEvent === "inProgress" ? "Worked for" : "Latest turn worked for"} {formatWorkedDuration(duration)}</ActivityRow>}
+            {task.observed?.recordedChatDurationMs != null && <Tooltip multiline w={280} label={`Sum of saved turn durations across this chat’s rollout files, plus the current running turn. Excludes idle time and subagents.${task.observed.historicalTimePartial ? " Some historical records are missing or unreadable." : ""}${task.observed.missingTurnDurations ? ` ${task.observed.missingTurnDurations} finished turns have no saved duration.` : ""}`}><Box><ActivityRow icon={<IconHourglass size={15} />}>Total chat worked for {formatWorkedDuration(task.observed.recordedChatDurationMs + (task.observed.lastTurnEvent === "inProgress" ? duration ?? 0 : 0))}{task.observed.historicalTimePartial && " · Partial"}</ActivityRow></Box></Tooltip>}
+            {nextRun && <ActivityRow icon={<IconClock size={15} className="taskchef-schedule-clock" />}>{nextRun}</ActivityRow>}
+            {count != null && <ActivityRow icon={<IconRobot size={15} />}>{count} {count === 1 ? "subagent" : "subagents"}</ActivityRow>}
+          </Stack>
+        </section>}
+        <section aria-label="Usage">
+          <Title order={5} mb="sm">Usage</Title>
+          {task.sessionUsage && (task.sessionUsage.latest.samples > 0 || task.sessionUsage.total.samples > 0) ? <>
+          <table className="taskchef-detail-usage"><thead><tr><th /><th scope="col">Tokens{tokenIncomplete && <sup>2</sup>}</th><th scope="col">API-equivalent cost<sup>1{costIncomplete && ",2"}</sup></th></tr></thead><tbody>
+            {(["Latest turn", "Total chat"] as const).map((label, i) => {
+              const value = i === 0 ? latestUsage! : totalUsage!;
+              const raw = i === 0 ? task.sessionUsage!.latest : task.sessionUsage!.total;
+              return <tr key={label}><th scope="row">{label}</th>
+                <td><Tooltip multiline w={280} label={<TokenBreakdown value={raw} />}><span>{value.samples ? `${value.partial ? "≥" : ""}${compactTokens(value.tokens.total_tokens)}` : "—"}</span></Tooltip></td>
+                <td><Tooltip multiline w={280} label={value.costPartial ? "Some usage records or model prices are missing. This is the subtotal for the calls TaskChef can price." : "Estimated from saved calls at standard API prices."}><span>{usageCost(value)}</span></Tooltip></td>
+              </tr>;
+            })}
+          </tbody></table>
+          <Text size="xs" c="dimmed" mt={8}><sup>1</sup> Estimates use <Anchor size="xs" href="https://developers.openai.com/api/docs/pricing" target="_blank" rel="noopener noreferrer">OpenAI API pricing</Anchor>. Subscription users are not billed this amount.</Text>
+          {[task.sessionUsage.latest, task.sessionUsage.total].some(value => value.partial || value.costPartial) && <Text size="xs" c="dimmed" mt={4}><sup>2</sup> Incomplete estimate: some usage records, turn links, or model prices are missing. Only known usage and prices are included.</Text>}
+          </> : <Text size="sm" c="dimmed" role="status">{usageLoading ? "Loading…" : "Usage unavailable."}</Text>}
+        </section>
+        {(prs.length > 0 || task.relatedGitHubLinks?.length) && <section aria-label="Pull requests">
+          <Title order={5} mb="sm">Pull requests</Title>
+          <Stack gap="md">{prs.map(pr => {
+            const repo = pr.url.split("/pull/")[0];
+            const first = !firstRepo.has(repo);
+            firstRepo.add(repo);
+            // A missing PR does not prove the whole repository is inaccessible.
+            const showAccess = !warnedRepo.has(repo) && (deniedRepos.has(repo) ? first : Boolean(pr.accessIssue));
+            if (showAccess) warnedRepo.add(repo);
+            return <PullRequestInfo key={pr.url} pr={first && deniedRepos.has(repo) ? { ...pr, accessIssue: "denied" } : pr} showAccess={showAccess} showChecks={false} />;
+          })}<GitHubLinks task={task} /></Stack>
+        </section>}
+      </Stack>
+    </Box>
+  </Stack>;
+  return mobile
+    ? <Drawer opened={opened} onClose={onClose} closeOnEscape={!overlayOpen} trapFocus={!overlayOpen} position="bottom" size="92%" title={task.title} classNames={{ content: "taskchef-detail-dialog" }} zIndex={300} scrollAreaComponent={ScrollArea.Autosize}>{content}</Drawer>
+    : <Modal opened={opened} onClose={onClose} closeOnEscape={!overlayOpen} trapFocus={!overlayOpen} title={task.title} size={960} centered classNames={{ content: "taskchef-detail-dialog" }} zIndex={300} scrollAreaComponent={ScrollArea.Autosize}>{content}</Modal>;
+}
+
+function usageCost(value: SavedUsage) {
+  if (!value.samples || (value.costPartial && value.costUsd === 0)) return "—";
+  return `${value.costPartial ? "≥" : ""}$${value.costUsd.toFixed(2)}`;
+}
+
+function ActivityRow({ icon, children }: { icon: ReactNode; children: ReactNode }) {
+  return <Text size="sm" className="taskchef-detail-activity-row"><span aria-hidden>{icon}</span><span>{children}</span></Text>;
+}
+function TechnicalField({ label, value }: { label: string; value: string }) {
+  return <Box className="taskchef-detail-field"><Text size="xs" c="dimmed">{label}</Text><Text size="sm" className="taskchef-detail-id">{value}</Text></Box>;
+}

package/src/mcp-app/react/ProjectPicker.tsx

@@ -0,0 +1,49 @@
+import { ActionIcon, Combobox, Group, InputBase, Text, useCombobox } from "@mantine/core";
+import { IconCheck, IconChevronDown, IconFolder, IconSearch, IconHistory, IconSortAscendingLetters, IconSortDescendingLetters } from "@tabler/icons-react";
+import { useState } from "react";
+
+export interface ProjectOption { value: string; label: string; path?: string; updatedAt?: number; }
+
+export function ProjectPicker({ data, value, onChange }: { data: ProjectOption[]; value: string; onChange: (value: string) => void }) {
+  const [search, setSearch] = useState("");
+  const [sort, setSort] = useState<"recent" | "az" | "za">("recent");
+  const sortLabel = sort === "recent" ? "Most recent" : sort === "az" ? "A–Z" : "Z–A";
+  const nextLabel = sort === "recent" ? "A–Z" : sort === "az" ? "Z–A" : "Most recent";
+  const SortIcon = sort === "recent" ? IconHistory : sort === "az" ? IconSortAscendingLetters : IconSortDescendingLetters;
+  const store = useCombobox({
+    onDropdownClose: () => { store.resetSelectedOption(); setSearch(""); store.focusTarget(); },
+    onDropdownOpen: () => { store.focusSearchInput(); },
+  });
+  const selected = data.find((item) => item.value === value);
+  const query = search.trim().toLocaleLowerCase();
+  const ordered = [...data].sort((a, b) => {
+    const rank = (item: ProjectOption) => item.value === "" ? 0 : item.value === "projectless" ? 2 : 1;
+    if (rank(a) !== rank(b)) return rank(a) - rank(b);
+    const alphabet = a.label.localeCompare(b.label, undefined, { sensitivity: "base", numeric: true }) || a.value.localeCompare(b.value);
+    return sort === "recent" ? (b.updatedAt ?? 0) - (a.updatedAt ?? 0) || alphabet : sort === "az" ? alphabet : -alphabet;
+  });
+  const options = ordered.filter((item) => `${item.label} ${item.path ?? ""}`.toLocaleLowerCase().includes(query));
+  return <Combobox store={store} onOptionSubmit={(next) => { onChange(String(next)); store.closeDropdown(); }} position="bottom-start" width={310} withinPortal>
+    <Combobox.Target targetType="button" withExpandedAttribute>
+      <InputBase component="button" type="button" pointer size="xs" aria-label="Project" role="combobox" onClick={() => store.toggleDropdown()}
+        leftSection={<IconFolder size={15} aria-hidden />} rightSection={<IconChevronDown size={13} aria-hidden />} className="next-project-trigger">
+        <span>{selected?.label ?? "All projects"}</span>
+      </InputBase>
+    </Combobox.Target>
+    <Combobox.Dropdown className="next-project-dropdown">
+      <Combobox.Search aria-label="Search projects" placeholder="Search projects" value={search} leftSection={<IconSearch size={15} aria-hidden />}
+        rightSectionPointerEvents="all" rightSectionWidth={34}
+        rightSection={<span className="next-project-sort"><ActionIcon variant="subtle" size="sm" aria-label={`Sort projects: ${sortLabel}. Switch to ${nextLabel}`} title={`Sort: ${sortLabel}`}
+          onMouseDown={(event) => event.preventDefault()} onClick={() => { setSort(sort === "recent" ? "az" : sort === "az" ? "za" : "recent"); store.resetSelectedOption(); }}>
+          <SortIcon size={17} aria-hidden />
+        </ActionIcon></span>}
+        onChange={(event) => { setSearch(event.currentTarget.value); store.resetSelectedOption(); }} />
+      <Combobox.Options aria-label="Projects" className="next-project-options">
+          {options.map((item) => <Combobox.Option key={item.value} value={item.value} active={item.value === value} aria-selected={item.value === value} title={item.path}>
+            <Group gap="xs" wrap="nowrap"><IconFolder size={16} aria-hidden /><Text size="sm" truncate style={{ flex: 1 }}>{item.label}</Text>{item.value === value && <IconCheck size={16} aria-hidden />}</Group>
+          </Combobox.Option>)}
+          {!options.length && <Combobox.Empty>No projects found</Combobox.Empty>}
+      </Combobox.Options>
+    </Combobox.Dropdown>
+  </Combobox>;
+}