jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-24 10:22:16 -07:00
parent 77b7aba893
commit ddb5b0b2e4
1 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
modules/rdesign/mod.ts
View File

@ -55,7 +55,6 @@ routes.get("/", (c) => {
moduleId: "rdesign", moduleId: "rdesign",
spaceSlug: space, spaceSlug: space,
modules: getModuleInfoList(), modules: getModuleInfoList(),
theme: "dark",
body: renderDesignLanding(), body: renderDesignLanding(),
})); }));
} }
@ -66,7 +65,6 @@ routes.get("/", (c) => {
moduleId: "rdesign", moduleId: "rdesign",
spaceSlug: space, spaceSlug: space,
modules: getModuleInfoList(), modules: getModuleInfoList(),
theme: "dark",
body: renderDesignApp(space, SCRIBUS_NOVNC_URL), body: renderDesignApp(space, SCRIBUS_NOVNC_URL),
styles: `<style>${RDESIGN_CSS}</style>`, styles: `<style>${RDESIGN_CSS}</style>`,
scripts: `<script>${RDESIGN_JS}</script>`, scripts: `<script>${RDESIGN_JS}</script>`,
@ -75,38 +73,38 @@ routes.get("/", (c) => {
const RDESIGN_CSS = ` const RDESIGN_CSS = `
#rdesign-app { max-width:900px; margin:0 auto; padding:0.5rem 0; } #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-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,#334155); } .rd-prompt { padding:16px; border-bottom:1px solid var(--rs-border); }
.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-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: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-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 { 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 { background:linear-gradient(135deg,#7c3aed,#a78bfa); color:white; }
.rd-btn-primary:hover { background:linear-gradient(135deg,#6d28d9,#8b5cf6); transform:translateY(-1px); } .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-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 { 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,#334155); color:var(--rs-text-primary,#e2e8f0); } .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-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-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 { 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-preview img { max-width:100%; max-height:400px; border-radius:8px; border:1px solid var(--rs-border); }
.rd-empty { color:#64748b; text-align:center; font-size:13px; padding:3rem 1rem; } .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,#1e293b); display:flex; align-items:flex-start; gap:8px; } .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 { 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.thinking { background:rgba(96,165,250,0.15); color:#60a5fa; }
.rd-step-icon.executing { background:#422006; color:#fbbf24; } .rd-step-icon.executing { background:rgba(251,191,36,0.15); color:#fbbf24; }
.rd-step-icon.done { background:#064e3b; color:#34d399; } .rd-step-icon.done { background:rgba(52,211,153,0.15); color:#34d399; }
.rd-step-icon.error { background:#450a0a; color:#f87171; } .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,#94a3b8); } .rd-step-content { flex:1; line-height:1.4; color:var(--rs-text-secondary); }
.rd-step-tool { font-family:monospace; background:var(--rs-bg-elevated,#0f172a); padding:1px 4px; border-radius:3px; font-size:11px; color:#a78bfa; } .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,#334155); justify-content:center; } .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(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-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); } } @keyframes rd-spin { to { transform:rotate(360deg); } }
@media (max-width:700px) { @media (max-width:700px) {
.rd-body { flex-direction:column; } .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'); setState('planning');
abortController = new AbortController(); abortController = new AbortController();
var space = document.getElementById('rdesign-app').dataset.space || 'demo'; 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', { fetch('/' + space + '/rdesign/api/design-agent', {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: fetchHeaders,
body: JSON.stringify({ brief: text, space: space }), body: JSON.stringify({ brief: text, space: space }),
signal: abortController.signal, signal: abortController.signal,
}).then(function(res) { }).then(function(res) {