@mndrk/agx 2.0.55 → 2.0.56

package/cloud-runtime/standalone/apps/local/app/api/automations/route.ts

@@ -8,6 +8,7 @@ import {
 } from '@/src/automations';
 import type { GraphSchedule } from '@/src/graph/types';
 import { resolveAutomationTitle } from '@/lib/project-overview-titles';
+import { computePrevRun } from '@/src/prompt-scheduler/cron';
 
 export const runtime = 'nodejs';
 export const dynamic = 'force-dynamic';
@@ -35,6 +36,13 @@ export interface AutomationItem {
   updatedAt: string;
 }
 
+function enrichPrevScheduledAt(item: AutomationItem): AutomationItem {
+  const cronExpr = item.schedule.cronExpr ?? item.schedule.cadence;
+  if (!cronExpr) return item;
+  const prevScheduledAt = computePrevRun(cronExpr) ?? undefined;
+  return { ...item, schedule: { ...item.schedule, prevScheduledAt } };
+}
+
 /**
  * GET /api/automations
  * Lists all graphs that have schedules (active, paused, or stopped).
@@ -107,7 +115,7 @@ export async function GET(request: NextRequest) {
         ));
         return NextResponse.json({
           count: automations.length,
-          automations,
+          automations: automations.map(enrichPrevScheduledAt),
         });
       }
     }
@@ -150,7 +158,7 @@ export async function GET(request: NextRequest) {
 
     return NextResponse.json({
       count: automations.length,
-      automations,
+      automations: automations.map(enrichPrevScheduledAt),
     });
   } catch (error) {
     console.error('Failed to list automations:', error);

package/cloud-runtime/standalone/apps/local/app/api/projects/[id]/objectives/[objectiveId]/scheduled-tasks/route.ts

@@ -12,6 +12,7 @@ import {
   readNullableString,
   readOptionalString,
 } from "../../_shared";
+import { requestPromptJobPump } from "@/src/prompt-scheduler/processor";
 
 export const runtime = "nodejs";
 export const dynamic = "force-dynamic";
@@ -120,6 +121,16 @@ export async function POST(request: NextRequest, context: RouteContext) {
       );
     }
 
+    if (!objectiveContext.objective.teamId) {
+      return NextResponse.json(
+        {
+          error:
+            "Assign a team to this objective before creating scheduled tasks.",
+        },
+        { status: 400 }
+      );
+    }
+
     const store = getPromptJobStore();
     const job = store.createJob({
       name: title,
@@ -173,6 +184,11 @@ export async function POST(request: NextRequest, context: RouteContext) {
       return NextResponse.json({ error: "Project not found" }, { status: 404 });
     }
 
+    // Kick off the first run immediately so the user doesn't have to wait
+    // for the next cron tick.
+    store.createRun(job.id);
+    requestPromptJobPump();
+
     return NextResponse.json({ job, objective: nextObjective }, { status: 201 });
   } catch (error) {
     console.error("Failed to create objective scheduled task:", error);

package/cloud-runtime/standalone/apps/local/app/api/prompt-jobs/route.ts

@@ -2,6 +2,7 @@ import { NextRequest, NextResponse } from 'next/server';
 import { getPromptJobStore } from '@/src/prompt-scheduler/get-store';
 import {
   computeNextRun,
+  computePrevRun,
   normalizeLegacyConditionSchedule,
   parseCadence,
 } from '@/src/prompt-scheduler/cron';
@@ -78,7 +79,13 @@ export async function GET(req: NextRequest) {
       }
     }
 
-    return NextResponse.json({ count: jobs.length, jobs });
+    const enriched = jobs.map((job) => {
+      const cronExpr = job.cronExpr || job.cadence;
+      const prevScheduledAt = cronExpr ? computePrevRun(cronExpr) : null;
+      return { ...job, prevScheduledAt };
+    });
+
+    return NextResponse.json({ count: enriched.length, jobs: enriched });
   } catch (error) {
     console.error('Failed to list prompt jobs:', error);
     return NextResponse.json(

package/cloud-runtime/standalone/apps/local/app/globals.css

@@ -109,6 +109,20 @@
   --app-shell-border-strong: rgba(0, 0, 0, 0.1); /* black/10 */
   --app-shell-muted: #64748b; /* slate-500 */
   --app-shell-soft-text: #94a3b8; /* slate-400 */
+
+  /* Overlay/tinted surfaces */
+  --overlay-panel: rgba(255, 255, 255, 0.82);
+  --overlay-panel-strong: rgba(255, 255, 255, 0.96);
+  --overlay-panel-soft: rgba(248, 250, 252, 0.88);
+  --overlay-panel-muted: rgba(241, 245, 249, 0.88);
+
+  /* Neutral chips and timeline */
+  --tone-neutral: #64748b;
+  --tone-neutral-border: rgba(148, 163, 184, 0.28);
+  --tone-neutral-bg: rgba(148, 163, 184, 0.14);
+  --timeline-track: rgba(148, 163, 184, 0.3);
+  --timeline-node-border: rgba(148, 163, 184, 0.42);
+  --timeline-node-bg: #ffffff;
 }
 
 .dark {
@@ -178,6 +192,20 @@
   --app-shell-border-strong: #4f4f4f;
   --app-shell-muted: #858585;
   --app-shell-soft-text: #6e6e6e;
+
+  /* Overlay/tinted surfaces */
+  --overlay-panel: rgba(8, 12, 18, 0.72);
+  --overlay-panel-strong: rgba(6, 10, 16, 0.96);
+  --overlay-panel-soft: rgba(15, 23, 42, 0.55);
+  --overlay-panel-muted: rgba(15, 23, 42, 0.32);
+
+  /* Neutral chips and timeline */
+  --tone-neutral: #a1a1aa;
+  --tone-neutral-border: rgba(113, 113, 122, 0.8);
+  --tone-neutral-bg: rgba(82, 82, 91, 0.55);
+  --timeline-track: rgba(39, 39, 42, 0.9);
+  --timeline-node-border: rgba(82, 82, 91, 0.9);
+  --timeline-node-bg: #131315;
 }
 
 body {
@@ -649,15 +677,15 @@ select:focus-visible {
 /* ========================================
    Responsive Utilities
    ======================================== */
+.touch-target {
+  min-height: 44px;
+  min-width: 44px;
+}
+
 @media (max-width: 768px) {
   .hide-mobile {
     display: none;
   }
-
-  .touch-target {
-    min-height: 44px;
-    min-width: 44px;
-  }
 }
 
 @media (min-width: 769px) {
@@ -1184,6 +1212,10 @@ select:focus-visible {
   width: 360px;
 }
 
+.node-inspector--touch {
+  width: 100%;
+}
+
 .node-inspector__resize-handle {
   position: absolute;
   top: 0;
@@ -1681,6 +1713,12 @@ select:focus-visible {
   gap: 1rem;
 }
 
+.execution-graph-panel__controls--touch .react-flow__controls-button {
+  width: 2.75rem;
+  height: 2.75rem;
+  font-size: 0.9rem;
+}
+
 .graph-sidebar-section__toggle {
   display: flex;
   align-items: center;
@@ -2106,6 +2144,13 @@ select:focus-visible {
   transform: translateX(0);
 }
 
+.node-detail-panel--touch {
+  left: 0;
+  width: 100%;
+  max-width: 100%;
+  border-left: 0;
+}
+
 .node-detail-panel__resize-handle {
   position: absolute;
   top: 0;
@@ -2636,6 +2681,23 @@ select:focus-visible {
   }
 }
 
+@media (hover: none), (pointer: coarse) {
+  [data-touch-target="true"] {
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  .execution-graph-panel__controls .react-flow__controls-button {
+    width: 2.75rem;
+    height: 2.75rem;
+  }
+
+  .node-detail-panel__resize-handle,
+  .node-inspector__resize-handle {
+    display: none;
+  }
+}
+
 /* ========================================
    Terminal/Code Display
    ======================================== */

package/cloud-runtime/standalone/apps/local/app/projects/[slug]/folders/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { use } from "react";
+import { FoldersView } from "@/components/projects/FoldersView";
+import { useProjectsWithAgents } from "@/hooks/useProjects";
+
+export default function FoldersPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = use(params);
+  const { projects } = useProjectsWithAgents();
+  const project = projects.find((p) => p.slug === slug);
+
+  if (!project) {
+    return (
+      <div className="flex items-center justify-center h-full text-sm text-zinc-500">
+        Loading...
+      </div>
+    );
+  }
+
+  return <FoldersView projectId={project.id} />;
+}

package/cloud-runtime/standalone/apps/local/app/projects/[slug]/layout.tsx

@@ -3,10 +3,11 @@
 import { Suspense, use, useCallback, useEffect, useMemo, useState } from "react";
 import { usePathname } from "next/navigation";
 import { useRouter } from "next/navigation";
-import { ArrowLeft, Sun, Moon } from "lucide-react";
+import { ArrowLeft, PanelLeftOpen, Sun, Moon } from "lucide-react";
 import { StatusIndicator } from "@/components/chat-ui/StatusIndicator";
 import { ProjectSearchBar } from "@/components/projects/ProjectSearchBar";
 import { WorkspaceSidebar } from "@/components/thread/WorkspaceSidebar";
+import { useInputCapabilities } from "@/hooks/useInputCapabilities";
 import { useProjectsWithAgents } from "@/hooks/useProjects";
 import { useThreadState } from "@/hooks/useThreadState";
 import type { Participant } from "@/lib/types";
@@ -27,6 +28,7 @@ function ProjectLayoutContent({
   params: Promise<{ slug: string }>;
 }) {
   const { slug } = use(params);
+  const { isTouchLayout } = useInputCapabilities();
   const router = useRouter();
   const pathname = usePathname();
   const {
@@ -87,7 +89,7 @@ function ProjectLayoutContent({
     const match = pathname.match(/\/projects\/[^/]+\/thread\/([^/]+)/);
     return match?.[1] ? decodeURIComponent(match[1]) : currentProject?.thread_ids[0] ?? null;
   }, [currentProject?.thread_ids, pathname]);
-  const activeProjectView = useMemo<"home" | "objectives" | "teams" | "thread" | "knowledge" | "automations" | "linear" | "terminal" | "settings" | "env-vars">(
+  const activeProjectView = useMemo<"home" | "objectives" | "teams" | "thread" | "knowledge" | "automations" | "linear" | "terminal" | "settings" | "env-vars" | "folders">(
     () => {
       if (pathname.includes("/linear")) return "linear";
       if (pathname.includes("/automations")) return "automations";
@@ -95,6 +97,7 @@ function ProjectLayoutContent({
       if (pathname.includes("/knowledge")) return "knowledge";
       if (pathname.includes("/objectives")) return "objectives";
       if (pathname.includes("/teams")) return "teams";
+      if (pathname.includes("/folders")) return "folders";
       if (pathname.includes("/env-vars")) return "env-vars";
       if (pathname.includes("/terminal")) return "terminal";
       if (pathname.includes("/settings")) return "settings";
@@ -189,6 +192,17 @@ function ProjectLayoutContent({
         <div className="flex items-center px-4 py-2 border-b border-[var(--app-shell-border)] bg-[var(--background)] shrink-0">
           {/* Left: back + breadcrumb */}
           <div className="flex items-center gap-1.5 min-w-0 flex-shrink-0">
+            {!sidebarVisible && (
+              <button
+                type="button"
+                onClick={toggleSidebar}
+                className="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-[var(--app-shell-border)] bg-[var(--app-shell-elevated)] text-[var(--muted-foreground)] transition-colors hover:bg-[var(--app-shell-subtle)] hover:text-[var(--foreground)]"
+                title="Show sidebar"
+                aria-label="Show sidebar"
+              >
+                <PanelLeftOpen className="h-4 w-4" />
+              </button>
+            )}
             {pathname !== `/projects/${slug}` && (
               <button
                 type="button"
@@ -213,7 +227,7 @@ function ProjectLayoutContent({
                   onClick={() => router.push(`/projects/${slug}/${activeProjectView === "thread" ? "" : activeProjectView}`)}
                   className="text-xs text-[var(--foreground)] hover:text-[var(--muted-foreground)] transition-colors"
                 >
-                  {{ objectives: "Objectives", teams: "Teams", "env-vars": "Environment Variables", linear: "Linear", automations: "Scheduled Tasks", thread: "Chat", knowledge: "Knowledge", terminal: "Terminal", settings: "Settings" }[activeProjectView] ?? activeProjectView}
+                  {{ objectives: "Objectives", teams: "Teams", folders: "Folders", "env-vars": "Environment Variables", linear: "Linear", automations: "Scheduled Tasks", thread: "Chat", knowledge: "Knowledge", terminal: "Terminal", settings: "Settings" }[activeProjectView] ?? activeProjectView}
                 </button>
                 <span id="topbar-breadcrumb" className="contents" />
               </>
@@ -233,9 +247,9 @@ function ProjectLayoutContent({
               onClick={() => setTheme((t) => (t === "dark" ? "light" : "dark"))}
               aria-label={theme === "dark" ? "Switch to light theme" : "Switch to dark theme"}
               title={theme === "dark" ? "Switch to light theme" : "Switch to dark theme"}
-              className="inline-flex h-7 w-7 items-center justify-center rounded-lg text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)] hover:bg-[var(--app-shell-subtle)]"
+              className={`inline-flex items-center justify-center rounded-lg text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)] hover:bg-[var(--app-shell-subtle)] ${isTouchLayout ? "h-9 w-9" : "h-7 w-7"}`}
             >
-              {theme === "dark" ? <Sun className="h-3.5 w-3.5" /> : <Moon className="h-3.5 w-3.5" />}
+              {theme === "dark" ? <Sun className={isTouchLayout ? "h-4 w-4" : "h-3.5 w-3.5"} /> : <Moon className={isTouchLayout ? "h-4 w-4" : "h-3.5 w-3.5"} />}
             </button>
           </div>
         </div>

package/cloud-runtime/standalone/apps/local/app/projects/[slug]/objectives/[objectiveId]/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { use } from "react";
-import { ProjectObjectiveDetail } from "@/components/projects/ProjectObjectivesWorkspace";
+import { ProjectObjectivesOverview } from "@/components/projects/ProjectObjectivesWorkspace";
 
 export default function ProjectObjectiveDetailPage({
   params,
@@ -10,5 +10,10 @@ export default function ProjectObjectiveDetailPage({
 }) {
   const { slug, objectiveId } = use(params);
 
-  return <ProjectObjectiveDetail projectSlug={slug} objectiveId={objectiveId} />;
+  return (
+    <ProjectObjectivesOverview
+      projectSlug={slug}
+      initialObjectiveId={objectiveId}
+    />
+  );
 }

package/cloud-runtime/standalone/apps/local/bundled-server.ts

@@ -0,0 +1,45 @@
+import http from "http";
+import https from "https";
+import path from "path";
+import type { IncomingMessage, Server as HttpServer } from "http";
+import type { Duplex } from "stream";
+import { createTerminalServerBridge } from "./lib/terminal-server";
+
+const PATCHED_SERVER = Symbol.for("agx.terminalBridgePatched");
+
+type PatchedServer = HttpServer & {
+  emit: HttpServer["emit"];
+  [PATCHED_SERVER]?: boolean;
+};
+
+function installTerminalBridge(server: PatchedServer): PatchedServer {
+  if (server[PATCHED_SERVER]) {
+    return server;
+  }
+
+  server[PATCHED_SERVER] = true;
+  const terminalBridge = createTerminalServerBridge(server);
+  const originalEmit = server.emit.bind(server);
+
+  server.emit = ((event: string, ...args: unknown[]) => {
+    if (event === "upgrade") {
+      const [req, socket, head] = args as [IncomingMessage, Duplex, Buffer];
+      if (terminalBridge.handleUpgrade(req, socket, head)) {
+        return true;
+      }
+    }
+    return originalEmit(event, ...args);
+  }) as HttpServer["emit"];
+
+  return server;
+}
+
+const originalHttpCreateServer = http.createServer.bind(http);
+http.createServer = ((...args: Parameters<typeof http.createServer>) =>
+  installTerminalBridge(originalHttpCreateServer(...args) as PatchedServer)) as typeof http.createServer;
+
+const originalHttpsCreateServer = https.createServer.bind(https);
+https.createServer = ((...args: Parameters<typeof https.createServer>) =>
+  installTerminalBridge(originalHttpsCreateServer(...args) as PatchedServer)) as typeof https.createServer;
+
+require(path.join(__dirname, "server.js"));

package/cloud-runtime/standalone/apps/local/components/ActionToolbar.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react';
+import { useInputCapabilities } from "@/hooks/useInputCapabilities";
 
 export interface ActionToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
   // A wrapper for group-hover revealed actions
@@ -6,12 +7,14 @@ export interface ActionToolbarProps extends React.HTMLAttributes<HTMLDivElement>
 
 export const ActionToolbar = forwardRef<HTMLDivElement, ActionToolbarProps>(
   ({ children, className = '', ...props }, ref) => {
-    const baseClasses = "absolute top-4 right-4 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-[var(--app-shell-elevated)] border border-[var(--app-shell-border)] shadow-md rounded-lg p-1 z-10 backdrop-blur-sm";
+    const { isTouchLayout } = useInputCapabilities();
+    const visibilityClasses = isTouchLayout ? "opacity-100" : "opacity-0 group-hover:opacity-100";
+    const baseClasses = `absolute top-4 right-4 flex items-center gap-1 ${visibilityClasses} transition-opacity duration-200 bg-[var(--app-shell-elevated)] border border-[var(--app-shell-border)] shadow-md rounded-lg p-1 z-10 backdrop-blur-sm`;
 
     const classes = `${baseClasses} ${className}`.trim();
 
     return (
-      <div ref={ref} className={classes} {...props}>
+      <div ref={ref} className={classes} data-touch-visible={isTouchLayout ? "true" : undefined} {...props}>
         {children}
       </div>
     );

package/cloud-runtime/standalone/apps/local/components/AutomationsBoard.tsx

@@ -32,6 +32,25 @@ function formatCadence(schedule: GraphSchedule): string {
   return `Every ${Math.round(ms / 86_400_000)}d`;
 }
 
+function isScheduleOverdue(schedule: GraphSchedule): boolean {
+  if (schedule.state !== "active" || schedule.tickInProgress) return false;
+  // Case 1: next tick is in the past and hasn't run yet
+  if (schedule.nextTickAt) {
+    if (schedule.nextTickAt - Date.now() >= 0) return false;
+    if (schedule.lastTickAt && schedule.lastTickAt >= schedule.nextTickAt) {
+      // Task ran, but check if it ran late vs previous scheduled time
+      if (schedule.prevScheduledAt && schedule.lastTickAt > schedule.prevScheduledAt + 5 * 60_000) {
+        return true;
+      }
+      return false;
+    }
+    return true;
+  }
+  // Case 2: interval-based — check if overdue
+  if (schedule.lastTickAt) return schedule.lastTickAt + schedule.intervalMs - Date.now() < 0;
+  return false;
+}
+
 function formatNextRun(schedule: GraphSchedule): string {
   if (schedule.state === "paused") return "Paused";
   if (schedule.state === "stopped") return "Stopped";
@@ -262,6 +281,7 @@ export default function AutomationsBoard() {
                     const isSelected = selectedId === item.taskId;
                     const hasFails =
                       (item.schedule.consecutiveFailures ?? 0) > 0;
+                    const overdue = isScheduleOverdue(item.schedule);
                     const isRunning = busy[item.taskId];
 
                     return (
@@ -273,6 +293,8 @@ export default function AutomationsBoard() {
                             ? "border-[var(--foreground)] shadow-sm"
                             : hasFails
                             ? "border-red-200 bg-red-50/30 hover:border-red-300"
+                            : overdue
+                            ? "border-amber-500/40 bg-amber-500/5 hover:border-amber-500/60"
                             : "border-[var(--card-border)] bg-[var(--card-bg)] hover:border-[var(--card-hover-border)]"
                         }`}
                       >
@@ -298,6 +320,12 @@ export default function AutomationsBoard() {
                                   paused
                                 </span>
                               )}
+                              {overdue && (
+                                <span className="shrink-0 text-[11px] font-medium text-amber-400 bg-amber-500/10 px-2 py-0.5 rounded-md border border-amber-500/20 flex items-center gap-1">
+                                  <Clock size={10} />
+                                  overdue
+                                </span>
+                              )}
                             </div>
                             {item.schedule.description && (
                               <p className="text-[13px] text-[var(--muted-foreground)] leading-relaxed truncate">
@@ -339,7 +367,7 @@ export default function AutomationsBoard() {
                             <Clock size={12} />{" "}
                             {formatCadence(item.schedule)}
                           </span>
-                          <span className="flex items-center gap-1.5">
+                          <span className={`flex items-center gap-1.5 ${overdue ? "text-amber-400 font-medium" : ""}`}>
                             <CalIcon size={12} />{" "}
                             {formatNextRun(item.schedule)}
                           </span>
@@ -563,8 +591,12 @@ function ScheduleInspector({
               total runs
             </div>
           </div>
-          <div className="bg-[var(--muted)] border border-[var(--card-border)] rounded-xl p-3 flex flex-col items-center justify-center">
-            <div className="font-mono text-lg font-semibold mb-0.5">
+          <div className={`rounded-xl p-3 flex flex-col items-center justify-center border ${
+            isScheduleOverdue(schedule)
+              ? "bg-amber-500/10 border-amber-500/30"
+              : "bg-[var(--muted)] border-[var(--card-border)]"
+          }`}>
+            <div className={`font-mono text-lg font-semibold mb-0.5 ${isScheduleOverdue(schedule) ? "text-amber-400" : ""}`}>
               {formatNextRun(schedule)}
             </div>
             <div className="text-[10px] text-[var(--muted-foreground)]">

package/cloud-runtime/standalone/apps/local/components/ContextMenu.tsx

@@ -56,10 +56,10 @@ export function ContextMenu({ items, children }: ContextMenuProps) {
       }
     };
 
-    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("pointerdown", handleClickOutside);
     document.addEventListener("keydown", handleKeyDown);
     return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("pointerdown", handleClickOutside);
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [isOpen, close, focusIndex, items]);

package/cloud-runtime/standalone/apps/local/components/FloatingPanel.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useRef, useState } from "react";
 
+import { useInputCapabilities } from "@/hooks/useInputCapabilities";
 import { loadFloatingPanelBounds, persistFloatingPanelBounds, type FloatingPanelBounds } from "@/state/floatingPanels";
 
 interface FloatingPanelProps {
@@ -59,6 +60,7 @@ export default function FloatingPanel({
   className,
   bodyClassName,
 }: FloatingPanelProps) {
+  const { isTouchLayout } = useInputCapabilities();
   const dragRef = useRef<{ startX: number; startY: number; originX: number; originY: number } | null>(null);
   const resizeRef = useRef<{ startX: number; startY: number; originWidth: number; originHeight: number } | null>(null);
 
@@ -81,15 +83,23 @@ export default function FloatingPanel({
   }, [bounds, hydrated, panelId]);
 
   useEffect(() => {
+    if (isTouchLayout) {
+      return;
+    }
+
     const onResize = () => {
       setBounds((current) => normalizeBounds(current, minWidth, minHeight));
     };
 
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
-  }, [minHeight, minWidth]);
+  }, [isTouchLayout, minHeight, minWidth]);
 
   useEffect(() => {
+    if (isTouchLayout) {
+      return;
+    }
+
     const onMouseMove = (event: MouseEvent) => {
       if (dragRef.current) {
         const nextBounds = normalizeBounds(
@@ -135,9 +145,13 @@ export default function FloatingPanel({
       document.body.style.userSelect = "";
       document.body.style.cursor = "";
     };
-  }, [bounds, minHeight, minWidth]);
+  }, [bounds, isTouchLayout, minHeight, minWidth]);
 
   const handleDragStart = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (isTouchLayout) {
+      return;
+    }
+
     const target = event.target as HTMLElement | null;
     if (target?.closest("button, a, input, textarea, select, [data-no-panel-drag='true']")) {
       return;
@@ -154,6 +168,10 @@ export default function FloatingPanel({
   };
 
   const handleResizeStart = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (isTouchLayout) {
+      return;
+    }
+
     event.preventDefault();
     event.stopPropagation();
 
@@ -172,28 +190,32 @@ export default function FloatingPanel({
       className={className}
       style={{
         position: "fixed",
-        left: bounds.x,
-        top: bounds.y,
-        width: bounds.width,
-        height: bounds.height,
+        left: isTouchLayout ? "50%" : bounds.x,
+        right: isTouchLayout ? "auto" : undefined,
+        top: isTouchLayout ? "max(16px, 8vh)" : bounds.y,
+        width: isTouchLayout ? `min(${Math.max(bounds.width, minWidth)}px, calc(100vw - 32px))` : bounds.width,
+        height: isTouchLayout ? `min(${Math.max(bounds.height, minHeight)}px, calc(100vh - 48px))` : bounds.height,
+        transform: isTouchLayout ? "translateX(-50%)" : undefined,
         zIndex: 40,
       }}
     >
       <div className="flex h-full flex-col overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--card-bg)] shadow-2xl backdrop-blur-md">
         <div
           onMouseDown={handleDragStart}
-          className="cursor-grab active:cursor-grabbing border-b border-[var(--border)] bg-[var(--card-bg)]/95"
+          className={`${isTouchLayout ? "cursor-default" : "cursor-grab active:cursor-grabbing"} border-b border-[var(--border)] bg-[var(--card-bg)]/95`}
         >
           {titleBar}
         </div>
         <div className={bodyClassName}>{children}</div>
-        <div
-          onMouseDown={handleResizeStart}
-          className="absolute bottom-0 right-0 h-5 w-5 cursor-nwse-resize"
-          aria-hidden="true"
-        >
-          <div className="absolute bottom-1.5 right-1.5 h-2.5 w-2.5 rounded-sm border-r-2 border-b-2 border-[var(--muted-foreground)]/50" />
-        </div>
+        {!isTouchLayout ? (
+          <div
+            onMouseDown={handleResizeStart}
+            className="absolute bottom-0 right-0 h-5 w-5 cursor-nwse-resize"
+            aria-hidden="true"
+          >
+            <div className="absolute bottom-1.5 right-1.5 h-2.5 w-2.5 rounded-sm border-r-2 border-b-2 border-[var(--muted-foreground)]/50" />
+          </div>
+        ) : null}
       </div>
     </div>
   );

package/cloud-runtime/standalone/apps/local/components/IconButton.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react';
+import { useInputCapabilities } from "@/hooks/useInputCapabilities";
 
 export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'neutral' | 'primary' | 'destructive' | 'ghost';
@@ -7,6 +8,7 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   ({ className = '', variant = 'neutral', size = 'md', children, ...props }, ref) => {
+    const { isTouchLayout } = useInputCapabilities();
     const baseClasses = "inline-flex items-center justify-center rounded-md transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] disabled:opacity-50 disabled:pointer-events-none";
 
     const sizeClasses = {
@@ -14,6 +16,11 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
       md: "p-1.5 w-8 h-8",
       lg: "p-2 w-10 h-10"
     };
+    const touchSizeClasses = {
+      sm: "h-11 w-11 p-2",
+      md: "h-11 w-11 p-2",
+      lg: "h-12 w-12 p-2.5",
+    };
 
     const variantClasses = {
       neutral: "text-[var(--app-shell-muted)] hover:text-[var(--foreground)] hover:bg-[var(--app-shell-subtle)]",
@@ -22,10 +29,11 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
       destructive: "text-[var(--app-shell-muted)] hover:text-[var(--destructive)] hover:bg-[var(--destructive-muted)]"
     };
 
-    const classes = `${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${className}`.trim();
+    const effectiveSizeClasses = isTouchLayout ? touchSizeClasses[size] : sizeClasses[size];
+    const classes = `${baseClasses} ${effectiveSizeClasses} ${variantClasses[variant]} ${className}`.trim();
 
     return (
-      <button ref={ref} className={classes} {...props}>
+      <button ref={ref} className={classes} data-touch-target={isTouchLayout ? "true" : undefined} {...props}>
         {children}
       </button>
     );