Add Connect Desk source with gitignore for builds and secrets.
Co-authored-by: Cursor <cursoragent@cursor.com>main
sheheryarsoomro12
commit
373d15ae03
|
|
@ -0,0 +1,39 @@
|
|||
# Dependencies
|
||||
node_modules/
|
||||
|
||||
# Packaged installers and unpacked Electron builds
|
||||
dist/
|
||||
out/
|
||||
release/
|
||||
|
||||
# Logs and debug
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# OS junk
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
Desktop.ini
|
||||
|
||||
# Editor
|
||||
.idea/
|
||||
.vscode/
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
|
||||
# Env and local secrets (never commit credentials)
|
||||
.env
|
||||
.env.*
|
||||
credentials.json
|
||||
accounts.json
|
||||
*.pem
|
||||
*.p12
|
||||
*.key
|
||||
|
||||
# Electron / native
|
||||
.electron-gyp
|
||||
.cache/
|
||||
*.tsbuildinfo
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
# Distributing Connect Desk
|
||||
|
||||
The installers live in `dist/` after a build:
|
||||
|
||||
| File | Platform | Notes |
|
||||
|---|---|---|
|
||||
| `Connect Desk Setup 1.9.0.exe` | Windows 10/11 (x64) | NSIS installer — runs on any normal Intel/AMD PC, and on Windows-on-ARM via emulation |
|
||||
| `Connect Desk-1.9.0-arm64.dmg` | macOS (Apple Silicon) | Drag-to-Applications DMG |
|
||||
| `Connect Desk-1.9.0.dmg` | macOS (Intel) | Drag-to-Applications DMG |
|
||||
|
||||
Rebuild any time:
|
||||
|
||||
```sh
|
||||
npm run dist # Mac arm64 + Intel DMGs, and Windows x64 NSIS
|
||||
npm run dist:mac # both Mac DMGs
|
||||
npm run dist:win # Windows x64 installer (always --x64; this Mac is Apple Silicon)
|
||||
```
|
||||
|
||||
## What recipients do
|
||||
|
||||
**Windows:** run `Connect Desk Setup 1.9.0.exe`, pick an install folder, finish. A desktop and
|
||||
Start-menu shortcut named "Connect Desk" are created; the app lives in the chosen folder as
|
||||
`Connect Desk.exe`.
|
||||
|
||||
**macOS:** open the DMG, drag **Connect Desk** into **Applications**, launch from there.
|
||||
|
||||
Each installation starts empty: the recipient adds their accounts with **+ Add account** and signs in
|
||||
with their own Connect credentials. Nothing from your machine — no accounts, no sessions, no
|
||||
cookies — is inside the installer; only the app code ships.
|
||||
|
||||
## The unsigned-app warnings (tell recipients this up front)
|
||||
|
||||
These builds are not code-signed — there is no paid Apple Developer ID or Windows signing
|
||||
certificate behind them — so both OSes show a one-time scare prompt:
|
||||
|
||||
- **Windows SmartScreen**: "Windows protected your PC" → click **More info** → **Run anyway**.
|
||||
- **macOS Gatekeeper**: "cannot be opened because the developer cannot be verified" →
|
||||
**right-click the app → Open → Open**. Once is enough.
|
||||
|
||||
This is expected for unsigned software and does not indicate a problem with the app. If you later
|
||||
want prompt-free installs, that requires purchasing certificates: an Apple Developer ID
|
||||
(~$99/year, plus notarization) and a Windows code-signing certificate — the config is ready for
|
||||
both; only the certificates are missing.
|
||||
|
||||
## Architecture cheat sheet
|
||||
|
||||
- The build machine's CPU decides the default target. This Mac is Apple Silicon, so a plain
|
||||
`--win nsis` build silently produced an **arm64** exe that ordinary PCs cannot run — always pass
|
||||
`--x64` for Windows.
|
||||
- For an Intel-Mac DMG: `npx electron-builder --mac dmg --x64`. For one DMG that runs on both:
|
||||
`--universal` (roughly doubles the file size).
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
# Connect Desk
|
||||
|
||||
One window. Every Amazon Connect login signed in at the same time.
|
||||
|
||||
```sh
|
||||
npm start
|
||||
```
|
||||
|
||||
## The problem it solves
|
||||
|
||||
All your accounts live on the **same** Connect domain and differ only by login. A browser profile
|
||||
holds exactly one session per domain, so signing in as account B silently evicts account A — which is
|
||||
why you ended up with a separate Chrome profile per brand.
|
||||
|
||||
Connect Desk gives every account its **own session partition** (its own cookie jar). Ten accounts stay
|
||||
signed in simultaneously, side by side, in one window. Sessions persist across restarts: sign in once
|
||||
per account and stay in.
|
||||
|
||||
## Why it isn't a web page
|
||||
|
||||
Connect sends `Content-Security-Policy: frame-ancestors 'self'`, which forbids any external site from
|
||||
embedding the CCP in an iframe. Only the AWS account that *owns* the instance can allowlist an origin,
|
||||
and these instances are owned by Amazon, not by you — so a browser-based dashboard is permanently
|
||||
blocked.
|
||||
|
||||
`frame-ancestors` restricts documents embedded **in a frame**. Here each account is a **top-level
|
||||
view**, not a frame, so the rule doesn't apply. Verified: the CCP loads in each partition with zero CSP
|
||||
errors, and no AWS permission of any kind is required.
|
||||
|
||||
## The two instances
|
||||
|
||||
Accounts live on one of two Amazon Connect instances (separate directories, separate logins):
|
||||
|
||||
| Marketplaces | Instance |
|
||||
|---|---|
|
||||
| US, CA | `amazon-product-support-a67d8h.my.connect.aws/agent-app-v2` |
|
||||
| UK, DE, FR, IT, ES, NL, BE, SE | `amazon-product-support-q42kxm.my.connect.aws/agent-app-v2` |
|
||||
|
||||
Each account is assigned to an instance when you add it, shown as a **US** / **EU** chip on its row,
|
||||
and changeable from the right-click menu. The URLs are stored in `accounts.json` under `instances`
|
||||
if they ever need editing.
|
||||
|
||||
## Using it
|
||||
|
||||
- **Sidebar** lists your accounts. Click one to switch; the others keep running in the background and
|
||||
keep receiving chats (background throttling is disabled for exactly this reason).
|
||||
- **Incoming chat** is impossible to miss: a full-sidebar popup, a native OS notification (Mac and
|
||||
Windows), a beep, taskbar/Dock flash, and the app switches to the ringing account. Click the popup
|
||||
or the OS notification to jump there. This still works if you were looking at a different account.
|
||||
- **+ Add account** first asks which instance (US/CA or UK/EU) the account belongs to, creates a new
|
||||
isolated session, and drops you straight into naming it. Names also fill in automatically from the
|
||||
signed-in agent; a manual rename always wins.
|
||||
- **Right-click an account** for Rename, Set Available, Set Offline, instance selection, Reload, and
|
||||
Remove (native OS menu).
|
||||
- **Right-click in a chat** for spelling suggestions plus Cut / Copy / Paste. Spellcheck is on for
|
||||
Connect composers (US + UK English).
|
||||
- **All Available / All Offline** flip every signed-in account's status at once; a toast summarizes
|
||||
which accounts changed and which need sign-in.
|
||||
- **Sign in all / Sign out all** manage sessions in bulk. Sign-out ends each session server-side,
|
||||
wipes the account's cookies, and **pauses auto-login for that account** (otherwise saved sign-ins
|
||||
would immediately log it back in) — the dot goes grey with a "signed out" chip. Sign in all (or
|
||||
per-account right-click → Sign in) resumes auto-login. This state survives app restarts.
|
||||
|
||||
## Credentials
|
||||
|
||||
By default none are stored — each account view shows Connect's own login page and the session cookie
|
||||
stays inside that account's partition.
|
||||
|
||||
**Saved sign-ins (optional, off until you use it):** the "Saved sign-ins…" panel stores a username +
|
||||
password per account so accounts log themselves in — at startup and again whenever a session expires.
|
||||
|
||||
Each row has **Save** (store this account's credentials) and **Sign in** (save, then log this one
|
||||
account in immediately); the footer has **Save all**, **Sign in all**, and **Close**. Saving never
|
||||
signs anything in on its own — the two are separate deliberate actions. "Sign in all" works through
|
||||
the accounts **one at a time** with a gap between each, so a dozen simultaneous logins don't hit
|
||||
Amazon's auth endpoint at once.
|
||||
|
||||
How it's protected:
|
||||
|
||||
- Passwords are encrypted with the OS keychain-backed key (`safeStorage`: macOS Keychain / Windows
|
||||
DPAPI) and stored as ciphertext in `credentials.json`. Never plaintext; `accounts.json` never
|
||||
contains secrets; the file cannot be decrypted on another computer or by another OS user.
|
||||
- Credentials are released to an account's view **only** when that view is on the account's real
|
||||
Amazon login host (`<alias>.my.connect.aws` / `<alias>.awsapps.com`) — enforced in the main
|
||||
process, so no other page can request them.
|
||||
- At most 2 automatic attempts per account per 5 minutes, so a wrong password can't be hammered into
|
||||
an account lockout.
|
||||
- "forget" in the panel deletes an account's saved sign-in; removing an account does too.
|
||||
- If the form can't be filled, **nothing is submitted** and a toast says why — an empty submit would
|
||||
burn an auth attempt and push the account toward a lockout.
|
||||
|
||||
The sign-in page is a GWT app whose username box is `<input type="username" id="wdc_username">` —
|
||||
`username` is not a valid HTML input type, so the field is matched by name/id, never by type. The
|
||||
page also carries a hidden `#wdc_organization` decoy and a hidden `#wdc_mfa` second password field;
|
||||
both are deliberately skipped. If Amazon ever enables MFA on an account, auto sign-in cannot complete
|
||||
it and you'll need to sign in manually.
|
||||
|
||||
The honest trade-off: anyone using your unlocked computer session can start the app and be signed in
|
||||
— same as any password manager without a master password. Lock your machine.
|
||||
|
||||
## Known limits
|
||||
|
||||
- **One login per account, once.** AWS confirms there is no cross-account SSO without SAML federation,
|
||||
which only the instance owner can configure. This app removes the *browser juggling*, not the logins.
|
||||
- **Chat detection is best-effort.** It hooks Amazon Connect Streams (`window.connect`) in the CCP
|
||||
iframe inside Agent Workspace, and falls back to scanning the page text if Streams never appears.
|
||||
The fallback can break if Amazon restyles the CCP. Switching accounts and the sessions themselves
|
||||
are unaffected either way.
|
||||
- Ten-plus live CCPs is genuinely heavy. If it drags, remove accounts you aren't covering that day.
|
||||
|
||||
## Layout
|
||||
|
||||
| File | Role |
|
||||
|---|---|
|
||||
| `main.js` | Window, one partitioned `WebContentsView` per account, alerts, notifications |
|
||||
| `probe.js` | Main-world Streams probe (injected into the CCP page and its iframes) |
|
||||
| `preload.js` | Injected per account — relays contacts, status commands, login autofill |
|
||||
| `ui-preload.js` | IPC bridge for the sidebar |
|
||||
| `ui/` | Sidebar: account list, alerts, controls |
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,52 @@
|
|||
{
|
||||
"name": "connect-desk",
|
||||
"version": "1.9.0",
|
||||
"description": "One window for every Amazon Connect account — simultaneous sign-ins, unified chat alerts, bulk status control.",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
"start": "electron .",
|
||||
"dist:mac": "electron-builder --mac dmg --arm64 --x64",
|
||||
"dist:win": "electron-builder --win nsis --x64",
|
||||
"dist": "npm run dist:mac && npm run dist:win"
|
||||
},
|
||||
"author": "AI Team",
|
||||
"license": "UNLICENSED",
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"electron": "^43.2.0",
|
||||
"electron-builder": "^26.0.12"
|
||||
},
|
||||
"build": {
|
||||
"appId": "com.aiteam.connectdesk",
|
||||
"productName": "Connect Desk",
|
||||
"directories": {
|
||||
"buildResources": "build",
|
||||
"output": "dist"
|
||||
},
|
||||
"files": [
|
||||
"main.js",
|
||||
"preload.js",
|
||||
"probe.js",
|
||||
"ui-preload.js",
|
||||
"ui/**"
|
||||
],
|
||||
"mac": {
|
||||
"category": "public.app-category.business",
|
||||
"target": [
|
||||
"dmg"
|
||||
]
|
||||
},
|
||||
"win": {
|
||||
"target": [
|
||||
"nsis"
|
||||
]
|
||||
},
|
||||
"nsis": {
|
||||
"oneClick": false,
|
||||
"allowToChangeInstallationDirectory": true,
|
||||
"createDesktopShortcut": true,
|
||||
"createStartMenuShortcut": true,
|
||||
"shortcutName": "Connect Desk"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,193 @@
|
|||
// Injected into every account view (top page and CCP iframes). Three jobs:
|
||||
// 1. Detect the signed-in agent (name + state) and report it to main.
|
||||
// 2. Detect contacts arriving/leaving for the unified alert strip.
|
||||
// 3. Execute status commands ("go Available"/"go Offline") inside the CCP.
|
||||
//
|
||||
// The probe must run in the PAGE's main world to see `window.connect`. It is
|
||||
// injected with webFrame.executeJavaScript — NOT a <script> tag, because the
|
||||
// CCP's CSP (script-src 'self', no unsafe-inline) silently blocks injected
|
||||
// tags. webFrame.executeJavaScript is not subject to page CSP.
|
||||
//
|
||||
// Agent Workspace keeps Streams in a CCP iframe, so this preload also runs in
|
||||
// subframes (nodeIntegrationInSubFrames). Autofill stays top-frame only.
|
||||
|
||||
const { ipcRenderer, webFrame } = require("electron");
|
||||
const { probeScript } = require("./probe");
|
||||
|
||||
function inject() {
|
||||
webFrame.executeJavaScript(probeScript).catch(() => {});
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", inject, { once: true });
|
||||
} else {
|
||||
inject();
|
||||
}
|
||||
|
||||
// Relay page -> main. Same-origin iframe probes post to window.top; only the
|
||||
// top frame forwards those. Cross-origin iframes can't reach top, so they send
|
||||
// IPC themselves.
|
||||
window.addEventListener("message", (e) => {
|
||||
const d = e.data;
|
||||
if (!d || d.__cdmsg !== true) return;
|
||||
if (
|
||||
!["agent", "detection", "state", "auth", "status-result", "incoming", "gone", "reply", "accepted"].includes(
|
||||
d.type
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
if (window !== window.top) {
|
||||
try {
|
||||
void window.top.location.href; // throws if this iframe is cross-origin
|
||||
return; // same-origin: the top frame's listener will relay
|
||||
} catch {
|
||||
ipcRenderer.send("contact", d);
|
||||
return;
|
||||
}
|
||||
}
|
||||
} catch {}
|
||||
ipcRenderer.send("contact", d);
|
||||
});
|
||||
|
||||
// Relay main -> page (status commands). Forward into same-origin iframes so a
|
||||
// top-level send still reaches the CCP frame that owns window.connect.
|
||||
ipcRenderer.on("cd-set-status", (_e, kind) => {
|
||||
const msg = { __cdcmd: true, cmd: "set-status", kind };
|
||||
window.postMessage(msg, "*");
|
||||
try {
|
||||
if (window.top !== window) return;
|
||||
for (const f of document.querySelectorAll("iframe")) {
|
||||
try {
|
||||
f.contentWindow.postMessage(msg, "*");
|
||||
} catch (err) {}
|
||||
}
|
||||
} catch (err) {}
|
||||
});
|
||||
|
||||
// ---------- saved sign-in autofill ----------
|
||||
// Runs in the preload's isolated world (direct DOM access, invisible to the
|
||||
// page's scripts). Credentials come from the main process, which releases them
|
||||
// only when this view's URL is the account's real Amazon login host, at most
|
||||
// twice per 5 minutes. One attempt per page load. Iframes skip this entirely.
|
||||
(function autofill() {
|
||||
try {
|
||||
if (window !== window.top) return;
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
let done = false;
|
||||
let busy = false;
|
||||
|
||||
// Written against the real Amazon Connect sign-in markup (a GWT app):
|
||||
// <input type="text" id="wdc_organization"> visibility:hidden (decoy)
|
||||
// <input type="username" id="wdc_username"> <-- NOT a valid HTML
|
||||
// type; filtering for
|
||||
// text/email misses it
|
||||
// <input type="password" id="wdc_password">
|
||||
// <input type="password" id="wdc_mfa"> display:none
|
||||
// <button id="wdc_login_button">Sign In</button>
|
||||
|
||||
const cssHidden = (el) => {
|
||||
const c = getComputedStyle(el);
|
||||
return c.display === "none" || c.visibility === "hidden";
|
||||
};
|
||||
|
||||
const idText = (el) =>
|
||||
`${el.name || ""} ${el.id || ""} ${el.getAttribute("placeholder") || ""} ${
|
||||
el.getAttribute("aria-label") || ""
|
||||
}`;
|
||||
|
||||
// GWT and React both ignore a plain .value write: go through the native
|
||||
// setter, then fire the events either framework might be listening for.
|
||||
const setValue = (el, value) => {
|
||||
if (!el) return;
|
||||
const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
|
||||
setter.call(el, value);
|
||||
for (const type of ["input", "change", "keyup", "blur"]) {
|
||||
el.dispatchEvent(new Event(type, { bubbles: true }));
|
||||
}
|
||||
};
|
||||
|
||||
// Skip display:none password fields — #wdc_mfa is one, and grabbing it
|
||||
// instead of the real box would silently fill nothing.
|
||||
const findPassword = () =>
|
||||
[...document.querySelectorAll('input[type="password"]')].find((el) => !cssHidden(el)) || null;
|
||||
|
||||
// Identify the username box by NAME, not by type — its type is the
|
||||
// non-standard "username". Exclude by what a field can't be, then prefer one
|
||||
// named like a username, then fall back to the nearest box above the
|
||||
// password field.
|
||||
const findUsername = (pass) => {
|
||||
const NON_TEXT = new Set([
|
||||
"password", "checkbox", "radio", "hidden", "submit", "button",
|
||||
"file", "image", "reset", "range", "color",
|
||||
]);
|
||||
const cands = [...document.querySelectorAll("input")].filter(
|
||||
(el) => !NON_TEXT.has((el.getAttribute("type") || "text").toLowerCase())
|
||||
);
|
||||
const named = cands.filter((el) => /user|email|login/i.test(idText(el)));
|
||||
return (
|
||||
named.find((el) => !cssHidden(el)) || // #wdc_username
|
||||
named[0] ||
|
||||
cands
|
||||
.filter((el) => !cssHidden(el) && el.compareDocumentPosition(pass) & 4)
|
||||
.pop() ||
|
||||
cands.find((el) => !cssHidden(el)) ||
|
||||
null
|
||||
);
|
||||
};
|
||||
|
||||
const tryFill = async () => {
|
||||
if (done || busy) return done;
|
||||
const pass = findPassword();
|
||||
if (!pass) return false;
|
||||
const text = (document.body && document.body.innerText) || "";
|
||||
if (!/sign\s?in|log\s?in/i.test(text)) return false; // password box, but not a login page
|
||||
|
||||
busy = true;
|
||||
const cred = await ipcRenderer.invoke("login:request").catch(() => null);
|
||||
busy = false;
|
||||
if (done) return true;
|
||||
if (!cred) {
|
||||
done = true; // nothing saved (or rate-limited) — stop asking this load
|
||||
return true;
|
||||
}
|
||||
|
||||
done = true;
|
||||
const user = findUsername(pass);
|
||||
setValue(user, cred.username);
|
||||
setValue(pass, cred.password);
|
||||
|
||||
// Verify before submitting. A submit with an empty username burns an auth
|
||||
// attempt and moves the account toward a lockout, so report instead.
|
||||
setTimeout(() => {
|
||||
const userOk = user && user.value === cred.username;
|
||||
const passOk = pass.value === cred.password;
|
||||
if (!userOk || !passOk) {
|
||||
ipcRenderer.send("contact", {
|
||||
type: "autofill-failed",
|
||||
reason: !userOk ? "could not fill the username field" : "could not fill the password field",
|
||||
});
|
||||
return;
|
||||
}
|
||||
const btn =
|
||||
document.getElementById("wdc_login_button") ||
|
||||
document.querySelector('button[type="submit"], input[type="submit"]') ||
|
||||
[...document.querySelectorAll("button")].find((b) =>
|
||||
/sign\s?in|log\s?in/i.test(b.textContent)
|
||||
);
|
||||
if (btn) btn.click();
|
||||
else ipcRenderer.send("contact", { type: "autofill-failed", reason: "no Sign In button found" });
|
||||
}, 400);
|
||||
return true;
|
||||
};
|
||||
|
||||
// Login forms often render late — poll for a while, then give up quietly.
|
||||
const timer = setInterval(async () => {
|
||||
if (await tryFill()) clearInterval(timer);
|
||||
}, 900);
|
||||
setTimeout(() => clearInterval(timer), 45000);
|
||||
})();
|
||||
|
|
@ -0,0 +1,280 @@
|
|||
// Main-world probe injected into every account document (top page and CCP
|
||||
// iframes). Serialized with toString(), so this function must be fully
|
||||
// self-contained — no requires, no closed-over values.
|
||||
//
|
||||
// Jobs: detect the signed-in agent, detect contacts arriving/leaving, run
|
||||
// Available/Offline commands, and force spellcheck on chat composers.
|
||||
|
||||
function mainWorldProbe() {
|
||||
if (window.__cdProbe) return;
|
||||
window.__cdProbe = true;
|
||||
|
||||
const post = function (m) {
|
||||
const payload = Object.assign({ __cdmsg: true }, m);
|
||||
window.postMessage(payload, "*");
|
||||
try {
|
||||
if (window.top && window.top !== window) window.top.postMessage(payload, "*");
|
||||
} catch (e) {}
|
||||
};
|
||||
|
||||
// ---------- signed-in agent: name + auth ----------
|
||||
let namePosted = "";
|
||||
// Login-form furniture is not a name — "Remember username" once got saved as
|
||||
// an agent name because the username field's class matched the selector.
|
||||
const NOT_A_NAME = /remember|username|password|sign\s?in|log\s?in|forgot|welcome/i;
|
||||
const postName = function (n) {
|
||||
n = (n || "").trim();
|
||||
if (!n || NOT_A_NAME.test(n)) return;
|
||||
if (n !== namePosted) {
|
||||
namePosted = n;
|
||||
post({ type: "agent", name: n });
|
||||
}
|
||||
};
|
||||
|
||||
const looksLikeLogin = function () {
|
||||
const t = (document.body && document.body.innerText) || "";
|
||||
return /Please log in|Forgot Password/i.test(t) && t.length < 900;
|
||||
};
|
||||
|
||||
function scrapeName() {
|
||||
try {
|
||||
const text = (document.body && document.body.innerText) || "";
|
||||
if (looksLikeLogin()) return;
|
||||
const patterns = [
|
||||
/Welcome\s+([^\s\n][^\n]{0,60})/,
|
||||
/Signed in as\s+([^\s\n][^\n]{0,60})/i,
|
||||
/Logged in as\s+([^\s\n][^\n]{0,60})/i,
|
||||
];
|
||||
for (let i = 0; i < patterns.length; i++) {
|
||||
const m = text.match(patterns[i]);
|
||||
if (m) return postName(m[1]);
|
||||
}
|
||||
const el = document.querySelector(
|
||||
'[data-testid*="user" i],[class*="userName" i],[class*="agentName" i]'
|
||||
);
|
||||
if (el && el.textContent) postName(el.textContent);
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
// ---------- agent status control (bulk Available/Offline) ----------
|
||||
function doSetStatus(kind) {
|
||||
const c = window.connect;
|
||||
const fail = function (error) {
|
||||
post({ type: "status-result", kind: kind, ok: false, error: error });
|
||||
};
|
||||
if (!c || !c.Agent) {
|
||||
// Connect lives in the CCP iframe. Frames without Streams stay quiet so
|
||||
// a top-frame "not signed in" doesn't beat a successful iframe reply.
|
||||
// Login pages (top, no iframes, no connect) still fail fast.
|
||||
try {
|
||||
if (window !== window.top) return;
|
||||
if (document.querySelectorAll("iframe").length) return;
|
||||
} catch (e) {
|
||||
return;
|
||||
}
|
||||
return fail("not signed in");
|
||||
}
|
||||
let agent;
|
||||
try {
|
||||
agent = new c.Agent();
|
||||
} catch (e) {
|
||||
return fail("not signed in");
|
||||
}
|
||||
let target;
|
||||
try {
|
||||
const wanted = kind === "offline" ? c.AgentStateType.OFFLINE : c.AgentStateType.ROUTABLE;
|
||||
target = (agent.getAgentStates() || []).find(function (s) {
|
||||
return s.type === wanted;
|
||||
});
|
||||
} catch (e) {
|
||||
return fail("states unavailable");
|
||||
}
|
||||
if (!target) return fail("no matching state");
|
||||
try {
|
||||
agent.setState(
|
||||
target,
|
||||
{
|
||||
success: function () {
|
||||
post({ type: "status-result", kind: kind, ok: true, state: target.name });
|
||||
},
|
||||
failure: function () {
|
||||
fail("rejected by Connect");
|
||||
},
|
||||
},
|
||||
{ enqueueNextState: true }
|
||||
);
|
||||
} catch (e) {
|
||||
fail((e && e.message) || "error");
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("message", function (e) {
|
||||
const d = e.data;
|
||||
if (!d || d.__cdcmd !== true) return;
|
||||
if (d.cmd === "set-status") doSetStatus(d.kind);
|
||||
});
|
||||
|
||||
// ---------- Streams hookup ----------
|
||||
let streams = false;
|
||||
const seenContacts = {};
|
||||
|
||||
function handleContact(contact) {
|
||||
let id;
|
||||
try {
|
||||
id = contact.getContactId();
|
||||
} catch (e) {
|
||||
return;
|
||||
}
|
||||
if (!id || seenContacts[id]) return;
|
||||
seenContacts[id] = true;
|
||||
let q = "";
|
||||
try {
|
||||
q = (contact.getQueue() && contact.getQueue().name) || "";
|
||||
} catch (e) {}
|
||||
const gone = function () {
|
||||
delete seenContacts[id];
|
||||
post({ type: "gone", contactId: id });
|
||||
};
|
||||
post({ type: "incoming", contactId: id, queue: q });
|
||||
["onConnected", "onEnded", "onMissed", "onDestroy", "onAccepted"].forEach(function (ev) {
|
||||
try {
|
||||
contact[ev] && contact[ev](gone);
|
||||
} catch (e) {}
|
||||
});
|
||||
}
|
||||
|
||||
function tryStreams() {
|
||||
const c = window.connect;
|
||||
if (!c || typeof c.contact !== "function" || typeof c.agent !== "function") return false;
|
||||
|
||||
try {
|
||||
c.contact(function (contact) {
|
||||
handleContact(contact);
|
||||
});
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
|
||||
streams = true;
|
||||
|
||||
try {
|
||||
c.agent(function (agent) {
|
||||
post({ type: "auth", signedIn: true });
|
||||
try {
|
||||
postName(agent.getName && agent.getName());
|
||||
} catch (e) {}
|
||||
|
||||
let lastState = "";
|
||||
const sendState = function () {
|
||||
try {
|
||||
const s = agent.getState();
|
||||
const key = ((s && s.name) || "") + "|" + ((s && s.type) || "");
|
||||
if (key === lastState) return;
|
||||
lastState = key;
|
||||
post({ type: "state", stateName: (s && s.name) || "", stateType: (s && s.type) || "" });
|
||||
} catch (e) {}
|
||||
};
|
||||
sendState();
|
||||
try {
|
||||
agent.onStateChange(sendState);
|
||||
} catch (e) {}
|
||||
try {
|
||||
agent.onRefresh(sendState);
|
||||
} catch (e) {}
|
||||
|
||||
// Catch a chat that was already ringing before we hooked contact().
|
||||
try {
|
||||
const contacts = agent.getContacts && agent.getContacts();
|
||||
if (contacts && contacts.length) {
|
||||
for (let i = 0; i < contacts.length; i++) handleContact(contacts[i]);
|
||||
}
|
||||
} catch (e) {}
|
||||
});
|
||||
} catch (e) {}
|
||||
|
||||
post({ type: "detection", mode: "streams" });
|
||||
return true;
|
||||
}
|
||||
|
||||
setInterval(function () {
|
||||
if (!streams) tryStreams();
|
||||
}, 1000);
|
||||
tryStreams();
|
||||
|
||||
// Name + login-page detection loop. Keeps going until the name lands, because
|
||||
// sign-in can happen long after the page first loads.
|
||||
let loginPosted = false;
|
||||
const nameTimer = setInterval(function () {
|
||||
if (!streams) {
|
||||
if (looksLikeLogin()) {
|
||||
if (!loginPosted) {
|
||||
loginPosted = true;
|
||||
post({ type: "auth", signedIn: false });
|
||||
}
|
||||
} else {
|
||||
loginPosted = false;
|
||||
}
|
||||
}
|
||||
scrapeName();
|
||||
if (namePosted && streams) clearInterval(nameTimer);
|
||||
}, 2500);
|
||||
scrapeName();
|
||||
|
||||
// DOM incoming-chat watch — always on, even if Streams hooked.
|
||||
// Agent Workspace shows "Incoming chat" / "Accept chat" in the page even
|
||||
// when connect.contact() never fires. Skipping this once streams=true is
|
||||
// why the sidebar stayed on "No waiting chats" while CCP was ringing.
|
||||
const INCOMING_RE =
|
||||
/incoming chat|incoming contact|accept chat|reject chat|customer is waiting|new chat|chat request/i;
|
||||
let domSeen = false;
|
||||
const scanIncoming = function () {
|
||||
const hit = INCOMING_RE.test((document.body && document.body.innerText) || "");
|
||||
if (hit && !domSeen) {
|
||||
domSeen = true;
|
||||
post({ type: "incoming", contactId: "dom-incoming", queue: "" });
|
||||
} else if (!hit && domSeen) {
|
||||
domSeen = false;
|
||||
post({ type: "gone", contactId: "dom-incoming" });
|
||||
}
|
||||
};
|
||||
try {
|
||||
new MutationObserver(scanIncoming).observe(document.documentElement, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
} catch (e) {}
|
||||
setInterval(scanIncoming, 1500);
|
||||
scanIncoming();
|
||||
|
||||
// Extra Streams-only fallback if the SDK never appears at all (login page).
|
||||
setTimeout(function () {
|
||||
if (streams) return;
|
||||
post({ type: "detection", mode: "dom" });
|
||||
}, 20000);
|
||||
|
||||
// Connect's composer often sets spellcheck="false". Force it back on so
|
||||
// Chromium's checker and our context-menu suggestions can run.
|
||||
document.addEventListener(
|
||||
"focusin",
|
||||
function (e) {
|
||||
const t = e.target;
|
||||
if (!t) return;
|
||||
const tag = (t.tagName || "").toUpperCase();
|
||||
const type = (t.type || "").toLowerCase();
|
||||
if (type === "password" || type === "hidden") return;
|
||||
if (t.isContentEditable || tag === "TEXTAREA" || tag === "INPUT") {
|
||||
try {
|
||||
t.spellcheck = true;
|
||||
t.setAttribute("spellcheck", "true");
|
||||
} catch (err) {}
|
||||
}
|
||||
},
|
||||
true
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
mainWorldProbe,
|
||||
probeScript: `(${mainWorldProbe.toString()})();`,
|
||||
};
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
// Bridge for the sidebar. The sidebar never touches Node directly.
|
||||
|
||||
const { contextBridge, ipcRenderer } = require("electron");
|
||||
|
||||
contextBridge.exposeInMainWorld("api", {
|
||||
onState: (cb) => ipcRenderer.on("state", (_e, s) => cb(s)),
|
||||
onError: (cb) => ipcRenderer.on("account:error", (_e, e) => cb(e)),
|
||||
|
||||
getState: () => ipcRenderer.invoke("get-state"),
|
||||
activate: (id) => ipcRenderer.invoke("activate", id),
|
||||
reload: (id) => ipcRenderer.invoke("reload", id),
|
||||
addAccount: (instanceId) => ipcRenderer.invoke("add-account", instanceId),
|
||||
removeAccount: (id) => ipcRenderer.invoke("remove-account", id),
|
||||
renameAccount: (id, label) => ipcRenderer.invoke("rename-account", { id, label }),
|
||||
setAccountInstance: (id, instanceId) =>
|
||||
ipcRenderer.invoke("set-account-instance", { id, instanceId }),
|
||||
focusAlert: (accountId) => ipcRenderer.invoke("focus-alert", accountId),
|
||||
signIn: (id) => ipcRenderer.invoke("signin", id),
|
||||
signOut: (id) => ipcRenderer.invoke("signout", id),
|
||||
signInAll: () => ipcRenderer.invoke("signin-all"),
|
||||
signOutAll: () => ipcRenderer.invoke("signout-all"),
|
||||
credsList: () => ipcRenderer.invoke("creds:list"),
|
||||
credsSave: (entries, opts) => ipcRenderer.invoke("creds:save", entries, opts),
|
||||
setStatus: (id, kind) => ipcRenderer.invoke("set-status", { id, kind }),
|
||||
setStatusAll: (kind) => ipcRenderer.invoke("set-status-all", kind),
|
||||
onToast: (cb) => ipcRenderer.on("toast", (_e, t) => cb(t)),
|
||||
onMenuAction: (cb) => ipcRenderer.on("menu:action", (_e, a) => cb(a)),
|
||||
showAccountMenu: (id) => ipcRenderer.send("show-account-menu", id),
|
||||
showInstanceMenu: () => ipcRenderer.invoke("show-instance-menu"),
|
||||
});
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Connect Desk</h1>
|
||||
<div id="instance" title="The Connect instances accounts can use"></div>
|
||||
</header>
|
||||
|
||||
<section id="alerts">
|
||||
<div class="empty">No waiting chats</div>
|
||||
</section>
|
||||
|
||||
<nav id="accounts"></nav>
|
||||
|
||||
<footer>
|
||||
<div id="bulk-label">All accounts</div>
|
||||
<div id="bulk" role="group" aria-label="Set status for all accounts">
|
||||
<button id="all-available" type="button" title="Set every signed-in account to Available">
|
||||
<span class="bdot av"></span>Available
|
||||
</button>
|
||||
<button id="all-offline" type="button" title="Set every signed-in account to Offline">
|
||||
<span class="bdot off"></span>Offline
|
||||
</button>
|
||||
</div>
|
||||
<div id="bulk2" role="group" aria-label="Sessions for all accounts">
|
||||
<button id="all-signin" type="button" title="Sign every account in with its saved credentials">
|
||||
Sign in all
|
||||
</button>
|
||||
<button id="all-signout" type="button" title="Sign every account out and pause auto-login">
|
||||
Sign out all
|
||||
</button>
|
||||
</div>
|
||||
<button id="add" type="button">+ Add account</button>
|
||||
<button id="signins" type="button">Saved sign-ins…</button>
|
||||
<div id="hint">
|
||||
Right-click an account for rename, status, and instance. Adding an account first asks which
|
||||
instance (US/CA or UK/EU) it belongs to.
|
||||
</div>
|
||||
<div id="credit">Developed by AI Team</div>
|
||||
</footer>
|
||||
|
||||
<div id="incoming-pop" hidden>
|
||||
<div class="incoming-pop-card">
|
||||
<div class="incoming-pop-kicker">Incoming chat</div>
|
||||
<div id="incoming-pop-name"></div>
|
||||
<button type="button" id="incoming-pop-go">Open account</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="toast" hidden></div>
|
||||
<div id="creds" hidden></div>
|
||||
|
||||
<script src="ui.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,586 @@
|
|||
:root {
|
||||
--bg: #14171a;
|
||||
--surface: #1b1f24;
|
||||
--surface-2: #222831;
|
||||
--line: #2c333d;
|
||||
--text: #e6edf3;
|
||||
--muted: #8b98a5;
|
||||
--accent: #4493f8;
|
||||
--ok: #3fb950;
|
||||
--warn: #d29922;
|
||||
--err: #f85149;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr auto;
|
||||
/* One column, hard-capped at the body's width. Without this the implicit
|
||||
column sizes to max-content — the nowrap instance URL once blew it out to
|
||||
~390px inside a 268px view, pushing the right side of every row and the
|
||||
second footer button past the visible edge. */
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
user-select: none;
|
||||
overflow-y: hidden;
|
||||
/* clip, not hidden: hidden containers can still be scrolled programmatically
|
||||
(e.g. by focusing the rename input), which shoved the whole sidebar
|
||||
sideways. clip forbids scrolling entirely. */
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
header,
|
||||
#alerts,
|
||||
#accounts,
|
||||
footer {
|
||||
overflow-x: clip;
|
||||
min-width: 0; /* grid items may never dictate the column width */
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 14px 14px 10px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 3px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#instance {
|
||||
font: 10px ui-monospace, monospace;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
#instance:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* --- unified alerts --- */
|
||||
#alerts {
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
max-height: 190px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#alerts .empty {
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 7px 9px;
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 6px;
|
||||
background: #12283f;
|
||||
cursor: pointer;
|
||||
animation: pulse 1.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.alert:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.alert b {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.alert span {
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
50% {
|
||||
border-color: #7cc0ff;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- accounts --- */
|
||||
#accounts {
|
||||
padding: 8px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.acct {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 9px;
|
||||
margin-bottom: 3px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.acct:hover {
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
.acct.active {
|
||||
background: var(--surface-2);
|
||||
border-color: var(--line);
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--muted);
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.dot.loading {
|
||||
background: var(--warn);
|
||||
}
|
||||
.dot.ready {
|
||||
background: var(--ok);
|
||||
}
|
||||
.dot.err {
|
||||
background: var(--err);
|
||||
}
|
||||
.dot.off {
|
||||
background: #566270;
|
||||
}
|
||||
|
||||
.acct .state {
|
||||
flex: none;
|
||||
font-size: 10px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* which Connect instance the account lives on */
|
||||
.acct .inst {
|
||||
flex: none;
|
||||
padding: 1px 5px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 4px;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.4px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.acct:hover .inst {
|
||||
display: none; /* make room for the tool buttons */
|
||||
}
|
||||
|
||||
.acct:hover .state {
|
||||
display: none; /* make room for the tool buttons */
|
||||
}
|
||||
|
||||
.acct .label {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.acct .label.placeholder {
|
||||
color: var(--muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.rename {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 3px 6px;
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 4px;
|
||||
background: #0d1117;
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.acct .badge {
|
||||
min-width: 17px;
|
||||
padding: 0 5px;
|
||||
border-radius: 9px;
|
||||
background: var(--accent);
|
||||
color: #06101d;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.acct .tools {
|
||||
display: none;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.acct:hover .tools {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.acct .tools button {
|
||||
border: 0;
|
||||
background: none;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
padding: 0 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.acct .tools button:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* --- footer --- */
|
||||
footer {
|
||||
padding: 10px;
|
||||
border-top: 1px solid var(--line);
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
footer button {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
#bulk-label {
|
||||
margin-bottom: 5px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.4px;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
#bulk,
|
||||
#bulk2 {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* appearance:none everywhere — if a button ever loses its styling it must
|
||||
degrade to a dark rectangle, never a white UA-default widget. */
|
||||
#bulk button,
|
||||
#bulk2 button,
|
||||
#add,
|
||||
#signins {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
background: var(--surface-2);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#bulk button {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
white-space: nowrap;
|
||||
padding: 7px 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#bulk button:hover,
|
||||
#bulk2 button:hover,
|
||||
#add:hover,
|
||||
#signins:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
#bulk button:active,
|
||||
#bulk2 button:active,
|
||||
#add:active,
|
||||
#signins:active {
|
||||
background: #2a313b;
|
||||
}
|
||||
|
||||
#bulk2 button {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
padding: 6px 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#signins {
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.bdot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.bdot.av {
|
||||
background: var(--ok);
|
||||
}
|
||||
|
||||
.bdot.off {
|
||||
background: #566270;
|
||||
}
|
||||
|
||||
#add {
|
||||
width: 100%;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
#hint {
|
||||
margin-top: 8px;
|
||||
font-size: 10px;
|
||||
line-height: 1.45;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
#credit {
|
||||
margin-top: 10px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid var(--line);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.3px;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* --- toast --- */
|
||||
#toast {
|
||||
position: fixed;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
z-index: 40;
|
||||
padding: 8px 10px;
|
||||
background: #0d1117;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
#toast[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#incoming-pop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 60;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
background: rgba(8, 10, 12, 0.82);
|
||||
}
|
||||
|
||||
#incoming-pop[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.incoming-pop-card {
|
||||
width: 100%;
|
||||
padding: 16px 14px 14px;
|
||||
border: 2px solid #3fb950;
|
||||
border-radius: 10px;
|
||||
background: #12283f;
|
||||
text-align: center;
|
||||
animation: pulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.incoming-pop-kicker {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.8px;
|
||||
text-transform: uppercase;
|
||||
color: #7ee787;
|
||||
}
|
||||
|
||||
#incoming-pop-name {
|
||||
margin: 8px 0 14px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
#incoming-pop-go {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: #3fb950;
|
||||
color: #0d1117;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* --- saved sign-ins panel --- */
|
||||
#creds {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 50;
|
||||
overflow-y: auto;
|
||||
overflow-x: clip;
|
||||
padding: 14px;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
#creds[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.creds-head {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.creds-note {
|
||||
font-size: 10px;
|
||||
line-height: 1.5;
|
||||
color: var(--muted);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.creds-row {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.creds-row.cleared {
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.creds-name {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.creds-line {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.creds-line .rename {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* per-account action bar */
|
||||
.creds-rowbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.creds-rowbar button {
|
||||
appearance: none;
|
||||
padding: 3px 9px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 5px;
|
||||
background: var(--surface-2);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.creds-rowbar button:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.creds-rowbar button.primary {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent);
|
||||
color: #06101d;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.creds-status {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 10px;
|
||||
color: var(--ok);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.creds-forget {
|
||||
flex: none;
|
||||
border: 0;
|
||||
background: none;
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.creds-forget:hover {
|
||||
color: var(--err);
|
||||
}
|
||||
|
||||
.creds-row.cleared .creds-forget {
|
||||
color: var(--err);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.creds-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-top: 16px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.creds-actions button {
|
||||
appearance: none;
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
padding: 8px 4px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
background: var(--surface-2);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.creds-actions button:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.creds-actions button.primary {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent);
|
||||
color: #06101d;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -0,0 +1,436 @@
|
|||
const $alerts = document.getElementById("alerts");
|
||||
const $accounts = document.getElementById("accounts");
|
||||
const $instance = document.getElementById("instance");
|
||||
const $toast = document.getElementById("toast");
|
||||
const $incomingPop = document.getElementById("incoming-pop");
|
||||
const $incomingPopName = document.getElementById("incoming-pop-name");
|
||||
const $incomingPopGo = document.getElementById("incoming-pop-go");
|
||||
|
||||
// Electron has no window.prompt(), so renames happen through an inline input.
|
||||
// `editing` survives re-renders so the field isn't wiped mid-typing.
|
||||
let editing = null;
|
||||
let lastState = { accounts: [], alerts: [] };
|
||||
|
||||
// Belt & braces alongside overflow-x:clip — nothing may ever scroll the
|
||||
// sidebar sideways (a focused input once did, which clipped all content).
|
||||
function resetScroll() {
|
||||
for (const el of [document.scrollingElement, document.body, $accounts]) {
|
||||
if (el && el.scrollLeft) el.scrollLeft = 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------- alerts ---------------- */
|
||||
|
||||
function renderAlerts(alerts) {
|
||||
$alerts.innerHTML = "";
|
||||
if (!alerts.length) {
|
||||
const e = document.createElement("div");
|
||||
e.className = "empty";
|
||||
e.textContent = "No waiting chats";
|
||||
$alerts.append(e);
|
||||
return;
|
||||
}
|
||||
for (const a of alerts) {
|
||||
const el = document.createElement("div");
|
||||
el.className = "alert";
|
||||
const b = document.createElement("b");
|
||||
b.textContent = a.label;
|
||||
const s = document.createElement("span");
|
||||
s.textContent = a.kind === "reply" ? a.text || "New message" : a.queue || "waiting";
|
||||
el.append(b, s);
|
||||
el.onclick = () => api.focusAlert(a.accountId);
|
||||
$alerts.append(el);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------- rename editor ---------------- */
|
||||
|
||||
function startEdit(id) {
|
||||
editing = id;
|
||||
render(lastState);
|
||||
}
|
||||
|
||||
function commitEdit(id, value) {
|
||||
if (editing !== id) return;
|
||||
editing = null;
|
||||
api.renameAccount(id, value);
|
||||
}
|
||||
|
||||
// Native popups (Chromium autofill, macOS spelling/substitution) anchor to text
|
||||
// inputs and float OVER the window — an orphaned one is what once appeared as a
|
||||
// white box across the footer. Disable everything that can summon one.
|
||||
function plainInput() {
|
||||
const input = document.createElement("input");
|
||||
input.autocomplete = "off";
|
||||
input.spellcheck = false;
|
||||
input.setAttribute("autocapitalize", "off");
|
||||
input.setAttribute("autocorrect", "off");
|
||||
return input;
|
||||
}
|
||||
|
||||
function buildEditor(a) {
|
||||
const input = plainInput();
|
||||
input.className = "rename";
|
||||
input.value = a.label || a.agentName || "";
|
||||
input.placeholder = a.agentName || "Account name";
|
||||
input.onclick = (e) => e.stopPropagation();
|
||||
input.onkeydown = (e) => {
|
||||
e.stopPropagation();
|
||||
if (e.key === "Enter") commitEdit(a.id, input.value);
|
||||
if (e.key === "Escape") {
|
||||
editing = null;
|
||||
render(lastState);
|
||||
}
|
||||
};
|
||||
input.onblur = () => commitEdit(a.id, input.value);
|
||||
setTimeout(() => {
|
||||
input.focus({ preventScroll: true }); // focus scrolling is what broke alignment
|
||||
input.select();
|
||||
resetScroll();
|
||||
}, 0);
|
||||
return input;
|
||||
}
|
||||
|
||||
/* ---------------- account rows ---------------- */
|
||||
|
||||
function dotClass(a) {
|
||||
if (a.loading) return "dot loading";
|
||||
if (a.stayOut && a.signedIn !== true) return "dot off"; // deliberate sign-out, not an error
|
||||
if (a.signedIn === false) return "dot err";
|
||||
if (a.stateType === "routable") return "dot ready";
|
||||
if (a.stateType === "offline") return "dot off";
|
||||
if (a.agentName) return "dot ready";
|
||||
return "dot";
|
||||
}
|
||||
|
||||
function stateText(a) {
|
||||
if (a.stayOut && a.signedIn !== true) return "signed out";
|
||||
if (a.signedIn === false) return "sign in";
|
||||
return a.stateName || "";
|
||||
}
|
||||
|
||||
function buildRow(a, activeId) {
|
||||
const el = document.createElement("div");
|
||||
el.className = "acct" + (a.id === activeId ? " active" : "");
|
||||
el.onclick = () => api.activate(a.id);
|
||||
el.oncontextmenu = (e) => {
|
||||
e.preventDefault();
|
||||
api.showAccountMenu(a.id);
|
||||
};
|
||||
|
||||
const dot = document.createElement("span");
|
||||
dot.className = dotClass(a);
|
||||
el.append(dot);
|
||||
|
||||
if (editing === a.id) {
|
||||
el.append(buildEditor(a));
|
||||
return el;
|
||||
}
|
||||
|
||||
const label = document.createElement("span");
|
||||
label.className = "label";
|
||||
label.textContent = a.display;
|
||||
if (!a.label && !a.agentName) label.classList.add("placeholder");
|
||||
label.title =
|
||||
(a.agentName ? `Signed in as ${a.agentName}` : "Not signed in yet") +
|
||||
` — ${a.instanceLabel || ""}`;
|
||||
label.ondblclick = (e) => {
|
||||
e.stopPropagation();
|
||||
startEdit(a.id);
|
||||
};
|
||||
el.append(label);
|
||||
|
||||
// Which Connect instance this account lives on (US / EU).
|
||||
if (a.instanceShort) {
|
||||
const inst = document.createElement("span");
|
||||
inst.className = "inst";
|
||||
inst.textContent = a.instanceShort;
|
||||
inst.title = a.instanceLabel;
|
||||
el.append(inst);
|
||||
}
|
||||
|
||||
const st = stateText(a);
|
||||
if (st) {
|
||||
const chip = document.createElement("span");
|
||||
chip.className = "state";
|
||||
chip.textContent = st;
|
||||
el.append(chip);
|
||||
}
|
||||
|
||||
if (a.waiting) {
|
||||
const badge = document.createElement("span");
|
||||
badge.className = "badge";
|
||||
badge.textContent = a.waiting;
|
||||
el.append(badge);
|
||||
}
|
||||
|
||||
const tools = document.createElement("span");
|
||||
tools.className = "tools";
|
||||
for (const [glyph, title, fn] of [
|
||||
["✎", "Rename", () => startEdit(a.id)],
|
||||
["⟳", "Reload", () => api.reload(a.id)],
|
||||
["✕", "Remove account", () => api.removeAccount(a.id)],
|
||||
]) {
|
||||
const b = document.createElement("button");
|
||||
b.textContent = glyph;
|
||||
b.title = title;
|
||||
b.onclick = (e) => {
|
||||
e.stopPropagation();
|
||||
fn();
|
||||
};
|
||||
tools.append(b);
|
||||
}
|
||||
el.append(tools);
|
||||
return el;
|
||||
}
|
||||
|
||||
/* ---------------- render ---------------- */
|
||||
|
||||
function renderIncomingPop(alerts) {
|
||||
const waiting = (alerts || []).filter((a) => a.kind !== "reply");
|
||||
if (!waiting.length) {
|
||||
$incomingPop.hidden = true;
|
||||
$incomingPopGo.onclick = null;
|
||||
return;
|
||||
}
|
||||
$incomingPop.hidden = false;
|
||||
$incomingPopName.textContent = waiting.map((a) => a.label).join(" · ");
|
||||
$incomingPopGo.onclick = (e) => {
|
||||
e.stopPropagation();
|
||||
api.focusAlert(waiting[0].accountId);
|
||||
};
|
||||
}
|
||||
|
||||
function render(state) {
|
||||
lastState = state;
|
||||
$instance.textContent = (state.instances || []).map((i) => i.label).join(" · ");
|
||||
renderAlerts(state.alerts);
|
||||
renderIncomingPop(state.alerts);
|
||||
$accounts.innerHTML = "";
|
||||
for (const a of state.accounts) $accounts.append(buildRow(a, state.activeId));
|
||||
resetScroll();
|
||||
}
|
||||
|
||||
api.onState(render);
|
||||
api.onError(({ message }) => console.warn("account error:", message));
|
||||
api.onMenuAction((a) => {
|
||||
if (a.type === "rename") startEdit(a.id);
|
||||
if (a.type === "creds") openCreds();
|
||||
});
|
||||
|
||||
/* ---------------- toast ---------------- */
|
||||
|
||||
let toastTimer;
|
||||
api.onToast(({ text }) => {
|
||||
$toast.textContent = text;
|
||||
$toast.hidden = false;
|
||||
clearTimeout(toastTimer);
|
||||
toastTimer = setTimeout(() => ($toast.hidden = true), 6000);
|
||||
});
|
||||
|
||||
/* ---------------- top-level controls ---------------- */
|
||||
|
||||
// Every account belongs to one Connect instance, so adding starts by picking
|
||||
// which one — then straight into naming, as before.
|
||||
const $add = document.getElementById("add");
|
||||
$add.onclick = async (e) => {
|
||||
e.stopPropagation();
|
||||
const instances = lastState.instances || [];
|
||||
const create = async (instId) => {
|
||||
const id = await api.addAccount(instId);
|
||||
if (id) startEdit(id);
|
||||
};
|
||||
if (instances.length <= 1) return void create(instances[0]?.id);
|
||||
const instId = await api.showInstanceMenu();
|
||||
if (instId) create(instId);
|
||||
};
|
||||
|
||||
document.getElementById("all-available").onclick = () => api.setStatusAll("routable");
|
||||
document.getElementById("all-offline").onclick = () => api.setStatusAll("offline");
|
||||
document.getElementById("all-signin").onclick = () => api.signInAll();
|
||||
document.getElementById("all-signout").onclick = () => api.signOutAll();
|
||||
|
||||
/* ---------------- saved sign-ins panel ---------------- */
|
||||
|
||||
const $creds = document.getElementById("creds");
|
||||
|
||||
function closeCreds() {
|
||||
$creds.hidden = true;
|
||||
$creds.innerHTML = ""; // never leave typed passwords sitting in the DOM
|
||||
}
|
||||
|
||||
function showToast(text, ms = 6000) {
|
||||
$toast.textContent = text;
|
||||
$toast.hidden = false;
|
||||
clearTimeout(toastTimer);
|
||||
toastTimer = setTimeout(() => ($toast.hidden = true), ms);
|
||||
}
|
||||
|
||||
async function openCreds() {
|
||||
const rows = await api.credsList();
|
||||
$creds.innerHTML = "";
|
||||
|
||||
const head = document.createElement("div");
|
||||
head.className = "creds-head";
|
||||
head.textContent = "Saved sign-ins";
|
||||
const note = document.createElement("div");
|
||||
note.className = "creds-note";
|
||||
note.textContent =
|
||||
"Stored encrypted on this computer only (OS keychain). Filled only on the official " +
|
||||
"Amazon Connect sign-in page for each account's instance. Leave a password blank to keep " +
|
||||
"the one already saved.";
|
||||
$creds.append(head, note);
|
||||
|
||||
const cleared = new Set();
|
||||
const inputs = new Map(); // id -> {u, p, status}
|
||||
|
||||
// Collects one row (or every row) into the shape creds:save expects.
|
||||
const entryFor = (id) => {
|
||||
const { u, p } = inputs.get(id);
|
||||
return { id, username: u.value, password: p.value || null, clear: cleared.has(id) };
|
||||
};
|
||||
const allEntries = () => [...inputs.keys()].map(entryFor);
|
||||
|
||||
const flash = (id, text) => {
|
||||
const s = inputs.get(id)?.status;
|
||||
if (!s) return;
|
||||
s.textContent = text;
|
||||
clearTimeout(s._t);
|
||||
s._t = setTimeout(() => (s.textContent = ""), 4000);
|
||||
};
|
||||
|
||||
// After saving, the password box is empty again but a secret now exists —
|
||||
// reflect that so the row doesn't look unsaved.
|
||||
const markSaved = (id) => {
|
||||
const { p } = inputs.get(id);
|
||||
p.value = "";
|
||||
p.placeholder = "•••••• saved — blank keeps it";
|
||||
};
|
||||
|
||||
const saveOne = async (id) => {
|
||||
const res = await api.credsSave([entryFor(id)]);
|
||||
if (!res?.ok) return showToast(res?.error || "Saving failed.", 8000);
|
||||
if (cleared.has(id)) {
|
||||
cleared.delete(id);
|
||||
inputs.get(id).row.classList.remove("cleared");
|
||||
inputs.get(id).p.placeholder = "password";
|
||||
flash(id, "forgotten");
|
||||
} else {
|
||||
markSaved(id);
|
||||
flash(id, "saved ✓");
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
for (const r of rows) {
|
||||
const row = document.createElement("div");
|
||||
row.className = "creds-row";
|
||||
|
||||
const name = document.createElement("div");
|
||||
name.className = "creds-name";
|
||||
name.textContent = `${r.display} · ${r.instanceShort}`;
|
||||
|
||||
const u = plainInput();
|
||||
u.className = "rename";
|
||||
u.placeholder = "login username / email";
|
||||
u.value = r.username;
|
||||
|
||||
const p = plainInput();
|
||||
p.className = "rename";
|
||||
p.type = "password";
|
||||
p.placeholder = r.hasPassword ? "•••••• saved — blank keeps it" : "password";
|
||||
|
||||
const bar = document.createElement("div");
|
||||
bar.className = "creds-rowbar";
|
||||
|
||||
const bSave = document.createElement("button");
|
||||
bSave.type = "button";
|
||||
bSave.textContent = "Save";
|
||||
bSave.title = "Save this account's sign-in";
|
||||
bSave.onclick = () => saveOne(r.id);
|
||||
|
||||
const bSignIn = document.createElement("button");
|
||||
bSignIn.type = "button";
|
||||
bSignIn.className = "primary";
|
||||
bSignIn.textContent = "Sign in";
|
||||
bSignIn.title = "Save, then sign this account in with these credentials";
|
||||
bSignIn.onclick = async () => {
|
||||
if (!(await saveOne(r.id))) return;
|
||||
flash(r.id, "signing in…");
|
||||
api.signIn(r.id);
|
||||
};
|
||||
|
||||
const forget = document.createElement("button");
|
||||
forget.type = "button";
|
||||
forget.className = "creds-forget";
|
||||
forget.textContent = "forget";
|
||||
forget.title = "Mark this saved sign-in for deletion, then Save";
|
||||
forget.onclick = () => {
|
||||
if (cleared.has(r.id)) {
|
||||
cleared.delete(r.id);
|
||||
row.classList.remove("cleared");
|
||||
} else {
|
||||
cleared.add(r.id);
|
||||
row.classList.add("cleared");
|
||||
}
|
||||
};
|
||||
|
||||
const status = document.createElement("span");
|
||||
status.className = "creds-status";
|
||||
|
||||
bar.append(bSave, bSignIn, status, forget);
|
||||
|
||||
inputs.set(r.id, { u, p, status, row });
|
||||
const line = document.createElement("div");
|
||||
line.className = "creds-line";
|
||||
line.append(u, p);
|
||||
row.append(name, line, bar);
|
||||
$creds.append(row);
|
||||
}
|
||||
|
||||
const actions = document.createElement("div");
|
||||
actions.className = "creds-actions";
|
||||
|
||||
const saveAll = document.createElement("button");
|
||||
saveAll.type = "button";
|
||||
saveAll.textContent = "Save all";
|
||||
saveAll.onclick = async () => {
|
||||
const res = await api.credsSave(allEntries());
|
||||
if (!res?.ok) return showToast(res?.error || "Saving failed.", 8000);
|
||||
for (const id of inputs.keys()) {
|
||||
if (cleared.has(id)) continue;
|
||||
markSaved(id);
|
||||
}
|
||||
cleared.clear();
|
||||
for (const { row } of inputs.values()) row.classList.remove("cleared");
|
||||
showToast(`Saved sign-ins for ${res.saved} account(s).`);
|
||||
};
|
||||
|
||||
const signInAll = document.createElement("button");
|
||||
signInAll.type = "button";
|
||||
signInAll.className = "primary";
|
||||
signInAll.textContent = "Sign in all";
|
||||
signInAll.onclick = async () => {
|
||||
const res = await api.credsSave(allEntries());
|
||||
if (!res?.ok) return showToast(res?.error || "Saving failed.", 8000);
|
||||
closeCreds();
|
||||
api.signInAll();
|
||||
};
|
||||
|
||||
const close = document.createElement("button");
|
||||
close.type = "button";
|
||||
close.textContent = "Close";
|
||||
close.onclick = closeCreds;
|
||||
|
||||
actions.append(saveAll, signInAll, close);
|
||||
$creds.append(actions);
|
||||
|
||||
$creds.hidden = false;
|
||||
}
|
||||
|
||||
document.getElementById("signins").onclick = openCreds;
|
||||
addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape" && !$creds.hidden) closeCreds();
|
||||
});
|
||||
|
||||
api.getState();
|
||||
Loading…
Reference in New Issue