@unbrained/pm-web 1.0.0

package/public/src/views/settings.js

@@ -0,0 +1,272 @@
+// ═══════════════════════════════════════════════════════════════
+// SETTINGS VIEW
+// ═══════════════════════════════════════════════════════════════
+import { state } from '../state.js';
+import { api } from '../api.js';
+import { escHtml } from '../utils.js';
+import { toast } from '../components/toast.js';
+import { confirmDialog } from '../components/modals.js';
+function avatarInitial(name) {
+    return (name.trim()[0] || '?').toUpperCase();
+}
+function avatarBg(seed) {
+    let hash = 0;
+    for (let i = 0; i < seed.length; i++) {
+        hash = (hash * 31 + seed.charCodeAt(i)) >>> 0;
+    }
+    const hue = hash % 360;
+    return `hsl(${hue},55%,45%)`;
+}
+export function renderSettingsView() {
+    const el = document.getElementById('content-settings');
+    if (!el)
+        return;
+    const u = state.user || {};
+    const createdInfo = u.created_at
+        ? `<span style="display:block;margin-top:4px;font-size:12px;color:var(--text-muted)">Account created ${new Date(u.created_at).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</span>`
+        : '';
+    el.innerHTML = `
+    <div class="page-header">
+      <div><div class="page-title">Settings</div><div class="page-subtitle">Manage your profile and account</div></div>
+    </div>
+    <div style="max-width:560px;display:flex;flex-direction:column;gap:20px">
+      <div class="card">
+        <div class="card-header"><div class="card-title">Profile</div></div>
+        <div class="card-body">
+          <div style="display:flex;align-items:center;gap:16px;margin-bottom:20px">
+            <div style="width:64px;height:64px;border-radius:50%;background:${avatarBg(u.email || u.display_name || '?')};display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#fff;flex-shrink:0;user-select:none" aria-hidden="true">${escHtml(avatarInitial(u.display_name || u.email || '?'))}</div>
+            <div>
+              <div style="font-weight:600;font-size:16px">${escHtml(u.display_name || u.email || '')}</div>
+              <div style="font-size:13px;color:var(--text-muted)">${escHtml(u.email || '')}</div>
+            </div>
+          </div>
+          <div class="form-group">
+            <label class="form-label" for="settings-display-name">Display Name</label>
+            <input class="form-input" id="settings-display-name" type="text" value="${escHtml(u.display_name || u.email || '')}" placeholder="Your display name" aria-label="Display name">
+          </div>
+          <div class="form-group">
+            <label class="form-label">Email</label>
+            <input class="form-input" type="text" value="${escHtml(u.email || '')}" disabled style="opacity:0.6;cursor:not-allowed" aria-label="Email address (read only)">
+            ${createdInfo}
+          </div>
+          <div class="form-error" id="settings-profile-error" style="display:none" role="alert"></div>
+          <button class="btn btn-primary btn-sm" id="settings-profile-btn" onclick="window.__app.saveProfile()" aria-label="Save profile changes"><span>Save Profile</span></button>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-header"><div class="card-title">Change Password</div></div>
+        <div class="card-body">
+          <div class="form-group">
+            <label class="form-label" for="settings-current-pw">Current Password</label>
+            <input class="form-input" id="settings-current-pw" type="password" placeholder="Current password" autocomplete="current-password" aria-label="Current password">
+          </div>
+          <div class="form-group">
+            <label class="form-label" for="settings-new-pw">New Password</label>
+            <input class="form-input" id="settings-new-pw" type="password" placeholder="New password" autocomplete="new-password" aria-label="New password">
+          </div>
+          <div class="form-group">
+            <label class="form-label" for="settings-confirm-pw">Confirm New Password</label>
+            <input class="form-input" id="settings-confirm-pw" type="password" placeholder="Confirm new password" autocomplete="new-password" aria-label="Confirm new password">
+          </div>
+          <div class="form-error" id="settings-pw-error" style="display:none" role="alert"></div>
+          <button class="btn btn-primary btn-sm" id="settings-pw-btn" onclick="window.__app.changePassword()" aria-label="Change password"><span>Change Password</span></button>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-header">
+          <div class="card-title">GitHub Token</div>
+          ${u.has_github_token ? `<span style="font-size:12px;color:var(--status-closed)">✓ Token configured</span>` : `<span style="font-size:12px;color:var(--text-muted)">No token set</span>`}
+        </div>
+        <div class="card-body">
+          <div style="margin-bottom:12px;padding:10px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);font-size:12px;color:var(--text-secondary)">
+            <strong style="color:var(--text-primary)">How to get a token:</strong>
+            <ol style="margin-top:6px;padding-left:18px;line-height:1.8">
+              <li>Go to GitHub → Settings → Developer settings → Personal access tokens</li>
+              <li>Generate a new token with <code style="font-family:monospace;background:var(--bg-base);padding:0 3px;border-radius:3px">repo</code> scope</li>
+              <li>Paste the token below and click Save</li>
+            </ol>
+          </div>
+          <div class="form-group">
+            <label class="form-label" for="settings-github-token">Personal Access Token (PAT)</label>
+            <input class="form-input" id="settings-github-token" type="password" placeholder="${u.has_github_token ? 'Leave blank to keep current token' : 'ghp_…'}" autocomplete="off" aria-label="GitHub personal access token">
+            <div style="font-size:11px;color:var(--text-muted);margin-top:4px">Used for GitHub integration. Needs <code style="font-family:monospace;background:var(--bg-input);padding:0 3px;border-radius:3px">repo</code> scope.</div>
+          </div>
+          <div class="form-error" id="settings-github-error" style="display:none" role="alert"></div>
+          <div style="display:flex;gap:8px">
+            <button class="btn btn-primary btn-sm" id="settings-github-btn" onclick="window.__app.saveGitHubToken()" aria-label="Save GitHub token"><span>Save Token</span></button>
+            ${u.has_github_token ? `<button class="btn btn-danger btn-sm" onclick="window.__app.clearGitHubToken()" aria-label="Clear GitHub token">Clear Token</button>` : ''}
+          </div>
+        </div>
+      </div>
+    </div>`;
+}
+export async function saveProfile() {
+    const displayName = document.getElementById('settings-display-name')?.value?.trim() || '';
+    const errEl = document.getElementById('settings-profile-error');
+    const btn = document.getElementById('settings-profile-btn');
+    if (!displayName) {
+        if (errEl) {
+            errEl.textContent = 'Display name cannot be empty';
+            errEl.style.display = 'block';
+        }
+        return;
+    }
+    if (errEl)
+        errEl.style.display = 'none';
+    if (btn) {
+        btn.disabled = true;
+        const sp = btn.querySelector('span');
+        if (sp)
+            sp.textContent = 'Saving…';
+    }
+    try {
+        const data = await api('PATCH', '/auth/profile', { displayName });
+        if (data.user) {
+            state.user = { ...state.user, ...data.user };
+        }
+        else {
+            state.user.display_name = displayName;
+        }
+        const u = state.user;
+        const initials = (u.display_name || u.email || '?').split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
+        const avatarEl = document.getElementById('user-avatar');
+        if (avatarEl)
+            avatarEl.textContent = initials;
+        const nameEl = document.getElementById('user-name-display');
+        if (nameEl)
+            nameEl.textContent = u.display_name || u.email;
+        toast('Profile saved', 'success');
+        renderSettingsView();
+    }
+    catch (err) {
+        if (errEl) {
+            errEl.textContent = err instanceof Error ? err.message : String(err);
+            errEl.style.display = 'block';
+        }
+    }
+    finally {
+        if (btn) {
+            btn.disabled = false;
+            const sp = btn.querySelector('span');
+            if (sp)
+                sp.textContent = 'Save Profile';
+        }
+    }
+}
+export async function changePassword() {
+    const currentPassword = document.getElementById('settings-current-pw')?.value || '';
+    const newPassword = document.getElementById('settings-new-pw')?.value || '';
+    const confirmPassword = document.getElementById('settings-confirm-pw')?.value || '';
+    const errEl = document.getElementById('settings-pw-error');
+    const btn = document.getElementById('settings-pw-btn');
+    if (errEl)
+        errEl.style.display = 'none';
+    if (!currentPassword || !newPassword || !confirmPassword) {
+        if (errEl) {
+            errEl.textContent = 'All fields are required';
+            errEl.style.display = 'block';
+        }
+        return;
+    }
+    if (newPassword !== confirmPassword) {
+        if (errEl) {
+            errEl.textContent = 'New passwords do not match';
+            errEl.style.display = 'block';
+        }
+        return;
+    }
+    if (newPassword.length < 6) {
+        if (errEl) {
+            errEl.textContent = 'New password must be at least 6 characters';
+            errEl.style.display = 'block';
+        }
+        return;
+    }
+    if (btn) {
+        btn.disabled = true;
+        const sp = btn.querySelector('span');
+        if (sp)
+            sp.textContent = 'Changing…';
+    }
+    try {
+        await api('POST', '/auth/change-password', { currentPassword, newPassword });
+        toast('Password changed successfully', 'success');
+        const curEl = document.getElementById('settings-current-pw');
+        const newEl = document.getElementById('settings-new-pw');
+        const confEl = document.getElementById('settings-confirm-pw');
+        if (curEl)
+            curEl.value = '';
+        if (newEl)
+            newEl.value = '';
+        if (confEl)
+            confEl.value = '';
+    }
+    catch (err) {
+        if (errEl) {
+            errEl.textContent = err instanceof Error ? err.message : String(err);
+            errEl.style.display = 'block';
+        }
+    }
+    finally {
+        if (btn) {
+            btn.disabled = false;
+            const sp = btn.querySelector('span');
+            if (sp)
+                sp.textContent = 'Change Password';
+        }
+    }
+}
+export async function saveGitHubToken() {
+    const token = document.getElementById('settings-github-token')?.value?.trim() || '';
+    const errEl = document.getElementById('settings-github-error');
+    const btn = document.getElementById('settings-github-btn');
+    if (!token) {
+        if (errEl) {
+            errEl.textContent = 'Please enter a token';
+            errEl.style.display = 'block';
+        }
+        return;
+    }
+    if (errEl)
+        errEl.style.display = 'none';
+    if (btn) {
+        btn.disabled = true;
+        const sp = btn.querySelector('span');
+        if (sp)
+            sp.textContent = 'Saving…';
+    }
+    try {
+        const data = await api('PATCH', '/auth/github-token', { token });
+        state.user.has_github_token = data.hasToken !== undefined ? data.hasToken : true;
+        toast('GitHub token saved', 'success');
+        renderSettingsView();
+    }
+    catch (err) {
+        if (errEl) {
+            errEl.textContent = err instanceof Error ? err.message : String(err);
+            errEl.style.display = 'block';
+        }
+    }
+    finally {
+        if (btn) {
+            btn.disabled = false;
+            const sp = btn.querySelector('span');
+            if (sp)
+                sp.textContent = 'Save Token';
+        }
+    }
+}
+export function clearGitHubToken() {
+    confirmDialog('Clear GitHub Token?', 'Your GitHub integration will stop working.', async () => {
+        try {
+            const data = await api('PATCH', '/auth/github-token', { token: '' });
+            state.user.has_github_token = false;
+            toast('GitHub token cleared', 'success');
+            renderSettingsView();
+        }
+        catch (err) {
+            toast(err instanceof Error ? err.message : String(err), 'error');
+        }
+    });
+}
+//# sourceMappingURL=settings.js.map

package/public/src/views/settings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings.js","sourceRoot":"","sources":["settings.ts"],"names":[],"mappings":"AAAA,kEAAkE;AAClE,gBAAgB;AAChB,kEAAkE;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,SAAS,aAAa,CAAC,IAAY;IACjC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC;AAC/C,CAAC;AAED,SAAS,QAAQ,CAAC,IAAY;IAC5B,IAAI,IAAI,GAAG,CAAC,CAAC;IACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QAAC,IAAI,GAAG,CAAC,IAAI,GAAG,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAAC,CAAC;IACxF,MAAM,GAAG,GAAG,IAAI,GAAG,GAAG,CAAC;IACvB,OAAO,OAAO,GAAG,WAAW,CAAC;AAC/B,CAAC;AAED,MAAM,UAAU,kBAAkB;IAChC,MAAM,EAAE,GAAG,QAAQ,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;IACvD,IAAI,CAAC,EAAE;QAAE,OAAO;IAChB,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,IAAK,EAAU,CAAC;IACpC,MAAM,WAAW,GAAG,CAAC,CAAC,UAAU;QAC9B,CAAC,CAAC,qGAAqG,IAAI,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,kBAAkB,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,SAAS;QACtN,CAAC,CAAC,EAAE,CAAC;IACP,EAAE,CAAC,SAAS,GAAG;;;;;;;;;8EAS6D,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAE,CAAC,CAAC,YAAY,IAAE,GAAG,CAAC,wJAAwJ,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,IAAE,CAAC,CAAC,KAAK,IAAE,GAAG,CAAC,CAAC;;4DAEpQ,OAAO,CAAC,CAAC,CAAC,YAAY,IAAE,CAAC,CAAC,KAAK,IAAE,EAAE,CAAC;oEAC5B,OAAO,CAAC,CAAC,CAAC,KAAK,IAAE,EAAE,CAAC;;;;;sFAKF,OAAO,CAAC,CAAC,CAAC,YAAY,IAAE,CAAC,CAAC,KAAK,IAAE,EAAE,CAAC;;;;2DAI/D,OAAO,CAAC,CAAC,CAAC,KAAK,IAAE,EAAE,CAAC;cACjE,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA4Bb,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,mFAAmF,CAAC,CAAC,CAAC,0EAA0E;;;;;;;;;;;;;gGAajG,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,OAAO;;;;;;cAMpJ,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,sIAAsI,CAAC,CAAC,CAAC,EAAE;;;;WAInK,CAAC;AACZ,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,WAAW;IAC/B,MAAM,WAAW,GAAI,QAAQ,CAAC,cAAc,CAAC,uBAAuB,CAA6B,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IACvH,MAAM,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,wBAAwB,CAAuB,CAAC;IACtF,MAAM,GAAG,GAAG,QAAQ,CAAC,cAAc,CAAC,sBAAsB,CAA6B,CAAC;IACxF,IAAI,CAAC,WAAW,EAAE,CAAC;QAAC,IAAI,KAAK,EAAE,CAAC;YAAC,KAAK,CAAC,WAAW,GAAG,8BAA8B,CAAC;YAAC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QAAC,CAAC;QAAC,OAAO;IAAC,CAAC;IAC/H,IAAI,KAAK;QAAE,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IACxC,IAAI,GAAG,EAAE,CAAC;QAAC,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC;QAAC,MAAM,EAAE,GAAG,GAAG,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAAC,IAAI,EAAE;YAAE,EAAE,CAAC,WAAW,GAAG,SAAS,CAAC;IAAC,CAAC;IAC3G,IAAI,CAAC;QACH,MAAM,IAAI,GAAG,MAAM,GAAG,CAAC,OAAO,EAAC,eAAe,EAAC,EAAC,WAAW,EAAC,CAAC,CAAC;QAC9D,IAAK,IAAY,CAAC,IAAI,EAAE,CAAC;YACvB,KAAK,CAAC,IAAI,GAAG,EAAE,GAAG,KAAK,CAAC,IAAK,EAAE,GAAI,IAAY,CAAC,IAAI,EAAE,CAAC;QACzD,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,IAAK,CAAC,YAAY,GAAG,WAAW,CAAC;QACzC,CAAC;QACD,MAAM,CAAC,GAAG,KAAK,CAAC,IAAK,CAAC;QACtB,MAAM,QAAQ,GAAG,CAAC,CAAC,CAAC,YAAY,IAAE,CAAC,CAAC,KAAK,IAAE,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA,EAAE,CAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAC1G,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;QACxD,IAAI,QAAQ;YAAE,QAAQ,CAAC,WAAW,GAAG,QAAQ,CAAC;QAC9C,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAAC;QAC5D,IAAI,MAAM;YAAE,MAAM,CAAC,WAAW,GAAG,CAAC,CAAC,YAAY,IAAE,CAAC,CAAC,KAAK,CAAC;QACzD,KAAK,CAAC,eAAe,EAAC,SAAS,CAAC,CAAC;QACjC,kBAAkB,EAAE,CAAC;IACvB,CAAC;IAAC,OAAM,GAAY,EAAE,CAAC;QACrB,IAAI,KAAK,EAAE,CAAC;YAAC,KAAK,CAAC,WAAW,GAAG,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAAC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QAAC,CAAC;IACrH,CAAC;YAAS,CAAC;QACT,IAAI,GAAG,EAAE,CAAC;YAAC,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;YAAC,MAAM,EAAE,GAAG,GAAG,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAAC,IAAI,EAAE;gBAAE,EAAE,CAAC,WAAW,GAAG,cAAc,CAAC;QAAC,CAAC;IACnH,CAAC;AACH,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,cAAc;IAClC,MAAM,eAAe,GAAI,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAA6B,EAAE,KAAK,IAAI,EAAE,CAAC;IACjH,MAAM,WAAW,GAAI,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAA6B,EAAE,KAAK,IAAI,EAAE,CAAC;IACzG,MAAM,eAAe,GAAI,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAA6B,EAAE,KAAK,IAAI,EAAE,CAAC;IACjH,MAAM,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,mBAAmB,CAAuB,CAAC;IACjF,MAAM,GAAG,GAAG,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAA6B,CAAC;IACnF,IAAI,KAAK;QAAE,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IACxC,IAAI,CAAC,eAAe,IAAI,CAAC,WAAW,IAAI,CAAC,eAAe,EAAE,CAAC;QAAC,IAAI,KAAK,EAAE,CAAC;YAAC,KAAK,CAAC,WAAW,GAAG,yBAAyB,CAAC;YAAC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QAAC,CAAC;QAAC,OAAO;IAAC,CAAC;IAClK,IAAI,WAAW,KAAK,eAAe,EAAE,CAAC;QAAC,IAAI,KAAK,EAAE,CAAC;YAAC,KAAK,CAAC,WAAW,GAAG,4BAA4B,CAAC;YAAC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QAAC,CAAC;QAAC,OAAO;IAAC,CAAC;IAChJ,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAAC,IAAI,KAAK,EAAE,CAAC;YAAC,KAAK,CAAC,WAAW,GAAG,4CAA4C,CAAC;YAAC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QAAC,CAAC;QAAC,OAAO;IAAC,CAAC;IACvJ,IAAI,GAAG,EAAE,CAAC;QAAC,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC;QAAC,MAAM,EAAE,GAAG,GAAG,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAAC,IAAI,EAAE;YAAE,EAAE,CAAC,WAAW,GAAG,WAAW,CAAC;IAAC,CAAC;IAC7G,IAAI,CAAC;QACH,MAAM,GAAG,CAAC,MAAM,EAAC,uBAAuB,EAAC,EAAC,eAAe,EAAC,WAAW,EAAC,CAAC,CAAC;QACxE,KAAK,CAAC,+BAA+B,EAAC,SAAS,CAAC,CAAC;QACjD,MAAM,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAA4B,CAAC;QACxF,MAAM,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAA4B,CAAC;QACpF,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAA4B,CAAC;QACzF,IAAI,KAAK;YAAE,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;QAC5B,IAAI,KAAK;YAAE,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;QAC5B,IAAI,MAAM;YAAE,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAChC,CAAC;IAAC,OAAM,GAAY,EAAE,CAAC;QACrB,IAAI,KAAK,EAAE,CAAC;YAAC,KAAK,CAAC,WAAW,GAAG,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAAC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QAAC,CAAC;IACrH,CAAC;YAAS,CAAC;QACT,IAAI,GAAG,EAAE,CAAC;YAAC,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;YAAC,MAAM,EAAE,GAAG,GAAG,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAAC,IAAI,EAAE;gBAAE,EAAE,CAAC,WAAW,GAAG,iBAAiB,CAAC;QAAC,CAAC;IACtH,CAAC;AACH,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,eAAe;IACnC,MAAM,KAAK,GAAI,QAAQ,CAAC,cAAc,CAAC,uBAAuB,CAA6B,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IACjH,MAAM,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,uBAAuB,CAAuB,CAAC;IACrF,MAAM,GAAG,GAAG,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAA6B,CAAC;IACvF,IAAI,CAAC,KAAK,EAAE,CAAC;QAAC,IAAI,KAAK,EAAE,CAAC;YAAC,KAAK,CAAC,WAAW,GAAG,sBAAsB,CAAC;YAAC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QAAC,CAAC;QAAC,OAAO;IAAC,CAAC;IACjH,IAAI,KAAK;QAAE,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IACxC,IAAI,GAAG,EAAE,CAAC;QAAC,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC;QAAC,MAAM,EAAE,GAAG,GAAG,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAAC,IAAI,EAAE;YAAE,EAAE,CAAC,WAAW,GAAG,SAAS,CAAC;IAAC,CAAC;IAC3G,IAAI,CAAC;QACH,MAAM,IAAI,GAAG,MAAM,GAAG,CAAC,OAAO,EAAC,oBAAoB,EAAC,EAAC,KAAK,EAAC,CAAC,CAAC;QAC7D,KAAK,CAAC,IAAK,CAAC,gBAAgB,GAAI,IAAY,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAE,IAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;QACpG,KAAK,CAAC,oBAAoB,EAAC,SAAS,CAAC,CAAC;QACtC,kBAAkB,EAAE,CAAC;IACvB,CAAC;IAAC,OAAM,GAAY,EAAE,CAAC;QACrB,IAAI,KAAK,EAAE,CAAC;YAAC,KAAK,CAAC,WAAW,GAAG,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAAC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QAAC,CAAC;IACrH,CAAC;YAAS,CAAC;QACT,IAAI,GAAG,EAAE,CAAC;YAAC,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;YAAC,MAAM,EAAE,GAAG,GAAG,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAAC,IAAI,EAAE;gBAAE,EAAE,CAAC,WAAW,GAAG,YAAY,CAAC;QAAC,CAAC;IACjH,CAAC;AACH,CAAC;AAED,MAAM,UAAU,gBAAgB;IAC9B,aAAa,CAAC,qBAAqB,EAAE,4CAA4C,EAAE,KAAK,IAAI,EAAE;QAC5F,IAAI,CAAC;YACH,MAAM,IAAI,GAAG,MAAM,GAAG,CAAC,OAAO,EAAC,oBAAoB,EAAC,EAAC,KAAK,EAAC,EAAE,EAAC,CAAC,CAAC;YAChE,KAAK,CAAC,IAAK,CAAC,gBAAgB,GAAG,KAAK,CAAC;YACrC,KAAK,CAAC,sBAAsB,EAAC,SAAS,CAAC,CAAC;YACxC,kBAAkB,EAAE,CAAC;QACvB,CAAC;QAAC,OAAM,GAAY,EAAE,CAAC;YACrB,KAAK,CAAC,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAC,OAAO,CAAC,CAAC;QAClE,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC"}

package/public/src/views/settings.ts

@@ -0,0 +1,190 @@
+// ═══════════════════════════════════════════════════════════════
+// SETTINGS VIEW
+// ═══════════════════════════════════════════════════════════════
+import { state } from '../state.js';
+import { api } from '../api.js';
+import { escHtml } from '../utils.js';
+import { toast } from '../components/toast.js';
+import { confirmDialog } from '../components/modals.js';
+
+function avatarInitial(name: string): string {
+  return (name.trim()[0] || '?').toUpperCase();
+}
+
+function avatarBg(seed: string): string {
+  let hash = 0;
+  for (let i = 0; i < seed.length; i++) { hash = (hash * 31 + seed.charCodeAt(i)) >>> 0; }
+  const hue = hash % 360;
+  return `hsl(${hue},55%,45%)`;
+}
+
+export function renderSettingsView(): void {
+  const el = document.getElementById('content-settings');
+  if (!el) return;
+  const u = state.user || ({} as any);
+  const createdInfo = u.created_at
+    ? `<span style="display:block;margin-top:4px;font-size:12px;color:var(--text-muted)">Account created ${new Date(u.created_at).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</span>`
+    : '';
+  el.innerHTML = `
+    <div class="page-header">
+      <div><div class="page-title">Settings</div><div class="page-subtitle">Manage your profile and account</div></div>
+    </div>
+    <div style="max-width:560px;display:flex;flex-direction:column;gap:20px">
+      <div class="card">
+        <div class="card-header"><div class="card-title">Profile</div></div>
+        <div class="card-body">
+          <div style="display:flex;align-items:center;gap:16px;margin-bottom:20px">
+            <div style="width:64px;height:64px;border-radius:50%;background:${avatarBg(u.email||u.display_name||'?')};display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#fff;flex-shrink:0;user-select:none" aria-hidden="true">${escHtml(avatarInitial(u.display_name||u.email||'?'))}</div>
+            <div>
+              <div style="font-weight:600;font-size:16px">${escHtml(u.display_name||u.email||'')}</div>
+              <div style="font-size:13px;color:var(--text-muted)">${escHtml(u.email||'')}</div>
+            </div>
+          </div>
+          <div class="form-group">
+            <label class="form-label" for="settings-display-name">Display Name</label>
+            <input class="form-input" id="settings-display-name" type="text" value="${escHtml(u.display_name||u.email||'')}" placeholder="Your display name" aria-label="Display name">
+          </div>
+          <div class="form-group">
+            <label class="form-label">Email</label>
+            <input class="form-input" type="text" value="${escHtml(u.email||'')}" disabled style="opacity:0.6;cursor:not-allowed" aria-label="Email address (read only)">
+            ${createdInfo}
+          </div>
+          <div class="form-error" id="settings-profile-error" style="display:none" role="alert"></div>
+          <button class="btn btn-primary btn-sm" id="settings-profile-btn" onclick="window.__app.saveProfile()" aria-label="Save profile changes"><span>Save Profile</span></button>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-header"><div class="card-title">Change Password</div></div>
+        <div class="card-body">
+          <div class="form-group">
+            <label class="form-label" for="settings-current-pw">Current Password</label>
+            <input class="form-input" id="settings-current-pw" type="password" placeholder="Current password" autocomplete="current-password" aria-label="Current password">
+          </div>
+          <div class="form-group">
+            <label class="form-label" for="settings-new-pw">New Password</label>
+            <input class="form-input" id="settings-new-pw" type="password" placeholder="New password" autocomplete="new-password" aria-label="New password">
+          </div>
+          <div class="form-group">
+            <label class="form-label" for="settings-confirm-pw">Confirm New Password</label>
+            <input class="form-input" id="settings-confirm-pw" type="password" placeholder="Confirm new password" autocomplete="new-password" aria-label="Confirm new password">
+          </div>
+          <div class="form-error" id="settings-pw-error" style="display:none" role="alert"></div>
+          <button class="btn btn-primary btn-sm" id="settings-pw-btn" onclick="window.__app.changePassword()" aria-label="Change password"><span>Change Password</span></button>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-header">
+          <div class="card-title">GitHub Token</div>
+          ${u.has_github_token ? `<span style="font-size:12px;color:var(--status-closed)">✓ Token configured</span>` : `<span style="font-size:12px;color:var(--text-muted)">No token set</span>`}
+        </div>
+        <div class="card-body">
+          <div style="margin-bottom:12px;padding:10px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);font-size:12px;color:var(--text-secondary)">
+            <strong style="color:var(--text-primary)">How to get a token:</strong>
+            <ol style="margin-top:6px;padding-left:18px;line-height:1.8">
+              <li>Go to GitHub → Settings → Developer settings → Personal access tokens</li>
+              <li>Generate a new token with <code style="font-family:monospace;background:var(--bg-base);padding:0 3px;border-radius:3px">repo</code> scope</li>
+              <li>Paste the token below and click Save</li>
+            </ol>
+          </div>
+          <div class="form-group">
+            <label class="form-label" for="settings-github-token">Personal Access Token (PAT)</label>
+            <input class="form-input" id="settings-github-token" type="password" placeholder="${u.has_github_token ? 'Leave blank to keep current token' : 'ghp_…'}" autocomplete="off" aria-label="GitHub personal access token">
+            <div style="font-size:11px;color:var(--text-muted);margin-top:4px">Used for GitHub integration. Needs <code style="font-family:monospace;background:var(--bg-input);padding:0 3px;border-radius:3px">repo</code> scope.</div>
+          </div>
+          <div class="form-error" id="settings-github-error" style="display:none" role="alert"></div>
+          <div style="display:flex;gap:8px">
+            <button class="btn btn-primary btn-sm" id="settings-github-btn" onclick="window.__app.saveGitHubToken()" aria-label="Save GitHub token"><span>Save Token</span></button>
+            ${u.has_github_token ? `<button class="btn btn-danger btn-sm" onclick="window.__app.clearGitHubToken()" aria-label="Clear GitHub token">Clear Token</button>` : ''}
+          </div>
+        </div>
+      </div>
+    </div>`;
+}
+
+export async function saveProfile(): Promise<void> {
+  const displayName = (document.getElementById('settings-display-name') as HTMLInputElement | null)?.value?.trim() || '';
+  const errEl = document.getElementById('settings-profile-error') as HTMLElement | null;
+  const btn = document.getElementById('settings-profile-btn') as HTMLButtonElement | null;
+  if (!displayName) { if (errEl) { errEl.textContent = 'Display name cannot be empty'; errEl.style.display = 'block'; } return; }
+  if (errEl) errEl.style.display = 'none';
+  if (btn) { btn.disabled = true; const sp = btn.querySelector('span'); if (sp) sp.textContent = 'Saving…'; }
+  try {
+    const data = await api('PATCH','/auth/profile',{displayName});
+    if ((data as any).user) {
+      state.user = { ...state.user!, ...(data as any).user };
+    } else {
+      state.user!.display_name = displayName;
+    }
+    const u = state.user!;
+    const initials = (u.display_name||u.email||'?').split(' ').map(w=>w[0]).join('').slice(0,2).toUpperCase();
+    const avatarEl = document.getElementById('user-avatar');
+    if (avatarEl) avatarEl.textContent = initials;
+    const nameEl = document.getElementById('user-name-display');
+    if (nameEl) nameEl.textContent = u.display_name||u.email;
+    toast('Profile saved','success');
+    renderSettingsView();
+  } catch(err: unknown) {
+    if (errEl) { errEl.textContent = err instanceof Error ? err.message : String(err); errEl.style.display = 'block'; }
+  } finally {
+    if (btn) { btn.disabled = false; const sp = btn.querySelector('span'); if (sp) sp.textContent = 'Save Profile'; }
+  }
+}
+
+export async function changePassword(): Promise<void> {
+  const currentPassword = (document.getElementById('settings-current-pw') as HTMLInputElement | null)?.value || '';
+  const newPassword = (document.getElementById('settings-new-pw') as HTMLInputElement | null)?.value || '';
+  const confirmPassword = (document.getElementById('settings-confirm-pw') as HTMLInputElement | null)?.value || '';
+  const errEl = document.getElementById('settings-pw-error') as HTMLElement | null;
+  const btn = document.getElementById('settings-pw-btn') as HTMLButtonElement | null;
+  if (errEl) errEl.style.display = 'none';
+  if (!currentPassword || !newPassword || !confirmPassword) { if (errEl) { errEl.textContent = 'All fields are required'; errEl.style.display = 'block'; } return; }
+  if (newPassword !== confirmPassword) { if (errEl) { errEl.textContent = 'New passwords do not match'; errEl.style.display = 'block'; } return; }
+  if (newPassword.length < 6) { if (errEl) { errEl.textContent = 'New password must be at least 6 characters'; errEl.style.display = 'block'; } return; }
+  if (btn) { btn.disabled = true; const sp = btn.querySelector('span'); if (sp) sp.textContent = 'Changing…'; }
+  try {
+    await api('POST','/auth/change-password',{currentPassword,newPassword});
+    toast('Password changed successfully','success');
+    const curEl = document.getElementById('settings-current-pw') as HTMLInputElement | null;
+    const newEl = document.getElementById('settings-new-pw') as HTMLInputElement | null;
+    const confEl = document.getElementById('settings-confirm-pw') as HTMLInputElement | null;
+    if (curEl) curEl.value = '';
+    if (newEl) newEl.value = '';
+    if (confEl) confEl.value = '';
+  } catch(err: unknown) {
+    if (errEl) { errEl.textContent = err instanceof Error ? err.message : String(err); errEl.style.display = 'block'; }
+  } finally {
+    if (btn) { btn.disabled = false; const sp = btn.querySelector('span'); if (sp) sp.textContent = 'Change Password'; }
+  }
+}
+
+export async function saveGitHubToken(): Promise<void> {
+  const token = (document.getElementById('settings-github-token') as HTMLInputElement | null)?.value?.trim() || '';
+  const errEl = document.getElementById('settings-github-error') as HTMLElement | null;
+  const btn = document.getElementById('settings-github-btn') as HTMLButtonElement | null;
+  if (!token) { if (errEl) { errEl.textContent = 'Please enter a token'; errEl.style.display = 'block'; } return; }
+  if (errEl) errEl.style.display = 'none';
+  if (btn) { btn.disabled = true; const sp = btn.querySelector('span'); if (sp) sp.textContent = 'Saving…'; }
+  try {
+    const data = await api('PATCH','/auth/github-token',{token});
+    state.user!.has_github_token = (data as any).hasToken !== undefined ? (data as any).hasToken : true;
+    toast('GitHub token saved','success');
+    renderSettingsView();
+  } catch(err: unknown) {
+    if (errEl) { errEl.textContent = err instanceof Error ? err.message : String(err); errEl.style.display = 'block'; }
+  } finally {
+    if (btn) { btn.disabled = false; const sp = btn.querySelector('span'); if (sp) sp.textContent = 'Save Token'; }
+  }
+}
+
+export function clearGitHubToken(): void {
+  confirmDialog('Clear GitHub Token?', 'Your GitHub integration will stop working.', async () => {
+    try {
+      const data = await api('PATCH','/auth/github-token',{token:''});
+      state.user!.has_github_token = false;
+      toast('GitHub token cleared','success');
+      renderSettingsView();
+    } catch(err: unknown) {
+      toast(err instanceof Error ? err.message : String(err),'error');
+    }
+  });
+}

package/public/src/views/shared.js

@@ -0,0 +1,49 @@
+import { api } from '../api.js';
+import { escHtml } from '../utils.js';
+import { skeletonCards } from '../utils.js';
+export async function renderSharedView() {
+    const el = document.getElementById('content-shared');
+    if (!el)
+        return;
+    el.innerHTML = `
+    <div class="page-header">
+      <div><div class="page-title">Shared with Me</div><div class="page-subtitle">Projects others have shared with you</div></div>
+      <div class="page-actions"><button class="btn btn-secondary btn-sm" onclick="window.__app.renderSharedView()">↺ Refresh</button></div>
+    </div>
+    <div id="shared-content">${skeletonCards(3)}</div>`;
+    try {
+        const data = await api('GET', '/shared');
+        const projects = data.projects || [];
+        const el2 = document.getElementById('shared-content');
+        if (!el2)
+            return;
+        if (projects.length === 0) {
+            el2.innerHTML = `
+        <div class="empty-state">
+          <div class="empty-state-icon">⇄</div>
+          <div class="empty-state-text">No shared projects yet</div>
+          <div class="empty-state-sub">When someone shares a project with you, it will appear here</div>
+        </div>`;
+            return;
+        }
+        el2.innerHTML = `
+      <div class="projects-grid">
+        ${projects.map((p) => `
+          <div class="project-card" onclick="window.__app.selectProject('${p.id}')">
+            <div class="project-card-name">${escHtml(p.name)}</div>
+            <div class="project-card-slug mono">${escHtml(p.slug)}</div>
+            <div class="project-card-desc">${escHtml(p.description || 'No description')}</div>
+            <div class="project-card-meta">
+              <span class="share-perm">${escHtml(p.permission || 'view')}</span>
+              <span class="project-card-date">by ${escHtml(p.owner_display_name || p.owner_email || 'Unknown')}</span>
+            </div>
+          </div>`).join('')}
+      </div>`;
+    }
+    catch (err) {
+        const el2 = document.getElementById('shared-content');
+        if (el2)
+            el2.innerHTML = `<div class="empty-state"><div class="empty-state-text">Error: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
+    }
+}
+//# sourceMappingURL=shared.js.map

package/public/src/views/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["shared.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,KAAK,UAAU,gBAAgB;IACpC,MAAM,EAAE,GAAG,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;IACrD,IAAI,CAAC,EAAE;QAAE,OAAO;IAChB,EAAE,CAAC,SAAS,GAAG;;;;;+BAKc,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC;IACtD,IAAI,CAAC;QACH,MAAM,IAAI,GAAG,MAAM,GAAG,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;QACzC,MAAM,QAAQ,GAAI,IAAY,CAAC,QAAQ,IAAI,EAAE,CAAC;QAC9C,MAAM,GAAG,GAAG,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;QACtD,IAAI,CAAC,GAAG;YAAE,OAAO;QACjB,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC1B,GAAG,CAAC,SAAS,GAAG;;;;;eAKP,CAAC;YACV,OAAO;QACT,CAAC;QACD,GAAG,CAAC,SAAS,GAAG;;UAEV,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC;2EACwC,CAAC,CAAC,EAAE;6CAClC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;kDACV,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;6CACpB,OAAO,CAAC,CAAC,CAAC,WAAW,IAAI,gBAAgB,CAAC;;yCAE9C,OAAO,CAAC,CAAC,CAAC,UAAU,IAAI,MAAM,CAAC;mDACrB,OAAO,CAAC,CAAC,CAAC,kBAAkB,IAAI,CAAC,CAAC,WAAW,IAAI,SAAS,CAAC;;iBAE7F,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;aACd,CAAC;IACZ,CAAC;IAAC,OAAM,GAAY,EAAE,CAAC;QACrB,MAAM,GAAG,GAAG,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;QACtD,IAAI,GAAG;YAAE,GAAG,CAAC,SAAS,GAAG,iEAAiE,OAAO,CAAC,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,cAAc,CAAC;IACpK,CAAC;AACH,CAAC"}

package/public/src/views/shared.ts

@@ -0,0 +1,49 @@
+// ═══════════════════════════════════════════════════════════════
+// SHARED WITH ME VIEW
+// ═══════════════════════════════════════════════════════════════
+import { state } from '../state.js';
+import { api } from '../api.js';
+import { escHtml } from '../utils.js';
+import { skeletonCards } from '../utils.js';
+
+export async function renderSharedView(): Promise<void> {
+  const el = document.getElementById('content-shared');
+  if (!el) return;
+  el.innerHTML = `
+    <div class="page-header">
+      <div><div class="page-title">Shared with Me</div><div class="page-subtitle">Projects others have shared with you</div></div>
+      <div class="page-actions"><button class="btn btn-secondary btn-sm" onclick="window.__app.renderSharedView()">↺ Refresh</button></div>
+    </div>
+    <div id="shared-content">${skeletonCards(3)}</div>`;
+  try {
+    const data = await api('GET', '/shared');
+    const projects = (data as any).projects || [];
+    const el2 = document.getElementById('shared-content');
+    if (!el2) return;
+    if (projects.length === 0) {
+      el2.innerHTML = `
+        <div class="empty-state">
+          <div class="empty-state-icon">⇄</div>
+          <div class="empty-state-text">No shared projects yet</div>
+          <div class="empty-state-sub">When someone shares a project with you, it will appear here</div>
+        </div>`;
+      return;
+    }
+    el2.innerHTML = `
+      <div class="projects-grid">
+        ${projects.map((p: any) => `
+          <div class="project-card" onclick="window.__app.selectProject('${p.id}')">
+            <div class="project-card-name">${escHtml(p.name)}</div>
+            <div class="project-card-slug mono">${escHtml(p.slug)}</div>
+            <div class="project-card-desc">${escHtml(p.description || 'No description')}</div>
+            <div class="project-card-meta">
+              <span class="share-perm">${escHtml(p.permission || 'view')}</span>
+              <span class="project-card-date">by ${escHtml(p.owner_display_name || p.owner_email || 'Unknown')}</span>
+            </div>
+          </div>`).join('')}
+      </div>`;
+  } catch(err: unknown) {
+    const el2 = document.getElementById('shared-content');
+    if (el2) el2.innerHTML = `<div class="empty-state"><div class="empty-state-text">Error: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
+  }
+}