Change directive page

2 files changed, 123 insertions, 102 deletions

diff --git a/makima/frontend/src/components/directives/DirectiveDetail.tsx b/makima/frontend/src/components/directives/DirectiveDetail.tsx
index 95dc7cc..645b8d2 100644
--- a/makima/frontend/src/components/directives/DirectiveDetail.tsx
+++ b/makima/frontend/src/components/directives/DirectiveDetail.tsx
@@ -176,7 +176,6 @@ function JsonSection({
 
 export function DirectiveDetail({
   directive,
-  onBack,
   onDelete,
   onStart,
   onRefresh,
@@ -247,12 +246,6 @@ export function DirectiveDetail({
       {/* 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">
-          <button
-            onClick={onBack}
-            className="font-mono text-xs text-[#75aafc] hover:text-white transition-colors"
-          >
-            &larr; Back
-          </button>
           <span
             className={`font-mono text-[10px] uppercase ${
               statusColors[directive.status as DirectiveStatus] || "text-[#888]"
diff --git a/makima/frontend/src/routes/directives.tsx b/makima/frontend/src/routes/directives.tsx
index 9437389..939961c 100644
--- a/makima/frontend/src/routes/directives.tsx
+++ b/makima/frontend/src/routes/directives.tsx
@@ -32,12 +32,11 @@ export default function DirectivesPage() {
     );
   }
 
-  return (
-    <div className="relative z-10 min-h-screen flex flex-col bg-[#0a1628]">
-      <Masthead showNav />
-      <DirectivesContent />
-    </div>
-  );
+  if (isAuthConfigured && !isAuthenticated) {
+    return null;
+  }
+
+  return <DirectivesContent />;
 }
 
 function DirectivesContent() {
@@ -136,98 +135,127 @@ function DirectivesContent() {
     []
   );
 
-  // Detail view
-  if (id) {
-    if (detailLoading) {
-      return (
-        <main className="flex-1 flex items-center justify-center">
-          <p className="text-[#7788aa] font-mono text-sm">Loading directive...</p>
-        </main>
-      );
-    }
-    if (!selectedDirective) {
-      return (
-        <main className="flex-1 flex items-center justify-center">
-          <p className="text-[#7788aa] font-mono text-sm">Directive not found</p>
-        </main>
-      );
-    }
-    return (
-      <main className="flex-1 p-4 max-w-4xl mx-auto w-full">
-        <DirectiveDetail
-          directive={selectedDirective}
-          onBack={handleBack}
-          onDelete={handleDelete}
-          onStart={handleStart}
-          onRefresh={handleRefresh}
-        />
-      </main>
-    );
-  }
-
-  // List view
   return (
-    <main className="flex-1 p-4 max-w-4xl mx-auto w-full">
-      {error && (
-        <div className="mb-4 p-2 border border-red-400/30 bg-red-400/5 font-mono text-xs text-red-400">
-          {error}
-        </div>
-      )}
-
-      {showCreateForm && (
-        <div className="mb-4 p-4 border border-dashed border-[rgba(117,170,252,0.35)] bg-[rgba(117,170,252,0.03)]">
-          <h3 className="font-mono text-xs text-[#75aafc] uppercase tracking-wider mb-3">
-            New Directive
-          </h3>
-          <div className="space-y-2">
-            <input
-              type="text"
-              placeholder="Title"
-              value={createTitle}
-              onChange={(e) => setCreateTitle(e.target.value)}
-              className="w-full px-2 py-1.5 font-mono text-xs text-[#dbe7ff] bg-[#0a1628] border border-[rgba(117,170,252,0.3)] focus:border-[#75aafc] outline-none"
-            />
-            <textarea
-              placeholder="Goal - what should be accomplished?"
-              value={createGoal}
-              onChange={(e) => setCreateGoal(e.target.value)}
-              rows={3}
-              className="w-full px-2 py-1.5 font-mono text-xs text-[#dbe7ff] bg-[#0a1628] border border-[rgba(117,170,252,0.3)] focus:border-[#75aafc] outline-none resize-none"
-            />
-            <input
-              type="text"
-              placeholder="Repository URL (optional)"
-              value={createRepoUrl}
-              onChange={(e) => setCreateRepoUrl(e.target.value)}
-              className="w-full px-2 py-1.5 font-mono text-xs text-[#dbe7ff] bg-[#0a1628] border border-[rgba(117,170,252,0.3)] focus:border-[#75aafc] outline-none"
-            />
-            <div className="flex gap-2">
-              <button
-                onClick={handleCreate}
-                disabled={!createTitle.trim() || !createGoal.trim()}
-                className="px-3 py-1.5 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors uppercase disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                Create
-              </button>
-              <button
-                onClick={() => setShowCreateForm(false)}
-                className="px-3 py-1.5 font-mono text-xs text-[#7788aa] hover:text-[#dbe7ff] transition-colors uppercase"
-              >
-                Cancel
-              </button>
+    <div className="relative z-10 min-h-screen flex flex-col bg-[#0a1628]">
+      <Masthead showNav />
+      <main className="flex-1 flex flex-col p-4 pt-2 gap-4 overflow-hidden">
+        {error && (
+          <div className="p-3 bg-red-400/10 border border-red-400/30 text-red-400 font-mono text-sm">
+            {error}
+          </div>
+        )}
+
+        {/* Create directive form */}
+        {showCreateForm && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+            <div className="w-full max-w-lg max-h-[90vh] overflow-y-auto p-6 bg-[#0a1628] border border-[rgba(117,170,252,0.3)]">
+              <h3 className="font-mono text-sm text-[#75aafc] uppercase mb-4">
+                New Directive
+              </h3>
+              <div className="space-y-3">
+                <div>
+                  <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1">
+                    Title
+                  </label>
+                  <input
+                    type="text"
+                    placeholder="Title"
+                    value={createTitle}
+                    onChange={(e) => setCreateTitle(e.target.value)}
+                    className="w-full px-3 py-2 font-mono text-sm text-[#dbe7ff] bg-[#0d1b2d] border border-[#3f6fb3] focus:border-[#75aafc] outline-none"
+                    autoFocus
+                  />
+                </div>
+                <div>
+                  <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1">
+                    Goal
+                  </label>
+                  <textarea
+                    placeholder="What should be accomplished?"
+                    value={createGoal}
+                    onChange={(e) => setCreateGoal(e.target.value)}
+                    rows={3}
+                    className="w-full px-3 py-2 font-mono text-sm text-[#dbe7ff] bg-[#0d1b2d] border border-[#3f6fb3] focus:border-[#75aafc] outline-none resize-none"
+                  />
+                </div>
+                <div>
+                  <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1">
+                    Repository URL (optional)
+                  </label>
+                  <input
+                    type="text"
+                    placeholder="https://github.com/user/repo.git"
+                    value={createRepoUrl}
+                    onChange={(e) => setCreateRepoUrl(e.target.value)}
+                    className="w-full px-3 py-2 font-mono text-sm text-[#dbe7ff] bg-[#0d1b2d] border border-[#3f6fb3] focus:border-[#75aafc] outline-none"
+                  />
+                </div>
+                <div className="flex gap-2 justify-end pt-2">
+                  <button
+                    onClick={() => {
+                      setShowCreateForm(false);
+                      setCreateTitle("");
+                      setCreateGoal("");
+                      setCreateRepoUrl("");
+                    }}
+                    className="px-4 py-2 font-mono text-xs text-[#9bc3ff] hover:text-[#dbe7ff] transition-colors"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={handleCreate}
+                    disabled={!createTitle.trim() || !createGoal.trim()}
+                    className="px-4 py-2 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    Create
+                  </button>
+                </div>
+              </div>
             </div>
           </div>
+        )}
+
+        <div className="flex-1 grid grid-cols-[350px_1fr] gap-4 min-h-0">
+          {/* Directive list */}
+          <DirectiveList
+            directives={directives}
+            loading={loading}
+            onSelect={handleSelect}
+            onCreate={() => setShowCreateForm(true)}
+            onDelete={(d) => handleDelete(d.id)}
+            selectedId={id}
+          />
+
+          {/* Directive detail or empty state */}
+          {detailLoading ? (
+            <div className="panel h-full flex items-center justify-center">
+              <p className="text-[#7788aa] font-mono text-sm">Loading directive...</p>
+            </div>
+          ) : selectedDirective ? (
+            <DirectiveDetail
+              directive={selectedDirective}
+              onBack={handleBack}
+              onDelete={handleDelete}
+              onStart={handleStart}
+              onRefresh={handleRefresh}
+            />
+          ) : (
+            <div className="panel h-full flex items-center justify-center">
+              <div className="text-center">
+                <p className="font-mono text-sm text-[#555] mb-4">
+                  Select a directive or create a new one
+                </p>
+                <button
+                  onClick={() => setShowCreateForm(true)}
+                  className="px-4 py-2 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors uppercase"
+                >
+                  + New Directive
+                </button>
+              </div>
+            </div>
+          )}
         </div>
-      )}
-
-      <DirectiveList
-        directives={directives}
-        loading={loading}
-        onSelect={handleSelect}
-        onCreate={() => setShowCreateForm(true)}
-        onDelete={(d) => handleDelete(d.id)}
-        selectedId={id}
-      />
-    </main>
+      </main>
+    </div>
   );
 }