Function SimpleTaskView

tasks-ui/src/components/v2/SimpleTaskView.tsx:26–193

({
  task,
  content,
  isEditing,
  onEdit,
  onCancel,
  onSave,
  onContentChange,
  isUpdating = false,
}: SimpleTaskViewProps)

}

export function SimpleTaskView({
  task,
  content,
  isEditing,
  onEdit,
  onCancel,
  onSave,
  onContentChange,
  isUpdating = false,
}: SimpleTaskViewProps) {
  const metadata = task.metadata || task;
  const navigate = useNavigate();
  const deleteTask = useDeleteTask();
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);

  const handleDelete = async () => {
    try {
      await deleteTask.mutateAsync({ id: task.id });
      // Navigate back to the workflow list
      navigate({ to: `/workflow/${metadata.workflowState || 'current'}` });
    } catch (error) {
      console.error('Failed to delete task:', error);
      // Error handling will be improved in a later step
    }
  };

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <div className="bg-card border-b">
        <div className="max-w-6xl mx-auto px-6 py-4">
          <div className="flex items-start justify-between gap-4">
            <div className="flex items-start gap-3 flex-1 min-w-0">
              <TaskTypeIcon type={metadata.type || 'feature'} />
              <div className="flex-1 min-w-0">
                <h1 className="text-2xl font-bold text-foreground">{metadata.title}</h1>
                <div className="flex items-center flex-wrap gap-2 mt-2">
                  <StatusBadge status={metadata.status || 'To Do'} />
                  <PriorityIndicator priority={metadata.priority || 'Medium'} />
                  <WorkflowStateBadge workflow={metadata.location || 'backlog'} />
                  {metadata.area && (
                    <>
                      <span className="text-muted-foreground">•</span>
                      <span className="text-sm text-muted-foreground">Area: {metadata.area}</span>
                    </>
                  )}
                  {metadata.assigned_to && (
                    <>
                      <span className="text-muted-foreground">•</span>
                      <span className="text-sm text-muted-foreground">@{metadata.assigned_to}</span>
                    </>
                  )}
                </div>
                {metadata.tags && metadata.tags.length > 0 && (
                  <div className="flex flex-wrap gap-1 mt-2">
                    {metadata.tags.map((tag) => (
                      <span key={tag} className="font-mono text-xs bg-muted px-2 py-1 rounded">
                        #{tag}