Add Hunter Companion chat widget (Trader/Tycoon live, Scout upsell)

frontend/src/app/terminal/layout.tsx

@@ -5,6 +5,7 @@ import { useRouter, usePathname } from 'next/navigation'
 import { useStore } from '@/lib/store'
 import { AnalyzePanelProvider } from '@/components/analyze/AnalyzePanelProvider'
 import { BetaBanner } from '@/components/BetaBanner'
+import { HunterCompanion } from '@/components/chat/HunterCompanion'
 import { Loader2 } from 'lucide-react'
 
 export default function TerminalLayout({
@@ -64,6 +65,7 @@ export default function TerminalLayout({
     <AnalyzePanelProvider>
       <BetaBanner />
       {children}
+      <HunterCompanion />
     </AnalyzePanelProvider>
   )
 }

frontend/src/components/chat/HunterCompanion.tsx

@@ -0,0 +1,352 @@
+'use client'
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+import clsx from 'clsx'
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+import { MessageSquare, X, Send, Sparkles, Loader2, Lock, Trash2 } from 'lucide-react'
+import { useStore } from '@/lib/store'
+
+type Role = 'system' | 'user' | 'assistant'
+
+type ChatMessage = {
+  id: string
+  role: Exclude<Role, 'system'>
+  content: string
+  createdAt: number
+}
+
+function uid() {
+  return `${Date.now()}_${Math.random().toString(16).slice(2)}`
+}
+
+function getApiBase(): string {
+  if (typeof window === 'undefined') return 'http://localhost:8000/api/v1'
+  const { protocol, hostname } = window.location
+  if (hostname === 'localhost' || hostname === '127.0.0.1') return 'http://localhost:8000/api/v1'
+  if (/^(10\.|192\.168\.|172\.(1[6-9]|2[0-9]|3[01])\.)/.test(hostname)) return `http://${hostname}:8000/api/v1`
+  return `${protocol}//${hostname}/api/v1`
+}
+
+async function streamChatCompletion(opts: {
+  model?: string
+  messages: Array<{ role: Role; content: string }>
+  temperature?: number
+  onDelta: (delta: string) => void
+}): Promise<void> {
+  const res = await fetch(`${getApiBase()}/llm/chat/completions`, {
+    method: 'POST',
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      model: opts.model,
+      messages: opts.messages,
+      temperature: opts.temperature,
+      stream: true,
+    }),
+  })
+
+  if (!res.ok) {
+    const data = await res.json().catch(() => null)
+    const detail = data?.detail || res.statusText || 'Request failed'
+    throw new Error(detail)
+  }
+
+  const reader = res.body?.getReader()
+  if (!reader) throw new Error('Streaming not supported')
+
+  const decoder = new TextDecoder('utf-8')
+  let buffer = ''
+  for (;;) {
+    const { value, done } = await reader.read()
+    if (done) break
+    buffer += decoder.decode(value, { stream: true })
+
+    // SSE frames separated by blank line
+    const parts = buffer.split('\n\n')
+    buffer = parts.pop() || ''
+    for (const p of parts) {
+      const line = p.split('\n').find((l) => l.startsWith('data: '))
+      if (!line) continue
+      const payload = line.replace(/^data:\s*/, '')
+      if (payload === '[DONE]') return
+      try {
+        const json = JSON.parse(payload)
+        const delta = json?.choices?.[0]?.delta?.content
+        if (typeof delta === 'string' && delta.length) opts.onDelta(delta)
+      } catch {
+        // ignore
+      }
+    }
+  }
+}
+
+function getTier(subscription: any): 'scout' | 'trader' | 'tycoon' {
+  const t = (subscription?.tier || '').toLowerCase()
+  if (t === 'trader') return 'trader'
+  if (t === 'tycoon') return 'tycoon'
+  return 'scout'
+}
+
+export function HunterCompanion() {
+  const pathname = usePathname()
+  const { subscription, user } = useStore()
+  const tier = getTier(subscription)
+  const canChat = tier === 'trader' || tier === 'tycoon'
+
+  const storageKey = useMemo(() => {
+    const uidPart = user?.id ? String(user.id) : 'anon'
+    return `pounce:hunter_companion:v1:${uidPart}`
+  }, [user?.id])
+
+  const [open, setOpen] = useState(false)
+  const [input, setInput] = useState('')
+  const [messages, setMessages] = useState<ChatMessage[]>([])
+  const [sending, setSending] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const listRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem(storageKey)
+      if (!raw) return
+      const parsed = JSON.parse(raw)
+      if (Array.isArray(parsed)) setMessages(parsed)
+    } catch {
+      // ignore
+    }
+  }, [storageKey])
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(storageKey, JSON.stringify(messages.slice(-60)))
+    } catch {
+      // ignore
+    }
+  }, [messages, storageKey])
+
+  useEffect(() => {
+    if (!open) return
+    const el = listRef.current
+    if (!el) return
+    el.scrollTop = el.scrollHeight
+  }, [open, messages.length])
+
+  // Only show inside terminal routes
+  if (!pathname?.startsWith('/terminal')) return null
+
+  const send = async () => {
+    const text = input.trim()
+    if (!text || sending) return
+    setError(null)
+
+    const userMsg: ChatMessage = { id: uid(), role: 'user', content: text, createdAt: Date.now() }
+    const assistantMsgId = uid()
+    setMessages((prev) => [...prev, userMsg, { id: assistantMsgId, role: 'assistant', content: '', createdAt: Date.now() }])
+    setInput('')
+    setSending(true)
+
+    const system = [
+      {
+        role: 'system' as const,
+        content:
+          'You are Pounce Hunter Companion. Be concise, tactical, and specific. Help the user hunt undervalued domains, assess risk, and decide BUY/CONSIDER/SKIP. If you need data, ask for it. Never claim you checked external sources unless the user provided the data.',
+      },
+      {
+        role: 'system' as const,
+        content: `Context: current_terminal_path=${pathname}. Tier=${tier}.`,
+      },
+    ]
+
+    const history = messages
+      .slice(-20)
+      .map((m) => ({ role: m.role as Role, content: m.content }))
+
+    try {
+      await streamChatCompletion({
+        messages: [...system, ...history, { role: 'user', content: text }],
+        onDelta: (delta) => {
+          setMessages((prev) =>
+            prev.map((m) => (m.id === assistantMsgId ? { ...m, content: (m.content || '') + delta } : m))
+          )
+        },
+      })
+    } catch (e: any) {
+      // If Scout: backend returns 403 -> use as upsell (real flow)
+      const msg = e?.message || 'Failed'
+      setError(msg)
+      setMessages((prev) =>
+        prev.map((m) =>
+          m.id === assistantMsgId
+            ? {
+                ...m,
+                content: canChat
+                  ? `Request failed: ${msg}`
+                  : `Hunter Companion is available on Trader & Tycoon. Upgrade to unlock live guidance.`,
+              }
+            : m
+        )
+      )
+    } finally {
+      setSending(false)
+    }
+  }
+
+  const clear = () => {
+    setMessages([])
+    setError(null)
+    try {
+      localStorage.removeItem(storageKey)
+    } catch {
+      // ignore
+    }
+  }
+
+  return (
+    <>
+      {/* FAB */}
+      <button
+        onClick={() => setOpen(true)}
+        className={clsx(
+          'fixed bottom-5 right-5 z-[150] w-14 h-14 border flex items-center justify-center',
+          'bg-[#0A0A0A]/90 backdrop-blur-md',
+          canChat ? 'border-accent/30 text-accent' : 'border-white/[0.12] text-white/60'
+        )}
+        aria-label="Open Hunter Companion"
+      >
+        <div className="absolute -top-1 -left-1 w-1.5 h-1.5 bg-accent animate-pulse" />
+        <MessageSquare className="w-6 h-6" />
+      </button>
+
+      {/* Panel */}
+      {open && (
+        <div className="fixed inset-0 z-[160]">
+          <div className="absolute inset-0 bg-black/85 backdrop-blur-sm" onClick={() => setOpen(false)} />
+
+          <div className="absolute bottom-4 right-4 w-[92vw] max-w-[420px] h-[70vh] max-h-[720px] bg-[#0A0A0A] border border-white/[0.08] shadow-2xl flex flex-col">
+            {/* Header */}
+            <div className="px-4 py-3 border-b border-white/[0.08] bg-[#050505] flex items-center justify-between">
+              <div className="min-w-0">
+                <div className="flex items-center gap-2">
+                  <div className="w-1.5 h-1.5 bg-accent animate-pulse" />
+                  <span className="text-[10px] font-mono tracking-[0.2em] text-accent uppercase">Hunter Companion</span>
+                  {!canChat && (
+                    <span className="ml-2 inline-flex items-center gap-1 px-2 py-0.5 text-[9px] font-mono border border-white/[0.12] text-white/50">
+                      <Lock className="w-3 h-3" /> Scout
+                    </span>
+                  )}
+                </div>
+                <div className="text-xs font-mono text-white/35 mt-1 truncate">
+                  Tactical help for BUY / CONSIDER / SKIP
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={clear}
+                  className="w-8 h-8 flex items-center justify-center border border-white/[0.08] text-white/50 hover:text-white hover:bg-white/[0.02]"
+                  title="Clear"
+                >
+                  <Trash2 className="w-4 h-4" />
+                </button>
+                <button
+                  onClick={() => setOpen(false)}
+                  className="w-8 h-8 flex items-center justify-center border border-white/[0.08] text-white/50 hover:text-white hover:bg-white/[0.02]"
+                  title="Close"
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+
+            {/* Body */}
+            <div ref={listRef} className="flex-1 overflow-y-auto p-4 space-y-3">
+              {messages.length === 0 && (
+                <div className="p-4 border border-white/[0.08] bg-white/[0.02]">
+                  <div className="flex items-center gap-2 text-accent mb-2">
+                    <Sparkles className="w-4 h-4" />
+                    <div className="text-xs font-bold uppercase tracking-wider">Start a hunt</div>
+                  </div>
+                  <div className="text-xs font-mono text-white/50 leading-relaxed">
+                    Paste a domain (or a short list) + your budget and I’ll give you a decisive BUY/CONSIDER/SKIP with reasoning.
+                  </div>
+                  {!canChat && (
+                    <div className="mt-3 flex items-center justify-between gap-3">
+                      <div className="text-[10px] font-mono text-white/35">
+                        Trader & Tycoon get live guidance.
+                      </div>
+                      <Link
+                        href="/pricing"
+                        className="px-3 py-2 bg-accent text-black text-[10px] font-bold uppercase tracking-wider"
+                      >
+                        Upgrade
+                      </Link>
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {messages.map((m) => (
+                <div key={m.id} className={clsx('flex', m.role === 'user' ? 'justify-end' : 'justify-start')}>
+                  <div
+                    className={clsx(
+                      'max-w-[85%] border px-3 py-2 text-xs font-mono leading-relaxed whitespace-pre-wrap',
+                      m.role === 'user'
+                        ? 'border-accent/30 bg-accent/10 text-accent'
+                        : 'border-white/[0.08] bg-white/[0.02] text-white/70'
+                    )}
+                  >
+                    {m.content || (m.role === 'assistant' && sending ? '…' : '')}
+                  </div>
+                </div>
+              ))}
+
+              {error && (
+                <div className="text-[10px] font-mono text-rose-400/80 border border-rose-500/20 bg-rose-500/10 p-3">
+                  {error}
+                </div>
+              )}
+            </div>
+
+            {/* Input */}
+            <div className="p-3 border-t border-white/[0.08] bg-[#050505]">
+              <div className="flex items-center gap-2">
+                <input
+                  value={input}
+                  onChange={(e) => setInput(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                      e.preventDefault()
+                      send()
+                    }
+                  }}
+                  placeholder={canChat ? 'Ask Hunter Companion…' : 'Ask (will prompt upgrade)…'}
+                  className="flex-1 px-3 py-2 bg-white/[0.03] border border-white/[0.08] text-white text-xs font-mono outline-none focus:border-accent/40"
+                  disabled={sending}
+                />
+                <button
+                  onClick={send}
+                  disabled={sending || !input.trim()}
+                  className={clsx(
+                    'w-10 h-10 flex items-center justify-center border transition-colors',
+                    'disabled:opacity-50',
+                    canChat ? 'border-accent/30 bg-accent/10 text-accent hover:bg-accent/20' : 'border-white/[0.08] text-white/50 hover:text-white'
+                  )}
+                  aria-label="Send"
+                >
+                  {sending ? <Loader2 className="w-4 h-4 animate-spin" /> : <Send className="w-4 h-4" />}
+                </button>
+              </div>
+              <div className="mt-2 text-[10px] font-mono text-white/30 flex items-center justify-between">
+                <span>Trader/Tycoon: live AI. Scout: visible + upgrade prompt.</span>
+                <span className="text-white/20">ESC closes</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+