{
  "id": "2026-04-29-studio-unified-shell-1a2f0888e5",
  "scope": "redkey",
  "source_of_truth": "repo",
  "source_path": "docs/specs/2026-04-29-studio-unified-shell.md",
  "source_kind": "markdown",
  "visibility": "internal",
  "renderer_id": "design_doc.dreamborn-forge.generated.v1",
  "design_system": "dreamborn-design-system:forge",
  "generated_at": "2026-05-09T13:00:55.698Z",
  "artifact_type": "design_doc",
  "schema_version": "design_doc.generated.v1",
  "title": "Studio Unified Shell + Ops Studio Integration",
  "summary": "Studio Unified Shell + Ops Studio Integration Date: 2026 04 29 Status: Approved Problem The Studio app (studio.bezeliq.ai) and Ops Studio (cockpit at cockpit.bezeliq.ai) are separate, unlinked experiences. The Studio sidebar uses a plain text wordmark and a flat link list with an external link to the cockpit. There is no way to navigate between studios from ...",
  "format_source": "markdown",
  "sections": [
    {
      "title": "Studio Unified Shell + Ops Studio Integration",
      "level": 1,
      "body": "**Date:** 2026-04-29  \n**Status:** Approved  \n\n---"
    },
    {
      "title": "Problem",
      "level": 2,
      "body": "The Studio app (`studio.bezeliq.ai`) and Ops Studio (cockpit at `cockpit.bezeliq.ai`) are separate, unlinked experiences. The Studio sidebar uses a plain text wordmark and a flat link list with an external link to the cockpit. There is no way to navigate between studios from within a studio.\n\n---"
    },
    {
      "title": "Solution",
      "level": 2,
      "body": "Replace the current AppShell sidebar with a two-layer navigation shell. Retire `cockpit.bezeliq.ai` — Ops Studio lives inside Studio at `/ops`.\n\n---"
    },
    {
      "title": "Icon Rail (always visible, 52px wide)",
      "level": 3,
      "body": "- Bezel white logo (`https://imagedelivery.net/C0nJXN4TRwsrV5P_U5q4RQ/bezel-white/public`) at top, replacing the current `BezelIQ` text wordmark\n- One icon per studio, stacked vertically below the logo\n- Each studio has a signature color applied to its icon, border, and background tint\n- Coming-soon studios rendered at reduced opacity with a dashed border\n- Clicking a **different** studio's icon navigates immediately to that studio's root route\n- Clicking the **current** studio's icon toggles the flyout open/closed"
    },
    {
      "title": "Flyout Panel (150px, slides out from rail)",
      "level": 3,
      "body": "- Opens alongside the icon rail — total nav width 202px when open\n- Shows the current studio's name at top (in its signature color)\n- Shows that studio's sub-nav items below (same items the current sidebar shows)\n- Closes when: user clicks the current studio icon again, or navigates to a different studio\n- Default state: open (matches current sidebar behavior)\n\n---"
    },
    {
      "title": "Studio Registry",
      "level": 2,
      "body": "| Studio | Route | Color | Icon concept | Status |\n|---|---|---|---|---|\n| Ops Studio | `/ops` | Purple `#8b86f6` | Network/node graph | Live |\n| Dev Studio | `/dev` | Cyan `#38bdf8` | Terminal/code brackets | Live |\n| Sales Studio | `/sales` | Green `#4ade80` | Bar chart / pipeline | Live |\n| Marketing Studio | `/marketing` | Amber `#fbbf24` | Signal/broadcast | Coming soon |\n| Finance Studio | `/finance` | Orange `#fb923c` | Currency/ledger | Coming soon |\n\nComing-soon studios: visible in the rail (dashed border, 40% opacity), not clickable.\n\n---"
    },
    {
      "title": "Ops Studio Route (`/ops`)",
      "level": 2,
      "body": "New Vue route added to the router. Renders a full-height iframe pointing at the cockpit HTML file. The cockpit (`cockpit/index.html`) is served statically — no rewrite required.\n\nThe cockpit's own nav bar (forge nav with logo + \"Ops Studio\" label) is hidden via iframe CSS or a query param flag so the Studio shell nav does not double up.\n\n---"
    },
    {
      "title": "Studio Home Page (`/`)",
      "level": 2,
      "body": "`StudioHome.vue` redesigned as a studio launcher grid. Each studio gets a card using its signature color. Cards for live studios are clickable and navigate to the studio root. Coming-soon cards are visible but inert. Same Bezel logo in the shell rail above.\n\n---"
    },
    {
      "title": "Deployment",
      "level": 2,
      "body": "- nginx for `studio.bezeliq.ai` updated to serve the cockpit HTML at the `/ops` path (or the Vue app handles it via iframe src pointing to the static file path)\n- `cockpit.bezeliq.ai` nginx config updated to 301 redirect to `studio.bezeliq.ai/ops`, then retired\n- No changes to the cockpit file itself beyond hiding its internal nav in iframe context\n\n---"
    },
    {
      "title": "Components Touched",
      "level": 2,
      "body": "| File | Change |\n|---|---|\n| `src/components/AppShell.vue` | Full rewrite — icon rail + flyout replacing current sidebar |\n| `src/router/index.js` | Add `/ops` route, add `/sales`, `/marketing`, `/finance` stubs |\n| `src/views/StudioHome.vue` | Redesign as studio launcher grid |\n| `src/views/OpsStudioView.vue` | New — full-height cockpit iframe |\n| VPS nginx (`studio.bezeliq.ai`) | Serve cockpit static at `/ops` or configure iframe src |\n| VPS nginx (`cockpit.bezeliq.ai`) | 301 redirect → `studio.bezeliq.ai/ops` |\n\n---"
    },
    {
      "title": "Out of Scope",
      "level": 2,
      "body": "- No changes to cockpit logic, data, or Supabase wiring\n- No Sales/Marketing/Finance studio content (stubs only)\n- No mobile layout changes"
    }
  ],
  "html_path": "artifacts/2026-04-29-studio-unified-shell-1a2f0888e5.html",
  "json_path": "artifacts/2026-04-29-studio-unified-shell-1a2f0888e5.json"
}