@lukeashford/aurelius 3.4.0 → 3.6.0

package/dist/index.js

@@ -74,6 +74,7 @@ __export(index_exports, {
   FileChip: () => FileChip,
   HelperText: () => HelperText,
   HistoryIcon: () => HistoryIcon,
+  HistoryPanel: () => HistoryPanel,
   ImageCard: () => ImageCard,
   Input: () => Input,
   InputGroup: () => InputGroup,
@@ -4310,7 +4311,7 @@ var StreamingCursor = import_react56.default.forwardRef(
 StreamingCursor.displayName = "StreamingCursor";
 
 // src/components/chat/ChatInterface.tsx
-var import_react77 = __toESM(require("react"));
+var import_react78 = __toESM(require("react"));
 
 // src/components/chat/ChatView.tsx
 var import_react60 = __toESM(require("react"));
@@ -4796,6 +4797,9 @@ var ChatInput = import_react61.default.forwardRef(
     onAttachmentsChange,
     showAttachmentButton = true,
     acceptedFileTypes,
+    notice,
+    onInputChange,
+    autoFocus = false,
     className,
     ...rest
   }, ref) => {
@@ -4842,15 +4846,16 @@ var ChatInput = import_react61.default.forwardRef(
     );
     const handleChange = (0, import_react61.useCallback)((e) => {
       setValue(e.target.value);
+      onInputChange?.(e.target.value);
       const textarea = e.target;
       textarea.style.height = "auto";
       textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
-    }, []);
+    }, [onInputChange]);
     (0, import_react61.useEffect)(() => {
-      if (!disabled && !isStreaming && textareaRef.current) {
+      if (autoFocus && !disabled && !isStreaming && textareaRef.current) {
         textareaRef.current.focus();
       }
-    }, [disabled, isStreaming]);
+    }, [disabled, isStreaming, autoFocus]);
     const addFiles = (0, import_react61.useCallback)(
       (files) => {
         const newAttachments = Array.from(files).map((file) => ({
@@ -4929,6 +4934,23 @@ var ChatInput = import_react61.default.forwardRef(
         ...rest
       },
       isCentered && helperText && /* @__PURE__ */ import_react61.default.createElement("p", { className: "text-silver text-sm mb-4 text-center" }, helperText),
+      notice && /* @__PURE__ */ import_react61.default.createElement("div", { className: cx(
+        "w-full flex items-start gap-2 px-3 py-2 mb-1 text-xs",
+        isCentered && "max-w-lg",
+        notice.variant === "warning" ? "bg-gold/5 border border-gold/20 text-gold/80" : "bg-error/10 border border-error/30 text-error"
+      ) }, /* @__PURE__ */ import_react61.default.createElement("span", { className: "flex-1" }, notice.content), (notice.dismissible ?? notice.variant === "warning") && notice.onDismiss && /* @__PURE__ */ import_react61.default.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: notice.onDismiss,
+          "aria-label": "Dismiss",
+          className: cx(
+            "shrink-0 opacity-60 hover:opacity-100 transition-opacity",
+            notice.variant === "warning" ? "text-gold" : "text-error"
+          )
+        },
+        /* @__PURE__ */ import_react61.default.createElement(import_lucide_react11.X, { className: "w-3 h-3" })
+      )),
       /* @__PURE__ */ import_react61.default.createElement(
         "div",
         {
@@ -6059,8 +6081,346 @@ var ArtifactsPanelToggle = import_react72.default.forwardRef(({ artifactCount =
 });
 ArtifactsPanelToggle.displayName = "ArtifactsPanelToggle";
 
-// src/components/chat/TodosList.tsx
+// src/components/chat/HistoryPanel.tsx
 var import_react73 = __toESM(require("react"));
+function parseTimestamp(ts) {
+  if (ts == null) {
+    return null;
+  }
+  const d = ts instanceof Date ? ts : new Date(ts);
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+function startOfDay(d) {
+  const x = new Date(d);
+  x.setHours(0, 0, 0, 0);
+  return x;
+}
+function groupConversations(conversations) {
+  const today = startOfDay(/* @__PURE__ */ new Date());
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+  const todayList = [];
+  const yesterdayList = [];
+  const olderList = [];
+  for (const c of conversations) {
+    const d = parseTimestamp(c.timestamp);
+    if (d && d >= today) {
+      todayList.push(c);
+    } else if (d && d >= yesterday) {
+      yesterdayList.push(c);
+    } else {
+      olderList.push(c);
+    }
+  }
+  return [
+    { key: "today", label: "Today", conversations: todayList },
+    { key: "yesterday", label: "Yesterday", conversations: yesterdayList },
+    { key: "older", label: "Older", conversations: olderList }
+  ].filter((g) => g.conversations.length > 0);
+}
+function ChevronDownIcon({ className }) {
+  return /* @__PURE__ */ import_react73.default.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      className,
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ import_react73.default.createElement(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z",
+        clipRule: "evenodd"
+      }
+    )
+  );
+}
+function PencilIcon2({ className }) {
+  return /* @__PURE__ */ import_react73.default.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      className,
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ import_react73.default.createElement(
+      "path",
+      {
+        d: "M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
+      }
+    )
+  );
+}
+function ProjectFilter({
+  projects,
+  value,
+  onChange,
+  className
+}) {
+  const [open, setOpen] = (0, import_react73.useState)(false);
+  const ref = (0, import_react73.useRef)(null);
+  (0, import_react73.useEffect)(() => {
+    if (!open) {
+      return;
+    }
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+  const label = value ?? "All projects";
+  return /* @__PURE__ */ import_react73.default.createElement("div", { className: cx("relative min-w-0", className), ref }, /* @__PURE__ */ import_react73.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => setOpen((o) => !o),
+      "aria-haspopup": "listbox",
+      "aria-expanded": open,
+      className: cx(
+        "w-full flex items-center justify-between gap-1 px-2 py-1.5",
+        "bg-obsidian/60 hover:bg-ash/30",
+        "text-silver hover:text-white",
+        "border border-ash/40",
+        "text-xs",
+        "transition-colors duration-150 min-w-0"
+      )
+    },
+    /* @__PURE__ */ import_react73.default.createElement("span", { className: "truncate" }, label),
+    /* @__PURE__ */ import_react73.default.createElement(ChevronDownIcon, { className: "w-3 h-3 shrink-0" })
+  ), open && /* @__PURE__ */ import_react73.default.createElement(
+    "div",
+    {
+      role: "listbox",
+      className: cx(
+        "absolute top-full left-0 right-0 mt-1 z-20",
+        "bg-charcoal border border-ash/40",
+        "max-h-60 overflow-y-auto"
+      )
+    },
+    /* @__PURE__ */ import_react73.default.createElement(
+      "button",
+      {
+        type: "button",
+        role: "option",
+        "aria-selected": value === null,
+        onClick: () => {
+          onChange(null);
+          setOpen(false);
+        },
+        className: cx(
+          "w-full px-2 py-1.5 text-left text-xs truncate",
+          "transition-colors duration-150",
+          value === null ? "bg-gold/10 text-gold" : "text-silver hover:bg-ash/20 hover:text-white"
+        )
+      },
+      "All projects"
+    ),
+    projects.map((p) => /* @__PURE__ */ import_react73.default.createElement(
+      "button",
+      {
+        key: p,
+        type: "button",
+        role: "option",
+        "aria-selected": value === p,
+        onClick: () => {
+          onChange(p);
+          setOpen(false);
+        },
+        className: cx(
+          "w-full px-2 py-1.5 text-left text-xs truncate",
+          "transition-colors duration-150",
+          value === p ? "bg-gold/10 text-gold" : "text-silver hover:bg-ash/20 hover:text-white"
+        )
+      },
+      p
+    ))
+  ));
+}
+function ConversationRow({
+  conversation,
+  onSelect,
+  onRename
+}) {
+  const [isEditing, setIsEditing] = (0, import_react73.useState)(false);
+  const [draft, setDraft] = (0, import_react73.useState)(conversation.title);
+  const inputRef = (0, import_react73.useRef)(null);
+  (0, import_react73.useEffect)(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+  const startEdit = (0, import_react73.useCallback)((e) => {
+    e.stopPropagation();
+    setDraft(conversation.title);
+    setIsEditing(true);
+  }, [conversation.title]);
+  const commit = (0, import_react73.useCallback)(() => {
+    const trimmed = draft.trim();
+    if (trimmed && trimmed !== conversation.title) {
+      onRename?.(conversation.id, trimmed);
+    }
+    setIsEditing(false);
+  }, [draft, conversation.id, conversation.title, onRename]);
+  const cancel = (0, import_react73.useCallback)(() => {
+    setDraft(conversation.title);
+    setIsEditing(false);
+  }, [conversation.title]);
+  if (isEditing) {
+    return /* @__PURE__ */ import_react73.default.createElement(
+      "div",
+      {
+        className: cx(
+          "w-full px-3 py-2",
+          conversation.isActive ? "bg-ash/40" : "bg-ash/20"
+        )
+      },
+      /* @__PURE__ */ import_react73.default.createElement(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          value: draft,
+          onChange: (e) => setDraft(e.target.value),
+          onBlur: commit,
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              commit();
+            } else if (e.key === "Escape") {
+              e.preventDefault();
+              cancel();
+            }
+          },
+          className: cx(
+            "w-full px-2 py-1 text-sm font-medium text-white",
+            "bg-obsidian border border-gold/40",
+            "outline-none focus:border-gold"
+          ),
+          "aria-label": "Conversation title"
+        }
+      ),
+      conversation.project && /* @__PURE__ */ import_react73.default.createElement("p", { className: "text-xs text-silver/60 truncate mt-1" }, conversation.project)
+    );
+  }
+  return /* @__PURE__ */ import_react73.default.createElement("div", { className: "relative group" }, /* @__PURE__ */ import_react73.default.createElement(
+    "button",
+    {
+      onClick: () => onSelect?.(conversation.id),
+      className: cx(
+        "w-full px-3 py-2 text-left",
+        "transition-colors duration-150",
+        conversation.isActive ? "bg-ash/40 text-white" : "text-silver hover:bg-ash/20 hover:text-white"
+      )
+    },
+    /* @__PURE__ */ import_react73.default.createElement(
+      "p",
+      {
+        className: cx(
+          "text-sm font-medium truncate",
+          onRename ? "pr-6" : ""
+        )
+      },
+      conversation.title
+    ),
+    conversation.project && /* @__PURE__ */ import_react73.default.createElement("p", { className: "text-xs text-silver/60 truncate mt-0.5" }, conversation.project)
+  ), onRename && /* @__PURE__ */ import_react73.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: startEdit,
+      "aria-label": "Rename conversation",
+      className: cx(
+        "absolute right-2 top-2",
+        "p-1 text-silver/60 hover:text-gold hover:bg-ash/40",
+        "opacity-0 group-hover:opacity-100 focus:opacity-100",
+        "transition-opacity duration-150"
+      )
+    },
+    /* @__PURE__ */ import_react73.default.createElement(PencilIcon2, { className: "w-3.5 h-3.5" })
+  ));
+}
+function HistoryPanel({
+  conversations,
+  onSelectConversation,
+  onNewChat,
+  onRenameConversation
+}) {
+  const [projectFilter, setProjectFilter] = (0, import_react73.useState)(null);
+  const projects = (0, import_react73.useMemo)(() => {
+    const set = /* @__PURE__ */ new Set();
+    for (const c of conversations) {
+      if (c.project) {
+        set.add(c.project);
+      }
+    }
+    return Array.from(set).sort((a, b) => a.localeCompare(b));
+  }, [conversations]);
+  (0, import_react73.useEffect)(() => {
+    if (projectFilter && !projects.includes(projectFilter)) {
+      setProjectFilter(null);
+    }
+  }, [projects, projectFilter]);
+  const filteredConversations = (0, import_react73.useMemo)(() => {
+    if (!projectFilter) {
+      return conversations;
+    }
+    return conversations.filter((c) => c.project === projectFilter);
+  }, [conversations, projectFilter]);
+  const groups = (0, import_react73.useMemo)(
+    () => groupConversations(filteredConversations),
+    [filteredConversations]
+  );
+  const hasFilter = projects.length > 0;
+  return /* @__PURE__ */ import_react73.default.createElement("div", { className: "h-full flex flex-col" }, /* @__PURE__ */ import_react73.default.createElement("div", { className: "px-4 py-3 border-b border-ash/40 shrink-0 flex items-center gap-2" }, /* @__PURE__ */ import_react73.default.createElement("h3", { className: "text-xs font-medium text-white shrink-0" }, "History"), (hasFilter || onNewChat) && /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex items-center gap-2 flex-1 min-w-0" }, hasFilter && /* @__PURE__ */ import_react73.default.createElement(import_react73.default.Fragment, null, /* @__PURE__ */ import_react73.default.createElement("div", { className: "w-px h-3 bg-ash/40 shrink-0 mx-1" }), /* @__PURE__ */ import_react73.default.createElement(
+    ProjectFilter,
+    {
+      projects,
+      value: projectFilter,
+      onChange: setProjectFilter,
+      className: "flex-1"
+    }
+  )), onNewChat && /* @__PURE__ */ import_react73.default.createElement(import_react73.default.Fragment, null, /* @__PURE__ */ import_react73.default.createElement("div", { className: "w-px h-3 bg-ash/40 shrink-0 mx-1" }), /* @__PURE__ */ import_react73.default.createElement(
+    "button",
+    {
+      onClick: onNewChat,
+      className: cx(
+        "flex items-center gap-1 px-2.5 py-1.5 shrink-0",
+        "bg-gold/10 hover:bg-gold/20 text-gold",
+        "border border-gold/30",
+        "text-xs font-medium",
+        "transition-colors duration-200"
+      )
+    },
+    /* @__PURE__ */ import_react73.default.createElement(PlusIcon, { className: "w-4 h-4" }),
+    /* @__PURE__ */ import_react73.default.createElement("span", { className: "truncate" }, "New Chat")
+  )))), /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex-1 overflow-y-auto py-2" }, conversations.length === 0 ? /* @__PURE__ */ import_react73.default.createElement("p", { className: "px-4 py-2 text-xs text-silver/60" }, "No conversations yet") : groups.length === 0 ? /* @__PURE__ */ import_react73.default.createElement("p", { className: "px-4 py-2 text-xs text-silver/60" }, "No conversations match this filter") : /* @__PURE__ */ import_react73.default.createElement("div", null, groups.map((group, index) => /* @__PURE__ */ import_react73.default.createElement("section", { key: group.key, className: cx(index > 0 && "mt-3") }, /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex items-center gap-2 px-3 pb-2" }, /* @__PURE__ */ import_react73.default.createElement(
+    "span",
+    {
+      className: "text-xs font-medium uppercase tracking-wider text-gold/70"
+    },
+    group.label
+  ), /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex-1 h-px bg-gold/20" })), /* @__PURE__ */ import_react73.default.createElement("div", { className: "space-y-1 px-2" }, group.conversations.map((conversation) => /* @__PURE__ */ import_react73.default.createElement(
+    ConversationRow,
+    {
+      key: conversation.id,
+      conversation,
+      onSelect: onSelectConversation,
+      onRename: onRenameConversation
+    }
+  ))))))));
+}
+
+// src/components/chat/TodosList.tsx
+var import_react74 = __toESM(require("react"));
 var import_lucide_react14 = require("lucide-react");
 var TASK_STATUSES = {
   PENDING: "pending",
@@ -6072,16 +6432,16 @@ var TASK_STATUSES = {
 function TaskIcon({ status }) {
   switch (status) {
     case "done":
-      return /* @__PURE__ */ import_react73.default.createElement(CheckSquareIcon, null);
+      return /* @__PURE__ */ import_react74.default.createElement(CheckSquareIcon, null);
     case "in_progress":
-      return /* @__PURE__ */ import_react73.default.createElement(SquareLoaderIcon, null);
+      return /* @__PURE__ */ import_react74.default.createElement(SquareLoaderIcon, null);
     case "cancelled":
-      return /* @__PURE__ */ import_react73.default.createElement(CrossSquareIcon, { variant: "cancelled" });
+      return /* @__PURE__ */ import_react74.default.createElement(CrossSquareIcon, { variant: "cancelled" });
     case "failed":
-      return /* @__PURE__ */ import_react73.default.createElement(CrossSquareIcon, { variant: "failed" });
+      return /* @__PURE__ */ import_react74.default.createElement(CrossSquareIcon, { variant: "failed" });
     case "pending":
     default:
-      return /* @__PURE__ */ import_react73.default.createElement(EmptySquareIcon, null);
+      return /* @__PURE__ */ import_react74.default.createElement(EmptySquareIcon, null);
   }
 }
 function sortTasks(tasks) {
@@ -6101,7 +6461,7 @@ function TaskItem({ task, depth = 0 }) {
   const isSubtle = task.status === "cancelled" || task.status === "failed";
   const showSubtasks = (task.status === "in_progress" || task.status === "done") && task.subtasks && task.subtasks.length > 0;
   const sortedSubtasks = showSubtasks ? sortTasks(task.subtasks) : [];
-  return /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ import_react73.default.createElement(
+  return /* @__PURE__ */ import_react74.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ import_react74.default.createElement(
     "div",
     {
       className: cx(
@@ -6109,8 +6469,8 @@ function TaskItem({ task, depth = 0 }) {
         depth > 0 && "pl-6"
       )
     },
-    /* @__PURE__ */ import_react73.default.createElement(TaskIcon, { status: task.status }),
-    /* @__PURE__ */ import_react73.default.createElement(
+    /* @__PURE__ */ import_react74.default.createElement(TaskIcon, { status: task.status }),
+    /* @__PURE__ */ import_react74.default.createElement(
       "span",
       {
         className: cx(
@@ -6122,10 +6482,10 @@ function TaskItem({ task, depth = 0 }) {
         )
       },
       task.label,
-      task.status === "cancelled" && /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-silver/40 ml-1" }, "(cancelled)"),
-      task.status === "failed" && /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-error/60 ml-1" }, "(failed)")
+      task.status === "cancelled" && /* @__PURE__ */ import_react74.default.createElement("span", { className: "text-silver/40 ml-1" }, "(cancelled)"),
+      task.status === "failed" && /* @__PURE__ */ import_react74.default.createElement("span", { className: "text-error/60 ml-1" }, "(failed)")
     )
-  ), showSubtasks && /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex flex-col" }, sortedSubtasks.map((subtask) => /* @__PURE__ */ import_react73.default.createElement(TaskItem, { key: subtask.id, task: subtask, depth: depth + 1 }))));
+  ), showSubtasks && /* @__PURE__ */ import_react74.default.createElement("div", { className: "flex flex-col" }, sortedSubtasks.map((subtask) => /* @__PURE__ */ import_react74.default.createElement(TaskItem, { key: subtask.id, task: subtask, depth: depth + 1 }))));
 }
 function hasInProgressTask(tasks) {
   return tasks.some((t) => {
@@ -6134,11 +6494,11 @@ function hasInProgressTask(tasks) {
     return false;
   });
 }
-var TodosList = import_react73.default.forwardRef(
+var TodosList = import_react74.default.forwardRef(
   ({ tasks, title = "Tasks", onStopAllTasks, className, ...rest }, ref) => {
-    const sortedTasks = (0, import_react73.useMemo)(() => sortTasks(tasks), [tasks]);
-    const [isStopping, setIsStopping] = (0, import_react73.useState)(false);
-    const handleStopClick = (0, import_react73.useCallback)(async () => {
+    const sortedTasks = (0, import_react74.useMemo)(() => sortTasks(tasks), [tasks]);
+    const [isStopping, setIsStopping] = (0, import_react74.useState)(false);
+    const handleStopClick = (0, import_react74.useCallback)(async () => {
       if (!onStopAllTasks || isStopping) return;
       try {
         setIsStopping(true);
@@ -6172,7 +6532,7 @@ var TodosList = import_react73.default.forwardRef(
     if (tasks.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ import_react73.default.createElement(
+    return /* @__PURE__ */ import_react74.default.createElement(
       "div",
       {
         ref,
@@ -6183,16 +6543,16 @@ var TodosList = import_react73.default.forwardRef(
         ),
         ...rest
       },
-      /* @__PURE__ */ import_react73.default.createElement(
+      /* @__PURE__ */ import_react74.default.createElement(
         "div",
         {
           className: "flex items-center justify-between px-4 py-2 border-b border-ash/40 flex-shrink-0"
         },
-        /* @__PURE__ */ import_react73.default.createElement("h4", { className: "text-xs font-medium text-white" }, title),
-        /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-xs text-silver/60" }, countCompleted(tasks), "/", countTotal(tasks))
+        /* @__PURE__ */ import_react74.default.createElement("h4", { className: "text-xs font-medium text-white" }, title),
+        /* @__PURE__ */ import_react74.default.createElement("span", { className: "text-xs text-silver/60" }, countCompleted(tasks), "/", countTotal(tasks))
       ),
-      /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex-1 overflow-y-auto px-4 py-2" }, sortedTasks.map((task) => /* @__PURE__ */ import_react73.default.createElement(TaskItem, { key: task.id, task }))),
-      showStopButton && /* @__PURE__ */ import_react73.default.createElement("div", { className: "px-4 py-2 border-t border-ash/40 flex-shrink-0" }, /* @__PURE__ */ import_react73.default.createElement(
+      /* @__PURE__ */ import_react74.default.createElement("div", { className: "flex-1 overflow-y-auto px-4 py-2" }, sortedTasks.map((task) => /* @__PURE__ */ import_react74.default.createElement(TaskItem, { key: task.id, task }))),
+      showStopButton && /* @__PURE__ */ import_react74.default.createElement("div", { className: "px-4 py-2 border-t border-ash/40 flex-shrink-0" }, /* @__PURE__ */ import_react74.default.createElement(
         "button",
         {
           type: "button",
@@ -6209,7 +6569,7 @@ var TodosList = import_react73.default.forwardRef(
             isStopping ? "cursor-not-allowed opacity-70" : "hover:bg-error/20"
           )
         },
-        isStopping ? /* @__PURE__ */ import_react73.default.createElement(import_react73.default.Fragment, null, /* @__PURE__ */ import_react73.default.createElement(import_lucide_react14.Loader2, { className: "w-3 h-3 animate-spin" }), "Stopping tasks") : /* @__PURE__ */ import_react73.default.createElement(import_react73.default.Fragment, null, /* @__PURE__ */ import_react73.default.createElement(import_lucide_react14.Square, { className: "w-3 h-3 fill-current" }), "Stop All Tasks")
+        isStopping ? /* @__PURE__ */ import_react74.default.createElement(import_react74.default.Fragment, null, /* @__PURE__ */ import_react74.default.createElement(import_lucide_react14.Loader2, { className: "w-3 h-3 animate-spin" }), "Stopping tasks") : /* @__PURE__ */ import_react74.default.createElement(import_react74.default.Fragment, null, /* @__PURE__ */ import_react74.default.createElement(import_lucide_react14.Square, { className: "w-3 h-3 fill-current" }), "Stop All Tasks")
       ))
     );
   }
@@ -6225,8 +6585,8 @@ function areAllTasksSettled(tasks) {
 }
 
 // src/components/chat/ToolSidebar.tsx
-var import_react74 = __toESM(require("react"));
-var ToolSidebar = import_react74.default.forwardRef(
+var import_react75 = __toESM(require("react"));
+var ToolSidebar = import_react75.default.forwardRef(
   ({ tools, activeTools, onToggleTool, side, className, ...rest }, ref) => {
     const topTools = tools.filter((t) => t.group === `top-${side}`);
     const bottomTools = tools.filter((t) => t.group === `bottom-${side}`);
@@ -6237,7 +6597,7 @@ var ToolSidebar = import_react74.default.forwardRef(
     };
     const renderButton = (tool) => {
       const active = isActive(tool.id);
-      return /* @__PURE__ */ import_react74.default.createElement(
+      return /* @__PURE__ */ import_react75.default.createElement(
         "button",
         {
           key: tool.id,
@@ -6249,10 +6609,10 @@ var ToolSidebar = import_react74.default.forwardRef(
           "aria-label": tool.label,
           "aria-pressed": active
         },
-        /* @__PURE__ */ import_react74.default.createElement("span", { className: "w-4 h-4 block" }, tool.icon)
+        /* @__PURE__ */ import_react75.default.createElement("span", { className: "w-4 h-4 block" }, tool.icon)
       );
     };
-    return /* @__PURE__ */ import_react74.default.createElement(
+    return /* @__PURE__ */ import_react75.default.createElement(
       "div",
       {
         ref,
@@ -6263,33 +6623,42 @@ var ToolSidebar = import_react74.default.forwardRef(
         ),
         ...rest
       },
-      /* @__PURE__ */ import_react74.default.createElement("div", { className: "flex flex-col items-center gap-1" }, topTools.map(renderButton)),
-      /* @__PURE__ */ import_react74.default.createElement("div", { className: "flex-1 flex items-center justify-center" }, /* @__PURE__ */ import_react74.default.createElement("div", { className: "w-5 border-t border-ash/30" })),
-      /* @__PURE__ */ import_react74.default.createElement("div", { className: "flex flex-col items-center gap-1" }, bottomTools.map(renderButton))
+      /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col items-center gap-1" }, topTools.map(renderButton)),
+      /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex-1 flex items-center justify-center" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "w-5 border-t border-ash/30" })),
+      /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col items-center gap-1" }, bottomTools.map(renderButton))
     );
   }
 );
 ToolSidebar.displayName = "ToolSidebar";
 
 // src/components/chat/ToolPanelContainer.tsx
-var import_react75 = __toESM(require("react"));
-var ToolPanelContainer = import_react75.default.forwardRef(
-  ({ topContent, bottomContent, width, onResizeStart, side = "right", className, ...rest }, ref) => {
-    const [topPercent, setTopPercent] = (0, import_react75.useState)(60);
-    const [isResizingHeight, setIsResizingHeight] = (0, import_react75.useState)(false);
-    const containerRef = (0, import_react75.useRef)(null);
-    const lastY = (0, import_react75.useRef)(null);
+var import_react76 = __toESM(require("react"));
+var ToolPanelContainer = import_react76.default.forwardRef(
+  ({
+    topContent,
+    bottomContent,
+    width,
+    onResizeStart,
+    side = "right",
+    className,
+    initialTopPercent = 60,
+    ...rest
+  }, ref) => {
+    const [topPercent, setTopPercent] = (0, import_react76.useState)(initialTopPercent);
+    const [isResizingHeight, setIsResizingHeight] = (0, import_react76.useState)(false);
+    const containerRef = (0, import_react76.useRef)(null);
+    const lastY = (0, import_react76.useRef)(null);
     const hasBoth = topContent !== null && bottomContent !== null;
-    const startHeightResize = (0, import_react75.useCallback)((e) => {
+    const startHeightResize = (0, import_react76.useCallback)((e) => {
       e.preventDefault();
       setIsResizingHeight(true);
       lastY.current = e.clientY;
     }, []);
-    const stopHeightResize = (0, import_react75.useCallback)(() => {
+    const stopHeightResize = (0, import_react76.useCallback)(() => {
       setIsResizingHeight(false);
       lastY.current = null;
     }, []);
-    const resizeHeight = (0, import_react75.useCallback)(
+    const resizeHeight = (0, import_react76.useCallback)(
       (e) => {
         if (!isResizingHeight || lastY.current === null || !containerRef.current) {
           return;
@@ -6308,7 +6677,7 @@ var ToolPanelContainer = import_react75.default.forwardRef(
       },
       [isResizingHeight]
     );
-    (0, import_react75.useEffect)(() => {
+    (0, import_react76.useEffect)(() => {
       if (isResizingHeight) {
         window.addEventListener("mousemove", resizeHeight);
         window.addEventListener("mouseup", stopHeightResize);
@@ -6327,7 +6696,7 @@ var ToolPanelContainer = import_react75.default.forwardRef(
         document.body.style.userSelect = "";
       };
     }, [isResizingHeight, resizeHeight, stopHeightResize]);
-    return /* @__PURE__ */ import_react75.default.createElement(
+    return /* @__PURE__ */ import_react76.default.createElement(
       "div",
       {
         ref: (node) => {
@@ -6346,7 +6715,7 @@ var ToolPanelContainer = import_react75.default.forwardRef(
         style: width ? { width } : void 0,
         ...rest
       },
-      /* @__PURE__ */ import_react75.default.createElement(
+      /* @__PURE__ */ import_react76.default.createElement(
         "div",
         {
           onMouseDown: onResizeStart,
@@ -6357,7 +6726,7 @@ var ToolPanelContainer = import_react75.default.forwardRef(
           )
         }
       ),
-      topContent !== null && /* @__PURE__ */ import_react75.default.createElement(
+      topContent !== null && /* @__PURE__ */ import_react76.default.createElement(
         "div",
         {
           className: "min-h-0 overflow-hidden flex flex-col",
@@ -6365,7 +6734,7 @@ var ToolPanelContainer = import_react75.default.forwardRef(
         },
         topContent
       ),
-      hasBoth && /* @__PURE__ */ import_react75.default.createElement(
+      hasBoth && /* @__PURE__ */ import_react76.default.createElement(
         "div",
         {
           onMouseDown: startHeightResize,
@@ -6377,7 +6746,7 @@ var ToolPanelContainer = import_react75.default.forwardRef(
           )
         }
       ),
-      bottomContent !== null && /* @__PURE__ */ import_react75.default.createElement(
+      bottomContent !== null && /* @__PURE__ */ import_react76.default.createElement(
         "div",
         {
           className: "min-h-0 overflow-hidden flex flex-col",
@@ -6391,26 +6760,26 @@ var ToolPanelContainer = import_react75.default.forwardRef(
 ToolPanelContainer.displayName = "ToolPanelContainer";
 
 // src/components/chat/hooks/useResizable.ts
-var import_react76 = require("react");
+var import_react77 = require("react");
 function useResizable({
   initialWidthPercent,
   minWidthPercent,
   maxWidthPercent,
   direction
 }) {
-  const [widthPercent, setWidthPercent] = (0, import_react76.useState)(initialWidthPercent);
-  const [isResizing, setIsResizing] = (0, import_react76.useState)(false);
-  const lastX = (0, import_react76.useRef)(null);
-  const startResizing = (0, import_react76.useCallback)((e) => {
+  const [widthPercent, setWidthPercent] = (0, import_react77.useState)(initialWidthPercent);
+  const [isResizing, setIsResizing] = (0, import_react77.useState)(false);
+  const lastX = (0, import_react77.useRef)(null);
+  const startResizing = (0, import_react77.useCallback)((e) => {
     e.preventDefault();
     setIsResizing(true);
     lastX.current = e.clientX;
   }, []);
-  const stopResizing = (0, import_react76.useCallback)(() => {
+  const stopResizing = (0, import_react77.useCallback)(() => {
     setIsResizing(false);
     lastX.current = null;
   }, []);
-  const resize = (0, import_react76.useCallback)(
+  const resize = (0, import_react77.useCallback)(
     (e) => {
       if (!isResizing || lastX.current === null) {
         return;
@@ -6426,7 +6795,7 @@ function useResizable({
     },
     [isResizing, direction, minWidthPercent, maxWidthPercent]
   );
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     if (isResizing) {
       window.addEventListener("mousemove", resize);
       window.addEventListener("mouseup", stopResizing);
@@ -6450,7 +6819,7 @@ function useResizable({
 }
 
 // src/components/chat/ChatInterface.tsx
-var ChatInterface = import_react77.default.forwardRef(
+var ChatInterface = import_react78.default.forwardRef(
   ({
     messages = [],
     conversationTree,
@@ -6462,6 +6831,7 @@ var ChatInterface = import_react77.default.forwardRef(
     onStop,
     onSelectConversation,
     onNewChat,
+    onRenameConversation,
     isStreaming = false,
     isThinking = false,
     placeholder = "Send a message...",
@@ -6477,21 +6847,24 @@ var ChatInterface = import_react77.default.forwardRef(
     tasks = [],
     tasksTitle,
     onStopAllTasks,
+    inputNotice,
+    onInputChange,
     tools: externalTools = [],
+    autoFocus = true,
     className,
     ...rest
   }, ref) => {
-    const prevArtifactNodesRef = (0, import_react77.useRef)([]);
-    const prevTasksRef = (0, import_react77.useRef)([]);
-    const [internalTools, setInternalTools] = (0, import_react77.useState)({
+    const prevArtifactNodesRef = (0, import_react78.useRef)([]);
+    const prevTasksRef = (0, import_react78.useRef)([]);
+    const [internalTools, setInternalTools] = (0, import_react78.useState)({
       "top-left": "history",
       "bottom-left": null,
       "top-right": null,
       "bottom-right": null
     });
-    const dismissedToolsRef = (0, import_react77.useRef)(/* @__PURE__ */ new Set());
+    const dismissedToolsRef = (0, import_react78.useRef)(/* @__PURE__ */ new Set());
     const isPanelControlled = isArtifactsPanelOpen !== void 0;
-    const activeTools = (0, import_react77.useMemo)(() => {
+    const activeTools = (0, import_react78.useMemo)(() => {
       if (isPanelControlled) {
         return {
           ...internalTools,
@@ -6506,9 +6879,9 @@ var ChatInterface = import_react77.default.forwardRef(
       width: rightToolsWidth,
       startResizing: startResizingRightTools
     } = useResizable({
-      initialWidthPercent: 50,
-      minWidthPercent: 25,
-      maxWidthPercent: 70,
+      initialWidthPercent: 40,
+      minWidthPercent: 30,
+      maxWidthPercent: 80,
       direction: "left"
     });
     const {
@@ -6521,13 +6894,13 @@ var ChatInterface = import_react77.default.forwardRef(
       direction: "right"
     });
     const allSettled = tasks.length === 0 || areAllTasksSettled(tasks);
-    const allToolDefinitions = (0, import_react77.useMemo)(() => {
+    const allToolDefinitions = (0, import_react78.useMemo)(() => {
       const builtIn = [
-        { id: "history", icon: /* @__PURE__ */ import_react77.default.createElement(ChatBubbleIcon, null), label: "History", group: "top-left" },
-        { id: "artifacts", icon: /* @__PURE__ */ import_react77.default.createElement(MediaIcon, null), label: "Artifacts", group: "top-right" },
+        { id: "history", icon: /* @__PURE__ */ import_react78.default.createElement(ChatBubbleIcon, null), label: "History", group: "top-left" },
+        { id: "artifacts", icon: /* @__PURE__ */ import_react78.default.createElement(MediaIcon, null), label: "Artifacts", group: "top-right" },
         {
           id: "todos",
-          icon: allSettled ? /* @__PURE__ */ import_react77.default.createElement(CheckSquareIcon, null) : /* @__PURE__ */ import_react77.default.createElement(SquareLoaderIcon, null),
+          icon: allSettled ? /* @__PURE__ */ import_react78.default.createElement(CheckSquareIcon, null) : /* @__PURE__ */ import_react78.default.createElement(SquareLoaderIcon, null),
           label: "Tasks",
           group: "bottom-right"
         }
@@ -6535,7 +6908,7 @@ var ChatInterface = import_react77.default.forwardRef(
       const external = externalTools.map(({ content: _content, ...def }) => def);
       return [...builtIn, ...external];
     }, [allSettled, externalTools]);
-    const toggleTool = (0, import_react77.useCallback)((toolId) => {
+    const toggleTool = (0, import_react78.useCallback)((toolId) => {
       const toolDef = allToolDefinitions.find((t) => t.id === toolId);
       if (!toolDef) {
         return;
@@ -6565,7 +6938,7 @@ var ChatInterface = import_react77.default.forwardRef(
       });
     }, [allToolDefinitions, isPanelControlled, activeTools, onArtifactsPanelOpenChange]);
     const isTreeMode = !!conversationTree;
-    const effectiveMessages = (0, import_react77.useMemo)(() => {
+    const effectiveMessages = (0, import_react78.useMemo)(() => {
       if (isTreeMode && conversationTree) {
         const pathNodes = getActivePathMessages(conversationTree);
         return pathNodes.map((node) => ({
@@ -6577,7 +6950,7 @@ var ChatInterface = import_react77.default.forwardRef(
       }
       return messages;
     }, [isTreeMode, conversationTree, messages]);
-    const latestUserMessageIndex = (0, import_react77.useMemo)(() => {
+    const latestUserMessageIndex = (0, import_react78.useMemo)(() => {
       for (let i = effectiveMessages.length - 1; i >= 0; i--) {
         if (effectiveMessages[i].variant === "user") {
           return i;
@@ -6585,7 +6958,7 @@ var ChatInterface = import_react77.default.forwardRef(
       }
       return -1;
     }, [effectiveMessages]);
-    (0, import_react77.useEffect)(() => {
+    (0, import_react78.useEffect)(() => {
       const nodes = artifactNodes || [];
       const prevNodes = prevArtifactNodesRef.current;
       const hasNewOrChangedNode = nodes.length !== prevNodes.length || nodes.some((n, i) => n.id !== prevNodes[i]?.id);
@@ -6601,10 +6974,7 @@ var ChatInterface = import_react77.default.forwardRef(
           if (c.status !== p.status || c.label !== p.label) {
             return true;
           }
-          if (c.subtasks && hasNewOrUpdatedTask(c.subtasks, p?.subtasks || [])) {
-            return true;
-          }
-          return false;
+          return !!(c.subtasks && hasNewOrUpdatedTask(c.subtasks, p?.subtasks || []));
         });
       };
       if (hasNewOrUpdatedTask(tasks, prevTasksRef.current) && !dismissedToolsRef.current.has("todos")) {
@@ -6613,7 +6983,7 @@ var ChatInterface = import_react77.default.forwardRef(
       prevArtifactNodesRef.current = nodes;
       prevTasksRef.current = tasks;
     }, [artifactNodes, tasks, isPanelControlled]);
-    const handleBranchSwitch = (0, import_react77.useCallback)(
+    const handleBranchSwitch = (0, import_react78.useCallback)(
       (nodeId, direction) => {
         if (!isTreeMode || !conversationTree || !onTreeChange) {
           return;
@@ -6623,7 +6993,7 @@ var ChatInterface = import_react77.default.forwardRef(
       },
       [isTreeMode, conversationTree, onTreeChange]
     );
-    const displayMessages = (0, import_react77.useMemo)(() => {
+    const displayMessages = (0, import_react78.useMemo)(() => {
       return effectiveMessages.map((msg) => {
         let branchInfo = void 0;
         if (isTreeMode && conversationTree) {
@@ -6653,18 +7023,18 @@ var ChatInterface = import_react77.default.forwardRef(
       onRetryMessage,
       handleBranchSwitch
     ]);
-    const handleSubmit = (0, import_react77.useCallback)(
+    const handleSubmit = (0, import_react78.useCallback)(
       (message, attachments) => {
         onMessageSubmit?.(message, attachments);
       },
       [onMessageSubmit]
     );
     const isEmpty = effectiveMessages.length === 0;
-    const leftToolDefs = (0, import_react77.useMemo)(
+    const leftToolDefs = (0, import_react78.useMemo)(
       () => allToolDefinitions.filter((t) => t.group === "top-left" || t.group === "bottom-left"),
       [allToolDefinitions]
     );
-    const rightToolDefs = (0, import_react77.useMemo)(
+    const rightToolDefs = (0, import_react78.useMemo)(
       () => allToolDefinitions.filter(
         (t) => t.group === "top-right" || t.group === "bottom-right"
       ),
@@ -6678,58 +7048,17 @@ var ChatInterface = import_react77.default.forwardRef(
       }
       switch (toolId) {
         case "history":
-          return /* @__PURE__ */ import_react77.default.createElement("div", { className: "h-full flex flex-col" }, /* @__PURE__ */ import_react77.default.createElement(
-            "div",
-            {
-              className: "flex items-center justify-between p-4 border-b border-ash/40 shrink-0"
-            },
-            /* @__PURE__ */ import_react77.default.createElement("h3", { className: "text-xs font-medium text-white" }, "History"),
-            onNewChat && /* @__PURE__ */ import_react77.default.createElement(
-              "button",
-              {
-                onClick: onNewChat,
-                className: cx(
-                  "flex px-3 py-1.5",
-                  "bg-gold/10 hover:bg-gold/20 text-gold",
-                  "border border-gold/30",
-                  "text-xs font-medium",
-                  "transition-colors duration-200"
-                )
-              },
-              /* @__PURE__ */ import_react77.default.createElement(
-                "svg",
-                {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  viewBox: "0 0 20 20",
-                  fill: "currentColor",
-                  className: "w-4 h-4"
-                },
-                /* @__PURE__ */ import_react77.default.createElement(
-                  "path",
-                  {
-                    d: "M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
-                  }
-                )
-              ),
-              "New Chat"
-            )
-          ), /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex-1 overflow-y-auto py-2" }, conversations.length === 0 ? /* @__PURE__ */ import_react77.default.createElement("p", { className: "px-4 py-2 text-xs text-silver/60" }, "No conversations yet") : /* @__PURE__ */ import_react77.default.createElement("div", { className: "space-y-1 px-2" }, conversations.map((conversation) => /* @__PURE__ */ import_react77.default.createElement(
-            "button",
+          return /* @__PURE__ */ import_react78.default.createElement(
+            HistoryPanel,
             {
-              key: conversation.id,
-              onClick: () => onSelectConversation?.(conversation.id),
-              className: cx(
-                "w-full px-3 py-2 text-left",
-                "transition-colors duration-150",
-                conversation.isActive ? "bg-ash/40 text-white" : "text-silver hover:bg-ash/20 hover:text-white"
-              )
-            },
-            /* @__PURE__ */ import_react77.default.createElement("p", { className: "text-sm font-medium truncate" }, conversation.title),
-            conversation.preview && /* @__PURE__ */ import_react77.default.createElement("p", { className: "text-xs text-silver/60 truncate mt-0.5" }, conversation.preview),
-            conversation.timestamp && /* @__PURE__ */ import_react77.default.createElement("p", { className: "text-xs text-silver/40 mt-1" }, conversation.timestamp)
-          )))));
+              conversations,
+              onSelectConversation,
+              onNewChat,
+              onRenameConversation
+            }
+          );
         case "artifacts":
-          return /* @__PURE__ */ import_react77.default.createElement(
+          return /* @__PURE__ */ import_react78.default.createElement(
             ArtifactsPanel,
             {
               nodes: artifactNodes,
@@ -6737,21 +7066,29 @@ var ChatInterface = import_react77.default.forwardRef(
             }
           );
         case "todos":
-          return tasks.length > 0 ? /* @__PURE__ */ import_react77.default.createElement(TodosList, { tasks, title: tasksTitle, onStopAllTasks, className: "h-full" }) : /* @__PURE__ */ import_react77.default.createElement("div", { className: "h-full flex flex-col" }, /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex items-center p-4 border-b border-ash/40 shrink-0" }, /* @__PURE__ */ import_react77.default.createElement("h3", { className: "text-xs font-medium text-white" }, "Tasks")), /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex-1 flex items-center justify-center" }, /* @__PURE__ */ import_react77.default.createElement("p", { className: "text-xs text-silver/60" }, "No tasks")));
+          return tasks.length > 0 ? /* @__PURE__ */ import_react78.default.createElement(
+            TodosList,
+            {
+              tasks,
+              title: tasksTitle,
+              onStopAllTasks,
+              className: "h-full"
+            }
+          ) : /* @__PURE__ */ import_react78.default.createElement("div", { className: "h-full flex flex-col" }, /* @__PURE__ */ import_react78.default.createElement("div", { className: "flex items-center p-4 border-b border-ash/40 shrink-0" }, /* @__PURE__ */ import_react78.default.createElement("h3", { className: "text-xs font-medium text-white" }, "Tasks")), /* @__PURE__ */ import_react78.default.createElement("div", { className: "flex-1 flex items-center justify-center" }, /* @__PURE__ */ import_react78.default.createElement("p", { className: "text-xs text-silver/60" }, "No tasks")));
         default: {
           const externalTool = externalTools.find((t) => t.id === toolId);
           return externalTool?.content ?? null;
         }
       }
     };
-    return /* @__PURE__ */ import_react77.default.createElement(
+    return /* @__PURE__ */ import_react78.default.createElement(
       "div",
       {
         ref,
         className: cx("flex h-full w-full bg-obsidian overflow-hidden", className),
         ...rest
       },
-      hasLeftTools && /* @__PURE__ */ import_react77.default.createElement(
+      hasLeftTools && /* @__PURE__ */ import_react78.default.createElement(
         ToolSidebar,
         {
           tools: leftToolDefs,
@@ -6760,26 +7097,27 @@ var ChatInterface = import_react77.default.forwardRef(
           side: "left"
         }
       ),
-      isLeftPanelOpen && /* @__PURE__ */ import_react77.default.createElement(
+      isLeftPanelOpen && /* @__PURE__ */ import_react78.default.createElement(
         ToolPanelContainer,
         {
           topContent: renderToolContent(activeTools["top-left"]),
           bottomContent: renderToolContent(activeTools["bottom-left"]),
           width: leftToolsWidth,
           onResizeStart: startResizingLeftTools,
-          side: "left"
+          side: "left",
+          initialTopPercent: 30
         }
       ),
-      /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex-1 flex flex-col min-w-0 relative" }, /* @__PURE__ */ import_react77.default.createElement("div", { className: cx(
+      /* @__PURE__ */ import_react78.default.createElement("div", { className: "flex-1 flex flex-col min-w-0 relative" }, /* @__PURE__ */ import_react78.default.createElement("div", { className: cx(
         "flex-1 flex flex-col min-h-0 relative",
         isEmpty ? "justify-center" : "justify-start"
-      ) }, /* @__PURE__ */ import_react77.default.createElement("div", { className: cx(
+      ) }, /* @__PURE__ */ import_react78.default.createElement("div", { className: cx(
         "transition-all duration-500 ease-in-out",
         isEmpty ? "flex-1" : "flex-zero"
-      ) }), /* @__PURE__ */ import_react77.default.createElement("div", { className: cx(
+      ) }), /* @__PURE__ */ import_react78.default.createElement("div", { className: cx(
         "transition-all duration-500 ease-in-out overflow-hidden flex flex-col",
         isEmpty ? "flex-zero opacity-0" : "flex-1 opacity-100"
-      ) }, /* @__PURE__ */ import_react77.default.createElement(
+      ) }, /* @__PURE__ */ import_react78.default.createElement(
         ChatView,
         {
           messages: displayMessages,
@@ -6788,10 +7126,10 @@ var ChatInterface = import_react77.default.forwardRef(
           isThinking,
           className: "flex-1"
         }
-      )), /* @__PURE__ */ import_react77.default.createElement("div", { className: cx(
+      )), /* @__PURE__ */ import_react78.default.createElement("div", { className: cx(
         "transition-all duration-500 ease-in-out z-10 w-full flex flex-col items-center",
         isEmpty ? "p-4" : "shrink-0 p-4 border-t border-ash/40 bg-obsidian"
-      ) }, isEmpty && /* @__PURE__ */ import_react77.default.createElement("div", { className: "mb-8 text-center animate-fade-in duration-500" }, emptyState ? emptyState : /* @__PURE__ */ import_react77.default.createElement("h1", { className: "text-4xl md:text-5xl font-heading text-gold mb-2 tracking-tight" }, "Welcome!")), /* @__PURE__ */ import_react77.default.createElement(
+      ) }, isEmpty && /* @__PURE__ */ import_react78.default.createElement("div", { className: "mb-8 text-center animate-fade-in duration-500" }, emptyState ? emptyState : /* @__PURE__ */ import_react78.default.createElement("h1", { className: "text-4xl md:text-5xl font-heading text-gold mb-2 tracking-tight" }, "Welcome!")), /* @__PURE__ */ import_react78.default.createElement(
         ChatInput,
         {
           position: isEmpty ? "centered" : "bottom",
@@ -6803,23 +7141,27 @@ var ChatInterface = import_react77.default.forwardRef(
           onStop,
           showAttachmentButton,
           attachments: propsAttachments,
-          onAttachmentsChange
+          onAttachmentsChange,
+          notice: inputNotice,
+          onInputChange,
+          autoFocus
         }
-      )), /* @__PURE__ */ import_react77.default.createElement("div", { className: cx(
+      )), /* @__PURE__ */ import_react78.default.createElement("div", { className: cx(
         "transition-all duration-500 ease-in-out",
         isEmpty ? "flex-1" : "flex-zero"
       ) }))),
-      isRightPanelOpen && /* @__PURE__ */ import_react77.default.createElement(
+      isRightPanelOpen && /* @__PURE__ */ import_react78.default.createElement(
         ToolPanelContainer,
         {
           topContent: renderToolContent(activeTools["top-right"]),
           bottomContent: renderToolContent(activeTools["bottom-right"]),
           width: rightToolsWidth,
           onResizeStart: startResizingRightTools,
-          side: "right"
+          side: "right",
+          initialTopPercent: 70
         }
       ),
-      hasRightTools && /* @__PURE__ */ import_react77.default.createElement(
+      hasRightTools && /* @__PURE__ */ import_react78.default.createElement(
         ToolSidebar,
         {
           tools: rightToolDefs,
@@ -6834,9 +7176,9 @@ var ChatInterface = import_react77.default.forwardRef(
 ChatInterface.displayName = "ChatInterface";
 
 // src/components/chat/MessageActions.tsx
-var import_react78 = __toESM(require("react"));
+var import_react79 = __toESM(require("react"));
 var import_lucide_react15 = require("lucide-react");
-var ActionButton2 = ({ onClick, label, children, className, disabled }) => /* @__PURE__ */ import_react78.default.createElement(
+var ActionButton2 = ({ onClick, label, children, className, disabled }) => /* @__PURE__ */ import_react79.default.createElement(
   "button",
   {
     type: "button",
@@ -6852,7 +7194,7 @@ var ActionButton2 = ({ onClick, label, children, className, disabled }) => /* @_
   },
   children
 );
-var MessageActions = import_react78.default.forwardRef(
+var MessageActions = import_react79.default.forwardRef(
   ({
     variant,
     content,
@@ -6864,12 +7206,12 @@ var MessageActions = import_react78.default.forwardRef(
     className,
     ...rest
   }, ref) => {
-    const [localIsEditing, setLocalIsEditing] = (0, import_react78.useState)(false);
-    const [localEditValue, setLocalEditValue] = (0, import_react78.useState)(content);
-    const [copied, setCopied] = (0, import_react78.useState)(false);
+    const [localIsEditing, setLocalIsEditing] = (0, import_react79.useState)(false);
+    const [localEditValue, setLocalEditValue] = (0, import_react79.useState)(content);
+    const [copied, setCopied] = (0, import_react79.useState)(false);
     const isEditing = controlledIsEditing ?? localIsEditing;
     const editValue = controlledEditValue ?? localEditValue;
-    const setIsEditing = (0, import_react78.useCallback)(
+    const setIsEditing = (0, import_react79.useCallback)(
       (value) => {
         if (onEditingChange) {
           onEditingChange(value);
@@ -6879,10 +7221,10 @@ var MessageActions = import_react78.default.forwardRef(
       },
       [onEditingChange]
     );
-    const setEditValue = (0, import_react78.useCallback)((value) => {
+    const setEditValue = (0, import_react79.useCallback)((value) => {
       setLocalEditValue(value);
     }, []);
-    const handleCopy = (0, import_react78.useCallback)(async () => {
+    const handleCopy = (0, import_react79.useCallback)(async () => {
       try {
         await navigator.clipboard.writeText(content);
         setCopied(true);
@@ -6898,22 +7240,22 @@ var MessageActions = import_react78.default.forwardRef(
         setTimeout(() => setCopied(false), 2e3);
       }
     }, [content]);
-    const handleStartEdit = (0, import_react78.useCallback)(() => {
+    const handleStartEdit = (0, import_react79.useCallback)(() => {
       setLocalEditValue(content);
       setIsEditing(true);
     }, [content, setIsEditing]);
-    const handleCancelEdit = (0, import_react78.useCallback)(() => {
+    const handleCancelEdit = (0, import_react79.useCallback)(() => {
       setIsEditing(false);
       setLocalEditValue(content);
     }, [content, setIsEditing]);
-    const handleSubmitEdit = (0, import_react78.useCallback)(() => {
+    const handleSubmitEdit = (0, import_react79.useCallback)(() => {
       const trimmed = editValue.trim();
       if (trimmed && trimmed !== content) {
         onEdit?.(trimmed);
       }
       setIsEditing(false);
     }, [editValue, content, onEdit, setIsEditing]);
-    const handleEditKeyDown = (0, import_react78.useCallback)(
+    const handleEditKeyDown = (0, import_react79.useCallback)(
       (e) => {
         if (e.key === "Enter" && !e.shiftKey) {
           e.preventDefault();
@@ -6926,19 +7268,19 @@ var MessageActions = import_react78.default.forwardRef(
     );
     const isUser = variant === "user";
     if (isUser && isEditing) {
-      return /* @__PURE__ */ import_react78.default.createElement(
+      return /* @__PURE__ */ import_react79.default.createElement(
         "div",
         {
           ref,
           className: cx("mt-2", className),
           ...rest
         },
-        /* @__PURE__ */ import_react78.default.createElement(
+        /* @__PURE__ */ import_react79.default.createElement(
           "div",
           {
             className: "relative bg-charcoal border border-ash/60 focus-within:border-gold/60 focus-within:ring-1 focus-within:ring-gold/20"
           },
-          /* @__PURE__ */ import_react78.default.createElement(
+          /* @__PURE__ */ import_react79.default.createElement(
             "textarea",
             {
               value: editValue,
@@ -6949,15 +7291,15 @@ var MessageActions = import_react78.default.forwardRef(
               rows: 2
             }
           ),
-          /* @__PURE__ */ import_react78.default.createElement("div", { className: "absolute right-2 bottom-2 flex gap-1" }, /* @__PURE__ */ import_react78.default.createElement(
+          /* @__PURE__ */ import_react79.default.createElement("div", { className: "absolute right-2 bottom-2 flex gap-1" }, /* @__PURE__ */ import_react79.default.createElement(
             ActionButton2,
             {
               onClick: handleCancelEdit,
               label: "Cancel edit",
               className: "text-silver/60 hover:text-error"
             },
-            /* @__PURE__ */ import_react78.default.createElement(import_lucide_react15.X, { className: "w-4 h-4" })
-          ), /* @__PURE__ */ import_react78.default.createElement(
+            /* @__PURE__ */ import_react79.default.createElement(import_lucide_react15.X, { className: "w-4 h-4" })
+          ), /* @__PURE__ */ import_react79.default.createElement(
             ActionButton2,
             {
               onClick: handleSubmitEdit,
@@ -6965,13 +7307,13 @@ var MessageActions = import_react78.default.forwardRef(
               className: "text-silver/60 hover:text-gold",
               disabled: !editValue.trim() || editValue.trim() === content
             },
-            /* @__PURE__ */ import_react78.default.createElement(import_lucide_react15.Send, { className: "w-4 h-4" })
+            /* @__PURE__ */ import_react79.default.createElement(import_lucide_react15.Send, { className: "w-4 h-4" })
           ))
         ),
-        /* @__PURE__ */ import_react78.default.createElement("p", { className: "text-xs text-silver/50 mt-1" }, "Press Enter to submit, Esc to cancel. This will create a new branch.")
+        /* @__PURE__ */ import_react79.default.createElement("p", { className: "text-xs text-silver/50 mt-1" }, "Press Enter to submit, Esc to cancel. This will create a new branch.")
       );
     }
-    return /* @__PURE__ */ import_react78.default.createElement(
+    return /* @__PURE__ */ import_react79.default.createElement(
       "div",
       {
         ref,
@@ -6982,18 +7324,18 @@ var MessageActions = import_react78.default.forwardRef(
         ),
         ...rest
       },
-      /* @__PURE__ */ import_react78.default.createElement(ActionButton2, { onClick: handleCopy, label: copied ? "Copied!" : "Copy message" }, copied ? /* @__PURE__ */ import_react78.default.createElement(import_lucide_react15.Check, { className: "w-3.5 h-3.5 text-success" }) : /* @__PURE__ */ import_react78.default.createElement(import_lucide_react15.Copy, { className: "w-3.5 h-3.5" })),
-      isUser && onEdit && /* @__PURE__ */ import_react78.default.createElement(ActionButton2, { onClick: handleStartEdit, label: "Edit message" }, /* @__PURE__ */ import_react78.default.createElement(import_lucide_react15.Pencil, { className: "w-3.5 h-3.5" })),
-      !isUser && onRetry && /* @__PURE__ */ import_react78.default.createElement(ActionButton2, { onClick: onRetry, label: "Regenerate response" }, /* @__PURE__ */ import_react78.default.createElement(import_lucide_react15.RotateCcw, { className: "w-3.5 h-3.5" }))
+      /* @__PURE__ */ import_react79.default.createElement(ActionButton2, { onClick: handleCopy, label: copied ? "Copied!" : "Copy message" }, copied ? /* @__PURE__ */ import_react79.default.createElement(import_lucide_react15.Check, { className: "w-3.5 h-3.5 text-success" }) : /* @__PURE__ */ import_react79.default.createElement(import_lucide_react15.Copy, { className: "w-3.5 h-3.5" })),
+      isUser && onEdit && /* @__PURE__ */ import_react79.default.createElement(ActionButton2, { onClick: handleStartEdit, label: "Edit message" }, /* @__PURE__ */ import_react79.default.createElement(import_lucide_react15.Pencil, { className: "w-3.5 h-3.5" })),
+      !isUser && onRetry && /* @__PURE__ */ import_react79.default.createElement(ActionButton2, { onClick: onRetry, label: "Regenerate response" }, /* @__PURE__ */ import_react79.default.createElement(import_lucide_react15.RotateCcw, { className: "w-3.5 h-3.5" }))
     );
   }
 );
 MessageActions.displayName = "MessageActions";
 
 // src/components/chat/BranchNavigator.tsx
-var import_react79 = __toESM(require("react"));
+var import_react80 = __toESM(require("react"));
 var import_lucide_react16 = require("lucide-react");
-var BranchNavigator = import_react79.default.forwardRef(
+var BranchNavigator = import_react80.default.forwardRef(
   ({
     current,
     total,
@@ -7012,7 +7354,7 @@ var BranchNavigator = import_react79.default.forwardRef(
     const buttonSize = size === "sm" ? "p-0.5" : "p-1";
     const iconSize = size === "sm" ? "w-3 h-3" : "w-4 h-4";
     const textSize = size === "sm" ? "text-xs" : "text-sm";
-    return /* @__PURE__ */ import_react79.default.createElement(
+    return /* @__PURE__ */ import_react80.default.createElement(
       "div",
       {
         ref,
@@ -7024,8 +7366,8 @@ var BranchNavigator = import_react79.default.forwardRef(
         "aria-label": "Branch navigation",
         ...rest
       },
-      showIcon && /* @__PURE__ */ import_react79.default.createElement(import_lucide_react16.GitBranch, { className: cx(iconSize, "mr-0.5 text-silver/50"), "aria-hidden": "true" }),
-      /* @__PURE__ */ import_react79.default.createElement(
+      showIcon && /* @__PURE__ */ import_react80.default.createElement(import_lucide_react16.GitBranch, { className: cx(iconSize, "mr-0.5 text-silver/50"), "aria-hidden": "true" }),
+      /* @__PURE__ */ import_react80.default.createElement(
         "button",
         {
           type: "button",
@@ -7038,10 +7380,10 @@ var BranchNavigator = import_react79.default.forwardRef(
           ),
           "aria-label": "Previous branch"
         },
-        /* @__PURE__ */ import_react79.default.createElement(import_lucide_react16.ChevronLeft, { className: iconSize })
+        /* @__PURE__ */ import_react80.default.createElement(import_lucide_react16.ChevronLeft, { className: iconSize })
       ),
-      /* @__PURE__ */ import_react79.default.createElement("span", { className: cx(textSize, "tabular-nums min-w-6 text-center") }, current, "/", total),
-      /* @__PURE__ */ import_react79.default.createElement(
+      /* @__PURE__ */ import_react80.default.createElement("span", { className: cx(textSize, "tabular-nums min-w-6 text-center") }, current, "/", total),
+      /* @__PURE__ */ import_react80.default.createElement(
         "button",
         {
           type: "button",
@@ -7054,7 +7396,7 @@ var BranchNavigator = import_react79.default.forwardRef(
           ),
           "aria-label": "Next branch"
         },
-        /* @__PURE__ */ import_react79.default.createElement(import_lucide_react16.ChevronRight, { className: iconSize })
+        /* @__PURE__ */ import_react80.default.createElement(import_lucide_react16.ChevronRight, { className: iconSize })
       )
     );
   }
@@ -7062,16 +7404,16 @@ var BranchNavigator = import_react79.default.forwardRef(
 BranchNavigator.displayName = "BranchNavigator";
 
 // src/components/BrandIcon.tsx
-var import_react80 = __toESM(require("react"));
+var import_react81 = __toESM(require("react"));
 var sizeMap2 = {
   sm: "h-8 w-8 text-sm",
   md: "h-12 w-12 text-base",
   lg: "h-16 w-16 text-lg"
 };
-var BrandIcon = import_react80.default.forwardRef(
+var BrandIcon = import_react81.default.forwardRef(
   ({ size = "md", variant = "solid", children, className, ...rest }, ref) => {
     const variantClasses = variant === "solid" ? "bg-gold text-obsidian border-2 border-gold" : "bg-transparent text-gold border-2 border-gold";
-    return /* @__PURE__ */ import_react80.default.createElement(
+    return /* @__PURE__ */ import_react81.default.createElement(
       "div",
       {
         ref,
@@ -7090,17 +7432,17 @@ var BrandIcon = import_react80.default.forwardRef(
 BrandIcon.displayName = "BrandIcon";
 
 // src/components/ColorSwatch.tsx
-var import_react81 = __toESM(require("react"));
-var ColorSwatch = import_react81.default.forwardRef(
+var import_react82 = __toESM(require("react"));
+var ColorSwatch = import_react82.default.forwardRef(
   ({ color, label, className, ...rest }, ref) => {
-    return /* @__PURE__ */ import_react81.default.createElement(
+    return /* @__PURE__ */ import_react82.default.createElement(
       "div",
       {
         ref,
         className: cx("flex flex-col items-center gap-2", className),
         ...rest
       },
-      /* @__PURE__ */ import_react81.default.createElement(
+      /* @__PURE__ */ import_react82.default.createElement(
         "div",
         {
           className: "h-16 w-16 border-2 border-ash rounded-none shadow-sm",
@@ -7108,22 +7450,22 @@ var ColorSwatch = import_react81.default.forwardRef(
           "aria-label": label || color
         }
       ),
-      label && /* @__PURE__ */ import_react81.default.createElement("span", { className: "text-xs text-silver font-medium" }, label)
+      label && /* @__PURE__ */ import_react82.default.createElement("span", { className: "text-xs text-silver font-medium" }, label)
     );
   }
 );
 ColorSwatch.displayName = "ColorSwatch";
 
 // src/components/SectionHeading.tsx
-var import_react82 = __toESM(require("react"));
+var import_react83 = __toESM(require("react"));
 var levelStyles = {
   h2: "text-2xl mb-4",
   h3: "text-xl mb-3"
 };
-var SectionHeading = import_react82.default.forwardRef(
+var SectionHeading = import_react83.default.forwardRef(
   ({ level = "h2", children, className, ...rest }, ref) => {
     const Component = level;
-    return /* @__PURE__ */ import_react82.default.createElement(
+    return /* @__PURE__ */ import_react83.default.createElement(
       Component,
       {
         ref,
@@ -7195,6 +7537,7 @@ var version = "2.0.0";
   FileChip,
   HelperText,
   HistoryIcon,
+  HistoryPanel,
   ImageCard,
   Input,
   InputGroup,