@cryptiklemur/lattice 1.46.7 → 2.0.0

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

@@ -0,0 +1,235 @@
+import { useState } from "react";
+import { Globe, FormInput, Check, X, ExternalLink } from "lucide-react";
+import { useWebSocket } from "../../hooks/useWebSocket";
+
+interface ElicitationCardProps {
+  requestId: string;
+  serverName: string;
+  message: string;
+  mode: "form" | "url";
+  url?: string | null;
+  requestedSchema?: Record<string, unknown> | null;
+  resolved?: boolean;
+  resolvedAction?: "accept" | "decline";
+}
+
+interface SchemaProperty {
+  type?: string;
+  description?: string;
+  enum?: string[];
+  default?: unknown;
+}
+
+function renderFormField(
+  key: string,
+  prop: SchemaProperty,
+  value: unknown,
+  onChange: (key: string, val: unknown) => void,
+  required: boolean,
+) {
+  var label = key.replace(/_/g, " ").replace(/\b\w/g, function (c) { return c.toUpperCase(); });
+
+  if (prop.type === "boolean") {
+    return (
+      <label key={key} className="flex items-center gap-2.5 py-1.5 cursor-pointer">
+        <input
+          type="checkbox"
+          checked={!!value}
+          onChange={function (e) { onChange(key, e.target.checked); }}
+          className="checkbox checkbox-xs checkbox-primary"
+        />
+        <span className="text-[12px] text-base-content/70">{label}</span>
+        {prop.description && (
+          <span className="text-[10px] text-base-content/30" title={prop.description}>?</span>
+        )}
+      </label>
+    );
+  }
+
+  if (prop.enum && prop.enum.length > 0) {
+    return (
+      <div key={key} className="flex flex-col gap-1">
+        <label className="text-[10px] font-mono uppercase tracking-wider text-base-content/35">
+          {label}{required && <span className="text-error/50 ml-0.5">*</span>}
+        </label>
+        <select
+          value={String(value || "")}
+          onChange={function (e) { onChange(key, e.target.value); }}
+          className="select select-xs select-bordered bg-base-content/[0.03] text-[12px] text-base-content/70"
+        >
+          <option value="">Select...</option>
+          {prop.enum.map(function (opt) {
+            return <option key={opt} value={opt}>{opt}</option>;
+          })}
+        </select>
+      </div>
+    );
+  }
+
+  if (prop.type === "number" || prop.type === "integer") {
+    return (
+      <div key={key} className="flex flex-col gap-1">
+        <label className="text-[10px] font-mono uppercase tracking-wider text-base-content/35">
+          {label}{required && <span className="text-error/50 ml-0.5">*</span>}
+        </label>
+        <input
+          type="number"
+          value={value != null ? String(value) : ""}
+          placeholder={prop.description || ""}
+          onChange={function (e) { onChange(key, e.target.value ? Number(e.target.value) : ""); }}
+          className="input input-xs input-bordered bg-base-content/[0.03] text-[12px] text-base-content/70 placeholder:text-base-content/20"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div key={key} className="flex flex-col gap-1">
+      <label className="text-[10px] font-mono uppercase tracking-wider text-base-content/35">
+        {label}{required && <span className="text-error/50 ml-0.5">*</span>}
+      </label>
+      <input
+        type="text"
+        value={String(value || "")}
+        placeholder={prop.description || ""}
+        onChange={function (e) { onChange(key, e.target.value); }}
+        className="input input-xs input-bordered bg-base-content/[0.03] text-[12px] text-base-content/70 placeholder:text-base-content/20"
+      />
+    </div>
+  );
+}
+
+export function ElicitationCard(props: ElicitationCardProps) {
+  var { send } = useWebSocket();
+  var [formData, setFormData] = useState<Record<string, unknown>>({});
+  var [submitted, setSubmitted] = useState(props.resolved || false);
+  var [action, setAction] = useState<"accept" | "decline" | null>(props.resolvedAction || null);
+
+  function handleFieldChange(key: string, value: unknown) {
+    setFormData(function (prev) {
+      var next = { ...prev };
+      next[key] = value;
+      return next;
+    });
+  }
+
+  function handleSubmit(submitAction: "accept" | "decline") {
+    setSubmitted(true);
+    setAction(submitAction);
+    send({
+      type: "chat:elicitation_response",
+      requestId: props.requestId,
+      action: submitAction,
+      content: submitAction === "accept" ? formData : undefined,
+    } as any);
+  }
+
+  if (submitted) {
+    var isAccepted = action === "accept";
+    return (
+      <div className="ml-14 mr-5 py-0.5 max-w-[95%] sm:max-w-[75%]">
+        <div className={"rounded-lg text-[12px] border px-2.5 py-1.5 flex items-center gap-2 " + (isAccepted ? "border-success/15 bg-success/3" : "border-error/15 bg-error/3")}>
+          {isAccepted ? <Check size={12} className="text-success" /> : <X size={12} className="text-error" />}
+          <span className="text-base-content/35">{isAccepted ? "Submitted" : "Declined"}</span>
+          <Globe size={11} className="text-base-content/20" />
+          <span className="text-[11px] text-base-content/40">{props.serverName}</span>
+        </div>
+      </div>
+    );
+  }
+
+  var schema = props.requestedSchema;
+  var properties: Record<string, SchemaProperty> = {};
+  var requiredFields: string[] = [];
+  if (schema && typeof schema === "object") {
+    if (schema.properties && typeof schema.properties === "object") {
+      properties = schema.properties as Record<string, SchemaProperty>;
+    }
+    if (Array.isArray(schema.required)) {
+      requiredFields = schema.required as string[];
+    }
+  }
+  var hasFormFields = Object.keys(properties).length > 0;
+
+  return (
+    <div className="ml-14 mr-5 py-1 max-w-[95%] sm:max-w-[75%]">
+      <div className="border border-info/25 bg-info/5 rounded-lg overflow-hidden">
+        <div className="flex items-center gap-2.5 px-3.5 py-2.5 border-b border-base-content/5 bg-base-content/[0.02]">
+          {props.mode === "url"
+            ? <Globe size={14} className="text-info/50 flex-shrink-0" />
+            : <FormInput size={14} className="text-info/50 flex-shrink-0" />
+          }
+          <span className="text-[10px] font-mono font-bold uppercase tracking-widest text-info/40">
+            {props.serverName}
+          </span>
+          <span className="flex-1" />
+          <span className="text-[9px] font-mono text-base-content/20">{props.mode} input</span>
+        </div>
+
+        <div className="px-3.5 py-3">
+          {props.message && (
+            <div className="text-[13px] text-base-content/75 mb-3 leading-relaxed">{props.message}</div>
+          )}
+
+          {props.mode === "url" && props.url && (
+            <div className="flex flex-col gap-2">
+              <a
+                href={props.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2 px-3 py-2 rounded-lg bg-base-content/[0.04] border border-base-content/8 text-[12px] text-info/70 hover:bg-base-content/[0.07] hover:border-info/20 transition-colors"
+              >
+                <ExternalLink size={12} />
+                <span className="truncate flex-1">{props.url}</span>
+              </a>
+            </div>
+          )}
+
+          {props.mode === "form" && hasFormFields && (
+            <div className="flex flex-col gap-2.5">
+              {Object.entries(properties).map(function ([key, prop]) {
+                return renderFormField(
+                  key,
+                  prop,
+                  formData[key],
+                  handleFieldChange,
+                  requiredFields.includes(key),
+                );
+              })}
+            </div>
+          )}
+
+          {props.mode === "form" && !hasFormFields && (
+            <div className="flex flex-col gap-1.5">
+              <label className="text-[10px] font-mono uppercase tracking-wider text-base-content/35">Response</label>
+              <textarea
+                rows={3}
+                value={String(formData._raw || "")}
+                onChange={function (e) { handleFieldChange("_raw", e.target.value); }}
+                placeholder="Enter your response..."
+                className="textarea textarea-bordered textarea-xs bg-base-content/[0.03] text-[12px] text-base-content/70 placeholder:text-base-content/20"
+              />
+            </div>
+          )}
+
+          <div className="flex items-center gap-2 mt-3">
+            <button
+              onClick={function () { handleSubmit("accept"); }}
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-success/15 text-success text-[11px] font-medium hover:bg-success/25 transition-colors cursor-pointer"
+            >
+              <Check size={11} />
+              {props.mode === "url" ? "Done" : "Submit"}
+            </button>
+            <button
+              onClick={function () { handleSubmit("decline"); }}
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-base-content/5 text-base-content/40 text-[11px] font-medium hover:bg-base-content/10 hover:text-base-content/60 transition-colors cursor-pointer"
+            >
+              <X size={11} />
+              Decline
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/{client/src → src/client}/components/chat/Message.tsx

@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect, memo, useMemo } from "react";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { Wrench, TriangleAlert, ChevronDown, ChevronRight, Check, X, Shield, Zap, Link, Copy, SquarePlus, Bookmark, BookmarkCheck } from "lucide-react";
+import { Wrench, TriangleAlert, ChevronDown, ChevronRight, Check, X, Shield, Zap, Link, Copy, SquarePlus, Bookmark, BookmarkCheck, RotateCcw, ClipboardCopy, FileText, MessageSquarePlus, History } from "lucide-react";
 import type { HistoryMessage, ChatPermissionResponseMessage } from "@lattice/shared";
 import { useStore } from "@tanstack/react-store";
 import { useWebSocket } from "../../hooks/useWebSocket";
@@ -11,6 +11,9 @@ import { ToolResultRenderer } from "./ToolResultRenderer";
 import { formatToolSummary } from "./toolSummary";
 import { PromptQuestion } from "./PromptQuestion";
 import { TodoCard } from "./TodoCard";
+import { ElicitationCard } from "./ElicitationCard";
+import { ContextMenu, useContextMenu } from "../ui/ContextMenu";
+import type { ContextMenuEntry } from "../ui/ContextMenu";
 
 function TableWrapper(props: React.HTMLAttributes<HTMLTableElement>) {
   var wrapperRef = useRef<HTMLDivElement>(null);
@@ -185,7 +188,7 @@ function parseSkillInvocation(text: string): { skillName: string; content: strin
 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} data-allow-context-menu className="chat chat-end px-5 py-1 group/msg">
+    <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"
@@ -221,28 +224,156 @@ function SkillMessage(props: { skillName: string; content: string; time: string
   );
 }
 
+function RewindButton(props: { uuid: string }) {
+  var ws = useWebSocket();
+  var [pending, setPending] = useState(false);
+  var [preview, setPreview] = useState<{ canRewind: boolean; filesChanged?: number; error?: string } | null>(null);
+
+  useEffect(function () {
+    function handlePreview(msg: any) {
+      if (msg.type === "chat:rewind_preview_result" && msg.messageUuid === props.uuid) {
+        setPreview(msg);
+        setPending(false);
+      }
+    }
+    function handleExecResult(msg: any) {
+      if (msg.type === "chat:rewind_execute_result" && msg.messageUuid === props.uuid) {
+        setPreview(null);
+      }
+    }
+    ws.subscribe("chat:rewind_preview_result", handlePreview);
+    ws.subscribe("chat:rewind_execute_result", handleExecResult);
+    return function () {
+      ws.unsubscribe("chat:rewind_preview_result", handlePreview);
+      ws.unsubscribe("chat:rewind_execute_result", handleExecResult);
+    };
+  }, [ws, props.uuid]);
+
+  function handleClick() {
+    if (preview) {
+      ws.send({ type: "chat:rewind_execute", messageUuid: props.uuid, mode: "files" } as any);
+      setPreview(null);
+      return;
+    }
+    setPending(true);
+    ws.send({ type: "chat:rewind_preview", messageUuid: props.uuid } as any);
+  }
+
+  if (preview && !preview.canRewind) {
+    return (
+      <span className="text-error/60 text-[10px]" title={preview.error || "Cannot rewind"}>
+        {preview.error || "Cannot rewind"}
+      </span>
+    );
+  }
+
+  if (preview && preview.canRewind) {
+    return (
+      <span className="flex items-center gap-1">
+        <button
+          onClick={handleClick}
+          className="btn btn-ghost btn-xs h-4 min-h-0 px-1 text-warning/70 hover:text-warning"
+          title={"Rewind files (" + (preview.filesChanged || 0) + " changed)"}
+        >
+          <RotateCcw className="!size-3" />
+          <span className="text-[10px]">Rewind {preview.filesChanged || 0} files</span>
+        </button>
+        <button
+          onClick={function () { setPreview(null); }}
+          className="btn btn-ghost btn-xs h-4 min-h-0 px-0.5 text-base-content/30 hover:text-base-content/60"
+        >
+          <X className="!size-3" />
+        </button>
+      </span>
+    );
+  }
+
+  return (
+    <button
+      onClick={handleClick}
+      disabled={pending}
+      className="btn btn-ghost btn-xs h-4 min-h-0 px-0.5 opacity-0 group-hover/msg:opacity-100 transition-opacity text-base-content/30 hover:text-base-content/60"
+      title="Rewind files to this point"
+    >
+      <RotateCcw className={"!size-3" + (pending ? " animate-spin" : "")} />
+    </button>
+  );
+}
+
 function UserMessage(props: { message: HistoryMessage }) {
   var msg = props.message;
   var time = formatTime(msg.timestamp);
   var text = msg.text || "";
   var skill = parseSkillInvocation(text);
+  var ctxMenu = useContextMenu<HistoryMessage>();
+  var ws = useWebSocket();
+  var bookmarkState = useStore(getBookmarkStore(), function (s) { return s; });
+  var isBookmarked = useMemo(function () {
+    if (!msg.uuid) return false;
+    for (var i = 0; i < bookmarkState.bookmarks.length; i++) {
+      if (bookmarkState.bookmarks[i].messageUuid === msg.uuid) return true;
+    }
+    return false;
+  }, [msg.uuid, bookmarkState.bookmarks]);
+
+  function handleNewSession() {
+    var state = getSessionStore().state;
+    if (!state.activeProjectSlug) return;
+    setPendingPrefill(text);
+    ws.send({ type: "session:create", projectSlug: state.activeProjectSlug });
+  }
+
+  function handleBookmarkToggle() {
+    var state = getSessionStore().state;
+    if (!state.activeSessionId || !state.activeProjectSlug || !msg.uuid) return;
+    if (isBookmarked) {
+      var bm = findBookmarkByUuid(msg.uuid);
+      if (bm) {
+        ws.send({ type: "bookmark:remove", id: bm.id });
+      }
+    } else {
+      ws.send({
+        type: "bookmark:add",
+        sessionId: state.activeSessionId,
+        projectSlug: state.activeProjectSlug,
+        messageUuid: msg.uuid,
+        messageText: text.slice(0, 100),
+        messageType: "user",
+      });
+    }
+  }
+
+  function buildContextItems(): ContextMenuEntry[] {
+    return [
+      { label: "Copy", icon: <Copy size={14} />, onClick: function () { navigator.clipboard.writeText(text); } },
+      { label: "Copy as plain text", icon: <FileText size={14} />, onClick: function () { navigator.clipboard.writeText(stripMarkdown(text)); } },
+      { type: "divider" as const },
+      { label: "Start new session with this message", icon: <MessageSquarePlus size={14} />, onClick: handleNewSession },
+      { type: "divider" as const },
+      { label: isBookmarked ? "Unbookmark" : "Bookmark", icon: isBookmarked ? <BookmarkCheck size={14} /> : <Bookmark size={14} />, onClick: handleBookmarkToggle, hidden: !msg.uuid },
+      { label: "Copy link to message", icon: <Link size={14} />, onClick: function () { navigator.clipboard.writeText(window.location.origin + window.location.pathname + "#msg-" + msg.uuid); }, hidden: !msg.uuid },
+    ];
+  }
+
   if (skill) {
     return <SkillMessage skillName={skill.skillName} content={skill.content} time={time} uuid={msg.uuid} />;
   }
   return (
-    <div id={msg.uuid ? "msg-" + msg.uuid : undefined} data-allow-context-menu className="chat chat-end px-5 py-1 group/msg">
+    <div id={msg.uuid ? "msg-" + msg.uuid : undefined} data-allow-context-menu className="chat chat-end px-5 py-1 group/msg" onContextMenu={function (e) { ctxMenu.open(e, 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">
+        <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 prose-li:text-primary-content [&_ul>li::marker]:text-primary-content [&_ol>li::marker]:text-primary-content">
           <Markdown remarkPlugins={[remarkGfm]} components={mdComponents}>{text}</Markdown>
         </div>
       </div>
       {time && (
         <div className="chat-footer text-[10px] text-base-content/30 mt-0.5 flex items-center gap-1">
           {time}
+          {msg.uuid && <RewindButton uuid={msg.uuid} />}
           <MessageAnchor id={msg.uuid} />
           <MessageActions text={text} showNewSession messageUuid={msg.uuid} messageType="user" />
         </div>
       )}
+      {ctxMenu.state && <ContextMenu x={ctxMenu.state.x} y={ctxMenu.state.y} items={buildContextItems()} onClose={ctxMenu.close} label="User message actions" />}
     </div>
   );
 }
@@ -264,8 +395,59 @@ function formatTokenCount(n: number): string {
 function AssistantMessage(props: { message: HistoryMessage; responseCost?: number | null; responseDuration?: number | null }) {
   var msg = props.message;
   var time = formatTime(msg.timestamp);
+  var text = msg.text || "";
+  var ctxMenu = useContextMenu<HistoryMessage>();
+  var ws = useWebSocket();
+  var bookmarkState = useStore(getBookmarkStore(), function (s) { return s; });
+  var isBookmarked = useMemo(function () {
+    if (!msg.uuid) return false;
+    for (var i = 0; i < bookmarkState.bookmarks.length; i++) {
+      if (bookmarkState.bookmarks[i].messageUuid === msg.uuid) return true;
+    }
+    return false;
+  }, [msg.uuid, bookmarkState.bookmarks]);
+
+  function handleNewSession() {
+    var state = getSessionStore().state;
+    if (!state.activeProjectSlug) return;
+    setPendingPrefill(text);
+    ws.send({ type: "session:create", projectSlug: state.activeProjectSlug });
+  }
+
+  function handleBookmarkToggle() {
+    var state = getSessionStore().state;
+    if (!state.activeSessionId || !state.activeProjectSlug || !msg.uuid) return;
+    if (isBookmarked) {
+      var bm = findBookmarkByUuid(msg.uuid);
+      if (bm) {
+        ws.send({ type: "bookmark:remove", id: bm.id });
+      }
+    } else {
+      ws.send({
+        type: "bookmark:add",
+        sessionId: state.activeSessionId,
+        projectSlug: state.activeProjectSlug,
+        messageUuid: msg.uuid,
+        messageText: text.slice(0, 100),
+        messageType: "assistant",
+      });
+    }
+  }
+
+  function buildContextItems(): ContextMenuEntry[] {
+    return [
+      { label: "Copy", icon: <Copy size={14} />, onClick: function () { navigator.clipboard.writeText(text); } },
+      { label: "Copy as plain text", icon: <FileText size={14} />, onClick: function () { navigator.clipboard.writeText(stripMarkdown(text)); } },
+      { type: "divider" as const },
+      { label: "Start new session with this message", icon: <MessageSquarePlus size={14} />, onClick: handleNewSession },
+      { type: "divider" as const },
+      { label: isBookmarked ? "Unbookmark" : "Bookmark", icon: isBookmarked ? <BookmarkCheck size={14} /> : <Bookmark size={14} />, onClick: handleBookmarkToggle, hidden: !msg.uuid },
+      { label: "Copy link to message", icon: <Link size={14} />, onClick: function () { navigator.clipboard.writeText(window.location.origin + window.location.pathname + "#msg-" + msg.uuid); }, hidden: !msg.uuid },
+    ];
+  }
+
   return (
-    <div id={msg.uuid ? "msg-" + msg.uuid : undefined} data-allow-context-menu className="chat chat-start px-5 py-1 group/msg">
+    <div id={msg.uuid ? "msg-" + msg.uuid : undefined} data-allow-context-menu className="chat chat-start px-5 py-1 group/msg" onContextMenu={function (e) { ctxMenu.open(e, 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" />
@@ -273,7 +455,7 @@ function AssistantMessage(props: { message: HistoryMessage; responseCost?: numbe
       </div>
       <div className="chat-bubble bg-base-300/70 text-base-content text-[13px] leading-relaxed break-words max-w-[95%] sm:max-w-[85%] shadow-sm border border-base-content/5">
         <div className="prose prose-sm max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 prose-headings:text-base-content prose-p:text-base-content prose-strong:text-base-content prose-code:text-base-content/70 prose-code:bg-base-100/50 prose-pre:bg-base-100 prose-pre:text-base-content/70 prose-a:text-primary prose-a:underline prose-li:text-base-content">
-          <Markdown remarkPlugins={[remarkGfm]} components={mdComponents}>{msg.text || ""}</Markdown>
+          <Markdown remarkPlugins={[remarkGfm]} components={mdComponents}>{text}</Markdown>
         </div>
       </div>
       {time && (
@@ -291,9 +473,10 @@ function AssistantMessage(props: { message: HistoryMessage; responseCost?: numbe
             <span className="text-base-content/15">{formatTokenCount(msg.outputTokens)} out</span>
           )}
           <MessageAnchor id={msg.uuid} />
-          <MessageActions text={msg.text || ""} showNewSession messageUuid={msg.uuid} messageType="assistant" />
+          <MessageActions text={text} showNewSession messageUuid={msg.uuid} messageType="assistant" />
         </div>
       )}
+      {ctxMenu.state && <ContextMenu x={ctxMenu.state.x} y={ctxMenu.state.y} items={buildContextItems()} onClose={ctxMenu.close} label="Assistant message actions" />}
     </div>
   );
 }
@@ -302,6 +485,7 @@ function ToolMessage(props: { message: HistoryMessage }) {
   var msg = props.message;
   var [expanded, setExpanded] = useState<boolean>(false);
   var hasResult = Boolean(msg.content);
+  var ctxMenu = useContextMenu<HistoryMessage>();
 
   var parsedArgs: string = msg.args || "";
   try {
@@ -312,8 +496,15 @@ function ToolMessage(props: { message: HistoryMessage }) {
     parsedArgs = msg.args || "";
   }
 
+  function buildContextItems(): ContextMenuEntry[] {
+    return [
+      { label: "Copy output", icon: <ClipboardCopy size={14} />, onClick: function () { navigator.clipboard.writeText(msg.content || ""); }, disabled: !hasResult },
+      { label: "Copy tool input", icon: <Copy size={14} />, onClick: function () { navigator.clipboard.writeText(parsedArgs); } },
+    ];
+  }
+
   return (
-    <div className="ml-14 mr-5 py-0.5 max-w-[95%] sm:max-w-[75%] group/msg">
+    <div data-allow-context-menu className="ml-14 mr-5 py-0.5 max-w-[95%] sm:max-w-[75%] group/msg" onContextMenu={function (e) { ctxMenu.open(e, msg); }}>
       <div
         className={
           "rounded-lg overflow-hidden text-[12px] border transition-colors duration-100 " +
@@ -364,6 +555,7 @@ function ToolMessage(props: { message: HistoryMessage }) {
           <MessageActions text={msg.content || ""} />
         </div>
       )}
+      {ctxMenu.state && <ContextMenu x={ctxMenu.state.x} y={ctxMenu.state.y} items={buildContextItems()} onClose={ctxMenu.close} label="Tool message actions" />}
     </div>
   );
 }
@@ -540,6 +732,48 @@ function PermissionMessage(props: { message: HistoryMessage }) {
   );
 }
 
+function CompactSummaryMessage(props: { message: HistoryMessage }) {
+  var [expanded, setExpanded] = useState(false);
+  var msg = props.message;
+  var text = msg.text || "";
+  var time = formatTime(msg.timestamp);
+
+  return (
+    <div id={msg.uuid ? "msg-" + msg.uuid : undefined} className="px-5 py-3">
+      <button
+        type="button"
+        onClick={function () { setExpanded(function (v) { return !v; }); }}
+        aria-expanded={expanded}
+        className="w-full flex items-center gap-3 group/compact focus-visible:outline-none"
+      >
+        <div className="h-px flex-1 bg-base-content/8 group-hover/compact:bg-base-content/15 transition-colors duration-150" />
+        <div className={"flex items-center gap-1.5 px-2.5 py-1 rounded-full border transition-all duration-150 " + (expanded ? "border-primary/30 bg-primary/8 text-primary/70" : "border-base-content/10 bg-base-200/60 text-base-content/35 hover:border-base-content/20 hover:text-base-content/55")}>
+          <History size={11} className="shrink-0" />
+          <span className="text-[10px] font-mono font-semibold tracking-wider uppercase">Context Compacted</span>
+          {time && <span className="text-[9px] opacity-60 ml-0.5">{time}</span>}
+          <ChevronDown size={10} className={"ml-0.5 transition-transform duration-200 " + (expanded ? "rotate-180" : "")} />
+        </div>
+        <div className="h-px flex-1 bg-base-content/8 group-hover/compact:bg-base-content/15 transition-colors duration-150" />
+      </button>
+
+      {expanded && (
+        <div className="mt-3 mx-auto max-w-[760px]">
+          <div className="rounded-xl border border-base-content/8 bg-base-200/40 overflow-hidden">
+            <div className="flex items-center gap-2 px-3 py-2 border-b border-base-content/6 bg-base-200/60">
+              <History size={12} className="text-base-content/30 shrink-0" />
+              <span className="text-[10px] font-mono font-semibold text-base-content/35 uppercase tracking-wider">Session Summary</span>
+              <span className="ml-auto text-[9px] text-base-content/20 font-mono">{time}</span>
+            </div>
+            <div className="max-h-[480px] overflow-y-auto p-4 prose prose-sm max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 prose-headings:text-base-content/70 prose-headings:text-[12px] prose-headings:font-mono prose-headings:uppercase prose-headings:tracking-wide prose-headings:mt-4 prose-headings:mb-1.5 prose-p:text-base-content/50 prose-p:text-[12px] prose-p:leading-relaxed prose-strong:text-base-content/65 prose-code:text-base-content/50 prose-code:text-[11px] prose-code:bg-base-content/5 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-li:text-base-content/50 prose-li:text-[12px] prose-hr:border-base-content/8">
+              <Markdown remarkPlugins={[remarkGfm]} components={mdComponents}>{text}</Markdown>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
 export var Message = memo(function Message(props: MessageProps) {
   var msg = props.message;
 
@@ -555,6 +789,10 @@ export var Message = memo(function Message(props: MessageProps) {
     return <ToolMessage message={msg} />;
   }
 
+  if (msg.type === "compact_summary") {
+    return <CompactSummaryMessage message={msg} />;
+  }
+
   if (msg.type === "permission_request") {
     return <PermissionMessage message={msg} />;
   }
@@ -567,5 +805,20 @@ export var Message = memo(function Message(props: MessageProps) {
     return <TodoCard message={msg} />;
   }
 
+  if (msg.type === "elicitation") {
+    return (
+      <ElicitationCard
+        requestId={msg.toolId || ""}
+        serverName={msg.elicitationServerName || "MCP Server"}
+        message={msg.elicitationMessage || ""}
+        mode={msg.elicitationMode || "form"}
+        url={msg.elicitationUrl}
+        requestedSchema={msg.elicitationSchema}
+        resolved={msg.elicitationStatus !== "pending"}
+        resolvedAction={msg.elicitationStatus === "accepted" ? "accept" : msg.elicitationStatus === "declined" ? "decline" : undefined}
+      />
+    );
+  }
+
   return null;
 });