iris-chatbot 5.0.0 → 5.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iris-chatbot",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "private": false,
   "description": "One-command installer for the Iris project template.",
   "bin": {

package/template/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "iris",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "iris",
-      "version": "5.0.0",
+      "version": "5.0.1",
       "dependencies": {
         "@anthropic-ai/sdk": "^0.72.1",
         "clsx": "^2.1.1",

package/template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iris",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "private": true,
   "description": "One-command installer for the Iris project template.",
   "engines": {

package/template/src/app/globals.css

@@ -39,7 +39,7 @@
 body {
   background: var(--bg);
   color: var(--text-primary);
-  font-family: var(--app-font, var(--font-sans));
+  font-family: var(--app-font, var(--font-poppins));
   min-height: 100vh;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
@@ -107,7 +107,7 @@ button:focus-visible {
   pointer-events: none;
 }
 
-.topbar > *,
+.topbar>*,
 .topbar button,
 .topbar a,
 .topbar [role="listbox"],
@@ -890,8 +890,173 @@ button:focus-visible {
 
 .chat-scroll {
   padding-top: calc(var(--topbar-height) + 24px);
+  position: relative;
 }
 
 .chat-scroll.empty {
   padding-top: calc(var(--topbar-height) + 24px);
+}
+
+/* ─── Ask Selection Button ─── */
+
+.ask-selection-button {
+  position: absolute;
+  z-index: 50;
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 14px;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(50, 50, 50, 0.92);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  color: #f0f0f0;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  cursor: pointer;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 0 0.5px rgba(255, 255, 255, 0.06);
+  animation: ask-button-enter 0.18s ease-out;
+  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
+  white-space: nowrap;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.ask-selection-button:hover {
+  background: rgba(60, 60, 60, 0.95);
+  border-color: rgba(255, 255, 255, 0.22);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.1);
+  transform: translateX(-50%) translateY(-1px);
+}
+
+.ask-selection-button:active {
+  transform: translateX(-50%) translateY(0);
+  background: rgba(70, 70, 70, 0.95);
+}
+
+@keyframes ask-button-enter {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(6px) scale(0.92);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}
+
+/* ─── Quoted Context Container ─── */
+
+.composer-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.quoted-context-container {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 14px;
+  margin-bottom: 0;
+  background: #2b2b2b;
+  border: 1px solid var(--border);
+  border-bottom: none;
+  border-radius: 18px 18px 0 0;
+  animation: quoted-context-enter 0.22s ease-out;
+}
+
+.quoted-context-container+.composer {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-top-color: var(--border);
+}
+
+.quoted-context-content {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  min-width: 0;
+}
+
+.quoted-context-icon {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  color: var(--text-muted);
+  margin-top: 1px;
+}
+
+.quoted-context-text {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-secondary);
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
+  word-break: break-word;
+}
+
+.quoted-context-dismiss {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.quoted-context-dismiss:hover {
+  color: var(--text-primary);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+@keyframes quoted-context-enter {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+    max-height: 0;
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+    max-height: 200px;
+  }
+}
+
+/* ─── Light theme overrides ─── */
+
+[data-theme="light"] .ask-selection-button {
+  background: rgba(255, 255, 255, 0.94);
+  border-color: rgba(0, 0, 0, 0.12);
+  color: #111111;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="light"] .ask-selection-button:hover {
+  background: #ffffff;
+  border-color: rgba(0, 0, 0, 0.18);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
+}
+
+[data-theme="light"] .quoted-context-container {
+  background: transparent;
+}
+
+[data-theme="light"] .quoted-context-dismiss:hover {
+  background: rgba(0, 0, 0, 0.06);
 }

package/template/src/app/page.tsx

@@ -124,7 +124,7 @@ export default function Home() {
             ? "var(--font-sora)"
             : settings.font === "space"
               ? "var(--font-space)"
-              : "var(--font-sans)";
+              : "var(--font-poppins)";
     document.documentElement.style.setProperty("--app-font", fontVar);
     document.body.style.fontFamily = fontVar;
   }, [settings, connectionOverrideId, setConnectionOverrideId]);

package/template/src/components/ChatView.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type MouseEvent as ReactMouseEvent } from "react";
 import type {
   ChatCitationSource,
   ModelConnection,
@@ -26,7 +26,7 @@ import {
 } from "../lib/memory";
 import { useUIStore } from "../lib/store";
 import { toChatConnectionPayload } from "../lib/connections";
-import { ArrowDown } from "lucide-react";
+import { ArrowDown, TextQuote } from "lucide-react";
 import MessageCard from "./MessageCard";
 import Composer from "./Composer";
 
@@ -326,6 +326,10 @@ export default function ChatView({
   const [showJumpToBottom, setShowJumpToBottom] = useState(false);
   const [micMode, setMicMode] = useState<MicMode>("off");
   const [micState, setMicState] = useState<MicState>("idle");
+  const [quotedContext, setQuotedContext] = useState<string | null>(null);
+  const [askButtonPos, setAskButtonPos] = useState<{ top: number; left: number } | null>(null);
+  const [pendingSelection, setPendingSelection] = useState<string | null>(null);
+  const askButtonRef = useRef<HTMLButtonElement | null>(null);
   const focusedMessageId = useUIStore((state) => state.focusedMessageId);
   const setFocusedMessageId = useUIStore((state) => state.setFocusedMessageId);
   const chatScrollRef = useRef<HTMLDivElement | null>(null);
@@ -346,7 +350,7 @@ export default function ChatView({
   const recognitionFinalTranscriptRef = useRef("");
   const recognitionInterimTranscriptRef = useRef("");
   const micSilenceTimerRef = useRef<number | null>(null);
-  const handleSendRef = useRef<(overrideInput?: string) => Promise<void>>(async () => {});
+  const handleSendRef = useRef<(overrideInput?: string) => Promise<void>>(async () => { });
 
   const scrollToBottom = useCallback((behavior: ScrollBehavior = "smooth") => {
     const container = chatScrollRef.current;
@@ -819,12 +823,113 @@ export default function ChatView({
     startMicRecognitionSession("dictation");
   }, [micSupported, startMicRecognitionSession, stopMicMode]);
 
+  const handleTextSelection = useCallback(() => {
+    const selection = window.getSelection();
+    if (!selection || selection.isCollapsed || !selection.toString().trim()) {
+      setAskButtonPos(null);
+      setPendingSelection(null);
+      return;
+    }
+
+    const selectedText = selection.toString().trim();
+    if (!selectedText) {
+      setAskButtonPos(null);
+      setPendingSelection(null);
+      return;
+    }
+
+    // Check if the selection is inside an assistant message
+    let node: Node | null = selection.anchorNode;
+    let isInAssistantMessage = false;
+    while (node) {
+      if (node instanceof HTMLElement) {
+        if (node.classList.contains("assistant-card") || node.closest?.(".assistant-card")) {
+          isInAssistantMessage = true;
+          break;
+        }
+        if (node.classList.contains("message-row") && node.classList.contains("assistant")) {
+          isInAssistantMessage = true;
+          break;
+        }
+      }
+      node = node.parentNode;
+    }
+
+    if (!isInAssistantMessage) {
+      setAskButtonPos(null);
+      setPendingSelection(null);
+      return;
+    }
+
+    const range = selection.getRangeAt(0);
+    const rect = range.getBoundingClientRect();
+    const scrollContainer = chatScrollRef.current;
+
+    if (scrollContainer) {
+      const containerRect = scrollContainer.getBoundingClientRect();
+      setAskButtonPos({
+        top: rect.top - containerRect.top + scrollContainer.scrollTop - 44,
+        left: rect.left - containerRect.left + rect.width / 2,
+      });
+    } else {
+      setAskButtonPos({
+        top: rect.top + window.scrollY - 44,
+        left: rect.left + rect.width / 2,
+      });
+    }
+    setPendingSelection(selectedText);
+  }, []);
+
+  const handleAskClick = useCallback((event: ReactMouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (pendingSelection) {
+      setQuotedContext(pendingSelection);
+      setAskButtonPos(null);
+      setPendingSelection(null);
+      window.getSelection()?.removeAllRanges();
+    }
+  }, [pendingSelection]);
+
+  const handleClearQuotedContext = useCallback(() => {
+    setQuotedContext(null);
+  }, []);
+
+  useEffect(() => {
+    const onMouseUp = () => {
+      // Small delay so the selection is finalized
+      setTimeout(handleTextSelection, 10);
+    };
+
+    const onSelectionChange = () => {
+      const selection = window.getSelection();
+      if (!selection || selection.isCollapsed) {
+        // Don't dismiss if the ask button itself was clicked
+        setTimeout(() => {
+          const currentSelection = window.getSelection();
+          if (!currentSelection || currentSelection.isCollapsed) {
+            setAskButtonPos(null);
+            setPendingSelection(null);
+          }
+        }, 150);
+      }
+    };
+
+    document.addEventListener("mouseup", onMouseUp);
+    document.addEventListener("selectionchange", onSelectionChange);
+    return () => {
+      document.removeEventListener("mouseup", onMouseUp);
+      document.removeEventListener("selectionchange", onSelectionChange);
+    };
+  }, [handleTextSelection]);
+
   const handleSend = useCallback(async (overrideInput?: string) => {
     const resolvedThread =
       thread || (activeThreadId ? await db.threads.get(activeThreadId) : null);
     if (!resolvedThread) return;
     const trimmed = (overrideInput ?? input).trim();
-    if (!trimmed) return;
+    const hasQuoted = Boolean(quotedContext);
+    if (!trimmed && !hasQuoted) return;
     const sendTriggeredByMic =
       typeof overrideInput === "string" || micModeRef.current !== "off";
     const stopMicAfterValidationFailure = () => {
@@ -886,6 +991,8 @@ export default function ChatView({
     inflightThreadIdsRef.current.add(resolvedThread.id);
     setError(null);
     setInput("");
+    const capturedQuotedContext = quotedContext;
+    setQuotedContext(null);
     setFocusedMessageId(null);
     pendingSendScrollThreadIdRef.current = resolvedThread.id;
     isUserNearBottomRef.current = true;
@@ -894,9 +1001,15 @@ export default function ChatView({
     smoothFollowUntilRef.current = performance.now() + 1200;
     scrollToBottom("smooth");
 
+    const contentToSend = capturedQuotedContext
+      ? trimmed
+        ? `Regarding this text: "${capturedQuotedContext}"\n\n${trimmed}`
+        : `Explain this: "${capturedQuotedContext}"`
+      : trimmed;
+
     const { userMessage, assistantMessage } = await appendUserAndAssistant({
       thread: resolvedThread,
-      content: trimmed,
+      content: contentToSend,
       provider: connection.kind === "builtin" ? connection.provider ?? connection.id : connection.id,
       model,
     });
@@ -906,8 +1019,8 @@ export default function ChatView({
     const lastAssistantMessageContent =
       lastAssistantMessage?.role === "assistant"
         ? (typeof lastAssistantMessage.content === "string"
-            ? lastAssistantMessage.content
-            : "")
+          ? lastAssistantMessage.content
+          : "")
         : undefined;
     const memoryEnabled = settings.memory?.enabled !== false;
     const memoryAutoCaptureEnabled =
@@ -971,10 +1084,10 @@ export default function ChatView({
 
     const siblingThreadsContext = shouldIncludeSiblingThreadContext(trimmed)
       ? buildSiblingThreadsContext({
-          allThreads: threads,
-          activeThread: resolvedThread,
-          messageMap: map,
-        })
+        allThreads: threads,
+        activeThread: resolvedThread,
+        messageMap: map,
+      })
       : null;
     if (siblingThreadsContext) {
       payloadMessages.push({
@@ -987,8 +1100,8 @@ export default function ChatView({
 
     payloadMessages.push(
       ...history
-      .filter((message) => message.role !== "system")
-      .map((message) => ({ role: message.role, content: message.content })),
+        .filter((message) => message.role !== "system")
+        .map((message) => ({ role: message.role, content: message.content })),
     );
 
     const controller = new AbortController();
@@ -1363,6 +1476,7 @@ export default function ChatView({
     stopMicRecognitionSession,
     startMicRecognitionSession,
     stopMicMode,
+    quotedContext,
     messageMap,
   ]);
 
@@ -1472,9 +1586,8 @@ export default function ChatView({
       <div
         ref={chatScrollRef}
         onScroll={updateBottomVisibility}
-        className={`chat-scroll flex-1 overflow-y-auto px-6 py-8${
-          threadMessages.length === 0 ? " empty" : ""
-        }`}
+        className={`chat-scroll flex-1 overflow-y-auto px-6 py-8${threadMessages.length === 0 ? " empty" : ""
+          }`}
       >
         {threadMessages.length === 0 ? (
           <div className="empty-hero">
@@ -1493,6 +1606,8 @@ export default function ChatView({
                 onMicToggle={handleMicToggle}
                 micState={micState}
                 micDisabled={Boolean(activeStreamingMessageId)}
+                quotedContext={quotedContext}
+                onClearQuotedContext={handleClearQuotedContext}
               />
             </div>
           </div>
@@ -1501,21 +1616,36 @@ export default function ChatView({
             {renderedThreadRows}
           </div>
         )}
+        {askButtonPos ? (
+          <button
+            ref={askButtonRef}
+            className="ask-selection-button"
+            style={{
+              top: askButtonPos.top,
+              left: askButtonPos.left,
+            }}
+            onMouseDown={handleAskClick}
+            aria-label="Ask about selection"
+          >
+            <TextQuote className="h-3.5 w-3.5" />
+            Ask
+          </button>
+        ) : null}
         <div ref={bottomRef} className="h-2" />
       </div>
       {threadMessages.length > 0 ? (
-	        <>
-	          {showJumpToBottom ? (
+        <>
+          {showJumpToBottom ? (
             <div className="pointer-events-none absolute bottom-28 left-1/2 z-30 -translate-x-1/2 opacity-80 transition-opacity duration-200">
               <button
-	                className="pointer-events-auto inline-flex h-9 w-9 items-center justify-center rounded-full border border-[var(--border-strong)] bg-[var(--panel)] text-[var(--text-primary)] shadow-[var(--shadow)] transition hover:translate-y-[1px] hover:border-[var(--accent)] hover:opacity-100"
-	                onClick={() => {
-                    shouldStickToBottomRef.current = true;
-                    setShowJumpToBottom(false);
-                    smoothFollowUntilRef.current = performance.now() + 900;
-	                  bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
-	                }}
-	                aria-label="Jump to latest message"
+                className="pointer-events-auto inline-flex h-9 w-9 items-center justify-center rounded-full border border-[var(--border-strong)] bg-[var(--panel)] text-[var(--text-primary)] shadow-[var(--shadow)] transition hover:translate-y-[1px] hover:border-[var(--accent)] hover:opacity-100"
+                onClick={() => {
+                  shouldStickToBottomRef.current = true;
+                  setShowJumpToBottom(false);
+                  smoothFollowUntilRef.current = performance.now() + 900;
+                  bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+                }}
+                aria-label="Jump to latest message"
                 title="Jump to latest"
               >
                 <ArrowDown className="h-4 w-4" />
@@ -1523,27 +1653,29 @@ export default function ChatView({
             </div>
           ) : null}
 
-        <div className="composer-bar px-6 py-4">
-          <div className="mx-auto w-full max-w-3xl">
-            {error ? (
-              <div className="mb-3 rounded-lg border border-[var(--border)] bg-[var(--panel-2)] px-3 py-2 text-xs text-[var(--danger)]">
-                {error}
-              </div>
-            ) : null}
-            <Composer
-              value={input}
-              onChange={setInput}
-              onSend={() => {
-                void handleSend();
-              }}
-              onStop={handleStop}
-              isStreaming={Boolean(activeStreamingMessageId)}
-              onMicToggle={handleMicToggle}
-              micState={micState}
-              micDisabled={Boolean(activeStreamingMessageId)}
-            />
+          <div className="composer-bar px-6 py-4">
+            <div className="mx-auto w-full max-w-3xl">
+              {error ? (
+                <div className="mb-3 rounded-lg border border-[var(--border)] bg-[var(--panel-2)] px-3 py-2 text-xs text-[var(--danger)]">
+                  {error}
+                </div>
+              ) : null}
+              <Composer
+                value={input}
+                onChange={setInput}
+                onSend={() => {
+                  void handleSend();
+                }}
+                onStop={handleStop}
+                isStreaming={Boolean(activeStreamingMessageId)}
+                onMicToggle={handleMicToggle}
+                micState={micState}
+                micDisabled={Boolean(activeStreamingMessageId)}
+                quotedContext={quotedContext}
+                onClearQuotedContext={handleClearQuotedContext}
+              />
+            </div>
           </div>
-        </div>
         </>
       ) : null}
     </div>

package/template/src/components/Composer.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
-import { ArrowUp, Loader2, Mic, Square } from "lucide-react";
+import { ArrowUp, CornerDownRight, Loader2, Mic, Square, X } from "lucide-react";
 
 function normalizePastedText(input: string): string {
   return input
@@ -21,6 +21,8 @@ export default function Composer({
   onMicToggle,
   micState = "idle",
   micDisabled = false,
+  quotedContext = null,
+  onClearQuotedContext,
 }: {
   value: string;
   onChange: (value: string) => void;
@@ -30,6 +32,8 @@ export default function Composer({
   onMicToggle?: () => void;
   micState?: "idle" | "listening" | "processing";
   micDisabled?: boolean;
+  quotedContext?: string | null;
+  onClearQuotedContext?: () => void;
 }) {
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const minRowsRef = useRef(1);
@@ -109,61 +113,87 @@ export default function Composer({
     };
   }, [resizeTextarea, value]);
 
+  useEffect(() => {
+    if (quotedContext && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [quotedContext]);
+
   return (
-    <div className="composer flex items-end gap-3">
-      <textarea
-        ref={textareaRef}
-        rows={1}
-        className="composer-textarea flex-1 text-base text-[var(--text-primary)]"
-        value={value}
-        onChange={(event) => onChange(event.target.value)}
-        onPaste={(event) => {
-          const clipboardText = event.clipboardData.getData("text/plain");
-          if (!clipboardText) {
-            return;
-          }
-          event.preventDefault();
-          insertAtCursor(normalizePastedText(clipboardText));
-        }}
-        placeholder="Ask anything"
-        onKeyDown={(event) => {
-          if (event.key === "Enter" && !event.shiftKey) {
-            event.preventDefault();
-            if (!isStreaming) onSend();
-          }
-        }}
-      />
-      {onMicToggle ? (
-        <button
-          onClick={onMicToggle}
-          className={`send-button mic-button shrink-0 ${micState !== "idle" ? "active" : ""}`}
-          disabled={micDisabled || micState === "processing"}
-          title={micButtonTitle}
-          aria-label={micButtonTitle}
-        >
-          {micState === "processing" ? (
-            <Loader2 className="h-4 w-4 animate-spin" />
-          ) : (
-            <Mic className="h-4 w-4" />
-          )}
-        </button>
+    <div className="composer-wrapper">
+      {quotedContext ? (
+        <div className="quoted-context-container">
+          <div className="quoted-context-content">
+            <CornerDownRight className="quoted-context-icon" />
+            <span className="quoted-context-text">
+              &ldquo;{quotedContext.length > 280 ? `${quotedContext.slice(0, 280)}…` : quotedContext}&rdquo;
+            </span>
+          </div>
+          <button
+            className="quoted-context-dismiss"
+            onClick={onClearQuotedContext}
+            aria-label="Remove quoted context"
+          >
+            <X className="h-3.5 w-3.5" />
+          </button>
+        </div>
       ) : null}
-      {isStreaming ? (
-        <button
-          onClick={onStop}
-          className="flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--panel-2)] px-3 py-2 text-xs text-[var(--text-secondary)]"
-        >
-          <Square className="h-3 w-3" />
-          Stop
-        </button>
-      ) : (
-        <button
-          onClick={onSend}
-          className={`send-button shrink-0 ${hasText ? "active" : ""}`}
-        >
-          <ArrowUp className="h-4 w-4" />
-        </button>
-      )}
+      <div className="composer flex items-end gap-3">
+        <textarea
+          ref={textareaRef}
+          rows={1}
+          className="composer-textarea flex-1 text-base text-[var(--text-primary)]"
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+          onPaste={(event) => {
+            const clipboardText = event.clipboardData.getData("text/plain");
+            if (!clipboardText) {
+              return;
+            }
+            event.preventDefault();
+            insertAtCursor(normalizePastedText(clipboardText));
+          }}
+          placeholder={quotedContext ? "Ask about this selection" : "Ask anything"}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" && !event.shiftKey) {
+              event.preventDefault();
+              if (!isStreaming) onSend();
+            }
+          }}
+        />
+        {onMicToggle ? (
+          <button
+            onClick={onMicToggle}
+            className={`send-button mic-button shrink-0 ${micState !== "idle" ? "active" : ""}`}
+            disabled={micDisabled || micState === "processing"}
+            title={micButtonTitle}
+            aria-label={micButtonTitle}
+          >
+            {micState === "processing" ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Mic className="h-4 w-4" />
+            )}
+          </button>
+        ) : null}
+        {isStreaming ? (
+          <button
+            onClick={onStop}
+            className="flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--panel-2)] px-3 py-2 text-xs text-[var(--text-secondary)]"
+          >
+            <Square className="h-3 w-3" />
+            Stop
+          </button>
+        ) : (
+          <button
+            onClick={onSend}
+            className={`send-button shrink-0 ${hasText || quotedContext ? "active" : ""}`}
+          >
+            <ArrowUp className="h-4 w-4" />
+          </button>
+        )}
+      </div>
     </div>
   );
 }
+

package/template/src/components/SettingsModal.tsx

@@ -115,7 +115,7 @@ export default function SettingsModal({
   const [accentColor, setAccentColor] = useState(settings?.accentColor || DEFAULT_ACCENT_DARK);
   const [theme, setTheme] = useState<"dark" | "light">(settings?.theme || "dark");
   const [font, setFont] = useState<"ibm" | "manrope" | "sora" | "space" | "poppins">(
-    settings?.font || "manrope",
+    settings?.font || "poppins",
   );
 
   const localTools = settings?.localTools ?? DEFAULT_LOCAL_TOOLS_SETTINGS;
@@ -195,8 +195,8 @@ export default function SettingsModal({
 
   const selectedDefaultModel = selectedDefaultConnection
     ? defaultModelByConnection[selectedDefaultConnection.id] ||
-      getConnectionModelPresets(selectedDefaultConnection)[0] ||
-      ""
+    getConnectionModelPresets(selectedDefaultConnection)[0] ||
+    ""
     : "";
   const selectedPresets = selectedDefaultConnection ? getConnectionModelPresets(selectedDefaultConnection) : [];
   const selectedFetchedModels = selectedDefaultConnection ? fetchedModels[selectedDefaultConnection.id] ?? [] : [];
@@ -586,11 +586,10 @@ export default function SettingsModal({
             <button
               key={tab.id}
               onClick={() => setActiveTab(tab.id)}
-              className={`rounded-full px-3 py-1.5 text-xs settings-tab ${
-                activeTab === tab.id
+              className={`rounded-full px-3 py-1.5 text-xs settings-tab ${activeTab === tab.id
                   ? "settings-tab-active"
                   : "border border-[var(--border)] bg-[var(--panel-2)] text-[var(--text-secondary)]"
-              }`}
+                }`}
             >
               {tab.label}
             </button>
@@ -673,7 +672,7 @@ export default function SettingsModal({
                     ) : null}
                   </div>
                   {selectedDefaultConnection?.kind === "builtin" &&
-                  selectedDefaultConnection?.provider === "openai" ? (
+                    selectedDefaultConnection?.provider === "openai" ? (
                     <label className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
                       <input
                         type="checkbox"
@@ -822,37 +821,37 @@ export default function SettingsModal({
                         />
                         Enabled
                       </label>
-	                      <span>
-	                        Tools: {(connection.supportsTools ?? true) ? "supported" : "disabled"}
-	                      </span>
+                      <span>
+                        Tools: {(connection.supportsTools ?? true) ? "supported" : "disabled"}
+                      </span>
                       {connection.kind === "builtin" ? (
                         <span>Keys configured in API Keys tab</span>
                       ) : null}
-	                      {connectionStatus[connection.id] ? <span>{connectionStatus[connection.id]}</span> : null}
-	                    </div>
-	                  </div>
-	                ))}
-	              </div>
+                      {connectionStatus[connection.id] ? <span>{connectionStatus[connection.id]}</span> : null}
+                    </div>
+                  </div>
+                ))}
+              </div>
 
               <div className="rounded-xl border border-[var(--border)] bg-[var(--panel-2)] p-4">
                 <div className="mb-3 text-xs uppercase tracking-[0.2em] text-[var(--text-muted)]">
                   {editingConnectionId ? "Edit Connection" : "Add Connection"}
                 </div>
-	                <div className="grid gap-3 md:grid-cols-2">
+                <div className="grid gap-3 md:grid-cols-2">
                   <input
                     className="rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-sm"
                     placeholder="Connection name"
                     value={connectionFormName}
                     onChange={(event) => setConnectionFormName(event.target.value)}
                   />
-	                  <select
+                  <select
                     className="rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-sm"
                     value={connectionFormKind}
-	                    onChange={(event) => setConnectionFormKind(event.target.value as ConnectionKind)}
-	                  >
-	                    <option value="openai_compatible">OpenAI-compatible</option>
-	                    <option value="ollama">Ollama</option>
-	                  </select>
+                    onChange={(event) => setConnectionFormKind(event.target.value as ConnectionKind)}
+                  >
+                    <option value="openai_compatible">OpenAI-compatible</option>
+                    <option value="ollama">Ollama</option>
+                  </select>
                   <input
                     className="rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-sm md:col-span-2"
                     placeholder="Base URL (e.g. http://localhost:11434)"
@@ -871,11 +870,11 @@ export default function SettingsModal({
                     value={connectionFormHeadersText}
                     onChange={(event) => setConnectionFormHeadersText(event.target.value)}
                   />
-	                </div>
+                </div>
                 {connectionStatus.form ? (
                   <div className="mt-2 text-xs text-[var(--danger)]">{connectionStatus.form}</div>
                 ) : null}
-	                <div className="mt-3 flex flex-wrap items-center gap-3">
+                <div className="mt-3 flex flex-wrap items-center gap-3">
                   <label className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
                     <input
                       type="checkbox"
@@ -975,28 +974,28 @@ export default function SettingsModal({
                   placeholder="~/iris-project&#10;~/Desktop"
                 />
               </div>
-	              <div className="grid gap-2 md:grid-cols-2">
-	                {[
-	                  { label: "Enable Apple Notes tools", checked: enableNotes, setter: setEnableNotes },
-	                  { label: "Enable app open/focus tools", checked: enableApps, setter: setEnableApps },
-	                  { label: "Enable Numbers tools", checked: enableNumbers, setter: setEnableNumbers },
-	                  { label: "Enable web search/open tools", checked: enableWeb, setter: setEnableWeb },
-	                  { label: "Enable music controls", checked: enableMusic, setter: setEnableMusic },
-	                  { label: "Enable calendar/reminders tools", checked: enableCalendar, setter: setEnableCalendar },
-	                  { label: "Enable mail/messages tools", checked: enableMail, setter: setEnableMail },
-	                  { label: "Enable workflow tool", checked: enableWorkflow, setter: setEnableWorkflow },
-	                  { label: "Enable system controls", checked: enableSystem, setter: setEnableSystem },
-	                ].map((item) => (
-	                  <label key={item.label} className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
-	                    <input
-	                      type="checkbox"
-	                      checked={item.checked}
-	                      onChange={(event) => item.setter(event.target.checked)}
-	                    />
-	                    {item.label}
-	                  </label>
-	                ))}
-	              </div>
+              <div className="grid gap-2 md:grid-cols-2">
+                {[
+                  { label: "Enable Apple Notes tools", checked: enableNotes, setter: setEnableNotes },
+                  { label: "Enable app open/focus tools", checked: enableApps, setter: setEnableApps },
+                  { label: "Enable Numbers tools", checked: enableNumbers, setter: setEnableNumbers },
+                  { label: "Enable web search/open tools", checked: enableWeb, setter: setEnableWeb },
+                  { label: "Enable music controls", checked: enableMusic, setter: setEnableMusic },
+                  { label: "Enable calendar/reminders tools", checked: enableCalendar, setter: setEnableCalendar },
+                  { label: "Enable mail/messages tools", checked: enableMail, setter: setEnableMail },
+                  { label: "Enable workflow tool", checked: enableWorkflow, setter: setEnableWorkflow },
+                  { label: "Enable system controls", checked: enableSystem, setter: setEnableSystem },
+                ].map((item) => (
+                  <label key={item.label} className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
+                    <input
+                      type="checkbox"
+                      checked={item.checked}
+                      onChange={(event) => item.setter(event.target.checked)}
+                    />
+                    {item.label}
+                  </label>
+                ))}
+              </div>
             </div>
           ) : null}
 
@@ -1226,14 +1225,14 @@ export default function SettingsModal({
                             ? "var(--font-sora)"
                             : value === "space"
                               ? "var(--font-space)"
-                              : "var(--font-sans)";
+                              : "var(--font-poppins)";
                     document.documentElement.style.setProperty("--app-font", fontVar);
                     document.body.style.fontFamily = fontVar;
                   }}
                 >
-                  <option value="ibm">IBM Plex Sans (Default)</option>
+                  <option value="ibm">IBM Plex Sans</option>
                   <option value="manrope">Manrope</option>
-                  <option value="poppins">Poppins</option>
+                  <option value="poppins">Poppins (Default)</option>
                   <option value="sora">Sora</option>
                   <option value="space">Space Grotesk</option>
                 </select>
@@ -1255,11 +1254,10 @@ export default function SettingsModal({
                     return (
                       <button
                         key={preset.id}
-                        className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-xs ${
-                          isSelected
+                        className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-xs ${isSelected
                             ? "border-[var(--accent-ring)] text-[var(--text-primary)]"
                             : "border-[var(--border)] text-[var(--text-secondary)]"
-                        }`}
+                          }`}
                         onClick={() =>
                           setAccentColor(isDefault ? DEFAULT_ACCENT_DARK : preset.color)
                         }