Sybil-2/web/src/components/chat/chat-messages-panel.tsx

import { useMemo, useRef, useState } from "preact/hooks";
import type { JSX } from "preact";
import { cn } from "@/lib/utils";
import { ChatAttachmentList } from "@/components/chat/chat-attachment-list";
import { getMessageAttachments, type Message } from "@/lib/api";
import { MarkdownContent } from "@/components/markdown/markdown-content";
import { ChevronDown, ChevronUp, Globe2, Link2, Wrench } from "lucide-preact";

type Props = {
  messages: Message[];
  isLoading: boolean;
  isSending: boolean;
};

type ToolLogMetadata = {
  kind: "tool_call";
  toolCallId?: string;
  toolName?: string;
  status?: "initiated" | "completed" | "failed";
  summary?: string;
  args?: Record<string, unknown>;
  startedAt?: string;
  completedAt?: string;
  durationMs?: number;
  error?: string | null;
  resultPreview?: string | null;
};

function asToolLogMetadata(value: unknown): ToolLogMetadata | null {
  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
  const record = value as Record<string, unknown>;
  if (record.kind !== "tool_call") return null;
  return record as ToolLogMetadata;
}

function getToolSummary(message: Message, metadata: ToolLogMetadata) {
  if (typeof metadata.summary === "string" && metadata.summary.trim()) return metadata.summary.trim();
  if (metadata.status === "failed" && typeof metadata.error === "string" && metadata.error.trim()) {
    return `Tool failed: ${metadata.error.trim()}`;
  }
  if (typeof metadata.resultPreview === "string" && metadata.resultPreview.trim()) return metadata.resultPreview.trim();
  if (message.content.trim()) return message.content.trim();
  const toolName = metadata.toolName?.trim() || message.name?.trim() || "unknown_tool";
  return `Ran tool '${toolName}'.`;
}

function getToolLabel(message: Message, metadata: ToolLogMetadata) {
  const raw = metadata.toolName?.trim() || message.name?.trim();
  if (!raw) return "Tool call";
  return raw
    .replace(/_/g, " ")
    .split(/\s+/)
    .filter(Boolean)
    .map((word) => `${word.slice(0, 1).toUpperCase()}${word.slice(1)}`)
    .join(" ");
}

function getToolIconName(toolName: string | null | undefined) {
  const lowered = toolName?.toLowerCase() ?? "";
  if (lowered.includes("search")) return "search";
  if (lowered.includes("url") || lowered.includes("fetch") || lowered.includes("http")) return "fetch";
  return "generic";
}

function formatDuration(durationMs: unknown) {
  if (typeof durationMs !== "number" || !Number.isFinite(durationMs) || durationMs <= 0) return null;
  return `${Math.round(durationMs)} ms`;
}

function formatToolTimestamp(...values: Array<string | null | undefined>) {
  const value = values.find((candidate) => candidate && !Number.isNaN(new Date(candidate).getTime()));
  if (!value) return null;
  return new Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "2-digit" }).format(new Date(value));
}

type ToolCallVisualState = "initiated" | "completed" | "failed";
type MessageRenderItem = { kind: "message"; message: Message } | { kind: "tool_group"; key: string; messages: Message[] };
type ToolStackStyle = JSX.CSSProperties & {
  "--tool-stack-x"?: string;
  "--tool-stack-y"?: string;
  "--tool-stack-z"?: string;
  "--tool-stack-scale"?: string;
  "--tool-stack-opacity"?: string;
  "--tool-stack-delay"?: string;
  "--tool-stack-from-transform"?: string;
  "--tool-stack-to-transform"?: string;
  "--tool-stack-from-opacity"?: string;
  "--tool-stack-to-opacity"?: string;
};
type ToolStackContainerStyle = JSX.CSSProperties & {
  "--tool-stack-from-height"?: string;
  "--tool-stack-to-height"?: string;
};
type ToolStackMotionDirection = "expand" | "collapse" | null;

const COLLAPSED_TOOL_STACK_LIMIT = 4;
const TOOL_STACK_CARD_HEIGHT = 62;
const TOOL_STACK_CARD_GAP = 10;
const TOOL_STACK_LAYOUT_ANIMATION_MS = 340;

function getToolVisualState(metadata: ToolLogMetadata): ToolCallVisualState {
  if (metadata.status === "failed") return "failed";
  if (metadata.status === "initiated") return "initiated";
  return "completed";
}

function getToolDetailLabel(message: Message, metadata: ToolLogMetadata, state: ToolCallVisualState) {
  return [
    state === "failed" ? "Failed" : state === "initiated" ? "Running" : "Completed",
    formatDuration(metadata.durationMs),
    formatToolTimestamp(message.createdAt, metadata.completedAt, metadata.startedAt),
  ]
    .filter(Boolean)
    .join(" • ");
}

function buildMessageRenderItems(messages: Message[]) {
  const items: MessageRenderItem[] = [];
  let toolRun: Message[] = [];

  const flushToolRun = () => {
    if (!toolRun.length) return;
    if (toolRun.length === 1) {
      items.push({ kind: "message", message: toolRun[0] });
    } else {
      items.push({ kind: "tool_group", key: toolRun[0].id, messages: toolRun });
    }
    toolRun = [];
  };

  for (const message of messages) {
    if (message.role === "tool" && asToolLogMetadata(message.metadata)) {
      toolRun.push(message);
      continue;
    }

    flushToolRun();
    items.push({ kind: "message", message });
  }

  flushToolRun();
  return items;
}

function getToolStackHeight(messageCount: number, expanded: boolean) {
  const visibleCount = Math.min(messageCount, COLLAPSED_TOOL_STACK_LIMIT);
  return expanded
    ? `${TOOL_STACK_CARD_HEIGHT + Math.max(0, messageCount - 1) * (TOOL_STACK_CARD_HEIGHT + TOOL_STACK_CARD_GAP)}px`
    : `${TOOL_STACK_CARD_HEIGHT + Math.max(0, visibleCount - 1) * TOOL_STACK_CARD_GAP}px`;
}

function getToolStackContainerStyle(messageCount: number, expanded: boolean, motionDirection: ToolStackMotionDirection): ToolStackContainerStyle {
  const collapsedHeight = getToolStackHeight(messageCount, false);
  const expandedHeight = getToolStackHeight(messageCount, true);
  const targetHeight = expanded ? expandedHeight : collapsedHeight;
  const fromHeight = motionDirection === "expand" ? collapsedHeight : motionDirection === "collapse" ? expandedHeight : targetHeight;

  return {
    "--tool-stack-from-height": fromHeight,
    "--tool-stack-to-height": targetHeight,
    height: targetHeight,
  };
}

function getExpandedToolLayout(index: number, messageCount: number) {
  const y = `${index * (TOOL_STACK_CARD_HEIGHT + TOOL_STACK_CARD_GAP)}px`;
  return {
    opacity: "1",
    transform: `translate3d(0px, ${y}, 0px) scale(1)`,
    x: "0px",
    y,
    z: "0px",
    scale: "1",
    zIndex: messageCount - index,
  };
}

function getCollapsedToolLayout(index: number, messageCount: number) {
  const depth = messageCount - index - 1;
  const visibleDepth = Math.min(depth, COLLAPSED_TOOL_STACK_LIMIT - 1);
  const isHidden = depth >= COLLAPSED_TOOL_STACK_LIMIT;
  const visibleCount = Math.min(messageCount, COLLAPSED_TOOL_STACK_LIMIT);
  const x = `${visibleDepth * 11}px`;
  const y = `${visibleDepth * TOOL_STACK_CARD_GAP}px`;
  const z = `${visibleDepth * -36}px`;
  const scale = `${Math.max(0.88, 1 - visibleDepth * 0.035)}`;
  const opacity = isHidden ? "0" : `${Math.max(0.34, 1 - visibleDepth * 0.22)}`;

  return {
    opacity,
    transform: `translate3d(${x}, ${y}, ${z}) scale(${scale})`,
    x,
    y,
    z,
    scale,
    zIndex: isHidden ? 0 : visibleCount - visibleDepth,
  };
}

function getToolStackStyle(index: number, messageCount: number, expanded: boolean, motionDirection: ToolStackMotionDirection): ToolStackStyle {
  const expandedLayout = getExpandedToolLayout(index, messageCount);
  const collapsedLayout = getCollapsedToolLayout(index, messageCount);
  const targetLayout = expanded ? expandedLayout : collapsedLayout;
  const fromLayout = motionDirection === "expand" ? collapsedLayout : motionDirection === "collapse" ? expandedLayout : targetLayout;

  return {
    "--tool-stack-x": targetLayout.x,
    "--tool-stack-y": targetLayout.y,
    "--tool-stack-z": targetLayout.z,
    "--tool-stack-scale": targetLayout.scale,
    "--tool-stack-opacity": targetLayout.opacity,
    "--tool-stack-delay": `${Math.min(messageCount - index - 1, COLLAPSED_TOOL_STACK_LIMIT - 1) * 34}ms`,
    "--tool-stack-from-transform": fromLayout.transform,
    "--tool-stack-to-transform": targetLayout.transform,
    "--tool-stack-from-opacity": fromLayout.opacity,
    "--tool-stack-to-opacity": targetLayout.opacity,
    opacity: targetLayout.opacity,
    transform: targetLayout.transform,
    zIndex: targetLayout.zIndex,
  };
}

function ToolCallCard({
  message,
  className,
  style,
}: {
  message: Message;
  className?: string;
  style?: JSX.CSSProperties;
}) {
  const toolLogMetadata = asToolLogMetadata(message.metadata);
  if (!toolLogMetadata) return null;

  const iconKind = getToolIconName(toolLogMetadata.toolName ?? message.name);
  const Icon = iconKind === "search" ? Globe2 : iconKind === "fetch" ? Link2 : Wrench;
  const toolState = getToolVisualState(toolLogMetadata);
  const isFailed = toolState === "failed";
  const isInitiated = toolState === "initiated";
  const toolSummary = getToolSummary(message, toolLogMetadata);
  const toolLabel = getToolLabel(message, toolLogMetadata);
  const toolDetailLabel = getToolDetailLabel(message, toolLogMetadata, toolState);

  return (
    <div
      className={cn(
        "inline-flex min-w-0 items-start gap-3 overflow-hidden rounded-xl border px-3 py-2.5 shadow-[inset_0_1px_0_hsl(180_100%_88%_/_0.06)]",
        isFailed
          ? "border-rose-400/34 bg-[linear-gradient(90deg,hsl(350_72%_44%_/_0.18),hsl(342_66%_9%_/_0.72))]"
          : isInitiated
            ? "border-amber-300/34 bg-[linear-gradient(90deg,hsl(43_74%_30%_/_0.34),hsl(260_48%_13%_/_0.74))]"
            : "border-cyan-400/34 bg-[linear-gradient(90deg,hsl(184_89%_21%_/_0.70),hsl(208_66%_12%_/_0.78))]",
        className
      )}
      style={style}
      title={`${toolSummary}\n${toolLabel} • ${toolDetailLabel}`}
    >
      <span
        className={cn(
          "mt-0.5 flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-lg border",
          isFailed
            ? "border-rose-400/34 bg-rose-400/13 text-rose-300"
            : isInitiated
              ? "border-amber-300/34 bg-amber-300/13 text-amber-200"
              : "border-cyan-300/34 bg-cyan-300/13 text-cyan-300"
        )}
      >
        <Icon className="h-4 w-4" />
      </span>
      <span className="min-w-0 flex-1 space-y-1">
        <span className={cn("block truncate text-sm leading-5", isFailed ? "text-rose-200" : "text-violet-50/95")}>{toolSummary}</span>
        <span className="flex min-w-0 items-center gap-1.5 text-[11px] leading-4">
          <span className={cn("min-w-0 truncate font-semibold", isFailed ? "text-rose-300/85" : isInitiated ? "text-amber-200/90" : "text-cyan-200/90")}>
            {toolLabel}
          </span>
          <span className="min-w-0 truncate text-violet-200/64">{toolDetailLabel}</span>
        </span>
      </span>
    </div>
  );
}

function ToolCallStack({
  groupKey,
  messages,
  expanded,
  onToggle,
}: {
  groupKey: string;
  messages: Message[];
  expanded: boolean;
  onToggle: (groupKey: string) => void;
}) {
  const hiddenCount = Math.max(0, messages.length - COLLAPSED_TOOL_STACK_LIMIT);
  const countLabel = `${messages.length} tool ${messages.length === 1 ? "call" : "calls"}`;
  const [motionDirection, setMotionDirection] = useState<ToolStackMotionDirection>(null);
  const [motionRevision, setMotionRevision] = useState(0);
  const motionResetTimerRef = useRef<number | null>(null);

  const handleToggle = () => {
    setMotionDirection(expanded ? "collapse" : "expand");
    setMotionRevision((current) => current + 1);
    if (typeof window !== "undefined") {
      if (motionResetTimerRef.current !== null) window.clearTimeout(motionResetTimerRef.current);
      motionResetTimerRef.current = window.setTimeout(() => {
        setMotionDirection(null);
        motionResetTimerRef.current = null;
      }, TOOL_STACK_LAYOUT_ANIMATION_MS + 60);
    }
    onToggle(groupKey);
  };

  return (
    <div className="flex justify-start">
      <div
        className={cn(
          "tool-call-stack-shell relative w-full max-w-[85%] min-w-0 pr-10",
          motionDirection && (motionRevision % 2 === 0 ? "tool-call-stack-shell-layout-a" : "tool-call-stack-shell-layout-b")
        )}
        data-tool-stack-group={groupKey}
        data-expanded={expanded ? "true" : "false"}
        style={getToolStackContainerStyle(messages.length, expanded, motionDirection)}
      >
        {messages.map((message, index) => {
          const depth = messages.length - index - 1;
          const isHidden = !expanded && depth >= COLLAPSED_TOOL_STACK_LIMIT;
          return (
            <div
              key={message.id}
              className={cn(
                "tool-call-stack-card absolute left-0 right-10 top-0 w-auto max-w-none",
                motionDirection && (motionRevision % 2 === 0 ? "tool-call-stack-card-layout-a" : "tool-call-stack-card-layout-b"),
                isHidden && "pointer-events-none"
              )}
              style={getToolStackStyle(index, messages.length, expanded, motionDirection)}
              aria-hidden={isHidden ? "true" : undefined}
            >
              <div
                className={cn("tool-call-stack-card-surface", !isHidden && "tool-call-stack-card-enter")}
                data-tool-stack-card-id={message.id}
              >
                <ToolCallCard message={message} className="tool-call-stack-card-glass w-full max-w-full" />
              </div>
            </div>
          );
        })}
        {!expanded && hiddenCount ? (
          <span className="absolute bottom-1 right-10 z-20 rounded-full border border-cyan-300/30 bg-slate-950/86 px-2 py-0.5 text-[10px] font-semibold leading-none text-cyan-100 shadow-sm">
            +{hiddenCount}
          </span>
        ) : null}
        <button
          type="button"
          className="tool-call-stack-toggle absolute right-0 top-2 z-20 flex h-8 w-8 items-center justify-center rounded-full"
          aria-expanded={expanded ? "true" : "false"}
          aria-label={`${expanded ? "Collapse" : "Expand"} ${countLabel}`}
          title={`${expanded ? "Collapse" : "Expand"} ${countLabel}`}
          onClick={handleToggle}
        >
          {expanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
        </button>
      </div>
    </div>
  );
}

export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
  const hasPendingAssistant = messages.some((message) => message.id.startsWith("temp-assistant-") && message.content.trim().length === 0);
  const renderItems = useMemo(() => buildMessageRenderItems(messages), [messages]);
  const [expandedToolGroups, setExpandedToolGroups] = useState<Set<string>>(() => new Set());

  const toggleToolGroup = (groupKey: string) => {
    setExpandedToolGroups((current) => {
      const next = new Set(current);
      if (next.has(groupKey)) next.delete(groupKey);
      else next.add(groupKey);
      return next;
    });
  };

  return (
    <>
      {isLoading && messages.length === 0 ? <p className="text-sm text-muted-foreground">Loading messages...</p> : null}
      <div className="mx-auto max-w-4xl space-y-6">
        {renderItems.map((item) => {
          if (item.kind === "tool_group") {
            return (
              <ToolCallStack
                key={`tool-group-${item.key}`}
                groupKey={item.key}
                messages={item.messages}
                expanded={expandedToolGroups.has(item.key)}
                onToggle={toggleToolGroup}
              />
            );
          }

          const { message } = item;
          const toolLogMetadata = asToolLogMetadata(message.metadata);
          if (message.role === "tool" && toolLogMetadata) {
            return (
              <div key={message.id} className="flex justify-start">
                <ToolCallCard message={message} className="max-w-[85%]" />
              </div>
            );
          }

          const isUser = message.role === "user";
          const isPendingAssistant = message.id.startsWith("temp-assistant-") && isSending && message.content.trim().length === 0;
          const attachments = getMessageAttachments(message.metadata);
          return (
            <div key={message.id} className={cn("flex", isUser ? "justify-end" : "justify-start")}>
              <div
                className={cn(
                  "max-w-[85%] space-y-3",
                  isUser
                    ? "rounded-xl border border-violet-300/24 bg-[linear-gradient(135deg,hsl(258_86%_48%_/_0.86),hsl(278_72%_29%_/_0.86))] px-4 py-3 text-sm leading-6 text-fuchsia-50 shadow-sm"
                    : "text-base leading-7 text-violet-50"
                )}
              >
                {attachments.length ? <ChatAttachmentList attachments={attachments} tone={isUser ? "user" : "assistant"} /> : null}
                {isPendingAssistant ? (
                  <span className="inline-flex items-center gap-1" aria-label="Assistant is typing" role="status">
                    <span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:0ms]" />
                    <span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:140ms]" />
                    <span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:280ms]" />
                  </span>
                ) : message.content.trim() ? (
                  <MarkdownContent
                    markdown={message.content}
                    className={cn("[&_a]:text-inherit [&_a]:underline", isUser ? "leading-[1.78] text-fuchsia-50" : "leading-[1.82] text-violet-50")}
                  />
                ) : null}
              </div>
            </div>
          );
        })}
        {isSending && !hasPendingAssistant ? (
          <div className="flex justify-start">
            <div className="max-w-[85%] text-base leading-7 text-violet-50">
              <span className="inline-flex items-center gap-1" aria-label="Assistant is typing" role="status">
                <span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:0ms]" />
                <span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:140ms]" />
                <span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:280ms]" />
              </span>
            </div>
          </div>
        ) : null}
      </div>
    </>
  );
}