From 9eb28de59b3b3815fc0eb15b37efcb07d51b8e96 Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Mon, 9 Feb 2026 01:30:15 +0000
Subject: Move directive tab in navbar and change contract creation UI

---
 makima/frontend/src/components/NavStrip.tsx |  2 +-
 makima/frontend/src/routes/contracts.tsx    | 86 ++++++++++++++---------------
 2 files changed, 41 insertions(+), 47 deletions(-)

(limited to 'makima/frontend')

diff --git a/makima/frontend/src/components/NavStrip.tsx b/makima/frontend/src/components/NavStrip.tsx
index 46fef7a..9bb7777 100644
--- a/makima/frontend/src/components/NavStrip.tsx
+++ b/makima/frontend/src/components/NavStrip.tsx
@@ -10,10 +10,10 @@ interface NavLink {
 
 const NAV_LINKS: NavLink[] = [
   { label: "Listen", href: "/listen" },
+  { label: "Directives", href: "/directives", requiresAuth: true },
   { label: "Contracts", href: "/contracts", requiresAuth: true },
   { label: "Board", href: "/workflow", requiresAuth: true },
   { label: "Mesh", href: "/mesh", requiresAuth: true },
-  { label: "Directives", href: "/directives", requiresAuth: true },
   { label: "History", href: "/history", requiresAuth: true },
 ];
 
diff --git a/makima/frontend/src/routes/contracts.tsx b/makima/frontend/src/routes/contracts.tsx
index dde78b1..acb6789 100644
--- a/makima/frontend/src/routes/contracts.tsx
+++ b/makima/frontend/src/routes/contracts.tsx
@@ -531,11 +531,25 @@ function ContractsPageContent() {
           </div>
         )}
 
-        {/* Create contract modal */}
-        {isCreating && (
-          <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">
+        <div className="flex-1 grid grid-cols-[350px_1fr] gap-4 min-h-0">
+          {/* Contract list */}
+          <ContractList
+            contracts={contracts}
+            loading={loading}
+            onSelect={handleSelect}
+            onCreate={handleCreate}
+            selectedId={id}
+            onMarkComplete={handleContextMarkComplete}
+            onMarkActive={handleContextMarkActive}
+            onArchive={handleContextArchive}
+            onDelete={handleContextDelete}
+            onGoToSupervisor={handleContextGoToSupervisor}
+          />
+
+          {/* Contract detail, creation form, or empty state */}
+          {isCreating ? (
+            <div className="p-4 max-w-lg overflow-y-auto h-full bg-[#0a1628]">
+              <h3 className="font-mono text-[10px] text-[#9bc3ff] uppercase tracking-wide mb-4">
                 Create Contract
               </h3>
 
@@ -548,7 +562,7 @@ function ContractsPageContent() {
               <div className="space-y-4">
                 {/* Contract name */}
                 <div>
-                  <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1">
+                  <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
                     Contract Name
                   </label>
                   <input
@@ -556,14 +570,14 @@ function ContractsPageContent() {
                     value={newContractName}
                     onChange={(e) => setNewContractName(e.target.value)}
                     placeholder="Contract name"
-                    className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc]"
+                    className="w-full px-3 py-2 bg-[#0d1b2d] border border-[rgba(117,170,252,0.2)] text-[12px] font-mono text-white focus:outline-none focus:border-[#75aafc]"
                     autoFocus
                   />
                 </div>
 
                 {/* Description */}
                 <div>
-                  <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1">
+                  <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
                     Description (optional)
                   </label>
                   <textarea
@@ -571,13 +585,13 @@ function ContractsPageContent() {
                     onChange={(e) => setNewContractDescription(e.target.value)}
                     placeholder="Describe what this contract is for..."
                     rows={2}
-                    className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc] resize-none"
+                    className="w-full px-3 py-2 bg-[#0d1b2d] border border-[rgba(117,170,252,0.2)] text-[12px] font-mono text-white focus:outline-none focus:border-[#75aafc] resize-none"
                   />
                 </div>
 
                 {/* Contract Type */}
                 <div>
-                  <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1">
+                  <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
                     Contract Type
                   </label>
                   {contractTypesLoading ? (
@@ -598,7 +612,7 @@ function ContractsPageContent() {
                             className={`flex-1 px-3 py-2 font-mono text-xs uppercase transition-colors ${
                               contractType === type.id
                                 ? "bg-[#0f3c78] text-[#dbe7ff] border border-[#75aafc]"
-                                : "bg-[#0d1b2d] text-[#8b949e] border border-[#3f6fb3] hover:border-[#75aafc]"
+                                : "bg-[#0d1b2d] text-[#8b949e] border border-[rgba(117,170,252,0.2)] hover:border-[#75aafc]"
                             }`}
                           >
                             {type.name}
@@ -615,13 +629,13 @@ function ContractsPageContent() {
 
                 {/* Starting Phase */}
                 <div>
-                  <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1">
+                  <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
                     Starting Phase
                   </label>
                   <select
                     value={initialPhase}
                     onChange={(e) => setInitialPhase(e.target.value as ContractPhase)}
-                    className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc]"
+                    className="w-full px-3 py-2 bg-[#0d1b2d] border border-[rgba(117,170,252,0.2)] text-[12px] font-mono text-white focus:outline-none focus:border-[#75aafc]"
                   >
                     {(() => {
                       const template = contractTypes.find((t) => t.id === contractType);
@@ -651,7 +665,7 @@ function ContractsPageContent() {
                       className={`w-5 h-5 flex items-center justify-center border transition-colors ${
                         localOnly
                           ? "bg-[#0f3c78] border-[#75aafc] text-[#dbe7ff]"
-                          : "bg-[#0d1b2d] border-[#3f6fb3] text-transparent"
+                          : "bg-[#0d1b2d] border-[rgba(117,170,252,0.2)] text-transparent"
                       }`}
                     >
                       {localOnly && (
@@ -682,10 +696,9 @@ function ContractsPageContent() {
                   </p>
                 </div>
 
-                {/* Red Team Monitoring */}
                 {/* Repository Configuration */}
                 <div className="border-t border-[rgba(117,170,252,0.2)] pt-4">
-                  <label className="block font-mono text-xs text-[#75aafc] uppercase mb-3">
+                  <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-3">
                     Repository Configuration (Required)
                   </label>
 
@@ -697,7 +710,7 @@ function ContractsPageContent() {
                       className={`flex-1 px-3 py-2 font-mono text-xs uppercase transition-colors ${
                         repoType === "remote"
                           ? "bg-[#0f3c78] text-[#dbe7ff] border border-[#75aafc]"
-                          : "bg-[#0d1b2d] text-[#8b949e] border border-[#3f6fb3] hover:border-[#75aafc]"
+                          : "bg-[#0d1b2d] text-[#8b949e] border border-[rgba(117,170,252,0.2)] hover:border-[#75aafc]"
                       }`}
                     >
                       Remote
@@ -708,7 +721,7 @@ function ContractsPageContent() {
                       className={`flex-1 px-3 py-2 font-mono text-xs uppercase transition-colors ${
                         repoType === "local"
                           ? "bg-[#0f3c78] text-[#dbe7ff] border border-[#75aafc]"
-                          : "bg-[#0d1b2d] text-[#8b949e] border border-[#3f6fb3] hover:border-[#75aafc]"
+                          : "bg-[#0d1b2d] text-[#8b949e] border border-[rgba(117,170,252,0.2)] hover:border-[#75aafc]"
                       }`}
                     >
                       Local
@@ -719,7 +732,7 @@ function ContractsPageContent() {
                       className={`flex-1 px-3 py-2 font-mono text-xs uppercase transition-colors ${
                         repoType === "managed"
                           ? "bg-[#0f3c78] text-[#dbe7ff] border border-[#75aafc]"
-                          : "bg-[#0d1b2d] text-[#8b949e] border border-[#3f6fb3] hover:border-[#75aafc]"
+                          : "bg-[#0d1b2d] text-[#8b949e] border border-[rgba(117,170,252,0.2)] hover:border-[#75aafc]"
                       }`}
                     >
                       Managed
@@ -729,7 +742,7 @@ function ContractsPageContent() {
                   {/* Repository suggestions */}
                   {showRepoSuggestions && repoSuggestions.length > 0 && (
                     <div className="mb-3">
-                      <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1">
+                      <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
                         Recent Repositories
                       </label>
                       <div className="border border-[rgba(117,170,252,0.2)] bg-[#0a1525] max-h-32 overflow-y-auto">
@@ -757,7 +770,7 @@ function ContractsPageContent() {
 
                   {/* Repository name */}
                   <div className="mb-3">
-                    <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1">
+                    <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
                       Repository Name
                     </label>
                     <input
@@ -765,14 +778,14 @@ function ContractsPageContent() {
                       value={repoName}
                       onChange={(e) => setRepoName(e.target.value)}
                       placeholder="e.g., my-project"
-                      className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc]"
+                      className="w-full px-3 py-2 bg-[#0d1b2d] border border-[rgba(117,170,252,0.2)] text-[12px] font-mono text-white focus:outline-none focus:border-[#75aafc]"
                     />
                   </div>
 
                   {/* Repository URL (for remote) */}
                   {repoType === "remote" && (
                     <div>
-                      <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1">
+                      <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
                         Repository URL
                       </label>
                       <input
@@ -780,7 +793,7 @@ function ContractsPageContent() {
                         value={repoUrl}
                         onChange={(e) => setRepoUrl(e.target.value)}
                         placeholder="https://github.com/user/repo.git"
-                        className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc]"
+                        className="w-full px-3 py-2 bg-[#0d1b2d] border border-[rgba(117,170,252,0.2)] text-[12px] font-mono text-white focus:outline-none focus:border-[#75aafc]"
                       />
                     </div>
                   )}
@@ -788,7 +801,7 @@ function ContractsPageContent() {
                   {/* Repository path (for local) */}
                   {repoType === "local" && (
                     <div>
-                      <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1">
+                      <label className="block text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide mb-1">
                         Local Path
                       </label>
                       <DirectoryInput
@@ -819,33 +832,14 @@ function ContractsPageContent() {
                   <button
                     onClick={handleCreateSubmit}
                     disabled={!newContractName.trim() || !isRepoValid()}
-                    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"
+                    className="px-4 py-2 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[rgba(117,170,252,0.2)] 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">
-          {/* Contract list */}
-          <ContractList
-            contracts={contracts}
-            loading={loading}
-            onSelect={handleSelect}
-            onCreate={handleCreate}
-            selectedId={id}
-            onMarkComplete={handleContextMarkComplete}
-            onMarkActive={handleContextMarkActive}
-            onArchive={handleContextArchive}
-            onDelete={handleContextDelete}
-            onGoToSupervisor={handleContextGoToSupervisor}
-          />
-
-          {/* Contract detail or empty state */}
-          {contractDetail ? (
+          ) : contractDetail ? (
             <ContractDetail
               contract={contractDetail}
               loading={detailLoading}
-- 
cgit v1.2.3