# AI Key — Interactive Hub Prototypes (Lab)

**Status:** disposable exploration. **Not** committed to the app repo. Lives outside `AI-GLOBE-ensedaily/` on purpose.
**Date:** 2026-06-05

## Goal

Explore how the **AI Key company detail hub** could feel as an *interactive website*. Build **one representative screen (Samsung Electronics hub)** in **three distinct interactive design languages**, view them locally, and decide a direction later.

## Hard constraints

- **Do not touch** the live site (en.sedaily.ai) or the existing `frontend/src/app/key/` code. Zero edits to the app.
- Everything self-contained in `ai-key-lab/` (git-repo-free folder). Throwaway.
- Apples-to-apples: all three use the **same company + same mock dataset** (`data.js`); only the design language & interaction model differ.

## Representative surface: Company hub

Mirrors the real hub's content blocks (from `CompanyHubClient.tsx`):
1. Identity header (+ milestone badge) — name, ticker, sector, description
2. KPI strip — market cap, foreign ownership, open, volume, day range, 52W range, price (▲/▼)
3. Price chart with timeframe toggle — 1W / 1M / 3M / 1Y / 5Y
4. AI analysis note — headline + rating + multi-section narrative
5. Disclosures & downloads — dated rows, report PDFs ("Coming soon" states)
6. Related companies (peers)

Sample = **Samsung Electronics** (005930.KS, sector Semiconductor, market cap ₩1099T, foreign ~48%, price 185,700 ▲). All figures **MOCK**, derived from the real data shape in `backend/aikey-samsung.json`.

## The three directions

### A — "Terminal Pro" (`terminal.html`) · dark data terminal
- **Philosophy:** data exploration for power users (Bloomberg-grade density).
- **Look:** dark slate / near-black, monospace numerics, neon blue/green/amber accents, tight grid.
- **Key interactions:** price chart with **crosshair + rich hover tooltip**, **brush-to-zoom** (dataZoom), metric overlays toggle (volume / moving avg / foreign %), **sortable + filterable disclosure table**, count-up KPI tiles.
- **Tech:** ECharts (CDN) for chart; Tailwind Play CDN; vanilla JS state.

### B — "Editorial Brief" (`editorial.html`) · light editorial scrollytelling
- **Philosophy:** the company as a premium long-read (FT/Bloomberg feature feel).
- **Look:** light, generous whitespace, serif display headline (Fraunces/Newsreader) + clean sans body (Inter), ink + gold accents (ties to the existing "AI KEY Premium" gold).
- **Key interactions:** **scroll-driven reveals** — the AI analysis unfolds as you scroll; the price line **draws itself** (SVG stroke animation) on enter; **sticky mini-KPI rail**; pull quotes; smooth section transitions.
- **Tech:** hand-rolled SVG chart + IntersectionObserver; custom CSS (no utility framework) for a bespoke editorial feel.

### C — "Command Bento" (`bento.html`) · app-like modular dashboard
- **Philosophy:** app-like exploration (modern SaaS — Linear/Vercel vibe).
- **Look:** clean soft-dark, rounded cards, subtle glass/elevation, tasteful accent, spring transitions.
- **Key interactions:** modular **bento grid** of tiles (price / KPIs / AI insight / disclosures / peers / sector); **click a tile → expands into a focused drawer** without leaving the page; animated layout transitions; segmented toggles; peer chips.
- **Tech:** CSS-grid bento + ECharts mini-charts (CDN); JS drawer/expand with FLIP-style transitions.

## File layout

```
ai-key-lab/
  DESIGN.md        ← this file
  data.js          ← shared mock dataset → window.AIKEY_DATA (works over file://)
  index.html       ← landing: links + one-line pitch for each direction
  terminal.html    ← Direction A
  editorial.html   ← Direction B
  bento.html       ← Direction C
```

## How to view

- Easiest: **double-click `index.html`** (needs internet — ECharts/fonts/Tailwind load from CDN).
- Or a tiny local server (avoids any file:// quirks):
  ```bash
  cd ~/Desktop/ensedaily/ai-key-lab && python3 -m http.server 8080
  # open http://localhost:8080/
  ```

## Later (out of scope for now)

Once a direction is chosen, port it into the real stack as a `/key/[company]` treatment using the repo's React + **recharts** + Tailwind (recharts replaces ECharts; wire `useDartFinancials` / real hub data). That is a separate, future step.