A bilingual (English / 简体中文) market-intelligence & product-innovation platform for FStea, a Chinese refrigerated RTD tea brand. It implements the full PRD: real-time market trend sensing → structured competitor parsing → matching against FS product assets → AI-generated product concepts (with evidence chains) → customer/prototype/launch feedback loop, plus data-source management and a token-consumption meter.
Built from the requirement set in Archive.zip (PRD, AI application scenarios, demo
feedback, and the platform transcription report).
cd fstea-cockpit
node server.js # → http://localhost:4178- Zero dependencies. Node ≥ 18 only. Nothing to
npm install, nothing to build. - Change port:
PORT=4200 node server.js - Reset demo data:
rm -rf data && node server.js(re-seeds 81 trends, 20 SKUs, 10 customers…)
| Code | Module | What it does |
|---|---|---|
| DASH | Cockpit Home | KPI stat cards, 8-step NPD clearance funnel, status donut, 6-month momentum, AI recommendations |
| TRND | Market Trend Radar | 6-layer identification pipeline, score formula, FS-relevance, human approve/reject/rename/re-score |
| COMP | Competitive SKU Matrix | CSV upload of retail shelf data, sortable comparison matrix, brand summary |
| FSCP | FS Product Asset Matching | 37 capability labels, 20-SKU library, 10 customer profiles, admin-only cost/margin/sales |
| GEN | AI Concept Generator | Multi-model concurrent generation, full evidence chain (证据链), FS-fit breakdown, save library |
| FBK | Feedback Closed Loop | Customer / prototype / launch feedback forms + history, AI reverse-field suggestions |
| ADM | Data Source Management | Add/edit/toggle/delete sources (10 types, 8 methods) + token consumption meter |
| INTL | Intelligent Analysis | Create analysis tasks, run them, token/cost tracking, PPTX report output |
| ARCH | Trend Archives | All 81 trends, state distribution, monthly snapshots, lifecycle classification |
- EN ↔ 中文 full i18n (UI chrome + data) — toggle top-right or via ⌘K.
- Standard / Admin role — Admin reveals confidential cost, gross margin & monthly sales.
- Light / Dark themes.
- ⌘K command palette — jump to any module or run quick actions.
- Human-in-the-loop trend review; feedback that advances concept stages; evidence chains on every concept.
server.js Zero-dep Node http server (static + /api/*)
lib/
db.js JSON-file persistence (atomic writes), auto-seeds on first run
seed.js All seed data (bilingual): 81 trends, 20 products, 10 customers, 37 labels, feedback…
conceptEngine.js Evidence-chain concept generation (offline-deterministic; LLM-pluggable)
trendEngine.js Score formula, FS relevance, lifecycle, AI interpretation
api.js REST router for all 9 modules
public/
index.html
css/styles.css Design system (tokens, components, light+dark)
js/
app.js Shell: grouped sidebar, breadcrumbs, command palette, theme/lang/role
i18n.js EN/ZH dictionaries + enum translation
icons.js Inline SVG line-icon set (no emoji in chrome)
charts.js Pure-SVG charts: sparkline, ring gauge, line, donut, funnel, bars
ui.js DOM + component helpers (modal, toast, palette, sortable tables…)
pages/*.js One module per file
test/
browser-check.mjs Headless-Chrome CDP harness: renders every route + interactions, captures console errors
screenshots.mjs Full-page screenshot capture per route (light/dark)
The UI was rebuilt from a research pass over ~120 leading professional products (Linear, Stripe, Vercel, Datadog, Grafana, Radix, Tremor, Ant Design Pro, TDesign, Arco, Palantir Blueprint, Tableau, …). Principles applied:
- Neutral-dominant, accent-scarce — ~90% neutral surface; the tea-green accent appears only on primary actions, active nav, focus rings, links, and one data series.
- Hairline elevation — 1px borders define structure; tight low-opacity shadows reserved for overlays.
- Dense, deliberate type — 13.5px base, tabular-nums on every metric, near-black (not pure black) text.
- Monoline SVG icon set — no emoji anywhere in the chrome.
- Semantic color only — success/warn/danger/info + neutral; charts use colorblind-safe, single-accent ink.
- Command palette, visible focus rings, skeletons, empty states — the standard "serious app" signals.
The platform runs locally and can use real models for two flows. Both degrade gracefully — the app stays fully functional with neither configured.
Runs the analysis process fully on-device. No key, no cloud.
ollama serve # if not already running
ollama pull qwen3:4b-instruct-2507-q4_K_M # or any chat model you preferThe Analysis page shows Engine: Ollama · · Connected. Creating/running a task sends the trend + competitor + FS data to your local model and returns a grounded markdown report (View report). Token counts come from Ollama. If Ollama is offline the task falls back to the built-in summary engine.
Set the model in the ⚙ Settings modal (top bar) or via OLLAMA_MODEL / OLLAMA_URL.
Generates a product/packaging design image from each concept's description using Google's
Nano Banana Pro (gemini-3-pro-image-preview). This is a cloud model and needs a
Gemini API key — it cannot run inside Ollama.
export GEMINI_API_KEY=your_key # from https://aistudio.google.com/apikey…or paste the key into the ⚙ Settings modal. Each saved/generated concept gets a
Generate drink design button. Without a key you get an on-brand placeholder bottle and
a hint to add the key. To go fully offline for images instead, point imageEngine at a
local Stable-Diffusion endpoint (the engine is pluggable).
Generated images are stored in data/images/ and served from /media/<file>.
node test/browser-check.mjs # 15 checks across 9 routes + interactions; asserts zero console errors
node test/screenshots.mjs # writes /tmp/ss-<route>.png (THEME=dark for dark mode)