diff options
| author | soryu <soryu@soryu.co> | 2026-03-09 16:31:31 +0000 |
|---|---|---|
| committer | soryu <soryu@soryu.co> | 2026-03-09 16:31:31 +0000 |
| commit | e11e7225861c3063f08461ac01005f3315d41be5 (patch) | |
| tree | 81c17946d8f0347c7cebf83ecd731d205983cfc7 /makima/frontend | |
| parent | 76566d32a88aa88e5b22e5209f9beb025ab6c299 (diff) | |
| parent | ef643072234477685614ed281e34ef77e45caad4 (diff) | |
| download | soryu-e11e7225861c3063f08461ac01005f3315d41be5.tar.gz soryu-e11e7225861c3063f08461ac01005f3315d41be5.zip | |
fix: resolve merge conflicts with master (integrate DOG features into compact header)makima/soryu-co-soryu---makima--resolve-merge-conflicts-i-f750d00d
- Resolved conflict in OrderDetail.tsx: kept PR compact header layout
with inline badges while adding DOG badge from master
- DOG selector in Actions section preserved from master
- orders.tsx correctly passes dogs prop to OrderDetail (auto-merged correctly)
- directives.tsx auto-merged correctly with DOG props for DirectiveDetail
- Frontend builds successfully with no TypeScript errors
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Diffstat (limited to 'makima/frontend')
| -rw-r--r-- | makima/frontend/src/components/contracts/ContractDetail.tsx | 1 | ||||
| -rw-r--r-- | makima/frontend/src/components/contracts/ContractList.tsx | 2 | ||||
| -rw-r--r-- | makima/frontend/src/components/contracts/PhaseProgressBar.tsx | 19 | ||||
| -rw-r--r-- | makima/frontend/src/components/directives/DOGList.tsx | 381 | ||||
| -rw-r--r-- | makima/frontend/src/components/directives/DirectiveDetail.tsx | 72 | ||||
| -rw-r--r-- | makima/frontend/src/components/orders/OrderDetail.tsx | 84 | ||||
| -rw-r--r-- | makima/frontend/src/hooks/useDogs.ts | 112 | ||||
| -rw-r--r-- | makima/frontend/src/lib/api.ts | 84 | ||||
| -rw-r--r-- | makima/frontend/src/routes/directives.tsx | 8 | ||||
| -rw-r--r-- | makima/frontend/src/routes/orders.tsx | 3 | ||||
| -rw-r--r-- | makima/frontend/tsconfig.tsbuildinfo | 2 |
11 files changed, 747 insertions, 21 deletions
diff --git a/makima/frontend/src/components/contracts/ContractDetail.tsx b/makima/frontend/src/components/contracts/ContractDetail.tsx index 46b2212..02c129e 100644 --- a/makima/frontend/src/components/contracts/ContractDetail.tsx +++ b/makima/frontend/src/components/contracts/ContractDetail.tsx @@ -195,6 +195,7 @@ export function ContractDetail({ <div className="mt-4 pt-4 border-t border-dashed border-[rgba(117,170,252,0.2)]"> <PhaseProgressBar currentPhase={contract.phase} + contractType={contract.contractType} onPhaseClick={onPhaseChange} /> </div> diff --git a/makima/frontend/src/components/contracts/ContractList.tsx b/makima/frontend/src/components/contracts/ContractList.tsx index 4388283..1eee6a3 100644 --- a/makima/frontend/src/components/contracts/ContractList.tsx +++ b/makima/frontend/src/components/contracts/ContractList.tsx @@ -153,7 +153,7 @@ export function ContractList({ )} <div className="flex items-center justify-between"> - <PhaseProgressBarCompact currentPhase={contract.phase} /> + <PhaseProgressBarCompact currentPhase={contract.phase} contractType={contract.contractType} /> <div className="flex items-center gap-3 text-[10px] font-mono text-[#555]"> {contract.fileCount > 0 && ( <span>{contract.fileCount} files</span> diff --git a/makima/frontend/src/components/contracts/PhaseProgressBar.tsx b/makima/frontend/src/components/contracts/PhaseProgressBar.tsx index 5ee7999..9589db9 100644 --- a/makima/frontend/src/components/contracts/PhaseProgressBar.tsx +++ b/makima/frontend/src/components/contracts/PhaseProgressBar.tsx @@ -1,7 +1,9 @@ -import type { ContractPhase } from "../../lib/api"; +import type { ContractPhase, ContractType } from "../../lib/api"; +import { getValidPhases } from "../../lib/api"; interface PhaseProgressBarProps { currentPhase: ContractPhase; + contractType?: ContractType; onPhaseClick?: (phase: ContractPhase) => void; readonly?: boolean; } @@ -46,14 +48,16 @@ const phaseColors: Record<ContractPhase, { active: string; inactive: string; com export function PhaseProgressBar({ currentPhase, + contractType, onPhaseClick, readonly = false, }: PhaseProgressBarProps) { - const currentIndex = phases.indexOf(currentPhase); + const visiblePhases = contractType ? getValidPhases(contractType) : phases; + const currentIndex = visiblePhases.indexOf(currentPhase); return ( <div className="flex items-center gap-1"> - {phases.map((phase, index) => { + {visiblePhases.map((phase, index) => { const isActive = phase === currentPhase; const isCompleted = index < currentIndex; const colors = phaseColors[phase]; @@ -97,7 +101,7 @@ export function PhaseProgressBar({ </button> {/* Connector line */} - {index < phases.length - 1 && ( + {index < visiblePhases.length - 1 && ( <div className={` w-8 h-0.5 mx-1 @@ -114,14 +118,17 @@ export function PhaseProgressBar({ export function PhaseProgressBarCompact({ currentPhase, + contractType, }: { currentPhase: ContractPhase; + contractType?: ContractType; }) { - const currentIndex = phases.indexOf(currentPhase); + const visiblePhases = contractType ? getValidPhases(contractType) : phases; + const currentIndex = visiblePhases.indexOf(currentPhase); return ( <div className="flex items-center gap-0.5"> - {phases.map((phase, index) => { + {visiblePhases.map((phase, index) => { const isActive = phase === currentPhase; const isCompleted = index < currentIndex; const colors = phaseColors[phase]; diff --git a/makima/frontend/src/components/directives/DOGList.tsx b/makima/frontend/src/components/directives/DOGList.tsx new file mode 100644 index 0000000..de59d7d --- /dev/null +++ b/makima/frontend/src/components/directives/DOGList.tsx @@ -0,0 +1,381 @@ +import { useState } from "react"; +import type { + DirectiveOrderGroup, + DOGStatus, + CreateDOGRequest, +} from "../../lib/api"; + +const DOG_STATUS_BADGE: Record<DOGStatus, { color: string; label: string }> = { + open: { color: "text-[#75aafc] border-[rgba(117,170,252,0.4)]", label: "OPEN" }, + in_progress: { color: "text-yellow-400 border-yellow-800", label: "IN PROGRESS" }, + done: { color: "text-emerald-400 border-emerald-800", label: "DONE" }, + archived: { color: "text-[#556677] border-[#2a3a5a]", label: "ARCHIVED" }, +}; + +const DOG_STATUS_OPTIONS: DOGStatus[] = ["open", "in_progress", "done", "archived"]; + +interface DOGListProps { + dogs: DirectiveOrderGroup[]; + loading: boolean; + onCreateDog: (req: CreateDOGRequest) => Promise<DirectiveOrderGroup | null>; + onUpdateDog: (dogId: string, req: { name?: string; description?: string | null; status?: DOGStatus }) => Promise<void>; + onDeleteDog: (dogId: string) => Promise<void>; + onPickUpOrders: (dogId: string) => Promise<any>; +} + +export function DOGList({ + dogs, + loading, + onCreateDog, + onUpdateDog, + onDeleteDog, + onPickUpOrders, +}: DOGListProps) { + const [showCreate, setShowCreate] = useState(false); + const [newName, setNewName] = useState(""); + const [newDesc, setNewDesc] = useState(""); + const [creating, setCreating] = useState(false); + + const handleCreate = async () => { + if (!newName.trim()) return; + setCreating(true); + try { + await onCreateDog({ + name: newName.trim(), + description: newDesc.trim() || null, + }); + setNewName(""); + setNewDesc(""); + setShowCreate(false); + } catch (e) { + console.error("Failed to create DOG:", e); + } finally { + setCreating(false); + } + }; + + if (loading) { + return ( + <div className="flex items-center justify-center py-8"> + <span className="text-[10px] font-mono text-[#556677]">Loading DOGs...</span> + </div> + ); + } + + return ( + <div className="flex flex-col gap-3"> + {/* Header + Create button */} + <div className="flex items-center justify-between"> + <span className="text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide"> + Order Groups ({dogs.length}) + </span> + <button + type="button" + onClick={() => setShowCreate(!showCreate)} + className="text-[10px] font-mono text-[#75aafc] hover:text-white border border-[rgba(117,170,252,0.3)] rounded px-2 py-0.5" + > + {showCreate ? "Cancel" : "+ New DOG"} + </button> + </div> + + {/* Create form */} + {showCreate && ( + <div className="border border-[rgba(117,170,252,0.2)] bg-[#0a1525] rounded p-3 flex flex-col gap-2"> + <div> + <label className="text-[9px] font-mono text-[#7788aa] uppercase tracking-wide block mb-1"> + Name * + </label> + <input + value={newName} + onChange={(e) => setNewName(e.target.value)} + onKeyDown={(e) => { + if (e.key === "Enter" && newName.trim()) handleCreate(); + if (e.key === "Escape") setShowCreate(false); + }} + placeholder="Group name..." + autoFocus + className="w-full bg-[#0a1628] border border-[rgba(117,170,252,0.2)] rounded px-2 py-1.5 text-[11px] font-mono text-white placeholder:text-[#445566]" + /> + </div> + <div> + <label className="text-[9px] font-mono text-[#7788aa] uppercase tracking-wide block mb-1"> + Description + </label> + <textarea + value={newDesc} + onChange={(e) => setNewDesc(e.target.value)} + placeholder="Optional description..." + rows={2} + className="w-full bg-[#0a1628] border border-[rgba(117,170,252,0.2)] rounded px-2 py-1.5 text-[11px] font-mono text-white resize-y placeholder:text-[#445566]" + /> + </div> + <div className="flex gap-1.5"> + <button + type="button" + onClick={handleCreate} + disabled={!newName.trim() || creating} + className="text-[10px] font-mono text-emerald-400 hover:text-emerald-300 border border-emerald-800 rounded px-2 py-0.5 disabled:opacity-50" + > + {creating ? "Creating..." : "Create"} + </button> + <button + type="button" + onClick={() => setShowCreate(false)} + className="text-[10px] font-mono text-[#7788aa] hover:text-white border border-[#2a3a5a] rounded px-2 py-0.5" + > + Cancel + </button> + </div> + </div> + )} + + {/* DOG list */} + {dogs.length === 0 ? ( + <div className="flex items-center justify-center py-6"> + <span className="text-[10px] font-mono text-[#556677] italic"> + No order groups yet + </span> + </div> + ) : ( + <div className="flex flex-col gap-2"> + {dogs.map((dog) => ( + <DOGCard + key={dog.id} + dog={dog} + onUpdate={onUpdateDog} + onDelete={onDeleteDog} + onPickUpOrders={onPickUpOrders} + /> + ))} + </div> + )} + </div> + ); +} + +function DOGCard({ + dog, + onUpdate, + onDelete, + onPickUpOrders, +}: { + dog: DirectiveOrderGroup; + onUpdate: (dogId: string, req: { name?: string; description?: string | null; status?: DOGStatus }) => Promise<void>; + onDelete: (dogId: string) => Promise<void>; + onPickUpOrders: (dogId: string) => Promise<any>; +}) { + const [editingName, setEditingName] = useState(false); + const [nameText, setNameText] = useState(dog.name); + const [editingDesc, setEditingDesc] = useState(false); + const [descText, setDescText] = useState(dog.description || ""); + const [pickingUp, setPickingUp] = useState(false); + const [pickUpResult, setPickUpResult] = useState<string | null>(null); + const [deleting, setDeleting] = useState(false); + + const badge = DOG_STATUS_BADGE[dog.status] || DOG_STATUS_BADGE.open; + + const handleNameSave = async () => { + if (nameText.trim() && nameText !== dog.name) { + await onUpdate(dog.id, { name: nameText.trim() }); + } + setEditingName(false); + }; + + const handleDescSave = async () => { + const newDesc = descText.trim() || null; + if (newDesc !== dog.description) { + await onUpdate(dog.id, { description: newDesc }); + } + setEditingDesc(false); + }; + + const handleStatusChange = async (status: DOGStatus) => { + await onUpdate(dog.id, { status }); + }; + + const handlePickUpOrders = async () => { + setPickingUp(true); + setPickUpResult(null); + try { + const result = await onPickUpOrders(dog.id); + if (result) { + setPickUpResult(result.message); + setTimeout(() => setPickUpResult(null), 5000); + } + } catch (e) { + setPickUpResult(e instanceof Error ? e.message : "Failed to plan orders"); + setTimeout(() => setPickUpResult(null), 5000); + } finally { + setPickingUp(false); + } + }; + + const handleDelete = async () => { + if (!window.confirm(`Delete DOG "${dog.name}"?`)) return; + setDeleting(true); + try { + await onDelete(dog.id); + } catch (e) { + console.error("Failed to delete DOG:", e); + setDeleting(false); + } + }; + + return ( + <div className="border border-[rgba(117,170,252,0.15)] bg-[#0a1525] rounded"> + {/* Name + Status */} + <div className="px-3 py-2 border-b border-[rgba(117,170,252,0.08)]"> + <div className="flex items-center justify-between mb-1.5"> + {editingName ? ( + <div className="flex-1 flex items-center gap-2 pr-2"> + <input + value={nameText} + onChange={(e) => setNameText(e.target.value)} + onKeyDown={(e) => { + if (e.key === "Enter") handleNameSave(); + if (e.key === "Escape") setEditingName(false); + }} + autoFocus + className="flex-1 bg-[#0a1628] border border-[rgba(117,170,252,0.2)] rounded px-2 py-0.5 text-[12px] font-mono text-white" + /> + <button + type="button" + onClick={handleNameSave} + className="text-[9px] font-mono text-emerald-400 hover:text-emerald-300" + > + [save] + </button> + <button + type="button" + onClick={() => setEditingName(false)} + className="text-[9px] font-mono text-[#556677] hover:text-white" + > + [cancel] + </button> + </div> + ) : ( + <span + className="text-[12px] font-mono text-white font-medium cursor-pointer hover:text-[#9bc3ff] truncate pr-2" + onClick={() => { + setNameText(dog.name); + setEditingName(true); + }} + > + {dog.name} + </span> + )} + <span className={`text-[9px] font-mono ${badge.color} border rounded px-1.5 py-0.5 shrink-0`}> + {badge.label} + </span> + </div> + + {/* Status selector */} + <div className="flex gap-1 flex-wrap"> + {DOG_STATUS_OPTIONS.map((s) => { + const sBadge = DOG_STATUS_BADGE[s]; + return ( + <button + key={s} + type="button" + onClick={() => handleStatusChange(s)} + className={`text-[9px] font-mono border rounded px-1.5 py-0.5 transition-colors ${ + s === dog.status + ? `${sBadge.color} bg-[rgba(117,170,252,0.1)]` + : "text-[#556677] border-[#2a3a5a] hover:text-[#7788aa]" + }`} + > + {sBadge.label} + </button> + ); + })} + </div> + </div> + + {/* Description */} + <div className="px-3 py-2 border-b border-[rgba(117,170,252,0.08)]"> + <div className="flex items-center justify-between mb-1"> + <span className="text-[9px] font-mono text-[#7788aa] uppercase tracking-wide"> + Description + </span> + {!editingDesc && ( + <button + type="button" + onClick={() => { + setDescText(dog.description || ""); + setEditingDesc(true); + }} + className="text-[8px] font-mono text-[#556677] hover:text-[#75aafc]" + > + [edit] + </button> + )} + </div> + {editingDesc ? ( + <div className="flex flex-col gap-1"> + <textarea + value={descText} + onChange={(e) => setDescText(e.target.value)} + className="w-full bg-[#0a1628] border border-[rgba(117,170,252,0.2)] rounded px-2 py-1 text-[10px] font-mono text-white resize-y min-h-[40px]" + rows={2} + autoFocus + /> + <div className="flex gap-1"> + <button + type="button" + onClick={handleDescSave} + className="text-[9px] font-mono text-emerald-400 hover:text-emerald-300 border border-emerald-800 rounded px-1.5 py-0.5" + > + Save + </button> + <button + type="button" + onClick={() => setEditingDesc(false)} + className="text-[9px] font-mono text-[#7788aa] hover:text-white border border-[#2a3a5a] rounded px-1.5 py-0.5" + > + Cancel + </button> + </div> + </div> + ) : ( + <p className="text-[10px] font-mono text-[#c0d0e0] whitespace-pre-wrap"> + {dog.description || <span className="text-[#556677] italic">No description</span>} + </p> + )} + </div> + + {/* Actions */} + <div className="px-3 py-2 flex items-center gap-2"> + <button + type="button" + onClick={handlePickUpOrders} + disabled={pickingUp} + className="text-[10px] font-mono text-[#c084fc] hover:text-[#d8b4fe] border border-[rgba(192,132,252,0.3)] rounded px-2 py-0.5 disabled:opacity-50" + > + {pickingUp ? "Planning..." : "Plan Orders"} + </button> + <button + type="button" + onClick={handleDelete} + disabled={deleting} + className="text-[10px] font-mono text-red-400 hover:text-red-300 border border-red-800 rounded px-2 py-0.5 ml-auto disabled:opacity-50" + > + {deleting ? "Deleting..." : "Delete"} + </button> + </div> + + {/* Pick-up result */} + {pickUpResult && ( + <div className="mx-3 mb-2 px-2 py-1.5 bg-[#1a1030] border border-[rgba(192,132,252,0.2)] rounded"> + <span className="text-[10px] font-mono text-[#c084fc]">{pickUpResult}</span> + </div> + )} + + {/* Metadata */} + <div className="px-3 py-1.5 border-t border-[rgba(117,170,252,0.05)]"> + <span className="text-[8px] font-mono text-[#445566]"> + Created {new Date(dog.createdAt).toLocaleDateString()} + </span> + </div> + </div> + ); +} diff --git a/makima/frontend/src/components/directives/DirectiveDetail.tsx b/makima/frontend/src/components/directives/DirectiveDetail.tsx index 5f3489a..e3302e4 100644 --- a/makima/frontend/src/components/directives/DirectiveDetail.tsx +++ b/makima/frontend/src/components/directives/DirectiveDetail.tsx @@ -1,9 +1,10 @@ import { useState, useMemo, useEffect, useRef } from "react"; -import type { DirectiveWithSteps, DirectiveStatus, UpdateDirectiveRequest } from "../../lib/api"; +import type { DirectiveWithSteps, DirectiveStatus, UpdateDirectiveRequest, DirectiveOrderGroup, CreateDOGRequest, UpdateDOGRequest } from "../../lib/api"; import { DirectiveDAG } from "./DirectiveDAG"; import type { SpecializedStep } from "./DirectiveDAG"; import { DirectiveLogStream } from "./DirectiveLogStream"; import { TaskSlideOutPanel } from "./TaskSlideOutPanel"; +import { DOGList } from "./DOGList"; import { useMultiTaskSubscription } from "../../hooks/useMultiTaskSubscription"; import { useSupervisorQuestions } from "../../contexts/SupervisorQuestionsContext"; @@ -30,6 +31,12 @@ interface DirectiveDetailProps { onCleanup: () => void; onPickUpOrders: () => Promise<{ message: string; orderCount: number; taskId: string | null } | null>; onCreatePR: () => Promise<void>; + dogs: DirectiveOrderGroup[]; + dogsLoading: boolean; + onCreateDog: (req: CreateDOGRequest) => Promise<DirectiveOrderGroup | null>; + onUpdateDog: (dogId: string, req: UpdateDOGRequest) => Promise<void>; + onDeleteDog: (dogId: string) => Promise<void>; + onPickUpDogOrders: (dogId: string) => Promise<any>; } export function DirectiveDetail({ @@ -47,7 +54,14 @@ export function DirectiveDetail({ onCleanup, onPickUpOrders, onCreatePR, + dogs, + dogsLoading, + onCreateDog, + onUpdateDog, + onDeleteDog, + onPickUpDogOrders, }: DirectiveDetailProps) { + const [activeTab, setActiveTab] = useState<"steps" | "dogs">("steps"); const [editingGoal, setEditingGoal] = useState(false); const [goalText, setGoalText] = useState(directive.goal); const [visibleTaskIds, setVisibleTaskIds] = useState<Set<string> | null>(null); @@ -437,21 +451,53 @@ export function DirectiveDetail({ )} </div> - {/* DAG */} - <div className="px-4 py-3 flex-1"> - <span className="text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide block mb-2"> + {/* Tab bar */} + <div className="flex items-center gap-0 border-b border-[rgba(117,170,252,0.1)] px-4"> + <button + type="button" + onClick={() => setActiveTab("steps")} + className={`px-3 py-2 text-[10px] font-mono uppercase tracking-wide transition-colors + ${activeTab === "steps" ? "text-[#dbe7ff] border-b-2 border-[#75aafc]" : "text-[#556677] hover:text-[#9bc3ff]"} + `} + > Steps ({totalSteps}) - </span> - <DirectiveDAG - steps={directive.steps} - specializedSteps={specializedSteps} - onComplete={onCompleteStep} - onFail={onFailStep} - onSkip={onSkipStep} - onViewTask={handleViewTask} - /> + </button> + <button + type="button" + onClick={() => setActiveTab("dogs")} + className={`px-3 py-2 text-[10px] font-mono uppercase tracking-wide transition-colors + ${activeTab === "dogs" ? "text-[#dbe7ff] border-b-2 border-[#75aafc]" : "text-[#556677] hover:text-[#9bc3ff]"} + `} + > + DOGs ({dogs.length}) + </button> </div> + {/* Tab content */} + {activeTab === "steps" ? ( + <div className="px-4 py-3 flex-1"> + <DirectiveDAG + steps={directive.steps} + specializedSteps={specializedSteps} + onComplete={onCompleteStep} + onFail={onFailStep} + onSkip={onSkipStep} + onViewTask={handleViewTask} + /> + </div> + ) : ( + <div className="px-4 py-3 flex-1"> + <DOGList + dogs={dogs} + loading={dogsLoading} + onCreateDog={onCreateDog} + onUpdateDog={onUpdateDog} + onDeleteDog={onDeleteDog} + onPickUpOrders={onPickUpDogOrders} + /> + </div> + )} + {/* Log Stream */} {taskMap.size > 0 && ( <div className="px-4 py-3 border-t border-[rgba(117,170,252,0.1)]"> diff --git a/makima/frontend/src/components/orders/OrderDetail.tsx b/makima/frontend/src/components/orders/OrderDetail.tsx index 338cc60..ebc8124 100644 --- a/makima/frontend/src/components/orders/OrderDetail.tsx +++ b/makima/frontend/src/components/orders/OrderDetail.tsx @@ -6,6 +6,7 @@ import type { OrderType, UpdateOrderRequest, DirectiveSummary, + DirectiveOrderGroup, } from "../../lib/api"; const STATUS_BADGE: Record<OrderStatus, { color: string; label: string }> = { @@ -37,6 +38,7 @@ const STATUS_OPTIONS: OrderStatus[] = ["open", "in_progress", "under_review", "d interface OrderDetailProps { order: Order; directives: DirectiveSummary[]; + dogs: DirectiveOrderGroup[]; onUpdate: (req: UpdateOrderRequest) => Promise<void>; onDelete: () => void; onLinkDirective: (directiveId: string) => Promise<void>; @@ -47,6 +49,7 @@ interface OrderDetailProps { export function OrderDetail({ order, directives, + dogs, onUpdate, onDelete, onLinkDirective, @@ -61,6 +64,7 @@ export function OrderDetail({ const [labelsText, setLabelsText] = useState(order.labels.join(", ")); const [showLinkDirective, setShowLinkDirective] = useState(false); const [directiveSearch, setDirectiveSearch] = useState(""); + const [showDogSelector, setShowDogSelector] = useState(false); const badge = STATUS_BADGE[order.status] || STATUS_BADGE.open; const currentPriority = PRIORITY_OPTIONS.find((p) => p.value === order.priority) || PRIORITY_OPTIONS[4]; @@ -192,6 +196,11 @@ export function OrderDetail({ step:{order.directiveStepId.slice(0, 8)} </span> )} + {order.directiveId && ( + <span className="text-[10px] font-mono text-[#75aafc] border border-[rgba(117,170,252,0.3)] rounded px-1.5 py-0.5 truncate max-w-[120px]"> + DOG: {order.dogId ? (dogs.find((d) => d.id === order.dogId)?.name || order.dogId.slice(0, 8) + "...") : "None"} + </span> + )} <button type="button" onClick={onDelete} @@ -498,6 +507,81 @@ export function OrderDetail({ )} </div> + {/* Assign to DOG */} + {order.directiveId && ( + <div> + <div className="flex items-center gap-1.5"> + <button + type="button" + onClick={() => setShowDogSelector(!showDogSelector)} + className="text-[10px] font-mono text-[#75aafc] hover:text-white border border-[rgba(117,170,252,0.3)] rounded px-2 py-1 flex-1 text-left" + > + {order.dogId ? "Change DOG" : "Assign to DOG"} + </button> + {order.dogId && ( + <button + type="button" + onClick={() => onUpdate({ dogId: null })} + className="text-[10px] font-mono text-red-400 hover:text-red-300 border border-red-800 rounded px-2 py-1" + title="Remove DOG assignment" + > + Unlink + </button> + )} + </div> + {showDogSelector && ( + <div className="mt-1 border border-[rgba(117,170,252,0.2)] bg-[#0a1525] rounded"> + <div className="max-h-32 overflow-y-auto"> + {dogs.length === 0 ? ( + <div className="px-3 py-2 text-[10px] font-mono text-[#556677]"> + No DOGs available for this directive + </div> + ) : ( + dogs.map((d) => { + const isAssigned = d.id === order.dogId; + const statusColors: Record<string, string> = { + open: "text-[#75aafc] border-[rgba(117,170,252,0.4)]", + in_progress: "text-yellow-400 border-yellow-800", + done: "text-emerald-400 border-emerald-800", + archived: "text-[#556677] border-[#2a3a5a]", + }; + const sColor = statusColors[d.status] || statusColors.open; + return ( + <button + key={d.id} + type="button" + onClick={async () => { + await onUpdate({ dogId: d.id }); + setShowDogSelector(false); + }} + className={`w-full text-left px-3 py-1.5 text-[10px] font-mono hover:bg-[rgba(117,170,252,0.1)] border-b border-[rgba(117,170,252,0.1)] last:border-b-0 ${ + isAssigned ? "bg-[rgba(117,170,252,0.08)] text-white" : "text-[#9bc3ff]" + }`} + > + <div className="flex items-center gap-1.5"> + <span className={`shrink-0 text-[8px] font-mono ${sColor} border rounded px-1 py-0.5 uppercase`}> + {d.status} + </span> + <span className="truncate">{d.name}</span> + {isAssigned && ( + <span className="shrink-0 text-[8px] text-emerald-400">current</span> + )} + </div> + {d.description && ( + <div className="text-[8px] text-[#556677] truncate mt-0.5"> + {d.description} + </div> + )} + </button> + ); + }) + )} + </div> + </div> + )} + </div> + )} + {/* Convert to Directive Step */} {!order.directiveStepId && order.directiveId && ( <button diff --git a/makima/frontend/src/hooks/useDogs.ts b/makima/frontend/src/hooks/useDogs.ts new file mode 100644 index 0000000..819219e --- /dev/null +++ b/makima/frontend/src/hooks/useDogs.ts @@ -0,0 +1,112 @@ +import { useState, useEffect, useCallback } from "react"; +import { + type DirectiveOrderGroup, + type CreateDOGRequest, + type UpdateDOGRequest, + listDogs, + createDog, + getDog, + updateDog as updateDogApi, + deleteDog as deleteDogApi, + pickUpDogOrders as pickUpDogOrdersApi, +} from "../lib/api"; + +export function useDogs(directiveId: string | undefined) { + const [dogs, setDogs] = useState<DirectiveOrderGroup[]>([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState<string | null>(null); + + const refresh = useCallback(async () => { + if (!directiveId) return; + try { + setLoading(true); + setError(null); + const res = await listDogs(directiveId); + setDogs(res.dogs); + } catch (e) { + setError(e instanceof Error ? e.message : "Failed to load DOGs"); + } finally { + setLoading(false); + } + }, [directiveId]); + + useEffect(() => { + refresh(); + }, [refresh]); + + const create = useCallback(async (req: CreateDOGRequest) => { + if (!directiveId) return null; + const dog = await createDog(directiveId, req); + await refresh(); + return dog; + }, [directiveId, refresh]); + + const update = useCallback(async (dogId: string, req: UpdateDOGRequest) => { + if (!directiveId) return; + await updateDogApi(directiveId, dogId, req); + await refresh(); + }, [directiveId, refresh]); + + const remove = useCallback(async (dogId: string) => { + if (!directiveId) return; + await deleteDogApi(directiveId, dogId); + await refresh(); + }, [directiveId, refresh]); + + const pickUpOrders = useCallback(async (dogId: string) => { + if (!directiveId) return null; + const result = await pickUpDogOrdersApi(directiveId, dogId); + await refresh(); + return result; + }, [directiveId, refresh]); + + return { dogs, loading, error, refresh, create, update, remove, pickUpOrders }; +} + +export function useDog(directiveId: string | undefined, dogId: string | undefined) { + const [dog, setDog] = useState<DirectiveOrderGroup | null>(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState<string | null>(null); + + const refresh = useCallback(async () => { + if (!directiveId || !dogId) return; + try { + setLoading(true); + setError(null); + const d = await getDog(directiveId, dogId); + setDog(d); + } catch (e) { + setError(e instanceof Error ? e.message : "Failed to load DOG"); + } finally { + setLoading(false); + } + }, [directiveId, dogId]); + + useEffect(() => { + setDog(null); + setError(null); + setLoading(true); + refresh(); + }, [directiveId, dogId]); // eslint-disable-line react-hooks/exhaustive-deps + + const update = useCallback(async (req: UpdateDOGRequest) => { + if (!directiveId || !dogId) return; + const d = await updateDogApi(directiveId, dogId, req); + setDog(d); + return d; + }, [directiveId, dogId]); + + const remove = useCallback(async () => { + if (!directiveId || !dogId) return; + await deleteDogApi(directiveId, dogId); + }, [directiveId, dogId]); + + const pickUpOrders = useCallback(async () => { + if (!directiveId || !dogId) return null; + const result = await pickUpDogOrdersApi(directiveId, dogId); + await refresh(); + return result; + }, [directiveId, dogId, refresh]); + + return { dog, loading, error, refresh, update, remove, pickUpOrders }; +} diff --git a/makima/frontend/src/lib/api.ts b/makima/frontend/src/lib/api.ts index 4923c1d..7968583 100644 --- a/makima/frontend/src/lib/api.ts +++ b/makima/frontend/src/lib/api.ts @@ -3387,6 +3387,85 @@ export async function pickUpOrders(directiveId: string): Promise<PickUpOrdersRes } // ============================================================================= +// Directive Order Groups (DOGs) API +// ============================================================================= + +export type DOGStatus = "open" | "in_progress" | "done" | "archived"; + +export interface DirectiveOrderGroup { + id: string; + directiveId: string; + ownerId: string; + name: string; + description: string | null; + status: DOGStatus; + createdAt: string; + updatedAt: string; +} + +export interface DOGListResponse { + dogs: DirectiveOrderGroup[]; +} + +export interface CreateDOGRequest { + name: string; + description?: string | null; +} + +export interface UpdateDOGRequest { + name?: string; + description?: string | null; + status?: DOGStatus; +} + +export async function listDogs(directiveId: string): Promise<DOGListResponse> { + const res = await authFetch(`${API_BASE}/api/v1/directives/${directiveId}/dogs`); + if (!res.ok) throw new Error(`Failed to list DOGs: ${res.statusText}`); + return res.json(); +} + +export async function createDog(directiveId: string, req: CreateDOGRequest): Promise<DirectiveOrderGroup> { + const res = await authFetch(`${API_BASE}/api/v1/directives/${directiveId}/dogs`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(req), + }); + if (!res.ok) throw new Error(`Failed to create DOG: ${res.statusText}`); + return res.json(); +} + +export async function getDog(directiveId: string, dogId: string): Promise<DirectiveOrderGroup> { + const res = await authFetch(`${API_BASE}/api/v1/directives/${directiveId}/dogs/${dogId}`); + if (!res.ok) throw new Error(`Failed to get DOG: ${res.statusText}`); + return res.json(); +} + +export async function updateDog(directiveId: string, dogId: string, req: UpdateDOGRequest): Promise<DirectiveOrderGroup> { + const res = await authFetch(`${API_BASE}/api/v1/directives/${directiveId}/dogs/${dogId}`, { + method: "PATCH", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(req), + }); + if (!res.ok) throw new Error(`Failed to update DOG: ${res.statusText}`); + return res.json(); +} + +export async function deleteDog(directiveId: string, dogId: string): Promise<void> { + const res = await authFetch(`${API_BASE}/api/v1/directives/${directiveId}/dogs/${dogId}`, { + method: "DELETE", + }); + if (!res.ok) throw new Error(`Failed to delete DOG: ${res.statusText}`); +} + +export async function pickUpDogOrders(directiveId: string, dogId: string): Promise<PickUpOrdersResponse> { + const res = await authFetch(`${API_BASE}/api/v1/directives/${directiveId}/dogs/${dogId}/pick-up-orders`, { + method: "POST", + }); + if (!res.ok) throw new Error(`Failed to pick up DOG orders: ${res.statusText}`); + return res.json(); +} + +// ============================================================================= // Orders API // ============================================================================= @@ -3406,6 +3485,7 @@ export interface Order { directiveId: string | null; directiveStepId: string | null; directiveName: string | null; + dogId: string | null; repositoryUrl: string | null; createdAt: string; updatedAt: string; @@ -3424,6 +3504,7 @@ export interface CreateOrderRequest { orderType?: OrderType; labels?: string[]; directiveId: string; + dogId?: string | null; repositoryUrl?: string | null; } @@ -3436,6 +3517,7 @@ export interface UpdateOrderRequest { labels?: string[]; directiveId?: string | null; directiveStepId?: string | null; + dogId?: string | null; repositoryUrl?: string | null; } @@ -3445,6 +3527,7 @@ export async function listOrders( priority?: OrderPriority, directiveId?: string, search?: string, + dogId?: string, ): Promise<OrderListResponse> { const params = new URLSearchParams(); if (status) params.set("status", status); @@ -3452,6 +3535,7 @@ export async function listOrders( if (priority) params.set("priority", priority); if (directiveId) params.set("directiveId", directiveId); if (search) params.set("search", search); + if (dogId) params.set("dogId", dogId); const qs = params.toString(); const res = await authFetch(`${API_BASE}/api/v1/orders${qs ? `?${qs}` : ""}`); if (!res.ok) throw new Error(`Failed to list orders: ${res.statusText}`); diff --git a/makima/frontend/src/routes/directives.tsx b/makima/frontend/src/routes/directives.tsx index f1b430d..8de0335 100644 --- a/makima/frontend/src/routes/directives.tsx +++ b/makima/frontend/src/routes/directives.tsx @@ -4,6 +4,7 @@ import { Masthead } from "../components/Masthead"; import { DirectiveList } from "../components/directives/DirectiveList"; import { DirectiveDetail } from "../components/directives/DirectiveDetail"; import { useDirectives, useDirective } from "../hooks/useDirectives"; +import { useDogs } from "../hooks/useDogs"; import { useAuth } from "../contexts/AuthContext"; import { getRepositorySuggestions, startDirective, pauseDirective, updateDirective, type RepositoryHistoryEntry, type DirectiveSummary } from "../lib/api"; @@ -13,6 +14,7 @@ export default function DirectivesPage() { const { id: selectedId } = useParams<{ id: string }>(); const { directives, loading: listLoading, create, remove, refresh: refreshList } = useDirectives(); const { directive, refresh: refreshDetail, update, start, pause, advance, completeStep, failStep, skipStep, updateGoal, cleanup, pickUpOrders, createPR } = useDirective(selectedId); + const { dogs, loading: dogsLoading, create: createDog, update: updateDog, remove: removeDog, pickUpOrders: pickUpDogOrders } = useDogs(selectedId); const [showCreate, setShowCreate] = useState(false); const [newTitle, setNewTitle] = useState(""); @@ -259,6 +261,12 @@ export default function DirectivesPage() { onCleanup={cleanup} onPickUpOrders={pickUpOrders} onCreatePR={createPR} + dogs={dogs} + dogsLoading={dogsLoading} + onCreateDog={createDog} + onUpdateDog={updateDog} + onDeleteDog={removeDog} + onPickUpDogOrders={pickUpDogOrders} /> ) : ( <div className="flex-1 flex items-center justify-center h-full"> diff --git a/makima/frontend/src/routes/orders.tsx b/makima/frontend/src/routes/orders.tsx index 5744bdd..cc1e1ad 100644 --- a/makima/frontend/src/routes/orders.tsx +++ b/makima/frontend/src/routes/orders.tsx @@ -5,6 +5,7 @@ import { OrderList } from "../components/orders/OrderList"; import { OrderDetail } from "../components/orders/OrderDetail"; import { useOrders, useOrder } from "../hooks/useOrders"; import { useDirectives } from "../hooks/useDirectives"; +import { useDogs } from "../hooks/useDogs"; import { useAuth } from "../contexts/AuthContext"; import { updateOrder, deleteOrder } from "../lib/api"; import type { Order, OrderStatus, OrderType, OrderPriority } from "../lib/api"; @@ -19,6 +20,7 @@ export default function OrdersPage() { const { orders, loading: listLoading, create, refresh: refreshList } = useOrders(statusFilter, typeFilter); const { order, refresh: refreshDetail, update, remove: removeOrder, linkDirective, convertToStep } = useOrder(selectedId); const { directives } = useDirectives(); + const { dogs } = useDogs(order?.directiveId ?? undefined); const [showCreate, setShowCreate] = useState(false); const [newTitle, setNewTitle] = useState(""); @@ -256,6 +258,7 @@ export default function OrdersPage() { <OrderDetail order={order} directives={directives} + dogs={dogs} onUpdate={handleUpdate} onDelete={handleDelete} onLinkDirective={handleLinkDirective} diff --git a/makima/frontend/tsconfig.tsbuildinfo b/makima/frontend/tsconfig.tsbuildinfo index a063be7..59abd45 100644 --- a/makima/frontend/tsconfig.tsbuildinfo +++ b/makima/frontend/tsconfig.tsbuildinfo @@ -1 +1 @@ -{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/components/gridoverlay.tsx","./src/components/japanesehovertext.tsx","./src/components/logo.tsx","./src/components/masthead.tsx","./src/components/navstrip.tsx","./src/components/phaseconfirmationnotification.tsx","./src/components/protectedroute.tsx","./src/components/rewritelink.tsx","./src/components/simplemarkdown.tsx","./src/components/supervisorquestionnotification.tsx","./src/components/charts/chartrenderer.tsx","./src/components/contracts/commandmodepanel.tsx","./src/components/contracts/contractcliinput.tsx","./src/components/contracts/contractcontextmenu.tsx","./src/components/contracts/contractdetail.tsx","./src/components/contracts/contractlist.tsx","./src/components/contracts/phasebadge.tsx","./src/components/contracts/phaseconfirmationmodal.tsx","./src/components/contracts/phasedeliverablespanel.tsx","./src/components/contracts/phasehint.tsx","./src/components/contracts/phaseprogressbar.tsx","./src/components/contracts/quickactionbuttons.tsx","./src/components/contracts/repositorypanel.tsx","./src/components/contracts/taskderivationpreview.tsx","./src/components/directives/directivedag.tsx","./src/components/directives/directivedetail.tsx","./src/components/directives/directivelist.tsx","./src/components/directives/directivelogstream.tsx","./src/components/directives/orchestratorstepnode.tsx","./src/components/directives/stepnode.tsx","./src/components/directives/taskslideoutpanel.tsx","./src/components/files/bodyrenderer.tsx","./src/components/files/cliinput.tsx","./src/components/files/conflictnotification.tsx","./src/components/files/elementcontextmenu.tsx","./src/components/files/filedetail.tsx","./src/components/files/filelist.tsx","./src/components/files/reposyncindicator.tsx","./src/components/files/updatenotification.tsx","./src/components/files/versionhistorydropdown.tsx","./src/components/history/checkpointcard.tsx","./src/components/history/checkpointlist.tsx","./src/components/history/conversationmessage.tsx","./src/components/history/conversationview.tsx","./src/components/history/historyfilters.tsx","./src/components/history/resumecontrols.tsx","./src/components/history/timelineeventcard.tsx","./src/components/history/timelinelist.tsx","./src/components/history/index.ts","./src/components/listen/contractpickermodal.tsx","./src/components/listen/controlpanel.tsx","./src/components/listen/discusscontractmodal.tsx","./src/components/listen/speakerpanel.tsx","./src/components/listen/transcriptanalysispanel.tsx","./src/components/listen/transcriptpanel.tsx","./src/components/mesh/branchtaskmodal.tsx","./src/components/mesh/contractcompletequestion.tsx","./src/components/mesh/directoryinput.tsx","./src/components/mesh/gitactionspanel.tsx","./src/components/mesh/inlinesubtaskeditor.tsx","./src/components/mesh/mergeconflictresolver.tsx","./src/components/mesh/overlaydiffviewer.tsx","./src/components/mesh/prpreview.tsx","./src/components/mesh/patcheslistpanel.tsx","./src/components/mesh/subtasktree.tsx","./src/components/mesh/taskdetail.tsx","./src/components/mesh/tasklist.tsx","./src/components/mesh/taskoutput.tsx","./src/components/mesh/tasktree.tsx","./src/components/mesh/unifiedmeshchatinput.tsx","./src/components/mesh/worktreefilespanel.tsx","./src/components/orders/orderdetail.tsx","./src/components/orders/orderlist.tsx","./src/contexts/authcontext.tsx","./src/contexts/supervisorquestionscontext.tsx","./src/hooks/usecontracts.ts","./src/hooks/usedirectives.ts","./src/hooks/usefilesubscription.ts","./src/hooks/usefiles.ts","./src/hooks/usemeshchathistory.ts","./src/hooks/usemicrophone.ts","./src/hooks/usemultitasksubscription.ts","./src/hooks/useorders.ts","./src/hooks/usespeakwebsocket.ts","./src/hooks/usetasksubscription.ts","./src/hooks/usetasks.ts","./src/hooks/usetextscramble.ts","./src/hooks/useversionhistory.ts","./src/hooks/usewebsocket.ts","./src/lib/api.ts","./src/lib/listenapi.ts","./src/lib/markdown.ts","./src/lib/supabase.ts","./src/routes/_index.tsx","./src/routes/contract-file.tsx","./src/routes/contracts.tsx","./src/routes/daemons.tsx","./src/routes/directives.tsx","./src/routes/files.tsx","./src/routes/history.tsx","./src/routes/listen.tsx","./src/routes/login.tsx","./src/routes/mesh.tsx","./src/routes/orders.tsx","./src/routes/settings.tsx","./src/routes/speak.tsx","./src/types/messages.ts"],"version":"5.9.3"}
\ No newline at end of file +{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/components/gridoverlay.tsx","./src/components/japanesehovertext.tsx","./src/components/logo.tsx","./src/components/masthead.tsx","./src/components/navstrip.tsx","./src/components/phaseconfirmationnotification.tsx","./src/components/protectedroute.tsx","./src/components/rewritelink.tsx","./src/components/simplemarkdown.tsx","./src/components/supervisorquestionnotification.tsx","./src/components/charts/chartrenderer.tsx","./src/components/contracts/commandmodepanel.tsx","./src/components/contracts/contractcliinput.tsx","./src/components/contracts/contractcontextmenu.tsx","./src/components/contracts/contractdetail.tsx","./src/components/contracts/contractlist.tsx","./src/components/contracts/phasebadge.tsx","./src/components/contracts/phaseconfirmationmodal.tsx","./src/components/contracts/phasedeliverablespanel.tsx","./src/components/contracts/phasehint.tsx","./src/components/contracts/phaseprogressbar.tsx","./src/components/contracts/quickactionbuttons.tsx","./src/components/contracts/repositorypanel.tsx","./src/components/contracts/taskderivationpreview.tsx","./src/components/directives/doglist.tsx","./src/components/directives/directivecontextmenu.tsx","./src/components/directives/directivedag.tsx","./src/components/directives/directivedetail.tsx","./src/components/directives/directivelist.tsx","./src/components/directives/directivelogstream.tsx","./src/components/directives/orchestratorstepnode.tsx","./src/components/directives/stepnode.tsx","./src/components/directives/taskslideoutpanel.tsx","./src/components/files/bodyrenderer.tsx","./src/components/files/cliinput.tsx","./src/components/files/conflictnotification.tsx","./src/components/files/elementcontextmenu.tsx","./src/components/files/filedetail.tsx","./src/components/files/filelist.tsx","./src/components/files/reposyncindicator.tsx","./src/components/files/updatenotification.tsx","./src/components/files/versionhistorydropdown.tsx","./src/components/history/checkpointcard.tsx","./src/components/history/checkpointlist.tsx","./src/components/history/conversationmessage.tsx","./src/components/history/conversationview.tsx","./src/components/history/historyfilters.tsx","./src/components/history/resumecontrols.tsx","./src/components/history/timelineeventcard.tsx","./src/components/history/timelinelist.tsx","./src/components/history/index.ts","./src/components/listen/contractpickermodal.tsx","./src/components/listen/controlpanel.tsx","./src/components/listen/discusscontractmodal.tsx","./src/components/listen/speakerpanel.tsx","./src/components/listen/transcriptanalysispanel.tsx","./src/components/listen/transcriptpanel.tsx","./src/components/mesh/branchtaskmodal.tsx","./src/components/mesh/contractcompletequestion.tsx","./src/components/mesh/directoryinput.tsx","./src/components/mesh/gitactionspanel.tsx","./src/components/mesh/inlinesubtaskeditor.tsx","./src/components/mesh/mergeconflictresolver.tsx","./src/components/mesh/overlaydiffviewer.tsx","./src/components/mesh/prpreview.tsx","./src/components/mesh/patcheslistpanel.tsx","./src/components/mesh/subtasktree.tsx","./src/components/mesh/taskdetail.tsx","./src/components/mesh/tasklist.tsx","./src/components/mesh/taskoutput.tsx","./src/components/mesh/tasktree.tsx","./src/components/mesh/unifiedmeshchatinput.tsx","./src/components/mesh/worktreefilespanel.tsx","./src/components/orders/ordercontextmenu.tsx","./src/components/orders/orderdetail.tsx","./src/components/orders/orderlist.tsx","./src/contexts/authcontext.tsx","./src/contexts/supervisorquestionscontext.tsx","./src/hooks/usecontracts.ts","./src/hooks/usedirectives.ts","./src/hooks/usedogs.ts","./src/hooks/usefilesubscription.ts","./src/hooks/usefiles.ts","./src/hooks/usemeshchathistory.ts","./src/hooks/usemicrophone.ts","./src/hooks/usemultitasksubscription.ts","./src/hooks/useorders.ts","./src/hooks/usespeakwebsocket.ts","./src/hooks/usetasksubscription.ts","./src/hooks/usetasks.ts","./src/hooks/usetextscramble.ts","./src/hooks/useversionhistory.ts","./src/hooks/usewebsocket.ts","./src/lib/api.ts","./src/lib/listenapi.ts","./src/lib/markdown.ts","./src/lib/supabase.ts","./src/routes/_index.tsx","./src/routes/contract-file.tsx","./src/routes/contracts.tsx","./src/routes/daemons.tsx","./src/routes/directives.tsx","./src/routes/files.tsx","./src/routes/history.tsx","./src/routes/listen.tsx","./src/routes/login.tsx","./src/routes/mesh.tsx","./src/routes/orders.tsx","./src/routes/settings.tsx","./src/routes/speak.tsx","./src/types/messages.ts"],"version":"5.9.3"}
\ No newline at end of file |
