Clarify applet success colors across workspace themes

DESIGN.md

@@ -25,6 +25,7 @@ Use semantic color tokens by intent:
 - `primary` for the single most important action in a local region.
 - `muted` for quiet structure or disabled fills and `muted-foreground` for secondary content.
 - `accent` for hover, active, selection, and subtle highlights.
+- `success` for positive outcomes, healthy or active states, and presence or progress indicators.
 - `destructive` for destructive actions, invalid states, and errors.
 - `border`, `input`, and `ring` for structure, controls, and focus.
 

client/components/shared/BottomPanel.tsx

@@ -22,7 +22,8 @@ export function BottomPanel({ className, title, children, onClose, ref }: Bottom
     <motion.div
       ref={ref}
       className={cn(
-        'absolute inset-x-4 bottom-4 no-scrollbar flex max-h-full flex-col gap-4 overflow-y-auto rounded-2xl bg-card p-(--page-pad) pb-0 text-card-foreground shadow-md',
+        'absolute inset-x-4 bottom-4 no-scrollbar flex max-h-full flex-col gap-4 overflow-y-auto rounded-2xl bg-card text-card-foreground shadow-md',
+        'mx-auto max-w-[calc(var(--chat-max-container)+var(--page-pad)*2)] p-(--page-pad) pb-0',
         className
       )}
       variants={{

client/components/shared/PanelHeader.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react'
 
 export function PanelHeader({ children }: { children?: ReactNode }) {
   return (
-    <header className="@container flex h-11 shrink-0 items-center gap-2.5 border-b border-border/75 pr-3 pl-4">
+    <header className="@container relative flex h-11 shrink-0 items-center gap-2.5 pr-3 pl-4 ring-1 ring-border">
       {children}
     </header>
   )

client/features/chat/ChatComposer.tsx

@@ -1,6 +1,12 @@
 import { type RefObject, useRef, useState } from 'react'
 
-import { IconFile, IconLoader2, IconPaperclip, IconPlayerStop, IconX } from '@tabler/icons-react'
+import {
+  IconFile,
+  IconLoader2,
+  IconPaperclip,
+  IconPlayerStopFilled,
+  IconX
+} from '@tabler/icons-react'
 
 import {
   canSubmitComposerAction,
@@ -10,6 +16,7 @@ import {
   ComposerTextarea
 } from '@/client/components/shared/Composer'
 import { Button } from '@/client/components/ui/button'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/client/components/ui/tooltip'
 import { cn } from '@/client/lib/cn'
 import { useWorkspaceId } from '@/client/features/workspace/WorkspaceContext'
 import { uploadFiles } from '@/client/features/chat/uploads'
@@ -176,9 +183,16 @@ export function ChatComposer({
         </Button>
         <ModelPicker />
         {processing ? (
-          <Button type="button" size="icon" onClick={onStop} aria-label="Stop agent">
-            <IconPlayerStop stroke={1.5} />
-          </Button>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Button type="button" size="icon" onClick={onStop} aria-label="Stop agent">
+                  <IconPlayerStopFilled />
+                </Button>
+              }
+            />
+            <TooltipContent>Stop answering</TooltipContent>
+          </Tooltip>
         ) : (
           <ComposerSubmitButton
             label="Send message"

client/features/chat/ChatSelector.tsx

@@ -105,7 +105,7 @@ function ChatSessionItem({
               'min-w-0 truncate',
               (running || pending) && '-mr-4',
               confirmingArchive
-                ? '-4'
+                ? '-mr-14'
                 : canArchive &&
                     'group-focus-within/chat:-mr-4 group-hover/chat:-mr-4 [@media(hover:none)]:-mr-4'
             )}

client/features/chat/TurnView.tsx

@@ -113,7 +113,7 @@ export const TurnView = memo(function TurnView({ turn, processing = false }: Tur
           <FilePart key={i} mediaType={p.mediaType} url={p.url} filename={p.filename} />
         ))}
         {text && (
-          <p className="max-w-full min-w-0 rounded-lg bg-accent px-3 py-2 text-sm leading-normal wrap-anywhere whitespace-pre-wrap text-accent-foreground">
+          <p className="max-w-full min-w-0 rounded-lg bg-primary px-3 py-2 text-sm leading-normal wrap-anywhere whitespace-pre-wrap text-primary-foreground">
             {text}
           </p>
         )}

client/features/scratchpad/Scratchpad.tsx

@@ -107,9 +107,7 @@ function makeAssetStore(workspaceId: string): TLAssetStore {
 // from the panel, leaving just the zoom menu. Kept on defaults: NavigationPanel
 // (zoom), ContextMenu, KeyboardShortcutsDialog.
 function ScratchBackground() {
-  return (
-    <div className="absolute inset-0 bg-[color-mix(in_oklch,var(--muted),var(--background)_50%)]" />
-  )
+  return <div className="absolute inset-0 bg-background" />
 }
 
 function UniformGrid({ x, y, z, size }: TLGridProps) {

client/features/widgets/WidgetFrame.test.tsx

@@ -0,0 +1,23 @@
+import { createElement } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { describe, expect, test } from 'bun:test'
+
+import { DEFAULT_PRIMARY_COLOR } from '@/lib/themes'
+
+import { WidgetFrame } from './WidgetFrame'
+
+describe('WidgetFrame', () => {
+  test('applies the swapped widget theme without forcing dark mode', () => {
+    const html = renderToStaticMarkup(createElement(WidgetFrame))
+    const chromeClasses = html.match(/data-widget-chrome="true"[^>]*class="([^"]+)"/)?.[1]
+
+    expect(chromeClasses).toBeDefined()
+    expect(chromeClasses?.split(' ')).toContain('text-foreground')
+    expect(chromeClasses?.split(' ')).not.toContain('dark')
+    expect(html).toContain(`--background:${DEFAULT_PRIMARY_COLOR}`)
+    expect(html).toContain('--primary:color-mix(var(--background) 3%, oklch(1 0 0) 97%)')
+    expect(html).toContain('--accent-foreground:var(--foreground)')
+    expect(html).toContain('--border:color-mix(var(--foreground) 15%, transparent)')
+  })
+})

client/features/widgets/WidgetFrame.tsx

@@ -7,6 +7,8 @@ import { IconMinus, IconPlus } from '@tabler/icons-react'
 import { cn } from '@/client/lib/cn'
 
 import { Button } from '@/client/components/ui/button'
+import { useWorkspaceThemeSetting } from '@/client/features/workspace/WorkspaceLayoutContext'
+import { getWorkspaceThemeStyle } from '@/client/runtime/workspace-theme'
 
 type WidgetFrameProps = {
   editing?: boolean
@@ -16,6 +18,8 @@ type WidgetFrameProps = {
 }
 
 export function WidgetFrame({ editing, hidden, onRemove, children }: WidgetFrameProps) {
+  const theme = useWorkspaceThemeSetting()
+
   return (
     <motion.div
       variants={{
@@ -35,8 +39,9 @@ export function WidgetFrame({ editing, hidden, onRemove, children }: WidgetFrame
         // Stable hook for widget snapshots: the capture clone overrides this
         // element's chrome (radius/shadow/stroke) so thumbnails come out square.
         data-widget-chrome
+        style={getWorkspaceThemeStyle(theme, 'widget')}
         className={cn(
-          'dark absolute inset-0 overflow-hidden rounded-2xl [corner-shape:superellipse(1.2)]',
+          'absolute inset-0 overflow-hidden rounded-2xl text-foreground [corner-shape:superellipse(1.2)]',
           // Outer drop shadow on the wrapper itself.
           'shadow-[0_1px_2px_-1px_rgba(0,0,0,0.08),0_2px_4px_0_rgba(0,0,0,0.03)]',
           // 1px inset stroke painted on a pseudo so it lands ON TOP of the
@@ -45,7 +50,6 @@ export function WidgetFrame({ editing, hidden, onRemove, children }: WidgetFrame
           'after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit]',
           "after:content-[''] after:[corner-shape:inherit]",
           'after:shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)]',
-          'text-foreground',
           editing && 'pointer-events-none'
         )}
       >

client/features/workspace/CustomizePanel.tsx

@@ -6,16 +6,21 @@ import { useWorkspaceLayoutCtx } from '@/client/features/workspace/WorkspaceLayo
 import { BottomPanel } from '@/client/components/shared/BottomPanel'
 import { cn } from '@/client/lib/cn'
 import { getWorkspaceThemeStyle, usePreloadWorkspaceFonts } from '@/client/runtime/workspace-theme'
-import { COLOR_THEMES, type ColorThemeConfig, FONT_THEMES } from '@/lib/themes'
-import type { ColorTheme, FontTheme } from '@/lib/types'
+import {
+  COLOR_THEMES,
+  type ColorThemeConfig,
+  FONT_THEMES,
+  RADIUS_THEMES,
+  type RadiusThemeConfig,
+  resolveWorkspaceTheme
+} from '@/lib/themes'
+import type { ColorTheme, FontTheme, RadiusTheme, WorkspaceTheme } from '@/lib/types'
 
 const FONT_OPTIONS = Object.entries(FONT_THEMES) as [FontTheme, (typeof FONT_THEMES)[FontTheme]][]
 
 const COLOR_OPTIONS = Object.entries(COLOR_THEMES) as [ColorTheme, ColorThemeConfig][]
 
-function presetMatches(preset: ColorThemeConfig, primary?: string): boolean {
-  return (preset.primary ?? undefined) === primary
-}
+const RADIUS_OPTIONS = Object.entries(RADIUS_THEMES) as [RadiusTheme, RadiusThemeConfig][]
 
 type CustomizeOptionGroupProps = {
   children: ReactNode
@@ -26,7 +31,7 @@ function CustomizeOptionGroup({ children, label }: CustomizeOptionGroupProps) {
   return (
     <div className="flex flex-col gap-2">
       <p className="text-xs font-medium">{label}</p>
-      <div role="group" aria-label={label} className="grid grid-cols-3 gap-2">
+      <div role="group" aria-label={label} className="grid grid-cols-4 gap-2">
         {children}
       </div>
     </div>
@@ -55,7 +60,7 @@ function CustomizeOption({ active, children, className, onSelect, style }: Custo
       )}
       style={style}
     >
-      <div className="flex-1">{children}</div>
+      <div className="flex flex-1 flex-col justify-center">{children}</div>
       {active && <IconCircleCheckFilled size={20} stroke={1.5} aria-hidden="true" />}
     </button>
   )
@@ -69,11 +74,10 @@ type CustomizePanelProps = {
 export function CustomizePanel({ onClose, ref }: CustomizePanelProps) {
   usePreloadWorkspaceFonts()
   const { layout, setLayout } = useWorkspaceLayoutCtx()
-  const currentFont = layout.theme?.font ?? 'default'
-  const currentPrimary = layout.theme?.primary
+  const theme = resolveWorkspaceTheme(layout.theme)
 
-  function setTheme(font: FontTheme, primary: string | undefined) {
-    setLayout({ theme: { font, ...(primary ? { primary } : {}) } })
+  function setTheme(update: Partial<WorkspaceTheme>) {
+    setLayout({ theme: { ...theme, ...update } })
   }
 
   return (
@@ -83,14 +87,11 @@ export function CustomizePanel({ onClose, ref }: CustomizePanelProps) {
           {FONT_OPTIONS.map(([key, config]) => (
             <CustomizeOption
               key={key}
-              active={key === currentFont}
-              onSelect={() => setTheme(key, currentPrimary)}
+              active={key === theme.font}
+              onSelect={() => setTheme({ font: key })}
               style={{ fontFamily: config.sans }}
             >
-              <div className="flex flex-col">
-                <span className="text-sm font-medium">{config.label}</span>
-                <span className="text-xs text-muted-foreground">{config.feel}</span>
-              </div>
+              <span className="text-sm font-medium">{config.label}</span>
             </CustomizeOption>
           ))}
         </CustomizeOptionGroup>
@@ -99,14 +100,10 @@ export function CustomizePanel({ onClose, ref }: CustomizePanelProps) {
           {COLOR_OPTIONS.map(([key, preset]) => (
             <CustomizeOption
               key={key}
-              active={presetMatches(preset, currentPrimary)}
+              active={key === theme.color}
               className={preset.primary && 'bg-background text-foreground'}
-              onSelect={() => setTheme(currentFont, preset.primary)}
-              style={
-                preset.primary
-                  ? getWorkspaceThemeStyle({ font: currentFont, primary: preset.primary })
-                  : undefined
-              }
+              onSelect={() => setTheme({ color: key })}
+              style={getWorkspaceThemeStyle({ ...theme, color: key })}
             >
               <div className="flex gap-2">
                 <span
@@ -124,6 +121,25 @@ export function CustomizePanel({ onClose, ref }: CustomizePanelProps) {
             </CustomizeOption>
           ))}
         </CustomizeOptionGroup>
+
+        <CustomizeOptionGroup label="Radius">
+          {RADIUS_OPTIONS.map(([key, preset]) => (
+            <CustomizeOption
+              key={key}
+              active={key === theme.radius}
+              onSelect={() => setTheme({ radius: key })}
+              style={getWorkspaceThemeStyle({ ...theme, radius: key })}
+            >
+              <div className="flex items-center gap-2">
+                <span
+                  className="size-5 shrink-0 rounded-sm bg-card texture-checker-[10px] shadow-xs"
+                  aria-hidden="true"
+                />
+                <span className="text-sm font-medium">{preset.label}</span>
+              </div>
+            </CustomizeOption>
+          ))}
+        </CustomizeOptionGroup>
       </div>
     </BottomPanel>
   )

client/features/workspace/WorkspaceLayoutContext.tsx

@@ -41,6 +41,14 @@ export function useWorkspaceLayoutCtx(): WorkspaceLayoutContextValue {
   return ctx
 }
 
+// The theme alone, for chrome that only needs to paint itself (widget frames,
+// previews). Unlike `useWorkspaceLayoutCtx` this tolerates being read outside a
+// provider and returns `undefined` there, which callers already treat as "use
+// the default theme" — so the same component still renders in isolation.
+export function useWorkspaceThemeSetting(): WorkspaceLayout['theme'] {
+  return useContext(WorkspaceLayoutContext)?.layout.theme
+}
+
 // Strip the server-only metadata so what we PUT back (and expose as `layout`)
 // is just the persisted `WorkspaceLayout`.
 function stripMeta(data: WorkspaceLayoutResponse): WorkspaceLayout {