@ikenga/pkg-sales 0.2.0 → 0.4.0

package/dist/app.js

@@ -126,6 +126,12 @@ function App() {
   const [bridgeReady, setBridgeReady] = useState(false);
   const [bridgeError, setBridgeError] = useState(null);
   const [activeFeature, setActiveFeature] = useState(null);
+  // Operator identity (hostContext.operator — see @ikenga/contract's
+  // host-context.ts). OPTIONAL: absent means unknown operator, standalone
+  // dev never sets it. Threaded down as a plain id/label pair, same shape
+  // as activeFeature, so the view fails safe instead of assuming a default.
+  const [operatorId, setOperatorId] = useState(null);
+  const [operatorLabel, setOperatorLabel] = useState(null);
 
   useEffect(() => {
     if (isStandalone()) {
@@ -138,11 +144,17 @@ function App() {
       onContextChange: (ctx) => {
         const af = ctx?.royaltiSuite?.activeFeature;
         if (typeof af === 'string') setActiveFeature(af);
+        const op = ctx?.operator;
+        setOperatorId(typeof op?.id === 'string' ? op.id : null);
+        setOperatorLabel(typeof op?.displayName === 'string' ? op.displayName : (typeof op?.id === 'string' ? op.id : null));
       },
     })
       .then((ctx) => {
         const af = ctx?.royaltiSuite?.activeFeature;
         if (typeof af === 'string') setActiveFeature(af);
+        const op = ctx?.operator;
+        setOperatorId(typeof op?.id === 'string' ? op.id : null);
+        setOperatorLabel(typeof op?.displayName === 'string' ? op.displayName : (typeof op?.id === 'string' ? op.id : null));
         setBridgeReady(true);
       })
       .catch((e) => setBridgeError(e.message ?? String(e)));
@@ -155,7 +167,7 @@ function App() {
     return html`<div style=${{ padding: '2rem', color: 'var(--fg-muted)' }}>Connecting…</div>`;
   }
 
-  return html`<${QueryClientProvider} client=${queryClient}><${SalesView} activeFeature=${activeFeature} /></${QueryClientProvider}>`;
+  return html`<${QueryClientProvider} client=${queryClient}><${SalesView} activeFeature=${activeFeature} operatorId=${operatorId} operatorLabel=${operatorLabel} /></${QueryClientProvider}>`;
 }
 
 createRoot(document.getElementById('root')).render(html`<${App} />`);

package/dist/features/sales/sales-view.js

@@ -11,7 +11,7 @@
 //   - .kb-board / .kb-col / .kb-card / .kb-mini-avatar / .kb-add (part 28 kanban)
 //   - .nav-group[data-kind] / .nav-item / .nav-item.is-on / .nav-item.is-hot (part 22)
 //   - .seg.nav-view-seg / .seg button.is-on (part 14 segmented-tabs, list-kanban-switch)
-//   - .atelier-state.is-{loading,empty,error,streaming} / .atelier-spin (part 26 feedback-state)
+//   - .atelier-state.is-{loading,empty,error} / .atelier-spin (part 26 feedback-state)
 //   - .stage-chip / .next-chip / .ux-dot / .badge / .tag / .chip (part 11 badge-tag-chip)
 //   - .btn / .btn-icon / .btn-sm / .btn.affirmative (part 10 buttons)
 //
@@ -31,6 +31,17 @@ import {
   useQuery, useMutation, useQueryClient,
 } from '../../lib/ui.js';
 import { hostDbQuery, hostDbExec, setMenu, isStandalone } from '../../lib/bridge.js';
+// create-wire recipe: dead "+ / New deal" buttons dispatch a creation brief to
+// the Chi (R-03: a deal is agent-shaped, never a client-side husk INSERT).
+import { buildCreateBrief, dispatchCreate } from '../../lib/create-dispatch.js';
+// dispatch-wire recipe: deal-detail "Approve & run"/"Confirm & run" seed a
+// structured next-action turn into the active Chi (host.sendToActiveSession).
+import { dispatchItemAction } from '../../lib/dispatch.js';
+// facet-wire recipe: sidebar filter facets (f:*) narrow the pipeline list/kanban.
+import { applyFacet } from '../../lib/facet-filter.js';
+// operator-identity recipe: hostContext.operator threaded down from app.js —
+// "mine" predicates/fallbacks fail safe (empty/unclaimed) when unknown.
+import { isMine } from '../../lib/operator.js';
 
 // ─── Stage enum ───────────────────────────────────────────────────────────────
 // Per the R-04 Pipeline-stages convention (06-skill-action-contract.md §Pipeline-stages).
@@ -131,7 +142,7 @@ async function fetchOpenDeals() {
   }
 }
 
-async function fetchWonDeals() {
+async function fetchWonDeals(operatorId) {
   if (isStandalone()) return WON_DEALS_FIXTURE;
   try {
     const rows = await hostDbQuery(
@@ -145,7 +156,7 @@ async function fetchWonDeals() {
     return rows.map((r) => ({
       ...r,
       title: r.title ?? r.company,
-      owner: r.owner ?? r.assigned_to ?? 'nedjamez',
+      owner: r.owner ?? r.assigned_to ?? operatorId ?? null,
       closed: r.last_contact ? r.last_contact.substring(0, 10) : '—',
       value: typeof r.value === 'string' ? parseFloat(r.value) || 0 : (r.value ?? 0),
     }));
@@ -186,6 +197,51 @@ function fmtPct(v) {
   return `${Math.round(v * 100)}%`;
 }
 
+// ─── dispatch-wire (RECIPE 1) ─────────────────────────────────────────────────
+// Map a deal row into the recipe-shared descriptor, then seed a next-action turn
+// into the active Chi. A deal is agent-shaped, so "Approve & run"/"Confirm & run"
+// dispatch a structured turn (host.sendToActiveSession) rather than committing
+// headlessly — there is no domain-run verb today (see lib/dispatch.js APPROVE-RUN GAP).
+
+function dealToDispatchItem(deal) {
+  return {
+    kind: 'deal',
+    title: deal.title ?? deal.company,
+    stage: STAGE_LABEL[deal.stage] ?? deal.stage,
+    nextAction: deal.next_action,
+    facts: [
+      ['Company', deal.company],
+      ['Owner', deal.owner ?? deal.assigned_to],
+      ['Value', deal.value != null ? fmtCurrency(deal.value) : null],
+    ],
+  };
+}
+
+function handleAction(deal) {
+  const mode = deal.next_action_mode === 'approve' ? 'approve' : 'confirm';
+  dispatchItemAction(dealToDispatchItem(deal), mode, 'com.ikenga.sales').catch(() => {});
+}
+
+// ─── facet-wire (RECIPE 2) ────────────────────────────────────────────────────
+// Sales' "all" affordance is 'f:open-pipeline' (not the generic 'f:all'), so the
+// reset id is passed explicitly to applyFacet. Each predicate expression MIRRORS
+// its badge-count expression in buildSalesMenu so a facet's slice always matches
+// the count shown on its row (facet-wire pitfall 2).
+
+const SALES_RESET_FACET = 'f:open-pipeline';
+
+/** operatorId-parameterized so 'f:my-deals' fails safe (matches nothing) when
+ *  the operator is unknown — see lib/operator.js. */
+function salesFacetPredicates(operatorId) {
+  return {
+    'f:my-deals':     (d) => isMine(d.owner, operatorId) || isMine(d.assigned_to, operatorId),
+    'f:closing-soon': (d) => d.next_action_mode === 'approve',
+    'f:agent-run':    (d) => d.owner === 'sales-agent' || d.assigned_to === 'sales-agent',
+    ...Object.fromEntries(STAGES.map((s) => [`f:stage:${s}`, (d) => d.stage === s])),
+    // 'f:open-pipeline' intentionally ABSENT → SALES_RESET_FACET returns every deal.
+  };
+}
+
 // ─── Menu builder ─────────────────────────────────────────────────────────────
 
 /**
@@ -193,12 +249,15 @@ function fmtPct(v) {
  *   activeView: 0 = Pipeline | 1 = Forecast | 2 = Won
  *   pipeMode: 'list' | 'kanban' (only relevant when activeView === 0)
  *   deals: the open deals array (for counts)
+ *   operatorId: current known operator id (null when unknown — see lib/operator.js)
  */
-function buildSalesMenu(activeView, pipeMode, deals) {
+function buildSalesMenu(activeView, pipeMode, deals, activeFacet, operatorId) {
   const openCount = deals.length;
-  const myDeals = deals.filter((d) => d.owner === 'nedjamez' || d.assigned_to === 'nedjamez');
+  const myDeals = deals.filter((d) => isMine(d.owner, operatorId) || isMine(d.assigned_to, operatorId));
   const closingSoon = deals.filter((d) => d.next_action_mode === 'approve');
   const agentRun = deals.filter((d) => (d.owner === 'sales-agent' || d.assigned_to === 'sales-agent'));
+  // A facet only highlights on the Pipeline view (facets dim/inert off it).
+  const facetActive = (id) => activeView === 0 && activeFacet === id;
 
   const viewItems = [
     {
@@ -248,7 +307,7 @@ function buildSalesMenu(activeView, pipeMode, deals) {
       label: 'Open pipeline',
       icon: 'layers',
       section: 'Filters',
-      active: true,
+      active: facetActive('f:open-pipeline'),
       badge: openCount,
       disabled: activeView !== 0,
     },
@@ -257,7 +316,7 @@ function buildSalesMenu(activeView, pipeMode, deals) {
       label: 'My deals',
       icon: 'user',
       section: 'Filters',
-      active: false,
+      active: facetActive('f:my-deals'),
       badge: myDeals.length || undefined,
       disabled: activeView !== 0,
     },
@@ -266,7 +325,7 @@ function buildSalesMenu(activeView, pipeMode, deals) {
       label: 'Closing soon',
       icon: 'zap',
       section: 'Filters',
-      active: false,
+      active: facetActive('f:closing-soon'),
       hot: closingSoon.length > 0,
       badge: closingSoon.length > 0 ? closingSoon.length : undefined,
       disabled: activeView !== 0,
@@ -276,7 +335,7 @@ function buildSalesMenu(activeView, pipeMode, deals) {
       label: 'Agent-run',
       icon: 'cpu',
       section: 'Filters',
-      active: false,
+      active: facetActive('f:agent-run'),
       badge: agentRun.length || undefined,
       disabled: activeView !== 0,
     },
@@ -286,7 +345,7 @@ function buildSalesMenu(activeView, pipeMode, deals) {
     id: `f:stage:${s}`,
     label: STAGE_LABEL[s],
     section: 'By stage',
-    active: false,
+    active: facetActive(`f:stage:${s}`),
     badge: deals.filter((d) => d.stage === s).length || undefined,
     disabled: activeView !== 0,
   }));
@@ -335,6 +394,12 @@ function DealRow({ deal, isSelected, onClick }) {
 
 /** Deal detail pane */
 function DealDetail({ deal, activities }) {
+  // dispatch-wire — local feedback: flips true on click so the operator sees the
+  // hand-off landed and the same click can't double-seed the session. Resets when
+  // the selected deal changes.
+  const [sent, setSent] = useState(false);
+  useEffect(() => { setSent(false); }, [deal?.id]);
+
   if (!deal) {
     return html`<div class="ip-split-pane split-detail" style=${{ display:'flex', alignItems:'center', justifyContent:'center', color:'var(--fg-muted)', fontSize:'0.85rem' }}>
       Select a deal
@@ -344,12 +409,19 @@ function DealDetail({ deal, activities }) {
   const hasApprove = deal.next_action_mode === 'approve';
   const hasConfirm = deal.next_action_mode === 'confirm';
   const showButton = hasApprove || hasConfirm;
+  const onAct = () => { handleAction(deal); setSent(true); };
 
   return html`
     <div class="ip-split-pane split-detail" style=${{ overflowY:'auto' }}>
       <div class="split-detail-wrap">
         <div class="split-detail-eyebrow">
           <span class="stage-chip">${STAGE_LABEL[deal.stage] ?? deal.stage}</span>
+          ${deal.next_action_mode ? html`
+            <span class="next-chip">
+              <span class=${cn('ux-dot', `ux-${deal.next_action_mode}`)}></span>
+              ux_mode · ${deal.next_action_mode}
+            </span>
+          ` : null}
         </div>
         <div class="split-detail-title">${deal.title ?? deal.company}</div>
         <div class="split-detail-sub">${deal.company}${deal.owner ? ` · ${deal.owner}` : ''}</div>
@@ -371,8 +443,13 @@ function DealDetail({ deal, activities }) {
               ${deal.next_action}
               ${showButton ? html`
                 <div style=${{ marginTop: '10px' }}>
-                  <button class=${cn('btn', hasApprove ? 'affirmative' : '')} type="button">
-                    ${hasApprove ? 'Approve & run' : 'Confirm & run'}
+                  <button
+                    class=${cn('btn', hasApprove ? 'affirmative' : '')}
+                    type="button"
+                    disabled=${sent}
+                    onClick=${onAct}
+                  >
+                    ${sent ? 'Sent to your Chi' : hasApprove ? 'Approve & run' : 'Confirm & run'}
                   </button>
                 </div>
               ` : null}
@@ -381,7 +458,7 @@ function DealDetail({ deal, activities }) {
         ` : null}
 
         ${activities && activities.length > 0 ? html`
-          <div class="split-detail-eyebrow" style=${{ marginTop:'12px' }}>Activity</div>
+          <div class="split-next-head" style=${{ marginTop:'12px' }}>Activity</div>
           <div class="split-timeline" role="list">
             ${activities.map((a) => html`
               <div class="split-tl-row" role="listitem" key=${a.id}>
@@ -446,7 +523,7 @@ function KbAvatar({ owner }) {
 }
 
 /** Pipeline kanban mode */
-function PipelineKanban({ deals, onStageChange }) {
+function PipelineKanban({ deals, onStageChange, onCreate }) {
   const [dragging, setDragging] = useState(null);
   const [dropTarget, setDropTarget] = useState(null);
 
@@ -512,7 +589,12 @@ function PipelineKanban({ deals, onStageChange }) {
                     </div>
                   </div>
                 `)}
-                <button class="kb-add btn-icon" type="button" aria-label=${'Add deal to ' + STAGE_LABEL[s]}>+</button>
+                <button
+                  class="kb-add btn-icon"
+                  type="button"
+                  aria-label=${'Add deal to ' + (STAGE_LABEL[s] ?? s)}
+                  onClick=${() => onCreate?.(s)}
+                >+</button>
               </div>
             </div>
           `;
@@ -598,7 +680,7 @@ function ForecastView({ deals }) {
             <div class="sl-month" key=${m.label}>
               <span class="sl-month-val">${fmtCurrency(m.val)}</span>
               <div class="sl-month-bar-wrap">
-                <div class="sl-month-bar" style=${{ height: `${Math.round((m.val / maxMonthVal) * 64)}px` }}></div>
+                <div class="sl-month-bar" style=${{ height: `${Math.round((m.val / maxMonthVal) * 100)}%` }}></div>
               </div>
               <span class="sl-month-lab">${m.label}</span>
             </div>
@@ -680,35 +762,40 @@ function LoadingState() {
   `;
 }
 
-function EmptyState() {
+function EmptyState({ onCreate }) {
   return html`
     <div class="atelier-state is-empty" id="view-stage">
       <span>No deals yet</span>
-      <button class="btn btn-sm" type="button" style=${{ marginTop:'8px' }}>New deal</button>
+      <button
+        class="btn btn-sm"
+        type="button"
+        style=${{ marginTop:'8px' }}
+        onClick=${() => onCreate?.()}
+      >New deal</button>
     </div>
   `;
 }
 
-function ErrorState({ error }) {
+// Error state — design STATES.error (atelier-sales-list.html:1877-1879): alert
+// icon + heading + explanation + a Retry button that refetches.
+function ErrorState({ error, onRetry }) {
   return html`
     <div class="atelier-state is-error" id="view-stage">
-      <span>Failed to load deals</span>
-      <span style=${{ fontSize:'0.72rem', color:'var(--fg-muted)', marginTop:'4px' }}>${error}</span>
-    </div>
-  `;
-}
-
-function StreamingState() {
-  return html`
-    <div class="atelier-state is-streaming" id="view-stage">
-      <span class="atelier-prog" role="status" aria-live="polite">Sales agent running…</span>
+      <svg class="ix" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M12 9v4"/><path d="M12 17h.01"/>
+        <path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/>
+      </svg>
+      <h3>Couldn’t load sales</h3>
+      <p>The source didn’t respond. Retry, or ask your Chi to check the connection.</p>
+      ${onRetry ? html`<button class="btn btn-sm" type="button" onClick=${onRetry}>Retry</button>` : null}
+      ${error ? html`<span style=${{ fontSize:'0.72rem', color:'var(--fg-muted)', marginTop:'4px' }}>${error}</span>` : null}
     </div>
   `;
 }
 
 // ─── SalesView root ───────────────────────────────────────────────────────────
 
-export function SalesView({ activeFeature }) {
+export function SalesView({ activeFeature, operatorId }) {
   // View state: 0=Pipeline | 1=Forecast | 2=Won
   const [activeView, setActiveView] = useState(() => {
     const p = new URLSearchParams(window.location.search).get('view');
@@ -717,11 +804,18 @@ export function SalesView({ activeFeature }) {
   });
   const [pipeMode, setPipeMode] = useState('list'); // 'list' | 'kanban'
   const [selectedDeal, setSelectedDeal] = useState(null);
+  // facet-wire — last-applied sidebar filter facet. 'f:open-pipeline' is the
+  // reset/"all" affordance (no predicate → applyFacet returns every deal).
+  const [activeFacet, setActiveFacet] = useState(SALES_RESET_FACET);
   const qc = useQueryClient();
 
   // ── Data queries ────────────────────────────────────────────────────────────
   const openDealsQ = useQuery({ queryKey: QK.openDeals, queryFn: fetchOpenDeals });
-  const wonDealsQ = useQuery({ queryKey: QK.wonDeals, queryFn: fetchWonDeals, enabled: activeView === 2 });
+  const wonDealsQ = useQuery({
+    queryKey: QK.wonDeals,
+    queryFn: () => fetchWonDeals(operatorId),
+    enabled: activeView === 2,
+  });
 
   const activitiesQ = useQuery({
     queryKey: QK.activities(selectedDeal?.id ?? null),
@@ -731,6 +825,14 @@ export function SalesView({ activeFeature }) {
   });
 
   const deals = openDealsQ.data ?? [];
+  // facet-wire — the visible slice: full list narrowed by the active facet.
+  // Feeds the list, kanban AND the empty-state check (so a facet that matches
+  // nothing shows the empty pane, not a stale full list). Badges stay live
+  // because buildSalesMenu counts the FULL `deals`, not this slice.
+  const visibleDeals = useMemo(
+    () => applyFacet(deals, activeFacet, salesFacetPredicates(operatorId), SALES_RESET_FACET),
+    [deals, activeFacet, operatorId],
+  );
 
   // ── db-updated refresh ──────────────────────────────────────────────────────
   useEffect(() => {
@@ -749,6 +851,13 @@ export function SalesView({ activeFeature }) {
     else if (activeFeature === 'v:won') setActiveView(2);
     else if (activeFeature === 'seg:list') setPipeMode('list');
     else if (activeFeature === 'seg:kanban') setPipeMode('kanban');
+    // Filter facets (f:*) — LIST-ONLY: force the Pipeline view so a facet the
+    // user can't see can't be silently applied, then record it. 'f:open-pipeline'
+    // resets; every other id narrows via applyFacet. (facet-wire Move 2.)
+    else if (activeFeature.startsWith('f:')) {
+      setActiveView(0);
+      setActiveFacet(activeFeature);
+    }
   }, [activeFeature]);
 
   // ── Pre-select hero deal (D-05 — Catalog onboarding · Chocolate City) ──────
@@ -762,9 +871,9 @@ export function SalesView({ activeFeature }) {
   // ── setMenu publish ─────────────────────────────────────────────────────────
   useEffect(() => {
     if (isStandalone()) return;
-    const items = buildSalesMenu(activeView, pipeMode, deals);
+    const items = buildSalesMenu(activeView, pipeMode, deals, activeFacet, operatorId);
     setMenu(items).catch(() => {/* ignore */});
-  }, [activeView, pipeMode, deals]);
+  }, [activeView, pipeMode, deals, activeFacet, operatorId]);
 
   // ── Stage change mutation (kanban drag) ─────────────────────────────────────
   const stageChange = useMutation({
@@ -778,6 +887,29 @@ export function SalesView({ activeFeature }) {
     onSuccess: () => qc.invalidateQueries({ queryKey: QK.openDeals }),
   });
 
+  // ── Dispatch-mode creation (create-wire recipe) ─────────────────────────────
+  // R-03: a deal is agent-shaped — it needs company research plus owner,
+  // next_action, next_action_mode and win_probability, and links to `contacts`.
+  // Seeding an empty client-side INSERT would leave a husk the user must
+  // hand-fill, so creation dispatches a structured brief to the active Chi
+  // session instead (host.sendToActiveSession, via lib/create-dispatch.js).
+  // `stage` is the kanban column's pre-filled context; undefined for the
+  // empty-state "New deal" which seeds a full brief.
+  const createDeal = useCallback((stage) => {
+    const label = stage ? (STAGE_LABEL[stage] ?? stage) : null;
+    const brief = buildCreateBrief({
+      entity: 'sales deal',
+      table: 'sales_deals',
+      seed: label ? { stage: label } : {},
+      instruction:
+        'Research the company, then set the title, company, owner, value, '
+        + 'next action, and win probability'
+        + (label ? `, and file it at the ${label} stage` : '')
+        + '. Ask me for anything you still need, then add it to the sales_deals table.',
+    });
+    void dispatchCreate(brief, 'com.ikenga.sales');
+  }, []);
+
   // ── Head label ──────────────────────────────────────────────────────────────
   const headLabel = activeView === 0 ? `Sales · ${deals.length} open`
     : activeView === 1 ? 'Forecast'
@@ -791,17 +923,18 @@ export function SalesView({ activeFeature }) {
     if (openDealsQ.isLoading) {
       body = html`<${LoadingState} />`;
     } else if (openDealsQ.isError) {
-      body = html`<${ErrorState} error=${openDealsQ.error?.message ?? 'unknown'} />`;
-    } else if (deals.length === 0) {
-      body = html`<${EmptyState} />`;
+      body = html`<${ErrorState} error=${openDealsQ.error?.message ?? 'unknown'} onRetry=${() => openDealsQ.refetch()} />`;
+    } else if (visibleDeals.length === 0) {
+      body = html`<${EmptyState} onCreate=${createDeal} />`;
     } else if (pipeMode === 'kanban') {
       body = html`<${PipelineKanban}
-        deals=${deals}
+        deals=${visibleDeals}
         onStageChange=${(deal, newStage) => stageChange.mutate({ deal, newStage })}
+        onCreate=${createDeal}
       />`;
     } else {
       body = html`<${PipelineList}
-        deals=${deals}
+        deals=${visibleDeals}
         selectedDeal=${selectedDeal}
         onSelectDeal=${setSelectedDeal}
         activities=${activitiesQ.data ?? []}
@@ -814,7 +947,7 @@ export function SalesView({ activeFeature }) {
     if (wonDealsQ.isLoading) {
       body = html`<${LoadingState} />`;
     } else if (wonDealsQ.isError) {
-      body = html`<${ErrorState} error=${wonDealsQ.error?.message ?? 'unknown'} />`;
+      body = html`<${ErrorState} error=${wonDealsQ.error?.message ?? 'unknown'} onRetry=${() => wonDealsQ.refetch()} />`;
     } else {
       body = html`<${WonView} wonDeals=${wonDealsQ.data ?? WON_DEALS_FIXTURE} />`;
     }

package/dist/lib/bridge.js

@@ -1,5 +1,14 @@
 // MCP Apps SDK bridge — the canonical iframe⇄host protocol Ikenga uses.
 //
+// SOURCE OF TRUTH (WP-19). This file is the single, byte-identical bridge core
+// vendored into every no-build app pkg's dist/lib/bridge.js. The two per-pkg
+// identifiers that used to be hand-edited into each copy — the source-id passed
+// to host.sendToActiveSession and the short log tag in error/console strings —
+// are now injected via the generated sibling `./pkg-id.js` (PKG_ID, LOG_TAG),
+// which kills the copy-paste-id bug class (a `tasks`/`sales` id or `[sales]`
+// tag left behind in the wrong pkg). Never hand-edit a vendored copy; edit here
+// and re-run the pkg's `scripts/build.mjs`.
+//
 // Pattern from @modelcontextprotocol/ext-apps Quickstart + the shell's
 // pkg-iframe-host.tsx implementation:
 //   1. new App(...) — register handlers before connect
@@ -21,6 +30,7 @@
 // clobbers our workspace `data-theme` (A/B/C) with 'light'|'dark', breaking the
 // bundled @ikenga/tokens palette — so the bridge stays out of theming entirely.
 import { App } from 'https://esm.sh/@modelcontextprotocol/ext-apps@1.7.1/app-with-deps';
+import { PKG_ID, LOG_TAG } from './pkg-id.js';
 
 let app = null;
 
@@ -31,7 +41,7 @@ export async function connectBridge({ name, version, onContextChange }) {
     tools: { listChanged: false },
   });
 
-  app.onerror = (err) => console.error('[sales] bridge error', err);
+  app.onerror = (err) => console.error(`[${LOG_TAG}] bridge error`, err);
   // Theme is NOT applied here — app.js mirrors it from the parent <html>.
   // We still forward context so live activeFeature (side-menu) updates reach
   // the app; data flows through host.dbQuery/dbExec, not the context payload.
@@ -83,7 +93,7 @@ export async function setMenu(items) {
  *   prompt: string   — the instruction shown as the user turn
  *   source?: string  — provenance tag (defaults to the pkg id)
  */
-export async function hostSendToActiveSession(prompt, source = 'com.ikenga.tasks') {
+export async function hostSendToActiveSession(prompt, source = PKG_ID) {
   if (!app) throw new Error('bridge not connected');
   return app.callServerTool({
     name: 'host.sendToActiveSession',
@@ -118,7 +128,7 @@ export async function hostPaActionsRun(args) {
  *   params: SqlValue[]      — positional bind values
  */
 export async function hostDbQuery(sql, params = []) {
-  if (!app) throw new Error('[sales] bridge not connected — db_query unavailable');
+  if (!app) throw new Error(`[${LOG_TAG}] bridge not connected — db_query unavailable`);
   const res = await app.callServerTool({
     name: 'host.dbQuery',
     arguments: { sql, params },
@@ -141,7 +151,7 @@ export async function hostDbQuery(sql, params = []) {
  *   params: SqlValue[]      — positional bind values
  */
 export async function hostDbExec(sql, params = []) {
-  if (!app) throw new Error('[sales] bridge not connected — db_exec unavailable');
+  if (!app) throw new Error(`[${LOG_TAG}] bridge not connected — db_exec unavailable`);
   const res = await app.callServerTool({
     name: 'host.dbExec',
     arguments: { sql, params },

package/dist/lib/create-dispatch.js

@@ -0,0 +1,93 @@
+// RECIPE-SHARED SHAPE (create-wire) — dispatch-mode creation for domain pkgs.
+//
+// Lift target: @ikenga/pkg-runtime. Every domain pkg's dead "+ / New <X>"
+// buttons route through here so creation is *agent-shaped* — we seed a
+// structured creation brief into the shell's active Chi session and let the
+// agent do the create through its skill (research, cross-table links, enrich
+// fields), instead of the pkg writing a raw client-side husk INSERT.
+//
+// This is the R4 / R-03 rule made concrete: domain pkgs never run transport or
+// CRUD-for-agents directly. Creation of a row that needs enrichment or
+// cross-table fan-out is dispatch. A narrow direct-write exception exists —
+// see create-wire.md "Decision rule" — for a self-contained, fully
+// user-supplied single-table row (the tasks CreateTaskForm case).
+//
+// SEAM (must exist — do not invent):
+//   host.sendToActiveSession({ prompt, source? })
+//     → shell handler:  shell/src/components/pkg/pkg-iframe-host.tsx:551
+//     → bridge wrapper: lib/bridge.js  (hostSendToActiveSession)
+//   Returns { ok, threadId?, reason? }. Refuses with reason:'no-active-session'
+//   when no chat pane is focused.
+//
+// PRECONDITION (currently a shell/contract gap — see create-wire.md pitfall #1):
+//   The verb is gated on the `engine:invoke` scope (pkg-iframe-host.tsx:562),
+//   which the FE resolves from manifest `permissions.engine` containing
+//   'invoke'. Neither the contract PermissionsSchema nor the Rust Permissions
+//   struct carries an `engine` key today, so it is stripped and the gate
+//   returns scope-denied. Wire it correctly anyway (this file); it lights up
+//   the moment the shell adds the key. dispatchCreate swallows the refusal so
+//   a blocked gate never throws into the view.
+
+import { hostSendToActiveSession, isStandalone } from './bridge.js';
+
+/**
+ * Build a structured creation brief for the Chi.
+ *
+ * The SHAPE is constant across domains so every "New <X>" reads the same to the
+ * agent: a one-line "Create a new <entity>." heading, an optional fielded
+ * "Known so far:" block seeded from the click context, and an explicit
+ * instruction that names the target table so the agent files it correctly.
+ * Domains vary only the entity label, table name, seed fields, and instruction.
+ *
+ * @param {object} args
+ * @param {string} args.entity       Human label, e.g. 'sales deal'.
+ * @param {string} args.table        Target table, e.g. 'sales_deals'.
+ * @param {Record<string, string|number|null|undefined>} [args.seed]
+ *        Pre-filled context from the click (e.g. { stage: 'Proposal' }).
+ *        Null/empty values are dropped.
+ * @param {string} [args.instruction] What the agent should do before writing.
+ *        Defaults to a generic "ask then insert into <table>".
+ * @returns {string}
+ */
+export function buildCreateBrief({ entity, table, seed = {}, instruction }) {
+  const lines = [`Create a new ${entity}.`];
+  const entries = Object.entries(seed).filter(
+    ([, v]) => v !== null && v !== undefined && v !== '',
+  );
+  if (entries.length) {
+    lines.push('', 'Known so far:');
+    for (const [k, v] of entries) lines.push(`- ${k}: ${v}`);
+  }
+  lines.push(
+    '',
+    instruction ??
+      `Ask me for anything you still need, then add it to the ${table} table.`,
+  );
+  return lines.join('\n');
+}
+
+/**
+ * Seed a creation brief into the shell's active Chi session.
+ *
+ * Fire-and-forget by contract: no-ops (returns false) in standalone preview
+ * where there is no host, and never rethrows — a scope-denied / no-active-
+ * session refusal is logged, not surfaced as an exception, so a dead gate can
+ * never break the calling view. Returns true only when the dispatch call
+ * resolved.
+ *
+ * @param {string} brief   Output of buildCreateBrief.
+ * @param {string} source  Provenance tag — pass the pkg id (e.g.
+ *                         'com.ikenga.sales') so the shell stamps the audit trail
+ *                         with the right origin.
+ * @returns {Promise<boolean>}
+ */
+export async function dispatchCreate(brief, source) {
+  if (isStandalone()) return false;
+  try {
+    await hostSendToActiveSession(brief, source);
+    return true;
+  } catch (e) {
+    console.warn('[create-dispatch] dispatch failed', e);
+    return false;
+  }
+}

package/dist/lib/dispatch.js

@@ -0,0 +1,87 @@
+// Recipe-shared shape — atelier-parity RECIPE 1 · dispatch-wire.
+//
+// Lift-ready for a future @ikenga/pkg-runtime extraction: this module is the
+// ONE place a domain pkg (content / research / strategy / sales) turns an
+// operator "Approve & run" / "Confirm & run" click into a real host dispatch.
+// It depends ONLY on hostSendToActiveSession + isStandalone from ./bridge.js
+// (both present in every domain pkg's bridge copy), so it copies verbatim.
+//
+// SEAM RATIONALE (why sendToActiveSession, not a direct run):
+//   The shell's iframe host dispatcher (shell/src/components/pkg/
+//   pkg-iframe-host.tsx `dispatchHostCall`) supports exactly these host verbs:
+//     host.sendToActiveSession   (line 551)  ← the ONLY agent-run seam
+//     host.navigate, host.pkg.setMenu, host.dbQuery, host.dbExec,
+//     host.openSessionDialog, host.agentOps.*, host.fetch, host.invoke
+//   There is NO direct-run verb. `host.paActionsRun` and `host.paActions.*`
+//   both fall through to `return errResult('unknown host tool: ${name}')`
+//   (pkg-iframe-host.tsx:830) — do NOT wire to them. So BOTH ux_modes seed a
+//   structured user turn into the active Claude session; the agent performs
+//   the run through its own privileged path (same pattern the Tasks pkg uses to
+//   "create" work — see bridge.js hostSendToActiveSession docstring).
+//
+// APPROVE-RUN GAP (feeds WP-18 / the contract work):
+//   'approve' cannot honestly run-without-a-turn today — there is no host verb
+//   that commits an action headlessly for a domain row. What 'approve' CAN do
+//   is frame the seeded turn as "operator has authority, run it now" so the
+//   agent proceeds without a back-and-forth. A true headless approve-run needs
+//   a new shell verb (e.g. host.paActions.commit actually wired in
+//   dispatchHostCall, or a domain-run verb). Until then approve == a
+//   differently-framed sendToActiveSession.
+
+import { hostSendToActiveSession, isStandalone } from './bridge.js';
+
+// Frame the seeded turn per ux_mode.
+//   approve → operator has authority, wants it done now (agent proceeds).
+//   confirm → operator wants the agent to confirm/plan before running.
+const MODE_FRAME = {
+  approve: (label) => `Approve and run the next action for ${label}.`,
+  confirm: (label) => `Confirm the next action for ${label} with me before running it.`,
+};
+
+/**
+ * Build the structured user-turn prompt for an item's next action.
+ *
+ * `item` is the recipe-shared descriptor — each domain pkg maps its own row
+ * into this shape (see pieceToDispatchItem in content-view.js for the pattern):
+ *   {
+ *     kind:       string   human label for the entity ('content piece', 'deal', ...)
+ *     title:      string   the entity title
+ *     stage?:     string   current pipeline stage (already display-labelled)
+ *     nextAction?:string   the next_action text shown in the UI
+ *     facts?:     [k, v][] extra context lines ([['Channel','x'], ...]); nullish v skipped
+ *   }
+ *
+ * Pure + side-effect-free so it is unit-testable without a bridge.
+ */
+export function buildActionPrompt(item, mode) {
+  const kind = item.kind ?? 'item';
+  const label = item.title ? `the ${kind} "${item.title}"` : `this ${kind}`;
+  const frame = (MODE_FRAME[mode] ?? MODE_FRAME.confirm)(label);
+  const lines = [frame, ''];
+  if (item.stage) lines.push(`Stage: ${item.stage}`);
+  if (item.nextAction) lines.push(`Next action: ${item.nextAction}`);
+  for (const [k, v] of item.facts ?? []) {
+    if (v != null && v !== '') lines.push(`${k}: ${v}`);
+  }
+  return lines.join('\n');
+}
+
+/**
+ * Dispatch an item's next action to the shell's active Claude session.
+ *
+ * Fire-and-forget seam: seeds a user turn via host.sendToActiveSession. Callers
+ * should still `.catch(() => {})` at the click site so a closed/failed bridge
+ * never throws into the handler (mirrors outbound-view.js `sendToChat`).
+ * No-ops in standalone (no parent shell). Returns the prompt that was sent (or
+ * null when standalone) so callers/tests can assert on it.
+ *
+ *   item:   descriptor (see buildActionPrompt)
+ *   mode:   'approve' | 'confirm'  (anything else → confirm framing)
+ *   source: string  provenance tag — pass the pkg id (e.g. 'com.ikenga.content')
+ */
+export async function dispatchItemAction(item, mode, source) {
+  if (isStandalone()) return null;
+  const prompt = buildActionPrompt(item, mode);
+  await hostSendToActiveSession(prompt, source);
+  return prompt;
+}

package/dist/lib/facet-filter.js

@@ -0,0 +1,41 @@
+// facet-filter — recipe-shared shape (facet-wire recipe), lift-ready for a
+// future @ikenga/pkg-runtime extraction. DO NOT add domain columns here; this
+// stays domain-agnostic.
+//
+// Wire it fits: the shell relays a sidebar filter-facet click as
+// `royaltiSuite.activeFeature = <the clicked PkgMenuItem id>` (e.g. 'f:mine')
+// via the host-context re-emit — NEVER a pkg-menu-click message. The pkg keeps
+// the last-applied facet id in state and calls `applyFacet` to derive the
+// visible slice of its list. Pair this generic applier with a *domain* predicate
+// map (facetId → (item) => boolean) declared in the view, where the domain
+// columns live. Canonical consumer to mirror: tasks-view.js (FILTER_ITEMS + the
+// activeFeature effect that narrows the list).
+
+/** Reset/clear facet id — the "show everything" affordance. Tasks uses 'f:all'. */
+export const RESET_FACET = 'f:all';
+
+/**
+ * Return the slice of `items` that matches `facetId`.
+ *
+ * Inertness contract (matches tasks' behavior): a null/empty facet, the reset
+ * id, or an id with no predicate all return every item — an *unknown* facet is
+ * inert, never empty. So a stray dispatch can't blank the list.
+ *
+ * @template T
+ * @param {T[]} items                                       full list
+ * @param {string | null | undefined} facetId               last-applied facet id
+ * @param {Record<string, (item: T) => boolean>} predicates domain predicate map
+ * @param {string} [resetId]                                clear id (default 'f:all')
+ * @returns {T[]}
+ */
+export function applyFacet(items, facetId, predicates, resetId = RESET_FACET) {
+  if (!Array.isArray(items)) return [];
+  if (!facetId || facetId === resetId) return items;
+  const pred = predicates?.[facetId];
+  return typeof pred === 'function' ? items.filter(pred) : items;
+}
+
+/** True for sidebar filter-facet ids (the 'f:' namespace, incl. 'f:t:*'). */
+export function isFacetId(id) {
+  return typeof id === 'string' && id.startsWith('f:');
+}

package/dist/lib/operator.js

@@ -0,0 +1,39 @@
+// operator.js — operator-identity helpers shared by every no-build domain app
+// pkg (sales/research/content/strategy). SOURCE OF TRUTH — vendored
+// byte-identically into each pkg's dist/lib/operator.js via vendorRuntime()
+// (add 'operator' to that pkg's build.mjs `files` list). Never hand-edit a
+// vendored copy; edit here and re-run the pkg's `scripts/build.mjs`.
+//
+// hostContext.operator is OPTIONAL (see @ikenga/contract's host-context.ts —
+// IkengaHostContextExtensions.operator: OperatorIdentity | undefined): absent
+// means an UNKNOWN operator, not a default one. Every helper below fails safe
+// on a null/undefined operatorId — "mine" matches nothing, "other owner"
+// defaults to true (never mislabels an unclaimed row as the human), and
+// initials degrade to a neutral glyph rather than guessing an identity.
+//
+// This module is host/bridge-agnostic on purpose (pure functions only, no
+// import from bridge.js): callers thread the plain `operatorId` string (or
+// null) down from app.js's `connectBridge()` ctx.operator.id, the same way
+// `activeFeature` is already threaded from ctx.royaltiSuite.activeFeature.
+
+/** True only when `value` names the CURRENT known operator. An unknown
+ *  operator (`operatorId` null/undefined) never matches — a "mine" filter or
+ *  badge count degrades to empty, never to "everyone" or "no one knows". */
+export function isMine(value, operatorId) {
+  return operatorId != null && value === operatorId;
+}
+
+/** True when `value` names an owner other than the current operator — the
+ *  complement used for "agent-tracked" grouping and is-agent avatar styling.
+ *  An unknown operator makes every named owner read as "other" (we can never
+ *  be sure an unclaimed value is the human), so this defaults to true rather
+ *  than false when `operatorId` is null. */
+export function isOtherOwner(value, operatorId) {
+  return value != null && value !== operatorId;
+}
+
+/** Single-glyph label for an avatar/initial badge. Falls back to '?' rather
+ *  than guessing when the label is missing or empty. */
+export function initialOf(label) {
+  return typeof label === 'string' && label.length > 0 ? label[0].toUpperCase() : '?';
+}

package/dist/lib/pkg-id.js

@@ -0,0 +1,5 @@
+// GENERATED by @ikenga/pkg-runtime vendor step — do not edit.
+// Per-pkg identity injected into the shared bridge.js core so the runtime
+// stays byte-identical across pkgs (WP-19). Overwritten on next build.
+export const PKG_ID = "com.ikenga.sales";
+export const LOG_TAG = "sales";

package/dist/lib/sales-css.js

@@ -1,4 +1,4 @@
 // GENERATED by scripts/build.mjs from dist/sales.css — do not edit.
 // CSS-as-string: WebKitGTK cannot load link/fetch subresources from the
 // about:srcdoc the shell mounts, so app.js injects this as an inline <style>.
-export default "/* sales.css — domain residue for com.ikenga.sales.\n *\n * Only sales-local classes live here:\n *   - .sl-* Forecast view layout (.sl-forecast-kpis, .sl-forecast-kpi, etc.)\n *   - .sl-won-* Won view layout (.sl-won-wrap, .sl-won-table, .sl-won-badge)\n *   - Kanban + pipeline overrides specific to this domain (.kb-mini-avatar.is-agent,\n *     .split-row-when.is-urgent already in kit — no re-derive needed)\n *\n * Kit primitives (.frame*, .ip-split*, .dense-row*, .btn*, .tag, .chip, .badge,\n * .atelier-state*, .nav-group*, .nav-item*, .kb-*, .seg*, .split-*, etc.) are\n * consumed from app-kit-css.js — never re-derived here.\n *\n * Inject order: tokens-css → app-kit-css → sales-css (this file).\n * data-workspace=\"sessions\" on <html> → warm amber-ochre tint for active nav + accents.\n */\n\n/* ── Reduced motion gate ── */\n@media (prefers-reduced-motion: reduce) {\n  .split-row { transition: none; }\n  .kb-card { transition: none; }\n  .kb-card:hover { transform: none; }\n}\n\n/* ── Forecast view (.sl-*) ─────────────────────────────────────────────────── */\n\n.sl-forecast-wrap {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  overflow-y: auto;\n  height: 100%;\n}\n\n.sl-forecast-kpis {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 10px;\n}\n\n.sl-forecast-kpi {\n  background: var(--bg-surface, var(--bg-base));\n  border: 1px solid var(--border-soft, rgba(0,0,0,0.08));\n  border-radius: 8px;\n  padding: 14px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.sl-kpi-k {\n  font-family: var(--font-mono, monospace);\n  font-size: 10px;\n  font-weight: 500;\n  color: var(--fg-faint, var(--fg-muted));\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n}\n\n.sl-kpi-v {\n  font-family: var(--font-display, Georgia, serif);\n  font-size: 26px;\n  font-weight: 500;\n  font-style: normal;\n  color: var(--fg);\n  margin-top: 4px;\n}\n\n.sl-kpi-sub {\n  font-size: 0.7rem;\n  color: var(--fg-faint, var(--fg-muted));\n  font-family: var(--font-mono, monospace);\n}\n\n.sl-forecast-card {\n  background: var(--bg-surface, var(--bg-base));\n  border: 1px solid var(--border-soft, rgba(0,0,0,0.08));\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.sl-forecast-card-h {\n  padding: 10px 14px;\n  font-size: 0.8rem;\n  font-weight: 600;\n  color: var(--fg-muted);\n  border-bottom: 1px solid var(--border-soft, rgba(0,0,0,0.06));\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n\n.sl-funnel-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 14px;\n  border-bottom: 1px solid var(--border-soft, rgba(0,0,0,0.04));\n}\n\n.sl-funnel-row:last-child {\n  border-bottom: none;\n}\n\n.sl-funnel-name {\n  width: 100px;\n  font-size: 0.78rem;\n  color: var(--fg);\n  flex-shrink: 0;\n}\n\n.sl-funnel-bar {\n  flex: 1;\n  height: 22px;\n  border-radius: var(--radius-xs, 3px);\n  background: var(--bg-sunken, rgba(0,0,0,0.06));\n  position: relative;\n  overflow: hidden;\n}\n\n.sl-funnel-bar-fill {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  background: var(--bg-raised, rgba(128,128,128,0.3));\n  border: 1px solid var(--border-soft, rgba(0,0,0,0.08));\n  border-radius: var(--radius-xs, 3px);\n}\n\n.sl-funnel-bar-wt {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  background: var(--primary, hsl(215,70%,55%));\n  border-radius: var(--radius-xs, 3px);\n  opacity: 0.9;\n}\n\n.sl-funnel-val {\n  width: 72px;\n  font-size: 0.72rem;\n  font-family: var(--font-mono, monospace);\n  color: var(--fg-muted);\n  text-align: right;\n  flex-shrink: 0;\n}\n\n.sl-months {\n  display: flex;\n  align-items: flex-end;\n  gap: 16px;\n  padding: 14px;\n  height: 170px;\n}\n\n.sl-month {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  flex: 1;\n}\n\n.sl-month-bar-wrap {\n  flex: 1;\n  display: flex;\n  align-items: flex-end;\n  width: 100%;\n}\n\n.sl-month-bar {\n  width: 100%;\n  background: var(--primary, hsl(215,70%,55%));\n  border-radius: 3px 3px 0 0;\n  opacity: 0.7;\n  min-height: 4px;\n}\n\n.sl-month-val {\n  font-size: 0.65rem;\n  font-family: var(--font-mono, monospace);\n  color: var(--fg-muted);\n}\n\n.sl-month-lab {\n  font-size: 0.65rem;\n  color: var(--fg-faint, var(--fg-muted));\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n\n/* ── Won view (.sl-won-*) ───────────────────────────────────────────────────── */\n\n.sl-won-wrap {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  overflow-y: auto;\n  height: 100%;\n}\n\n.sl-won-kpis {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 10px;\n}\n\n.sl-won-table-wrap {\n  background: var(--bg-surface, var(--bg-base));\n  border: 1px solid var(--border-soft, rgba(0,0,0,0.08));\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.sl-won-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 0.8rem;\n}\n\n.sl-won-table thead tr {\n  background: var(--bg-inset, rgba(0,0,0,0.04));\n}\n\n.sl-won-table th {\n  padding: 8px 12px;\n  text-align: left;\n  font-size: 0.7rem;\n  font-weight: 600;\n  color: var(--fg-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  border-bottom: 1px solid var(--border-soft, rgba(0,0,0,0.08));\n}\n\n.sl-won-table td {\n  padding: 9px 12px;\n  border-bottom: 1px solid var(--border-soft, rgba(0,0,0,0.04));\n  color: var(--fg);\n  vertical-align: middle;\n}\n\n.sl-won-table tbody tr:last-child td {\n  border-bottom: none;\n}\n\n.sl-won-table tbody tr:hover td {\n  background: var(--bg-hover, rgba(0,0,0,0.025));\n}\n\n.sl-won-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-size: 0.65rem;\n  font-weight: 500;\n  background: var(--bg-inset, rgba(0,0,0,0.08));\n  color: var(--fg-muted);\n  text-transform: capitalize;\n  letter-spacing: 0.02em;\n}\n\n.sl-won-amt {\n  font-family: var(--font-mono, monospace);\n  font-size: 0.8rem;\n  font-weight: 600;\n  color: var(--live, hsl(150,48%,52%));\n}\n\n/* ── Kanban domain overrides ────────────────────────────────────────────────── */\n\n/* Stage dot colours per the screen doc */\n.kb-col[data-stage=\"lead\"] .kb-col-dot    { background: var(--fg-faint, rgba(128,128,128,0.4)); }\n.kb-col[data-stage=\"qualified\"] .kb-col-dot { background: var(--systemic, hsl(140,55%,42%)); }\n.kb-col[data-stage=\"proposal\"] .kb-col-dot  { background: var(--primary, hsl(215,70%,55%)); }\n.kb-col[data-stage=\"negotiation\"] .kb-col-dot { background: var(--achievement, hsl(38,85%,52%)); }\n.kb-col[data-stage=\"closing\"] .kb-col-dot  { background: var(--live, hsl(348,72%,52%)); }\n\n/* Deal row ux-mode dots */\n.ux-dot {\n  display: inline-block;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  margin-right: 4px;\n}\n.ux-dot.ux-confirm  { background: var(--achievement, hsl(38,85%,52%)); }\n.ux-dot.ux-silent   { background: var(--fg-faint, rgba(128,128,128,0.4)); }\n.ux-dot.ux-approve  { background: var(--primary, hsl(215,70%,55%)); }\n\n/* Next-action chip in list rows */\n.next-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  font-size: 0.68rem;\n  color: var(--fg-muted);\n  background: var(--bg-inset, rgba(0,0,0,0.06));\n  border-radius: 4px;\n  padding: 2px 6px;\n  max-width: 180px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Stage chip in detail pane */\n.stage-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 0.7rem;\n  font-weight: 600;\n  padding: 3px 8px;\n  border-radius: 5px;\n  background: var(--bg-inset, rgba(0,0,0,0.07));\n  color: var(--fg-muted);\n  text-transform: capitalize;\n  letter-spacing: 0.03em;\n}\n\n/* Hot filter (Closing soon — achievement tint) */\n.nav-item.is-hot .nav-item-count {\n  color: var(--achievement, hsl(38,85%,52%));\n  font-weight: 700;\n}\n\n/* Deal amount in list rows */\n.split-row-amt {\n  font-family: var(--font-mono, monospace);\n  font-size: 0.78rem;\n  font-weight: 600;\n  color: var(--fg);\n  white-space: nowrap;\n}\n\n/* Age / urgency */\n.split-row-when {\n  font-size: 0.68rem;\n  color: var(--fg-faint, var(--fg-muted));\n  font-family: var(--font-mono, monospace);\n  white-space: nowrap;\n}\n\n.split-row-when.is-urgent {\n  color: var(--danger, hsl(0,65%,52%));\n}\n\n/* F-03 · Selected-row accent rail → explicit warm-primary (design uses\n   var(--primary), not the sessions amber-ochre --tint-fg-active). */\n.split-row.is-selected .split-row-accent,\n.split-row.is-on .split-row-accent {\n  background: var(--primary, hsl(20,50%,34%));\n  border-radius: 2px;\n}\n\n/* F-02 · Pipeline list-pane head — sticky Fraunces \"Sales\" title + mono\n   count above the stage groups. Ported from the design's .pl-list-head /\n   .pl-list-title / .pl-list-meta (not an app-kit primitive). */\n.sl-list-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--space-3, 12px) var(--space-4, 16px);\n  border-bottom: 1px solid var(--border-soft);\n  position: sticky;\n  top: 0;\n  background: var(--bg-surface);\n  z-index: 6;\n}\n\n.sl-list-title {\n  font-family: var(--font-display, Georgia, serif);\n  font-weight: 500;\n  font-size: var(--text-h3, 18px);\n  color: var(--fg);\n}\n\n.sl-list-meta {\n  font-family: var(--font-mono, monospace);\n  font-size: 10.5px;\n  color: var(--fg-faint, var(--fg-muted));\n  letter-spacing: 0.04em;\n}\n\n/* F-05 · Detail-pane title → Fraunces 28px (design spec). The app-kit\n   primitive sets Fraunces at --text-h2 (24px); sales bumps it to 28px to\n   match the locked sales design's .pl-detail-title. */\n.split-detail-title {\n  font-family: var(--font-display, Georgia, serif);\n  font-size: 28px;\n  font-weight: 500;\n  line-height: 1.15;\n  letter-spacing: -0.012em;\n  color: var(--fg);\n  margin: 0 0 var(--space-2, 8px);\n}\n\n/* F-06 / F-07 / F-08 · The facts grid (3-col card), next-action card\n   (live-tinted border + bg), and next-action head (UPPERCASE mono 10px)\n   are all consumed verbatim from the app-kit primitives (.split-facts,\n   .split-next, .split-next-head) — no sales-local override. The previous\n   2-col plain-grid / un-tinted overrides were drift and have been removed\n   so the kit's design-correct rules apply. */\n\n/* Activity timeline in detail pane */\n.split-timeline {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-top: 12px;\n}\n\n.split-tl-row {\n  display: flex;\n  gap: 10px;\n  align-items: flex-start;\n}\n\n.split-tl-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--fg-faint, rgba(128,128,128,0.4));\n  flex-shrink: 0;\n  margin-top: 5px;\n}\n\n.split-tl-body {\n  flex: 1;\n}\n\n.split-tl-title {\n  font-size: 0.78rem;\n  color: var(--fg);\n}\n\n.split-tl-when {\n  font-size: 0.65rem;\n  color: var(--fg-faint, var(--fg-muted));\n  font-family: var(--font-mono, monospace);\n}\n\n/* Seg toggle (list/kanban) injected into sidebar nav-group */\n.nav-view-seg {\n  margin: 4px 8px 6px;\n}\n\n/* Kanban board horizontal scroll mask */\n.kb-board-wrap {\n  overflow-x: auto;\n  height: 100%;\n  -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);\n  mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);\n}\n"
+export default "/* sales.css — domain residue for com.ikenga.sales.\n *\n * Only sales-local classes live here:\n *   - .sl-* Forecast view layout (.sl-forecast-kpis, .sl-forecast-kpi, etc.)\n *   - .sl-won-* Won view layout (.sl-won-wrap, .sl-won-table, .sl-won-badge)\n *   - Kanban + pipeline overrides specific to this domain (.kb-mini-avatar.is-agent,\n *     .split-row-when.is-urgent already in kit — no re-derive needed)\n *\n * Kit primitives (.frame*, .ip-split*, .dense-row*, .btn*, .tag, .chip, .badge,\n * .atelier-state*, .nav-group*, .nav-item*, .kb-*, .seg*, .split-*, etc.) are\n * consumed from app-kit-css.js — never re-derived here.\n *\n * Inject order: tokens-css → app-kit-css → sales-css (this file).\n * data-workspace=\"sessions\" on <html> → warm amber-ochre tint for active nav + accents.\n */\n\n/* ── Reduced motion gate ── */\n@media (prefers-reduced-motion: reduce) {\n  .split-row { transition: none; }\n  .kb-card { transition: none; }\n  .kb-card:hover { transform: none; }\n}\n\n/* ── Forecast view (.sl-*) ─────────────────────────────────────────────────── */\n\n.sl-forecast-wrap {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  overflow-y: auto;\n  height: 100%;\n}\n\n.sl-forecast-kpis {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 10px;\n}\n\n.sl-forecast-kpi {\n  background: var(--bg-surface, var(--bg-base));\n  border: 1px solid var(--border-soft, rgba(0,0,0,0.08));\n  border-radius: 8px;\n  padding: 14px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.sl-kpi-k {\n  font-family: var(--font-mono, monospace);\n  font-size: 10px;\n  font-weight: 500;\n  color: var(--fg-faint, var(--fg-muted));\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n}\n\n.sl-kpi-v {\n  font-family: var(--font-display, Georgia, serif);\n  font-size: 26px;\n  font-weight: 500;\n  font-style: normal;\n  color: var(--fg);\n  margin-top: 4px;\n}\n\n.sl-kpi-sub {\n  font-size: 0.7rem;\n  color: var(--fg-faint, var(--fg-muted));\n  font-family: var(--font-mono, monospace);\n}\n\n.sl-forecast-card {\n  background: var(--bg-surface, var(--bg-base));\n  border: 1px solid var(--border-soft, rgba(0,0,0,0.08));\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.sl-forecast-card-h {\n  padding: 10px 14px;\n  font-size: 0.8rem;\n  font-weight: 600;\n  color: var(--fg-muted);\n  border-bottom: 1px solid var(--border-soft, rgba(0,0,0,0.06));\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n\n.sl-funnel-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 14px;\n  border-bottom: 1px solid var(--border-soft, rgba(0,0,0,0.04));\n}\n\n.sl-funnel-row:last-child {\n  border-bottom: none;\n}\n\n.sl-funnel-name {\n  width: 100px;\n  font-size: 0.78rem;\n  color: var(--fg);\n  flex-shrink: 0;\n}\n\n.sl-funnel-bar {\n  flex: 1;\n  height: 22px;\n  border-radius: var(--radius-xs, 3px);\n  background: var(--bg-sunken, rgba(0,0,0,0.06));\n  position: relative;\n  overflow: hidden;\n}\n\n.sl-funnel-bar-fill {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  background: var(--bg-raised, rgba(128,128,128,0.3));\n  border: 1px solid var(--border-soft, rgba(0,0,0,0.08));\n  border-radius: var(--radius-xs, 3px);\n}\n\n.sl-funnel-bar-wt {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  background: var(--primary, hsl(215,70%,55%));\n  border-radius: var(--radius-xs, 3px);\n  opacity: 0.9;\n}\n\n.sl-funnel-val {\n  width: 72px;\n  font-size: 0.72rem;\n  font-family: var(--font-mono, monospace);\n  color: var(--fg-muted);\n  text-align: right;\n  flex-shrink: 0;\n}\n\n.sl-months {\n  display: flex;\n  align-items: flex-end;\n  gap: 16px;\n  padding: 14px;\n  height: 170px;\n}\n\n.sl-month {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  flex: 1;\n  /* Full-height column so the bar's percentage height resolves against the\n     170px .sl-months container (mirrors the design's .fc-month { height:100% }).\n     Completes F-15 — without it the bar-wrap collapses to min-height and the\n     JS-percentage bars never scale. */\n  height: 100%;\n}\n\n.sl-month-bar-wrap {\n  flex: 1;\n  display: flex;\n  align-items: flex-end;\n  width: 100%;\n}\n\n.sl-month-bar {\n  width: 100%;\n  background: var(--primary, hsl(215,70%,55%));\n  border-radius: 3px 3px 0 0;\n  opacity: 0.7;\n  min-height: 4px;\n}\n\n.sl-month-val {\n  font-size: 0.65rem;\n  font-family: var(--font-mono, monospace);\n  color: var(--fg-muted);\n}\n\n.sl-month-lab {\n  font-size: 0.65rem;\n  color: var(--fg-faint, var(--fg-muted));\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n\n/* ── Won view (.sl-won-*) ───────────────────────────────────────────────────── */\n\n.sl-won-wrap {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  overflow-y: auto;\n  height: 100%;\n}\n\n.sl-won-kpis {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 10px;\n}\n\n.sl-won-table-wrap {\n  background: var(--bg-surface, var(--bg-base));\n  border: 1px solid var(--border-soft, rgba(0,0,0,0.08));\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.sl-won-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 0.8rem;\n}\n\n.sl-won-table thead tr {\n  background: var(--bg-inset, rgba(0,0,0,0.04));\n}\n\n.sl-won-table th {\n  padding: 8px 12px;\n  text-align: left;\n  font-size: 0.7rem;\n  font-weight: 600;\n  color: var(--fg-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  border-bottom: 1px solid var(--border-soft, rgba(0,0,0,0.08));\n}\n\n.sl-won-table td {\n  padding: 9px 12px;\n  border-bottom: 1px solid var(--border-soft, rgba(0,0,0,0.04));\n  color: var(--fg);\n  vertical-align: middle;\n}\n\n.sl-won-table tbody tr:last-child td {\n  border-bottom: none;\n}\n\n.sl-won-table tbody tr:hover td {\n  background: var(--bg-hover, rgba(0,0,0,0.025));\n}\n\n.sl-won-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-size: 0.65rem;\n  font-weight: 500;\n  background: var(--bg-inset, rgba(0,0,0,0.08));\n  color: var(--fg-muted);\n  text-transform: capitalize;\n  letter-spacing: 0.02em;\n}\n\n.sl-won-amt {\n  font-family: var(--font-mono, monospace);\n  font-size: 0.8rem;\n  font-weight: 600;\n  color: var(--live, hsl(150,48%,52%));\n}\n\n/* ── Kanban domain overrides ────────────────────────────────────────────────── */\n\n/* Stage dot colours per the screen doc */\n.kb-col[data-stage=\"lead\"] .kb-col-dot    { background: var(--fg-faint, rgba(128,128,128,0.4)); }\n.kb-col[data-stage=\"qualified\"] .kb-col-dot { background: var(--systemic, hsl(140,55%,42%)); }\n.kb-col[data-stage=\"proposal\"] .kb-col-dot  { background: var(--primary, hsl(215,70%,55%)); }\n.kb-col[data-stage=\"negotiation\"] .kb-col-dot { background: var(--achievement, hsl(38,85%,52%)); }\n.kb-col[data-stage=\"closing\"] .kb-col-dot  { background: var(--live, hsl(348,72%,52%)); }\n\n/* Deal row ux-mode dots */\n.ux-dot {\n  display: inline-block;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  margin-right: 4px;\n}\n.ux-dot.ux-confirm  { background: var(--achievement, hsl(38,85%,52%)); }\n.ux-dot.ux-silent   { background: var(--fg-faint, rgba(128,128,128,0.4)); }\n.ux-dot.ux-approve  { background: var(--primary, hsl(215,70%,55%)); }\n\n/* Next-action chip in list rows */\n.next-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  font-size: 0.68rem;\n  color: var(--fg-muted);\n  background: var(--bg-inset, rgba(0,0,0,0.06));\n  border-radius: 4px;\n  padding: 2px 6px;\n  max-width: 180px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Stage chip in detail pane */\n.stage-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 0.7rem;\n  font-weight: 600;\n  padding: 3px 8px;\n  border-radius: 5px;\n  background: var(--bg-inset, rgba(0,0,0,0.07));\n  color: var(--fg-muted);\n  text-transform: capitalize;\n  letter-spacing: 0.03em;\n}\n\n/* Hot filter (Closing soon — achievement tint) */\n.nav-item.is-hot .nav-item-count {\n  color: var(--achievement, hsl(38,85%,52%));\n  font-weight: 700;\n}\n\n/* Deal amount in list rows */\n.split-row-amt {\n  font-family: var(--font-mono, monospace);\n  font-size: 0.78rem;\n  font-weight: 600;\n  color: var(--fg);\n  white-space: nowrap;\n}\n\n/* Age / urgency */\n.split-row-when {\n  font-size: 0.68rem;\n  color: var(--fg-faint, var(--fg-muted));\n  font-family: var(--font-mono, monospace);\n  white-space: nowrap;\n}\n\n.split-row-when.is-urgent {\n  color: var(--danger, hsl(0,65%,52%));\n}\n\n/* F-03 · Selected-row accent rail → explicit warm-primary (design uses\n   var(--primary), not the sessions amber-ochre --tint-fg-active). */\n.split-row.is-selected .split-row-accent,\n.split-row.is-on .split-row-accent {\n  background: var(--primary, hsl(20,50%,34%));\n  border-radius: 2px;\n}\n\n/* F-02 · Pipeline list-pane head — sticky Fraunces \"Sales\" title + mono\n   count above the stage groups. Ported from the design's .pl-list-head /\n   .pl-list-title / .pl-list-meta (not an app-kit primitive). */\n.sl-list-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--space-3, 12px) var(--space-4, 16px);\n  border-bottom: 1px solid var(--border-soft);\n  position: sticky;\n  top: 0;\n  background: var(--bg-surface);\n  z-index: 6;\n}\n\n.sl-list-title {\n  font-family: var(--font-display, Georgia, serif);\n  font-weight: 500;\n  font-size: var(--text-h3, 18px);\n  color: var(--fg);\n}\n\n.sl-list-meta {\n  font-family: var(--font-mono, monospace);\n  font-size: 10.5px;\n  color: var(--fg-faint, var(--fg-muted));\n  letter-spacing: 0.04em;\n}\n\n/* F-05 · Detail-pane title → Fraunces 28px (design spec). The app-kit\n   primitive sets Fraunces at --text-h2 (24px); sales bumps it to 28px to\n   match the locked sales design's .pl-detail-title. */\n.split-detail-title {\n  font-family: var(--font-display, Georgia, serif);\n  font-size: 28px;\n  font-weight: 500;\n  line-height: 1.15;\n  letter-spacing: -0.012em;\n  color: var(--fg);\n  margin: 0 0 var(--space-2, 8px);\n}\n\n/* F-06 / F-07 / F-08 · The facts grid (3-col card), next-action card\n   (live-tinted border + bg), and next-action head (UPPERCASE mono 10px)\n   are all consumed verbatim from the app-kit primitives (.split-facts,\n   .split-next, .split-next-head) — no sales-local override. The previous\n   2-col plain-grid / un-tinted overrides were drift and have been removed\n   so the kit's design-correct rules apply. */\n\n/* Activity timeline in detail pane */\n.split-timeline {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-top: 12px;\n}\n\n.split-tl-row {\n  display: flex;\n  gap: 10px;\n  align-items: flex-start;\n}\n\n.split-tl-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--fg-faint, rgba(128,128,128,0.4));\n  flex-shrink: 0;\n  margin-top: 5px;\n}\n\n.split-tl-body {\n  flex: 1;\n}\n\n.split-tl-title {\n  font-size: 0.78rem;\n  color: var(--fg);\n}\n\n.split-tl-when {\n  font-size: 0.65rem;\n  color: var(--fg-faint, var(--fg-muted));\n  font-family: var(--font-mono, monospace);\n}\n\n/* Seg toggle (list/kanban) injected into sidebar nav-group */\n.nav-view-seg {\n  margin: 4px 8px 6px;\n}\n\n/* Kanban board horizontal scroll mask */\n.kb-board-wrap {\n  overflow-x: auto;\n  height: 100%;\n  -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);\n  mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);\n}\n"

package/dist/lib/ui.js

@@ -1,5 +1,12 @@
 // React + htm via esm.sh — no JSX transpile needed. Forkers edit JS, reload.
 //
+// SOURCE OF TRUTH (WP-19). This is the single, byte-identical UI runtime vendored
+// into every no-build app pkg's dist/lib/ui.js. It supersedes the ~80%-shared
+// per-pkg copies; the only thing that used to diverge was each pkg's slice of the
+// icon dictionary, so this file carries the UNION of every pkg's glyphs (57) — a
+// pkg simply ignores the names it never references. Never hand-edit a vendored
+// copy; edit here and re-run the pkg's scripts/build.mjs.
+//
 // htm uses tagged template literals to render React elements. Same mental model
 // as JSX (component tags, expressions in ${}), just without a build step.
 
@@ -38,30 +45,66 @@ export {
 };
 
 // Tiny icon helper — lucide-static SVG paths inlined as needed to avoid an
-// extra CDN hop (the source app used lucide-react; we mirror suite's inline
-// pattern instead). Add more glyphs as features need them.
+// extra CDN hop (the source apps used lucide-react; we mirror suite's inline
+// pattern instead). WP-19 UNION of every pkg's glyphs; add more as features need.
 const ICONS = {
-  // Source app glyphs (lucide path data):
-  'check-square': 'M9 11l3 3L22 4M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11',
-  'calendar-days':
-    'M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01',
-  stethoscope:
-    'M11 2v2M5 2v2M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1M8 15a6 6 0 0 0 12 0v-3M20 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4z',
-  search: 'M11 17.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM21 21l-4.35-4.35',
-  plus: 'M5 12h14M12 5v14',
-  'chevron-down': 'M6 9l6 6 6-6',
-  'alert-circle': 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM12 8v4M12 16h.01',
-  loader: 'M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83',
-  check: 'M20 6L9 17l-5-5',
-  'check-circle': 'M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4L12 14.01l-3-3',
-  mail: 'M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM22 6l-10 7L2 6',
-  terminal: 'M4 17l6-6-6-6M12 19h8',
-  'git-branch': 'M6 3v12M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM18 9a9 9 0 0 1-9 9',
-  // ViewTabs glyphs for Sweeper + Done. `broom` mirrors the design's SWEEP
-  // glyph (a broom strokes + handle); `check-check` is the lucide name for
-  // the "double check" used for completed items.
-  broom: 'M9.8 12.2 5 17l3 3 4.8-4.8M14 8l-3.5 3.5 4 4L18 12l-4-4z M14 8l5-5M19 3l2 2',
-  'check-check': 'M18 6 7 17l-5-5M22 10l-7.5 7.5L13 16',
+  activity: "M22 12h-4l-3 9L9 3l-3 9H2",
+  'alert-circle': "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM12 8v4M12 16h.01",
+  'alert-triangle': "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01",
+  archive: "M21 8v13H3V8M1 3h22v5H1zM10 12h4",
+  'arrow-down': "M12 5v14M19 12l-7 7-7-7",
+  'arrow-left': "M19 12H5M12 5l-7 7 7 7",
+  'arrow-right': "M5 12h14M12 5l7 7-7 7",
+  'bar-chart-2': "M18 20V10M12 20V4M6 20v-6",
+  'book-open': "M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z",
+  broom: "M9.8 12.2 5 17l3 3 4.8-4.8M14 8l-3.5 3.5 4 4L18 12l-4-4z M14 8l5-5M19 3l2 2",
+  calendar: "M3 4h18v18H3V4zM16 2v4M8 2v4M3 10h18",
+  'calendar-days': "M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01",
+  check: "M20 6L9 17l-5-5",
+  'check-check': "M18 6 7 17l-5-5M22 10l-7.5 7.5L13 16",
+  'check-circle': "M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4L12 14.01l-3-3",
+  'check-square': "M9 11l3 3L22 4M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11",
+  'chevron-down': "M6 9l6 6 6-6",
+  'chevron-left': "M15 18l-6-6 6-6",
+  'chevron-right': "M9 18l6-6-6-6",
+  'chevron-up': "M18 15l-6-6-6 6",
+  clock: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM12 6v6l4 2",
+  'corner-down-left': "M9 10l-5 5 5 5M4 15h7a4 4 0 0 0 4-4V5",
+  'edit-3': "M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z",
+  eye: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8zM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z",
+  'file-text': "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6M16 13H8M16 17H8M10 9H8",
+  filter: "M22 3H2l8 9.46V19l4 2v-8.54L22 3z",
+  'git-branch': "M6 3v12M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM18 9a9 9 0 0 1-9 9",
+  globe: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z",
+  inbox: "M22 12h-6l-2 3H10l-2-3H2M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z",
+  linkedin: "M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2zM4 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4z",
+  list: "M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01",
+  loader: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83",
+  mail: "M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM22 6l-10 7L2 6",
+  'more-horizontal': "M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM19 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM5 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2z",
+  pause: "M6 4h4v16H6zM14 4h4v16h-4z",
+  people: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75",
+  'play-circle': "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM10 8l6 4-6 4V8z",
+  plus: "M5 12h14M12 5v14",
+  radio: "M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0M4.93 4.93a10 10 0 0 0 0 14.14M19.07 4.93a10 10 0 0 1 0 14.14M7.76 7.76a6 6 0 0 0 0 8.49M16.24 7.76a6 6 0 0 1 0 8.49",
+  'refresh-cw': "M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15",
+  search: "M11 17.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM21 21l-4.35-4.35",
+  send: "M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z",
+  share2: "M8.59 13.51l6.83 3.98M15.41 6.51l-6.82 3.98M21 5a3 3 0 1 0-6 0 3 3 0 0 0 6 0zM9 12a3 3 0 1 0-6 0 3 3 0 0 0 6 0zM21 19a3 3 0 1 0-6 0 3 3 0 0 0 6 0z",
+  'skip-forward': "M5 4l10 8-10 8V4zM19 5v14",
+  star: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
+  stethoscope: "M11 2v2M5 2v2M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1M8 15a6 6 0 0 0 12 0v-3M20 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4z",
+  tag: "M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82zM7 7h.01",
+  terminal: "M4 17l6-6-6-6M12 19h8",
+  timer: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM12 6v6M16.24 16.24l-4.24-4.24M4.93 4.93l14.14 14.14",
+  trash: "M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6",
+  'trending-up': "M23 6l-9.5 9.5-5-5L1 18M17 6h6v6",
+  twitter: "M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z",
+  user: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z",
+  users: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75",
+  x: "M18 6L6 18M6 6l12 12",
+  'x-circle': "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM15 9l-6 6M9 9l6 6",
+  zap: "M13 2L3 14h9l-1 8 10-12h-9l1-8z",
 };
 
 // Class-name joiner — replaces clsx + tailwind-merge. With Tailwind gone there
@@ -80,7 +123,7 @@ export function cn(...inputs) {
 }
 
 // Button — ported from src/components/Button.tsx. Tailwind utility classes
-// became .tk-btn / sz-* / v-* rules in tasks.css.
+// became .tk-btn / sz-* / v-* rules in the pkg's domain CSS.
 export function Button({ variant = 'default', size = 'md', class: cls = '', children, ...props }) {
   const className = ['tk-btn', `sz-${size}`, `v-${variant}`, cls]
     .filter(Boolean)
@@ -105,3 +148,30 @@ export function Icon({ name, size = 16, className, strokeWidth = 2 }) {
     stroke-linejoin="round"
   ><path d=${path} /></svg>`;
 }
+
+// Auto-growing textarea hook — the body-editor pattern for outbox/detail panes.
+// A fixed-height textarea with an inner scrollbar reads as a cramped form
+// field; content-sized, it reads as a document the pane scrolls naturally
+// (the outer pane owns overflow). Sets height to scrollHeight on mount, on
+// value change, and on container resize; CSS `field-sizing: content` will
+// obsolete this once WebKitGTK ships it.
+//   const ref = useAutoGrow(value);
+//   html`<textarea ref=${ref} value=${value} ... style=${{ overflow: 'hidden', resize: 'none' }}></textarea>`
+export function useAutoGrow(value, { minHeight = 160 } = {}) {
+  const ref = React.useRef(null);
+  const fit = React.useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = `${Math.max(minHeight, el.scrollHeight)}px`;
+  }, [minHeight]);
+  React.useLayoutEffect(fit, [fit, value]);
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof ResizeObserver === 'undefined') return;
+    const ro = new ResizeObserver(fit);
+    ro.observe(el.parentElement ?? el);
+    return () => ro.disconnect();
+  }, [fit]);
+  return ref;
+}

package/dist/sales.css

@@ -160,6 +160,11 @@
   align-items: center;
   gap: 4px;
   flex: 1;
+  /* Full-height column so the bar's percentage height resolves against the
+     170px .sl-months container (mirrors the design's .fc-month { height:100% }).
+     Completes F-15 — without it the bar-wrap collapses to min-height and the
+     JS-percentage bars never scale. */
+  height: 100%;
 }
 
 .sl-month-bar-wrap {

package/manifest.json

@@ -1,7 +1,7 @@
 {
   "id": "com.ikenga.sales",
   "name": "Sales",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "ikenga_api": "1",
   "kind": "embedded",
   "author": { "name": "Royalti", "key": "royalti" },
@@ -47,7 +47,8 @@
       "sales_lead_scores",
       "contacts"
     ],
-    "vault.keys": []
+    "vault.keys": [],
+    "engine": ["invoke"]
   },
 
   "requires": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikenga/pkg-sales",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Sales — Pipeline, Forecast, Won over the production sales schema. Multi-file iframe pkg; deterministic CSS vendoring build.",
   "license": "Apache-2.0",
   "repository": {