feat: update UI branding for multi-harness

Author: ithiria894

src/ui/app.js

@@ -146,6 +146,7 @@ async function init() {
     selectedScopeId = getInitialSelectedScopeId();
     initializeScopeState();
     setupUi();
+    updateHarnessBranding();
     updateCapabilityVisibility();
     setupScopeNotice();
     // Load cached scan results + check for new servers BEFORE first render
@@ -273,7 +274,8 @@ async function switchHarness(harnessId) {
   localStorage.setItem("cco-selected-harness", harnessId);
   const loading = document.getElementById("loading");
   if (loading) {
-    loading.textContent = "Scanning selected harness...";
+    const nextHarness = availableHarnesses.find((harness) => harness.id === harnessId);
+    loading.textContent = `Scanning ${(nextHarness?.displayName || nextHarness?.shortName || harnessId)} inventory...`;
     loading.classList.remove("hidden");
   }
 
@@ -303,6 +305,7 @@ async function switchHarness(harnessId) {
 
   initializeScopeState();
   updateHarnessSelector();
+  updateHarnessBranding();
   updateCapabilityVisibility();
   if (hasCapability("mcpSecurity")) {
     await loadCachedSecurityResults();
@@ -318,7 +321,7 @@ function setupScopeNotice() {
   if (!tree) return;
   const notice = document.createElement("div");
   notice.className = "scope-notice";
-  notice.innerHTML = `<span class="scope-notice-dismiss" id="scopeNoticeDismiss">✕</span><strong>How scopes work:</strong> Different categories have different inheritance rules. Use <strong>✦ Show Effective</strong> to see what actually applies in each project. Hover any category pill for its specific rule.`;
+  notice.innerHTML = `<span class="scope-notice-dismiss" id="scopeNoticeDismiss">✕</span><strong>How ${esc(getHarnessShortName())} scopes work:</strong> Different categories can have different inheritance rules. Use <strong>✦ Show Effective</strong> to see what actually applies in each project. Hover any category pill for its specific rule.`;
   tree.parentElement.insertBefore(notice, tree);
   document.getElementById("scopeNoticeDismiss").addEventListener("click", () => {
     localStorage.setItem(NOTICE_KEY, "1");
@@ -383,6 +386,30 @@ function updateHarnessSelector() {
   select.disabled = harnesses.length <= 1;
 }
 
+function updateHarnessBranding() {
+  const harness = getHarnessDescriptor();
+  const name = getHarnessName();
+  const shortName = getHarnessShortName();
+  const icon = harness.icon || "✳️";
+  const executable = getHarnessExecutable();
+
+  document.title = `${name} Organizer`;
+  const logo = document.getElementById("harnessLogoIcon");
+  if (logo) logo.textContent = icon;
+  const title = document.getElementById("sidebarTitle");
+  if (title) title.textContent = `${shortName} Organizer`;
+  const loading = document.getElementById("loading");
+  if (loading) loading.textContent = `Scanning ${name} inventory...`;
+  const promptLabel = document.getElementById("detailPromptLabel");
+  if (promptLabel) promptLabel.textContent = `${shortName} Prompt`;
+  const footerHint = document.getElementById("sidebarFooterHint");
+  if (footerHint) {
+    footerHint.innerHTML = executable === "claude"
+      ? `Type <code>/cco</code> in ${esc(name)} to reopen`
+      : `Selected harness: <code>${esc(executable)}</code>`;
+  }
+}
+
 function updateCapabilityVisibility() {
   const ctxBtn = document.getElementById("ctxBudgetBtn");
   const mcpBtn = document.getElementById("mcpControlsBtn");
@@ -903,6 +930,7 @@ function renderAll() {
   normalizeState();
   updateCapabilityVisibility();
   updateHarnessSelector();
+  updateHarnessBranding();
   renderSidebar();
   renderContentHeader();
   renderPills();
@@ -1702,6 +1730,11 @@ function getHarnessName() {
   return harness.displayName || harness.shortName || harness.id || "Selected Harness";
 }
 
+function getHarnessShortName() {
+  const harness = getHarnessDescriptor();
+  return harness.shortName || harness.displayName || harness.id || "Harness";
+}
+
 function getHarnessExecutable() {
   return getHarnessDescriptor().executable || selectedHarnessId || "harness";
 }

src/ui/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
-  <title>Claude Code Organizer</title>
+  <title>Harness Organizer</title>
   <link rel="stylesheet" href="/style.css">
   <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/marked@15/marked.min.js"></script>
@@ -12,10 +12,10 @@
   <div class="app" id="app">
     <div class="sidebar" id="sidebar">
       <div class="sidebar-hdr">
-        <div class="sidebar-logo">
-          <svg viewBox="0 0 248 248" fill="none" aria-hidden="true"><path d="M52.4285 162.873L98.7844 136.879L99.5485 134.602L98.7844 133.334H96.4921L88.7237 132.862L62.2346 132.153L39.3113 131.207L17.0249 130.026L11.4214 128.844L6.2 121.873L6.7094 118.447L11.4214 115.257L18.171 115.847L33.0711 116.911L55.485 118.447L71.6586 119.392L95.728 121.873H99.5485L100.058 120.337L98.7844 119.392L97.7656 118.447L74.5877 102.732L49.4995 86.1905L36.3823 76.62L29.3779 71.7757L25.8121 67.2858L24.2839 57.3608L30.6515 50.2716L39.3113 50.8623L41.4763 51.4531L50.2636 58.1879L68.9842 72.7209L93.4357 90.6804L97.0015 93.6343L98.4374 92.6652L98.6571 91.9801L97.0015 89.2625L83.757 65.2772L69.621 40.8192L63.2534 30.6579L61.5978 24.632C60.9565 22.1032 60.579 20.0111 60.579 17.4246L67.8381 7.49965L71.9133 6.19995L81.7193 7.49965L85.7946 11.0443L91.9074 24.9865L101.714 46.8451L116.996 76.62L121.453 85.4816L123.873 93.6343L124.764 96.1155H126.292V94.6976L127.566 77.9197L129.858 57.3608L132.15 30.8942L132.915 23.4505L136.608 14.4708L143.994 9.62643L149.725 12.344L154.437 19.0788L153.8 23.4505L150.998 41.6463L145.522 70.1215L141.957 89.2625H143.994L146.414 86.7813L156.093 74.0206L172.266 53.698L179.398 45.6635L187.803 36.802L193.152 32.5484H203.34L210.726 43.6549L207.415 55.1159L196.972 68.3492L188.312 79.5739L175.896 96.2095L168.191 109.585L168.882 110.689L170.738 110.53L198.755 104.504L213.91 101.787L231.994 98.7149L240.144 102.496L241.036 106.395L237.852 114.311L218.495 119.037L195.826 123.645L162.07 131.592L161.696 131.893L162.137 132.547L177.36 133.925L183.855 134.279H199.774L229.447 136.524L237.215 141.605L241.8 147.867L241.036 152.711L229.065 158.737L213.019 154.956L175.45 145.977L162.587 142.787H160.805V143.85L171.502 154.366L191.242 172.089L215.82 195.011L217.094 200.682L213.91 205.172L210.599 204.699L188.949 188.394L180.544 181.069L161.696 165.118H160.422V166.772L164.752 173.152L187.803 207.771L188.949 218.405L187.294 221.832L181.308 223.959L174.813 222.777L161.187 203.754L147.305 182.486L136.098 163.345L134.745 164.2L128.075 235.42L125.019 239.082L117.887 241.8L111.902 237.31L108.718 229.984L111.902 215.452L115.722 196.547L118.779 181.541L121.58 162.873L123.291 156.636L123.14 156.219L121.773 156.449L107.699 175.752L86.304 204.699L69.3663 222.777L65.291 224.431L58.2867 220.768L58.9235 214.27L62.8713 208.48L86.304 178.705L100.44 160.155L109.551 149.507L109.462 147.967L108.959 147.924L46.6977 188.512L35.6182 189.93L30.7788 185.44L31.4156 178.115L33.7079 175.752L52.4285 162.873Z" fill="#fff"/></svg>
+        <div class="sidebar-logo" id="harnessLogo">
+          <span class="harness-logo-icon" id="harnessLogoIcon">✳️</span>
         </div>
-        <span class="sidebar-title">Claude Code Organizer</span>
+        <span class="sidebar-title" id="sidebarTitle">Harness Organizer</span>
         <span style="flex:1"></span>
         <button class="theme-btn" id="treeViewBtn" type="button" title="Toggle tree view (shows filesystem structure)">🌲</button>
         <button class="theme-btn" id="collapseAllBtn" type="button" title="Collapse all scopes">▤</button>
@@ -30,7 +30,7 @@
         <button class="sidebar-export-btn" id="exportBtn" type="button">☁ Backup Center</button>
         <a href="https://github.com/mcpware/claude-code-organizer" target="_blank" rel="noopener">⭐ Star me on GitHub</a>
         <a href="https://github.com/mcpware/claude-code-organizer/issues" target="_blank" rel="noopener">💡 Bug? Feedback? Same-day fix promise</a>
-        <span class="sidebar-footer-hint">Type <code>/cco</code> in Claude Code to reopen</span>
+        <span class="sidebar-footer-hint" id="sidebarFooterHint">Scanning selected harness...</span>
       </div>
     </div>
 
@@ -54,7 +54,7 @@
       </div>
 
       <div class="item-list" id="itemList"></div>
-      <div class="empty-state" id="loading">Scanning ~/.claude/ ...</div>
+      <div class="empty-state" id="loading">Scanning selected harness...</div>
     </div>
 
     <div class="resizer" id="resizerRight"></div>
@@ -132,7 +132,7 @@ <h2 id="detailTitle">Select an item</h2>
       </div>
 
       <div class="detail-cc-actions hidden" id="detailCcActions">
-        <div class="d-label">Claude Code Prompt</div>
+        <div class="d-label" id="detailPromptLabel">Harness Prompt</div>
         <div class="cc-btn-row" id="ccBtnRow"></div>
       </div>
       <div class="detail-footer">

src/ui/style.css

@@ -157,9 +157,46 @@ body {
   flex-shrink: 0;
 }
 
-.sidebar-logo svg { width: 16px; height: 16px; }
+.harness-logo-icon {
+  color: #fff;
+  font-size: 1rem;
+  line-height: 1;
+}
 .sidebar-title { font-size: 0.95rem; font-weight: 900; color: var(--sidebar-text-bright); letter-spacing: -0.3px; }
 
+.harness-selector-wrap {
+  margin: 10px 12px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.harness-selector-label {
+  font-size: 0.58rem;
+  font-weight: 900;
+  color: var(--sidebar-text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.harness-selector {
+  width: 100%;
+  height: 32px;
+  border-radius: 6px;
+  border: 1px solid var(--sidebar-border);
+  background: oklch(0.18 0.03 185);
+  color: var(--sidebar-text-bright);
+  font-family: inherit;
+  font-size: 0.78rem;
+  font-weight: 700;
+  outline: none;
+  padding: 0 9px;
+}
+
+.harness-selector:focus { border-color: var(--accent); }
+.harness-selector:disabled { opacity: 0.7; }
+.dark .harness-selector { background: oklch(0.10 0.02 185); }
+
 .sidebar-search {
   margin: 10px 12px;
   padding: 7px 12px;