Update README wording and improve browser extension message compacting behavior

Author: robertpiosik

README.md

@@ -6,7 +6,7 @@ CWC is a context-first AI coding extension with first-class support for [prompt
 
 Works with VS Code family of editors (Cursor, Antigravity, VSCodium).
 
-✅ **Send prompts anywhere**
+✅ **Prepare messages for...**
 
 - Chatbots—_ChatGPT, Claude, Gemini, Grok, DeepSeek, etc._
 - Model providers—_Gemini API, OpenRouter, local Ollama, etc._

packages/ui/src/components/editor/panel/BrowserExtensionMessage/BrowserExtensionMessage.module.scss

@@ -1,7 +1,4 @@
 .container {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
   padding: 6px 8px 8px 8px;
   margin-bottom: calc(5px * -1);
   background: linear-gradient(
@@ -17,6 +14,9 @@
 
 .heading {
   font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .links {
@@ -27,7 +27,7 @@
     white-space: nowrap;
 
     &:first-child {
-      margin-right: 10px;
+      margin-right: 8px;
     }
   }
 }

packages/ui/src/components/editor/panel/BrowserExtensionMessage/BrowserExtensionMessage.tsx

@@ -1,17 +1,37 @@
+import { useLayoutEffect, useRef } from 'react'
+
+import { use_compacting } from '@shared/hooks/use-compacting'
 import styles from './BrowserExtensionMessage.module.scss'
 
 export const BrowserExtensionMessage: React.FC = () => {
+  const { container_ref, compact_step, report_width } = use_compacting(2)
+  const links_ref = useRef<HTMLDivElement>(null)
+
+  useLayoutEffect(() => {
+    if (links_ref.current) {
+      let width = 0
+      const children = links_ref.current.children
+      for (let i = 0; i < children.length; i++) {
+        const child = children[i] as HTMLElement
+        const style = getComputedStyle(child)
+        width +=
+          child.offsetWidth +
+          parseFloat(style.marginLeft) +
+          parseFloat(style.marginRight)
+      }
+      report_width(width, compact_step)
+    }
+  }, [compact_step, report_width])
+
   return (
-    <div className={styles.container}>
-      <div className={styles.heading}>
-        Install Connector for chat initializations
-      </div>
-      <div className={styles.links}>
+    <div ref={container_ref} className={styles.container}>
+      <div className={styles.heading}>Install the Connector for auto-fill</div>
+      <div ref={links_ref} className={styles.links}>
         <a href="https://chromewebstore.google.com/detail/code-web-chat-connector/ljookipcanaglfaocjbgdicfbdhhjffp">
-          Chrome Web Store
+          {compact_step >= 2 ? 'Chrome' : 'Chrome Web Store'}
         </a>
         <a href="https://addons.mozilla.org/en-US/firefox/addon/code-web-chat-connector/">
-          Firefox Add-ons
+          {compact_step >= 1 ? 'Firefox' : 'Firefox Add-ons'}
         </a>
       </div>
     </div>