1 files changed, 59 insertions, 13 deletions
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)]">