scriptoriumadmin/openpetswithchatandmcp
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

fix: keep integration cards compact

Browse source
This commit is contained in:
Alvin Unreal 2026-05-10 15:08:26 +02:00
parent 332ebdae97
commit 239654fe61
2 changed files with 6 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
apps/desktop/preload.cjs
View file

@ -224,14 +224,10 @@ function updateOpenCodeIntegration(snapshot, selected) {
const opencode = snapshot.opencodeStatus;
const preview = snapshot.opencodePreview;
if (!opencode || !preview) return;
const card = document.querySelector('[data-integration-card="opencode"]');
if (card instanceof HTMLElement) card.classList.toggle("needs-attention", opencode.state === "not_detected" || opencode.state === "error");
const summary = document.getElementById("integration-opencode-summary");
if (summary) summary.textContent = integrationSummaryFor("OpenCode", opencode.state, opencode.details, snapshot.commandPaths.opencode);
const cardStatus = document.getElementById("integration-opencode-status");
if (cardStatus) {
cardStatus.textContent = opencode.label;
cardStatus.className = `agent-status-pill ${statusClassFor(opencode.state)}`;
cardStatus.className = `agent-status-pill ${cardStatusClassFor(opencode.state)}`;
}
const installCard = document.getElementById("integration-opencode-install");
if (installCard instanceof HTMLButtonElement) {
@ -273,14 +269,10 @@ function updateOpenCodeIntegration(snapshot, selected) {
}
function updateClaudeIntegrationCard(snapshot) {
const card = document.querySelector('[data-integration-card="claude"]');
if (card instanceof HTMLElement) card.classList.toggle("needs-attention", snapshot.status.state === "not_detected" || snapshot.status.state === "error");
const summary = document.getElementById("integration-claude-summary");
if (summary) summary.textContent = integrationSummaryFor("Claude Code", snapshot.status.state, snapshot.status.details, snapshot.commandPaths.claude);
const status = document.getElementById("integration-claude-status");
if (status) {
status.textContent = snapshot.status.state === "configured" ? "Installed" : snapshot.status.canConfigure ? "Ready" : snapshot.status.label;
status.className = `agent-status-pill ${statusClassFor(snapshot.status.state)}`;
status.className = `agent-status-pill ${cardStatusClassFor(snapshot.status.state)}`;
}
const install = document.getElementById("integration-claude-install");
@ -310,11 +302,9 @@ function updateClaudeIntegrationCard(snapshot) {
}
}
function integrationSummaryFor(label, state, details, overridePath) {
if (state === "not_detected") return overridePath ? `${label} was not found at the saved path. Open Configure to update it.` : `${label} was not found. Open Configure to paste the full command path.`;
if (state === "error") return details || `${label} needs attention. Open Configure for details.`;
if (state === "configured") return `${label} is connected to OpenPets.`;
return details || `${label} is ready to configure.`;
function cardStatusClassFor(state) {
if (state === "not_detected" || state === "error") return "error";
return statusClassFor(state);
}
function bindIntegrationHubButtons(snapshot, select) {

6
apps/desktop/src/windows.ts
View file

@ -515,7 +515,6 @@ function createAgentSetupHtml(definition: TaskWindowDefinition): string {
</div>
<h2>Claude Code</h2>
<p>Connect Claude Code to your OpenPets companion.</p>
<p id="integration-claude-summary" class="integration-summary">Checking Claude Code…</p>
<div class="integration-actions stacked">
<button id="integration-claude-install" class="agent-action primary" disabled data-loading="true">
<svg class="pm-button-icon" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false"><path d="M12 3a9 9 0 1 0 9 9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
@ -530,7 +529,7 @@ function createAgentSetupHtml(definition: TaskWindowDefinition): string {
<article class="integration-card" data-integration-card="opencode" tabindex="-1">
<div class="integration-card-top"><span class="integration-icon"><img src="${escapeHtml(integrationIcons.opencode)}" alt="" draggable="false" /></span><span id="integration-opencode-status" class="agent-status-pill">Checking</span></div>
<h2>OpenCode</h2><p>Connect OpenCode globally to your OpenPets companion.</p><p id="integration-opencode-summary" class="integration-summary">Checking OpenCode…</p>
<h2>OpenCode</h2><p>Connect OpenCode globally to your OpenPets companion.</p>
<div class="integration-actions stacked">
<button id="integration-opencode-install" class="agent-action primary" disabled data-loading="true">Checking…</button>
<button id="integration-opencode-configure" class="agent-action secondary" disabled data-loading="true">Checking…</button>
@ -863,14 +862,11 @@ function createTaskWindowStyles(): string {
body[data-openpets-view="agent-setup"] .integration-card { min-height: 248px; box-sizing: border-box; display: flex; flex-direction: column; gap: 9px; border: 1px solid rgba(126, 161, 210, 0.44); border-radius: 20px; background: rgba(255,255,255,0.76); box-shadow: 0 16px 38px rgba(61, 99, 160, 0.1), inset 0 1px 0 rgba(255,255,255,0.94); padding: 16px; }
body[data-openpets-view="agent-setup"] .integration-card.featured { border-color: rgba(37, 99, 235, 0.36); background: linear-gradient(180deg, rgba(239, 247, 255, 0.92), rgba(255,255,255,0.78)); }
body[data-openpets-view="agent-setup"] .integration-card.disabled { opacity: 0.74; }
body[data-openpets-view="agent-setup"] .integration-card.needs-attention { border-color: rgba(239, 68, 68, 0.38); background: linear-gradient(180deg, rgba(254, 242, 242, 0.82), rgba(255,255,255,0.78)); }
body[data-openpets-view="agent-setup"] .integration-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
body[data-openpets-view="agent-setup"] .integration-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(126, 161, 210, 0.34); border-radius: 16px; background: rgba(255,255,255,0.76); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 10px 20px rgba(61, 99, 160, 0.08); }
body[data-openpets-view="agent-setup"] .integration-icon img { width: 28px; height: 28px; object-fit: contain; }
body[data-openpets-view="agent-setup"] .integration-card h2 { margin: 0; font-size: 20px; color: #102149; }
body[data-openpets-view="agent-setup"] .integration-card p { flex: 1 1 auto; margin: 0; color: #526483; line-height: 1.35; font-size: 14px; }
body[data-openpets-view="agent-setup"] .integration-card .integration-summary { flex: 0 0 auto; padding: 10px 11px; border-radius: 12px; background: rgba(239, 246, 255, 0.72); border: 1px solid rgba(37, 99, 235, 0.14); color: #36547d; font-size: 13px; }
body[data-openpets-view="agent-setup"] .integration-card.needs-attention .integration-summary { background: rgba(254, 242, 242, 0.78); border-color: rgba(239, 68, 68, 0.22); color: #991b1b; }
body[data-openpets-view="agent-setup"] .integration-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
body[data-openpets-view="agent-setup"] .integration-actions.stacked { grid-template-columns: 1fr; gap: 8px; }
body[data-openpets-view="agent-setup"] .integration-actions .agent-action:only-child { grid-column: 1 / -1; }