@cat-factory/app 0.46.1 → 0.46.2

package/app/components/board/nodes/BlockNode.vue

@@ -9,6 +9,7 @@ import AgentStopButton from '~/components/board/AgentStopButton.vue'
 import { useBlockDrag } from '~/composables/useBlockDrag'
 import { useFrameResize } from '~/composables/useFrameResize'
 import { useFrameStacking } from '~/composables/useFrameStacking'
+import { useViewport } from '~/composables/useViewport'
 
 // Vue Flow passes the node's `id` and `data` as props to custom node components.
 // Only frames are rendered as board nodes; their tasks live inside the card.
@@ -22,6 +23,9 @@ const agentRuns = useAgentRunsStore()
 const services = useServicesStore()
 const reviews = useReviewStage()
 const { lod } = useSemanticZoom()
+// Coarse-pointer (touch) bumps the frame-header actions from `xs` to `sm` so
+// they clear a comfortable tap target on phones without affecting mouse desktops.
+const { isTouch } = useViewport()
 
 const block = computed<Block | undefined>(() => board.getBlock(props.id))
 /** This service frame is mounted on more than one board in the org. */
@@ -412,7 +416,7 @@ const ITEM_ICON: Record<string, string> = {
               <UButton
                 class="nodrag"
                 data-testid="frame-add-task"
-                size="xs"
+                :size="isTouch ? 'sm' : 'xs'"
                 variant="ghost"
                 color="neutral"
                 icon="i-lucide-plus"
@@ -422,7 +426,7 @@ const ITEM_ICON: Record<string, string> = {
               <UButton
                 v-if="tasks.anyOffered"
                 class="nodrag"
-                size="xs"
+                :size="isTouch ? 'sm' : 'xs'"
                 variant="ghost"
                 color="neutral"
                 icon="i-lucide-ticket"
@@ -431,7 +435,7 @@ const ITEM_ICON: Record<string, string> = {
               />
               <UButton
                 class="nodrag"
-                size="xs"
+                :size="isTouch ? 'sm' : 'xs'"
                 variant="ghost"
                 color="neutral"
                 icon="i-lucide-repeat"
@@ -440,7 +444,7 @@ const ITEM_ICON: Record<string, string> = {
               />
               <UButton
                 class="nodrag"
-                size="xs"
+                :size="isTouch ? 'sm' : 'xs'"
                 variant="ghost"
                 color="neutral"
                 icon="i-lucide-chevron-up"
@@ -481,17 +485,17 @@ const ITEM_ICON: Record<string, string> = {
                `nopan` (alongside `nodrag`) so the pane doesn't pan while resizing —
                same reason as the header handle above. -->
           <div
-            class="nodrag nopan absolute right-0 top-0 h-full w-2 cursor-ew-resize hover:bg-sky-400/20"
+            class="nodrag nopan absolute right-0 top-0 h-full w-2 cursor-ew-resize hover:bg-sky-400/20 pointer-coarse:w-4"
             title="Drag to resize"
             @pointerdown="onResize($event, 'e')"
           />
           <div
-            class="nodrag nopan absolute bottom-0 left-0 h-2 w-full cursor-ns-resize hover:bg-sky-400/20"
+            class="nodrag nopan absolute bottom-0 left-0 h-2 w-full cursor-ns-resize hover:bg-sky-400/20 pointer-coarse:h-4"
             title="Drag to resize"
             @pointerdown="onResize($event, 's')"
           />
           <div
-            class="nodrag nopan absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize"
+            class="nodrag nopan absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize pointer-coarse:h-11 pointer-coarse:w-11"
             title="Drag to resize"
             @pointerdown="onResize($event, 'se')"
           >

package/app/components/board/nodes/DraggableTask.vue

@@ -41,11 +41,14 @@ function onHandle(e: PointerEvent) {
     >
       <!-- drag handle (`nopan` so the pane doesn't pan on a left-drag from here) -->
       <div
-        class="nodrag nopan flex cursor-grab items-center justify-center rounded-t-lg border border-b-0 border-slate-700 bg-slate-800/80 py-px active:cursor-grabbing"
+        class="nodrag nopan flex cursor-grab items-center justify-center rounded-t-lg border border-b-0 border-slate-700 bg-slate-800/80 py-px active:cursor-grabbing pointer-coarse:py-2"
         title="Drag task"
         @pointerdown="onHandle"
       >
-        <UIcon name="i-lucide-grip-horizontal" class="h-3 w-3 text-slate-500" />
+        <UIcon
+          name="i-lucide-grip-horizontal"
+          class="h-3 w-3 text-slate-500 pointer-coarse:h-5 pointer-coarse:w-5"
+        />
       </div>
       <TaskCard :task-id="taskId" class="!rounded-t-none" />
     </div>

package/app/components/board/nodes/ModuleFrame.vue

@@ -76,17 +76,17 @@ function onResize(e: PointerEvent, edge: 'e' | 's' | 'se') {
     <!-- resize handles (drag the borders to resize the module, Miro-style).
          `nopan` (with `nodrag`) so resizing doesn't pan the pane. -->
     <div
-      class="nodrag nopan absolute right-0 top-0 h-full w-2 cursor-ew-resize hover:bg-violet-400/20"
+      class="nodrag nopan absolute right-0 top-0 h-full w-2 cursor-ew-resize hover:bg-violet-400/20 pointer-coarse:w-4"
       title="Drag to resize"
       @pointerdown="onResize($event, 'e')"
     />
     <div
-      class="nodrag nopan absolute bottom-0 left-0 h-2 w-full cursor-ns-resize hover:bg-violet-400/20"
+      class="nodrag nopan absolute bottom-0 left-0 h-2 w-full cursor-ns-resize hover:bg-violet-400/20 pointer-coarse:h-4"
       title="Drag to resize"
       @pointerdown="onResize($event, 's')"
     />
     <div
-      class="nodrag nopan absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize"
+      class="nodrag nopan absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize pointer-coarse:h-11 pointer-coarse:w-11"
       title="Drag to resize"
       @pointerdown="onResize($event, 'se')"
     >

package/app/components/board/nodes/TaskCard.vue

@@ -210,12 +210,12 @@ function selectTask() {
       <!-- drag-to-connect handle: drag onto another task to make it depend on this one -->
       <button
         type="button"
-        class="nodrag shrink-0 cursor-crosshair rounded-full p-0.5 text-slate-500 hover:bg-slate-800 hover:text-amber-400"
+        class="nodrag shrink-0 cursor-crosshair rounded-full p-0.5 text-slate-500 hover:bg-slate-800 hover:text-amber-400 pointer-coarse:p-2.5"
         title="Drag onto another task to make it depend on this one"
         @pointerdown.stop="startConnect(task.id, $event)"
         @click.stop
       >
-        <UIcon name="i-lucide-spline" class="h-3 w-3" />
+        <UIcon name="i-lucide-spline" class="h-3 w-3 pointer-coarse:h-5 pointer-coarse:w-5" />
       </button>
     </div>
 

package/app/components/brainstorm/BrainstormWindow.vue

@@ -220,11 +220,11 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
   <Teleport to="body">
     <div
       v-if="open"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
       @click.self="close"
     >
       <div
-        class="flex h-[90vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        class="flex max-h-[90dvh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
       >
         <!-- header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">

package/app/components/clarity/ClarityReviewWindow.vue

@@ -217,11 +217,11 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
   <Teleport to="body">
     <div
       v-if="open"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
       @click.self="close"
     >
       <div
-        class="flex h-[90vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        class="flex max-h-[90dvh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
       >
         <!-- header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">

package/app/components/consensus/ConsensusSessionWindow.vue

@@ -67,11 +67,11 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
   <Teleport to="body">
     <div
       v-if="open"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
       @click.self="close"
     >
       <div
-        class="flex h-[90vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        class="flex max-h-[90dvh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
       >
         <!-- header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">

package/app/components/followUp/FollowUpWindow.vue

@@ -73,7 +73,7 @@ const STATUS_META: Record<
   <Teleport to="body">
     <div
       v-if="open"
-      class="fixed inset-0 z-50 flex items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
       @click.self="close"
     >
       <div

package/app/components/gates/GateResultView.vue

@@ -140,7 +140,7 @@ const conflictVerdict = computed(() => {
   <Teleport to="body">
     <div
       v-if="open"
-      class="fixed inset-0 z-50 flex items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
       @click.self="close"
     >
       <div

package/app/components/humanTest/HumanTestWindow.vue

@@ -100,7 +100,7 @@ const canDestroy = computed(
   <Teleport to="body">
     <div
       v-if="open"
-      class="fixed inset-0 z-50 flex items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
       @click.self="close"
     >
       <div

package/app/components/panels/AgentStepDetail.vue

@@ -176,7 +176,7 @@ async function copyOutput() {
       <div
         v-if="open && step && agent"
         data-testid="step-detail"
-        class="fixed inset-0 z-50 flex bg-slate-950/96 backdrop-blur-sm"
+        class="fixed inset-0 z-50 flex max-h-[100dvh] bg-slate-950/96 backdrop-blur-sm"
         role="dialog"
         aria-modal="true"
       >
@@ -430,7 +430,7 @@ async function copyOutput() {
              bottom sheet (still reachable) below lg, so the gate is always actionable. -->
         <aside
           v-if="approvalPending && !companionExceeded"
-          class="absolute inset-x-0 bottom-0 z-10 flex max-h-[70vh] flex-col rounded-t-2xl border-t border-slate-700 bg-slate-900/95 shadow-2xl backdrop-blur lg:static lg:inset-auto lg:z-auto lg:max-h-none lg:w-96 lg:shrink-0 lg:rounded-none lg:border-l lg:border-t-0 lg:border-slate-800 lg:bg-slate-900/60 lg:shadow-none lg:backdrop-blur-none"
+          class="absolute inset-x-0 bottom-0 z-10 flex max-h-[70dvh] flex-col rounded-t-2xl border-t border-slate-700 bg-slate-900/95 shadow-2xl backdrop-blur lg:static lg:inset-auto lg:z-auto lg:max-h-none lg:w-96 lg:shrink-0 lg:rounded-none lg:border-l lg:border-t-0 lg:border-slate-800 lg:bg-slate-900/60 lg:shadow-none lg:backdrop-blur-none"
         >
           <div class="border-b border-slate-800 px-4 py-3">
             <div class="text-[11px] font-semibold uppercase tracking-wide text-amber-400">

package/app/components/panels/GenericStructuredResultView.vue

@@ -44,7 +44,7 @@ const customJson = computed<string | null>(() => {
   <Teleport to="body">
     <div
       v-if="open"
-      class="fixed inset-0 z-50 flex items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
       @click.self="close"
     >
       <div

package/app/components/pipeline/PipelineBuilder.vue

@@ -210,9 +210,12 @@ async function clone(p: Pipeline) {
     :ui="{ content: 'max-w-[90vw] sm:max-w-2xl lg:max-w-5xl xl:max-w-6xl' }"
   >
     <template #body>
-      <div class="grid h-full grid-cols-1 gap-4 lg:grid-cols-3">
+      <!-- On compact viewports the three sections stack and the slideover body
+           scrolls as one column; on lg they become three independently-scrolling
+           columns filling the full height. -->
+      <div class="grid grid-cols-1 gap-4 lg:h-full lg:grid-cols-3">
         <!-- agent palette -->
-        <div class="flex min-h-0 flex-col overflow-hidden">
+        <div class="flex flex-col lg:min-h-0 lg:overflow-hidden">
           <div class="mb-2 flex shrink-0 items-center justify-between gap-2">
             <h3 class="text-xs font-semibold uppercase tracking-wide text-slate-400">
               Agent palette
@@ -227,13 +230,13 @@ async function clone(p: Pipeline) {
               Add agent
             </UButton>
           </div>
-          <div class="min-h-0 flex-1 overflow-y-auto pr-1">
+          <div class="flex-1 pr-1 lg:min-h-0 lg:overflow-y-auto">
             <AgentPalette @add="add" />
           </div>
         </div>
 
         <!-- draft chain -->
-        <div class="flex min-h-0 flex-col overflow-hidden">
+        <div class="flex flex-col lg:min-h-0 lg:overflow-hidden">
           <div class="mb-2 flex items-center justify-between gap-2">
             <h3 class="text-xs font-semibold uppercase tracking-wide text-slate-400">Pipeline</h3>
             <UButton
@@ -293,7 +296,7 @@ async function clone(p: Pipeline) {
             Click agents on the left to assemble a linear pipeline.
           </div>
 
-          <ol v-else class="min-h-0 flex-1 space-y-2 overflow-y-auto pr-1">
+          <ol v-else class="flex-1 space-y-2 pr-1 lg:min-h-0 lg:overflow-y-auto">
             <li
               v-for="(unit, vi) in pipelines.units"
               :key="unit.index"
@@ -608,7 +611,7 @@ async function clone(p: Pipeline) {
 
         <!-- Saved pipelines: review the library + delete (the run affordance
              moved to the task card / inspector when the palettes were removed). -->
-        <div v-if="pipelines.pipelines.length" class="flex min-h-0 flex-col overflow-hidden">
+        <div v-if="pipelines.pipelines.length" class="flex flex-col lg:min-h-0 lg:overflow-hidden">
           <div class="mb-2 flex shrink-0 items-center justify-between gap-2">
             <h3 class="text-xs font-semibold uppercase tracking-wide text-slate-400">
               Saved pipelines
@@ -649,7 +652,7 @@ async function clone(p: Pipeline) {
             </UBadge>
           </div>
 
-          <ul class="min-h-0 flex-1 space-y-1.5 overflow-y-auto pr-1">
+          <ul class="flex-1 space-y-1.5 pr-1 lg:min-h-0 lg:overflow-y-auto">
             <li
               v-for="p in visiblePipelines"
               :key="p.id"

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -386,11 +386,11 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
   <Teleport to="body">
     <div
       v-if="open"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
       @click.self="close"
     >
       <div
-        class="flex h-[90vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        class="flex max-h-[90dvh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
       >
         <!-- header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">

package/app/components/settings/ModelConfigurationPanel.vue

@@ -240,7 +240,7 @@ function fail(title: string, e: unknown) {
     <Transition name="reader-fade">
       <div
         v-if="open"
-        class="fixed inset-0 z-50 flex flex-col bg-slate-950/96 backdrop-blur-sm"
+        class="fixed inset-0 z-50 flex max-h-[100dvh] flex-col bg-slate-950/96 backdrop-blur-sm"
         role="dialog"
         aria-modal="true"
       >

package/app/components/spec/ServiceSpecWindow.vue

@@ -104,11 +104,11 @@ function priorityMeta(item: RequirementItem) {
   <Teleport to="body">
     <div
       v-if="open"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
       @click.self="close"
     >
       <div
-        class="flex h-[90vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        class="flex max-h-[90dvh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
       >
         <!-- header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">

package/app/components/testing/TestReportWindow.vue

@@ -230,7 +230,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
   <Teleport to="body">
     <div
       v-if="open"
-      class="fixed inset-0 z-50 flex items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
       @click.self="close"
     >
       <div

package/app/components/visualConfirm/VisualConfirmationWindow.vue

@@ -181,7 +181,7 @@ const canApprove = computed(
   <Teleport to="body">
     <div
       v-if="open"
-      class="fixed inset-0 z-50 flex items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
       @click.self="close"
     >
       <div

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.46.1",
+  "version": "0.46.2",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",