import { useState, useEffect, useCallback } from "react";
import type {
ContractWithRelations,
ContractPhase,
ContractStatus,
ContractRepository,
FileSummary,
TaskSummary,
TemplateSummary,
} from "../../lib/api";
import {
listTemplates,
getTemplate,
createFile,
} from "../../lib/api";
import { PhaseProgressBar } from "./PhaseProgressBar";
import { PhaseHint } from "./PhaseHint";
import { RepositoryPanel } from "./RepositoryPanel";
import { ContractCliInput } from "./ContractCliInput";
import { PhaseDeliverablesPanel } from "./PhaseDeliverablesPanel";
import { CommandModePanel } from "./CommandModePanel";
import { TaskTree } from "../mesh/TaskTree";
type Tab = "overview" | "repos" | "files" | "tasks";
interface ContractDetailProps {
contract: ContractWithRelations;
loading: boolean;
onBack: () => void;
onUpdate: (name: string, description: string) => void;
onDelete: () => void;
onPhaseChange: (phase: ContractPhase) => void;
onStatusChange: (status: ContractStatus) => void;
onFileSelect: (id: string) => void;
onTaskSelect: (id: string) => void;
onTaskCreate: (name: string, plan: string, repositoryUrl?: string) => void;
onRefresh: () => void;
// Repository callbacks
onAddRemoteRepo: (name: string, url: string, isPrimary: boolean) => void;
onAddLocalRepo: (name: string, path: string, isPrimary: boolean) => void;
onCreateManagedRepo: (name: string, isPrimary: boolean) => void;
onDeleteRepo: (repoId: string) => void;
onSetRepoPrimary: (repoId: string) => void;
// File creation callback for phase deliverables
onCreateFileFromTemplate?: (templateId: string, suggestedName: string) => void;
}
const statusConfig: Record<ContractStatus, { label: string; color: string }> = {
active: { label: "Active", color: "text-green-400" },
completed: { label: "Completed", color: "text-blue-400" },
archived: { label: "Archived", color: "text-[#555]" },
};
export function ContractDetail({
contract,
loading,
onBack,
onUpdate,
onDelete,
onPhaseChange,
onStatusChange,
onFileSelect,
onTaskSelect,
onTaskCreate,
onRefresh,
onAddRemoteRepo,
onAddLocalRepo,
onCreateManagedRepo,
onDeleteRepo,
onSetRepoPrimary,
onCreateFileFromTemplate,
}: ContractDetailProps) {
const [activeTab, setActiveTab] = useState<Tab>("overview");
const [isEditing, setIsEditing] = useState(false);
const [name, setName] = useState(contract.name);
const [description, setDescription] = useState(contract.description || "");
const handleSave = () => {
onUpdate(name, description);
setIsEditing(false);
};
const handleCancel = () => {
setName(contract.name);
setDescription(contract.description || "");
setIsEditing(false);
};
if (loading) {
return (
<div className="panel h-full flex items-center justify-center">
<div className="font-mono text-[#9bc3ff] text-sm">Loading...</div>
</div>
);
}
const tabs: { key: Tab; label: string; count?: number }[] = [
{ key: "overview", label: "Overview" },
{ key: "repos", label: "Repositories", count: contract.repositories.length },
{ key: "files", label: "Files", count: contract.files.length },
{ key: "tasks", label: "Tasks", count: contract.tasks.length },
];
return (
<div className="panel h-full flex flex-col min-h-0">
{/* Header */}
<div className="p-4 border-b border-dashed border-[rgba(117,170,252,0.35)]">
<div className="flex items-center justify-between mb-3">
<button
onClick={onBack}
className="font-mono text-xs text-[#75aafc] hover:text-[#9bc3ff] transition-colors"
>
← Back to list
</button>
<div className="flex items-center gap-2">
{isEditing ? (
<>
<button
onClick={handleCancel}
className="px-3 py-1.5 font-mono text-xs text-[#9bc3ff] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] transition-colors uppercase"
>
Cancel
</button>
<button
onClick={handleSave}
className="px-3 py-1.5 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors uppercase"
>
Save
</button>
</>
) : (
<>
<button
onClick={() => setIsEditing(true)}
className="px-3 py-1.5 font-mono text-xs text-[#dbe7ff] border border-[#0f3c78] hover:border-[#3f6fb3] transition-colors uppercase"
>
Edit
</button>
<button
onClick={onDelete}
className="px-3 py-1.5 font-mono text-xs text-red-400 border border-red-400/30 hover:border-red-400/50 transition-colors uppercase"
>
Delete
</button>
</>
)}
</div>
</div>
{isEditing ? (
<div className="space-y-3">
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc]"
placeholder="Contract name"
/>
<textarea
value={description}
onChange={(e) => setDescription(e.target.value)}
className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc] resize-none"
rows={2}
placeholder="Description (optional)"
/>
</div>
) : (
<>
<div className="flex items-center gap-3 mb-2">
<h2 className="font-mono text-lg text-[#dbe7ff]">
{contract.name}
</h2>
<span
className={`font-mono text-xs uppercase ${
statusConfig[contract.status].color
}`}
>
{statusConfig[contract.status].label}
</span>
{contract.localOnly && (
<span className="px-2 py-0.5 font-mono text-[10px] uppercase text-amber-400 border border-amber-400/30 bg-amber-400/10">
Local-Only
</span>
)}
</div>
{contract.description && (
<p className="font-mono text-sm text-[#9bc3ff] mb-3">
{contract.description}
</p>
)}
</>
)}
{/* Phase progress */}
<div className="mt-4 pt-4 border-t border-dashed border-[rgba(117,170,252,0.2)]">
<PhaseProgressBar
currentPhase={contract.phase}
onPhaseClick={onPhaseChange}
/>
</div>
</div>
{/* Tabs */}
<div className="flex border-b border-[rgba(117,170,252,0.2)]">
{tabs.map((tab) => (
<button
key={tab.key}
onClick={() => setActiveTab(tab.key)}
className={`
px-4 py-2 font-mono text-xs uppercase tracking-wider transition-colors
${
activeTab === tab.key
? "text-[#dbe7ff] border-b-2 border-[#75aafc]"
: "text-[#555] hover:text-[#9bc3ff]"
}
`}
>
{tab.label}
{tab.count !== undefined && tab.count > 0 && (
<span className="ml-1 text-[10px]">({tab.count})</span>
)}
</button>
))}
</div>
{/* Tab content */}
<div className="flex-1 overflow-y-auto p-4 min-h-0">
{activeTab === "overview" && (
<OverviewTab
contract={contract}
onStatusChange={onStatusChange}
onPhaseChange={onPhaseChange}
onCreateFile={onCreateFileFromTemplate}
onRefresh={onRefresh}
/>
)}
{activeTab === "repos" && (
<RepositoryPanel
repositories={contract.repositories}
onAddRemote={onAddRemoteRepo}
onAddLocal={onAddLocalRepo}
onCreateManaged={onCreateManagedRepo}
onDelete={onDeleteRepo}
onSetPrimary={onSetRepoPrimary}
/>
)}
{activeTab === "files" && (
<FilesTab
files={contract.files}
contractId={contract.id}
contractPhase={contract.phase}
onSelect={onFileSelect}
onRefresh={onRefresh}
/>
)}
{activeTab === "tasks" && (
<TasksTab
tasks={contract.tasks}
repositories={contract.repositories}
supervisorTaskId={contract.supervisorTaskId}
contractType={contract.contractType}
onSelect={onTaskSelect}
onCreate={onTaskCreate}
/>
)}
</div>
{/* Chat Input */}
<ContractCliInput
contractId={contract.id}
contract={contract}
onUpdate={onRefresh}
/>
</div>
);
}
// Overview tab
function OverviewTab({
contract,
onStatusChange,
onPhaseChange,
onCreateFile,
onRefresh,
}: {
contract: ContractWithRelations;
onStatusChange: (status: ContractStatus) => void;
onPhaseChange: (phase: ContractPhase) => void;
onCreateFile?: (templateId: string, suggestedName: string) => void;
onRefresh: () => void;
}) {
return (
<div className="space-y-6">
{/* Command Mode controls */}
<CommandModePanel contract={contract} onUpdate={onRefresh} />
{/* Phase deliverables checklist */}
<PhaseDeliverablesPanel
contract={contract}
onCreateFile={onCreateFile}
/>
{/* Phase hint */}
<PhaseHint contract={contract} onAdvancePhase={onPhaseChange} />
{/* Task progress summary */}
<TaskStatusSummary tasks={contract.tasks} />
{/* Stats */}
<div className="grid grid-cols-3 gap-4">
<StatCard label="Repositories" value={contract.repositories.length} />
<StatCard label="Files" value={contract.files.length} />
<StatCard label="Tasks" value={contract.tasks.length} />
</div>
{/* Status change */}
<div>
<h3 className="font-mono text-xs text-[#75aafc] uppercase mb-2">
Status
</h3>
<div className="flex gap-2">
{(["active", "completed", "archived"] as ContractStatus[]).map(
(status) => (
<button
key={status}
onClick={() => onStatusChange(status)}
className={`
px-3 py-1.5 font-mono text-xs uppercase transition-colors
${
contract.status === status
? "bg-[rgba(117,170,252,0.1)] text-[#9bc3ff] border border-[rgba(117,170,252,0.3)]"
: "text-[#555] border border-transparent hover:text-[#75aafc]"
}
`}
>
{status}
</button>
)
)}
</div>
</div>
{/* Metadata */}
<div>
<h3 className="font-mono text-xs text-[#75aafc] uppercase mb-2">
Details
</h3>
<div className="space-y-1 font-mono text-xs text-[#555]">
<p>Created: {new Date(contract.createdAt).toLocaleString()}</p>
<p>Updated: {new Date(contract.updatedAt).toLocaleString()}</p>
<p>Version: {contract.version}</p>
</div>
</div>
</div>
);
}
function StatCard({ label, value }: { label: string; value: number }) {
return (
<div className="p-3 border border-[rgba(117,170,252,0.2)]">
<div className="font-mono text-2xl text-[#dbe7ff]">{value}</div>
<div className="font-mono text-[10px] text-[#555] uppercase">{label}</div>
</div>
);
}
// Task status summary with progress bar
function TaskStatusSummary({ tasks }: { tasks: TaskSummary[] }) {
if (tasks.length === 0) return null;
// Count tasks by status
const statusCounts = {
done: 0,
merged: 0,
running: 0,
pending: 0,
failed: 0,
other: 0,
};
for (const task of tasks) {
switch (task.status) {
case "done":
statusCounts.done++;
break;
case "merged":
statusCounts.merged++;
break;
case "running":
case "initializing":
case "starting":
statusCounts.running++;
break;
case "pending":
statusCounts.pending++;
break;
case "failed":
statusCounts.failed++;
break;
default:
statusCounts.other++;
}
}
const completedCount = statusCounts.done + statusCounts.merged;
const progressPercent = (completedCount / tasks.length) * 100;
// Build summary parts
const parts: string[] = [];
if (completedCount > 0) parts.push(`${completedCount} done`);
if (statusCounts.running > 0) parts.push(`${statusCounts.running} running`);
if (statusCounts.pending > 0) parts.push(`${statusCounts.pending} pending`);
if (statusCounts.failed > 0) parts.push(`${statusCounts.failed} failed`);
return (
<div className="space-y-2">
<h3 className="font-mono text-xs text-[#75aafc] uppercase">
Task Progress
</h3>
{/* Progress bar */}
<div className="h-2 bg-[rgba(117,170,252,0.1)] rounded overflow-hidden">
<div
className="h-full bg-green-400 transition-all duration-300"
style={{ width: `${progressPercent}%` }}
/>
</div>
{/* Summary text */}
<div className="flex items-center justify-between">
<span className="font-mono text-xs text-[#9bc3ff]">
{parts.join(", ")}
</span>
<span className="font-mono text-xs text-[#555]">
{completedCount}/{tasks.length} completed
</span>
</div>
</div>
);
}
// Phase color mapping for badges
const phaseColors: Record<ContractPhase, string> = {
research: "bg-purple-500/20 text-purple-400 border-purple-400/30",
specify: "bg-blue-500/20 text-blue-400 border-blue-400/30",
plan: "bg-cyan-500/20 text-cyan-400 border-cyan-400/30",
execute: "bg-green-500/20 text-green-400 border-green-400/30",
review: "bg-yellow-500/20 text-yellow-400 border-yellow-400/30",
};
// Files tab with template creation
function FilesTab({
files,
contractId,
contractPhase,
onSelect,
onRefresh,
}: {
files: FileSummary[];
contractId: string;
contractPhase: ContractPhase;
onSelect: (id: string) => void;
onRefresh: () => void;
}) {
const [showTemplateModal, setShowTemplateModal] = useState(false);
const [templates, setTemplates] = useState<TemplateSummary[]>([]);
const [loadingTemplates, setLoadingTemplates] = useState(false);
const [creating, setCreating] = useState(false);
const [fileName, setFileName] = useState("");
const [selectedTemplateId, setSelectedTemplateId] = useState<string | null>(null);
// Load templates when modal opens
useEffect(() => {
if (showTemplateModal) {
setLoadingTemplates(true);
listTemplates(contractPhase)
.then((res) => setTemplates(res.templates))
.catch((err) => console.error("Failed to load templates:", err))
.finally(() => setLoadingTemplates(false));
}
}, [showTemplateModal, contractPhase]);
const handleCreateFromTemplate = useCallback(async () => {
if (!fileName.trim() || !selectedTemplateId) return;
setCreating(true);
try {
// Get the full template with body
const template = await getTemplate(selectedTemplateId);
// Create the file with contract (files must belong to contracts)
await createFile({
contractId,
name: fileName.trim(),
description: template.description,
body: template.suggestedBody,
});
// Reset and close
setShowTemplateModal(false);
setFileName("");
setSelectedTemplateId(null);
onRefresh();
} catch (err) {
console.error("Failed to create file from template:", err);
} finally {
setCreating(false);
}
}, [fileName, selectedTemplateId, contractId, onRefresh]);
const handleCloseModal = () => {
setShowTemplateModal(false);
setFileName("");
setSelectedTemplateId(null);
};
return (
<div className="space-y-4">
{/* Create from template button */}
<button
onClick={() => setShowTemplateModal(true)}
className="px-3 py-1.5 font-mono text-xs text-[#9bc3ff] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] transition-colors"
>
+ Create from Template
</button>
{/* Template Selection Modal */}
{showTemplateModal && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div className="w-full max-w-lg p-6 bg-[#0a1628] border border-[rgba(117,170,252,0.3)] max-h-[80vh] flex flex-col">
<div className="flex items-center justify-between mb-4">
<h3 className="font-mono text-sm text-[#75aafc] uppercase">
Create File from Template
</h3>
<span className={`px-2 py-0.5 text-[10px] font-mono uppercase border rounded ${phaseColors[contractPhase]}`}>
{contractPhase} phase
</span>
</div>
<div className="space-y-4 flex-1 overflow-y-auto">
{/* File name input */}
<div>
<label className="block font-mono text-xs text-[#555] uppercase mb-1">
File Name
</label>
<input
type="text"
value={fileName}
onChange={(e) => setFileName(e.target.value)}
placeholder="e.g., Project Requirements"
className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc]"
autoFocus
/>
</div>
{/* Template selection */}
<div>
<label className="block font-mono text-xs text-[#555] uppercase mb-2">
Select Template
</label>
{loadingTemplates ? (
<p className="font-mono text-xs text-[#555]">Loading templates...</p>
) : templates.length === 0 ? (
<p className="font-mono text-xs text-[#555]">No templates available for {contractPhase} phase</p>
) : (
<div className="space-y-2 max-h-60 overflow-y-auto">
{templates.map((template) => (
<button
key={template.id}
onClick={() => setSelectedTemplateId(template.id)}
className={`w-full text-left p-3 border transition-colors ${
selectedTemplateId === template.id
? "border-[#75aafc] bg-[rgba(117,170,252,0.1)]"
: "border-[rgba(117,170,252,0.2)] hover:border-[rgba(117,170,252,0.4)]"
}`}
>
<div className="flex items-center justify-between mb-1">
<span className="font-mono text-sm text-[#dbe7ff]">
{template.name}
</span>
<span className="font-mono text-[10px] text-[#555]">
{template.elementCount} elements
</span>
</div>
<p className="font-mono text-xs text-[#555]">
{template.description}
</p>
</button>
))}
</div>
)}
</div>
</div>
<div className="flex gap-2 justify-end mt-4 pt-4 border-t border-[rgba(117,170,252,0.2)]">
<button
onClick={handleCloseModal}
className="px-4 py-2 font-mono text-xs text-[#9bc3ff] hover:text-[#dbe7ff] transition-colors"
>
Cancel
</button>
<button
onClick={handleCreateFromTemplate}
disabled={!fileName.trim() || !selectedTemplateId || creating}
className="px-4 py-2 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{creating ? "Creating..." : "Create File"}
</button>
</div>
</div>
</div>
)}
{/* File list */}
{files.length === 0 ? (
<p className="font-mono text-xs text-[#555]">
No files in this contract. Create one from a template above.
</p>
) : (
<div className="space-y-2">
{files.map((file) => (
<button
key={file.id}
onClick={() => onSelect(file.id)}
className="w-full text-left p-3 border border-[rgba(117,170,252,0.2)] hover:border-[rgba(117,170,252,0.4)] transition-colors"
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<span className="font-mono text-sm text-[#dbe7ff]">
{file.name}
</span>
{file.contractPhase && (
<span
className={`px-1.5 py-0.5 text-[9px] font-mono uppercase border rounded ${
phaseColors[file.contractPhase]
}`}
title={`Added during ${file.contractPhase} phase`}
>
{file.contractPhase}
</span>
)}
</div>
<span className="font-mono text-[10px] text-[#555]">
v{file.version}
</span>
</div>
{file.description && (
<p className="font-mono text-xs text-[#555] mt-1 truncate">
{file.description}
</p>
)}
</button>
))}
</div>
)}
</div>
);
}
// Tasks tab - now using TaskTree for supervisor view
function TasksTab({
tasks,
repositories,
supervisorTaskId,
contractType,
onSelect,
onCreate,
}: {
tasks: TaskSummary[];
repositories: ContractRepository[];
supervisorTaskId: string | null;
contractType: string;
onSelect: (id: string) => void;
onCreate: (name: string, plan: string, repositoryUrl?: string) => void;
}) {
const [isCreating, setIsCreating] = useState(false);
const [taskName, setTaskName] = useState("");
const [taskPlan, setTaskPlan] = useState("# Plan\n\nDescribe what this task should accomplish...");
// Find primary repository or first ready one
const readyRepos = repositories.filter((r) => r.status === "ready");
const primaryRepo = readyRepos.find((r) => r.isPrimary) || readyRepos[0];
const [selectedRepoId, setSelectedRepoId] = useState<string>(primaryRepo?.id || "");
const handleCreate = () => {
if (!taskName.trim()) return;
const selectedRepo = repositories.find((r) => r.id === selectedRepoId);
// Get the URL - for remote repos it's repositoryUrl, for local it's the local path
const repoUrl = selectedRepo?.repositoryUrl || selectedRepo?.localPath;
onCreate(taskName.trim(), taskPlan, repoUrl || undefined);
setIsCreating(false);
setTaskName("");
setTaskPlan("# Plan\n\nDescribe what this task should accomplish...");
setSelectedRepoId(primaryRepo?.id || "");
};
const handleCancel = () => {
setIsCreating(false);
setTaskName("");
setTaskPlan("# Plan\n\nDescribe what this task should accomplish...");
setSelectedRepoId(primaryRepo?.id || "");
};
return (
<div className="space-y-4">
{/* TaskTree with supervisor view */}
<TaskTree
tasks={tasks}
supervisorTaskId={supervisorTaskId}
onSelect={onSelect}
/>
{/* Manual task creation - show for task-type contracts or contracts without supervisors */}
{(contractType === "task" || !supervisorTaskId) && (
<>
<div className="border-t border-[rgba(117,170,252,0.2)] pt-4">
<button
onClick={() => setIsCreating(true)}
className="px-3 py-1.5 font-mono text-xs text-[#9bc3ff] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] transition-colors"
>
+ Create Task Manually
</button>
</div>
{/* Create Task Modal */}
{isCreating && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div className="w-full max-w-lg p-6 bg-[#0a1628] border border-[rgba(117,170,252,0.3)]">
<h3 className="font-mono text-sm text-[#75aafc] uppercase mb-4">
Create Task
</h3>
<div className="space-y-4">
<div>
<label className="block font-mono text-xs text-[#555] uppercase mb-1">
Name
</label>
<input
type="text"
value={taskName}
onChange={(e) => setTaskName(e.target.value)}
placeholder="Task name"
className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc]"
autoFocus
/>
</div>
{/* Repository selection */}
{readyRepos.length > 0 && (
<div>
<label className="block font-mono text-xs text-[#555] uppercase mb-1">
Repository
</label>
<select
value={selectedRepoId}
onChange={(e) => setSelectedRepoId(e.target.value)}
className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc]"
>
<option value="">No repository</option>
{readyRepos.map((repo) => (
<option key={repo.id} value={repo.id}>
{repo.name}
{repo.isPrimary ? " (Primary)" : ""}
{" - "}
{repo.sourceType}
</option>
))}
</select>
</div>
)}
<div>
<label className="block font-mono text-xs text-[#555] uppercase mb-1">
Plan
</label>
<textarea
value={taskPlan}
onChange={(e) => setTaskPlan(e.target.value)}
rows={6}
className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc] resize-none"
/>
</div>
<div className="flex gap-2 justify-end">
<button
onClick={handleCancel}
className="px-4 py-2 font-mono text-xs text-[#9bc3ff] hover:text-[#dbe7ff] transition-colors"
>
Cancel
</button>
<button
onClick={handleCreate}
disabled={!taskName.trim()}
className="px-4 py-2 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
Create
</button>
</div>
</div>
</div>
</div>
)}
</>
)}
</div>
);
}
