f1c1f9e11a
- Update TaskCard and TaskDetailModal to display description as fallback instead of repeating the task ID - Remove unused hooks (useFlashOnIncrease), routes, assets, and dead CSS - Clean up engine modules (executor, scheduler, triage, worktree-names) removing unused code - Update and add tests for title fallback behavior in TaskDetailModal - Fix pre-existing type error in test helper (types.ts)
313 lines
11 KiB
TypeScript
313 lines
11 KiB
TypeScript
import { useCallback, useEffect, useRef, useState } from "react";
|
||
import ReactMarkdown from "react-markdown";
|
||
import remarkGfm from "remark-gfm";
|
||
import type { Task, TaskDetail, TaskAttachment, Column, MergeResult } from "@hai/core";
|
||
import { COLUMN_LABELS, VALID_TRANSITIONS } from "@hai/core";
|
||
import { uploadAttachment, deleteAttachment } from "../api";
|
||
import type { ToastType } from "../hooks/useToast";
|
||
|
||
function formatTimestamp(iso: string): string {
|
||
const date = new Date(iso);
|
||
const now = new Date();
|
||
const diffMs = now.getTime() - date.getTime();
|
||
const diffMin = Math.floor(diffMs / 60000);
|
||
const diffHr = Math.floor(diffMin / 60);
|
||
const diffDay = Math.floor(diffHr / 24);
|
||
|
||
if (diffMin < 1) return "just now";
|
||
if (diffMin < 60) return `${diffMin}m ago`;
|
||
if (diffHr < 24) return `${diffHr}h ago`;
|
||
if (diffDay < 7) return `${diffDay}d ago`;
|
||
return date.toLocaleDateString();
|
||
}
|
||
|
||
function formatBytes(bytes: number): string {
|
||
if (bytes < 1024) return `${bytes} B`;
|
||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||
}
|
||
|
||
interface TaskDetailModalProps {
|
||
task: TaskDetail;
|
||
onClose: () => void;
|
||
onMoveTask: (id: string, column: Column) => Promise<Task>;
|
||
onDeleteTask: (id: string) => Promise<Task>;
|
||
onMergeTask: (id: string) => Promise<MergeResult>;
|
||
onRetryTask?: (id: string) => Promise<Task>;
|
||
addToast: (message: string, type?: ToastType) => void;
|
||
}
|
||
|
||
export function TaskDetailModal({
|
||
task,
|
||
onClose,
|
||
onMoveTask,
|
||
onDeleteTask,
|
||
onMergeTask,
|
||
onRetryTask,
|
||
addToast,
|
||
}: TaskDetailModalProps) {
|
||
const [attachments, setAttachments] = useState<TaskAttachment[]>(task.attachments || []);
|
||
const [uploading, setUploading] = useState(false);
|
||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||
useEffect(() => {
|
||
const handleKey = (e: KeyboardEvent) => {
|
||
if (e.key === "Escape") onClose();
|
||
};
|
||
document.addEventListener("keydown", handleKey);
|
||
return () => document.removeEventListener("keydown", handleKey);
|
||
}, [onClose]);
|
||
|
||
const handleOverlayClick = useCallback(
|
||
(e: React.MouseEvent) => {
|
||
if (e.target === e.currentTarget) onClose();
|
||
},
|
||
[onClose],
|
||
);
|
||
|
||
const handleMove = useCallback(
|
||
async (column: Column) => {
|
||
try {
|
||
await onMoveTask(task.id, column);
|
||
onClose();
|
||
addToast(`Moved to ${COLUMN_LABELS[column]}`, "success");
|
||
} catch (err: any) {
|
||
addToast(err.message, "error");
|
||
}
|
||
},
|
||
[task.id, onMoveTask, onClose, addToast],
|
||
);
|
||
|
||
const handleDelete = useCallback(async () => {
|
||
if (!confirm(`Delete ${task.id}?`)) return;
|
||
try {
|
||
await onDeleteTask(task.id);
|
||
onClose();
|
||
addToast(`Deleted ${task.id}`, "info");
|
||
} catch (err: any) {
|
||
addToast(err.message, "error");
|
||
}
|
||
}, [task.id, onDeleteTask, onClose, addToast]);
|
||
|
||
const handleMerge = useCallback(() => {
|
||
if (!confirm(`Merge ${task.id} into the current branch?`)) return;
|
||
onClose();
|
||
addToast(`Merging ${task.id}...`, "info");
|
||
onMergeTask(task.id)
|
||
.then((result) => {
|
||
const msg = result.merged
|
||
? `Merged ${task.id} (branch: ${result.branch})`
|
||
: `Closed ${task.id} (${result.error || "no branch to merge"})`;
|
||
addToast(msg, "success");
|
||
})
|
||
.catch((err: any) => {
|
||
addToast(err.message, "error");
|
||
});
|
||
}, [task.id, onMergeTask, onClose, addToast]);
|
||
|
||
const handleRetry = useCallback(async () => {
|
||
if (!onRetryTask) return;
|
||
try {
|
||
await onRetryTask(task.id);
|
||
onClose();
|
||
addToast(`Retrying ${task.id}...`, "info");
|
||
} catch (err: any) {
|
||
addToast(err.message, "error");
|
||
}
|
||
}, [task.id, onRetryTask, onClose, addToast]);
|
||
|
||
const handleUpload = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const file = e.target.files?.[0];
|
||
if (!file) return;
|
||
setUploading(true);
|
||
try {
|
||
const attachment = await uploadAttachment(task.id, file);
|
||
setAttachments((prev) => [...prev, attachment]);
|
||
addToast("Screenshot attached", "success");
|
||
} catch (err: any) {
|
||
addToast(err.message, "error");
|
||
} finally {
|
||
setUploading(false);
|
||
if (fileInputRef.current) fileInputRef.current.value = "";
|
||
}
|
||
}, [task.id, addToast]);
|
||
|
||
const handleDeleteAttachment = useCallback(async (filename: string) => {
|
||
try {
|
||
await deleteAttachment(task.id, filename);
|
||
setAttachments((prev) => prev.filter((a) => a.filename !== filename));
|
||
addToast("Attachment deleted", "info");
|
||
} catch (err: any) {
|
||
addToast(err.message, "error");
|
||
}
|
||
}, [task.id, addToast]);
|
||
|
||
const transitions = VALID_TRANSITIONS[task.column] || [];
|
||
|
||
return (
|
||
<div className="modal-overlay open" onClick={handleOverlayClick}>
|
||
<div className="modal modal-lg">
|
||
<div className="modal-header">
|
||
<div className="detail-title-row">
|
||
<span className="detail-id">{task.id}</span>
|
||
<span className={`detail-column-badge badge-${task.column}`}>
|
||
{COLUMN_LABELS[task.column]}
|
||
</span>
|
||
</div>
|
||
<button className="modal-close" onClick={onClose}>
|
||
×
|
||
</button>
|
||
</div>
|
||
<div className="detail-body">
|
||
<h2 className="detail-title">{task.title || task.description}</h2>
|
||
<div className="detail-meta">
|
||
Created {new Date(task.createdAt).toLocaleDateString()} · Updated{" "}
|
||
{new Date(task.updatedAt).toLocaleDateString()}
|
||
</div>
|
||
<div className="detail-section">
|
||
{task.prompt ? (
|
||
<div className="markdown-body">
|
||
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
||
{task.prompt.replace(/^#\s+[^\n]*\n+/, "")}
|
||
</ReactMarkdown>
|
||
</div>
|
||
) : (
|
||
<div className="detail-prompt">(no prompt)</div>
|
||
)}
|
||
</div>
|
||
<div className="detail-section">
|
||
<h4>Attachments</h4>
|
||
{attachments.length > 0 ? (
|
||
<div style={{ display: "flex", flexWrap: "wrap", gap: "12px", marginBottom: "8px" }}>
|
||
{attachments.map((a) => (
|
||
<div
|
||
key={a.filename}
|
||
style={{
|
||
position: "relative",
|
||
border: "1px solid var(--border, #333)",
|
||
borderRadius: "6px",
|
||
padding: "4px",
|
||
background: "var(--bg-secondary, #1a1a2e)",
|
||
}}
|
||
>
|
||
<a
|
||
href={`/api/tasks/${task.id}/attachments/${a.filename}`}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
<img
|
||
src={`/api/tasks/${task.id}/attachments/${a.filename}`}
|
||
alt={a.originalName}
|
||
style={{ maxWidth: "150px", maxHeight: "100px", display: "block", borderRadius: "4px" }}
|
||
/>
|
||
</a>
|
||
<div style={{ fontSize: "11px", marginTop: "4px", opacity: 0.7 }}>
|
||
{a.originalName} ({formatBytes(a.size)})
|
||
</div>
|
||
<button
|
||
onClick={() => handleDeleteAttachment(a.filename)}
|
||
style={{
|
||
position: "absolute",
|
||
top: "2px",
|
||
right: "2px",
|
||
background: "rgba(0,0,0,0.6)",
|
||
color: "#fff",
|
||
border: "none",
|
||
borderRadius: "50%",
|
||
width: "20px",
|
||
height: "20px",
|
||
cursor: "pointer",
|
||
fontSize: "12px",
|
||
lineHeight: "20px",
|
||
textAlign: "center",
|
||
padding: 0,
|
||
}}
|
||
title="Delete attachment"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div style={{ opacity: 0.5, marginBottom: "8px" }}>(no attachments)</div>
|
||
)}
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
onChange={handleUpload}
|
||
style={{ display: "none" }}
|
||
/>
|
||
<button
|
||
className="btn btn-sm"
|
||
onClick={() => fileInputRef.current?.click()}
|
||
disabled={uploading}
|
||
>
|
||
{uploading ? "Uploading…" : "Attach Screenshot"}
|
||
</button>
|
||
</div>
|
||
{task.dependencies && task.dependencies.length > 0 && (
|
||
<div className="detail-deps">
|
||
<h4>Dependencies</h4>
|
||
<ul className="detail-dep-list">
|
||
{task.dependencies.map((dep) => (
|
||
<li key={dep}>{dep}</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
)}
|
||
<div className="detail-section detail-activity">
|
||
<h4>Activity</h4>
|
||
{task.log && task.log.length > 0 ? (
|
||
<div className="detail-activity-list">
|
||
{[...task.log].reverse().map((entry, i) => (
|
||
<div key={i} className="detail-log-entry">
|
||
<div className="detail-log-header">
|
||
<span className="detail-log-timestamp">
|
||
{formatTimestamp(entry.timestamp)}
|
||
</span>
|
||
<span className="detail-log-action">{entry.action}</span>
|
||
</div>
|
||
{entry.outcome && (
|
||
<div className="detail-log-outcome">{entry.outcome}</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="detail-log-empty">(no activity)</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div className="modal-actions">
|
||
<button className="btn btn-danger btn-sm" onClick={handleDelete}>
|
||
Delete
|
||
</button>
|
||
{task.status === "failed" && onRetryTask && (
|
||
<button className="btn btn-warning btn-sm" onClick={handleRetry}>
|
||
Retry
|
||
</button>
|
||
)}
|
||
<div style={{ flex: 1 }} />
|
||
{task.column === "in-review" ? (
|
||
<>
|
||
<button className="btn btn-sm" onClick={() => handleMove("in-progress")}>
|
||
Back to In Progress
|
||
</button>
|
||
<button className="btn btn-primary btn-sm" onClick={handleMerge}>
|
||
Merge & Close
|
||
</button>
|
||
</>
|
||
) : (
|
||
transitions.map((col) => (
|
||
<button key={col} className="btn btn-sm" onClick={() => handleMove(col)}>
|
||
Move to {COLUMN_LABELS[col]}
|
||
</button>
|
||
))
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|