From 0d1f90948bc0d18ecde9cc95d5082e12143271f2 Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Mon, 9 Feb 2026 00:55:56 +0000
Subject: Add repository selection to directives

---
 makima/frontend/src/routes/directives.tsx | 60 ++++++++++++++++++++++++++++++-
 1 file changed, 59 insertions(+), 1 deletion(-)

(limited to 'makima/frontend/src/routes')

diff --git a/makima/frontend/src/routes/directives.tsx b/makima/frontend/src/routes/directives.tsx
index 82e5d48..bf6955b 100644
--- a/makima/frontend/src/routes/directives.tsx
+++ b/makima/frontend/src/routes/directives.tsx
@@ -1,10 +1,11 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { useParams, useNavigate } from "react-router";
 import { Masthead } from "../components/Masthead";
 import { DirectiveList } from "../components/directives/DirectiveList";
 import { DirectiveDetail } from "../components/directives/DirectiveDetail";
 import { useDirectives, useDirective } from "../hooks/useDirectives";
 import { useAuth } from "../contexts/AuthContext";
+import { getRepositorySuggestions, type RepositoryHistoryEntry } from "../lib/api";
 
 export default function DirectivesPage() {
   const { isAuthenticated, isAuthConfigured, isLoading: authLoading } = useAuth();
@@ -17,6 +18,36 @@ export default function DirectivesPage() {
   const [newTitle, setNewTitle] = useState("");
   const [newGoal, setNewGoal] = useState("");
   const [newRepoUrl, setNewRepoUrl] = useState("");
+  const [repoSuggestions, setRepoSuggestions] = useState<RepositoryHistoryEntry[]>([]);
+  const [showRepoSuggestions, setShowRepoSuggestions] = useState(false);
+
+  // Fetch repository suggestions when create form opens
+  useEffect(() => {
+    if (showCreate) {
+      getRepositorySuggestions("remote", undefined, 10)
+        .then((res) => {
+          setRepoSuggestions(res.entries);
+          setShowRepoSuggestions(res.entries.length > 0);
+        })
+        .catch(() => {
+          setRepoSuggestions([]);
+          setShowRepoSuggestions(false);
+        });
+    } else {
+      setRepoSuggestions([]);
+      setShowRepoSuggestions(false);
+    }
+  }, [showCreate]);
+
+  const applyRepoSuggestion = useCallback((suggestion: RepositoryHistoryEntry) => {
+    if (suggestion.repositoryUrl) {
+      setNewRepoUrl(suggestion.repositoryUrl);
+    }
+    if (!newTitle.trim() && suggestion.name) {
+      setNewTitle(suggestion.name);
+    }
+    setShowRepoSuggestions(false);
+  }, [newTitle]);
 
   useEffect(() => {
     if (!authLoading && isAuthConfigured && !isAuthenticated) {
@@ -109,6 +140,33 @@ export default function DirectivesPage() {
                     className="w-full bg-[#0a1628] border border-[rgba(117,170,252,0.2)] rounded px-2 py-1.5 text-[12px] font-mono text-white resize-y"
                   />
                 </div>
+                {showRepoSuggestions && repoSuggestions.length > 0 && (
+                  <div>
+                    <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1">
+                      Recent Repositories
+                    </label>
+                    <div className="border border-[rgba(117,170,252,0.2)] bg-[#0a1525] max-h-32 overflow-y-auto">
+                      {repoSuggestions.map((suggestion) => (
+                        <button
+                          key={suggestion.id}
+                          type="button"
+                          onClick={() => applyRepoSuggestion(suggestion)}
+                          className="w-full text-left px-3 py-2 font-mono text-xs hover:bg-[rgba(117,170,252,0.1)] border-b border-[rgba(117,170,252,0.1)] last:border-b-0"
+                        >
+                          <div className="flex items-center justify-between">
+                            <span className="text-[#9bc3ff] truncate">{suggestion.name}</span>
+                            <span className="text-[10px] text-[#556677] ml-2">
+                              {suggestion.useCount}×
+                            </span>
+                          </div>
+                          <div className="text-[10px] text-[#556677] truncate">
+                            {suggestion.repositoryUrl}
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                )}
                 <div>
                   <label className="text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide block mb-1">
                     Repository URL (optional)
-- 
cgit v1.2.3