@cryptiklemur/lattice 1.12.0 → 1.14.0

package/client/src/components/sidebar/AddProjectModal.tsx

@@ -273,13 +273,22 @@ export function AddProjectModal({ isOpen, onClose }: AddProjectModalProps) {
     } as any);
   }
 
+  useEffect(function () {
+    if (!isOpen) return;
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape" && !dropdownOpen) onClose();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return function () { document.removeEventListener("keydown", handleKeyDown); };
+  }, [isOpen, dropdownOpen, onClose]);
+
   if (!isOpen) return null;
 
   var filtered = getFilteredEntries();
   var validation = getValidationMessage();
 
   return (
-    <div className="fixed inset-0 z-[9999] flex items-center justify-center">
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center" role="dialog" aria-modal="true" aria-label="Add Project">
       <div className="absolute inset-0 bg-black/50" onClick={onClose} />
       <div className="relative bg-base-200 border border-base-content/15 rounded-2xl shadow-2xl w-full max-w-3xl mx-4 overflow-hidden">
         <div className="flex items-center justify-between px-5 py-4 border-b border-base-content/15">

package/client/src/components/sidebar/NodeSettingsModal.tsx

@@ -79,12 +79,21 @@ export function NodeSettingsModal({ isOpen, onClose }: NodeSettingsModalProps) {
     copyTimeout.current = setTimeout(function () { setCopied(false); }, 2000);
   }
 
+  useEffect(function () {
+    if (!isOpen) return;
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return function () { document.removeEventListener("keydown", handleKeyDown); };
+  }, [isOpen, onClose]);
+
   if (!isOpen) return null;
 
   var inputClass = "w-full h-9 px-3 bg-base-300 border border-base-content/15 rounded-xl text-base-content text-[13px] focus:border-primary focus-visible:outline-none transition-colors duration-[120ms]";
 
   return (
-    <div className="fixed inset-0 z-[9999] flex items-center justify-center">
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center" role="dialog" aria-modal="true" aria-label="Node Settings">
       <div className="absolute inset-0 bg-black/50" onClick={onClose} />
       <div className="relative bg-base-200 border border-base-content/15 rounded-2xl shadow-2xl w-full max-w-md mx-4 overflow-hidden">
         <div className="flex items-center justify-between px-5 py-4 border-b border-base-content/15">

package/client/src/components/sidebar/ProjectRail.tsx

@@ -180,7 +180,15 @@ export function ProjectRail(props: ProjectRailProps) {
   );
 
   function handleContextMenu(e: React.MouseEvent, slug: string) {
-    setContextMenu({ visible: true, x: e.clientX, y: e.clientY, slug: slug });
+    var menuWidth = 160;
+    var menuHeight = 100;
+    var cx = e.clientX;
+    var cy = e.clientY;
+    if (cx + menuWidth > window.innerWidth - 8) cx = window.innerWidth - menuWidth - 8;
+    if (cy + menuHeight > window.innerHeight - 8) cy = window.innerHeight - menuHeight - 8;
+    if (cx < 8) cx = 8;
+    if (cy < 8) cy = 8;
+    setContextMenu({ visible: true, x: cx, y: cy, slug: slug });
   }
 
   return (

package/client/src/components/sidebar/SessionList.tsx

@@ -1,8 +1,13 @@
-import { useEffect, useRef, useState, useMemo } from "react";
-import type { SessionSummary, SessionListMessage, SessionCreatedMessage } from "@lattice/shared";
+import { useEffect, useRef, useState, useMemo, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { Clock, MessageSquare, Cpu, DollarSign } from "lucide-react";
+import type { SessionSummary, SessionPreview, SessionListMessage, SessionCreatedMessage, SessionPreviewMessage } from "@lattice/shared";
 import type { ServerMessage } from "@lattice/shared";
 import { useWebSocket } from "../../hooks/useWebSocket";
 import { markSessionHasUpdates, sessionHasUpdates, markSessionRead } from "../../stores/session";
+import { formatSessionTitle } from "../../utils/formatSessionTitle";
+
+var PAGE_SIZE = 40;
 
 interface SessionGroup {
   label: string;
@@ -83,6 +88,19 @@ function formatDate(ts: number): string {
   return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
 }
 
+function formatDuration(ms: number): string {
+  if (ms < 60000) return Math.round(ms / 1000) + "s";
+  if (ms < 3600000) return Math.round(ms / 60000) + "m";
+  var hours = Math.floor(ms / 3600000);
+  var mins = Math.round((ms % 3600000) / 60000);
+  return hours + "h " + mins + "m";
+}
+
+function formatCost(cost: number): string {
+  if (cost < 0.01) return "<$0.01";
+  return "$" + cost.toFixed(2);
+}
+
 function SessionSkeleton() {
   return (
     <div className="flex flex-col gap-2 px-4 py-3">
@@ -93,17 +111,84 @@ function SessionSkeleton() {
   );
 }
 
+function PreviewPopover(props: { preview: SessionPreview | null; anchorRect: DOMRect | null }) {
+  if (!props.anchorRect) return null;
+
+  var top = props.anchorRect.top;
+  var left = props.anchorRect.right + 8;
+
+  var fitsRight = left + 280 < window.innerWidth;
+  if (!fitsRight) {
+    left = props.anchorRect.left - 288;
+  }
+
+  var fitsBelow = top + 160 < window.innerHeight;
+  if (!fitsBelow) {
+    top = Math.max(8, props.anchorRect.bottom - 160);
+  }
+
+  var content = (
+    <div
+      className="fixed z-[9999] w-[270px] bg-base-300 border border-base-content/15 rounded-lg shadow-xl p-3 pointer-events-none"
+      style={{ top, left }}
+    >
+      {props.preview ? (
+        <>
+          <div className="text-[11px] text-base-content/50 leading-relaxed line-clamp-2 mb-2.5 italic">
+            {props.preview.lastMessage || "No messages"}
+          </div>
+          <div className="grid grid-cols-2 gap-x-3 gap-y-1.5">
+            <div className="flex items-center gap-1.5">
+              <DollarSign className="!size-3 text-base-content/30 shrink-0" />
+              <span className="text-[11px] text-base-content/60">{formatCost(props.preview.cost)}</span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <Clock className="!size-3 text-base-content/30 shrink-0" />
+              <span className="text-[11px] text-base-content/60">{formatDuration(props.preview.durationMs)}</span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <MessageSquare className="!size-3 text-base-content/30 shrink-0" />
+              <span className="text-[11px] text-base-content/60">{props.preview.messageCount} msgs</span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <Cpu className="!size-3 text-base-content/30 shrink-0" />
+              <span className="text-[11px] text-base-content/60">{props.preview.model || "unknown"}</span>
+            </div>
+          </div>
+        </>
+      ) : (
+        <div className="flex items-center gap-2">
+          <span className="w-3 h-3 border-2 border-base-content/20 border-t-primary/50 rounded-full animate-spin" />
+          <span className="text-[11px] text-base-content/40">Loading...</span>
+        </div>
+      )}
+    </div>
+  );
+
+  return createPortal(content, document.body);
+}
+
 export function SessionList(props: SessionListProps) {
   var ws = useWebSocket();
   var [sessions, setSessions] = useState<SessionSummary[]>([]);
   var [loading, setLoading] = useState<boolean>(false);
+  var [loadingMore, setLoadingMore] = useState<boolean>(false);
+  var [totalCount, setTotalCount] = useState<number>(0);
   var [renameId, setRenameId] = useState<string | null>(null);
   var [renameValue, setRenameValue] = useState<string>("");
   var [contextMenu, setContextMenu] = useState<ContextMenu | null>(null);
   var [unreadTick, setUnreadTick] = useState<number>(0);
+  var [hoveredId, setHoveredId] = useState<string | null>(null);
+  var [hoveredRect, setHoveredRect] = useState<DOMRect | null>(null);
+  var [previews, setPreviews] = useState<Map<string, SessionPreview>>(new Map());
   var renameInputRef = useRef<HTMLInputElement | null>(null);
   var handleRef = useRef<(msg: ServerMessage) => void>(function () {});
   var activeSessionIdRef = useRef<string | null>(props.activeSessionId);
+  var hoverTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  var sentinelRef = useRef<HTMLDivElement | null>(null);
+  var scrollContainerRef = useRef<HTMLDivElement | null>(null);
+  var offsetRef = useRef<number>(0);
+  var hasMoreRef = useRef<boolean>(true);
   activeSessionIdRef.current = props.activeSessionId;
 
   useEffect(function () {
@@ -111,22 +196,43 @@ export function SessionList(props: SessionListProps) {
       if (msg.type === "session:list") {
         var listMsg = msg as SessionListMessage;
         if (listMsg.projectSlug === props.projectSlug) {
-          var sorted = listMsg.sessions.slice().sort(function (a, b) { return b.updatedAt - a.updatedAt; });
-          var hadChanges = false;
-          for (var i = 0; i < sorted.length; i++) {
-            var s = sorted[i];
-            var prev = knownUpdatedAt.get(s.id);
-            if (prev !== undefined && s.updatedAt > prev && s.id !== activeSessionIdRef.current) {
-              markSessionHasUpdates(s.id);
-              hadChanges = true;
+          var incoming = listMsg.sessions.slice().sort(function (a, b) { return b.updatedAt - a.updatedAt; });
+          var listOffset = listMsg.offset || 0;
+          var listTotal = listMsg.totalCount || incoming.length;
+
+          if (listOffset > 0) {
+            setSessions(function (prev) {
+              var existingIds = new Set(prev.map(function (s) { return s.id; }));
+              var newSessions = incoming.filter(function (s) { return !existingIds.has(s.id); });
+              return prev.concat(newSessions);
+            });
+            setLoadingMore(false);
+          } else {
+            var hadChanges = false;
+            for (var i = 0; i < incoming.length; i++) {
+              var s = incoming[i];
+              var prev = knownUpdatedAt.get(s.id);
+              if (prev !== undefined && s.updatedAt > prev && s.id !== activeSessionIdRef.current) {
+                markSessionHasUpdates(s.id);
+                hadChanges = true;
+              }
+              knownUpdatedAt.set(s.id, s.updatedAt);
+            }
+            setSessions(function (existing) {
+              if (existing.length <= PAGE_SIZE) return incoming;
+              var incomingIds = new Set(incoming.map(function (s) { return s.id; }));
+              var kept = existing.filter(function (s) { return !incomingIds.has(s.id); });
+              return incoming.concat(kept).sort(function (a, b) { return b.updatedAt - a.updatedAt; });
+            });
+            setLoading(false);
+            if (hadChanges) {
+              setUnreadTick(function (t) { return t + 1; });
             }
-            knownUpdatedAt.set(s.id, s.updatedAt);
-          }
-          setSessions(sorted);
-          setLoading(false);
-          if (hadChanges) {
-            setUnreadTick(function (t) { return t + 1; });
           }
+
+          setTotalCount(listTotal);
+          offsetRef.current = listOffset + incoming.length;
+          hasMoreRef.current = listOffset + incoming.length < listTotal;
         }
       } else if (msg.type === "session:created") {
         var createdMsg = msg as SessionCreatedMessage;
@@ -135,8 +241,16 @@ export function SessionList(props: SessionListProps) {
           setSessions(function (prev2) {
             return [createdMsg.session, ...prev2];
           });
+          setTotalCount(function (t) { return t + 1; });
           props.onSessionActivate(createdMsg.session);
         }
+      } else if (msg.type === "session:preview") {
+        var previewMsg = msg as SessionPreviewMessage;
+        setPreviews(function (prev3) {
+          var next = new Map(prev3);
+          next.set(previewMsg.sessionId, previewMsg.preview);
+          return next;
+        });
       }
     };
   });
@@ -147,9 +261,11 @@ export function SessionList(props: SessionListProps) {
     }
     ws.subscribe("session:list", handler);
     ws.subscribe("session:created", handler);
+    ws.subscribe("session:preview", handler);
     return function () {
       ws.unsubscribe("session:list", handler);
       ws.unsubscribe("session:created", handler);
+      ws.unsubscribe("session:preview", handler);
     };
   }, [ws]);
 
@@ -160,16 +276,43 @@ export function SessionList(props: SessionListProps) {
     if (props.projectSlug && ws.status === "connected") {
       setSessions([]);
       setLoading(true);
-      sendRef.current({ type: "session:list_request", projectSlug: props.projectSlug });
+      offsetRef.current = 0;
+      hasMoreRef.current = true;
+      sendRef.current({ type: "session:list_request", projectSlug: props.projectSlug, offset: 0, limit: PAGE_SIZE });
       var interval = setInterval(function () {
         if (props.projectSlug) {
-          sendRef.current({ type: "session:list_request", projectSlug: props.projectSlug });
+          sendRef.current({ type: "session:list_request", projectSlug: props.projectSlug, offset: 0, limit: PAGE_SIZE });
         }
       }, 10000);
       return function () { clearInterval(interval); };
     }
   }, [props.projectSlug, ws.status]);
 
+  var loadMore = useCallback(function () {
+    if (!props.projectSlug || loadingMore || !hasMoreRef.current) return;
+    setLoadingMore(true);
+    sendRef.current({
+      type: "session:list_request",
+      projectSlug: props.projectSlug,
+      offset: offsetRef.current,
+      limit: PAGE_SIZE,
+    });
+  }, [props.projectSlug, loadingMore]);
+
+  useEffect(function () {
+    var sentinel = sentinelRef.current;
+    if (!sentinel) return;
+
+    var observer = new IntersectionObserver(function (entries) {
+      if (entries[0].isIntersecting) {
+        loadMore();
+      }
+    }, { root: scrollContainerRef.current, rootMargin: "100px" });
+
+    observer.observe(sentinel);
+    return function () { observer.disconnect(); };
+  }, [loadMore]);
+
   useEffect(function () {
     if (renameId && renameInputRef.current) {
       renameInputRef.current.focus();
@@ -198,6 +341,7 @@ export function SessionList(props: SessionListProps) {
       markSessionRead(session.id, 0);
       setUnreadTick(function (t) { return t + 1; });
     }
+    setHoveredId(null);
     props.onSessionActivate(session);
   }
 
@@ -246,11 +390,33 @@ export function SessionList(props: SessionListProps) {
     setSessions(function (prev) {
       return prev.filter(function (s) { return s.id !== session.id; });
     });
+    setTotalCount(function (t) { return Math.max(0, t - 1); });
     if (props.activeSessionId === session.id && props.onSessionDeactivate) {
       props.onSessionDeactivate();
     }
   }
 
+  function handleMouseEnter(session: SessionSummary, e: React.PointerEvent | React.MouseEvent) {
+    var rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
+    hoverTimerRef.current = setTimeout(function () {
+      setHoveredId(session.id);
+      setHoveredRect(rect);
+      if (!previews.has(session.id) && props.projectSlug) {
+        ws.send({ type: "session:preview_request", projectSlug: props.projectSlug, sessionId: session.id });
+      }
+    }, 300);
+  }
+
+  function handleMouseLeave() {
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+      hoverTimerRef.current = null;
+    }
+    setHoveredId(null);
+    setHoveredRect(null);
+  }
+
   var grouped = useMemo(function () {
     var displayed = props.filter
       ? sessions.filter(function (s) {
@@ -278,9 +444,11 @@ export function SessionList(props: SessionListProps) {
     );
   }
 
+  var activePreview = hoveredId ? (previews.get(hoveredId) || null) : null;
+
   return (
     <div className="flex flex-col flex-1 overflow-hidden min-h-0">
-      <div className="flex-1 overflow-y-auto overflow-x-hidden scrollbar-hidden py-0.5 pb-16">
+      <div ref={scrollContainerRef} className="flex-1 overflow-y-auto overflow-x-hidden scrollbar-hidden py-0.5 pb-16">
         {grouped.length === 0 ? (
           <div className="px-3 py-2 text-sm text-base-content/40 italic">
             {props.filter ? "No matches" : "No sessions yet"}
@@ -305,6 +473,8 @@ export function SessionList(props: SessionListProps) {
                         aria-current={isActive ? "true" : undefined}
                         onClick={function () { handleActivate(session); }}
                         onContextMenu={function (e) { handleContextMenu(e, session); }}
+                        onPointerEnter={function (e) { handleMouseEnter(session, e); }}
+                        onPointerLeave={handleMouseLeave}
                         className={
                           "flex flex-row items-start gap-2 px-2.5 py-[5px] mx-1 rounded w-[calc(100%-8px)] min-w-0 overflow-hidden cursor-pointer select-none transition-colors duration-[120ms] text-left focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:outline-none " +
                           (isActive ? "bg-primary/20 text-base-content font-medium" : "hover:bg-base-300/50")
@@ -331,7 +501,7 @@ export function SessionList(props: SessionListProps) {
                                 (isActive ? "" : isUnread ? "text-base-content font-semibold" : "text-base-content/55")
                               }
                             >
-                              {session.title}
+                              {formatSessionTitle(session.title)}
                             </span>
                           )}
                           <div className="flex items-center gap-1.5 mt-0.5">
@@ -356,8 +526,23 @@ export function SessionList(props: SessionListProps) {
             );
           })
         )}
+
+        {hasMoreRef.current && (
+          <div ref={sentinelRef} className="py-3 flex justify-center">
+            {loadingMore && (
+              <div className="flex items-center gap-2 text-[11px] text-base-content/30">
+                <span className="w-3 h-3 border-2 border-base-content/20 border-t-primary/50 rounded-full animate-spin" />
+                Loading...
+              </div>
+            )}
+          </div>
+        )}
       </div>
 
+      {hoveredId && (
+        <PreviewPopover preview={activePreview} anchorRect={hoveredRect} />
+      )}
+
       {contextMenu !== null && (
         <div
           role="menu"

package/client/src/components/sidebar/Sidebar.tsx

@@ -22,9 +22,9 @@ import { SettingsSidebar } from "./SettingsSidebar";
 function SectionLabel({ label, actions }: { label: string; actions?: React.ReactNode }) {
   return (
     <div className="px-4 pt-4 pb-2 flex items-center justify-between flex-shrink-0 select-none">
-      <span className="text-xs font-bold tracking-wider uppercase text-base-content/40">
+      <h2 className="text-xs font-bold tracking-wider uppercase text-base-content/40">
         {label}
-      </span>
+      </h2>
       {actions && (
         <div className="flex items-center gap-0.5">
           {actions}

package/client/src/components/sidebar/UserMenu.tsx

@@ -47,7 +47,11 @@ export function UserMenu(props: UserMenuProps) {
   if (props.anchorRef.current) {
     var rect = props.anchorRef.current.getBoundingClientRect();
     style.bottom = window.innerHeight - rect.top + 4 + "px";
-    style.left = rect.left + "px";
+    var leftPos = rect.left;
+    var menuW = 180;
+    if (leftPos + menuW > window.innerWidth - 8) leftPos = window.innerWidth - menuW - 8;
+    if (leftPos < 8) leftPos = 8;
+    style.left = leftPos + "px";
   }
 
   function handleRestart() {

package/client/src/components/ui/IconPicker.tsx

@@ -49,7 +49,7 @@ function renderPreview(value?: ProjectIcon) {
 
   if (value.type === "image") {
     return (
-      <img src={value.path} alt="icon" className="w-8 h-8 rounded-lg object-cover border border-base-content/15" />
+      <img src={value.path} alt="icon" className="w-8 h-8 rounded-lg object-cover border border-base-content/15" loading="lazy" />
     );
   }
 
@@ -200,7 +200,7 @@ export function IconPicker({ value, onChange }: IconPickerProps) {
             className="w-full text-[12px] text-base-content/60 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-[12px] file:bg-base-300 file:text-base-content/60 file:cursor-pointer"
           />
           {value?.type === "image" && (
-            <img src={value.path} alt="preview" className="w-16 h-16 rounded-xl object-cover border border-base-content/15" />
+            <img src={value.path} alt="preview" className="w-16 h-16 rounded-xl object-cover border border-base-content/15" loading="lazy" />
           )}
         </div>
       )}

package/client/src/components/ui/PopupMenu.tsx

@@ -52,15 +52,35 @@ export function PopupMenu(props: PopupMenuProps) {
   if (props.anchorRef.current) {
     var rect = props.anchorRef.current.getBoundingClientRect();
     var pos = props.position ?? "above";
+    var menuWidth = 180;
+    var menuHeight = 200;
+
     if (pos === "above") {
       style.bottom = window.innerHeight - rect.top + 4 + "px";
-      style.left = rect.left + "px";
+      var leftAbove = rect.left;
+      if (leftAbove + menuWidth > window.innerWidth - 8) leftAbove = window.innerWidth - menuWidth - 8;
+      if (leftAbove < 8) leftAbove = 8;
+      style.left = leftAbove + "px";
     } else if (pos === "below") {
-      style.top = rect.bottom + 4 + "px";
-      style.left = rect.left + "px";
+      var topBelow = rect.bottom + 4;
+      if (topBelow + menuHeight > window.innerHeight - 8) {
+        style.bottom = window.innerHeight - rect.top + 4 + "px";
+      } else {
+        style.top = topBelow + "px";
+      }
+      var leftBelow = rect.left;
+      if (leftBelow + menuWidth > window.innerWidth - 8) leftBelow = window.innerWidth - menuWidth - 8;
+      if (leftBelow < 8) leftBelow = 8;
+      style.left = leftBelow + "px";
     } else if (pos === "right") {
-      style.top = rect.top + "px";
-      style.left = rect.right + 4 + "px";
+      var topRight = rect.top;
+      if (topRight + menuHeight > window.innerHeight - 8) topRight = window.innerHeight - menuHeight - 8;
+      if (topRight < 8) topRight = 8;
+      style.top = topRight + "px";
+      var leftRight = rect.right + 4;
+      if (leftRight + menuWidth > window.innerWidth - 8) leftRight = rect.left - menuWidth - 4;
+      if (leftRight < 8) leftRight = 8;
+      style.left = leftRight + "px";
     }
   }
 

package/client/src/components/ui/Toast.tsx

@@ -36,7 +36,7 @@ export function Toast(props: ToastProps) {
   }
 
   return (
-    <div className="fixed top-3 right-3 z-[9999] flex flex-col gap-2 max-w-[340px]">
+    <div className="fixed top-3 right-3 z-[9999] flex flex-col gap-2 max-w-[340px]" role="status" aria-live="polite" aria-atomic="false">
       {props.items.map(function (item) {
         var Icon = ICON_MAP[item.type];
         return (

package/client/src/components/workspace/TaskEditModal.tsx

@@ -42,14 +42,19 @@ export function TaskEditModal(props: TaskEditModalProps) {
     <div
       className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm"
       onClick={handleBackdrop}
+      role="dialog"
+      aria-modal="true"
+      aria-label={task ? "Edit Task" : "New Scheduled Task"}
+      onKeyDown={function (e) { if (e.key === "Escape") onClose(); }}
     >
       <div className="bg-base-200 border border-base-content/15 rounded-2xl shadow-2xl w-full max-w-md mx-4">
         <div className="flex items-center justify-between px-5 py-4 border-b border-base-content/15">
-          <span className="text-[14px] font-semibold text-base-content">
+          <h2 className="text-[14px] font-semibold text-base-content">
             {task ? "Edit Task" : "New Scheduled Task"}
-          </span>
+          </h2>
           <button
             onClick={onClose}
+            aria-label="Close"
             className="btn btn-ghost btn-xs btn-square text-base-content/50"
           >
             <X size={14} />
@@ -58,8 +63,9 @@ export function TaskEditModal(props: TaskEditModalProps) {
 
         <form onSubmit={handleSubmit} className="p-5 space-y-4">
           <div className="space-y-1.5">
-            <label className="text-[12px] font-semibold text-base-content/40 uppercase tracking-wider">Name</label>
+            <label htmlFor="task-name" className="text-[12px] font-semibold text-base-content/40 uppercase tracking-wider">Name</label>
             <input
+              id="task-name"
               type="text"
               className="w-full h-9 px-3 bg-base-300 border border-base-content/15 rounded-xl text-base-content text-[13px] focus:border-primary focus-visible:outline-none transition-colors duration-[120ms]"
               placeholder="Daily standup summary"
@@ -70,8 +76,9 @@ export function TaskEditModal(props: TaskEditModalProps) {
           </div>
 
           <div className="space-y-1.5">
-            <label className="text-[12px] font-semibold text-base-content/40 uppercase tracking-wider">Prompt</label>
+            <label htmlFor="task-prompt" className="text-[12px] font-semibold text-base-content/40 uppercase tracking-wider">Prompt</label>
             <textarea
+              id="task-prompt"
               className="w-full px-3 py-2.5 bg-base-300 border border-base-content/15 rounded-xl text-base-content text-[13px] min-h-[96px] resize-y leading-relaxed focus:border-primary focus-visible:outline-none transition-colors duration-[120ms]"
               placeholder="Summarize yesterday's work and create a plan for today..."
               value={prompt}
@@ -80,16 +87,19 @@ export function TaskEditModal(props: TaskEditModalProps) {
           </div>
 
           <div className="space-y-1.5">
-            <label className="text-[12px] font-semibold text-base-content/40 uppercase tracking-wider">Cron Expression</label>
+            <label htmlFor="task-cron" className="text-[12px] font-semibold text-base-content/40 uppercase tracking-wider">Cron Expression</label>
             <input
+              id="task-cron"
               type="text"
               className={`w-full h-9 px-3 bg-base-300 border rounded-xl text-base-content text-[13px] font-mono focus:border-primary focus-visible:outline-none transition-colors duration-[120ms] ${cron.trim() && !cronValid ? "border-error" : "border-base-content/15"}`}
               placeholder="0 9 * * 1-5"
               value={cron}
               onChange={function (e) { setCron(e.target.value); }}
+              aria-invalid={cron.trim() && !cronValid ? "true" : undefined}
+              aria-describedby={cron.trim() ? "cron-preview" : undefined}
             />
             {cron.trim() && (
-              <p className={`text-[11px] mt-1 ${cronValid ? "text-primary/80" : "text-error"}`}>
+              <p id="cron-preview" className={`text-[11px] mt-1 ${cronValid ? "text-primary/80" : "text-error"}`}>
                 {cronPreview}
               </p>
             )}

package/client/src/hooks/useSession.ts

@@ -415,6 +415,7 @@ export function useSession(): UseSessionReturn {
     messageQueue: state.messageQueue,
     isBusy: state.isBusy,
     isPlanMode: state.isPlanMode,
+    pendingPrefill: state.pendingPrefill,
     enqueueMessage,
     removeQueuedMessage,
     updateQueuedMessage,

package/client/src/hooks/useSwipeDrawer.ts

@@ -123,12 +123,35 @@ export function useSwipeDrawer(
       }
     }
 
+    var cleanupTimer: ReturnType<typeof setTimeout> | null = null;
+
+    function cancelPendingCleanup() {
+      if (cleanupTimer !== null) {
+        clearTimeout(cleanupTimer);
+        cleanupTimer = null;
+      }
+    }
+
     function cleanupAfterAnimation() {
-      // After the CSS transition finishes, remove inline styles
-      // so the checkbox-driven DaisyUI styles take over again
-      setTimeout(function () {
+      // Cancel any pending cleanup from a previous swipe to avoid races
+      cancelPendingCleanup();
+
+      // Listen for the transition to actually finish, with a fallback timer
+      if (panel) {
+        var handled = false;
+        function onEnd() {
+          if (handled) return;
+          handled = true;
+          if (panel) panel.removeEventListener("transitionend", onEnd);
+          cancelPendingCleanup();
+          clearDragStyles();
+        }
+        panel.addEventListener("transitionend", onEnd, { once: true });
+        // Fallback in case transitionend never fires (e.g. display:none)
+        cleanupTimer = setTimeout(onEnd, 350);
+      } else {
         clearDragStyles();
-      }, 280);
+      }
     }
 
     function onTouchStart(e: TouchEvent) {
@@ -266,6 +289,7 @@ export function useSwipeDrawer(
     document.addEventListener("touchcancel", onTouchCancel, { passive: true });
 
     return function () {
+      cancelPendingCleanup();
       document.removeEventListener("touchstart", onTouchStart);
       document.removeEventListener("touchmove", onTouchMove);
       document.removeEventListener("touchend", onTouchEnd);

package/client/src/hooks/useWebSocket.ts

@@ -21,6 +21,9 @@ export function useWebSocket(): WebSocketContextValue {
 }
 
 export function getWebSocketUrl(): string {
+  if (import.meta.env.DEV) {
+    return "ws://" + window.location.hostname + ":7654/ws";
+  }
   var protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
   return protocol + "//" + window.location.host + "/ws";
 }