From 50f0b83fcd4e951b7109b653d14bc3a04ca604a8 Mon Sep 17 00:00:00 2001
From: UncleCode <unclecode@kidocode.com>
Date: Wed, 30 Apr 2025 19:38:25 +0800
Subject: [PATCH] feat(linkedin): add prospect-wizard app with scraping and
 visualization

Add new LinkedIn prospect discovery tool with three main components:
- c4ai_discover.py for company and people scraping
- c4ai_insights.py for org chart and decision maker analysis
- Interactive graph visualization with company/people exploration

Features include:
- Configurable LinkedIn search and scraping
- Org chart generation with decision maker scoring
- Interactive network graph visualization
- Company similarity analysis
- Chat interface for data exploration

Requires: crawl4ai, openai, sentence-transformers, networkx
---
 docs/apps/linkdin/README.md                   |  126 ++
 docs/apps/linkdin/c4ai_discover.py            |  440 +++++++
 docs/apps/linkdin/c4ai_insights.py            |  372 ++++++
 docs/apps/linkdin/schemas/company_card.json   |   39 +
 docs/apps/linkdin/schemas/people_card.json    |   38 +
 docs/apps/linkdin/snippets/company.html       |  143 ++
 docs/apps/linkdin/snippets/people.html        |   94 ++
 docs/apps/linkdin/templates/ai.js             |   50 +
 .../templates/graph_view_template.html        | 1171 +++++++++++++++++
 9 files changed, 2473 insertions(+)
 create mode 100644 docs/apps/linkdin/README.md
 create mode 100644 docs/apps/linkdin/c4ai_discover.py
 create mode 100644 docs/apps/linkdin/c4ai_insights.py
 create mode 100644 docs/apps/linkdin/schemas/company_card.json
 create mode 100644 docs/apps/linkdin/schemas/people_card.json
 create mode 100644 docs/apps/linkdin/snippets/company.html
 create mode 100644 docs/apps/linkdin/snippets/people.html
 create mode 100644 docs/apps/linkdin/templates/ai.js
 create mode 100644 docs/apps/linkdin/templates/graph_view_template.html

diff --git a/docs/apps/linkdin/README.md b/docs/apps/linkdin/README.md
new file mode 100644
index 00000000..cce244ac
--- /dev/null
+++ b/docs/apps/linkdin/README.md
@@ -0,0 +1,126 @@
+# Crawl4AI Prospect‑Wizard – step‑by‑step guide
+
+A three‑stage demo that goes from **LinkedIn scraping** ➜ **LLM reasoning** ➜ **graph visualisation**.
+
+```
+prospect‑wizard/
+├─ c4ai_discover.py         # Stage 1 – scrape companies + people
+├─ c4ai_insights.py         # Stage 2 – embeddings, org‑charts, scores
+├─ graph_view_template.html # Stage 3 – graph viewer (static HTML)
+└─ data/                    # output lands here (*.jsonl / *.json)
+```
+
+---
+
+## 1  Install & boot a LinkedIn profile (one‑time)
+
+### 1.1  Install dependencies
+```bash
+pip install crawl4ai openai sentence-transformers networkx pandas vis-network rich
+```
+
+### 1.2  Create / warm a LinkedIn browser profile
+```bash
+crwl profiler
+```
+1. The interactive shell shows **New profile** – hit **enter**.
+2. Choose a name, e.g. `profile_linkedin_uc`.
+3. A Chromium window opens – log in to LinkedIn, solve whatever CAPTCHA, then close.
+
+> Remember the **profile name**. All future runs take `--profile-name <your_name>`.
+
+---
+
+## 2  Discovery – scrape companies & people
+
+```bash
+python c4ai_discover.py full \ 
+  --query "health insurance management" \ 
+  --geo 102713980 \               # Malaysia geoUrn
+  --title_filters "" \            # or "Product,Engineering"
+  --max_companies 10 \            # default set small for workshops
+  --max_people 20 \               # \^ same
+  --profile-name profile_linkedin_uc \ 
+  --outdir ./data \ 
+  --concurrency 2 \ 
+  --log_level debug
+```
+**Outputs** in `./data/`:
+* `companies.jsonl` – one JSON per company
+* `people.jsonl` – one JSON per employee
+
+🛠️  **Dry‑run:** `C4AI_DEMO_DEBUG=1 python c4ai_discover.py full --query coffee` uses bundled HTML snippets, no network.
+
+### Handy geoUrn cheatsheet
+| Location | geoUrn |
+|----------|--------|
+| Singapore | **103644278** |
+| Malaysia | **102713980** |
+| United States | **103644922** |
+| United Kingdom | **102221843** |
+| Australia | **101452733** |
+_See more: <https://www.linkedin.com/search/results/companies/?geoUrn=XXX> – the number after `geoUrn=` is what you need._
+
+---
+
+## 3  Insights – embeddings, org‑charts, decision makers
+
+```bash
+python c4ai_insights.py \ 
+  --in  ./data \ 
+  --out ./data \ 
+  --embed_model all-MiniLM-L6-v2 \ 
+  --top_k 10 \ 
+  --openai_model gpt-4.1 \ 
+  --max_llm_tokens 8024 \ 
+  --llm_temperature 1.0 \ 
+  --workers 4
+```
+Emits next to the Stage‑1 files:
+* `company_graph.json` – inter‑company similarity graph
+* `org_chart_<handle>.json` – one per company
+* `decision_makers.csv` – hand‑picked ‘who to pitch’ list
+
+Flags reference (straight from `build_arg_parser()`):
+| Flag | Default | Purpose |
+|------|---------|---------|
+| `--in` | `.` | Stage‑1 output dir |
+| `--out` | `.` | Destination dir |
+| `--embed_model` | `all-MiniLM-L6-v2` | Sentence‑Transformer model |
+| `--top_k` | `10` | Neighbours per company in graph |
+| `--openai_model` | `gpt-4.1` | LLM for scoring decision makers |
+| `--max_llm_tokens` | `8024` | Token budget per LLM call |
+| `--llm_temperature` | `1.0` | Creativity knob |
+| `--stub` | off | Skip OpenAI and fabricate tiny charts |
+| `--workers` | `4` | Parallel LLM workers |
+
+---
+
+## 4  Visualise – interactive graph
+
+After Stage 2 completes, simply open the HTML viewer from the project root:
+```bash
+open graph_view_template.html   # or Live Server / Python -http
+```
+The page fetches `data/company_graph.json` and the `org_chart_*.json` files automatically; keep the `data/` folder beside the HTML file.
+
+* Left pane → list of companies (clans).
+* Click a node to load its org‑chart on the right.
+* Chat drawer lets you ask follow‑up questions; context is pulled from `people.jsonl`.
+
+---
+
+## 5  Common snags
+
+| Symptom | Fix |
+|---------|-----|
+| Infinite CAPTCHA | Use a residential proxy: `--proxy http://user:pass@ip:port` |
+| 429 Too Many Requests | Lower `--concurrency`, rotate profile, add delay |
+| Blank graph | Check JSON paths, clear `localStorage` in browser |
+
+---
+
+### TL;DR
+`crwl profiler` → `c4ai_discover.py` → `c4ai_insights.py` → open `graph_view_template.html`.  
+Live long and `import crawl4ai`.
+
diff --git a/docs/apps/linkdin/c4ai_discover.py b/docs/apps/linkdin/c4ai_discover.py
new file mode 100644
index 00000000..82874568
--- /dev/null
+++ b/docs/apps/linkdin/c4ai_discover.py
@@ -0,0 +1,440 @@
+#!/usr/bin/env python3
+"""
+c4ai-discover — Stage‑1 Discovery CLI
+
+Scrapes LinkedIn company search + their people pages and dumps two newline‑delimited
+JSON files: companies.jsonl and people.jsonl.
+
+Key design rules
+----------------
+* No BeautifulSoup — Crawl4AI only for network + HTML fetch.
+* JsonCssExtractionStrategy for structured scraping; schema auto‑generated once
+  from sample HTML provided by user and then cached under ./schemas/.
+* Defaults are embedded so the file runs inside VS Code debugger without CLI args.
+* If executed as a console script (argv > 1), CLI flags win.
+* Lightweight deps: argparse + Crawl4AI stack.
+
+Author: Tom @ Kidocode 2025‑04‑26
+"""
+from __future__ import annotations
+
+import warnings, re
+warnings.filterwarnings(
+    "ignore",
+    message=r"The pseudo class ':contains' is deprecated, ':-soup-contains' should be used.*",
+    category=FutureWarning,
+    module=r"soupsieve"
+)
+
+
+# ───────────────────────────────────────────────────────────────────────────────
+# Imports
+# ───────────────────────────────────────────────────────────────────────────────
+import argparse
+import random
+import asyncio
+import json
+import logging
+import os
+import pathlib
+import sys
+# 3rd-party rich for pretty logging
+from rich.console import Console
+from rich.logging import RichHandler
+
+from datetime import datetime, UTC
+from itertools import cycle
+from textwrap import dedent
+from types import SimpleNamespace
+from typing import Dict, List, Optional
+from urllib.parse import quote
+from pathlib import Path
+from glob import glob
+
+from crawl4ai import (
+    AsyncWebCrawler,
+    BrowserConfig,
+    CacheMode,
+    CrawlerRunConfig,
+    JsonCssExtractionStrategy,
+    BrowserProfiler,
+    LLMConfig,
+)
+
+# ───────────────────────────────────────────────────────────────────────────────
+# Constants / paths
+# ───────────────────────────────────────────────────────────────────────────────
+BASE_DIR = pathlib.Path(__file__).resolve().parent
+SCHEMA_DIR = BASE_DIR / "schemas"
+SCHEMA_DIR.mkdir(parents=True, exist_ok=True)
+COMPANY_SCHEMA_PATH = SCHEMA_DIR / "company_card.json"
+PEOPLE_SCHEMA_PATH = SCHEMA_DIR / "people_card.json"
+
+# ---------- deterministic target JSON examples ----------
+_COMPANY_SCHEMA_EXAMPLE = {
+    "handle": "/company/posify/",
+    "profile_image": "https://media.licdn.com/dms/image/v2/.../logo.jpg",
+    "name": "Management Research Services, Inc. (MRS, Inc)",
+    "descriptor": "Insurance • Milwaukee, Wisconsin",
+    "about": "Insurance • Milwaukee, Wisconsin",
+    "followers": 1000
+}
+
+_PEOPLE_SCHEMA_EXAMPLE = {
+    "profile_url": "https://www.linkedin.com/in/lily-ng/",
+    "name": "Lily Ng",
+    "headline": "VP Product @ Posify",
+    "followers": 890,
+    "connection_degree": "2nd",
+    "avatar_url": "https://media.licdn.com/dms/image/v2/.../lily.jpg"
+}
+
+# Provided sample HTML snippets (trimmed) — used exactly once to cold‑generate schema.
+_SAMPLE_COMPANY_HTML = (Path(__file__).resolve().parent / "snippets/company.html").read_text()
+_SAMPLE_PEOPLE_HTML = (Path(__file__).resolve().parent / "snippets/people.html").read_text()
+
+# --------- tighter schema prompts ----------
+_COMPANY_SCHEMA_QUERY = dedent(
+    """
+    Using the supplied <li> company-card HTML, build a JsonCssExtractionStrategy schema that,
+    for every card, outputs *exactly* the keys shown in the example JSON below.
+    JSON spec:
+      • handle        – href of the outermost <a> that wraps the logo/title, e.g. "/company/posify/"
+      • profile_image – absolute URL of the <img> inside that link
+      • name          – text of the <a> inside the <span class*='t-16'>
+      • descriptor    – text line with industry • location
+      • about         – text of the <div class*='t-normal'> below the name (industry + geo)
+      • followers     – integer parsed from the <div> containing 'followers'
+      
+    IMPORTANT: Do not use the base64 kind of classes to target element. It's not reliable.
+    The main div parent contains these li element is "div.search-results-container" you can use this.
+    The <ul> parent has "role" equal to "list". Using these two should be enough to target the <li> elements."
+    """
+)
+
+_PEOPLE_SCHEMA_QUERY = dedent(
+    """
+    Using the supplied <li> people-card HTML, build a JsonCssExtractionStrategy schema that
+    outputs exactly the keys in the example JSON below.
+    Fields:
+      • profile_url        – href of the outermost profile link
+      • name               – text inside artdeco-entity-lockup__title
+      • headline           – inner text of artdeco-entity-lockup__subtitle
+      • followers          – integer parsed from the span inside lt-line-clamp--multi-line
+      • connection_degree  – '1st', '2nd', etc. from artdeco-entity-lockup__badge
+      • avatar_url         – src of the <img> within artdeco-entity-lockup__image
+      
+    IMPORTANT: Do not use the base64 kind of classes to target element. It's not reliable.
+    The main div parent contains these li element is a "div" has these classes "artdeco-card org-people-profile-card__card-spacing org-people__card-margin-bottom".
+    """
+)
+
+# ---------------------------------------------------------------------------
+# Utility helpers
+# ---------------------------------------------------------------------------
+
+def _load_or_build_schema(
+    path: pathlib.Path, 
+    sample_html: str, 
+    query: str, 
+    example_json: Dict,
+    force = False
+) -> Dict:
+    """Load schema from path, else call generate_schema once and persist."""
+    if path.exists() and not force:
+        return json.loads(path.read_text())
+
+    logging.info("[SCHEMA] Generating schema %s", path.name)
+    schema = JsonCssExtractionStrategy.generate_schema(
+        html=sample_html,
+        llm_config=LLMConfig(
+            provider=os.getenv("C4AI_SCHEMA_PROVIDER", "openai/gpt-4o"),
+            api_token=os.getenv("OPENAI_API_KEY", "env:OPENAI_API_KEY"),
+        ),
+        query=query,
+        target_json_example=json.dumps(example_json, indent=2),
+    )
+    path.write_text(json.dumps(schema, indent=2))
+    return schema
+
+
+def _openai_friendly_number(text: str) -> Optional[int]:
+    """Extract first int from text like '1K followers' (returns 1000)."""
+    import re
+
+    m = re.search(r"(\d[\d,]*)", text.replace(",", ""))
+    if not m:
+        return None
+    val = int(m.group(1))
+    if "k" in text.lower():
+        val *= 1000
+    if "m" in text.lower():
+        val *= 1_000_000
+    return val
+
+# ---------------------------------------------------------------------------
+# Core async workers
+# ---------------------------------------------------------------------------
+async def crawl_company_search(crawler: AsyncWebCrawler, url: str, schema: Dict, limit: int) -> List[Dict]:
+    """Paginate 10-item company search pages until `limit` reached."""
+    extraction = JsonCssExtractionStrategy(schema)
+    cfg = CrawlerRunConfig(
+        extraction_strategy=extraction,
+        cache_mode=CacheMode.BYPASS,
+        wait_for = ".search-marvel-srp",
+        session_id="company_search",
+        delay_before_return_html=1,
+        magic = True,
+        verbose= False,
+    )
+    companies, page = [], 1
+    while len(companies) < max(limit, 10):
+        paged_url = f"{url}&page={page}"
+        res = await crawler.arun(paged_url, config=cfg)
+        batch = json.loads(res[0].extracted_content)
+        if not batch:
+            break
+        for item in batch:
+            name = item.get("name", "").strip()
+            handle = item.get("handle", "").strip()
+            if not handle or not name:
+                continue
+            descriptor = item.get("descriptor")
+            about = item.get("about")
+            followers = _openai_friendly_number(str(item.get("followers", "")))
+            companies.append(
+                {
+                    "handle": handle,
+                    "name": name,
+                    "descriptor": descriptor,
+                    "about": about,
+                    "followers": followers,
+                    "people_url": f"{handle}people/",
+                    "captured_at": datetime.now(UTC).isoformat(timespec="seconds") + "Z",
+                }
+            )
+        page += 1
+        logging.info(
+            f"[dim]Page {page}[/] — running total: {len(companies)}/{limit} companies"
+        )
+
+    return companies[:max(limit, 10)]
+
+
+async def crawl_people_page(
+    crawler: AsyncWebCrawler,
+    people_url: str,
+    schema: Dict,
+    limit: int,
+    title_kw: str,
+) -> List[Dict]:
+    people_u = f"{people_url}?keywords={quote(title_kw)}"
+    extraction = JsonCssExtractionStrategy(schema)
+    cfg = CrawlerRunConfig(
+        extraction_strategy=extraction,
+        # scan_full_page=True,
+        cache_mode=CacheMode.BYPASS,
+        magic=True,
+        wait_for=".org-people-profile-card__card-spacing",
+        delay_before_return_html=1,
+        session_id="people_search",
+    )
+    res = await crawler.arun(people_u, config=cfg)
+    if not res[0].success:
+        return []
+    raw = json.loads(res[0].extracted_content)
+    people = []
+    for p in raw[:limit]:
+        followers = _openai_friendly_number(str(p.get("followers", "")))
+        people.append(
+            {
+                "profile_url": p.get("profile_url"),
+                "name": p.get("name"),
+                "headline": p.get("headline"),
+                "followers": followers,
+                "connection_degree": p.get("connection_degree"),
+                "avatar_url": p.get("avatar_url"),
+            }
+        )
+    return people
+
+# ---------------------------------------------------------------------------
+# CLI + main
+# ---------------------------------------------------------------------------
+
+def build_arg_parser() -> argparse.ArgumentParser:
+    ap = argparse.ArgumentParser("c4ai-discover — Crawl4AI LinkedIn discovery")
+    sub = ap.add_subparsers(dest="cmd", required=False, help="run scope")
+
+    def add_flags(parser: argparse.ArgumentParser):
+        parser.add_argument("--query", required=False, help="query keyword(s)")
+        parser.add_argument("--geo", required=False, type=int, help="LinkedIn geoUrn")
+        parser.add_argument("--title-filters", default="Product,Engineering", help="comma list of job keywords")
+        parser.add_argument("--max-companies", type=int, default=1000)
+        parser.add_argument("--max-people", type=int, default=500)
+        parser.add_argument("--profile-path", default=str(pathlib.Path.home() / ".crawl4ai/profiles/profile_linkedin_uc"))
+        parser.add_argument("--outdir", default="./output")
+        parser.add_argument("--concurrency", type=int, default=4)
+        parser.add_argument("--log-level", default="info", choices=["debug", "info", "warn", "error"])
+
+    add_flags(sub.add_parser("full"))
+    add_flags(sub.add_parser("companies"))
+    add_flags(sub.add_parser("people"))
+
+    # global flags
+    ap.add_argument(
+        "--debug",
+        action="store_true",
+        help="Use built-in demo defaults (same as C4AI_DEMO_DEBUG=1)",
+    )
+    return ap
+
+
+def detect_debug_defaults(force = False) -> SimpleNamespace:
+    if not force and sys.gettrace() is None and not os.getenv("C4AI_DEMO_DEBUG"):
+        return SimpleNamespace()
+    # ----- debug‑friendly defaults -----
+    return SimpleNamespace(
+        cmd="full",
+        query="health insurance management",
+        geo=102713980,
+        # title_filters="Product,Engineering",
+        title_filters="",
+        max_companies=10,
+        max_people=5,
+        profile_name="profile_linkedin_uc",
+        outdir="./debug_out",
+        concurrency=2,
+        log_level="debug",
+    )
+
+
+async def async_main(opts):
+    # ─────────── logging setup ───────────
+    console = Console()
+    logging.basicConfig(
+        level=opts.log_level.upper(),
+        format="%(message)s",
+        handlers=[RichHandler(console=console, markup=True, rich_tracebacks=True)],
+    )
+
+    # -------------------------------------------------------------------
+    # Load or build schemas (one‑time LLM call each)
+    # -------------------------------------------------------------------
+    company_schema = _load_or_build_schema(
+        COMPANY_SCHEMA_PATH,
+        _SAMPLE_COMPANY_HTML,
+        _COMPANY_SCHEMA_QUERY,
+        _COMPANY_SCHEMA_EXAMPLE,
+        # True
+    )
+    people_schema = _load_or_build_schema(
+        PEOPLE_SCHEMA_PATH,
+        _SAMPLE_PEOPLE_HTML,
+        _PEOPLE_SCHEMA_QUERY,
+        _PEOPLE_SCHEMA_EXAMPLE,
+        # True
+    )
+
+    outdir = BASE_DIR / pathlib.Path(opts.outdir)
+    outdir.mkdir(parents=True, exist_ok=True)
+    f_companies = (BASE_DIR / outdir / "companies.jsonl").open("a", encoding="utf-8")
+    f_people = (BASE_DIR / outdir / "people.jsonl").open("a", encoding="utf-8")
+
+    # -------------------------------------------------------------------
+    # Prepare crawler with cookie pool rotation
+    # -------------------------------------------------------------------
+    profiler = BrowserProfiler()
+    path = profiler.get_profile_path(opts.profile_name)
+    bc = BrowserConfig(
+        headless=False,        
+        verbose=False,
+        user_data_dir=path,
+        use_managed_browser=True,
+        user_agent_mode = "random",
+        user_agent_generator_config= {
+            "platforms": "mobile",
+            "os": "Android"
+        },
+        verbose=False,
+    )
+    crawler = AsyncWebCrawler(config=bc)
+    
+    await crawler.start()
+
+    # Single worker for simplicity; concurrency can be scaled by arun_many if needed.
+    # crawler = await next_crawler().start()
+    try:
+        # Build LinkedIn search URL
+        search_url = f"https://www.linkedin.com/search/results/companies/?keywords={quote(opts.query)}&geoUrn={opts.geo}"
+        logging.info("Seed URL => %s", search_url)
+
+        companies: List[Dict] = []
+        if opts.cmd in ("companies", "full"):
+            companies = await crawl_company_search(
+                crawler, search_url, company_schema, opts.max_companies
+            )
+            for c in companies:
+                f_companies.write(json.dumps(c, ensure_ascii=False) + "\n")
+            logging.info(f"[bold green]✓[/] Companies scraped so far: {len(companies)}")
+
+        if opts.cmd in ("people", "full"):
+            if not companies:
+                # load from previous run
+                src = outdir / "companies.jsonl"
+                if not src.exists():
+                    logging.error("companies.jsonl missing — run companies/full first")
+                    return 10
+                companies = [json.loads(l) for l in src.read_text().splitlines()]
+            total_people = 0
+            title_kw = " ".join([t.strip() for t in opts.title_filters.split(",") if t.strip()]) if opts.title_filters else ""
+            for comp in companies:
+                people = await crawl_people_page(
+                    crawler,
+                    comp["people_url"],
+                    people_schema,
+                    opts.max_people,
+                    title_kw,
+                )
+                for p in people:
+                    rec = p | {
+                        "company_handle": comp["handle"],
+                        # "captured_at": datetime.now(UTC).isoformat(timespec="seconds") + "Z",
+                        "captured_at": datetime.now(UTC).isoformat(timespec="seconds") + "Z",
+                    }
+                    f_people.write(json.dumps(rec, ensure_ascii=False) + "\n")
+                total_people += len(people)
+                logging.info(
+                    f"{comp['name']} — [cyan]{len(people)}[/] people extracted"
+                )
+                await asyncio.sleep(random.uniform(0.5, 1))
+            logging.info("Total people scraped: %d", total_people)
+    finally:
+        await crawler.close()
+        f_companies.close()
+        f_people.close()
+
+    return 0
+
+
+def main():
+    parser = build_arg_parser()
+    cli_opts = parser.parse_args()
+
+    # decide on debug defaults
+    if cli_opts.debug:
+        opts = detect_debug_defaults(force=True)
+    else:
+        env_defaults = detect_debug_defaults()
+        env_defaults = detect_debug_defaults()
+        opts = env_defaults if env_defaults else cli_opts
+
+    if not getattr(opts, "cmd", None):
+        opts.cmd = "full"
+
+    exit_code = asyncio.run(async_main(opts))
+    sys.exit(exit_code)
+
+
+if __name__ == "__main__":
+    main()
diff --git a/docs/apps/linkdin/c4ai_insights.py b/docs/apps/linkdin/c4ai_insights.py
new file mode 100644
index 00000000..8307c30d
--- /dev/null
+++ b/docs/apps/linkdin/c4ai_insights.py
@@ -0,0 +1,372 @@
+#!/usr/bin/env python3
+"""
+Stage-2 Insights builder
+------------------------
+Reads companies.jsonl & people.jsonl (Stage-1 output) and produces:
+ • company_graph.json
+ • org_chart_<handle>.json  (one per company)
+ • decision_makers.csv
+ • graph_view.html          (interactive visualisation)
+
+Run:
+    python c4ai_insights.py --in ./stage1_out --out ./stage2_out
+
+Author : Tom @ Kidocode, 2025-04-28
+"""
+
+from __future__ import annotations
+
+# ───────────────────────────────────────────────────────────────────────────────
+# Imports & Third-party
+# ───────────────────────────────────────────────────────────────────────────────
+
+import argparse, asyncio, json, os, sys, pathlib, random, time, csv
+from datetime import datetime, UTC
+from types import SimpleNamespace
+from pathlib import Path
+from typing import List, Dict, Any
+# Pretty CLI UX
+from rich.console import Console
+from rich.logging import RichHandler
+from rich.progress import Progress, SpinnerColumn, BarColumn, TextColumn, TimeElapsedColumn
+import logging
+from jinja2 import Environment, FileSystemLoader, select_autoescape
+
+BASE_DIR = pathlib.Path(__file__).resolve().parent
+
+# ───────────────────────────────────────────────────────────────────────────────
+# 3rd-party deps
+# ───────────────────────────────────────────────────────────────────────────────
+import numpy as np
+# from sentence_transformers import SentenceTransformer
+# from sklearn.metrics.pairwise import cosine_similarity
+import pandas as pd
+import hashlib
+
+from openai import OpenAI                    # same SDK you pre-loaded
+
+# ───────────────────────────────────────────────────────────────────────────────
+# Utils
+# ───────────────────────────────────────────────────────────────────────────────
+def load_jsonl(path: Path) -> List[Dict[str, Any]]:
+    with open(path, "r", encoding="utf-8") as f:
+        return [json.loads(l) for l in f]
+
+def dump_json(obj, path: Path):
+    with open(path, "w", encoding="utf-8") as f:
+        json.dump(obj, f, ensure_ascii=False, indent=2)
+
+# ───────────────────────────────────────────────────────────────────────────────
+# Constants
+# ───────────────────────────────────────────────────────────────────────────────
+BASE_DIR = pathlib.Path(__file__).resolve().parent
+
+# ───────────────────────────────────────────────────────────────────────────────
+# Debug defaults   (mirrors Stage-1 trick)
+# ───────────────────────────────────────────────────────────────────────────────
+def dev_defaults() -> SimpleNamespace:
+    return SimpleNamespace(
+        in_dir="./debug_out",          
+        out_dir="./insights_debug",
+        embed_model="all-MiniLM-L6-v2",
+        top_k=10,
+        openai_model="gpt-4.1",
+        max_llm_tokens=8000,
+        llm_temperature=1.0,
+        workers=4,           # parallel processing
+        stub=False,          # manual
+    )
+
+# ───────────────────────────────────────────────────────────────────────────────
+# Graph builders
+# ───────────────────────────────────────────────────────────────────────────────
+def embed_descriptions(companies, model_name:str, opts) -> np.ndarray:
+    from sentence_transformers import SentenceTransformer
+    
+    logging.debug(f"Using embedding model: {model_name}")
+    cache_path = BASE_DIR / Path(opts.out_dir) / "embeds_cache.json"
+    cache = {}
+    if cache_path.exists():
+        with open(cache_path) as f:
+            cache = json.load(f)
+        # flush cache if model differs
+        if cache.get("_model") != model_name:
+            cache = {}
+
+    model = SentenceTransformer(model_name)
+    new_texts, new_indices = [], []
+    vectors = np.zeros((len(companies), 384), dtype=np.float32)
+
+    for idx, comp in enumerate(companies):
+        text = comp.get("about") or comp.get("descriptor","")
+        h = hashlib.sha1(text.encode("utf-8")).hexdigest()
+        cached = cache.get(comp["handle"])
+        if cached and cached["hash"] == h:
+            vectors[idx] = np.array(cached["vector"], dtype=np.float32)
+        else:
+            new_texts.append(text)
+            new_indices.append((idx, comp["handle"], h))
+
+    if new_texts:
+        embeds = model.encode(new_texts, show_progress_bar=False, convert_to_numpy=True)
+        for vec, (idx, handle, h) in zip(embeds, new_indices):
+            vectors[idx] = vec
+            cache[handle] = {"hash": h, "vector": vec.tolist()}
+        cache["_model"] = model_name
+        with open(cache_path, "w") as f:
+            json.dump(cache, f)
+
+    return vectors
+
+def build_company_graph(companies, embeds:np.ndarray, top_k:int) -> Dict[str,Any]:
+    from sklearn.metrics.pairwise import cosine_similarity
+    sims = cosine_similarity(embeds)
+    nodes, edges = [], []
+    idx_of = {c["handle"]: i for i,c in enumerate(companies)}
+    for i,c in enumerate(companies):
+        node = dict(
+            id=c["handle"].strip("/"),
+            name=c["name"],
+            handle=c["handle"],
+            about=c.get("about",""),
+            people_url=c.get("people_url",""),
+            industry=c.get("descriptor","").split("•")[0].strip(),
+            geoUrn=c.get("geoUrn"),
+            followers=c.get("followers",0),
+            # desc_embed=embeds[i].tolist(),
+            desc_embed=[],
+        )
+        nodes.append(node)
+        # pick top-k most similar except itself
+        top_idx = np.argsort(sims[i])[::-1][1:top_k+1]
+        for j in top_idx:
+            tgt = companies[j]
+            weight = float(sims[i,j])
+            if node["industry"] == tgt.get("descriptor","").split("•")[0].strip():
+                weight += 0.10
+            if node["geoUrn"] == tgt.get("geoUrn"):
+                weight += 0.05
+            tgt['followers'] = tgt.get("followers", None) or 1
+            node["followers"] = node.get("followers", None) or 1
+            follower_ratio = min(node["followers"], tgt.get("followers",1)) / max(node["followers"] or 1, tgt.get("followers",1))
+            weight += 0.05 * follower_ratio
+            edges.append(dict(
+                source=node["id"],
+                target=tgt["handle"].strip("/"),
+                weight=round(weight,4),
+                drivers=dict(
+                    embed_sim=round(float(sims[i,j]),4),
+                    industry_match=0.10 if node["industry"] == tgt.get("descriptor","").split("•")[0].strip() else 0,
+                    geo_overlap=0.05 if node["geoUrn"] == tgt.get("geoUrn") else 0,
+                )
+            ))
+    # return {"nodes":nodes,"edges":edges,"meta":{"generated_at":datetime.now(UTC).isoformat()}}
+    return {"nodes":nodes,"edges":edges,"meta":{"generated_at":datetime.now(UTC).isoformat()}}
+
+# ───────────────────────────────────────────────────────────────────────────────
+# Org-chart via LLM
+# ───────────────────────────────────────────────────────────────────────────────
+async def infer_org_chart_llm(company, people, client:OpenAI, model_name:str, max_tokens:int, temperature:float, stub:bool):
+    if stub:
+        # Tiny fake org-chart when debugging offline
+        chief = random.choice(people)
+        nodes = [{
+            "id": chief["profile_url"],
+            "name": chief["name"],
+            "title": chief["headline"],
+            "dept": chief["headline"].split()[:1][0],
+            "yoe_total": 8,
+            "yoe_current": 2,
+            "seniority_score": 0.8,
+            "decision_score": 0.9,
+            "avatar_url": chief.get("avatar_url")
+        }]
+        return {"nodes":nodes,"edges":[],"meta":{"debug_stub":True,"generated_at":datetime.now(UTC).isoformat()}}
+    
+    prompt = [
+        {"role":"system","content":"You are an expert B2B org-chart reasoner."},
+        {"role":"user","content":f"""Here is the company description:
+         
+<company>
+{json.dumps(company, ensure_ascii=False)}
+</company>
+                
+Here is a JSON list of employees:
+<employees>
+{json.dumps(people, ensure_ascii=False)}
+</employees>
+
+1) Build a reporting tree (manager -> direct reports)
+2) For each person output a decision_score 0-1 for buying new software
+
+Return JSON: {{ "nodes":[{{id,name,title,dept,yoe_total,yoe_current,seniority_score,decision_score,avatar_url,profile_url}}], "edges":[{{source,target,type,confidence}}] }}
+"""}
+    ]
+    resp = client.chat.completions.create(
+        model=model_name,
+        messages=prompt,
+        max_tokens=max_tokens,
+        temperature=temperature,
+        response_format={"type":"json_object"}
+    )
+    chart = json.loads(resp.choices[0].message.content)
+    chart["meta"] = dict(model=model_name, generated_at=datetime.now(UTC).isoformat())
+    return chart
+
+# ───────────────────────────────────────────────────────────────────────────────
+# CSV flatten
+# ───────────────────────────────────────────────────────────────────────────────
+def export_decision_makers(charts_dir:Path, csv_path:Path, threshold:float=0.5):
+    rows=[]
+    for p in charts_dir.glob("org_chart_*.json"):
+        data=json.loads(p.read_text())
+        comp = p.stem.split("org_chart_")[1]
+        for n in data.get("nodes",[]):
+            if n.get("decision_score",0)>=threshold:
+                rows.append(dict(
+                    company=comp,
+                    person=n["name"],
+                    title=n["title"],
+                    decision_score=n["decision_score"],
+                    profile_url=n["id"]
+                ))
+    pd.DataFrame(rows).to_csv(csv_path,index=False)
+
+# ───────────────────────────────────────────────────────────────────────────────
+# HTML rendering
+# ───────────────────────────────────────────────────────────────────────────────
+def render_html(out:Path, template_dir:Path):
+    # From template folder cp graph_view.html and ai.js in out folder
+    import shutil
+    shutil.copy(template_dir/"graph_view_template.html", out / "graph_view.html")
+    shutil.copy(template_dir/"ai.js", out)
+
+
+# ───────────────────────────────────────────────────────────────────────────────
+# Main async pipeline
+# ───────────────────────────────────────────────────────────────────────────────
+async def run(opts):
+    # ── silence SDK noise ──────────────────────────────────────────────────────
+    for noisy in ("openai", "httpx", "httpcore"):
+        lg = logging.getLogger(noisy)
+        lg.setLevel(logging.WARNING)     # or ERROR if you want total silence
+        lg.propagate = False             # optional: stop them reaching root
+
+    # ────────────── logging bootstrap ──────────────
+    console = Console()
+    logging.basicConfig(
+        level="INFO",
+        format="%(message)s",
+        handlers=[RichHandler(console=console, markup=True, rich_tracebacks=True)],
+    )
+
+    in_dir  = BASE_DIR / Path(opts.in_dir)
+    out_dir = BASE_DIR / Path(opts.out_dir)
+    out_dir.mkdir(parents=True, exist_ok=True)
+
+    companies = load_jsonl(in_dir/"companies.jsonl")
+    people    = load_jsonl(in_dir/"people.jsonl")
+
+    logging.info(f"[bold cyan]Loaded[/] {len(companies)} companies, {len(people)} people")
+
+    logging.info("[bold]⇢[/] Embedding company descriptions…")
+    # embeds = embed_descriptions(companies, opts.embed_model, opts)
+    
+    logging.info("[bold]⇢[/] Building similarity graph")
+    # company_graph = build_company_graph(companies, embeds, opts.top_k)
+    # dump_json(company_graph, out_dir/"company_graph.json")
+
+    # OpenAI client (only built if not debugging)
+    stub = bool(opts.stub)
+    client = OpenAI() if not stub else None
+
+    # Filter companies that need processing
+    to_process = []
+    for comp in companies:
+        handle = comp["handle"].strip("/").replace("/","_")
+        out_file = out_dir/f"org_chart_{handle}.json"
+        if out_file.exists() and False:
+            logging.info(f"[green]✓[/] Skipping existing {comp['name']}")
+            continue
+        to_process.append(comp)
+    
+    
+    if not to_process:
+        logging.info("[yellow]All companies already processed[/]")
+    else:
+        workers = getattr(opts, 'workers', 1)
+        parallel = workers > 1
+        
+        logging.info(f"[bold]⇢[/] Inferring org-charts via LLM {f'(parallel={workers} workers)' if parallel else ''}")
+        
+        with Progress(
+            SpinnerColumn(),
+            BarColumn(),
+            TextColumn("[progress.description]{task.description}"),
+            TimeElapsedColumn(),
+            console=console,
+        ) as progress:
+            task = progress.add_task("Org charts", total=len(to_process))
+            
+            async def process_one(comp):
+                handle = comp["handle"].strip("/").replace("/","_")
+                persons = [p for p in people if p["company_handle"].strip("/") == comp["handle"].strip("/")]
+                
+                chart = await infer_org_chart_llm(
+                    comp, persons,
+                    client=client if client else OpenAI(api_key="sk-debug"),
+                    model_name=opts.openai_model,
+                    max_tokens=opts.max_llm_tokens,
+                    temperature=opts.llm_temperature,
+                    stub=stub,
+                )
+                chart["meta"]["company"] = comp["name"]
+                
+                # Save the result immediately
+                dump_json(chart, out_dir/f"org_chart_{handle}.json")
+                
+                progress.update(task, advance=1, description=f"{comp['name']} ({len(persons)} ppl)")
+            
+            # Create tasks for all companies
+            tasks = [process_one(comp) for comp in to_process]
+            
+            # Process in batches based on worker count
+            semaphore = asyncio.Semaphore(workers)
+            
+            async def bounded_process(coro):
+                async with semaphore:
+                    return await coro
+            
+            # Run with concurrency control
+            await asyncio.gather(*(bounded_process(task) for task in tasks))
+
+    logging.info("[bold]⇢[/] Flattening decision-makers CSV")
+    export_decision_makers(out_dir, out_dir/"decision_makers.csv")
+        
+    render_html(out_dir, template_dir=BASE_DIR/"templates")
+    logging.success = lambda msg, **k: console.print(f"[bold green]✓[/] {msg}", **k)
+    logging.success(f"Stage-2 artefacts written to {out_dir}")
+
+# ───────────────────────────────────────────────────────────────────────────────
+# CLI
+# ───────────────────────────────────────────────────────────────────────────────
+def build_arg_parser():
+    p = argparse.ArgumentParser(description="Build graphs & visualisation from Stage-1 output")
+    p.add_argument("--in",       dest="in_dir",  required=False, help="Stage-1 output dir", default=".")
+    p.add_argument("--out",      dest="out_dir", required=False, help="Destination dir",   default=".")
+    p.add_argument("--embed_model", default="all-MiniLM-L6-v2")
+    p.add_argument("--top_k", type=int, default=10, help="Top-k neighbours per company")
+    p.add_argument("--openai_model", default="gpt-4.1")
+    p.add_argument("--max_llm_tokens", type=int, default=8024)
+    p.add_argument("--llm_temperature", type=float, default=1.0)
+    p.add_argument("--stub", action="store_true", help="Skip OpenAI call and generate tiny fake org charts")
+    p.add_argument("--workers", type=int, default=4, help="Number of parallel workers for LLM inference")
+    return p
+
+def main():
+    dbg = dev_defaults()
+    opts = dbg if True else build_arg_parser().parse_args()
+    asyncio.run(run(opts))
+
+if __name__ == "__main__":
+    main()
diff --git a/docs/apps/linkdin/schemas/company_card.json b/docs/apps/linkdin/schemas/company_card.json
new file mode 100644
index 00000000..80ee8e2f
--- /dev/null
+++ b/docs/apps/linkdin/schemas/company_card.json
@@ -0,0 +1,39 @@
+{
+  "name": "LinkedIn Company Card",
+  "baseSelector": "div.search-results-container ul[role='list'] > li",
+  "fields": [
+    {
+      "name": "handle",
+      "selector": "a[href*='/company/']",
+      "type": "attribute",
+      "attribute": "href"
+    },
+    {
+      "name": "profile_image",
+      "selector": "a[href*='/company/'] img",
+      "type": "attribute",
+      "attribute": "src"
+    },
+    {
+      "name": "name",
+      "selector": "span[class*='t-16'] a",
+      "type": "text"
+    },
+    {
+      "name": "descriptor",
+      "selector": "div[class*='t-black t-normal']",
+      "type": "text"
+    },
+    {
+      "name": "about",
+      "selector": "p[class*='entity-result__summary--2-lines']",
+      "type": "text"
+    },
+    {
+      "name": "followers",
+      "selector": "div:contains('followers')",
+      "type": "regex",
+      "pattern": "(\\d+)\\s*followers"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/apps/linkdin/schemas/people_card.json b/docs/apps/linkdin/schemas/people_card.json
new file mode 100644
index 00000000..5514b981
--- /dev/null
+++ b/docs/apps/linkdin/schemas/people_card.json
@@ -0,0 +1,38 @@
+{
+  "name": "LinkedIn People Card",
+  "baseSelector": "li.org-people-profile-card__profile-card-spacing",
+  "fields": [
+    {
+      "name": "profile_url",
+      "selector": "a.eETATgYTipaVsmrBChiBJJvFsdPhNpulhPZUVLHLo",
+      "type": "attribute",
+      "attribute": "href"
+    },
+    {
+      "name": "name",
+      "selector": ".artdeco-entity-lockup__title .lt-line-clamp--single-line",
+      "type": "text"
+    },
+    {
+      "name": "headline",
+      "selector": ".artdeco-entity-lockup__subtitle .lt-line-clamp--multi-line",
+      "type": "text"
+    },
+    {
+      "name": "followers",
+      "selector": ".lt-line-clamp--multi-line.t-12",
+      "type": "text"
+    },
+    {
+      "name": "connection_degree",
+      "selector": ".artdeco-entity-lockup__badge .artdeco-entity-lockup__degree",
+      "type": "text"
+    },
+    {
+      "name": "avatar_url",
+      "selector": ".artdeco-entity-lockup__image img",
+      "type": "attribute",
+      "attribute": "src"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/apps/linkdin/snippets/company.html b/docs/apps/linkdin/snippets/company.html
new file mode 100644
index 00000000..8df4ea5f
--- /dev/null
+++ b/docs/apps/linkdin/snippets/company.html
@@ -0,0 +1,143 @@
+<li class="yCLWzruNprmIzaZzFFonVFBtMrbaVYnuDFA">
+    <!----><!---->
+
+
+
+    <div class="IxlEPbRZwQYrRltKPvHAyjBmCdIWTAoYo" data-chameleon-result-urn="urn:li:company:362492"
+        data-view-name="search-entity-result-universal-template">
+
+
+
+
+        <div class="linked-area flex-1
+              cursor-pointer">
+
+            <div class="BAEgVqVuxosMJZodcelsgPoyRcrkiqgVCGHXNQ">
+                <div class="afcvrbGzNuyRlhPPQWrWirJtUdHAAtUlqxwvVA">
+                    <div class="display-flex align-items-center">
+                        <!---->
+
+                        <a class="eETATgYTipaVsmrBChiBJJvFsdPhNpulhPZUVLHLo  scale-down " aria-hidden="true"
+                            tabindex="-1" href="https://www.linkedin.com/company/managment-research-services-inc./"
+                            data-test-app-aware-link="">
+
+                            <div class="ivm-image-view-model   ">
+
+                                <div class="ivm-view-attr__img-wrapper
+            
+            ">
+                                    <!---->
+                                    <!----> <img width="48"
+                                        src="https://media.licdn.com/dms/image/v2/C560BAQFWpusEOgW-ww/company-logo_100_100/company-logo_100_100/0/1630583697877/managment_research_services_inc_logo?e=1750896000&amp;v=beta&amp;t=Ch9vyEZdfng-1D1m_XqP5kjNpVXUBKkk9cNhMZUhx0E"
+                                        loading="lazy" height="48" alt="Management Research Services, Inc. (MRS, Inc)"
+                                        id="ember28"
+                                        class="ivm-view-attr__img--centered EntityPhoto-square-3   evi-image lazy-image ember-view">
+                                </div>
+
+                            </div>
+
+                        </a>
+
+
+                    </div>
+                </div>
+                <div
+                    class="wympnVuDByXHvafWrMGJLZuchDmCRqLmWPwg MmzCPRicJimZvjJhvqTzDcDbdHhWPzspERzA pt3 pb3 t-12 t-black--light">
+                    <div class="mb1">
+
+                        <div class="t-roman t-sans">
+
+
+
+                            <div class="display-flex">
+                                <span class="TikBXjihYvcNUoIzkslUaEjfIuLmYxfs OoHEyXgsiIqGADjcOtTmfdpoYVXrLKTvkwI ">
+                                    <span class="CgaWLOzmXNuKbRIRARSErqCJcBPYudEKo
+                t-16">
+                                        <a class="eETATgYTipaVsmrBChiBJJvFsdPhNpulhPZUVLHLo "
+                                            href="https://www.linkedin.com/company/managment-research-services-inc./"
+                                            data-test-app-aware-link="">
+                                            <!---->Management Research Services, Inc. (MRS, Inc)<!---->
+                                            <!----> </a>
+                                        <!----> </span>
+                                </span>
+                                <!---->
+                            </div>
+
+
+
+                        </div>
+
+
+
+                        <div class="LjmdKCEqKITHihFOiQsBAQylkdnsWhqZii
+              t-14 t-black t-normal">
+                            <!---->Insurance • Milwaukee, Wisconsin<!---->
+                        </div>
+
+                        <div class="cTPhJiHyNLmxdQYFlsEOutjznmqrVHUByZwZ
+              t-14 t-normal">
+                            <!---->1K followers<!---->
+                        </div>
+
+
+
+
+
+                    </div>
+
+                    <!---->
+                    <p class="yWzlqwKNlvCWVNoKqmzoDDEnBMUuyynaLg
+                    entity-result__summary--2-lines
+                    t-12 t-black--light
+                    ">
+                        <!---->MRS combines 30 years of experience supporting the Life,<span class="white-space-pre">
+                        </span><strong><!---->Health<!----></strong><span class="white-space-pre"> </span>and
+                        Annuities<span class="white-space-pre"> </span><strong><!---->Insurance<!----></strong><span
+                            class="white-space-pre"> </span>Industry with customized<span class="white-space-pre">
+                        </span><strong><!---->insurance<!----></strong><span class="white-space-pre">
+                        </span>underwriting solutions that efficiently support clients’ workflows. Supported by the
+                        Agenium Platform (www.agenium.ai) our innovative underwriting solutions are guaranteed to
+                        optimize requirements...<!---->
+                    </p>
+
+                    <!---->
+                </div>
+                <div class="qXxdnXtzRVFTnTnetmNpssucBwQBsWlUuk MmzCPRicJimZvjJhvqTzDcDbdHhWPzspERzA">
+                    <!---->
+
+
+                    <div>
+
+
+
+
+                        <button aria-label="Follow Management Research Services, Inc. (MRS, Inc)" id="ember61"
+                            class="artdeco-button artdeco-button--2 artdeco-button--secondary ember-view"
+                            type="button"><!---->
+                            <span class="artdeco-button__text">
+                                Follow
+                            </span></button>
+
+
+
+                        <!---->
+                        <!---->
+
+
+                    </div>
+
+
+
+                </div>
+            </div>
+
+        </div>
+
+
+
+
+    </div>
+
+
+
+</li>
\ No newline at end of file
diff --git a/docs/apps/linkdin/snippets/people.html b/docs/apps/linkdin/snippets/people.html
new file mode 100644
index 00000000..9faa9cda
--- /dev/null
+++ b/docs/apps/linkdin/snippets/people.html
@@ -0,0 +1,94 @@
+<li class="grid grid__col--lg-8 block org-people-profile-card__profile-card-spacing">
+    <div>
+
+
+        <section class="artdeco-card full-width qQdPErXQkSAbwApNgNfuxukTIPPykttCcZGOHk">
+            <!---->
+
+            <img width="210" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                ariarole="presentation" loading="lazy" height="210" alt="" id="ember96"
+                class="evi-image lazy-image ghost-default ember-view org-people-profile-card__cover-photo org-people-profile-card__cover-photo--people">
+
+            <div class="org-people-profile-card__profile-info">
+                <div id="ember97"
+                    class="artdeco-entity-lockup artdeco-entity-lockup--stacked-center artdeco-entity-lockup--size-7 ember-view">
+                    <div id="ember98"
+                        class="artdeco-entity-lockup__image artdeco-entity-lockup__image--type-circle ember-view"
+                        type="circle">
+
+                        <a class="eETATgYTipaVsmrBChiBJJvFsdPhNpulhPZUVLHLo "
+                            id="org-people-profile-card__profile-image-0"
+                            href="https://www.linkedin.com/in/speakerrayna?miniProfileUrn=urn%3Ali%3Afs_miniProfile%3AACoAABsqUBoBr5x071PuGGpNtK3NlvSARiVXPIs"
+                            data-test-app-aware-link="">
+                            <img width="104"
+                                src="https://media.licdn.com/dms/image/v2/D5603AQGs2Vyju4xZ7A/profile-displayphoto-shrink_100_100/profile-displayphoto-shrink_100_100/0/1681741067031?e=1750896000&amp;v=beta&amp;t=Hvj--IrrmpVIH7pec7-l_PQok8vsS__CGeUqBWOw7co"
+                                loading="lazy" height="104" alt="Dr. Rayna S." id="ember99"
+                                class="evi-image lazy-image ember-view">
+                        </a>
+
+
+                    </div>
+                    <div id="ember100" class="artdeco-entity-lockup__content ember-view">
+                        <div id="ember101" class="artdeco-entity-lockup__title ember-view">
+                            <a class="eETATgYTipaVsmrBChiBJJvFsdPhNpulhPZUVLHLo  link-without-visited-state"
+                                aria-label="View Dr. Rayna S.’s profile"
+                                href="https://www.linkedin.com/in/speakerrayna?miniProfileUrn=urn%3Ali%3Afs_miniProfile%3AACoAABsqUBoBr5x071PuGGpNtK3NlvSARiVXPIs"
+                                data-test-app-aware-link="">
+                                <div id="ember103" class="ember-view lt-line-clamp lt-line-clamp--single-line AGabuksChUpCmjWshSnaZryLKSthOKkwclxY
+          t-black" style="">
+                                    Dr. Rayna S.
+
+                                    <!---->
+                                </div>
+
+                            </a>
+
+                        </div>
+                        <div id="ember104" class="artdeco-entity-lockup__badge ember-view"> <span class="a11y-text">3rd+
+                                degree connection</span>
+                            <span class="artdeco-entity-lockup__degree" aria-hidden="true">
+                                ·&nbsp;3rd
+                            </span>
+                            <!----><!---->
+                        </div>
+                        <div id="ember105" class="artdeco-entity-lockup__subtitle ember-view">
+                            <div class="t-14 t-black--light t-normal">
+                                <div id="ember107" class="ember-view lt-line-clamp lt-line-clamp--multi-line"
+                                    style="-webkit-line-clamp: 2">
+                                    Leadership and Talent Development Consultant and Professional Speaker
+
+                                    <!---->
+                                </div>
+
+                            </div>
+                        </div>
+                        <div id="ember108" class="artdeco-entity-lockup__caption ember-view"></div>
+                    </div>
+
+                </div>
+                <span class="text-align-center">
+                    <span id="ember110"
+                        class="ember-view lt-line-clamp lt-line-clamp--multi-line t-12 t-black--light mt2"
+                        style="-webkit-line-clamp: 3">
+                        727 followers
+
+                        <!----> </span>
+
+                </span>
+            </div>
+
+            <footer class="ph3 pb3">
+                <button aria-label="Follow Dr. Rayna S." id="ember111"
+                    class="artdeco-button artdeco-button--2 artdeco-button--secondary ember-view full-width"
+                    type="button"><!---->
+                    <span class="artdeco-button__text">
+                        Follow
+                    </span></button>
+            </footer>
+
+        </section>
+
+
+    </div>
+
+</li>
\ No newline at end of file
diff --git a/docs/apps/linkdin/templates/ai.js b/docs/apps/linkdin/templates/ai.js
new file mode 100644
index 00000000..f67e1108
--- /dev/null
+++ b/docs/apps/linkdin/templates/ai.js
@@ -0,0 +1,50 @@
+// ==== File: ai.js ====
+
+class ApiHandler {
+    constructor(apiKey = null) {
+      this.apiKey = apiKey || localStorage.getItem("openai_api_key") || "";
+      console.log("ApiHandler ready");
+    }
+  
+    setApiKey(k) {
+      this.apiKey = k.trim();
+      if (this.apiKey) localStorage.setItem("openai_api_key", this.apiKey);
+    }
+  
+    async *chatStream(messages, {model = "gpt-4o", temperature = 0.7} = {}) {
+      if (!this.apiKey) throw new Error("OpenAI API key missing");
+      const payload = {model, messages, stream: true, max_tokens: 1024};
+      const controller = new AbortController();
+  
+      const res = await fetch("https://api.openai.com/v1/chat/completions", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${this.apiKey}`,
+        },
+        body: JSON.stringify(payload),
+        signal: controller.signal,
+      });
+      if (!res.ok) throw new Error(`OpenAI: ${res.statusText}`);
+      const reader = res.body.getReader();
+      const dec = new TextDecoder();
+  
+      let buf = "";
+      while (true) {
+        const {done, value} = await reader.read();
+        if (done) break;
+        buf += dec.decode(value, {stream: true});
+        for (const line of buf.split("\n")) {
+          if (!line.startsWith("data: ")) continue;
+          if (line.includes("[DONE]")) return;
+          const json = JSON.parse(line.slice(6));
+          const delta = json.choices?.[0]?.delta?.content;
+          if (delta) yield delta;
+        }
+        buf = buf.endsWith("\n") ? "" : buf; // keep partial line
+      }
+    }
+  }
+  
+  window.API = new ApiHandler();
+  
\ No newline at end of file
diff --git a/docs/apps/linkdin/templates/graph_view_template.html b/docs/apps/linkdin/templates/graph_view_template.html
new file mode 100644
index 00000000..68b8ce59
--- /dev/null
+++ b/docs/apps/linkdin/templates/graph_view_template.html
@@ -0,0 +1,1171 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+
+<head>
+    <meta charset="utf-8" />
+    <title>C4AI Insights</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/vis-network@9.1.2/dist/vis-network.min.js"></script>
+    <!-- our tiny OpenAI wrapper -->
+    <script src="ai.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.6.5/split.min.js"></script>
+    <link href="https://unpkg.com/vis-network@9.1.2/dist/vis-network.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
+    <style>
+        .vis-network canvas {
+            background-color: #1f1f1f !important;
+            background-image: 
+              linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+              linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+            background-size: 30px 30px;
+        }
+
+        #chatDrawer {
+            max-height: 45vh;
+            height: 45vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        #chatBody {
+            flex: 1;
+            overflow-y: auto;
+            min-height: 0;
+            max-height: calc(45vh - 90px);
+        }
+
+        #chatInputContainer {
+            min-height: 60px;
+        }
+
+        /* Split.js vertical gutter */
+        .gutter.gutter-vertical {
+            cursor: row-resize;
+            height: 6px;
+            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAYAAABSIVz6AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AkKCQQBdo6l1QAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAArSURBVCjPY2AYBfQMgVAFzGCGIpgBxTklpCgGQ0O54P//Y8zAs14lighENAAAVTsOYMqVl/QAAAAASUVORK5CYII=');
+        }
+
+        /* Split.js styles */
+        .gutter {
+            background-color: #2d2d2d;
+            background-repeat: no-repeat;
+            background-position: 50%;
+        }
+
+        .gutter.gutter-horizontal {
+            cursor: col-resize;
+            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
+        }
+
+        /* Sidebar styles */
+        .sidebar-collapse-btn {
+            position: absolute;
+            top: 10px;
+            background-color: #2d2d2d;
+            color: #999;
+            border: none;
+            border-radius: 4px;
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            z-index: 10;
+        }
+
+        .sidebar-collapse-btn:hover {
+            background-color: #444;
+            color: #eee;
+        }
+
+        #leftSidebarToggle {
+            right: -12px;
+        }
+
+        #leftSidebarToggle.collapsed {
+            right: -20px;
+        }
+
+        #rightSidebarToggle {
+            left: -12px;
+        }
+
+        .collapsed {
+            width: 0 !important;
+            padding: 0 !important;
+            overflow: visible !important;
+        }
+
+        .full-width {
+            width: 100% !important;
+        }
+
+        .splitter-container {
+            height: 100%;
+            display: flex;
+        }
+    </style>
+
+    <!-- Toast notification style -->
+    <style>
+        #toast {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: #2d2d2d;
+            color: #eee;
+            padding: 10px 20px;
+            border-radius: 4px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            z-index: 1000;
+            pointer-events: none;
+        }
+
+        #toast.show {
+            opacity: 1;
+        }
+    </style>
+</head>
+
+<body class="h-screen flex flex-col bg-neutral-900 text-neutral-100  overflow-hidden">
+    <!-- Toast notification -->
+    <div id="toast"></div>
+    
+    <!-- API Settings Modal -->
+    <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
+        <div class="bg-neutral-800 rounded-lg shadow-lg p-6 max-w-md w-full mx-4">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-semibold">API Settings</h3>
+                <button id="closeSettingsModal" class="text-neutral-400 hover:text-neutral-200">
+                    <i class="fa fa-times"></i>
+                </button>
+            </div>
+            <div class="mb-4">
+                <label for="apiKeyInput" class="block text-sm font-medium text-neutral-300 mb-2">OpenAI API Key</label>
+                <input type="password" id="apiKeyInput" class="w-full p-2 rounded bg-neutral-700 text-neutral-100 border border-neutral-600 focus:border-blue-500 focus:outline-none" placeholder="sk-...">
+                <p class="text-xs text-neutral-400 mt-1">Your API key is stored locally in your browser and never sent to our servers.</p>
+            </div>
+            <div class="flex justify-end">
+                <button id="saveApiKey" class="bg-emerald-600 hover:bg-emerald-500 text-white px-4 py-2 rounded transition-colors">
+                    Save Settings
+                </button>
+            </div>
+        </div>
+    </div>
+    <div class="flex flex-1 splitter-container" id="mainSplitter">
+        <div id="leftSidebar" class="p-2 border-r border-neutral-700 relative w-72 overflow-y-auto">
+            <button id="leftSidebarToggle" class="sidebar-collapse-btn">
+                <i class="fa fa-chevron-left"></i>
+            </button>
+            <input id="search" class="w-full mb-3 p-2 border rounded bg-neutral-800 text-neutral-100 border-neutral-600"
+                placeholder="Search company">
+            <div class="text-xs text-neutral-400 mb-2 flex justify-between items-center">
+                <span>Companies</span>
+                <span id="companyCount">0 companies</span>
+            </div>
+            <ul id="companyList" class="space-y-3 text-sm"></ul>
+        </div>
+        <div id="mainContent" class="flex-1 relative">
+            <div class="absolute top-4 left-4 z-10 flex space-x-2">
+                <label class="bg-neutral-800 hover:bg-neutral-700 text-neutral-200 p-2 px-3 rounded-full shadow-lg transition-colors cursor-pointer flex items-center">
+                    <i class="fas fa-upload mr-2"></i>
+                    <span>Load Data</span>
+                    <input type="file" id="dataFileInput" accept=".json" class="hidden">
+                </label>
+                <button id="clearDataBtn" class="bg-red-800 hover:bg-red-700 text-neutral-200 p-2 px-3 rounded-full shadow-lg transition-colors flex items-center">
+                    <i class="fas fa-trash-alt mr-2"></i>
+                    <span>Clear Data</span>
+                </button>
+                <button id="settingsBtn" class="bg-neutral-800 hover:bg-neutral-700 text-neutral-200 p-2 px-3 rounded-full shadow-lg transition-colors flex items-center">
+                    <i class="fas fa-cog mr-2"></i>
+                    <span>Settings</span>
+                </button>
+            </div>
+            <div class="absolute top-4 right-4 z-10 flex space-x-2">
+                <button id="zoomInBtn"
+                    class="bg-neutral-800 hover:bg-neutral-700 text-neutral-200 p-2 px-3 rounded-full shadow-lg transition-colors">
+                    <i class="fas fa-search-plus"></i>
+                </button>
+                <button id="zoomOutBtn"
+                    class="bg-neutral-800 hover:bg-neutral-700 text-neutral-200 p-2  px-3 rounded-full shadow-lg transition-colors">
+                    <i class="fas fa-search-minus"></i>
+                </button>
+                <button id="resetViewBtn"
+                    class="bg-neutral-800 hover:bg-neutral-700 text-neutral-200 p-2  px-3 rounded-full shadow-lg transition-colors">
+                    <i class="fas fa-compress-arrows-alt"></i>
+                </button>
+            </div>
+            <div class="absolute bottom-4 left-4 z-10 text-xs text-neutral-500">
+                <div id="graphInfo" class="bg-neutral-800/70 backdrop-blur-sm p-2 rounded shadow-lg hidden">
+                    <div id="graphInfoContent"></div>
+                </div>
+            </div>
+            <div id="graph" class="w-full h-full"></div>
+            <!-- ───── Chat drawer (hidden by default) ───── -->
+            <div id="chatDrawer" class="absolute bottom-0 inset-x-0 bg-neutral-900 border-t
+    border-neutral-700 translate-y-full transition-transform
+    duration-300">
+                <div class="flex items-center px-3 py-2">
+                    <span class="font-semibold flex-1">🔮 Chat with C4AI Assistant</span>
+                    <button id="chatClose" class="text-neutral-400 hover:text-neutral-200">
+                        <i class="fa fa-times"></i>
+                    </button>
+                </div>
+                <div id="chatBody" class="flex-1 overflow-y-auto p-3 space-y-2 text-sm max-h-full"></div>
+                <div class="p-2 border-t border-neutral-700">
+                    <input id="chatInput" class="w-full bg-neutral-800 p-2 rounded outline-none"
+                        placeholder="Ask something… (Enter to send)">
+                </div>
+            </div>
+
+        </div>
+        <div id="rightSidebar" class="bg-neutral-800 shadow-lg relative w-80 overflow-y-auto">
+            <button id="rightSidebarToggle" class="sidebar-collapse-btn">
+                <i class="fa fa-chevron-right"></i>
+            </button>
+            <div id="rightPane" class="h-full">
+                <div class="flex flex-col items-center justify-center h-full p-8 text-center">
+                    <div class="text-neutral-500 mb-4">
+                        <i class="fas fa-sitemap text-4xl"></i>
+                    </div>
+                    <h3 class="text-lg font-semibold mb-2">Organization Details</h3>
+                    <p class="text-neutral-400 text-sm">Select a company to view its organization structure and key
+                        decision makers.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <!-- chat floating action button -->
+    <button id="chatFab" class="fixed bottom-6 right-6 bg-emerald-500 hover:bg-emerald-400
+                 p-3 rounded-full shadow-lg focus:outline-none" style="padding: 0.65rem 0.75rem">
+        <i class="fa fa-comments text-neutral-900"></i>
+    </button>
+
+
+    <script>
+        // Check localStorage first, otherwise fetch default data
+        let data;
+        // Toast notification function
+        function showToast(message, duration = 3000) {
+            const toast = document.getElementById('toast');
+            toast.textContent = message;
+            toast.classList.add('show');
+
+            setTimeout(() => {
+                toast.classList.remove('show');
+            }, duration);
+        }
+
+        const loadDataFromSource = () => {
+            const savedData = localStorage.getItem('companyGraphData');
+
+            if (savedData) {
+                try {
+                    data = JSON.parse(savedData);
+                    console.log('Loaded data from localStorage');
+                    initializeGraph(data);
+                    showToast('Using data from local storage. Click "Clear Data" to revert to default.');
+                } catch (error) {
+                    console.error('Error parsing stored data:', error);
+                    fetchDefaultData();
+                }
+            } else {
+                fetchDefaultData();
+            }
+        };
+
+        const fetchDefaultData = () => {
+            fetch('./company_graph.json')
+                .then(response => response.json())
+                .then(data => {
+                    initializeGraph(data);
+                })
+                .catch(error => console.error('Error loading default JSON:', error));
+        };
+
+        // File input handler
+        document.getElementById('dataFileInput').addEventListener('change', (event) => {
+            const file = event.target.files[0];
+            if (!file) return;
+
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                try {
+                    const data = JSON.parse(e.target.result);
+                    // Validate data structure
+                    if (!data.nodes || !data.edges) {
+                        alert('Invalid data format. File must contain nodes and edges arrays.');
+                        return;
+                    }
+
+                    // Save to localStorage
+                    localStorage.setItem('companyGraphData', JSON.stringify(data));
+
+                    // Show notification before reload
+                    showToast('Data file loaded successfully! Refreshing page...', 1500);
+
+                    // Reload the page to initialize with new data
+                    setTimeout(() => {
+                        window.location.reload();
+                    }, 1500);
+                } catch (error) {
+                    alert('Error parsing JSON file: ' + error.message);
+                }
+            };
+            reader.readAsText(file);
+        });
+
+        // Clear data button
+        document.getElementById('clearDataBtn').addEventListener('click', () => {
+            if (confirm('Are you sure you want to clear the loaded data? This will revert to the default dataset.')) {
+                // Clear the localStorage data
+                localStorage.removeItem('companyGraphData');
+                
+                // Force clear the current data from memory
+                window.companyGraphData = null;
+                
+                showToast('Custom data cleared! Loading default dataset...', 1500);
+                
+                // Completely reload the page to ensure fresh start
+                setTimeout(() => {
+                    window.location.href = window.location.href.split('?')[0] + '?nocache=' + new Date().getTime();
+                }, 1500);
+            }
+        });
+
+        // Initialize
+        loadDataFromSource();
+
+        function initializeGraph(data) {
+            window.companyGraphData = data          // expose globally
+
+            // lazy-load people.jsonl once so chat can reference raw rows
+            let peopleRows = null
+            async function getPeopleRows() {
+                if (peopleRows) return peopleRows
+                try {
+                    const txt = await fetch("people.jsonl").then(r => r.text())
+                    peopleRows = txt.trim().split("\n").map(l => JSON.parse(l))
+                } catch { peopleRows = [] }
+                return peopleRows
+            }
+            const container = document.getElementById('graph')
+            // Create node objects with enhanced styling and tooltips
+            const nodes = new vis.DataSet(data.nodes.map(n => ({
+                id: n.id,
+                label: n.name,
+                title: `${n.name}\n${n.industry || 'Industry: N/A'}\n${n.followers?.toLocaleString() || '0'} followers`,
+                shape: 'dot',
+                font: {
+                    color: '#ffffff',
+                    face: 'Inter, system-ui, sans-serif',
+                    size: 16,
+                    strokeWidth: 2,
+                    strokeColor: '#222222'
+                },
+                size: Math.max(15, Math.log10((n.followers || 1)) * 6 + 10),
+                borderWidth: 2,
+                borderWidthSelected: 4,
+                color: {
+                    background: '#3b82f6',  // blue-500
+                    border: '#1e40af',      // blue-800
+                    highlight: {
+                        background: '#60a5fa',  // blue-400
+                        border: '#ffffff'
+                    },
+                    hover: {
+                        background: '#93c5fd',  // blue-300
+                        border: '#ffffff'
+                    }
+                },
+                shadow: {
+                    enabled: true,
+                    color: 'rgba(0,0,0,0.3)',
+                    size: 10,
+                    x: 0,
+                    y: 0
+                }
+            })))
+
+            // Create edge objects with enhanced styling
+            const edges = new vis.DataSet(data.edges.map(e => ({
+                from: e.source,
+                to: e.target,
+                width: Math.max(1, Math.min(8, e.weight * 4)),
+                selectionWidth: 2,
+                color: {
+                    color: '#6b7280',       // gray-500
+                    highlight: '#10b981',   // emerald-500
+                    hover: '#a3e635'        // lime-400
+                },
+                arrows: {
+                    to: {
+                        enabled: e.weight > 0.3,  // Only show arrows for stronger connections
+                        scaleFactor: 0.5
+                    }
+                },
+                smooth: {
+                    type: 'continuous',
+                    forceDirection: 'none',
+                    roundness: 0.2
+                }
+            })))
+
+            // Configure and create the network
+            const network = new vis.Network(container, { nodes, edges }, {
+                physics: {
+                    barnesHut: {
+                        gravitationalConstant: -2000,
+                        springLength: 120,
+                        springConstant: 0.05,
+                        avoidOverlap: 0.5,
+                        damping: 0.09
+                    },
+                    stabilization: {
+                        iterations: 200,
+                        updateInterval: 25
+                    },
+                    enabled: true,
+                    timestep: 0.5,
+                    adaptiveTimestep: true
+                },
+                interaction: {
+                    hover: true,
+                    navigationButtons: false,
+                    keyboard: true,
+                    tooltipDelay: 100,
+                    hideEdgesOnDrag: false,  // Keep edges visible when dragging
+                    multiselect: false,
+                    selectable: true,
+                    dragNodes: true,
+                    dragView: true,
+                    zoomView: true,
+                    mouseWheel: {
+                        speed: 0.15,           // Reduced from default 1.0
+                        smooth: true           // Enable smooth zooming
+                    }
+                },
+                nodes: {
+                    font: {
+                        size: 16,
+                        strokeWidth: 2,
+                        strokeColor: '#222222'
+                    },
+                    fixed: false
+                },
+                edges: {
+                    smooth: {
+                        type: 'continuous',
+                        forceDirection: 'none',
+                        roundness: 0.2
+                    },
+                    hoverWidth: 1.5,
+                    selectionWidth: 2
+                }
+            })
+
+            window.network = network;
+
+            network.once('stabilized', () => {
+                console.log('Network stabilized')
+                // Freeze layout so nodes stop running away and dragging feels crisp
+                network.setOptions({ physics: false });
+
+                // get id of first node
+                let firstNodeId = data.nodes[0].id;
+                // network.focus(firstNodeId, { animation: true, scale: 1.5 });
+
+                // Automatically select the first company in the list
+                if (data.nodes.length > 0) {
+                    focusCompany(firstNodeId);
+                    // Highlight the first company in the sidebar
+                    const firstCompanyElement = document.querySelector('#companyList li');
+                    if (firstCompanyElement) {
+                        firstCompanyElement.classList.add('border-blue-500');
+                    }
+                }
+            });
+
+            const companyList = document.getElementById('companyList')
+            const companyCount = document.getElementById('companyCount')
+            companyCount.textContent = `${data.nodes.length} companies`
+
+            data.nodes.forEach(n => {
+                const li = document.createElement('li')
+                li.className = 'p-3 rounded bg-neutral-800 hover:bg-neutral-700 border border-neutral-700 transition-colors'
+                li.innerHTML = `
+                        <div class="flex justify-between items-start mb-1">
+                            <h3 class="font-semibold text-blue-400 cursor-pointer">${n.name}</h3>
+                            <span class="px-2 py-0.5 bg-neutral-700 rounded-full text-xs">${n.industry || 'N/A'}</span>
+                        </div>
+                        <p class="text-xs text-neutral-300 mb-2">${n.about || 'No description available'}</p>
+                        <div class="flex justify-between items-center text-xs">
+                            <div class="flex items-center">
+                                <i class="fa fa-users mr-1 text-neutral-400"></i>
+                                <span>${n.followers?.toLocaleString() || '0'} followers</span>
+                            </div>
+                            <a href="https://www.linkedin.com${n.handle}" target="_blank" class="text-emerald-400 hover:text-emerald-300">
+                                <i class="fab fa-linkedin mr-1"></i>View on LinkedIn
+                            </a>
+                        </div>
+                    `
+                // Make the entire card clickable for better UX
+                li.style.cursor = 'pointer'
+                li.onclick = (e) => {
+                    // Don't trigger if clicking on the LinkedIn link
+                    if (e.target.tagName === 'A' || e.target.closest('a')) return
+                    focusCompany(n.id)
+                    // Add active state visual indicator
+                    document.querySelectorAll('#companyList li').forEach(el =>
+                        el.classList.remove('border-blue-500'))
+                    li.classList.add('border-blue-500')
+                }
+                companyList.appendChild(li)
+            })
+
+            // Add search functionality
+            const searchInput = document.getElementById('search')
+            searchInput.addEventListener('input', () => {
+                const query = searchInput.value.toLowerCase()
+                const items = companyList.querySelectorAll('li')
+                let visibleCount = 0
+
+                items.forEach(item => {
+                    const companyName = item.querySelector('h3').textContent.toLowerCase()
+                    const industryText = item.querySelector('span').textContent.toLowerCase()
+                    const aboutText = item.querySelector('p').textContent.toLowerCase()
+
+                    if (companyName.includes(query) || industryText.includes(query) || aboutText.includes(query)) {
+                        item.style.display = ''
+                        visibleCount++
+                    } else {
+                        item.style.display = 'none'
+                    }
+                })
+
+                companyCount.textContent = `${visibleCount} of ${data.nodes.length} companies`
+            })
+
+            function focusCompany(id) {
+                network.focus(id, { scale: 1.5, animation: true, })
+                loadOrgChart(id)
+            }
+
+            async function loadOrgChart(id) {
+                const pane = document.getElementById('rightPane')
+                pane.innerHTML = '<div class="p-4 text-sm">Loading…</div>'
+                if (rightSidebar.classList.contains('collapsed')) {
+                    toggleRightSidebar()
+                }
+                try {
+                    const chart = await fetch(`org_chart_${id.replace(/\//g, "_")}.json`).then(r => r.json())
+                    currentCompany = id
+                    currentChart = chart
+
+                    // Clear any previously selected person
+                    selectedPerson = null
+
+                    renderOrg(chart, pane)
+                } catch (e) {
+                    pane.innerHTML = `
+                            <div class="flex flex-col items-center justify-center h-full p-8 text-center">
+                                <div class="text-red-500 mb-3">
+                                    <i class="fas fa-exclamation-circle text-4xl"></i>
+                                </div>
+                                <h3 class="text-lg font-semibold mb-2">Organization Chart Not Found</h3>
+                                <p class="text-neutral-400 text-sm">Data for this company is not available.</p>
+                            </div>`
+                }
+            }
+
+            // REMOVED - Using colorForScore instead
+
+            function renderOrg(chart, pane) {
+                // Format company info from chart metadata
+                const companyName = chart.meta?.company || 'Company';
+                const employeeCount = chart.nodes.length;
+                const decisionMakers = chart.nodes.filter(n => n.decision_score >= 0.5);
+
+                pane.innerHTML = `
+  <div class="p-4 border-b border-neutral-700 bg-neutral-800">
+    <div class="flex justify-between items-center">
+      <h2 class="font-semibold text-lg text-blue-400">${companyName}</h2>
+      <span class="px-2 py-1 bg-neutral-700 rounded-full text-xs">${employeeCount} employees</span>
+    </div>
+  </div>
+  <div id="orgNet" style="height:320px" class="border-b border-neutral-700"></div>
+  <div class="p-4 bg-neutral-800">
+     <div class="flex justify-between items-center mb-3">
+       <h3 class="font-semibold">Decision Makers</h3>
+       <span class="px-2 py-0.5 bg-emerald-700 text-emerald-100 rounded-full text-xs">${decisionMakers.length} key people</span>
+     </div>
+     <ul class="text-sm space-y-2 max-h-60 overflow-y-auto pr-1 mb-4">
+       ${decisionMakers.map(n => `
+         <li class="p-2 rounded bg-neutral-700 hover:bg-neutral-600 transition-colors flex justify-between items-center">
+           <div>
+             <div class="font-medium">${n.name}</div>
+             <div class="text-xs text-neutral-300">${n.title}</div>
+           </div>
+           <div class="flex items-center gap-2">
+             <span class="text-xs px-2 py-0.5 rounded-full" style="background-color:${colorForScore(n.decision_score)}">${(n.decision_score * 100).toFixed(0)}%</span>
+             <a href="${n.profile_url}" target="_blank" class="text-emerald-400 hover:text-emerald-300 text-xs">
+               <i class="fab fa-linkedin"></i>
+             </a>
+           </div>
+         </li>`).join('')}
+     </ul>
+     <div class="mt-4 text-xs border-t border-neutral-700 pt-3">
+       <div class="font-semibold mb-2">Influence Scale</div>
+       <div class="h-2 w-full rounded-full mb-1" style="background: linear-gradient(to right, rgb(255,0,100), rgb(0,255,100))"></div>
+       <div class="flex justify-between text-xs text-neutral-400">
+         <span>Low influence (0%)</span>
+         <span>High influence (100%)</span>
+       </div>
+     </div>
+  </div>
+  <div id="personPane" class="p-4 border-t border-neutral-700 text-sm bg-neutral-900 hidden"></div>`
+
+                const n = new vis.DataSet(chart.nodes.map(p => ({
+                    id: p.id,
+                    label: p.name,
+                    title: `${p.name} - ${p.title || 'Employee'} (${(p.decision_score * 100).toFixed(0)}%)`,
+                    shape: 'box',
+                    color: {
+                        background: colorForScore(p.decision_score || 0),
+                        border: '#333333',
+                        highlight: {
+                            background: '#4ade80',
+                            border: '#ffffff'
+                        }
+                    },
+                    borderWidth: 2
+                })))
+
+                const e = new vis.DataSet(chart.edges.map(e => ({ from: e.source, to: e.target, arrows: 'to' })))
+
+                const orgNet = new vis.Network(
+                    pane.querySelector('#orgNet'),
+                    { nodes: n, edges: e },
+                    {
+                        layout: {
+                            hierarchical: {
+                                direction: 'UD',
+                                sortMethod: 'directed',
+                                levelSeparation: 100
+                            }
+                        },
+                        nodes: {
+                            color: { border: '#333333' },
+                            font: { color: '#ffffff', size: 14 },
+                            shadow: { enabled: true, color: 'rgba(0,0,0,0.5)', size: 5 }
+                        },
+                        edges: {
+                            color: { color: '#555555' },
+                            width: 2,
+                            smooth: { type: 'cubicBezier' }
+                        },
+                        interaction: {
+                            hover: true,
+                            tooltipDelay: 200
+                        },
+                        physics: {
+                            enabled: false
+                        }
+                    }
+                )
+
+                let currentChart = chart        // stash for click handler
+
+                orgNet.on('click', params => {
+                    if (!params.nodes.length) return
+
+                    // Reset any previously highlighted nodes
+                    orgNet.selectNodes([]);
+
+                    // Get the selected person
+                    const person = currentChart.nodes.find(x => x.id === params.nodes[0])
+                    if (person) {
+                        // Highlight the selected node
+                        orgNet.selectNodes([person.id]);
+
+                        selectedPerson = person
+                        showPersonDetails(person)
+
+                        // Scroll right sidebar to the person details
+                        const rightSidebar = document.getElementById('rightSidebar');
+                        rightSidebar.scrollTo({
+                            top: rightSidebar.scrollHeight,
+                            behavior: 'smooth'
+                        });
+                    }
+                })
+            }
+
+            function colorForScore(s) {                // 0 → gray, 1 → emerald
+                const g = Math.round(200 * (1 - s))
+                return `rgb(${g},${255 - g},120)`
+            }
+
+            function showPersonDetails(p) {
+                const box = document.getElementById('personPane')
+                box.classList.remove('hidden')
+
+                // Render decision score badge with appropriate color
+                const scoreColor = colorForScore(p.decision_score || 0)
+                const scorePercentage = (p.decision_score * 100).toFixed(1)
+
+                box.innerHTML = `
+                    <div class="bg-neutral-800 rounded-lg p-4">
+                      <div class="flex items-start space-x-3">
+                        <img src="${p.avatar_url || 'https://ui-avatars.com/api/?name=' + encodeURIComponent(p.name)}" 
+                             class="h-16 w-16 rounded-full object-cover border-2 border-neutral-700"/>
+                        <div class="flex-1">
+                          <div class="flex justify-between items-start">
+                            <div>
+                              <div class="font-semibold text-lg">${p.name}</div>
+                              <div class="text-neutral-300 text-sm">${p.title || 'Employee'}</div>
+                            </div>
+                            <span class="px-2 py-1 rounded-full text-sm font-medium" 
+                                  style="background-color:${scoreColor}">
+                              ${scorePercentage}% influence
+                            </span>
+                          </div>
+                          
+                          <div class="mt-3 grid grid-cols-2 gap-2 text-xs text-neutral-300">
+                            <div class="flex items-center">
+                              <i class="fas fa-sitemap w-5 text-neutral-500"></i>
+                              <span class="ml-1">${p.dept || 'Department not specified'}</span>
+                            </div>
+                            <div class="flex items-center">
+                              <i class="fas fa-calendar-alt w-5 text-neutral-500"></i>
+                              <span class="ml-1">${p.yoe_current || '?'} years at company</span>
+                            </div>
+                            <div class="flex items-center">
+                              <i class="fas fa-briefcase w-5 text-neutral-500"></i>
+                              <span class="ml-1">${p.title_level || 'Level not specified'}</span>
+                            </div>
+                            <div class="flex items-center">
+                              <i class="fas fa-user-friends w-5 text-neutral-500"></i>
+                              <span class="ml-1">${p.connection_count || '?'} connections</span>
+                            </div>
+                          </div>
+                          
+                          <div class="mt-3 flex justify-end">
+                            <a href="${p.id}" target="_blank" 
+                               class="bg-emerald-800 hover:bg-emerald-700 text-emerald-100 px-3 py-1 rounded text-xs flex items-center transition-colors">
+                              <i class="fab fa-linkedin mr-1"></i> View on LinkedIn
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>`
+            }
+
+            // ───── Chat drawer logic ─────
+            const chatFab = document.getElementById('chatFab')
+            const chatDrawer = document.getElementById('chatDrawer')
+            const chatClose = document.getElementById('chatClose')
+            const chatBody = document.getElementById('chatBody')
+            const chatInput = document.getElementById('chatInput')
+
+            chatFab.onclick = () => {
+                chatDrawer.style.transform = 'translateY(0)';
+                chatFab.style.display = 'none';
+            }
+
+            chatClose.onclick = () => {
+                chatDrawer.style.transform = 'translateY(100%)'
+                chatFab.style.display = 'block';
+            }
+
+            chatInput.addEventListener('keydown', e => {
+                if (e.key === 'Enter' && chatInput.value.trim()) {
+                    sendChat(chatInput.value.trim())
+                    chatInput.value = ''
+                }
+            })
+
+            // context vars
+            let currentCompany = null, currentChart = null, companyMeta = null,
+                decisionMakers = null, similarCompanies = null, selectedPerson = null
+            function loadOrgChart(id) {
+                const pane = document.getElementById('rightPane')
+                pane.innerHTML = '<div class="p-4 text-sm">Loading…</div>'
+                pane.style.transform = 'translateX(0)'
+                try {
+                    fetch(`org_chart_${id.replace(/\//g, "_")}.json`)
+                        .then(r => r.json())
+                        .then(chart => {
+                            currentChart = chart
+                            currentCompany = id
+                            companyMeta = data.nodes.find(n => n.id === id) || {}
+                            decisionMakers = chart.nodes.filter(n => n.decision_score >= 0.5)
+                            similarCompanies = data.edges.filter(e => e.source === id)
+                                .sort((a, b) => b.weight - a.weight)
+                                .slice(0, 3).map(e => e.target)
+
+                            renderOrg(chart, pane)
+                        })
+                } catch (e) { pane.innerHTML = '<div class="p-4 text-red-600">Org chart not found</div>' }
+            }
+
+            async function sendChat(userMsg) {
+                appendMsg("you", userMsg)
+                try {
+                    const msgs = []
+                    const context = {
+                        company: companyMeta,
+                        orgChart: currentChart,
+                        decisionMakers,
+                        // similarCompanies,
+                        selectedPerson,
+                        rawEmployees: (await getPeopleRows()).filter(p => p.company_handle.replace(/\/$/, '') === currentCompany)
+                    }
+                    // remove desc_embed from company
+                    context.company.desc_embed = ""
+
+                    msgs.push({ role: "system", content: `CONTEXT:\n${JSON.stringify(context)}` })
+                    msgs.push({ role: "user", content: userMsg })
+
+                    for await (const chunk of API.chatStream(msgs)) {
+                        appendMsg("ai", chunk, true)
+                    }
+                } catch (err) { appendMsg("ai", `[error: ${err.message}]`) }
+            }
+
+            function appendMsg(sender, text, streaming = false) {
+                let el = chatBody.lastElementChild
+                if (streaming && el && el.dataset.sender === sender) {
+                    // Just append raw text for streaming mode
+                    el.lastChild.innerHTML += text.replace(/\n/g, "<br>")
+                } else {
+                    el = document.createElement('div')
+                    el.className = 'chat-message'
+                    el.dataset.sender = sender
+
+                    // Create sender element
+                    const senderEl = document.createElement('span')
+                    senderEl.className = sender === 'you' ? 'text-emerald-400' : 'text-cyan-400'
+                    senderEl.textContent = `${sender}:`
+
+                    // Create content element
+                    const contentEl = document.createElement('div')
+                    contentEl.className = 'ml-1 mt-1'
+
+                    // Apply markdown parsing
+                    contentEl.innerHTML = marked.parse(text)
+
+                    // Style markdown elements
+                    const style = document.createElement('style')
+                    style.textContent = `
+          .chat-message a { color: #34D399; text-decoration: underline; }
+          .chat-message p { margin-bottom: 0.5rem; }
+          .chat-message h1, .chat-message h2, .chat-message h3 { 
+            font-weight: bold; 
+            margin-top: 1rem;
+            margin-bottom: 0.5rem;
+          }
+          .chat-message code {
+            background-color: #222;
+            padding: 0.1rem 0.3rem;
+            border-radius: 0.25rem;
+            font-family: monospace;
+          }
+          .chat-message pre {
+            background-color: #222;
+            padding: 0.5rem;
+            border-radius: 0.25rem;
+            overflow-x: auto;
+            margin: 0.5rem 0;
+          }
+          .chat-message pre code {
+            background-color: transparent;
+            padding: 0;
+          }
+          .chat-message ul, .chat-message ol {
+            margin-left: 1.5rem;
+            margin-bottom: 0.5rem;
+          }
+          .chat-message ul { list-style-type: disc; }
+          .chat-message ol { list-style-type: decimal; }
+        `
+                    document.head.appendChild(style)
+
+                    // Append elements
+                    el.appendChild(senderEl)
+                    el.appendChild(contentEl)
+                    chatBody.appendChild(el)
+                }
+                chatBody.scrollTop = chatBody.scrollHeight
+            }
+
+            // Settings modal and API key management
+            const settingsBtn = document.getElementById('settingsBtn');
+            const settingsModal = document.getElementById('settingsModal');
+            const closeSettingsModal = document.getElementById('closeSettingsModal');
+            const apiKeyInput = document.getElementById('apiKeyInput');
+            const saveApiKey = document.getElementById('saveApiKey');
+            
+            // Check for saved API key in localStorage
+            const savedApiKey = localStorage.getItem('openai_api_key');
+            if (savedApiKey) {
+                API.setApiKey(savedApiKey);
+                apiKeyInput.value = savedApiKey;
+            } else {
+                // Show settings modal on page load if no API key is set
+                setTimeout(() => {
+                    settingsModal.classList.remove('hidden');
+                }, 500);
+            }
+            
+            // Open settings modal when settings button is clicked
+            settingsBtn.addEventListener('click', () => {
+                settingsModal.classList.remove('hidden');
+            });
+            
+            // Close settings modal
+            closeSettingsModal.addEventListener('click', () => {
+                settingsModal.classList.add('hidden');
+            });
+            
+            // Close modal when clicking outside of it
+            settingsModal.addEventListener('click', (e) => {
+                if (e.target === settingsModal) {
+                    settingsModal.classList.add('hidden');
+                }
+            });
+            
+            // Save API key
+            saveApiKey.addEventListener('click', () => {
+                const apiKey = apiKeyInput.value.trim();
+                if (apiKey) {
+                    localStorage.setItem('openai_api_key', apiKey);
+                    API.setApiKey(apiKey);
+                    settingsModal.classList.add('hidden');
+                    showToast('API key saved successfully', 2000);
+                } else {
+                    showToast('Please enter a valid API key', 2000);
+                }
+            });
+            
+            // Allow Enter key to submit API key
+            apiKeyInput.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                    saveApiKey.click();
+                }
+            });
+
+
+            // ───── Split.js and sidebar setup ─────
+            const leftSidebar = document.getElementById('leftSidebar');
+            const rightSidebar = document.getElementById('rightSidebar');
+            const mainContent = document.getElementById('mainContent');
+            const leftSidebarToggle = document.getElementById('leftSidebarToggle');
+            const rightSidebarToggle = document.getElementById('rightSidebarToggle');
+
+            // Load saved splitter sizes
+            const savedSizes = localStorage.getItem('mainSplitSizes');
+            const defaultSizes = [20, 80, 0];
+
+            // Initialize Split.js
+            const split = Split(['#mainContent', '#rightSidebar'], {
+                sizes: savedSizes ? JSON.parse(savedSizes) : defaultSizes,
+                minSize: [0, 300, 0],
+                gutterSize: 5,
+                snapOffset: 0,
+                dragInterval: 1,
+                direction: 'horizontal',
+                elementStyle: function (dimension, size, gutterSize) {
+                    return {
+                        'flex-basis': `calc(${size}% - ${gutterSize}px)`,
+                    }
+                },
+                gutterStyle: function (dimension, gutterSize) {
+                    return {
+                        'flex-basis': `${gutterSize}px`,
+                    }
+                },
+                onDragEnd: function (sizes) {
+                    localStorage.setItem('mainSplitSizes', JSON.stringify(sizes));
+                }
+            });
+
+            // Set initial sidebar states based on saved sizes
+            if (savedSizes) {
+                const sizes = JSON.parse(savedSizes);
+                if (sizes[0] < 1) {
+                    leftSidebar.classList.add('collapsed');
+                    leftSidebarToggle.innerHTML = '<i class="fa fa-chevron-right"></i>';
+                }
+                if (sizes[2] < 1) {
+                    rightSidebar.classList.add('collapsed');
+                    rightSidebarToggle.innerHTML = '<i class="fa fa-chevron-left"></i>';
+                }
+            }
+
+            // Toggle left sidebar
+            function toggleLeftSidebar() {
+                const isCollapsed = leftSidebar.classList.toggle('collapsed');
+                leftSidebarToggle.innerHTML = isCollapsed
+                    ? '<i class="fa fa-chevron-right"></i>'
+                    : '<i class="fa fa-chevron-left"></i>';
+
+                // if (isCollapsed) {
+                //     split.setSizes([0, rightSidebar.classList.contains('collapsed') ? 100 : 70, 30]);
+                // } else {
+                //     split.setSizes([20, rightSidebar.classList.contains('collapsed') ? 80 : 50, 30]);
+                // }
+
+                // Save current sizes
+                localStorage.setItem('mainSplitSizes', JSON.stringify(split.getSizes()));
+
+                // Resize graph when sidebar toggles
+                setTimeout(resizeGraph, 300);
+            }
+
+            // Toggle right sidebar
+            function toggleRightSidebar() {
+                const isCollapsed = rightSidebar.classList.toggle('collapsed');
+
+                if (isCollapsed) {
+                    // read current value of "flex-basis"
+                    let flexBasis = getComputedStyle(rightSidebar).flexBasis;
+                    rightSidebar.dataset.flexBasis = flexBasis;
+                    rightSidebar.style.flexBasis = '0px';
+                } else {
+                    // restore the value of "flex-basis" from the dataset
+                    rightSidebar.style.flexBasis = rightSidebar.dataset.flexBasis;
+                }
+
+                rightSidebarToggle.innerHTML = isCollapsed
+                    ? '<i class="fa fa-chevron-left"></i>'
+                    : '<i class="fa fa-chevron-right"></i>';
+
+                // Save current sizes
+                localStorage.setItem('mainSplitSizes', JSON.stringify(split.getSizes()));
+
+                // Resize graph when sidebar toggles
+                setTimeout(resizeGraph, 300);
+            }
+
+            // Add event listeners for toggle buttons
+            leftSidebarToggle.addEventListener('click', toggleLeftSidebar);
+            rightSidebarToggle.addEventListener('click', toggleRightSidebar);
+
+            // Resize the network graph when window or splitter changes
+            function resizeGraph() {
+                if (network) {
+                    const container = document.getElementById('graph');
+                    const availableWidth = container.clientWidth;
+                    const availableHeight = container.clientHeight;
+
+                    // Apply smart fit with appropriate scale and offset
+                    // get the current selected node id
+                    let selectedNodeId = network.getSelectedNodes()[0]
+                    // if no node is selected, use the first node
+                    if (!selectedNodeId) {
+                        const firstNode = data.nodes[0]
+                        selectedNodeId = firstNode.id
+                        // select the first node
+                        network.selectNodes([selectedNodeId])
+                        loadOrgChart(selectedNodeId)
+                    } else {
+                        network.focus(selectedNodeId, {
+                            animation: true,
+                            scale: Math.min(1.5, Math.max(0.5, Math.min(availableWidth, availableHeight) / 500))
+                        });
+                    }
+                }
+            }
+
+            window.resizeGraph = resizeGraph;
+            window.addEventListener('resize', resizeGraph);
+
+            // Add zoom control buttons functionality
+            const ZOOM_STEP = 0.2         // relative factor
+            document.getElementById('zoomInBtn').addEventListener('click', () => {
+                network.moveTo({
+                    scale: network.getScale() + ZOOM_STEP,
+                    animation: { duration: 300, easingFunction: 'easeInOutQuad' }
+                })
+            })
+            document.getElementById('zoomOutBtn').addEventListener('click', () => {
+                network.moveTo({
+                    scale: Math.max(0.1, network.getScale() - ZOOM_STEP),
+                    animation: { duration: 300, easingFunction: 'easeInOutQuad' }
+                })
+            });
+
+            document.getElementById('resetViewBtn').addEventListener('click', () => {
+                network.fit({
+                    animation: { duration: 800, easingFunction: 'easeInOutQuad' }
+                })
+            });
+
+            // Add hover information for nodes
+            network.on('hoverNode', params => {
+                const nodeId = params.node;
+                const node = data.nodes.find(n => n.id === nodeId);
+                if (node) {
+                    const graphInfo = document.getElementById('graphInfo');
+                    const graphInfoContent = document.getElementById('graphInfoContent');
+
+                    graphInfoContent.innerHTML = `
+                            <div class="font-semibold text-neutral-200">${node.name}</div>
+                            <div class="text-neutral-400">${node.industry || 'Industry: N/A'}</div>
+                            <div class="flex items-center mt-1">
+                                <i class="fas fa-users mr-1 text-blue-400"></i>
+                                <span>${node.followers?.toLocaleString() || '0'} followers</span>
+                            </div>
+                            <div class="mt-1">${node.about || ''}</div>
+                        `;
+
+                    graphInfo.classList.remove('hidden');
+                }
+            });
+
+            network.on('blurNode', () => {
+                document.getElementById('graphInfo').classList.add('hidden');
+            });
+
+            // Add selected node styling
+            network.on('selectNode', params => {
+                const nodeId = params.nodes[0];
+                if (nodeId) {
+                    // Focus on the selected node
+                    network.focus(nodeId, {
+                        scale: 1.2,
+                        animation: true,
+                    });
+
+                    // Also load the org chart for the selected company
+                    focusCompany(nodeId);
+
+                    // Add visual indicator in the sidebar
+                    document.querySelectorAll('#companyList li').forEach(el => {
+                        el.classList.remove('border-blue-500');
+                        // Find the corresponding company in the sidebar
+                        if (el.querySelector('h3').textContent === data.nodes.find(n => n.id === nodeId)?.name) {
+                            el.classList.add('border-blue-500');
+                            // Scroll the sidebar to show the selected company
+                            el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                        }
+                    });
+                }
+            });
+
+            // Initial fit after a short delay to ensure the network is properly initialized
+            setTimeout(resizeGraph, 500);
+        }
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file