diff --git a/archon-ui-main/src/features/style-guide/layouts/AgentWorkOrderExample.tsx b/archon-ui-main/src/features/style-guide/layouts/AgentWorkOrderExample.tsx new file mode 100644 index 0000000000..a00a403ab1 --- /dev/null +++ b/archon-ui-main/src/features/style-guide/layouts/AgentWorkOrderExample.tsx @@ -0,0 +1,332 @@ +import { AnimatePresence, motion } from "framer-motion"; +import { ChevronDown, ChevronUp, ExternalLink, Plus, User } from "lucide-react"; +import { useState } from "react"; +import { Button } from "@/features/ui/primitives/button"; +import { Card } from "@/features/ui/primitives/card"; +import { cn } from "@/features/ui/primitives/styles"; +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/features/ui/primitives/tooltip"; +import { StepHistoryCard } from "./components/StepHistoryCard"; +import { WorkflowStepButton } from "./components/WorkflowStepButton"; + +const MOCK_WORK_ORDER = { + id: "wo-1", + title: "Create comprehensive documentation", + status: "in_progress" as const, + workflow: { + currentStep: 2, + steps: [ + { id: "1", name: "Create Branch", status: "completed", duration: "33s" }, + { id: "2", name: "Planning", status: "in_progress", duration: "2m 11s" }, + { id: "3", name: "Execute", status: "pending", duration: null }, + { id: "4", name: "Commit", status: "pending", duration: null }, + { id: "5", name: "Create PR", status: "pending", duration: null }, + ], + }, + stepHistory: [ + { + id: "step-1", + stepName: "Create Branch", + timestamp: "7 minutes ago", + output: "docs/remove-archon-mentions", + session: "Session: a342d9ac-56c4-43ae-95b8-9ddf18143961", + collapsible: true, + }, + { + id: "step-2", + stepName: "Planning", + timestamp: "5 minutes ago", + output: `## Report + +**Work completed:** + +- Conducted comprehensive codebase audit for "archon" and "Archon" mentions +- Verified main README.md is already breach (no archon mentions present) +- Identified 14 subdirectory README files that need verification +- Discovered historical git commits that added "hello from archon" but content has been removed +- Identified 3 remote branches with "archon" in their names (out of scope for this task) +- Created comprehensive PRP plan for documentation cleanup and verification`, + session: "Session: e3889823-b272-43c0-b11d-7a786d7e3c88", + collapsible: true, + isHumanInLoop: true, + }, + ], + document: { + id: "doc-1", + title: "Planning Document", + content: { + markdown: `# Documentation Cleanup Plan + +## Overview +This document outlines the plan to remove all "archon" mentions from the codebase. + +## Steps +1. Audit all README files +2. Check git history for sensitive content +3. Verify no configuration files reference "archon" +4. Update documentation + +## Progress +- [x] Initial audit complete +- [ ] README updates pending +- [ ] Configuration review pending`, + }, + }, +}; + +export const AgentWorkOrderExample = () => { + const [hoveredStepIndex, setHoveredStepIndex] = useState(null); + const [expandedSteps, setExpandedSteps] = useState>(new Set(["step-2"])); + const [showDetails, setShowDetails] = useState(false); + const [humanInLoopCheckpoints, setHumanInLoopCheckpoints] = useState>(new Set()); + + const toggleStepExpansion = (stepId: string) => { + setExpandedSteps((prev) => { + const newSet = new Set(prev); + if (newSet.has(stepId)) { + newSet.delete(stepId); + } else { + newSet.add(stepId); + } + return newSet; + }); + }; + + const addHumanInLoopCheckpoint = (index: number) => { + setHumanInLoopCheckpoints((prev) => { + const newSet = new Set(prev); + newSet.add(index); + return newSet; + }); + setHoveredStepIndex(null); + }; + + const removeHumanInLoopCheckpoint = (index: number) => { + setHumanInLoopCheckpoints((prev) => { + const newSet = new Set(prev); + newSet.delete(index); + return newSet; + }); + }; + + return ( +
+ {/* Explanation Text */} +

+ Use this layout for: Agent work order workflows with step-by-step progress tracking, + collapsible history, and integrated document editing for human-in-the-loop approval. +

+ + {/* Workflow Progress Bar */} + +
+

{MOCK_WORK_ORDER.title}

+ +
+ +
+ {MOCK_WORK_ORDER.workflow.steps.map((step, index) => ( +
+ {/* Step Button */} + + + {/* Connecting Line - only show between steps */} + {index < MOCK_WORK_ORDER.workflow.steps.length - 1 && ( + // biome-ignore lint/a11y/noStaticElementInteractions: Visual hover effect container for showing plus button +
setHoveredStepIndex(index)} + onMouseLeave={() => setHoveredStepIndex(null)} + > + {/* Neon line */} +
+ + {/* Human-in-Loop Checkpoint Indicator */} + {humanInLoopCheckpoints.has(index) && ( + + + + + + Click to remove + + + )} + + {/* Plus button on hover - only show if no checkpoint exists */} + {hoveredStepIndex === index && !humanInLoopCheckpoints.has(index) && ( + + + + + + Add Human-in-Loop + + + )} +
+ )} +
+ ))} +
+ + {/* Collapsible Details Section */} + + {showDetails && ( + + + {/* Left Column */} +
+
+

+ Details +

+
+
+

Status

+

Running

+
+
+

Sandbox Type

+

git_branch

+
+ +
+

Branch

+

+ docs/remove-archon-mentions +

+
+
+

Work Order ID

+

+ wo-7fd39c8d +

+
+
+
+
+ + {/* Right Column */} +
+
+

+ Statistics +

+
+
+

Commits

+

0

+
+
+

Files Changed

+

0

+
+
+

Steps Completed

+

2 / 2

+
+
+
+
+ + + )} + + + + {/* Step History Section */} +
+

Step History

+ {MOCK_WORK_ORDER.stepHistory.map((step) => ( + toggleStepExpansion(step.id)} + document={step.isHumanInLoop ? MOCK_WORK_ORDER.document : undefined} + /> + ))} +
+
+ ); +}; diff --git a/archon-ui-main/src/features/style-guide/layouts/components/StepHistoryCard.tsx b/archon-ui-main/src/features/style-guide/layouts/components/StepHistoryCard.tsx new file mode 100644 index 0000000000..b443739989 --- /dev/null +++ b/archon-ui-main/src/features/style-guide/layouts/components/StepHistoryCard.tsx @@ -0,0 +1,265 @@ +import { AnimatePresence, motion } from "framer-motion"; +import { AlertCircle, CheckCircle2, ChevronDown, ChevronUp, Edit3, Eye } from "lucide-react"; +import { useState } from "react"; +import ReactMarkdown from "react-markdown"; +import { Button } from "@/features/ui/primitives/button"; +import { Card } from "@/features/ui/primitives/card"; +import { cn } from "@/features/ui/primitives/styles"; + +interface StepHistoryCardProps { + step: { + id: string; + stepName: string; + timestamp: string; + output: string; + session: string; + collapsible: boolean; + isHumanInLoop?: boolean; + }; + isExpanded: boolean; + onToggle: () => void; + document?: { + title: string; + content: { + markdown: string; + }; + }; +} + +export const StepHistoryCard = ({ step, isExpanded, onToggle, document }: StepHistoryCardProps) => { + const [isEditingDocument, setIsEditingDocument] = useState(false); + const [editedContent, setEditedContent] = useState(""); + const [hasChanges, setHasChanges] = useState(false); + + const handleToggleEdit = () => { + if (!isEditingDocument && document) { + setEditedContent(document.content.markdown); + } + setIsEditingDocument(!isEditingDocument); + setHasChanges(false); + }; + + const handleContentChange = (value: string) => { + setEditedContent(value); + setHasChanges(document ? value !== document.content.markdown : false); + }; + + const handleApproveAndContinue = () => { + console.log("Approved and continuing to next step"); + setHasChanges(false); + setIsEditingDocument(false); + }; + + return ( + + {/* Header */} +
+
+
+

{step.stepName}

+ {step.isHumanInLoop && ( + + + )} +
+

{step.timestamp}

+
+ + {/* Collapse toggle - only show if collapsible */} + {step.collapsible && ( + + )} +
+ + {/* Content - collapsible with animation */} + + {(isExpanded || !step.collapsible) && ( + + + {/* Output content */} +
+ 
+                  {step.output}
+
+
+ + {/* Session info */} +

+ {step.session} +

+ + {/* Review and Approve Plan - only for human-in-loop steps with documents */} + {step.isHumanInLoop && document && ( +
+

Review and Approve Plan

+ + {/* Document Card */} + + {/* View/Edit toggle in top right */} +
+ +
+ + {isEditingDocument ? ( +
+