@cryptiklemur/lattice 1.12.0 → 1.14.0

package/client/src/components/chat/ChatView.tsx

@@ -1,11 +1,11 @@
-import { useEffect, useRef, useCallback, useState } from "react";
+import { useEffect, useRef, useCallback, useState, useMemo } from "react";
 import { Terminal, Info, ArrowDown, Pencil, Copy, Check, Menu, AlertTriangle, Zap, Square, X } from "lucide-react";
 import { LatticeLogomark } from "../ui/LatticeLogomark";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { useSession } from "../../hooks/useSession";
 import { useProjects } from "../../hooks/useProjects";
 import { useWebSocket } from "../../hooks/useWebSocket";
-import { setSessionTitle, setIsProcessing, setCurrentStatus, setWasInterrupted } from "../../stores/session";
+import { setSessionTitle, setIsProcessing, setCurrentStatus, setWasInterrupted, setPendingPrefill } from "../../stores/session";
 import { openSettings, openProjectSettings } from "../../stores/sidebar";
 import { openTab } from "../../stores/workspace";
 import { builtinCommands } from "../../commands";
@@ -18,9 +18,10 @@ import { StatusBar } from "./StatusBar";
 import { useSidebar } from "../../hooks/useSidebar";
 import { useOnline } from "../../hooks/useOnline";
 import { useSpinnerVerb } from "../../hooks/useSpinnerVerb";
+import { formatSessionTitle } from "../../utils/formatSessionTitle";
 
 export function ChatView() {
-  var { messages, isProcessing, sendMessage, activeSessionId, activeSessionTitle, currentStatus, contextUsage, contextBreakdown, lastResponseCost, lastResponseDuration, historyLoading, wasInterrupted, promptSuggestion, failedInput, clearFailedInput, messageQueue, enqueueMessage, removeQueuedMessage, updateQueuedMessage, isBusy, isPlanMode } = useSession();
+  var { messages, isProcessing, sendMessage, activeSessionId, activeSessionTitle, currentStatus, contextUsage, contextBreakdown, lastResponseCost, lastResponseDuration, historyLoading, wasInterrupted, promptSuggestion, failedInput, clearFailedInput, messageQueue, enqueueMessage, removeQueuedMessage, updateQueuedMessage, isBusy, isPlanMode, pendingPrefill } = useSession();
   var { activeProject } = useProjects();
   var { toggleDrawer } = useSidebar();
   var online = useOnline();
@@ -37,6 +38,14 @@ export function ChatView() {
   var [showInfo, setShowInfo] = useState<boolean>(false);
   var [confirmStopExternal, setConfirmStopExternal] = useState<boolean>(false);
   var [prefillText, setPrefillText] = useState<string | null>(null);
+
+  useEffect(function () {
+    if (pendingPrefill && !historyLoading) {
+      setPrefillText(pendingPrefill);
+      setPendingPrefill(null);
+    }
+  }, [pendingPrefill, historyLoading]);
+
   var [copiedField, setCopiedField] = useState<string | null>(null);
   var [isRenaming, setIsRenaming] = useState<boolean>(false);
   var [renameValue, setRenameValue] = useState<string>("");
@@ -236,16 +245,28 @@ export function ChatView() {
     return "oklch(0.5 0.1 250)";
   }
 
-  var contextPercent = 0;
-  var contextFilled = 0;
-  if (contextUsage && contextUsage.contextWindow > 0) {
-    contextFilled = contextUsage.inputTokens + contextUsage.cacheReadTokens + contextUsage.cacheCreationTokens;
-    contextPercent = Math.min(100, Math.round((contextFilled / contextUsage.contextWindow) * 100));
-  }
-
-  var autocompactPercent = contextBreakdown ? Math.round((contextBreakdown.autocompactAt / contextBreakdown.contextWindow) * 100) : 90;
-  var isApproachingCompact = contextPercent >= autocompactPercent - 10;
-  var isCritical = contextPercent >= autocompactPercent;
+  var contextInfo = useMemo(function () {
+    var percent = 0;
+    var filled = 0;
+    if (contextUsage && contextUsage.contextWindow > 0) {
+      filled = contextUsage.inputTokens + contextUsage.cacheReadTokens + contextUsage.cacheCreationTokens;
+      percent = Math.min(100, Math.round((filled / contextUsage.contextWindow) * 100));
+    }
+    var autocompact = contextBreakdown ? Math.round((contextBreakdown.autocompactAt / contextBreakdown.contextWindow) * 100) : 90;
+    return {
+      contextPercent: percent,
+      contextFilled: filled,
+      autocompactPercent: autocompact,
+      isApproachingCompact: percent >= autocompact - 10,
+      isCritical: percent >= autocompact,
+    };
+  }, [contextUsage, contextBreakdown]);
+
+  var contextPercent = contextInfo.contextPercent;
+  var contextFilled = contextInfo.contextFilled;
+  var autocompactPercent = contextInfo.autocompactPercent;
+  var isApproachingCompact = contextInfo.isApproachingCompact;
+  var isCritical = contextInfo.isCritical;
 
   var resumeCommand = activeSessionId && activeProject
     ? "cd " + activeProject.path + " && claude --resume " + activeSessionId
@@ -263,7 +284,10 @@ export function ChatView() {
         }
         return true;
       case "copy": {
-        var lastAssistant = [...messages].reverse().find(function (m) { return m.type === "assistant"; });
+        var lastAssistant: typeof messages[0] | undefined;
+        for (var ci = messages.length - 1; ci >= 0; ci--) {
+          if (messages[ci].type === "assistant") { lastAssistant = messages[ci]; break; }
+        }
         if (lastAssistant?.text) {
           navigator.clipboard.writeText(lastAssistant.text);
         }
@@ -355,6 +379,14 @@ export function ChatView() {
 
   var virtualItems = virtualizer.getVirtualItems();
 
+  var lastAssistantIndex = useMemo(function () {
+    if (isProcessing || lastResponseCost == null) return -1;
+    for (var i = messages.length - 1; i >= 0; i--) {
+      if (messages[i].type === "assistant") return i;
+    }
+    return -1;
+  }, [messages, isProcessing, lastResponseCost]);
+
   return (
     <div className="flex flex-col h-full w-full bg-base-100 overflow-hidden relative">
       <div className="bg-base-100 border-b border-base-300 flex-shrink-0 px-2 sm:px-4">
@@ -379,7 +411,7 @@ export function ChatView() {
             ) : (
               <>
                 <span className="text-sm font-semibold text-base-content truncate">
-                  {activeSessionTitle || (activeSessionId ? "Session" : "New Session")}
+                  {formatSessionTitle(activeSessionTitle) || (activeSessionId ? "Session" : "New Session")}
                 </span>
                 {activeSessionId && (
                   <button
@@ -442,7 +474,7 @@ export function ChatView() {
           {showContext && activeSessionId && (
             <div
               ref={contextPanelRef}
-              className="absolute top-full right-0 mt-1 z-50 bg-base-300 border border-base-content/15 rounded-lg shadow-xl p-3 min-w-[300px] max-w-[340px]"
+              className="absolute top-full right-0 mt-1 z-50 bg-base-300 border border-base-content/15 rounded-lg shadow-xl p-3 w-[calc(100vw-24px)] sm:min-w-[300px] sm:w-auto max-w-[340px]"
             >
               <div className="flex flex-col gap-3">
                 <div className="flex items-center justify-between">
@@ -555,7 +587,7 @@ export function ChatView() {
           {showInfo && activeSessionId && (
             <div
               ref={infoPanelRef}
-              className="absolute top-full right-0 mt-1 z-50 bg-base-300 border border-base-content/15 rounded-lg shadow-xl p-3 min-w-[340px]"
+              className="absolute top-full right-0 mt-1 z-50 bg-base-300 border border-base-content/15 rounded-lg shadow-xl p-3 w-[calc(100vw-24px)] sm:min-w-[340px] sm:w-auto max-w-[380px]"
             >
               <div className="flex flex-col gap-2.5">
                 <div>
@@ -623,7 +655,9 @@ export function ChatView() {
       <div
         ref={scrollParentRef}
         className="flex-1 overflow-y-auto overflow-x-hidden min-h-0 bg-lattice-grid"
-        style={{ WebkitOverflowScrolling: "touch" }}
+        aria-live="polite"
+        aria-relevant="additions"
+        style={{ WebkitOverflowScrolling: "touch", touchAction: "pan-y" }}
       >
         {messages.length === 0 && historyLoading ? (
           <div className="flex items-center justify-center h-full">
@@ -680,22 +714,15 @@ export function ChatView() {
                 if (groupSize >= 2) {
                   if (idx === groupStart) {
                     var groupTools = messages.slice(groupStart, groupEnd + 1);
-                    return <ToolGroup key={idx} tools={groupTools} />;
+                    return <ToolGroup key={"tg-" + (groupTools[0].uuid || idx)} tools={groupTools} />;
                   }
                   return null;
                 }
               }
-              var isLastAssistant = false;
-              if (msg.type === "assistant" && !isProcessing && lastResponseCost != null) {
-                var foundLater = false;
-                for (var li = idx + 1; li < messages.length; li++) {
-                  if (messages[li].type === "assistant") { foundLater = true; break; }
-                }
-                if (!foundLater) isLastAssistant = true;
-              }
+              var isLastAssistant = idx === lastAssistantIndex;
               return (
                 <Message
-                  key={idx}
+                  key={msg.uuid || ("msg-" + idx)}
                   message={msg}
                   responseCost={isLastAssistant ? lastResponseCost : undefined}
                   responseDuration={isLastAssistant ? lastResponseDuration : undefined}
@@ -753,14 +780,7 @@ export function ChatView() {
                   }
                 }
 
-                var isLastAssistant = false;
-                if (msg.type === "assistant" && !isProcessing && lastResponseCost != null) {
-                  var foundLater = false;
-                  for (var li = virtualItem.index + 1; li < messages.length; li++) {
-                    if (messages[li].type === "assistant") { foundLater = true; break; }
-                  }
-                  if (!foundLater) isLastAssistant = true;
-                }
+                var isLastAssistant = virtualItem.index === lastAssistantIndex;
                 return (
                   <div
                     key={virtualItem.key}
@@ -871,7 +891,7 @@ export function ChatView() {
       )}
 
       {confirmStopExternal && (
-        <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="End External Process" onKeyDown={function (e) { if (e.key === "Escape") setConfirmStopExternal(false); }}>
           <div className="absolute inset-0 bg-black/50" onClick={function () { setConfirmStopExternal(false); }} />
           <div className="relative bg-base-200 border border-base-content/15 rounded-2xl shadow-2xl w-full max-w-sm mx-4 overflow-hidden">
             <div className="px-5 py-4 border-b border-base-content/15">
@@ -938,6 +958,7 @@ export function ChatView() {
 
       <div className="flex-shrink-0 border-t border-base-300 bg-base-200 px-2 sm:px-4 pb-3 pt-2">
         <ChatInput
+          sessionId={activeSessionId}
           onSend={handleSend}
           disabled={!activeSessionId || !online || isBusy}
           disabledPlaceholder={isBusy ? "Session in use by another client..." : undefined}

package/client/src/components/chat/Message.tsx

@@ -1,22 +1,47 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, memo } from "react";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { Wrench, TriangleAlert, ChevronDown, Check, X, Shield } from "lucide-react";
+import { Wrench, TriangleAlert, ChevronDown, ChevronRight, Check, X, Shield, Zap, Link, Copy, SquarePlus } from "lucide-react";
 import type { HistoryMessage, ChatPermissionResponseMessage } from "@lattice/shared";
 import { useWebSocket } from "../../hooks/useWebSocket";
+import { getSessionStore, setPendingPrefill } from "../../stores/session";
 import { ToolResultRenderer } from "./ToolResultRenderer";
 import { formatToolSummary } from "./toolSummary";
 import { PromptQuestion } from "./PromptQuestion";
 import { TodoCard } from "./TodoCard";
 
+function TableWrapper(props: React.HTMLAttributes<HTMLTableElement>) {
+  var wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(function () {
+    var el = wrapperRef.current;
+    if (!el) return;
+    function check() {
+      if (!el) return;
+      var hasOverflow = el.scrollWidth > el.clientWidth + 1;
+      var atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 2;
+      el.classList.toggle("has-overflow", hasOverflow);
+      el.classList.toggle("scrolled-end", atEnd || !hasOverflow);
+    }
+    check();
+    el.addEventListener("scroll", check, { passive: true });
+    var ro = new ResizeObserver(check);
+    ro.observe(el);
+    return function () {
+      el!.removeEventListener("scroll", check);
+      ro.disconnect();
+    };
+  }, []);
+
+  return (
+    <div ref={wrapperRef} className="table-wrapper">
+      <table {...props} />
+    </div>
+  );
+}
+
 var mdComponents = {
-  table: function (props: React.HTMLAttributes<HTMLTableElement>) {
-    return (
-      <div className="table-wrapper">
-        <table {...props} />
-      </div>
-    );
-  },
+  table: TableWrapper,
 };
 
 interface MessageProps {
@@ -47,19 +72,140 @@ function formatTime(timestamp: number): string {
   return months[d.getMonth()] + " " + d.getDate() + ", " + time;
 }
 
+function MessageAnchor(props: { id: string | undefined }) {
+  if (!props.id) return null;
+  function handleClick() {
+    var url = window.location.pathname + "#msg-" + props.id;
+    window.history.replaceState(null, "", url);
+    navigator.clipboard.writeText(window.location.origin + url);
+  }
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      className="opacity-0 group-hover/msg:opacity-100 transition-opacity duration-150 text-base-content/20 hover:text-base-content/50 cursor-pointer p-0.5 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:outline-none rounded"
+      title="Copy link to message"
+    >
+      <Link size={11} />
+    </button>
+  );
+}
+
+function stripMarkdown(text: string): string {
+  return text
+    .replace(/```[\s\S]*?```/g, function (m) { return m.replace(/```\w*\n?/g, "").replace(/```$/g, ""); })
+    .replace(/`([^`]+)`/g, "$1")
+    .replace(/\*\*([^*]+)\*\*/g, "$1")
+    .replace(/\*([^*]+)\*/g, "$1")
+    .replace(/^#{1,6}\s+/gm, "")
+    .replace(/^\s*[-*+]\s+/gm, "- ")
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+    .replace(/^>\s+/gm, "")
+    .trim();
+}
+
+function MessageActions(props: { text: string; showNewSession?: boolean }) {
+  var [copied, setCopied] = useState(false);
+  var ws = useWebSocket();
+
+  function handleCopy(e: React.MouseEvent) {
+    var content = e.shiftKey ? stripMarkdown(props.text) : props.text;
+    navigator.clipboard.writeText(content);
+    setCopied(true);
+    setTimeout(function () { setCopied(false); }, 1500);
+  }
+
+  function handleNewSession() {
+    var state = getSessionStore().state;
+    if (!state.activeProjectSlug) return;
+    setPendingPrefill(props.text);
+    ws.send({ type: "session:create", projectSlug: state.activeProjectSlug });
+  }
+
+  var btnClass = "opacity-0 group-hover/msg:opacity-100 transition-opacity duration-150 text-base-content/20 hover:text-base-content/50 cursor-pointer p-0.5 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:outline-none rounded";
+
+  return (
+    <>
+      <button type="button" onClick={handleCopy} className={btnClass} title={copied ? "Copied!" : "Copy message (Shift+click for plain text)"}>
+        {copied ? <Check size={11} /> : <Copy size={11} />}
+      </button>
+      {props.showNewSession && (
+        <button type="button" onClick={handleNewSession} className={btnClass} title="Start new session with this message">
+          <SquarePlus size={11} />
+        </button>
+      )}
+    </>
+  );
+}
+
+function parseSkillInvocation(text: string): { skillName: string; content: string } | null {
+  var firstNewline = text.search(/\r?\n/);
+  if (firstNewline === -1) return null;
+  var firstLine = text.slice(0, firstNewline).trim();
+  if (firstLine.indexOf(":") === -1) return null;
+  if (!/\n---[\r\n]/.test(text)) return null;
+  return { skillName: firstLine, content: text.slice(firstNewline).replace(/^\r?\n+---[\r\n]+/, "").trim() };
+}
+
+function SkillMessage(props: { skillName: string; content: string; time: string | null; uuid?: string }) {
+  var [expanded, setExpanded] = useState(false);
+  return (
+    <div id={props.uuid ? "msg-" + props.uuid : undefined} className="chat chat-end px-5 py-1 group/msg">
+      <div className="chat-bubble chat-bubble-primary text-[13px] leading-relaxed break-words max-w-[95%] sm:max-w-[85%] shadow-sm">
+        <button
+          type="button"
+          aria-expanded={expanded}
+          onClick={function () { setExpanded(!expanded); }}
+          className="flex items-center gap-2 w-full text-left cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-content/30 rounded py-0.5"
+        >
+          <Zap size={13} className="text-primary-content/50 shrink-0" />
+          <span className="font-mono font-semibold text-primary-content text-[13px] tracking-tight">
+            /{props.skillName}
+          </span>
+          <ChevronRight
+            size={14}
+            className={"text-primary-content/30 ml-auto shrink-0 transition-transform duration-200 " + (expanded ? "rotate-90" : "")}
+          />
+        </button>
+        {expanded && (
+          <div className="mt-2 pt-2 border-t border-primary-content/10 relative">
+            <div className="max-h-[400px] overflow-y-auto skill-content-scroll prose prose-sm max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 prose-headings:text-primary-content prose-headings:text-[13px] prose-headings:mt-3 prose-headings:mb-1 prose-p:text-primary-content/80 prose-strong:text-primary-content prose-code:text-primary-content/70 prose-code:text-[11px] prose-pre:bg-primary/20 prose-a:text-primary-content/90 prose-a:underline text-[12px] leading-relaxed prose-li:text-primary-content/75 prose-li:text-[12px] prose-hr:border-primary-content/10">
+              <Markdown remarkPlugins={[remarkGfm]} components={mdComponents}>{props.content}</Markdown>
+            </div>
+          </div>
+        )}
+      </div>
+      {props.time && (
+        <div className="chat-footer text-[10px] text-base-content/30 mt-0.5 flex items-center gap-1">
+          {props.time}
+          <MessageAnchor id={props.uuid} />
+          <MessageActions text={"/" + props.skillName} showNewSession />
+        </div>
+      )}
+    </div>
+  );
+}
+
 function UserMessage(props: { message: HistoryMessage }) {
   var msg = props.message;
   var time = formatTime(msg.timestamp);
+  var text = msg.text || "";
+  var skill = parseSkillInvocation(text);
+  if (skill) {
+    return <SkillMessage skillName={skill.skillName} content={skill.content} time={time} uuid={msg.uuid} />;
+  }
   return (
-    <div className="chat chat-end px-5 py-1">
+    <div id={msg.uuid ? "msg-" + msg.uuid : undefined} className="chat chat-end px-5 py-1 group/msg">
       <div className="chat-bubble chat-bubble-primary text-[13px] leading-relaxed break-words max-w-[95%] sm:max-w-[85%] shadow-sm">
         <div className="prose prose-sm max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 prose-headings:text-primary-content prose-p:text-primary-content prose-strong:text-primary-content prose-code:text-primary-content/80 prose-pre:bg-primary/20 prose-a:text-primary-content/90 prose-a:underline">
-          <Markdown remarkPlugins={[remarkGfm]} components={mdComponents}>{msg.text || ""}</Markdown>
+          <Markdown remarkPlugins={[remarkGfm]} components={mdComponents}>{text}</Markdown>
         </div>
       </div>
       {time && (
-        <div className="chat-footer text-[10px] text-base-content/30 mt-0.5">
+        <div className="chat-footer text-[10px] text-base-content/30 mt-0.5 flex items-center gap-1">
           {time}
+          <MessageAnchor id={msg.uuid} />
+          <MessageActions text={text} showNewSession />
         </div>
       )}
     </div>
@@ -84,7 +230,7 @@ function AssistantMessage(props: { message: HistoryMessage; responseCost?: numbe
   var msg = props.message;
   var time = formatTime(msg.timestamp);
   return (
-    <div className="chat chat-start px-5 py-1">
+    <div id={msg.uuid ? "msg-" + msg.uuid : undefined} className="chat chat-start px-5 py-1 group/msg">
       <div className="chat-image">
         <div className="w-6 h-6 rounded-full bg-primary/15 border border-primary/20 flex items-center justify-center">
           <div className="w-2.5 h-2.5 rounded-full bg-primary" />
@@ -109,6 +255,8 @@ function AssistantMessage(props: { message: HistoryMessage; responseCost?: numbe
           {msg.outputTokens != null && msg.outputTokens > 0 && (
             <span className="text-base-content/15">{formatTokenCount(msg.outputTokens)} out</span>
           )}
+          <MessageAnchor id={msg.uuid} />
+          <MessageActions text={msg.text || ""} showNewSession />
         </div>
       )}
     </div>
@@ -130,7 +278,7 @@ function ToolMessage(props: { message: HistoryMessage }) {
   }
 
   return (
-    <div className="ml-14 mr-5 py-0.5 max-w-[95%] sm:max-w-[75%]">
+    <div className="ml-14 mr-5 py-0.5 max-w-[95%] sm:max-w-[75%] group/msg">
       <div
         className={
           "rounded-lg overflow-hidden text-[12px] border transition-colors duration-100 " +
@@ -176,6 +324,11 @@ function ToolMessage(props: { message: HistoryMessage }) {
           </div>
         )}
       </div>
+      {hasResult && (
+        <div className="flex items-center gap-1 mt-0.5 px-0.5">
+          <MessageActions text={msg.content || ""} />
+        </div>
+      )}
     </div>
   );
 }
@@ -322,7 +475,7 @@ function PermissionMessage(props: { message: HistoryMessage }) {
           <span className="text-[10px] text-base-content/20 italic ml-auto">waiting for approval...</span>
 
           {showScopeMenu && (
-            <div className={"absolute left-[88px] z-50 bg-base-300 border border-warning/20 rounded-lg shadow-xl p-1 text-[12px] font-mono min-w-[220px] " + (dropUp ? "bottom-full mb-1" : "top-full mt-1")}>
+            <div className={"absolute left-0 sm:left-[88px] z-50 bg-base-300 border border-warning/20 rounded-lg shadow-xl p-1 text-[12px] font-mono w-[calc(100vw-48px)] sm:w-auto sm:min-w-[220px] max-w-[280px] " + (dropUp ? "bottom-full mb-1" : "top-full mt-1")}>
               <button
                 className="flex flex-col w-full px-2.5 py-1.5 rounded hover:bg-warning/10 text-left text-base-content/70 transition-colors"
                 onClick={function () { setShowScopeMenu(false); respond(true, true, "session"); }}
@@ -352,7 +505,7 @@ function PermissionMessage(props: { message: HistoryMessage }) {
   );
 }
 
-export function Message(props: MessageProps) {
+export var Message = memo(function Message(props: MessageProps) {
   var msg = props.message;
 
   if (msg.type === "user") {
@@ -380,4 +533,4 @@ export function Message(props: MessageProps) {
   }
 
   return null;
-}
+});

package/client/src/components/chat/ToolGroup.tsx

@@ -119,7 +119,7 @@ export function ToolGroup(props: ToolGroupProps) {
         {expanded && (
           <div className="border-t border-base-content/8">
             {tools.map(function (tool, i) {
-              return <ToolDetail key={tool.toolId || i} tool={tool} />;
+              return <ToolDetail key={tool.toolId || (tool.name + "-" + i)} tool={tool} />;
             })}
           </div>
         )}

package/client/src/components/dashboard/DashboardView.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { useMesh } from "../../hooks/useMesh";
 import { useProjects } from "../../hooks/useProjects";
 import { useSidebar } from "../../hooks/useSidebar";
@@ -10,6 +10,7 @@ import {
   ChevronRight, Lock, Bug,
 } from "lucide-react";
 import type { ServerMessage, SessionSummary, LatticeConfig } from "@lattice/shared";
+import { formatSessionTitle } from "../../utils/formatSessionTitle";
 
 function relativeTime(ts: number): string {
   var diff = Date.now() - ts;
@@ -31,7 +32,9 @@ export function DashboardView() {
   var [sessions, setSessions] = useState<SessionSummary[]>([]);
   var [localConfig, setLocalConfig] = useState<LatticeConfig | null>(null);
 
-  var onlineNodes = nodes.filter(function (n) { return n.online; });
+  var onlineNodes = useMemo(function () {
+    return nodes.filter(function (n) { return n.online; });
+  }, [nodes]);
 
   useEffect(function () {
     function handleSessions(msg: ServerMessage) {
@@ -57,11 +60,32 @@ export function DashboardView() {
     };
   }, []);
 
+  var projectTitleMap = useMemo(function () {
+    var map = new Map<string, string>();
+    for (var i = 0; i < projects.length; i++) {
+      map.set(projects[i].slug, projects[i].title);
+    }
+    return map;
+  }, [projects]);
+
   function getProjectTitle(slug: string): string {
-    var project = projects.find(function (p) { return p.slug === slug; });
-    return project ? project.title : slug;
+    return projectTitleMap.get(slug) || slug;
   }
 
+  var sessionsByProject = useMemo(function () {
+    var map = new Map<string, SessionSummary[]>();
+    for (var i = 0; i < sessions.length; i++) {
+      var s = sessions[i];
+      var arr = map.get(s.projectSlug);
+      if (!arr) {
+        arr = [];
+        map.set(s.projectSlug, arr);
+      }
+      arr.push(s);
+    }
+    return map;
+  }, [sessions]);
+
   var totalSessions = sessions.length;
 
   return (
@@ -135,7 +159,7 @@ export function DashboardView() {
                     className="flex items-center gap-3 px-3 py-2 rounded-xl border border-base-content/15 bg-base-200 hover:border-base-content/30 transition-colors duration-[120ms] cursor-pointer text-left focus-visible:ring-2 focus-visible:ring-primary"
                   >
                     <MessageSquare size={12} className="text-base-content/30 flex-shrink-0" />
-                    <span className="flex-1 text-[12px] text-base-content truncate">{s.title || "Untitled"}</span>
+                    <span className="flex-1 text-[12px] text-base-content truncate">{formatSessionTitle(s.title) || "Untitled"}</span>
                     <span className="px-1.5 py-0.5 rounded-md text-[10px] font-mono bg-base-content/8 text-base-content/40 flex-shrink-0">
                       {getProjectTitle(s.projectSlug)}
                     </span>
@@ -155,7 +179,7 @@ export function DashboardView() {
             <h2 className="text-[11px] font-semibold tracking-wider uppercase text-base-content/40 mb-3">Projects</h2>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
               {projects.map(function (project) {
-                var projectSessions = sessions.filter(function (s) { return s.projectSlug === project.slug; });
+                var projectSessions = sessionsByProject.get(project.slug) || [];
                 return (
                   <button
                     key={project.slug}

package/client/src/components/project-settings/ProjectMemory.tsx

@@ -121,8 +121,16 @@ function MemoryViewModal({
   var parsed = parseFrontmatter(content);
   var hasMeta = Object.keys(parsed.meta).length > 0;
 
+  useEffect(function () {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return function () { document.removeEventListener("keydown", handleKeyDown); };
+  }, [onClose]);
+
   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={"Memory: " + (parsed.meta.name || memory.filename)}>
       <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-2xl mx-4 max-h-[80vh] flex flex-col overflow-hidden">
         <div className="flex items-center justify-between px-5 py-4 border-b border-base-content/15 flex-shrink-0">
@@ -208,8 +216,16 @@ function MemoryEditModal({
     onSave(filename, content);
   }
 
+  useEffect(function () {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return function () { document.removeEventListener("keydown", handleKeyDown); };
+  }, [onClose]);
+
   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={isNew ? "New Memory" : "Edit Memory"}>
       <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-2xl mx-4 max-h-[90vh] flex flex-col overflow-hidden">
         <div className="flex items-center justify-between px-5 py-4 border-b border-base-content/15 flex-shrink-0">

package/client/src/components/project-settings/ProjectSettingsView.tsx

@@ -86,7 +86,7 @@ export function ProjectSettingsView() {
   var { settings, loading, error, updateSection } = useProjectSettings(activeProjectSlug);
 
   return (
-    <div className="flex-1 overflow-auto px-4 sm:px-8 py-4 sm:py-6 max-w-3xl">
+    <section aria-label="Project Settings" className="flex-1 overflow-auto px-4 sm:px-8 py-4 sm:py-6 max-w-3xl">
       {config && (
         <div className="mb-6 flex items-center gap-3">
           <button
@@ -106,6 +106,6 @@ export function ProjectSettingsView() {
         <div className="text-[13px] text-error py-4">{error}</div>
       )}
       {!loading && !error && settings && renderSection(section, settings, updateSection, activeProjectSlug ?? undefined)}
-    </div>
+    </section>
   );
 }

package/client/src/components/settings/SettingsView.tsx

@@ -50,7 +50,7 @@ export function SettingsView() {
   var config = SECTION_CONFIG[section];
 
   return (
-    <div className="flex-1 overflow-auto px-4 sm:px-8 py-4 sm:py-6 max-w-3xl">
+    <section aria-label="Settings" className="flex-1 overflow-auto px-4 sm:px-8 py-4 sm:py-6 max-w-3xl">
       {config && (
         <div className="mb-6 flex items-center gap-3">
           <button
@@ -64,6 +64,6 @@ export function SettingsView() {
         </div>
       )}
       {renderSection(section)}
-    </div>
+    </section>
   );
 }

package/client/src/components/settings/skill-shared.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Trash2, RefreshCw, X, Loader2, FileText } from "lucide-react";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -126,8 +126,16 @@ export function SkillViewModal({ path, content, onClose }: { path: string; conte
   var parsed = parseFrontmatter(content);
   var hasMeta = Object.keys(parsed.meta).length > 0;
 
+  useEffect(function () {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return function () { document.removeEventListener("keydown", handleKeyDown); };
+  }, [onClose]);
+
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
+    <div className="fixed inset-0 z-50 flex items-center justify-center" role="dialog" aria-modal="true" aria-label={"Skill: " + (parsed.meta.name || path)}>
       <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-2xl mx-4 max-h-[80vh] flex flex-col overflow-hidden">
         <div className="flex items-center justify-between px-5 py-4 border-b border-base-content/15 flex-shrink-0">