feat(search): global conversation search in the topbar with deep-link nav

Topbar search box → debounced crm.search → dropdown of hits (chat/mail, highlighted snippet). Clicking a hit switches to the right tab and focuses the exact thread: mail → Inbox, chat → Messenger (via the SDK's new focusThreadId, 0.1.6). Snippet HTML is escaped except the <em> highlight. Demo mode searches an in-memory set. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-23 14:07:26 +05:30
parent c874a726ef
commit 904d003d32
13 changed files with 1242 additions and 105 deletions
@@ -14,7 +14,7 @@
    "@huggingface/transformers": "^4.2.0",
    "@imgly/background-removal": "^1.7.0",
    "@insignia/iios-kernel-client": "^0.1.4",
-    "@insignia/iios-messaging-ui": "^0.1.4",
+    "@insignia/iios-messaging-ui": "^0.1.6",
    "@photo-gallery/sdk": "file:./vendor/photo-gallery-sdk",
    "@tensorflow-models/coco-ssd": "^2.2.3",
    "@tensorflow/tfjs": "^4.22.0",
@@ -1254,3 +1254,21 @@
  .dash-root .settings-card-actions { display: flex; gap: 8px; align-items: center; margin-top: 2px; }
  .dash-root .settings-card-note { font-size: 12px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
  .dash-root .settings-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; }
+
+  /* ---- Global conversation search (topbar) ---- */
+  .dash-root .gs-wrap { position: relative; }
+  .dash-root .gs-field { display: flex; align-items: center; gap: 8px; height: 40px; width: 300px; max-width: 42vw; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); }
+  .dash-root .gs-field:focus-within { border-color: var(--orange); }
+  .dash-root .gs-input { flex: 1 1 auto; border: 0; background: none; outline: none; color: var(--text); font-size: 13.5px; }
+  .dash-root .gs-input::placeholder { color: var(--muted); }
+  .dash-root .gs-pop { position: absolute; top: calc(100% + 6px); right: 0; width: 420px; max-width: 90vw; max-height: 420px; overflow-y: auto; padding: 6px; border-radius: 14px; border: 1px solid var(--border); background: var(--panel); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.55); z-index: 60; }
+  .dash-root .gs-empty { padding: 14px; font-size: 13px; color: var(--muted); text-align: center; }
+  .dash-root .gs-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 0; background: none; border-radius: 10px; cursor: pointer; text-align: left; color: var(--text); }
+  .dash-root .gs-row:hover { background: var(--panel-2); }
+  .dash-root .gs-ic { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange); }
+  .dash-root .gs-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+  .dash-root .gs-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .dash-root .gs-snippet { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .dash-root .gs-snippet em { color: var(--orange); font-style: normal; font-weight: 600; }
+  .dash-root .gs-surface { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
+  @media (max-width: 720px) { .dash-root .gs-field { width: 160px; } }
@@ -24,6 +24,13 @@ import "../../app/dashboard/dashboard.css";
 export function Dashboard() {
  const [theme, setTheme] = useState<"dark" | "light">("dark");
  const [active, setActive] = useState("dashboard");
+  // Deep link from global search: which conversation to focus once we switch tabs.
+  const [deepLink, setDeepLink] = useState<{ surface: "messenger" | "inbox"; threadId: string } | null>(null);
+
+  function navigateToConversation(surface: "messenger" | "inbox", threadId: string) {
+    setActive(surface);
+    setDeepLink({ surface, threadId });
+  }

  useEffect(() => {
    // Sync the persisted theme from localStorage (an external system) on mount.
@@ -42,15 +49,15 @@ export function Dashboard() {
    <div className="dash-root" data-theme={theme}>
      <Sidebar active={active} onSelect={setActive} />
      <div className="dash-main">
-        <Topbar theme={theme} onToggle={toggle} title={title} subtitle={subtitle} />
+        <Topbar theme={theme} onToggle={toggle} title={title} subtitle={subtitle} onNavigate={navigateToConversation} />
        <div className="dash-content">
          <ToastProvider>
            {active === "profile" ? <Profile />
              : active === "support" ? <Support />
              : active === "rules" ? <Rules />
              : active === "ai" ? <AiAssistant />
-              : active === "messenger" ? <MessengerSdk />
-              : active === "inbox" ? <InboxSdk />
+              : active === "messenger" ? <MessengerSdk focusThreadId={deepLink?.surface === "messenger" ? deepLink.threadId : null} />
+              : active === "inbox" ? <InboxSdk focusThreadId={deepLink?.surface === "inbox" ? deepLink.threadId : null} />
              : active === "settings" ? <Settings />
              : active === "gallery" ? <SmartGallery theme={theme} />
              : active === "team" ? <TeamManagement />
@@ -0,0 +1,86 @@
+"use client";
+
+// Global conversation search in the topbar: type → debounced crm.search → dropdown of hits; click a
+// hit to deep-link to exactly where it lives (mail → Inbox, chat → Messenger, on that thread).
+
+import { useEffect, useRef, useState } from "react";
+import { Icon } from "./ui";
+import { useGlobalSearch, type SearchResult } from "@/lib/search-api";
+
+/** Escape HTML but keep the engine's <em> highlight tags — so a match snippet can't inject markup. */
+function safeSnippet(s: string): string {
+  const esc = s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  return esc.replace(/&lt;em&gt;/g, "<em>").replace(/&lt;\/em&gt;/g, "</em>");
+}
+
+export function GlobalSearch({ onNavigate }: { onNavigate: (surface: "messenger" | "inbox", threadId: string) => void }) {
+  const search = useGlobalSearch();
+  const [open, setOpen] = useState(false);
+  const [q, setQ] = useState("");
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [loading, setLoading] = useState(false);
+  const wrapRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const term = q.trim();
+    if (!term) {
+      setResults([]);
+      return;
+    }
+    let alive = true;
+    setLoading(true);
+    const t = setTimeout(() => {
+      search(term)
+        .then((r) => { if (alive) setResults(r); })
+        .catch(() => { if (alive) setResults([]); })
+        .finally(() => { if (alive) setLoading(false); });
+    }, 220);
+    return () => { alive = false; clearTimeout(t); };
+  }, [q, search]);
+
+  useEffect(() => {
+    function onDown(e: MouseEvent) {
+      if (!wrapRef.current?.contains(e.target as Node)) setOpen(false);
+    }
+    document.addEventListener("mousedown", onDown);
+    return () => document.removeEventListener("mousedown", onDown);
+  }, []);
+
+  function pick(r: SearchResult) {
+    onNavigate(r.surface, r.threadId);
+    setOpen(false);
+    setQ("");
+  }
+
+  return (
+    <div className="gs-wrap" ref={wrapRef}>
+      <div className="gs-field">
+        <Icon name="search" size={16} />
+        <input
+          className="gs-input"
+          placeholder="Search conversations…"
+          value={q}
+          onFocus={() => setOpen(true)}
+          onChange={(e) => { setQ(e.target.value); setOpen(true); }}
+          aria-label="Search conversations"
+        />
+      </div>
+      {open && q.trim() ? (
+        <div className="gs-pop">
+          {loading && results.length === 0 ? <div className="gs-empty">Searching…</div> : null}
+          {!loading && results.length === 0 ? <div className="gs-empty">No matches.</div> : null}
+          {results.map((r) => (
+            <button key={r.interactionId} type="button" className="gs-row" onClick={() => pick(r)}>
+              <span className="gs-ic"><Icon name={r.surface === "inbox" ? "mail" : "send"} size={14} /></span>
+              <span className="gs-main">
+                <span className="gs-title">{r.title}</span>
+                <span className="gs-snippet" dangerouslySetInnerHTML={{ __html: safeSnippet(r.snippet) }} />
+              </span>
+              <span className="gs-surface">{r.surface === "inbox" ? "Mail" : "Chat"}</span>
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
@@ -15,7 +15,7 @@ import type { DataDoor } from "@/lib/crm-messaging-adapter";

 const SHELL = isShellConfigured();

-export function InboxSdk() {
+export function InboxSdk({ focusThreadId }: { focusThreadId?: string | null } = {}) {
  return (
    <div className="view">
      {!SHELL && (
@@ -23,26 +23,26 @@ export function InboxSdk() {
          Demo mode — running on the SDK&apos;s mock inbox adapter.
        </div>
      )}
-      <div className="miu-host miu-host-inbox">{SHELL ? <LiveInbox /> : <DemoInbox />}</div>
+      <div className="miu-host miu-host-inbox">{SHELL ? <LiveInbox focusThreadId={focusThreadId} /> : <DemoInbox focusThreadId={focusThreadId} />}</div>
    </div>
  );
 }

-function DemoInbox() {
+function DemoInbox({ focusThreadId }: { focusThreadId?: string | null }) {
  const adapter = useMemo<InboxAdapter>(() => new MockInboxAdapter(), []);
  return (
    <InboxProvider adapter={adapter}>
-      <SdkInbox />
+      <SdkInbox focusThreadId={focusThreadId} />
    </InboxProvider>
  );
 }

-function LiveInbox() {
+function LiveInbox({ focusThreadId }: { focusThreadId?: string | null }) {
  const { sdk } = useAppShell();
  const adapter = useMemo<InboxAdapter>(() => new CrmInboxAdapter(sdk as unknown as DataDoor), [sdk]);
  return (
    <InboxProvider adapter={adapter}>
-      <SdkInbox />
+      <SdkInbox focusThreadId={focusThreadId} />
    </InboxProvider>
  );
 }
@@ -37,7 +37,7 @@ function useRealtimeSocket(): MessageSocket | null {

 const SHELL = isShellConfigured();

-export function MessengerSdk() {
+export function MessengerSdk({ focusThreadId }: { focusThreadId?: string | null } = {}) {
  return (
    <div className="view">
      {!SHELL && (
@@ -55,23 +55,23 @@ export function MessengerSdk() {
          Demo mode — running on the SDK&apos;s mock adapter.
        </div>
      )}
-      <div className="miu-host">{SHELL ? <LiveHost /> : <DemoHost />}</div>
+      <div className="miu-host">{SHELL ? <LiveHost focusThreadId={focusThreadId} /> : <DemoHost focusThreadId={focusThreadId} />}</div>
    </div>
  );
 }

 // SHELL is a build-time constant, so exactly one of these mounts for the life of the app
 // (Rules-of-Hooks safe — the other branch never renders).
-function DemoHost() {
+function DemoHost({ focusThreadId }: { focusThreadId?: string | null }) {
  const adapter = useMemo<MessagingAdapter>(() => new MockAdapter(), []);
  return (
    <MessagingProvider adapter={adapter}>
-      <SdkMessenger />
+      <SdkMessenger focusThreadId={focusThreadId} />
    </MessagingProvider>
  );
 }

-function LiveHost() {
+function LiveHost({ focusThreadId }: { focusThreadId?: string | null }) {
  const { sdk } = useAppShell();
  const { user } = useAuth();
  const socket = useRealtimeSocket();
@@ -83,7 +83,7 @@ function LiveHost() {
  if (!adapter) return <div className="miu-empty">Loading…</div>;
  return (
    <MessagingProvider adapter={adapter}>
-      <SdkMessenger />
+      <SdkMessenger focusThreadId={focusThreadId} />
    </MessagingProvider>
  );
 }
@@ -5,13 +5,14 @@ import { useRouter } from "next/navigation";
 import { Sun, Moon, ChevronDown, LogOut } from "lucide-react";
 import { useAuth } from "@abe-kap/appshell-sdk/react";
 import { Icon } from "./ui";
+import { GlobalSearch } from "./global-search";
 import { user } from "./account-data";

 function initialsOf(name: string): string {
  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]).join("").toUpperCase() || "?";
 }

-export function Topbar({ theme, onToggle, title, subtitle }: { theme: "dark" | "light"; onToggle: () => void; title: string; subtitle: string }) {
+export function Topbar({ theme, onToggle, title, subtitle, onNavigate }: { theme: "dark" | "light"; onToggle: () => void; title: string; subtitle: string; onNavigate: (surface: "messenger" | "inbox", threadId: string) => void }) {
  // When signed in through the Shell, show the real identity from the App Context
  // Envelope; otherwise fall back to the static demo user.
  const router = useRouter();
@@ -35,7 +36,7 @@ export function Topbar({ theme, onToggle, title, subtitle }: { theme: "dark" | "
        <p>{subtitle}</p>
      </div>
      <div className="top-actions">
-        <button className="ic-btn" aria-label="Search"><Icon name="search" size={18} /></button>
+        <GlobalSearch onNavigate={onNavigate} />
        <button className="ic-btn" aria-label="Toggle theme" onClick={onToggle}>
          {theme === "dark" ? <Moon size={18} /> : <Sun size={18} />}
        </button>
@@ -0,0 +1,50 @@
+"use client";
+
+// Global conversation search. Live path calls the be-crm data door (crm.search → IIOS Meilisearch,
+// permission-scoped there); demo path filters a small in-memory set. Search is imperative (the query
+// changes on every keystroke), so it uses sdk.query directly rather than the cached useQuery hook.
+
+import { useCallback } from "react";
+import { useAppShell } from "@abe-kap/appshell-sdk/react";
+import { isShellConfigured } from "./appshell";
+
+export interface SearchResult {
+  interactionId: string;
+  threadId: string;
+  surface: "messenger" | "inbox";
+  title: string;
+  /** Snippet with <em>…</em> around the matched terms. */
+  snippet: string;
+  at: number;
+}
+
+export type SearchFn = (query: string) => Promise<SearchResult[]>;
+
+const MOCK: SearchResult[] = [
+  { interactionId: "s1", threadId: "th_mock_1", surface: "messenger", title: "Sofia Ramirez", snippet: "Can you confirm the <em>Henderson</em> scope?", at: Date.now() },
+  { interactionId: "s2", threadId: "th_mock_2", surface: "messenger", title: "Storm response — East side", snippet: "Crew is <em>rolling</em> out at 7", at: Date.now() },
+  { interactionId: "s3", threadId: "mt_invoice", surface: "inbox", title: "Invoice #1042 — Acme Roofing", snippet: "Attached is <em>invoice</em> #1042 for the East-side job", at: Date.now() },
+];
+
+const SHELL = isShellConfigured();
+
+function useLiveSearch(): SearchFn {
+  const { sdk } = useAppShell();
+  return useCallback(async (query: string) => {
+    const q = query.trim();
+    if (!q) return [];
+    return sdk.query<SearchResult[]>("crm.search", { query: q, limit: 20 });
+  }, [sdk]);
+}
+
+function useMockSearch(): SearchFn {
+  return useCallback(async (query: string) => {
+    const q = query.trim().toLowerCase();
+    if (!q) return [];
+    return MOCK.filter((m) => (m.title + " " + m.snippet).toLowerCase().includes(q));
+  }, []);
+}
+
+export function useGlobalSearch(): SearchFn {
+  return SHELL ? useLiveSearch() : useMockSearch();
+}
@@ -1,16 +0,0 @@
-#!/bin/sh
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*)
-        if command -v cygpath > /dev/null 2>&1; then
-            basedir=`cygpath -w "$basedir"`
-        fi
-    ;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../nanoid/bin/nanoid.js" "$@"
-else 
-  exec node  "$basedir/../nanoid/bin/nanoid.js" "$@"
-fi
@@ -0,0 +1 @@
+../nanoid/bin/nanoid.js
@@ -1,17 +0,0 @@
-@ECHO off
-GOTO start
-:find_dp0
-SET dp0=%~dp0
-EXIT /b
-:start
-SETLOCAL
-CALL :find_dp0
-
-IF EXIST "%dp0%\node.exe" (
-  SET "_prog=%dp0%\node.exe"
-) ELSE (
-  SET "_prog=node"
-  SET PATHEXT=%PATHEXT:;.JS;=;%
-)
-
-endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\nanoid\bin\nanoid.js" %*
@@ -1,28 +0,0 @@
-#!/usr/bin/env pwsh
-$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
-
-$exe=""
-if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
-  # Fix case when both the Windows and Linux builds of Node
-  # are installed in the same directory
-  $exe=".exe"
-}
-$ret=0
-if (Test-Path "$basedir/node$exe") {
-  # Support pipeline input
-  if ($MyInvocation.ExpectingInput) {
-    $input | & "$basedir/node$exe"  "$basedir/../nanoid/bin/nanoid.js" $args
-  } else {
-    & "$basedir/node$exe"  "$basedir/../nanoid/bin/nanoid.js" $args
-  }
-  $ret=$LASTEXITCODE
-} else {
-  # Support pipeline input
-  if ($MyInvocation.ExpectingInput) {
-    $input | & "node$exe"  "$basedir/../nanoid/bin/nanoid.js" $args
-  } else {
-    & "node$exe"  "$basedir/../nanoid/bin/nanoid.js" $args
-  }
-  $ret=$LASTEXITCODE
-}
-exit $ret