feat(KB-617): add Changes tab to task detail modal with file diffs

- Add modifiedFiles and baseCommitSha fields to task schema for tracking changes
- Capture list of modified files during task execution in the executor
- Add GET /tasks/:id/diff API endpoint to retrieve file list and patches
- Create TaskChangesTab component with expandable file diffs
- Integrate Changes tab into TaskDetailModal for in-progress, in-review, and done tasks
- Add CSS styles for diff viewer with syntax highlighting
- Update API client with fetchTaskDiff function and Project Management types
This commit is contained in:
gsxdsm
2026-04-01 06:56:32 -07:00
parent d4aa56239c
commit e08eb60cf0
11 changed files with 561 additions and 55 deletions

View File

@@ -1722,3 +1722,160 @@ export async function summarizeTitle(
return data.title;
}
// ── Project Management API (Multi-Project Support) ───────────────────────
/** Project information returned by project endpoints */
export interface ProjectInfo {
id: string;
name: string;
path: string;
status: "active" | "paused" | "errored" | "initializing";
isolationMode: "in-process" | "child-process";
createdAt: string;
updatedAt: string;
lastActivityAt?: string;
}
/** Project health metrics */
export interface ProjectHealth {
projectId: string;
status: "active" | "paused" | "errored" | "initializing";
activeTaskCount: number;
inFlightAgentCount: number;
lastActivityAt?: string;
lastErrorAt?: string;
lastErrorMessage?: string;
totalTasksCompleted: number;
totalTasksFailed: number;
averageTaskDurationMs?: number;
updatedAt: string;
}
/** Unified activity feed entry */
export interface ActivityFeedEntry {
id: string;
timestamp: string;
type: "task:created" | "task:moved" | "task:updated" | "task:deleted" | "task:merged" | "task:failed" | "settings:updated";
projectId: string;
projectName: string;
taskId?: string;
taskTitle?: string;
details: string;
metadata?: Record<string, unknown>;
}
/** Input for creating a new project */
export interface ProjectCreateInput {
name: string;
path: string;
isolationMode?: "in-process" | "child-process";
}
/** Options for fetching activity feed */
export interface FeedOptions {
limit?: number;
since?: string;
projectId?: string;
type?: ActivityFeedEntry["type"];
}
/** Global concurrency state across all projects */
export interface GlobalConcurrencyState {
globalMaxConcurrent: number;
currentlyActive: number;
queuedCount: number;
projectsActive: Record<string, number>;
}
/** First run status response */
export interface FirstRunStatus {
hasProjects: boolean;
singleProjectPath: string | null;
}
/** Fetch all registered projects */
export function fetchProjects(): Promise<ProjectInfo[]> {
return api<ProjectInfo[]>("/projects");
}
/** Register a new project */
export function registerProject(input: ProjectCreateInput): Promise<ProjectInfo> {
return api<ProjectInfo>("/projects", {
method: "POST",
body: JSON.stringify(input),
});
}
/** Unregister a project */
export function unregisterProject(id: string): Promise<void> {
return api<void>(`/projects/${encodeURIComponent(id)}`, {
method: "DELETE",
});
}
/** Fetch health metrics for a specific project */
export function fetchProjectHealth(id: string): Promise<ProjectHealth> {
return api<ProjectHealth>(`/projects/${encodeURIComponent(id)}/health`);
}
/** Fetch unified activity feed */
export function fetchActivityFeed(options?: FeedOptions): Promise<ActivityFeedEntry[]> {
const params = new URLSearchParams();
if (options?.limit !== undefined) params.set("limit", String(options.limit));
if (options?.since) params.set("since", options.since);
if (options?.projectId) params.set("projectId", options.projectId);
if (options?.type) params.set("type", options.type);
const query = params.size > 0 ? `?${params.toString()}` : "";
return api<ActivityFeedEntry[]>(`/activity-feed${query}`);
}
/** Pause a project */
export function pauseProject(id: string): Promise<ProjectInfo> {
return api<ProjectInfo>(`/projects/${encodeURIComponent(id)}/pause`, {
method: "POST",
});
}
/** Resume a paused project */
export function resumeProject(id: string): Promise<ProjectInfo> {
return api<ProjectInfo>(`/projects/${encodeURIComponent(id)}/resume`, {
method: "POST",
});
}
/** Fetch first run status to detect if user needs setup wizard */
export function fetchFirstRunStatus(): Promise<FirstRunStatus> {
return api<FirstRunStatus>("/first-run-status");
}
/** Fetch global concurrency state */
export function fetchGlobalConcurrency(): Promise<GlobalConcurrencyState> {
return api<GlobalConcurrencyState>("/global-concurrency");
}
/** Fetch tasks for a specific project */
export function fetchProjectTasks(projectId: string, limit?: number, offset?: number): Promise<Task[]> {
const params = new URLSearchParams();
params.set("projectId", projectId);
if (limit !== undefined) params.set("limit", String(limit));
if (offset !== undefined) params.set("offset", String(offset));
return api<Task[]>(`/tasks?${params.toString()}`);
}
/** Fetch project-specific config */
export function fetchProjectConfig(projectId: string): Promise<{ maxConcurrent: number; rootDir: string }> {
return api<{ maxConcurrent: number; rootDir: string }>(`/projects/${encodeURIComponent(projectId)}/config`);
}
/** Diff information for a task */
export interface TaskDiff {
files: string[];
diffs: Record<string, { stat: string; patch: string }>;
}
/** Fetch diff information for a task */
export function fetchTaskDiff(taskId: string): Promise<TaskDiff> {
return api<TaskDiff>(`/tasks/${encodeURIComponent(taskId)}/diff`);
}

View File

@@ -13,6 +13,7 @@ import { ModelSelectorTab } from "./ModelSelectorTab";
import { PrSection } from "./PrSection";
import { TaskComments } from "./TaskComments";
import { MergeDetails } from "./MergeDetails";
import { TaskChangesTab } from "./TaskChangesTab";
interface ModelSelection {
provider?: string;
@@ -105,7 +106,7 @@ export function TaskDetailModal({
addToast,
githubTokenConfigured,
}: TaskDetailModalProps) {
const [activeTab, setActiveTab] = useState<"definition" | "activity" | "agent-log" | "steering" | "comments" | "model">("definition");
const [activeTab, setActiveTab] = useState<"definition" | "activity" | "agent-log" | "changes" | "steering" | "comments" | "model">("definition");
const [attachments, setAttachments] = useState<TaskAttachment[]>(task.attachments || []);
const [uploading, setUploading] = useState(false);
const [dependencies, setDependencies] = useState<string[]>(task.dependencies || []);
@@ -671,6 +672,14 @@ export function TaskDetailModal({
>
Agent Log
</button>
{(task.column === "in-progress" || task.column === "in-review" || task.column === "done") && (
<button
className={`detail-tab${activeTab === "changes" ? " detail-tab-active" : ""}`}
onClick={() => setActiveTab("changes")}
>
Changes
</button>
)}
<button
className={`detail-tab${activeTab === "steering" ? " detail-tab-active" : ""}`}
onClick={() => setActiveTab("steering")}
@@ -703,6 +712,8 @@ export function TaskDetailModal({
validatorModel={getValidatorSelection(task)}
/>
</div>
) : activeTab === "changes" ? (
<TaskChangesTab taskId={task.id} worktree={task.worktree} />
) : activeTab === "steering" ? (
<SteeringTab task={task} addToast={addToast} />
) : activeTab === "comments" ? (

View File

@@ -11054,3 +11054,134 @@ html .column.drag-over * {
[data-theme="light"] .gm-load-more:hover {
background: rgba(0, 0, 0, 0.03);
}
/* ── Task Changes Tab Styles ─────────────────────────────────────────────── */
.task-changes-tab {
padding: 16px;
}
.changes-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.changes-header h4 {
margin: 0;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
}
.changes-file-list {
border: 1px solid var(--border, #30363d);
border-radius: 8px;
overflow: hidden;
}
.changes-file-item {
border-bottom: 1px solid var(--border, #30363d);
}
.changes-file-item:last-child {
border-bottom: none;
}
.changes-file-item.expanded {
background: var(--bg-secondary, #161b22);
}
.changes-file-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: none;
border: none;
width: 100%;
text-align: left;
cursor: pointer;
color: var(--text-primary, #c9d1d9);
font-size: 13px;
transition: background 0.15s;
}
.changes-file-header:hover {
background: var(--bg-hover, #1f242c);
}
.changes-file-toggle {
display: flex;
align-items: center;
color: var(--text-secondary, #8b949e);
flex-shrink: 0;
}
.changes-file-status {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
flex-shrink: 0;
}
.changes-file-path {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
.changes-file-stat {
color: var(--text-secondary, #8b949e);
font-size: 11px;
flex-shrink: 0;
margin-left: 8px;
}
.changes-file-content {
border-top: 1px solid var(--border, #30363d);
background: var(--bg-primary, #0d1117);
}
.changes-diff-patch {
margin: 0;
padding: 12px;
font-size: 12px;
line-height: 1.5;
overflow-x: auto;
white-space: pre;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
color: var(--text-primary, #c9d1d9);
}
.changes-diff-patch code {
background: none;
padding: 0;
}
/* Syntax highlighting for diff */
.changes-diff-patch .diff-add,
.changes-diff-patch [data-prefix="+"] {
color: #3fb950;
}
.changes-diff-patch .diff-del,
.changes-diff-patch [data-prefix="-"] {
color: #f85149;
}
.changes-diff-patch .diff-hunk,
.changes-diff-patch [data-prefix="@@"] {
color: #58a6ff;
}

View File

@@ -25,6 +25,8 @@ import type {
FeatureCreateInput,
MissionStatus,
MilestoneStatus,
SliceStatus,
FeatureStatus,
InterviewState,
} from "@fusion/core";
import {
@@ -41,20 +43,29 @@ function validateUuid(id: string): boolean {
return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(id);
}
function validateMissionId(id: string): boolean {
return /^M-\d+$/.test(id);
function validateMissionId(id: string | string[]): boolean {
const str = Array.isArray(id) ? id[0] : id;
return /^M-\d+$/.test(str);
}
function validateMilestoneId(id: string): boolean {
return /^MS-\d+$/.test(id);
function validateMilestoneId(id: string | string[]): boolean {
const str = Array.isArray(id) ? id[0] : id;
return /^MS-\d+$/.test(str);
}
function validateSliceId(id: string): boolean {
return /^SL-\d+$/.test(id);
function validateSliceId(id: string | string[]): boolean {
const str = Array.isArray(id) ? id[0] : id;
return /^SL-\d+$/.test(str);
}
function validateFeatureId(id: string): boolean {
return /^F-\d+$/.test(id);
function validateFeatureId(id: string | string[]): boolean {
const str = Array.isArray(id) ? id[0] : id;
return /^F-\d+$/.test(str);
}
/** Helper to extract string from Express param (handles string | string[]) */
function paramString(value: string | string[]): string {
return Array.isArray(value) ? value[0] : value;
}
function validateTitle(title: unknown): string {
@@ -174,7 +185,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.get(
"/:missionId",
asyncHandler(async (req, res) => {
const { missionId } = req.params;
const missionId = paramString(req.params.missionId);
if (!validateMissionId(missionId)) {
res.status(400).json({ error: "Invalid mission ID format" });
@@ -198,7 +209,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.patch(
"/:missionId",
asyncHandler(async (req, res) => {
const { missionId } = req.params;
const missionId = paramString(req.params.missionId);
const { title, description, status } = req.body;
if (!validateMissionId(missionId)) {
@@ -243,7 +254,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.delete(
"/:missionId",
asyncHandler(async (req, res) => {
const { missionId } = req.params;
const missionId = paramString(req.params.missionId);
if (!validateMissionId(missionId)) {
res.status(400).json({ error: "Invalid mission ID format" });
@@ -268,7 +279,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.get(
"/:missionId/status",
asyncHandler(async (req, res) => {
const { missionId } = req.params;
const missionId = paramString(req.params.missionId);
if (!validateMissionId(missionId)) {
res.status(400).json({ error: "Invalid mission ID format" });
@@ -295,7 +306,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.get(
"/:missionId/interview-state",
asyncHandler(async (req, res) => {
const { missionId } = req.params;
const missionId = paramString(req.params.missionId);
if (!validateMissionId(missionId)) {
res.status(400).json({ error: "Invalid mission ID format" });
@@ -319,7 +330,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.post(
"/:missionId/interview-state",
asyncHandler(async (req, res) => {
const { missionId } = req.params;
const missionId = paramString(req.params.missionId);
const { state } = req.body;
if (!validateMissionId(missionId)) {
@@ -351,7 +362,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.get(
"/:missionId/milestones",
asyncHandler(async (req, res) => {
const { missionId } = req.params;
const missionId = paramString(req.params.missionId);
if (!validateMissionId(missionId)) {
res.status(400).json({ error: "Invalid mission ID format" });
@@ -378,7 +389,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.post(
"/:missionId/milestones",
asyncHandler(async (req, res) => {
const { missionId } = req.params;
const missionId = paramString(req.params.missionId);
const { title, description, dependencies } = req.body;
if (!validateMissionId(missionId)) {
@@ -414,7 +425,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.post(
"/:missionId/milestones/reorder",
asyncHandler(async (req, res) => {
const { missionId } = req.params;
const missionId = paramString(req.params.missionId);
if (!validateMissionId(missionId)) {
res.status(400).json({ error: "Invalid mission ID format" });
@@ -456,7 +467,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.get(
"/milestones/:milestoneId",
asyncHandler(async (req, res) => {
const { milestoneId } = req.params;
const milestoneId = paramString(req.params.milestoneId);
if (!validateMilestoneId(milestoneId)) {
res.status(400).json({ error: "Invalid milestone ID format" });
@@ -480,7 +491,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.patch(
"/milestones/:milestoneId",
asyncHandler(async (req, res) => {
const { milestoneId } = req.params;
const milestoneId = paramString(req.params.milestoneId);
const { title, description, status, dependencies } = req.body;
if (!validateMilestoneId(milestoneId)) {
@@ -528,7 +539,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.delete(
"/milestones/:milestoneId",
asyncHandler(async (req, res) => {
const { milestoneId } = req.params;
const milestoneId = paramString(req.params.milestoneId);
if (!validateMilestoneId(milestoneId)) {
res.status(400).json({ error: "Invalid milestone ID format" });
@@ -555,7 +566,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.get(
"/milestones/:milestoneId/interview-state",
asyncHandler(async (req, res) => {
const { milestoneId } = req.params;
const milestoneId = paramString(req.params.milestoneId);
if (!validateMilestoneId(milestoneId)) {
res.status(400).json({ error: "Invalid milestone ID format" });
@@ -579,7 +590,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.post(
"/milestones/:milestoneId/interview-state",
asyncHandler(async (req, res) => {
const { milestoneId } = req.params;
const milestoneId = paramString(req.params.milestoneId);
const { state } = req.body;
if (!validateMilestoneId(milestoneId)) {
@@ -611,7 +622,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.get(
"/milestones/:milestoneId/slices",
asyncHandler(async (req, res) => {
const { milestoneId } = req.params;
const milestoneId = paramString(req.params.milestoneId);
if (!validateMilestoneId(milestoneId)) {
res.status(400).json({ error: "Invalid milestone ID format" });
@@ -638,7 +649,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.post(
"/milestones/:milestoneId/slices",
asyncHandler(async (req, res) => {
const { milestoneId } = req.params;
const milestoneId = paramString(req.params.milestoneId);
const { title, description } = req.body;
if (!validateMilestoneId(milestoneId)) {
@@ -672,7 +683,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.post(
"/milestones/:milestoneId/slices/reorder",
asyncHandler(async (req, res) => {
const { milestoneId } = req.params;
const milestoneId = paramString(req.params.milestoneId);
if (!validateMilestoneId(milestoneId)) {
res.status(400).json({ error: "Invalid milestone ID format" });
@@ -714,7 +725,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.get(
"/slices/:sliceId",
asyncHandler(async (req, res) => {
const { sliceId } = req.params;
const sliceId = paramString(req.params.sliceId);
if (!validateSliceId(sliceId)) {
res.status(400).json({ error: "Invalid slice ID format" });
@@ -738,7 +749,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.patch(
"/slices/:sliceId",
asyncHandler(async (req, res) => {
const { sliceId } = req.params;
const sliceId = paramString(req.params.sliceId);
const { title, description, status } = req.body;
if (!validateSliceId(sliceId)) {
@@ -783,7 +794,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.delete(
"/slices/:sliceId",
asyncHandler(async (req, res) => {
const { sliceId } = req.params;
const sliceId = paramString(req.params.sliceId);
if (!validateSliceId(sliceId)) {
res.status(400).json({ error: "Invalid slice ID format" });
@@ -808,7 +819,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.post(
"/slices/:sliceId/activate",
asyncHandler(async (req, res) => {
const { sliceId } = req.params;
const sliceId = paramString(req.params.sliceId);
if (!validateSliceId(sliceId)) {
res.status(400).json({ error: "Invalid slice ID format" });
@@ -837,7 +848,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.get(
"/slices/:sliceId/features",
asyncHandler(async (req, res) => {
const { sliceId } = req.params;
const sliceId = paramString(req.params.sliceId);
if (!validateSliceId(sliceId)) {
res.status(400).json({ error: "Invalid slice ID format" });
@@ -862,7 +873,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.post(
"/slices/:sliceId/features",
asyncHandler(async (req, res) => {
const { sliceId } = req.params;
const sliceId = paramString(req.params.sliceId);
const { title, description, acceptanceCriteria } = req.body;
if (!validateSliceId(sliceId)) {
@@ -898,7 +909,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.get(
"/features/:featureId",
asyncHandler(async (req, res) => {
const { featureId } = req.params;
const featureId = paramString(req.params.featureId);
if (!validateFeatureId(featureId)) {
res.status(400).json({ error: "Invalid feature ID format" });
@@ -922,7 +933,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.patch(
"/features/:featureId",
asyncHandler(async (req, res) => {
const { featureId } = req.params;
const featureId = paramString(req.params.featureId);
const { title, description, acceptanceCriteria, status } = req.body;
if (!validateFeatureId(featureId)) {
@@ -970,7 +981,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.delete(
"/features/:featureId",
asyncHandler(async (req, res) => {
const { featureId } = req.params;
const featureId = paramString(req.params.featureId);
if (!validateFeatureId(featureId)) {
res.status(400).json({ error: "Invalid feature ID format" });
@@ -995,7 +1006,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.post(
"/features/:featureId/link-task",
asyncHandler(async (req, res) => {
const { featureId } = req.params;
const featureId = paramString(req.params.featureId);
const { taskId } = req.body;
if (!validateFeatureId(featureId)) {
@@ -1034,7 +1045,7 @@ export function createMissionRouter(store: TaskStore): Router {
router.post(
"/features/:featureId/unlink-task",
asyncHandler(async (req, res) => {
const { featureId } = req.params;
const featureId = paramString(req.params.featureId);
if (!validateFeatureId(featureId)) {
res.status(400).json({ error: "Invalid feature ID format" });

View File

@@ -1841,6 +1841,82 @@ export function createApiRoutes(store: TaskStore, options?: ServerOptions): Rout
}
});
/**
* GET /api/tasks/:id/diff
* Get detailed diff information for files modified during task execution.
* Returns: { files: string[]; diffs: Record<string, { stat: string; patch: string }> }
*/
router.get("/tasks/:id/diff", async (req, res) => {
try {
const task = await store.getTask(req.params.id);
// Only tasks with worktrees can have diffs
if (!task.worktree || !existsSync(task.worktree)) {
res.json({ files: [], diffs: {} });
return;
}
// Use stored modifiedFiles if available, otherwise compute on-the-fly
let files = task.modifiedFiles;
if (!files || files.length === 0) {
// Fallback: compute files using git diff
try {
const baseRef = task.baseCommitSha ?? "HEAD~1";
const output = execSync(`git diff --name-only ${baseRef}..HEAD`, {
cwd: task.worktree,
encoding: "utf-8",
timeout: 5000,
}).trim();
files = output ? output.split("\n").filter(Boolean) : [];
} catch {
files = [];
}
}
if (files.length === 0) {
res.json({ files: [], diffs: {} });
return;
}
// Compute diffs for each file
const diffs: Record<string, { stat: string; patch: string }> = {};
const baseRef = task.baseCommitSha ?? "HEAD~1";
for (const file of files) {
try {
// Get stat for this file
const stat = execSync(`git diff --stat ${baseRef}..HEAD -- "${file}"`, {
cwd: task.worktree,
encoding: "utf-8",
timeout: 5000,
}).trim();
// Get patch for this file
const patch = execSync(`git diff ${baseRef}..HEAD -- "${file}"`, {
cwd: task.worktree,
encoding: "utf-8",
timeout: 10000,
});
diffs[file] = { stat, patch };
} catch (err: any) {
// Log error but continue with other files
console.warn(`Failed to get diff for ${file}:`, err.message);
diffs[file] = { stat: "", patch: "" };
}
}
res.json({ files, diffs });
} catch (err: any) {
if (err.code === "ENOENT") {
res.status(404).json({ error: `Task ${req.params.id} not found` });
} else {
res.status(500).json({ error: err.message || "Internal server error" });
}
}
});
/**
* GET /api/tasks/:id/workflow-results
* Get workflow step execution results for a task.