diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx
index fa967bc..369a76f 100644
--- a/src/components/AppLayout.tsx
+++ b/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() {
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index ed24c65..837e1de 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -12,6 +12,7 @@ const paths: Record = {
upload: '',
file: '',
'arrow-right': '',
+ external: '',
close: '',
search: '',
info: '',
diff --git a/src/i18n.ts b/src/i18n.ts
index 73c9686..b19565f 100644
--- a/src/i18n.ts
+++ b/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 = {
'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',
diff --git a/src/styles/theme.css b/src/styles/theme.css
index c5ae05a..1e8cdbb 100644
--- a/src/styles/theme.css
+++ b/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}