diff --git a/CHANGELOG.md b/CHANGELOG.md
index efc5df9..9be66e8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **Chat history depth setting.** Choose how many previous chat turns are sent
   with each AI panel message (Settings → AI, default 8). Lower it to save
   tokens with local models, or set 0 to make every message start fresh. (#111)
+- **The AI panel is resizable.** Drag its left edge to make it as wide as you
+  need, or focus the edge and use the arrow keys. The width is remembered, and
+  the editor reflows beside it as you drag. (#111)
+- **Your chats are kept.** Closing the AI panel or starting a new chat no longer
+  throws the conversation away. Past chats are listed under the new history
+  button in the panel header, survive restarting the app, and can be deleted
+  individually. (#111)
+- **The AI icon animation can be turned off.** Settings → AI → "Animate the AI
+  icon" switches the shimmer on the title-bar AI button off, leaving it as plain
+  text. (#111)
 
 ### Fixed
 
diff --git a/src/App.tsx b/src/App.tsx
index 35796e4..25203bc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -75,6 +75,7 @@ import {
   addRecentFile,
   getAIConfig,
   getAIEnabled,
+  getAIPanelWidth,
   initAIKey,
   getLastFile,
   getOpenInReader,
@@ -136,9 +137,10 @@ interface FileData {
 const IS_MAC = typeof navigator !== "undefined" && /mac/i.test(navigator.platform || navigator.userAgent || "");
 const AI_SHORTCUT = IS_MAC ? "⌘J" : "Alt+J";
 
-// Width of the right-side AI panel; the editor/preview area reserves this much
-// padding-right when it's open so content reflows beside it (not under it).
-const AI_PANEL_WIDTH = 400;
+// The AI panel's width is a persisted user setting, dragged from its left edge
+// (#111). App owns it because three things must agree on one number: the panel
+// itself, the padding-right the editor/preview reserves so content reflows
+// beside it (not under it), and the floating mode toggle that sits clear of it.
 
 // Width of the left-side drawers (FileExplorer / TableOfContents); they are
 // `fixed left-0 w-72` (18rem = 288px), so the editor reserves this much
@@ -219,6 +221,8 @@ function AppContent() {
   const [showFileExplorer, setShowFileExplorer] = useState(false);
   const [showTOC, setShowTOC] = useState(false);
   const [showAIPanel, setShowAIPanel] = useState(false);
+  // Live during a drag; the panel writes the settled value to storage itself.
+  const [aiPanelWidth, setAiPanelWidth] = useState(getAIPanelWidth);
   // Proposed document from Agent mode, shown as an inline diff for accept/reject.
   const [proposedDoc, setProposedDoc] = useState<string | null>(null);
 
@@ -1950,7 +1954,7 @@ function AppContent() {
             // editor beside them instead of overlaying it.
             style={{
                 paddingLeft: (showFileExplorer || showTOC) ? `${SIDEBAR_WIDTH}px` : 0,
-                paddingRight: showAIPanel ? `min(${AI_PANEL_WIDTH}px, 90vw)` : 0,
+                paddingRight: showAIPanel ? `min(${aiPanelWidth}px, 90vw)` : 0,
                 transition: "padding 0.15s ease",
             }}
           >
@@ -2036,7 +2040,7 @@ function AppContent() {
             </div>
           </div>
 
-          <ModeToggle mode={mode} onSetMode={setMode} aiPanelOpen={showAIPanel} />
+          <ModeToggle mode={mode} onSetMode={setMode} aiPanelOpen={showAIPanel} aiPanelWidth={aiPanelWidth} />
 
           {/* Sidebar Panels — only mount when actually open so they don't
               load their module until first use. */}
@@ -2073,6 +2077,8 @@ function AppContent() {
                 selectionText={content.slice(selectionRange.start, selectionRange.end)}
                 aiConfig={aiConfig}
                 onProposeEdit={handleProposeEdit}
+                width={aiPanelWidth}
+                onWidthChange={setAiPanelWidth}
               />
             </Suspense>
           )}
diff --git a/src/components/AIPanel.history.test.tsx b/src/components/AIPanel.history.test.tsx
new file mode 100644
index 0000000..7f02f79
--- /dev/null
+++ b/src/components/AIPanel.history.test.tsx
@@ -0,0 +1,201 @@
+// Chat persistence and the history dropdown (#111). The panel unmounts when
+// closed, so before this its conversation died with it; these cover the parts
+// that make close/reopen and switching chats non-destructive.
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { render, screen, cleanup, waitFor, fireEvent, act } from "@testing-library/react";
+import { AIPanel } from "./AIPanel";
+import { getChatSessions, setChatSessions } from "../utils/persistence";
+import type { ChatSession } from "../utils/chatSessions";
+
+// Nothing here streams; the panel only renders stored transcripts.
+vi.mock("../utils/aiChat", async (orig) => ({
+    ...(await orig<typeof import("../utils/aiChat")>()),
+    streamChat: vi.fn(),
+}));
+
+const cfg = { endpoint: "https://x/v1/chat/completions", model: "m", apiKey: "k" };
+
+const baseProps = {
+    isOpen: true,
+    onClose: () => {},
+    note: "the document",
+    fileName: "note.md",
+    selectionText: "",
+    aiConfig: cfg,
+    width: 400,
+    onWidthChange: () => {},
+};
+
+/**
+ * A stored chat. `text` is the user's question AND the title, because titles are
+ * derived from the first user message: the panel re-commits the chat it has open
+ * on mount, which recomputes that title. A fixture whose title disagreed with
+ * its messages would be silently rewritten and the test would chase a ghost.
+ */
+const session = (id: string, updatedAt: number, text: string): ChatSession => ({
+    id,
+    title: text,
+    updatedAt,
+    messages: [
+        { role: "user", content: text },
+        { role: "assistant", content: `answer about ${text}` },
+    ],
+});
+
+/** A click that also fires the mousedown the outside-click watcher listens for. */
+const click = (el: HTMLElement) => {
+    act(() => {
+        fireEvent.mouseDown(el);
+        fireEvent.click(el);
+    });
+};
+
+const openHistory = () => click(screen.getByLabelText("Chat history"));
+
+beforeEach(() => localStorage.clear());
+afterEach(cleanup);
+
+describe("AIPanel chat history", () => {
+    it("resumes the most recent chat on mount", () => {
+        setChatSessions([session("a", 1, "older question"), session("b", 9, "newest question")]);
+
+        render(<AIPanel {...baseProps} />);
+
+        // The newest session's transcript, not an empty panel.
+        expect(screen.getByText("newest question")).toBeInTheDocument();
+        expect(screen.queryByText("older question")).toBeNull();
+    });
+
+    it("survives the panel closing and reopening", () => {
+        setChatSessions([session("a", 5, "remember me")]);
+
+        const first = render(<AIPanel {...baseProps} />);
+        expect(screen.getByText("remember me")).toBeInTheDocument();
+
+        // Closing the panel unmounts it entirely — that was the bug.
+        first.unmount();
+        render(<AIPanel {...baseProps} />);
+
+        expect(screen.getByText("remember me")).toBeInTheDocument();
+    });
+
+    it("shows an empty panel when nothing was ever stored", () => {
+        render(<AIPanel {...baseProps} />);
+        expect(screen.getByText("Ask about this note")).toBeInTheDocument();
+        // Nothing to browse, so the history button is not offered.
+        expect(screen.getByLabelText("Chat history")).toBeDisabled();
+    });
+
+    it("lists stored chats in the dropdown, newest first", () => {
+        setChatSessions([session("a", 1, "first topic"), session("b", 2, "second topic")]);
+
+        render(<AIPanel {...baseProps} />);
+        openHistory();
+
+        expect(screen.getAllByRole("menuitem").map((el) => el.textContent)).toEqual([
+            "second topic",
+            "first topic",
+        ]);
+    });
+
+    it("switches to a chat picked from history", () => {
+        setChatSessions([session("a", 1, "the old question"), session("b", 2, "the new question")]);
+
+        render(<AIPanel {...baseProps} />);
+        expect(screen.getByText("the new question")).toBeInTheDocument();
+
+        openHistory();
+        click(screen.getByRole("menuitem", { name: "the old question" }));
+
+        expect(screen.getByText("the old question")).toBeInTheDocument();
+        expect(screen.queryByText("the new question")).toBeNull();
+    });
+
+    it("starting a new chat keeps the previous one in history", () => {
+        setChatSessions([session("a", 5, "prior question")]);
+
+        render(<AIPanel {...baseProps} />);
+        click(screen.getByLabelText("New chat"));
+
+        // Fresh, empty chat...
+        expect(screen.getByText("Ask about this note")).toBeInTheDocument();
+        expect(screen.queryByText("prior question")).toBeNull();
+
+        // ...and the old one is still reachable and still stored.
+        openHistory();
+        expect(screen.getByRole("menuitem", { name: "prior question" })).toBeInTheDocument();
+        expect(getChatSessions().some((s) => s.id === "a")).toBe(true);
+    });
+
+    it("deletes a chat from history and from storage", async () => {
+        setChatSessions([session("a", 1, "keep me"), session("b", 2, "delete me")]);
+
+        render(<AIPanel {...baseProps} />);
+        openHistory();
+        click(screen.getByLabelText("Delete chat: keep me"));
+
+        await waitFor(() => expect(getChatSessions().map((s) => s.id)).toEqual(["b"]));
+        expect(screen.queryByRole("menuitem", { name: "keep me" })).toBeNull();
+    });
+
+    it("deleting the open chat leaves an empty one, not a stale transcript", () => {
+        setChatSessions([session("b", 9, "showing now")]);
+
+        render(<AIPanel {...baseProps} />);
+        expect(screen.getByText("showing now")).toBeInTheDocument();
+
+        openHistory();
+        click(screen.getByLabelText("Delete chat: showing now"));
+
+        expect(screen.queryByText("showing now")).toBeNull();
+        expect(screen.getByText("Ask about this note")).toBeInTheDocument();
+    });
+
+    it("closes the dropdown on Escape", () => {
+        setChatSessions([session("a", 1, "some chat")]);
+
+        render(<AIPanel {...baseProps} />);
+        openHistory();
+        expect(screen.getByRole("menu")).toBeInTheDocument();
+
+        act(() => { fireEvent.keyDown(document, { key: "Escape" }); });
+        expect(screen.queryByRole("menu")).toBeNull();
+    });
+
+    it("closes the dropdown on a click outside it", () => {
+        setChatSessions([session("a", 1, "some chat")]);
+
+        render(<AIPanel {...baseProps} />);
+        openHistory();
+        expect(screen.getByRole("menu")).toBeInTheDocument();
+
+        act(() => { fireEvent.mouseDown(document.body); });
+        expect(screen.queryByRole("menu")).toBeNull();
+    });
+
+    it("ignores a corrupted stored value instead of failing to render", () => {
+        localStorage.setItem("paperling:aiChatSessions", "{not json");
+        render(<AIPanel {...baseProps} />);
+        expect(screen.getByText("Ask about this note")).toBeInTheDocument();
+    });
+
+    it("does not store an empty chat just because the panel was opened", () => {
+        render(<AIPanel {...baseProps} />);
+        expect(getChatSessions()).toEqual([]);
+    });
+});
+
+describe("AIPanel width", () => {
+    it("applies the width it is given", () => {
+        const { container } = render(<AIPanel {...baseProps} width={640} />);
+        expect((container.querySelector("aside") as HTMLElement).style.width).toBe("640px");
+    });
+
+    it("exposes a resize separator carrying the current width", () => {
+        render(<AIPanel {...baseProps} width={512} />);
+        expect(screen.getByRole("separator", { name: "Resize AI panel" })).toHaveAttribute(
+            "aria-valuenow",
+            "512"
+        );
+    });
+});
diff --git a/src/components/AIPanel.tsx b/src/components/AIPanel.tsx
index b0a55cb..083c919 100644
--- a/src/components/AIPanel.tsx
+++ b/src/components/AIPanel.tsx
@@ -3,7 +3,22 @@ import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { streamChat, buildAskMessages, buildAgentMessages, parseEdits, type ChatMessage } from "../utils/aiChat";
 import type { AIConfig } from "../utils/aiAssist";
-import { getAIHistoryTurns } from "../utils/persistence";
+import {
+    getAIHistoryTurns,
+    getChatSessions,
+    setChatSessions,
+    setAIPanelWidth,
+    AI_PANEL_WIDTH_MIN,
+    AI_PANEL_WIDTH_MAX,
+} from "../utils/persistence";
+import {
+    deriveTitle,
+    makeSessionId,
+    upsertSession,
+    removeSession,
+    type ChatSession,
+} from "../utils/chatSessions";
+import { PanelResizeHandle } from "./PanelResizeHandle";
 import mascotWizard from "../assets/mascot/mascot-wizard.png";
 
 interface AIPanelProps {
@@ -17,6 +32,10 @@ interface AIPanelProps {
     aiConfig: AIConfig;
     /** Called (Agent mode) with the proposed document to review in the editor. */
     onProposeEdit?: (proposedDoc: string) => void;
+    /** Live panel width in px; owned by App so the editor can reserve the space. */
+    width: number;
+    /** Fires continuously while the edge is dragged. */
+    onWidthChange: (px: number) => void;
 }
 
 interface UIMessage {
@@ -28,9 +47,21 @@ interface UIMessage {
 // (Settings → AI, default 8), read live per send — the document itself is
 // attached only to the latest turn inside buildAskMessages.
 
-export function AIPanel({ isOpen, onClose, note, fileName, selectionText, aiConfig, onProposeEdit }: AIPanelProps) {
-    const [messages, setMessages] = useState<UIMessage[]>([]);
+export function AIPanel({ isOpen, onClose, note, fileName, selectionText, aiConfig, onProposeEdit, width, onWidthChange }: AIPanelProps) {
+    // Stored chats (#111). Closing the panel unmounts it, so message state used
+    // to die with it. Read the saved history once, then resume the most recent
+    // chat, which makes close/reopen and app restarts non-destructive.
+    const storedRef = useRef<ChatSession[] | null>(null);
+    if (storedRef.current === null) storedRef.current = getChatSessions();
+    const [sessions, setSessions] = useState<ChatSession[]>(() => storedRef.current ?? []);
+    const [sessionId, setSessionId] = useState<string>(() => storedRef.current?.[0]?.id ?? makeSessionId());
+    const [messages, setMessages] = useState<UIMessage[]>(() => storedRef.current?.[0]?.messages ?? []);
+    const [historyOpen, setHistoryOpen] = useState(false);
     const [input, setInput] = useState("");
+    // Read by callbacks that must see the newest list without being rebuilt on
+    // every change (and without a self-triggering effect dependency).
+    const sessionsRef = useRef(sessions);
+    sessionsRef.current = sessions;
     // Ref twin of `input` so the open-effect can restore the draft without
     // re-running on every keystroke.
     const inputDraftRef = useRef("");
@@ -143,7 +174,85 @@ export function AIPanel({ isOpen, onClose, note, fileName, selectionText, aiConf
     }, [input, busy, configured, messages, note, selectionText, aiConfig, mode, onProposeEdit]);
 
     const stop = useCallback(() => abortRef.current?.abort(), []);
-    const clear = useCallback(() => { abortRef.current?.abort(); setMessages([]); setError(null); }, []);
+
+    /** Write one chat into the stored history. Empty chats are not stored. */
+    const commitSession = useCallback((id: string, msgs: UIMessage[]) => {
+        if (!msgs.length) return;
+        const next = upsertSession(sessionsRef.current, {
+            id,
+            title: deriveTitle(msgs),
+            updatedAt: Date.now(),
+            messages: msgs,
+        });
+        sessionsRef.current = next;
+        setSessions(next);
+        setChatSessions(next);
+    }, []);
+
+    // Save the active chat once it settles. Gated on `busy` so a streaming reply
+    // doesn't write to localStorage on every token; the transition back to idle
+    // (success, error, or abort) is what persists the final transcript.
+    useEffect(() => {
+        if (busy) return;
+        commitSession(sessionId, messages);
+    }, [busy, messages, sessionId, commitSession]);
+
+    // Start a fresh chat, keeping the current one in history. This is the button
+    // that used to be "clear", which discarded the conversation outright (#111).
+    const newChat = useCallback(() => {
+        abortRef.current?.abort();
+        commitSession(sessionId, messages);
+        setSessionId(makeSessionId());
+        setMessages([]);
+        setError(null);
+        setHistoryOpen(false);
+    }, [commitSession, sessionId, messages]);
+
+    const selectSession = useCallback((id: string) => {
+        setHistoryOpen(false);
+        if (id === sessionId) return;
+        abortRef.current?.abort();
+        // Save where we are before moving, so switching away mid-conversation
+        // (or mid-stream) doesn't lose it.
+        commitSession(sessionId, messages);
+        const target = sessionsRef.current.find((s) => s.id === id);
+        if (!target) return;
+        setSessionId(id);
+        setMessages(target.messages);
+        setError(null);
+    }, [commitSession, sessionId, messages]);
+
+    const deleteSession = useCallback((id: string) => {
+        const next = removeSession(sessionsRef.current, id);
+        sessionsRef.current = next;
+        setSessions(next);
+        setChatSessions(next);
+        // Deleting the open chat leaves an empty one rather than a stale view.
+        if (id === sessionId) {
+            abortRef.current?.abort();
+            setSessionId(makeSessionId());
+            setMessages([]);
+            setError(null);
+        }
+    }, [sessionId]);
+
+    // Close the history dropdown on Escape or a click elsewhere.
+    const historyRef = useRef<HTMLDivElement>(null);
+    useEffect(() => {
+        if (!historyOpen) return;
+        const onDown = (e: MouseEvent) => {
+            if (!historyRef.current?.contains(e.target as Node)) setHistoryOpen(false);
+        };
+        const onKey = (e: KeyboardEvent) => {
+            if (e.key === "Escape") { e.stopPropagation(); setHistoryOpen(false); }
+        };
+        document.addEventListener("mousedown", onDown);
+        document.addEventListener("keydown", onKey, true);
+        return () => {
+            document.removeEventListener("mousedown", onDown);
+            document.removeEventListener("keydown", onKey, true);
+        };
+    }, [historyOpen]);
 
     if (!isOpen) return null;
 
@@ -158,16 +267,74 @@ export function AIPanel({ isOpen, onClose, note, fileName, selectionText, aiConf
         <aside
             role="complementary"
             aria-label="AI assistant"
-            className="fixed right-0 top-12 bottom-7 w-[400px] max-w-[90vw] z-50 flex flex-col bg-[var(--bg-secondary)] border-l border-[var(--border)] shadow-2xl"
+            // Width is a persisted user setting dragged from the left edge (#111).
+            // max-w keeps it on screen if the window is narrower than the stored px.
+            style={{ width: `${width}px` }}
+            className="fixed right-0 top-12 bottom-7 max-w-[90vw] z-50 flex flex-col bg-[var(--bg-secondary)] border-l border-[var(--border)] shadow-2xl"
         >
+            <PanelResizeHandle
+                width={width}
+                min={AI_PANEL_WIDTH_MIN}
+                max={AI_PANEL_WIDTH_MAX}
+                onResize={onWidthChange}
+                onCommit={setAIPanelWidth}
+                label="Resize AI panel"
+            />
+
             {/* Header */}
             <div className="h-10 shrink-0 px-3 flex items-center justify-between border-b border-[var(--border)] bg-[var(--bg-titlebar)]">
                 <div className="flex items-center gap-2 text-sm font-semibold text-[var(--text-primary)] no-select tracking-tight">
                     <span>AI Assistant</span>
                 </div>
                 <div className="flex items-center gap-1">
+                    {/* Chat history (#111): past chats stay reachable instead of
+                        being discarded when the panel closes or a new chat starts. */}
+                    <div ref={historyRef} className="relative">
+                        <button
+                            onClick={() => setHistoryOpen((v) => !v)}
+                            title="Chat history"
+                            aria-label="Chat history"
+                            aria-haspopup="menu"
+                            aria-expanded={historyOpen}
+                            disabled={sessions.length === 0}
+                            className="w-7 h-7 rounded-[var(--radius-sm)] enabled:hover:bg-[var(--bg-hover)] text-[var(--text-secondary)] enabled:hover:text-[var(--text-primary)] flex items-center justify-center transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                        >
+                            <span className="material-symbols-outlined text-[18px]">history</span>
+                        </button>
+                        {historyOpen && sessions.length > 0 && (
+                            <div
+                                role="menu"
+                                aria-label="Previous chats"
+                                className="absolute right-0 top-8 w-64 max-h-80 overflow-y-auto z-20 bg-[var(--bg-secondary)] border border-[var(--border)] rounded-[var(--radius-md)] shadow-2xl py-1 animate-fade-in"
+                            >
+                                {sessions.map((s) => (
+                                    <div
+                                        key={s.id}
+                                        className={`group flex items-center gap-1 px-1 ${s.id === sessionId ? "bg-[var(--bg-hover)]" : ""}`}
+                                    >
+                                        <button
+                                            role="menuitem"
+                                            onClick={() => selectSession(s.id)}
+                                            title={s.title}
+                                            className="flex-1 min-w-0 text-left px-2 py-1.5 text-xs rounded-[var(--radius-sm)] text-[var(--text-primary)] hover:bg-[var(--bg-hover)] transition-colors"
+                                        >
+                                            <span className="block truncate">{s.title}</span>
+                                        </button>
+                                        <button
+                                            onClick={() => deleteSession(s.id)}
+                                            title="Delete chat"
+                                            aria-label={`Delete chat: ${s.title}`}
+                                            className="shrink-0 w-6 h-6 rounded-[var(--radius-sm)] text-[var(--text-muted)] hover:text-[var(--danger)] hover:bg-[var(--danger)]/10 flex items-center justify-center opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity"
+                                        >
+                                            <span className="material-symbols-outlined text-[15px]">delete</span>
+                                        </button>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
                     {messages.length > 0 && (
-                        <button onClick={clear} title="New chat" aria-label="New chat" className="w-7 h-7 rounded-[var(--radius-sm)] hover:bg-[var(--bg-hover)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] flex items-center justify-center transition-colors">
+                        <button onClick={newChat} title="New chat" aria-label="New chat" className="w-7 h-7 rounded-[var(--radius-sm)] hover:bg-[var(--bg-hover)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] flex items-center justify-center transition-colors">
                             <span className="material-symbols-outlined text-[18px]">add_comment</span>
                         </button>
                     )}
diff --git a/src/components/ModeToggle.tsx b/src/components/ModeToggle.tsx
index 73f1df0..4ea2d46 100644
--- a/src/components/ModeToggle.tsx
+++ b/src/components/ModeToggle.tsx
@@ -5,16 +5,18 @@ interface ModeToggleProps {
     onSetMode: (mode: ViewMode) => void;
     /** Shift left when the AI panel is open so the toggle isn't hidden behind it. */
     aiPanelOpen?: boolean;
+    /** The panel's current width in px; it is user-resizable (#111). */
+    aiPanelWidth?: number;
 }
 
 const buttonBase =
     "btn-press flex items-center gap-2 px-3 py-2 rounded-full transition-all duration-200";
 
-export function ModeToggle({ mode, onSetMode, aiPanelOpen }: ModeToggleProps) {
+export function ModeToggle({ mode, onSetMode, aiPanelOpen, aiPanelWidth = 400 }: ModeToggleProps) {
     return (
         <div
             className="fixed bottom-8 z-50"
-            style={{ right: aiPanelOpen ? "calc(min(400px, 90vw) + 2rem)" : "2rem", transition: "right 0.15s ease" }}
+            style={{ right: aiPanelOpen ? `calc(min(${aiPanelWidth}px, 90vw) + 2rem)` : "2rem", transition: "right 0.15s ease" }}
             role="group"
             aria-label="View mode toggle"
         >
diff --git a/src/components/PanelResizeHandle.test.tsx b/src/components/PanelResizeHandle.test.tsx
new file mode 100644
index 0000000..f6450ef
--- /dev/null
+++ b/src/components/PanelResizeHandle.test.tsx
@@ -0,0 +1,148 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent, act } from "@testing-library/react";
+import { PanelResizeHandle } from "./PanelResizeHandle";
+
+const MIN = 280;
+const MAX = 900;
+
+// jsdom windows are 1024 wide by default; the panel is right-anchored, so its
+// width is (window width - pointer x).
+const setup = (width = 400) => {
+    const onResize = vi.fn();
+    const onCommit = vi.fn();
+    render(
+        <PanelResizeHandle
+            width={width}
+            min={MIN}
+            max={MAX}
+            onResize={onResize}
+            onCommit={onCommit}
+            label="Resize AI panel"
+        />
+    );
+    return { onResize, onCommit, handle: screen.getByRole("separator", { name: "Resize AI panel" }) };
+};
+
+/** jsdom does not implement pointer capture. */
+const withCapture = (el: HTMLElement) => {
+    (el as unknown as { setPointerCapture: () => void }).setPointerCapture = () => {};
+    (el as unknown as { releasePointerCapture: () => void }).releasePointerCapture = () => {};
+};
+
+const drag = (handle: HTMLElement, toClientX: number) => {
+    withCapture(handle);
+    act(() => {
+        fireEvent.pointerDown(handle, { pointerId: 1, clientX: 600 });
+        fireEvent.pointerMove(handle, { pointerId: 1, clientX: toClientX });
+    });
+};
+
+afterEach(() => {
+    cleanup();
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+});
+
+describe("PanelResizeHandle", () => {
+    it("exposes its range to assistive tech", () => {
+        const { handle } = setup(512);
+        expect(handle).toHaveAttribute("aria-orientation", "vertical");
+        expect(handle).toHaveAttribute("aria-valuenow", "512");
+        expect(handle).toHaveAttribute("aria-valuemin", String(MIN));
+        expect(handle).toHaveAttribute("aria-valuemax", String(MAX));
+    });
+
+    it("reports width as the distance from the right edge while dragging", () => {
+        const { onResize, handle } = setup();
+        drag(handle, window.innerWidth - 500);
+        expect(onResize).toHaveBeenLastCalledWith(500);
+    });
+
+    it("ignores pointer movement before a drag starts", () => {
+        const { onResize, handle } = setup();
+        act(() => { fireEvent.pointerMove(handle, { pointerId: 1, clientX: 100 }); });
+        expect(onResize).not.toHaveBeenCalled();
+    });
+
+    it("clamps to the minimum when dragged past it", () => {
+        const { onResize, handle } = setup();
+        // Far right, i.e. a panel narrower than allowed.
+        drag(handle, window.innerWidth - 10);
+        expect(onResize).toHaveBeenLastCalledWith(MIN);
+    });
+
+    it("clamps to the maximum when dragged past it", () => {
+        const { onResize, handle } = setup();
+        drag(handle, -5000);
+        expect(onResize).toHaveBeenLastCalledWith(MAX);
+    });
+
+    it("commits once on release, not on every move", () => {
+        const { onResize, onCommit, handle } = setup();
+        withCapture(handle);
+        act(() => {
+            fireEvent.pointerDown(handle, { pointerId: 1, clientX: 600 });
+            fireEvent.pointerMove(handle, { pointerId: 1, clientX: window.innerWidth - 500 });
+            fireEvent.pointerMove(handle, { pointerId: 1, clientX: window.innerWidth - 600 });
+        });
+        expect(onResize).toHaveBeenCalledTimes(2);
+        expect(onCommit).not.toHaveBeenCalled();
+
+        act(() => { fireEvent.pointerUp(handle, { pointerId: 1 }); });
+        expect(onCommit).toHaveBeenCalledTimes(1);
+    });
+
+    it("commits on a cancelled pointer too, so a lost drag still persists", () => {
+        const { onCommit, handle } = setup();
+        drag(handle, window.innerWidth - 500);
+        act(() => { fireEvent.pointerCancel(handle, { pointerId: 1 }); });
+        expect(onCommit).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not commit on a stray pointerup with no drag in progress", () => {
+        const { onCommit, handle } = setup();
+        withCapture(handle);
+        act(() => { fireEvent.pointerUp(handle, { pointerId: 1 }); });
+        expect(onCommit).not.toHaveBeenCalled();
+    });
+
+    it("grows the panel with ArrowLeft and shrinks it with ArrowRight", () => {
+        // The handle is on the panel's left edge, so left means wider.
+        const { onResize, onCommit, handle } = setup(400);
+
+        act(() => { fireEvent.keyDown(handle, { key: "ArrowLeft" }); });
+        expect(onResize).toHaveBeenLastCalledWith(416);
+        expect(onCommit).toHaveBeenLastCalledWith(416);
+
+        act(() => { fireEvent.keyDown(handle, { key: "ArrowRight" }); });
+        expect(onResize).toHaveBeenLastCalledWith(384);
+    });
+
+    it("clamps keyboard nudges at the bounds", () => {
+        const atMin = setup(MIN);
+        act(() => { fireEvent.keyDown(atMin.handle, { key: "ArrowRight" }); });
+        expect(atMin.onResize).toHaveBeenLastCalledWith(MIN);
+        cleanup();
+
+        const atMax = setup(MAX);
+        act(() => { fireEvent.keyDown(atMax.handle, { key: "ArrowLeft" }); });
+        expect(atMax.onResize).toHaveBeenLastCalledWith(MAX);
+    });
+
+    it("ignores other keys", () => {
+        const { onResize, handle } = setup();
+        act(() => { fireEvent.keyDown(handle, { key: "Enter" }); });
+        act(() => { fireEvent.keyDown(handle, { key: "ArrowUp" }); });
+        expect(onResize).not.toHaveBeenCalled();
+    });
+
+    it("restores the document cursor when unmounted mid-drag", () => {
+        const { handle } = setup();
+        drag(handle, window.innerWidth - 500);
+        expect(document.body.style.cursor).toBe("col-resize");
+
+        cleanup();
+        expect(document.body.style.cursor).toBe("");
+        expect(document.body.style.userSelect).toBe("");
+    });
+});
diff --git a/src/components/PanelResizeHandle.tsx b/src/components/PanelResizeHandle.tsx
new file mode 100644
index 0000000..0bb6d57
--- /dev/null
+++ b/src/components/PanelResizeHandle.tsx
@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useRef } from "react";
+
+/**
+ * Drag handle on the left edge of a right-anchored panel. Issue #111.
+ *
+ * Separate from SplitDivider, which resizes two in-flow panes and therefore
+ * works in ratios. This one sizes a `fixed right-0` element, so it works in
+ * pixels measured from the right edge of the window.
+ *
+ * `onResize` fires continuously while dragging (so layout tracks the pointer);
+ * `onCommit` fires once on release, which is where persistence belongs — writing
+ * on every pointermove would hit localStorage a hundred times a second.
+ */
+interface PanelResizeHandleProps {
+    /** Current width in px, needed so keyboard nudges are relative. */
+    width: number;
+    min: number;
+    max: number;
+    onResize: (width: number) => void;
+    onCommit: (width: number) => void;
+    label: string;
+}
+
+/** One arrow press. Big enough to feel responsive, small enough to be precise. */
+const NUDGE_PX = 16;
+
+export function PanelResizeHandle({ width, min, max, onResize, onCommit, label }: PanelResizeHandleProps) {
+    const draggingRef = useRef(false);
+    // Read in the pointerup handler, which must commit the last dragged value
+    // without waiting for a re-render to land.
+    const latestRef = useRef(width);
+    latestRef.current = width;
+
+    const clamp = useCallback(
+        (px: number) => Math.min(max, Math.max(min, Math.round(px))),
+        [min, max]
+    );
+
+    // Panel is anchored to the right edge, so its width is the distance from the
+    // pointer to that edge.
+    const widthFromPointer = useCallback(
+        (clientX: number) => clamp(window.innerWidth - clientX),
+        [clamp]
+    );
+
+    const onPointerDown = useCallback((e: React.PointerEvent) => {
+        draggingRef.current = true;
+        (e.target as HTMLElement).setPointerCapture(e.pointerId);
+        document.body.style.cursor = "col-resize";
+        document.body.style.userSelect = "none";
+    }, []);
+
+    const onPointerMove = useCallback((e: React.PointerEvent) => {
+        if (!draggingRef.current) return;
+        onResize(widthFromPointer(e.clientX));
+    }, [onResize, widthFromPointer]);
+
+    const endDrag = useCallback((e: React.PointerEvent) => {
+        if (!draggingRef.current) return;
+        draggingRef.current = false;
+        try { (e.target as HTMLElement).releasePointerCapture(e.pointerId); } catch { /* already released */ }
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+        onCommit(latestRef.current);
+    }, [onCommit]);
+
+    const onKeyDown = useCallback((e: React.KeyboardEvent) => {
+        // Left grows the panel: it is on the panel's left edge, so dragging left
+        // makes it wider, and the keys should match the drag direction.
+        const delta = e.key === "ArrowLeft" ? NUDGE_PX : e.key === "ArrowRight" ? -NUDGE_PX : 0;
+        if (!delta) return;
+        e.preventDefault();
+        const next = clamp(latestRef.current + delta);
+        onResize(next);
+        onCommit(next);
+    }, [clamp, onResize, onCommit]);
+
+    // A drag interrupted by an unmount (panel closed mid-drag) would otherwise
+    // leave the whole document stuck with a resize cursor and no selection.
+    useEffect(() => () => {
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+    }, []);
+
+    return (
+        <div
+            role="separator"
+            aria-label={label}
+            aria-orientation="vertical"
+            aria-valuenow={width}
+            aria-valuemin={min}
+            aria-valuemax={max}
+            tabIndex={0}
+            onPointerDown={onPointerDown}
+            onPointerMove={onPointerMove}
+            onPointerUp={endDrag}
+            onPointerCancel={endDrag}
+            onKeyDown={onKeyDown}
+            // Sits just outside the panel's left border and stretches full
+            // height. Wider than it looks so it is easy to grab (#111).
+            className="absolute left-0 top-0 bottom-0 -translate-x-1/2 w-2 z-10 cursor-col-resize group focus:outline-none"
+        >
+            <div className="absolute inset-y-0 left-1/2 -translate-x-1/2 w-[3px] bg-transparent group-hover:bg-[var(--accent)] group-active:bg-[var(--accent)] group-focus-visible:bg-[var(--accent)] transition-colors" />
+        </div>
+    );
+}
diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
index 64b4141..4839d83 100644
--- a/src/components/SettingsModal.tsx
+++ b/src/components/SettingsModal.tsx
@@ -10,6 +10,7 @@ import {
     getAutoSave, setAutoSave,
     getOpenInReader, setOpenInReader,
     getAIHistoryTurns, setAIHistoryTurns, AI_HISTORY_TURNS_MAX,
+    getAIIconAnimation, setAIIconAnimation,
 } from "../utils/persistence";
 import { AI_PROVIDERS, matchProvider, type AIProvider } from "../utils/aiProviders";
 import { attachFocusTrap } from "../utils/focusTrap";
@@ -111,6 +112,7 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
     const [ai, setAi] = useState(getAIConfig);
     const [aiEnabled, setAiEnabledLocal] = useState(getAIEnabled);
     const [aiHistoryTurns, setAiHistoryTurnsLocal] = useState(getAIHistoryTurns);
+    const [aiIconAnimation, setAiIconAnimationLocal] = useState(getAIIconAnimation);
     const aiEndpointInvalid = ai.endpoint.length > 0 && !isValidEndpoint(ai.endpoint);
     // Sending a key unencrypted off the machine is refused before the request
     // is made, so surface it here rather than as a failed "Test connection".
@@ -360,9 +362,13 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
 
                         {section === "ai" && (
                             <>
-                                <div className="rounded-[var(--radius-lg)] border border-[var(--border)] overflow-hidden">
+                                <div className="rounded-[var(--radius-lg)] border border-[var(--border)] divide-y divide-[var(--border-subtle)] overflow-hidden">
                                     <ToggleRow label="Enable AI" description="Show the AI button and assistant in the editor" checked={aiEnabled}
                                         onChange={(v) => { setAiEnabledLocal(v); setAIEnabled(v); fire("paperling:ai-enabled-toggle", v); }} />
+                                    {aiEnabled && (
+                                        <ToggleRow label="Animate the AI icon" description="Shimmer on the title-bar AI button; off shows it as plain text" checked={aiIconAnimation}
+                                            onChange={(v) => { setAiIconAnimationLocal(v); setAIIconAnimation(v); fire("paperling:ai-icon-animation-toggle", v); }} />
+                                    )}
                                 </div>
                                 <div className="flex items-start justify-between gap-3">
                                     <p className="text-sm text-[var(--text-secondary)]">
diff --git a/src/components/TitleBar.aiIcon.test.tsx b/src/components/TitleBar.aiIcon.test.tsx
new file mode 100644
index 0000000..737a735
--- /dev/null
+++ b/src/components/TitleBar.aiIcon.test.tsx
@@ -0,0 +1,77 @@
+// The AI button's shimmering icon is optional (#111): some users prefer it as
+// plain text. The setting lives in localStorage and reaches the title bar
+// through a window event, so both paths are covered here.
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, cleanup, act, fireEvent } from "@testing-library/react";
+
+// No IPC host under jsdom; the title bar's window controls only need to exist.
+vi.mock("@tauri-apps/api/window", () => ({
+    Window: { getCurrent: () => ({ minimize: async () => {}, maximize: async () => {}, close: async () => {} }) },
+}));
+
+import { TitleBar } from "./TitleBar";
+import { ThemeProvider } from "../context/ThemeContext";
+import { setAIIconAnimation } from "../utils/persistence";
+
+// The title bar hosts SettingsMenu, which reads the theme context. The AI button
+// lives in the file-actions cluster, which only renders once a file is open, so
+// supply a file too.
+const renderTitleBar = (props: Parameters<typeof TitleBar>[0] = {}) =>
+    render(
+        <ThemeProvider>
+            <TitleBar fileName="note.md" filePath="/notes/note.md" onOpenFile={() => {}} {...props} />
+        </ThemeProvider>
+    );
+
+const aiIcon = () => screen.getByLabelText("AI assistant").querySelector("span.material-symbols-outlined");
+
+beforeEach(() => localStorage.clear());
+afterEach(cleanup);
+
+describe("TitleBar AI icon animation", () => {
+    it("shimmers by default, so the existing look is unchanged", () => {
+        renderTitleBar({ onToggleAI: () => {} });
+        expect(aiIcon()).toHaveClass("ai-shimmer");
+    });
+
+    it("renders plain when the setting is off", () => {
+        setAIIconAnimation(false);
+        renderTitleBar({ onToggleAI: () => {} });
+        expect(aiIcon()).not.toHaveClass("ai-shimmer");
+        // Still the same glyph, just not animated.
+        expect(aiIcon()).toHaveClass("material-symbols-outlined");
+    });
+
+    it("reacts to the setting being toggled while open", () => {
+        renderTitleBar({ onToggleAI: () => {} });
+        expect(aiIcon()).toHaveClass("ai-shimmer");
+
+        act(() => {
+            window.dispatchEvent(
+                new CustomEvent("paperling:ai-icon-animation-toggle", { detail: { enabled: false } })
+            );
+        });
+        expect(aiIcon()).not.toHaveClass("ai-shimmer");
+
+        act(() => {
+            window.dispatchEvent(
+                new CustomEvent("paperling:ai-icon-animation-toggle", { detail: { enabled: true } })
+            );
+        });
+        expect(aiIcon()).toHaveClass("ai-shimmer");
+    });
+
+    it("still triggers the AI panel when the animation is off", () => {
+        setAIIconAnimation(false);
+        const onToggleAI = vi.fn();
+        renderTitleBar({ onToggleAI });
+
+        fireEvent.click(screen.getByLabelText("AI assistant"));
+        expect(onToggleAI).toHaveBeenCalledTimes(1);
+    });
+
+    it("omits the AI button entirely when AI is disabled", () => {
+        renderTitleBar();
+        expect(screen.queryByLabelText("AI assistant")).toBeNull();
+    });
+});
diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx
index 78ef47a..0d6e159 100644
--- a/src/components/TitleBar.tsx
+++ b/src/components/TitleBar.tsx
@@ -1,10 +1,11 @@
-import { memo } from "react";
+import { memo, useEffect, useState } from "react";
 import type { MouseEvent } from "react";
 import { Window } from "@tauri-apps/api/window";
 import { SettingsMenu } from "./SettingsMenu";
 import { ExportMenu } from "./ExportMenu";
 import { EditMenu } from "./EditMenu";
 import { formatShortcut } from "../config/keybindings";
+import { getAIIconAnimation } from "../utils/persistence";
 
 interface TitleBarProps {
     fileName?: string;
@@ -26,6 +27,16 @@ interface TitleBarProps {
 }
 
 function TitleBarImpl({ fileName, isDirty, filePath, onOpenFile, onNewFile, getExportHtml, onExportSuccess, onExportError, onToggleAI, aiActive, isFullscreen, onToggleFullscreen, onFind, onReplace, onFindInFiles }: TitleBarProps) {
+    // Whether the AI button's icon shimmers. Some users prefer it plain (#111).
+    // Held locally and refreshed from the Settings event rather than threaded
+    // down from App, since nothing else on the way needs to know about it.
+    const [aiIconAnimated, setAiIconAnimated] = useState(getAIIconAnimation);
+    useEffect(() => {
+        const onToggle = (e: Event) => setAiIconAnimated(!!(e as CustomEvent).detail?.enabled);
+        window.addEventListener("paperling:ai-icon-animation-toggle", onToggle);
+        return () => window.removeEventListener("paperling:ai-icon-animation-toggle", onToggle);
+    }, []);
+
     const handleMinimize = async () => {
         try {
             const appWindow = Window.getCurrent();
@@ -176,7 +187,7 @@ function TitleBarImpl({ fileName, isDirty, filePath, onOpenFile, onNewFile, getE
                                         : "hover:bg-[var(--bg-hover)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
                                         }`}
                                 >
-                                    <span className="material-symbols-outlined text-[15px] ai-shimmer" aria-hidden="true">auto_awesome</span>
+                                    <span className={`material-symbols-outlined text-[15px]${aiIconAnimated ? " ai-shimmer" : ""}`} aria-hidden="true">auto_awesome</span>
                                     <span>AI</span>
                                 </button>
                             )}
diff --git a/src/utils/chatSessions.test.ts b/src/utils/chatSessions.test.ts
new file mode 100644
index 0000000..5f442f0
--- /dev/null
+++ b/src/utils/chatSessions.test.ts
@@ -0,0 +1,231 @@
+import { describe, it, expect } from "vitest";
+import {
+    deriveTitle,
+    pruneSessions,
+    upsertSession,
+    removeSession,
+    sanitizeSessions,
+    makeSessionId,
+    MAX_SESSIONS,
+    MAX_TOTAL_CHARS,
+    type ChatSession,
+} from "./chatSessions";
+
+const session = (over: Partial<ChatSession> = {}): ChatSession => ({
+    id: "a",
+    title: "t",
+    updatedAt: 1,
+    messages: [{ role: "user", content: "hi" }],
+    ...over,
+});
+
+describe("deriveTitle", () => {
+    it("uses the first user message", () => {
+        expect(deriveTitle([
+            { role: "user", content: "Summarise this note" },
+            { role: "assistant", content: "Sure" },
+        ])).toBe("Summarise this note");
+    });
+
+    it("ignores a leading assistant message", () => {
+        expect(deriveTitle([
+            { role: "assistant", content: "Hello there" },
+            { role: "user", content: "the real question" },
+        ])).toBe("the real question");
+    });
+
+    it("collapses whitespace so a pasted prompt stays one line", () => {
+        expect(deriveTitle([{ role: "user", content: "  line one\n\n\tline two  " }])).toBe("line one line two");
+    });
+
+    it("falls back when there is nothing to name it after", () => {
+        expect(deriveTitle([])).toBe("New chat");
+        expect(deriveTitle([{ role: "user", content: "   " }])).toBe("New chat");
+        expect(deriveTitle([{ role: "assistant", content: "only me" }])).toBe("New chat");
+    });
+
+    it("truncates long titles on a word boundary", () => {
+        const words = "alpha bravo charlie delta echo foxtrot golf hotel india juliett kilo";
+        const title = deriveTitle([{ role: "user", content: words }]);
+        expect(title.endsWith("…")).toBe(true);
+        expect(title.length).toBeLessThanOrEqual(62);
+        // Broke on a space, so no word is cut in half.
+        expect(title.slice(0, -1)).toBe(title.slice(0, -1).trimEnd());
+        expect(words.startsWith(title.slice(0, -1))).toBe(true);
+    });
+
+    it("hard-truncates when there is no usable word boundary", () => {
+        const title = deriveTitle([{ role: "user", content: "x".repeat(100) }]);
+        expect(title).toBe("x".repeat(60) + "…");
+    });
+});
+
+describe("pruneSessions", () => {
+    it("orders newest first", () => {
+        const out = pruneSessions([
+            session({ id: "old", updatedAt: 1 }),
+            session({ id: "new", updatedAt: 3 }),
+            session({ id: "mid", updatedAt: 2 }),
+        ]);
+        expect(out.map((s) => s.id)).toEqual(["new", "mid", "old"]);
+    });
+
+    it("caps the session count, dropping the oldest", () => {
+        const many = Array.from({ length: MAX_SESSIONS + 5 }, (_, i) =>
+            session({ id: `s${i}`, updatedAt: i })
+        );
+        const out = pruneSessions(many);
+        expect(out).toHaveLength(MAX_SESSIONS);
+        // The five oldest are gone.
+        expect(out.some((s) => s.id === "s0")).toBe(false);
+        expect(out[0].id).toBe(`s${MAX_SESSIONS + 4}`);
+    });
+
+    it("caps total characters, dropping the oldest", () => {
+        const big = (id: string, updatedAt: number) =>
+            session({ id, updatedAt, title: "", messages: [{ role: "user", content: "x".repeat(80_000) }] });
+
+        const out = pruneSessions([big("a", 1), big("b", 2), big("c", 3)]);
+
+        // 3 x 80k exceeds the budget, so the oldest is evicted.
+        expect(out.map((s) => s.id)).toEqual(["c", "b"]);
+    });
+
+    it("always keeps the newest session even if it alone busts the budget", () => {
+        const huge = session({
+            id: "huge",
+            updatedAt: 9,
+            title: "",
+            messages: [{ role: "user", content: "x".repeat(MAX_TOTAL_CHARS + 5000) }],
+        });
+        const out = pruneSessions([session({ id: "small", updatedAt: 1 }), huge]);
+        expect(out.map((s) => s.id)).toEqual(["huge"]);
+    });
+
+    it("handles an empty list", () => {
+        expect(pruneSessions([])).toEqual([]);
+    });
+
+    it("does not mutate its input", () => {
+        const input = [session({ id: "a", updatedAt: 1 }), session({ id: "b", updatedAt: 2 })];
+        const copy = [...input];
+        pruneSessions(input);
+        expect(input).toEqual(copy);
+    });
+});
+
+describe("upsertSession", () => {
+    it("adds a new session", () => {
+        const out = upsertSession([], session({ id: "a" }));
+        expect(out.map((s) => s.id)).toEqual(["a"]);
+    });
+
+    it("replaces an existing session rather than duplicating it", () => {
+        const before = [session({ id: "a", updatedAt: 1, title: "old" })];
+        const out = upsertSession(before, session({ id: "a", updatedAt: 2, title: "new" }));
+        expect(out).toHaveLength(1);
+        expect(out[0].title).toBe("new");
+    });
+
+    it("moves the updated session to the front", () => {
+        const before = [
+            session({ id: "a", updatedAt: 1 }),
+            session({ id: "b", updatedAt: 2 }),
+        ];
+        const out = upsertSession(before, session({ id: "a", updatedAt: 5 }));
+        expect(out.map((s) => s.id)).toEqual(["a", "b"]);
+    });
+
+    it("does not store an empty chat, and removes one that became empty", () => {
+        expect(upsertSession([], session({ id: "a", messages: [] }))).toEqual([]);
+
+        const before = [session({ id: "a", messages: [{ role: "user", content: "hi" }] })];
+        expect(upsertSession(before, session({ id: "a", messages: [] }))).toEqual([]);
+    });
+});
+
+describe("removeSession", () => {
+    it("removes by id and leaves the rest untouched", () => {
+        const before = [session({ id: "a" }), session({ id: "b" })];
+        expect(removeSession(before, "a").map((s) => s.id)).toEqual(["b"]);
+    });
+
+    it("is a no-op for an unknown id", () => {
+        const before = [session({ id: "a" })];
+        expect(removeSession(before, "zzz")).toHaveLength(1);
+    });
+});
+
+describe("sanitizeSessions", () => {
+    it("accepts a well-formed list", () => {
+        const out = sanitizeSessions([
+            { id: "a", title: "T", updatedAt: 5, messages: [{ role: "user", content: "hi" }] },
+        ]);
+        expect(out).toHaveLength(1);
+        expect(out[0].title).toBe("T");
+    });
+
+    it("returns empty for anything that is not an array", () => {
+        expect(sanitizeSessions(null)).toEqual([]);
+        expect(sanitizeSessions(undefined)).toEqual([]);
+        expect(sanitizeSessions("nope")).toEqual([]);
+        expect(sanitizeSessions({ id: "a" })).toEqual([]);
+    });
+
+    it("drops entries missing an id or a message array", () => {
+        const out = sanitizeSessions([
+            { title: "no id", messages: [] },
+            { id: "", messages: [] },
+            { id: "b", messages: "not an array" },
+            { id: "ok", messages: [{ role: "user", content: "hi" }] },
+        ]);
+        expect(out.map((s) => s.id)).toEqual(["ok"]);
+    });
+
+    it("drops malformed messages but keeps the session", () => {
+        const out = sanitizeSessions([
+            {
+                id: "a",
+                title: "T",
+                updatedAt: 1,
+                messages: [
+                    { role: "user", content: "keep" },
+                    { role: "system", content: "wrong role" },
+                    { role: "assistant", content: 42 },
+                    null,
+                    { role: "assistant", content: "keep too" },
+                ],
+            },
+        ]);
+        expect(out[0].messages).toEqual([
+            { role: "user", content: "keep" },
+            { role: "assistant", content: "keep too" },
+        ]);
+    });
+
+    it("recovers a missing title and timestamp", () => {
+        const out = sanitizeSessions([{ id: "a", messages: [{ role: "user", content: "derive me" }] }]);
+        expect(out[0].title).toBe("derive me");
+        expect(out[0].updatedAt).toBe(0);
+    });
+
+    it("prunes as part of sanitizing", () => {
+        const many = Array.from({ length: MAX_SESSIONS + 3 }, (_, i) => ({
+            id: `s${i}`,
+            title: "t",
+            updatedAt: i,
+            messages: [{ role: "user", content: "hi" }],
+        }));
+        expect(sanitizeSessions(many)).toHaveLength(MAX_SESSIONS);
+    });
+});
+
+describe("makeSessionId", () => {
+    it("returns distinct non-empty ids", () => {
+        const a = makeSessionId();
+        const b = makeSessionId();
+        expect(a).toBeTruthy();
+        expect(b).toBeTruthy();
+        expect(a).not.toBe(b);
+    });
+});
diff --git a/src/utils/chatSessions.ts b/src/utils/chatSessions.ts
new file mode 100644
index 0000000..e54dc28
--- /dev/null
+++ b/src/utils/chatSessions.ts
@@ -0,0 +1,132 @@
+// Stored AI chat sessions. Issue #111.
+//
+// The panel unmounts when closed, so its message state used to die with it:
+// closing the panel or starting a new chat threw the conversation away. These
+// sessions live in localStorage instead, so chats survive closing the panel and
+// restarting the app, and old ones stay reachable from the history dropdown.
+//
+// localStorage is a small, shared, synchronous store with no quota guarantee, so
+// growth is capped on two axes (count and total characters) and the oldest
+// sessions are evicted first. Everything here is pure so that eviction — the
+// part that silently loses user data if it is wrong — is unit-testable.
+
+export interface ChatSessionMessage {
+    role: "user" | "assistant";
+    content: string;
+}
+
+export interface ChatSession {
+    id: string;
+    /** Derived from the first user message; not user-editable for now. */
+    title: string;
+    /** Epoch ms of the last change, used for ordering and eviction. */
+    updatedAt: number;
+    messages: ChatSessionMessage[];
+}
+
+/** Keep the dropdown scannable and the stored blob bounded. */
+export const MAX_SESSIONS = 20;
+
+/**
+ * Total characters of message content kept across all sessions. Chat text is
+ * small next to the 5 MB localStorage typically allows, but a long agent
+ * conversation can run to tens of KB, so this stops unbounded growth without
+ * being tight enough to notice in normal use. The document itself is never in
+ * here — it is attached to the outgoing request, not to the stored transcript.
+ */
+export const MAX_TOTAL_CHARS = 200_000;
+
+const TITLE_MAX = 60;
+
+/** Unique enough for a local list; `randomUUID` is present in every target webview. */
+export function makeSessionId(): string {
+    const c = (globalThis as { crypto?: { randomUUID?: () => string } }).crypto;
+    if (c?.randomUUID) return c.randomUUID();
+    // Only reached in a non-secure context or an old engine.
+    return `s-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+/**
+ * A short label for the history dropdown, taken from the first thing the user
+ * said. Collapses whitespace so a pasted multi-line prompt stays one line, and
+ * truncates on a word boundary when there is one to break on.
+ */
+export function deriveTitle(messages: readonly ChatSessionMessage[]): string {
+    const first = messages.find((m) => m.role === "user" && m.content.trim());
+    const text = first?.content.replace(/\s+/g, " ").trim() ?? "";
+    if (!text) return "New chat";
+    if (text.length <= TITLE_MAX) return text;
+    const cut = text.slice(0, TITLE_MAX);
+    const lastSpace = cut.lastIndexOf(" ");
+    // Only break on a space if it leaves a reasonable amount of the label.
+    return (lastSpace > TITLE_MAX * 0.6 ? cut.slice(0, lastSpace) : cut).trimEnd() + "…";
+}
+
+const charsOf = (s: ChatSession): number =>
+    s.messages.reduce((n, m) => n + m.content.length, 0) + s.title.length;
+
+/**
+ * Enforce both caps, dropping the least recently updated sessions first.
+ *
+ * The newest session is always kept even if it alone exceeds the character
+ * budget: the alternative is discarding the conversation the user is having
+ * right now, which is worse than briefly exceeding a self-imposed limit.
+ */
+export function pruneSessions(sessions: readonly ChatSession[]): ChatSession[] {
+    const ordered = [...sessions].sort((a, b) => b.updatedAt - a.updatedAt).slice(0, MAX_SESSIONS);
+
+    const kept: ChatSession[] = [];
+    let total = 0;
+    for (const s of ordered) {
+        const size = charsOf(s);
+        if (kept.length > 0 && total + size > MAX_TOTAL_CHARS) break;
+        kept.push(s);
+        total += size;
+    }
+    return kept;
+}
+
+/**
+ * Insert or update `session`, then prune. Returns a new list, newest first.
+ *
+ * A session with no messages is not stored: opening the panel and closing it
+ * again should not leave an empty row in the history.
+ */
+export function upsertSession(sessions: readonly ChatSession[], session: ChatSession): ChatSession[] {
+    const others = sessions.filter((s) => s.id !== session.id);
+    if (session.messages.length === 0) return pruneSessions(others);
+    return pruneSessions([...others, session]);
+}
+
+export function removeSession(sessions: readonly ChatSession[], id: string): ChatSession[] {
+    return sessions.filter((s) => s.id !== id);
+}
+
+/**
+ * Drop anything that does not structurally match a session, so a corrupted or
+ * hand-edited localStorage entry degrades to "no history" instead of crashing
+ * the panel on render.
+ */
+export function sanitizeSessions(raw: unknown): ChatSession[] {
+    if (!Array.isArray(raw)) return [];
+    const ok: ChatSession[] = [];
+    for (const item of raw) {
+        if (!item || typeof item !== "object") continue;
+        const s = item as Partial<ChatSession>;
+        if (typeof s.id !== "string" || !s.id) continue;
+        if (!Array.isArray(s.messages)) continue;
+        const messages = s.messages.filter(
+            (m): m is ChatSessionMessage =>
+                !!m && typeof m === "object" &&
+                (m.role === "user" || m.role === "assistant") &&
+                typeof m.content === "string"
+        );
+        ok.push({
+            id: s.id,
+            title: typeof s.title === "string" && s.title ? s.title : deriveTitle(messages),
+            updatedAt: typeof s.updatedAt === "number" && Number.isFinite(s.updatedAt) ? s.updatedAt : 0,
+            messages,
+        });
+    }
+    return pruneSessions(ok);
+}
diff --git a/src/utils/persistence.ts b/src/utils/persistence.ts
index 169ff29..c0e5654 100644
--- a/src/utils/persistence.ts
+++ b/src/utils/persistence.ts
@@ -3,6 +3,8 @@
  * Tauri's webview has localStorage available; values survive app restarts.
  */
 
+import { sanitizeSessions, pruneSessions, type ChatSession } from "./chatSessions";
+
 // One-time migration from the app's pre-rename key prefix. The bundle
 // identifier (and therefore the WebView2 storage location) is unchanged, so
 // existing users still have their old "marklite:*" entries — copy each to its
@@ -158,6 +160,40 @@ export const getAIHistoryTurns = (): number => {
 export const setAIHistoryTurns = (v: number): void =>
     safeSet(KEY_AI_HISTORY_TURNS, Math.min(AI_HISTORY_TURNS_MAX, Math.max(0, Math.round(v))));
 
+// Width of the AI side panel in px, set by dragging its left edge. Issue #111.
+// Clamped on both read and write: the editor reserves this much padding, so a
+// hand-edited or stale value must never be able to squeeze the document to
+// nothing or push the panel off screen. The upper bound is also capped against
+// the viewport at render time (the panel keeps a max-w of 90vw).
+const KEY_AI_PANEL_WIDTH = "paperling:aiPanelWidth";
+export const AI_PANEL_WIDTH_DEFAULT = 400;
+export const AI_PANEL_WIDTH_MIN = 280;
+export const AI_PANEL_WIDTH_MAX = 900;
+const clampPanelWidth = (v: number): number =>
+    Math.min(AI_PANEL_WIDTH_MAX, Math.max(AI_PANEL_WIDTH_MIN, Math.round(v)));
+export const getAIPanelWidth = (): number => {
+    const v = safeGet<number>(KEY_AI_PANEL_WIDTH, AI_PANEL_WIDTH_DEFAULT);
+    if (typeof v !== "number" || !Number.isFinite(v)) return AI_PANEL_WIDTH_DEFAULT;
+    return clampPanelWidth(v);
+};
+export const setAIPanelWidth = (v: number): void => safeSet(KEY_AI_PANEL_WIDTH, clampPanelWidth(v));
+
+// The title-bar AI button's shimmering icon. On by default (unchanged look);
+// off renders it as plain text, which some users simply prefer. Issue #111.
+const KEY_AI_ICON_ANIMATION = "paperling:aiIconAnimation";
+export const getAIIconAnimation = (): boolean => safeGet<boolean>(KEY_AI_ICON_ANIMATION, true);
+export const setAIIconAnimation = (v: boolean): void => safeSet(KEY_AI_ICON_ANIMATION, v);
+
+// Stored AI chat sessions, so closing the panel or starting a new chat no longer
+// throws the conversation away. Reads go through sanitizeSessions so a corrupted
+// entry degrades to "no history" instead of breaking the panel; writes prune to
+// the count and size caps. Issue #111.
+const KEY_AI_CHAT_SESSIONS = "paperling:aiChatSessions";
+export const getChatSessions = (): ChatSession[] =>
+    sanitizeSessions(safeGet<unknown>(KEY_AI_CHAT_SESSIONS, []));
+export const setChatSessions = (sessions: readonly ChatSession[]): void =>
+    safeSet(KEY_AI_CHAT_SESSIONS, pruneSessions(sessions));
+
 // Version the user chose to skip in the update popup, so we don't nag about
 // it on every launch. A newer release has a different version string and
 // prompts again.