Soft card layout: panes float on the page gradient, zero ruled lines

bolt-inspired separation without imitation: the app root is
transparent so the body gradient is the page background; sidebar,
chat, editor, and preview are rounded-xl cards on a raised surface
tone with an 8px gutter as the only divider. The top bar floats with
no bottom rule, the composer loses its top rule (the inset input
carries the edge), hovers step up one tone, message bubbles and
welcome cards inset one tone down, and the chat watermark is gone.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: jherforth

packages/web-ui/src/App.tsx

@@ -516,7 +516,9 @@ export default function App() {
   ];
 
   return (
-    <div className="h-screen w-screen flex flex-col bg-monastery-dark-bg overflow-hidden">
+    // Transparent root: the body gradient is the page background, and panes float on it
+    // as rounded cards — the gutter between them is the divider (no ruled lines).
+    <div className="h-screen w-screen flex flex-col overflow-hidden">
       <CommandPalette
         commands={paletteCommands}
         files={flattenFiles(projectFiles)}
@@ -566,11 +568,11 @@ export default function App() {
         templateCtx={{ pocketbaseConfigured: !!pocketbaseConn }}
       />
 
-      <div className="flex-1 flex overflow-hidden">
+      <div className="flex-1 flex overflow-hidden gap-2 px-2 pb-2">
         {/* Left Sidebar — slides in/out with CSS transition */}
         <div
-          className={`transition-all duration-300 ease-in-out overflow-hidden ${
-            sidebarCollapsed ? 'w-0 border-r-0' : 'w-64 border-r border-monastery-dark-border'
+          className={`transition-all duration-300 ease-in-out overflow-hidden rounded-xl ${
+            sidebarCollapsed ? 'w-0' : 'w-64'
           }`}
         >
           <div className="w-64 h-full flex-shrink-0">
@@ -596,7 +598,7 @@ export default function App() {
             minSize={20}
             onResize={(size) => updatePaneLayout({ ...paneLayout, chat: size })}
           >
-           <div className="h-full flex flex-col">
+           <div className="h-full flex flex-col rounded-xl overflow-hidden">
             <div className="flex-1 min-h-0">
             <ChatPane
               activeTaskLabel={workflow.activeTask ? `${workflow.activeTask.title} · ${STAGE_LABEL[workflow.activeTask.stage]}` : null}
@@ -649,7 +651,7 @@ export default function App() {
           {/* Code Editor — has its own toggle, independent of the file-tree sidebar */}
           {!editorCollapsed && (
             <>
-              <PanelResizeHandle className="w-1 bg-transparent hover:bg-monastery-lantern/50 transition-colors cursor-col-resize" />
+              <PanelResizeHandle className="w-2 bg-transparent hover:bg-monastery-lantern/50 rounded transition-colors cursor-col-resize" />
               <Panel
                 defaultSize={previewCollapsed ? 100 - paneLayout.chat : paneLayout.editor}
                 minSize={20}
@@ -691,13 +693,13 @@ export default function App() {
           {/* Preview Pane — slides in/out */}
           {!previewCollapsed && (
             <>
-              <PanelResizeHandle className="w-1 bg-transparent hover:bg-monastery-lantern/50 transition-colors cursor-col-resize" />
+              <PanelResizeHandle className="w-2 bg-transparent hover:bg-monastery-lantern/50 rounded transition-colors cursor-col-resize" />
               <Panel
                 defaultSize={paneLayout.preview}
                 minSize={15}
                 onResize={(size) => updatePaneLayout({ ...paneLayout, preview: size })}
               >
-                <div className="h-full animate-slideInRight">
+                <div className="h-full animate-slideInRight rounded-xl overflow-hidden bg-monastery-dark-surface">
                   <PreviewPane projectId={currentProject?.id} />
                 </div>
               </Panel>

packages/web-ui/src/components/ChatPane.tsx

@@ -322,21 +322,14 @@ export function ChatPane({
   };
 
   return (
-    <div className="flex flex-col h-full bg-monastery-dark-bg relative overflow-hidden">
-      {/* Monastery SVG background */}
-      <img
-        src={theme === 'monastery-dark' ? '/images/monasteryDark.svg' : '/images/monasteryLight.svg'}
-        alt=""
-        className="absolute inset-0 w-full h-full object-cover opacity-[0.07] pointer-events-none select-none"
-      />
-
+    <div className="flex flex-col h-full bg-monastery-dark-surface relative overflow-hidden">
       {/* Chat header — session switcher (sessions belong to the chat, not the file tree) */}
       {onSelectSession && (
         <div className="relative z-20 flex items-center gap-1 px-3 py-1.5 shrink-0">
           <div className="relative min-w-0">
             <button
               onClick={() => setSessionMenuOpen(o => !o)}
-              className="flex items-center gap-1.5 px-2 py-1 max-w-full hover:bg-monastery-dark-surface rounded-md transition-colors text-xs text-monastery-text-secondary"
+              className="flex items-center gap-1.5 px-2 py-1 max-w-full hover:bg-monastery-dark-tertiary rounded-md transition-colors text-xs text-monastery-text-secondary"
               title="Switch chat session"
             >
               <MessageSquare size={13} className="shrink-0" />
@@ -396,7 +389,7 @@ export function ChatPane({
           {onCreateSession && (
             <button
               onClick={onCreateSession}
-              className="p-1 hover:bg-monastery-dark-surface rounded-md transition-colors text-monastery-text-secondary hover:text-monastery-text-primary shrink-0"
+              className="p-1 hover:bg-monastery-dark-tertiary rounded-md transition-colors text-monastery-text-secondary hover:text-monastery-text-primary shrink-0"
               title="New session"
             >
               <Plus size={14} />
@@ -410,7 +403,7 @@ export function ChatPane({
               className={`ml-auto flex items-center gap-1.5 px-2 py-1 rounded-md text-xs transition-colors shrink-0 max-w-[45%] ${
                 activeTaskLabel
                   ? 'bg-monastery-lantern/15 text-monastery-lantern hover:bg-monastery-lantern/25'
-                  : 'text-monastery-text-secondary hover:bg-monastery-dark-surface hover:text-monastery-text-primary'
+                  : 'text-monastery-text-secondary hover:bg-monastery-dark-tertiary hover:text-monastery-text-primary'
               }`}
               title={activeTaskLabel ? 'Open the active task' : 'Structured tasks: Plan → Implement → Verify → Review'}
             >
@@ -446,28 +439,28 @@ export function ChatPane({
               <div className="grid grid-cols-2 gap-2 text-left max-w-sm mx-auto">
                 <button 
                   onClick={() => onSendMessage('Create a Next.js app with authentication')}
-                  className="p-3 bg-monastery-dark-surface rounded-xl text-xs text-monastery-text-secondary hover:bg-monastery-dark-tertiary hover:text-monastery-text-primary transition-all border border-monastery-dark-border hover:border-monastery-pine text-left"
+                  className="p-3 bg-monastery-dark-bg rounded-xl text-xs text-monastery-text-secondary hover:bg-monastery-dark-tertiary hover:text-monastery-text-primary transition-all border border-monastery-dark-border hover:border-monastery-pine text-left"
                 >
                   <div className="font-medium text-monastery-text-primary mb-0.5">Web App</div>
                   Create a Next.js app with authentication
                 </button>
                 <button 
                   onClick={() => onSendMessage('Explain how this project structure works')}
-                  className="p-3 bg-monastery-dark-surface rounded-xl text-xs text-monastery-text-secondary hover:bg-monastery-dark-tertiary hover:text-monastery-text-primary transition-all border border-monastery-dark-border hover:border-monastery-pine text-left"
+                  className="p-3 bg-monastery-dark-bg rounded-xl text-xs text-monastery-text-secondary hover:bg-monastery-dark-tertiary hover:text-monastery-text-primary transition-all border border-monastery-dark-border hover:border-monastery-pine text-left"
                 >
                   <div className="font-medium text-monastery-text-primary mb-0.5">Understand</div>
                   Explain this codebase structure
                 </button>
                 <button 
                   onClick={() => onSendMessage('Add unit tests to the existing module')}
-                  className="p-3 bg-monastery-dark-surface rounded-xl text-xs text-monastery-text-secondary hover:bg-monastery-dark-tertiary hover:text-monastery-text-primary transition-all border border-monastery-dark-border hover:border-monastery-pine text-left"
+                  className="p-3 bg-monastery-dark-bg rounded-xl text-xs text-monastery-text-secondary hover:bg-monastery-dark-tertiary hover:text-monastery-text-primary transition-all border border-monastery-dark-border hover:border-monastery-pine text-left"
                 >
                   <div className="font-medium text-monastery-text-primary mb-0.5">Testing</div>
                   Add tests to the existing module
                 </button>
                 <button 
                   onClick={() => onSendMessage('Deploy this project to my homelab server')}
-                  className="p-3 bg-monastery-dark-surface rounded-xl text-xs text-monastery-text-secondary hover:bg-monastery-dark-tertiary hover:text-monastery-text-primary transition-all border border-monastery-dark-border hover:border-monastery-pine text-left"
+                  className="p-3 bg-monastery-dark-bg rounded-xl text-xs text-monastery-text-secondary hover:bg-monastery-dark-tertiary hover:text-monastery-text-primary transition-all border border-monastery-dark-border hover:border-monastery-pine text-left"
                 >
                   <div className="font-medium text-monastery-text-primary mb-0.5">Deploy</div>
                   Deploy this to my homelab
@@ -519,8 +512,8 @@ export function ChatPane({
                   message.role === 'user'
                     ? 'bg-monastery-pine text-white'
                     : message.role === 'system'
-                    ? 'bg-monastery-dark-tertiary border border-monastery-dark-border text-center'
-                    : 'bg-monastery-dark-surface border border-monastery-dark-border'
+                    ? 'bg-monastery-dark-tertiary text-center'
+                    : 'bg-monastery-dark-bg'
                 }`}
               >
                 {/* Agent role chips on a user message (which role(s) it was sent under) */}
@@ -665,8 +658,8 @@ export function ChatPane({
         <div ref={messagesEndRef} />
       </div>
 
-      {/* Input */}
-      <form onSubmit={handleSubmit} className="border-t border-monastery-dark-border p-4">
+      {/* Input — no rule above it; the inset field carries its own edge */}
+      <form onSubmit={handleSubmit} className="p-4 pt-2">
         {/* Composer toolbar: a "+ Context" popover holds the registry-driven options (skills,
             behaviors) so new ones never widen this row; active ones surface as removable chips.
             The Chat/Agent mode selector sits at the right, with roles behind it in a popover. */}
@@ -857,7 +850,7 @@ export function ChatPane({
         )}
 
         <div className="flex items-end gap-2">
-          <label className="p-2 hover:bg-monastery-dark-surface rounded-lg transition-colors cursor-pointer">
+          <label className="p-2 hover:bg-monastery-dark-tertiary rounded-lg transition-colors cursor-pointer">
             <Paperclip size={20} className="text-monastery-text-secondary" />
             <input
               type="file"
@@ -882,7 +875,7 @@ export function ChatPane({
             disabled={!activeEndpoint && messages.length === 0}
             rows={1}
             style={{ maxHeight: MAX_INPUT_HEIGHT }}
-            className="flex-1 bg-monastery-dark-surface border border-monastery-dark-border rounded-xl px-4 py-3 text-sm resize-y overflow-y-auto focus:outline-none focus:border-monastery-pine transition-colors"
+            className="flex-1 bg-monastery-dark-bg border border-monastery-dark-border rounded-xl px-4 py-3 text-sm resize-y overflow-y-auto focus:outline-none focus:border-monastery-pine transition-colors"
           />
 
           {isGenerating ? (

packages/web-ui/src/components/EditorPane.tsx

@@ -34,7 +34,7 @@ export function EditorPane({
   onAddTests,
 }: EditorPaneProps) {
   return (
-    <div className="h-full bg-monastery-dark-surface flex flex-col animate-slideInRight">
+    <div className="h-full bg-monastery-dark-surface flex flex-col animate-slideInRight rounded-xl overflow-hidden">
       {/* Tab Bar — tabs separate themselves by background, not ruled lines */}
       {tabs.length > 0 && (
         <div className="flex items-center bg-monastery-dark-bg overflow-x-auto shrink-0">

packages/web-ui/src/components/Sidebar.tsx

@@ -85,7 +85,7 @@ function FileTreeItem({ node, depth, onSelectFile, onDeleteFile, onCreateFile, o
         onDragOver={isDirectory ? handleDragOver : undefined}
         onDragLeave={isDirectory ? handleDragLeave : undefined}
         onDrop={isDirectory ? handleDrop : undefined}
-        className={`w-full flex items-center gap-1.5 px-2 py-1 hover:bg-monastery-dark-surface rounded-md transition-colors text-sm ${
+        className={`w-full flex items-center gap-1.5 px-2 py-1 hover:bg-monastery-dark-tertiary rounded-md transition-colors text-sm ${
           isDragOver ? 'bg-monastery-pine/20 ring-1 ring-monastery-pine' : ''
         }`}
         style={{ paddingLeft: `${depth * 12 + 8}px` }}
@@ -225,9 +225,8 @@ export function Sidebar({
   }, [showCreateMenu]);
 
   return (
-    // No border-r on the aside — the sidebar wrapper in App.tsx already draws the pane
-    // seam, and the two together rendered a doubled line.
-    <aside className="w-64 bg-monastery-dark-bg flex flex-col shrink-0">
+    // A rounded card on the page gradient (App wraps it) — surface tone, no borders.
+    <aside className="w-64 bg-monastery-dark-surface flex flex-col shrink-0 h-full">
       {/* The sidebar is the file tree — sessions live in the chat header, agent roles in the
           composer, and connections in Settings. */}
       <div className="flex-1 overflow-y-auto py-2">
@@ -243,7 +242,7 @@ export function Sidebar({
               {onRefreshFiles && (
                 <button
                   onClick={onRefreshFiles}
-                  className="p-1 hover:bg-monastery-dark-surface rounded transition-colors text-monastery-text-secondary hover:text-monastery-text-primary"
+                  className="p-1 hover:bg-monastery-dark-tertiary rounded transition-colors text-monastery-text-secondary hover:text-monastery-text-primary"
                   title="Refresh files from disk (e.g. changes written by Hermes)"
                 >
                   <RefreshCw size={14} />
@@ -253,7 +252,7 @@ export function Sidebar({
               {/* Upload button */}
               <button
                 onClick={() => fileInputRef.current?.click()}
-                className="p-1 hover:bg-monastery-dark-surface rounded transition-colors text-monastery-text-secondary hover:text-monastery-text-primary"
+                className="p-1 hover:bg-monastery-dark-tertiary rounded transition-colors text-monastery-text-secondary hover:text-monastery-text-primary"
                 title="Upload file to project"
               >
                 <Upload size={14} />
@@ -263,7 +262,7 @@ export function Sidebar({
               <div className="relative" ref={createMenuRef}>
                 <button
                   onClick={(e) => { e.stopPropagation(); setShowCreateMenu(!showCreateMenu); }}
-                  className="p-1 hover:bg-monastery-dark-surface rounded transition-colors text-monastery-text-secondary hover:text-monastery-text-primary"
+                  className="p-1 hover:bg-monastery-dark-tertiary rounded transition-colors text-monastery-text-secondary hover:text-monastery-text-primary"
                   title="Create file or directory"
                 >
                   <Plus size={14} />

packages/web-ui/src/components/TopBar.tsx

@@ -144,7 +144,8 @@ export function TopBar({ availableProjects = [], endpoints = [], onRefreshProjec
 
   return (
     <>
-      <header className="h-14 bg-monastery-dark-bg border-b border-monastery-dark-border flex items-center justify-between px-4 shrink-0">
+      {/* Floats on the page gradient — the gutter below it is the separation */}
+      <header className="h-14 flex items-center justify-between px-4 shrink-0">
         {/* Left: Logo + Project */}
         <div className="flex items-center gap-3">
           <button