@cryptiklemur/lattice 4.0.1 → 5.0.0

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

@@ -1,108 +0,0 @@
-import { useState, useEffect } from "react";
-import { useWebSocket } from "../../hooks/useWebSocket";
-import { getAvailableModels, setAvailableModels, type ModelOption } from "../../stores/session";
-
-interface ModelSelectorState {
-  model: string;
-  effort: string;
-}
-
-var FALLBACK_MODELS: ModelOption[] = [
-  { value: "default", displayName: "Default" },
-  { value: "opus", displayName: "Opus" },
-  { value: "sonnet", displayName: "Sonnet" },
-  { value: "haiku", displayName: "Haiku" },
-];
-
-var EFFORT_OPTIONS = [
-  { value: "low", label: "Effort: Low" },
-  { value: "medium", label: "Effort: Medium" },
-  { value: "high", label: "Effort: High" },
-  { value: "max", label: "Effort: Max" },
-];
-
-interface ModelSelectorProps {
-  onChange?: (state: ModelSelectorState) => void;
-}
-
-export function ModelSelector(props: ModelSelectorProps) {
-  var [model, setModel] = useState<string>("default");
-  var [effort, setEffort] = useState<string>("medium");
-  var [models, setModels] = useState<ModelOption[]>(function () {
-    var warmup = getAvailableModels();
-    return warmup.length > 0 ? warmup : FALLBACK_MODELS;
-  });
-  var ws = useWebSocket();
-
-  useEffect(function () {
-    function handleWarmupModels(msg: { type: string; models?: ModelOption[] }) {
-      if (msg.type === "warmup:models" && msg.models && msg.models.length > 0) {
-        setAvailableModels(msg.models);
-        setModels(msg.models);
-      }
-    }
-    ws.subscribe("warmup:models", handleWarmupModels as any);
-    return function () {
-      ws.unsubscribe("warmup:models", handleWarmupModels as any);
-    };
-  }, [ws]);
-
-  function handleModelChange(e: React.ChangeEvent<HTMLSelectElement>) {
-    var val = e.currentTarget.value;
-    setModel(val);
-    ws.send({ type: "chat:set_model", model: val } as any);
-    if (props.onChange) {
-      props.onChange({ model: val, effort });
-    }
-  }
-
-  function handleEffortChange(e: React.ChangeEvent<HTMLSelectElement>) {
-    var val = e.currentTarget.value;
-    setEffort(val);
-    if (props.onChange) {
-      props.onChange({ model, effort: val });
-    }
-  }
-
-  return (
-    <div className="flex items-center gap-0.5 font-mono text-[10px]">
-      <select
-        value={model}
-        onChange={handleModelChange}
-        title="Select model"
-        aria-label="Model"
-        className={
-          "select select-xs select-ghost font-mono text-[10px] min-h-0 h-6 min-w-0 w-auto " +
-          (model === "default" ? "text-base-content/40" : "text-primary")
-        }
-      >
-        {models.map(function (opt) {
-          return (
-            <option key={opt.value} value={opt.value}>
-              {"Model: " + opt.displayName}
-            </option>
-          );
-        })}
-      </select>
-      <span className="text-base-content/20">·</span>
-      <select
-        value={effort}
-        onChange={handleEffortChange}
-        title="Select effort"
-        aria-label="Effort level"
-        className={
-          "select select-xs select-ghost font-mono text-[10px] min-h-0 h-6 min-w-0 w-auto " +
-          (effort === "medium" ? "text-base-content/40" : "text-primary")
-        }
-      >
-        {EFFORT_OPTIONS.map(function (opt) {
-          return (
-            <option key={opt.value} value={opt.value}>
-              {opt.label}
-            </option>
-          );
-        })}
-      </select>
-    </div>
-  );
-}

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

@@ -1,41 +0,0 @@
-import { useState } from "react";
-import { useWebSocket } from "../../hooks/useWebSocket";
-
-var MODE_OPTIONS = [
-  { value: "default", label: "Mode: Default" },
-  { value: "acceptEdits", label: "Mode: Accept Edits" },
-  { value: "plan", label: "Mode: Plan" },
-  { value: "dontAsk", label: "Mode: Don't Ask" },
-];
-
-export function PermissionModeSelector() {
-  var [mode, setMode] = useState<string>("default");
-  var { send } = useWebSocket();
-
-  function handleChange(e: React.ChangeEvent<HTMLSelectElement>) {
-    var val = e.currentTarget.value;
-    setMode(val);
-    send({ type: "chat:set_permission_mode", mode: val as "default" | "acceptEdits" | "plan" | "dontAsk" });
-  }
-
-  return (
-    <select
-      value={mode}
-      onChange={handleChange}
-      title="Permission mode"
-      aria-label="Permission mode"
-      className={
-        "select select-xs select-ghost font-mono text-[10px] min-h-0 h-6 min-w-0 w-auto " +
-        (mode === "default" ? "text-base-content/40" : "text-primary")
-      }
-    >
-      {MODE_OPTIONS.map(function (opt) {
-        return (
-          <option key={opt.value} value={opt.value}>
-            {opt.label}
-          </option>
-        );
-      })}
-    </select>
-  );
-}

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

@@ -1,271 +0,0 @@
-import { useState, useRef, useEffect } from "react";
-import { Check, Circle, CheckCircle2, MessageCircleQuestion, ChevronDown, Send } from "lucide-react";
-import type { HistoryMessage } from "#shared";
-import { useWebSocket } from "../../hooks/useWebSocket";
-import { resolvePromptQuestion } from "../../stores/session";
-
-interface PromptQuestionProps {
-  message: HistoryMessage;
-}
-
-var LETTERS = ["A", "B", "C", "D"];
-
-export function PromptQuestion(props: PromptQuestionProps) {
-  var msg = props.message;
-  var { send } = useWebSocket();
-  var [otherText, setOtherText] = useState("");
-  var [selectedMulti, setSelectedMulti] = useState<Set<string>>(new Set());
-  var [focusIndex, setFocusIndex] = useState(-1);
-  var [expanded, setExpanded] = useState(false);
-  var optionsRef = useRef<HTMLDivElement>(null);
-
-  var questions = msg.promptQuestions || [];
-  var answers = msg.promptAnswers;
-  var status = msg.promptStatus || "pending";
-  var requestId = msg.toolId || "";
-
-  useEffect(function () {
-    if (status === "pending" && optionsRef.current) {
-      var firstBtn = optionsRef.current.querySelector("button");
-      if (firstBtn) firstBtn.focus();
-    }
-  }, [status]);
-
-  function submitAnswer(questionText: string, answer: string) {
-    var answerMap: Record<string, string> = {};
-    answerMap[questionText] = answer;
-    resolvePromptQuestion(requestId, answerMap);
-    send({
-      type: "chat:prompt_response",
-      requestId: requestId,
-      answers: answerMap,
-    });
-  }
-
-  function submitMultiSelect(questionText: string) {
-    var parts = Array.from(selectedMulti);
-    if (otherText.trim()) parts.push(otherText.trim());
-    submitAnswer(questionText, parts.join(", "));
-  }
-
-  function submitOther(questionText: string) {
-    if (!otherText.trim()) return;
-    submitAnswer(questionText, otherText.trim());
-  }
-
-  function handleKeyDown(e: React.KeyboardEvent, optionCount: number, q: { question: string; multiSelect: boolean }, options: Array<{ label: string }>) {
-    if (e.key === "ArrowDown" || e.key === "ArrowRight") {
-      e.preventDefault();
-      var next = focusIndex < optionCount - 1 ? focusIndex + 1 : 0;
-      setFocusIndex(next);
-      var btns = optionsRef.current?.querySelectorAll("[data-option]");
-      if (btns && btns[next]) (btns[next] as HTMLElement).focus();
-    }
-    if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
-      e.preventDefault();
-      var prev = focusIndex > 0 ? focusIndex - 1 : optionCount - 1;
-      setFocusIndex(prev);
-      var btns = optionsRef.current?.querySelectorAll("[data-option]");
-      if (btns && btns[prev]) (btns[prev] as HTMLElement).focus();
-    }
-    if (e.key === "Enter" && !q.multiSelect && focusIndex >= 0 && focusIndex < options.length) {
-      e.preventDefault();
-      submitAnswer(q.question, options[focusIndex].label);
-    }
-  }
-
-  if (status === "answered" && answers) {
-    var firstAnswer = Object.entries(answers)[0];
-    var answeredQuestion = questions.length > 0 ? questions[0] : null;
-    return (
-      <div className="px-5 py-1.5" aria-live="polite">
-        <div
-          className="rounded-xl border border-success/15 bg-base-300/40 overflow-hidden cursor-pointer transition-colors hover:bg-base-300/60"
-          onClick={function () { setExpanded(!expanded); }}
-        >
-          <div className="flex items-center gap-2.5 px-4 py-2.5">
-            <CheckCircle2 size={15} className="text-success/60 flex-shrink-0" />
-            {answeredQuestion && (
-              <span className="text-[10px] font-mono font-semibold uppercase tracking-wider text-base-content/30">{answeredQuestion.header}</span>
-            )}
-            <span className="text-[12px] text-base-content/50">{firstAnswer ? firstAnswer[0] : ""}</span>
-            <span className="flex-1" />
-            <span className="text-[12px] font-medium text-base-content/70">{firstAnswer ? String(firstAnswer[1]) : ""}</span>
-            <ChevronDown
-              size={12}
-              className={"text-base-content/25 transition-transform duration-200 " + (expanded ? "rotate-180" : "")}
-            />
-          </div>
-
-          {expanded && answeredQuestion && (
-            <div className="px-4 pb-3 border-t border-base-content/5">
-              <div className="flex flex-col gap-1 pt-2">
-                {answeredQuestion!.options.map(function (opt: { label: string; description: string; preview?: string }, oi: number) {
-                  var isChosen = firstAnswer && firstAnswer[1] === opt.label;
-                  return (
-                    <div
-                      key={oi}
-                      className={
-                        "flex items-center gap-2.5 px-3 py-1.5 rounded-lg text-[12px] " +
-                        (isChosen ? "bg-success/8 text-base-content/70" : "text-base-content/30")
-                      }
-                    >
-                      <span className={
-                        "w-5 h-5 rounded-md flex items-center justify-center text-[10px] font-mono font-bold flex-shrink-0 " +
-                        (isChosen ? "bg-success/20 text-success/80" : "bg-base-content/5 text-base-content/20")
-                      }>
-                        {LETTERS[oi] || ""}
-                      </span>
-                      <span className={isChosen ? "font-medium" : ""}>{opt.label}</span>
-                      {isChosen && <Check size={12} className="text-success/60 ml-auto" />}
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  }
-
-  if (status === "timed_out") {
-    return (
-      <div className="px-5 py-1.5">
-        <div className="flex items-center gap-2.5 px-4 py-2.5 rounded-xl bg-warning/5 border border-warning/15 text-[12px] text-warning/50 font-mono">
-          <Circle size={13} className="flex-shrink-0" />
-          Prompt timed out — no response sent
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="px-5 py-2" aria-live="polite">
-      {questions.map(function (q: typeof questions[number], qi: number) {
-        return (
-          <div
-            key={qi}
-            className="rounded-xl border border-primary/15 bg-base-300/50 overflow-hidden shadow-[0_2px_8px_oklch(from_var(--color-primary)_l_c_h/0.06)]"
-          >
-            <div className="flex items-center gap-2.5 px-4 py-2.5 border-b border-base-content/5 bg-base-content/[0.02]">
-              <MessageCircleQuestion size={14} className="text-primary/40 flex-shrink-0" />
-              <span className="text-[10px] font-mono font-bold uppercase tracking-widest text-primary/35">{q.header}</span>
-              <span className="flex-1" />
-              <span className="text-[9px] font-mono text-base-content/20">select one</span>
-            </div>
-
-            <div className="px-4 py-3.5">
-              <div className="text-[13px] text-base-content/80 mb-3.5 leading-relaxed">{q.question}</div>
-
-              <div
-                ref={optionsRef}
-                className="flex flex-col gap-1.5"
-                role={q.multiSelect ? "group" : "radiogroup"}
-                aria-label={q.question}
-                onKeyDown={function (e) { handleKeyDown(e, q.options.length, q, q.options); }}
-              >
-                {q.options.map(function (opt: typeof q.options[number], oi: number) {
-                  var isSelected = selectedMulti.has(opt.label);
-                  var isFocused = focusIndex === oi;
-                  return (
-                    <button
-                      key={oi}
-                      data-option={oi}
-                      role={q.multiSelect ? "checkbox" : "radio"}
-                      aria-checked={isSelected}
-                      tabIndex={q.multiSelect ? 0 : (isFocused || (focusIndex === -1 && oi === 0) ? 0 : -1)}
-                      onFocus={function () { setFocusIndex(oi); }}
-                      onClick={function () {
-                        if (q.multiSelect) {
-                          setSelectedMulti(function (prev) {
-                            var next = new Set(prev);
-                            if (next.has(opt.label)) {
-                              next.delete(opt.label);
-                            } else {
-                              next.add(opt.label);
-                            }
-                            return next;
-                          });
-                        } else {
-                          submitAnswer(q.question, opt.label);
-                        }
-                      }}
-                      className={
-                        "group text-left flex items-start gap-3 px-3.5 py-2.5 rounded-lg text-[12px] cursor-pointer transition-all duration-150 outline-none " +
-                        (isSelected
-                          ? "bg-primary/10 border border-primary/25 text-base-content/85 shadow-[0_0_0_1px_oklch(from_var(--color-primary)_l_c_h/0.1)]"
-                          : "bg-base-content/[0.02] border border-base-content/8 text-base-content/60 hover:bg-base-content/5 hover:border-base-content/15 hover:text-base-content/75") +
-                        " focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-1 focus-visible:ring-offset-base-300"
-                      }
-                    >
-                      <span className={
-                        "w-5 h-5 rounded-md flex items-center justify-center text-[10px] font-mono font-bold flex-shrink-0 mt-px transition-colors duration-150 " +
-                        (isSelected
-                          ? "bg-primary/25 text-primary"
-                          : "bg-base-content/6 text-base-content/30 group-hover:bg-base-content/10 group-hover:text-base-content/45")
-                      }>
-                        {q.multiSelect
-                          ? (isSelected ? <Check size={11} /> : LETTERS[oi] || "")
-                          : LETTERS[oi] || ""
-                        }
-                      </span>
-                      <div className="flex-1 min-w-0">
-                        <div className="font-medium leading-snug">{opt.label}</div>
-                        {opt.description && (
-                          <div className="text-[11px] text-base-content/35 mt-0.5 leading-relaxed group-hover:text-base-content/45 transition-colors duration-150">{opt.description}</div>
-                        )}
-                      </div>
-                    </button>
-                  );
-                })}
-
-                <div className="flex items-center gap-2 mt-1.5 pt-1.5 border-t border-base-content/5">
-                  <input
-                    type="text"
-                    placeholder="Other..."
-                    value={otherText}
-                    onChange={function (e) { setOtherText(e.target.value); }}
-                    onKeyDown={function (e) {
-                      if (e.key === "Enter" && !q.multiSelect) {
-                        submitOther(q.question);
-                      }
-                    }}
-                    aria-label="Custom answer"
-                    className="flex-1 bg-base-content/[0.02] border border-base-content/8 rounded-lg px-3 py-2 text-[12px] text-base-content/60 placeholder:text-base-content/20 outline-none focus:border-primary/30 focus:bg-base-content/[0.04] transition-colors duration-150"
-                  />
-                  {!q.multiSelect && otherText.trim() && (
-                    <button
-                      onClick={function () { submitOther(q.question); }}
-                      className="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-primary/15 text-primary text-[11px] font-medium hover:bg-primary/25 transition-colors duration-150 cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/40"
-                      aria-label="Submit custom answer"
-                    >
-                      <Send size={10} />
-                      Send
-                    </button>
-                  )}
-                </div>
-
-                {q.multiSelect && (
-                  <button
-                    onClick={function () { submitMultiSelect(q.question); }}
-                    disabled={selectedMulti.size === 0 && !otherText.trim()}
-                    className={
-                      "mt-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-[12px] font-medium transition-all duration-150 cursor-pointer " +
-                      (selectedMulti.size > 0 || otherText.trim()
-                        ? "bg-primary text-primary-content hover:bg-primary/85 shadow-sm focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-base-300"
-                        : "bg-base-content/5 text-base-content/20 cursor-not-allowed")
-                    }
-                  >
-                    <Send size={12} />
-                    Submit ({selectedMulti.size} selected)
-                  </button>
-                )}
-              </div>
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}

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

@@ -1,50 +0,0 @@
-import { Brain, Wrench } from "lucide-react";
-
-interface StatusBarProps {
-  status: {
-    phase: string;
-    toolName?: string;
-    elapsed?: number;
-    summary?: string;
-  } | null;
-}
-
-export function StatusBar(props: StatusBarProps) {
-  var active = props.status !== null;
-
-  return (
-    <div
-      className="grid transition-all duration-200 ease-out"
-      style={{ gridTemplateRows: active ? "1fr" : "0fr" }}
-    >
-      <div className="overflow-hidden">
-        <div className="flex items-center gap-2 px-5 h-7 text-[12px] font-mono text-base-content/50 border-t border-base-300 bg-base-200">
-          {props.status && (
-            <>
-              {props.status.phase === "thinking" ? (
-                <Brain size={12} className="text-primary animate-pulse" />
-              ) : (
-                <Wrench size={12} className="text-primary" />
-              )}
-              <span className="truncate">
-                {props.status.phase === "thinking"
-                  ? "Thinking..."
-                  : props.status.toolName || "Processing..."}
-              </span>
-              {props.status.summary && (
-                <span className="text-base-content/30 truncate">
-                  {props.status.summary}
-                </span>
-              )}
-              {props.status.elapsed != null && (
-                <span className="text-base-content/30 ml-auto flex-shrink-0">
-                  {(props.status.elapsed / 1000).toFixed(1)}s
-                </span>
-              )}
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,57 +0,0 @@
-import { Circle, CircleDot, CheckCircle2, ListTodo } from "lucide-react";
-import type { HistoryMessage } from "#shared";
-
-interface TodoCardProps {
-  message: HistoryMessage;
-}
-
-function StatusIcon(props: { status: string }) {
-  if (props.status === "completed") {
-    return <CheckCircle2 size={13} className="text-success/70 flex-shrink-0" />;
-  }
-  if (props.status === "in_progress") {
-    return <CircleDot size={13} className="text-primary/70 flex-shrink-0 animate-pulse" />;
-  }
-  return <Circle size={13} className="text-base-content/25 flex-shrink-0" />;
-}
-
-export function TodoCard(props: TodoCardProps) {
-  var todos = props.message.todos || [];
-  if (todos.length === 0) return null;
-
-  var completed = todos.filter(function (t: typeof todos[number]) { return t.status === "completed"; }).length;
-  var total = todos.length;
-
-  return (
-    <div className="px-5 py-2">
-      <div className="rounded-xl border border-base-content/8 bg-base-300/60 overflow-hidden shadow-sm">
-        <div className="flex items-center gap-2 px-4 py-2 border-b border-base-content/6 bg-base-content/3">
-          <ListTodo size={14} className="text-base-content/40 flex-shrink-0" />
-          <span className="text-[10px] font-mono font-semibold uppercase tracking-wider text-base-content/35">Tasks</span>
-          <span className="text-[10px] font-mono text-base-content/25">{completed}/{total}</span>
-        </div>
-
-        <div className="px-3 py-2">
-          {todos.map(function (todo: typeof todos[number]) {
-            return (
-              <div
-                key={todo.id}
-                className={
-                  "flex items-start gap-2 px-2 py-1.5 rounded-md text-[12px] " +
-                  (todo.status === "completed" ? "text-base-content/35" : "text-base-content/65")
-                }
-              >
-                <div className="mt-0.5">
-                  <StatusIcon status={todo.status} />
-                </div>
-                <span className={todo.status === "completed" ? "line-through" : ""}>
-                  {todo.content}
-                </span>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,129 +0,0 @@
-import { useState } from "react";
-import { Wrench, ChevronDown, Check, FileText, Search, Terminal, Pencil, FolderOpen } from "lucide-react";
-import type { HistoryMessage } from "#shared";
-import { ToolResultRenderer } from "./ToolResultRenderer";
-import { formatToolSummary } from "./toolSummary";
-
-var TOOL_ICONS: Record<string, typeof Wrench> = {
-  Read: FileText,
-  Grep: Search,
-  Glob: Search,
-  Bash: Terminal,
-  Write: Pencil,
-  Edit: Pencil,
-  MultiEdit: Pencil,
-  LS: FolderOpen,
-};
-
-function getToolIcon(name: string) {
-  return TOOL_ICONS[name] || Wrench;
-}
-
-
-
-function ToolDetail(props: { tool: HistoryMessage }) {
-  var tool = props.tool;
-  var [detailOpen, setDetailOpen] = useState(false);
-  var hasResult = Boolean(tool.content);
-
-  var parsedArgs = tool.args || "";
-  try {
-    if (tool.args) {
-      parsedArgs = JSON.stringify(JSON.parse(tool.args), null, 2);
-    }
-  } catch {
-    parsedArgs = tool.args || "";
-  }
-
-  var Icon = getToolIcon(tool.name || "");
-  var summary = formatToolSummary(tool.name || "", tool.args || "");
-
-  return (
-    <div className="border-t border-base-content/6 first:border-t-0">
-      <button
-        type="button"
-        onClick={function () { setDetailOpen(function (v) { return !v; }); }}
-        className="flex items-center gap-2 w-full px-2.5 py-1.5 hover:bg-base-content/5 transition-colors cursor-pointer text-left"
-      >
-        <Icon size={11} className={hasResult ? "text-base-content/25 flex-shrink-0" : "text-primary/60 flex-shrink-0"} />
-        <span className="font-mono text-[11px] text-base-content/60 flex-shrink-0">{tool.name}</span>
-        {summary && (
-          <span className="text-[10px] text-base-content/30 truncate min-w-0 flex-1">{summary}</span>
-        )}
-        {!summary && <span className="flex-1" />}
-        {hasResult ? (
-          <Check size={10} className="text-success/40 flex-shrink-0" />
-        ) : (
-          <span className="text-[10px] text-primary/70 flex-shrink-0">running</span>
-        )}
-        <ChevronDown
-          size={10}
-          className={"text-base-content/25 transition-transform duration-150 flex-shrink-0 " + (detailOpen ? "rotate-180" : "")}
-        />
-      </button>
-
-      {detailOpen && (
-        <div className="pb-1">
-          <ToolResultRenderer toolName={tool.name || ""} args={tool.args || ""} result={tool.content || ""} />
-          {!(tool.name === "Edit" || tool.name === "MultiEdit") && parsedArgs && (
-            <div className="px-2.5 py-1.5 border-t border-base-content/6">
-              <div className="text-[9px] text-base-content/25 uppercase tracking-wider font-semibold mb-0.5">Args</div>
-              <pre className="font-mono text-[11px] text-base-content/45 whitespace-pre-wrap break-words m-0 leading-relaxed bg-base-100/50 rounded-md p-2 max-h-[120px] overflow-y-auto">
-                {parsedArgs}
-              </pre>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-interface ToolGroupProps {
-  tools: HistoryMessage[];
-}
-
-export function ToolGroup(props: ToolGroupProps) {
-  var [expanded, setExpanded] = useState(false);
-  var tools = props.tools;
-  var allDone = tools.every(function (t) { return Boolean(t.content); });
-  var uniqueNames = Array.from(new Set(tools.map(function (t) { return t.name || "unknown"; })));
-  var summary = uniqueNames.length <= 3
-    ? uniqueNames.join(", ")
-    : uniqueNames.slice(0, 2).join(", ") + " + " + (uniqueNames.length - 2) + " more";
-
-  return (
-    <div className="ml-14 mr-5 py-0.5 max-w-[95%] sm:max-w-[85%]">
-      <div className={"rounded-lg border text-[12px] overflow-hidden " + (allDone ? "bg-base-200/50 border-base-content/8" : "bg-base-200/70 border-primary/20")}>
-        <button
-          type="button"
-          onClick={function () { setExpanded(function (v) { return !v; }); }}
-          className="flex items-center gap-2 w-full py-1.5 px-2.5 hover:bg-base-content/5 transition-colors duration-100 cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:ring-inset"
-        >
-          <Wrench size={11} className={allDone ? "text-base-content/30" : "text-primary/70"} />
-          <span className="font-mono font-medium text-base-content/70 flex-1 text-left">
-            Ran {tools.length} commands
-          </span>
-          <span className="text-[10px] text-base-content/40 truncate max-w-[200px]">{summary}</span>
-          {allDone ? (
-            <Check size={11} className="text-success/50 flex-shrink-0" />
-          ) : (
-            <span className="text-[10px] text-primary/70 flex-shrink-0">running</span>
-          )}
-          <ChevronDown
-            size={11}
-            className={"text-base-content/30 transition-transform duration-150 flex-shrink-0 " + (expanded ? "rotate-180" : "")}
-          />
-        </button>
-
-        {expanded && (
-          <div className="border-t border-base-content/8">
-            {tools.map(function (tool, i) {
-              return <ToolDetail key={tool.toolId || (tool.name + "-" + i)} tool={tool} />;
-            })}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}