thunderbird · liviolanda · Jun 27, 2026 · Jul 2, 2026 · Jul 2, 2026 · Jul 8, 2026
diff --git a/bun.lock b/bun.lock
diff --git a/package.json b/package.json
@@ -64,6 +64,8 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@fontsource-variable/dm-sans": "^5.2.8",
+    "@fontsource/space-mono": "^5.2.9",
     "@hookform/resolvers": "^5.2.1",
     "@icons-pack/react-simple-icons": "^13.13.0",
     "@journeyapps/wa-sqlite": "^1.7.0",

diff --git a/src/components/chat/chat-prompt-input.tsx b/src/components/chat/chat-prompt-input.tsx
@@ -650,7 +650,7 @@ export const ChatPromptInput = forwardRef<ChatPromptInputRef, ChatPromptInputPro
             onStop={stop}
             autoFocus={!isMobile}
             submitOnEnter={!isStreaming && !shouldInsertNewlineOnEnter}
-            className="relative z-10 flex flex-col w-full gap-0 rounded-2xl border bg-card p-2 dark:border-input dark:bg-[oklch(0.182_0_0)]"
+            className="flex flex-col w-full gap-0 rounded-2xl border bg-sidebar p-2"
             footerStartElements={footerStartElements}
             renderOverlay={(value) => renderHighlightedSkillTokens(value, classifySkill)}
             popoverSlot={

diff --git a/src/components/chat/message-bubbles.tsx b/src/components/chat/message-bubbles.tsx
@@ -1,18 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+import { getAttachments } from '@/chats/message-utils'
+import { useShowSideview } from '@/sideview/sideview-store'
+import type { ThunderboltUIMessage } from '@/chats/types'
+import { buildDocumentSideviewId } from '@/sideview/sideview-id-builder'
 import { hasTransformer } from '@/files/transformers'
-import { useShowSideview } from '@/content-view/context'
-import { getAttachments } from '@/lib/attachments'
-import type { ThunderboltUIMessage } from '@/types'
-import { buildDocumentSideviewId } from '@/types/citation'
 import type { UIMessage } from 'ai'
-import { FileCard } from './file-card'
 import { MemoizedMarkdown } from './memoized-markdown'
-
-/** Re-deliver a single attachment as text/images and re-run the turn. */
-export type ResendAttachmentHandler = (localFileId: string, target: 'text' | 'images') => void
+import { FileCard } from './file-card'
+import type { ResendAttachmentHandler } from './file-card'
 
 type MessageBubblesProps = {
   message: UIMessage
@@ -28,9 +26,6 @@ export const MessageBubbles = ({ message, onResendAttachment }: MessageBubblesPr
       {attachments.length > 0 && (
         <div className="ml-auto mt-6 flex max-w-3/4 flex-wrap justify-end gap-2">
           {attachments.map((attachment) => {
-            // Alternative delivery modes to offer, but only on the latest turn and
-            // only once a non-native mode is in effect (i.e. remediation already
-            // converted this file) — so a clean native send shows no resend noise.
             const resendTargets =
               onResendAttachment && attachment.deliverAs
                 ? (['text', 'images'] as const).filter(
@@ -65,7 +60,7 @@ export const MessageBubbles = ({ message, onResendAttachment }: MessageBubblesPr
       {message.parts
         .filter((part) => part.type === 'text')
         .map((part, j) => (
-          <div key={j} className="px-4 rounded-2xl max-w-3/4 bg-muted dark:bg-secondary/60 ml-auto mt-6">
+          <div key={j} className="px-4 rounded-2xl max-w-3/4 bg-accent dark:bg-secondary/60 ml-auto mt-6 text-[14px]">
             <div className="space-y-2">
               <MemoizedMarkdown id={`${message.id}_${j}`} content={part.text || ''} />
             </div>

diff --git a/src/components/provider-icons.tsx b/src/components/provider-icons.tsx
@@ -61,7 +61,7 @@ export const GmailIcon = () => (
  */
 export const GoogleCalendarIcon = () => (
   <svg className="w-5 h-5" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect width="22" height="22" x="13" y="13" fill="#fff" />
+    <rect width="22" height="22" x="13" y="13" fill="#fafafa" />
     <polygon
       fill="#1e88e5"
       points="25.68,20.92 26.688,22.36 28.272,21.208 28.272,29.56 30,29.56 30,18.616 28.56,18.616"
@@ -120,15 +120,15 @@ export const OutlookIcon = () => (
       d="M27.198,42.999H11.589c-3.646,0-6.602-2.956-6.602-6.602V17.783c0,1.076,0.552,2.076,1.461,2.649	l23.067,14.543c1.263,0.796,2.029,2.185,2.029,3.678C31.544,41.053,29.598,42.999,27.198,42.999z"
     />
     <path
-      fill="#fff"
+      fill="#fafafa"
       d="M11.282,36.236c-1.398,0-2.545-0.437-3.442-1.312c-0.897-0.874-1.346-2.015-1.346-3.423	c0-1.486,0.455-2.689,1.366-3.607c0.911-0.918,2.103-1.377,3.577-1.377c1.393,0,2.526,0.439,3.401,1.318	c0.879,0.879,1.319,2.037,1.319,3.475c0,1.478-0.456,2.669-1.366,3.574C13.885,35.786,12.716,36.236,11.282,36.236z M11.323,34.381	c0.762,0,1.375-0.26,1.839-0.78c0.464-0.52,0.696-1.244,0.696-2.171c0-0.966-0.226-1.718-0.676-2.256	c-0.451-0.538-1.053-0.806-1.805-0.806c-0.775,0-1.4,0.278-1.873,0.833c-0.473,0.551-0.71,1.281-0.71,2.19	c0,0.923,0.237,1.653,0.71,2.19C9.977,34.114,10.583,34.381,11.323,34.381z"
     />
     <path
       fill="#1565c0"
       d="M6.453,23h10.094C18.454,23,20,24.546,20,26.453v10.094C20,38.454,18.454,40,16.547,40H6.453	C4.546,40,3,38.454,3,36.547V26.453C3,24.546,4.546,23,6.453,23z"
     />
     <path
-      fill="#fff"
+      fill="#fafafa"
       d="M11.453,36.518c-1.4,0-2.55-0.452-3.449-1.355c-0.899-0.903-1.348-2.082-1.348-3.537	c0-1.536,0.456-2.778,1.369-3.726c0.913-0.949,2.107-1.423,3.584-1.423c1.396,0,2.532,0.454,3.408,1.362	c0.881,0.908,1.321,2.105,1.321,3.591c0,1.527-0.456,2.758-1.369,3.692C14.061,36.053,12.889,36.518,11.453,36.518z M11.493,34.601	c0.763,0,1.378-0.269,1.843-0.806c0.465-0.538,0.698-1.285,0.698-2.243c0-0.998-0.226-1.775-0.677-2.331	c-0.452-0.556-1.055-0.833-1.809-0.833c-0.777,0-1.403,0.287-1.877,0.861c-0.474,0.569-0.711,1.323-0.711,2.263	c0,0.953,0.237,1.707,0.711,2.263C10.145,34.326,10.752,34.601,11.493,34.601z"
     />
   </svg>
@@ -140,10 +140,10 @@ export const OutlookIcon = () => (
 export const MicrosoftCalendarIcon = () => (
   <svg className="w-5 h-5" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill="#1976d2" d="M28,13h14.533C43.343,13,44,13.657,44,14.467v19.066C44,34.343,43.343,35,42.533,35H28V13z" />
-    <rect width="14" height="15.542" x="28" y="17.958" fill="#fff" />
+    <rect width="14" height="15.542" x="28" y="17.958" fill="#fafafa" />
     <polygon fill="#1976d2" points="27,44 4,39.5 4,8.5 27,4" />
     <path
-      fill="#fff"
+      fill="#fafafa"
       d="M15.25,16.5c-3.176,0-5.75,3.358-5.75,7.5s2.574,7.5,5.75,7.5S21,28.142,21,24	S18.426,16.5,15.25,16.5z M15,28.5c-1.657,0-3-2.015-3-4.5s1.343-4.5,3-4.5s3,2.015,3,4.5S16.657,28.5,15,28.5z"
     />
     <rect width="2.7" height="2.9" x="28.047" y="29.737" fill="#1976d2" />

diff --git a/src/components/sidebar-footer.tsx b/src/components/sidebar-footer.tsx
@@ -128,7 +128,7 @@ export const SidebarFooter = ({ className }: SidebarFooterProps) => {
 
   return (
     <Popover open={menuOpen} onOpenChange={setMenuOpen} modal={isMobile}>
-      <ShadcnSidebarFooter className={cn('border-t border-border !p-0 !gap-0', className)}>
+      <ShadcnSidebarFooter className={cn('!p-0 !gap-0', className)}>
         <SidebarMenu>
           <SidebarMenuItem>
             {isPending ? (

diff --git a/src/components/ui/combobox.tsx b/src/components/ui/combobox.tsx
@@ -105,7 +105,7 @@ export const Combobox = ({
           disabled={disabled}
           {...triggerProps}
           className={cn(
-            "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-lg border bg-transparent px-3 py-2 text-[length:var(--font-size-body)] whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-[var(--touch-height-default)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+            "border-border data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-lg border bg-transparent px-3 py-2 text-[length:var(--font-size-body)] whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-[var(--touch-height-default)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
             !triggerLabel && 'text-muted-foreground',
             className,
           )}

diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ import { forwardRef, type InputHTMLAttributes } from 'react'
 import { cn } from '@/lib/utils'
 
 const inputVariants = cva(
-  'border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex min-w-0 rounded-lg border bg-transparent px-3 py-1 text-[length:var(--font-size-body)] outline-none file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+  'border-border file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex min-w-0 rounded-lg border bg-transparent px-3 py-1 text-[length:var(--font-size-body)] outline-none file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {

diff --git a/src/components/ui/prompt-input.tsx b/src/components/ui/prompt-input.tsx
@@ -169,7 +169,7 @@ export const PromptInput = forwardRef<HTMLFormElement, PromptInputProps>(
             <div
               ref={overlayRef}
               aria-hidden="true"
-              className="pointer-events-none absolute inset-0 z-10 overflow-hidden whitespace-pre-wrap break-words px-1 py-2 text-base leading-5 text-foreground"
+              className="pointer-events-none absolute inset-0 z-10 overflow-hidden whitespace-pre-wrap break-words px-1 py-2 text-[length:var(--font-size-body)] leading-5 text-foreground"
             >
               {renderOverlay(value)}
             </div>
@@ -185,7 +185,7 @@ export const PromptInput = forwardRef<HTMLFormElement, PromptInputProps>(
             maxHeight={240}
             autoFocus={autoFocus}
             className={cn(
-              'w-full border-none bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 resize-none px-1 py-2 text-base leading-5',
+              'w-full border-none bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 resize-none px-1 py-2 text-[length:var(--font-size-body)] leading-5',
               renderOverlay && 'text-transparent caret-foreground',
             )}
           />

diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
@@ -33,7 +33,7 @@ const SelectTrigger = ({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-[length:var(--font-size-body)] whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[var(--touch-height-default)] data-[size=sm]:h-[var(--touch-height-sm)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-border data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-[length:var(--font-size-body)] whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[var(--touch-height-default)] data-[size=sm]:h-[var(--touch-height-sm)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}

diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
@@ -23,7 +23,7 @@ const Switch = ({ className, onCheckedChange, ...props }: ComponentProps<typeof
     <SwitchPrimitive.Root
       data-slot="switch"
       className={cn(
-        'cursor-pointer peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[var(--switch-track-height)] w-[var(--switch-track-width)] shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        'cursor-pointer peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[var(--switch-track-height)] w-[var(--switch-track-width)] shrink-0 items-center rounded-full border border-transparent dark:border-border shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       onCheckedChange={handleCheckedChange}

diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
@@ -11,7 +11,7 @@ const Textarea = ({ className, ...props }: ComponentProps<'textarea'>) => {
     <textarea
       data-slot="textarea"
       className={cn(
-        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-20 md:min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-[length:var(--font-size-body)] shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        'border-border placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-20 md:min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-[length:var(--font-size-body)] shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       {...props}

diff --git a/src/components/ui/toggle.tsx b/src/components/ui/toggle.tsx
@@ -15,7 +15,7 @@ const toggleVariants = cva(
     variants: {
       variant: {
         default: 'bg-transparent',
-        outline: 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+        outline: 'border border-border bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
       },
       size: {
         default: 'h-[var(--touch-height-default)] px-2 min-w-[var(--touch-height-default)]',