@springbrand/message-panel 0.1.0 → 0.1.2

package/src/camel/camel-turn.ts

@@ -1,315 +0,0 @@
-import type { UIMessage } from "ai";
-import { USER_STOP_REASON } from "@springbrand/agent-runtime/contracts";
-import { resolvePartKind, toolNameOfPart } from "../parts/kind";
-
-type UnknownRecord = Record<string, unknown>;
-
-export type CamelPart = UIMessage["parts"][number];
-
-export interface CamelMessageMetadata extends UnknownRecord {
-  authorDisplayName?: string;
-  completedAt?: number;
-  createdAt?: number;
-  error?: string;
-  interruptedByUser?: boolean;
-  messageSource?: string;
-  turnDurationMs?: number;
-  turnStartedAt?: number;
-  turnStatus?: string;
-}
-
-export interface CamelPartRef {
-  messageId: string;
-  partIndex: number;
-  part: CamelPart;
-}
-
-export interface CamelAssistantTurn {
-  kind: "assistant";
-  key: string;
-  message: UIMessage;
-  messages: readonly [UIMessage];
-  actionMessageId: string;
-  parts: readonly CamelPartRef[];
-  traceParts: readonly CamelPartRef[];
-  finalParts: readonly CamelPartRef[];
-  terminalState?: {
-    kind: "interrupted" | "error";
-    title: string;
-    body?: string;
-  };
-  stepCount: number;
-  copyText: string;
-  replyText?: string;
-  durationMs?: number;
-  completedAt?: number;
-}
-
-export type CamelStandaloneKind =
-  | "user"
-  | "notice"
-  | "slash-command"
-  | "local-command-output"
-  | "compact-summary";
-
-export interface CamelStandaloneMessage {
-  kind: "message";
-  key: string;
-  message: UIMessage;
-  displayKind: CamelStandaloneKind;
-}
-
-export type CamelMessageItem = CamelAssistantTurn | CamelStandaloneMessage;
-
-const TRACE_PART_KINDS = new Set(["tool", "parallel", "subagents"]);
-
-function recordOf(value: unknown): UnknownRecord {
-  return value != null && typeof value === "object"
-    ? (value as UnknownRecord)
-    : {};
-}
-
-function nonNegativeNumber(value: unknown): number | undefined {
-  return typeof value === "number" && Number.isFinite(value) && value >= 0
-    ? value
-    : undefined;
-}
-
-export function camelMetadata(message: UIMessage): CamelMessageMetadata {
-  return recordOf(message.metadata) as CamelMessageMetadata;
-}
-
-export const camelMessageMetadata = camelMetadata;
-
-function isVisibleText(
-  part: CamelPart,
-): part is CamelPart & { type: "text"; text: string } {
-  return part.type === "text" && part.text.trim().length > 0;
-}
-
-function isVisibleReasoning(part: CamelPart): boolean {
-  return part.type === "reasoning" && part.text.trim().length > 0;
-}
-
-function standalonePartKind(part: CamelPart): CamelStandaloneKind | null {
-  switch (part.type) {
-    case "data-notice":
-      return "notice";
-    case "data-slash-command":
-      return "slash-command";
-    case "data-local-command-output":
-      return "local-command-output";
-    case "data-compact-summary":
-      return "compact-summary";
-    default:
-      return null;
-  }
-}
-
-function standaloneKind(message: UIMessage): CamelStandaloneKind | null {
-  for (const part of message.parts) {
-    const kind = standalonePartKind(part);
-    if (kind !== null) return kind;
-  }
-  return message.role === "user" ? "user" : null;
-}
-
-function isDirectUserMessage(message: UIMessage): boolean {
-  return message.role === "user" && standaloneKind(message) === "user";
-}
-
-export function camelMessageText(message: UIMessage): string {
-  return message.parts
-    .filter(isVisibleText)
-    .map((part) => part.text)
-    .join("\n");
-}
-
-export function camelCreatedAt(message: UIMessage): number | undefined {
-  return nonNegativeNumber(camelMetadata(message).createdAt);
-}
-
-export function camelCompletedAt(message: UIMessage): number | undefined {
-  return (
-    nonNegativeNumber(camelMetadata(message).completedAt) ??
-    camelCreatedAt(message)
-  );
-}
-
-export function formatCamelMessageTime(timestamp: number): string {
-  const date = new Date(timestamp);
-  const now = new Date();
-  const isToday =
-    date.getFullYear() === now.getFullYear() &&
-    date.getMonth() === now.getMonth() &&
-    date.getDate() === now.getDate();
-  return date.toLocaleString([], {
-    ...(isToday ? {} : { month: "short", day: "numeric" }),
-    hour: "numeric",
-    minute: "2-digit",
-    hour12: true,
-  });
-}
-
-export function formatCamelTurnDuration(milliseconds: number): string {
-  const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000));
-  const hours = Math.floor(totalSeconds / 3600);
-  const minutes = Math.floor((totalSeconds % 3600) / 60);
-  const seconds = totalSeconds % 60;
-  return hours > 0
-    ? `${hours}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`
-    : `${minutes}:${String(seconds).padStart(2, "0")}`;
-}
-
-function isTraceWork(
-  part: CamelPart,
-  finalToolNames: readonly string[],
-): boolean {
-  if (isVisibleReasoning(part)) return true;
-  const kind = resolvePartKind(part);
-  if (kind === "plan") return false;
-  const toolName = toolNameOfPart(part);
-  if (toolName !== null && finalToolNames.includes(toolName)) return false;
-  return TRACE_PART_KINDS.has(kind ?? "");
-}
-
-function isTraceBoundary(
-  part: CamelPart,
-  finalToolNames: readonly string[],
-): boolean {
-  return part.type === "step-start" || isTraceWork(part, finalToolNames);
-}
-
-function terminalState(
-  message: UIMessage,
-): CamelAssistantTurn["terminalState"] {
-  const metadata = camelMetadata(message);
-  if (metadata.interruptedByUser === true) {
-    return {
-      kind: "interrupted",
-      title: USER_STOP_REASON,
-    };
-  }
-  if (
-    metadata.turnStatus === "aborted" &&
-    metadata.error === USER_STOP_REASON
-  ) return undefined;
-  if (metadata.turnStatus === "error" || metadata.error) {
-    return {
-      kind: "error",
-      title: "Error",
-      body: metadata.error ?? "The response failed.",
-    };
-  }
-  return undefined;
-}
-
-function turnDuration(message: UIMessage): number | undefined {
-  const metadata = camelMetadata(message);
-  const explicit = nonNegativeNumber(metadata.turnDurationMs);
-  if (explicit !== undefined) return explicit;
-  const startedAt = nonNegativeNumber(metadata.turnStartedAt);
-  const completedAt = nonNegativeNumber(metadata.completedAt);
-  return startedAt !== undefined && completedAt !== undefined
-    ? Math.max(0, completedAt - startedAt)
-    : undefined;
-}
-
-export function projectCamelAssistantTurn(
-  message: UIMessage,
-  finalToolNames: readonly string[] = [],
-  replyText?: string,
-): CamelAssistantTurn {
-  const parts = message.parts.map((part, partIndex) => ({
-    messageId: message.id,
-    partIndex,
-    part,
-  }));
-  let lastTraceBoundary = -1;
-  for (let index = parts.length - 1; index >= 0; index -= 1) {
-    if (isTraceBoundary(parts[index].part, finalToolNames)) {
-      lastTraceBoundary = index;
-      break;
-    }
-  }
-
-  const traceParts: CamelPartRef[] = [];
-  const finalParts: CamelPartRef[] = [];
-  for (const partRef of parts) {
-    const { part, partIndex } = partRef;
-    if (part.type === "step-start" || resolvePartKind(part) === "plan") {
-      continue;
-    }
-    if (
-      isTraceWork(part, finalToolNames) ||
-      (isVisibleText(part) && partIndex < lastTraceBoundary)
-    ) {
-      traceParts.push(partRef);
-      continue;
-    }
-    const kind = resolvePartKind(part);
-    if (isVisibleText(part) || (kind !== null && kind !== "reasoning")) {
-      finalParts.push(partRef);
-    }
-  }
-
-  const hasFinalNarrative = finalParts.some(
-    ({ part }) => isVisibleText(part) || resolvePartKind(part) === "error",
-  );
-  const terminal = terminalState(message);
-
-  return {
-    kind: "assistant",
-    key: `assistant-${message.id}`,
-    message,
-    messages: [message],
-    actionMessageId: message.id,
-    parts,
-    traceParts,
-    finalParts,
-    terminalState: terminal?.kind === "interrupted" || !hasFinalNarrative
-      ? terminal
-      : undefined,
-    stepCount: Math.max(
-      1,
-      parts.filter(({ part }) => part.type === "step-start").length,
-    ),
-    copyText: camelMessageText(message),
-    replyText,
-    durationMs: turnDuration(message),
-    completedAt: camelCompletedAt(message),
-  };
-}
-
-export function projectCamelMessages(
-  messages: readonly UIMessage[],
-  finalToolNames: readonly string[] = [],
-): CamelMessageItem[] {
-  const items: CamelMessageItem[] = [];
-  messages.forEach((message, index) => {
-    if (message.role === "system") return;
-    const displayKind = standaloneKind(message);
-    if (message.role === "assistant" && displayKind === null) {
-      const reply = messages
-        .slice(index + 1)
-        .find(isDirectUserMessage);
-      items.push(
-        projectCamelAssistantTurn(
-          message,
-          finalToolNames,
-          reply ? camelMessageText(reply).trim() || undefined : undefined,
-        ),
-      );
-      return;
-    }
-    if (displayKind !== null) {
-      items.push({
-        kind: "message",
-        key: `message-${message.id}`,
-        message,
-        displayKind,
-      });
-    }
-  });
-  return items;
-}

package/src/camel/turn-summary-bar.tsx

@@ -1,81 +0,0 @@
-import { ChevronRightIcon } from "lucide-react";
-import { useState, type ReactNode } from "react";
-import { cn } from "../internal/cn";
-import { formatCamelTurnDuration } from "./camel-turn";
-
-export interface TurnSummaryBarProps {
-  durationMs?: number;
-  stepCount: number;
-  children: ReactNode;
-  showSeparator?: boolean;
-}
-
-export function TurnSummaryBar({
-  durationMs,
-  stepCount,
-  children,
-  showSeparator = true,
-}: TurnSummaryBarProps) {
-  const [expanded, setExpanded] = useState(false);
-  const stepLabel = `${stepCount} step${stepCount === 1 ? "" : "s"}`;
-  const showDuration = durationMs !== undefined && durationMs >= 1000;
-  const toggleLabel = expanded ? "hide work" : "show work";
-
-  return (
-    <div data-camel-turn-summary="" data-state={expanded ? "open" : "closed"}>
-      <button
-        type="button"
-        aria-expanded={expanded}
-        aria-label={`${expanded ? "Hide" : "Show"} work, ${stepLabel}${
-          showDuration ? `, ${formatCamelTurnDuration(durationMs)}` : ""
-        }`}
-        className={cn(
-          "group/turn-summary flex w-full cursor-pointer items-center gap-1.5 rounded py-1 text-left",
-          "font-mono text-xs text-muted-foreground/60 transition-colors duration-150",
-          "hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50",
-        )}
-        onClick={() => setExpanded((current) => !current)}
-      >
-        {showDuration && (
-          <>
-            <span>worked for</span>
-            <span className="text-muted-foreground/80">
-              {formatCamelTurnDuration(durationMs)}
-            </span>
-            <span className="text-muted-foreground/30">·</span>
-          </>
-        )}
-        <span className="text-muted-foreground/80">{stepLabel}</span>
-        <span className="text-muted-foreground/30">·</span>
-        <span>{toggleLabel}</span>
-        <ChevronRightIcon
-          className={cn(
-            "size-3.5 text-muted-foreground/40 transition-transform duration-250",
-            expanded && "rotate-90",
-          )}
-          aria-hidden="true"
-        />
-      </button>
-      <div
-        data-camel-turn-summary-content=""
-        data-camel-collapsible-content=""
-        data-state={expanded ? "open" : "closed"}
-        aria-hidden={!expanded}
-        inert={!expanded ? true : undefined}
-      >
-        {expanded && (
-          <div data-camel-collapsible-inner="">
-            <div
-              className="space-y-1 py-2"
-              data-camel-turn-trace=""
-              data-state="open"
-            >
-              {children}
-            </div>
-          </div>
-        )}
-      </div>
-      {showSeparator && <hr className="my-2 border-t border-border/40" />}
-    </div>
-  );
-}

package/src/chat-summary-panel.tsx

@@ -1,229 +0,0 @@
-import { useState, type ComponentType } from "react";
-import {
-  ActivityIcon,
-  BotIcon,
-  ChevronUpIcon,
-  FileIcon,
-  LinkIcon,
-  ListIcon,
-  MessageSquareIcon,
-  WrenchIcon,
-} from "lucide-react";
-import { cn } from "./internal/cn";
-
-export interface ChatSummarySource {
-  kind: "file" | "link";
-  label: string;
-  href?: string;
-}
-
-export interface ChatSummaryPanelProps {
-  sessionTitle: string;
-  messageCount: number;
-  currentGoal?: string;
-  agentTitle: string;
-  agentValue?: string;
-  stateLabel: string;
-  stateTone: "danger" | "active" | "success";
-  activityCount: number;
-  taskCount: number;
-  runningTaskCount: number;
-  completedTaskCount: number;
-  sources: readonly ChatSummarySource[];
-  defaultExpanded?: boolean;
-  className?: string;
-}
-
-function SummaryRow({
-  icon: Icon,
-  label,
-  value,
-}: {
-  icon: ComponentType<{ className?: string }>;
-  label: string;
-  value?: string;
-}) {
-  return (
-    <div className="flex w-full min-w-0 items-center gap-2 rounded-md py-1.5 text-left text-sm text-foreground">
-      <Icon className="size-4 shrink-0 text-muted-foreground" />
-      <span className="min-w-0 flex-1 truncate">{label}</span>
-      {value && (
-        <span className="shrink-0 text-xs text-muted-foreground">{value}</span>
-      )}
-    </div>
-  );
-}
-
-export function ChatSummaryPanel({
-  sessionTitle,
-  messageCount,
-  currentGoal,
-  agentTitle,
-  agentValue,
-  stateLabel,
-  stateTone,
-  activityCount,
-  taskCount,
-  runningTaskCount,
-  completedTaskCount,
-  sources,
-  defaultExpanded = false,
-  className,
-}: ChatSummaryPanelProps) {
-  const [expanded, setExpanded] = useState(defaultExpanded);
-  const stateColor = {
-    danger: "bg-destructive",
-    active: "bg-primary",
-    success: "bg-success",
-  }[stateTone];
-
-  if (!expanded) {
-    return (
-      <button
-        type="button"
-        className={cn(
-          "inline-flex h-8 shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-border bg-background/90 px-2.5 text-xs font-medium text-muted-foreground shadow-sm backdrop-blur transition-all outline-none",
-          "hover:bg-accent hover:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50",
-          "animate-in fade-in-0 zoom-in-95 slide-in-from-top-1 duration-150 motion-reduce:animate-none",
-          className,
-        )}
-        onClick={() => setExpanded(true)}
-        aria-expanded={false}
-        aria-label="展开摘要"
-        title="展开摘要"
-        data-message-panel-summary=""
-        data-state="collapsed"
-      >
-        <ListIcon className="size-3.5" />
-        摘要
-      </button>
-    );
-  }
-
-  return (
-    <aside
-      className={cn(
-        "w-[19rem] min-w-0 max-w-full overflow-hidden rounded-2xl border border-border bg-popover shadow-card",
-        "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200 motion-reduce:animate-none",
-        className,
-      )}
-      data-message-panel-summary=""
-      data-state="expanded"
-    >
-      <header className="flex h-10 items-center border-b border-border px-4">
-        <span className="text-sm font-medium text-muted-foreground">摘要</span>
-        <button
-          type="button"
-          className="group/collapse ml-auto inline-flex size-8 shrink-0 items-center justify-center rounded-md outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4"
-          onClick={() => setExpanded(false)}
-          aria-expanded={true}
-          aria-label="收起摘要"
-          title="收起摘要"
-        >
-          <ChevronUpIcon className="transition-transform duration-200 group-hover/collapse:-translate-y-0.5 motion-reduce:transition-none" />
-        </button>
-      </header>
-      <div className="max-h-[min(31rem,calc(100dvh-8rem))] overflow-y-auto">
-        <div className="px-4 py-3">
-          <section>
-            <p className="mb-2 text-xs font-medium text-muted-foreground">
-              会话
-            </p>
-            <SummaryRow
-              icon={MessageSquareIcon}
-              label={sessionTitle}
-              value={`${messageCount} 条消息`}
-            />
-            {currentGoal && (
-              <p className="mb-1 ml-6 line-clamp-2 text-xs leading-5 text-muted-foreground">
-                {currentGoal}
-              </p>
-            )}
-            <SummaryRow
-              icon={BotIcon}
-              label={agentTitle}
-              value={agentValue}
-            />
-            <div className="flex items-center gap-2 py-1.5 text-sm">
-              <ActivityIcon className="size-4 shrink-0 text-muted-foreground" />
-              <span className="min-w-0 flex-1">状态</span>
-              <span
-                className={cn(
-                  "size-1.5 rounded-full transition-colors duration-200",
-                  stateTone === "active" &&
-                    "animate-pulse motion-reduce:animate-none",
-                  stateColor,
-                )}
-              />
-              <span className="text-xs text-muted-foreground">{stateLabel}</span>
-            </div>
-            <SummaryRow
-              icon={WrenchIcon}
-              label={`${activityCount} 次工具活动`}
-            />
-          </section>
-
-          <section className="mt-3 border-t border-border pt-3">
-            <p className="mb-2 text-xs font-medium text-muted-foreground">
-              子任务
-            </p>
-            <SummaryRow
-              icon={BotIcon}
-              label={
-                taskCount === 0 ? "暂无子任务" : `${runningTaskCount} 个运行中`
-              }
-              value={
-                completedTaskCount > 0
-                  ? `${completedTaskCount} 已完成`
-                  : undefined
-              }
-            />
-          </section>
-
-          <section className="mt-3 border-t border-border pt-3">
-            <p className="mb-2 text-xs font-medium text-muted-foreground">
-              来源
-            </p>
-            {sources.length === 0 ? (
-              <p className="py-1.5 text-xs text-muted-foreground">
-                当前会话还没有附件或引用来源
-              </p>
-            ) : (
-              <div className="space-y-0.5">
-                {sources.map((source) => {
-                  const Icon = source.kind === "file" ? FileIcon : LinkIcon;
-                  const content = (
-                    <>
-                      <Icon className="size-4 shrink-0 text-muted-foreground" />
-                      <span className="min-w-0 flex-1 truncate">
-                        {source.label}
-                      </span>
-                    </>
-                  );
-                  return source.href ? (
-                    <a
-                      key={`${source.kind}:${source.href}`}
-                      href={source.href}
-                      target="_blank"
-                      rel="noreferrer"
-                      className="flex items-center gap-2 rounded-md py-1.5 text-sm text-foreground hover:bg-accent"
-                    >
-                      {content}
-                    </a>
-                  ) : (
-                    <div
-                      key={`${source.kind}:${source.label}`}
-                      className="flex items-center gap-2 py-1.5 text-sm text-foreground"
-                    >
-                      {content}
-                    </div>
-                  );
-                })}
-              </div>
-            )}
-          </section>
-        </div>
-      </div>
-    </aside>
-  );
-}