From 9c7e540550f876c5a2fba7b23f039a563b593ad5 Mon Sep 17 00:00:00 2001
From: jibraaan <jibraantahir@icloud.com>
Date: Sun, 4 Oct 2026 04:51:44 +0500
Subject: [PATCH 1/2] style: unify the ink accent, fix contrast, and clarify
 disabled states

The compact-chrome layer moved the app to an ink palette, but primary
buttons, focus rings, checkboxes, and setup notes kept the original
lavender, so Settings and Contacts looked like a different app.

- Primary buttons, focus rings, and checkboxes use one ink accent.
- Disabled primary/send/connect buttons look disabled (the send button
  was near-black at 90% opacity before setup).
- Secondary text in setup cards, config notes, and permission rows meets
  WCAG AA (was ~2.4-2.7:1, now 5.3:1).
- Settings shows missing environment variables as code.
- Sidebar: Spaces gets the same spacing as Dots, labels stay on one line,
  and zero-count badges are hidden.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/client/App.tsx             |  6 ++-
 src/client/WorkspaceDialog.tsx | 17 ++++++--
 src/client/style.css           | 73 ++++++++++++++++++++++++++++++++++
 3 files changed, 91 insertions(+), 5 deletions(-)

diff --git a/src/client/App.tsx b/src/client/App.tsx
index 353b631b..c6ff95b3 100644
--- a/src/client/App.tsx
+++ b/src/client/App.tsx
@@ -433,7 +433,7 @@ export function App() {
           >
             <Clock3 size={17} />
             <span>Scheduled & activity</span>
-            <small>{state.tasks.length}</small>
+            {state.tasks.length > 0 && <small>{state.tasks.length}</small>}
           </button>
           <button
             className={`nav-item ${view === 'memories' ? 'active' : ''}`}
@@ -444,7 +444,9 @@ export function App() {
           >
             <BookOpen size={17} />
             <span>Memories</span>
-            <small>{state.memories.length}</small>
+            {state.memories.length > 0 && (
+              <small>{state.memories.length}</small>
+            )}
           </button>
           <button
             className="nav-item"
diff --git a/src/client/WorkspaceDialog.tsx b/src/client/WorkspaceDialog.tsx
index 234fa4d2..0cf49fa3 100644
--- a/src/client/WorkspaceDialog.tsx
+++ b/src/client/WorkspaceDialog.tsx
@@ -362,9 +362,20 @@ export function WorkspaceDialog({
             <div className="config-note">
               <strong>Service setup</strong>
               <p>
-                {workspace.setup.missing.length
-                  ? `Add ${workspace.setup.missing.join(', ')} to the server environment, then restart.`
-                  : 'Text configuration is present. A successful conversation confirms connectivity.'}
+                {workspace.setup.missing.length ? (
+                  <>
+                    Add{' '}
+                    {workspace.setup.missing.map((name, index) => (
+                      <span key={name}>
+                        {index > 0 && ', '}
+                        <code>{name}</code>
+                      </span>
+                    ))}{' '}
+                    to the server environment, then restart.
+                  </>
+                ) : (
+                  'Text configuration is present. A successful conversation confirms connectivity.'
+                )}
               </p>
               <p>
                 Slack: {workspace.setup.slack.replaceAll('_', ' ')}. Voice:{' '}
diff --git a/src/client/style.css b/src/client/style.css
index 0b11b0b1..8d6eea28 100644
--- a/src/client/style.css
+++ b/src/client/style.css
@@ -3993,3 +3993,76 @@ h3 {
   font-size: 14px;
   color: #c9e8dd;
 }
+
+/* Polish: one ink accent everywhere, readable secondary text (WCAG AA), and
+   disabled controls that look disabled. Later compact-chrome layers moved
+   the app to ink; these older lavender surfaces now follow it. */
+.template-app {
+  --accent: #242424;
+  --accent-hover: #000;
+  --text-secondary: #6b6b6b;
+  --disabled-bg: #ececec;
+  --disabled-ink: #9a9a9a;
+}
+.template-app :is(button, a, input, textarea, select):focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+.template-app .primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+.template-app .primary:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+.template-app :is(.primary, .send-button):disabled {
+  background: var(--disabled-bg);
+  border-color: var(--disabled-bg);
+  color: var(--disabled-ink);
+  opacity: 1;
+  cursor: not-allowed;
+}
+.template-app :is(input[type='checkbox'], input[type='radio']) {
+  accent-color: var(--accent);
+}
+.template-app :is(.muted, .permission-row small, .config-note p) {
+  color: var(--text-secondary);
+}
+.template-app .config-note {
+  background: #fafafa;
+  border-color: var(--line);
+}
+.template-app :is(.config-note strong, .setup-card strong) {
+  color: var(--ink);
+  font-weight: 600;
+}
+.template-app :is(.config-note a, .setup-card a) {
+  color: var(--ink);
+}
+.template-app .config-note code {
+  padding: 1px 4px;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  background: #fff;
+  color: var(--ink);
+  font-size: 0.92em;
+  overflow-wrap: anywhere;
+}
+.template-app .setup-card p {
+  color: var(--text-secondary);
+}
+.template-app .setup-icon {
+  background: #f1f1f1;
+  color: var(--ink);
+}
+/* Dots and Spaces are sibling groups; give the second the same air. */
+.template-app .sidebar > .nav-label ~ .nav-label {
+  margin-top: 18px;
+}
+.template-app .sidebar-bottom .nav-item span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

From 0bbd77dd0d6c1a113b28875298cec94f2b1248ee Mon Sep 17 00:00:00 2001
From: jibraaan <jibraantahir@icloud.com>
Date: Tue, 6 Oct 2026 03:33:15 +0500
Subject: [PATCH 2/2] fix: keep the call view's pale focus ring on its dark
 surface

Review fix: the ink focus outline now excludes controls inside .call-view,
so they keep the base #b8c4fa 3px ring instead of a #242424 ring with
~1.3-1.8:1 contrast on the dark call background. Verified in Chromium
with keyboard focus: call control #b8c4fa 3px; other controls #242424 2px.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/client/style.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/client/style.css b/src/client/style.css
index 8d6eea28..f1e247e2 100644
--- a/src/client/style.css
+++ b/src/client/style.css
@@ -4004,7 +4004,9 @@ h3 {
   --disabled-bg: #ececec;
   --disabled-ink: #9a9a9a;
 }
-.template-app :is(button, a, input, textarea, select):focus-visible {
+/* The call view is intentionally dark; it keeps the pale base focus ring. */
+.template-app
+  :is(button, a, input, textarea, select):not(.call-view *):focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
 }