Studio Unified Shell + Ops Studio Integration

Date: 2026-04-29 Status: Approved

---

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.

---

Replace the current AppShell sidebar with a two-layer navigation shell. Retire cockpit.bezeliq.ai — Ops Studio lives inside Studio at /ops.

---

• Bezel white logo (https://imagedelivery.net/C0nJXN4TRwsrV5P_U5q4RQ/bezel-white/public) at top, replacing the current BezelIQ text wordmark
• One icon per studio, stacked vertically below the logo
• Each studio has a signature color applied to its icon, border, and background tint
• Coming-soon studios rendered at reduced opacity with a dashed border
• Clicking a different studio's icon navigates immediately to that studio's root route
• Clicking the current studio's icon toggles the flyout open/closed

• Opens alongside the icon rail — total nav width 202px when open
• Shows the current studio's name at top (in its signature color)
• Shows that studio's sub-nav items below (same items the current sidebar shows)
• Closes when: user clicks the current studio icon again, or navigates to a different studio
• Default state: open (matches current sidebar behavior)

---

| Studio | Route | Color | Icon concept | Status | |---|---|---|---|---| | Ops Studio | /ops | Purple #8b86f6 | Network/node graph | Live | | Dev Studio | /dev | Cyan #38bdf8 | Terminal/code brackets | Live | | Sales Studio | /sales | Green #4ade80 | Bar chart / pipeline | Live | | Marketing Studio | /marketing | Amber #fbbf24 | Signal/broadcast | Coming soon | | Finance Studio | /finance | Orange #fb923c | Currency/ledger | Coming soon |

Coming-soon studios: visible in the rail (dashed border, 40% opacity), not clickable.

---

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.

The 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.

---

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.

---

• 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)
• cockpit.bezeliq.ai nginx config updated to 301 redirect to studio.bezeliq.ai/ops, then retired
• No changes to the cockpit file itself beyond hiding its internal nav in iframe context

---

| File | Change | |---|---| | src/components/AppShell.vue | Full rewrite — icon rail + flyout replacing current sidebar | | src/router/index.js | Add /ops route, add /sales, /marketing, /finance stubs | | src/views/StudioHome.vue | Redesign as studio launcher grid | | src/views/OpsStudioView.vue | New — full-height cockpit iframe | | VPS nginx (studio.bezeliq.ai) | Serve cockpit static at /ops or configure iframe src | | VPS nginx (cockpit.bezeliq.ai) | 301 redirect → studio.bezeliq.ai/ops |

---

• No changes to cockpit logic, data, or Supabase wiring
• No Sales/Marketing/Finance studio content (stubs only)
• No mobile layout changes