@xpert-ai/chatkit-ui 0.3.12 → 0.3.13

package/dist/index.js

@@ -2,12 +2,18 @@
 import * as React48 from "react";
 import {
   ArrowDown as ArrowDown2,
+  ChevronDown as ChevronDown5,
   FileText as FileText5,
   ImageIcon,
+  Loader2 as Loader28,
   Minus,
+  Pause,
   Pencil as Pencil4,
+  Play,
   Quote,
   Settings as Settings2,
+  Target as Target2,
+  Trash2 as Trash23,
   X as X6
 } from "lucide-react";
 
@@ -1052,6 +1058,117 @@ function resolveUsedContextSize(options) {
   return normalizeContextUsageNumber(options.fallbackUsedTokens) ?? 0;
 }
 
+// src/lib/thread-goals.ts
+function normalizeGoalObjective(value) {
+  return value.trim();
+}
+function parseGoalCommand(args) {
+  const text = args.trim();
+  if (!text) {
+    return { type: "show" };
+  }
+  const lower = text.toLowerCase();
+  if (lower === "pause") {
+    return { type: "pause" };
+  }
+  if (lower === "resume") {
+    return { type: "resume" };
+  }
+  if (lower === "clear") {
+    return { type: "clear" };
+  }
+  if (lower.startsWith("edit ")) {
+    return {
+      type: "edit",
+      objective: normalizeGoalObjective(text.slice(5))
+    };
+  }
+  return {
+    type: "set",
+    objective: normalizeGoalObjective(text)
+  };
+}
+async function loadThreadGoal({
+  goal,
+  threadId,
+  signal
+}) {
+  return goal.getGoal({ threadId, signal });
+}
+async function executeThreadGoalCommand({
+  goal,
+  threadId,
+  assistantId,
+  command,
+  runtimeCapabilities,
+  signal
+}) {
+  const normalizedThreadId = threadId?.trim() || null;
+  if (command.type === "show") {
+    if (!normalizedThreadId) {
+      throw new Error("Thread is required to show the current goal.");
+    }
+    return {
+      threadId: normalizedThreadId,
+      goal: await goal.getGoal({ threadId: normalizedThreadId, signal })
+    };
+  }
+  if (command.type === "clear") {
+    if (!normalizedThreadId) {
+      throw new Error("Thread is required to clear the current goal.");
+    }
+    return {
+      threadId: normalizedThreadId,
+      goal: await goal.clearGoal({ threadId: normalizedThreadId, signal })
+    };
+  }
+  if (command.type === "pause" || command.type === "resume") {
+    if (!normalizedThreadId) {
+      throw new Error("Thread is required to update the current goal.");
+    }
+    return {
+      threadId: normalizedThreadId,
+      goal: await goal.updateGoal({
+        threadId: normalizedThreadId,
+        status: command.type === "pause" ? "paused" : "active",
+        signal
+      })
+    };
+  }
+  const objective = command.objective.trim();
+  if (!objective) {
+    throw new Error("Goal objective is required.");
+  }
+  if (command.type === "edit") {
+    if (!normalizedThreadId) {
+      const result2 = await goal.setGoal({
+        threadId: null,
+        assistantId,
+        objective,
+        runtimeCapabilities,
+        signal
+      });
+      return result2;
+    }
+    return {
+      threadId: normalizedThreadId,
+      goal: await goal.updateGoal({
+        threadId: normalizedThreadId,
+        objective,
+        signal
+      })
+    };
+  }
+  const result = await goal.setGoal({
+    threadId: normalizedThreadId,
+    assistantId,
+    objective,
+    runtimeCapabilities,
+    signal
+  });
+  return result;
+}
+
 // src/lib/follow-ups.ts
 function getComposerFollowUpShortcutLabels(queueShortcutLabel) {
   return {
@@ -1100,6 +1217,7 @@ import {
   Search,
   SlidersHorizontal,
   Sparkles,
+  Target,
   X
 } from "lucide-react";
 
@@ -1289,6 +1407,8 @@ var en_US_default = {
     referencedContentOnly: "Referenced content",
     youLabel: "You",
     scrollToBottom: "Scroll to bottom",
+    loadMoreMessages: "Load more",
+    loadingMoreMessages: "Loading...",
     retryUpload: "Retry upload",
     dropFilesTitle: "Drop files to upload",
     dropFilesHint: "They will be attached to your next message.",
@@ -1336,6 +1456,27 @@ var en_US_default = {
       label: "Context window",
       full: "{{usedPercent}}% used ({{remainingPercent}}% left)",
       tokensUsed: "{{used}} / {{max}} tokens used"
+    },
+    goal: {
+      label: "Goal",
+      unavailable: "Goal controls are not available for this client.",
+      startThreadRequired: "Start a conversation before changing the goal.",
+      elapsed: "{{elapsed}} elapsed",
+      edit: "Edit goal",
+      pause: "Pause goal",
+      resume: "Resume goal",
+      clear: "Clear goal",
+      hide: "Hide goal",
+      expandObjective: "Show full goal",
+      collapseObjective: "Hide full goal",
+      status: {
+        active: "active",
+        paused: "paused",
+        blocked: "blocked",
+        usage_limited: "usage limited",
+        budget_limited: "budget limited",
+        complete: "complete"
+      }
     }
   },
   history: {
@@ -1646,6 +1787,8 @@ var zh_CN_default = {
     referencedContentOnly: "\u5DF2\u5F15\u7528\u5185\u5BB9",
     youLabel: "\u4F60",
     scrollToBottom: "\u56DE\u5230\u5E95\u90E8",
+    loadMoreMessages: "\u52A0\u8F7D\u66F4\u591A",
+    loadingMoreMessages: "\u6B63\u5728\u52A0\u8F7D...",
     retryUpload: "\u91CD\u65B0\u4E0A\u4F20",
     dropFilesTitle: "\u677E\u624B\u4E0A\u4F20\u6587\u4EF6",
     dropFilesHint: "\u6587\u4EF6\u4F1A\u9644\u52A0\u5230\u4F60\u7684\u4E0B\u4E00\u6761\u6D88\u606F\u3002",
@@ -1693,6 +1836,27 @@ var zh_CN_default = {
       label: "\u4E0A\u4E0B\u6587\u7A97\u53E3",
       full: "\u5DF2\u4F7F\u7528 {{usedPercent}}%\uFF08\u5269\u4F59 {{remainingPercent}}%\uFF09",
       tokensUsed: "\u5DF2\u4F7F\u7528 {{used}} / {{max}} tokens"
+    },
+    goal: {
+      label: "\u76EE\u6807",
+      unavailable: "\u5F53\u524D\u5BA2\u6237\u7AEF\u4E0D\u652F\u6301\u76EE\u6807\u63A7\u5236\u3002",
+      startThreadRequired: "\u8BF7\u5148\u5F00\u59CB\u4E00\u4E2A\u4F1A\u8BDD\u518D\u4FEE\u6539\u76EE\u6807\u3002",
+      elapsed: "\u5DF2\u8FD0\u884C {{elapsed}}",
+      edit: "\u7F16\u8F91\u76EE\u6807",
+      pause: "\u6682\u505C\u76EE\u6807",
+      resume: "\u6062\u590D\u76EE\u6807",
+      clear: "\u6E05\u9664\u76EE\u6807",
+      hide: "\u9690\u85CF\u76EE\u6807",
+      expandObjective: "\u663E\u793A\u5B8C\u6574\u76EE\u6807",
+      collapseObjective: "\u9690\u85CF\u5B8C\u6574\u76EE\u6807",
+      status: {
+        active: "\u8FD0\u884C\u4E2D",
+        paused: "\u5DF2\u6682\u505C",
+        blocked: "\u5DF2\u963B\u585E",
+        usage_limited: "\u7528\u91CF\u53D7\u9650",
+        budget_limited: "\u9884\u7B97\u8017\u5C3D",
+        complete: "\u5DF2\u5B8C\u6210"
+      }
     }
   },
   history: {
@@ -2965,6 +3129,9 @@ function ComposerMenu({
   selectedTool,
   planModeEnabled = false,
   onPlanModeChange,
+  goalCommandAvailable = false,
+  goalPanelOpen = false,
+  onGoalPanelOpenChange,
   runtimeCapabilities,
   selectedRuntimeCapabilities,
   onRuntimeCapabilityToggle,
@@ -2999,6 +3166,9 @@ function ComposerMenu({
   const handlePlanModeToggle = () => {
     onPlanModeChange?.(!planModeEnabled);
   };
+  const handleGoalCommandClick = () => {
+    onGoalPanelOpenChange?.(!goalPanelOpen);
+  };
   const handleOpenChange = (nextOpen) => {
     if (nextOpen) {
       const boundary = triggerRef.current?.closest("[data-chatkit-root]") ?? void 0;
@@ -3296,6 +3466,45 @@ function ComposerMenu({
               ]
             }
           ),
+          goalCommandAvailable && /* @__PURE__ */ jsxs4(
+            DropdownMenuItem,
+            {
+              role: "switch",
+              "aria-checked": goalPanelOpen,
+              onSelect: (event) => {
+                event.preventDefault();
+                handleGoalCommandClick();
+              },
+              className: cn(
+                "gap-3 px-3 py-2",
+                menuItemRoundedClass,
+                goalPanelOpen && "bg-muted"
+              ),
+              children: [
+                /* @__PURE__ */ jsx11("span", { className: "flex h-6 w-6 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx11(Target, { size: 16 }) }),
+                /* @__PURE__ */ jsx11("span", { className: "min-w-0 flex-1 text-left", children: t("chat.goal.label") }),
+                /* @__PURE__ */ jsx11(
+                  "span",
+                  {
+                    className: cn(
+                      "relative inline-flex h-6 w-10 shrink-0 items-center rounded-full transition-colors",
+                      goalPanelOpen ? "bg-primary" : "bg-muted-foreground/20"
+                    ),
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx11(
+                      "span",
+                      {
+                        className: cn(
+                          "inline-block h-5 w-5 rounded-full bg-background shadow-sm transition-transform",
+                          goalPanelOpen ? "translate-x-[18px]" : "translate-x-0.5"
+                        )
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
           hasRuntimeCapabilities && /* @__PURE__ */ jsxs4(Fragment, { children: [
             /* @__PURE__ */ jsx11(DropdownMenuSeparator, {}),
             skills.length > 0 && /* @__PURE__ */ jsxs4(
@@ -3400,6 +3609,40 @@ function ComposerMenu({
           /* @__PURE__ */ jsx11("span", { children: t("composer.planModeActive") })
         ]
       }
+    ),
+    goalCommandAvailable && goalPanelOpen && /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        "aria-label": t("chat.goal.hide"),
+        disabled,
+        onClick: () => onGoalPanelOpenChange?.(false),
+        className: cn(
+          "group inline-flex h-8 shrink-0 items-center gap-1.5 border border-primary/30 bg-primary/10 px-2 text-xs font-medium text-primary transition-all duration-200 hover:bg-primary/15",
+          roundedClass
+        ),
+        children: [
+          /* @__PURE__ */ jsxs4("span", { className: "relative inline-flex h-4 w-4 items-center justify-center", children: [
+            /* @__PURE__ */ jsx11(
+              Target,
+              {
+                "data-slot": "goal-indicator-icon",
+                size: 14,
+                className: "absolute transition-all duration-150 group-hover:scale-75 group-hover:opacity-0"
+              }
+            ),
+            /* @__PURE__ */ jsx11(
+              X,
+              {
+                "data-slot": "goal-remove-icon",
+                size: 14,
+                className: "absolute scale-75 opacity-0 transition-all duration-150 group-hover:scale-100 group-hover:opacity-100"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx11("span", { children: t("chat.goal.label") })
+        ]
+      }
     )
   ] });
 }
@@ -6766,6 +7009,9 @@ function parseSlashCommandInvocation(value) {
   };
 }
 function shouldSubmitRawSlashInvocation(command) {
+  if (command.name === "goal" && command.source === "runtime") {
+    return false;
+  }
   return command.action.type === "insert_invocation";
 }
 function resolvePromptWorkflowText(value, language) {
@@ -6803,6 +7049,14 @@ function createSlashCommandExecutionEffect(command, args, language) {
     ...command.kind === "prompt_workflow" ? { kind: command.kind } : {},
     ...workflow ? { workflow } : {}
   };
+  if (command.name === "goal" && command.source === "runtime") {
+    return {
+      type: "goal",
+      args: args.trim(),
+      commandSource,
+      runtimeCapabilities: getActionRuntimeCapabilities(action) ?? void 0
+    };
+  }
   if (command.source === "builtin" && action.type === "client_action") {
     if (command.name === "plan") {
       if (args.trim()) {
@@ -7164,7 +7418,9 @@ function useSlashCommands({
   setComposerText,
   focusComposerAt,
   setPlanModeEnabled,
+  setGoalPanelOpen,
   onPetCommand,
+  onGoalCommand,
   addRunRuntimeCapabilities,
   setRunRuntimeCapabilities,
   insertComposerCapabilityToken,
@@ -7356,6 +7612,17 @@ function useSlashCommands({
         submitPrompt(effect);
         return true;
       }
+      if (effect.type === "goal") {
+        void onGoalCommand?.({
+          args: effect.args,
+          commandSource: effect.commandSource,
+          runtimeCapabilities: effect.runtimeCapabilities
+        });
+        setComposerText("", 0);
+        setPalette(null);
+        focusComposerAt(0);
+        return true;
+      }
       if (effect.type === "client_action") {
         if (parentMessenger) {
           void parentMessenger.sendCommand("onWidgetAction", {
@@ -7384,6 +7651,7 @@ function useSlashCommands({
       i18n2.language,
       parentMessenger,
       onPetCommand,
+      onGoalCommand,
       selectCapabilityById,
       setComposerText,
       setPalette,
@@ -7409,12 +7677,23 @@ function useSlashCommands({
         toggleCapabilityGroup(option.capabilityType);
         return;
       }
+      if (option.command.name === "goal" && option.command.source === "runtime") {
+        setGoalPanelOpen((open) => !open);
+        setComposerText("", 0);
+        setPalette(null);
+        focusComposerAt(0);
+        return;
+      }
       executeSlashCommand(option.command, "");
     },
     [
       executeSlashCommand,
+      focusComposerAt,
       insertComposerCapabilityToken,
       palette,
+      setGoalPanelOpen,
+      setComposerText,
+      setPalette,
       toggleCapabilityGroup
     ]
   );
@@ -9929,7 +10208,7 @@ function SandboxShellToolCallCard({ data }) {
           "div",
           {
             className: cn(
-              "group/shell-copy relative min-h-0 flex-1",
+              "group/shell-copy relative min-h-0 flex-1 overflow-auto",
               SANDBOX_SHELL_SECTION_GAP_CLASS
             ),
             children: [
@@ -9937,7 +10216,7 @@ function SandboxShellToolCallCard({ data }) {
                 "pre",
                 {
                   className: cn(
-                    "min-h-0 overflow-auto whitespace-pre pr-8 font-mono text-muted-foreground/85 in-data-[density=compact]:pr-6 in-data-[density=spacious]:pr-10",
+                    "min-h-0 whitespace-pre pr-8 font-mono text-muted-foreground/85 in-data-[density=compact]:pr-6 in-data-[density=spacious]:pr-10",
                     SANDBOX_SHELL_TEXT_CLASS
                   ),
                   "data-slot": "sandbox-shell-output",
@@ -13271,6 +13550,127 @@ async function persistConversationRuntimeCapabilities({
   };
 }
 
+// src/lib/xpert-thread-goal-adapter.ts
+var SDK_GOAL_METHOD_ERROR = "Current Xpert SDK client does not expose conversation goal methods. Provide options.goal to use a custom goal adapter.";
+function requireBoundGoalMethod(owner, method) {
+  if (!owner || !method) {
+    throw new Error(SDK_GOAL_METHOD_ERROR);
+  }
+  return method.bind(owner);
+}
+function supportsXpertThreadGoalAdapter(client) {
+  const conversations = client.conversations;
+  return Boolean(
+    conversations?.search && conversations.create && conversations.getGoal && conversations.setGoal && conversations.updateGoal && conversations.clearGoal
+  );
+}
+async function findConversation(client, threadId) {
+  return findConversationByThreadIdWithRetry(
+    client,
+    threadId
+  );
+}
+async function requireConversation(client, threadId) {
+  const conversation = await findConversation(client, threadId);
+  if (!conversation?.id) {
+    throw new Error("Conversation not found for this thread.");
+  }
+  return conversation;
+}
+function createXpertThreadGoalAdapter(client) {
+  return {
+    async getGoal({ threadId, signal }) {
+      const conversation = await findConversation(client, threadId);
+      if (!conversation?.id) {
+        return null;
+      }
+      const getGoal = requireBoundGoalMethod(
+        client.conversations,
+        client.conversations.getGoal
+      );
+      return getGoal(conversation.id, { signal });
+    },
+    async setGoal({
+      threadId,
+      assistantId,
+      objective,
+      runtimeCapabilities,
+      signal
+    }) {
+      const normalizedObjective = objective.trim();
+      if (!normalizedObjective) {
+        throw new Error("Goal objective is required.");
+      }
+      const setGoal = requireBoundGoalMethod(
+        client.conversations,
+        client.conversations.setGoal
+      );
+      const normalizedThreadId = threadId?.trim() || null;
+      if (normalizedThreadId) {
+        const conversation2 = await requireConversation(
+          client,
+          normalizedThreadId
+        );
+        const goal2 = await setGoal(
+          conversation2.id,
+          { objective: normalizedObjective },
+          { signal }
+        );
+        return { threadId: normalizedThreadId, goal: goal2 };
+      }
+      const createConversation = requireBoundGoalMethod(
+        client.conversations,
+        client.conversations?.create
+      );
+      const conversation = await createConversation({
+        xpertId: assistantId,
+        ...runtimeCapabilities ? {
+          options: {
+            runtimeCapabilities
+          }
+        } : {}
+      });
+      const conversationId = conversation.id?.trim();
+      if (!conversationId) {
+        throw new Error("Created conversation is missing id.");
+      }
+      const createdThreadId = conversation.threadId?.trim();
+      if (!createdThreadId) {
+        throw new Error("Created conversation is missing threadId.");
+      }
+      const goal = await setGoal(
+        conversationId,
+        { objective: normalizedObjective },
+        { signal }
+      );
+      return { threadId: createdThreadId, goal };
+    },
+    async updateGoal({ threadId, objective, status, signal }) {
+      const conversation = await requireConversation(client, threadId);
+      const updateGoal = requireBoundGoalMethod(
+        client.conversations,
+        client.conversations.updateGoal
+      );
+      return updateGoal(
+        conversation.id,
+        {
+          ...objective !== void 0 ? { objective } : {},
+          ...status ? { status } : {}
+        },
+        { signal }
+      );
+    },
+    async clearGoal({ threadId, signal }) {
+      const conversation = await requireConversation(client, threadId);
+      const clearGoal = requireBoundGoalMethod(
+        client.conversations,
+        client.conversations.clearGoal
+      );
+      return clearGoal(conversation.id, { signal });
+    }
+  };
+}
+
 // src/lib/composer-parts.ts
 var COMPOSER_CAPABILITY_TOKEN_LENGTH = 1;
 var COMPOSER_CAPABILITY_TOKEN = "\uFFFC";
@@ -13593,6 +13993,21 @@ import { Fragment as Fragment8, jsx as jsx53, jsxs as jsxs36 } from "react/jsx-r
 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 hasRuntimeGoalCommand(runtimeCapabilities) {
+  return runtimeCapabilities?.commands?.some((command) => command.name === "goal") ?? false;
+}
+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;
+  return remainingSeconds ? `${minutes}m ${remainingSeconds}s` : `${minutes}m`;
+}
 function getSlashPaletteEmptyLabelKey(palette, runtimeCapabilitiesReady) {
   if (!palette.capabilityTypes || palette.capabilityTypes.length !== 1) {
     return "composer.capabilities.emptySearch";
@@ -13802,6 +14217,12 @@ function Chat({
   const [historyError, setHistoryError] = React48.useState(null);
   const [assistantName, setAssistantName] = React48.useState(null);
   const [assistantAvatar, setAssistantAvatar] = React48.useState(null);
+  const [threadGoal, setThreadGoal] = React48.useState(null);
+  const [goalError, setGoalError] = React48.useState(null);
+  const [isGoalLoading, setIsGoalLoading] = React48.useState(false);
+  const [isGoalPanelOpen, setIsGoalPanelOpen] = React48.useState(false);
+  const [isGoalObjectiveExpanded, setIsGoalObjectiveExpanded] = React48.useState(false);
+  const [goalElapsedStartedAt, setGoalElapsedStartedAt] = React48.useState(null);
   const LOADING_DOTS_MIN_DURATION = 800;
   const STREAMING_STATUS_REFRESH_MS = 250;
   const [showLoadingDots, setShowLoadingDots] = React48.useState(false);
@@ -13853,6 +14274,21 @@ function Chat({
     }, STREAMING_STATUS_REFRESH_MS);
     return () => window.clearInterval(timer);
   }, [stream.isLoading]);
+  React48.useEffect(() => {
+    if (threadGoal?.status === "active" && stream.isLoading) {
+      setGoalElapsedStartedAt(Date.now());
+      return;
+    }
+    setGoalElapsedStartedAt(null);
+  }, [
+    stream.isLoading,
+    threadGoal?.elapsedSeconds,
+    threadGoal?.id,
+    threadGoal?.status
+  ]);
+  React48.useEffect(() => {
+    setIsGoalObjectiveExpanded(false);
+  }, [threadGoal?.id]);
   const [composerParts, setComposerParts] = React48.useState([]);
   const [renderedComposerParts, setRenderedComposerParts] = React48.useState([]);
   const [composerDomVersion, setComposerDomVersion] = React48.useState(0);
@@ -13900,6 +14336,7 @@ function Chat({
   const forceFollowRef = React48.useRef(false);
   const previousMessageCountRef = React48.useRef(0);
   const previousScrollTopRef = React48.useRef(0);
+  const isPrependingHistoryMessagesRef = React48.useRef(false);
   const autoScrollFrameRef = React48.useRef(null);
   const isPointerDownRef = React48.useRef(false);
   const lastTouchYRef = React48.useRef(null);
@@ -13958,13 +14395,20 @@ function Chat({
     () => stream.messages ?? [],
     [stream.messages]
   );
+  const historyMessagePagination = stream.historyMessagePagination;
+  const isLoadingMoreMessages = Boolean(
+    historyMessagePagination?.isLoadingMore
+  );
+  const canLoadMoreMessages = Boolean(historyMessagePagination?.hasMore);
   const draft = React48.useMemo(
     () => getComposerPlainText(composerParts),
     [composerParts]
   );
   const trimmedDraft = draft.trim();
   const hasReferences = references.length > 0;
-  const isComposerStacked = planModeEnabled || Boolean(selectedTool);
+  const hasCompletedGoal = threadGoal?.status === "complete";
+  const isGoalModeOpen = isGoalPanelOpen;
+  const isComposerStacked = planModeEnabled || isGoalModeOpen || Boolean(selectedTool);
   const isComposerInputEmpty = getComposerEditingLength(composerParts) === 0;
   const composerInputRoundedClass = getComposerInputRoundedClass(theme.radius, {
     isEmpty: isComposerInputEmpty,
@@ -13985,6 +14429,18 @@ function Chat({
     () => getRuntimeCapabilityOptions(runtimeCapabilities),
     [runtimeCapabilities]
   );
+  const goalCommandAvailable = hasRuntimeGoalCommand(runtimeCapabilities);
+  const goalAdapter = React48.useMemo(
+    () => {
+      if (isGoalAdapter(options?.goal)) {
+        return options.goal;
+      }
+      return supportsXpertThreadGoalAdapter(stream.client) ? createXpertThreadGoalAdapter(stream.client) : null;
+    },
+    [options?.goal, stream.client]
+  );
+  const showGoalStatus = goalCommandAvailable && !hasCompletedGoal && (Boolean(goalError) || threadGoal?.status === "active" && stream.isLoading);
+  const displayedGoalElapsedSeconds = threadGoal ? (threadGoal.elapsedSeconds ?? 0) + (goalElapsedStartedAt ? Math.max(0, Math.floor((streamingNow - goalElapsedStartedAt) / 1e3)) : 0) : 0;
   const effectiveSessionRuntimeCapabilities = React48.useMemo(
     () => runtimeCapabilitiesReady && runtimeCapabilities ? mergeRuntimeCapabilitiesSelections(
       runtimeCapabilities,
@@ -14322,6 +14778,10 @@ function Chat({
   React48.useEffect(() => {
     const messageCountChanged = messages.length !== previousMessageCountRef.current;
     previousMessageCountRef.current = messages.length;
+    if (isPrependingHistoryMessagesRef.current) {
+      setHasUpdatesBelow(false);
+      return;
+    }
     if (!shouldAutoScrollRef.current) {
       if (messageCountChanged || stream.isLoading) {
         setHasUpdatesBelow(true);
@@ -14534,6 +14994,49 @@ function Chat({
     stream.client,
     stream.threadId
   ]);
+  React48.useEffect(() => {
+    setThreadGoal(stream.threadGoal);
+  }, [stream.threadGoal]);
+  React48.useEffect(() => {
+    const threadId = stream.threadId?.trim();
+    if (!threadId || !goalCommandAvailable) {
+      setThreadGoal(null);
+      setGoalError(null);
+      setIsGoalLoading(false);
+      setIsGoalPanelOpen(false);
+      return;
+    }
+    if (!goalAdapter) {
+      setThreadGoal(null);
+      setGoalError(null);
+      setIsGoalLoading(false);
+      setIsGoalPanelOpen(false);
+      return;
+    }
+    const controller = new AbortController();
+    setIsGoalLoading(true);
+    setGoalError(null);
+    void loadThreadGoal({
+      goal: goalAdapter,
+      threadId,
+      signal: controller.signal
+    }).then((goal) => {
+      if (!controller.signal.aborted) {
+        setThreadGoal(goal);
+      }
+    }).catch((error) => {
+      if (controller.signal.aborted) {
+        return;
+      }
+      setGoalError(error instanceof Error ? error.message : String(error));
+      setThreadGoal(null);
+    }).finally(() => {
+      if (!controller.signal.aborted) {
+        setIsGoalLoading(false);
+      }
+    });
+    return () => controller.abort();
+  }, [goalAdapter, goalCommandAvailable, stream.threadId]);
   const uploadedFiles = attachmentState.uploadedFiles;
   const handleSessionRuntimeCapabilityToggle = React48.useCallback(
     (type, id, selected) => {
@@ -14745,6 +15248,124 @@ function Chat({
       t
     ]
   );
+  const handleGoalCommand = React48.useCallback(
+    async ({
+      args,
+      commandSource,
+      runtimeCapabilities: commandRuntimeCapabilities,
+      visibleInput
+    }) => {
+      const command = parseGoalCommand(args);
+      const threadId = stream.threadId?.trim();
+      setGoalError(null);
+      if (!threadId) {
+        if (command.type === "show") {
+          setThreadGoal(null);
+          setIsGoalLoading(false);
+          return;
+        }
+        if (command.type !== "set" && command.type !== "edit") {
+          setGoalError(t("chat.goal.startThreadRequired"));
+          return;
+        }
+      }
+      if (!goalAdapter) {
+        setGoalError(t("chat.goal.unavailable"));
+        return;
+      }
+      setIsGoalLoading(true);
+      try {
+        const result = await executeThreadGoalCommand({
+          goal: goalAdapter,
+          threadId,
+          assistantId: stream.assistantId,
+          command,
+          runtimeCapabilities: commandRuntimeCapabilities
+        });
+        if (!threadId && result.threadId) {
+          stream.reset(result.threadId, []);
+          void refreshThreads();
+        }
+        const startsGoalRun = result.goal?.status === "active" && (command.type === "set" || command.type === "edit" || command.type === "resume");
+        setThreadGoal(command.type === "clear" ? null : result.goal);
+        if (command.type === "clear" || startsGoalRun) {
+          setIsGoalPanelOpen(false);
+        }
+        if (startsGoalRun) {
+          const goalRunThreadId = result.threadId ?? threadId;
+          const runtimeCapabilitiesForGoalRun = runtimeCapabilities && runtimeCapabilitiesReady ? createRuntimeCapabilitiesForSubmit({
+            capabilities: runtimeCapabilities,
+            available: effectiveSessionRuntimeCapabilities,
+            recommended: commandRuntimeCapabilities
+          }) : commandRuntimeCapabilities ?? null;
+          const inputPayload = {
+            input: GOAL_RUN_INPUT,
+            commandSource,
+            goalRun: true,
+            ...runtimeCapabilitiesForGoalRun ? { runtimeCapabilities: runtimeCapabilitiesForGoalRun } : {}
+          };
+          const requestOptions = buildInjectedRequestOptions({
+            defaults: options?.request,
+            humanInput: inputPayload
+          });
+          const visibleGoalMessage = visibleInput ? {
+            id: createMessageId(),
+            type: "human",
+            content: visibleInput,
+            submittedInput: visibleInput
+          } : null;
+          void stream.submit(
+            {
+              input: inputPayload,
+              ...requestOptions.state ? { state: requestOptions.state } : {}
+            },
+            {
+              ...goalRunThreadId && !threadId ? {
+                threadId: goalRunThreadId,
+                joinExistingThread: true
+              } : {},
+              ...requestOptions.context ? { context: requestOptions.context } : {},
+              ...requestOptions.config ? { config: requestOptions.config } : {},
+              ...visibleGoalMessage ? {
+                preserveOptimisticMessages: true,
+                optimisticValues: (prev) => {
+                  const prevMessages = prev?.messages ?? [];
+                  return {
+                    ...prev,
+                    messages: [...prevMessages, visibleGoalMessage]
+                  };
+                }
+              } : {}
+            }
+          ).catch((error) => {
+            setGoalError(
+              error instanceof Error ? error.message : String(error)
+            );
+          });
+        }
+      } catch (error) {
+        setGoalError(error instanceof Error ? error.message : String(error));
+      } finally {
+        setIsGoalLoading(false);
+      }
+    },
+    [
+      effectiveSessionRuntimeCapabilities,
+      goalAdapter,
+      options?.request,
+      refreshThreads,
+      runtimeCapabilities,
+      runtimeCapabilitiesReady,
+      stream,
+      t
+    ]
+  );
+  const handleGoalPanelOpenChange = React48.useCallback(
+    (open) => {
+      setIsGoalPanelOpen(open);
+    },
+    []
+  );
   const addRunRuntimeCapabilities = React48.useCallback(
     (selection) => {
       setRunRuntimeCapabilities(
@@ -14807,7 +15428,9 @@ function Chat({
     setComposerText,
     focusComposerAt,
     setPlanModeEnabled,
+    setGoalPanelOpen: setIsGoalPanelOpen,
     onPetCommand: handlePetCommand,
+    onGoalCommand: handleGoalCommand,
     addRunRuntimeCapabilities,
     setRunRuntimeCapabilities,
     insertComposerCapabilityToken,
@@ -14864,11 +15487,42 @@ function Chat({
       container.scrollTop += optionRect.bottom - containerRect.bottom;
     }
   }, [runtimeCapabilityPalette, slashPaletteOptions.length]);
+  const submitGoalModeDraft = React48.useCallback(() => {
+    const objective = getComposerPlainText(composerPartsRef.current).trim();
+    if (!isGoalModeOpen || !goalCommandAvailable || !objective) {
+      return false;
+    }
+    setComposerText("", 0);
+    setRuntimeCapabilityPalette(null);
+    focusComposerAt(0);
+    void handleGoalCommand({
+      args: objective,
+      commandSource: {
+        type: "slash_command",
+        name: "goal",
+        source: "runtime",
+        executionType: "insert_invocation"
+      },
+      runtimeCapabilities: runRuntimeCapabilities,
+      visibleInput: objective
+    });
+    return true;
+  }, [
+    focusComposerAt,
+    goalCommandAvailable,
+    handleGoalCommand,
+    isGoalModeOpen,
+    runRuntimeCapabilities,
+    setComposerText
+  ]);
   const handleSubmit = (event) => {
     event.preventDefault();
     if (executeSlashCommandFromDraft()) {
       return;
     }
+    if (submitGoalModeDraft()) {
+      return;
+    }
     submitDraft();
   };
   const handleEditPendingFollowUp = React48.useCallback(
@@ -15033,6 +15687,9 @@ function Chat({
       if (executeSlashCommandFromDraft()) {
         return;
       }
+      if (submitGoalModeDraft()) {
+        return;
+      }
       submitDraft(
         getBusyComposerShortcutFollowUpMode(event.metaKey || event.ctrlKey)
       );
@@ -15041,6 +15698,9 @@ function Chat({
     if (executeSlashCommandFromDraft()) {
       return;
     }
+    if (submitGoalModeDraft()) {
+      return;
+    }
     submitDraft();
   };
   const handleComposerPaste = React48.useCallback(
@@ -15221,6 +15881,40 @@ function Chat({
     },
     [missingConfig, missingConfigShortMessage, stream, t]
   );
+  const handleLoadMoreMessages = React48.useCallback(async () => {
+    if (!canLoadMoreMessages || isLoadingMoreMessages) {
+      return;
+    }
+    const viewport = viewportRef.current;
+    const previousScrollHeight = viewport?.scrollHeight ?? 0;
+    const previousScrollTop = viewport?.scrollTop ?? 0;
+    isPrependingHistoryMessagesRef.current = true;
+    shouldAutoScrollRef.current = false;
+    forceFollowRef.current = false;
+    setHasUpdatesBelow(false);
+    setHistoryError(null);
+    const restoreScrollPosition = () => {
+      requestAnimationFrame(() => {
+        const nextViewport = viewportRef.current;
+        if (nextViewport) {
+          const nextScrollTop = nextViewport.scrollHeight - previousScrollHeight + previousScrollTop;
+          nextViewport.scrollTop = Math.max(0, nextScrollTop);
+          previousScrollTopRef.current = nextViewport.scrollTop;
+        }
+        isPrependingHistoryMessagesRef.current = false;
+      });
+    };
+    try {
+      await stream.loadMoreConversationMessages();
+      restoreScrollPosition();
+    } catch (err) {
+      isPrependingHistoryMessagesRef.current = false;
+      console.warn("Failed to load more thread messages", err);
+      setHistoryError(
+        err instanceof Error ? err.message : t("chat.errors.loadMessages")
+      );
+    }
+  }, [canLoadMoreMessages, isLoadingMoreMessages, stream, t]);
   const handleNewThread = async () => {
     if (missingConfig || isHistoryLoading) return;
     setHistoryError(null);
@@ -15450,13 +16144,29 @@ function Chat({
           historyError && /* @__PURE__ */ jsx53("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__ */ jsx53("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__ */ jsx53("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 ? /* @__PURE__ */ jsx53(
+          messages.length === 0 && !canLoadMoreMessages ? /* @__PURE__ */ jsx53(
             StartScreen,
             {
               startScreen,
               onPromptClick: handlePromptClick
             }
           ) : /* @__PURE__ */ jsxs36("div", { className: "space-y-4", children: [
+            canLoadMoreMessages && /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-3 py-1", children: [
+              /* @__PURE__ */ jsx53("div", { className: "h-px min-w-8 flex-1 bg-border" }),
+              /* @__PURE__ */ jsx53(
+                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__ */ jsx53("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";
@@ -15733,6 +16443,132 @@ function Chat({
               `${option.type}:${option.id}`
             ))
           ] }),
+          showGoalStatus && /* @__PURE__ */ jsxs36(
+            "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"
+              ),
+              children: [
+                /* @__PURE__ */ jsx53(
+                  Target2,
+                  {
+                    className: cn(
+                      "size-4 shrink-0 text-muted-foreground",
+                      isGoalObjectiveExpanded && "mt-1"
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxs36("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsxs36("div", { className: "flex min-w-0 items-center gap-2", children: [
+                    /* @__PURE__ */ jsx53("span", { className: "font-medium", children: t("chat.goal.label") }),
+                    threadGoal && /* @__PURE__ */ jsx53("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__ */ jsx53(Loader28, { className: "size-3 animate-spin text-muted-foreground" })
+                  ] }),
+                  /* @__PURE__ */ jsx53(
+                    "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__ */ jsx53("div", { className: "mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-muted-foreground", children: /* @__PURE__ */ jsx53("span", { children: t("chat.goal.elapsed", {
+                    elapsed: formatGoalElapsed(displayedGoalElapsedSeconds)
+                  }) }) })
+                ] }),
+                threadGoal && /* @__PURE__ */ jsxs36("div", { className: "flex shrink-0 items-center gap-1", children: [
+                  /* @__PURE__ */ jsxs36(Tooltip, { children: [
+                    /* @__PURE__ */ jsx53(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx53(
+                      Button,
+                      {
+                        type: "button",
+                        variant: "ghost",
+                        size: "icon-xs",
+                        disabled: isGoalLoading,
+                        onClick: () => {
+                          const prefix = "/goal edit ";
+                          setComposerText(`${prefix}${threadGoal.objective}`);
+                        },
+                        children: /* @__PURE__ */ jsx53(Pencil4, { className: "size-3" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx53(TooltipContent, { children: t("chat.goal.edit") })
+                  ] }),
+                  /* @__PURE__ */ jsxs36(Tooltip, { children: [
+                    /* @__PURE__ */ jsx53(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx53(
+                      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__ */ jsx53(Play, { className: "size-3" }) : /* @__PURE__ */ jsx53(Pause, { className: "size-3" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx53(TooltipContent, { children: threadGoal.status === "paused" ? t("chat.goal.resume") : t("chat.goal.pause") })
+                  ] }),
+                  /* @__PURE__ */ jsxs36(Tooltip, { children: [
+                    /* @__PURE__ */ jsx53(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx53(
+                      Button,
+                      {
+                        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__ */ jsx53(Trash23, { className: "size-3" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx53(TooltipContent, { children: t("chat.goal.clear") })
+                  ] }),
+                  threadGoal.objective && !goalError && /* @__PURE__ */ jsxs36(Tooltip, { children: [
+                    /* @__PURE__ */ jsx53(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx53(
+                      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__ */ jsx53(
+                          ChevronDown5,
+                          {
+                            className: cn(
+                              "size-3 transition-transform",
+                              isGoalObjectiveExpanded && "rotate-180"
+                            )
+                          }
+                        )
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx53(TooltipContent, { children: isGoalObjectiveExpanded ? t("chat.goal.collapseObjective") : t("chat.goal.expandObjective") })
+                  ] })
+                ] })
+              ]
+            }
+          ),
           /* @__PURE__ */ jsx53(
             PendingRuntimeServices,
             {
@@ -15874,6 +16710,9 @@ function Chat({
                             selectedTool,
                             planModeEnabled,
                             onPlanModeChange: setPlanModeEnabled,
+                            goalCommandAvailable,
+                            goalPanelOpen: isGoalModeOpen,
+                            onGoalPanelOpenChange: handleGoalPanelOpenChange,
                             runtimeCapabilities: runtimeCapabilitiesReady ? runtimeCapabilities : null,
                             selectedRuntimeCapabilities: effectiveSessionRuntimeCapabilities,
                             onRuntimeCapabilityToggle: handleSessionRuntimeCapabilityToggle,