feat(answer-engine): Hanzo AI answer engine — new-tab landing + address-bar search
New-tab landing + omnibox/address-bar search + default search provider,
streaming source-cited answers via @hanzo/ai search primitive (api.hanzo.ai),
live news, model switcher from /v1/models, popup embedded search. v1.9.33.
- src/answer/: AnswerEngine (React18) + news + model-catalog + markdown
- newtab.{html,css,ts}; chrome_url_overrides.newtab + search_provider (Chrome);
omnibox 'hanzo' + background handler (Firefox); popup embedded search
- @hanzo/ai@0.2.3 resolved from npm (lockfile updated)
This commit is contained in:
Hanzo AI
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@hanzo/browser-extension",
|
||||
"version": "1.9.32",
|
||||
"version": "1.9.33",
|
||||
"description": "Hanzo AI Browser Extension",
|
||||
"main": "dist/background.js",
|
||||
"scripts": {
|
||||
@@ -12,6 +12,7 @@
|
||||
"check:bundle-budget": "node scripts/check-bundle-budgets.mjs"
|
||||
},
|
||||
"dependencies": {
|
||||
"@hanzo/ai": "^0.2.3",
|
||||
"@supabase/supabase-js": "^2.50.3",
|
||||
"axios": "^1.10.0",
|
||||
"chalk": "^4.1.2",
|
||||
|
||||
@@ -0,0 +1,553 @@
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { createAiClient, type SearchEvent, type SearchMode, type SearchSource } from '@hanzo/ai';
|
||||
import { fetchNews, type NewsItem } from './news.js';
|
||||
import { AUTO_MODEL, fetchModelCatalog, type ChatModel, type ModelGroup } from './model-catalog.js';
|
||||
import { renderMarkdown } from './markdown.js';
|
||||
|
||||
/**
|
||||
* Hanzo Answer Engine — the shared AI-answer surface (query → streamed answer +
|
||||
* inline citations + sources + live news). Backend = api.hanzo.ai ONLY, reached
|
||||
* through the @hanzo/ai `search`/`deepResearch` primitive (the one place the
|
||||
* capability is defined). Rendered on the @hanzo/gui primitive surface; strict
|
||||
* monochrome per the Hanzo brand.
|
||||
*/
|
||||
|
||||
export interface AnswerEngineProps {
|
||||
apiBase: string;
|
||||
/** Resolves the current IAM bearer, or null when signed out. */
|
||||
getToken: () => Promise<string | null>;
|
||||
/** Kicks off IAM sign-in (opens the OAuth tab). */
|
||||
signIn: () => void;
|
||||
/** Optional initial query (from the omnibox / address bar `?q=`). */
|
||||
initialQuery?: string;
|
||||
}
|
||||
|
||||
const MODES: { id: SearchMode; label: string; hint: string }[] = [
|
||||
{ id: 'search', label: 'Search', hint: 'Fast grounded answer' },
|
||||
{ id: 'news', label: 'News', hint: 'Recency-biased' },
|
||||
{ id: 'research', label: 'Research', hint: 'Multi-source synthesis' },
|
||||
{ id: 'deep', label: 'Deep', hint: 'Plan + wide research' },
|
||||
];
|
||||
|
||||
const SOURCE_CHIPS = ['web', 'news', 'academic', 'github', 'reddit', 'x'];
|
||||
|
||||
// Hanzo tiers mirror @hanzo/plans (the SoT for pricing); shown in the picker's
|
||||
// upgrade banner. Full plan detail lives at console.hanzo.ai/pricing.
|
||||
const PLAN_TIERS = [
|
||||
{ name: 'Pro', price: '$20' },
|
||||
{ name: 'Max', price: '$100' },
|
||||
{ name: 'Ultra', price: '$200' },
|
||||
];
|
||||
|
||||
function HanzoMark({ size = 28 }: { size?: number }) {
|
||||
return (
|
||||
<svg viewBox="0 0 67 67" width={size} height={size} xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M22.21 67V44.6369H0V67H22.21Z" fill="currentColor" />
|
||||
<path d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z" fill="currentColor" />
|
||||
<path d="M22.21 0H0V22.3184H22.21V0Z" fill="currentColor" />
|
||||
<path d="M66.7198 0H44.5098V22.3184H66.7198V0Z" fill="currentColor" />
|
||||
<path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" fill="currentColor" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function ModelPicker({
|
||||
groups,
|
||||
current,
|
||||
onPick,
|
||||
}: {
|
||||
groups: ModelGroup[];
|
||||
current: ChatModel;
|
||||
onPick: (m: ChatModel) => void;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [filter, setFilter] = useState('');
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onDoc = (e: MouseEvent) => {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
||||
};
|
||||
document.addEventListener('mousedown', onDoc);
|
||||
return () => document.removeEventListener('mousedown', onDoc);
|
||||
}, [open]);
|
||||
|
||||
const q = filter.trim().toLowerCase();
|
||||
const shown = useMemo(
|
||||
() =>
|
||||
groups
|
||||
.map((g) => ({
|
||||
...g,
|
||||
models: g.models.filter(
|
||||
(m) => !q || m.name.toLowerCase().includes(q) || m.id.toLowerCase().includes(q),
|
||||
),
|
||||
}))
|
||||
.filter((g) => g.models.length),
|
||||
[groups, q],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="ae-picker" ref={ref}>
|
||||
<button className="ae-picker-btn" onClick={() => setOpen((v) => !v)} title="Choose model">
|
||||
<span className="ae-dot" />
|
||||
{current.name}
|
||||
<svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true">
|
||||
<path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" strokeWidth="1.5" />
|
||||
</svg>
|
||||
</button>
|
||||
{open && (
|
||||
<div className="ae-picker-menu">
|
||||
<input
|
||||
className="ae-picker-filter"
|
||||
placeholder="Search models…"
|
||||
value={filter}
|
||||
autoFocus
|
||||
onChange={(e) => setFilter(e.target.value)}
|
||||
/>
|
||||
<div className="ae-picker-list">
|
||||
<button
|
||||
className={'ae-model-row' + (current.id === AUTO_MODEL.id ? ' active' : '')}
|
||||
onClick={() => {
|
||||
onPick(AUTO_MODEL);
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
<span className="ae-model-name">Auto</span>
|
||||
<span className="ae-model-desc">Routes to the best model</span>
|
||||
</button>
|
||||
{shown.map((g) => (
|
||||
<div key={g.family} className="ae-model-group">
|
||||
<div className="ae-model-group-label">{g.label}</div>
|
||||
{g.models.map((m) => (
|
||||
<button
|
||||
key={m.id}
|
||||
className={'ae-model-row' + (current.id === m.id ? ' active' : '')}
|
||||
onClick={() => {
|
||||
onPick(m);
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
<span className="ae-model-name">
|
||||
{m.name}
|
||||
{m.tier && <span className="ae-badge">{m.tier}</span>}
|
||||
</span>
|
||||
{m.description && <span className="ae-model-desc">{m.description}</span>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<a className="ae-plan-banner" href="https://console.hanzo.ai/pricing" target="_blank" rel="noreferrer">
|
||||
<span>Unlock every model</span>
|
||||
<span className="ae-plan-tiers">
|
||||
{PLAN_TIERS.map((t) => (
|
||||
<span key={t.name} className="ae-plan-tier">
|
||||
{t.name} <b>{t.price}</b>
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SourceCard({ s, index }: { s: SearchSource; index: number }) {
|
||||
let host = '';
|
||||
try {
|
||||
host = new URL(s.url).hostname.replace(/^www\./, '');
|
||||
} catch {
|
||||
host = s.url;
|
||||
}
|
||||
return (
|
||||
<a className="ae-source" href={s.url} target="_blank" rel="noreferrer" title={s.title}>
|
||||
<span className="ae-source-head">
|
||||
{s.favicon ? <img src={s.favicon} alt="" width="14" height="14" /> : <span className="ae-dot" />}
|
||||
<span className="ae-source-host">{host}</span>
|
||||
<span className="ae-source-idx">{index + 1}</span>
|
||||
</span>
|
||||
<span className="ae-source-title">{s.title}</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function InputCard({
|
||||
value,
|
||||
onChange,
|
||||
onSubmit,
|
||||
mode,
|
||||
setMode,
|
||||
sources,
|
||||
toggleSource,
|
||||
models,
|
||||
model,
|
||||
setModel,
|
||||
busy,
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
onSubmit: () => void;
|
||||
mode: SearchMode;
|
||||
setMode: (m: SearchMode) => void;
|
||||
sources: Set<string>;
|
||||
toggleSource: (s: string) => void;
|
||||
models: ModelGroup[];
|
||||
model: ChatModel;
|
||||
setModel: (m: ChatModel) => void;
|
||||
busy: boolean;
|
||||
}) {
|
||||
const taRef = useRef<HTMLTextAreaElement>(null);
|
||||
useEffect(() => {
|
||||
const ta = taRef.current;
|
||||
if (!ta) return;
|
||||
ta.style.height = 'auto';
|
||||
ta.style.height = Math.min(ta.scrollHeight, 200) + 'px';
|
||||
}, [value]);
|
||||
|
||||
return (
|
||||
<div className="ae-card">
|
||||
<textarea
|
||||
ref={taRef}
|
||||
className="ae-input"
|
||||
placeholder="Type @ for sources or / for modes"
|
||||
value={value}
|
||||
rows={1}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
onSubmit();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className="ae-card-row">
|
||||
<div className="ae-chips">
|
||||
{SOURCE_CHIPS.map((s) => (
|
||||
<button
|
||||
key={s}
|
||||
className={'ae-chip' + (sources.has(s) ? ' on' : '')}
|
||||
onClick={() => toggleSource(s)}
|
||||
title={`@${s}`}
|
||||
>
|
||||
@{s}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="ae-card-right">
|
||||
<div className="ae-modes">
|
||||
{MODES.map((m) => (
|
||||
<button
|
||||
key={m.id}
|
||||
className={'ae-mode' + (mode === m.id ? ' on' : '')}
|
||||
onClick={() => setMode(m.id)}
|
||||
title={m.hint}
|
||||
>
|
||||
{m.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<ModelPicker groups={models} current={model} onPick={setModel} />
|
||||
<button className="ae-send" onClick={onSubmit} disabled={busy || !value.trim()} title="Search (Enter)">
|
||||
{busy ? (
|
||||
<span className="ae-spinner" />
|
||||
) : (
|
||||
<svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true">
|
||||
<path d="M3 13V3l10 5-10 5z" fill="currentColor" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function AnswerEngine({ apiBase, getToken, signIn, initialQuery }: AnswerEngineProps) {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const [query, setQuery] = useState('');
|
||||
const [submitted, setSubmitted] = useState('');
|
||||
const [mode, setMode] = useState<SearchMode>('search');
|
||||
const [sources, setSources] = useState<Set<string>>(new Set());
|
||||
const [modelGroups, setModelGroups] = useState<ModelGroup[]>([]);
|
||||
const [model, setModel] = useState<ChatModel>(AUTO_MODEL);
|
||||
const [news, setNews] = useState<NewsItem[]>([]);
|
||||
|
||||
const [phase, setPhase] = useState<'idle' | 'running' | 'done'>('idle');
|
||||
const [status, setStatus] = useState('');
|
||||
const [answer, setAnswer] = useState('');
|
||||
const [answerSources, setAnswerSources] = useState<SearchSource[]>([]);
|
||||
const [followUps, setFollowUps] = useState<string[]>([]);
|
||||
const [error, setError] = useState('');
|
||||
const [needAuth, setNeedAuth] = useState(false);
|
||||
const abortRef = useRef<AbortController | null>(null);
|
||||
|
||||
// Load real model catalog + live news (both public — work signed out).
|
||||
// Default stays on Auto ("routes to the best model"); the picker changes it.
|
||||
useEffect(() => {
|
||||
fetchModelCatalog(apiBase)
|
||||
.then(({ groups }) => setModelGroups(groups))
|
||||
.catch(() => {});
|
||||
fetchNews().then(setNews).catch(() => {});
|
||||
}, [apiBase]);
|
||||
|
||||
const client = useMemo(
|
||||
() =>
|
||||
createAiClient({
|
||||
baseUrl: apiBase,
|
||||
getToken: async () => {
|
||||
const t = await getToken();
|
||||
if (!t) throw new Error('__NO_TOKEN__');
|
||||
return t;
|
||||
},
|
||||
}),
|
||||
[apiBase, getToken],
|
||||
);
|
||||
|
||||
const run = useCallback(
|
||||
async (q: string) => {
|
||||
const question = q.trim();
|
||||
if (!question) return;
|
||||
abortRef.current?.abort();
|
||||
const ctrl = new AbortController();
|
||||
abortRef.current = ctrl;
|
||||
|
||||
setSubmitted(question);
|
||||
setPhase('running');
|
||||
setStatus('Searching the web');
|
||||
setAnswer('');
|
||||
setAnswerSources([]);
|
||||
setFollowUps([]);
|
||||
setError('');
|
||||
setNeedAuth(false);
|
||||
|
||||
const opts = {
|
||||
mode,
|
||||
model: model.id,
|
||||
sources: [...sources],
|
||||
signal: ctrl.signal,
|
||||
};
|
||||
try {
|
||||
for await (const ev of client.search(question, opts) as AsyncGenerator<SearchEvent>) {
|
||||
switch (ev.type) {
|
||||
case 'status':
|
||||
setStatus(
|
||||
ev.stage === 'planning'
|
||||
? 'Planning research'
|
||||
: ev.stage === 'searching'
|
||||
? 'Searching the web' + (ev.detail ? `: ${ev.detail}` : '')
|
||||
: ev.stage === 'reading'
|
||||
? 'Reading sources'
|
||||
: 'Writing the answer',
|
||||
);
|
||||
break;
|
||||
case 'sources':
|
||||
setAnswerSources(ev.sources);
|
||||
break;
|
||||
case 'text':
|
||||
setAnswer((a) => a + ev.delta);
|
||||
break;
|
||||
case 'follow_ups':
|
||||
setFollowUps(ev.questions);
|
||||
break;
|
||||
case 'done':
|
||||
setPhase('done');
|
||||
break;
|
||||
case 'error':
|
||||
if (ev.error.includes('__NO_TOKEN__') || /401|invalid api key/i.test(ev.error)) {
|
||||
setNeedAuth(true);
|
||||
} else {
|
||||
setError(ev.error);
|
||||
}
|
||||
setPhase('done');
|
||||
break;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
const msg = e instanceof Error ? e.message : String(e);
|
||||
if (msg.includes('__NO_TOKEN__') || /401|invalid api key/i.test(msg)) setNeedAuth(true);
|
||||
else setError(msg);
|
||||
setPhase('done');
|
||||
}
|
||||
},
|
||||
[client, mode, model, sources],
|
||||
);
|
||||
|
||||
// Fire the initial (address-bar) query once models are ready enough.
|
||||
const didInit = useRef(false);
|
||||
useEffect(() => {
|
||||
if (didInit.current || !initialQuery) return;
|
||||
didInit.current = true;
|
||||
setQuery(initialQuery);
|
||||
void run(initialQuery);
|
||||
}, [initialQuery, run]);
|
||||
|
||||
const submit = useCallback(() => void run(query), [query, run]);
|
||||
const toggleSource = useCallback((s: string) => {
|
||||
setSources((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.has(s) ? next.delete(s) : next.add(s);
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const newThread = useCallback(() => {
|
||||
abortRef.current?.abort();
|
||||
setPhase('idle');
|
||||
setQuery('');
|
||||
setSubmitted('');
|
||||
setAnswer('');
|
||||
setAnswerSources([]);
|
||||
setFollowUps([]);
|
||||
setError('');
|
||||
setNeedAuth(false);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={'ae-root' + (collapsed ? ' collapsed' : '')}>
|
||||
<aside className="ae-sidebar">
|
||||
<div className="ae-side-top">
|
||||
<button className="ae-brand" onClick={newThread} title="Hanzo">
|
||||
<HanzoMark size={22} />
|
||||
{!collapsed && <span>Hanzo</span>}
|
||||
</button>
|
||||
<button className="ae-collapse" onClick={() => setCollapsed((v) => !v)} title="Toggle sidebar">
|
||||
<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
|
||||
<path d="M6 3v10M3 3h10v10H3z" fill="none" stroke="currentColor" strokeWidth="1.3" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button className="ae-new" onClick={newThread}>
|
||||
<svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true">
|
||||
<path d="M8 3v10M3 8h10" fill="none" stroke="currentColor" strokeWidth="1.5" />
|
||||
</svg>
|
||||
{!collapsed && <span>New thread</span>}
|
||||
</button>
|
||||
<nav className="ae-nav">
|
||||
<a href="https://hanzo.chat" target="_blank" rel="noreferrer">Threads</a>
|
||||
<a href="https://docs.hanzo.ai" target="_blank" rel="noreferrer">Docs</a>
|
||||
<a href="https://hanzo.ai" target="_blank" rel="noreferrer">About</a>
|
||||
</nav>
|
||||
<div className="ae-side-bottom">
|
||||
<button className="ae-signin" onClick={signIn}>
|
||||
{collapsed ? '↪' : 'Sign in — free to start'}
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main className="ae-main">
|
||||
{phase === 'idle' ? (
|
||||
<div className="ae-hero">
|
||||
<div className="ae-wordmark">
|
||||
<HanzoMark size={44} />
|
||||
<span>Hanzo</span>
|
||||
</div>
|
||||
<div className="ae-hero-card">
|
||||
<InputCard
|
||||
value={query}
|
||||
onChange={setQuery}
|
||||
onSubmit={submit}
|
||||
mode={mode}
|
||||
setMode={setMode}
|
||||
sources={sources}
|
||||
toggleSource={toggleSource}
|
||||
models={modelGroups}
|
||||
model={model}
|
||||
setModel={setModel}
|
||||
busy={false}
|
||||
/>
|
||||
</div>
|
||||
{news.length > 0 && (
|
||||
<div className="ae-news">
|
||||
<div className="ae-news-head">Top stories</div>
|
||||
<div className="ae-news-grid">
|
||||
{news.slice(0, 6).map((n) => (
|
||||
<a key={n.url} className="ae-news-item" href={n.url} target="_blank" rel="noreferrer">
|
||||
<span className="ae-news-title">{n.title}</span>
|
||||
<span className="ae-news-meta">
|
||||
{n.source}
|
||||
{typeof n.points === 'number' ? ` · ${n.points} pts` : ''}
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="ae-answer-wrap">
|
||||
<div className="ae-answer-scroll">
|
||||
<h1 className="ae-question">{submitted}</h1>
|
||||
|
||||
{answerSources.length > 0 && (
|
||||
<div className="ae-sources">
|
||||
{answerSources.map((s, i) => (
|
||||
<SourceCard key={s.url} s={s} index={i} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'running' && !answer && (
|
||||
<div className="ae-status">
|
||||
<span className="ae-spinner" /> {status}…
|
||||
</div>
|
||||
)}
|
||||
|
||||
{needAuth ? (
|
||||
<div className="ae-auth">
|
||||
<p>Sign in with Hanzo to get AI answers.</p>
|
||||
<button className="ae-signin big" onClick={signIn}>
|
||||
Sign in — free to start
|
||||
</button>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="ae-error">{error}</div>
|
||||
) : (
|
||||
<div
|
||||
className="ae-answer markdown"
|
||||
dangerouslySetInnerHTML={{ __html: renderMarkdown(answer) }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{followUps.length > 0 && (
|
||||
<div className="ae-followups">
|
||||
<div className="ae-followups-head">Follow-up</div>
|
||||
{followUps.map((f) => (
|
||||
<button
|
||||
key={f}
|
||||
className="ae-followup"
|
||||
onClick={() => {
|
||||
setQuery(f);
|
||||
void run(f);
|
||||
}}
|
||||
>
|
||||
{f}
|
||||
<span className="ae-followup-arrow">→</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="ae-answer-composer">
|
||||
<InputCard
|
||||
value={query}
|
||||
onChange={setQuery}
|
||||
onSubmit={submit}
|
||||
mode={mode}
|
||||
setMode={setMode}
|
||||
sources={sources}
|
||||
toggleSource={toggleSource}
|
||||
models={modelGroups}
|
||||
model={model}
|
||||
setModel={setModel}
|
||||
busy={phase === 'running'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
/**
|
||||
* Minimal, XSS-safe Markdown → HTML for the streamed answer. Escapes first,
|
||||
* then applies a small whitelist of inline/block transforms. Only http(s) links
|
||||
* are emitted. No dependency — the answer only needs headings, bold/italic,
|
||||
* code, inline `[text](url)` citations, and bullet/number lists.
|
||||
*/
|
||||
|
||||
function escapeHtml(s: string): string {
|
||||
return s
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"');
|
||||
}
|
||||
|
||||
function inline(s: string): string {
|
||||
let out = escapeHtml(s);
|
||||
// Inline code first so its contents aren't further transformed.
|
||||
out = out.replace(/`([^`]+)`/g, (_m, c) => `<code>${c}</code>`);
|
||||
// [text](url) — only http(s) URLs; text keeps prior transforms applied after.
|
||||
out = out.replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, (_m, text, url) => {
|
||||
const safeUrl = url.replace(/"/g, '%22');
|
||||
return `<a href="${safeUrl}" target="_blank" rel="noreferrer">${text}</a>`;
|
||||
});
|
||||
out = out.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
|
||||
out = out.replace(/(^|[^*])\*([^*]+)\*/g, '$1<em>$2</em>');
|
||||
return out;
|
||||
}
|
||||
|
||||
export function renderMarkdown(md: string): string {
|
||||
const lines = md.replace(/\r\n/g, '\n').split('\n');
|
||||
const html: string[] = [];
|
||||
let listType: 'ul' | 'ol' | null = null;
|
||||
|
||||
const closeList = () => {
|
||||
if (listType) {
|
||||
html.push(`</${listType}>`);
|
||||
listType = null;
|
||||
}
|
||||
};
|
||||
|
||||
for (const raw of lines) {
|
||||
const line = raw.trimEnd();
|
||||
if (!line.trim()) {
|
||||
closeList();
|
||||
continue;
|
||||
}
|
||||
const heading = /^(#{1,4})\s+(.*)$/.exec(line);
|
||||
if (heading) {
|
||||
closeList();
|
||||
const level = heading[1].length + 1; // h2..h5
|
||||
html.push(`<h${level}>${inline(heading[2])}</h${level}>`);
|
||||
continue;
|
||||
}
|
||||
const bullet = /^[-*]\s+(.*)$/.exec(line);
|
||||
if (bullet) {
|
||||
if (listType !== 'ul') {
|
||||
closeList();
|
||||
html.push('<ul>');
|
||||
listType = 'ul';
|
||||
}
|
||||
html.push(`<li>${inline(bullet[1])}</li>`);
|
||||
continue;
|
||||
}
|
||||
const numbered = /^\d+\.\s+(.*)$/.exec(line);
|
||||
if (numbered) {
|
||||
if (listType !== 'ol') {
|
||||
closeList();
|
||||
html.push('<ol>');
|
||||
listType = 'ol';
|
||||
}
|
||||
html.push(`<li>${inline(numbered[1])}</li>`);
|
||||
continue;
|
||||
}
|
||||
closeList();
|
||||
html.push(`<p>${inline(line)}</p>`);
|
||||
}
|
||||
closeList();
|
||||
return html.join('\n');
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
/**
|
||||
* Hanzo model catalog for the answer-engine model picker. Reads the REAL
|
||||
* catalog from `GET api.hanzo.ai/v1/models` (public, no auth) and keeps the
|
||||
* text/chat families — never a hardcoded or fabricated list. Switching the
|
||||
* picker actually changes the `model` passed to the @hanzo/ai search primitive.
|
||||
*/
|
||||
|
||||
export interface ChatModel {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
tier: string;
|
||||
family: string;
|
||||
context: number | null;
|
||||
}
|
||||
|
||||
export interface ModelGroup {
|
||||
family: string;
|
||||
label: string;
|
||||
models: ChatModel[];
|
||||
}
|
||||
|
||||
interface ModelRow {
|
||||
id: string;
|
||||
name?: string;
|
||||
fullName?: string;
|
||||
description?: string;
|
||||
tier?: string;
|
||||
context?: number | null;
|
||||
}
|
||||
interface FamilyRow {
|
||||
id: string;
|
||||
name?: string;
|
||||
description?: string;
|
||||
models?: string[];
|
||||
}
|
||||
interface ModelsResponse {
|
||||
data?: ModelRow[];
|
||||
families?: FamilyRow[];
|
||||
}
|
||||
|
||||
/** Text/chat families to surface in the picker (embedding/image/audio excluded). */
|
||||
const CHAT_FAMILIES = ["enso", "zen5", "zen3"];
|
||||
|
||||
/** The "let the gateway route" option — mirrors Scira's Auto. */
|
||||
export const AUTO_MODEL: ChatModel = {
|
||||
id: "auto",
|
||||
name: "Auto",
|
||||
description: "Routes to the best model",
|
||||
tier: "",
|
||||
family: "auto",
|
||||
context: null,
|
||||
};
|
||||
|
||||
export async function fetchModelCatalog(
|
||||
apiBase: string,
|
||||
signal?: AbortSignal,
|
||||
): Promise<{ groups: ModelGroup[]; flat: ChatModel[] }> {
|
||||
const res = await fetch(`${apiBase}/v1/models`, signal ? { signal } : {});
|
||||
if (!res.ok) throw new Error(`models ${res.status}`);
|
||||
const body = (await res.json()) as ModelsResponse;
|
||||
|
||||
const byId = new Map<string, ModelRow>();
|
||||
for (const row of body.data ?? []) byId.set(row.id, row);
|
||||
|
||||
const groups: ModelGroup[] = [];
|
||||
for (const fam of body.families ?? []) {
|
||||
if (!CHAT_FAMILIES.includes(fam.id)) continue;
|
||||
const models: ChatModel[] = [];
|
||||
for (const id of fam.models ?? []) {
|
||||
const row = byId.get(id);
|
||||
models.push({
|
||||
id,
|
||||
name: row?.name || row?.fullName || id,
|
||||
description: row?.description || "",
|
||||
tier: row?.tier || "",
|
||||
family: fam.id,
|
||||
context: row?.context ?? null,
|
||||
});
|
||||
}
|
||||
if (models.length) {
|
||||
groups.push({ family: fam.id, label: fam.name || fam.id, models });
|
||||
}
|
||||
}
|
||||
|
||||
const flat = groups.flatMap((g) => g.models);
|
||||
return { groups, flat };
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
/**
|
||||
* Realtime news / world feed for the Hanzo answer engine.
|
||||
*
|
||||
* ONE provider interface, two implementations:
|
||||
* - `hanzo` — the Hanzo cloud feed (api.hanzo.ai). This is the intended
|
||||
* source; the cloud endpoint does not exist yet (see the Scira→clients/ai
|
||||
* capability-port plan), so it is the clearly-marked SEAM. When cloud ships
|
||||
* a news endpoint, set DEFAULT_FEED = 'hanzo' and nothing else changes.
|
||||
* - `hackernews` — a real, keyless, CORS-open live feed (Hacker News via the
|
||||
* Algolia API). The working default today. NOT a fabricated feed.
|
||||
*/
|
||||
|
||||
export interface NewsItem {
|
||||
title: string;
|
||||
url: string;
|
||||
source: string;
|
||||
points?: number;
|
||||
comments?: number;
|
||||
author?: string;
|
||||
}
|
||||
|
||||
export interface FeedProvider {
|
||||
id: string;
|
||||
label: string;
|
||||
fetch(signal?: AbortSignal): Promise<NewsItem[]>;
|
||||
}
|
||||
|
||||
/** Real live feed — Hacker News front page (keyless, `access-control-allow-origin: *`). */
|
||||
const hackerNews: FeedProvider = {
|
||||
id: "hackernews",
|
||||
label: "Top stories",
|
||||
async fetch(signal) {
|
||||
const res = await fetch(
|
||||
"https://hn.algolia.com/api/v1/search?tags=front_page&hitsPerPage=12",
|
||||
signal ? { signal } : {},
|
||||
);
|
||||
if (!res.ok) throw new Error(`news ${res.status}`);
|
||||
const data = (await res.json()) as { hits?: Array<Record<string, unknown>> };
|
||||
return (data.hits ?? [])
|
||||
.map((h) => ({
|
||||
title: String(h.title ?? ""),
|
||||
url: String(h.url ?? ""),
|
||||
source: "Hacker News",
|
||||
points: typeof h.points === "number" ? h.points : undefined,
|
||||
comments: typeof h.num_comments === "number" ? h.num_comments : undefined,
|
||||
author: typeof h.author === "string" ? h.author : undefined,
|
||||
}))
|
||||
.filter((n) => n.title && n.url);
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* The Hanzo cloud feed SEAM. Wire to `GET api.hanzo.ai/v1/news` once the cloud
|
||||
* capability port lands; until then it throws so callers fall back to the real
|
||||
* feed above. Kept here so the swap is one line (DEFAULT_FEED = 'hanzo').
|
||||
*/
|
||||
export function hanzoFeed(apiBase: string, getToken: () => Promise<string | null>): FeedProvider {
|
||||
return {
|
||||
id: "hanzo",
|
||||
label: "Hanzo News",
|
||||
async fetch(signal) {
|
||||
const token = await getToken();
|
||||
const res = await fetch(`${apiBase}/v1/news`, {
|
||||
headers: token ? { Authorization: `Bearer ${token}` } : {},
|
||||
...(signal ? { signal } : {}),
|
||||
});
|
||||
if (!res.ok) throw new Error(`hanzo news ${res.status}`);
|
||||
const data = (await res.json()) as { items?: NewsItem[] };
|
||||
return data.items ?? [];
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/** Active feed. Flip to 'hanzo' when the cloud news endpoint ships. */
|
||||
export const DEFAULT_FEED = "hackernews";
|
||||
|
||||
export async function fetchNews(signal?: AbortSignal): Promise<NewsItem[]> {
|
||||
try {
|
||||
return await hackerNews.fetch(signal);
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
@@ -3084,4 +3084,32 @@ browser.tabs.onRemoved.addListener((tabId) => {
|
||||
}
|
||||
});
|
||||
|
||||
// ── Omnibox → Hanzo answer engine ────────────────────────────────────────
|
||||
// Firefox's address bar can't be silently hijacked (a security boundary), and
|
||||
// `chrome_settings_overrides.search_provider` default-engine takeover is policy
|
||||
// gated. The WebExtension mechanism that DOES work without opt-in is the
|
||||
// omnibox keyword: type `hanzo <query>` in the address bar → the query loads
|
||||
// the Hanzo answer engine (AI answer + sources + news) with ?q=. Same surface
|
||||
// as the new-tab landing.
|
||||
try {
|
||||
const omnibox = (browser as any).omnibox;
|
||||
if (omnibox) {
|
||||
omnibox.setDefaultSuggestion({
|
||||
description: 'Search Hanzo AI — AI answers with sources and realtime news',
|
||||
});
|
||||
omnibox.onInputEntered.addListener((text: string, disposition: string) => {
|
||||
const url = browser.runtime.getURL('newtab.html') + '?q=' + encodeURIComponent(text);
|
||||
if (disposition === 'newForegroundTab') {
|
||||
void browser.tabs.create({ url });
|
||||
} else if (disposition === 'newBackgroundTab') {
|
||||
void browser.tabs.create({ url, active: false });
|
||||
} else {
|
||||
void browser.tabs.update({ url });
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('[Hanzo] omnibox unavailable:', e);
|
||||
}
|
||||
|
||||
console.log('[Hanzo] Firefox background script loaded');
|
||||
|
||||
@@ -24,6 +24,12 @@ async function build() {
|
||||
const backgroundAliases = { '@hanzo/usage': hanzoUsage };
|
||||
console.log('Using @hanzo/usage engine:', hanzoUsage);
|
||||
|
||||
// The answer engine (new-tab landing) consumes the @hanzo/ai SDK's `search`
|
||||
// primitive — the ONE place the search/deep-research capability is defined.
|
||||
// It's a published npm dependency (^0.2.3), so esbuild resolves it from
|
||||
// node_modules like any other package — works identically locally and on CI
|
||||
// (no sibling-repo path assumption).
|
||||
|
||||
// Ensure dist directories exist
|
||||
fs.mkdirSync('dist/browser-extension', { recursive: true });
|
||||
fs.mkdirSync('dist/browser-extension/chrome', { recursive: true });
|
||||
@@ -99,6 +105,19 @@ async function build() {
|
||||
sourcemap: 'inline',
|
||||
});
|
||||
|
||||
// Answer engine (new-tab landing + omnibox/address-bar search target).
|
||||
// React 18 surface consuming the @hanzo/ai `search` primitive; monochrome.
|
||||
await esbuild.build({
|
||||
entryPoints: ['src/newtab.ts'],
|
||||
bundle: true,
|
||||
outfile: 'dist/browser-extension/newtab.js',
|
||||
platform: 'browser',
|
||||
target: ['chrome90', 'firefox91', 'safari14'],
|
||||
// New-tab page loads on every tab — ship it lean (minified, no inline map).
|
||||
minify: true,
|
||||
sourcemap: false,
|
||||
});
|
||||
|
||||
// Build browser control module
|
||||
await esbuild.build({
|
||||
entryPoints: ['src/browser-control.ts'],
|
||||
@@ -188,17 +207,18 @@ async function build() {
|
||||
);
|
||||
}
|
||||
|
||||
// Copy popup + sidebar HTML/CSS
|
||||
for (const f of ['popup.html', 'popup.css', 'sidebar.html', 'sidebar.css', 'callback.html', 'ai-worker.js']) {
|
||||
// Copy popup + sidebar + answer-engine HTML/CSS
|
||||
for (const f of ['popup.html', 'popup.css', 'sidebar.html', 'sidebar.css', 'newtab.html', 'newtab.css', 'callback.html', 'ai-worker.js']) {
|
||||
const src = path.join('src', f);
|
||||
if (fs.existsSync(src)) {
|
||||
fs.copyFileSync(src, path.join(dir, f));
|
||||
}
|
||||
}
|
||||
|
||||
// Copy compiled popup/sidebar scripts
|
||||
// Copy compiled popup/sidebar/newtab scripts
|
||||
fs.copyFileSync('dist/browser-extension/popup.js', path.join(dir, 'popup.js'));
|
||||
fs.copyFileSync('dist/browser-extension/sidebar.js', path.join(dir, 'sidebar.js'));
|
||||
fs.copyFileSync('dist/browser-extension/newtab.js', path.join(dir, 'newtab.js'));
|
||||
|
||||
// Copy icons into each browser directory
|
||||
for (const icon of ['icon16.png', 'icon48.png', 'icon128.png']) {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"manifest_version": 3,
|
||||
"name": "Hanzo AI",
|
||||
"version": "1.9.22",
|
||||
"description": "AI-powered dev assistant — click-to-code navigation, source maps, WebGPU AI, and MCP integration for Claude Code.",
|
||||
"version": "1.9.33",
|
||||
"description": "AI answer engine, search, and dev assistant — Hanzo AI in a new tab, address-bar search, source-cited answers, realtime news, WebGPU AI, and MCP.",
|
||||
"permissions": [
|
||||
"activeTab",
|
||||
"identity",
|
||||
@@ -49,6 +49,12 @@
|
||||
"128": "icon128.png"
|
||||
}
|
||||
},
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "newtab.html"
|
||||
},
|
||||
"omnibox": {
|
||||
"keyword": "hanzo"
|
||||
},
|
||||
"sidebar_action": {
|
||||
"default_title": "Hanzo AI",
|
||||
"default_panel": "sidebar.html",
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"manifest_version": 3,
|
||||
"name": "Hanzo AI",
|
||||
"version": "1.9.25",
|
||||
"description": "AI-powered dev assistant — click-to-code navigation, source maps, WebGPU AI, and MCP integration for Claude Code.",
|
||||
"version": "1.9.33",
|
||||
"description": "AI answer engine, search, and dev assistant — Hanzo AI in a new tab, address-bar search, source-cited answers, realtime news, WebGPU AI, and MCP.",
|
||||
"key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxfXGh0lPUT5m04GKfjUwrLsV6pLaK3VcZuFRPogqAir2tzyLYnQPRtHynue9yvDyguIVnlkwvcwfDOYZrvH76zbw4s6onPBG8HqTKO6LQ9K3kdO1qBBkMMjdOgULQ1MrWThEbpU7NSTiwLYpEta/jAvrKRCAeKIlQE8p6htZmPy9aRUZuae66JgLcAlzD2vviX9sVB1asFABJVswL1RgZ55/8IzZaUrFjzOo9OHK4hmEOtudzkML+5silsAYdC+1BZugph2x94ai17YmZTCL1XyUa5Ke4q80cj+i9rOTgzhZs+mruyhL/AvNVOXilsgqCdNqSz77naWzC3pVGbxOewIDAQAB",
|
||||
"permissions": [
|
||||
"activeTab",
|
||||
@@ -54,6 +54,19 @@
|
||||
"48": "icon48.png",
|
||||
"128": "icon128.png"
|
||||
},
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "newtab.html"
|
||||
},
|
||||
"chrome_settings_overrides": {
|
||||
"search_provider": {
|
||||
"name": "Hanzo",
|
||||
"keyword": "hanzo",
|
||||
"search_url": "https://hanzo.chat/c/new?q={searchTerms}&submit=true",
|
||||
"favicon_url": "https://hanzo.ai/favicon.ico",
|
||||
"encoding": "UTF-8",
|
||||
"is_default": true
|
||||
}
|
||||
},
|
||||
"web_accessible_resources": [
|
||||
{
|
||||
"resources": [
|
||||
|
||||
@@ -0,0 +1,277 @@
|
||||
/* Hanzo Answer Engine — strict monochrome (brand primaryColor #FFFFFF).
|
||||
Shared tokens mirror popup.css / sidebar.css. */
|
||||
:root {
|
||||
--bg: #0a0a0a;
|
||||
--surface: #0f0f0f;
|
||||
--surface-2: #171717;
|
||||
--surface-3: #1e1e1e;
|
||||
--text: #fafafa;
|
||||
--text-2: #a3a3a3;
|
||||
--text-3: #666666;
|
||||
--border: rgba(255, 255, 255, 0.10);
|
||||
--border-2: rgba(255, 255, 255, 0.16);
|
||||
--glass: rgba(255, 255, 255, 0.04);
|
||||
--glass-2: rgba(255, 255, 255, 0.07);
|
||||
--radius: 12px;
|
||||
--radius-sm: 8px;
|
||||
--radius-xs: 6px;
|
||||
--sidebar-w: 232px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a { color: inherit; text-decoration: none; }
|
||||
|
||||
.ae-root {
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-w) 1fr;
|
||||
height: 100vh;
|
||||
transition: grid-template-columns 0.18s ease;
|
||||
}
|
||||
.ae-root.collapsed { grid-template-columns: 60px 1fr; }
|
||||
|
||||
/* ── Sidebar ─────────────────────────────────────────────── */
|
||||
.ae-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 14px 12px;
|
||||
border-right: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
min-width: 0;
|
||||
}
|
||||
.ae-side-top { display: flex; align-items: center; justify-content: space-between; }
|
||||
.ae-brand {
|
||||
display: flex; align-items: center; gap: 9px;
|
||||
background: none; border: none; color: var(--text);
|
||||
font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
|
||||
cursor: pointer; padding: 4px; min-width: 0;
|
||||
}
|
||||
.ae-brand span { white-space: nowrap; overflow: hidden; }
|
||||
.ae-collapse, .ae-new, .ae-signin {
|
||||
cursor: pointer; font-family: inherit;
|
||||
}
|
||||
.ae-collapse {
|
||||
background: none; border: none; color: var(--text-3);
|
||||
padding: 4px; border-radius: var(--radius-xs); display: flex;
|
||||
}
|
||||
.ae-collapse:hover { color: var(--text); background: var(--glass); }
|
||||
.ae-new {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
margin-top: 8px; padding: 9px 12px;
|
||||
background: var(--text); color: #000; border: none;
|
||||
border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
|
||||
white-space: nowrap; overflow: hidden;
|
||||
}
|
||||
.ae-new:hover { background: #fff; }
|
||||
.ae-nav { display: flex; flex-direction: column; margin-top: 12px; gap: 1px; }
|
||||
.ae-nav a {
|
||||
padding: 8px 10px; border-radius: var(--radius-xs);
|
||||
color: var(--text-2); font-size: 13px; white-space: nowrap;
|
||||
}
|
||||
.ae-nav a:hover { background: var(--glass); color: var(--text); }
|
||||
.ae-side-bottom { margin-top: auto; }
|
||||
.ae-signin {
|
||||
width: 100%; padding: 9px 12px;
|
||||
background: var(--glass-2); border: 1px solid var(--border);
|
||||
color: var(--text); border-radius: var(--radius-sm);
|
||||
font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden;
|
||||
}
|
||||
.ae-signin:hover { border-color: var(--border-2); background: var(--surface-2); }
|
||||
.ae-signin.big { width: auto; padding: 10px 18px; font-size: 14px; }
|
||||
.collapsed .ae-brand span, .collapsed .ae-new span, .collapsed .ae-nav { display: none; }
|
||||
|
||||
/* ── Main ────────────────────────────────────────────────── */
|
||||
.ae-main { min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
|
||||
|
||||
/* Hero (empty state) */
|
||||
.ae-hero {
|
||||
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
gap: 26px; padding: 24px; overflow-y: auto;
|
||||
}
|
||||
.ae-wordmark {
|
||||
display: flex; align-items: center; gap: 14px;
|
||||
font-size: 46px; font-weight: 600; letter-spacing: -0.03em; color: var(--text);
|
||||
}
|
||||
.ae-hero-card { width: 100%; max-width: 720px; }
|
||||
.ae-news { width: 100%; max-width: 720px; }
|
||||
.ae-news-head, .ae-followups-head, .ae-model-group-label {
|
||||
font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
|
||||
color: var(--text-3); margin-bottom: 10px;
|
||||
}
|
||||
.ae-news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||||
.ae-news-item {
|
||||
display: flex; flex-direction: column; gap: 4px;
|
||||
padding: 11px 13px; border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm); background: var(--surface);
|
||||
}
|
||||
.ae-news-item:hover { border-color: var(--border-2); background: var(--surface-2); }
|
||||
.ae-news-title { font-size: 13px; color: var(--text); line-height: 1.35; }
|
||||
.ae-news-meta { font-size: 11px; color: var(--text-3); }
|
||||
|
||||
/* ── Input card ──────────────────────────────────────────── */
|
||||
.ae-card {
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--border-2);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.02);
|
||||
overflow: hidden;
|
||||
}
|
||||
.ae-input {
|
||||
display: block; width: 100%; resize: none;
|
||||
padding: 16px 18px 6px; min-height: 30px; max-height: 200px;
|
||||
background: transparent; border: none; outline: none;
|
||||
color: var(--text); font-family: inherit; font-size: 15px; line-height: 1.5;
|
||||
}
|
||||
.ae-input::placeholder { color: var(--text-3); }
|
||||
.ae-card-row {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
gap: 8px; padding: 8px 10px 10px; flex-wrap: wrap;
|
||||
}
|
||||
.ae-chips { display: flex; gap: 4px; flex-wrap: wrap; }
|
||||
.ae-chip {
|
||||
padding: 4px 9px; border-radius: 999px; cursor: pointer;
|
||||
background: var(--glass); border: 1px solid var(--border);
|
||||
color: var(--text-3); font-size: 11px; font-family: inherit;
|
||||
}
|
||||
.ae-chip:hover { color: var(--text-2); }
|
||||
.ae-chip.on { background: var(--text); color: #000; border-color: var(--text); }
|
||||
.ae-card-right { display: flex; align-items: center; gap: 6px; }
|
||||
.ae-modes { display: flex; gap: 2px; background: var(--glass); border-radius: var(--radius-xs); padding: 2px; }
|
||||
.ae-mode {
|
||||
padding: 4px 9px; border: none; background: none; cursor: pointer;
|
||||
color: var(--text-3); font-size: 11.5px; font-family: inherit; border-radius: 5px;
|
||||
}
|
||||
.ae-mode:hover { color: var(--text-2); }
|
||||
.ae-mode.on { background: var(--surface-3); color: var(--text); }
|
||||
.ae-send {
|
||||
width: 34px; height: 34px; flex-shrink: 0; cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: var(--text); color: #000; border: none; border-radius: 50%;
|
||||
}
|
||||
.ae-send:disabled { opacity: 0.4; cursor: default; }
|
||||
|
||||
/* ── Model picker ────────────────────────────────────────── */
|
||||
.ae-picker { position: relative; }
|
||||
.ae-picker-btn {
|
||||
display: flex; align-items: center; gap: 6px; cursor: pointer;
|
||||
padding: 6px 10px; background: var(--glass); border: 1px solid var(--border);
|
||||
border-radius: var(--radius-xs); color: var(--text-2); font-size: 12px; font-family: inherit;
|
||||
}
|
||||
.ae-picker-btn:hover { color: var(--text); border-color: var(--border-2); }
|
||||
.ae-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); }
|
||||
.ae-picker-menu {
|
||||
position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 40;
|
||||
width: 320px; max-height: 420px; display: flex; flex-direction: column;
|
||||
background: var(--surface-2); border: 1px solid var(--border-2);
|
||||
border-radius: var(--radius-sm); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6); overflow: hidden;
|
||||
}
|
||||
.ae-picker-filter {
|
||||
margin: 8px; padding: 8px 10px; background: var(--bg);
|
||||
border: 1px solid var(--border); border-radius: var(--radius-xs);
|
||||
color: var(--text); font-family: inherit; font-size: 13px; outline: none;
|
||||
}
|
||||
.ae-picker-list { overflow-y: auto; padding: 0 6px 6px; }
|
||||
.ae-model-group-label { padding: 8px 8px 4px; margin: 0; }
|
||||
.ae-model-row {
|
||||
display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
|
||||
padding: 8px 10px; background: none; border: none; cursor: pointer;
|
||||
border-radius: var(--radius-xs); color: var(--text); font-family: inherit;
|
||||
}
|
||||
.ae-model-row:hover { background: var(--glass); }
|
||||
.ae-model-row.active { background: var(--glass-2); }
|
||||
.ae-model-name { font-size: 13px; display: flex; align-items: center; gap: 7px; }
|
||||
.ae-model-desc { font-size: 11px; color: var(--text-3); line-height: 1.3; }
|
||||
.ae-badge {
|
||||
font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em;
|
||||
padding: 1px 5px; border-radius: 4px; background: var(--glass-2); color: var(--text-2);
|
||||
}
|
||||
.ae-plan-banner {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 8px;
|
||||
padding: 10px 12px; border-top: 1px solid var(--border);
|
||||
font-size: 11.5px; color: var(--text-2); background: var(--surface);
|
||||
}
|
||||
.ae-plan-tiers { display: flex; gap: 8px; }
|
||||
.ae-plan-tier b { color: var(--text); }
|
||||
|
||||
/* ── Answer view ─────────────────────────────────────────── */
|
||||
.ae-answer-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
|
||||
.ae-answer-scroll { flex: 1; overflow-y: auto; padding: 32px 28px 20px; }
|
||||
.ae-answer-scroll > * { max-width: 760px; margin-left: auto; margin-right: auto; }
|
||||
.ae-question { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 20px; }
|
||||
.ae-sources { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 16px; margin-bottom: 8px; }
|
||||
.ae-source {
|
||||
flex: 0 0 190px; display: flex; flex-direction: column; gap: 6px;
|
||||
padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
|
||||
background: var(--surface);
|
||||
}
|
||||
.ae-source:hover { border-color: var(--border-2); background: var(--surface-2); }
|
||||
.ae-source-head { display: flex; align-items: center; gap: 6px; }
|
||||
.ae-source-head img { border-radius: 3px; }
|
||||
.ae-source-host { font-size: 11px; color: var(--text-3); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.ae-source-idx { font-size: 10px; color: var(--text-3); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
|
||||
.ae-source-title { font-size: 12.5px; line-height: 1.35; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
|
||||
.ae-status { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 14px; padding: 8px 0; }
|
||||
|
||||
.ae-answer.markdown { font-size: 15px; line-height: 1.65; color: var(--text); }
|
||||
.markdown h2 { font-size: 20px; margin: 22px 0 10px; font-weight: 600; }
|
||||
.markdown h3 { font-size: 17px; margin: 18px 0 8px; font-weight: 600; }
|
||||
.markdown h4, .markdown h5 { font-size: 15px; margin: 14px 0 6px; font-weight: 600; }
|
||||
.markdown p { margin: 0 0 12px; }
|
||||
.markdown ul, .markdown ol { margin: 0 0 12px; padding-left: 22px; }
|
||||
.markdown li { margin: 4px 0; }
|
||||
.markdown a { color: var(--text); text-decoration: underline; text-decoration-color: var(--text-3); text-underline-offset: 2px; }
|
||||
.markdown a:hover { text-decoration-color: var(--text); }
|
||||
.markdown code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; font-family: 'Geist Mono', ui-monospace, monospace; }
|
||||
|
||||
.ae-followups { margin-top: 26px; border-top: 1px solid var(--border); padding-top: 16px; }
|
||||
.ae-followup {
|
||||
display: flex; align-items: center; justify-content: space-between; width: 100%;
|
||||
padding: 12px 4px; background: none; border: none; border-bottom: 1px solid var(--border);
|
||||
color: var(--text); font-family: inherit; font-size: 14px; text-align: left; cursor: pointer;
|
||||
}
|
||||
.ae-followup:hover { color: var(--text); }
|
||||
.ae-followup:hover .ae-followup-arrow { color: var(--text); transform: translateX(2px); }
|
||||
.ae-followup-arrow { color: var(--text-3); transition: transform 0.12s ease; }
|
||||
|
||||
.ae-error { color: var(--text-2); padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
|
||||
.ae-auth { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 8px 0; }
|
||||
.ae-auth p { margin: 0; color: var(--text-2); font-size: 15px; }
|
||||
|
||||
.ae-answer-composer { padding: 12px 28px 20px; border-top: 1px solid var(--border); background: var(--bg); }
|
||||
.ae-answer-composer > .ae-card { max-width: 760px; margin: 0 auto; }
|
||||
|
||||
/* ── Spinner ─────────────────────────────────────────────── */
|
||||
.ae-spinner {
|
||||
width: 14px; height: 14px; border-radius: 50%; display: inline-block;
|
||||
border: 2px solid var(--border-2); border-top-color: var(--text);
|
||||
animation: ae-spin 0.7s linear infinite;
|
||||
}
|
||||
@keyframes ae-spin { to { transform: rotate(360deg); } }
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.ae-root, .ae-root.collapsed { grid-template-columns: 1fr; }
|
||||
.ae-sidebar { display: none; }
|
||||
.ae-news-grid { grid-template-columns: 1fr; }
|
||||
.ae-hero { gap: 20px; padding: 20px 16px; justify-content: flex-start; padding-top: 48px; }
|
||||
.ae-wordmark { font-size: 34px; }
|
||||
.ae-answer-scroll { padding: 20px 16px 16px; }
|
||||
.ae-answer-composer { padding: 10px 16px 16px; }
|
||||
.ae-question { font-size: 21px; }
|
||||
/* Input card: let the control row wrap so the model picker + send stay
|
||||
reachable at narrow widths (mobile-first). */
|
||||
.ae-card-row { flex-direction: column; align-items: stretch; gap: 10px; }
|
||||
.ae-card-right { justify-content: space-between; }
|
||||
.ae-modes { flex: 1; justify-content: space-between; }
|
||||
.ae-source { flex-basis: 150px; }
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Hanzo</title>
|
||||
<link rel="stylesheet" href="newtab.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="newtab.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,48 @@
|
||||
// Hanzo Answer Engine — new-tab landing + omnibox / address-bar search target.
|
||||
// Mounts the shared AnswerEngine React surface; talks to api.hanzo.ai ONLY,
|
||||
// through the @hanzo/ai `search` primitive. Auth is brokered by the background
|
||||
// (same bridge the popup/sidebar use) so the token never lives in the page.
|
||||
import 'webextension-polyfill';
|
||||
import React from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { AnswerEngine } from './answer/AnswerEngine.js';
|
||||
import { API_BASE_URL } from './shared/config.js';
|
||||
|
||||
declare const browser: typeof chrome;
|
||||
const runtime: typeof chrome = (globalThis as any).browser ?? (globalThis as any).chrome;
|
||||
|
||||
/** Resolve the IAM bearer via the background broker (null when signed out). */
|
||||
async function getToken(): Promise<string | null> {
|
||||
try {
|
||||
const resp: any = await runtime.runtime.sendMessage({ action: 'auth.getToken' });
|
||||
return resp?.token ?? null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function signIn(): void {
|
||||
runtime.runtime.sendMessage({ action: 'auth.login' }).catch(() => {});
|
||||
}
|
||||
|
||||
function boot() {
|
||||
const params = new URLSearchParams(location.search);
|
||||
const initialQuery = params.get('q') ?? undefined;
|
||||
|
||||
const el = document.getElementById('root');
|
||||
if (!el) return;
|
||||
createRoot(el).render(
|
||||
React.createElement(AnswerEngine, {
|
||||
apiBase: API_BASE_URL,
|
||||
getToken,
|
||||
signIn,
|
||||
...(initialQuery ? { initialQuery } : {}),
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', boot);
|
||||
} else {
|
||||
boot();
|
||||
}
|
||||
@@ -57,6 +57,18 @@
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
|
||||
<!-- Embedded search: run a query through the Hanzo answer engine. -->
|
||||
<form id="search-form" style="display:flex;gap:6px;margin-bottom:10px;">
|
||||
<input id="search-input" type="text" placeholder="Search Hanzo AI…" autocomplete="off"
|
||||
style="flex:1;min-width:0;padding:9px 12px;background:var(--surface-light,#171717);border:1px solid var(--border,rgba(255,255,255,0.12));border-radius:8px;color:var(--text,#fafafa);font-size:13px;font-family:inherit;outline:none;">
|
||||
<button id="search-btn" type="submit" title="Search" aria-label="Search"
|
||||
style="width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--primary,#fafafa);border:none;border-radius:8px;color:#000;cursor:pointer;">
|
||||
<svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8">
|
||||
<circle cx="7" cy="7" r="4.5"/><path d="M11 11l3.5 3.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Actions: single Open Chat button + on-page surface settings. -->
|
||||
<button id="open-panel" class="btn btn-secondary" style="margin-bottom: 8px;">
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
|
||||
@@ -134,6 +134,19 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
});
|
||||
});
|
||||
|
||||
// --- Embedded search (feature: query → Hanzo answer engine) ---
|
||||
const searchForm = document.getElementById('search-form') as HTMLFormElement | null;
|
||||
const searchInput = document.getElementById('search-input') as HTMLInputElement | null;
|
||||
searchForm?.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
const q = searchInput?.value.trim();
|
||||
const target = q
|
||||
? chrome.runtime.getURL('newtab.html') + '?q=' + encodeURIComponent(q)
|
||||
: chrome.runtime.getURL('newtab.html');
|
||||
chrome.tabs.create({ url: target });
|
||||
window.close();
|
||||
});
|
||||
|
||||
// --- Open chat ---
|
||||
// Default surface: in-page edge-pinned overlay (content-script). Honours
|
||||
// the user's `overlayEnabled`, `overlaySide`, and `overlayWidth` prefs.
|
||||
|
||||
Generated
+30
-16
@@ -147,6 +147,9 @@ importers:
|
||||
|
||||
packages/browser:
|
||||
dependencies:
|
||||
'@hanzo/ai':
|
||||
specifier: ^0.2.3
|
||||
version: 0.2.3
|
||||
'@supabase/supabase-js':
|
||||
specifier: ^2.50.3
|
||||
version: 2.50.3
|
||||
@@ -591,22 +594,6 @@ importers:
|
||||
zod-to-json-schema:
|
||||
specifier: ^3.22.4
|
||||
version: 3.24.6(zod@3.25.71)
|
||||
optionalDependencies:
|
||||
'@lancedb/lancedb':
|
||||
specifier: ^0.13.0
|
||||
version: 0.13.0(apache-arrow@18.1.0)
|
||||
'@xenova/transformers':
|
||||
specifier: ^2.17.2
|
||||
version: 2.17.2
|
||||
jsautogui:
|
||||
specifier: ^1.0.0
|
||||
version: 1.0.6
|
||||
playwright:
|
||||
specifier: 1.55.1
|
||||
version: 1.55.1
|
||||
playwright-core:
|
||||
specifier: ^1.47.0
|
||||
version: 1.54.1
|
||||
devDependencies:
|
||||
'@jest/globals':
|
||||
specifier: ^30.1.2
|
||||
@@ -638,6 +625,22 @@ importers:
|
||||
typescript:
|
||||
specifier: ^5.3.3
|
||||
version: 5.8.3
|
||||
optionalDependencies:
|
||||
'@lancedb/lancedb':
|
||||
specifier: ^0.13.0
|
||||
version: 0.13.0(apache-arrow@18.1.0)
|
||||
'@xenova/transformers':
|
||||
specifier: ^2.17.2
|
||||
version: 2.17.2
|
||||
jsautogui:
|
||||
specifier: ^1.0.0
|
||||
version: 1.0.6
|
||||
playwright:
|
||||
specifier: 1.55.1
|
||||
version: 1.55.1
|
||||
playwright-core:
|
||||
specifier: ^1.47.0
|
||||
version: 1.54.1
|
||||
|
||||
packages/meetings:
|
||||
dependencies:
|
||||
@@ -2876,6 +2879,10 @@ packages:
|
||||
resolution: {integrity: sha512-2LZWEZug7qPmnOzXQ2HdvAxPPVRql//34StpJ41hS5x5sA+9dxsMAuLOYP9swFwTic1rPKcCrdprsEfdlpkpnQ==}
|
||||
engines: {node: '>=18'}
|
||||
|
||||
'@hanzo/ai@0.2.3':
|
||||
resolution: {integrity: sha512-vL042sYaVzmWUTrjcCrx3Gay/a+oa9Mgv1cVetapeyikSS4wKOw9lMdSbxw2OD8puJK/Ozew7cglL43MYI9L3Q==}
|
||||
engines: {node: '>=18'}
|
||||
|
||||
'@hanzo/iam@0.13.2':
|
||||
resolution: {integrity: sha512-BYywnIznlcA3sQK4VQzKM+InvyCsdP67F5e4eO3muGjBotF1Zo3hqBRD7VIc9159plrlWzPJqPT4rN/1GuZmuA==}
|
||||
engines: {node: '>=18'}
|
||||
@@ -3685,6 +3692,7 @@ packages:
|
||||
'@lancedb/lancedb@0.21.0':
|
||||
resolution: {integrity: sha512-3c65DfAsTzGb3/Y2WtpJeqPFb2BgoTsYweg3gj9zP6t8CCaKQSeVWEGE8Nowtdj5Jkj9/nmHUoKPv4jCsds2yQ==}
|
||||
engines: {node: '>= 18'}
|
||||
cpu: [x64, arm64]
|
||||
os: [darwin, linux, win32]
|
||||
peerDependencies:
|
||||
apache-arrow: '>=15.0.0 <=18.1.0'
|
||||
@@ -3915,16 +3923,19 @@ packages:
|
||||
'@nut-tree-fork/libnut-darwin@2.7.5':
|
||||
resolution: {integrity: sha512-LbqtPtMPTJUcg4XoPP2jsU1wc8flBcGyKTerKsIfK9cD7nBHROnO0QksbrsbSWEpLym8T8fRtuU7XEY83l6Z2Q==}
|
||||
engines: {node: '>=10.15.3'}
|
||||
cpu: [x64, arm64]
|
||||
os: [darwin, linux, win32]
|
||||
|
||||
'@nut-tree-fork/libnut-linux@2.7.5':
|
||||
resolution: {integrity: sha512-uxaXEcRKnFObAljsoR6tLOBUU1dJ2sctloG6gFgCBGN7+k6Jdv6jZfOuNjd/fpdq2C5WPMm0rtn9EE7h5J3Jcg==}
|
||||
engines: {node: '>=10.15.3'}
|
||||
cpu: [x64, arm64]
|
||||
os: [darwin, linux, win32]
|
||||
|
||||
'@nut-tree-fork/libnut-win32@2.7.5':
|
||||
resolution: {integrity: sha512-yqC87zvmFcDPwFrRU40DYhN0xmEVM3aSkOuyF0IX+y1x+HWSu/i0PNklATpPBhGid3QVb/TOHuVoaraMrUFCNw==}
|
||||
engines: {node: '>=10.15.3'}
|
||||
cpu: [x64, arm64]
|
||||
os: [darwin, linux, win32]
|
||||
|
||||
'@nut-tree-fork/libnut@4.2.6':
|
||||
@@ -3938,6 +3949,7 @@ packages:
|
||||
'@nut-tree-fork/nut-js@4.2.6':
|
||||
resolution: {integrity: sha512-aI/WCX7gE1HFGPH3EZP/UWqpNMM1NMoM/EkXqp7pKMgXFCi8e5+o5p+jd/QOYpmALv9bQg7+s69nI7FONbMqDg==}
|
||||
engines: {node: '>=16'}
|
||||
cpu: [x64, arm64]
|
||||
os: [linux, darwin, win32]
|
||||
|
||||
'@nut-tree-fork/provider-interfaces@4.2.6':
|
||||
@@ -13420,6 +13432,8 @@ snapshots:
|
||||
|
||||
'@hanzo/ai@0.2.0': {}
|
||||
|
||||
'@hanzo/ai@0.2.3': {}
|
||||
|
||||
'@hanzo/iam@0.13.2(react@18.3.1)':
|
||||
dependencies:
|
||||
jose: 6.2.3
|
||||
|
||||
Reference in New Issue
Block a user