@xpert-ai/chatkit-ui 0.4.7 → 0.4.8

package/dist/index.js

@@ -1,21 +1,22 @@
 // src/components/chat.tsx
-import * as React52 from "react";
+import * as React54 from "react";
 import {
   ArrowDown as ArrowDown2,
   ChevronDown as ChevronDown5,
   FileText as FileText5,
   ImageIcon,
-  Loader2 as Loader29,
+  Loader2 as Loader210,
   Minus,
   Pause,
   Pencil as Pencil4,
   Play,
   Quote,
   Settings as Settings2,
-  Target as Target2,
+  Target as Target3,
   Trash2 as Trash23,
   X as X7
 } from "lucide-react";
+import { CHATKIT_TASK_SUMMARY_OPEN_RESOURCE_EFFECT } from "@xpert-ai/chatkit-types";
 
 // src/lib/utils.ts
 import { clsx } from "clsx";
@@ -393,6 +394,15 @@ function toLineNumber(value) {
 function isOptionalNumber(value) {
   return value === void 0 || Number.isFinite(value);
 }
+function isElementAttribute(value) {
+  if (!isObjectLike(value)) {
+    return false;
+  }
+  return "name" in value && "value" in value && typeof value.name === "string" && typeof value.value === "string";
+}
+function isElementAttributes(value) {
+  return Array.isArray(value) && value.every(isElementAttribute);
+}
 function toOptionalNumber(value, options) {
   const allowZero = options?.allowZero ?? false;
   if (!Number.isFinite(value)) {
@@ -428,6 +438,20 @@ function isImageReferenceCandidate(value) {
   const candidate = value;
   return candidate.type === "image" && isOptionalString(candidate.id) && isOptionalString(candidate.label) && isOptionalString(candidate.text) && isOptionalString(candidate.fileId) && isOptionalString(candidate.url) && isOptionalString(candidate.mimeType) && isOptionalString(candidate.name) && isOptionalNumber(candidate.size) && isOptionalNumber(candidate.width) && isOptionalNumber(candidate.height) && hasImageReferenceLocator(candidate);
 }
+function isElementReferenceCandidate(value) {
+  if (!isObjectLike(value)) {
+    return false;
+  }
+  const candidate = value;
+  return candidate.type === "element" && isElementAttributes(candidate.attributes) && isNonEmptyString(candidate.outerHtml) && isNonEmptyString(candidate.pageUrl) && isNonEmptyString(candidate.selector) && isNonEmptyString(candidate.serviceId) && isNonEmptyString(candidate.tagName) && toReferenceText(candidate.text) !== null && isOptionalString(candidate.id) && isOptionalString(candidate.label) && isOptionalString(candidate.pageTitle) && isOptionalString(candidate.role);
+}
+function isFileElementReferenceCandidate(value) {
+  if (!isObjectLike(value)) {
+    return false;
+  }
+  const candidate = value;
+  return candidate.type === "file_element" && isElementAttributes(candidate.attributes) && isNonEmptyString(candidate.domPath) && isNonEmptyString(candidate.filePath) && isNonEmptyString(candidate.outerHtml) && isNonEmptyString(candidate.selector) && isNonEmptyString(candidate.tagName) && toReferenceText(candidate.text) !== null && isOptionalString(candidate.id) && isOptionalString(candidate.label) && isOptionalString(candidate.documentTitle) && isOptionalString(candidate.role) && isOptionalNumber(candidate.sourceStartLine) && isOptionalNumber(candidate.sourceEndLine);
+}
 function toCodeReference(candidate) {
   return {
     type: "code",
@@ -472,6 +496,48 @@ function toImageReference(candidate) {
     ...toOptionalNumber(candidate.height) !== void 0 ? { height: toOptionalNumber(candidate.height) } : {}
   };
 }
+function toElementReference(candidate) {
+  const id = toOptionalString(candidate.id);
+  const label = toOptionalString(candidate.label);
+  const pageTitle = toOptionalString(candidate.pageTitle);
+  const role = toOptionalString(candidate.role);
+  return {
+    type: "element",
+    ...id ? { id } : {},
+    ...label ? { label } : {},
+    attributes: candidate.attributes,
+    outerHtml: candidate.outerHtml,
+    ...pageTitle ? { pageTitle } : {},
+    pageUrl: candidate.pageUrl.trim(),
+    ...role ? { role } : {},
+    selector: candidate.selector,
+    serviceId: candidate.serviceId,
+    tagName: candidate.tagName,
+    text: candidate.text
+  };
+}
+function toFileElementReference(candidate) {
+  const id = toOptionalString(candidate.id);
+  const label = toOptionalString(candidate.label);
+  const documentTitle = toOptionalString(candidate.documentTitle);
+  const role = toOptionalString(candidate.role);
+  return {
+    type: "file_element",
+    ...id ? { id } : {},
+    ...label ? { label } : {},
+    attributes: candidate.attributes,
+    ...documentTitle ? { documentTitle } : {},
+    domPath: candidate.domPath,
+    filePath: candidate.filePath,
+    outerHtml: candidate.outerHtml,
+    ...role ? { role } : {},
+    selector: candidate.selector,
+    ...toOptionalNumber(candidate.sourceStartLine) !== void 0 ? { sourceStartLine: candidate.sourceStartLine } : {},
+    ...toOptionalNumber(candidate.sourceEndLine) !== void 0 ? { sourceEndLine: candidate.sourceEndLine } : {},
+    tagName: candidate.tagName,
+    text: candidate.text
+  };
+}
 function isLegacyCodeReference(candidate) {
   return candidate.type === void 0 && isNonEmptyString(candidate.path) && toLineNumber(candidate.startLine) !== null && toLineNumber(candidate.endLine) !== null && toReferenceText(candidate.text) !== null;
 }
@@ -490,6 +556,12 @@ function normalizeReference(value) {
   if (isImageReferenceCandidate(candidate)) {
     return toImageReference(candidate);
   }
+  if (isElementReferenceCandidate(candidate)) {
+    return toElementReference(candidate);
+  }
+  if (isFileElementReferenceCandidate(candidate)) {
+    return toFileElementReference(candidate);
+  }
   if (type === void 0 && isLegacyCodeReference(candidate)) {
     return toCodeReference(candidate);
   }
@@ -564,6 +636,22 @@ function getReferenceKey(reference) {
       reference.text
     ].join(":");
   }
+  if (reference.type === "element") {
+    return [
+      reference.type,
+      reference.serviceId,
+      reference.pageUrl,
+      reference.selector
+    ].join(":");
+  }
+  if (reference.type === "file_element") {
+    return [
+      reference.type,
+      reference.filePath,
+      reference.domPath,
+      reference.selector
+    ].join(":");
+  }
   return [
     reference.type,
     reference.messageId ?? "",
@@ -596,7 +684,13 @@ function getReferenceLabel(reference) {
   if (reference.type === "image") {
     return reference.name?.trim() || "Pasted image";
   }
-  if (reference.source && reference.source.trim()) {
+  if (reference.type === "element") {
+    return reference.pageTitle?.trim() || reference.tagName;
+  }
+  if (reference.type === "file_element") {
+    return reference.documentTitle?.trim() || reference.filePath;
+  }
+  if (reference.type === "quote" && reference.source?.trim()) {
     return reference.source.trim();
   }
   return getQuoteExcerpt(reference);
@@ -609,10 +703,18 @@ function getReferenceMetaLine(reference) {
     const parts = getImageReferenceMetaParts(reference);
     return parts.length ? parts.join(" \u2022 ") : null;
   }
-  if (reference.source && reference.source.trim()) {
+  if (reference.type === "element") {
+    return reference.pageUrl;
+  }
+  if (reference.type === "file_element") {
+    const start = reference.sourceStartLine;
+    const end = reference.sourceEndLine ?? start;
+    return start ? `${reference.filePath}:${start}${end === start ? "" : `-${end}`}` : reference.filePath;
+  }
+  if (reference.type === "quote" && reference.source?.trim()) {
     return getQuoteExcerpt(reference);
   }
-  if (reference.messageId && reference.messageId.trim()) {
+  if (reference.type === "quote" && reference.messageId?.trim()) {
     return `Message ${reference.messageId.trim()}`;
   }
   return null;
@@ -638,6 +740,17 @@ ${reference.text}`;
     }
     return titleLines.join("\n");
   }
+  if (reference.type === "element") {
+    return `${getReferenceLabel(reference)}
+${reference.pageUrl}
+
+${reference.text}`;
+  }
+  if (reference.type === "file_element") {
+    return `${getReferenceMetaLine(reference) ?? reference.filePath}
+
+${reference.text}`;
+  }
   const header = reference.label?.trim() || reference.source?.trim() || "Quoted text";
   return `${header}
 
@@ -1258,6 +1371,548 @@ function countCompletedTodos(items) {
   return items.filter((item) => item.status === "completed").length;
 }
 
+// src/lib/task-summary.ts
+var PLAN_PATTERN = /<proposed_plan>\s*([\s\S]*?)\s*<\/proposed_plan>/i;
+function isObject(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function stringValue(value) {
+  return typeof value === "string" && value.trim() ? value.trim() : void 0;
+}
+function timestamp(value) {
+  const parsed = value ? Date.parse(value) : 0;
+  return Number.isNaN(parsed) ? 0 : parsed;
+}
+function contentParts(content) {
+  return Array.isArray(content) ? content.filter((part) => isObject(part)) : [];
+}
+function messageText(content) {
+  if (typeof content === "string") return content;
+  return contentParts(content).map(
+    (part) => isObject(part) && "text" in part ? stringValue(part.text) ?? "" : ""
+  ).join("\n");
+}
+function normalizeTaskSummaryContribution(value) {
+  if (!isObject(value)) return null;
+  const candidate = value;
+  if (candidate.version !== 1) return null;
+  const plan = normalizePlan(candidate.plan);
+  const todos = normalizeTodos(candidate.todos);
+  const outputs = Array.isArray(candidate.outputs) ? candidate.outputs.flatMap((item) => normalizeOutput(item) ?? []) : [];
+  const sources = Array.isArray(candidate.sources) ? candidate.sources.flatMap((item) => normalizeSource(item) ?? []) : [];
+  return {
+    version: 1,
+    ...plan ? { plan } : {},
+    ...todos ? { todos } : {},
+    ...outputs.length ? { outputs } : {},
+    ...sources.length ? { sources } : {}
+  };
+}
+function normalizePlan(value) {
+  if (!isObject(value)) return null;
+  const candidate = value;
+  const title = stringValue(candidate.title);
+  const excerpt = stringValue(candidate.excerpt);
+  return title && excerpt ? {
+    title,
+    excerpt,
+    messageId: stringValue(candidate.messageId),
+    updatedAt: stringValue(candidate.updatedAt)
+  } : null;
+}
+function normalizeTodos(value) {
+  if (!isObject(value)) return null;
+  const candidate = value;
+  const componentId = stringValue(candidate.componentId);
+  if (!componentId || !Array.isArray(candidate.items)) return null;
+  const items = candidate.items.flatMap((item) => {
+    if (!isObject(item)) return [];
+    const todo = item;
+    const id = stringValue(todo.id);
+    const content = stringValue(todo.content);
+    const status = todo.status;
+    return id && content && isTodoStatus(status) ? [{ id, content, status }] : [];
+  });
+  return items.length ? {
+    componentId,
+    title: stringValue(candidate.title),
+    items,
+    messageId: stringValue(candidate.messageId),
+    updatedAt: stringValue(candidate.updatedAt)
+  } : null;
+}
+function isTodoStatus(value) {
+  return value === "pending" || value === "in_progress" || value === "completed";
+}
+function normalizeOutput(value) {
+  if (!isObject(value)) return null;
+  const candidate = value;
+  const id = stringValue(candidate.id);
+  const title = stringValue(candidate.title);
+  const kind = artifactKind(candidate.kind);
+  if (!id || !title || !kind) return null;
+  const status = candidate.status;
+  return {
+    id,
+    kind,
+    title,
+    description: stringValue(candidate.description),
+    status: status === "pending" || status === "running" || status === "success" || status === "error" ? status : void 0,
+    resource: normalizeResource(candidate.resource),
+    messageId: stringValue(candidate.messageId),
+    updatedAt: stringValue(candidate.updatedAt)
+  };
+}
+function normalizeSource(value) {
+  if (!isObject(value)) return null;
+  const candidate = value;
+  const id = stringValue(candidate.id);
+  const title = stringValue(candidate.title);
+  if (!id || !title || !isSourceKind(candidate.kind)) return null;
+  return {
+    id,
+    kind: candidate.kind,
+    title,
+    description: stringValue(candidate.description),
+    resource: normalizeResource(candidate.resource),
+    messageId: stringValue(candidate.messageId),
+    updatedAt: stringValue(candidate.updatedAt)
+  };
+}
+function normalizeResource(value) {
+  if (!isObject(value)) return void 0;
+  const candidate = value;
+  if (candidate.type === "message") {
+    const messageId = stringValue(candidate.messageId);
+    return messageId ? { type: "message", messageId } : void 0;
+  }
+  if (candidate.type === "workspace_file") {
+    const workspacePath = stringValue(candidate.workspacePath);
+    return workspacePath ? {
+      type: "workspace_file",
+      workspacePath,
+      fileAssetId: stringValue(candidate.fileAssetId),
+      storageFileId: stringValue(candidate.storageFileId)
+    } : void 0;
+  }
+  if (candidate.type === "artifact") {
+    const artifactId = stringValue(candidate.artifactId);
+    return artifactId ? { type: "artifact", artifactId } : void 0;
+  }
+  if (candidate.type === "browser") {
+    const serviceId = stringValue(candidate.serviceId);
+    const url = stringValue(candidate.url);
+    return serviceId || url ? { type: "browser", serviceId, url } : void 0;
+  }
+  if (candidate.type === "url") {
+    const url = stringValue(candidate.url);
+    return url ? { type: "url", url } : void 0;
+  }
+  return void 0;
+}
+function isSourceKind(value) {
+  return value === "attachment" || value === "code" || value === "quote" || value === "image" || value === "web_page" || value === "file_element" || value === "knowledge" || value === "skill" || value === "plugin" || value === "sub_agent";
+}
+function contributionFromPart(part) {
+  if (part.type !== "component" || !isObject(part.data)) return null;
+  const data = part.data;
+  const direct = normalizeTaskSummaryContribution(data.taskSummary);
+  if (direct) return direct;
+  if (!isObject(data._meta)) return null;
+  return normalizeTaskSummaryContribution(
+    data._meta["xpertai/taskSummary"]
+  );
+}
+function extractPlan(message) {
+  const match = PLAN_PATTERN.exec(messageText(message.content));
+  const markdown = match?.[1]?.trim();
+  if (!markdown) return void 0;
+  const title = markdown.split(/\r?\n/).map((line) => line.replace(/^#{1,6}\s+/, "").trim()).find(Boolean);
+  const excerpt = markdown.replace(/\s+/g, " ").trim();
+  return {
+    title: title ?? "Plan",
+    excerpt: excerpt.length <= 160 ? excerpt : `${excerpt.slice(0, 157).trimEnd()}...`,
+    messageId: message.id,
+    updatedAt: message.updatedAt ?? message.createdAt
+  };
+}
+function artifactKind(value) {
+  switch (value) {
+    case "file":
+    case "image":
+    case "document":
+    case "spreadsheet":
+    case "presentation":
+    case "site":
+    case "url":
+    case "mcp_app":
+      return value;
+    case "html":
+      return "site";
+    case "markdown":
+    case "pdf":
+      return "document";
+    case "pptx":
+      return "presentation";
+    default:
+      return null;
+  }
+}
+function knownPartOutputs(part, message) {
+  const updatedAt = message.updatedAt ?? message.createdAt;
+  if (part.type === "image_url") {
+    const url = stringValue(part.image_url) ?? (isObject(part.image_url) && "url" in part.image_url ? stringValue(part.image_url.url) : void 0);
+    return url ? [
+      {
+        id: `image:${url}`,
+        kind: "image",
+        title: stringValue(part.title) ?? "Image",
+        resource: { type: "url", url },
+        messageId: message.id,
+        updatedAt
+      }
+    ] : [];
+  }
+  if (part.type === "iframe") {
+    const url = stringValue(part.url) ?? (isObject(part.data) ? stringValue(part.data.url) : void 0);
+    return url ? [
+      {
+        id: `url:${url}`,
+        kind: "url",
+        title: stringValue(part.title) ?? url,
+        resource: { type: "url", url },
+        messageId: message.id,
+        updatedAt
+      }
+    ] : [];
+  }
+  if (part.type !== "component" || !isObject(part.data)) return [];
+  const data = part.data;
+  const outputs = [...contributionFromPart(part)?.outputs ?? []];
+  if (data.type === "McpApp") {
+    outputs.push({
+      id: `mcp-app:${stringValue(part.id) ?? message.id ?? "message"}`,
+      kind: "mcp_app",
+      title: stringValue(data.title) ?? "MCP App",
+      resource: message.id ? { type: "message", messageId: message.id } : void 0,
+      messageId: message.id,
+      updatedAt
+    });
+  }
+  if (isObject(data.artifact)) {
+    const artifact = data.artifact;
+    const artifactId = stringValue(artifact.artifactId) ?? stringValue(artifact.id);
+    const workspacePath = stringValue(artifact.workspacePath);
+    const kind = artifactKind(artifact.kind) ?? "file";
+    const id = artifactId ?? stringValue(artifact.fileAssetId) ?? workspacePath;
+    if (kind && id && (artifactId || workspacePath)) {
+      outputs.push({
+        id: `artifact:${id}`,
+        kind,
+        title: stringValue(artifact.title) ?? id,
+        description: stringValue(artifact.description),
+        resource: artifactId ? { type: "artifact", artifactId } : {
+          type: "workspace_file",
+          workspacePath,
+          fileAssetId: stringValue(artifact.fileAssetId),
+          storageFileId: stringValue(artifact.storageFileId)
+        },
+        messageId: message.id,
+        updatedAt
+      });
+    }
+  }
+  for (const value of [data.artifactLink, data.file]) {
+    if (!isObject(value)) continue;
+    const artifact = value;
+    const artifactId = stringValue(artifact.artifactId) ?? stringValue(artifact.id);
+    const workspacePath = stringValue(artifact.workspacePath);
+    const id = artifactId ?? stringValue(artifact.fileAssetId) ?? workspacePath;
+    if (!id || !artifactId && !workspacePath) continue;
+    outputs.push({
+      id: `artifact:${id}`,
+      kind: artifactKind(artifact.kind) ?? "file",
+      title: stringValue(artifact.title) ?? id,
+      description: stringValue(artifact.description),
+      resource: artifactId ? { type: "artifact", artifactId } : {
+        type: "workspace_file",
+        workspacePath,
+        fileAssetId: stringValue(artifact.fileAssetId),
+        storageFileId: stringValue(artifact.storageFileId)
+      },
+      messageId: message.id,
+      updatedAt
+    });
+  }
+  return outputs;
+}
+function sourceFromReference(reference, message) {
+  const updatedAt = message.updatedAt ?? message.createdAt;
+  const common = {
+    id: reference.id ?? `${reference.type}:${reference.text}`,
+    title: reference.label?.trim() || reference.text.trim().slice(0, 80),
+    messageId: message.id,
+    updatedAt
+  };
+  if (reference.type === "code") {
+    return {
+      ...common,
+      kind: "code",
+      title: reference.label ?? reference.path,
+      description: `${reference.path}:${reference.startLine}-${reference.endLine}`,
+      resource: message.id ? { type: "message", messageId: message.id } : void 0
+    };
+  }
+  if (reference.type === "image") {
+    return {
+      ...common,
+      kind: "image",
+      title: reference.name ?? common.title,
+      resource: reference.url ? { type: "url", url: reference.url } : void 0
+    };
+  }
+  if (reference.type === "element") {
+    return {
+      ...common,
+      kind: "web_page",
+      title: reference.pageTitle ?? reference.pageUrl,
+      description: reference.pageUrl,
+      resource: {
+        type: "browser",
+        serviceId: reference.serviceId,
+        url: reference.pageUrl
+      }
+    };
+  }
+  if (reference.type === "file_element") {
+    return {
+      ...common,
+      kind: "file_element",
+      title: reference.documentTitle ?? reference.filePath,
+      description: reference.filePath,
+      resource: { type: "workspace_file", workspacePath: reference.filePath }
+    };
+  }
+  return { ...common, kind: "quote", description: reference.source };
+}
+function fileSources(files, message) {
+  return (files ?? []).flatMap((file) => {
+    const id = stringValue(file.fileAssetId) ?? stringValue(file.id) ?? stringValue(file.storageFileId);
+    const title = stringValue(file.originalName) ?? stringValue(file.name) ?? stringValue(file.fileName);
+    if (!id || !title) return [];
+    const workspacePath = stringValue(file.workspacePath);
+    return [
+      {
+        id: `attachment:${id}`,
+        kind: "attachment",
+        title,
+        resource: workspacePath ? {
+          type: "workspace_file",
+          workspacePath,
+          fileAssetId: stringValue(file.fileAssetId) ?? stringValue(file.id),
+          storageFileId: stringValue(file.storageFileId)
+        } : message.id ? { type: "message", messageId: message.id } : void 0,
+        messageId: message.id,
+        updatedAt: message.updatedAt ?? message.createdAt
+      }
+    ];
+  });
+}
+function capabilitySources(message) {
+  const selection = message.runtimeCapabilities;
+  if (!selection) return [];
+  const updatedAt = message.updatedAt ?? message.createdAt;
+  const common = { messageId: message.id, updatedAt };
+  return [
+    ...selection.skills.ids.map((id) => ({
+      ...common,
+      id: `skill:${id}`,
+      kind: "skill",
+      title: id
+    })),
+    ...selection.plugins.nodeKeys.map((id) => ({
+      ...common,
+      id: `plugin:${id}`,
+      kind: "plugin",
+      title: id
+    }))
+  ];
+}
+function collectLiveTaskSummary({
+  messages,
+  goal,
+  todos,
+  pending,
+  running,
+  agentNames
+}) {
+  const contributions = messages.flatMap((message) => [
+    ...message.taskSummary?.version === 1 ? [message.taskSummary] : [],
+    ...contentParts(message.content).flatMap(
+      (part) => contributionFromPart(part) ?? []
+    )
+  ]);
+  const messagePlans = messages.flatMap(
+    (message) => extractPlan(message) ?? []
+  );
+  const agentRuns = messages.flatMap(
+    (message) => (message.agentRuns ?? []).map((run) => ({
+      id: run.id,
+      parentId: run.parentId,
+      level: agentRunLevel(run, messages),
+      agentKey: run.agentKey,
+      title: (run.agentKey ? agentNames?.get(run.agentKey) : void 0) ?? run.title ?? run.xpertName ?? run.agentKey ?? "Agent",
+      status: taskSummaryAgentStatus(run.status),
+      elapsedTime: run.elapsedTime,
+      error: typeof run.error === "string" ? run.error : void 0,
+      messageId: message.id,
+      updatedAt: run.updatedAt ?? run.endedAt ?? run.startedAt ?? message.updatedAt
+    }))
+  );
+  return {
+    goal,
+    plan: newest([
+      ...contributions.flatMap((item) => item.plan ?? []),
+      ...messagePlans
+    ]),
+    todos: todos ? {
+      componentId: todos.componentId,
+      title: todos.title,
+      items: todos.items,
+      updatedAt: todos.endDate ?? todos.createdDate
+    } : newest(contributions.flatMap((item) => item.todos ?? [])),
+    outputs: mergeLatest([
+      ...contributions.flatMap((item) => item.outputs ?? []),
+      ...messages.flatMap(
+        (message) => contentParts(message.content).flatMap(
+          (part) => knownPartOutputs(part, message)
+        )
+      )
+    ]),
+    sources: mergeLatest([
+      ...contributions.flatMap((item) => item.sources ?? []).filter((source) => source.kind !== "sub_agent"),
+      ...messages.flatMap((message) => [
+        ...(message.references ?? []).map(
+          (reference) => sourceFromReference(reference, message)
+        ),
+        ...fileSources(message.fileAssets, message),
+        ...fileSources(message.attachments, message),
+        ...capabilitySources(message)
+      ])
+    ]),
+    agents: mergeAgents(agentRuns),
+    pending: pending ?? [],
+    running: running ?? []
+  };
+}
+function mergeTaskSummary(history, live, historySections) {
+  const outputs = mergeLatest([
+    ...historySections?.outputs ?? history?.outputs.items ?? [],
+    ...live.outputs
+  ]);
+  const sources = mergeLatest([
+    ...historySections?.sources ?? history?.sources.items ?? [],
+    ...live.sources
+  ]);
+  const agents = mergeAgents([
+    ...historySections?.agents ?? history?.agents.items ?? [],
+    ...live.agents
+  ]);
+  const pending = mergePending([
+    ...historySections?.pending ?? history?.pending.items ?? [],
+    ...live.pending
+  ]);
+  return {
+    goal: live.goal ?? history?.task.goal,
+    plan: newest(
+      [history?.task.plan, live.plan].filter(
+        (item) => Boolean(item)
+      )
+    ),
+    todos: newest(
+      [history?.task.todos, live.todos].filter(
+        (item) => Boolean(item)
+      )
+    ),
+    outputs,
+    sources,
+    agents,
+    pending,
+    running: live.running,
+    totals: {
+      outputs: Math.max(history?.outputs.total ?? 0, outputs.length),
+      sources: Math.max(history?.sources.total ?? 0, sources.length),
+      agents: agents.length,
+      pending: Math.max(history?.pending.total ?? 0, pending.length)
+    }
+  };
+}
+function mergeLatest(items) {
+  const byId = /* @__PURE__ */ new Map();
+  items.forEach((item) => {
+    const current = byId.get(item.id);
+    if (!current || timestamp(item.updatedAt) >= timestamp(current.updatedAt)) {
+      byId.set(item.id, item);
+    }
+  });
+  return [...byId.values()].sort(
+    (left, right) => timestamp(right.updatedAt) - timestamp(left.updatedAt)
+  );
+}
+function mergeAgents(items) {
+  const byAgent = /* @__PURE__ */ new Map();
+  items.forEach((item) => {
+    const key = item.agentKey?.trim() || item.id;
+    const current = byAgent.get(key);
+    if (!current || timestamp(item.updatedAt) >= timestamp(current.updatedAt)) {
+      byAgent.set(key, item);
+    }
+  });
+  return [...byAgent.values()].sort(
+    (left, right) => timestamp(right.updatedAt) - timestamp(left.updatedAt)
+  );
+}
+function mergePending(items) {
+  const byId = new Map(items.map((item) => [item.id, item]));
+  return [...byId.values()].sort(
+    (left, right) => timestamp(right.createdAt) - timestamp(left.createdAt)
+  );
+}
+function taskSummaryAgentStatus(status) {
+  switch (status) {
+    case "running":
+    case "success":
+    case "error":
+    case "pending":
+    case "timeout":
+    case "interrupted":
+      return status;
+    default:
+      return void 0;
+  }
+}
+function newest(items) {
+  return [...items].sort(
+    (left, right) => timestamp(right.updatedAt) - timestamp(left.updatedAt)
+  )[0];
+}
+function agentRunLevel(run, messages) {
+  const byId = new Map(
+    messages.flatMap(
+      (message) => (message.agentRuns ?? []).map((item) => [item.id, item])
+    )
+  );
+  let parentId = run.parentId;
+  let level = 0;
+  const visited = /* @__PURE__ */ new Set();
+  while (parentId && !visited.has(parentId)) {
+    visited.add(parentId);
+    level += 1;
+    parentId = byId.get(parentId)?.parentId;
+  }
+  return level;
+}
+
 // src/providers/Stream.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var StreamContext = createContext2(void 0);
@@ -1714,6 +2369,39 @@ var en_US_default = {
       failed: "Failed to render diagram"
     }
   },
+  taskSummary: {
+    title: "Task summary",
+    description: "Current task, outputs, sources, running services, agent activity, and pending requests.",
+    open: "Open task summary",
+    empty: "Task activity will appear here.",
+    historyError: "Some historical summary data failed to load. Live activity is still available.",
+    retry: "Retry",
+    viewAll: "View all",
+    loadMore: "Load more",
+    collapse: "Show less",
+    createOutput: "Create files or sites",
+    addOutput: "Create output",
+    addSource: "Add source",
+    sections: {
+      task: "Task",
+      outputs: "Outputs",
+      sources: "Sources",
+      running: "Running",
+      agents: "Agent activity",
+      pending: "Pending"
+    },
+    status: {
+      pending: "Pending",
+      in_progress: "In progress",
+      completed: "Completed"
+    },
+    pending: {
+      approval: "Approval required",
+      userInput: "Input required",
+      followUp: "Pending follow-up message",
+      steer: "Pending steering message"
+    }
+  },
   thread: {
     errorToast: "An error occurred. Please try again.",
     errorLabel: "Error:",
@@ -2122,6 +2810,39 @@ var zh_CN_default = {
       failed: "\u56FE\u8868\u6E32\u67D3\u5931\u8D25"
     }
   },
+  taskSummary: {
+    title: "\u4EFB\u52A1\u6458\u8981",
+    description: "\u5F53\u524D\u4EFB\u52A1\u3001\u4EA7\u51FA\u3001\u6765\u6E90\u3001\u8FD0\u884C\u4E2D\u670D\u52A1\u3001Agent \u6D3B\u52A8\u548C\u5F85\u5904\u7406\u8BF7\u6C42\u3002",
+    open: "\u6253\u5F00\u4EFB\u52A1\u6458\u8981",
+    empty: "\u4EFB\u52A1\u6D3B\u52A8\u4F1A\u663E\u793A\u5728\u8FD9\u91CC\u3002",
+    historyError: "\u90E8\u5206\u5386\u53F2\u6458\u8981\u52A0\u8F7D\u5931\u8D25\uFF0C\u5B9E\u65F6\u6D3B\u52A8\u4ECD\u53EF\u4F7F\u7528\u3002",
+    retry: "\u91CD\u8BD5",
+    viewAll: "\u67E5\u770B\u5168\u90E8",
+    loadMore: "\u52A0\u8F7D\u66F4\u591A",
+    collapse: "\u6536\u8D77",
+    createOutput: "\u521B\u5EFA\u6587\u4EF6\u6216\u7AD9\u70B9",
+    addOutput: "\u521B\u5EFA\u4EA7\u51FA",
+    addSource: "\u6DFB\u52A0\u6765\u6E90",
+    sections: {
+      task: "\u4EFB\u52A1",
+      outputs: "\u4EA7\u51FA",
+      sources: "\u6765\u6E90",
+      running: "\u8FD0\u884C\u4E2D",
+      agents: "Agent \u6D3B\u52A8",
+      pending: "\u5F85\u5904\u7406"
+    },
+    status: {
+      pending: "\u5F85\u5904\u7406",
+      in_progress: "\u8FDB\u884C\u4E2D",
+      completed: "\u5DF2\u5B8C\u6210"
+    },
+    pending: {
+      approval: "\u9700\u8981\u5BA1\u6279",
+      userInput: "\u9700\u8981\u8F93\u5165",
+      followUp: "\u7B49\u5F85\u53D1\u9001\u7684\u8DDF\u8FDB\u6D88\u606F",
+      steer: "\u7B49\u5F85\u53D1\u9001\u7684\u5F15\u5BFC\u6D88\u606F"
+    }
+  },
   thread: {
     errorToast: "\u53D1\u751F\u9519\u8BEF\uFF0C\u8BF7\u91CD\u8BD5\u3002",
     errorLabel: "\u9519\u8BEF\uFF1A",
@@ -4888,8 +5609,8 @@ function JsonTreeNode({
   depth = 0
 }) {
   const isArray = Array.isArray(value);
-  const isObject = isJsonObjectValue(value);
-  const isExpandable = isArray || isObject;
+  const isObject2 = isJsonObjectValue(value);
+  const isExpandable = isArray || isObject2;
   const [isExpanded, setIsExpanded] = React18.useState(depth < 2);
   if (!isExpandable) {
     return /* @__PURE__ */ jsxs13("div", { className: "flex min-w-0 gap-2 leading-6", children: [
@@ -5284,7 +6005,7 @@ function HITLApprovalPanel({
   }
   const argsText = currentDraft.argsText ?? formatArgs(currentAction.args);
   const argsJsonValue = toJsonValue(currentAction.args) ?? {};
-  const messageText = currentDraft.message ?? "";
+  const messageText2 = currentDraft.message ?? "";
   const isCurrentInvalid = validation.error?.actionIndex === currentActionIndex;
   return /* @__PURE__ */ jsxs14(
     "section",
@@ -5446,7 +6167,7 @@ function HITLApprovalPanel({
             /* @__PURE__ */ jsx22(
               "textarea",
               {
-                value: messageText,
+                value: messageText2,
                 onChange: (event) => updateCurrentDraft({
                   ...currentDraft,
                   message: event.target.value
@@ -7880,14 +8601,14 @@ function isComponentContent(content) {
 }
 function parseDateValue(value) {
   if (value instanceof Date) {
-    const timestamp2 = value.getTime();
-    return Number.isNaN(timestamp2) ? null : timestamp2;
+    const timestamp3 = value.getTime();
+    return Number.isNaN(timestamp3) ? null : timestamp3;
   }
   if (typeof value !== "string") {
     return null;
   }
-  const timestamp = Date.parse(value);
-  return Number.isNaN(timestamp) ? null : timestamp;
+  const timestamp2 = Date.parse(value);
+  return Number.isNaN(timestamp2) ? null : timestamp2;
 }
 function readContentTitle(content) {
   if (typeof content === "string") return void 0;
@@ -10706,14 +11427,14 @@ function getToolStepData(content) {
 }
 function parseStepDate(value) {
   if (value instanceof Date) {
-    const timestamp2 = value.getTime();
-    return Number.isNaN(timestamp2) ? null : timestamp2;
+    const timestamp3 = value.getTime();
+    return Number.isNaN(timestamp3) ? null : timestamp3;
   }
   if (typeof value !== "string") {
     return null;
   }
-  const timestamp = Date.parse(value);
-  return Number.isNaN(timestamp) ? null : timestamp;
+  const timestamp2 = Date.parse(value);
+  return Number.isNaN(timestamp2) ? null : timestamp2;
 }
 function isThreadKnownIdle(isThreadRunning) {
   return isThreadRunning === false;
@@ -12986,14 +13707,14 @@ function MemoryBlock({ content }) {
 }
 function parseStepDate2(value) {
   if (value instanceof Date) {
-    const timestamp2 = value.getTime();
-    return Number.isNaN(timestamp2) ? null : timestamp2;
+    const timestamp3 = value.getTime();
+    return Number.isNaN(timestamp3) ? null : timestamp3;
   }
   if (typeof value !== "string") {
     return null;
   }
-  const timestamp = Date.parse(value);
-  return Number.isNaN(timestamp) ? null : timestamp;
+  const timestamp2 = Date.parse(value);
+  return Number.isNaN(timestamp2) ? null : timestamp2;
 }
 function formatStepDuration3(durationMs) {
   if (durationMs < 1e3) {
@@ -13772,9 +14493,9 @@ var getThreadTitle = (threadRecord) => {
 };
 var toDate = (value) => {
   if (!value) return void 0;
-  const timestamp = Date.parse(value);
-  if (Number.isNaN(timestamp)) return void 0;
-  return new Date(timestamp);
+  const timestamp2 = Date.parse(value);
+  if (Number.isNaN(timestamp2)) return void 0;
+  return new Date(timestamp2);
 };
 var getErrorMessage2 = (error) => {
   if (!error) return void 0;
@@ -16533,18 +17254,487 @@ function buildMessageNavigationItems(messages, options) {
   return items;
 }
 
-// src/components/chat.tsx
-import { Fragment as Fragment9, jsx as jsx57, jsxs as jsxs39 } from "react/jsx-runtime";
-var defaultApiUrl2 = import.meta.env.VITE_XPERTAI_API_URL;
-var COMPOSER_INPUT_MAX_HEIGHT = 128;
-var LONG_TEXT_REFERENCE_THRESHOLD = 5e3;
-var GOAL_RUN_INPUT = "Continue working toward the active goal.";
-function isGoalAdapter(value) {
-  return Boolean(value) && typeof value === "object" && typeof value.getGoal === "function" && typeof value.setGoal === "function" && typeof value.updateGoal === "function" && typeof value.clearGoal === "function";
+// src/hooks/useTaskSummary.ts
+import * as React52 from "react";
+function useTaskSummary({
+  enabled,
+  conversationId,
+  client,
+  live
+}) {
+  const [loaded, setLoaded] = React52.useState(null);
+  const [historySections, setHistorySections] = React52.useState({});
+  const [historySectionsConversationId, setHistorySectionsConversationId] = React52.useState(null);
+  const [loadingSections, setLoadingSections] = React52.useState({});
+  const [error, setError] = React52.useState(null);
+  const [retryVersion, setRetryVersion] = React52.useState(0);
+  const requestVersionRef = React52.useRef(0);
+  const conversationIdRef = React52.useRef(conversationId);
+  const sectionControllersRef = React52.useRef(
+    /* @__PURE__ */ new Map()
+  );
+  conversationIdRef.current = conversationId;
+  const abortSectionRequests = React52.useCallback(() => {
+    sectionControllersRef.current.forEach((controller) => controller.abort());
+    sectionControllersRef.current.clear();
+  }, []);
+  React52.useEffect(() => {
+    abortSectionRequests();
+    setHistorySections({});
+    setHistorySectionsConversationId(conversationId);
+    setLoadingSections({});
+    setError(null);
+    if (!enabled || !conversationId) {
+      setLoaded(null);
+      setHistorySectionsConversationId(null);
+      return;
+    }
+    const controller = new AbortController();
+    const requestVersion = ++requestVersionRef.current;
+    client.conversations.getTaskSummary(conversationId, { signal: controller.signal }).then((snapshot2) => {
+      if (requestVersionRef.current !== requestVersion) return;
+      setLoaded({ conversationId, snapshot: snapshot2 });
+    }).catch((nextError) => {
+      if (controller.signal.aborted || requestVersionRef.current !== requestVersion)
+        return;
+      setLoaded(null);
+      setError(nextError);
+    });
+    return () => {
+      controller.abort();
+      abortSectionRequests();
+      requestVersionRef.current += 1;
+    };
+  }, [abortSectionRequests, client, conversationId, enabled, retryVersion]);
+  const snapshot = loaded?.conversationId === conversationId ? loaded.snapshot : null;
+  const activeHistorySections = React52.useMemo(
+    () => historySectionsConversationId === conversationId ? historySections : {},
+    [conversationId, historySections, historySectionsConversationId]
+  );
+  const loadSection = React52.useCallback(
+    async (section) => {
+      if (!enabled || !conversationId || loadingSections[section]) {
+        return;
+      }
+      const current = activeHistorySections[section]?.length ?? 0;
+      const controller = new AbortController();
+      sectionControllersRef.current.get(section)?.abort();
+      sectionControllersRef.current.set(section, controller);
+      setLoadingSections((state) => ({ ...state, [section]: true }));
+      try {
+        const page = await client.conversations.listTaskSummaryItems(
+          conversationId,
+          section,
+          { offset: current, limit: 50, signal: controller.signal }
+        );
+        if (conversationIdRef.current !== conversationId) return;
+        setHistorySections(
+          (state) => ({
+            ...state,
+            [section]: [...state[section] ?? [], ...page.items]
+          })
+        );
+      } catch (nextError) {
+        if (!controller.signal.aborted) {
+          setError(nextError);
+        }
+      } finally {
+        if (sectionControllersRef.current.get(section) === controller) {
+          sectionControllersRef.current.delete(section);
+        }
+        if (conversationIdRef.current === conversationId) {
+          setLoadingSections((state) => ({ ...state, [section]: false }));
+        }
+      }
+    },
+    [
+      activeHistorySections,
+      client,
+      conversationId,
+      enabled,
+      loadingSections
+    ]
+  );
+  return {
+    summary: mergeTaskSummary(snapshot, live, activeHistorySections),
+    historyError: error,
+    retryHistory: () => setRetryVersion((version) => version + 1),
+    loadSection,
+    loadingSections,
+    loadedSectionCounts: {
+      outputs: activeHistorySections.outputs?.length ?? 0,
+      sources: activeHistorySections.sources?.length ?? 0,
+      agents: activeHistorySections.agents?.length ?? 0,
+      pending: activeHistorySections.pending?.length ?? 0
+    }
+  };
 }
-function formatGoalElapsed(seconds) {
-  if (seconds < 60) {
-    return `${seconds}s`;
+
+// src/components/task-summary/TaskSummary.tsx
+import * as React53 from "react";
+import {
+  Bot as Bot4,
+  BookOpen as BookOpen3,
+  CheckCircle2 as CheckCircle25,
+  CircleEllipsis,
+  ExternalLink,
+  FileOutput,
+  ListChecks as ListChecks3,
+  Loader2 as Loader29,
+  PlayCircle,
+  Plus as Plus2,
+  RotateCcw,
+  Target as Target2
+} from "lucide-react";
+import { jsx as jsx57, jsxs as jsxs39 } from "react/jsx-runtime";
+var PREVIEW_SIZE = 3;
+function TaskSummaryTrigger({
+  displayMode = "popover",
+  open: controlledOpen,
+  onOpenChange,
+  ...props
+}) {
+  const { t } = useChatkitTranslation();
+  const [uncontrolledOpen, setUncontrolledOpen] = React53.useState(false);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = React53.useCallback(
+    (nextOpen) => {
+      if (controlledOpen === void 0) {
+        setUncontrolledOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+    },
+    [controlledOpen, onOpenChange]
+  );
+  const triggerButton = /* @__PURE__ */ jsx57(
+    "button",
+    {
+      type: "button",
+      className: "flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors duration-150 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+      "aria-label": t("taskSummary.open"),
+      "aria-expanded": open,
+      onClick: displayMode === "docked" ? () => setOpen(!open) : void 0,
+      children: /* @__PURE__ */ jsx57(ListChecks3, { size: 16 })
+    }
+  );
+  if (displayMode === "docked") {
+    return /* @__PURE__ */ jsxs39(Tooltip, { children: [
+      /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: triggerButton }),
+      /* @__PURE__ */ jsx57(TooltipContent, { side: "bottom", children: t("taskSummary.open") })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs39(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs39(Tooltip, { children: [
+      /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx57(PopoverTrigger, { asChild: true, children: triggerButton }) }),
+      /* @__PURE__ */ jsx57(TooltipContent, { side: "bottom", children: t("taskSummary.open") })
+    ] }),
+    /* @__PURE__ */ jsx57(
+      PopoverContent,
+      {
+        align: "end",
+        sideOffset: 8,
+        className: "w-[min(20rem,calc(100vw-2rem))] max-h-[min(44rem,calc(100vh-5rem))] overflow-y-auto rounded-2xl border-border/70 bg-popover p-0 shadow-lg",
+        "aria-label": t("taskSummary.title"),
+        children: /* @__PURE__ */ jsx57(TaskSummaryContent, { ...props })
+      }
+    )
+  ] });
+}
+function TaskSummaryPanel({
+  className,
+  ...props
+}) {
+  const { t } = useChatkitTranslation();
+  return /* @__PURE__ */ jsx57(
+    "aside",
+    {
+      "data-slot": "task-summary-panel",
+      "aria-label": t("taskSummary.title"),
+      className: cn(
+        "h-fit max-h-full overflow-y-auto rounded-2xl border border-border/70 bg-popover text-popover-foreground shadow-lg",
+        className
+      ),
+      children: /* @__PURE__ */ jsx57(TaskSummaryContent, { ...props })
+    }
+  );
+}
+function TaskSummaryContent({
+  summary,
+  historyError,
+  loadingSections = {},
+  loadedSectionCounts = { outputs: 0, sources: 0, agents: 0, pending: 0 },
+  onRetryHistory,
+  onLoadSection,
+  onNavigateMessage,
+  onFocusComposer,
+  onOpenResource
+}) {
+  const { t } = useChatkitTranslation();
+  const [expanded, setExpanded] = React53.useState({});
+  const hasTask = Boolean(
+    summary.goal || summary.plan || summary.todos?.items.length
+  );
+  const toggleSection = (section) => {
+    if (expanded[section]) {
+      setExpanded((state) => ({ ...state, [section]: false }));
+      return;
+    }
+    setExpanded((state) => ({ ...state, [section]: true }));
+    if (loadedSectionCounts[section] === 0) {
+      void onLoadSection(section);
+    }
+  };
+  const sectionItems = (section, items) => expanded[section] ? items : items.slice(0, PREVIEW_SIZE);
+  const openSummaryItem = (resource, messageId, title) => {
+    if (resource?.type === "message") {
+      onNavigateMessage(resource.messageId);
+      return;
+    }
+    if (resource) {
+      onOpenResource(resource, messageId, title);
+      return;
+    }
+    if (messageId) {
+      onNavigateMessage(messageId);
+    }
+  };
+  const sectionAction = (section, total2) => {
+    if (total2 <= PREVIEW_SIZE && !expanded[section]) return null;
+    const loading = loadingSections[section];
+    const canLoadMore = Boolean(expanded[section]) && loadedSectionCounts[section] < total2;
+    return /* @__PURE__ */ jsxs39(
+      "button",
+      {
+        type: "button",
+        className: "mt-1 flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
+        disabled: loading,
+        onClick: () => canLoadMore ? void onLoadSection(section) : toggleSection(section),
+        children: [
+          loading && /* @__PURE__ */ jsx57(Loader29, { className: "size-3 animate-spin" }),
+          !loading && /* @__PURE__ */ jsx57(ListChecks3, { className: "size-3.5" }),
+          canLoadMore ? t("taskSummary.loadMore") : expanded[section] ? t("taskSummary.collapse") : t("taskSummary.viewAll", { count: total2 })
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs39("div", { className: "divide-y divide-border/70", children: [
+    Boolean(historyError) && /* @__PURE__ */ jsxs39("div", { className: "m-3 flex items-start justify-between gap-3 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive", children: [
+      /* @__PURE__ */ jsx57("span", { children: t("taskSummary.historyError") }),
+      /* @__PURE__ */ jsxs39(
+        "button",
+        {
+          type: "button",
+          className: "inline-flex shrink-0 items-center gap-1 font-medium hover:underline",
+          onClick: onRetryHistory,
+          children: [
+            /* @__PURE__ */ jsx57(RotateCcw, { className: "size-3" }),
+            t("taskSummary.retry")
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs39(
+      SummarySection,
+      {
+        title: t("taskSummary.sections.outputs"),
+        actionLabel: t("taskSummary.addOutput"),
+        onAction: onFocusComposer,
+        children: [
+          summary.outputs.length === 0 ? /* @__PURE__ */ jsx57(SummaryPrompt, { onClick: onFocusComposer, children: t("taskSummary.createOutput") }) : sectionItems("outputs", summary.outputs).map((item) => /* @__PURE__ */ jsx57(
+            SummaryButton,
+            {
+              title: item.title,
+              description: item.description ?? item.status,
+              leading: /* @__PURE__ */ jsx57(FileOutput, { className: "size-4" }),
+              trailing: item.resource && item.resource.type !== "message" ? /* @__PURE__ */ jsx57(ExternalLink, { className: "size-3.5" }) : void 0,
+              onClick: () => openSummaryItem(item.resource, item.messageId, item.title)
+            },
+            item.id
+          )),
+          sectionAction("outputs", summary.totals.outputs)
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs39(
+      SummarySection,
+      {
+        title: t("taskSummary.sections.sources"),
+        actionLabel: t("taskSummary.addSource"),
+        onAction: onFocusComposer,
+        children: [
+          sectionItems("sources", summary.sources).map((item) => /* @__PURE__ */ jsx57(
+            SummaryButton,
+            {
+              title: item.title,
+              description: item.description,
+              leading: /* @__PURE__ */ jsx57(BookOpen3, { className: "size-4" }),
+              trailing: item.resource && item.resource.type !== "message" ? /* @__PURE__ */ jsx57(ExternalLink, { className: "size-3.5" }) : void 0,
+              onClick: () => openSummaryItem(item.resource, item.messageId, item.title)
+            },
+            item.id
+          )),
+          sectionAction("sources", summary.totals.sources)
+        ]
+      }
+    ),
+    hasTask && /* @__PURE__ */ jsxs39(SummarySection, { title: t("taskSummary.sections.task"), children: [
+      summary.goal && /* @__PURE__ */ jsx57(
+        SummaryButton,
+        {
+          title: summary.goal.objective,
+          description: summary.goal.status,
+          leading: /* @__PURE__ */ jsx57(Target2, { className: "size-4" }),
+          onClick: onFocusComposer
+        }
+      ),
+      summary.plan && /* @__PURE__ */ jsx57(
+        SummaryButton,
+        {
+          title: summary.plan.title,
+          description: summary.plan.excerpt,
+          leading: /* @__PURE__ */ jsx57(ListChecks3, { className: "size-4" }),
+          onClick: () => summary.plan?.messageId ? onNavigateMessage(summary.plan.messageId) : onFocusComposer()
+        }
+      ),
+      (summary.todos?.items ?? []).slice(0, PREVIEW_SIZE).map((todo) => /* @__PURE__ */ jsx57(
+        SummaryButton,
+        {
+          title: todo.content,
+          description: t(`taskSummary.status.${todo.status}`),
+          leading: todo.status === "completed" ? /* @__PURE__ */ jsx57(CheckCircle25, { className: "size-4 text-muted-foreground" }) : /* @__PURE__ */ jsx57(CircleEllipsis, { className: "size-4 text-muted-foreground" }),
+          onClick: () => summary.todos?.messageId ? onNavigateMessage(summary.todos.messageId) : onFocusComposer()
+        },
+        todo.id
+      ))
+    ] }),
+    summary.running.length > 0 && /* @__PURE__ */ jsx57(SummarySection, { title: t("taskSummary.sections.running"), children: summary.running.slice(0, PREVIEW_SIZE).map((item) => /* @__PURE__ */ jsx57(
+      SummaryButton,
+      {
+        title: item.title,
+        description: item.description ?? item.status,
+        leading: /* @__PURE__ */ jsx57(PlayCircle, { className: "size-4" }),
+        trailing: item.resource ? /* @__PURE__ */ jsx57(ExternalLink, { className: "size-3.5" }) : void 0,
+        onClick: () => item.resource && onOpenResource(item.resource, void 0, item.title)
+      },
+      item.id
+    )) }),
+    summary.agents.length > 0 && /* @__PURE__ */ jsxs39(SummarySection, { title: t("taskSummary.sections.agents"), children: [
+      sectionItems("agents", summary.agents).map((item) => /* @__PURE__ */ jsx57(
+        SummaryButton,
+        {
+          title: item.title,
+          description: [item.status, formatElapsed(item.elapsedTime)].filter(Boolean).join(" \xB7 "),
+          leading: /* @__PURE__ */ jsx57(Bot4, { className: "size-4" }),
+          onClick: () => item.messageId ? onNavigateMessage(item.messageId) : onFocusComposer()
+        },
+        item.id
+      )),
+      sectionAction("agents", summary.totals.agents)
+    ] }),
+    summary.pending.length > 0 && /* @__PURE__ */ jsxs39(SummarySection, { title: t("taskSummary.sections.pending"), children: [
+      sectionItems("pending", summary.pending).map((item) => /* @__PURE__ */ jsx57(
+        SummaryButton,
+        {
+          title: item.title,
+          description: item.description,
+          leading: /* @__PURE__ */ jsx57(CircleEllipsis, { className: "size-4" }),
+          onClick: () => item.messageId ? onNavigateMessage(item.messageId) : onFocusComposer()
+        },
+        item.id
+      )),
+      sectionAction("pending", summary.totals.pending)
+    ] })
+  ] });
+}
+function SummarySection({
+  title,
+  actionLabel,
+  onAction,
+  children
+}) {
+  return /* @__PURE__ */ jsxs39("section", { "aria-label": title, className: "px-4 py-3", children: [
+    /* @__PURE__ */ jsxs39("div", { className: "flex min-h-7 items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx57("h3", { className: "text-sm font-medium text-muted-foreground", children: title }),
+      onAction && actionLabel && /* @__PURE__ */ jsx57(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon-xs",
+          className: "size-7 rounded-lg bg-muted/60 text-muted-foreground hover:bg-muted hover:text-foreground",
+          "aria-label": actionLabel,
+          onClick: onAction,
+          children: /* @__PURE__ */ jsx57(Plus2, { className: "size-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx57("div", { className: "mt-1 space-y-0.5", children })
+  ] });
+}
+function SummaryPrompt({
+  children,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx57(
+    "button",
+    {
+      type: "button",
+      className: "block rounded-md py-1 text-left text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      onClick,
+      children
+    }
+  );
+}
+function SummaryButton({
+  title,
+  description,
+  leading,
+  trailing,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs39(
+    "button",
+    {
+      type: "button",
+      disabled: !onClick,
+      onClick,
+      className: cn(
+        "flex w-full min-w-0 items-start gap-2.5 rounded-lg px-2 py-1.5 text-left transition-colors",
+        onClick && "hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        !onClick && "cursor-default"
+      ),
+      children: [
+        leading && /* @__PURE__ */ jsx57("span", { className: "mt-0.5 shrink-0 text-muted-foreground", children: leading }),
+        /* @__PURE__ */ jsxs39("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx57("span", { className: "block truncate text-sm font-medium leading-5 text-foreground", children: title }),
+          description && /* @__PURE__ */ jsx57("span", { className: "mt-0.5 block line-clamp-2 text-xs text-muted-foreground", children: description })
+        ] }),
+        trailing && /* @__PURE__ */ jsx57("span", { className: "mt-0.5 text-muted-foreground", children: trailing })
+      ]
+    }
+  );
+}
+function formatElapsed(value) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return "";
+  if (value < 1e3) return `${Math.round(value)}ms`;
+  return `${(value / 1e3).toFixed(1)}s`;
+}
+
+// src/components/chat.tsx
+import { Fragment as Fragment9, jsx as jsx58, jsxs as jsxs40 } from "react/jsx-runtime";
+var defaultApiUrl2 = import.meta.env.VITE_XPERTAI_API_URL;
+var COMPOSER_INPUT_MAX_HEIGHT = 128;
+var LONG_TEXT_REFERENCE_THRESHOLD = 5e3;
+var GOAL_RUN_INPUT = "Continue working toward the active goal.";
+var TASK_SUMMARY_PANEL_WIDTH_REM = 20;
+var TASK_SUMMARY_PANEL_EDGE_INSET_REM = 1.25;
+var TASK_SUMMARY_PANEL_SAFE_GAP_REM = 0.75;
+function isGoalAdapter(value) {
+  return Boolean(value) && typeof value === "object" && typeof value.getGoal === "function" && typeof value.setGoal === "function" && typeof value.updateGoal === "function" && typeof value.clearGoal === "function";
+}
+function formatGoalElapsed(seconds) {
+  if (seconds < 60) {
+    return `${seconds}s`;
   }
   const minutes = Math.floor(seconds / 60);
   const remainingSeconds = seconds % 60;
@@ -16638,7 +17828,7 @@ function ReferenceChip({
   const metaLine = getReferenceMetaLine(reference);
   const isComposer = variant === "composer";
   const Icon = reference.type === "quote" ? Quote : reference.type === "image" ? ImageIcon : FileText5;
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs40(
     "div",
     {
       className: cn(
@@ -16647,7 +17837,7 @@ function ReferenceChip({
       ),
       title: getReferenceTitle(reference),
       children: [
-        /* @__PURE__ */ jsx57(
+        /* @__PURE__ */ jsx58(
           Icon,
           {
             size: isComposer ? 14 : 12,
@@ -16657,8 +17847,8 @@ function ReferenceChip({
             )
           }
         ),
-        /* @__PURE__ */ jsxs39("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx57(
+        /* @__PURE__ */ jsxs40("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx58(
             "div",
             {
               className: cn(
@@ -16668,7 +17858,7 @@ function ReferenceChip({
               children: getReferenceLabel(reference)
             }
           ),
-          metaLine && /* @__PURE__ */ jsx57(
+          metaLine && /* @__PURE__ */ jsx58(
             "div",
             {
               className: cn(
@@ -16679,7 +17869,7 @@ function ReferenceChip({
             }
           )
         ] }),
-        onRemove && removeLabel && /* @__PURE__ */ jsx57(
+        onRemove && removeLabel && /* @__PURE__ */ jsx58(
           "button",
           {
             type: "button",
@@ -16690,7 +17880,7 @@ function ReferenceChip({
             ),
             title: removeLabel,
             "aria-label": removeLabel,
-            children: /* @__PURE__ */ jsx57(X7, { size: 12 })
+            children: /* @__PURE__ */ jsx58(X7, { size: 12 })
           }
         )
       ]
@@ -16721,7 +17911,7 @@ function Chat({
     clientSecret: effectiveClientSecret
   });
   const missingConfig = Boolean(missingConfigKind);
-  const missingConfigShortMessage = React52.useMemo(() => {
+  const missingConfigShortMessage = React54.useMemo(() => {
     switch (missingConfigKind) {
       case "apiUrl":
         return t("chat.missingApiUrlShort");
@@ -16733,7 +17923,7 @@ function Chat({
         return t("chat.missingConfigShort");
     }
   }, [missingConfigKind, t]);
-  const missingConfigDetailMessage = React52.useMemo(() => {
+  const missingConfigDetailMessage = React54.useMemo(() => {
     switch (missingConfigKind) {
       case "apiUrl":
         return t("chat.missingApiUrlDetail");
@@ -16745,26 +17935,26 @@ function Chat({
         return t("chat.missingConfigDetail");
     }
   }, [missingConfigKind, t]);
-  const [isHistoryLoading, setIsHistoryLoading] = React52.useState(false);
-  const [historyError, setHistoryError] = React52.useState(null);
-  const [assistantName, setAssistantName] = React52.useState(null);
-  const [assistantAvatar, setAssistantAvatar] = React52.useState(null);
-  const [threadGoal, setThreadGoal] = React52.useState(null);
-  const [goalError, setGoalError] = React52.useState(null);
-  const [isGoalLoading, setIsGoalLoading] = React52.useState(false);
-  const [isGoalPanelOpen, setIsGoalPanelOpen] = React52.useState(false);
-  const [isGoalObjectiveExpanded, setIsGoalObjectiveExpanded] = React52.useState(false);
-  const [goalElapsedStartedAt, setGoalElapsedStartedAt] = React52.useState(null);
+  const [isHistoryLoading, setIsHistoryLoading] = React54.useState(false);
+  const [historyError, setHistoryError] = React54.useState(null);
+  const [assistantName, setAssistantName] = React54.useState(null);
+  const [assistantAvatar, setAssistantAvatar] = React54.useState(null);
+  const [threadGoal, setThreadGoal] = React54.useState(null);
+  const [goalError, setGoalError] = React54.useState(null);
+  const [isGoalLoading, setIsGoalLoading] = React54.useState(false);
+  const [isGoalPanelOpen, setIsGoalPanelOpen] = React54.useState(false);
+  const [isGoalObjectiveExpanded, setIsGoalObjectiveExpanded] = React54.useState(false);
+  const [goalElapsedStartedAt, setGoalElapsedStartedAt] = React54.useState(null);
   const LOADING_DOTS_MIN_DURATION = 800;
   const STREAMING_STATUS_REFRESH_MS = 250;
-  const [showLoadingDots, setShowLoadingDots] = React52.useState(false);
-  const [streamingNow, setStreamingNow] = React52.useState(() => Date.now());
-  const loadingStartTimeRef = React52.useRef(null);
-  const lastStreamOutputAtRef = React52.useRef(null);
-  React52.useEffect(() => {
+  const [showLoadingDots, setShowLoadingDots] = React54.useState(false);
+  const [streamingNow, setStreamingNow] = React54.useState(() => Date.now());
+  const loadingStartTimeRef = React54.useRef(null);
+  const lastStreamOutputAtRef = React54.useRef(null);
+  React54.useEffect(() => {
     setStream(stream);
   }, [setStream, stream]);
-  React52.useEffect(() => {
+  React54.useEffect(() => {
     if (stream.isLoading) {
       if (!loadingStartTimeRef.current) {
         loadingStartTimeRef.current = Date.now();
@@ -16787,7 +17977,7 @@ function Chat({
       }
     }
   }, [stream.isLoading]);
-  React52.useEffect(() => {
+  React54.useEffect(() => {
     if (!stream.isLoading) {
       lastStreamOutputAtRef.current = null;
       setStreamingNow(Date.now());
@@ -16797,7 +17987,7 @@ function Chat({
     lastStreamOutputAtRef.current = now;
     setStreamingNow(now);
   }, [stream.messages, stream.isLoading]);
-  React52.useEffect(() => {
+  React54.useEffect(() => {
     if (!stream.isLoading) {
       return;
     }
@@ -16806,7 +17996,7 @@ function Chat({
     }, STREAMING_STATUS_REFRESH_MS);
     return () => window.clearInterval(timer);
   }, [stream.isLoading]);
-  React52.useEffect(() => {
+  React54.useEffect(() => {
     if (threadGoal?.status === "active" && stream.isLoading) {
       setGoalElapsedStartedAt(Date.now());
       return;
@@ -16818,54 +18008,55 @@ function Chat({
     threadGoal?.id,
     threadGoal?.status
   ]);
-  React52.useEffect(() => {
+  React54.useEffect(() => {
     setIsGoalObjectiveExpanded(false);
   }, [threadGoal?.id]);
-  const [composerParts, setComposerParts] = React52.useState([]);
-  const [renderedComposerParts, setRenderedComposerParts] = React52.useState([]);
-  const [composerDomVersion, setComposerDomVersion] = React52.useState(0);
-  const [selectedTool, setSelectedTool] = React52.useState(
+  const [composerParts, setComposerParts] = React54.useState([]);
+  const [renderedComposerParts, setRenderedComposerParts] = React54.useState([]);
+  const [composerDomVersion, setComposerDomVersion] = React54.useState(0);
+  const [selectedTool, setSelectedTool] = React54.useState(
     null
   );
-  const [planModeEnabled, setPlanModeEnabled] = React52.useState(false);
-  const [petSettingsOpen, setPetSettingsOpen] = React52.useState(false);
-  const [petLocalSettings, setPetLocalSettings] = React52.useState(() => readPetLocalSettings());
-  const [attachmentState, setAttachmentState] = React52.useState({
+  const [planModeEnabled, setPlanModeEnabled] = React54.useState(false);
+  const [petSettingsOpen, setPetSettingsOpen] = React54.useState(false);
+  const [petLocalSettings, setPetLocalSettings] = React54.useState(() => readPetLocalSettings());
+  const [attachmentState, setAttachmentState] = React54.useState({
     uploadedFiles: [],
     hasUploadingFiles: false,
     hasParsingFiles: false
   });
-  const [references, setReferences] = React52.useState([]);
-  const [isUploadingReferenceImages, setIsUploadingReferenceImages] = React52.useState(false);
-  const [quoteSelection, setQuoteSelection] = React52.useState(null);
-  const [isAtBottom, setIsAtBottom] = React52.useState(true);
-  const [hasUpdatesBelow, setHasUpdatesBelow] = React52.useState(false);
+  const [references, setReferences] = React54.useState([]);
+  const [isUploadingReferenceImages, setIsUploadingReferenceImages] = React54.useState(false);
+  const [quoteSelection, setQuoteSelection] = React54.useState(null);
+  const [isAtBottom, setIsAtBottom] = React54.useState(true);
+  const [hasUpdatesBelow, setHasUpdatesBelow] = React54.useState(false);
   const {
     threads,
     deleteThread,
     refreshThreads,
     isLoading: isThreadsLoading
   } = useThreads();
-  const viewportRef = React52.useRef(null);
-  const messageNavigationAnchorsRef = React52.useRef(
+  const viewportRef = React54.useRef(null);
+  const chatColumnRef = React54.useRef(null);
+  const messageNavigationAnchorsRef = React54.useRef(
     /* @__PURE__ */ new Map()
   );
-  const attachmentsRef = React52.useRef(null);
-  const composerInputRef = React52.useRef(null);
-  const slashPaletteRef = React52.useRef(null);
-  const slashPaletteOptionRefs = React52.useRef(
+  const attachmentsRef = React54.useRef(null);
+  const composerInputRef = React54.useRef(null);
+  const slashPaletteRef = React54.useRef(null);
+  const slashPaletteOptionRefs = React54.useRef(
     []
   );
-  const composerPartsRef = React52.useRef([]);
-  const pendingComposerCaretOffsetRef = React52.useRef(null);
-  const shouldAutoScrollRef = React52.useRef(true);
-  const forceFollowRef = React52.useRef(false);
-  const previousMessageCountRef = React52.useRef(0);
-  const previousScrollTopRef = React52.useRef(0);
-  const isPrependingHistoryMessagesRef = React52.useRef(false);
-  const autoScrollFrameRef = React52.useRef(null);
-  const isPointerDownRef = React52.useRef(false);
-  const lastTouchYRef = React52.useRef(null);
+  const composerPartsRef = React54.useRef([]);
+  const pendingComposerCaretOffsetRef = React54.useRef(null);
+  const shouldAutoScrollRef = React54.useRef(true);
+  const forceFollowRef = React54.useRef(false);
+  const previousMessageCountRef = React54.useRef(0);
+  const previousScrollTopRef = React54.useRef(0);
+  const isPrependingHistoryMessagesRef = React54.useRef(false);
+  const autoScrollFrameRef = React54.useRef(null);
+  const isPointerDownRef = React54.useRef(false);
+  const lastTouchYRef = React54.useRef(null);
   const {
     runtimeCapabilities,
     runtimeCapabilitiesReady,
@@ -16894,24 +18085,24 @@ function Chat({
   const resolvedPlaceholder = placeholder ?? t("chat.placeholder");
   const assistantTitle = assistantName || resolvedTitle;
   const petRequired = options?.displayMode === "pet";
-  const basePetSettings = React52.useMemo(
+  const basePetSettings = React54.useMemo(
     () => derivePetLocalSettings(options?.pet),
     [options?.pet]
   );
-  const displayedPetSettings = React52.useMemo(
+  const displayedPetSettings = React54.useMemo(
     () => ({
       ...petLocalSettings ?? basePetSettings,
       ...petRequired ? { enabled: true } : {}
     }),
     [basePetSettings, petLocalSettings, petRequired]
   );
-  const effectivePet = React52.useMemo(() => {
+  const effectivePet = React54.useMemo(() => {
     if (petRequired || petLocalSettings) {
       return buildPetOptionsFromLocalSettings(displayedPetSettings);
     }
     return options?.pet ?? null;
   }, [displayedPetSettings, options?.pet, petLocalSettings, petRequired]);
-  const savePetLocalSettings = React52.useCallback(
+  const savePetLocalSettings = React54.useCallback(
     (settings) => {
       const nextSettings = petRequired ? { ...settings, enabled: true } : settings;
       setPetLocalSettings(nextSettings);
@@ -16919,7 +18110,7 @@ function Chat({
     },
     [petRequired]
   );
-  const handlePetCommand = React52.useCallback(
+  const handlePetCommand = React54.useCallback(
     (mode) => {
       if (mode === "settings") {
         setPetSettingsOpen(true);
@@ -16941,11 +18132,11 @@ function Chat({
     [displayedPetSettings, effectivePet, petRequired, savePetLocalSettings]
   );
   const inputPlaceholder = selectedTool?.placeholderOverride ?? composer?.placeholder ?? resolvedPlaceholder;
-  const messages = React52.useMemo(
+  const messages = React54.useMemo(
     () => stream.messages ?? [],
     [stream.messages]
   );
-  const messageNavigationLabels = React52.useMemo(
+  const messageNavigationLabels = React54.useMemo(
     () => ({
       user: t("chat.youLabel"),
       assistant: assistantTitle,
@@ -16964,7 +18155,7 @@ function Chat({
     }),
     [assistantTitle, t]
   );
-  const messageNavigationItems = React52.useMemo(
+  const messageNavigationItems = React54.useMemo(
     () => messageNavigationEnabled ? buildMessageNavigationItems(
       messages,
       {
@@ -16987,7 +18178,7 @@ function Chat({
     historyMessagePagination?.isLoadingMore
   );
   const canLoadMoreMessages = Boolean(historyMessagePagination?.hasMore);
-  const draft = React52.useMemo(
+  const draft = React54.useMemo(
     () => getComposerPlainText(composerParts),
     [composerParts]
   );
@@ -17001,7 +18192,7 @@ function Chat({
     isEmpty: isComposerInputEmpty,
     isStacked: isComposerStacked
   });
-  const pendingFollowUps = React52.useMemo(
+  const pendingFollowUps = React54.useMemo(
     () => sortVisiblePendingFollowUps(stream.pendingFollowUps ?? []),
     [stream.pendingFollowUps]
   );
@@ -17010,7 +18201,7 @@ function Chat({
   const hasPendingHITLRequest = Boolean(stream.pendingHITLRequest);
   const hasPendingInteractiveRequest = hasPendingRequestUserInput || hasPendingHITLRequest;
   const hasPendingTodos = Boolean(stream.todos?.items.length);
-  const goalAdapter = React52.useMemo(() => {
+  const goalAdapter = React54.useMemo(() => {
     if (isGoalAdapter(options?.goal)) {
       return options.goal;
     }
@@ -17023,10 +18214,10 @@ function Chat({
     "goal"
   );
   const showGoalStatus = goalCommandAvailable && !hasCompletedGoal && (Boolean(goalError) || threadGoal?.status === "active" && stream.isLoading);
-  const clearQuoteSelection = React52.useCallback(() => {
+  const clearQuoteSelection = React54.useCallback(() => {
     setQuoteSelection(null);
   }, []);
-  const commitComposerParts = React52.useCallback(
+  const commitComposerParts = React54.useCallback(
     (nextParts, options2) => {
       const normalized = normalizeComposerParts(nextParts);
       const previous = composerPartsRef.current;
@@ -17056,7 +18247,7 @@ function Chat({
     },
     [setRunRuntimeCapabilities]
   );
-  const setComposerText = React52.useCallback(
+  const setComposerText = React54.useCallback(
     (text, caretOffset = text.length) => {
       commitComposerParts(createComposerTextParts(text), {
         caretOffset,
@@ -17066,7 +18257,7 @@ function Chat({
     },
     [commitComposerParts]
   );
-  const focusComposerAt = React52.useCallback((position) => {
+  const focusComposerAt = React54.useCallback((position) => {
     const nextPosition = position ?? getComposerEditingLength(composerPartsRef.current);
     pendingComposerCaretOffsetRef.current = nextPosition;
     requestAnimationFrame(() => {
@@ -17095,7 +18286,7 @@ function Chat({
     focusComposerAt
   });
   const parentMessenger = useParentMessenger({
-    onSetComposerValue: React52.useCallback(
+    onSetComposerValue: React54.useCallback(
       (payload) => {
         if (!payload) {
           return;
@@ -17123,16 +18314,16 @@ function Chat({
       },
       [applyComposerValueRuntimeCapabilities, composer?.tools, setComposerText]
     ),
-    onSetRuntimeCapabilities: React52.useCallback(
+    onSetRuntimeCapabilities: React54.useCallback(
       (selection) => {
         applyExternalRuntimeCapabilities(selection);
       },
       [applyExternalRuntimeCapabilities]
     ),
-    onFocusComposer: React52.useCallback(() => {
+    onFocusComposer: React54.useCallback(() => {
       composerInputRef.current?.focus();
     }, []),
-    onSetPetEnabled: React52.useCallback(
+    onSetPetEnabled: React54.useCallback(
       (enabled) => {
         if (petRequired) {
           return;
@@ -17146,10 +18337,10 @@ function Chat({
     )
   });
   const canMinimizeToPet = parentMessenger?.isParentAvailable === true && isPetEnabled(effectivePet);
-  const handleMinimizeToPet = React52.useCallback(() => {
+  const handleMinimizeToPet = React54.useCallback(() => {
     parentMessenger?.sendEvent("chat_minimize_change", { minimized: true });
   }, [parentMessenger]);
-  const syncQuoteSelection = React52.useCallback(() => {
+  const syncQuoteSelection = React54.useCallback(() => {
     if (typeof window === "undefined") {
       clearQuoteSelection();
       return;
@@ -17194,23 +18385,23 @@ function Chat({
       left
     });
   }, [clearQuoteSelection]);
-  const cancelPendingAutoScroll = React52.useCallback(() => {
+  const cancelPendingAutoScroll = React54.useCallback(() => {
     if (autoScrollFrameRef.current !== null) {
       cancelAnimationFrame(autoScrollFrameRef.current);
       autoScrollFrameRef.current = null;
     }
   }, []);
-  const disableAutoFollow = React52.useCallback(() => {
+  const disableAutoFollow = React54.useCallback(() => {
     forceFollowRef.current = false;
     shouldAutoScrollRef.current = false;
     cancelPendingAutoScroll();
   }, [cancelPendingAutoScroll]);
-  const enableAutoFollow = React52.useCallback(() => {
+  const enableAutoFollow = React54.useCallback(() => {
     forceFollowRef.current = true;
     shouldAutoScrollRef.current = true;
     setHasUpdatesBelow(false);
   }, []);
-  const scrollToBottom = React52.useCallback(
+  const scrollToBottom = React54.useCallback(
     (smooth = false, force = false) => {
       if (force) {
         enableAutoFollow();
@@ -17237,7 +18428,7 @@ function Chat({
     },
     [cancelPendingAutoScroll, enableAutoFollow]
   );
-  const setMessageNavigationAnchor = React52.useCallback(
+  const setMessageNavigationAnchor = React54.useCallback(
     (id, node) => {
       if (node) {
         messageNavigationAnchorsRef.current.set(id, node);
@@ -17247,15 +18438,165 @@ function Chat({
     },
     []
   );
-  const getMessageNavigationAnchor = React52.useCallback(
+  const getMessageNavigationAnchor = React54.useCallback(
     (item) => messageNavigationAnchorsRef.current.get(item.id) ?? null,
     []
   );
-  const handleMessageNavigationNavigate = React52.useCallback(() => {
+  const handleMessageNavigationNavigate = React54.useCallback(() => {
     disableAutoFollow();
     clearQuoteSelection();
   }, [clearQuoteSelection, disableAutoFollow]);
-  React52.useEffect(() => {
+  const taskSummaryEnabled = options?.taskSummary?.enabled === true;
+  const taskSummaryConversationId = stream.conversationId ?? null;
+  const [taskSummaryDocked, setTaskSummaryDocked] = React54.useState(false);
+  const [taskSummaryOpen, setTaskSummaryOpen] = React54.useState(false);
+  const manuallyClosedTaskSummaryConversationIdsRef = React54.useRef(
+    /* @__PURE__ */ new Set()
+  );
+  const liveTaskSummaryPending = React54.useMemo(() => {
+    const followUps = pendingFollowUps.map((item) => ({
+      id: `follow-up:${item.id}`,
+      kind: "follow_up",
+      title: item.mode === "steer" ? t("taskSummary.pending.steer") : t("taskSummary.pending.followUp"),
+      messageId: item.clientMessageId,
+      createdAt: new Date(item.createdAt).toISOString()
+    }));
+    const userInput = stream.pendingRequestUserInput ? [
+      {
+        id: `user-input:${stream.pendingRequestUserInput.id}`,
+        kind: "user_input",
+        title: stream.pendingRequestUserInput.params.questions[0]?.header || t("taskSummary.pending.userInput"),
+        createdAt: new Date(
+          stream.pendingRequestUserInput.createdAt
+        ).toISOString()
+      }
+    ] : [];
+    const approvals = stream.pendingHITLRequest ? [
+      {
+        id: `approval:${stream.pendingHITLRequest.id}`,
+        kind: "approval",
+        title: t("taskSummary.pending.approval"),
+        createdAt: new Date(
+          stream.pendingHITLRequest.createdAt
+        ).toISOString()
+      }
+    ] : [];
+    return [...approvals, ...userInput, ...followUps];
+  }, [
+    pendingFollowUps,
+    stream.pendingHITLRequest,
+    stream.pendingRequestUserInput,
+    t
+  ]);
+  const liveTaskSummaryRunning = React54.useMemo(
+    () => stream.runtimeActivities.sandboxServices.services.filter(
+      (service) => service.status === "starting" || service.status === "running" || service.status === "stopping"
+    ).map((service) => ({
+      id: service.id ?? `${service.provider}:${service.name}:${service.actualPort ?? service.requestedPort ?? ""}`,
+      title: service.name,
+      status: service.status,
+      description: service.actualPort || service.requestedPort ? `:${service.actualPort ?? service.requestedPort}` : void 0,
+      resource: {
+        type: "browser",
+        serviceId: service.id,
+        url: service.previewUrl ?? void 0
+      },
+      updatedAt: service.startedAt ?? void 0
+    })),
+    [stream.runtimeActivities.sandboxServices.services]
+  );
+  const taskSummaryAgentNames = React54.useMemo(() => {
+    const names = /* @__PURE__ */ new Map();
+    runtimeCapabilityOptions.forEach((option) => {
+      if (option.type !== "subAgent") return;
+      const name = option.capability.name?.trim();
+      if (!name) return;
+      names.set(option.id, name);
+      const agentKey = option.capability.agentKey?.trim();
+      if (agentKey) names.set(agentKey, name);
+    });
+    return names;
+  }, [runtimeCapabilityOptions]);
+  const liveTaskSummary = React54.useMemo(
+    () => collectLiveTaskSummary({
+      messages: messages.map(
+        (message) => ({
+          id: message.id,
+          content: message.content,
+          createdAt: message.createdAt,
+          updatedAt: message.updatedAt,
+          taskSummary: message.taskSummary,
+          references: message.references,
+          attachments: message.attachments,
+          fileAssets: message.fileAssets,
+          agentRuns: message.agentRuns,
+          runtimeCapabilities: message.runtimeCapabilities
+        })
+      ),
+      goal: threadGoal,
+      todos: stream.todos,
+      pending: liveTaskSummaryPending,
+      running: liveTaskSummaryRunning,
+      agentNames: taskSummaryAgentNames
+    }),
+    [
+      liveTaskSummaryPending,
+      liveTaskSummaryRunning,
+      messages,
+      stream.todos,
+      taskSummaryAgentNames,
+      threadGoal
+    ]
+  );
+  const taskSummary = useTaskSummary({
+    enabled: taskSummaryEnabled,
+    conversationId: taskSummaryConversationId,
+    client: stream.client,
+    live: liveTaskSummary
+  });
+  const navigateToTaskSummaryMessage = React54.useCallback(
+    async (messageId) => {
+      try {
+        let anchor = messageNavigationAnchorsRef.current.get(messageId);
+        let pageCount = 0;
+        while (!anchor && pageCount < 100) {
+          const loaded = await stream.loadMoreConversationMessages();
+          if (!loaded.length) break;
+          pageCount += 1;
+          await new Promise(
+            (resolve) => requestAnimationFrame(() => resolve())
+          );
+          anchor = messageNavigationAnchorsRef.current.get(messageId);
+        }
+        if (!anchor) return;
+        disableAutoFollow();
+        clearQuoteSelection();
+        anchor.scrollIntoView({ behavior: "smooth", block: "center" });
+      } catch (error) {
+        console.warn("Failed to locate task summary message", error);
+      }
+    },
+    [clearQuoteSelection, disableAutoFollow, stream]
+  );
+  const openTaskSummaryResource = React54.useCallback(
+    (resource, messageId, resourceTitle) => {
+      const data = {
+        resource,
+        conversationId: taskSummaryConversationId ?? void 0,
+        messageId,
+        title: resourceTitle
+      };
+      parentMessenger.sendEvent("public_event", [
+        "effect",
+        {
+          name: CHATKIT_TASK_SUMMARY_OPEN_RESOURCE_EFFECT,
+          data
+        }
+      ]);
+    },
+    [parentMessenger, taskSummaryConversationId]
+  );
+  React54.useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) return;
     previousScrollTopRef.current = viewport.scrollTop;
@@ -17336,14 +18677,14 @@ function Chat({
       window.removeEventListener("pointercancel", stopPointerTracking);
     };
   }, [cancelPendingAutoScroll, disableAutoFollow]);
-  React52.useEffect(() => {
+  React54.useEffect(() => {
     shouldAutoScrollRef.current = true;
     forceFollowRef.current = false;
     previousScrollTopRef.current = 0;
     setIsAtBottom(true);
     setHasUpdatesBelow(false);
   }, [stream.threadId]);
-  React52.useEffect(() => {
+  React54.useEffect(() => {
     const messageCountChanged = messages.length !== previousMessageCountRef.current;
     previousMessageCountRef.current = messages.length;
     if (isPrependingHistoryMessagesRef.current) {
@@ -17365,7 +18706,7 @@ function Chat({
   const isSubmissionBlocked = hasPendingInteractiveRequest || missingConfig || isHistoryLoading || hasUploadingFiles || isUploadingReferenceImages;
   const isSendDisabled = !trimmedDraft && !hasReferences || isSubmissionBlocked;
   const isPromptEditDisabled = hasPendingInteractiveRequest || missingConfig || isHistoryLoading;
-  const resizeComposerInput = React52.useCallback(() => {
+  const resizeComposerInput = React54.useCallback(() => {
     const input = composerInputRef.current;
     if (!input) {
       return;
@@ -17373,7 +18714,7 @@ function Chat({
     input.style.maxHeight = `${COMPOSER_INPUT_MAX_HEIGHT}px`;
     input.style.overflowY = input.scrollHeight > COMPOSER_INPUT_MAX_HEIGHT ? "auto" : "hidden";
   }, []);
-  React52.useLayoutEffect(() => {
+  React54.useLayoutEffect(() => {
     composerPartsRef.current = composerParts;
     resizeComposerInput();
     const caretOffset = pendingComposerCaretOffsetRef.current;
@@ -17385,13 +18726,13 @@ function Chat({
       }
     }
   }, [composerDomVersion, composerParts, resizeComposerInput]);
-  React52.useEffect(() => {
+  React54.useEffect(() => {
     document.addEventListener("selectionchange", syncQuoteSelection);
     return () => {
       document.removeEventListener("selectionchange", syncQuoteSelection);
     };
   }, [syncQuoteSelection]);
-  React52.useEffect(() => {
+  React54.useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) {
       return;
@@ -17408,14 +18749,14 @@ function Chat({
       window.removeEventListener("resize", handleViewportScroll);
     };
   }, [clearQuoteSelection]);
-  React52.useEffect(() => {
+  React54.useEffect(() => {
     clearQuoteSelection();
   }, [messages.length, stream.threadId, clearQuoteSelection]);
-  React52.useEffect(() => {
+  React54.useEffect(() => {
     if (missingConfig) return;
     void refreshThreads();
   }, [missingConfig, refreshThreads]);
-  React52.useEffect(() => {
+  React54.useEffect(() => {
     if (missingConfig || !stream.client || !stream.assistantId) {
       setAssistantName(null);
       setAssistantAvatar(null);
@@ -17438,10 +18779,10 @@ function Chat({
       cancelled = true;
     };
   }, [missingConfig, stream.client, stream.assistantId]);
-  React52.useEffect(() => {
+  React54.useEffect(() => {
     setThreadGoal(stream.threadGoal);
   }, [stream.threadGoal]);
-  React52.useEffect(() => {
+  React54.useEffect(() => {
     const threadId = stream.threadId?.trim();
     if (!threadId || !goalCommandAvailable) {
       setThreadGoal(null);
@@ -17482,7 +18823,7 @@ function Chat({
     return () => controller.abort();
   }, [goalAdapter, goalCommandAvailable, stream.threadId]);
   const uploadedFiles = attachmentState.uploadedFiles;
-  const syncComposerInputFromElement = React52.useCallback(
+  const syncComposerInputFromElement = React54.useCallback(
     (input) => {
       const previousCapabilities = getComposerCapabilityPartMap(
         composerPartsRef.current
@@ -17500,25 +18841,25 @@ function Chat({
     },
     [commitComposerParts, updateRuntimeCapabilityPalette]
   );
-  const handleComposerInput = React52.useCallback(
+  const handleComposerInput = React54.useCallback(
     (event) => {
       syncComposerInputFromElement(event.currentTarget);
     },
     [syncComposerInputFromElement]
   );
-  const handleComposerCompositionEnd = React52.useCallback(
+  const handleComposerCompositionEnd = React54.useCallback(
     (event) => {
       syncComposerInputFromElement(event.currentTarget);
     },
     [syncComposerInputFromElement]
   );
-  const handleComposerSelect = React52.useCallback(() => {
+  const handleComposerSelect = React54.useCallback(() => {
     updateRuntimeCapabilityPalette(
       composerPartsRef.current,
       composerInputRef.current ? getComposerSelectionOffset(composerInputRef.current) : void 0
     );
   }, [updateRuntimeCapabilityPalette]);
-  const submitDraft = React52.useCallback(
+  const submitDraft = React54.useCallback(
     (submitOptions = {}) => {
       if (isSubmissionBlocked) return;
       const contentToSubmit = (submitOptions.inputText ?? trimmedDraft).trim();
@@ -17624,7 +18965,7 @@ function Chat({
       t
     ]
   );
-  const handleGoalCommand = React52.useCallback(
+  const handleGoalCommand = React54.useCallback(
     async ({
       args,
       commandSource,
@@ -17730,7 +19071,7 @@ function Chat({
       t
     ]
   );
-  const handleGoalPanelOpenChange = React52.useCallback((open) => {
+  const handleGoalPanelOpenChange = React54.useCallback((open) => {
     setIsGoalPanelOpen(open);
   }, []);
   const {
@@ -17774,7 +19115,7 @@ function Chat({
     plugin: t("composer.slashCommands.empty.loadingCapabilities"),
     subAgent: t("composer.slashCommands.empty.loadingCapabilities")
   };
-  React52.useEffect(() => {
+  React54.useEffect(() => {
     if (!runtimeCapabilityPalette) {
       return;
     }
@@ -17793,7 +19134,7 @@ function Chat({
       );
     }
   }, [slashPaletteOptions.length, runtimeCapabilityPalette]);
-  React52.useLayoutEffect(() => {
+  React54.useLayoutEffect(() => {
     if (!runtimeCapabilityPalette) {
       return;
     }
@@ -17810,7 +19151,7 @@ function Chat({
       container.scrollTop += optionRect.bottom - containerRect.bottom;
     }
   }, [runtimeCapabilityPalette, slashPaletteOptions.length]);
-  const submitGoalModeDraft = React52.useCallback(() => {
+  const submitGoalModeDraft = React54.useCallback(() => {
     const objective = getComposerPlainText(composerPartsRef.current).trim();
     if (!isGoalModeOpen || !goalCommandAvailable || !objective) {
       return false;
@@ -17848,7 +19189,7 @@ function Chat({
     }
     submitDraft();
   };
-  const handleEditPendingFollowUp = React52.useCallback(
+  const handleEditPendingFollowUp = React54.useCallback(
     (id) => {
       const item = pendingFollowUps.find(
         (entry) => entry.id === id && entry.mode === "queue"
@@ -17875,7 +19216,7 @@ function Chat({
     },
     [pendingFollowUps, setComposerText, stream]
   );
-  const handleQuoteSelection = React52.useCallback(() => {
+  const handleQuoteSelection = React54.useCallback(() => {
     if (!quoteSelection) {
       return;
     }
@@ -17891,7 +19232,7 @@ function Chat({
   const handleAttachmentClick = () => {
     attachmentsRef.current?.openFilePicker();
   };
-  const uploadContextFile = React52.useCallback(
+  const uploadContextFile = React54.useCallback(
     (file) => {
       const formData = new FormData();
       formData.append("file", file, file.name || "upload");
@@ -17910,13 +19251,13 @@ function Chat({
     },
     [stream.assistantId, stream.client, stream.threadId]
   );
-  const getContextFileStatus = React52.useCallback(
+  const getContextFileStatus = React54.useCallback(
     (fileId) => stream.client.contexts.fetch(`/files/${fileId}/status`, {
       method: "GET"
     }),
     [stream.client]
   );
-  const deleteContextFile = React52.useCallback(
+  const deleteContextFile = React54.useCallback(
     (storageFileId) => stream.client.contexts.deleteFile(storageFileId),
     [stream.client]
   );
@@ -18024,7 +19365,7 @@ function Chat({
     }
     submitDraft();
   };
-  const handleComposerPaste = React52.useCallback(
+  const handleComposerPaste = React54.useCallback(
     (event) => {
       const clipboardData = event.clipboardData;
       if (!clipboardData) {
@@ -18126,13 +19467,13 @@ function Chat({
   const handleToolSelect = (tool) => {
     setSelectedTool((prev) => prev?.id === tool.id ? null : tool);
   };
-  const handlePromptClick = React52.useCallback(
+  const handlePromptClick = React54.useCallback(
     (prompt) => {
       submitDraft({ inputText: prompt, displayText: prompt });
     },
     [submitDraft]
   );
-  const handlePromptEdit = React52.useCallback(
+  const handlePromptEdit = React54.useCallback(
     (prompt) => {
       if (isPromptEditDisabled) return;
       setComposerText(prompt, prompt.length);
@@ -18141,7 +19482,7 @@ function Chat({
     },
     [focusComposerAt, isPromptEditDisabled, setComposerText]
   );
-  const loadConversationMessages = React52.useCallback(
+  const loadConversationMessages = React54.useCallback(
     async (recordId) => {
       if (missingConfig) {
         setHistoryError(missingConfigShortMessage);
@@ -18162,7 +19503,7 @@ function Chat({
     },
     [missingConfig, missingConfigShortMessage, stream, t]
   );
-  const handleLoadMoreMessages = React52.useCallback(async () => {
+  const handleLoadMoreMessages = React54.useCallback(async () => {
     if (!canLoadMoreMessages || isLoadingMoreMessages) {
       return;
     }
@@ -18271,19 +19612,19 @@ function Chat({
   };
   const acceptMimes = composer?.attachments?.accept ? Object.entries(composer.attachments.accept).map(([mime, exts]) => [mime, ...exts.map((e) => `.${e}`)].join(",")).join(",") : void 0;
   const canUploadDroppedFiles = composer?.attachments?.enabled === true && !missingConfig && !isHistoryLoading && !hasPendingInteractiveRequest;
-  const handleDroppedFiles = React52.useCallback((files) => {
+  const handleDroppedFiles = React54.useCallback((files) => {
     return attachmentsRef.current?.queueFiles(files) ?? false;
   }, []);
-  const currentThread = React52.useMemo(
+  const currentThread = React54.useMemo(
     () => threads.find((item) => item.id === stream.threadId),
     [threads, stream.threadId]
   );
-  const assistantStatusText = React52.useMemo(() => {
+  const assistantStatusText = React54.useMemo(() => {
     if (!stream.threadId) return t("chat.statusOnline");
     return currentThread?.title?.trim() || t("chat.statusOnline");
   }, [currentThread?.title, stream.threadId, t]);
   const streamErrorMessage = stream.error instanceof Error ? stream.error.message : void 0;
-  const threadErrorMessage = React52.useMemo(() => {
+  const threadErrorMessage = React54.useMemo(() => {
     if (streamErrorMessage?.trim()) return streamErrorMessage.trim();
     if (currentThread?.status !== "error") return void 0;
     const message = currentThread.error?.trim();
@@ -18314,777 +19655,880 @@ function Chat({
     fallbackTitle: t("history.threadFallback")
   });
   const layoutMaxWidth = options?.layout?.maxWidth;
-  const chatColumnStyle = React52.useMemo(() => {
+  const chatColumnStyle = React54.useMemo(() => {
     if (layoutMaxWidth === void 0 || layoutMaxWidth === null || layoutMaxWidth === "") {
       return void 0;
     }
     return { maxWidth: layoutMaxWidth };
   }, [layoutMaxWidth]);
-  return /* @__PURE__ */ jsxs39(
-    UploadDroppedFiles,
+  React54.useLayoutEffect(() => {
+    if (!taskSummaryEnabled) {
+      setTaskSummaryDocked(false);
+      return;
+    }
+    const viewport = viewportRef.current;
+    const chatColumn = chatColumnRef.current;
+    if (!viewport || !chatColumn) {
+      setTaskSummaryDocked(false);
+      return;
+    }
+    const updateDockedState = () => {
+      const viewportRect = viewport.getBoundingClientRect();
+      const chatColumnRect = chatColumn.getBoundingClientRect();
+      const rootFontSize = Number.parseFloat(
+        window.getComputedStyle(document.documentElement).fontSize
+      );
+      const remInPixels = Number.isFinite(rootFontSize) ? rootFontSize : 16;
+      const requiredSideSpace = (TASK_SUMMARY_PANEL_WIDTH_REM + TASK_SUMMARY_PANEL_EDGE_INSET_REM + TASK_SUMMARY_PANEL_SAFE_GAP_REM) * remInPixels;
+      const availableSideSpace = viewportRect.right - chatColumnRect.right;
+      setTaskSummaryDocked(availableSideSpace >= requiredSideSpace);
+    };
+    updateDockedState();
+    window.addEventListener("resize", updateDockedState);
+    const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(updateDockedState) : null;
+    resizeObserver?.observe(viewport);
+    resizeObserver?.observe(chatColumn);
+    return () => {
+      window.removeEventListener("resize", updateDockedState);
+      resizeObserver?.disconnect();
+    };
+  }, [layoutMaxWidth, taskSummaryEnabled]);
+  const taskSummaryAvailable = Boolean(
+    taskSummaryEnabled && stream.threadId && taskSummaryConversationId
+  );
+  const handleTaskSummaryOpenChange = React54.useCallback(
+    (open) => {
+      setTaskSummaryOpen(open);
+      if (!taskSummaryConversationId) return;
+      if (open) {
+        manuallyClosedTaskSummaryConversationIdsRef.current.delete(
+          taskSummaryConversationId
+        );
+        return;
+      }
+      manuallyClosedTaskSummaryConversationIdsRef.current.add(
+        taskSummaryConversationId
+      );
+    },
+    [taskSummaryConversationId]
+  );
+  React54.useEffect(() => {
+    if (!taskSummaryDocked) {
+      setTaskSummaryOpen(false);
+    }
+  }, [taskSummaryDocked]);
+  React54.useEffect(() => {
+    if (!taskSummaryDocked || !taskSummaryAvailable || !taskSummaryConversationId || manuallyClosedTaskSummaryConversationIdsRef.current.has(
+      taskSummaryConversationId
+    )) {
+      return;
+    }
+    setTaskSummaryOpen(true);
+  }, [taskSummaryAvailable, taskSummaryConversationId, taskSummaryDocked]);
+  const taskSummaryProps = {
+    summary: taskSummary.summary,
+    historyError: taskSummary.historyError,
+    loadingSections: taskSummary.loadingSections,
+    loadedSectionCounts: taskSummary.loadedSectionCounts,
+    onRetryHistory: taskSummary.retryHistory,
+    onLoadSection: taskSummary.loadSection,
+    onNavigateMessage: (messageId) => {
+      void navigateToTaskSummaryMessage(messageId);
+    },
+    onFocusComposer: () => focusComposerAt(),
+    onOpenResource: openTaskSummaryResource
+  };
+  return /* @__PURE__ */ jsxs40(
+    "div",
     {
-      ref: viewportRef,
-      "data-chatkit-root": "",
-      enabled: canUploadDroppedFiles,
-      dropTitle: t("chat.dropFilesTitle"),
-      dropHint: t("chat.dropFilesHint"),
-      activeClassName: "ring-2 ring-primary/40 ring-inset",
-      onFiles: handleDroppedFiles,
-      className: cn(
-        "relative flex h-full w-full flex-col flex-1 overflow-y-auto bg-background shadow-sm transition-[box-shadow] duration-150",
-        className
-      ),
+      className: "relative flex h-full w-full min-w-0 bg-background",
+      "data-task-summary-layout": taskSummaryDocked ? "docked" : "popover",
       children: [
-        /* @__PURE__ */ jsxs39(
-          "div",
+        /* @__PURE__ */ jsxs40(
+          UploadDroppedFiles,
           {
-            "data-slot": "chatkit-chat-header",
-            className: "mx-auto flex w-full items-center justify-between border-b p-2 sticky top-0 z-10 bg-background",
-            style: chatColumnStyle,
+            ref: viewportRef,
+            "data-chatkit-root": "",
+            enabled: canUploadDroppedFiles,
+            dropTitle: t("chat.dropFilesTitle"),
+            dropHint: t("chat.dropFilesHint"),
+            activeClassName: "ring-2 ring-primary/40 ring-inset",
+            onFiles: handleDroppedFiles,
+            className: cn(
+              "relative flex h-full w-full min-w-0 flex-col flex-1 overflow-y-auto bg-background shadow-sm transition-[box-shadow] duration-150",
+              className
+            ),
             children: [
-              /* @__PURE__ */ jsxs39("div", { className: "flex min-w-0 items-center gap-3 overflow-hidden", children: [
-                /* @__PURE__ */ jsxs39("div", { className: "relative shrink-0", children: [
-                  /* @__PURE__ */ jsx57(
-                    ChatkitAvatar,
-                    {
-                      avatar: assistantAvatar,
-                      className: "h-9 w-9 border border-border/60",
-                      label: assistantTitle
-                    }
-                  ),
-                  /* @__PURE__ */ jsx57("span", { className: "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-green-500" })
-                ] }),
-                /* @__PURE__ */ jsxs39("div", { className: "min-w-0", children: [
-                  /* @__PURE__ */ jsx57(
-                    "h2",
-                    {
-                      className: "text-lg font-semibold truncate",
-                      title: assistantTitle,
-                      children: assistantTitle
-                    }
-                  ),
-                  /* @__PURE__ */ jsx57(
-                    "p",
-                    {
-                      className: "truncate text-xs text-muted-foreground",
-                      title: assistantStatusText,
-                      children: assistantStatusText
-                    }
-                  )
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-1", children: [
-                canMinimizeToPet && /* @__PURE__ */ jsxs39(Tooltip, { children: [
-                  /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx57("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ jsx57(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: handleMinimizeToPet,
-                      className: cn(
-                        "flex h-8 w-8 cursor-pointer items-center justify-center rounded-md",
-                        "text-muted-foreground hover:text-foreground hover:bg-muted",
-                        "transition-colors duration-150"
-                      ),
-                      "aria-label": t("chat.minimizeToPet"),
-                      children: /* @__PURE__ */ jsx57(Minus, { size: 16 })
-                    }
-                  ) }) }),
-                  /* @__PURE__ */ jsx57(TooltipContent, { side: "bottom", children: t("chat.minimizeToPet") })
-                ] }),
-                /* @__PURE__ */ jsxs39(Tooltip, { children: [
-                  /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx57("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ jsx57(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => setPetSettingsOpen(true),
-                      className: cn(
-                        "flex h-8 w-8 cursor-pointer items-center justify-center rounded-md",
-                        "text-muted-foreground hover:text-foreground hover:bg-muted",
-                        "transition-colors duration-150"
-                      ),
-                      "aria-label": t("settings.open"),
-                      children: /* @__PURE__ */ jsx57(Settings2, { size: 16 })
-                    }
-                  ) }) }),
-                  /* @__PURE__ */ jsx57(TooltipContent, { side: "bottom", children: t("settings.open") })
-                ] }),
-                history?.enabled !== false && /* @__PURE__ */ jsxs39(Fragment9, { children: [
-                  /* @__PURE__ */ jsxs39(Tooltip, { children: [
-                    /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx57("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ jsx57(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: handleNewThread,
-                        disabled: missingConfig || isHistoryLoading,
-                        className: cn(
-                          "flex h-8 w-8 cursor-pointer items-center justify-center rounded-md",
-                          "text-muted-foreground hover:text-foreground hover:bg-muted",
-                          "transition-colors duration-150",
-                          "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed"
+              /* @__PURE__ */ jsxs40(
+                "div",
+                {
+                  ref: chatColumnRef,
+                  "data-slot": "chatkit-chat-header",
+                  className: "mx-auto flex w-full items-center justify-between border-b p-2 sticky top-0 z-10 bg-background",
+                  style: chatColumnStyle,
+                  children: [
+                    /* @__PURE__ */ jsxs40("div", { className: "flex min-w-0 items-center gap-3 overflow-hidden", children: [
+                      /* @__PURE__ */ jsxs40("div", { className: "relative shrink-0", children: [
+                        /* @__PURE__ */ jsx58(
+                          ChatkitAvatar,
+                          {
+                            avatar: assistantAvatar,
+                            className: "h-9 w-9 border border-border/60",
+                            label: assistantTitle
+                          }
                         ),
-                        "aria-label": t("history.newThread"),
-                        children: /* @__PURE__ */ jsx57(Pencil4, { size: 16 })
-                      }
-                    ) }) }),
-                    /* @__PURE__ */ jsx57(TooltipContent, { side: "bottom", children: t("history.newThread") })
-                  ] }),
-                  /* @__PURE__ */ jsx57(
-                    HistorySidebar,
-                    {
-                      threads,
-                      currentThreadId: stream.threadId ?? void 0,
-                      onNewThread: handleNewThread,
-                      onSelectThread: handleSelectThread,
-                      onDeleteThread: handleDeleteThread,
-                      showDelete: history?.showDelete !== false,
-                      disabled: missingConfig || isThreadsLoading || isHistoryLoading
-                    }
-                  )
-                ] })
-              ] })
-            ]
-          }
-        ),
-        showMessageNavigation && /* @__PURE__ */ jsx57(
-          MessageNavigator,
-          {
-            items: messageNavigationItems,
-            viewportRef,
-            getAnchor: getMessageNavigationAnchor,
-            onNavigate: handleMessageNavigationNavigate,
-            label: t("message.navigation.label"),
-            tagsOverflowLabel: (count) => t("message.navigation.moreTags", { count })
-          }
-        ),
-        /* @__PURE__ */ jsxs39(
-          "div",
-          {
-            "data-slot": "chatkit-chat-content",
-            className: "mx-auto w-full flex-1 p-4",
-            style: chatColumnStyle,
-            children: [
-              errorMessage && /* @__PURE__ */ jsx57("div", { className: "mb-4 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: errorMessage }),
-              historyError && /* @__PURE__ */ jsx57("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: historyError }),
-              showMissingConfig && /* @__PURE__ */ jsx57("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: missingConfigDetailMessage }),
-              isHistoryLoading && /* @__PURE__ */ jsx57("div", { className: "mb-4 rounded-lg border border-muted px-3 py-2 text-sm text-muted-foreground", children: t("chat.loadingThread") }),
-              messages.length === 0 && !canLoadMoreMessages ? /* @__PURE__ */ jsx57(
-                StartScreen,
-                {
-                  startScreen,
-                  onPromptClick: handlePromptClick,
-                  onPromptEdit: handlePromptEdit,
-                  promptSendDisabled: isSubmissionBlocked,
-                  promptEditDisabled: isPromptEditDisabled
-                }
-              ) : /* @__PURE__ */ jsxs39("div", { className: "space-y-4", children: [
-                canLoadMoreMessages && /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-3 py-1", children: [
-                  /* @__PURE__ */ jsx57("div", { className: "h-px min-w-8 flex-1 bg-border" }),
-                  /* @__PURE__ */ jsx57(
-                    Button,
-                    {
-                      type: "button",
-                      variant: "ghost",
-                      size: "sm",
-                      onClick: handleLoadMoreMessages,
-                      disabled: isLoadingMoreMessages,
-                      className: "h-7 px-2 text-xs font-medium text-muted-foreground hover:text-foreground",
-                      children: isLoadingMoreMessages ? t("chat.loadingMoreMessages") : t("chat.loadMoreMessages")
-                    }
-                  ),
-                  /* @__PURE__ */ jsx57("div", { className: "h-px min-w-8 flex-1 bg-border" })
-                ] }),
-                messages.map((message, index) => {
-                  const messageType = String(message.type);
-                  const isAssistantMessage = messageType === "assistant" || messageType === "ai";
-                  const isStreamingMessage = stream.isLoading && index === messages.length - 1;
-                  const streamingStatus = isAssistantMessage ? getAssistantStreamingStatus(
-                    {
-                      ...message,
-                      lastStreamOutputAt: lastStreamOutputAtRef.current
-                    },
-                    isStreamingMessage,
-                    { now: streamingNow }
-                  ) : null;
-                  if (isAssistantMessage && !hasRenderableAssistantMessage(message) && !streamingStatus) {
-                    return null;
-                  }
-                  const messageContent = typeof message.content === "string" ? message.content : Array.isArray(message.content) ? message.content.map((part) => formatMessageContent(part)).join("") : formatMessageContent(message.content);
-                  const hasPlainRenderableContent = messageContent.trim().length > 0;
-                  const humanMessage = message;
-                  const humanReferences = humanMessage.references ?? [];
-                  const humanAttachments = [
-                    ...humanMessage.fileAssets ?? [],
-                    ...humanMessage.attachments ?? []
-                  ];
-                  const humanRuntimeCapabilityOptions = message.type === "human" ? humanMessage.runtimeCapabilityOptions ?? getRuntimeCapabilityOptionsForSelection(
-                    getRecommendedRuntimeCapabilitiesSelection(
-                      humanMessage.runtimeCapabilities
-                    ),
-                    runtimeCapabilityOptions
-                  ) : [];
-                  const hasHumanAttachments = message.type === "human" && humanAttachments.length > 0;
-                  const canQuoteMessage = message.type === "human" || isAssistantMessage;
-                  const quoteSource = message.type === "human" ? t("chat.youLabel") : assistantTitle;
-                  const messageNavigationId = getMessageNavigationItemId(
-                    message,
-                    index
-                  );
-                  if (!isAssistantMessage && !hasPlainRenderableContent && !hasHumanAttachments && humanRuntimeCapabilityOptions.length === 0 && humanReferences.length === 0) {
-                    return null;
-                  }
-                  return /* @__PURE__ */ jsx57(
-                    "div",
-                    {
-                      ref: (node) => setMessageNavigationAnchor(messageNavigationId, node),
-                      "data-message-navigation-id": messageNavigationId,
-                      className: cn(
-                        "group flex gap-3",
-                        message.type === "human" ? "justify-end" : "justify-start -ml-1"
-                        // AI messages: slightly closer to left
-                      ),
-                      children: /* @__PURE__ */ jsxs39(
-                        "div",
+                        /* @__PURE__ */ jsx58("span", { className: "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-green-500" })
+                      ] }),
+                      /* @__PURE__ */ jsxs40("div", { className: "min-w-0", children: [
+                        /* @__PURE__ */ jsx58(
+                          "h2",
+                          {
+                            className: "text-lg font-semibold truncate",
+                            title: assistantTitle,
+                            children: assistantTitle
+                          }
+                        ),
+                        /* @__PURE__ */ jsx58(
+                          "p",
+                          {
+                            className: "truncate text-xs text-muted-foreground",
+                            title: assistantStatusText,
+                            children: assistantStatusText
+                          }
+                        )
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-1", children: [
+                      taskSummaryAvailable && /* @__PURE__ */ jsx58(
+                        TaskSummaryTrigger,
                         {
-                          className: cn(
-                            "flex flex-col px-3 overflow-hidden",
-                            isAssistantMessage && "min-w-0 flex-1"
-                          ),
-                          children: [
-                            /* @__PURE__ */ jsx57(
-                              "div",
-                              {
-                                ...canQuoteMessage ? {
-                                  "data-quote-message-id": message.id,
-                                  "data-quote-source": quoteSource
-                                } : {},
-                                className: cn(
-                                  "max-w-full rounded-2xl",
-                                  message.type === "human" ? "bg-primary text-primary-foreground px-4 py-2.5" : message.type === "system" ? "bg-muted text-muted-foreground text-xs px-4 py-2.5" : "py-1 text-chat-foreground"
-                                  // AI messages: use chat-specific foreground color
-                                ),
-                                children: isAssistantMessage ? /* @__PURE__ */ jsx57(
-                                  AssistantMessage,
-                                  {
-                                    message: {
-                                      ...message,
-                                      type: "assistant"
-                                    },
-                                    messages: messages.slice(0, index + 1).map(
-                                      (item) => ({
-                                        ...item,
-                                        type: String(item.type) === "ai" ? "assistant" : item.type
-                                      })
-                                    ),
-                                    isStreaming: isStreamingMessage,
-                                    streamingStatus,
-                                    isThreadRunning: currentThreadIsRunning,
-                                    organizationId: stream.organizationId,
-                                    apiUrl: stream.apiUrl,
-                                    pet: effectivePet
-                                  }
-                                ) : /* @__PURE__ */ jsxs39(Fragment9, { children: [
-                                  message.type === "human" && humanRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ jsx57(
-                                    HumanRuntimeCapabilityChips,
-                                    {
-                                      options: humanRuntimeCapabilityOptions
-                                    }
-                                  ),
-                                  message.type === "human" && humanReferences.length > 0 && /* @__PURE__ */ jsx57("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanReferences.map((reference) => /* @__PURE__ */ jsx57(
-                                    ReferenceChip,
-                                    {
-                                      reference,
-                                      variant: "message"
-                                    },
-                                    getReferenceKey(reference)
-                                  )) }),
-                                  message.type === "human" && humanAttachments.length > 0 && /* @__PURE__ */ jsx57("div", { className: "flex flex-wrap gap-1.5 mb-2", children: humanAttachments.map((file, fileIndex) => /* @__PURE__ */ jsxs39(
-                                    "div",
-                                    {
-                                      className: "flex items-center gap-1.5 rounded-md bg-primary-foreground/20 px-2 py-1 text-xs",
-                                      children: [
-                                        /* @__PURE__ */ jsx57(FileText5, { size: 12 }),
-                                        /* @__PURE__ */ jsx57("span", { className: "max-w-[100px] truncate", children: file.originalName ?? file.id })
-                                      ]
-                                    },
-                                    fileIndex
-                                  )) }),
-                                  Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ jsx57(
-                                    "p",
-                                    {
-                                      className: "wrap-break-word text-sm leading-relaxed",
-                                      children: formatMessageContent(part)
-                                    },
-                                    `${part.type}-${partIndex}`
-                                  )) : /* @__PURE__ */ jsx57("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
-                                ] })
-                              }
-                            ),
-                            /* @__PURE__ */ jsx57(
-                              MessageActions,
-                              {
-                                content: messageContent,
-                                isAssistant: isAssistantMessage,
-                                isStreaming: isStreamingMessage,
-                                onRetry: isAssistantMessage && !stream.isLoading && index === messages.length - 1 ? () => handleRetry(index) : void 0
-                              }
-                            )
-                          ]
+                          ...taskSummaryProps,
+                          displayMode: taskSummaryDocked ? "docked" : "popover",
+                          open: taskSummaryOpen,
+                          onOpenChange: handleTaskSummaryOpenChange
                         }
-                      )
-                    },
-                    message.id ?? `${message.type}-${index}`
-                  );
-                }),
-                showLoadingDots && (() => {
-                  const lastMessage = messages[messages.length - 1];
-                  const lastMessageType = lastMessage ? String(lastMessage.type) : "";
-                  const isLastMessageFromAI = lastMessageType === "ai" || lastMessageType === "assistant";
-                  const lastAssistantStatus = isLastMessageFromAI ? getAssistantStreamingStatus(
-                    {
-                      ...lastMessage,
-                      lastStreamOutputAt: lastStreamOutputAtRef.current
-                    },
-                    stream.isLoading,
-                    { now: streamingNow }
-                  ) : null;
-                  if (lastAssistantStatus) return null;
-                  const fallbackStreamingStatus = getAssistantStreamingStatus(
-                    {
-                      status: void 0,
-                      reasoning: void 0,
-                      lastStreamOutputAt: lastStreamOutputAtRef.current
-                    },
-                    stream.isLoading,
-                    { now: streamingNow }
-                  );
-                  return /* @__PURE__ */ jsx57("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ jsx57("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ jsx57(
-                    AssistantStreamingIndicator,
-                    {
-                      status: fallbackStreamingStatus ?? "loading"
-                    }
-                  ) }) });
-                })()
-              ] })
-            ]
-          }
-        ),
-        !isAtBottom && messages.length > 0 && /* @__PURE__ */ jsx57("div", { className: "sticky bottom-20 z-20 flex justify-center px-4 pointer-events-none", children: /* @__PURE__ */ jsx57(
-          Button,
-          {
-            type: "button",
-            size: "icon-sm",
-            variant: hasUpdatesBelow ? "default" : "outline",
-            className: cn(
-              "pointer-events-auto rounded-full shadow-md dark:border-white/20 dark:ring-1 dark:ring-white/15 dark:shadow-[0_0_0_1px_rgba(255,255,255,0.06),0_10px_30px_rgba(0,0,0,0.45)]",
-              hasUpdatesBelow && "animate-bounce"
-            ),
-            onClick: () => scrollToBottom(true, true),
-            "aria-label": t("chat.scrollToBottom"),
-            title: t("chat.scrollToBottom"),
-            children: /* @__PURE__ */ jsx57(ArrowDown2, { size: 16 })
-          }
-        ) }),
-        quoteSelection && /* @__PURE__ */ jsx57(
-          "div",
-          {
-            className: "pointer-events-none fixed z-50",
-            style: {
-              top: `${quoteSelection.top}px`,
-              left: `${quoteSelection.left}px`,
-              transform: "translateX(-50%)"
-            },
-            children: /* @__PURE__ */ jsxs39(
-              Button,
-              {
-                type: "button",
-                size: "sm",
-                variant: "secondary",
-                className: "pointer-events-auto shadow-lg",
-                onMouseDown: (event) => event.preventDefault(),
-                onClick: handleQuoteSelection,
-                "aria-label": t("composer.quoteSelection"),
-                title: t("composer.quoteSelection"),
-                children: [
-                  /* @__PURE__ */ jsx57(Quote, { size: 14 }),
-                  t("composer.quoteSelection")
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxs39(
-          "div",
-          {
-            "data-slot": "chatkit-chat-composer",
-            className: "mx-auto w-full p-2 sticky bottom-0 z-10 bg-background",
-            style: chatColumnStyle,
-            children: [
-              threadErrorMessage && /* @__PURE__ */ jsx57("div", { className: "mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive overflow-auto", children: threadErrorMessage }),
-              /* @__PURE__ */ jsx57(
-                ChatAttachments,
-                {
-                  ref: attachmentsRef,
-                  accept: acceptMimes,
-                  maxCount: composer?.attachments?.maxCount ?? 10,
-                  maxSize: composer?.attachments?.maxSize ?? 100 * 1024 * 1024,
-                  retryUploadLabel: t("chat.retryUpload"),
-                  uploadFile: uploadContextFile,
-                  deleteFile: deleteContextFile,
-                  getFileStatus: getContextFileStatus,
-                  onStateChange: setAttachmentState
+                      ),
+                      canMinimizeToPet && /* @__PURE__ */ jsxs40(Tooltip, { children: [
+                        /* @__PURE__ */ jsx58(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx58("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ jsx58(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: handleMinimizeToPet,
+                            className: cn(
+                              "flex h-8 w-8 cursor-pointer items-center justify-center rounded-md",
+                              "text-muted-foreground hover:text-foreground hover:bg-muted",
+                              "transition-colors duration-150"
+                            ),
+                            "aria-label": t("chat.minimizeToPet"),
+                            children: /* @__PURE__ */ jsx58(Minus, { size: 16 })
+                          }
+                        ) }) }),
+                        /* @__PURE__ */ jsx58(TooltipContent, { side: "bottom", children: t("chat.minimizeToPet") })
+                      ] }),
+                      /* @__PURE__ */ jsxs40(Tooltip, { children: [
+                        /* @__PURE__ */ jsx58(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx58("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ jsx58(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => setPetSettingsOpen(true),
+                            className: cn(
+                              "flex h-8 w-8 cursor-pointer items-center justify-center rounded-md",
+                              "text-muted-foreground hover:text-foreground hover:bg-muted",
+                              "transition-colors duration-150"
+                            ),
+                            "aria-label": t("settings.open"),
+                            children: /* @__PURE__ */ jsx58(Settings2, { size: 16 })
+                          }
+                        ) }) }),
+                        /* @__PURE__ */ jsx58(TooltipContent, { side: "bottom", children: t("settings.open") })
+                      ] }),
+                      history?.enabled !== false && /* @__PURE__ */ jsxs40(Fragment9, { children: [
+                        /* @__PURE__ */ jsxs40(Tooltip, { children: [
+                          /* @__PURE__ */ jsx58(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx58("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ jsx58(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: handleNewThread,
+                              disabled: missingConfig || isHistoryLoading,
+                              className: cn(
+                                "flex h-8 w-8 cursor-pointer items-center justify-center rounded-md",
+                                "text-muted-foreground hover:text-foreground hover:bg-muted",
+                                "transition-colors duration-150",
+                                "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed"
+                              ),
+                              "aria-label": t("history.newThread"),
+                              children: /* @__PURE__ */ jsx58(Pencil4, { size: 16 })
+                            }
+                          ) }) }),
+                          /* @__PURE__ */ jsx58(TooltipContent, { side: "bottom", children: t("history.newThread") })
+                        ] }),
+                        /* @__PURE__ */ jsx58(
+                          HistorySidebar,
+                          {
+                            threads,
+                            currentThreadId: stream.threadId ?? void 0,
+                            onNewThread: handleNewThread,
+                            onSelectThread: handleSelectThread,
+                            onDeleteThread: handleDeleteThread,
+                            showDelete: history?.showDelete !== false,
+                            disabled: missingConfig || isThreadsLoading || isHistoryLoading
+                          }
+                        )
+                      ] })
+                    ] })
+                  ]
                 }
               ),
-              references.length > 0 && /* @__PURE__ */ jsx57("div", { className: "mb-3 flex flex-wrap gap-2", children: references.map((reference) => /* @__PURE__ */ jsx57(
-                ReferenceChip,
-                {
-                  reference,
-                  variant: "composer",
-                  onRemove: () => setReferences(
-                    (previous) => previous.filter(
-                      (item) => getReferenceKey(item) !== getReferenceKey(reference)
-                    )
-                  ),
-                  removeLabel: t("composer.removeReference")
-                },
-                getReferenceKey(reference)
-              )) }),
-              /* @__PURE__ */ jsx57(
-                DetachedRunRuntimeCapabilities,
+              showMessageNavigation && /* @__PURE__ */ jsx58(
+                MessageNavigator,
                 {
-                  options: detachedRunRuntimeCapabilityOptions,
-                  runOnlyLabel: t("composer.capabilities.runOnly"),
-                  removeLabel: t("composer.capabilities.removeRunCapability"),
-                  onRemove: removeRunRuntimeCapability
+                  items: messageNavigationItems,
+                  viewportRef,
+                  getAnchor: getMessageNavigationAnchor,
+                  onNavigate: handleMessageNavigationNavigate,
+                  label: t("message.navigation.label"),
+                  tagsOverflowLabel: (count) => t("message.navigation.moreTags", { count })
                 }
               ),
-              showGoalStatus && /* @__PURE__ */ jsxs39(
+              /* @__PURE__ */ jsxs40(
                 "div",
                 {
-                  className: cn(
-                    "mb-2 flex min-h-10 gap-2 rounded-md border border-border bg-background px-2.5 py-2 text-xs text-foreground shadow-sm",
-                    isGoalObjectiveExpanded ? "items-start" : "items-center"
-                  ),
+                  "data-slot": "chatkit-chat-content",
+                  className: "mx-auto w-full flex-1 p-4",
+                  style: chatColumnStyle,
                   children: [
-                    /* @__PURE__ */ jsx57(
-                      Target2,
+                    errorMessage && /* @__PURE__ */ jsx58("div", { className: "mb-4 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: errorMessage }),
+                    historyError && /* @__PURE__ */ jsx58("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: historyError }),
+                    showMissingConfig && /* @__PURE__ */ jsx58("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: missingConfigDetailMessage }),
+                    isHistoryLoading && /* @__PURE__ */ jsx58("div", { className: "mb-4 rounded-lg border border-muted px-3 py-2 text-sm text-muted-foreground", children: t("chat.loadingThread") }),
+                    messages.length === 0 && !canLoadMoreMessages ? /* @__PURE__ */ jsx58(
+                      StartScreen,
                       {
-                        className: cn(
-                          "size-4 shrink-0 text-muted-foreground",
-                          isGoalObjectiveExpanded && "mt-1"
-                        )
+                        startScreen,
+                        onPromptClick: handlePromptClick,
+                        onPromptEdit: handlePromptEdit,
+                        promptSendDisabled: isSubmissionBlocked,
+                        promptEditDisabled: isPromptEditDisabled
                       }
-                    ),
-                    /* @__PURE__ */ jsxs39("div", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ jsxs39("div", { className: "flex min-w-0 items-center gap-2", children: [
-                        /* @__PURE__ */ jsx57("span", { className: "font-medium", children: t("chat.goal.label") }),
-                        threadGoal && /* @__PURE__ */ jsx57("span", { className: "shrink-0 rounded-md bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground", children: t(`chat.goal.status.${threadGoal.status}`) }),
-                        isGoalLoading && /* @__PURE__ */ jsx57(Loader29, { className: "size-3 animate-spin text-muted-foreground" })
-                      ] }),
-                      /* @__PURE__ */ jsx57(
-                        "div",
-                        {
-                          className: cn(
-                            "mt-0.5 text-muted-foreground",
-                            threadGoal?.objective && !goalError && isGoalObjectiveExpanded ? "whitespace-pre-wrap break-words" : "truncate"
-                          ),
-                          children: goalError || threadGoal?.objective
-                        }
-                      ),
-                      threadGoal && /* @__PURE__ */ jsx57("div", { className: "mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-muted-foreground", children: /* @__PURE__ */ jsx57("span", { children: t("chat.goal.elapsed", {
-                        elapsed: formatGoalElapsed(displayedGoalElapsedSeconds)
-                      }) }) })
-                    ] }),
-                    threadGoal && /* @__PURE__ */ jsxs39("div", { className: "flex shrink-0 items-center gap-1", children: [
-                      /* @__PURE__ */ jsxs39(Tooltip, { children: [
-                        /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx57(
+                    ) : /* @__PURE__ */ jsxs40("div", { className: "space-y-4", children: [
+                      canLoadMoreMessages && /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-3 py-1", children: [
+                        /* @__PURE__ */ jsx58("div", { className: "h-px min-w-8 flex-1 bg-border" }),
+                        /* @__PURE__ */ jsx58(
                           Button,
                           {
                             type: "button",
                             variant: "ghost",
-                            size: "icon-xs",
-                            disabled: isGoalLoading,
-                            onClick: () => {
-                              const prefix = "/goal edit ";
-                              setComposerText(`${prefix}${threadGoal.objective}`);
-                            },
-                            children: /* @__PURE__ */ jsx57(Pencil4, { className: "size-3" })
+                            size: "sm",
+                            onClick: handleLoadMoreMessages,
+                            disabled: isLoadingMoreMessages,
+                            className: "h-7 px-2 text-xs font-medium text-muted-foreground hover:text-foreground",
+                            children: isLoadingMoreMessages ? t("chat.loadingMoreMessages") : t("chat.loadMoreMessages")
                           }
-                        ) }),
-                        /* @__PURE__ */ jsx57(TooltipContent, { children: t("chat.goal.edit") })
-                      ] }),
-                      /* @__PURE__ */ jsxs39(Tooltip, { children: [
-                        /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx57(
-                          Button,
-                          {
-                            type: "button",
-                            variant: "ghost",
-                            size: "icon-xs",
-                            disabled: isGoalLoading,
-                            onClick: () => void handleGoalCommand({
-                              args: threadGoal.status === "paused" ? "resume" : "pause",
-                              commandSource: {
-                                type: "slash_command",
-                                name: "goal",
-                                source: "runtime",
-                                executionType: "insert_invocation"
-                              }
-                            }),
-                            children: threadGoal.status === "paused" ? /* @__PURE__ */ jsx57(Play, { className: "size-3" }) : /* @__PURE__ */ jsx57(Pause, { className: "size-3" })
-                          }
-                        ) }),
-                        /* @__PURE__ */ jsx57(TooltipContent, { children: threadGoal.status === "paused" ? t("chat.goal.resume") : t("chat.goal.pause") })
+                        ),
+                        /* @__PURE__ */ jsx58("div", { className: "h-px min-w-8 flex-1 bg-border" })
                       ] }),
-                      /* @__PURE__ */ jsxs39(Tooltip, { children: [
-                        /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx57(
-                          Button,
+                      messages.map((message, index) => {
+                        const messageType = String(message.type);
+                        const isAssistantMessage = messageType === "assistant" || messageType === "ai";
+                        const isStreamingMessage = stream.isLoading && index === messages.length - 1;
+                        const streamingStatus = isAssistantMessage ? getAssistantStreamingStatus(
                           {
-                            type: "button",
-                            variant: "ghost",
-                            size: "icon-xs",
-                            disabled: isGoalLoading,
-                            onClick: () => void handleGoalCommand({
-                              args: "clear",
-                              commandSource: {
-                                type: "slash_command",
-                                name: "goal",
-                                source: "runtime",
-                                executionType: "insert_invocation"
-                              }
-                            }),
-                            children: /* @__PURE__ */ jsx57(Trash23, { className: "size-3" })
-                          }
-                        ) }),
-                        /* @__PURE__ */ jsx57(TooltipContent, { children: t("chat.goal.clear") })
-                      ] }),
-                      threadGoal.objective && !goalError && /* @__PURE__ */ jsxs39(Tooltip, { children: [
-                        /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx57(
-                          Button,
+                            ...message,
+                            lastStreamOutputAt: lastStreamOutputAtRef.current
+                          },
+                          isStreamingMessage,
+                          { now: streamingNow }
+                        ) : null;
+                        if (isAssistantMessage && !hasRenderableAssistantMessage(message) && !streamingStatus) {
+                          return null;
+                        }
+                        const messageContent = typeof message.content === "string" ? message.content : Array.isArray(message.content) ? message.content.map((part) => formatMessageContent(part)).join("") : formatMessageContent(message.content);
+                        const hasPlainRenderableContent = messageContent.trim().length > 0;
+                        const humanMessage = message;
+                        const humanReferences = humanMessage.references ?? [];
+                        const humanAttachments = [
+                          ...humanMessage.fileAssets ?? [],
+                          ...humanMessage.attachments ?? []
+                        ];
+                        const humanRuntimeCapabilityOptions = message.type === "human" ? humanMessage.runtimeCapabilityOptions ?? getRuntimeCapabilityOptionsForSelection(
+                          getRecommendedRuntimeCapabilitiesSelection(
+                            humanMessage.runtimeCapabilities
+                          ),
+                          runtimeCapabilityOptions
+                        ) : [];
+                        const hasHumanAttachments = message.type === "human" && humanAttachments.length > 0;
+                        const canQuoteMessage = message.type === "human" || isAssistantMessage;
+                        const quoteSource = message.type === "human" ? t("chat.youLabel") : assistantTitle;
+                        const messageNavigationId = getMessageNavigationItemId(
+                          message,
+                          index
+                        );
+                        if (!isAssistantMessage && !hasPlainRenderableContent && !hasHumanAttachments && humanRuntimeCapabilityOptions.length === 0 && humanReferences.length === 0) {
+                          return null;
+                        }
+                        return /* @__PURE__ */ jsx58(
+                          "div",
                           {
-                            type: "button",
-                            variant: "ghost",
-                            size: "icon-xs",
-                            "aria-expanded": isGoalObjectiveExpanded,
-                            "aria-label": isGoalObjectiveExpanded ? t("chat.goal.collapseObjective") : t("chat.goal.expandObjective"),
-                            onClick: () => setIsGoalObjectiveExpanded((expanded) => !expanded),
-                            children: /* @__PURE__ */ jsx57(
-                              ChevronDown5,
+                            ref: (node) => setMessageNavigationAnchor(messageNavigationId, node),
+                            "data-message-navigation-id": messageNavigationId,
+                            className: cn(
+                              "group flex gap-3",
+                              message.type === "human" ? "justify-end" : "justify-start -ml-1"
+                              // AI messages: slightly closer to left
+                            ),
+                            children: /* @__PURE__ */ jsxs40(
+                              "div",
                               {
                                 className: cn(
-                                  "size-3 transition-transform",
-                                  isGoalObjectiveExpanded && "rotate-180"
-                                )
+                                  "flex flex-col px-3 overflow-hidden",
+                                  isAssistantMessage && "min-w-0 flex-1"
+                                ),
+                                children: [
+                                  /* @__PURE__ */ jsx58(
+                                    "div",
+                                    {
+                                      ...canQuoteMessage ? {
+                                        "data-quote-message-id": message.id,
+                                        "data-quote-source": quoteSource
+                                      } : {},
+                                      className: cn(
+                                        "max-w-full rounded-2xl",
+                                        message.type === "human" ? "bg-primary text-primary-foreground px-4 py-2.5" : message.type === "system" ? "bg-muted text-muted-foreground text-xs px-4 py-2.5" : "py-1 text-chat-foreground"
+                                        // AI messages: use chat-specific foreground color
+                                      ),
+                                      children: isAssistantMessage ? /* @__PURE__ */ jsx58(
+                                        AssistantMessage,
+                                        {
+                                          message: {
+                                            ...message,
+                                            type: "assistant"
+                                          },
+                                          messages: messages.slice(0, index + 1).map(
+                                            (item) => ({
+                                              ...item,
+                                              type: String(item.type) === "ai" ? "assistant" : item.type
+                                            })
+                                          ),
+                                          isStreaming: isStreamingMessage,
+                                          streamingStatus,
+                                          isThreadRunning: currentThreadIsRunning,
+                                          organizationId: stream.organizationId,
+                                          apiUrl: stream.apiUrl,
+                                          pet: effectivePet
+                                        }
+                                      ) : /* @__PURE__ */ jsxs40(Fragment9, { children: [
+                                        message.type === "human" && humanRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ jsx58(
+                                          HumanRuntimeCapabilityChips,
+                                          {
+                                            options: humanRuntimeCapabilityOptions
+                                          }
+                                        ),
+                                        message.type === "human" && humanReferences.length > 0 && /* @__PURE__ */ jsx58("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanReferences.map((reference) => /* @__PURE__ */ jsx58(
+                                          ReferenceChip,
+                                          {
+                                            reference,
+                                            variant: "message"
+                                          },
+                                          getReferenceKey(reference)
+                                        )) }),
+                                        message.type === "human" && humanAttachments.length > 0 && /* @__PURE__ */ jsx58("div", { className: "flex flex-wrap gap-1.5 mb-2", children: humanAttachments.map((file, fileIndex) => /* @__PURE__ */ jsxs40(
+                                          "div",
+                                          {
+                                            className: "flex items-center gap-1.5 rounded-md bg-primary-foreground/20 px-2 py-1 text-xs",
+                                            children: [
+                                              /* @__PURE__ */ jsx58(FileText5, { size: 12 }),
+                                              /* @__PURE__ */ jsx58("span", { className: "max-w-[100px] truncate", children: file.originalName ?? file.id })
+                                            ]
+                                          },
+                                          fileIndex
+                                        )) }),
+                                        Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ jsx58(
+                                          "p",
+                                          {
+                                            className: "wrap-break-word text-sm leading-relaxed",
+                                            children: formatMessageContent(part)
+                                          },
+                                          `${part.type}-${partIndex}`
+                                        )) : /* @__PURE__ */ jsx58("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
+                                      ] })
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx58(
+                                    MessageActions,
+                                    {
+                                      content: messageContent,
+                                      isAssistant: isAssistantMessage,
+                                      isStreaming: isStreamingMessage,
+                                      onRetry: isAssistantMessage && !stream.isLoading && index === messages.length - 1 ? () => handleRetry(index) : void 0
+                                    }
+                                  )
+                                ]
                               }
                             )
+                          },
+                          message.id ?? `${message.type}-${index}`
+                        );
+                      }),
+                      showLoadingDots && (() => {
+                        const lastMessage = messages[messages.length - 1];
+                        const lastMessageType = lastMessage ? String(lastMessage.type) : "";
+                        const isLastMessageFromAI = lastMessageType === "ai" || lastMessageType === "assistant";
+                        const lastAssistantStatus = isLastMessageFromAI ? getAssistantStreamingStatus(
+                          {
+                            ...lastMessage,
+                            lastStreamOutputAt: lastStreamOutputAtRef.current
+                          },
+                          stream.isLoading,
+                          { now: streamingNow }
+                        ) : null;
+                        if (lastAssistantStatus) return null;
+                        const fallbackStreamingStatus = getAssistantStreamingStatus(
+                          {
+                            status: void 0,
+                            reasoning: void 0,
+                            lastStreamOutputAt: lastStreamOutputAtRef.current
+                          },
+                          stream.isLoading,
+                          { now: streamingNow }
+                        );
+                        return /* @__PURE__ */ jsx58("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ jsx58("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ jsx58(
+                          AssistantStreamingIndicator,
+                          {
+                            status: fallbackStreamingStatus ?? "loading"
                           }
-                        ) }),
-                        /* @__PURE__ */ jsx57(TooltipContent, { children: isGoalObjectiveExpanded ? t("chat.goal.collapseObjective") : t("chat.goal.expandObjective") })
-                      ] })
+                        ) }) });
+                      })()
                     ] })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx57(
-                PendingRuntimeServices,
-                {
-                  state: stream.runtimeActivities.sandboxServices,
-                  onStopService: (serviceId) => stream.stopRuntimeActivityItem("sandbox-services", serviceId),
-                  attachToComposer: !hasPendingTodos && !hasPendingFollowUps,
-                  className: hasPendingTodos || hasPendingFollowUps ? "mb-2" : void 0
-                }
-              ),
-              /* @__PURE__ */ jsx57(
-                PendingTodos,
-                {
-                  snapshot: stream.todos,
-                  attachToComposer: !hasPendingFollowUps,
-                  className: hasPendingFollowUps ? "mb-2" : void 0
-                }
-              ),
-              /* @__PURE__ */ jsx57(
-                PendingFollowUps,
+              !isAtBottom && messages.length > 0 && /* @__PURE__ */ jsx58("div", { className: "sticky bottom-20 z-20 flex justify-center px-4 pointer-events-none", children: /* @__PURE__ */ jsx58(
+                Button,
                 {
-                  items: pendingFollowUps,
-                  isLoading: stream.isLoading,
-                  onPromoteToSteer: (id) => stream.promotePendingFollowUpToSteer(id),
-                  canSendNow: stream.canSendPendingFollowUpNow,
-                  onSendNow: (id) => stream.sendPendingFollowUpNow(id),
-                  onEdit: handleEditPendingFollowUp,
-                  onRemove: stream.removePendingFollowUp,
-                  attachToComposer: true
-                }
-              ),
-              /* @__PURE__ */ jsx57(
-                RequestUserInputPanel,
-                {
-                  request: stream.pendingRequestUserInput,
-                  onSubmit: stream.submitRequestUserInput,
-                  onDismiss: stream.stop,
-                  attachToComposer: true
-                }
-              ),
-              /* @__PURE__ */ jsx57(
-                HITLApprovalPanel,
-                {
-                  request: stream.pendingHITLRequest,
-                  onSubmit: stream.submitHITLDecision,
-                  onDismiss: stream.stop,
-                  attachToComposer: true
+                  type: "button",
+                  size: "icon-sm",
+                  variant: hasUpdatesBelow ? "default" : "outline",
+                  className: cn(
+                    "pointer-events-auto rounded-full shadow-md dark:border-white/20 dark:ring-1 dark:ring-white/15 dark:shadow-[0_0_0_1px_rgba(255,255,255,0.06),0_10px_30px_rgba(0,0,0,0.45)]",
+                    hasUpdatesBelow && "animate-bounce"
+                  ),
+                  onClick: () => scrollToBottom(true, true),
+                  "aria-label": t("chat.scrollToBottom"),
+                  title: t("chat.scrollToBottom"),
+                  children: /* @__PURE__ */ jsx58(ArrowDown2, { size: 16 })
                 }
-              ),
-              runtimeCapabilityPalette && /* @__PURE__ */ jsx57(
-                SlashPalette,
+              ) }),
+              quoteSelection && /* @__PURE__ */ jsx58(
+                "div",
                 {
-                  palette: runtimeCapabilityPalette,
-                  options: slashPaletteOptions,
-                  paletteRef: slashPaletteRef,
-                  optionRefs: slashPaletteOptionRefs,
-                  panelRoundedClass: getPanelRoundedClass(theme.radius),
-                  itemRoundedClass: getMenuItemRoundedClass(theme.radius),
-                  emptyLabel: slashPaletteEmptyLabel,
-                  capabilityEmptyLabels: slashPaletteCapabilityEmptyLabels,
-                  onSelect: selectSlashPaletteOption
+                  className: "pointer-events-none fixed z-50",
+                  style: {
+                    top: `${quoteSelection.top}px`,
+                    left: `${quoteSelection.left}px`,
+                    transform: "translateX(-50%)"
+                  },
+                  children: /* @__PURE__ */ jsxs40(
+                    Button,
+                    {
+                      type: "button",
+                      size: "sm",
+                      variant: "secondary",
+                      className: "pointer-events-auto shadow-lg",
+                      onMouseDown: (event) => event.preventDefault(),
+                      onClick: handleQuoteSelection,
+                      "aria-label": t("composer.quoteSelection"),
+                      title: t("composer.quoteSelection"),
+                      children: [
+                        /* @__PURE__ */ jsx58(Quote, { size: 14 }),
+                        t("composer.quoteSelection")
+                      ]
+                    }
+                  )
                 }
               ),
-              /* @__PURE__ */ jsx57("form", { className: "flex items-end", onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs39(
+              /* @__PURE__ */ jsxs40(
                 "div",
                 {
-                  "data-slot": "composer-input-shell",
-                  "data-layout": isComposerStacked ? "stacked" : "inline",
-                  className: cn(
-                    "relative flex flex-1 overflow-hidden",
-                    "bg-background border border-border shadow-sm",
-                    isComposerStacked ? "min-h-[5.5rem] px-1.5 pt-1.5 pb-12" : "min-h-12 px-1.5 py-1",
-                    "focus-within:border-muted-foreground/30 focus-within:shadow-md",
-                    "transition-[min-height,padding,border-radius,box-shadow,border-color] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]",
-                    composerInputRoundedClass
-                  ),
+                  "data-slot": "chatkit-chat-composer",
+                  className: "mx-auto w-full p-2 sticky bottom-0 z-10 bg-background",
+                  style: chatColumnStyle,
                   children: [
-                    /* @__PURE__ */ jsx57(
-                      "div",
+                    threadErrorMessage && /* @__PURE__ */ jsx58("div", { className: "mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive overflow-auto", children: threadErrorMessage }),
+                    /* @__PURE__ */ jsx58(
+                      ChatAttachments,
                       {
-                        ref: composerInputRef,
-                        role: "textbox",
-                        "aria-multiline": "true",
-                        "aria-disabled": missingConfig || isHistoryLoading || hasPendingInteractiveRequest,
-                        contentEditable: !(missingConfig || isHistoryLoading || hasPendingInteractiveRequest),
-                        suppressContentEditableWarning: true,
-                        onInput: handleComposerInput,
-                        onCompositionEnd: handleComposerCompositionEnd,
-                        onSelect: handleComposerSelect,
-                        onPaste: handleComposerPaste,
-                        onKeyDown: handleComposerKeyDown,
-                        "data-placeholder": inputPlaceholder,
-                        className: cn(
-                          "min-h-8 max-h-32 w-full overflow-hidden whitespace-pre-wrap break-words bg-transparent text-sm leading-5 text-foreground outline-none transition-[padding,min-height] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]",
-                          isComposerStacked ? "px-2 py-1.5" : "py-1 pr-11 pl-11 mt-1",
-                          "empty:before:pointer-events-none empty:before:text-muted-foreground empty:before:content-[attr(data-placeholder)]",
-                          (missingConfig || isHistoryLoading || hasPendingInteractiveRequest) && "cursor-not-allowed opacity-50"
+                        ref: attachmentsRef,
+                        accept: acceptMimes,
+                        maxCount: composer?.attachments?.maxCount ?? 10,
+                        maxSize: composer?.attachments?.maxSize ?? 100 * 1024 * 1024,
+                        retryUploadLabel: t("chat.retryUpload"),
+                        uploadFile: uploadContextFile,
+                        deleteFile: deleteContextFile,
+                        getFileStatus: getContextFileStatus,
+                        onStateChange: setAttachmentState
+                      }
+                    ),
+                    references.length > 0 && /* @__PURE__ */ jsx58("div", { className: "mb-3 flex flex-wrap gap-2", children: references.map((reference) => /* @__PURE__ */ jsx58(
+                      ReferenceChip,
+                      {
+                        reference,
+                        variant: "composer",
+                        onRemove: () => setReferences(
+                          (previous) => previous.filter(
+                            (item) => getReferenceKey(item) !== getReferenceKey(reference)
+                          )
                         ),
-                        children: renderedComposerParts.map(
-                          (part, index) => part.type === "text" ? /* @__PURE__ */ jsx57(React52.Fragment, { children: part.text }, `text-${index}`) : /* @__PURE__ */ jsx57(ComposerCapabilityToken, { part }, part.key)
-                        )
+                        removeLabel: t("composer.removeReference")
                       },
-                      composerDomVersion
+                      getReferenceKey(reference)
+                    )) }),
+                    /* @__PURE__ */ jsx58(
+                      DetachedRunRuntimeCapabilities,
+                      {
+                        options: detachedRunRuntimeCapabilityOptions,
+                        runOnlyLabel: t("composer.capabilities.runOnly"),
+                        removeLabel: t("composer.capabilities.removeRunCapability"),
+                        onRemove: removeRunRuntimeCapability
+                      }
                     ),
-                    /* @__PURE__ */ jsxs39(
+                    showGoalStatus && /* @__PURE__ */ jsxs40(
                       "div",
                       {
-                        "data-slot": "composer-action-bar",
-                        className: "pointer-events-none absolute inset-x-1.5 bottom-1 flex min-h-10 items-center justify-between gap-2",
+                        className: cn(
+                          "mb-2 flex min-h-10 gap-2 rounded-md border border-border bg-background px-2.5 py-2 text-xs text-foreground shadow-sm",
+                          isGoalObjectiveExpanded ? "items-start" : "items-center"
+                        ),
                         children: [
-                          /* @__PURE__ */ jsxs39("div", { className: "pointer-events-none flex min-w-0 flex-1 items-center gap-1.5", children: [
-                            /* @__PURE__ */ jsx57("div", { className: "pointer-events-auto flex shrink-0 items-center gap-1.5", children: /* @__PURE__ */ jsx57(
-                              ComposerMenu,
+                          /* @__PURE__ */ jsx58(
+                            Target3,
+                            {
+                              className: cn(
+                                "size-4 shrink-0 text-muted-foreground",
+                                isGoalObjectiveExpanded && "mt-1"
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs40("div", { className: "min-w-0 flex-1", children: [
+                            /* @__PURE__ */ jsxs40("div", { className: "flex min-w-0 items-center gap-2", children: [
+                              /* @__PURE__ */ jsx58("span", { className: "font-medium", children: t("chat.goal.label") }),
+                              threadGoal && /* @__PURE__ */ jsx58("span", { className: "shrink-0 rounded-md bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground", children: t(`chat.goal.status.${threadGoal.status}`) }),
+                              isGoalLoading && /* @__PURE__ */ jsx58(Loader210, { className: "size-3 animate-spin text-muted-foreground" })
+                            ] }),
+                            /* @__PURE__ */ jsx58(
+                              "div",
                               {
-                                composer,
-                                onAttachmentClick: handleAttachmentClick,
-                                onToolSelect: handleToolSelect,
-                                selectedTool,
-                                planModeEnabled,
-                                onPlanModeChange: setPlanModeEnabled,
-                                goalCommandAvailable,
-                                goalPanelOpen: isGoalModeOpen,
-                                onGoalPanelOpenChange: handleGoalPanelOpenChange,
-                                runtimeCapabilities: runtimeCapabilitiesReady ? runtimeCapabilities : null,
-                                selectedRuntimeCapabilities: effectiveSessionRuntimeCapabilities,
-                                onRuntimeCapabilityToggle: handleSessionRuntimeCapabilityToggle,
-                                disabled: missingConfig || isHistoryLoading || hasPendingInteractiveRequest
+                                className: cn(
+                                  "mt-0.5 text-muted-foreground",
+                                  threadGoal?.objective && !goalError && isGoalObjectiveExpanded ? "whitespace-pre-wrap break-words" : "truncate"
+                                ),
+                                children: goalError || threadGoal?.objective
                               }
-                            ) }),
-                            selectedTool && /* @__PURE__ */ jsxs39("span", { className: "pointer-events-auto inline-flex h-8 min-w-0 max-w-[14rem] shrink items-center gap-1.5 rounded-full bg-primary/10 px-2 text-xs font-medium text-primary transition-all duration-200", children: [
-                              /* @__PURE__ */ jsx57("span", { className: "truncate", children: selectedTool.shortLabel ?? selectedTool.label }),
-                              /* @__PURE__ */ jsx57(
-                                "button",
+                            ),
+                            threadGoal && /* @__PURE__ */ jsx58("div", { className: "mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-muted-foreground", children: /* @__PURE__ */ jsx58("span", { children: t("chat.goal.elapsed", {
+                              elapsed: formatGoalElapsed(displayedGoalElapsedSeconds)
+                            }) }) })
+                          ] }),
+                          threadGoal && /* @__PURE__ */ jsxs40("div", { className: "flex shrink-0 items-center gap-1", children: [
+                            /* @__PURE__ */ jsxs40(Tooltip, { children: [
+                              /* @__PURE__ */ jsx58(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx58(
+                                Button,
                                 {
                                   type: "button",
-                                  onClick: () => setSelectedTool(null),
-                                  className: "shrink-0 rounded-full p-0.5 text-primary/70 hover:bg-primary/10 hover:text-primary",
-                                  children: /* @__PURE__ */ jsx57(X7, { size: 12 })
+                                  variant: "ghost",
+                                  size: "icon-xs",
+                                  disabled: isGoalLoading,
+                                  onClick: () => {
+                                    const prefix = "/goal edit ";
+                                    setComposerText(`${prefix}${threadGoal.objective}`);
+                                  },
+                                  children: /* @__PURE__ */ jsx58(Pencil4, { className: "size-3" })
                                 }
-                              )
-                            ] })
-                          ] }),
-                          /* @__PURE__ */ jsx57("div", { className: "pointer-events-auto shrink-0", children: /* @__PURE__ */ jsx57(
-                            SendButton,
-                            {
-                              disabled: isSendDisabled,
-                              isLoading: stream.isLoading,
-                              showStop: stream.isLoading && (!trimmedDraft || hasPendingInteractiveRequest),
-                              onStop: () => stream.stop(),
-                              stopLabel: t("chat.stop"),
-                              sendLabel: t("chat.send"),
-                              shortcuts: stream.isLoading && trimmedDraft ? [
+                              ) }),
+                              /* @__PURE__ */ jsx58(TooltipContent, { children: t("chat.goal.edit") })
+                            ] }),
+                            /* @__PURE__ */ jsxs40(Tooltip, { children: [
+                              /* @__PURE__ */ jsx58(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx58(
+                                Button,
+                                {
+                                  type: "button",
+                                  variant: "ghost",
+                                  size: "icon-xs",
+                                  disabled: isGoalLoading,
+                                  onClick: () => void handleGoalCommand({
+                                    args: threadGoal.status === "paused" ? "resume" : "pause",
+                                    commandSource: {
+                                      type: "slash_command",
+                                      name: "goal",
+                                      source: "runtime",
+                                      executionType: "insert_invocation"
+                                    }
+                                  }),
+                                  children: threadGoal.status === "paused" ? /* @__PURE__ */ jsx58(Play, { className: "size-3" }) : /* @__PURE__ */ jsx58(Pause, { className: "size-3" })
+                                }
+                              ) }),
+                              /* @__PURE__ */ jsx58(TooltipContent, { children: threadGoal.status === "paused" ? t("chat.goal.resume") : t("chat.goal.pause") })
+                            ] }),
+                            /* @__PURE__ */ jsxs40(Tooltip, { children: [
+                              /* @__PURE__ */ jsx58(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx58(
+                                Button,
                                 {
-                                  label: t("chat.followUps.queue"),
-                                  keys: "Enter"
+                                  type: "button",
+                                  variant: "ghost",
+                                  size: "icon-xs",
+                                  disabled: isGoalLoading,
+                                  onClick: () => void handleGoalCommand({
+                                    args: "clear",
+                                    commandSource: {
+                                      type: "slash_command",
+                                      name: "goal",
+                                      source: "runtime",
+                                      executionType: "insert_invocation"
+                                    }
+                                  }),
+                                  children: /* @__PURE__ */ jsx58(Trash23, { className: "size-3" })
                                 }
-                              ] : void 0
+                              ) }),
+                              /* @__PURE__ */ jsx58(TooltipContent, { children: t("chat.goal.clear") })
+                            ] }),
+                            threadGoal.objective && !goalError && /* @__PURE__ */ jsxs40(Tooltip, { children: [
+                              /* @__PURE__ */ jsx58(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx58(
+                                Button,
+                                {
+                                  type: "button",
+                                  variant: "ghost",
+                                  size: "icon-xs",
+                                  "aria-expanded": isGoalObjectiveExpanded,
+                                  "aria-label": isGoalObjectiveExpanded ? t("chat.goal.collapseObjective") : t("chat.goal.expandObjective"),
+                                  onClick: () => setIsGoalObjectiveExpanded((expanded) => !expanded),
+                                  children: /* @__PURE__ */ jsx58(
+                                    ChevronDown5,
+                                    {
+                                      className: cn(
+                                        "size-3 transition-transform",
+                                        isGoalObjectiveExpanded && "rotate-180"
+                                      )
+                                    }
+                                  )
+                                }
+                              ) }),
+                              /* @__PURE__ */ jsx58(TooltipContent, { children: isGoalObjectiveExpanded ? t("chat.goal.collapseObjective") : t("chat.goal.expandObjective") })
+                            ] })
+                          ] })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx58(
+                      PendingRuntimeServices,
+                      {
+                        state: stream.runtimeActivities.sandboxServices,
+                        onStopService: (serviceId) => stream.stopRuntimeActivityItem("sandbox-services", serviceId),
+                        attachToComposer: !hasPendingTodos && !hasPendingFollowUps,
+                        className: hasPendingTodos || hasPendingFollowUps ? "mb-2" : void 0
+                      }
+                    ),
+                    /* @__PURE__ */ jsx58(
+                      PendingTodos,
+                      {
+                        snapshot: stream.todos,
+                        attachToComposer: !hasPendingFollowUps,
+                        className: hasPendingFollowUps ? "mb-2" : void 0
+                      }
+                    ),
+                    /* @__PURE__ */ jsx58(
+                      PendingFollowUps,
+                      {
+                        items: pendingFollowUps,
+                        isLoading: stream.isLoading,
+                        onPromoteToSteer: (id) => stream.promotePendingFollowUpToSteer(id),
+                        canSendNow: stream.canSendPendingFollowUpNow,
+                        onSendNow: (id) => stream.sendPendingFollowUpNow(id),
+                        onEdit: handleEditPendingFollowUp,
+                        onRemove: stream.removePendingFollowUp,
+                        attachToComposer: true
+                      }
+                    ),
+                    /* @__PURE__ */ jsx58(
+                      RequestUserInputPanel,
+                      {
+                        request: stream.pendingRequestUserInput,
+                        onSubmit: stream.submitRequestUserInput,
+                        onDismiss: stream.stop,
+                        attachToComposer: true
+                      }
+                    ),
+                    /* @__PURE__ */ jsx58(
+                      HITLApprovalPanel,
+                      {
+                        request: stream.pendingHITLRequest,
+                        onSubmit: stream.submitHITLDecision,
+                        onDismiss: stream.stop,
+                        attachToComposer: true
+                      }
+                    ),
+                    runtimeCapabilityPalette && /* @__PURE__ */ jsx58(
+                      SlashPalette,
+                      {
+                        palette: runtimeCapabilityPalette,
+                        options: slashPaletteOptions,
+                        paletteRef: slashPaletteRef,
+                        optionRefs: slashPaletteOptionRefs,
+                        panelRoundedClass: getPanelRoundedClass(theme.radius),
+                        itemRoundedClass: getMenuItemRoundedClass(theme.radius),
+                        emptyLabel: slashPaletteEmptyLabel,
+                        capabilityEmptyLabels: slashPaletteCapabilityEmptyLabels,
+                        onSelect: selectSlashPaletteOption
+                      }
+                    ),
+                    /* @__PURE__ */ jsx58("form", { className: "flex items-end", onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs40(
+                      "div",
+                      {
+                        "data-slot": "composer-input-shell",
+                        "data-layout": isComposerStacked ? "stacked" : "inline",
+                        className: cn(
+                          "relative flex flex-1 overflow-hidden",
+                          "bg-background border border-border shadow-sm",
+                          isComposerStacked ? "min-h-[5.5rem] px-1.5 pt-1.5 pb-12" : "min-h-12 px-1.5 py-1",
+                          "focus-within:border-muted-foreground/30 focus-within:shadow-md",
+                          "transition-[min-height,padding,border-radius,box-shadow,border-color] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]",
+                          composerInputRoundedClass
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx58(
+                            "div",
+                            {
+                              ref: composerInputRef,
+                              role: "textbox",
+                              "aria-multiline": "true",
+                              "aria-disabled": missingConfig || isHistoryLoading || hasPendingInteractiveRequest,
+                              contentEditable: !(missingConfig || isHistoryLoading || hasPendingInteractiveRequest),
+                              suppressContentEditableWarning: true,
+                              onInput: handleComposerInput,
+                              onCompositionEnd: handleComposerCompositionEnd,
+                              onSelect: handleComposerSelect,
+                              onPaste: handleComposerPaste,
+                              onKeyDown: handleComposerKeyDown,
+                              "data-placeholder": inputPlaceholder,
+                              className: cn(
+                                "min-h-8 max-h-32 w-full overflow-hidden whitespace-pre-wrap break-words bg-transparent text-sm leading-5 text-foreground outline-none transition-[padding,min-height] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]",
+                                isComposerStacked ? "px-2 py-1.5" : "py-1 pr-11 pl-11 mt-1",
+                                "empty:before:pointer-events-none empty:before:text-muted-foreground empty:before:content-[attr(data-placeholder)]",
+                                (missingConfig || isHistoryLoading || hasPendingInteractiveRequest) && "cursor-not-allowed opacity-50"
+                              ),
+                              children: renderedComposerParts.map(
+                                (part, index) => part.type === "text" ? /* @__PURE__ */ jsx58(React54.Fragment, { children: part.text }, `text-${index}`) : /* @__PURE__ */ jsx58(ComposerCapabilityToken, { part }, part.key)
+                              )
+                            },
+                            composerDomVersion
+                          ),
+                          /* @__PURE__ */ jsxs40(
+                            "div",
+                            {
+                              "data-slot": "composer-action-bar",
+                              className: "pointer-events-none absolute inset-x-1.5 bottom-1 flex min-h-10 items-center justify-between gap-2",
+                              children: [
+                                /* @__PURE__ */ jsxs40("div", { className: "pointer-events-none flex min-w-0 flex-1 items-center gap-1.5", children: [
+                                  /* @__PURE__ */ jsx58("div", { className: "pointer-events-auto flex shrink-0 items-center gap-1.5", children: /* @__PURE__ */ jsx58(
+                                    ComposerMenu,
+                                    {
+                                      composer,
+                                      onAttachmentClick: handleAttachmentClick,
+                                      onToolSelect: handleToolSelect,
+                                      selectedTool,
+                                      planModeEnabled,
+                                      onPlanModeChange: setPlanModeEnabled,
+                                      goalCommandAvailable,
+                                      goalPanelOpen: isGoalModeOpen,
+                                      onGoalPanelOpenChange: handleGoalPanelOpenChange,
+                                      runtimeCapabilities: runtimeCapabilitiesReady ? runtimeCapabilities : null,
+                                      selectedRuntimeCapabilities: effectiveSessionRuntimeCapabilities,
+                                      onRuntimeCapabilityToggle: handleSessionRuntimeCapabilityToggle,
+                                      disabled: missingConfig || isHistoryLoading || hasPendingInteractiveRequest
+                                    }
+                                  ) }),
+                                  selectedTool && /* @__PURE__ */ jsxs40("span", { className: "pointer-events-auto inline-flex h-8 min-w-0 max-w-[14rem] shrink items-center gap-1.5 rounded-full bg-primary/10 px-2 text-xs font-medium text-primary transition-all duration-200", children: [
+                                    /* @__PURE__ */ jsx58("span", { className: "truncate", children: selectedTool.shortLabel ?? selectedTool.label }),
+                                    /* @__PURE__ */ jsx58(
+                                      "button",
+                                      {
+                                        type: "button",
+                                        onClick: () => setSelectedTool(null),
+                                        className: "shrink-0 rounded-full p-0.5 text-primary/70 hover:bg-primary/10 hover:text-primary",
+                                        children: /* @__PURE__ */ jsx58(X7, { size: 12 })
+                                      }
+                                    )
+                                  ] })
+                                ] }),
+                                /* @__PURE__ */ jsx58("div", { className: "pointer-events-auto shrink-0", children: /* @__PURE__ */ jsx58(
+                                  SendButton,
+                                  {
+                                    disabled: isSendDisabled,
+                                    isLoading: stream.isLoading,
+                                    showStop: stream.isLoading && (!trimmedDraft || hasPendingInteractiveRequest),
+                                    onStop: () => stream.stop(),
+                                    stopLabel: t("chat.stop"),
+                                    sendLabel: t("chat.send"),
+                                    shortcuts: stream.isLoading && trimmedDraft ? [
+                                      {
+                                        label: t("chat.followUps.queue"),
+                                        keys: "Enter"
+                                      }
+                                    ] : void 0
+                                  }
+                                ) })
+                              ]
                             }
-                          ) })
+                          )
                         ]
                       }
-                    )
+                    ) }),
+                    disclaimer?.text && /* @__PURE__ */ jsx58(
+                      "p",
+                      {
+                        className: cn(
+                          "mt-2 text-center text-xs",
+                          disclaimer.highContrast ? "text-foreground" : "text-muted-foreground"
+                        ),
+                        children: disclaimer.text
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs40("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
+                      /* @__PURE__ */ jsx58("span", { children: t("chat.poweredBy") }),
+                      /* @__PURE__ */ jsx58(ContextUsageIndicator, { className: "absolute right-4" })
+                    ] })
                   ]
                 }
-              ) }),
-              disclaimer?.text && /* @__PURE__ */ jsx57(
-                "p",
+              ),
+              /* @__PURE__ */ jsx58(
+                SettingsSheet,
                 {
-                  className: cn(
-                    "mt-2 text-center text-xs",
-                    disclaimer.highContrast ? "text-foreground" : "text-muted-foreground"
-                  ),
-                  children: disclaimer.text
+                  open: petSettingsOpen,
+                  settings: displayedPetSettings,
+                  petRequired,
+                  onOpenChange: setPetSettingsOpen,
+                  onSave: savePetLocalSettings
                 }
               ),
-              /* @__PURE__ */ jsxs39("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
-                /* @__PURE__ */ jsx57("span", { children: t("chat.poweredBy") }),
-                /* @__PURE__ */ jsx57(ContextUsageIndicator, { className: "absolute right-4" })
-              ] })
+              /* @__PURE__ */ jsx58(PetBridge, { pet: effectivePet, state: petAutoState })
             ]
           }
         ),
-        /* @__PURE__ */ jsx57(
-          SettingsSheet,
+        taskSummaryAvailable && taskSummaryDocked && taskSummaryOpen && /* @__PURE__ */ jsx58("div", { className: "pointer-events-none absolute right-5 top-3 z-20 max-h-[calc(100%-1.5rem)] w-80", children: /* @__PURE__ */ jsx58(
+          TaskSummaryPanel,
           {
-            open: petSettingsOpen,
-            settings: displayedPetSettings,
-            petRequired,
-            onOpenChange: setPetSettingsOpen,
-            onSave: savePetLocalSettings
+            ...taskSummaryProps,
+            className: "pointer-events-auto max-h-full"
           }
-        ),
-        /* @__PURE__ */ jsx57(PetBridge, { pet: effectivePet, state: petAutoState })
+        ) })
       ]
     }
   );
 }
 
 // src/components/ui/separator.tsx
-import * as React53 from "react";
-import { jsx as jsx58 } from "react/jsx-runtime";
-var Separator = React53.forwardRef(
-  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsx58(
+import * as React55 from "react";
+import { jsx as jsx59 } from "react/jsx-runtime";
+var Separator = React55.forwardRef(
+  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsx59(
     "div",
     {
       ref,