taskchef 9.0.3 → 9.1.0

package/src/mcp-app/react/main.test.tsx

@@ -13,7 +13,7 @@ vi.mock("@mantine/core", async () => {
     createTheme: (theme: unknown) => theme,
     ActionIcon: ({ children, onClick, ...props }: Record<string, unknown>) => React.createElement("button", { "aria-label": props["aria-label"], onClick }, children as React.ReactNode),
     Modal: ({ opened, children }: { opened: boolean; children: React.ReactNode }) => opened ? <div role="dialog">{children}</div> : null,
-    Alert: wrap("div"), Box: wrap("div"), Button: ({ children, onClick, disabled }: {children: React.ReactNode; onClick?: () => void; disabled?: boolean}) => <button onClick={onClick} disabled={disabled}>{children}</button>, Group: wrap("div"),
+    Alert: wrap("div"), Box: wrap("div"), Button: ({ children, onClick, disabled, ...props }: {children: React.ReactNode; onClick?: () => void; disabled?: boolean; "aria-pressed"?: boolean; title?: string}) => <button onClick={onClick} disabled={disabled} aria-pressed={props["aria-pressed"]} title={props.title}>{children}</button>, Group: wrap("div"),
     MantineProvider: ({ children }: { children: React.ReactNode }) => children,
     TextInput: ({ value, onChange, ...props }: { value: string; onChange: React.ChangeEventHandler<HTMLInputElement>; "aria-label": string }) => <input aria-label={props["aria-label"]} value={value} onChange={onChange} />,
     Paper: wrap("div"), Stack: wrap("div"), Text: wrap("p"), Title: wrap("h2"),
@@ -633,3 +633,37 @@ test("native card usage setting defaults on and changes without hiding detail us
   fireEvent.click(screen.getByRole("button", {name:"Task one"}));
   expect(await screen.findByRole("region", {name:"Usage"})).toBeInTheDocument();
 });
+
+
+test("Pinned toggle combines with filters and updates after pin changes on refresh", async () => {
+  tasks = [task("one", "working", new Date().toISOString(), "Alpha"), task("two", "needs_input", new Date().toISOString(), "Beta"), task("old", "completed", "2026-01-01T00:00:00Z", "Alpha"), task("unknown")];
+  tasks.slice(0, 3).forEach((item, index) => { item.observed = { pinned: index !== 1, archive: false, lastTurnEvent: null, lastTurnEventAt: null, recentFileActivity: false }; });
+  mount();
+  await screen.findByRole("button", { name: "Task one" });
+  const toggle = screen.getByRole("button", { name: "Pinned" });
+  expect(toggle).toHaveAttribute("aria-pressed", "false");
+  expect(toggle).toHaveAttribute("title", "Show only pinned chats");
+  fireEvent.click(toggle);
+  expect(toggle).toHaveAttribute("aria-pressed", "true");
+  expect(screen.queryByRole("button", { name: "Task two" })).not.toBeInTheDocument();
+  expect(screen.queryByRole("button", { name: "Task unknown" })).not.toBeInTheDocument();
+  expect(screen.getByRole("button", { name: "Task old" })).toBeVisible();
+  fireEvent.change(screen.getByRole("combobox", { name: "Updated" }), { target: { value: "24h" } });
+  expect(screen.queryByRole("button", { name: "Task old" })).not.toBeInTheDocument();
+  fireEvent.change(screen.getByRole("combobox", { name: "Project" }), { target: { value: "/Beta" } });
+  expect(screen.queryByRole("button", { name: "Task one" })).not.toBeInTheDocument();
+  expect(within(screen.getByRole("region", { name: "Task board" })).queryAllByRole("article")).toHaveLength(0);
+  tasks = tasks.map(item => item.id === "two" ? { ...item, observed: { ...item.observed!, pinned: true } } : item);
+  await act(async () => { fireEvent.click(screen.getByRole("button", { name: "Refresh" })); });
+  expect(toggle).toHaveAttribute("aria-pressed", "true");
+  expect(screen.getByRole("button", { name: "Task two" })).toBeVisible();
+  fireEvent.change(screen.getByLabelText("Search Chats"), { target: { value: "missing" } });
+  expect(screen.queryByRole("button", { name: "Task two" })).not.toBeInTheDocument();
+  fireEvent.change(screen.getByLabelText("Search Chats"), { target: { value: "" } });
+  tasks = tasks.map(item => item.observed ? { ...item, observed: { ...item.observed, pinned: false } } : item);
+  await act(async () => { fireEvent.click(screen.getByRole("button", { name: "Refresh" })); });
+  expect(within(screen.getByRole("region", { name: "Task board" })).queryAllByRole("article")).toHaveLength(0);
+  fireEvent.click(toggle);
+  expect(toggle).toHaveAttribute("aria-pressed", "false");
+  expect(screen.getByRole("button", { name: "Task two" })).toBeVisible();
+});

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

@@ -1,7 +1,7 @@
 import { cachedImageLoader } from "../../ui/image-cache";
 import { App } from "@modelcontextprotocol/ext-apps";
 import { ActionIcon, Alert, Box, Button, Group, MantineProvider, Modal, createTheme, Paper, SegmentedControl, Select, Stack, Text, TextInput, Title } from "@mantine/core";
-import { IconRefresh, IconSearch, IconSettings } from "@tabler/icons-react";
+import { IconPin, IconRefresh, IconSearch, IconSettings } from "@tabler/icons-react";
 import { createRoot } from "react-dom/client";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { DashboardSnapshot, Task, Project } from "../../ui/types";
@@ -113,6 +113,7 @@ export function TaskChefApp() {
   const [scan, setScan] = useState<ScanStats | null>(null);
   const [selected, setSelected] = useState<Task | null>(null);
   const [opened, setOpened] = useState(false);
+  const [pinnedOnly, setPinnedOnly] = useState(false);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -330,6 +331,7 @@ export function TaskChefApp() {
   const boardTasks: Task[] = useMemo(() => {
     const terms = search.trim().toLocaleLowerCase().split(/\s+/).filter(Boolean);
     return filterTasks(projectTasks, { date, now }).filter((task: Task) => {
+      if (pinnedOnly && !task.observed?.pinned) return false;
       const content = [
         task.title, task.promptExcerpt ?? "", task.replyExcerpt ?? "", task.project.name,
         ...(task.project.githubRepos ?? []),
@@ -337,7 +339,7 @@ export function TaskChefApp() {
       ].join("\n").toLocaleLowerCase();
       return terms.every((term) => content.includes(term));
     });
-  }, [projectTasks, date, now, search]);
+  }, [projectTasks, date, now, search, pinnedOnly]);
   const visible = useMemo(() => boardTasks.filter((task) => !status || (task.status ?? "unverified") === status), [boardTasks, status]);
   const statusOptions = [{ label: `All ${boardTasks.length}`, value: "" }, ...lanes.map(({ label, status: value }) => ({
     label: `${label} ${boardTasks.filter((task) => task.status === value).length}`, value: value ?? "unverified",
@@ -418,10 +420,11 @@ export function TaskChefApp() {
       <Box className={`taskchef-app-shell${displayMode === "inline" ? " taskchef-app-inline" : ""}`}>
         <header className="taskchef-app-header">
           <Group className="taskchef-app-brand" gap="xs" wrap="nowrap"><img alt="" aria-hidden className="taskchef-app-mark" src={brandIcon} /><Title order={1}>TaskChef</Title></Group>
-          {displayMode !== "inline" && <Group className="taskchef-app-filters" gap="xs" wrap="nowrap">
+          {displayMode !== "inline" && <Group className="taskchef-app-filters" gap="xs" wrap="wrap">
             <ProjectPicker data={projects} onChange={(value) => { setProject(value); setCompletedLimit(5); }} value={project} />
             <Select className="taskchef-app-date" aria-label="Updated" data={[{ label: "Latest 24 hours", value: "24h" }, { label: "Latest 7 days", value: "7d" }, { label: "All time", value: "all" }]} onChange={(value) => { setDate(value ?? "all"); setCompletedLimit(5); }} value={date} size="xs" />
             <TextInput className="taskchef-app-search" aria-label="Search Chats" placeholder="Search Chats" type="search" leftSection={<IconSearch size={14} aria-hidden />} value={search} onChange={(event) => { setSearch(event.currentTarget.value); setCompletedLimit(5); setArchivedLimit(5); }} size="xs" />
+            <Button className="taskchef-app-pinned" aria-pressed={pinnedOnly} title="Show only pinned chats" size="xs" variant={pinnedOnly ? "filled" : "outline"} leftSection={<IconPin size={14} aria-hidden />} onClick={() => { setPinnedOnly(value => !value); setCompletedLimit(5); setArchivedLimit(5); }}>Pinned</Button>
           </Group>}
           <Group className="taskchef-app-actions" gap="xs" wrap="nowrap">
           <GitHubConnection hideTrigger openSignal={githubOpenSignal} auth={githubAuth} request={githubRequest} openLink={githubOpenLink} refresh={githubRefresh} openSettings={githubOpenSettings} />

package/src/mcp-app/react/styles.css

@@ -27,8 +27,9 @@ body { background: var(--taskchef-page); }
 .taskchef-app-main .taskchef-toolbar { margin-bottom: 8px; padding-bottom: 10px; }
 .taskchef-app-main .mantine-SegmentedControl-root { max-width: 100%; }
 .taskchef-app-view { width: max-content; }
-.taskchef-app-filters { grid-area: filters; min-width: 0; width: min(100%, 560px); }
-.taskchef-app-filters .mantine-InputWrapper-root { flex: 1 1 0; min-width: 0; }
+.taskchef-app-filters { grid-area: filters; min-width: 0; width: min(100%, 680px); }
+.taskchef-app-filters .mantine-InputWrapper-root { flex: 1 1 100px; min-width: 100px; }
+.taskchef-app-pinned { flex: 0 0 auto; white-space: nowrap; }
 .taskchef-app-filters .taskchef-app-date { flex: 0 0 132px; }
 @media (max-width: 650px) {
   .taskchef-app-header { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand actions" "filters filters"; gap: 8px; }
@@ -189,6 +190,9 @@ body { background: var(--taskchef-page); }
 .next-appearance-panel { background: var(--taskchef-elevated); }
 
 :root[data-taskchef-palette] .mantine-Button-root[data-variant="filled"] { color: var(--taskchef-surface); }
+:root[data-taskchef-palette] .taskchef-app-pinned { background: transparent; color: var(--taskchef-text); border-color: var(--taskchef-border); }
+:root[data-taskchef-palette] .taskchef-app-pinned:hover { background: var(--taskchef-hover); }
+:root[data-taskchef-palette] .taskchef-app-pinned[aria-pressed="true"] { background: var(--taskchef-accent); color: var(--taskchef-surface); border-color: var(--taskchef-accent); }
 :root[data-taskchef-palette] .taskchef-board-card:focus-visible { outline: 2px solid var(--taskchef-focus); outline-offset: 2px; }
 
 :root[data-taskchef-palette] body { font-family: var(--taskchef-font); }

package/src/ui/types.ts

@@ -129,7 +129,7 @@ export interface Task {
   promptImages?: { url: string; alt: string }[];
   replyImage?: { url: string; alt: string } | null;
   inputSource?: "scheduled" | "ordinary" | "unverified";
-  observed?: { unread?: boolean; source?: string | null; archive: boolean; lastTurnEvent: string | null; lastTurnEventAt: string | null; latestTurnDurationMs?: number | null; recordedChatDurationMs?: number | null; missingTurnDurations?: number; historicalTimePartial?: boolean; recentFileActivity: boolean; directChildCount?: number; userMessages?: number; assistantMessages?: number; sampledBytes?: number; fileBytes?: number };
+  observed?: { pinned?: boolean; unread?: boolean; source?: string | null; archive: boolean; lastTurnEvent: string | null; lastTurnEventAt: string | null; latestTurnDurationMs?: number | null; recordedChatDurationMs?: number | null; missingTurnDurations?: number; historicalTimePartial?: boolean; recentFileActivity: boolean; directChildCount?: number; userMessages?: number; assistantMessages?: number; sampledBytes?: number; fileBytes?: number };
   pullRequests?: PullRequestStatus[];
   detailPullRequests?: PullRequestStatus[];
   earlierPullRequest?: PullRequestStatus;