Fix contracts page overflow, remove contract link from orders, add directive name (#65)

* feat: soryu-co/soryu - makima: Add frontend pick-up-orders button and API integration

* WIP: heartbeat checkpoint

* feat: soryu-co/soryu - makima: Remove contract link from orders and add directive name to order metadata (frontend)

* fix: contracts page overflow - use contained scrolling layout

Changed the contracts page to use contained scrolling matching the
orders/directives pages, preventing the page from growing beyond
viewport height.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: resolve completion_task_id FK violation and duplicate button

The completion_task_id column has an FK to tasks(id), but
claim_directive_for_completion was being called with a placeholder UUID
that did not exist in the tasks table, causing FK constraint violations.

Fix: Create the task FIRST via create_task_for_owner, then use the real
task.id when calling claim_directive_for_completion. Applied in all three
locations: phase_completion Part 1 (idle directives), Part 3 (verification
tasks), and trigger_completion_task (manual PR creation).

Also removes a duplicate "Pick Up Orders" button in DirectiveDetail.tsx.

* fix: restore Order type changes lost during rebase conflict resolution

Re-apply changes from the orders-refactor commit that were dropped when
resolving rebase conflicts with --ours:
- Replace contractId with directiveName in Order interface
- Make directiveId required in CreateOrderRequest
- Remove contractId from UpdateOrderRequest
- Change listOrders parameter from contractId to search
- Remove linkOrderToContract function
- Simplify convertOrderToStep to single argument

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

2 files changed, 16 insertions, 81 deletions

diff --git a/makima/frontend/src/components/orders/OrderDetail.tsx b/makima/frontend/src/components/orders/OrderDetail.tsx
index 7f8a95d..9d4c00c 100644
--- a/makima/frontend/src/components/orders/OrderDetail.tsx
+++ b/makima/frontend/src/components/orders/OrderDetail.tsx
@@ -39,8 +39,7 @@ interface OrderDetailProps {
   onUpdate: (req: UpdateOrderRequest) => Promise<void>;
   onDelete: () => void;
   onLinkDirective: (directiveId: string) => Promise<void>;
-  onLinkContract: (contractId: string) => Promise<void>;
-  onConvertToStep: (directiveId: string) => Promise<void>;
+  onConvertToStep: () => Promise<void>;
   onRefresh: () => void;
 }
 
@@ -50,7 +49,6 @@ export function OrderDetail({
   onUpdate,
   onDelete,
   onLinkDirective,
-  onLinkContract,
   onConvertToStep,
   onRefresh,
 }: OrderDetailProps) {
@@ -61,9 +59,6 @@ export function OrderDetail({
   const [editingLabels, setEditingLabels] = useState(false);
   const [labelsText, setLabelsText] = useState(order.labels.join(", "));
   const [showLinkDirective, setShowLinkDirective] = useState(false);
-  const [showLinkContract, setShowLinkContract] = useState(false);
-  const [contractIdInput, setContractIdInput] = useState("");
-  const [showConvertToStep, setShowConvertToStep] = useState(false);
 
   const badge = STATUS_BADGE[order.status] || STATUS_BADGE.open;
   const currentPriority = PRIORITY_OPTIONS.find((p) => p.value === order.priority) || PRIORITY_OPTIONS[4];
@@ -110,17 +105,6 @@ export function OrderDetail({
     setShowLinkDirective(false);
   };
 
-  const handleLinkContract = async () => {
-    if (!contractIdInput.trim()) return;
-    await onLinkContract(contractIdInput.trim());
-    setContractIdInput("");
-    setShowLinkContract(false);
-  };
-
-  const handleConvertToStep = async (directiveId: string) => {
-    await onConvertToStep(directiveId);
-    setShowConvertToStep(false);
-  };
 
   return (
     <div className="flex flex-col h-full overflow-y-auto">
@@ -196,12 +180,9 @@ export function OrderDetail({
         {/* 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.directiveId.slice(0, 8)}...</a>
-          </div>
-        )}
-        {order.contractId && (
-          <div className="text-[10px] font-mono text-[#556677] mb-1 truncate">
-            Contract: <a href={`/contracts/${order.contractId}`} className="text-[#75aafc] hover:text-white underline">{order.contractId.slice(0, 8)}...</a>
+            Directive: <a href={`/directives/${order.directiveId}`} className="text-[#75aafc] hover:text-white underline">
+              {order.directiveName || order.directiveId.slice(0, 8) + "..."}
+            </a>
           </div>
         )}
         {order.directiveStepId && (
@@ -453,67 +434,15 @@ export function OrderDetail({
             )}
           </div>
 
-          {/* Link to Contract */}
-          <div>
+          {/* Convert to Directive Step */}
+          {!order.directiveStepId && order.directiveId && (
             <button
               type="button"
-              onClick={() => setShowLinkContract(!showLinkContract)}
-              className="text-[10px] font-mono text-[#75aafc] hover:text-white border border-[rgba(117,170,252,0.3)] rounded px-2 py-1 w-full text-left"
+              onClick={() => onConvertToStep()}
+              className="text-[10px] font-mono text-yellow-400 hover:text-yellow-300 border border-yellow-800 rounded px-2 py-1 w-full text-left"
             >
-              Link to Contract
+              Convert to Directive Step
             </button>
-            {showLinkContract && (
-              <div className="mt-1 flex gap-1.5">
-                <input
-                  value={contractIdInput}
-                  onChange={(e) => setContractIdInput(e.target.value)}
-                  placeholder="Contract ID..."
-                  className="flex-1 bg-[#0a1628] border border-[rgba(117,170,252,0.2)] rounded px-2 py-1 text-[10px] font-mono text-white"
-                  autoFocus
-                />
-                <button
-                  type="button"
-                  onClick={handleLinkContract}
-                  disabled={!contractIdInput.trim()}
-                  className="text-[10px] font-mono text-emerald-400 hover:text-emerald-300 border border-emerald-800 rounded px-2 py-1 disabled:opacity-50"
-                >
-                  Link
-                </button>
-              </div>
-            )}
-          </div>
-
-          {/* Convert to Directive Step */}
-          {!order.directiveStepId && (
-            <div>
-              <button
-                type="button"
-                onClick={() => setShowConvertToStep(!showConvertToStep)}
-                className="text-[10px] font-mono text-yellow-400 hover:text-yellow-300 border border-yellow-800 rounded px-2 py-1 w-full text-left"
-              >
-                Convert to Directive Step
-              </button>
-              {showConvertToStep && (
-                <div className="mt-1 border border-[rgba(117,170,252,0.2)] bg-[#0a1525] max-h-32 overflow-y-auto rounded">
-                  {directives.length === 0 ? (
-                    <div className="px-3 py-2 text-[10px] font-mono text-[#556677]">
-                      No directives available
-                    </div>
-                  ) : (
-                    directives.map((d) => (
-                      <button
-                        key={d.id}
-                        type="button"
-                        onClick={() => handleConvertToStep(d.id)}
-                        className="w-full text-left px-3 py-1.5 text-[10px] font-mono text-yellow-400 hover:bg-[rgba(117,170,252,0.1)] border-b border-[rgba(117,170,252,0.1)] last:border-b-0"
-                      >
-                        {d.title}
-                      </button>
-                    ))
-                  )}
-                </div>
-              )}
-            </div>
           )}
         </div>
       </div>
diff --git a/makima/frontend/src/components/orders/OrderList.tsx b/makima/frontend/src/components/orders/OrderList.tsx
index 76ac7a7..1d279f7 100644
--- a/makima/frontend/src/components/orders/OrderList.tsx
+++ b/makima/frontend/src/components/orders/OrderList.tsx
@@ -57,7 +57,8 @@ export function OrderList({
       (o) =>
         o.title.toLowerCase().includes(q) ||
         (o.description && o.description.toLowerCase().includes(q)) ||
-        o.labels.some((l) => l.toLowerCase().includes(q)),
+        o.labels.some((l) => l.toLowerCase().includes(q)) ||
+        (o.directiveName && o.directiveName.toLowerCase().includes(q)),
     );
   }, [orders, search]);
 
@@ -158,6 +159,11 @@ export function OrderList({
                   />
                   <span className="text-[12px] font-mono text-white truncate flex-1">
                     {o.title}
+                    {o.directiveName && (
+                      <span className="text-[9px] font-mono text-[#556677] truncate block">
+                        {o.directiveName}
+                      </span>
+                    )}
                   </span>
                 </div>
                 <div className="flex items-center gap-1.5 pl-4">