feat: document-mode directive UI proof of concept (Lexical) (#101)

* WIP: heartbeat checkpoint

* feat: soryu-co/soryu - makima: Backend: feature flag + goal-edit interrupt messaging

* WIP: heartbeat checkpoint

* WIP: heartbeat checkpoint

* feat: soryu-co/soryu - makima: Frontend: Lexical document editor with step blocks, context menu, countdown

1 files changed, 33 insertions, 0 deletions

diff --git a/makima/frontend/src/routes/directives.tsx b/makima/frontend/src/routes/directives.tsx
index 8de0335..895c86a 100644
--- a/makima/frontend/src/routes/directives.tsx
+++ b/makima/frontend/src/routes/directives.tsx
@@ -5,10 +5,43 @@ import { DirectiveList } from "../components/directives/DirectiveList";
 import { DirectiveDetail } from "../components/directives/DirectiveDetail";
 import { useDirectives, useDirective } from "../hooks/useDirectives";
 import { useDogs } from "../hooks/useDogs";
+import { useUserSettings } from "../hooks/useUserSettings";
 import { useAuth } from "../contexts/AuthContext";
+import DocumentDirectivesPage from "./document-directives";
 import { getRepositorySuggestions, startDirective, pauseDirective, updateDirective, type RepositoryHistoryEntry, type DirectiveSummary } from "../lib/api";
 
+/**
+ * Top-level /directives route. Gates between the legacy tabular UI and the
+ * Document Mode (POC) UI based on the user's settings flag.
+ *
+ * Both code paths support /directives/:id deep links — the param is read by
+ * each branch independently via useParams.
+ */
 export default function DirectivesPage() {
+  const { settings, loading: settingsLoading } = useUserSettings();
+
+  // While settings are loading for the very first time, render nothing inside
+  // a Masthead-wrapped shell so we don't briefly flash the legacy UI just to
+  // swap to document mode a moment later.
+  if (settingsLoading && !settings) {
+    return (
+      <div className="relative z-10 min-h-screen flex flex-col bg-[#0a1628]">
+        <Masthead showNav />
+        <main className="flex-1 flex items-center justify-center">
+          <p className="text-[#7788aa] font-mono text-sm">Loading...</p>
+        </main>
+      </div>
+    );
+  }
+
+  if (settings?.documentModeEnabled) {
+    return <DocumentDirectivesPage />;
+  }
+
+  return <LegacyDirectivesPage />;
+}
+
+function LegacyDirectivesPage() {
   const { isAuthenticated, isAuthConfigured, isLoading: authLoading } = useAuth();
   const navigate = useNavigate();
   const { id: selectedId } = useParams<{ id: string }>();