minor design changes (#564)

apps/x/apps/renderer/DESIGN_LANGUAGE.md

@@ -0,0 +1,41 @@
+# Rowboat Design Language
+
+Rowboat should feel like a command center for people who live in notes, agents, email, meetings, and files all day. The launch direction is quiet, fast, and prosumer: dense enough for repeated work, warm enough to feel personal, and explicit about what the AI is doing.
+
+## Principles
+
+1. **Calm density**
+   Keep the interface compact and scannable. Use tighter rows, restrained borders, and low-contrast panels so users can keep many contexts open without the app feeling heavy.
+
+2. **Command first**
+   Primary actions should feel like instant commands, not marketing CTAs. Side navigation, search, model selection, and composer controls use compact icon-led affordances with clear hover and selected states.
+
+3. **Visible work state**
+   AI actions, sync, saving, meeting capture, and background tasks need clear status surfaces. Prefer small persistent indicators over large banners.
+
+4. **Notes as the canvas**
+   The editor and conversation stay visually dominant. Chrome is supportive, not decorative. Avoid nested cards and oversized empty states in work surfaces.
+
+5. **Neutral precision**
+   The palette follows the dev color system: white and graphite surfaces, black/white primary actions, neutral command tools, and reserved semantic colors for destructive and chart states.
+
+## Tokens
+
+- Radius: `8px` for controls and cards, smaller where density matters.
+- Backgrounds: dev defaults in light and dark mode.
+- Borders: one-step darker than surfaces, quiet enough to separate panels without tinting them.
+- Shadows: reserved for the composer, menus, dialogs, and active segmented controls.
+- Type: system sans with tabular-feeling OpenType features enabled; no negative tracking.
+- Accent use: primary and command affordances use the neutral dev palette. Extra hues are reserved for semantic states and charts.
+
+## Core Surfaces
+
+- **Sidebar:** persistent workflow switcher with calm selected states. Quick-action icons use neutral ink from the dev palette.
+- **Titlebar/tabs:** slim, scan-first navigation. Active tabs get a bottom signal line, not a bulky filled pill.
+- **Composer:** the highest-emphasis control outside the active canvas. It is slightly raised, flat, bordered by the primary tone, and sharp enough to feel like an input terminal.
+- **Messages:** user messages are compact structured blocks; assistant messages remain full-width and readable.
+- **Status:** sync, saving, recording, and task activity stay small but always visible near the surface they affect.
+
+## Launch Positioning
+
+The visual story is: **Rowboat is the personal AI workspace for people whose work already spans meetings, mail, notes, browser tasks, and agents.** It should feel closer to a focused desktop tool than a chat website.

apps/x/apps/renderer/src/App.css

@@ -980,7 +980,7 @@
 }
 
 :root {
-  --radius: 0.625rem;
+  --radius: 0.5rem;
   --background: var(--bg-color, oklch(1 0 0));
   --foreground: var(--text-color, oklch(0.145 0 0));
   --card: var(--bg-color, oklch(1 0 0));
@@ -1008,13 +1008,21 @@
   --sidebar-foreground: var(--text-color, oklch(0.145 0 0));
   --sidebar-primary: var(--main-color, oklch(0.205 0 0));
   --sidebar-primary-foreground: var(--bg-color, oklch(0.985 0 0));
-  --sidebar-accent: var(--sub-color, oklch(0.90 0 0));
+  --sidebar-accent: var(--sub-color, oklch(0.9 0 0));
   --sidebar-accent-foreground: var(--text-color, oklch(0.205 0 0));
   --sidebar-border: var(--sub-alt-color, oklch(0.922 0 0));
   --sidebar-ring: var(--main-color, oklch(0.708 0 0));
   --scrollbar-track: oklch(0.95 0 0);
   --scrollbar-thumb: oklch(0.75 0 0);
   --scrollbar-thumb-hover: oklch(0.65 0 0);
+  --rowboat-panel: oklch(0.97 0 0);
+  --rowboat-raised: oklch(1 0 0);
+  --rowboat-wash: color-mix(in oklab, var(--background) 88%, var(--primary) 12%);
+  --rowboat-hairline: color-mix(in oklab, var(--border) 78%, var(--foreground) 22%);
+  --rowboat-command: oklch(0.205 0 0);
+  --rowboat-attention: oklch(0.646 0.222 41.116);
+  --rowboat-shadow: 0 1px 2px rgb(31 38 48 / 0.07), 0 18px 40px rgb(31 38 48 / 0.08);
+  --rowboat-shadow-soft: 0 1px 2px rgb(31 38 48 / 0.05), 0 8px 24px rgb(31 38 48 / 0.06);
 }
 
 .dark {
@@ -1052,6 +1060,14 @@
   --scrollbar-track: oklch(0.2 0 0);
   --scrollbar-thumb: oklch(0.4 0 0);
   --scrollbar-thumb-hover: oklch(0.5 0 0);
+  --rowboat-panel: oklch(0.269 0 0);
+  --rowboat-raised: oklch(0.205 0 0);
+  --rowboat-wash: color-mix(in oklab, var(--background) 80%, var(--primary) 20%);
+  --rowboat-hairline: color-mix(in oklab, var(--border) 70%, var(--foreground) 30%);
+  --rowboat-command: oklch(0.922 0 0);
+  --rowboat-attention: oklch(0.769 0.188 70.08);
+  --rowboat-shadow: 0 1px 2px rgb(0 0 0 / 0.24), 0 22px 44px rgb(0 0 0 / 0.28);
+  --rowboat-shadow-soft: 0 1px 2px rgb(0 0 0 / 0.2), 0 12px 28px rgb(0 0 0 / 0.18);
 }
 
 @layer base {
@@ -1063,6 +1079,9 @@
 
   body {
     @apply bg-background text-foreground;
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+    text-rendering: optimizeLegibility;
   }
 
   ::-webkit-scrollbar {
@@ -1084,6 +1103,94 @@
   }
 }
 
+.rowboat-shell {
+  background: var(--background);
+}
+
+.rowboat-sidebar [data-sidebar="sidebar"] {
+  background: var(--sidebar);
+  border-right: 1px solid var(--sidebar-border);
+}
+
+.rowboat-sidebar [data-sidebar="header"] {
+  gap: 0.625rem;
+  border-bottom: 1px solid color-mix(in oklab, var(--sidebar-border) 76%, transparent);
+  background: var(--sidebar);
+}
+
+.rowboat-section-switcher {
+  border: 1px solid color-mix(in oklab, var(--sidebar-border) 78%, transparent);
+  background: color-mix(in oklab, var(--sidebar-accent) 58%, var(--sidebar) 42%);
+  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--foreground) 9%, transparent);
+}
+
+.rowboat-section-switcher button {
+  letter-spacing: 0;
+}
+
+.rowboat-section-switcher button[class*="shadow-sm"] {
+  background: var(--rowboat-raised);
+  box-shadow: var(--rowboat-shadow-soft);
+}
+
+.rowboat-quick-actions button {
+  min-height: 2rem;
+}
+
+.rowboat-quick-actions button svg {
+  color: color-mix(in oklab, var(--rowboat-command) 72%, var(--sidebar-foreground) 28%);
+}
+
+.rowboat-tabbar {
+  background: color-mix(in oklab, var(--background) 78%, var(--muted) 22%);
+}
+
+.rowboat-titlebar {
+  background: var(--background);
+  border-bottom-color: color-mix(in oklab, var(--border) 82%, transparent);
+}
+
+.rowboat-tab {
+  min-height: 2.5rem;
+  border-bottom: 1px solid transparent;
+}
+
+.rowboat-tab[class*="bg-background"] {
+  border-bottom-color: var(--primary);
+  background: var(--rowboat-raised);
+  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--foreground) 8%, transparent);
+}
+
+.rowboat-composer-dock {
+  box-shadow: 0 -20px 44px color-mix(in oklab, var(--background) 78%, transparent);
+}
+
+.rowboat-chat-input {
+  border-color: color-mix(in oklab, var(--border) 74%, var(--primary) 26%);
+  background: var(--rowboat-raised);
+  box-shadow: var(--rowboat-shadow);
+}
+
+.rowboat-chat-input:focus-within {
+  border-color: color-mix(in oklab, var(--ring) 76%, var(--border) 24%);
+  box-shadow:
+    0 0 0 1px color-mix(in oklab, var(--ring) 38%, transparent),
+    var(--rowboat-shadow);
+}
+
+[data-slot="message-content"] {
+  line-height: 1.62;
+}
+
+.is-user [data-slot="message-content"] {
+  background: color-mix(in oklab, var(--secondary) 88%, var(--rowboat-wash) 12%);
+  border: 1px solid color-mix(in oklab, var(--border) 68%, transparent);
+}
+
+.is-assistant [data-slot="message-content"] {
+  color: color-mix(in oklab, var(--foreground) 94%, var(--muted-foreground) 6%);
+}
+
 /* Markdown content base styles for Streamdown/MessageResponse */
 @layer components {
   /* Target elements inside MessageResponse wrapper */

apps/x/apps/renderer/src/App.tsx

@@ -663,7 +663,7 @@ function ContentHeader({
   const isCollapsed = state === "collapsed"
   return (
     <header
-      className="titlebar-drag-region flex h-10 shrink-0 items-stretch border-b border-border bg-sidebar overflow-hidden"
+      className="rowboat-titlebar titlebar-drag-region flex h-10 shrink-0 items-stretch border-b border-border bg-sidebar overflow-hidden"
       style={{
         paddingLeft: isCollapsed ? (collapsedLeftPaddingPx ?? 196) : 12,
         paddingRight: 12,
@@ -4686,7 +4686,7 @@ function App() {
           void navigateToView({ type: 'file', path: BASES_DEFAULT_TAB_PATH })
         }
       }}>
-        <div className="flex h-svh w-full overflow-hidden">
+        <div className="rowboat-shell flex h-svh w-full overflow-hidden">
           {/* Content sidebar with SidebarProvider for collapse functionality */}
           <SidebarProvider
             style={{
@@ -5263,7 +5263,7 @@ function App() {
                   })}
                 </div>
 
-                <div className="sticky bottom-0 z-10 bg-background pb-12 pt-0 shadow-lg">
+                <div className="rowboat-composer-dock sticky bottom-0 z-10 bg-background pb-12 pt-0 shadow-lg">
                   <div className="pointer-events-none absolute inset-x-0 -top-6 h-6 bg-linear-to-t from-background to-transparent" />
                   <div className="mx-auto w-full max-w-4xl px-4">
                     {!hasConversation && (

apps/x/apps/renderer/src/components/chat-input-with-mentions.tsx

@@ -434,7 +434,7 @@ function ChatInputInner({
   }, [addFiles, isActive])
 
   return (
-    <div className="rounded-lg border border-border bg-background shadow-none">
+    <div className="rowboat-chat-input rounded-lg border border-border bg-background shadow-none">
       {attachments.length > 0 && (
         <div className="flex flex-wrap gap-2 px-4 pb-1 pt-3">
           {attachments.map((attachment) => {

apps/x/apps/renderer/src/components/sidebar-content.tsx

@@ -566,13 +566,13 @@ export function SidebarContentPanel({
   }, [])
 
   return (
-    <Sidebar className="border-r-0" {...props}>
+    <Sidebar className="rowboat-sidebar border-r-0" {...props}>
       <SidebarHeader className="titlebar-drag-region">
         {/* Top spacer to clear the traffic lights + fixed toggle row */}
         <div className="h-8" />
         {/* Tab switcher - centered below the traffic lights row */}
         <div className="flex items-center px-2 py-1.5">
-          <div className="titlebar-no-drag flex w-full rounded-lg bg-sidebar-accent/50 p-0.5">
+          <div className="rowboat-section-switcher titlebar-no-drag flex w-full rounded-lg bg-sidebar-accent/50 p-0.5">
             {sectionTabs.map((tab) => (
               <button
                 key={tab.id}
@@ -590,7 +590,7 @@ export function SidebarContentPanel({
           </div>
         </div>
         {/* Quick action buttons */}
-        <div className="titlebar-no-drag flex flex-col gap-0.5 px-2 pb-1">
+        <div className="rowboat-quick-actions titlebar-no-drag flex flex-col gap-0.5 px-2 pb-1">
           {onNewChat && (
             <button
               type="button"

apps/x/apps/renderer/src/components/tab-bar.tsx

@@ -37,7 +37,7 @@ export function TabBar<T>({
   return (
     <div
       className={cn(
-        'flex flex-1 self-stretch min-w-0',
+        'rowboat-tabbar flex flex-1 self-stretch min-w-0',
         layout === 'scroll'
           ? 'overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
           : 'overflow-hidden'
@@ -57,7 +57,7 @@ export function TabBar<T>({
               type="button"
               onClick={() => onSwitchTab(tabId)}
               className={cn(
-                'titlebar-no-drag group/tab relative flex items-center gap-1.5 px-3 self-stretch text-xs transition-colors',
+                'rowboat-tab titlebar-no-drag group/tab relative flex items-center gap-1.5 px-3 self-stretch text-xs transition-colors',
                 layout === 'scroll' ? 'min-w-[140px] max-w-[240px]' : 'min-w-0 max-w-[220px]',
                 isActive
                   ? 'bg-background text-foreground'