@cryptiklemur/lattice 1.3.0 → 1.4.0

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

@@ -1,11 +1,14 @@
 import { useEffect, useRef, useCallback, useState } from "react";
-import { Terminal, Info, ArrowDown, Pencil, Copy, Check, Menu, AlertTriangle } from "lucide-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 } from "../../stores/session";
+import { setSessionTitle, setIsProcessing, setCurrentStatus, setWasInterrupted } from "../../stores/session";
+import { openSettings, openProjectSettings } from "../../stores/sidebar";
+import { openTab } from "../../stores/workspace";
+import { builtinCommands } from "../../commands";
 import { Message } from "./Message";
 import { ToolGroup } from "./ToolGroup";
 import { ChatInput } from "./ChatInput";
@@ -13,12 +16,16 @@ import { ModelSelector } from "./ModelSelector";
 import { PermissionModeSelector } from "./PermissionModeSelector";
 import { StatusBar } from "./StatusBar";
 import { useSidebar } from "../../hooks/useSidebar";
+import { useOnline } from "../../hooks/useOnline";
+import { useSpinnerVerb } from "../../hooks/useSpinnerVerb";
 
 export function ChatView() {
-  var { messages, isProcessing, sendMessage, activeSessionId, activeSessionTitle, currentStatus, contextUsage, contextBreakdown, lastResponseCost, lastResponseDuration, historyLoading, wasInterrupted } = useSession();
+  var { messages, isProcessing, sendMessage, activeSessionId, activeSessionTitle, currentStatus, contextUsage, contextBreakdown, lastResponseCost, lastResponseDuration, historyLoading, wasInterrupted, promptSuggestion, failedInput, clearFailedInput, messageQueue, enqueueMessage, removeQueuedMessage, updateQueuedMessage, isBusy, isPlanMode } = useSession();
   var { activeProject } = useProjects();
   var { toggleDrawer } = useSidebar();
+  var online = useOnline();
   var ws = useWebSocket();
+  var spinnerVerb = useSpinnerVerb(isProcessing);
   var scrollParentRef = useRef<HTMLDivElement>(null);
   var prevLengthRef = useRef<number>(0);
   var isLiveChatRef = useRef<boolean>(false);
@@ -28,6 +35,8 @@ export function ChatView() {
   var [selectedModel, setSelectedModel] = useState<string>("default");
   var [selectedEffort, setSelectedEffort] = useState<string>("medium");
   var [showInfo, setShowInfo] = useState<boolean>(false);
+  var [confirmStopExternal, setConfirmStopExternal] = useState<boolean>(false);
+  var [prefillText, setPrefillText] = useState<string | null>(null);
   var [copiedField, setCopiedField] = useState<string | null>(null);
   var [isRenaming, setIsRenaming] = useState<boolean>(false);
   var [renameValue, setRenameValue] = useState<string>("");
@@ -244,6 +253,106 @@ export function ChatView() {
     ? "claude --resume " + activeSessionId
     : "";
 
+  function handleClientCommand(name: string, args: string): boolean {
+    switch (name) {
+      case "clear":
+      case "reset":
+      case "new":
+        if (activeProject?.slug) {
+          ws.send({ type: "session:create", projectSlug: activeProject.slug });
+        }
+        return true;
+      case "copy": {
+        var lastAssistant = [...messages].reverse().find(function (m) { return m.type === "assistant"; });
+        if (lastAssistant?.text) {
+          navigator.clipboard.writeText(lastAssistant.text);
+        }
+        return true;
+      }
+      case "export": {
+        var lines = messages.map(function (m) {
+          var role = m.type === "user" ? "User" : m.type === "assistant" ? "Assistant" : m.type;
+          return role + ": " + (m.text || m.content || "");
+        });
+        var blob = new Blob([lines.join("\n\n")], { type: "text/plain" });
+        var url = URL.createObjectURL(blob);
+        var a = document.createElement("a");
+        a.href = url;
+        a.download = (activeSessionTitle || "conversation") + ".txt";
+        a.click();
+        URL.revokeObjectURL(url);
+        return true;
+      }
+      case "rename": {
+        if (args && activeSessionId) {
+          ws.send({ type: "session:rename", sessionId: activeSessionId, title: args });
+          setSessionTitle(args);
+        } else {
+          handleRenameStart();
+        }
+        return true;
+      }
+      case "theme":
+        openSettings("appearance");
+        return true;
+      case "config":
+      case "settings":
+        openSettings("appearance");
+        return true;
+      case "permissions":
+      case "allowed-tools":
+        if (activeProject?.slug) openProjectSettings("permissions");
+        return true;
+      case "memory":
+        if (activeProject?.slug) openProjectSettings("memory");
+        return true;
+      case "skills":
+        if (activeProject?.slug) openProjectSettings("skills");
+        return true;
+      case "plan":
+        ws.send({ type: "chat:set_permission_mode", mode: "plan" });
+        return true;
+      case "cost":
+      case "context":
+        setShowInfo(true);
+        return true;
+      default:
+        return false;
+    }
+  }
+
+  function handleCancel() {
+    ws.send({ type: "chat:cancel" });
+    setIsProcessing(false);
+    setCurrentStatus(null);
+    setWasInterrupted(true);
+  }
+
+  function handleSend(text: string, attachmentIds: string[]) {
+    if (text.startsWith("/")) {
+      var parts = text.split(/\s+/);
+      var cmdName = parts[0].slice(1).toLowerCase();
+      var cmdArgs = parts.slice(1).join(" ");
+
+      var isBuiltin = false;
+      for (var i = 0; i < builtinCommands.length; i++) {
+        var cmd = builtinCommands[i];
+        if (cmd.name === cmdName || (cmd.aliases && cmd.aliases.indexOf(cmdName) !== -1)) {
+          isBuiltin = true;
+          break;
+        }
+      }
+
+      if (isBuiltin && handleClientCommand(cmdName, cmdArgs)) return;
+    }
+
+    if (isProcessing) {
+      enqueueMessage(text);
+      return;
+    }
+    sendMessage(text, attachmentIds, selectedModel, selectedEffort);
+  }
+
   var virtualItems = virtualizer.getVirtualItems();
 
   return (
@@ -324,9 +433,8 @@ export function ChatView() {
             )}
             <button
               aria-label="Open terminal"
-              title="Coming soon"
-              disabled
-              className="btn btn-ghost btn-sm btn-square text-base-content/30 opacity-40 cursor-not-allowed"
+              onClick={function () { openTab("terminal"); }}
+              className="btn btn-ghost btn-sm btn-square text-base-content/50 hover:text-base-content/70"
             >
               <Terminal size={15} />
             </button>
@@ -505,9 +613,16 @@ export function ChatView() {
         )}
       </div>
 
+      {isPlanMode && (
+        <div className="flex items-center gap-2 px-4 py-1.5 bg-primary/8 border-b border-primary/15">
+          <div className="w-2 h-2 rounded-full bg-primary animate-pulse" />
+          <span className="text-[11px] font-mono font-medium text-primary/60 uppercase tracking-wider">Plan Mode</span>
+        </div>
+      )}
+
       <div
         ref={scrollParentRef}
-        className="flex-1 overflow-y-auto min-h-0 bg-lattice-grid"
+        className="flex-1 overflow-y-auto overflow-x-hidden min-h-0 bg-lattice-grid"
         style={{ WebkitOverflowScrolling: "touch" }}
       >
         {messages.length === 0 && historyLoading ? (
@@ -702,17 +817,134 @@ export function ChatView() {
 
       <StatusBar status={currentStatus} />
 
-      {wasInterrupted && !isProcessing && (
+      {isProcessing && (
+        <div className="flex-shrink-0 flex items-center justify-center gap-4 my-4 pointer-events-none relative z-10">
+          <div className="flex items-center gap-4 pointer-events-auto bg-base-200/90 backdrop-blur-sm border border-base-content/10 rounded-full px-5 py-2 shadow-lg">
+            <span className="text-[14px] text-base-content/40 font-mono animate-pulse">{spinnerVerb}...</span>
+            <button
+              onClick={handleCancel}
+              className="btn btn-ghost btn-sm text-error/70 hover:text-error gap-1.5"
+            >
+              <Square size={12} className="fill-current" />
+              Stop
+            </button>
+          </div>
+        </div>
+      )}
+
+      {messageQueue.length > 0 && (
+        <div className="flex-shrink-0 px-2 sm:px-4 py-2 space-y-1.5">
+          <div className="text-[10px] font-semibold uppercase tracking-wider text-base-content/30">Queued</div>
+          {messageQueue.map(function (msg, i) {
+            return (
+              <div key={i} className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-base-300/50 border border-base-content/10">
+                <input
+                  type="text"
+                  value={msg}
+                  onChange={function (e) { updateQueuedMessage(i, e.target.value); }}
+                  className="flex-1 bg-transparent text-[12px] text-base-content outline-none"
+                />
+                <button
+                  onClick={function () { removeQueuedMessage(i); }}
+                  className="text-base-content/30 hover:text-base-content/60"
+                >
+                  <X size={12} />
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {isBusy && !isProcessing && (
+        <div className="flex items-center gap-2 px-3 sm:px-5 py-2 bg-info/10 border-t border-info/20">
+          <Terminal size={13} className="text-info flex-shrink-0" />
+          <span className="text-[12px] text-info flex-1">This session is being used by another client — input is disabled</span>
+          <button
+            onClick={function () { setConfirmStopExternal(true); }}
+            className="btn btn-ghost btn-xs text-error/70 hover:text-error gap-1 flex-shrink-0"
+          >
+            <Square size={10} className="fill-current" />
+            End Process
+          </button>
+        </div>
+      )}
+
+      {confirmStopExternal && (
+        <div className="fixed inset-0 z-[9999] flex items-center justify-center">
+          <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">
+              <h2 className="text-[15px] font-mono font-bold text-base-content">End External Process</h2>
+            </div>
+            <div className="px-5 py-4">
+              <p className="text-[13px] text-base-content/60 leading-relaxed">
+                This will send a graceful stop signal (SIGINT) to the Claude Code CLI process controlling this session. The process will finish its current operation and exit.
+              </p>
+              <p className="text-[13px] text-warning mt-2 leading-relaxed">
+                Any in-progress work may be interrupted.
+              </p>
+            </div>
+            <div className="px-5 py-3 border-t border-base-content/15 flex justify-end gap-2">
+              <button
+                onClick={function () { setConfirmStopExternal(false); }}
+                className="btn btn-ghost btn-sm text-[12px]"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={function () {
+                  if (activeSessionId) {
+                    ws.send({ type: "session:stop_external", sessionId: activeSessionId } as any);
+                  }
+                  setConfirmStopExternal(false);
+                }}
+                className="btn btn-error btn-sm text-[12px]"
+              >
+                End Process
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {wasInterrupted && !isProcessing && !isBusy && (
         <div className="flex items-center gap-2 px-3 sm:px-5 py-2 bg-warning/10 border-t border-warning/20">
           <AlertTriangle size={13} className="text-warning flex-shrink-0" />
           <span className="text-[12px] text-warning">Session was interrupted — send a message to continue</span>
         </div>
       )}
 
+      {promptSuggestion && !isProcessing && !isBusy && (
+        <div className="flex-shrink-0 px-2 sm:px-4 py-2">
+          <div className="flex items-center gap-1.5 max-w-full">
+            <button
+              onClick={function () { if (promptSuggestion) handleSend(promptSuggestion, []); }}
+              className="flex items-center gap-2 px-3 py-2 rounded-lg bg-primary/10 border border-primary/20 text-[12px] text-primary/80 hover:bg-primary/15 hover:text-primary transition-colors min-w-0"
+            >
+              <Zap size={12} className="flex-shrink-0" />
+              <span className="truncate">{promptSuggestion}</span>
+            </button>
+            <button
+              onClick={function () { if (promptSuggestion) setPrefillText(promptSuggestion); }}
+              aria-label="Edit suggestion"
+              className="btn btn-ghost btn-xs btn-square text-primary/40 hover:text-primary/80 flex-shrink-0"
+            >
+              <Pencil size={12} />
+            </button>
+          </div>
+        </div>
+      )}
+
       <div className="flex-shrink-0 border-t border-base-300 bg-base-200 px-2 sm:px-4 pb-3 pt-2">
         <ChatInput
-          onSend={function (text) { sendMessage(text, selectedModel, selectedEffort); }}
-          disabled={isProcessing || !activeSessionId}
+          onSend={handleSend}
+          disabled={!activeSessionId || !online || isBusy}
+          disabledPlaceholder={isBusy ? "Session in use by another client..." : undefined}
+          failedInput={failedInput}
+          onFailedInputConsumed={clearFailedInput}
+          prefillText={prefillText}
+          onPrefillConsumed={function () { setPrefillText(null); }}
           toolbarContent={
             <>
               <PermissionModeSelector />

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

@@ -0,0 +1,162 @@
+import { useMemo } from "react";
+import type { SkillInfo } from "@lattice/shared";
+import { builtinCommands, type SlashCommand } from "../../commands";
+
+interface PaletteItem {
+  name: string;
+  description: string;
+  args?: string;
+  category: "command" | "skill";
+  handler: "client" | "passthrough";
+}
+
+interface CommandPaletteProps {
+  query: string;
+  skills: SkillInfo[];
+  selectedIndex: number;
+  onSelect: (item: PaletteItem) => void;
+  onHover: (index: number) => void;
+}
+
+function matchesQuery(q: string, cmd: SlashCommand): boolean {
+  if (cmd.name.toLowerCase().includes(q)) return true;
+  if (cmd.description.toLowerCase().includes(q)) return true;
+  if (cmd.aliases) {
+    for (var i = 0; i < cmd.aliases.length; i++) {
+      if (cmd.aliases[i].toLowerCase().includes(q)) return true;
+    }
+  }
+  return false;
+}
+
+export function getFilteredItems(query: string, skills: SkillInfo[]): PaletteItem[] {
+  var q = query.toLowerCase();
+  var commands: PaletteItem[] = [];
+  var skillItems: PaletteItem[] = [];
+
+  for (var i = 0; i < builtinCommands.length; i++) {
+    var cmd = builtinCommands[i];
+    if (matchesQuery(q, cmd)) {
+      commands.push({
+        name: cmd.name,
+        description: cmd.description,
+        args: cmd.args,
+        category: "command",
+        handler: cmd.handler,
+      });
+    }
+  }
+
+  for (var j = 0; j < skills.length; j++) {
+    var skill = skills[j];
+    if (skill.name.toLowerCase().includes(q) || skill.description.toLowerCase().includes(q)) {
+      skillItems.push({
+        name: skill.name,
+        description: skill.description,
+        category: "skill",
+        handler: "passthrough",
+      });
+    }
+  }
+
+  return commands.concat(skillItems);
+}
+
+export function getItemCount(query: string, skills: SkillInfo[]): number {
+  return getFilteredItems(query, skills).length;
+}
+
+export function CommandPalette(props: CommandPaletteProps) {
+  var items = useMemo(function () {
+    return getFilteredItems(props.query, props.skills);
+  }, [props.query, props.skills]);
+
+  if (items.length === 0) {
+    return (
+      <div
+        role="listbox"
+        aria-label="Slash commands"
+        className="absolute left-0 right-0 bottom-[calc(100%+6px)] rounded-lg border border-base-content/15 bg-base-300 shadow-lg z-50"
+      >
+        <div className="px-3.5 py-3 text-[12px] text-base-content/40 text-center font-mono">
+          No matching commands
+        </div>
+      </div>
+    );
+  }
+
+  var commandItems: PaletteItem[] = [];
+  var skillItems: PaletteItem[] = [];
+  for (var i = 0; i < items.length; i++) {
+    if (items[i].category === "command") {
+      commandItems.push(items[i]);
+    } else {
+      skillItems.push(items[i]);
+    }
+  }
+
+  var globalIndex = 0;
+
+  function renderItem(item: PaletteItem, idx: number) {
+    var currentIndex = idx;
+    return (
+      <button
+        key={item.name}
+        data-active={currentIndex === props.selectedIndex}
+        onMouseDown={function (e) {
+          e.preventDefault();
+          props.onSelect(item);
+        }}
+        onMouseEnter={function () { props.onHover(currentIndex); }}
+        className={
+          "flex w-full items-center gap-3 px-3.5 py-2.5 text-left transition-colors " +
+          (currentIndex === props.selectedIndex ? "bg-primary/10" : "hover:bg-base-content/5")
+        }
+      >
+        <span className="font-mono text-[12px] text-primary/90 whitespace-nowrap flex-shrink-0">
+          /{item.name}
+          {item.args ? <span className="text-base-content/25 ml-1">{item.args}</span> : null}
+        </span>
+        <span className="text-[11px] text-base-content/40 truncate min-w-0">
+          {item.description}
+        </span>
+      </button>
+    );
+  }
+
+  var elements: React.ReactNode[] = [];
+
+  if (commandItems.length > 0) {
+    elements.push(
+      <div key="commands-header" className="px-3.5 py-1.5 text-[10px] uppercase tracking-widest text-base-content/30 font-mono font-bold">
+        Commands
+      </div>
+    );
+    for (var ci = 0; ci < commandItems.length; ci++) {
+      elements.push(renderItem(commandItems[ci], globalIndex));
+      globalIndex++;
+    }
+  }
+
+  if (skillItems.length > 0) {
+    elements.push(
+      <div key="skills-header" className="px-3.5 py-1.5 text-[10px] uppercase tracking-widest text-base-content/30 font-mono font-bold">
+        Skills
+      </div>
+    );
+    for (var si = 0; si < skillItems.length; si++) {
+      elements.push(renderItem(skillItems[si], globalIndex));
+      globalIndex++;
+    }
+  }
+
+  return (
+    <div
+      role="listbox"
+      aria-label="Slash commands"
+      className="absolute left-0 right-0 bottom-[calc(100%+6px)] max-h-[320px] overflow-y-auto rounded-lg border border-base-content/15 bg-base-300 shadow-lg z-50"
+    >
+      {elements}
+    </div>
+  );
+}

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

@@ -1,10 +1,23 @@
 import { useState, useRef, useEffect } from "react";
 import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import { Wrench, TriangleAlert, ChevronDown, Check, X, Shield } from "lucide-react";
 import type { HistoryMessage, ChatPermissionResponseMessage } from "@lattice/shared";
 import { useWebSocket } from "../../hooks/useWebSocket";
 import { ToolResultRenderer } from "./ToolResultRenderer";
 import { formatToolSummary } from "./toolSummary";
+import { PromptQuestion } from "./PromptQuestion";
+import { TodoCard } from "./TodoCard";
+
+var mdComponents = {
+  table: function (props: React.HTMLAttributes<HTMLTableElement>) {
+    return (
+      <div className="table-wrapper">
+        <table {...props} />
+      </div>
+    );
+  },
+};
 
 interface MessageProps {
   message: HistoryMessage;
@@ -41,7 +54,7 @@ function UserMessage(props: { message: HistoryMessage }) {
     <div className="chat chat-end px-5 py-1">
       <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>{msg.text || ""}</Markdown>
+          <Markdown remarkPlugins={[remarkGfm]} components={mdComponents}>{msg.text || ""}</Markdown>
         </div>
       </div>
       {time && (
@@ -79,7 +92,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>{msg.text || ""}</Markdown>
+          <Markdown remarkPlugins={[remarkGfm]} components={mdComponents}>{msg.text || ""}</Markdown>
         </div>
       </div>
       {time && (
@@ -358,5 +371,13 @@ export function Message(props: MessageProps) {
     return <PermissionMessage message={msg} />;
   }
 
+  if (msg.type === "prompt_question") {
+    return <PromptQuestion message={msg} />;
+  }
+
+  if (msg.type === "todo_update") {
+    return <TodoCard message={msg} />;
+  }
+
   return null;
 }