src/components/AppLayout.tsx

@@ -7,6 +7,9 @@ import { workspaceCredits } from '../api/engine'
 import { Brand, Icon, type IconName } from './Icon'
 import { Toaster } from './Toast'
 
+// Learning Studio (learning-lab/frontend); both apps share one Clerk instance, so the user stays signed in.
+const STUDIO_URL: string = import.meta.env.VITE_STUDIO_URL
+
 // The Production dashboard shows what Express is making; the four settings doors run it:
 // feed the Brain, give an instruction, watch the schedule, collect results.
 export const NAV_GROUPS: { label: Key; items: { to: string; label: Key; icon: IconName }[] }[] = [
@@ -167,6 +170,7 @@ export function AppLayout() {
           <div className="topbar-right">
             <span className="demo-indicator"><i></i> {t('layout.engine')}</span>
             <CreditBalance />
+            <a className="studio-link" href={STUDIO_URL}><Icon name="external" />{t('layout.toStudio')}</a>
             <LanguageSwitch />
           </div>
         </header>

src/components/Icon.tsx

@@ -12,6 +12,7 @@ const paths: Record<string, string> = {
   upload: '<path d="M12 16V4m-5 5 5-5 5 5M4 16v5h16v-5"/>',
   file: '<path d="M5 3h9l5 5v13H5zM14 3v6h5M8 13h8M8 17h6"/>',
   'arrow-right': '<path d="M4 12h16m-6-6 6 6-6 6"/>',
+  external: '<path d="M14 4h6v6M20 4l-9 9M18 14v6H4V6h6"/>',
   close: '<path d="M6 6l12 12M18 6 6 18"/>',
   search: '<circle cx="10" cy="10" r="6"/><path d="m15 15 5 5"/>',
   info: '<circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 7v.2"/>',

src/i18n.ts

@@ -20,6 +20,7 @@ const en = {
   'layout.signOut': 'Sign out',
   'layout.engine': 'learning-lab engine',
   'layout.creditsTitle': 'Workspace credit balance',
+  'layout.toStudio': 'Switch to Learning Lab',
   'layout.devStrip': 'Development phase: connected to the learning-lab engine. Review AI output before using it.',
   'layout.footer': 'A workspace for knowledge that keeps growing.',
   'layout.mainNav': 'Main navigation',
@@ -469,6 +470,7 @@ const id: Record<Key, string> = {
   'layout.signOut': 'Keluar',
   'layout.engine': 'Engine learning-lab',
   'layout.creditsTitle': 'Saldo kredit workspace',
+  'layout.toStudio': 'Beralih ke Learning Lab',
   'layout.devStrip': 'Fase development: terhubung ke engine learning-lab. Hasil AI perlu ditinjau sebelum dipakai.',
   'layout.footer': 'Ruang kerja untuk pengetahuan yang terus berkembang.',
   'layout.mainNav': 'Navigasi utama',

src/styles/theme.css

@@ -91,6 +91,9 @@ button.workspace:hover,button.workspace[aria-expanded=true]{border-color:var(--s
 .demo-indicator{white-space:nowrap;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12.5px;font-weight:550;color:#344054}
 .credit-pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;background:var(--light);color:var(--blue-dark);font-size:12.5px;font-weight:700;white-space:nowrap}
 .credit-pill svg{width:15px;height:15px}
+.studio-link{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#344054;font-size:12.5px;font-weight:600;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s}
+.studio-link:hover{background:#f5f8ff;border-color:#d0d5dd;color:var(--blue-dark)}
+.studio-link svg{width:14px;height:14px}
 .demo-indicator i{width:7px;height:7px;background:#059669;box-shadow:0 0 0 3px #d1fae5}
 .lang-switch{border:0;border-radius:999px;background:#f2f4f7;padding:3px}
 .lang-switch button{border-radius:999px;padding:5px 11px;font-size:12px;color:#475467}