@keyfunc/keybricks-ds 2.6.0 → 2.8.0

package/components/forms/GlobalSearch.vue

@@ -0,0 +1,161 @@
+<script setup>
+// Global Search (TopBar instance of Search) — same props and behaviour as GlobalSearch.jsx; shared logic in ./global-search.js.
+// Collapsed: a quiet field with a ⌘K / Ctrl K hint. Open: a 720px card over the top bar with a scrim. Keys: ↑↓ select · ↵ open ·
+// ⌘↵ / Ctrl Enter ask Prophet AI · Esc back / close. It never shows AI answers: AI entries close the card and emit ask(question).
+// items (local, matched on title / keywords) or query(term) → items | Promise (300ms debounce). deepSearch(term, update) → cancel fn.
+// Events: select(item) · ask(question) · input(value).
+import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import Icon from '../icons/Icon.vue'
+import IconButton from '../buttons/IconButton.vue'
+import Button from '../buttons/Button.vue'
+import Kbd from '../display/Kbd.vue'
+import SegmentedControl from '../tabs/SegmentedControl.vue'
+import Spinner from '../feedback/Spinner.vue'
+import Skeleton from '../feedback/Skeleton.vue'
+import { GS_ICONS, gsLabels, gsFill, gsIsMac, gsMod, gsFilter, gsSplit, gsRows, gsPos, gsReveal, gsStyles as S, gsAiTile } from './global-search.js'
+
+const props = defineProps({
+  placeholder: String, inputPlaceholder: String, items: { type: Array, default: () => [] }, query: Function,
+  recentSearches: { type: Array, default: () => [] }, recent: { type: Array, default: () => [] }, prompts: { type: Array, default: () => [] },
+  deepSearch: Function, labels: Object, inline: Boolean, defaultOpen: Boolean, defaultQuery: { type: String, default: '' }, defaultDeep: Object, style: Object,
+})
+const emit = defineEmits(['select', 'ask', 'input'])
+const L = computed(() => gsLabels(props.labels))
+const open = ref(!!(props.inline || props.defaultOpen)), q = ref(props.defaultQuery), scope = ref(0)
+const found = ref(null), loading = ref(false), sel = ref(0), hover = ref(false), stepsOpen = ref(false)
+const deep = ref(props.defaultDeep ? { query: props.defaultQuery, ...props.defaultDeep } : null)
+const pos = ref({ left: 8, width: 720, maxH: 640 })
+const fieldEl = ref(null), inputEl = ref(null), bodyEl = ref(null)
+const mac = gsIsMac()
+let cancelDeep = null, now = !!props.defaultQuery, timer = null, token = 0
+const term = computed(() => q.value.trim())
+
+const stopDeep = () => { if (cancelDeep) cancelDeep(); cancelDeep = null }
+const openCard = () => { if (props.inline) return; pos.value = gsPos(fieldEl.value); open.value = true }
+const close = () => { if (props.inline) return; stopDeep(); deep.value = null; open.value = false; if (fieldEl.value) fieldEl.value.focus() }
+const ask = (text) => { close(); emit('ask', text || '') }
+const startDeep = () => {
+  stopDeep(); stepsOpen.value = false
+  deep.value = { query: term.value, status: 'running', steps: [] }
+  const c = props.deepSearch && props.deepSearch(term.value, (s) => { if (deep.value) deep.value = { ...deep.value, ...s } })
+  cancelDeep = typeof c === 'function' ? c : null
+}
+const exitDeep = () => { stopDeep(); deep.value = null }
+
+const onKeyK = (e) => { if (gsMod(e, mac) && e.key && e.key.toLowerCase() === 'k') { e.preventDefault(); openCard() } }
+onMounted(() => { if (!props.inline) { document.addEventListener('keydown', onKeyK); if (props.defaultOpen) pos.value = gsPos(fieldEl.value) } })
+onBeforeUnmount(() => { document.removeEventListener('keydown', onKeyK); stopDeep(); clearTimeout(timer) })
+watch(open, (v) => { if (v && !props.inline) nextTick(() => inputEl.value && inputEl.value.focus()) })
+
+const search = () => {
+  clearTimeout(timer); const t = term.value, my = ++token
+  if (!t) { found.value = null; loading.value = false; return }
+  const run = () => {
+    loading.value = true
+    Promise.resolve(props.query ? props.query(t) : gsFilter(props.items, t)).then((r) => { if (my === token) { found.value = r || []; loading.value = false } }, () => { if (my === token) { found.value = []; loading.value = false } })
+  }
+  if (now) { now = false; run() } else timer = setTimeout(run, 300)
+}
+watch(term, search, { immediate: true })
+watch([found, scope], () => { sel.value = 0 })
+
+const model = computed(() => gsRows({ term: term.value, found: found.value, loading: loading.value, scope: scope.value, recent: props.recent, prompts: props.prompts, deep: deep.value, hasDeep: !!props.deepSearch, L: L.value }))
+const rows = computed(() => model.value.rows)
+const cur = computed(() => Math.max(0, Math.min(sel.value, rows.value.length - 1)))
+const bodyRows = computed(() => rows.value.filter((r) => r.kind !== 'ask' && r.kind !== 'deep'))
+const pinRows = computed(() => rows.value.filter((r) => r.kind === 'ask' || r.kind === 'deep'))
+watch(cur, (i) => nextTick(() => gsReveal(bodyEl.value, i)))
+
+const activate = (r) => {
+  if (!r) return
+  if (r.kind === 'result' || r.kind === 'recent') { close(); emit('select', r.item); if (r.item.onSelect) r.item.onSelect() }
+  else if (r.kind === 'prompt') ask(r.text)
+  else if (r.kind === 'ask') ask(term.value)
+  else if (r.kind === 'deep') startDeep()
+}
+const change = (v) => { if (deep.value) exitDeep(); q.value = v; sel.value = 0; emit('input', v) }
+const pickChip = (v) => { now = true; change(v) }
+const clear = () => { change(''); if (inputEl.value) inputEl.value.focus() }
+const key = (e) => {
+  if (e.isComposing) return
+  const n = rows.value.length
+  if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { if (!n) return; e.preventDefault(); sel.value = (cur.value + (e.key === 'ArrowDown' ? 1 : -1) + n) % n }
+  else if (e.key === 'Enter') { e.preventDefault(); if (gsMod(e, mac)) ask(term.value); else activate(rows.value[cur.value]) }
+  else if (e.key === 'Escape') { e.preventDefault(); if (deep.value) exitDeep(); else close() }
+}
+
+const parts = (r, mark) => (mark ? gsSplit(r.item.title, term.value) : [r.item.title, '', ''])
+const kindOf = (it) => it.kind || 'feature'
+const steps = computed(() => (deep.value && deep.value.steps) || [])
+const runIdx = computed(() => steps.value.findIndex((s) => s.state === 'running'))
+const deepDone = computed(() => !!deep.value && (deep.value.status === 'done' || runIdx.value < 0))
+const concl = computed(() => (deep.value && deep.value.conclusion ? [].concat(deep.value.conclusion) : null))
+const cardStyle = computed(() => ({ ...S.card, ...(props.inline ? props.style : S.cardFixed(pos.value)) }))
+const fieldStyle = computed(() => ({ ...S.field(hover.value), ...props.style }))
+const ai = (on) => gsAiTile(on)
+const scopeLabel = computed({ get: () => L.value.scopes[scope.value], set: (v) => { scope.value = Math.max(0, L.value.scopes.indexOf(v)) } })
+</script>
+<template>
+  <button v-if="!inline" ref="fieldEl" type="button" data-field="" aria-haspopup="dialog" :aria-expanded="open" @click="openCard" @mouseenter="hover = true" @mouseleave="hover = false" :style="fieldStyle">
+    <span :style="S.fieldIcon"><Icon name="search" :size="16" /></span><span :style="S.fieldLabel">{{ placeholder || L.field }}</span><Kbd :keys="['mod', 'K']" />
+  </button>
+  <div v-if="open && !inline" :style="S.scrim" @mousedown="close" />
+  <div v-if="open" role="dialog" :aria-modal="inline ? undefined : 'true'" :aria-label="L.input" data-size="md" @keydown="key" :style="cardStyle">
+    <div :style="S.inputRow">
+      <span :style="S.lead"><Spinner v-if="loading" :size="14" color="var(--text-secondary)" /><Icon v-else :name="deep ? 'text-search' : 'search'" :size="16" /></span>
+      <input ref="inputEl" :value="q" @input="change($event.target.value)" :placeholder="inputPlaceholder || L.input" :aria-label="inputPlaceholder || L.input" :style="S.input" />
+      <span :style="S.trail"><IconButton v-if="q" icon="x" muted :label="L.clear" :title="L.clear" @click="clear" /><Button variant="ai" @click="ask(term)">{{ L.ask }}</Button></span>
+    </div>
+    <div v-if="term && !deep" :style="S.scope"><SegmentedControl size="sm" :options="L.scopes" v-model="scopeLabel" /><span :style="S.count">{{ loading ? L.searching : found ? gsFill(L.results, { n: model.total }) : '' }}</span></div>
+
+    <div v-if="deep" :style="{ ...S.body, padding: '0' }"><div :style="S.deep">
+      <div :style="S.deepHead"><span :style="S.tile()"><Icon name="text-search" :size="16" /></span><span :style="S.text"><span :style="S.deepTitle">{{ gsFill(L.deepTitle, { q: deep.query }) }}</span><span :style="S.sub">{{ deep.status === 'done' ? gsFill(L.doneStatus, { t: deep.elapsed || '', n: (deep.sources || []).length }) : L.running }}</span></span></div>
+      <div v-if="steps.length" :style="S.steps">
+        <button type="button" data-wash="" :aria-expanded="stepsOpen" :style="S.toggle" @click="stepsOpen = !stepsOpen">
+          <template v-if="deepDone"><span :style="{ ...S.stepIcon, color: 'var(--success)' }"><Icon name="circle-check" :size="14" /></span><span>{{ gsFill(L.stepsDone, { n: steps.length }) }}</span><span :style="S.muted">{{ deep.elapsed }}</span></template>
+          <template v-else><span :style="S.stepIcon"><Spinner :size="12" color="var(--text-secondary)" /></span><span>{{ steps[runIdx].label }}…</span><span :style="S.muted">{{ gsFill(L.stepOf, { i: runIdx + 1, n: steps.length }) }}</span></template>
+          <span :style="S.grow" /><span :style="{ ...S.stepIcon, color: 'var(--text-muted)', transform: stepsOpen ? 'rotate(180deg)' : 'none' }"><Icon name="chevron-down" :size="14" /></span>
+        </button>
+        <template v-if="stepsOpen"><div v-for="(s, i) in steps" :key="i" :style="S.stepLine">
+          <span :style="{ ...S.stepIcon, color: 'var(--success)' }"><Icon v-if="s.state === 'done'" name="circle-check" :size="14" /><Spinner v-else-if="s.state === 'running'" :size="12" color="var(--text-secondary)" /><span v-else :style="S.pending" /></span>
+          <span :style="{ color: s.state === 'pending' ? 'var(--text-muted)' : 'var(--text-body)' }">{{ s.label }}</span><span v-if="s.meta" :style="S.muted">{{ s.meta }}</span>
+        </div></template>
+      </div>
+      <div v-if="concl" :style="S.conclusion">
+        <span :style="S.concLabel">{{ L.conclusion }}</span>
+        <div :style="S.concText"><span v-for="(p, i) in concl" :key="i">{{ p }}</span></div>
+        <div v-if="deep.sources && deep.sources.length" :style="S.sources"><span v-for="(s, i) in deep.sources" :key="i" :style="S.source"><Icon name="file-text" :size="12" />{{ s }}</span></div>
+        <div data-size="sm" :style="S.actions"><Button variant="primary-soft" icon="file-text" @click="deep.onOpenReport && deep.onOpenReport()">{{ L.openReport }}</Button><Button variant="ghost" icon="prophet-sparkle" @click="ask(deep.query)">{{ L.followUp }}</Button></div>
+      </div>
+    </div></div>
+
+    <div v-else ref="bodyEl" role="listbox" :style="S.body">
+      <template v-if="!term && recentSearches.length"><div :style="S.head"><span>{{ L.recentSearches }}</span></div><div :style="S.chips"><button v-for="s in recentSearches" :key="s" type="button" :style="S.chip" @mousedown.prevent @click="pickChip(s)"><span :style="S.chipIcon"><Icon name="history" :size="12" /></span>{{ s }}</button></div></template>
+      <template v-if="term && loading"><div :style="S.head"><Skeleton :width="'64px'" :height="'10px'" /></div><div v-for="i in 4" :key="i" :style="S.skelRow"><Skeleton :width="'32px'" :height="'32px'" radius="var(--radius-md)" /><span :style="S.skelText"><Skeleton width="46%" :height="'12px'" /><Skeleton width="28%" :height="'10px'" /></span></div></template>
+      <div v-else-if="term && found && !bodyRows.length" :style="S.empty">{{ L.noResults }}</div>
+      <template v-else><template v-for="r in bodyRows" :key="r.i">
+        <div v-if="r.head" :style="S.head"><span>{{ r.head.label }}</span><button v-if="r.head.more" type="button" :style="S.more" @mousedown.prevent @click="scope = r.head.more.scope">{{ gsFill(L.viewAll, { n: r.head.more.n }) }}</button></div>
+        <div :data-gs-row="r.i" role="option" :aria-selected="r.i === cur" :style="S.row(r.i === cur)" @mouseenter="sel = r.i" @mousedown.prevent @click="activate(r)">
+          <template v-if="r.kind === 'prompt'"><span :style="ai(r.i === cur).outer"><span :style="ai(r.i === cur).inner"><span :style="ai(r.i === cur).tint" /><Icon name="prophet-sparkle" :size="16" :gradient="r.i === cur" :style="ai(r.i === cur).icon" /></span></span><span :style="S.text"><span :style="S.title">{{ r.text }}</span></span></template>
+          <template v-else>
+            <span :style="S.tile(kindOf(r.item) === 'document' ? r.item.tone : null)"><Icon :name="r.item.icon || GS_ICONS[kindOf(r.item)]" :size="16" /></span>
+            <span :style="S.text"><span :style="S.title">{{ parts(r, r.kind === 'result')[0] }}<span v-if="parts(r, r.kind === 'result')[1]" :style="S.mark">{{ parts(r, r.kind === 'result')[1] }}</span>{{ parts(r, r.kind === 'result')[2] }}</span><span v-if="r.item.sub" :style="S.sub">{{ r.item.sub }}</span></span>
+            <span v-if="r.item.meta" :style="S.meta">{{ r.item.meta }}</span>
+          </template>
+          <Kbd v-if="r.i === cur" :keys="['enter']" />
+        </div>
+      </template></template>
+    </div>
+
+    <div v-if="!deep && term" :style="S.pinned">
+      <div v-for="r in pinRows" :key="r.i" :data-gs-row="r.i" role="option" :aria-selected="r.i === cur" :style="S.row(r.i === cur)" @mouseenter="sel = r.i" @mousedown.prevent @click="activate(r)">
+        <template v-if="r.kind === 'ask'"><span :style="ai(r.i === cur).outer"><span :style="ai(r.i === cur).inner"><span :style="ai(r.i === cur).tint" /><Icon name="prophet-sparkle" :size="16" :gradient="r.i === cur" :style="ai(r.i === cur).icon" /></span></span><span :style="S.text"><span :style="S.title">{{ gsFill(L.askRow, { q: term }) }}</span><span :style="S.sub">{{ L.askSub }}</span></span><Kbd :keys="['mod', 'enter']" /></template>
+        <template v-else><span :style="S.tile()"><Icon name="text-search" :size="16" /></span><span :style="S.text"><span :style="S.title">{{ gsFill(L.deepRow, { q: term }) }}</span><span :style="S.sub">{{ L.deepSub }}</span></span><Kbd v-if="r.i === cur" :keys="['enter']" /></template>
+      </div>
+    </div>
+    <div :style="S.footer">
+      <span :style="S.hints"><span :style="S.hint"><Kbd :keys="['↑', '↓']" />{{ L.select }}</span><span :style="S.hint"><Kbd :keys="['mod', 'enter']" />{{ L.ask }}</span><span :style="S.hint"><Kbd :keys="['esc']" />{{ L.close }}</span></span>
+      <span :style="S.hint"><Icon name="lock" :size="12" />{{ L.privacy }}</span>
+    </div>
+  </div>
+</template>

package/components/forms/forms.prompt.md

@@ -27,3 +27,10 @@ Everything is 12px text in 36px controls; readOnly inputs go #fafafa; disabled =
 
 ## RelativeTimePicker
 Filter by "how long ago" (logs, monitoring, inbox): `<RelativeTimePicker value={{amount:1,unit:"Hour"}} onChange={(v, date) => …}/>` — a field-shaped trigger at the tier height; the dialog has an amount input and a unit select (`allowUnlimited` adds "Any time", which resolves to `null`). `labels` localises every string (unit labels: one string, or `{ one, other }` for plural languages); `formatValue` / `formatDate` override the summary and the preview. Vue: `v-model` + `@change(value, date)`.
+
+`GlobalSearch` — the TopBar search (TopBar renders it; pass props through `search`). Collapsed it's a field styled like SearchInput (surface fill, `--border-control` hairline, r8) with a ⌘K / Ctrl K hint — **GlobalSearch exception:** its placeholder is `--text-secondary` (≥4.5:1, the platform's main entry prompt) and hover fills `--bg-inset` as well as darkening the border to `--border-strong`. Plain `SearchInput` keeps its muted placeholder and border-only hover; open it's a 720px card: input row with `Button variant="ai"`, scope bar, grouped results (Features 4 · Documents 5 · Dimension Members 3 · Actions 2 under All), pinned "Ask Prophet AI" and "Deep Search" rows, keyboard footer. Keys: ↑↓ · ↵ open · ⌘↵ / Ctrl Enter ask Prophet AI · Esc back / close (Tab keeps normal focus order). It never shows AI answers — every AI entry closes the card and calls `onAsk(question)`.
+
+```jsx
+<GlobalSearch items={items} recent={recent} prompts={prompts} onSelect={open} onAsk={openProphetPanel}/>
+<GlobalSearch onQuery={(term) => api.search(term)} onDeepSearch={(term, update) => runDeep(term, update)} labels={GLOBAL_SEARCH_LABELS.zh}/>
+```

package/components/forms/global-search.js

@@ -0,0 +1,161 @@
+/* GlobalSearch — shared by GlobalSearch.jsx and GlobalSearch.vue: copy, matching, grouping, row model and styles.
+   Lengths are strings so the same style objects work in React and Vue. */
+import "../buttons/ai-button.js"; // registers --kb-ai-angle + kb-ai-spin for the Prophet AI tile
+
+export const GLOBAL_SEARCH_LABELS = {
+  en: {
+    field: "Search features, documents, or ask Prophet AI", input: "Search features, documents, data, or ask a question", ask: "Ask Prophet AI", clear: "Clear",
+    scopes: ["All", "Features", "Documents", "Data", "Actions"],
+    groups: { feature: "Features", document: "Documents", member: "Dimension Members", action: "Actions" },
+    recentSearches: "Recent Searches", recent: "Recent", prompts: "Try Asking Prophet AI", viewAll: "View all {n}",
+    results: "{n} results", searching: "Searching…", noResults: "No matches. Ask Prophet AI or try Deep Search.",
+    askRow: "Ask Prophet AI: “{q}”", askSub: "Answers from documents, models and data you can access",
+    deepRow: "Deep Search “{q}”", deepSub: "Multi-step search across document text, model data and logs you can access · about 1 min",
+    deepTitle: "Deep Search: {q}", running: "Running · about 1 min", doneStatus: "Done · {t} · {n} citations",
+    stepsDone: "Completed {n} steps", stepOf: "Step {i} of {n}", conclusion: "Conclusion", openReport: "Open Full Report", followUp: "Ask Follow-up",
+    select: "Select", close: "Close / Back", privacy: "Reads only content you can access",
+  },
+  zh: {
+    field: "搜索功能、文档，或问方知", input: "搜索功能、文档、数据，或直接提问", ask: "问方知", clear: "清除",
+    scopes: ["全部", "功能", "文档", "数据", "操作"],
+    groups: { feature: "功能", document: "文档", member: "维度成员", action: "操作" },
+    recentSearches: "最近搜索", recent: "最近访问", prompts: "试试问方知", viewAll: "查看全部 {n}",
+    results: "{n} 个结果", searching: "正在搜索…", noResults: "没有匹配的结果，可以问方知或使用深度搜索。",
+    askRow: "问方知：“{q}”", askSub: "基于你有权限的文档、模型和数据作答",
+    deepRow: "深度搜索“{q}”", deepSub: "在你有权限的文档正文、模型数据和日志中多步检索 · 约 1 分钟",
+    deepTitle: "深度搜索：{q}", running: "进行中 · 约 1 分钟", doneStatus: "已完成 · {t} · {n} 条引用",
+    stepsDone: "已完成 {n} 个步骤", stepOf: "第 {i} / {n} 步", conclusion: "结论", openReport: "打开完整报告", followUp: "就此追问",
+    select: "选择", close: "关闭 / 返回", privacy: "仅读取你有权限的内容",
+  },
+};
+
+export const GS_KINDS = ["feature", "document", "member", "action"];
+const LIMITS = { feature: 4, document: 5, member: 3, action: 2 };
+export const GS_ICONS = { feature: "layout-grid", document: "file-text", member: "database", action: "zap" };
+
+export const gsLabels = (labels) => ({ ...GLOBAL_SEARCH_LABELS.en, ...labels, groups: { ...GLOBAL_SEARCH_LABELS.en.groups, ...(labels && labels.groups) } });
+export const gsFill = (s, vars) => String(s).replace(/\{(\w+)\}/g, (_, k) => (vars[k] != null ? vars[k] : ""));
+export const gsIsMac = () => typeof navigator !== "undefined" && /mac|iphone|ipad|ipod/i.test((navigator.userAgentData && navigator.userAgentData.platform) || navigator.platform || navigator.userAgent || "");
+/** The OS's command modifier: ⌘ on macOS, Ctrl elsewhere. */
+export const gsMod = (e, mac) => (mac ? e.metaKey : e.ctrlKey) && !e.altKey;
+
+/** Case-insensitive substring on the title, falling back to keywords (path, kind, owner …). */
+export function gsFilter(items, term) {
+  const n = term.trim().toLowerCase();
+  if (!n) return [];
+  return items.filter((it) => String(it.title).toLowerCase().includes(n) || (it.keywords || []).some((k) => String(k).toLowerCase().includes(n)));
+}
+/** [before, match, after] for highlighting the matched substring of a title. */
+export function gsSplit(title, term) {
+  const t = String(title), n = (term || "").trim().toLowerCase(), i = n ? t.toLowerCase().indexOf(n) : -1;
+  return i < 0 ? [t, "", ""] : [t.slice(0, i), t.slice(i, i + n.length), t.slice(i + n.length)];
+}
+
+/** Every selectable row in visual order (↑↓ walks this list), with group headers attached to the first row of each group. */
+export function gsRows({ term, found, loading, scope, recent, prompts, deep, hasDeep, L }) {
+  const rows = [];
+  let total = 0;
+  if (deep) return { rows, total };
+  if (!term) {
+    recent.forEach((item, j) => rows.push({ kind: "recent", item, head: j === 0 ? { label: L.recent } : null }));
+    prompts.forEach((text, j) => rows.push({ kind: "prompt", text, head: j === 0 ? { label: L.prompts } : null }));
+  } else {
+    if (found && !loading) {
+      const kinds = scope ? [GS_KINDS[scope - 1]] : GS_KINDS;
+      kinds.forEach((k) => {
+        const all = found.filter((it) => (it.kind || "feature") === k);
+        total += all.length;
+        const shown = scope ? all : all.slice(0, LIMITS[k]);
+        shown.forEach((item, j) => rows.push({ kind: "result", item, head: j === 0 ? { label: L.groups[k], more: !scope && all.length > shown.length ? { n: all.length, scope: GS_KINDS.indexOf(k) + 1 } : null } : null }));
+      });
+    }
+    rows.push({ kind: "ask" });
+    if (hasDeep) rows.push({ kind: "deep" });
+  }
+  rows.forEach((r, i) => { r.i = i; });
+  return { rows, total };
+}
+
+/** Where the open card goes: 8px left of the collapsed field, 8px from the top, over the TopBar. */
+export function gsPos(el) {
+  const vw = window.innerWidth, vh = window.innerHeight, r = el ? el.getBoundingClientRect() : { left: 16 };
+  const width = Math.min(720, vw - 16);
+  return { left: Math.max(8, Math.min(r.left - 8, vw - width - 8)), width, maxH: vh - 16 };
+}
+/** Keep the selected row visible inside the scrolling body (no scrollIntoView). */
+export function gsReveal(body, i) {
+  if (!body) return;
+  const el = body.querySelector('[data-gs-row="' + i + '"]');
+  if (!el) return;
+  const top = el.offsetTop - body.offsetTop, bottom = top + el.offsetHeight;
+  if (top < body.scrollTop) body.scrollTop = top - 6;
+  else if (bottom > body.scrollTop + body.clientHeight) body.scrollTop = bottom - body.clientHeight + 6;
+}
+
+const T = (s) => ({ fontFamily: "var(--font-sans)", fontSize: "var(--text-" + s + ")", lineHeight: "var(--leading-" + s + ")", letterSpacing: "var(--tracking-" + s + ")" });
+const ONE = { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" };
+const FADE = "opacity 300ms var(--ease-out)";
+const tileBase = { width: "32px", height: "32px", flexShrink: "0", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "var(--radius-md)", border: "1px solid var(--border-card)", background: "var(--bg-surface)", color: "var(--text-secondary)", boxSizing: "border-box" };
+
+export const gsStyles = {
+  /* Collapsed field: SearchInput's box (surface fill, --border-control hairline, r8). GlobalSearch exception: the placeholder is
+     --text-secondary (≥4.5:1, it is the platform's main entry prompt) and hover also fills --bg-inset; border darkens via [data-field]. */
+  field: (hover) => ({ display: "inline-flex", alignItems: "center", gap: "8px", minWidth: "400px", width: "max-content", maxWidth: "100%", height: "32px", padding: "0 6px 0 10px", boxSizing: "border-box", borderRadius: "var(--radius-md)", background: hover ? "var(--bg-inset)" : "var(--bg-surface)", border: "1px solid var(--field-border, var(--border-control))", cursor: "pointer", transition: "var(--t-hover)", ...T("base"), color: "var(--text-secondary)", textAlign: "left", flexShrink: "1" }),
+  fieldIcon: { display: "inline-flex", color: "var(--text-muted)", flexShrink: "0" },
+  fieldLabel: { flex: "1 0 auto", paddingRight: "8px", whiteSpace: "nowrap" },
+  scrim: { position: "fixed", inset: "0", background: "var(--bg-scrim)", zIndex: "var(--z-modal)", animation: "kb-fade-in var(--dur) var(--ease-out)" },
+  card: { display: "flex", flexDirection: "column", width: "720px", maxWidth: "100%", background: "var(--bg-raised)", border: "1px solid var(--border-card)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-modal)", overflow: "hidden", boxSizing: "border-box", color: "var(--text-body)", textAlign: "left" },
+  cardFixed: (p) => ({ position: "fixed", top: "8px", left: p.left + "px", width: p.width + "px", maxHeight: p.maxH + "px", zIndex: "var(--z-modal)", animation: "kb-rise var(--dur-slow) var(--ease-out)" }),
+  inputRow: { display: "flex", alignItems: "center", gap: "10px", height: "56px", padding: "0 16px", borderBottom: "1px solid var(--border-subtle)", flexShrink: "0", boxSizing: "border-box" },
+  lead: { display: "inline-flex", width: "16px", height: "16px", alignItems: "center", justifyContent: "center", color: "var(--text-secondary)", flexShrink: "0" },
+  input: { flex: "1 1 auto", minWidth: "0", border: "none", outline: "none", background: "transparent", padding: "0", ...T("md"), color: "var(--text-heading)" },
+  trail: { display: "flex", alignItems: "center", gap: "8px", flexShrink: "0" },
+  scope: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "12px", padding: "10px 16px", borderBottom: "1px solid var(--border-subtle)", flexShrink: "0" },
+  count: { ...T("xs"), color: "var(--text-muted)", whiteSpace: "nowrap" },
+  body: { flex: "1 1 auto", minHeight: "0", overflowY: "auto", padding: "6px", position: "relative" },
+  head: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "8px", padding: "8px 10px 4px", ...T("xs"), fontWeight: "var(--weight-medium)", color: "var(--text-muted)" },
+  more: { border: "none", background: "transparent", padding: "0", cursor: "pointer", ...T("xs"), color: "var(--link)" },
+  row: (on) => ({ display: "flex", alignItems: "center", gap: "10px", minHeight: "44px", padding: "6px 10px", boxSizing: "border-box", borderRadius: "var(--radius-md)", background: on ? "var(--bg-hover)" : "transparent", cursor: "pointer" }),
+  tile: (tone) => ({ ...tileBase, ...(tone ? { background: "var(--cat-" + tone + "-bg)", color: "var(--cat-" + tone + ")" } : null) }),
+  text: { display: "flex", flexDirection: "column", minWidth: "0", flex: "1 1 auto" },
+  title: { ...T("base"), ...ONE, color: "var(--text-heading)" },
+  mark: { color: "var(--action-primary)", fontWeight: "var(--weight-medium)" },
+  sub: { ...T("xs"), ...ONE, color: "var(--text-secondary)" },
+  meta: { ...T("xs"), color: "var(--text-muted)", whiteSpace: "nowrap", flexShrink: "0" },
+  chips: { display: "flex", flexWrap: "wrap", gap: "8px", padding: "4px 10px 8px" },
+  chip: { display: "inline-flex", alignItems: "center", gap: "6px", height: "28px", padding: "0 10px", borderRadius: "var(--radius-md)", border: "1px solid var(--border-control)", background: "var(--bg-surface)", cursor: "pointer", ...T("xs"), color: "var(--text-body)", boxSizing: "border-box" },
+  chipIcon: { display: "inline-flex", color: "var(--text-muted)" },
+  empty: { padding: "12px 10px", ...T("base"), color: "var(--text-secondary)" },
+  skelRow: { display: "flex", alignItems: "center", gap: "10px", minHeight: "44px", padding: "6px 10px", boxSizing: "border-box" },
+  skelText: { display: "flex", flexDirection: "column", gap: "6px", flex: "1 1 auto" },
+  pinned: { borderTop: "1px solid var(--border-subtle)", padding: "6px", flexShrink: "0" },
+  footer: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "16px", height: "36px", padding: "0 16px", borderTop: "1px solid var(--border-subtle)", background: "var(--bg-surface)", flexShrink: "0", boxSizing: "border-box", ...T("xs"), color: "var(--text-secondary)", whiteSpace: "nowrap" },
+  hints: { display: "flex", alignItems: "center", gap: "16px" },
+  hint: { display: "inline-flex", alignItems: "center", gap: "6px" },
+  deep: { display: "flex", flexDirection: "column", gap: "12px", padding: "12px 16px" },
+  deepHead: { display: "flex", alignItems: "center", gap: "10px" },
+  deepTitle: { ...T("base"), ...ONE, fontWeight: "var(--weight-medium)", color: "var(--text-heading)" },
+  steps: { display: "flex", flexDirection: "column", gap: "2px" },
+  toggle: { display: "flex", alignItems: "center", gap: "8px", width: "100%", minHeight: "28px", padding: "0 6px", borderRadius: "var(--radius-md)", border: "none", background: "var(--wash, transparent)", cursor: "pointer", ...T("xs"), color: "var(--text-body)", textAlign: "left", boxSizing: "border-box" },
+  stepLine: { display: "flex", alignItems: "center", gap: "8px", minHeight: "24px", padding: "0 6px", ...T("xs") },
+  stepIcon: { width: "14px", height: "14px", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: "0" },
+  pending: { width: "8px", height: "8px", borderRadius: "var(--radius-full)", border: "1.5px solid var(--border-strong)", boxSizing: "border-box" },
+  muted: { color: "var(--text-muted)" },
+  grow: { flex: "1 1 auto" },
+  conclusion: { display: "flex", flexDirection: "column", gap: "6px", padding: "12px 14px", borderRadius: "var(--radius-lg)", background: "var(--bg-inset)", border: "1px solid var(--border-card)" },
+  concLabel: { ...T("xs"), fontWeight: "var(--weight-medium)", color: "var(--text-secondary)" },
+  concText: { display: "flex", flexDirection: "column", gap: "4px", ...T("base"), color: "var(--text-body)", textWrap: "pretty" },
+  sources: { display: "flex", flexWrap: "wrap", gap: "6px" },
+  source: { display: "inline-flex", alignItems: "center", gap: "4px", height: "24px", padding: "0 8px", borderRadius: "var(--radius-sm)", border: "1px solid var(--border-control)", background: "var(--bg-surface)", ...T("xs"), color: "var(--text-body)", boxSizing: "border-box", whiteSpace: "nowrap" },
+  actions: { display: "flex", gap: "8px", marginTop: "6px" },
+};
+
+/** The 32px Prophet AI tile: hairline tile at rest; selected, it takes the AI hover language (tint, gradient ring at hover speed, gradient glyph), never a glow. */
+export function gsAiTile(on) {
+  return {
+    outer: { width: "32px", height: "32px", flexShrink: "0", display: "flex", padding: "1px", boxSizing: "border-box", borderRadius: "var(--radius-md)", background: on ? "conic-gradient(from var(--kb-ai-angle), var(--ai-gradient-stops))" : "var(--border-card)", animation: on ? "kb-ai-spin var(--ai-spin-hover) linear infinite" : "none" },
+    inner: { position: "relative", flex: "1 1 auto", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "calc(var(--radius-md) - 1px)", background: "var(--bg-surface)", overflow: "hidden", color: "var(--text-secondary)" },
+    tint: { position: "absolute", inset: "0", pointerEvents: "none", background: "linear-gradient(90deg, color-mix(in srgb, var(--ai-gradient-start) var(--ai-tint), transparent), color-mix(in srgb, var(--ai-gradient-end) var(--ai-tint), transparent))", opacity: on ? "1" : "0", transition: FADE },
+    icon: { position: "relative" },
+  };
+}

package/components/icons/Icon.d.ts

@@ -11,6 +11,8 @@ export interface IconProps {
   strokeWidth?: number;
   /** Overrides currentColor */
   color?: string;
+  /** Strokes the glyph with the AI gradient (--ai-gradient-start → --ai-gradient-end). Prophet AI entry points only; pass [from, to] to override. */
+  gradient?: boolean | [string, string];
   style?: React.CSSProperties;
   className?: string;
 }

package/components/icons/Icon.jsx

@@ -88,8 +88,8 @@ export const ICON_PATHS = {
   "time-future": '<path d="M20 6A10 10 0 1 0 22 12"/><path d="M12 7v5h5"/><path d="M21 2v5h-5"/>',
   "time-restatement": '<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/>',
   // AI glyphs (2.3.0) — traced from the two reference glyphs, redrawn to core rules (stroke 2, no fill, integer endpoints, >=4 between separate elements)
-  ai: '<path d="M9 4H6a4 4 0 0 0-4 4v10a4 4 0 0 0 4 4h10a4 4 0 0 0 4-4v-3"/><path d="M16 2c1.2 3 3 4.8 6 6c-3 1.2-4.8 3-6 6c-1.2-3-3-4.8-6-6c3-1.2 4.8-3 6-6Z"/><path d="M9 12c.6 1.5 1.5 2.4 3 3c-1.5.6-2.4 1.5-3 3c-.6-1.5-1.5-2.4-3-3c1.5-.6 2.4-1.5 3-3Z"/>',
-  "ai-sparkles": '<path d="M9 2c1.4 3.5 3.5 5.6 7 7c-3.5 1.4-5.6 3.5-7 7c-1.4-3.5-3.5-5.6-7-7c3.5-1.4 5.6-3.5 7-7Z"/><path d="M17 13c.8 2 2 3.2 4 4c-2 .8-3.2 2-4 4c-.8-2-2-3.2-4-4c2-.8 3.2-2 4-4Z"/>',
+  ai: '<path d="M9 3H7a4 4 0 0 0-4 4v10a4 4 0 0 0 4 4h10a4 4 0 0 0 4-4v-2"/><path d="M16 2c.72 3.6 2.4 5.28 6 6c-3.6.72-5.28 2.4-6 6c-.72-3.6-2.4-5.28-6-6c3.6-.72 5.28-2.4 6-6Z"/><path d="M9 12c.6 1.5 1.5 2.4 3 3c-1.5.6-2.4 1.5-3 3c-.6-1.5-1.5-2.4-3-3c1.5-.6 2.4-1.5 3-3Z"/>',
+  "ai-sparkles": '<path d="M9 2c.84 4.2 2.8 6.16 7 7c-4.2.84-6.16 2.8-7 7c-.84-4.2-2.8-6.16-7-7c4.2-.84 6.16-2.8 7-7Z"/><path d="M17 13c.8 2 2 3.2 4 4c-2 .8-3.2 2-4 4c-.8-2-2-3.2-4-4c2-.8 3.2-2 4-4Z"/>',
   // Keybricks business glyphs (2.4.6) — dimensions, modules, rules-*, task-*; drawn to core rules or taken from Lucide
   "dimension-account": '<path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/><path d="M5 8h3"/><path d="M5 11h3"/><path d="M5 14h3"/><path d="M17 6.5v1"/><path d="M17 12.5v1"/><path d="M18.5 7.5h-2a1.25 1.25 0 0 0 0 2.5h1a1.25 1.25 0 0 1 0 2.5h-2"/>',
   "dimension-audit": '<path d="M11.1 22H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.589 3.588A2.4 2.4 0 0 1 20 8v3.25"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="m21 22-2.88-2.88"/><circle cx="16" cy="17" r="3"/>',
@@ -167,16 +167,24 @@ export const ICON_PATHS = {
   "task-shared": '<rect width="8" height="4" x="8" y="2" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><g transform="translate(-.5 4)"><circle cx="15.3" cy="6.8" r=".75"/><circle cx="9.7" cy="10" r=".75"/><circle cx="15.3" cy="13.2" r=".75"/><path d="m11.35 9.06 2.3-1.32"/><path d="m11.35 10.94 2.3 1.32"/></g>',
   "task-intercompany": '<rect width="8" height="4" x="8" y="2" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><g transform="translate(-.5 4)"><path d="M8.5 14V6.5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1V14"/><path d="M13.5 9.5H16a1 1 0 0 1 1 1V14"/><path d="M7.5 14h10"/><path d="M11 8.5h.01"/><path d="M11 11h.01"/></g>',
   ownership: '<path d="M11 15h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 17"/><path d="m7 21 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"/><path d="m2 16 6 6"/><circle cx="9" cy="5" r="3"/><path d="M12 5h9"/><path d="M18 5v2.5"/><path d="M21 5v2"/>',
+  prophet: '<path d="M5.66 13.5A7.5 7.5 0 1 1 18.34 13.5"/><path d="M8.5 10a3.5 3.5 0 0 1 7 0v1.5c0 3.2-1.5 5.6-3.5 7.5c-2-1.9-3.5-4.3-3.5-7.5Z"/><path d="M8.71 13.5c1.05.95 2.15 1.4 3.29 1.4s2.24-.45 3.29-1.4"/><path d="M3.5 22a5.5 5.5 0 0 1 4-5.3"/><path d="M20.5 22a5.5 5.5 0 0 0-4-5.3"/>',
+  "prophet-sparkle": '<path d="M5.66 13.5A7.5 7.5 0 0 1 13.24 2.1"/><path d="M19 2c.36 1.8 1.2 2.64 3 3c-1.8.36-2.64 1.2-3 3c-.36-1.8-1.2-2.64-3-3c1.8-.36 2.64-1.2 3-3Z"/><path d="M8.5 10a3.5 3.5 0 0 1 7 0v1.5c0 3.2-1.5 5.6-3.5 7.5c-2-1.9-3.5-4.3-3.5-7.5Z"/><path d="M8.71 13.5c1.05.95 2.15 1.4 3.29 1.4s2.24-.45 3.29-1.4"/><path d="M3.5 22a5.5 5.5 0 0 1 4-5.3"/><path d="M20.5 22a5.5 5.5 0 0 0-4-5.3"/>',
 };
 
 import { FEATHER_PATHS } from "./feather-paths.js";
 
-/** Lucide-style stroke icon. name: key of ICON_PATHS (core set) or any Feather icon name (feather-paths.js fallback); size in px; strokeWidth defaults to 2 (24-grid). Browse both sets with keywords in the Icon Gallery card. */
-export function Icon({ name, size = 16, strokeWidth = 2, color, style, className }) {
-  const body = ICON_PATHS[name] || FEATHER_PATHS[name] || "";
+/** Stroke gradient for the AI glyph treatment — bottom-left start to top-right end, in glyph space so every path shares it. */
+export const iconGradientDefs = (id, from = "var(--ai-gradient-start)", to = "var(--ai-gradient-end)") =>
+  '<defs><linearGradient id="' + id + '" gradientUnits="userSpaceOnUse" x1="2" y1="22" x2="22" y2="2"><stop offset="0" style="stop-color:' + from + '"/><stop offset="1" style="stop-color:' + to + '"/></linearGradient></defs>';
+
+/** Lucide-style stroke icon. name: key of ICON_PATHS (core set) or any Feather icon name (feather-paths.js fallback); size in px; strokeWidth defaults to 2 (24-grid). gradient: true strokes it with the AI gradient (Prophet AI entry points only), or pass [from, to]. Browse both sets with keywords in the Icon Gallery card. */
+export function Icon({ name, size = 16, strokeWidth = 2, color, gradient, style, className }) {
+  const gid = "kb-ig" + React.useId().replace(/[^a-zA-Z0-9]/g, "");
+  let body = ICON_PATHS[name] || FEATHER_PATHS[name] || "";
+  if (gradient) body = (Array.isArray(gradient) ? iconGradientDefs(gid, gradient[0], gradient[1]) : iconGradientDefs(gid)) + body;
   return (
     <svg
-      width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={gradient ? "url(#" + gid + ")" : "currentColor"}
       strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
       className={className}
       style={{ display: "block", flexShrink: 0, color, ...style }}

package/components/icons/Icon.vue

@@ -1,12 +1,19 @@
+<script>
+let kbIconSeq = 0
+</script>
 <script setup>
 // Keybricks icon set — Lucide stroke glyphs (24-grid, stroke 2, round caps/joins, currentColor), rendered at 14/16px.
 // Full path dictionary mirrors icons/Icon.jsx's ICON_PATHS (81 entries) — see that file for the complete list.
+// gradient: true strokes the glyph with the AI gradient (Prophet AI entry points only), or pass [from, to].
+import { computed } from 'vue'
 import { VUE_ICON_PATHS } from './icon-paths.js'
 import { FEATHER_PATHS } from './feather-paths.js'
-const props = defineProps({ name: String, size: { type: Number, default: 16 }, strokeWidth: { type: Number, default: 2 }, color: String, style: Object })
-const body = (n) => VUE_ICON_PATHS[n] || FEATHER_PATHS[n] || ''
+const props = defineProps({ name: String, size: { type: Number, default: 16 }, strokeWidth: { type: Number, default: 2 }, color: String, gradient: [Boolean, Array], style: Object })
+const gid = 'kb-ig-v' + (++kbIconSeq)
+const defs = (from = 'var(--ai-gradient-start)', to = 'var(--ai-gradient-end)') => '<defs><linearGradient id="' + gid + '" gradientUnits="userSpaceOnUse" x1="2" y1="22" x2="22" y2="2"><stop offset="0" style="stop-color:' + from + '"/><stop offset="1" style="stop-color:' + to + '"/></linearGradient></defs>'
+const body = computed(() => { const b = VUE_ICON_PATHS[props.name] || FEATHER_PATHS[props.name] || ''; return props.gradient ? (Array.isArray(props.gradient) ? defs(props.gradient[0], props.gradient[1]) : defs()) + b : b })
 </script>
 <template>
-  <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" stroke="currentColor" :stroke-width="strokeWidth" stroke-linecap="round" stroke-linejoin="round"
-    :style="{ display: 'block', flexShrink: 0, color, ...style }" v-html="body(name)" />
+  <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" :stroke="gradient ? 'url(#' + gid + ')' : 'currentColor'" :stroke-width="strokeWidth" stroke-linecap="round" stroke-linejoin="round"
+    :style="{ display: 'block', flexShrink: 0, color, ...style }" v-html="body" />
 </template>

package/components/icons/icon-paths.js

@@ -83,8 +83,8 @@ export const VUE_ICON_PATHS = {
   "time-future": '<path d="M20 6A10 10 0 1 0 22 12"/><path d="M12 7v5h5"/><path d="M21 2v5h-5"/>',
   "time-restatement": '<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/>',
   // AI glyphs (2.3.0) — traced from the two reference glyphs, redrawn to core rules (stroke 2, no fill, integer endpoints, >=4 between separate elements)
-  ai: '<path d="M9 4H6a4 4 0 0 0-4 4v10a4 4 0 0 0 4 4h10a4 4 0 0 0 4-4v-3"/><path d="M16 2c1.2 3 3 4.8 6 6c-3 1.2-4.8 3-6 6c-1.2-3-3-4.8-6-6c3-1.2 4.8-3 6-6Z"/><path d="M9 12c.6 1.5 1.5 2.4 3 3c-1.5.6-2.4 1.5-3 3c-.6-1.5-1.5-2.4-3-3c1.5-.6 2.4-1.5 3-3Z"/>',
-  "ai-sparkles": '<path d="M9 2c1.4 3.5 3.5 5.6 7 7c-3.5 1.4-5.6 3.5-7 7c-1.4-3.5-3.5-5.6-7-7c3.5-1.4 5.6-3.5 7-7Z"/><path d="M17 13c.8 2 2 3.2 4 4c-2 .8-3.2 2-4 4c-.8-2-2-3.2-4-4c2-.8 3.2-2 4-4Z"/>',
+  ai: '<path d="M9 3H7a4 4 0 0 0-4 4v10a4 4 0 0 0 4 4h10a4 4 0 0 0 4-4v-2"/><path d="M16 2c.72 3.6 2.4 5.28 6 6c-3.6.72-5.28 2.4-6 6c-.72-3.6-2.4-5.28-6-6c3.6-.72 5.28-2.4 6-6Z"/><path d="M9 12c.6 1.5 1.5 2.4 3 3c-1.5.6-2.4 1.5-3 3c-.6-1.5-1.5-2.4-3-3c1.5-.6 2.4-1.5 3-3Z"/>',
+  "ai-sparkles": '<path d="M9 2c.84 4.2 2.8 6.16 7 7c-4.2.84-6.16 2.8-7 7c-.84-4.2-2.8-6.16-7-7c4.2-.84 6.16-2.8 7-7Z"/><path d="M17 13c.8 2 2 3.2 4 4c-2 .8-3.2 2-4 4c-.8-2-2-3.2-4-4c2-.8 3.2-2 4-4Z"/>',
   // Keybricks business glyphs (2.4.6) — dimensions, modules, rules-*, task-*; drawn to core rules or taken from Lucide
   "dimension-account": '<path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/><path d="M5 8h3"/><path d="M5 11h3"/><path d="M5 14h3"/><path d="M17 6.5v1"/><path d="M17 12.5v1"/><path d="M18.5 7.5h-2a1.25 1.25 0 0 0 0 2.5h1a1.25 1.25 0 0 1 0 2.5h-2"/>',
   "dimension-audit": '<path d="M11.1 22H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.589 3.588A2.4 2.4 0 0 1 20 8v3.25"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="m21 22-2.88-2.88"/><circle cx="16" cy="17" r="3"/>',
@@ -162,4 +162,6 @@ export const VUE_ICON_PATHS = {
   "task-shared": '<rect width="8" height="4" x="8" y="2" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><g transform="translate(-.5 4)"><circle cx="15.3" cy="6.8" r=".75"/><circle cx="9.7" cy="10" r=".75"/><circle cx="15.3" cy="13.2" r=".75"/><path d="m11.35 9.06 2.3-1.32"/><path d="m11.35 10.94 2.3 1.32"/></g>',
   "task-intercompany": '<rect width="8" height="4" x="8" y="2" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><g transform="translate(-.5 4)"><path d="M8.5 14V6.5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1V14"/><path d="M13.5 9.5H16a1 1 0 0 1 1 1V14"/><path d="M7.5 14h10"/><path d="M11 8.5h.01"/><path d="M11 11h.01"/></g>',
   ownership: '<path d="M11 15h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 17"/><path d="m7 21 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"/><path d="m2 16 6 6"/><circle cx="9" cy="5" r="3"/><path d="M12 5h9"/><path d="M18 5v2.5"/><path d="M21 5v2"/>',
+  prophet: '<path d="M5.66 13.5A7.5 7.5 0 1 1 18.34 13.5"/><path d="M8.5 10a3.5 3.5 0 0 1 7 0v1.5c0 3.2-1.5 5.6-3.5 7.5c-2-1.9-3.5-4.3-3.5-7.5Z"/><path d="M8.71 13.5c1.05.95 2.15 1.4 3.29 1.4s2.24-.45 3.29-1.4"/><path d="M3.5 22a5.5 5.5 0 0 1 4-5.3"/><path d="M20.5 22a5.5 5.5 0 0 0-4-5.3"/>',
+  "prophet-sparkle": '<path d="M5.66 13.5A7.5 7.5 0 0 1 13.24 2.1"/><path d="M19 2c.36 1.8 1.2 2.64 3 3c-1.8.36-2.64 1.2-3 3c-.36-1.8-1.2-2.64-3-3c1.8-.36 2.64-1.2 3-3Z"/><path d="M8.5 10a3.5 3.5 0 0 1 7 0v1.5c0 3.2-1.5 5.6-3.5 7.5c-2-1.9-3.5-4.3-3.5-7.5Z"/><path d="M8.71 13.5c1.05.95 2.15 1.4 3.29 1.4s2.24-.45 3.29-1.4"/><path d="M3.5 22a5.5 5.5 0 0 1 4-5.3"/><path d="M20.5 22a5.5 5.5 0 0 0-4-5.3"/>',
 };

package/components/index.d.ts

@@ -61,6 +61,7 @@ export * from "./forms/Combobox";
 export * from "./forms/DatePicker";
 export * from "./forms/Dropzone";
 export * from "./forms/Field";
+export * from "./forms/GlobalSearch";
 export * from "./forms/Input";
 export * from "./forms/MultiSelect";
 export * from "./forms/NumberStepper";

package/components/index.js

@@ -76,6 +76,7 @@ export { Combobox } from "./forms/Combobox.jsx";
 export { DatePicker } from "./forms/DatePicker.jsx";
 export { Dropzone } from "./forms/Dropzone.jsx";
 export { Field } from "./forms/Field.jsx";
+export { GLOBAL_SEARCH_LABELS, GlobalSearch } from "./forms/GlobalSearch.jsx";
 export { Input, Textarea } from "./forms/Input.jsx";
 export { MultiSelect } from "./forms/MultiSelect.jsx";
 export { NumberStepper } from "./forms/NumberStepper.jsx";

package/components/navigation/TopBar.d.ts

@@ -1,13 +1,19 @@
 import * as React from "react";
-/** 56px top bar: bare search left; dark AI Assistant, notifications, help and the user trigger right. The trigger opens a UserMenu. */
+import type { GlobalSearchProps } from "../forms/GlobalSearch";
+/** 56px top bar: GlobalSearch left (⌘K / Ctrl K); notifications, help and the user trigger right. The trigger opens a UserMenu. Prophet AI is reached through the search card (Button variant="ai"), not a separate pill. */
 export interface TopBarProps {
+  /** Collapsed search field text (default GlobalSearch labels.field) */
   placeholder?: string;
-  /** Receives the new search string */
+  /** Receives the query as the user types */
   onSearch?: (value: string) => void;
+  /** Props for the GlobalSearch (items / onQuery, recent, prompts, onSelect, onDeepSearch, labels …) */
+  search?: GlobalSearchProps;
   /** Replaces the whole right-hand group */
   actions?: React.ReactNode;
+  /** Overrides the "Ask Prophet AI" label (same as search.labels.ask) */
   aiLabel?: string;
-  onAi?: () => void;
+  /** Prophet AI hand-off: called with the question when any AI entry in the search card is used */
+  onAi?: (question: string) => void;
   onNotifications?: () => void;
   onHelp?: () => void;
   notificationsLabel?: string;

package/components/navigation/TopBar.jsx

@@ -1,8 +1,7 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 import { IconButton } from "../buttons/IconButton.jsx";
-import { Button } from "../buttons/Button.jsx";
-import { SearchInput } from "../forms/SearchInput.jsx";
+import { GlobalSearch } from "../forms/GlobalSearch.jsx";
 import { Avatar } from "../display/Avatar.jsx";
 import { SegmentedControl } from "../tabs/SegmentedControl.jsx";
 import { ContextMenu } from "../feedback/ContextMenu.jsx";
@@ -33,9 +32,9 @@ export function UserMenu({ name, email, theme, onThemeChange, themeOptions = THE
   );
 }
 
-/** 56px top bar: bare search on the left; AI Assistant (dark), notifications, help and the user trigger on the right.
- *  The user trigger opens a UserMenu below it (closes on outside click). actions replaces the right-hand group entirely. */
-export function TopBar({ placeholder = "Search documents, workflows, data...", onSearch, actions, aiLabel = "AI Assistant", onAi, onNotifications, onHelp, notificationsLabel = "Notifications", helpLabel = "Help", user, userMenu, style }) {
+/** 56px top bar: GlobalSearch on the left (⌘K / Ctrl K, Prophet AI hand-off via onAi); notifications, help and the user trigger on the right.
+ *  The user trigger opens a UserMenu below it (closes on outside click). actions replaces the right-hand group entirely. search passes props to GlobalSearch. */
+export function TopBar({ placeholder, onSearch, search, actions, aiLabel, onAi, onNotifications, onHelp, notificationsLabel = "Notifications", helpLabel = "Help", user, userMenu, style }) {
   const [open, setOpen] = React.useState(false);
   const ref = React.useRef(null);
   React.useEffect(() => {
@@ -48,10 +47,9 @@ export function TopBar({ placeholder = "Search documents, workflows, data...", o
   const [hover, setHover] = React.useState(false);
   return (
     <header style={{ height: "var(--topbar-h)", background: "var(--bg-surface)", borderBottom: "1px solid var(--border-card)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "0 24px", boxSizing: "border-box", flexShrink: 0, minWidth: 0, position: "relative", ...style }}>
-      <SearchInput bare placeholder={placeholder} onChange={onSearch} style={{ flex: "0 1 576px", minWidth: 0 }} />
+      <GlobalSearch placeholder={placeholder} onInput={onSearch} onAsk={onAi} {...search} labels={aiLabel ? { ...(search && search.labels), ask: aiLabel } : search && search.labels} />
       <div ref={ref} style={{ display: "flex", alignItems: "center", gap: 8, flexShrink: 0 }}>
         {actions || (<>
-          <Button variant="dark" icon="ai" onClick={onAi}>{aiLabel}</Button>
           <IconButton icon="bell" label={notificationsLabel} title={notificationsLabel} onClick={onNotifications} />
           <IconButton icon="circle-help" label={helpLabel} title={helpLabel} onClick={onHelp} />
           {user ? <div role="button" tabIndex={0} aria-haspopup="menu" aria-expanded={open} onClick={() => setOpen(!open)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setOpen(!open); } }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}

package/components/navigation/TopBar.vue

@@ -2,13 +2,13 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 import Icon from '../icons/Icon.vue'
 import IconButton from '../buttons/IconButton.vue'
-import Button from '../buttons/Button.vue'
-import SearchInput from '../forms/SearchInput.vue'
+import GlobalSearch from '../forms/GlobalSearch.vue'
 import UserMenu from './UserMenu.vue'
-// 56px top bar: bare search on the left; AI Assistant (dark), notifications, help and the user trigger on the right.
+// 56px top bar: GlobalSearch on the left (⌘K / Ctrl K; its ask event is re-emitted as ai(question)); notifications, help and the user trigger on the right.
+// search passes props to GlobalSearch (items, query, recent, prompts, deepSearch, labels …).
 // The user trigger opens a UserMenu below it (closes on outside click / Escape); #user-menu slot replaces its content.
 // #actions slot replaces the whole right-hand group.
-const props = defineProps({ placeholder: { type: String, default: 'Search documents, workflows, data...' }, aiLabel: { type: String, default: 'AI Assistant' }, notificationsLabel: { type: String, default: 'Notifications' }, helpLabel: { type: String, default: 'Help' }, user: Object, style: Object })
+const props = defineProps({ placeholder: String, search: Object, aiLabel: String, notificationsLabel: { type: String, default: 'Notifications' }, helpLabel: { type: String, default: 'Help' }, user: Object, style: Object })
 const emit = defineEmits(['search', 'ai', 'notifications', 'help'])
 const open = ref(false), hover = ref(false), root = ref(null)
 const off = (e) => { if (open.value && root.value && !root.value.contains(e.target)) open.value = false }
@@ -19,10 +19,9 @@ function key(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault();
 </script>
 <template>
   <header :style="{ height: 'var(--topbar-h)', background: 'var(--bg-surface)', borderBottom: '1px solid var(--border-card)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '16px', padding: '0 24px', boxSizing: 'border-box', flexShrink: 0, minWidth: 0, position: 'relative', ...style }">
-    <SearchInput bare :placeholder="placeholder" @update:modelValue="v => emit('search', v)" style="flex:0 1 576px;min-width:0" />
+    <GlobalSearch :placeholder="placeholder" v-bind="search" :labels="aiLabel ? { ...(search && search.labels), ask: aiLabel } : search && search.labels" @input="v => emit('search', v)" @ask="q => emit('ai', q)" />
     <div ref="root" style="display:flex;align-items:center;gap:8px;flex-shrink:0">
       <slot name="actions">
-        <Button variant="dark" icon="ai" @click="emit('ai')">{{ aiLabel }}</Button>
         <IconButton icon="bell" :label="notificationsLabel" :title="notificationsLabel" @click="emit('notifications')" />
         <IconButton icon="circle-help" :label="helpLabel" :title="helpLabel" @click="emit('help')" />
         <div v-if="user" role="button" tabindex="0" aria-haspopup="menu" :aria-expanded="open" @click="open = !open" @keydown="key" @mouseenter="hover = true" @mouseleave="hover = false"