From fad9e50e8923b4e6d39838d616d1e34601559106 Mon Sep 17 00:00:00 2001
From: BOTSU <botsu@botsu.net>
Date: Tue, 4 Aug 2026 06:13:27 +0200
Subject: [PATCH] feat: refine BOTSU navigation and workspace chrome

Restore the BOTSU left page panel, add the global BOTSU logo and panel icons, compact presence avatars, and make the conversation workspace bar button-only and visually discreet.
---
 apps/client/src/app/pages/Router.tsx          |  17 +-
 .../src/botsu/presence/BotsuPresence.tsx      |  10 +-
 apps/client/src/botsu/shell/BotsuFrame.tsx    | 177 +++-------
 apps/client/src/botsu/shell/BotsuLogo.tsx     |  32 ++
 apps/client/src/botsu/shell/BotsuNav.tsx      | 180 ++++++++++
 apps/client/src/botsu/shell/BotsuServices.tsx |   4 +-
 apps/client/src/botsu/shell/BotsuTab.tsx      |  10 +-
 apps/client/src/botsu/shell/index.ts          |   1 +
 apps/client/src/botsu/shell/layout.test.ts    | 312 ++++++++++++++++--
 .../botsu/workspace/BotsuWorkspaceBar.css.ts  |  60 +++-
 .../src/botsu/workspace/BotsuWorkspaceBar.tsx |  60 ++--
 .../client/src/botsu/workspace/editor.test.ts |  25 ++
 12 files changed, 680 insertions(+), 208 deletions(-)
 create mode 100644 apps/client/src/botsu/shell/BotsuLogo.tsx
 create mode 100644 apps/client/src/botsu/shell/BotsuNav.tsx

diff --git a/apps/client/src/app/pages/Router.tsx b/apps/client/src/app/pages/Router.tsx
index 869c557..4efdb58 100644
--- a/apps/client/src/app/pages/Router.tsx
+++ b/apps/client/src/app/pages/Router.tsx
@@ -76,7 +76,7 @@ import { SearchModalRenderer } from '../features/search';
 import { getFallbackSession } from '../state/sessions';
 import { CallStatusRenderer } from './CallStatusRenderer';
 import { CallEmbedProvider } from '../components/CallEmbedProvider';
-import { BotsuEmbed, BotsuFrame, BotsuLauncher, BotsuServices } from '../../botsu/shell';
+import { BotsuEmbed, BotsuFrame, BotsuLauncher, BotsuNav, BotsuServices } from '../../botsu/shell';
 import { BotsuDocumentEditor, BotsuDocuments } from '../../botsu/documents';
 import { BotsuCommunityCanvasHome, BotsuStartPage } from '../../botsu/start';
 
@@ -163,7 +163,20 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
           </AuthRouteThemeManager>
         }
       >
-        <Route path={BOTSU_PATH} element={<BotsuFrame />}>
+        <Route
+          path={BOTSU_PATH}
+          element={
+            <PageRoot
+              nav={
+                <MobileFriendlyPageNav path={BOTSU_PATH}>
+                  <BotsuNav />
+                </MobileFriendlyPageNav>
+              }
+            >
+              <BotsuFrame />
+            </PageRoot>
+          }
+        >
           <Route index element={<BotsuStartPage />} />
           <Route path={_BOTSU_APPS_PATH} element={<BotsuLauncher />} />
           <Route path={_BOTSU_DOCUMENTS_PATH} element={<BotsuDocuments />} />
diff --git a/apps/client/src/botsu/presence/BotsuPresence.tsx b/apps/client/src/botsu/presence/BotsuPresence.tsx
index ab08f7d..8e259f3 100644
--- a/apps/client/src/botsu/presence/BotsuPresence.tsx
+++ b/apps/client/src/botsu/presence/BotsuPresence.tsx
@@ -229,11 +229,6 @@ export function BotsuPresence() {
   return (
     <>
       <aside className="botsu-presence" aria-label="Présence BOTSU">
-        <div className="botsu-presence-heading" aria-live="polite">
-          <span className={`botsu-presence-dot is-${state.status}`} aria-hidden="true" />
-          <strong>{participants.length} en ligne</strong>
-          <span>{statusLabel}</span>
-        </div>
         {participants.length > 0 && (
           <ul aria-label="Membres présents">
             {participants.map((participant) => {
@@ -284,6 +279,11 @@ export function BotsuPresence() {
             })}
           </ul>
         )}
+        <div className="botsu-presence-heading" aria-live="polite">
+          <strong>{participants.length} en ligne</strong>
+          <span>{statusLabel}</span>
+          <span className={`botsu-presence-dot is-${state.status}`} aria-hidden="true" />
+        </div>
       </aside>
       <div className="botsu-remote-cursors" aria-hidden="true">
         {visibleRemoteCursors.map((cursor) => (
diff --git a/apps/client/src/botsu/shell/BotsuFrame.tsx b/apps/client/src/botsu/shell/BotsuFrame.tsx
index 686ef2d..f069e0d 100644
--- a/apps/client/src/botsu/shell/BotsuFrame.tsx
+++ b/apps/client/src/botsu/shell/BotsuFrame.tsx
@@ -1,157 +1,64 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Link, Outlet } from 'react-router-dom';
-import { applyTheme, defaultTheme, resolveTheme, type ThemeSettings } from '@botsu/ui';
-import { BotsuIdentity } from '../profile/BotsuIdentity';
+import React, { CSSProperties, useMemo, useRef } from 'react';
+import { color, config, vars } from 'folds';
+import { Link, Outlet, useLocation } from 'react-router-dom';
 import { BotsuPresence } from '../presence/BotsuPresence';
 import { PixelCanvasProvider } from '../start/PixelCanvasContext';
 import '@botsu/ui/styles.css';
 import './shell.css';
 
-const THEME_STORAGE_KEY = 'botsu.theme.v1';
+type BotsuThemeStyle = CSSProperties & Record<`--botsu-${string}`, string>;
 
-const loadStoredTheme = (): ThemeSettings => {
-  try {
-    const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
-    return stored ? resolveTheme(JSON.parse(stored) as Partial<ThemeSettings>) : resolveTheme();
-  } catch {
-    return resolveTheme();
-  }
+const BOTSU_ROUTE_LABELS: Record<string, string> = {
+  botsu: 'botsu',
+  apps: 'apps',
+  documents: 'documents',
+  services: 'services',
+  home: 'home',
 };
 
-type ThemeControlsProps = {
-  theme: ThemeSettings;
-  setTheme: React.Dispatch<React.SetStateAction<ThemeSettings>>;
+const buildBreadcrumbs = (pathname: string): { label: string; to: string }[] => {
+  const parts = pathname.split('/').filter(Boolean);
+  if (parts.length === 0) return [{ label: '/', to: '/' }];
+  return parts.map((part, index) => ({
+    label: BOTSU_ROUTE_LABELS[part] ?? part,
+    to: `/${parts.slice(0, index + 1).join('/')}/`,
+  }));
 };
 
-function ThemeControls({ theme, setTheme }: ThemeControlsProps) {
-  const update = (change: Partial<ThemeSettings>) =>
-    setTheme((current) => resolveTheme({ ...current, ...change }));
-
-  return (
-    <details className="botsu-theme-panel botsu-surface">
-      <summary>Apparence</summary>
-      <div className="botsu-theme-grid">
-        <label htmlFor="botsu-theme-mode">
-          Mode
-          <select
-            id="botsu-theme-mode"
-            value={theme.mode}
-            onChange={(event) => update({ mode: event.target.value as ThemeSettings['mode'] })}
-          >
-            <option value="dark">Noir</option>
-            <option value="light">Blanc</option>
-          </select>
-        </label>
-        <label htmlFor="botsu-theme-font">
-          Police
-          <select
-            id="botsu-theme-font"
-            value={theme.font}
-            onChange={(event) => update({ font: event.target.value as ThemeSettings['font'] })}
-          >
-            <option value="inter">Inter</option>
-            <option value="system">Système</option>
-            <option value="mono">Monospace</option>
-          </select>
-        </label>
-        <label htmlFor="botsu-theme-accent">
-          Accent
-          <input
-            id="botsu-theme-accent"
-            type="color"
-            value={theme.accent}
-            onChange={(event) => update({ accent: event.target.value })}
-          />
-        </label>
-        <label htmlFor="botsu-theme-border">
-          Bordure <output>{theme.borderWidth}px</output>
-          <input
-            id="botsu-theme-border"
-            type="range"
-            min="0"
-            max="4"
-            step="1"
-            value={theme.borderWidth}
-            onChange={(event) => update({ borderWidth: Number(event.target.value) })}
-          />
-        </label>
-        <label htmlFor="botsu-theme-radius">
-          Angles <output>{theme.radius}px</output>
-          <input
-            id="botsu-theme-radius"
-            type="range"
-            min="0"
-            max="24"
-            step="1"
-            value={theme.radius}
-            onChange={(event) => update({ radius: Number(event.target.value) })}
-          />
-        </label>
-        <label htmlFor="botsu-theme-opacity">
-          Verre <output>{Math.round(theme.glassOpacity * 100)}%</output>
-          <input
-            id="botsu-theme-opacity"
-            type="range"
-            min="0"
-            max="1"
-            step="0.01"
-            value={theme.glassOpacity}
-            onChange={(event) => update({ glassOpacity: Number(event.target.value) })}
-          />
-        </label>
-        <label htmlFor="botsu-theme-blur">
-          Flou <output>{theme.glassBlur}px</output>
-          <input
-            id="botsu-theme-blur"
-            type="range"
-            min="0"
-            max="40"
-            step="1"
-            value={theme.glassBlur}
-            onChange={(event) => update({ glassBlur: Number(event.target.value) })}
-          />
-        </label>
-      </div>
-      <button className="botsu-button" type="button" onClick={() => setTheme({ ...defaultTheme })}>
-        Réinitialiser
-      </button>
-    </details>
-  );
-}
+const botsuCinnyThemeVars = {
+  '--botsu-color-canvas': color.Background.Container,
+  '--botsu-color-surface': color.Surface.Container,
+  '--botsu-color-surface-raised': color.SurfaceVariant.Container,
+  '--botsu-color-text': color.Background.OnContainer,
+  '--botsu-color-text-muted': color.SurfaceVariant.OnContainer,
+  '--botsu-color-border': color.Surface.ContainerLine,
+  '--botsu-color-focus': vars.outline.FocusRing,
+  '--botsu-color-accent': color.Primary.Main,
+  '--botsu-color-on-accent': color.Primary.OnMain,
+  '--botsu-border-width': config.borderWidth.B300,
+  '--botsu-radius': config.radii.R300,
+  '--botsu-font-family': 'var(--font-secondary)',
+} satisfies BotsuThemeStyle;
 
 export function BotsuFrame() {
   const rootRef = useRef<HTMLDivElement>(null);
-  const [theme, setTheme] = useState(loadStoredTheme);
-
-  useEffect(() => {
-    if (rootRef.current) applyTheme(rootRef.current, theme);
-    try {
-      window.localStorage.setItem(THEME_STORAGE_KEY, JSON.stringify(theme));
-    } catch {
-      // The in-memory theme still works when storage is blocked or full.
-    }
-  }, [theme]);
+  const location = useLocation();
+  const breadcrumbs = useMemo(() => buildBreadcrumbs(location.pathname), [location.pathname]);
 
   return (
-    <div ref={rootRef} className="botsu-theme botsu-shell">
+    <div ref={rootRef} className="botsu-theme botsu-shell" style={botsuCinnyThemeVars as CSSProperties}>
       <PixelCanvasProvider>
         <div className="botsu-suite-strip">
-          <strong>ESPACE BOTSU</strong>
-          <div className="botsu-suite-tools">
-            <BotsuIdentity />
-            <ThemeControls theme={theme} setTheme={setTheme} />
-          </div>
+          <nav className="botsu-breadcrumb" aria-label="Chemin BOTSU">
+            {breadcrumbs.map((crumb, index) => (
+              <React.Fragment key={crumb.to}>
+                {index > 0 && <span aria-hidden="true">/</span>}
+                <Link to={crumb.to}>{crumb.label}</Link>
+              </React.Fragment>
+            ))}
+          </nav>
           <BotsuPresence />
         </div>
-        <header className="botsu-shell-header">
-          <nav aria-label="Navigation BOTSU">
-            <Link to="/botsu/">Accueil</Link>
-            <Link to="/botsu/apps/">Applications</Link>
-            <Link to="/home/">Discussions</Link>
-            <Link to="/botsu/documents/">Documents</Link>
-            <Link to="/botsu/services/">Services</Link>
-          </nav>
-        </header>
         <main className="botsu-shell-main">
           <Outlet />
         </main>
diff --git a/apps/client/src/botsu/shell/BotsuLogo.tsx b/apps/client/src/botsu/shell/BotsuLogo.tsx
new file mode 100644
index 0000000..720632e
--- /dev/null
+++ b/apps/client/src/botsu/shell/BotsuLogo.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+const BOTSU_LOGO_PATH =
+  'M 512.005005 31 C 573.302368 233.752808 705.327454 311.553162 908.0802 264.401428 C 766.624756 429.4328 766.624756 594.46405 908.0802 759.495361 C 705.327454 712.343506 573.302368 790.144043 512.005005 992.896851 C 450.707672 790.144043 318.682617 712.343506 115.929855 759.495361 C 257.385284 594.46405 257.385284 429.4328 115.929855 264.401428 C 318.682617 311.553162 450.707672 233.752808 512.005005 31 Z';
+
+type BotsuLogoProps = {
+  active?: boolean;
+  className?: string;
+};
+
+export function BotsuLogo({ active = false, className }: BotsuLogoProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={className}
+      data-active={active}
+      focusable="false"
+      style={{ width: '1.45rem', height: '1.45rem', display: 'block' }}
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d={BOTSU_LOGO_PATH}
+        fill={active ? 'currentColor' : 'none'}
+        fillRule="evenodd"
+        stroke="currentColor"
+        strokeLinejoin="round"
+        strokeWidth={active ? 0 : 58}
+      />
+    </svg>
+  );
+}
diff --git a/apps/client/src/botsu/shell/BotsuNav.tsx b/apps/client/src/botsu/shell/BotsuNav.tsx
new file mode 100644
index 0000000..b288a6b
--- /dev/null
+++ b/apps/client/src/botsu/shell/BotsuNav.tsx
@@ -0,0 +1,180 @@
+import React, { useState } from 'react';
+import { Box, Icon, Icons, Text } from 'folds';
+import { Link, useLocation } from 'react-router-dom';
+import { NavCategory, NavCategoryHeader, NavItem, NavItemContent } from '../../app/components/nav';
+import { RoomNavCategoryButton } from '../../app/features/room-nav';
+import { PageNav, PageNavContent, PageNavHeader } from '../../app/components/page';
+import { getBotsuEmbedPath } from '../../app/pages/pathUtils';
+import {
+  botsuApps,
+  getVisibleApps,
+  type BotsuApp,
+  type BotsuAppId,
+  type BotsuRole,
+} from '../apps/catalog';
+import { buildLaunchPlan } from '../apps/launcher';
+import { botsuServices } from './BotsuServices';
+
+const APP_NAV_IDS = new Set(['discussions', 'documents', 'tables', 'files']);
+const HIDDEN_SERVICE_PANEL_LABELS = new Set(['accueil', 'recherche']);
+
+function getAppNavTarget(app: BotsuApp): { to: string } | { href: string } | undefined {
+  const plan = buildLaunchPlan(app);
+  if (plan.kind === 'navigate') return { to: plan.to };
+  if (plan.kind === 'embed') return { to: getBotsuEmbedPath(app.id) };
+  if (plan.kind === 'external') return { href: plan.href };
+  return undefined;
+}
+
+const getAppNavIcon = (appId: BotsuAppId | 'test') => {
+  if (appId === 'discussions') return Icons.Message;
+  if (appId === 'documents') return Icons.File;
+  if (appId === 'tables') return Icons.Category;
+  if (appId === 'files') return Icons.Attachment;
+  if (appId === 'transfers') return Icons.Download;
+  if (appId === 'services') return Icons.Server;
+  if (appId === 'administration') return Icons.ShieldUser;
+  return Icons.Space;
+};
+
+const getServiceNavIcon = (label: string) => {
+  const serviceLabel = label.toLocaleLowerCase('fr-FR');
+  if (serviceLabel === 'paste') return Icons.Pencil;
+  if (serviceLabel === 'transferts') return Icons.Download;
+  if (serviceLabel === 'ripper') return Icons.Play;
+  if (serviceLabel === 'traduction') return Icons.Globe;
+  return Icons.External;
+};
+
+function BotsuNavLabel({ children, icon }: { children: React.ReactNode; icon: string }) {
+  return (
+    <Box as="span" alignItems="Center" gap="200" style={{ minWidth: 0 }}>
+      <Icon size="100" src={icon} aria-hidden="true" />
+      <Text as="span" size="T300" truncate>
+        {children}
+      </Text>
+    </Box>
+  );
+}
+
+function BotsuNavLink({
+  active,
+  children,
+  href,
+  to,
+}: {
+  active?: boolean;
+  children: React.ReactNode;
+  href?: string;
+  to?: string;
+}) {
+  if (to) {
+    return (
+      <NavItem as={Link} to={to} variant="Background" radii="400" aria-selected={active}>
+        <NavItemContent>{children}</NavItemContent>
+      </NavItem>
+    );
+  }
+  if (href) {
+    return (
+      <NavItem
+        as="a"
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        variant="Background"
+        radii="400"
+      >
+        <NavItemContent>{children}</NavItemContent>
+      </NavItem>
+    );
+  }
+  return (
+    <NavItem variant="Background" radii="400" aria-disabled>
+      <NavItemContent>{children}</NavItemContent>
+    </NavItem>
+  );
+}
+
+export function BotsuNav() {
+  const location = useLocation();
+  const [applicationsClosed, setApplicationsClosed] = useState(false);
+  const [servicesClosed, setServicesClosed] = useState(false);
+  const apps = getVisibleApps(new Set<BotsuRole>(['member']), botsuApps).filter((app) =>
+    APP_NAV_IDS.has(app.id)
+  );
+  const panelServices = botsuServices.filter(
+    (service) => !HIDDEN_SERVICE_PANEL_LABELS.has(service.label.toLocaleLowerCase('fr-FR'))
+  );
+
+  return (
+    <PageNav>
+      <PageNavHeader>
+        <Box alignItems="Center" grow="Yes" gap="300">
+          <Box grow="Yes">
+            <Text size="H4" truncate>
+              Botsu
+            </Text>
+          </Box>
+        </Box>
+      </PageNavHeader>
+      <PageNavContent>
+        <Box direction="Column" gap="500">
+          <NavCategory>
+            <NavCategoryHeader>
+              <RoomNavCategoryButton
+                closed={applicationsClosed}
+                onClick={() => setApplicationsClosed((closed) => !closed)}
+              >
+                applications
+              </RoomNavCategoryButton>
+            </NavCategoryHeader>
+            {!applicationsClosed && (
+              <Box direction="Column" gap="100">
+                {apps.map((app) => {
+                  const target = getAppNavTarget(app);
+                  const to = target && 'to' in target ? target.to : undefined;
+                  const href = target && 'href' in target ? target.href : undefined;
+                  return (
+                    <BotsuNavLink
+                      active={to ? location.pathname.startsWith(to) : false}
+                      href={href}
+                      key={app.id}
+                      to={to}
+                    >
+                      <BotsuNavLabel icon={getAppNavIcon(app.id)}>
+                        {app.label.toLocaleLowerCase('fr-FR')}
+                      </BotsuNavLabel>
+                    </BotsuNavLink>
+                  );
+                })}
+              </Box>
+            )}
+          </NavCategory>
+
+          <NavCategory>
+            <NavCategoryHeader>
+              <RoomNavCategoryButton
+                closed={servicesClosed}
+                onClick={() => setServicesClosed((closed) => !closed)}
+              >
+                services
+              </RoomNavCategoryButton>
+            </NavCategoryHeader>
+            {!servicesClosed && (
+              <Box direction="Column" gap="100">
+                {panelServices.map((service) => (
+                  <BotsuNavLink href={service.url} key={service.url}>
+                    <BotsuNavLabel icon={getServiceNavIcon(service.label)}>
+                      {service.label.toLocaleLowerCase('fr-FR')}
+                    </BotsuNavLabel>
+                  </BotsuNavLink>
+                ))}
+              </Box>
+            )}
+          </NavCategory>
+        </Box>
+      </PageNavContent>
+    </PageNav>
+  );
+}
diff --git a/apps/client/src/botsu/shell/BotsuServices.tsx b/apps/client/src/botsu/shell/BotsuServices.tsx
index ed2214c..7295e61 100644
--- a/apps/client/src/botsu/shell/BotsuServices.tsx
+++ b/apps/client/src/botsu/shell/BotsuServices.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const services = [
+export const botsuServices = [
   { label: 'Accueil', description: 'Point d’entrée BOTSU.', url: 'https://home.botsu.net/' },
   {
     label: 'Recherche',
@@ -25,7 +25,7 @@ export function BotsuServices() {
         <h2 id="botsu-services-title">Services</h2>
       </div>
       <div className="botsu-app-grid">
-        {services.map((service) => (
+        {botsuServices.map((service) => (
           <article className="botsu-app-card botsu-surface" key={service.url}>
             <div>
               <h3>{service.label}</h3>
diff --git a/apps/client/src/botsu/shell/BotsuTab.tsx b/apps/client/src/botsu/shell/BotsuTab.tsx
index f00e69b..79bb8fc 100644
--- a/apps/client/src/botsu/shell/BotsuTab.tsx
+++ b/apps/client/src/botsu/shell/BotsuTab.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { Text } from 'folds';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { SidebarAvatar, SidebarItem, SidebarItemTooltip } from '../../app/components/sidebar';
 import { getBotsuPath } from '../../app/pages/pathUtils';
+import { BotsuLogo } from './BotsuLogo';
 
 export function BotsuTab() {
   const location = useLocation();
@@ -11,18 +11,16 @@ export function BotsuTab() {
 
   return (
     <SidebarItem active={active}>
-      <SidebarItemTooltip tooltip="BOTSU — Applications">
+      <SidebarItemTooltip tooltip="Botsu">
         {(triggerRef) => (
           <SidebarAvatar
             as="button"
             ref={triggerRef}
             outlined
-            aria-label="Ouvrir les applications BOTSU"
+            aria-label="Ouvrir Botsu"
             onClick={() => navigate(getBotsuPath())}
           >
-            <Text as="span" size="B300">
-              B
-            </Text>
+            <BotsuLogo active={active} />
           </SidebarAvatar>
         )}
       </SidebarItemTooltip>
diff --git a/apps/client/src/botsu/shell/index.ts b/apps/client/src/botsu/shell/index.ts
index 6bf7571..4e16594 100644
--- a/apps/client/src/botsu/shell/index.ts
+++ b/apps/client/src/botsu/shell/index.ts
@@ -1,5 +1,6 @@
 export * from './BotsuEmbed';
 export * from './BotsuFrame';
 export * from './BotsuLauncher';
+export * from './BotsuNav';
 export * from './BotsuServices';
 export * from './BotsuTab';
diff --git a/apps/client/src/botsu/shell/layout.test.ts b/apps/client/src/botsu/shell/layout.test.ts
index 947afb6..552436e 100644
--- a/apps/client/src/botsu/shell/layout.test.ts
+++ b/apps/client/src/botsu/shell/layout.test.ts
@@ -4,7 +4,20 @@ import test from 'node:test';
 
 const shellCssUrl = new URL('./shell.css', import.meta.url);
 const shellFrameUrl = new URL('./BotsuFrame.tsx', import.meta.url);
+const shellNavUrl = new URL('./BotsuNav.tsx', import.meta.url);
+const shellTabUrl = new URL('./BotsuTab.tsx', import.meta.url);
+const shellLogoUrl = new URL('./BotsuLogo.tsx', import.meta.url);
+const presenceUrl = new URL('../presence/BotsuPresence.tsx', import.meta.url);
+const routerUrl = new URL('../../app/pages/Router.tsx', import.meta.url);
+const clientNonUiUrl = new URL('../../app/pages/client/ClientNonUIFeatures.tsx', import.meta.url);
+const settingsUrl = new URL('../../app/state/settings.ts', import.meta.url);
+const generalSettingsUrl = new URL('../../app/features/settings/general/General.tsx', import.meta.url);
+const settingsStylesUrl = new URL('../../app/features/settings/styles.css.ts', import.meta.url);
+const useThemeUrl = new URL('../../app/hooks/useTheme.ts', import.meta.url);
+const colorsUrl = new URL('../../colors.css.ts', import.meta.url);
+const indexCssUrl = new URL('../../index.css', import.meta.url);
 const startPageUrl = new URL('../start/BotsuStartPage.tsx', import.meta.url);
+const pixelCanvasUrl = new URL('../start/BotsuPixelCanvas.tsx', import.meta.url);
 const startCssUrl = new URL('../start/start.css', import.meta.url);
 
 const getRuleBody = (css: string, selector: string): string => {
@@ -22,60 +35,311 @@ test('BOTSU shell leaves room for the active call footer', async () => {
   assert.doesNotMatch(shellRule, /height:\s*100dvh;/);
 });
 
-test('BOTSU shell puts the spaced presence strip before application navigation', async () => {
-  const [css, frame] = await Promise.all([
+test('BOTSU shell keeps a minimal presence strip above the application surface', async () => {
+  const [css, frame, presence] = await Promise.all([
     readFile(shellCssUrl, 'utf8'),
     readFile(shellFrameUrl, 'utf8'),
+    readFile(presenceUrl, 'utf8'),
   ]);
   const stripIndex = frame.indexOf('className="botsu-suite-strip"');
   const presenceIndex = frame.indexOf('<BotsuPresence />');
-  const headerIndex = frame.indexOf('<header className="botsu-shell-header">');
+  const mainIndex = frame.indexOf('<main className="botsu-shell-main">');
 
   assert.equal(frame.includes('className="botsu-shell-chrome"'), false);
   assert.ok(stripIndex > -1);
   assert.ok(presenceIndex > stripIndex);
-  assert.ok(headerIndex > presenceIndex);
-  assert.match(frame.slice(stripIndex, presenceIndex), /ESPACE BOTSU/);
+  assert.ok(mainIndex > presenceIndex);
+  assert.match(frame.slice(stripIndex, presenceIndex), /className="botsu-breadcrumb"/);
+  assert.match(frame, /import \{ color, config, vars \} from 'folds';/);
+  assert.match(frame, /const botsuCinnyThemeVars = \{/);
+  assert.match(frame, /'--botsu-color-canvas': color\.Background\.Container/);
+  assert.match(frame, /'--botsu-color-accent': color\.Primary\.Main/);
+  assert.match(frame, /'--botsu-font-family': 'var\(--font-secondary\)'/);
+  assert.match(frame, /style=\{botsuCinnyThemeVars as CSSProperties\}/);
+  assert.match(frame, /<Link to=\{crumb\.to\}>\{crumb\.label\}<\/Link>/);
+  assert.doesNotMatch(frame, /const isBotsuHome|className="botsu-draw-toggle"/);
   assert.equal(frame.match(/<BotsuPresence \/>/g)?.length, 1);
-  const header = frame.slice(headerIndex, frame.indexOf('</header>', headerIndex));
-  assert.doesNotMatch(
-    header,
-    /BotsuPresence|BotsuIdentity|ThemeControls|ESPACE COLLABORATIF|<h1>|<div>/
-  );
-  assert.match(header, /<header[^>]*>\s*<nav[\s\S]*<\/nav>\s*$/);
+  assert.doesNotMatch(frame, /ThemeControls|BotsuIdentity|ESPACE BOTSU|<header className="botsu-shell-header">/);
 
   const stripRule = getRuleBody(css, '.botsu-suite-strip');
   assert.match(stripRule, /position:\s*sticky;/);
   assert.match(stripRule, /top:\s*0;/);
-  const headerRule = getRuleBody(css, '.botsu-shell-header');
-  assert.doesNotMatch(headerRule, /position:\s*sticky;/);
+  assert.match(stripRule, /min-height:\s*2\.2rem;/);
+  assert.match(stripRule, /display:\s*grid;/);
+  assert.match(stripRule, /grid-template-columns:\s*minmax\(0, 1fr\) clamp\(5rem, 12vw, 8rem\);/);
+  const breadcrumbRule = getRuleBody(css, '.botsu-breadcrumb');
+  assert.match(breadcrumbRule, /grid-column:\s*1;/);
 
+  const presenceRule = getRuleBody(css, '.botsu-presence');
+  assert.match(presenceRule, /grid-column:\s*2;/);
+  const presenceHeadingRule = getRuleBody(css, '.botsu-presence-heading');
+  assert.match(presenceHeadingRule, /order:\s*2;/);
+  assert.match(presenceHeadingRule, /flex:\s*0 0 auto;/);
+  assert.match(css, /\.botsu-presence-heading > span:not\(\.botsu-presence-dot\)/);
+  assert.doesNotMatch(css, /\.botsu-presence-heading > span:last-child/);
   const peopleRule = getRuleBody(css, '.botsu-presence ul');
+  assert.match(peopleRule, /order:\s*1;/);
   assert.match(peopleRule, /margin-left:\s*auto;/);
   assert.match(peopleRule, /gap:\s*(?!0(?:[;\s]|$))[^;]+;/);
   assert.doesNotMatch(css, /\.botsu-presence li \+ li\s*\{[^}]*margin-left:\s*-/s);
   const personRule = getRuleBody(css, '.botsu-presence-person');
-  assert.match(personRule, /min-width:\s*2\.75rem;/);
-  assert.match(personRule, /min-height:\s*2\.75rem;/);
-  const navLinkRule = getRuleBody(css, '.botsu-shell-header nav a');
-  assert.match(navLinkRule, /min-height:\s*2\.75rem;/);
-  const themeSummaryRule = getRuleBody(css, '.botsu-theme-panel summary');
-  assert.match(themeSummaryRule, /min-height:\s*2\.75rem;/);
+  assert.match(personRule, /min-width:\s*1\.5rem;/);
+  assert.match(personRule, /min-height:\s*1\.5rem;/);
+  assert.match(css, /\.botsu-presence-avatar\s*\{[^}]*border-radius:\s*var\(--botsu-radius\);/s);
+  const joinMarkRule = getRuleBody(css, '.botsu-presence-join-mark');
+  assert.match(joinMarkRule, /border-radius:\s*var\(--botsu-radius\);/);
+  const overflowRule = getRuleBody(css, '.botsu-presence-overflow');
+  assert.match(overflowRule, /border-radius:\s*var\(--botsu-radius\);/);
+  assert.ok(
+    presence.indexOf('<ul aria-label="Membres présents">') <
+      presence.indexOf('className="botsu-presence-heading"')
+  );
+  assert.ok(
+    presence.indexOf('{statusLabel}</span>') <
+      presence.indexOf('className={`botsu-presence-dot is-${state.status}`}')
+  );
 });
 
-test('BOTSU start page exposes clock search recents and a large themed pixel canvas', async () => {
-  const [startPage, startCss] = await Promise.all([
+test('global app font overrides dark theme and Folds font variables', async () => {
+  const [nonUi, settings, general, settingsStyles, indexCss] = await Promise.all([
+    readFile(clientNonUiUrl, 'utf8'),
+    readFile(settingsUrl, 'utf8'),
+    readFile(generalSettingsUrl, 'utf8'),
+    readFile(settingsStylesUrl, 'utf8'),
+    readFile(indexCssUrl, 'utf8'),
+  ]);
+
+  assert.match(nonUi, /document\.documentElement\.style\.setProperty\('--font-secondary', fontStack\)/);
+  assert.match(nonUi, /document\.body\.style\.setProperty\('--font-secondary', fontStack\)/);
+  assert.match(nonUi, /document\.body\.style\.setProperty\(foldsFontVariable, fontStack\)/);
+  assert.match(nonUi, /function CornerRadiusFeature\(\)/);
+  assert.match(nonUi, /foldsRadiiVariables/);
+  assert.match(nonUi, /function CustomAccentFeature\(\)/);
+  assert.match(nonUi, /primaryColorVariables/);
+  assert.match(nonUi, /document\.body\.style\.setProperty\('--botsu-color-accent', colorValue\)/);
+  assert.match(nonUi, /document\.documentElement\.style\.setProperty\('--botsu-radius', `\$\{radius\}px`\)/);
+  assert.match(nonUi, /target\.style\.setProperty\(foldsRadiiVariables\.R400, `\$\{radius\}px`\)/);
+  assert.match(settings, /cornerRadius: number/);
+  assert.match(settings, /cornerRadius: 8/);
+  assert.match(settings, /customAccentEnabled: boolean/);
+  assert.match(settings, /customAccentColor: string/);
+  assert.match(settings, /customAccentColor: '#7c5cff'/);
+  assert.match(general, /function CornerRadiusSlider\(\)/);
+  assert.match(general, /title="Radius des corners"/);
+  assert.match(general, /type="range"/);
+  assert.match(general, /max="32"/);
+  assert.match(general, /CornerRadiusSliderStyle/);
+  assert.match(general, /--corner-radius-progress/);
+  assert.match(settingsStyles, /CornerRadiusSliderInputStyle/);
+  assert.match(settingsStyles, /opacity:\s*0/);
+  assert.match(settingsStyles, /&:focus-within/);
+  assert.match(settingsStyles, /CornerRadiusSliderThumbStyle/);
+  assert.match(settingsStyles, /color\.Primary\.Main/);
+  assert.match(general, /function CustomAccentPicker\(\)/);
+  assert.match(general, /title="Accent personnalisé"/);
+  assert.match(general, /type="color"/);
+  assert.match(general, /Code hexadécimal de l'accent/);
+  assert.match(settings, /\| 'velvelyne'/);
+  assert.match(settings, /\| 'jgs5'/);
+  assert.match(settings, /\| 'vg5000'/);
+  assert.match(settings, /\| 'trickster'/);
+  assert.match(settings, /\| 'avara'/);
+  assert.match(settings, /\| 'basteleur'/);
+  assert.match(settings, /\| 'minecraft'/);
+  assert.match(general, /velvelyne: 'Velvelyne'/);
+  assert.match(general, /jgs5: 'JGS-5'/);
+  assert.match(general, /vg5000: 'VG5000'/);
+  assert.match(general, /trickster: 'Trickster'/);
+  assert.match(general, /avara: 'Avara'/);
+  assert.match(general, /basteleur: 'Basteleur'/);
+  assert.match(general, /minecraft: 'Minecraft'/);
+  assert.match(nonUi, /velvelyne: "'Botsu Velvelyne'/);
+  assert.match(nonUi, /jgs5: "'Botsu JGS-5'/);
+  assert.match(nonUi, /vg5000: "'Botsu VG5000'/);
+  assert.match(nonUi, /trickster: "'Botsu Trickster'/);
+  assert.match(nonUi, /avara: "'Botsu Avara'/);
+  assert.match(nonUi, /basteleur: "'Botsu Basteleur'/);
+  assert.match(nonUi, /minecraft: "'Botsu Minecraft'/);
+  assert.match(indexCss, /font-family: 'Botsu Velvelyne'/);
+  assert.match(indexCss, /font-family: 'Botsu JGS-5'/);
+  assert.match(indexCss, /font-family: 'Botsu VG5000'/);
+  assert.match(indexCss, /font-family: 'Botsu Trickster'/);
+  assert.match(indexCss, /font-family: 'Botsu Avara'/);
+  assert.match(indexCss, /font-family: 'Botsu Basteleur'/);
+  assert.match(indexCss, /font-family: 'Botsu Minecraft'/);
+  assert.match(indexCss, /minecraftfont\.woff/);
+});
+
+test('appearance options include custom BOTSU themes', async () => {
+  const [useTheme, colors, indexCss] = await Promise.all([
+    readFile(useThemeUrl, 'utf8'),
+    readFile(colorsUrl, 'utf8'),
+    readFile(indexCssUrl, 'utf8'),
+  ]);
+
+  assert.match(colors, /export const steam2003Theme = createTheme\(color,/);
+  assert.match(colors, /export const infraredTheme = createTheme\(color,/);
+  assert.match(colors, /export const matrixTheme = createTheme\(color,/);
+  assert.match(colors, /export const spongebobTheme = createTheme\(color,/);
+  assert.match(colors, /export const minecraftTheme = createTheme\(color,/);
+  assert.match(colors, /export const blueNightTheme = createTheme\(color,/);
+  assert.match(colors, /export const draculaTheme = createTheme\(color,/);
+  assert.match(colors, /export const discordTheme = createTheme\(color,/);
+  assert.match(colors, /export const catppuccinTheme = createTheme\(color,/);
+  assert.match(colors, /Container:\s*'#2C3327'/);
+  assert.match(colors, /Main:\s*'#B7D77B'/);
+  assert.match(colors, /Container:\s*'#160306'/);
+  assert.match(colors, /Main:\s*'#FF3B30'/);
+  assert.match(colors, /Container:\s*'#020A05'/);
+  assert.match(colors, /Main:\s*'#00FF66'/);
+  assert.match(colors, /Container:\s*'#FFF16A'/);
+  assert.match(colors, /Main:\s*'#00A6B2'/);
+  assert.match(colors, /Container:\s*'#15110C'/);
+  assert.match(colors, /Main:\s*'#4F7F2A'/);
+  assert.match(colors, /Container:\s*'#07111F'/);
+  assert.match(colors, /Main:\s*'#6EA8FF'/);
+  assert.match(colors, /Container:\s*'#191A28'/);
+  assert.match(colors, /Main:\s*'#BD93F9'/);
+  assert.match(colors, /Container:\s*'#1E1F22'/);
+  assert.match(colors, /Main:\s*'#5865F2'/);
+  assert.match(colors, /Container:\s*'#11111B'/);
+  assert.match(colors, /Main:\s*'#CBA6F7'/);
+  assert.match(useTheme, /export const Steam2003Theme: Theme = \{/);
+  assert.match(useTheme, /export const InfraredTheme: Theme = \{/);
+  assert.match(useTheme, /export const MatrixTheme: Theme = \{/);
+  assert.match(useTheme, /export const SpongebobTheme: Theme = \{/);
+  assert.match(useTheme, /export const MinecraftTheme: Theme = \{/);
+  assert.match(useTheme, /export const BlueNightTheme: Theme = \{/);
+  assert.match(useTheme, /export const DraculaTheme: Theme = \{/);
+  assert.match(useTheme, /export const DiscordTheme: Theme = \{/);
+  assert.match(useTheme, /export const CatppuccinTheme: Theme = \{/);
+  assert.match(useTheme, /id: 'steam-2003-theme'/);
+  assert.match(useTheme, /id: 'infrared-theme'/);
+  assert.match(useTheme, /id: 'matrix-theme'/);
+  assert.match(useTheme, /id: 'spongebob-theme'/);
+  assert.match(useTheme, /id: 'minecraft-theme'/);
+  assert.match(useTheme, /id: 'blue-night-theme'/);
+  assert.match(useTheme, /id: 'dracula-theme'/);
+  assert.match(useTheme, /id: 'discord-theme'/);
+  assert.match(useTheme, /id: 'catppuccin-theme'/);
+  assert.match(useTheme, /SpongebobTheme,\s*DarkTheme,\s*ButterTheme,\s*Steam2003Theme,\s*InfraredTheme,\s*MatrixTheme,\s*MinecraftTheme,\s*BlueNightTheme,\s*DraculaTheme,\s*DiscordTheme,\s*CatppuccinTheme/s);
+  assert.match(useTheme, /\[Steam2003Theme\.id\]: 'Steam 2003'/);
+  assert.match(useTheme, /\[InfraredTheme\.id\]: 'Infrarouge'/);
+  assert.match(useTheme, /\[MatrixTheme\.id\]: 'Matrix'/);
+  assert.match(useTheme, /\[SpongebobTheme\.id\]: "Bob l'eponge"/);
+  assert.match(useTheme, /\[MinecraftTheme\.id\]: 'Minecraft'/);
+  assert.match(useTheme, /\[BlueNightTheme\.id\]: 'Blue Night'/);
+  assert.match(useTheme, /\[DraculaTheme\.id\]: 'Dracula'/);
+  assert.match(useTheme, /\[DiscordTheme\.id\]: 'Discord'/);
+  assert.match(useTheme, /\[CatppuccinTheme\.id\]: 'Catppuccin'/);
+  assert.match(useTheme, /MinecraftTheme: Theme = \{\s*id: 'minecraft-theme',\s*kind: ThemeKind\.Dark/s);
+  assert.match(indexCss, /\.matrix-theme,\s*\.minecraft-theme,\s*\.blue-night-theme,\s*\.dracula-theme,\s*\.discord-theme,\s*\.catppuccin-theme\s*\{/);
+});
+
+test('BOTSU route restores the default left page panel', async () => {
+  const [router, nav, services] = await Promise.all([
+    readFile(routerUrl, 'utf8'),
+    readFile(shellNavUrl, 'utf8'),
+    readFile(new URL('./BotsuServices.tsx', import.meta.url), 'utf8'),
+  ]);
+
+  assert.match(router, /<PageRoot\s+nav=\{/);
+  assert.match(router, /<MobileFriendlyPageNav path=\{BOTSU_PATH\}>/);
+  assert.match(router, /<BotsuNav \/>/);
+  assert.match(nav, /<PageNav>/);
+  assert.match(nav, /<Text size="H4" truncate>\s*Botsu\s*<\/Text>/);
+  assert.match(nav, /import \{ Box, Icon, Icons, Text \} from 'folds';/);
+  assert.match(nav, /function BotsuNavLabel\(/);
+  assert.match(nav, /<Icon size="100" src=\{icon\} aria-hidden="true" \/>/);
+  assert.match(nav, /<BotsuNavLabel icon=\{getAppNavIcon\(app\.id\)\}>/);
+  assert.match(nav, /<BotsuNavLabel icon=\{getServiceNavIcon\(service\.label\)\}>/);
+  assert.match(nav, /appId === 'discussions'\) return Icons\.Message/);
+  assert.match(nav, /appId === 'documents'\) return Icons\.File/);
+  assert.match(nav, /appId === 'tables'\) return Icons\.Category/);
+  assert.match(nav, /appId === 'files'\) return Icons\.Attachment/);
+  assert.match(nav, /serviceLabel === 'paste'\) return Icons\.Pencil/);
+  assert.match(nav, /serviceLabel === 'traduction'\) return Icons\.Globe/);
+  assert.doesNotMatch(nav, /BotsuLogo|BOTSU_LOGO_PATH|BOTSU_LOGO_INNER_PATH|botsu-panel-logo/);
+  assert.match(nav, /HIDDEN_SERVICE_PANEL_LABELS/);
+  assert.doesNotMatch(nav, /index services/);
+  assert.doesNotMatch(nav, /location\.pathname === '\/botsu\/'/);
+  assert.doesNotMatch(nav, /to="\/botsu\/"/);
+  assert.match(nav, /RoomNavCategoryButton/);
+  assert.match(nav, /applicationsClosed/);
+  assert.match(nav, /servicesClosed/);
+  assert.match(nav, />\s*applications\s*<\/RoomNavCategoryButton>/);
+  assert.match(nav, />\s*services\s*<\/RoomNavCategoryButton>/);
+  assert.ok(nav.indexOf('>\n                applications') < nav.indexOf('>\n                services'));
+  assert.doesNotMatch(nav, /to="\/botsu\/services\/"/);
+  assert.match(services, /label: 'Accueil'/);
+  assert.match(services, /label: 'Recherche'/);
+});
+
+test('BOTSU global sidebar tab uses active filled and inactive outline logos', async () => {
+  const [tab, logo] = await Promise.all([readFile(shellTabUrl, 'utf8'), readFile(shellLogoUrl, 'utf8')]);
+
+  assert.match(tab, /<SidebarItemTooltip tooltip="Botsu">/);
+  assert.match(tab, /aria-label="Ouvrir Botsu"/);
+  assert.match(tab, /<BotsuLogo active=\{active\} \/>/);
+  assert.match(logo, /BOTSU_LOGO_PATH/);
+  assert.match(logo, /fill=\{active \? 'currentColor' : 'none'\}/);
+  assert.match(logo, /stroke="currentColor"/);
+  assert.match(logo, /strokeWidth=\{active \? 0 : 58\}/);
+  assert.match(logo, /512\.005005 31/);
+  assert.doesNotMatch(logo, /BOTSU_LOGO_INNER_PATH|--bg-surface|#fff|394\.9375 288\.796875/);
+});
+
+test('BOTSU start page exposes a single-screen searchable draw surface', async () => {
+  const [router, startPage, pixelCanvas, startCss] = await Promise.all([
+    readFile(routerUrl, 'utf8'),
     readFile(startPageUrl, 'utf8'),
+    readFile(pixelCanvasUrl, 'utf8'),
     readFile(startCssUrl, 'utf8'),
   ]);
 
+  assert.match(router, /import \{ BotsuCommunityCanvasHome, BotsuStartPage \} from '\.\.\/\.\.\/botsu\/start';/);
+  assert.match(router, /<Route index element=\{<BotsuCommunityCanvasHome \/>\} \/>/);
   assert.match(startPage, /className="botsu-start-clock"/);
   assert.match(startPage, /type="search"/);
-  assert.match(startPage, /Derniers documents/);
-  assert.match(startPage, /<BotsuPixelCanvas \/>/);
-  assert.match(startPage, /Version canary éphémère/);
+  assert.match(startPage, /Portail internet BOTSU/);
+  assert.match(startPage, /style=\{botsuCinnyThemeVars as CSSProperties\}/);
+  assert.match(startPage, /'--botsu-color-canvas': color\.Background\.Container/);
+  assert.match(startPage, /'--botsu-font-family': 'var\(--font-secondary\)'/);
+  assert.match(startPage, /className="botsu-suite-strip botsu-community-strip"/);
+  assert.match(startPage, /<Link to="\/botsu\/">botsu<\/Link>/);
+  assert.match(startPage, /<Link to="\/home\/">discussion<\/Link>/);
+  assert.doesNotMatch(startPage, /presence-api|espace de dessin communautaire/);
+  assert.match(startPage, /<BotsuPresence \/>/);
+  assert.match(startPage, /<PixelCanvasProvider>/);
+  assert.match(startPage, /récents/);
+  assert.doesNotMatch(startPage, /botsu-start-section--apps|botsu-start-section--services/);
+  assert.doesNotMatch(startCss, /botsu-start-links|botsu-start-section/);
+  assert.match(startPage, /variant="background"/);
+  assert.match(startPage, /className="botsu-start botsu-start--portal"/);
+  assert.match(startPage, /className="botsu-start botsu-start--community"/);
+  const communityHome = startPage.slice(startPage.indexOf('export function BotsuCommunityCanvasHome'));
+  assert.doesNotMatch(communityHome, /botsu-start-center--community|formatBotsuClock|botsu-start-clock/);
+  assert.doesNotMatch(startPage, /BONJOUR|Version canary éphémère/);
+  assert.match(pixelCanvas, /getComputedStyle\(canvas\)/);
+  assert.match(pixelCanvas, /observer\.observe\(document\.body, \{ attributes: true, attributeFilter: \['class', 'style'\] \}\)/);
   const canvasRule = getRuleBody(startCss, '.botsu-pixel-canvas');
   assert.match(canvasRule, /aspect-ratio:\s*1;/);
   assert.match(canvasRule, /image-rendering:\s*pixelated;/);
   assert.match(canvasRule, /background:\s*var\(--botsu-color-canvas\);/);
+  const startRule = getRuleBody(startCss, '.botsu-start');
+  assert.match(startRule, /overflow:\s*hidden;/);
+  assert.doesNotMatch(startRule, /--botsu-color-canvas:\s*#050505|--botsu-color-text:\s*#f5f5f5/);
+  const portalRule = getRuleBody(startCss, '.botsu-start--portal');
+  assert.match(portalRule, /background:\s*var\(--botsu-color-canvas\);/);
+  assert.doesNotMatch(portalRule, /radial-gradient/);
+  const clockRule = getRuleBody(startCss, '.botsu-start-clock');
+  assert.match(clockRule, /color:\s*var\(--botsu-color-text\);/);
+  assert.match(clockRule, /font-family:\s*var\(--botsu-font-family\);/);
+  assert.doesNotMatch(clockRule, /mix-blend-mode|color:\s*#fff|Helvetica/i);
+  const bannerRule = getRuleBody(startCss, '.botsu-community-strip');
+  assert.match(bannerRule, /position:\s*absolute;/);
+  assert.match(bannerRule, /grid-template-columns:\s*minmax\(0, 1fr\) auto clamp\(5rem, 12vw, 8rem\);/);
+  const communityPresenceRule = getRuleBody(startCss, '.botsu-community-strip .botsu-presence');
+  assert.match(communityPresenceRule, /grid-column:\s*3;/);
+  assert.doesNotMatch(startCss, /botsu-community-presence-banner|botsu-community-kicker/);
 });
diff --git a/apps/client/src/botsu/workspace/BotsuWorkspaceBar.css.ts b/apps/client/src/botsu/workspace/BotsuWorkspaceBar.css.ts
index e7e0a9e..24add44 100644
--- a/apps/client/src/botsu/workspace/BotsuWorkspaceBar.css.ts
+++ b/apps/client/src/botsu/workspace/BotsuWorkspaceBar.css.ts
@@ -3,17 +3,18 @@ import { color, config, toRem } from 'folds';
 
 export const WorkspaceFrame = style({
   flexShrink: 0,
+  position: 'relative',
+  zIndex: 2,
 });
 
 export const WorkspaceBar = style({
   minWidth: 0,
   display: 'flex',
   alignItems: 'center',
-  gap: config.space.S300,
-  padding: `${config.space.S100} ${config.space.S400}`,
+  gap: config.space.S100,
+  padding: `${toRem(2)} ${config.space.S300}`,
   color: color.Surface.OnContainer,
-  backgroundColor: color.Surface.Container,
-  borderBottom: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+  backgroundColor: 'transparent',
   overflowX: 'auto',
 });
 
@@ -22,7 +23,7 @@ export const WorkspaceLabel = style({
   fontFamily: 'ui-monospace, monospace',
   fontSize: toRem(10),
   fontWeight: 700,
-  letterSpacing: '0.12em',
+  letterSpacing: '0.08em',
   opacity: config.opacity.P500,
 });
 
@@ -41,10 +42,11 @@ export const WorkspaceTab = style({
   display: 'flex',
   alignItems: 'center',
   gap: config.space.S100,
-  padding: `${toRem(4)} ${config.space.S200}`,
-  border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+  padding: `${toRem(2)} ${config.space.S100}`,
+  border: `${config.borderWidth.B300} solid color-mix(in srgb, ${color.Surface.ContainerLine} 52%, transparent)`,
   borderRadius: config.radii.R300,
   whiteSpace: 'nowrap',
+  backgroundColor: 'transparent',
 });
 
 export const WorkspaceTabLink = style({
@@ -113,27 +115,59 @@ export const WorkspaceButton = style({
   },
 });
 
+export const WorkspaceIconButton = style({
+  flexShrink: 0,
+  minWidth: toRem(22),
+  height: toRem(22),
+  display: 'inline-grid',
+  placeItems: 'center',
+  padding: 0,
+  color: color.Surface.OnContainer,
+  backgroundColor: 'transparent',
+  border: `${config.borderWidth.B300} solid color-mix(in srgb, ${color.Surface.ContainerLine} 58%, transparent)`,
+  borderRadius: config.radii.R300,
+  cursor: 'pointer',
+  fontFamily: 'ui-monospace, monospace',
+  fontSize: toRem(13),
+  fontWeight: 800,
+  lineHeight: 1,
+  selectors: {
+    '&:hover': {
+      backgroundColor: 'transparent',
+      borderColor: color.Surface.ContainerLine,
+    },
+    '&:focus-visible': {
+      outline: `${config.borderWidth.B600} solid ${color.Primary.Main}`,
+      outlineOffset: toRem(2),
+    },
+    '&:disabled': {
+      cursor: 'not-allowed',
+      opacity: config.opacity.P500,
+    },
+  },
+});
+
 export const WorkspaceEditor = style({
   minWidth: 0,
-  maxHeight: 'min(60vh, 32rem)',
+  maxHeight: 'min(46vh, 24rem)',
   display: 'grid',
   gap: config.space.S200,
   margin: 0,
-  padding: config.space.S300,
+  padding: `${config.space.S100} ${config.space.S300} ${config.space.S200}`,
   color: color.Surface.OnContainer,
-  backgroundColor: color.Surface.Container,
+  backgroundColor: 'transparent',
   borderTop: 0,
   borderLeft: 0,
   borderRight: 0,
-  borderBottom: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+  borderBottom: 0,
   overflowY: 'auto',
 });
 
 export const WorkspaceEditorRow = style({
   display: 'grid',
-  gridTemplateColumns: `minmax(${toRem(100)}, ${toRem(140)}) minmax(${toRem(
+  gridTemplateColumns: `minmax(${toRem(92)}, ${toRem(124)}) minmax(${toRem(
     140
-  )}, 1fr) minmax(${toRem(180)}, 1.4fr) auto`,
+  )}, 1fr) minmax(${toRem(160)}, 1.4fr) auto`,
   alignItems: 'end',
   gap: config.space.S200,
   '@media': {
diff --git a/apps/client/src/botsu/workspace/BotsuWorkspaceBar.tsx b/apps/client/src/botsu/workspace/BotsuWorkspaceBar.tsx
index a3ecc49..9df69ec 100644
--- a/apps/client/src/botsu/workspace/BotsuWorkspaceBar.tsx
+++ b/apps/client/src/botsu/workspace/BotsuWorkspaceBar.tsx
@@ -146,19 +146,17 @@ export function BotsuWorkspaceBar({ room }: { room: Room }) {
   if (workspaceState.status === 'invalid') {
     workspaceSummary = <span className={css.WorkspaceInvalid}>Configuration incompatible</span>;
   } else if (workspaceState.status === 'absent') {
-    workspaceSummary = <span className={css.WorkspaceEmpty}>Aucun espace configuré</span>;
+    workspaceSummary = null;
+  } else if (workspaceState.tabs.length === 0) {
+    workspaceSummary = null;
   } else {
     workspaceSummary = (
       <ul className={css.WorkspaceTabs} aria-label="Ressources liées">
-        {workspaceState.tabs.length === 0 ? (
-          <li className={css.WorkspaceEmpty}>Aucun onglet</li>
-        ) : (
-          workspaceState.tabs.map((tab) => (
-            <li className={css.WorkspaceTab} key={tab.id} title={tab.resourceId}>
-              <WorkspaceTabContent tab={tab} />
-            </li>
-          ))
-        )}
+        {workspaceState.tabs.map((tab) => (
+          <li className={css.WorkspaceTab} key={tab.id} title={tab.resourceId}>
+            <WorkspaceTabContent tab={tab} />
+          </li>
+        ))}
       </ul>
     );
   }
@@ -169,11 +167,16 @@ export function BotsuWorkspaceBar({ room }: { room: Room }) {
   return (
     <div className={css.WorkspaceFrame}>
       <section className={css.WorkspaceBar} aria-label="Espace BOTSU du salon">
-        <strong className={css.WorkspaceLabel}>ESPACE BOTSU</strong>
         {workspaceSummary}
         {canEdit && !editing && (
-          <button className={css.WorkspaceButton} type="button" onClick={beginEditing}>
-            Configurer
+          <button
+            aria-label="Configurer l'espace Botsu"
+            className={css.WorkspaceIconButton}
+            title="Configurer l'espace Botsu"
+            type="button"
+            onClick={beginEditing}
+          >
+            +
           </button>
         )}
       </section>
@@ -239,13 +242,14 @@ export function BotsuWorkspaceBar({ room }: { room: Room }) {
                 </label>
                 <button
                   aria-label={`Retirer ${tab.label || `l'onglet ${tab.id}`}`}
-                  className={css.WorkspaceButton}
+                  className={css.WorkspaceIconButton}
+                  title="Retirer"
                   type="button"
                   onClick={() =>
                     setDraftTabs((current) => removeWorkspaceDraftTab(current, tab.id))
                   }
                 >
-                  Retirer
+                  ×
                 </button>
               </div>
             ))}
@@ -256,18 +260,32 @@ export function BotsuWorkspaceBar({ room }: { room: Room }) {
             )}
             <div className={css.WorkspaceEditorActions}>
               <button
-                className={css.WorkspaceButton}
+                aria-label="Ajouter un onglet"
+                className={css.WorkspaceIconButton}
+                title="Ajouter un onglet"
                 type="button"
                 onClick={addTab}
                 disabled={draftTabs.length >= MAXIMUM_WORKSPACE_TABS}
               >
-                Ajouter un onglet
+                +
               </button>
-              <button className={css.WorkspaceButton} type="button" onClick={cancelEditing}>
-                Annuler
+              <button
+                aria-label="Fermer la configuration Botsu"
+                className={css.WorkspaceIconButton}
+                title="Fermer"
+                type="button"
+                onClick={cancelEditing}
+              >
+                ×
               </button>
-              <button className={css.WorkspaceButton} type="submit" disabled={saving}>
-                {saving ? 'Enregistrement…' : 'Enregistrer'}
+              <button
+                aria-label={saving ? 'Enregistrement en cours' : 'Enregistrer'}
+                className={css.WorkspaceIconButton}
+                title={saving ? 'Enregistrement…' : 'Enregistrer'}
+                type="submit"
+                disabled={saving}
+              >
+                ✓
               </button>
             </div>
           </fieldset>
diff --git a/apps/client/src/botsu/workspace/editor.test.ts b/apps/client/src/botsu/workspace/editor.test.ts
index 1995845..17f83f7 100644
--- a/apps/client/src/botsu/workspace/editor.test.ts
+++ b/apps/client/src/botsu/workspace/editor.test.ts
@@ -1,4 +1,5 @@
 import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
 import test from 'node:test';
 import {
   addWorkspaceDraftTab,
@@ -11,6 +12,9 @@ import {
   updateWorkspaceDraftTab,
 } from './editor.ts';
 
+const workspaceBarUrl = new URL('./BotsuWorkspaceBar.tsx', import.meta.url);
+const workspaceBarCssUrl = new URL('./BotsuWorkspaceBar.css.ts', import.meta.url);
+
 const tab = {
   id: 'brief',
   appId: 'documents' as const,
@@ -94,3 +98,24 @@ test('initializes the editor from one live Matrix event snapshot', () => {
   assert.equal(snapshot.eventId, '$event-new');
   assert.deepEqual(snapshot.tabs, [{ ...tab, id: 'new-tab', label: 'Version distante' }]);
 });
+
+test('conversation workspace bar stays discreet with integrated controls', async () => {
+  const [bar, css] = await Promise.all([
+    readFile(workspaceBarUrl, 'utf8'),
+    readFile(workspaceBarCssUrl, 'utf8'),
+  ]);
+
+  assert.match(bar, /workspaceSummary = null/);
+  assert.doesNotMatch(bar, /ESPACE BOTSU|Aucun espace configuré|Aucun onglet|<strong className=\{css\.WorkspaceLabel\}>|Configurer\s*<\/button>/);
+  assert.match(bar, /aria-label="Configurer l'espace Botsu"/);
+  assert.match(bar, /className=\{css\.WorkspaceIconButton\}/);
+  assert.match(bar, />\s*\+\s*<\/button>/);
+  assert.match(bar, />\s*×\s*<\/button>/);
+  assert.match(bar, />\s*✓\s*<\/button>/);
+  assert.match(css, /export const WorkspaceIconButton = style/);
+  assert.match(css, /backgroundColor: 'transparent'/);
+  assert.match(css, /borderBottom: 0/);
+  assert.match(css, /&:hover': \{\n\s*backgroundColor: 'transparent'/);
+  assert.doesNotMatch(css, /backgroundColor: `color-mix\(in srgb, \$\{color\.Surface\.Container\}/);
+  assert.doesNotMatch(css, /borderBottom:\s*`\$\{config\.borderWidth\.B300\} solid \$\{color\.Surface\.ContainerLine\}`/);
+});