From 5739f1064059c9e33730a1238944f7f140b5b7b1 Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Sat, 7 Mar 2026 20:15:35 +0000
Subject: feat: soryu-co/soryu - makima: Compact the order page header display

---
 .../frontend/src/components/orders/OrderDetail.tsx | 77 +++++++++++-----------
 1 file changed, 37 insertions(+), 40 deletions(-)

diff --git a/makima/frontend/src/components/orders/OrderDetail.tsx b/makima/frontend/src/components/orders/OrderDetail.tsx
index 9c3ac97..338cc60 100644
--- a/makima/frontend/src/components/orders/OrderDetail.tsx
+++ b/makima/frontend/src/components/orders/OrderDetail.tsx
@@ -111,8 +111,8 @@ export function OrderDetail({
   return (
     <div className="flex flex-col h-full overflow-y-auto">
       {/* Header */}
-      <div className="px-4 py-3 border-b border-dashed border-[rgba(117,170,252,0.2)]">
-        <div className="flex items-center justify-between mb-2">
+      <div className="px-4 py-2 border-b border-dashed border-[rgba(117,170,252,0.2)]">
+        <div className="flex items-center justify-between mb-1">
           {editingTitle ? (
             <div className="flex-1 flex items-center gap-2 pr-2">
               <input
@@ -151,54 +151,51 @@ export function OrderDetail({
               {order.title}
             </h2>
           )}
-          <div className="flex items-center gap-2 shrink-0">
-            <span
-              className={`text-[10px] font-mono ${badge.color} border rounded px-2 py-0.5`}
-            >
-              {badge.label}
-            </span>
-            <button
-              type="button"
-              onClick={onRefresh}
-              className="text-[10px] font-mono text-[#7788aa] hover:text-white"
-              title="Refresh"
-            >
-              [refresh]
-            </button>
-          </div>
+          <button
+            type="button"
+            onClick={onRefresh}
+            className="text-[10px] font-mono text-[#7788aa] hover:text-white shrink-0"
+            title="Refresh"
+          >
+            [refresh]
+          </button>
         </div>
 
-        {/* Type + Priority inline */}
-        <div className="flex items-center gap-3 mb-2">
-          <span className={`text-[10px] font-mono ${currentType.color}`}>
+        {/* Metadata badges row */}
+        <div className="flex flex-wrap items-center gap-1.5">
+          <span
+            className={`text-[10px] font-mono ${badge.color} border rounded px-1.5 py-0.5`}
+          >
+            {badge.label}
+          </span>
+          <span
+            className={`text-[10px] font-mono ${currentType.color} border border-current rounded px-1.5 py-0.5`}
+          >
             {currentType.label}
           </span>
-          <span className="text-[10px] font-mono text-[#2a3a5a]">/</span>
-          <span className={`text-[10px] font-mono ${currentPriority.color} border rounded px-1.5 py-0.5`}>
+          <span
+            className={`text-[10px] font-mono ${currentPriority.color} border rounded px-1.5 py-0.5`}
+          >
             {currentPriority.label}
           </span>
-        </div>
-
-        {/* Linked entities */}
-        {order.directiveId && (
-          <div className="text-[10px] font-mono text-[#556677] mb-1 truncate">
-            Directive: <a href={`/directives/${order.directiveId}`} className="text-[#75aafc] hover:text-white underline">
-              {order.directiveName || order.directiveId.slice(0, 8) + "..."}
+          {order.directiveId && (
+            <a
+              href={`/directives/${order.directiveId}`}
+              className="text-[10px] font-mono text-[#75aafc] border border-[rgba(117,170,252,0.3)] rounded px-1.5 py-0.5 hover:text-white hover:border-[rgba(117,170,252,0.5)] truncate max-w-[160px]"
+              title={order.directiveName || order.directiveId}
+            >
+              ↗ {order.directiveName || order.directiveId.slice(0, 8) + "..."}
             </a>
-          </div>
-        )}
-        {order.directiveStepId && (
-          <div className="text-[10px] font-mono text-[#556677] mb-1 truncate">
-            Step: <span className="text-[#7788aa]">{order.directiveStepId.slice(0, 8)}...</span>
-          </div>
-        )}
-
-        {/* Controls */}
-        <div className="flex flex-wrap gap-2 mt-2">
+          )}
+          {order.directiveStepId && (
+            <span className="text-[10px] font-mono text-[#7788aa] border border-[#2a3a5a] rounded px-1.5 py-0.5">
+              step:{order.directiveStepId.slice(0, 8)}
+            </span>
+          )}
           <button
             type="button"
             onClick={onDelete}
-            className="text-[10px] font-mono text-red-400 hover:text-red-300 border border-red-800 rounded px-2 py-1 ml-auto"
+            className="text-[10px] font-mono text-red-400 hover:text-red-300 border border-red-800 rounded px-1.5 py-0.5 ml-auto"
           >
             Delete
           </button>
-- 
cgit v1.2.3