Fix: Cleanup old chain code

1 files changed, 125 insertions, 0 deletions

diff --git a/makima/frontend/src/hooks/useDirectiveDetail.ts b/makima/frontend/src/hooks/useDirectiveDetail.ts
new file mode 100644
index 0000000..1167242
--- /dev/null
+++ b/makima/frontend/src/hooks/useDirectiveDetail.ts
@@ -0,0 +1,125 @@
+import { useState, useCallback, useEffect } from "react";
+import {
+  getDirective,
+  getDirectiveGraph,
+  startDirective,
+  pauseDirective,
+  resumeDirective,
+  stopDirective,
+  type DirectiveWithProgress,
+  type DirectiveGraphResponse,
+  type StartDirectiveResponse,
+} from "../lib/api";
+
+interface UseDirectiveDetailResult {
+  directive: DirectiveWithProgress | null;
+  graph: DirectiveGraphResponse | null;
+  loading: boolean;
+  error: string | null;
+  refresh: () => Promise<void>;
+  start: () => Promise<StartDirectiveResponse | null>;
+  pause: () => Promise<boolean>;
+  resume: () => Promise<boolean>;
+  stop: () => Promise<boolean>;
+}
+
+export function useDirectiveDetail(directiveId: string | undefined): UseDirectiveDetailResult {
+  const [directive, setDirective] = useState<DirectiveWithProgress | null>(null);
+  const [graph, setGraph] = useState<DirectiveGraphResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchDetail = useCallback(async () => {
+    if (!directiveId) {
+      setDirective(null);
+      setGraph(null);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    try {
+      const [d, g] = await Promise.all([
+        getDirective(directiveId),
+        getDirectiveGraph(directiveId).catch(() => null),
+      ]);
+      setDirective(d);
+      setGraph(g);
+    } catch (err) {
+      console.error("Failed to fetch directive detail:", err);
+      setError(err instanceof Error ? err.message : "Failed to fetch directive");
+      setDirective(null);
+      setGraph(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [directiveId]);
+
+  useEffect(() => {
+    fetchDetail();
+  }, [fetchDetail]);
+
+  const start = useCallback(async (): Promise<StartDirectiveResponse | null> => {
+    if (!directiveId) return null;
+    try {
+      const response = await startDirective(directiveId);
+      await fetchDetail();
+      return response;
+    } catch (err) {
+      console.error("Failed to start directive:", err);
+      setError(err instanceof Error ? err.message : "Failed to start directive");
+      return null;
+    }
+  }, [directiveId, fetchDetail]);
+
+  const pause = useCallback(async (): Promise<boolean> => {
+    if (!directiveId) return false;
+    try {
+      await pauseDirective(directiveId);
+      await fetchDetail();
+      return true;
+    } catch (err) {
+      console.error("Failed to pause directive:", err);
+      setError(err instanceof Error ? err.message : "Failed to pause directive");
+      return false;
+    }
+  }, [directiveId, fetchDetail]);
+
+  const resume = useCallback(async (): Promise<boolean> => {
+    if (!directiveId) return false;
+    try {
+      await resumeDirective(directiveId);
+      await fetchDetail();
+      return true;
+    } catch (err) {
+      console.error("Failed to resume directive:", err);
+      setError(err instanceof Error ? err.message : "Failed to resume directive");
+      return false;
+    }
+  }, [directiveId, fetchDetail]);
+
+  const stop = useCallback(async (): Promise<boolean> => {
+    if (!directiveId) return false;
+    try {
+      await stopDirective(directiveId);
+      await fetchDetail();
+      return true;
+    } catch (err) {
+      console.error("Failed to stop directive:", err);
+      setError(err instanceof Error ? err.message : "Failed to stop directive");
+      return false;
+    }
+  }, [directiveId, fetchDetail]);
+
+  return {
+    directive,
+    graph,
+    loading,
+    error,
+    refresh: fetchDetail,
+    start,
+    pause,
+    resume,
+    stop,
+  };
+}