@matterfact/embed 0.7.0 → 0.9.0

package/examples/embed-demo/src/HoistDemo.tsx

@@ -0,0 +1,390 @@
+import { useState } from 'react';
+import type { ReactNode } from 'react';
+import { MatterfactAgent } from '@matterfact/embed/react';
+import { config } from './config';
+import { PlacementSwitch, usePlacement } from './placement';
+import {
+  useMockXH,
+  mockNavigate,
+  selectHolding,
+  getHoldings,
+  getOwnershipRows,
+  getPriceSeries,
+} from './mockXH';
+
+type NavPolicy = 'off' | 'confirm' | 'auto';
+
+/**
+ * The `?hoist=1` demo: the SAME Meridian Capital portfolio App.tsx renders, but
+ * with NOTHING declared to the agent by hand — `window.XH` (installed by
+ * mockXH.ts, before this ever mounts) is all `<MatterfactAgent>` needs. No
+ * `getPageContext` prop here on purpose: leaving it unset is what lets the SDK's
+ * automatic Hoist detection run (see @matterfact/embed's context.ts —
+ * `resolveDeclaredContext` only reaches the Hoist fallback when no declared
+ * context source is present).
+ */
+export function HoistDemo() {
+  const { name, params, selection } = useMockXH();
+  const [panelOpen, setPanelOpen] = useState(true);
+  const [placement, setPlacement] = usePlacement();
+  const [navPolicy, setNavPolicy] = useState<NavPolicy>('confirm');
+  const ticker = params.ticker;
+  const onCompanyPage = name.startsWith('default.company.ticker');
+
+  return (
+    <div
+      className="app"
+      data-panel={panelOpen ? 'open' : 'closed'}
+      data-placement={placement}
+    >
+      <header>
+        <div className="brand">
+          <span className="mark">M</span> Meridian Capital{' '}
+          <small>· Hoist mock</small>
+        </div>
+        <nav>
+          <NavButton
+            active={name === 'default.holdings'}
+            onClick={() => mockNavigate('default.holdings')}
+          >
+            Holdings
+          </NavButton>
+          <NavButton
+            active={name === 'default.research'}
+            onClick={() => mockNavigate('default.research')}
+          >
+            Research
+          </NavButton>
+          {onCompanyPage && (
+            <>
+              <span className="nav-sep">/</span>
+              <NavButton active onClick={() => {}}>
+                {ticker}
+              </NavButton>
+            </>
+          )}
+        </nav>
+        <span className="spacer" />
+        <a className="mode-link" href={location.pathname}>
+          ← Hand-declared mode
+        </a>
+        <span className="env-chip">
+          {config.env} · {config.widgetOrigin.replace(/^https?:\/\//, '')}
+        </span>
+        <label className="hoist-policy">
+          hoist.navigate
+          <select
+            value={navPolicy}
+            onChange={(e) => setNavPolicy(e.target.value as NavPolicy)}
+          >
+            <option value="off">Off</option>
+            <option value="confirm">Confirm</option>
+            <option value="auto">Auto</option>
+          </select>
+        </label>
+        <PlacementSwitch placement={placement} onChange={setPlacement} />
+        {placement === 'panel' && (
+          <button className="toggle" onClick={() => setPanelOpen((v) => !v)}>
+            <span className="dot" /> Assistant
+          </button>
+        )}
+      </header>
+
+      {/* THE CORNER — the widget's own box: it positions and sizes itself, so it
+          sits outside the layout with nothing wrapped around it. */}
+      {placement === 'corner' && (
+        <MatterfactAgent
+          publishableKey={config.publishableKey}
+          widgetOrigin={config.widgetOrigin}
+          surface={config.surface}
+          theme={config.theme}
+          actions={{ navigate: navPolicy }}
+        />
+      )}
+
+      <div className="layout">
+        <main>
+          <HoistPage
+            routeName={name}
+            ticker={ticker}
+            selection={selection}
+            onCompanyPage={onCompanyPage}
+          />
+        </main>
+
+        {/* THE PANEL — same inline-agent pattern as App.tsx's hand-declared demo. */}
+        {placement === 'panel' && (
+          <aside>
+            <div className="panel-head">
+              <span className="mf">✦</span> matterfact assistant
+            </div>
+            <div className="agent-slot">
+              <MatterfactAgent
+                inline
+                publishableKey={config.publishableKey}
+                widgetOrigin={config.widgetOrigin}
+                surface={config.surface}
+                theme={config.theme}
+                actions={{ navigate: navPolicy }}
+                style={{ width: '100%', height: '100%' }}
+              />
+            </div>
+          </aside>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function NavButton({
+  active,
+  onClick,
+  children,
+}: {
+  active?: boolean;
+  onClick: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <button className={active ? 'active' : undefined} onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+
+function HoistPage({
+  routeName,
+  ticker,
+  selection,
+  onCompanyPage,
+}: {
+  routeName: string;
+  ticker: string;
+  selection: string | null;
+  onCompanyPage: boolean;
+}) {
+  if (onCompanyPage) {
+    const leaf = routeName.split('.').pop() ?? 'thesis';
+    return <CompanyPage ticker={ticker} leaf={leaf} />;
+  }
+  if (routeName === 'default.research') return <ResearchPage />;
+  return <HoldingsPage selection={selection} />;
+}
+
+function HoldingsPage({ selection }: { selection: string | null }) {
+  const holdings = getHoldings();
+  const selected = holdings.find((h) => h.ticker === selection);
+  return (
+    <>
+      <div className="eyebrow">Portfolio</div>
+      <h1>Holdings</h1>
+      <div className="sub">
+        {holdings.length} holdings · read live from a mock{' '}
+        <code>window.XH</code> GridModel
+      </div>
+
+      <div className="section-title">
+        Holdings{' '}
+        <span className="hint">
+          (click a row to select it · click a ticker to drill in)
+        </span>
+      </div>
+      <table>
+        <thead>
+          <tr>
+            <th>Ticker</th>
+            <th>Weight</th>
+            <th>Day</th>
+            <th>YTD</th>
+          </tr>
+        </thead>
+        <tbody>
+          {holdings.map((h) => (
+            <tr
+              key={h.ticker}
+              aria-pressed={h.ticker === selection}
+              onClick={() => selectHolding(h.ticker)}
+              style={{
+                cursor: 'pointer',
+                background:
+                  h.ticker === selection ? 'var(--surface-2)' : undefined,
+              }}
+            >
+              <td className="tick">
+                {h.ticker === selection ? '▸ ' : ''}
+                <button
+                  className="ticker-link"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    mockNavigate('default.company.ticker.thesis', {
+                      ticker: h.ticker,
+                    });
+                  }}
+                >
+                  {h.ticker}
+                </button>
+              </td>
+              <td>{h.weight}</td>
+              <td className={h.dayNeg ? 'neg' : 'pos'}>{h.day}</td>
+              <td className={h.ytdNeg ? 'neg' : 'pos'}>{h.ytd}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <p className="artifact-caption">
+        <strong>Automatic context:</strong> this table, the selection, and the
+        site map in the header are all read live out of <code>window.XH</code> —
+        nothing on this page is declared to the agent by hand. Select a row,
+        then ask <em>"what's selected?"</em>; ask the assistant to navigate to
+        Research or to a holding's Ownership tab and watch the approval card.
+      </p>
+      {selected && (
+        <p className="artifact-caption">
+          <strong>Selected:</strong> {selected.ticker} — {selected.thesis}
+        </p>
+      )}
+    </>
+  );
+}
+
+function ResearchPage() {
+  return (
+    <>
+      <div className="eyebrow">Research</div>
+      <h1>Research</h1>
+      <div className="sub">
+        No grid or chart is mounted on this page — just a route and a site-map.
+      </div>
+      <p className="artifact-caption">
+        With no GridModel or ChartModel present, the agent's page context comes
+        from the route and nav alone (<code>buildHoistContext</code> in the
+        adapter) — a good page to ask <em>"what page am I on?"</em> against.
+      </p>
+    </>
+  );
+}
+
+function CompanyPage({ ticker, leaf }: { ticker: string; leaf: string }) {
+  const holding = getHoldings().find((h) => h.ticker === ticker);
+  return (
+    <>
+      <div className="eyebrow">Company · {ticker}</div>
+      <h1>{ticker}</h1>
+      <div className="company-subnav">
+        <SubTab
+          active={leaf === 'thesis'}
+          onClick={() =>
+            mockNavigate('default.company.ticker.thesis', { ticker })
+          }
+        >
+          Thesis
+        </SubTab>
+        <SubTab
+          active={leaf === 'financials'}
+          onClick={() =>
+            mockNavigate('default.company.ticker.financials', { ticker })
+          }
+        >
+          Financials
+        </SubTab>
+        <SubTab
+          active={leaf === 'ownership'}
+          onClick={() =>
+            mockNavigate('default.company.ticker.ownership', { ticker })
+          }
+        >
+          Ownership
+        </SubTab>
+      </div>
+
+      {leaf === 'thesis' && (
+        <p className="artifact-caption" style={{ fontSize: 14 }}>
+          {holding?.thesis ?? 'No thesis on file for this ticker.'}
+        </p>
+      )}
+      {leaf === 'financials' && (
+        <>
+          <div className="section-title">Indexed price</div>
+          <Sparkline points={getPriceSeries(ticker)} />
+          <p className="artifact-caption">
+            Backed by a mock <code>ChartModel</code> with{' '}
+            <code>[timestamp, value]</code> series points — the agent sees a
+            points/min/max/last summary, never the raw series.
+          </p>
+        </>
+      )}
+      {leaf === 'ownership' && (
+        <>
+          <div className="section-title">Top holders</div>
+          <table>
+            <thead>
+              <tr>
+                <th>Holder</th>
+                <th>Shares</th>
+                <th>% Owned</th>
+              </tr>
+            </thead>
+            <tbody>
+              {getOwnershipRows(ticker).map((r) => (
+                <tr key={r.holder}>
+                  <td>{r.holder}</td>
+                  <td>{r.shares}</td>
+                  <td>{r.pct}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </>
+      )}
+    </>
+  );
+}
+
+function SubTab({
+  active,
+  onClick,
+  children,
+}: {
+  active: boolean;
+  onClick: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <button className={`subtab${active ? ' active' : ''}`} onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+
+/** A dependency-free inline line chart — visual proof that the page the agent
+ *  navigated to is a real, different view, not just a route-name change. */
+function Sparkline({ points }: { points: number[] }) {
+  if (!points.length) return null;
+  const width = 480;
+  const height = 120;
+  const min = Math.min(...points);
+  const max = Math.max(...points);
+  const span = max - min || 1;
+  const stepX = points.length > 1 ? width / (points.length - 1) : 0;
+  const d = points
+    .map(
+      (v, i) =>
+        `${i === 0 ? 'M' : 'L'} ${(i * stepX).toFixed(1)} ${(
+          height -
+          ((v - min) / span) * height
+        ).toFixed(1)}`,
+    )
+    .join(' ');
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      className="hoist-chart"
+      role="img"
+      aria-label="Indexed price chart"
+    >
+      <path d={d} fill="none" stroke="var(--accent)" strokeWidth={2} />
+    </svg>
+  );
+}

package/examples/embed-demo/src/main.tsx

@@ -1,8 +1,15 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from './App';
+import { installMockXH, isHoistModeEnabled } from './mockXH';
 import './styles.css';
 
+// Installed BEFORE React renders anything, not from an effect: the widget's mount
+// effect reads window.XH synchronously (see @matterfact/embed's context.ts —
+// start() calls advertiseTools() at the end of mount), so window.XH has to exist
+// before <MatterfactAgent> ever mounts. See mockXH.ts's doc comment.
+if (isHoistModeEnabled()) installMockXH();
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />