mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-14 01:50:39 +09:00
Add planning mode for issue work (#5353)
## Thinking Path > - Paperclip is a control plane for autonomous AI companies. > - Issues are the core unit of work, and issue comments are how board users and agents coordinate execution. > - Some issue conversations need to produce plans and approvals instead of immediate implementation work. > - The existing issue contract did not distinguish standard execution comments from planning-oriented issue work. > - This pull request adds an issue work-mode contract and board UI affordances for standard vs planning mode. > - The benefit is that planning-mode issues can be created, displayed, discussed, and carried through agent heartbeat context without losing the normal issue workflow. ## What Changed - Added `standard` / `planning` issue work-mode contracts across DB, shared validators/types, server issue flows, plugin protocol, and adapter heartbeat payloads. - Added an idempotent `0081_optimal_dormammu` migration for `issues.work_mode`, ordered after current `public-gh/master` migrations. - Updated heartbeat/context summaries and issue-thread interaction behavior so planning work mode is preserved when creating suggested follow-up issues. - Added UI support for planning-mode issue creation, issue rows, detail composer styling, and composer work-mode toggles. - Added focused server/shared/UI tests plus a Playwright visual verification spec for planning-mode surfaces. - Rebased the branch onto current `public-gh/master` and added durable planning-mode screenshots under `doc/assets/pap-3368/`. ## Verification - `pnpm --filter @paperclipai/db run check:migrations` - `pnpm exec vitest run --project @paperclipai/shared packages/shared/src/validators/issue.test.ts` - `pnpm exec vitest run --project @paperclipai/server server/src/__tests__/heartbeat-context-summary.test.ts server/src/__tests__/issue-thread-interactions-service.test.ts server/src/__tests__/issues-goal-context-routes.test.ts --pool=forks --poolOptions.forks.isolate=true` - `pnpm exec vitest run --project @paperclipai/ui ui/src/components/IssueChatThread.test.tsx ui/src/components/NewIssueDialog.test.tsx ui/src/components/IssueRow.test.tsx ui/src/pages/IssueDetail.test.tsx` - `pnpm exec vitest run --project @paperclipai/adapter-utils packages/adapter-utils/src/server-utils.test.ts` - `PAPERCLIP_E2E_SKIP_LLM=true npx playwright test --config tests/e2e/playwright.config.ts tests/e2e/planning-mode-visual-verification.spec.ts` ## Screenshots Desktop planning detail:  Desktop planning row:  Desktop staged standard toggle:  Mobile planning detail:  Mobile planning row:  ## Risks - Medium migration risk: this adds a non-null issue column. The migration uses `ADD COLUMN IF NOT EXISTS` so installations that applied an older branch-local migration number can still apply the final numbered migration safely. - Medium contract risk: issue payloads, plugin payloads, and adapter heartbeat payloads now include work mode; compatibility is handled by defaulting missing values to `standard`. - UI risk is moderate because composer controls changed; focused component tests and visual e2e coverage exercise standard vs planning display and toggle behavior. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected — check the roadmap first. See `CONTRIBUTING.md`. ## Model Used - OpenAI Codex, GPT-5 coding agent in a local Paperclip worktree, with shell/tool use. Exact context-window size is not exposed in this runtime. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] If this change affects the UI, I have included before/after screenshots - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
GitHub
parent
320fd5d23b
commit
a1b30c9f35
65 changed files with 1539 additions and 214 deletions
|
|
@ -346,6 +346,104 @@ describe("IssueChatThread", () => {
|
|||
});
|
||||
});
|
||||
|
||||
it("renders the composer in planning mode when the issue is in planning mode", () => {
|
||||
const root = createRoot(container);
|
||||
|
||||
act(() => {
|
||||
root.render(
|
||||
<MemoryRouter>
|
||||
<IssueChatThread
|
||||
comments={[]}
|
||||
linkedRuns={[]}
|
||||
timelineEvents={[]}
|
||||
liveRuns={[]}
|
||||
issueWorkMode="planning"
|
||||
onWorkModeChange={() => {}}
|
||||
onAdd={async () => {}}
|
||||
enableLiveTranscriptPolling={false}
|
||||
/>
|
||||
</MemoryRouter>,
|
||||
);
|
||||
});
|
||||
|
||||
const composer = container.querySelector('[data-testid="issue-chat-composer"]');
|
||||
expect(composer).not.toBeNull();
|
||||
expect(composer?.getAttribute("data-pending-work-mode")).toBe("planning");
|
||||
expect(composer?.className).toContain("amber");
|
||||
|
||||
const toggle = container.querySelector(
|
||||
'[data-testid="issue-chat-composer-work-mode-toggle"]',
|
||||
);
|
||||
expect(toggle).not.toBeNull();
|
||||
expect(toggle?.getAttribute("data-pending-work-mode")).toBe("planning");
|
||||
expect(toggle?.textContent).toContain("Planning");
|
||||
|
||||
act(() => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("hides the planning chip on a standard issue and exposes the toggle through the menu", () => {
|
||||
const root = createRoot(container);
|
||||
const onWorkModeChange = vi.fn();
|
||||
|
||||
act(() => {
|
||||
root.render(
|
||||
<MemoryRouter>
|
||||
<IssueChatThread
|
||||
comments={[]}
|
||||
linkedRuns={[]}
|
||||
timelineEvents={[]}
|
||||
liveRuns={[]}
|
||||
issueWorkMode="standard"
|
||||
onWorkModeChange={onWorkModeChange}
|
||||
onAdd={async () => {}}
|
||||
enableLiveTranscriptPolling={false}
|
||||
/>
|
||||
</MemoryRouter>,
|
||||
);
|
||||
});
|
||||
|
||||
expect(
|
||||
container.querySelector('[data-testid="issue-chat-composer-work-mode-toggle"]'),
|
||||
).toBeNull();
|
||||
const composer = container.querySelector('[data-testid="issue-chat-composer"]');
|
||||
expect(composer?.getAttribute("data-pending-work-mode")).toBe("standard");
|
||||
expect(composer?.className).not.toContain("amber");
|
||||
|
||||
const menuTrigger = container.querySelector(
|
||||
'[data-testid="issue-chat-composer-work-mode-menu"]',
|
||||
) as HTMLButtonElement | null;
|
||||
expect(menuTrigger).not.toBeNull();
|
||||
act(() => {
|
||||
menuTrigger?.click();
|
||||
});
|
||||
|
||||
const menuItem = document.querySelector(
|
||||
'[data-testid="issue-chat-composer-work-mode-menu-toggle"]',
|
||||
) as HTMLButtonElement | null;
|
||||
expect(menuItem).not.toBeNull();
|
||||
expect(menuItem?.textContent).toContain("Switch to planning");
|
||||
|
||||
act(() => {
|
||||
menuItem?.click();
|
||||
});
|
||||
|
||||
expect(onWorkModeChange).not.toHaveBeenCalled();
|
||||
expect(composer?.getAttribute("data-pending-work-mode")).toBe("planning");
|
||||
expect(composer?.className).toContain("amber");
|
||||
|
||||
const visibleChip = container.querySelector(
|
||||
'[data-testid="issue-chat-composer-work-mode-toggle"]',
|
||||
);
|
||||
expect(visibleChip).not.toBeNull();
|
||||
expect(visibleChip?.textContent).toContain("Planning");
|
||||
|
||||
act(() => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("virtualizes long merged threads so only a windowed slice mounts", () => {
|
||||
const root = createRoot(container);
|
||||
const totalMergedRows =
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ import type {
|
|||
IssueBlockerAttention,
|
||||
IssueRelationIssueSummary,
|
||||
SuccessfulRunHandoffState,
|
||||
IssueWorkMode,
|
||||
} from "@paperclipai/shared";
|
||||
import type { ActiveRunForIssue, LiveRunForIssue } from "../api/heartbeats";
|
||||
import { useLiveRunTranscripts } from "./transcript/useLiveRunTranscripts";
|
||||
|
|
@ -117,7 +118,7 @@ import { cn, formatDateTime, formatShortDate } from "../lib/utils";
|
|||
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { AlertTriangle, ArrowRight, Brain, Check, ChevronDown, Copy, Hammer, Loader2, MoreHorizontal, Paperclip, PauseCircle, Search, Square, ThumbsDown, ThumbsUp } from "lucide-react";
|
||||
import { AlertTriangle, ArrowRight, Brain, Check, ChevronDown, ClipboardList, Copy, Hammer, Loader2, MoreHorizontal, Paperclip, PauseCircle, Search, Square, ThumbsDown, ThumbsUp } from "lucide-react";
|
||||
import { IssueBlockedNotice } from "./IssueBlockedNotice";
|
||||
|
||||
interface IssueChatMessageContext {
|
||||
|
|
@ -261,6 +262,8 @@ interface IssueChatComposerProps {
|
|||
composerDisabledReason?: string | null;
|
||||
composerHint?: string | null;
|
||||
issueStatus?: string;
|
||||
issueWorkMode?: IssueWorkMode;
|
||||
onWorkModeChange?: (workMode: IssueWorkMode) => Promise<void> | void;
|
||||
}
|
||||
|
||||
interface IssueChatThreadProps {
|
||||
|
|
@ -304,6 +307,7 @@ interface IssueChatThreadProps {
|
|||
mentions?: MentionOption[];
|
||||
composerDisabledReason?: string | null;
|
||||
composerHint?: string | null;
|
||||
onWorkModeChange?: (workMode: IssueWorkMode) => Promise<void> | void;
|
||||
showComposer?: boolean;
|
||||
showJumpToLatest?: boolean;
|
||||
emptyMessage?: string;
|
||||
|
|
@ -333,6 +337,7 @@ interface IssueChatThreadProps {
|
|||
interaction: AskUserQuestionsInteraction,
|
||||
) => Promise<void> | void;
|
||||
composerRef?: Ref<IssueChatComposerHandle>;
|
||||
issueWorkMode?: IssueWorkMode;
|
||||
/**
|
||||
* Hook for the parent to refetch comments when the user explicitly asks
|
||||
* to jump to the latest comment. Used to make sure the absolute newest
|
||||
|
|
@ -2816,6 +2821,8 @@ const IssueChatComposer = forwardRef<IssueChatComposerHandle, IssueChatComposerP
|
|||
composerDisabledReason = null,
|
||||
composerHint = null,
|
||||
issueStatus,
|
||||
issueWorkMode,
|
||||
onWorkModeChange,
|
||||
}, forwardedRef) {
|
||||
const api = useAui();
|
||||
const toastActions = useOptionalToastActions();
|
||||
|
|
@ -2828,6 +2835,10 @@ const IssueChatComposer = forwardRef<IssueChatComposerHandle, IssueChatComposerP
|
|||
const effectiveSuggestedAssigneeValue = suggestedAssigneeValue ?? currentAssigneeValue;
|
||||
const [reassignTarget, setReassignTarget] = useState(effectiveSuggestedAssigneeValue);
|
||||
const [unassignedConfirmed, setUnassignedConfirmed] = useState(false);
|
||||
const resolvedIssueWorkMode: IssueWorkMode = issueWorkMode ?? "standard";
|
||||
const [pendingWorkMode, setPendingWorkMode] = useState<IssueWorkMode>(resolvedIssueWorkMode);
|
||||
const [workModeMenuOpen, setWorkModeMenuOpen] = useState(false);
|
||||
const canToggleWorkMode = typeof onWorkModeChange === "function";
|
||||
const attachInputRef = useRef<HTMLInputElement | null>(null);
|
||||
const editorRef = useRef<MarkdownEditorRef>(null);
|
||||
const composerContainerRef = useRef<HTMLDivElement | null>(null);
|
||||
|
|
@ -2878,6 +2889,10 @@ const IssueChatComposer = forwardRef<IssueChatComposerHandle, IssueChatComposerP
|
|||
setUnassignedConfirmed(false);
|
||||
}, [reassignTarget]);
|
||||
|
||||
useEffect(() => {
|
||||
setPendingWorkMode(resolvedIssueWorkMode);
|
||||
}, [resolvedIssueWorkMode]);
|
||||
|
||||
useImperativeHandle(forwardedRef, () => ({
|
||||
focus: focusComposer,
|
||||
restoreDraft: (submittedBody: string) => {
|
||||
|
|
@ -2920,10 +2935,14 @@ const IssueChatComposer = forwardRef<IssueChatComposerHandle, IssueChatComposerP
|
|||
const submittedBody = trimmed;
|
||||
const viewportSnapshot = captureComposerViewportSnapshot(composerContainerRef.current);
|
||||
|
||||
const workModeChanged = pendingWorkMode !== resolvedIssueWorkMode;
|
||||
setSubmitting(true);
|
||||
setBody("");
|
||||
setUnassignedConfirmed(false);
|
||||
try {
|
||||
if (workModeChanged && onWorkModeChange) {
|
||||
await onWorkModeChange(pendingWorkMode);
|
||||
}
|
||||
const appendPromise = api.thread().append({
|
||||
role: "user",
|
||||
content: [{ type: "text", text: submittedBody }],
|
||||
|
|
@ -3081,12 +3100,16 @@ const IssueChatComposer = forwardRef<IssueChatComposerHandle, IssueChatComposerP
|
|||
);
|
||||
}
|
||||
|
||||
const isPlanning = pendingWorkMode === "planning";
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={composerContainerRef}
|
||||
data-testid="issue-chat-composer"
|
||||
data-pending-work-mode={pendingWorkMode}
|
||||
className={cn(
|
||||
"relative rounded-md border border-border/70 bg-background/95 p-[15px] shadow-[0_-12px_28px_rgba(15,23,42,0.08)] backdrop-blur transition-[border-color,background-color,box-shadow] duration-150 supports-[backdrop-filter]:bg-background/85 dark:shadow-[0_-12px_28px_rgba(0,0,0,0.28)]",
|
||||
isPlanning && "border-amber-500/60 bg-amber-50/60 supports-[backdrop-filter]:bg-amber-50/40 dark:border-amber-500/50 dark:bg-amber-500/[0.07] dark:supports-[backdrop-filter]:bg-amber-500/[0.07]",
|
||||
isDragOver && "border-primary/45 bg-background shadow-[0_-12px_28px_rgba(15,23,42,0.08),0_0_0_1px_hsl(var(--primary)/0.16)]",
|
||||
)}
|
||||
onDragEnterCapture={handleFileDragEnter}
|
||||
|
|
@ -3178,25 +3201,77 @@ const IssueChatComposer = forwardRef<IssueChatComposerHandle, IssueChatComposerP
|
|||
) : null}
|
||||
|
||||
<div className="flex flex-wrap items-center justify-end gap-3">
|
||||
{(onImageUpload || onAttachImage) ? (
|
||||
<div className="mr-auto flex items-center gap-3">
|
||||
<input
|
||||
ref={attachInputRef}
|
||||
type="file"
|
||||
className="hidden"
|
||||
onChange={handleAttachFile}
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => attachInputRef.current?.click()}
|
||||
disabled={attaching}
|
||||
title="Attach file"
|
||||
<div className="mr-auto flex items-center gap-2">
|
||||
{(onImageUpload || onAttachImage) ? (
|
||||
<>
|
||||
<input
|
||||
ref={attachInputRef}
|
||||
type="file"
|
||||
className="hidden"
|
||||
onChange={handleAttachFile}
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => attachInputRef.current?.click()}
|
||||
disabled={attaching}
|
||||
title="Attach file"
|
||||
>
|
||||
<Paperclip className="h-4 w-4" />
|
||||
</Button>
|
||||
</>
|
||||
) : null}
|
||||
{canToggleWorkMode ? (
|
||||
<Popover open={workModeMenuOpen} onOpenChange={setWorkModeMenuOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
data-testid="issue-chat-composer-work-mode-menu"
|
||||
title="More composer options"
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-44 p-1" align="start">
|
||||
<button
|
||||
type="button"
|
||||
data-testid="issue-chat-composer-work-mode-menu-toggle"
|
||||
data-pending-work-mode={pendingWorkMode}
|
||||
className={cn(
|
||||
"flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs hover:bg-accent/50",
|
||||
isPlanning ? "text-amber-700 dark:text-amber-300" : "text-foreground",
|
||||
)}
|
||||
onClick={() => {
|
||||
setPendingWorkMode((prev) => (prev === "planning" ? "standard" : "planning"));
|
||||
setWorkModeMenuOpen(false);
|
||||
}}
|
||||
>
|
||||
{isPlanning ? (
|
||||
<Hammer className="h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden />
|
||||
) : (
|
||||
<ClipboardList className="h-3.5 w-3.5 shrink-0 text-amber-600 dark:text-amber-300" aria-hidden />
|
||||
)}
|
||||
<span>{isPlanning ? "Switch to standard" : "Switch to planning"}</span>
|
||||
</button>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
) : null}
|
||||
{canToggleWorkMode && isPlanning ? (
|
||||
<button
|
||||
type="button"
|
||||
data-testid="issue-chat-composer-work-mode-toggle"
|
||||
data-pending-work-mode={pendingWorkMode}
|
||||
aria-pressed
|
||||
title="Planning mode is on for this submission. Click to switch to Standard."
|
||||
onClick={() => setPendingWorkMode("standard")}
|
||||
className="inline-flex items-center gap-1.5 rounded-md border border-amber-500/60 bg-amber-500/15 px-2 py-1 text-xs text-amber-800 transition-colors hover:bg-amber-500/25 dark:border-amber-500/50 dark:bg-amber-500/15 dark:text-amber-200 dark:hover:bg-amber-500/25"
|
||||
>
|
||||
<Paperclip className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
<ClipboardList className="h-3.5 w-3.5" aria-hidden />
|
||||
<span>Planning</span>
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{enableReassign && reassignOptions.length > 0 ? (
|
||||
<InlineEntitySelector
|
||||
|
|
@ -3300,6 +3375,8 @@ export function IssueChatThread({
|
|||
onSubmitInteractionAnswers,
|
||||
onCancelInteraction,
|
||||
composerRef,
|
||||
issueWorkMode,
|
||||
onWorkModeChange,
|
||||
onRefreshLatestComments,
|
||||
}: IssueChatThreadProps) {
|
||||
const location = useLocation();
|
||||
|
|
@ -3873,8 +3950,8 @@ export function IssueChatThread({
|
|||
stoppingRunId={stoppingRunId}
|
||||
interruptingQueuedRunId={interruptingQueuedRunId}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
))
|
||||
)}
|
||||
{showComposer ? (
|
||||
<div data-testid="issue-chat-thread-notices" className="space-y-2">
|
||||
<IssueBlockedNotice
|
||||
|
|
@ -3923,6 +4000,8 @@ export function IssueChatThread({
|
|||
composerDisabledReason={composerDisabledReason}
|
||||
composerHint={composerHint}
|
||||
issueStatus={issueStatus}
|
||||
issueWorkMode={issueWorkMode}
|
||||
onWorkModeChange={onWorkModeChange}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
|
|
|
|||
|
|
@ -215,6 +215,7 @@ function createIssue(): Issue {
|
|||
title: "Plan rendering",
|
||||
description: null,
|
||||
status: "in_progress",
|
||||
workMode: "standard",
|
||||
priority: "medium",
|
||||
assigneeAgentId: null,
|
||||
assigneeUserId: null,
|
||||
|
|
|
|||
|
|
@ -81,6 +81,7 @@ function createIssue(overrides: Partial<Issue> = {}): Issue {
|
|||
createdAt: new Date("2026-04-11T10:00:00.000Z"),
|
||||
updatedAt: new Date("2026-04-11T10:00:00.000Z"),
|
||||
...overrides,
|
||||
workMode: overrides.workMode ?? "standard",
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -162,6 +162,7 @@ function createIssue(overrides: Partial<Issue> = {}): Issue {
|
|||
createdAt: new Date("2026-04-06T12:00:00.000Z"),
|
||||
updatedAt: new Date("2026-04-06T12:05:00.000Z"),
|
||||
...overrides,
|
||||
workMode: overrides.workMode ?? "standard",
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@ function createIssue(overrides: Partial<Issue> = {}): Issue {
|
|||
lastExternalCommentAt: null,
|
||||
isUnreadForMe: false,
|
||||
...overrides,
|
||||
workMode: overrides.workMode ?? "standard",
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -227,6 +228,22 @@ describe("IssueRow", () => {
|
|||
});
|
||||
});
|
||||
|
||||
it("renders planning mode marker for planning work mode issues", () => {
|
||||
const root = createRoot(container);
|
||||
|
||||
act(() => {
|
||||
root.render(<IssueRow issue={createIssue({ workMode: "planning" })} />);
|
||||
});
|
||||
|
||||
const link = container.querySelector("[data-inbox-issue-link]") as HTMLAnchorElement | null;
|
||||
expect(link).not.toBeNull();
|
||||
expect(link?.textContent).toContain("Planning");
|
||||
|
||||
act(() => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("renders without error when titleSuffix is omitted", () => {
|
||||
const root = createRoot(container);
|
||||
|
||||
|
|
|
|||
|
|
@ -83,6 +83,14 @@ export function IssueRow({
|
|||
{checklistStepNumber}.
|
||||
</span>
|
||||
) : null;
|
||||
const planningModeIndicator = issue.workMode === "planning" ? (
|
||||
<span
|
||||
className="ml-1.5 inline-flex shrink-0 items-center rounded-full border border-amber-500/60 bg-amber-500/15 px-2 py-0.5 text-[10px] font-medium text-amber-700 dark:text-amber-300"
|
||||
title="This issue is in planning mode."
|
||||
>
|
||||
Planning
|
||||
</span>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<Link
|
||||
|
|
@ -104,6 +112,7 @@ export function IssueRow({
|
|||
<span className="flex shrink-0 items-center gap-1 pt-px sm:hidden">
|
||||
{mobileLeading ?? <StatusIcon status={issue.status} blockerAttention={issue.blockerAttention} className={selectedStatusClass} />}
|
||||
{productivityReviewIndicator}
|
||||
{planningModeIndicator}
|
||||
</span>
|
||||
<span className="flex min-w-0 flex-1 flex-col gap-1 sm:contents">
|
||||
<span className={cn("line-clamp-2 text-sm sm:order-2 sm:min-w-0 sm:flex-1 sm:truncate sm:line-clamp-none", titleClassName)}>
|
||||
|
|
@ -128,6 +137,7 @@ export function IssueRow({
|
|||
<span className="shrink-0 font-mono text-xs text-muted-foreground">
|
||||
{identifier}
|
||||
</span>
|
||||
{planningModeIndicator}
|
||||
</>
|
||||
)}
|
||||
{mobileMeta ? (
|
||||
|
|
|
|||
|
|
@ -114,6 +114,7 @@ function createIssue(overrides: Partial<Issue> = {}): Issue {
|
|||
createdAt: new Date("2026-04-18T19:00:00.000Z"),
|
||||
updatedAt: new Date("2026-04-18T19:00:00.000Z"),
|
||||
...overrides,
|
||||
workMode: overrides.workMode ?? "standard",
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -110,6 +110,7 @@ function createIssue(overrides: Partial<Issue> = {}): Issue {
|
|||
labelIds: [],
|
||||
currentExecutionWorkspace: null,
|
||||
...overrides,
|
||||
workMode: overrides.workMode ?? "standard",
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -179,6 +179,7 @@ function createIssue(overrides: Partial<Issue> = {}): Issue {
|
|||
lastActivityAt: null,
|
||||
isUnreadForMe: false,
|
||||
...overrides,
|
||||
workMode: overrides.workMode ?? "standard",
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -405,6 +405,42 @@ describe("NewIssueDialog", () => {
|
|||
goalId: "goal-1",
|
||||
projectId: "project-1",
|
||||
executionWorkspaceId: "workspace-1",
|
||||
workMode: "standard",
|
||||
}),
|
||||
);
|
||||
|
||||
act(() => root.unmount());
|
||||
});
|
||||
|
||||
it("restores the planning mode from dialog defaults", async () => {
|
||||
dialogState.newIssueDefaults = {
|
||||
title: "Planned from defaults",
|
||||
workMode: "planning",
|
||||
};
|
||||
|
||||
const { root } = renderDialog(container);
|
||||
await flush();
|
||||
|
||||
const planningButton = container.querySelector('[data-issue-work-mode="planning"]');
|
||||
expect(planningButton?.className).toContain("bg-accent");
|
||||
|
||||
const submitButton = Array.from(container.querySelectorAll("button"))
|
||||
.find((button) => button.textContent?.includes("Create Issue"));
|
||||
expect(submitButton).not.toBeUndefined();
|
||||
await vi.waitFor(() => {
|
||||
expect(submitButton?.hasAttribute("disabled")).toBe(false);
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
submitButton!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
});
|
||||
await flush();
|
||||
|
||||
expect(mockIssuesApi.create).toHaveBeenCalledWith(
|
||||
"company-1",
|
||||
expect.objectContaining({
|
||||
title: "Planned from defaults",
|
||||
workMode: "planning",
|
||||
}),
|
||||
);
|
||||
|
||||
|
|
@ -545,6 +581,45 @@ describe("NewIssueDialog", () => {
|
|||
expect.objectContaining({
|
||||
title: "Typed issue",
|
||||
description: "Typed description",
|
||||
workMode: "standard",
|
||||
}),
|
||||
);
|
||||
|
||||
act(() => root.unmount());
|
||||
});
|
||||
|
||||
it("submits planning work mode when planning is selected", async () => {
|
||||
const { root } = renderDialog(container);
|
||||
await flush();
|
||||
|
||||
const titleInput = container.querySelector('textarea[placeholder="Issue title"]') as HTMLTextAreaElement | null;
|
||||
expect(titleInput).not.toBeNull();
|
||||
await typeTextareaValue(titleInput!, "Plan this first");
|
||||
|
||||
const planningButton = container.querySelector('[data-issue-work-mode="planning"]');
|
||||
expect(planningButton).not.toBeNull();
|
||||
await act(async () => {
|
||||
planningButton!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
});
|
||||
await flush();
|
||||
|
||||
const submitButton = Array.from(container.querySelectorAll("button"))
|
||||
.find((button) => button.textContent?.includes("Create Issue"));
|
||||
expect(submitButton).not.toBeUndefined();
|
||||
await vi.waitFor(() => {
|
||||
expect(submitButton?.hasAttribute("disabled")).toBe(false);
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
submitButton!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
});
|
||||
await flush();
|
||||
|
||||
expect(mockIssuesApi.create).toHaveBeenCalledWith(
|
||||
"company-1",
|
||||
expect.objectContaining({
|
||||
title: "Plan this first",
|
||||
workMode: "planning",
|
||||
}),
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { memo, useState, useEffect, useRef, useCallback, useMemo, type ChangeEvent, type DragEvent, type RefObject } from "react";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import type { IssueWorkMode } from "@paperclipai/shared";
|
||||
import { pickTextColorForSolidBg } from "@/lib/color-contrast";
|
||||
import { useDialog } from "../context/DialogContext";
|
||||
import { useCompany } from "../context/CompanyContext";
|
||||
|
|
@ -43,6 +44,8 @@ import {
|
|||
ChevronRight,
|
||||
ChevronDown,
|
||||
CircleDot,
|
||||
ClipboardList,
|
||||
Hammer,
|
||||
Minus,
|
||||
ArrowUp,
|
||||
ArrowDown,
|
||||
|
|
@ -86,6 +89,7 @@ interface IssueDraft {
|
|||
executionWorkspaceMode?: string;
|
||||
selectedExecutionWorkspaceId?: string;
|
||||
useIsolatedExecutionWorkspace?: boolean;
|
||||
workMode?: IssueWorkMode;
|
||||
}
|
||||
|
||||
type StagedIssueFile = {
|
||||
|
|
@ -130,6 +134,19 @@ const ISSUE_THINKING_EFFORT_OPTIONS = {
|
|||
],
|
||||
} as const;
|
||||
|
||||
function isIssueWorkMode(value: unknown): value is IssueWorkMode {
|
||||
return value === "standard" || value === "planning";
|
||||
}
|
||||
|
||||
const ISSUE_WORK_MODE_OPTIONS: ReadonlyArray<{
|
||||
value: IssueWorkMode;
|
||||
label: string;
|
||||
icon: typeof Hammer;
|
||||
}> = [
|
||||
{ value: "standard", label: "Standard", icon: Hammer },
|
||||
{ value: "planning", label: "Planning", icon: ClipboardList },
|
||||
];
|
||||
|
||||
function loadDraft(): IssueDraft | null {
|
||||
try {
|
||||
const raw = localStorage.getItem(DRAFT_KEY);
|
||||
|
|
@ -400,6 +417,7 @@ export function NewIssueDialog() {
|
|||
const [assigneeChrome, setAssigneeChrome] = useState(false);
|
||||
const [executionWorkspaceMode, setExecutionWorkspaceMode] = useState<string>("shared_workspace");
|
||||
const [selectedExecutionWorkspaceId, setSelectedExecutionWorkspaceId] = useState("");
|
||||
const [workMode, setWorkMode] = useState<IssueWorkMode>("standard");
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [dialogCompanyId, setDialogCompanyId] = useState<string | null>(null);
|
||||
const [stagedFiles, setStagedFiles] = useState<StagedIssueFile[]>([]);
|
||||
|
|
@ -419,6 +437,7 @@ export function NewIssueDialog() {
|
|||
// Popover states
|
||||
const [statusOpen, setStatusOpen] = useState(false);
|
||||
const [priorityOpen, setPriorityOpen] = useState(false);
|
||||
const [workModeOpen, setWorkModeOpen] = useState(false);
|
||||
const [moreOpen, setMoreOpen] = useState(false);
|
||||
const [companyOpen, setCompanyOpen] = useState(false);
|
||||
const descriptionEditorRef = useRef<MarkdownEditorRef>(null);
|
||||
|
|
@ -626,6 +645,7 @@ export function NewIssueDialog() {
|
|||
assigneeChrome,
|
||||
executionWorkspaceMode,
|
||||
selectedExecutionWorkspaceId,
|
||||
workMode,
|
||||
});
|
||||
}, [
|
||||
newIssueOpen,
|
||||
|
|
@ -642,6 +662,7 @@ export function NewIssueDialog() {
|
|||
assigneeChrome,
|
||||
executionWorkspaceMode,
|
||||
selectedExecutionWorkspaceId,
|
||||
workMode,
|
||||
]);
|
||||
|
||||
const handleTitleChange = useCallback((nextTitle: string) => {
|
||||
|
|
@ -678,6 +699,7 @@ export function NewIssueDialog() {
|
|||
assigneeChrome,
|
||||
executionWorkspaceMode,
|
||||
selectedExecutionWorkspaceId,
|
||||
workMode,
|
||||
newIssueOpen,
|
||||
queueDraftSave,
|
||||
]);
|
||||
|
|
@ -696,6 +718,7 @@ export function NewIssueDialog() {
|
|||
|
||||
const draft = loadDraft();
|
||||
if (newIssueDefaults.parentId) {
|
||||
const nextWorkMode = isIssueWorkMode(newIssueDefaults.workMode) ? newIssueDefaults.workMode : "standard";
|
||||
const defaultProjectId = newIssueDefaults.projectId ?? "";
|
||||
const defaultProject = orderedProjects.find((project) => project.id === defaultProjectId);
|
||||
const hasExplicitProjectWorkspaceId = newIssueDefaults.projectWorkspaceId !== undefined;
|
||||
|
|
@ -713,11 +736,13 @@ export function NewIssueDialog() {
|
|||
setAssigneeThinkingEffort("");
|
||||
setAssigneeChrome(false);
|
||||
setExecutionWorkspaceMode(defaultExecutionWorkspaceMode);
|
||||
setWorkMode(nextWorkMode);
|
||||
setSelectedExecutionWorkspaceId(newIssueDefaults.executionWorkspaceId ?? "");
|
||||
executionWorkspaceDefaultProjectId.current = hasExplicitProjectWorkspaceId || defaultProject
|
||||
? defaultProjectId || null
|
||||
: null;
|
||||
} else if (newIssueDefaults.title) {
|
||||
const nextWorkMode = isIssueWorkMode(newIssueDefaults.workMode) ? newIssueDefaults.workMode : "standard";
|
||||
setIssueText(newIssueDefaults.title, newIssueDefaults.description ?? "");
|
||||
setStatus(newIssueDefaults.status ?? "todo");
|
||||
setPriority(newIssueDefaults.priority ?? "");
|
||||
|
|
@ -735,11 +760,13 @@ export function NewIssueDialog() {
|
|||
setAssigneeThinkingEffort("");
|
||||
setAssigneeChrome(false);
|
||||
setExecutionWorkspaceMode(defaultExecutionWorkspaceModeForIssueDefaults(newIssueDefaults, defaultProject));
|
||||
setWorkMode(nextWorkMode);
|
||||
setSelectedExecutionWorkspaceId(newIssueDefaults.executionWorkspaceId ?? "");
|
||||
executionWorkspaceDefaultProjectId.current = hasExplicitProjectWorkspaceId || newIssueDefaults.executionWorkspaceId || defaultProject
|
||||
? defaultProjectId || null
|
||||
: null;
|
||||
} else if (draft && draft.title.trim()) {
|
||||
const nextWorkMode = isIssueWorkMode(draft.workMode) ? draft.workMode : "standard";
|
||||
const restoredProjectId = newIssueDefaults.projectId ?? draft.projectId;
|
||||
const restoredProject = orderedProjects.find((project) => project.id === restoredProjectId);
|
||||
const hasExplicitProjectWorkspaceId = newIssueDefaults.projectWorkspaceId !== undefined;
|
||||
|
|
@ -775,6 +802,7 @@ export function NewIssueDialog() {
|
|||
?? (draft.useIsolatedExecutionWorkspace ? "isolated_workspace" : defaultExecutionWorkspaceModeForProject(restoredProject))
|
||||
),
|
||||
);
|
||||
setWorkMode(nextWorkMode);
|
||||
setSelectedExecutionWorkspaceId(
|
||||
hasExplicitExecutionWorkspaceId
|
||||
? (newIssueDefaults.executionWorkspaceId ?? "")
|
||||
|
|
@ -784,6 +812,7 @@ export function NewIssueDialog() {
|
|||
? restoredProjectId || null
|
||||
: null;
|
||||
} else {
|
||||
setWorkMode("standard");
|
||||
const defaultProjectId = newIssueDefaults.projectId ?? "";
|
||||
const defaultProject = orderedProjects.find((project) => project.id === defaultProjectId);
|
||||
const hasExplicitProjectWorkspaceId = newIssueDefaults.projectWorkspaceId !== undefined;
|
||||
|
|
@ -863,6 +892,7 @@ export function NewIssueDialog() {
|
|||
setAssigneeChrome(false);
|
||||
setExecutionWorkspaceMode("shared_workspace");
|
||||
setSelectedExecutionWorkspaceId("");
|
||||
setWorkMode("standard");
|
||||
setExpanded(false);
|
||||
setDialogCompanyId(null);
|
||||
setStagedFiles([]);
|
||||
|
|
@ -889,6 +919,7 @@ export function NewIssueDialog() {
|
|||
setAssigneeChrome(false);
|
||||
setExecutionWorkspaceMode("shared_workspace");
|
||||
setSelectedExecutionWorkspaceId("");
|
||||
setWorkMode("standard");
|
||||
}
|
||||
|
||||
function discardDraft() {
|
||||
|
|
@ -939,6 +970,7 @@ export function NewIssueDialog() {
|
|||
description: currentDescription || undefined,
|
||||
status,
|
||||
priority: priority || "medium",
|
||||
workMode,
|
||||
...(selectedAssigneeAgentId ? { assigneeAgentId: selectedAssigneeAgentId } : {}),
|
||||
...(selectedAssigneeUserId ? { assigneeUserId: selectedAssigneeUserId } : {}),
|
||||
...(newIssueDefaults.parentId ? { parentId: newIssueDefaults.parentId } : {}),
|
||||
|
|
@ -1146,6 +1178,8 @@ export function NewIssueDialog() {
|
|||
},
|
||||
[assigneeAdapterModels],
|
||||
);
|
||||
const currentWorkMode = ISSUE_WORK_MODE_OPTIONS[workMode === "planning" ? 1 : 0]!;
|
||||
const CurrentWorkModeIcon = currentWorkMode.icon;
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
|
|
@ -1868,6 +1902,48 @@ export function NewIssueDialog() {
|
|||
Upload
|
||||
</button>
|
||||
|
||||
{/* Work mode chip */}
|
||||
<Popover open={workModeOpen} onOpenChange={setWorkModeOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
data-issue-work-mode-chip={workMode}
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs transition-colors",
|
||||
workMode === "planning"
|
||||
? "border-amber-500/60 bg-amber-500/15 text-amber-800 hover:bg-amber-500/25 dark:border-amber-500/50 dark:bg-amber-500/15 dark:text-amber-200 dark:hover:bg-amber-500/25"
|
||||
: "border-border text-muted-foreground hover:bg-accent/50",
|
||||
)}
|
||||
>
|
||||
<CurrentWorkModeIcon className="h-3 w-3" />
|
||||
{currentWorkMode.label}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-36 p-1" align="start">
|
||||
{ISSUE_WORK_MODE_OPTIONS.map((option) => {
|
||||
const Icon = option.icon;
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
data-issue-work-mode={option.value}
|
||||
className={cn(
|
||||
"flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs hover:bg-accent/50",
|
||||
option.value === workMode && "bg-accent",
|
||||
option.value === "planning" && "text-amber-700 dark:text-amber-300",
|
||||
)}
|
||||
onClick={() => {
|
||||
setWorkMode(option.value);
|
||||
setWorkModeOpen(false);
|
||||
}}
|
||||
>
|
||||
<Icon className="h-3 w-3" />
|
||||
{option.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
{/* More (dates) */}
|
||||
<Popover open={moreOpen} onOpenChange={setMoreOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from "react";
|
||||
import type { IssueWorkMode } from "@paperclipai/shared";
|
||||
|
||||
interface NewIssueDefaults {
|
||||
status?: string;
|
||||
workMode?: IssueWorkMode;
|
||||
priority?: string;
|
||||
projectId?: string;
|
||||
projectWorkspaceId?: string;
|
||||
|
|
|
|||
|
|
@ -184,6 +184,7 @@ function makeIssue(id: string, isUnreadForMe: boolean): Issue {
|
|||
title: `Issue ${id}`,
|
||||
description: null,
|
||||
status: "todo",
|
||||
workMode: "standard",
|
||||
priority: "medium",
|
||||
assigneeAgentId: null,
|
||||
assigneeUserId: null,
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@ function makeIssue(overrides: Partial<Issue> = {}): Issue {
|
|||
createdAt: new Date("2026-04-15T00:00:00.000Z"),
|
||||
updatedAt: new Date("2026-04-15T00:00:00.000Z"),
|
||||
...overrides,
|
||||
workMode: overrides.workMode ?? "standard",
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ function makeIssue(id: string, parentId: string | null = null): Issue {
|
|||
title: `Issue ${id}`,
|
||||
description: null,
|
||||
status: "todo",
|
||||
workMode: "standard",
|
||||
priority: "medium",
|
||||
assigneeAgentId: null,
|
||||
assigneeUserId: null,
|
||||
|
|
|
|||
|
|
@ -114,6 +114,7 @@ describe("issueDetailBreadcrumb", () => {
|
|||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
...overrides,
|
||||
workMode: overrides.workMode ?? "standard",
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@ function createIssue(overrides: Partial<Issue> = {}): Issue {
|
|||
lastExternalCommentAt: null,
|
||||
isUnreadForMe: false,
|
||||
...overrides,
|
||||
workMode: overrides.workMode ?? "standard",
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@ function makeIssue(overrides: Partial<Issue> = {}): Issue {
|
|||
createdAt: now,
|
||||
updatedAt: now,
|
||||
...overrides,
|
||||
workMode: overrides.workMode ?? "standard",
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -446,6 +446,7 @@ describe("optimistic issue comments", () => {
|
|||
title: "Fix comment flow",
|
||||
description: null,
|
||||
status: "done",
|
||||
workMode: "standard",
|
||||
priority: "medium",
|
||||
assigneeAgentId: "agent-1",
|
||||
assigneeUserId: null,
|
||||
|
|
@ -515,6 +516,7 @@ describe("optimistic issue comments", () => {
|
|||
title: "Fix property pane",
|
||||
description: null,
|
||||
status: "todo",
|
||||
workMode: "standard",
|
||||
priority: "medium",
|
||||
assigneeAgentId: "agent-1",
|
||||
assigneeUserId: null,
|
||||
|
|
@ -687,6 +689,7 @@ describe("optimistic issue comments", () => {
|
|||
title: "Fix property pane",
|
||||
description: null,
|
||||
status: "todo",
|
||||
workMode: "standard",
|
||||
priority: "medium",
|
||||
assigneeAgentId: "agent-1",
|
||||
assigneeUserId: null,
|
||||
|
|
@ -728,6 +731,7 @@ describe("optimistic issue comments", () => {
|
|||
title: "Leave me alone",
|
||||
description: null,
|
||||
status: "todo",
|
||||
workMode: "standard",
|
||||
priority: "medium",
|
||||
assigneeAgentId: "agent-2",
|
||||
assigneeUserId: null,
|
||||
|
|
|
|||
|
|
@ -69,6 +69,7 @@ function makeIssue(overrides: Partial<Issue> = {}): Issue {
|
|||
createdAt: new Date("2026-04-07T00:00:00.000Z"),
|
||||
updatedAt: new Date("2026-04-07T00:00:00.000Z"),
|
||||
...overrides,
|
||||
workMode: overrides.workMode ?? "standard",
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -66,6 +66,7 @@ function createIssue(overrides: Partial<Issue> = {}): Issue {
|
|||
lastActivityAt: new Date("2026-03-11T00:00:00.000Z"),
|
||||
isUnreadForMe: false,
|
||||
...overrides,
|
||||
workMode: overrides.workMode ?? "standard",
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -192,6 +192,8 @@ vi.mock("../components/InlineEditor", () => ({
|
|||
|
||||
vi.mock("../components/IssueChatThread", () => ({
|
||||
IssueChatThread: (props: {
|
||||
onWorkModeChange?: (workMode: string) => void;
|
||||
issueWorkMode?: string;
|
||||
onStopRun?: (runId: string) => Promise<void>;
|
||||
stopRunLabel?: string;
|
||||
stoppingRunLabel?: string;
|
||||
|
|
@ -1099,6 +1101,7 @@ describe("IssueDetail", () => {
|
|||
expect(mockIssueChatThreadRender.mock.calls.at(-1)?.[0]).toMatchObject({
|
||||
stopRunLabel: "Pause work",
|
||||
stoppingRunLabel: "Pausing...",
|
||||
issueWorkMode: "standard",
|
||||
});
|
||||
|
||||
const chatPauseButton = Array.from(container.querySelectorAll("button"))
|
||||
|
|
@ -1129,6 +1132,67 @@ describe("IssueDetail", () => {
|
|||
expect(pauseMenuButton).toBeTruthy();
|
||||
});
|
||||
|
||||
it("passes planning work mode to the issue chat thread", async () => {
|
||||
mockIssuesApi.get.mockResolvedValue(createIssue({ workMode: "planning" }));
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<IssueDetail />
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flushReact();
|
||||
|
||||
expect(mockIssueChatThreadRender.mock.calls.at(-1)?.[0]).toMatchObject({
|
||||
issueWorkMode: "planning",
|
||||
});
|
||||
expect(container.textContent).toContain("Planning");
|
||||
});
|
||||
|
||||
it("forwards composer work mode changes to the issues API", async () => {
|
||||
const issue = createIssue();
|
||||
mockIssuesApi.get.mockResolvedValue(issue);
|
||||
mockIssuesApi.listAttachments.mockResolvedValue([
|
||||
{
|
||||
id: "attachment-1",
|
||||
issueId: issue.id,
|
||||
issueCommentId: null,
|
||||
originalFilename: "planning-notes.txt",
|
||||
contentPath: "/attachments/planning-notes.txt",
|
||||
contentType: "text/plain",
|
||||
byteSize: 4096,
|
||||
uploadedByUserId: null,
|
||||
uploadedAt: new Date("2026-04-21T00:02:00.000Z"),
|
||||
},
|
||||
]);
|
||||
localStorage.setItem("paperclip:issue-comment-draft:issue-1", "Draft follow-up message");
|
||||
mockIssuesApi.update.mockResolvedValue(createIssue({ workMode: "planning" }));
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<IssueDetail />
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flushReact();
|
||||
await flushReact();
|
||||
|
||||
const lastChatThreadProps = mockIssueChatThreadRender.mock.calls.at(-1)?.[0];
|
||||
expect(lastChatThreadProps?.issueWorkMode).toBe("standard");
|
||||
expect(typeof lastChatThreadProps?.onWorkModeChange).toBe("function");
|
||||
|
||||
await act(async () => {
|
||||
lastChatThreadProps?.onWorkModeChange?.("planning");
|
||||
});
|
||||
await flushReact();
|
||||
|
||||
expect(mockIssuesApi.update).toHaveBeenCalledWith(issue.identifier, { workMode: "planning" });
|
||||
expect(localStorage.getItem("paperclip:issue-comment-draft:issue-1")).toBe("Draft follow-up message");
|
||||
expect(container.textContent).toContain("planning-notes.txt");
|
||||
localStorage.removeItem("paperclip:issue-comment-draft:issue-1");
|
||||
});
|
||||
|
||||
it("renders Paused by board distinctly and defaults leaf resume to wake the assignee", async () => {
|
||||
const activeHold = createPauseHold();
|
||||
const releasedHold = createPauseHold({
|
||||
|
|
|
|||
|
|
@ -145,6 +145,7 @@ import {
|
|||
type Issue,
|
||||
type IssueAttachment,
|
||||
type IssueComment,
|
||||
type IssueWorkMode,
|
||||
type IssueThreadInteraction,
|
||||
type RequestConfirmationInteraction,
|
||||
type SuggestTasksInteraction,
|
||||
|
|
@ -186,7 +187,6 @@ const LEAF_WORK_CONTROL_MODE_HELP_TEXT: Partial<Record<IssueTreeControlMode, str
|
|||
pause: "Pause active execution on this issue until an explicit resume.",
|
||||
resume: "Release the active pause hold so this issue can continue.",
|
||||
};
|
||||
|
||||
function issueTreeControlLabel(mode: IssueTreeControlMode, scope: "leaf" | "subtree") {
|
||||
return scope === "leaf"
|
||||
? LEAF_WORK_CONTROL_MODE_LABEL[mode] ?? TREE_CONTROL_MODE_LABEL[mode]
|
||||
|
|
@ -581,6 +581,7 @@ type IssueDetailChatTabProps = {
|
|||
companyId: string;
|
||||
projectId: string | null;
|
||||
issueStatus: Issue["status"];
|
||||
issueWorkMode: IssueWorkMode;
|
||||
executionRunId: string | null;
|
||||
blockedBy: Issue["blockedBy"];
|
||||
blockerAttention: Issue["blockerAttention"] | null;
|
||||
|
|
@ -592,6 +593,7 @@ type IssueDetailChatTabProps = {
|
|||
commentsLoadingOlder: boolean;
|
||||
onLoadOlderComments: () => void;
|
||||
onRefreshLatestComments: () => Promise<unknown> | void;
|
||||
onWorkModeChange?: (workMode: IssueWorkMode) => Promise<void> | void;
|
||||
composerRef: Ref<IssueChatComposerHandle>;
|
||||
feedbackVotes?: FeedbackVote[];
|
||||
feedbackDataSharingPreference: "allowed" | "not_allowed" | "prompt";
|
||||
|
|
@ -638,6 +640,7 @@ const IssueDetailChatTab = memo(function IssueDetailChatTab({
|
|||
issueId,
|
||||
companyId,
|
||||
projectId,
|
||||
issueWorkMode,
|
||||
issueStatus,
|
||||
executionRunId,
|
||||
blockedBy,
|
||||
|
|
@ -650,6 +653,7 @@ const IssueDetailChatTab = memo(function IssueDetailChatTab({
|
|||
commentsLoadingOlder,
|
||||
onLoadOlderComments,
|
||||
onRefreshLatestComments,
|
||||
onWorkModeChange,
|
||||
composerRef,
|
||||
feedbackVotes,
|
||||
feedbackDataSharingPreference,
|
||||
|
|
@ -878,6 +882,8 @@ const IssueDetailChatTab = memo(function IssueDetailChatTab({
|
|||
onSubmitInteractionAnswers(interaction, answers)
|
||||
}
|
||||
onCancelInteraction={onCancelInteraction}
|
||||
issueWorkMode={issueWorkMode}
|
||||
onWorkModeChange={onWorkModeChange}
|
||||
onCancelRun={runningIssueRun && onPauseWorkRun
|
||||
? async () => {
|
||||
await onPauseWorkRun(runningIssueRun.id);
|
||||
|
|
@ -3190,6 +3196,15 @@ export function IssueDetail() {
|
|||
</span>
|
||||
) : null}
|
||||
|
||||
{issue.workMode === "planning" ? (
|
||||
<span
|
||||
className="inline-flex items-center rounded-full border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-[10px] font-medium text-amber-700 dark:text-amber-300 shrink-0"
|
||||
title="This issue is in planning mode."
|
||||
>
|
||||
Planning
|
||||
</span>
|
||||
) : null}
|
||||
|
||||
{issue.projectId ? (
|
||||
<Link
|
||||
to={`/projects/${issue.projectId}`}
|
||||
|
|
@ -3706,6 +3721,7 @@ export function IssueDetail() {
|
|||
companyId={issue.companyId}
|
||||
projectId={issue.projectId ?? null}
|
||||
issueStatus={issue.status}
|
||||
issueWorkMode={issue.workMode ?? "standard"}
|
||||
executionRunId={issue.executionRunId ?? null}
|
||||
blockedBy={issue.blockedBy ?? []}
|
||||
blockerAttention={issue.blockerAttention ?? null}
|
||||
|
|
@ -3741,6 +3757,11 @@ export function IssueDetail() {
|
|||
onPauseWorkRun={canManageTreeControl
|
||||
? (runId) => pauseIssueWorkRun.mutateAsync({ runId, scope: treeControlScope }).then(() => undefined)
|
||||
: undefined}
|
||||
onWorkModeChange={(nextMode) => {
|
||||
const currentMode: IssueWorkMode = issue.workMode ?? "standard";
|
||||
if (currentMode === nextMode) return;
|
||||
return updateIssue.mutateAsync({ workMode: nextMode }).then(() => undefined);
|
||||
}}
|
||||
onCancelQueued={handleCancelQueuedComment}
|
||||
interruptingQueuedRunId={interruptQueuedComment.isPending ? interruptQueuedComment.variables ?? null : null}
|
||||
pausingWorkRunId={pauseIssueWorkRun.isPending ? pauseIssueWorkRun.variables?.runId ?? null : null}
|
||||
|
|
|
|||
|
|
@ -308,6 +308,7 @@ function createIssue(overrides: Partial<Issue> = {}): Issue {
|
|||
lastActivityAt: new Date("2026-04-01T00:00:00.000Z"),
|
||||
isUnreadForMe: false,
|
||||
...overrides,
|
||||
workMode: overrides.workMode ?? "standard",
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -742,6 +742,7 @@ export function createIssue(overrides: Partial<Issue> = {}): Issue {
|
|||
createdAt: recent(90),
|
||||
updatedAt: recent(3),
|
||||
...overrides,
|
||||
workMode: overrides.workMode ?? "standard",
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -675,6 +675,26 @@ function IssueChatMatrix() {
|
|||
composerDisabledReason="This issue is in review. Request changes or approve it from the review controls."
|
||||
/>
|
||||
</ScenarioCard>
|
||||
<ScenarioCard
|
||||
title="Planning mode composer"
|
||||
description="Issue is in planning mode. The composer turns amber and surfaces a Planning chip next to the paperclip — clicking it stages a Standard submission without immediately changing the issue mode."
|
||||
>
|
||||
<IssueChatThread
|
||||
comments={[]}
|
||||
timelineEvents={[]}
|
||||
linkedRuns={[]}
|
||||
liveRuns={[]}
|
||||
companyId={companyId}
|
||||
projectId={projectId}
|
||||
agentMap={storybookAgentMap}
|
||||
currentUserId={currentUserId}
|
||||
issueWorkMode="planning"
|
||||
onWorkModeChange={() => undefined}
|
||||
onAdd={async () => {}}
|
||||
enableLiveTranscriptPolling={false}
|
||||
emptyMessage="Planning mode reply box example."
|
||||
/>
|
||||
</ScenarioCard>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue