From ddb5b0b2e4e2a79c7e48cb6074580ddcb9f6d3f0 Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Tue, 24 Mar 2026 10:22:16 -0700 Subject: [PATCH] fix(rdesign): fix 401 auth error and theme-aware CSS for light mode Pass encryptid auth token in design-agent API requests. Replace non-existent --rs-bg-elevated with real theme variables and remove hardcoded dark fallbacks so the UI works in both light and dark mode. Co-Authored-By: Claude Opus 4.6 --- modules/rdesign/mod.ts | 44 +++++++++++++++++++++--------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/modules/rdesign/mod.ts b/modules/rdesign/mod.ts index e16b20d..be53a08 100644 --- a/modules/rdesign/mod.ts +++ b/modules/rdesign/mod.ts @@ -55,7 +55,6 @@ routes.get("/", (c) => { moduleId: "rdesign", spaceSlug: space, modules: getModuleInfoList(), - theme: "dark", body: renderDesignLanding(), })); } @@ -66,7 +65,6 @@ routes.get("/", (c) => { moduleId: "rdesign", spaceSlug: space, modules: getModuleInfoList(), - theme: "dark", body: renderDesignApp(space, SCRIBUS_NOVNC_URL), styles: ``, scripts: ``, @@ -75,38 +73,38 @@ routes.get("/", (c) => { const RDESIGN_CSS = ` #rdesign-app { max-width:900px; margin:0 auto; padding:0.5rem 0; } -.rd-panel { background:var(--rs-bg-surface,#1e1e2e); border:1px solid var(--rs-border,#334155); border-radius:12px; overflow:hidden; } -.rd-prompt { padding:16px; border-bottom:1px solid var(--rs-border,#334155); } -.rd-prompt textarea { width:100%; padding:12px; border:2px solid var(--rs-border,#334155); border-radius:8px; font-size:14px; resize:none; outline:none; font-family:inherit; background:var(--rs-bg-elevated,#0f172a); color:var(--rs-text-primary,#e2e8f0); box-sizing:border-box; } +.rd-panel { background:var(--rs-bg-surface); border:1px solid var(--rs-border); border-radius:12px; overflow:hidden; } +.rd-prompt { padding:16px; border-bottom:1px solid var(--rs-border); } +.rd-prompt textarea { width:100%; padding:12px; border:2px solid var(--rs-border); border-radius:8px; font-size:14px; resize:none; outline:none; font-family:inherit; background:var(--rs-bg-page); color:var(--rs-text-primary); box-sizing:border-box; } .rd-prompt textarea:focus { border-color:#7c3aed; } -.rd-prompt textarea::placeholder { color:#64748b; } +.rd-prompt textarea::placeholder { color:var(--rs-text-secondary); } .rd-btn-row { display:flex; gap:8px; margin-top:10px; align-items:center; } .rd-btn { padding:8px 18px; border-radius:8px; border:none; font-size:13px; font-weight:600; cursor:pointer; transition:all 0.15s; } .rd-btn-primary { background:linear-gradient(135deg,#7c3aed,#a78bfa); color:white; } .rd-btn-primary:hover { background:linear-gradient(135deg,#6d28d9,#8b5cf6); transform:translateY(-1px); } .rd-btn-primary:disabled { opacity:0.5; cursor:default; transform:none; } -.rd-btn-secondary { background:var(--rs-bg-elevated,#1e293b); color:var(--rs-text-secondary,#94a3b8); border:1px solid var(--rs-border,#334155); } -.rd-btn-secondary:hover { background:var(--rs-bg-hover,#334155); color:var(--rs-text-primary,#e2e8f0); } +.rd-btn-secondary { background:var(--rs-bg-surface-raised); color:var(--rs-text-secondary); border:1px solid var(--rs-border); } +.rd-btn-secondary:hover { background:var(--rs-bg-hover); color:var(--rs-text-primary); } .rd-badge { font-size:10px; padding:3px 8px; border-radius:10px; text-transform:uppercase; letter-spacing:0.5px; background:rgba(124,58,237,0.2); color:#a78bfa; margin-left:auto; } .rd-body { display:flex; min-height:400px; } -.rd-steps { flex:1; overflow-y:auto; padding:12px; font-size:12px; border-right:1px solid var(--rs-border,#334155); max-height:500px; } +.rd-steps { flex:1; overflow-y:auto; padding:12px; font-size:12px; border-right:1px solid var(--rs-border); max-height:500px; } .rd-preview { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; min-width:300px; } -.rd-preview img { max-width:100%; max-height:400px; border-radius:8px; border:1px solid var(--rs-border,#334155); } -.rd-empty { color:#64748b; text-align:center; font-size:13px; padding:3rem 1rem; } -.rd-step { padding:6px 0; border-bottom:1px solid var(--rs-border,#1e293b); display:flex; align-items:flex-start; gap:8px; } +.rd-preview img { max-width:100%; max-height:400px; border-radius:8px; border:1px solid var(--rs-border); } +.rd-empty { color:var(--rs-text-secondary); text-align:center; font-size:13px; padding:3rem 1rem; } +.rd-step { padding:6px 0; border-bottom:1px solid var(--rs-border-subtle); display:flex; align-items:flex-start; gap:8px; } .rd-step-icon { flex-shrink:0; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; margin-top:1px; } -.rd-step-icon.thinking { background:#1e3a5f; color:#60a5fa; } -.rd-step-icon.executing { background:#422006; color:#fbbf24; } -.rd-step-icon.done { background:#064e3b; color:#34d399; } -.rd-step-icon.error { background:#450a0a; color:#f87171; } -.rd-step-content { flex:1; line-height:1.4; color:var(--rs-text-secondary,#94a3b8); } -.rd-step-tool { font-family:monospace; background:var(--rs-bg-elevated,#0f172a); padding:1px 4px; border-radius:3px; font-size:11px; color:#a78bfa; } -.rd-export { display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--rs-border,#334155); justify-content:center; } -.rd-spinner { display:inline-block; width:12px; height:12px; border:2px solid rgba(255,255,255,0.3); border-top-color:#fff; border-radius:50%; animation:rd-spin 0.8s linear infinite; vertical-align:middle; margin-right:4px; } +.rd-step-icon.thinking { background:rgba(96,165,250,0.15); color:#60a5fa; } +.rd-step-icon.executing { background:rgba(251,191,36,0.15); color:#fbbf24; } +.rd-step-icon.done { background:rgba(52,211,153,0.15); color:#34d399; } +.rd-step-icon.error { background:rgba(248,113,113,0.15); color:#f87171; } +.rd-step-content { flex:1; line-height:1.4; color:var(--rs-text-secondary); } +.rd-step-tool { font-family:monospace; background:var(--rs-bg-surface-sunken); padding:1px 4px; border-radius:3px; font-size:11px; color:#a78bfa; } +.rd-export { display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--rs-border); justify-content:center; } +.rd-spinner { display:inline-block; width:12px; height:12px; border:2px solid rgba(124,58,237,0.3); border-top-color:#a78bfa; border-radius:50%; animation:rd-spin 0.8s linear infinite; vertical-align:middle; margin-right:4px; } @keyframes rd-spin { to { transform:rotate(360deg); } } @media (max-width:700px) { .rd-body { flex-direction:column; } - .rd-steps { border-right:none; border-bottom:1px solid var(--rs-border,#334155); max-height:250px; } + .rd-steps { border-right:none; border-bottom:1px solid var(--rs-border); max-height:250px; } } `; @@ -215,9 +213,11 @@ const RDESIGN_JS = ` setState('planning'); abortController = new AbortController(); var space = document.getElementById('rdesign-app').dataset.space || 'demo'; + var fetchHeaders = { 'Content-Type': 'application/json' }; + try { var sess = JSON.parse(localStorage.getItem('encryptid_session') || '{}'); if (sess.accessToken) fetchHeaders['Authorization'] = 'Bearer ' + sess.accessToken; } catch(e) {} fetch('/' + space + '/rdesign/api/design-agent', { method: 'POST', - headers: { 'Content-Type': 'application/json' }, + headers: fetchHeaders, body: JSON.stringify({ brief: text, space: space }), signal: abortController.signal, }).then(function(res) {