feat(ui): action columns with collapsible groups

src/ui/PlayPanel.tsx

@@ -1,14 +1,60 @@
-import { ActionPanel } from './ActionPanel';
+import { gameRuntime } from '../state/runtime';
+import { useGameStore } from '../state/store';
+import { ActionColumn } from './ActionColumn';
 import { EventLog } from './EventLog';
 import { ResourceBar } from './ResourceBar';
 
 export function PlayPanel() {
+  const columns = useGameStore((s) => s.actionColumns).filter(
+    (col) => col.groups.length > 0 && col.groups.some((g) => g.actions.length > 0),
+  );
+  const queuedActionIds = useGameStore((s) => s.queuedActionIds);
+  const queuedActionNames = useGameStore((s) => s.queuedActionNames);
+
   return (
     <div className="space-y-6">
       <div className="block md:hidden">
         <ResourceBar />
       </div>
-      <ActionPanel />
+
+      <section aria-label="Actions" className="flex gap-4 overflow-x-auto pb-4">
+        {columns.map((col) => (
+          <ActionColumn
+            key={col.kind}
+            label={col.label}
+            groups={col.groups}
+            actionKind={col.kind}
+          />
+        ))}
+      </section>
+
+      {queuedActionNames.length > 0 ? (
+        <div className="border border-slate-800 bg-slate-900/30 rounded-xl p-4">
+          <h3 className="font-semibold text-slate-400 text-xs uppercase tracking-wider mb-2">
+            Action Queue
+          </h3>
+          <ol aria-label="Action queue" className="flex flex-col gap-1.5">
+            {queuedActionNames.map((name, index) => (
+              <li
+                // biome-ignore lint/suspicious/noArrayIndexKey: indices are stable and identify individual queue items
+                key={`${queuedActionIds[index]}-${index}`}
+                className="flex items-center justify-between rounded-lg border border-slate-700 bg-slate-900/60 px-3 py-2 text-sm"
+              >
+                <span className="text-slate-300">{name}</span>
+                <button
+                  type="button"
+                  aria-label={`Cancel ${name}`}
+                  onClick={() => gameRuntime.cancelQueuedAction(index)}
+                  className="rounded px-2 py-0.5 text-slate-400 transition-colors hover:bg-slate-800 hover:text-amber-400"
+                >
+                  ✕
+                </button>
+              </li>
+            ))}
+          </ol>
+        </div>
+      ) : null}
+
       <div className="block md:hidden">
         <EventLog />
       </div>