From 9762ee464419042b817ff58ea8ec4d9678dc0fb4 Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Sat, 7 Feb 2026 19:41:53 +0000
Subject: Fix directive page styling

---
 .../src/components/directives/DirectiveDetail.tsx  | 51 +++++++------
 .../src/components/directives/DirectiveList.tsx    | 88 ++++++++++++----------
 2 files changed, 78 insertions(+), 61 deletions(-)

(limited to 'makima/frontend/src')

diff --git a/makima/frontend/src/components/directives/DirectiveDetail.tsx b/makima/frontend/src/components/directives/DirectiveDetail.tsx
index 645b8d2..06d8ba2 100644
--- a/makima/frontend/src/components/directives/DirectiveDetail.tsx
+++ b/makima/frontend/src/components/directives/DirectiveDetail.tsx
@@ -176,6 +176,7 @@ function JsonSection({
 
 export function DirectiveDetail({
   directive,
+  onBack,
   onDelete,
   onStart,
   onRefresh,
@@ -245,27 +246,18 @@ export function DirectiveDetail({
     <div className="panel h-full flex flex-col">
       {/* 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">
-          <span
-            className={`font-mono text-[10px] uppercase ${
-              statusColors[directive.status as DirectiveStatus] || "text-[#888]"
-            }`}
+        <div className="flex items-center justify-between mb-3">
+          <button
+            onClick={onBack}
+            className="font-mono text-xs text-[#75aafc] hover:text-[#9bc3ff] transition-colors"
           >
-            {directive.status}
-          </span>
-          {isLive && (
-            <span className="font-mono text-[9px] text-yellow-400/60 animate-pulse">
-              polling
-            </span>
-          )}
-          <span className="font-mono text-[10px] text-[#7788aa]">
-            v{directive.version}
-          </span>
-          <div className="ml-auto flex gap-2">
+            &larr; Back to list
+          </button>
+          <div className="flex items-center gap-2">
             {onStart && directive.status === "draft" && (
               <button
                 onClick={() => onStart(directive.id)}
-                className="font-mono text-[10px] text-green-400 hover:text-green-300 transition-colors uppercase"
+                className="px-3 py-1.5 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors uppercase"
               >
                 Start
               </button>
@@ -273,16 +265,33 @@ export function DirectiveDetail({
             {onDelete && (
               <button
                 onClick={() => onDelete(directive.id)}
-                className="font-mono text-[10px] text-red-400 hover:text-red-300 transition-colors uppercase"
+                className="px-3 py-1.5 font-mono text-xs text-red-400 border border-red-400/30 hover:border-red-400/50 transition-colors uppercase"
               >
                 Delete
               </button>
             )}
           </div>
         </div>
-        <h2 className="font-mono text-sm text-[#dbe7ff]">
-          {directive.title}
-        </h2>
+        <div className="flex items-center gap-3 mb-2">
+          <h2 className="font-mono text-lg text-[#dbe7ff]">
+            {directive.title}
+          </h2>
+          <span
+            className={`font-mono text-xs uppercase ${
+              statusColors[directive.status as DirectiveStatus] || "text-[#888]"
+            }`}
+          >
+            {directive.status}
+          </span>
+          {isLive && (
+            <span className="font-mono text-[9px] text-yellow-400/60 animate-pulse">
+              polling
+            </span>
+          )}
+          <span className="font-mono text-[10px] text-[#7788aa]">
+            v{directive.version}
+          </span>
+        </div>
       </div>
 
       {/* Tabs */}
diff --git a/makima/frontend/src/components/directives/DirectiveList.tsx b/makima/frontend/src/components/directives/DirectiveList.tsx
index a900b7b..5afa36e 100644
--- a/makima/frontend/src/components/directives/DirectiveList.tsx
+++ b/makima/frontend/src/components/directives/DirectiveList.tsx
@@ -25,7 +25,6 @@ export function DirectiveList({
   loading,
   onSelect,
   onCreate,
-  onDelete,
   selectedId,
 }: DirectiveListProps) {
   const [filter, setFilter] = useState<DirectiveStatus | "all">("all");
@@ -58,6 +57,7 @@ export function DirectiveList({
             + New
           </button>
         </div>
+
         {/* Filter tabs */}
         <div className="flex gap-1 flex-wrap">
           {(["all", "draft", "planning", "active", "paused", "completed", "failed"] as const).map(
@@ -65,11 +65,14 @@ export function DirectiveList({
               <button
                 key={status}
                 onClick={() => setFilter(status)}
-                className={`px-2 py-0.5 font-mono text-[10px] uppercase tracking-wider border transition-colors ${
-                  filter === status
-                    ? "bg-[#0f3c78] border-[#3f6fb3] text-[#dbe7ff]"
-                    : "bg-transparent border-[rgba(117,170,252,0.2)] text-[#7788aa] hover:border-[rgba(117,170,252,0.4)]"
-                }`}
+                className={`
+                  px-2 py-1 font-mono text-[10px] uppercase tracking-wider transition-colors
+                  ${
+                    filter === status
+                      ? "bg-[rgba(117,170,252,0.1)] text-[#9bc3ff] border border-[rgba(117,170,252,0.3)]"
+                      : "text-[#555] hover:text-[#75aafc]"
+                  }
+                `}
               >
                 {status}
               </button>
@@ -82,52 +85,57 @@ export function DirectiveList({
       <div className="flex-1 overflow-y-auto">
         {filteredDirectives.length === 0 ? (
           <div className="p-4 text-center">
-            <p className="font-mono text-sm text-[#7788aa]">
-              {directives.length === 0
+            <p className="font-mono text-sm text-[#555]">
+              {filter === "all"
                 ? "No directives yet"
-                : "No matching directives"}
+                : `No ${filter} directives`}
             </p>
           </div>
         ) : (
-          filteredDirectives.map((directive) => (
-            <div
-              key={directive.id}
-              onClick={() => onSelect(directive.id)}
-              onContextMenu={(e) => {
-                if (onDelete) {
-                  e.preventDefault();
-                }
-              }}
-              className={`p-3 border-b border-dashed border-[rgba(117,170,252,0.15)] cursor-pointer transition-colors hover:bg-[rgba(117,170,252,0.05)] ${
-                selectedId === directive.id
-                  ? "bg-[rgba(117,170,252,0.1)]"
-                  : ""
-              }`}
-            >
-              <div className="flex items-start justify-between gap-2">
-                <div className="flex-1 min-w-0">
-                  <div className="font-mono text-sm text-[#dbe7ff] truncate">
+          <div className="divide-y divide-[rgba(117,170,252,0.15)]">
+            {filteredDirectives.map((directive) => (
+              <button
+                key={directive.id}
+                onClick={() => onSelect(directive.id)}
+                className={`
+                  w-full text-left p-4 transition-colors
+                  ${
+                    selectedId === directive.id
+                      ? "bg-[rgba(117,170,252,0.1)]"
+                      : "hover:bg-[rgba(117,170,252,0.05)]"
+                  }
+                `}
+              >
+                <div className="flex items-start justify-between gap-2 mb-2">
+                  <h3 className="font-mono text-sm text-[#dbe7ff] truncate">
                     {directive.title}
-                  </div>
-                  <div className="font-mono text-xs text-[#7788aa] mt-0.5 line-clamp-2">
-                    {directive.goal}
-                  </div>
-                </div>
-                <div className="flex flex-col items-end gap-1 shrink-0">
+                  </h3>
                   <span
-                    className={`font-mono text-[10px] uppercase ${
+                    className={`text-[10px] font-mono uppercase shrink-0 ${
                       statusColors[directive.status] || "text-[#888]"
                     }`}
                   >
                     {directive.status}
                   </span>
-                  <span className="font-mono text-[10px] text-[#7788aa]">
-                    {directive.chainCount}ch / {directive.stepCount}st
-                  </span>
                 </div>
-              </div>
-            </div>
-          ))
+
+                {directive.goal && (
+                  <p className="font-mono text-xs text-[#555] mb-2 line-clamp-2">
+                    {directive.goal}
+                  </p>
+                )}
+
+                <div className="flex items-center gap-3 text-[10px] font-mono text-[#555]">
+                  {directive.chainCount > 0 && (
+                    <span>{directive.chainCount} chains</span>
+                  )}
+                  {directive.stepCount > 0 && (
+                    <span>{directive.stepCount} steps</span>
+                  )}
+                </div>
+              </button>
+            ))}
+          </div>
         )}
       </div>
     </div>
-- 
cgit v1.2.3