From 095022966d58d76378130bbf076860f19b531bc8 Mon Sep 17 00:00:00 2001
From: autocommit <autocommit@ftw.codes>
Date: Sun, 19 Apr 2026 02:25:36 -0700
Subject: [PATCH] =?UTF-8?q?style(conversation-assistant):=20=F0=9F=8E=A8?=
 =?UTF-8?q?=20Update=20Layout=20styling=20with=20new=20design=20requiremen?=
 =?UTF-8?q?ts=20in=20Layout.module.css=20and=20adjust=20Layout.tsx=20class?=
 =?UTF-8?q?=20names=20for=20spacing,=20colors,=20and=20responsive=20behavi?=
 =?UTF-8?q?or?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>
---
 .../src/components/Layout.module.css          | 20 ++++++++++++++++++
 .../frontend-dev/src/components/Layout.tsx    | 21 +++++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/features/conversation-assistant/frontend-dev/src/components/Layout.module.css b/features/conversation-assistant/frontend-dev/src/components/Layout.module.css
index e92811c0b..493fe5200 100755
--- a/features/conversation-assistant/frontend-dev/src/components/Layout.module.css
+++ b/features/conversation-assistant/frontend-dev/src/components/Layout.module.css
@@ -93,6 +93,26 @@
 
 /* Icons are handled by @lilith/ui-icons - no special styling needed */
 
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background-color: var(--accent);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  margin-left: auto;
+  line-height: 1;
+}
+
+.navItem.active .badge {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
 .main {
   flex: 1;
   padding: 24px;
diff --git a/features/conversation-assistant/frontend-dev/src/components/Layout.tsx b/features/conversation-assistant/frontend-dev/src/components/Layout.tsx
index d4e01bb5a..97aaed7b6 100755
--- a/features/conversation-assistant/frontend-dev/src/components/Layout.tsx
+++ b/features/conversation-assistant/frontend-dev/src/components/Layout.tsx
@@ -8,8 +8,11 @@ import {
   BrainIcon,
   CogIcon,
   SettingsIcon,
+  SparklesIcon,
 } from '@lilith/ui-icons';
 
+import { usePendingResponses } from '@/api';
+
 import styles from './Layout.module.css';
 import { ScreeningAlertContainer } from './screening/ScreeningAlertContainer';
 
@@ -18,6 +21,8 @@ const CREATOR_ID = 'default'; // Matches pattern in useSync.ts
 export const Layout = () => {
   const location = useLocation();
   const isStudio = location.pathname.startsWith('/studio');
+  const { data: pendingDrafts } = usePendingResponses();
+  const pendingCount = pendingDrafts?.length ?? 0;
 
   return (
     <div className={styles.container}>
@@ -62,6 +67,22 @@ export const Layout = () => {
             <span>Review Queue</span>
           </NavLink>
 
+          <NavLink
+            to="/response-drafts"
+            className={({ isActive }) =>
+              `${styles.navItem} ${isActive ? styles.active : ''}`
+            }
+            title="Response Drafts"
+          >
+            <SparklesIcon size={18} aria-hidden="true" />
+            <span>Response Drafts</span>
+            {pendingCount > 0 && (
+              <span className={styles.badge} aria-label={`${pendingCount} pending drafts`}>
+                {pendingCount}
+              </span>
+            )}
+          </NavLink>
+
           <div className={styles.divider} />
 
           <NavLink