diff options
| -rw-r--r-- | makima/frontend/src/components/directives/DirectiveDetail.tsx | 51 | ||||
| -rw-r--r-- | makima/frontend/src/components/directives/DirectiveList.tsx | 88 |
2 files changed, 78 insertions, 61 deletions
diff --git a/makima/frontend/src/components/directives/DirectiveDetail.tsx b/makima/frontend/src/components/directives/DirectiveDetail.tsx index 645b8d2..06d8ba2 100644 --- a/makima/frontend/src/components/directives/DirectiveDetail.tsx +++ b/makima/frontend/src/components/directives/DirectiveDetail.tsx @@ -176,6 +176,7 @@ function JsonSection({ export function DirectiveDetail({ directive, + onBack, onDelete, onStart, onRefresh, @@ -245,27 +246,18 @@ export function DirectiveDetail({ <div className="panel h-full flex flex-col"> {/* Header */} <div className="p-4 border-b border-dashed border-[rgba(117,170,252,0.35)]"> - <div className="flex items-center gap-2 mb-2"> - <span - className={`font-mono text-[10px] uppercase ${ - statusColors[directive.status as DirectiveStatus] || "text-[#888]" - }`} + <div className="flex items-center justify-between mb-3"> + <button + onClick={onBack} + className="font-mono text-xs text-[#75aafc] hover:text-[#9bc3ff] transition-colors" > - {directive.status} - </span> - {isLive && ( - <span className="font-mono text-[9px] text-yellow-400/60 animate-pulse"> - polling - </span> - )} - <span className="font-mono text-[10px] text-[#7788aa]"> - v{directive.version} - </span> - <div className="ml-auto flex gap-2"> + ← Back to list + </button> + <div className="flex items-center gap-2"> {onStart && directive.status === "draft" && ( <button onClick={() => onStart(directive.id)} - className="font-mono text-[10px] text-green-400 hover:text-green-300 transition-colors uppercase" + className="px-3 py-1.5 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors uppercase" > Start </button> @@ -273,16 +265,33 @@ export function DirectiveDetail({ {onDelete && ( <button onClick={() => onDelete(directive.id)} - className="font-mono text-[10px] text-red-400 hover:text-red-300 transition-colors uppercase" + 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> - <h2 className="font-mono text-sm text-[#dbe7ff]"> - {directive.title} - </h2> + <div className="flex items-center gap-3 mb-2"> + <h2 className="font-mono text-lg text-[#dbe7ff]"> + {directive.title} + </h2> + <span + className={`font-mono text-xs uppercase ${ + statusColors[directive.status as DirectiveStatus] || "text-[#888]" + }`} + > + {directive.status} + </span> + {isLive && ( + <span className="font-mono text-[9px] text-yellow-400/60 animate-pulse"> + polling + </span> + )} + <span className="font-mono text-[10px] text-[#7788aa]"> + v{directive.version} + </span> + </div> </div> {/* Tabs */} diff --git a/makima/frontend/src/components/directives/DirectiveList.tsx b/makima/frontend/src/components/directives/DirectiveList.tsx index a900b7b..5afa36e 100644 --- a/makima/frontend/src/components/directives/DirectiveList.tsx +++ b/makima/frontend/src/components/directives/DirectiveList.tsx @@ -25,7 +25,6 @@ export function DirectiveList({ loading, onSelect, onCreate, - onDelete, selectedId, }: DirectiveListProps) { const [filter, setFilter] = useState<DirectiveStatus | "all">("all"); @@ -58,6 +57,7 @@ export function DirectiveList({ + New </button> </div> + {/* Filter tabs */} <div className="flex gap-1 flex-wrap"> {(["all", "draft", "planning", "active", "paused", "completed", "failed"] as const).map( @@ -65,11 +65,14 @@ export function DirectiveList({ <button key={status} onClick={() => setFilter(status)} - className={`px-2 py-0.5 font-mono text-[10px] uppercase tracking-wider border transition-colors ${ - filter === status - ? "bg-[#0f3c78] border-[#3f6fb3] text-[#dbe7ff]" - : "bg-transparent border-[rgba(117,170,252,0.2)] text-[#7788aa] hover:border-[rgba(117,170,252,0.4)]" - }`} + className={` + px-2 py-1 font-mono text-[10px] uppercase tracking-wider transition-colors + ${ + filter === status + ? "bg-[rgba(117,170,252,0.1)] text-[#9bc3ff] border border-[rgba(117,170,252,0.3)]" + : "text-[#555] hover:text-[#75aafc]" + } + `} > {status} </button> @@ -82,52 +85,57 @@ export function DirectiveList({ <div className="flex-1 overflow-y-auto"> {filteredDirectives.length === 0 ? ( <div className="p-4 text-center"> - <p className="font-mono text-sm text-[#7788aa]"> - {directives.length === 0 + <p className="font-mono text-sm text-[#555]"> + {filter === "all" ? "No directives yet" - : "No matching directives"} + : `No ${filter} directives`} </p> </div> ) : ( - filteredDirectives.map((directive) => ( - <div - key={directive.id} - onClick={() => onSelect(directive.id)} - onContextMenu={(e) => { - if (onDelete) { - e.preventDefault(); - } - }} - className={`p-3 border-b border-dashed border-[rgba(117,170,252,0.15)] cursor-pointer transition-colors hover:bg-[rgba(117,170,252,0.05)] ${ - selectedId === directive.id - ? "bg-[rgba(117,170,252,0.1)]" - : "" - }`} - > - <div className="flex items-start justify-between gap-2"> - <div className="flex-1 min-w-0"> - <div className="font-mono text-sm text-[#dbe7ff] truncate"> + <div className="divide-y divide-[rgba(117,170,252,0.15)]"> + {filteredDirectives.map((directive) => ( + <button + key={directive.id} + onClick={() => onSelect(directive.id)} + className={` + w-full text-left p-4 transition-colors + ${ + selectedId === directive.id + ? "bg-[rgba(117,170,252,0.1)]" + : "hover:bg-[rgba(117,170,252,0.05)]" + } + `} + > + <div className="flex items-start justify-between gap-2 mb-2"> + <h3 className="font-mono text-sm text-[#dbe7ff] truncate"> {directive.title} - </div> - <div className="font-mono text-xs text-[#7788aa] mt-0.5 line-clamp-2"> - {directive.goal} - </div> - </div> - <div className="flex flex-col items-end gap-1 shrink-0"> + </h3> <span - className={`font-mono text-[10px] uppercase ${ + className={`text-[10px] font-mono uppercase shrink-0 ${ statusColors[directive.status] || "text-[#888]" }`} > {directive.status} </span> - <span className="font-mono text-[10px] text-[#7788aa]"> - {directive.chainCount}ch / {directive.stepCount}st - </span> </div> - </div> - </div> - )) + + {directive.goal && ( + <p className="font-mono text-xs text-[#555] mb-2 line-clamp-2"> + {directive.goal} + </p> + )} + + <div className="flex items-center gap-3 text-[10px] font-mono text-[#555]"> + {directive.chainCount > 0 && ( + <span>{directive.chainCount} chains</span> + )} + {directive.stepCount > 0 && ( + <span>{directive.stepCount} steps</span> + )} + </div> + </button> + ))} + </div> )} </div> </div> |