relay-companion 0.1.68 → 0.1.69

package/overlay/inbox.html

@@ -384,48 +384,34 @@
   .row-open-card { margin:11px 0 0; padding:11px 12px; }
   .row-open-card .td-card-actions { margin-top:0; }
 
-  /* ---- Open actions: a quiet, light-built panel. Depth from light and
-     shadow, not borders; type does the hierarchy; motion settles, never
-     bounces. ---- */
+  /* ---- Open actions: a small native-feeling action menu, not buttons.
+     One quiet inset surface, hairline-separated text rows; hierarchy from
+     weight and the single accent, never from fills, gradients, icons, or
+     explanatory subtitles. States are flat washes. Motion settles in 160ms. ---- */
   .open-actions {
-    margin:12px 0 2px; padding:6px; border-radius:16px;
-    background:color-mix(in srgb, #ffffff 62%, transparent);
-    -webkit-backdrop-filter:blur(18px) saturate(1.35);
-            backdrop-filter:blur(18px) saturate(1.35);
-    box-shadow:0 0.5px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(31,26,23,.05), 0 14px 34px -20px rgba(31,26,23,.3);
-    display:flex; flex-direction:column; gap:5px;
-    animation:oaReveal .34s var(--settle) both;
+    margin:10px 0 2px; padding:3px; border-radius:9px;
+    background:rgba(31,26,23,.028);
+    display:flex; flex-direction:column;
+    animation:oaReveal .16s var(--settle) both;
   }
   @keyframes oaReveal {
-    from { opacity:0; transform:translateY(-5px) scale(.985); }
+    from { opacity:0; transform:translateY(-2px); }
     to { opacity:1; transform:none; }
   }
-  .oa-btn {
-    display:flex; align-items:center; gap:11px; width:100%;
-    padding:10px 12px; border-radius:11px; border:0; cursor:pointer;
-    text-align:left; font-family:var(--sans); appearance:none;
-    background:transparent;
-    transition:transform .16s var(--settle), box-shadow .2s var(--settle), background-color .16s var(--settle);
-  }
-  .oa-btn:active { transform:scale(.977); }
-  .oa-primary {
-    background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff) 0%, var(--accent) 100%);
-    color:#fff;
-    box-shadow:inset 0 0.5px 0 rgba(255,255,255,.28), 0 7px 16px -9px color-mix(in srgb, var(--accent) 60%, transparent);
-  }
-  .oa-primary:hover { box-shadow:inset 0 0.5px 0 rgba(255,255,255,.28), 0 9px 20px -9px color-mix(in srgb, var(--accent) 72%, transparent); }
-  .oa-ghost { color:var(--ink); }
-  .oa-ghost:hover { background:rgba(31,26,23,.045); }
-  .oa-icon {
-    flex:0 0 auto; width:27px; height:27px; border-radius:8.5px;
-    display:flex; align-items:center; justify-content:center;
-  }
-  .oa-primary .oa-icon { background:rgba(255,255,255,.16); box-shadow:inset 0 0.5px 0 rgba(255,255,255,.22); }
-  .oa-ghost .oa-icon { background:var(--accent-soft); color:var(--accent); }
-  .oa-text { min-width:0; display:flex; flex-direction:column; }
-  .oa-label { font-size:12.5px; font-weight:600; letter-spacing:.01em; line-height:1.25; }
-  .oa-sub { font-size:10.5px; line-height:1.3; margin-top:1.5px; opacity:.72; font-weight:400; }
-  .oa-ghost .oa-sub { color:var(--muted); opacity:1; }
+  .oa-item {
+    appearance:none; border:0; background:transparent; cursor:pointer;
+    width:100%; text-align:left; border-radius:6px;
+    padding:8px 10px; font-family:var(--sans);
+    font-size:13px; font-weight:400; letter-spacing:-0.01em;
+    color:var(--ink); line-height:1.2;
+    transition:background-color .12s var(--settle);
+  }
+  .oa-item:hover { background:rgba(31,26,23,.055); }
+  .oa-item:active { background:rgba(31,26,23,.09); }
+  .oa-primary { font-weight:600; color:var(--accent); }
+  .oa-primary:hover { background:color-mix(in srgb, var(--accent) 8%, transparent); }
+  .oa-primary:active { background:color-mix(in srgb, var(--accent) 13%, transparent); }
+  .oa-sep { height:1px; margin:2px 8px; background:var(--hair-2); }
 
   /* zone label — one calm sans overline, sentence case */
   .td-label { padding:24px 16px 2px; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--muted-2); }
@@ -1549,30 +1535,17 @@
     }
   }
 
-  // The two open actions, as one quiet panel: primary hands the relay to the
-  // live session, secondary starts a fresh one. Same markup for single relays
-  // and whole threads (labels shift); data attributes stay stable for wiring.
-  const OA_ICON_CURRENT = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h13M12 7l5 5-5 5"/><path d="M21 5v14"/></svg>';
-  const OA_ICON_FRESH = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>';
+  // The two open actions, as one small text-first menu: primary hands the
+  // relay to the live session, secondary starts a fresh one. Labels carry all
+  // the meaning; data attributes stay stable for wiring and tests.
   function openActionsHtml(id, { thread } = {}) {
     const cur = thread ? `data-thread-open-current="${esc(id)}"` : `data-open-current="${esc(id)}"`;
     const fresh = thread ? `data-thread-open-fresh="${esc(id)}"` : `data-open-fresh="${esc(id)}"`;
     return `
-      <div class="open-actions row-open-card" data-stop="1">
-        <button class="oa-btn oa-primary" type="button" ${cur}>
-          <span class="oa-icon">${OA_ICON_CURRENT}</span>
-          <span class="oa-text">
-            <span class="oa-label">Open in current chat</span>
-            <span class="oa-sub">${thread ? "The whole conversation, handed to the session you’re in" : "Hands it to the session you’re already in"}</span>
-          </span>
-        </button>
-        <button class="oa-btn oa-ghost" type="button" ${fresh}>
-          <span class="oa-icon">${OA_ICON_FRESH}</span>
-          <span class="oa-text">
-            <span class="oa-label">Open in new chat</span>
-            <span class="oa-sub">${thread ? "A fresh session, seeded with every message" : "A fresh session, fully briefed"}</span>
-          </span>
-        </button>
+      <div class="open-actions row-open-card" data-stop="1" role="menu">
+        <button class="oa-item oa-primary" type="button" role="menuitem" ${cur}>${thread ? "Open Thread in Current Chat" : "Open in Current Chat"}</button>
+        <div class="oa-sep" role="separator"></div>
+        <button class="oa-item" type="button" role="menuitem" ${fresh}>${thread ? "Open Thread in New Chat" : "Open in New Chat"}</button>
       </div>`;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "relay-companion",
-  "version": "0.1.68",
+  "version": "0.1.69",
   "description": "Relay companion for ordinary messages, with dormant coordination features available only by explicit opt-in.",
   "type": "module",
   "bin": {