let5see/clawdbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #816 from clawdbot/style/account-cards-polish

Browse Source 
style: polish multi-account cards
This commit is contained in:
Peter Steinberger
2026-01-13 02:07:30 +00:00
committed by GitHub
parent 958a4fd414 357a6e340a
commit e05a8477b9
3 changed files with 90 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -12,6 +12,7 @@
- Messaging: enforce context isolation for message tool sends across providers (normalized targets + tests). (#793 — thanks @hsrvc)
- Auto-reply: re-evaluate reasoning tag enforcement on fallback providers to prevent leaked reasoning. (#810 — thanks @mcinteerj)
- Tools/Gemini: drop null-only union variants while cleaning tool schemas to avoid Cloud Code Assist schema errors. (#782 — thanks @AbhisekBasu1)
- Connections UI: polish multi-account account cards in the Connections view. (#816 — thanks @steipete)
## 2026.1.12-3

54
ui/src/styles/components.css
View File

@@ -77,6 +77,60 @@
border-bottom: none;
}
.account-count {
margin-top: 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.4px;
color: var(--muted);
}
.account-card-list {
margin-top: 16px;
display: grid;
gap: 10px;
}
.account-card {
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), transparent),
rgba(255, 255, 255, 0.03);
}
.account-card-header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
.account-card-title {
font-weight: 600;
}
.account-card-id {
font-family: var(--mono);
font-size: 12px;
color: var(--muted);
}
.account-card-status {
margin-top: 8px;
font-size: 13px;
}
.account-card-status div {
padding: 4px 0;
}
.account-card-error {
margin-top: 6px;
color: var(--danger);
font-size: 12px;
}
.label {
color: var(--muted);
font-size: 11px;

43
ui/src/ui/views/connections.ts
View File

@@ -208,6 +208,22 @@ function providerEnabled(key: ProviderKey, props: ConnectionsProps) {
}
}
function getProviderAccountCount(
key: ProviderKey,
providerAccounts?: Record<string, ProviderAccountSnapshot[]> | null,
): number {
return providerAccounts?.[key]?.length ?? 0;
}
function renderProviderAccountCount(
key: ProviderKey,
providerAccounts?: Record<string, ProviderAccountSnapshot[]> | null,
) {
const count = getProviderAccountCount(key, providerAccounts);
if (count < 2) return nothing;
return html`<div class="account-count">Accounts (${count})</div>`;
}
function renderProvider(
key: ProviderKey,
props: ConnectionsProps,
@@ -221,6 +237,10 @@ function renderProvider(
providerAccounts?: Record<string, ProviderAccountSnapshot[]> | null;
},
) {
const accountCountLabel = renderProviderAccountCount(
key,
data.providerAccounts,
);
switch (key) {
case "whatsapp": {
const whatsapp = data.whatsapp;
@@ -228,6 +248,7 @@ function renderProvider(
<div class="card">
<div class="card-title">WhatsApp</div>
<div class="card-sub">Link WhatsApp Web and monitor connection health.</div>
${accountCountLabel}
<div class="status-list" style="margin-top: 16px;">
<div>
@@ -332,12 +353,14 @@ function renderProvider(
const botUsername = probe?.bot?.username;
const label = account.name || account.accountId;
return html`
<div style="border: 1px solid var(--border); border-radius: 6px; padding: 12px; margin-bottom: 8px;">
<div style="font-weight: 500; margin-bottom: 8px;">
${botUsername ? `@${botUsername}` : label}
<span class="muted" style="font-weight: normal;">(${account.accountId})</span>
<div class="account-card">
<div class="account-card-header">
<div class="account-card-title">
${botUsername ? `@${botUsername}` : label}
</div>
<div class="account-card-id">${account.accountId}</div>
</div>
<div class="status-list" style="font-size: 13px;">
<div class="status-list account-card-status">
<div>
<span class="label">Running</span>
<span>${account.running ? "Yes" : "No"}</span>
@@ -351,7 +374,7 @@ function renderProvider(
<span>${account.lastInboundAt ? formatAgo(account.lastInboundAt) : "n/a"}</span>
</div>
${account.lastError ? html`
<div style="color: var(--danger); margin-top: 4px;">
<div class="account-card-error">
${account.lastError}
</div>
` : nothing}
@@ -364,10 +387,10 @@ function renderProvider(
<div class="card">
<div class="card-title">Telegram</div>
<div class="card-sub">Bot token and delivery options.</div>
${accountCountLabel}
${hasMultipleAccounts ? html`
<div style="margin-top: 16px; margin-bottom: 8px;">
<div style="font-weight: 500; margin-bottom: 8px; color: var(--muted);">Accounts (${telegramAccounts.length})</div>
<div class="account-card-list">
${telegramAccounts.map((account) => renderAccountCard(account))}
</div>
` : html`
@@ -562,6 +585,7 @@ function renderProvider(
<div class="card">
<div class="card-title">Discord</div>
<div class="card-sub">Bot connection and probe status.</div>
${accountCountLabel}
<div class="status-list" style="margin-top: 16px;">
<div>
@@ -1086,6 +1110,7 @@ function renderProvider(
<div class="card">
<div class="card-title">Slack</div>
<div class="card-sub">Socket mode status and bot details.</div>
${accountCountLabel}
<div class="status-list" style="margin-top: 16px;">
<div>
@@ -1467,6 +1492,7 @@ function renderProvider(
<div class="card">
<div class="card-title">Signal</div>
<div class="card-sub">REST daemon status and probe details.</div>
${accountCountLabel}
<div class="status-list" style="margin-top: 16px;">
<div>
@@ -1696,6 +1722,7 @@ function renderProvider(
<div class="card">
<div class="card-title">iMessage</div>
<div class="card-sub">imsg CLI and database availability.</div>
${accountCountLabel}
<div class="status-list" style="margin-top: 16px;">
<div>