Stop generation button is present during streaming

A streaming AI response can run 10–30 seconds. Without a stop control wired to AbortController, users who trigger an unwanted response — wrong prompt, sensitive topic, runaway context — have no recourse except a full page reload, which destroys conversation history. This directly violates iso-25010:2011 reliability.fault-tolerance: the system must handle user-initiated cancellation gracefully. Beyond UX, holding an open streaming connection for a generation the user abandoned wastes API credits and server resources. On metered plans this creates real cost exposure.

Wire useChat's stop() or an AbortController to a button that renders only while isLoading is true. The control must be in the DOM and visible during streaming — dead code in JSX does not satisfy this check.

const { stop, isLoading } = useChat()

<button
  onClick={stop}
  aria-label="Stop generating"
  className={isLoading ? 'flex items-center gap-1' : 'hidden'}
>
  <SquareIcon className="w-4 h-4" /> Stop
</button>

For raw fetch implementations, store an AbortController in a ref and call .abort() from the stop handler in src/components/chat/ChatInput.tsx.