{variant === "pet+ticker" ? ( ) : ( <> {s.toolLabel} )}

); } /* ─── Expanded panel ─────────────────────────────────────── */ const HF_INITIAL_MSGS = [ { id: "1", type: "rate_limit", tool: "cursor", title: "Rate limit reached · GPT-4o", detail: "Claude Sonnet 4 available as fallback", risk: null, actions: ["mark_read", "ignore", "configure"], time: "8m ago" }, { id: "2", type: "completion", tool: "codex", title: "Added Express auth middleware — 14 files, +247", detail: "~/dev/express-api · branch: feat/auth", risk: null, actions: ["mark_read", "jump"], time: "5m ago" }, { id: "3", type: "working", tool: "trae", title: "Analyzing codebase · 47 files…", detail: "Est. 3–5 min remaining · ~12k tokens", risk: null, actions: ["ignore"], time: "now" }, ]; const HF_APPROVAL_MSGS = [ { id: "a1", type: "permission_request", tool: "claude-code", title: "Write to /dev/my-app/config.json", detail: "cwd: ~/dev/my-app · shell: write file", risk: "high", actions: ["authorize", "reject", "ignore"], time: "2m ago" }, { id: "a2", type: "permission_request", tool: "claude-code", title: 'Execute: git commit -am "feat: auth"', detail: "cwd: ~/dev/my-app · shell: exec command", risk: "medium", actions: ["authorize", "reject", "ignore"], time: "3m ago" }, { id: "a3", type: "rate_limit", tool: "cursor", title: "Rate limit reached · GPT-4o", detail: "Claude Sonnet 4 available as fallback", risk: null, actions: ["mark_read", "ignore"], time: "8m ago" }, ]; const HF_RATE_MSGS = [ { id: "r1", type: "rate_limit", tool: "cursor", title: "Rate limit reached · GPT-4o", detail: "Resets in 23 minutes · 47 msgs queued", risk: null, actions: ["configure", "ignore"], time: "just now" }, { id: "r2", type: "rate_limit", tool: "codex", title: "Quota cooldown — 6 min", detail: "27 messages queued · resume at 15:30", risk: null, actions: ["mark_read", "configure"], time: "2m ago" }, { id: "r3", type: "completion", tool: "factory", title: "Droid finished branch", detail: "feat/onboard-flow · 17 commits ready", risk: null, actions: ["mark_read", "jump"], time: "7m ago" }, ]; const HF_DONE_MSGS = [ { id: "d1", type: "completion", tool: "claude-code", title: "Wrote tests for 6 routes", detail: "17 passed · 0 failed · 2 skipped", risk: null, actions: ["mark_read", "jump"], time: "now" }, { id: "d2", type: "completion", tool: "factory", title: "Droid finished feat/onboard", detail: "17 commits · 4 tests passing", risk: null, actions: ["mark_read", "jump"], time: "5m ago" }, { id: "d3", type: "completion", tool: "cursor", title: "Review ready · 6 files", detail: "src/api/* · 3 suggestions, 1 risk", risk: null, actions: ["mark_read", "jump"], time: "12m ago" }, ]; const HF_ERROR_MSGS = [ { id: "e1", type: "error", tool: "codex", title: "Hook error · auth expired", detail: "Re-authorize codex-cli · token 31d old", risk: "high", actions: ["authorize", "ignore"], time: "now" }, { id: "e2", type: "error", tool: "gemini", title: "Auth expired · gemini-cli", detail: "Token rotated 31 days ago", risk: "medium", actions: ["authorize", "ignore"], time: "11m ago" }, ]; function HfExpandedIsland({ headerState = "running" }) { const initialFor = (st) => st === "approval" ? HF_APPROVAL_MSGS : st === "rate" ? HF_RATE_MSGS : st === "done" ? HF_DONE_MSGS : st === "error" ? HF_ERROR_MSGS : HF_INITIAL_MSGS; const [msgs, setMsgs] = useStateHF(() => initialFor(headerState)); const [feedback, setFeedback] = useStateHF(null); const fbTimer = useRefHF(null); useEffectHF(() => { setMsgs(initialFor(headerState)); }, [headerState]); const showFb = (text) => { setFeedback(text); if (fbTimer.current) clearTimeout(fbTimer.current); fbTimer.current = setTimeout(() => setFeedback(null), 1400); }; const handle = (id, action) => { if (action === "authorize") { setMsgs(p => p.filter(m => m.id !== id)); showFb("Authorized"); } else if (action === "reject") { setMsgs(p => p.filter(m => m.id !== id)); showFb("Rejected"); } else if (action === "ignore" || action === "mark_read") { setMsgs(p => p.filter(m => m.id !== id)); showFb("Marked read"); } else if (action === "jump") showFb("Jumped to source"); else if (action === "configure") showFb("Open AI Tools settings"); }; const head = HF_STATE_MAP[headerState] || HF_STATE_MAP.running; const approvalCount = msgs.filter(m => m.type === "permission_request").length; const petStateLabel = headerState === "approval" ? "waiting input" : headerState === "running" ? "analyzing" : headerState === "rate" ? "rate-limited" : headerState === "done" ? "ready" : headerState === "error" ? "error" : "idle"; return (

e.stopPropagation()}> {/* Top status bar */}

{head.toolLabel} · {head.ticker}

{/* Pet rail + tools tabs + usage bars */}

{petStateLabel}

A Claude ⚙ Codex ↖ Cursor

Context window 48.2k / 200k (24%)

5-hour limit 62% · resets 2h

Weekly · all models Near limit

{/* Messages header */}

Messages · {msgs.length} unread {approvalCount > 0 && ( ⚡ {approvalCount} need approval )}

{feedback && (

{feedback}

)} {/* Messages list */}

{msgs.length === 0 &&

✓ All clear

} {msgs.map(msg => )}

{/* Footer */}

VibePet · agent pulse

); } function HfMessageCard({ msg, onAction }) { const cls = msg.risk === "high" ? "hf-msg high" : msg.risk === "medium" ? "hf-msg warn" : msg.type === "rate_limit" ? "hf-msg rate" : msg.type === "completion" ? "hf-msg done" : msg.type === "working" ? "hf-msg working" : msg.type === "error" ? "hf-msg high" : "hf-msg"; const typeLabel = msg.type === "permission_request" ? "Approval" : msg.type === "rate_limit" ? "Rate Limit" : msg.type === "completion" ? "Done" : msg.type === "working" ? "Working" : msg.type === "error" ? "Error" : "Notice"; const badgeCls = msg.risk === "high" ? "badge high" : msg.risk === "medium" ? "badge warn" : msg.type === "rate_limit" ? "badge rate" : msg.type === "completion" ? "badge done" : msg.type === "working" ? "badge working" : msg.type === "error" ? "badge high" : "badge"; const tDef = (typeof TOOLS !== 'undefined' && TOOLS[msg.tool]) || { name: msg.tool, mark: "··", tint: "#aaa" }; const cfg = { authorize: { label: "Authorize", icon: "🛡", cls: "hf-btn primary" }, reject: { label: "Reject", icon: "✕", cls: "hf-btn danger" }, ignore: { label: "Ignore", icon: "⊘", cls: "hf-btn" }, mark_read: { label: "Mark Read", icon: "✓✓", cls: "hf-btn" }, configure: { label: "Configure", icon: "⚙", cls: "hf-btn" }, jump: { label: "Jump", icon: "↗", cls: "hf-btn" }, }; return (

{tDef.icon ?

: tDef.mark} {tDef.name} {typeLabel} {msg.risk === "high" && ⚠ HIGH} {msg.time}

{msg.title}

{msg.detail}

{msg.actions.map(a => { const c = cfg[a]; if (!c) return null; return ( ); })}

); } /* ─── Live island: hoverable + clickable, swaps collapsed/expanded ─ */ function HfLiveIsland({ scenario = "macbook", initialState = "running", defaultExpanded = false, hoverEnabled = true, variant = "pet+ticker", density = "full", usageMode = "5h", notchWidth = 120, state: stateProp, onStateChange, onExpandedChange, forceExpanded, }) { const [internalState, setInternalState] = useStateHF(initialState); const state = stateProp ?? internalState; const setState = (s) => { if (stateProp === undefined) setInternalState(s); onStateChange?.(s); }; const [expanded, setExpanded] = useStateHF(defaultExpanded); useEffectHF(() => { onExpandedChange?.(expanded); }, [expanded]); // External / programmatic control (e.g. cursor demo). Each change forces a flip. useEffectHF(() => { if (forceExpanded === undefined) return; if (collapseTimer.current) { clearTimeout(collapseTimer.current); collapseTimer.current = null; } if (hoverTimer.current) { clearTimeout(hoverTimer.current); hoverTimer.current = null; } setExpanded(!!forceExpanded); }, [forceExpanded]); const hoverTimer = useRefHF(null); const collapseTimer = useRefHF(null); const wrapRef = useRefHF(null); const expand = useCallbackHF(() => { if (collapseTimer.current) { clearTimeout(collapseTimer.current); collapseTimer.current = null; } setExpanded(true); }, []); const collapse = useCallbackHF(() => { if (hoverTimer.current) { clearTimeout(hoverTimer.current); hoverTimer.current = null; } collapseTimer.current = setTimeout(() => setExpanded(false), 240); }, []); const onEnter = () => { if (!hoverEnabled) return; if (collapseTimer.current) { clearTimeout(collapseTimer.current); collapseTimer.current = null; } hoverTimer.current = setTimeout(expand, 280); }; const onLeave = () => { if (!hoverEnabled) return; if (hoverTimer.current) { clearTimeout(hoverTimer.current); hoverTimer.current = null; } collapse(); }; const onClick = (e) => { e.stopPropagation(); if (!expanded) { if (hoverTimer.current) { clearTimeout(hoverTimer.current); hoverTimer.current = null; } if (collapseTimer.current) { clearTimeout(collapseTimer.current); collapseTimer.current = null; } setExpanded(true); } }; useEffectHF(() => { if (!expanded) return; const onDocClick = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setExpanded(false); }; document.addEventListener("mousedown", onDocClick); return () => document.removeEventListener("mousedown", onDocClick); }, [expanded]); useEffectHF(() => () => { if (hoverTimer.current) clearTimeout(hoverTimer.current); if (collapseTimer.current) clearTimeout(collapseTimer.current); }, []); return (

{expanded ? : }

); } /* ─── State chips control ────────────────────────────────── */ function HfStateChips({ state, onChange }) { return (

e.stopPropagation()}> state {HF_STATE_KEYS.map(k => ( ))}

); } /* ─── Display chrome ─────────────────────────────────────── */ function HfMenuBar({ scenario = "macbook" }) { return (

Finder File Edit View Window

🔋 92% Wed 16:42

); } function HfCodeWindow({ style }) { return (

~/dev/my-app — auth.ts

import {"{ Request, Response, NextFunction }"} from "express";

import jwt from "jsonwebtoken";

// Verify caller has a valid bearer token

export const authMiddleware = (

req: Request, res: Response, next: NextFunction

) => {"{"}

const token = req.headers.authorization?.split(" ")[1];

if (!token) return res.status(401).json({"{ error: "}"Unauthorized"{" }"});

try {"{"}

const payload = jwt.verify(token, env.JWT_SECRET);

(req as any).user = payload;

next();

{"}"} catch {"{"}

res.status(401).json({"{ error: "}"Invalid token"{" }"});

); } function HfDock({ apps = 5 }) { const cls = ["", "b", "c", "d", "e"]; return (

{Array.from({ length: apps }).map((_, i) => )}

); } /* ─── MacBook scene ──────────────────────────────────────── */ function HfMacBookScene({ width = 1080, height = 680, scale = 1, scenario = "macbook", islandState = "running", defaultExpanded = false, showChips = true, hoverEnabled = true, variant = "pet+ticker", usageMode = "5h", notchWidth = 120, caption, showCodeWindow = true, showDock = true, showMenuBar = true, size = "default", // default | mini demo = false, // animated cursor demo overlay }) { const [state, setState] = useStateHF(islandState); const [expanded, setExpanded] = useStateHF(defaultExpanded); const [forceExpand, setForceExpand] = useStateHF(undefined); useEffectHF(() => { setState(islandState); }, [islandState]); useEffectHF(() => { setExpanded(defaultExpanded); }, [defaultExpanded]); const padX = size === "mini" ? 24 : 36; const padTop = size === "mini" ? 36 : 56; const padBottom = size === "mini" ? 8 : 56; // When scale != 1, render the display at natural size, scale it, and // reserve the scaled-down layout box on the wrapper so siblings flow correctly. const scaledW = width * scale; const scaledH = height * scale; return (

{caption &&

{caption}

}

{showMenuBar && }

{showCodeWindow && ( )} {showDock && } {showChips && } {demo && ( )}

); } /* ─── Cursor demo overlay ─────────────────────────────────── Animated white cursor that scrolls in, hovers the notch to expand it, "grabs" the pet, and drags it onto the desktop. Bails as soon as the user moves their real pointer over the scene. */ function HfCursorDemo({ width, height, onForceExpand }) { const rootRef = useRefHF(null); const [armed, setArmed] = useStateHF(false); // intersected viewport const [cancelled, setCancelled] = useStateHF(false); // user took over const [cycle, setCycle] = useStateHF(0); // loop counter const [pose, setPose] = useStateHF({ x: -80, y: height * 0.85, visible: false, clicking: false, dragging: false, }); const [landed, setLanded] = useStateHF(null); // {x,y} where pet rests // Waypoints in unscaled scene coordinates. // Pet is inside the expanded panel near its top-left; lift it UP and OUT of the panel // before sliding diagonally to the desktop, so the extraction is unambiguous. const panelTop = 30; // panel sits flush below the notch (y ~30) const panelBottom = panelTop + 440; // expanded panel min-height const wp = { start: { x: width * 0.06, y: height * 0.78 }, notch: { x: width / 2 + 6, y: 24 }, pet: { x: width / 2 - 195, y: panelTop + 88 }, // inside the panel, on the pet sprite lifted: { x: width / 2 - 195, y: panelTop - 36 }, // above the panel, out in open air desk: { x: width * 0.18, y: panelBottom + 36 }, // bottom-left desktop offX: { x: -80, y: height * 0.85 }, }; // IntersectionObserver: arm on first scroll-into-view useEffectHF(() => { if (!rootRef.current) return; const io = new IntersectionObserver(([e]) => { if (e.isIntersecting && !armed && !cancelled) setArmed(true); }, { threshold: 0.3 }); io.observe(rootRef.current); return () => io.disconnect(); }, [armed, cancelled]); // User pointer takes over → cancel demo useEffectHF(() => { if (!rootRef.current || cancelled) return; const scene = rootRef.current.closest('.hf-display'); if (!scene) return; const handler = () => setCancelled(true); scene.addEventListener('pointerenter', handler); return () => scene.removeEventListener('pointerenter', handler); }, [cancelled]); // Timeline useEffectHF(() => { if (!armed || cancelled) return; const timers = []; const rafs = []; let stopped = false; const at = (t, fn) => timers.push(setTimeout(() => { if (!stopped) fn(); }, t)); const ease = (u) => u < 0.5 ? 2*u*u : 1 - Math.pow(-2*u + 2, 2) / 2; const tween = (from, to, dur) => { const t0 = performance.now(); const step = () => { if (stopped) return; const u = Math.min(1, (performance.now() - t0) / dur); const e = ease(u); setPose(p => ({ ...p, x: from.x + (to.x - from.x) * e, y: from.y + (to.y - from.y) * e })); if (u < 1) rafs.push(requestAnimationFrame(step)); }; rafs.push(requestAnimationFrame(step)); }; // 0ms — cursor fades in down-left at(0, () => setPose(p => ({ ...p, ...wp.start, visible: true, clicking: false, dragging: false, popping: false }))); // 350ms — glide up toward notch at(350, () => tween(wp.start, wp.notch, 1100)); // 1500ms — trigger hover/expand at(1500, () => onForceExpand?.(true)); // 2200ms — move down to the pet inside the expanded panel at(2200, () => tween(wp.notch, wp.pet, 700)); // 2950ms — click flash on the panel pet at(2950, () => setPose(p => ({ ...p, clicking: true }))); // 3150ms — grab: dragged pet appears AT panel-pet location with a "popping" scale at(3150, () => setPose(p => ({ ...p, clicking: false, dragging: true, popping: true }))); // 3450ms — lift the pet UP and OUT of the panel (vertical extraction) at(3450, () => { setPose(p => ({ ...p, popping: false })); tween(wp.pet, wp.lifted, 450); }); // 3950ms — now slide diagonally to the desktop drop zone at(3950, () => tween(wp.lifted, wp.desk, 1100)); // 5100ms — release; pet lands at(5100, () => { setPose(p => ({ ...p, dragging: false })); setLanded({ ...wp.desk }); }); // 5400ms — collapse the island back at(5400, () => onForceExpand?.(false)); // 6000ms — move cursor away at(6000, () => tween(wp.desk, wp.offX, 900)); // 7000ms — hide cursor; cycle done at(7000, () => setPose(p => ({ ...p, visible: false }))); // 7800ms — clear landed pet, then loop at(7800, () => setLanded(null)); at(8300, () => { if (!stopped && !cancelled) setCycle(c => c + 1); }); return () => { stopped = true; timers.forEach(clearTimeout); rafs.forEach(cancelAnimationFrame); }; }, [armed, cancelled, cycle, width, height]); return ( ); } Object.assign(window, { HF_STATE_KEYS, HF_STATE_LABELS, HF_STATE_MAP, HfCollapsedIsland, HfExpandedIsland, HfLiveIsland, HfStateChips, HfMacBookScene, HfMenuBar, HfCodeWindow, HfDock, HfUsageMini, HfPetIcon, HfToolLogo, HfCursorDemo, });