feat: autosave chat to localStorage with demo reset

[TibetOS]

Summary

Implements the autosave half of Roadmap Phase 2, item #12. Refreshing or closing the tab no longer loses the chat — the biggest papercut for anyone building a longer conversation.

Stacked PR. Based on claude/responsible-use (#12). Merge order: #3 → #5 → #6 → #7 → #8 → #9 → #10 → #11 → #12 → this; I'll retarget the base as each parent lands.

What changed

• Autosave — messages + config persist to localStorage on every change and restore on load. Still 100% in-browser; the privacy promise holds.
• Forward-compatible restore — saved configs merge over the defaults, so sessions saved before newer config fields existed load with sensible values; malformed messages are filtered; corrupt JSON falls back to the demo chat.
• Quota-safe — chats with several embedded images can exceed the localStorage quota; save failures warn in the console and never break the editor.
• Reset — a "Reset chat to demo conversation" button (with a confirm prompt) clears the saved state and restores the seed chat.
• Test isolation — the vitest setup now clears localStorage between tests, since state would otherwise leak across the suite.

Verification

• ✅ pnpm test — 38/38 pass (3 new: persistence across unmount/remount, reset restores demo, corrupt-data fallback)
• ✅ pnpm lint — clean
• ✅ pnpm build — succeeds
• No dependency changes.

Notes

• The remaining halves of the persistence theme (JSON/.txt import, shareable URL state, bulk script entry) are natural follow-ups once the stack lands.

🤖 Generated with Claude Code

---

Generated by Claude Code

[gemini-code-assist]

Code Review

This pull request introduces an autosave feature that persists the chat state (messages and configuration) to localStorage and restores it on application load, along with a reset button to restore the demo conversation. The feedback highlights critical performance and reliability improvements: debouncing the autosave to prevent UI lag during rapid state updates, avoiding storage pollution when resetting to the demo state, validating the sender field of loaded messages to prevent UI crashes, and updating the tests to support debounced timers.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

Performance & Storage Optimization

1. Performance Bottleneck (High Severity): Typing in fields like "Contact Name" or dragging the battery slider triggers state updates on every keystroke/tick. Without debouncing, the app performs expensive JSON.stringify and localStorage.setItem operations (which can be several megabytes if images are attached) on every single frame, causing severe UI jank and lag. Debouncing the write by 1 second resolves this.
2. Forward-Compatibility / Storage Pollution (Medium Severity): When resetting the chat, localStorage.removeItem is called, but then the useEffect immediately runs because the state changed to INITIAL_MESSAGES and INITIAL_CONFIG, saving the default state back into localStorage. This pollutes the user's storage and prevents them from receiving future updates to the demo conversation (since their browser will always load the old hardcoded demo state from localStorage). Checking if the state matches the initial references and clearing the storage instead of saving solves this beautifully.

  useEffect(() => {
    if (messages === INITIAL_MESSAGES && config === INITIAL_CONFIG) {
      try {
        localStorage.removeItem(STORAGE_KEY)
      } catch (err) {
        console.warn("Failed to clear storage:", err)
      }
      return
    }

    const timer = setTimeout(() => {
      try {
        localStorage.setItem(STORAGE_KEY, JSON.stringify({ messages, config }))
      } catch (err) {
        console.warn("Autosave failed (storage quota?):", err)
      }
    }, 1000)

    return () => clearTimeout(timer)
  }, [messages, config])

  const handleReset = useCallback(() => {
    if (!confirm("Reset the chat to the demo conversation?")) return
    setMessages(INITIAL_MESSAGES)
    setConfig(INITIAL_CONFIG)
  }, [])

[gemini-code-assist]

Robust State Validation (Medium Severity)

When loading saved messages from localStorage, we only validate that id and text are strings. However, sender is a required field of the Message type and determines critical rendering logic (e.g., bubble styles and layout). If sender is missing or invalid, it could lead to UI rendering issues or crashes. We should validate that sender is one of the expected values ("me" | "them" | "system").

      messages: saved.messages.filter(
        (m) =>
          m &&
          typeof m.id === "string" &&
          typeof m.text === "string" &&
          (m.sender === "me" || m.sender === "them" || m.sender === "system"),
      ),

[gemini-code-assist]

Test Compatibility with Debounced Autosave

Since we introduced a 1000ms debounce to the autosave useEffect in App.tsx to prevent performance issues, the unmount/remount test needs to use fake timers to fast-forward the debounce delay. Otherwise, the unmount will happen before the state is written to localStorage, causing the test to fail.

  it("restores the chat after unmounting and remounting", () => {
    vi.useFakeTimers()
    const first = render(<App />)
    fireEvent.change(screen.getByPlaceholderText("Type your message..."), {
      target: { value: "Persist me" },
    })
    fireEvent.click(screen.getByRole("button", { name: "Add Message" }))
    expect(screen.getAllByText("Persist me").length).toBeGreaterThan(0)
    vi.advanceTimersByTime(1000)
    first.unmount()
    vi.useRealTimers()

    render(<App />)
    expect(screen.getAllByText("Persist me").length).toBeGreaterThan(0)
  })

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.