kyd-shared-badge 0.2.34 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.2.34",
+  "version": "0.3.0",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -16,6 +16,12 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
+    "@ai-sdk/amazon-bedrock": "^3.0.22",
+    "@aws-sdk/client-s3": "^3.893.0",
+    "@aws-sdk/lib-dynamodb": "^3.893.0",
+    "@chatscope/chat-ui-kit-react": "^2.1.1",
+    "@chatscope/chat-ui-kit-styles": "^1.4.0",
+    "ai": "5.0.47",
     "i18n-iso-countries": "^7.14.0",
     "react-icons": "^5.5.0",
     "recharts": "^2.15.4"
@@ -24,6 +30,7 @@
     "access": "public"
   },
   "devDependencies": {
+    "@types/node": "^24.5.2",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "rollup": "^4.46.2"

package/src/SharedBadgeDisplay.tsx

@@ -21,6 +21,8 @@ import CategoryBars from './components/CategoryBars';
 import SkillsAppendixTable from './components/SkillsAppendixTable';
 import { BusinessRulesProvider } from './components/BusinessRulesContext';
 import Reveal from './components/Reveal';
+import { formatLocalDateTime } from './utils/date';
+import ChatWidget from './chat/ChatWidget';
 
 // const hexToRgba = (hex: string, alpha: number) => {
 //   const clean = hex.replace('#', '');
@@ -519,14 +521,7 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
 
           <Reveal>
             <div className={'pt-8 text-sm text-center'} style={{ color: 'var(--text-secondary)' }}>
-                Report Completed: {new Date(updatedAt).toLocaleString(undefined, {
-                    year: 'numeric',
-                    month: 'long',
-                    day: 'numeric',
-                    hour: 'numeric',
-                    minute: '2-digit',
-                    timeZoneName: 'short',
-                })}
+                Report Completed: {formatLocalDateTime(updatedAt)}
             </div>
           </Reveal>
         </div>
@@ -538,6 +533,8 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
           </p>
         </footer>
       </Reveal>
+      {/* Floating chat widget */}
+      <ChatWidget api={'/api/chat'} badgeId={badgeId} />
     </div>
     </BusinessRulesProvider>
   );

package/src/ambient-ai.d.ts

@@ -0,0 +1,9 @@
+declare module 'ai' {
+  export function streamText(args: any): any;
+}
+
+declare module '@ai-sdk/amazon-bedrock' {
+  export function bedrock(modelId: string, opts?: any): any;
+}
+
+

package/src/chat/ChatWidget.tsx

@@ -0,0 +1,317 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { FiMessageSquare, FiX, FiChevronRight } from 'react-icons/fi';
+import { useChatStreaming } from './useChatStreaming';
+import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
+import './chat-overrides.css';
+import {
+  MainContainer,
+  ChatContainer,
+  MessageList,
+  Message,
+  TypingIndicator
+} from '@chatscope/chat-ui-kit-react';
+import EvidenceBlock from './EvidenceBlock';
+import { tryParseEvidence } from './parseEvidence';
+import Image from 'next/image';
+import { FiSend, FiSquare } from 'react-icons/fi';
+
+type Props = {
+  api?: string;
+  title?: string;
+  hintText?: string;
+  badgeId: string;
+};
+
+export default function ChatWidget({ api = '/api/chat', title = 'KYD Bot', hintText = 'Ask anything about the developer', badgeId }: Props) {
+  // Sidebar open state (default expanded)
+  const [open, setOpen] = useState<boolean>(() => {
+    try { const s = localStorage.getItem('kydChatSidebarOpen'); return s ? s === '1' : true; } catch { return true; }
+  });
+  // Sidebar width with bounds and persistence
+  const [width, setWidth] = useState<number>(() => {
+    try { const w = Number(localStorage.getItem('kydChatSidebarWidth')); return Number.isFinite(w) && w >= 320 ? Math.min(w, Math.floor(window.innerWidth * 0.9)) : 420; } catch { return 420; }
+  });
+  const minWidth = Math.min(320, Math.floor((typeof window !== 'undefined' ? window.innerWidth : 1200) * 0.92));
+  const maxWidth = Math.max(minWidth, Math.floor((typeof window !== 'undefined' ? window.innerWidth : 1200) * 0.9));
+  // Collapsed tab vertical position
+  const [tabTop, setTabTop] = useState<number>(() => {
+    try { const t = Number(localStorage.getItem('kydChatCollapsedTop')); return Number.isFinite(t) ? t : 120; } catch { return 120; }
+  });
+  const [draggingResize, setDraggingResize] = useState(false);
+  const [draggingTab, setDraggingTab] = useState(false);
+  const dragStartXRef = useRef(0);
+  const startWidthRef = useRef(0);
+  const dragStartYRef = useRef(0);
+  const startTopRef = useRef(0);
+  const tabDraggedRef = useRef(false);
+  const [headerTop, setHeaderTop] = useState(0);
+  const [showHint, setShowHint] = useState(false);
+  const { messages, input, setInput, sending, sendMessage, cancel } = useChatStreaming({ api, badgeId });
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight;
+  }, [messages, open]);
+
+  // Optional hint (only shows if user hasn't dismissed before and when collapsed)
+  useEffect(() => {
+    try {
+      const dismissed = localStorage.getItem('kydChatHintDismissed');
+      if (!dismissed) {
+        const shouldShow = !open; // show only if collapsed on first load
+        if (shouldShow) {
+          setShowHint(true);
+          const t = setTimeout(() => setShowHint(false), 6000);
+          return () => clearTimeout(t);
+        }
+      }
+    } catch {}
+  }, [open]);
+
+  const onDismissHint = () => {
+    setShowHint(false);
+    try { localStorage.setItem('kydChatHintDismissed', '1'); } catch {}
+  };
+
+  const header = useMemo(() => (
+    <div className={'flex items-center justify-between px-3 py-3 border-b'} style={{ borderColor: 'var(--icon-button-secondary)', background: 'var(--content-card-background)' }}>
+      <div>
+        <div className={'text-md font-semibold'} style={{ color: 'var(--text-main)' }}>{title}</div>
+      </div>
+      <button aria-label={'Collapse chat sidebar'} onClick={() => setOpen(false)} className={'p-1 rounded hover:opacity-80'}>
+        <FiX size={16} style={{ color: 'var(--text-secondary)' }} />
+      </button>
+    </div>
+  ), [title]);
+
+  // Persist sidebar UI state
+  useEffect(() => {
+    try { localStorage.setItem('kydChatSidebarOpen', open ? '1' : '0'); } catch {}
+  }, [open]);
+  useEffect(() => {
+    try { localStorage.setItem('kydChatSidebarWidth', String(width)); } catch {}
+  }, [width]);
+  useEffect(() => {
+    try { localStorage.setItem('kydChatCollapsedTop', String(tabTop)); } catch {}
+  }, [tabTop]);
+
+  // ESC collapses when open
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && open) setOpen(false);
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open]);
+
+  // Measure sticky header height so the sidebar does not overlap it
+  useEffect(() => {
+    const measure = () => {
+      const el = document.querySelector('header');
+      const h = el ? Math.floor(el.getBoundingClientRect().height) : 0;
+      setHeaderTop(h);
+      // Keep collapsed tab within bounds beneath header
+      setTabTop(t => Math.max(h + 16, t));
+    };
+    measure();
+    window.addEventListener('resize', measure);
+    window.addEventListener('scroll', measure, { passive: true });
+    return () => {
+      window.removeEventListener('resize', measure);
+      window.removeEventListener('scroll', measure);
+    };
+  }, []);
+
+  // Drag to resize (left edge of sidebar)
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      if (!draggingResize) return;
+      const clientX = e.clientX;
+      const vw = window.innerWidth;
+      const newWidth = Math.min(maxWidth, Math.max(minWidth, vw - clientX));
+      setWidth(newWidth);
+      e.preventDefault();
+    };
+    const onUp = () => {
+      if (draggingResize) setDraggingResize(false);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+    if (draggingResize) {
+      window.addEventListener('mousemove', onMove);
+      window.addEventListener('mouseup', onUp);
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+    }
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+  }, [draggingResize, maxWidth]);
+
+  // Drag collapsed tab vertically
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      if (!draggingTab) return;
+      const delta = e.clientY - dragStartYRef.current;
+      if (Math.abs(delta) > 3) tabDraggedRef.current = true;
+      const minTop = headerTop + 16;
+      const next = Math.max(minTop, Math.min(window.innerHeight - 160 - 16, startTopRef.current + delta));
+      setTabTop(next);
+      e.preventDefault();
+    };
+    const onUp = () => setDraggingTab(false);
+    if (draggingTab) {
+      window.addEventListener('mousemove', onMove);
+      window.addEventListener('mouseup', onUp);
+      document.body.style.userSelect = 'none';
+    }
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+      if (!draggingTab) document.body.style.userSelect = '';
+    };
+  }, [draggingTab]);
+
+  return (
+    <div className={'fixed z-50'} aria-live={'polite'}>
+      {/* Collapsed vertical tab (draggable) */}
+      {!open && (
+        <div style={{ position: 'fixed', right: 0, top: Math.max(headerTop + 16, tabTop), height: 160, width: 44 }}>
+          <button
+            aria-label={'Open chat sidebar'}
+            aria-expanded={open}
+            onMouseDown={(e) => { setDraggingTab(true); dragStartYRef.current = e.clientY; startTopRef.current = tabTop; tabDraggedRef.current = false; }}
+            onMouseUp={(e) => { e.preventDefault(); const dragged = tabDraggedRef.current; tabDraggedRef.current = false; setDraggingTab(false); if (!dragged) setOpen(true); }}
+            className={'h-full w-full shadow-lg border rounded-l-lg flex flex-col items-center justify-between transition hover:opacity-90'}
+            style={{ background: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', cursor: draggingTab ? 'grabbing' : 'grab' }}
+          >
+            <FiMessageSquare size={18} style={{ color: 'var(--text-main)', marginTop: 8 }} />
+            <span style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)', color: 'var(--text-secondary)', fontSize: 12, letterSpacing: 1 }}>Chat</span>
+            <FiChevronRight size={16} style={{ color: 'var(--text-secondary)', marginBottom: 8 }} />
+          </button>
+          {showHint && (
+            <button onClick={() => { setOpen(true); onDismissHint(); }} className={'absolute -left-2 -top-8 group max-w-xs text-left'}>
+              <div className={'px-2 py-1 rounded shadow border'}
+                   style={{ background: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
+                <span className={'text-[10px]'} style={{ color: 'var(--text-main)' }}>{hintText}</span>
+              </div>
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Expanded right sidebar */}
+      {open && (
+        <aside
+          role={'complementary'}
+          aria-label={'Chat sidebar'}
+          style={{ position: 'fixed', top: headerTop, right: 0, bottom: 0, width, maxWidth: '92vw' }}
+          className={'shadow-xl border flex flex-col overflow-hidden'}
+        >
+          {/* Left-edge resizer */}
+          <div
+            onMouseDown={(e) => { setDraggingResize(true); dragStartXRef.current = e.clientX; startWidthRef.current = width; }}
+            aria-hidden={'true'}
+            style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 6, cursor: 'col-resize', zIndex: 1 }}
+          />
+          {/* Panel chrome */}
+          <div style={{ background: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', height: '100%', display: 'flex', flexDirection: 'column' }} className={'bg-[var(--content-card-background)] border-l'}>
+            {header}
+            <div className={'flex-1 flex flex-col'} style={{ minHeight: 0 }}>
+              <div className={'flex-1'} style={{ minHeight: 0 }}>
+                <MainContainer style={{ height: '100%', position: 'relative', background: 'var(--content-card-background)', border: 'none'}}>
+                  <ChatContainer style={{ height: '100%' }}>
+                    <MessageList typingIndicator={undefined} autoScrollToBottom>
+                    {messages.length === 0 && (
+                      <Message model={{ message: 'Start a conversation. I can answer questions about this developer’s report.', sender: 'KYD', direction: 'incoming', position: 'single' }} />
+                    )}
+                    {messages
+                      .filter(m => !(m.role === 'assistant' && (m.content || '').trim().length === 0))
+                      .map(m => (
+                        <Message key={m.id} model={{
+                          message: m.content,
+                          sender: m.role === 'user' ? 'You' : 'KYD',
+                          direction: m.role === 'user' ? 'outgoing' : 'incoming',
+                          position: 'single'
+                        }} />
+                      ))}
+                    {(() => {
+                      const last = messages[messages.length - 1];
+                      const isAssistantPlaceholder = sending && last && last.role === 'assistant' && (last.content || '').trim().length === 0;
+                      if (!isAssistantPlaceholder) return null;
+                      return (
+                        <div className={'mx-3 my-1'}>
+                          <div style={{
+                            background: 'var(--bubble-background)',
+                            color: 'var(--bubble-foreground)',
+                            border: '1px solid var(--icon-button-secondary)',
+                            borderRadius: 12,
+                            padding: '8px 12px',
+                            display: 'inline-block'
+                          }}>
+                            <span className={'kyd-typing-dots'}>
+                              <span />
+                              <span />
+                              <span />
+                            </span>
+                          </div>
+                        </div>
+                      );
+                    })()}
+                    {(() => {
+                      const last = [...messages].reverse().find(mm => mm.role === 'assistant');
+                      const evidence = last ? tryParseEvidence(last.content) : null;
+                      return evidence ? (
+                        <div className={'mx-2'}>
+                          <EvidenceBlock data={evidence} />
+                        </div>
+                      ) : null;
+                    })()}
+                  </MessageList>
+                </ChatContainer>
+              </MainContainer>
+              </div>
+              <form onSubmit={(e) => { e.preventDefault(); if (!sending && input.trim()) sendMessage(); }}>
+                <div className={'flex items-end gap-2 p-2 border-t'} style={{ borderColor: 'var(--icon-button-secondary)', background: 'var(--content-card-background)' }}>
+                  <input
+                    aria-label={'Type your message'}
+                    className={'flex-1 px-3 py-2 rounded kyd-chat-input'}
+                    placeholder={'Ask anything about the developer…'}
+                    value={input}
+                    onChange={e => setInput(e.target.value)}
+                  />
+                  {sending ? (
+                    <button
+                      type={'button'}
+                      onClick={() => cancel()}
+                      aria-label={'Stop generating'}
+                      className={'rounded-full flex items-center justify-center transition-opacity'}
+                      style={{ width: 40, height: 40, background: 'var(--text-main)' }}
+                    >
+                      <FiSquare size={18} style={{ color: 'var(--content-card-background)' }} />
+                    </button>
+                  ) : (
+                    <button
+                      type={'submit'}
+                      aria-label={'Send message'}
+                      disabled={!input.trim()}
+                      className={'rounded-full flex items-center justify-center transition-opacity disabled:opacity-50'}
+                      style={{ width: 40, height: 40, background: input.trim() ? 'var(--text-main)' : 'var(--icon-button-secondary)' }}
+                    >
+                      <FiSend size={18} style={{ color: input.trim() ? 'var(--content-card-background)' : 'var(--text-secondary)' }} />
+                    </button>
+                  )}
+                </div>
+              </form>
+            </div>
+          </div>
+        </aside>
+      )}
+    </div>
+  );
+}
+
+

package/src/chat/ChatWindowStreaming.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import './chat-overrides.css';
+import { FiSend } from 'react-icons/fi';
+import { useChatStreaming } from './useChatStreaming';
+
+export default function ChatWindowStreaming({ api = '/api/chat', badgeId }: { api?: string, badgeId: string }) {
+  const { messages, input, setInput, sending, sendMessage } = useChatStreaming({ api, badgeId });
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight;
+  }, [messages]);
+
+  return (
+    <div className="flex flex-col border rounded-lg overflow-hidden" style={{ background: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)'}}>
+      <div ref={listRef} className="p-4 space-y-3 h-72 overflow-auto">
+        {messages.map(m => (
+          <div key={m.id} className={m.role === 'user' ? 'text-right' : 'text-left'}>
+            <div
+              className={`inline-block px-3 py-2 rounded border`}
+              style={
+                m.role === 'user'
+                  ? { background: 'linear-gradient(135deg, var(--gradient-start), var(--gradient-end))', color: '#fff', borderColor: 'transparent' }
+                  : { background: 'var(--bubble-background)', color: 'var(--bubble-foreground)', borderColor: 'var(--icon-button-secondary)' }
+              }
+            >
+              {m.content}
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="p-3 border-t flex gap-2" style={{ borderColor: 'var(--icon-button-secondary)', background: 'var(--content-card-background)'}}>
+        <input
+          value={input}
+          onChange={e=>setInput(e.target.value)}
+          onKeyDown={e=>{ if (e.key==='Enter') sendMessage(); }}
+          className="flex-1 px-3 py-2 rounded border kyd-chat-input"
+          style={{ background: 'var(--input-background)', color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)' }}
+          placeholder="Ask KYD…"
+        />
+        <button
+          onClick={()=>sendMessage()}
+          disabled={sending}
+          className="px-3 py-2 rounded disabled:opacity-60 kyd-chat-button"
+          style={{ background: 'var(--gradient-start)', color: '#fff' }}
+        >
+          {sending ? 'Sending…' : <FiSend size={18} />}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+

package/src/chat/EvidenceBlock.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { EvidencePayload } from './types';
+import { FaGithub, FaGitlab, FaStackOverflow, FaLinkedin, FaGoogle, FaPython } from 'react-icons/fa';
+
+function ProviderIcon({ provider }: { provider: string }) {
+  const n = (provider || '').toLowerCase();
+  if (n.includes('github')) return <FaGithub />;
+  if (n.includes('gitlab')) return <FaGitlab />;
+  if (n.includes('stack')) return <FaStackOverflow />;
+  if (n.includes('google')) return <FaGoogle />;
+  if (n.includes('linkedin')) return <FaLinkedin />;
+  if (n.includes('python')) return <FaPython />;
+  return <span className="inline-block w-3 h-3 rounded-full" style={{ backgroundColor: 'var(--icon-button-secondary)' }} />;
+}
+
+export default function EvidenceBlock({ data }: { data: EvidencePayload }) {
+  if (!data?.claims || data.claims.length === 0) return null;
+  return (
+    <div className={'mt-2 p-2 rounded border text-sm'} style={{ borderColor: 'var(--icon-button-secondary)', color: 'var(--text-main)' }}>
+      {data.claims.map((c, idx) => (
+        <div key={idx} className={'mb-3 last:mb-0'}>
+          <div className={'font-semibold mb-1'}>{c.claim}</div>
+          <div className={'space-y-1'}>
+            {c.items.map((it, i) => (
+              <div key={i} className={'flex items-center gap-2'}>
+                <span className={'text-base'} style={{ color: 'var(--text-secondary)' }}><ProviderIcon provider={it.provider} /></span>
+                <a href={it.url} target={'_blank'} rel={'noopener noreferrer'} className={'underline'} style={{ color: 'var(--icon-accent)' }}>{it.title}</a>
+                {it.date ? <span className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>{new Date(it.date).toLocaleDateString()}</span> : null}
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+

package/src/chat/chat-overrides.css

@@ -0,0 +1,138 @@
+/* Chat UI Kit theme overrides to align with globals.css variables */
+
+/* Container backgrounds */
+.cs-main-container, .cs-chat-container, .cs-message-list, .cs-typing-indicator {
+  background: var(--content-card-background) !important;
+  color: var(--text-main) !important;
+}
+
+/* Header area */
+.cs-chat-header, .cs-message-list__typing-indicator-container {
+  background: var(--content-card-background) !important;
+  border-color: var(--icon-button-secondary) !important;
+}
+
+/* Message bubbles */
+.cs-message__content {
+  background: var(--bubble-background) !important;
+  color: var(--bubble-foreground) !important;
+  border: 1px solid var(--icon-button-secondary) !important;
+}
+
+/* Incoming/outgoing differentiation */
+.cs-message--incoming .cs-message__content {
+  background: var(--bubble-background) !important;
+}
+.cs-message--outgoing .cs-message__content {
+  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)) !important;
+  color: white !important;
+  border-color: transparent !important;
+}
+
+/* Input area */
+.cs-message-input__content-editor, .cs-message-input__content-editor-wrapper {
+  background: var(--input-background) !important;
+  color: var(--text-main) !important;
+}
+.cs-message-input, .cs-message-input__tools, .cs-message-input__content-editor-wrapper {
+  border-color: var(--icon-button-secondary) !important;
+}
+.cs-message-input {
+  background: var(--content-card-background) !important;
+}
+.cs-message-input__send-button {
+  background: var(--gradient-start) !important;
+  color: #fff !important;
+}
+.cs-message-input__send-button:hover {
+  background: var(--icon-accent-hover) !important;
+}
+
+/* Placeholder color for chatscope contenteditable */
+.cs-message-input__content-editor[data-placeholder]:empty::before {
+  color: var(--text-secondary) !important;
+  opacity: 1 !important;
+}
+
+/* Focus outlines/rings - remove white glow and use subtle border */
+.cs-message-input__content-editor:focus, .cs-message-input__content-editor-wrapper:focus-within, .cs-message-input:focus-within {
+  outline: none !important;
+  box-shadow: none !important;
+  border-color: var(--icon-button-secondary) !important;
+}
+.cs-message-input__send-button:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+/* Custom input in ChatWindowStreaming */
+.kyd-chat-input {
+  background: var(--input-background);
+  color: var(--text-main);
+  border-color: var(--icon-button-secondary);
+}
+.kyd-chat-input::placeholder {
+  color: var(--text-secondary);
+}
+.kyd-chat-input:focus {
+  outline: none;
+  box-shadow: none;
+  border-color: var(--icon-button-secondary);
+}
+.kyd-chat-button {
+  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+  color: #fff;
+}
+.kyd-chat-button:hover {
+  background: var(--icon-accent-hover);
+}
+.kyd-chat-button:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+/* Scrollbar subtle styling */
+.cs-message-list::-webkit-scrollbar {
+  width: 8px;
+}
+.cs-message-list::-webkit-scrollbar-thumb {
+  background: var(--icon-button-secondary);
+  border-radius: 8px;
+}
+
+/* Typing indicator */
+.cs-typing-indicator__text {
+  color: var(--text-secondary) !important;
+}
+
+/* Pulsing three dots for assistant placeholder */
+.kyd-typing-dots {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.kyd-typing-dots span {
+  width: 6px;
+  height: 6px;
+  border-radius: 9999px;
+  background: var(--text-secondary);
+  display: inline-block;
+  animation: kyd-bounce 1.2s infinite ease-in-out;
+}
+.kyd-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
+.kyd-typing-dots span:nth-child(3) { animation-delay: 0.3s; }
+@keyframes kyd-bounce {
+  0%, 80%, 100% { transform: translateY(0); opacity: 0.6; }
+  40% { transform: translateY(-3px); opacity: 1; }
+}
+
+/* Prevent scroll chaining to the page so background doesn't bounce */
+.cs-main-container,
+.cs-chat-container,
+.cs-message-list {
+  overscroll-behavior: contain !important;
+  overscroll-behavior-y: contain !important;
+  -webkit-overflow-scrolling: touch;
+}
+
+

package/src/chat/parseEvidence.ts

@@ -0,0 +1,18 @@
+import { EvidencePayload } from './types';
+
+// Very forgiving parser: expects the assistant to include a JSON block delimited by ```json ... ```
+// If no fenced block found, tries to JSON.parse the entire string.
+export function tryParseEvidence(text: string): EvidencePayload | null {
+  try {
+    const fenceStart = text.indexOf('```json');
+    const fenceEnd = text.indexOf('```', fenceStart + 7);
+    const raw = fenceStart >= 0 && fenceEnd > fenceStart ? text.slice(fenceStart + 7, fenceEnd).trim() : text.trim();
+    const obj = JSON.parse(raw);
+    if (obj && obj.type === 'evidence' && Array.isArray(obj.claims)) {
+      return obj as EvidencePayload;
+    }
+  } catch {}
+  return null;
+}
+
+

package/src/chat/types.ts

@@ -0,0 +1,18 @@
+export type EvidenceItem = {
+  provider: string; // e.g., 'github'
+  title: string;    // e.g., repo name
+  url: string;      // link to evidence
+  date?: string;    // ISO date
+};
+
+export type EvidenceClaim = {
+  claim: string;            // e.g., 'This user has lots of python experience'
+  items: EvidenceItem[];
+};
+
+export type EvidencePayload = {
+  type: 'evidence';
+  claims: EvidenceClaim[];
+};
+
+