Indicate thinking process

Author: andriilazebnyi

src/styles.css

@@ -138,6 +138,16 @@ body {
 }
 .btn:disabled { opacity: .6; cursor: not-allowed; }
 
+.spinner {
+  width: 14px; height: 14px;
+  border: 2px solid color-mix(in oklab, var(--text), transparent 70%);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin .8s linear infinite;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
 .select, .progress {
   width: 100%;
   background: var(--panel-2);
@@ -160,6 +170,28 @@ body {
 
 .stat { font-variant-numeric: tabular-nums; }
 
+.thinking-pill {
+  align-self: start;
+  margin: 6px 16px 0 16px;
+  display: inline-flex; align-items: center; gap: 8px;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  color: var(--muted);
+  padding: 6px 10px; border-radius: 999px;
+  font-size: 12px;
+}
+
+.dots::after {
+  content: '…';
+  animation: blinkdots 1.4s steps(3, end) infinite;
+}
+@keyframes blinkdots {
+  0% { content: ''; }
+  33% { content: '.'; }
+  66% { content: '..'; }
+  100% { content: '...'; }
+}
+
 @media (max-width: 900px) {
   .container { grid-template-columns: 1fr; }
 }

src/ui/App.tsx

@@ -104,6 +104,12 @@ export default function App() {
         </aside>
 
         <section className="content">
+          {engine.streaming && (
+            <div className="thinking-pill" aria-live="polite">
+              <span className="spinner" />
+              <span>Assistant is thinking</span>
+            </div>
+          )}
           <div className="chat">
             <ChatPanel
               messages={chat.items}
@@ -143,7 +149,7 @@ export default function App() {
               autoComplete="off"
             />
             <button className="btn" disabled={engine.state !== 'ready' || engine.streaming}>
-              Send
+              {engine.streaming ? <><span className="spinner"/> Thinking…</> : 'Send'}
             </button>
           </form>
         </section>

src/ui/chat/ChatPanel.tsx

@@ -19,6 +19,12 @@ export const ChatPanel: FC<{ messages: ChatMessage[]; streaming?: boolean }>
           </div>
         </div>
       ))}
+      {streaming && (messages.length === 0 || messages[messages.length - 1]?.role !== 'assistant') && (
+        <div className="msg">
+          <div className="avatar">A</div>
+          <div className="bubble">Thinking<span className="dots"/></div>
+        </div>
+      )}
       {messages.length === 0 && (
         <div className="muted">Start a conversation by asking a question.</div>
       )}
@@ -29,4 +35,3 @@ export const ChatPanel: FC<{ messages: ChatMessage[]; streaming?: boolean }>
 function Blink() {
   return <span style={{opacity:.6}}>|</span>;
 }
-