import { LitElement, html, css } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import '@shoelace-style/shoelace/dist/components/card/card.js';
import '@shoelace-style/shoelace/dist/components/button/button.js';
import '@shoelace-style/shoelace/dist/components/icon/icon.js';
import '@shoelace-style/shoelace/dist/components/badge/badge.js';
import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
import '@shoelace-style/shoelace/dist/components/switch/switch.js';
export interface MCPServer {
id: string;
name: string;
url: string;
transport: string;
auth_type: string;
status: string;
created_at: string;
updated_at: string;
tool_count?: number;
}
@customElement('mcp-server-card')
export class MCPServerCard extends LitElement {
@property({ type: Object })
server?: MCPServer;
@state()
private isConfirmingDelete = false;
static styles = css`
:host {
display: flex;
flex-direction: column;
height: 100%;
}
.server-card {
display: flex;
flex-direction: column;
height: 100%;
}
.card-content {
padding-bottom: var(--sl-spacing-small);
}
.server-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--sl-spacing-small);
}
.server-name {
font-size: var(--sl-font-size-large);
font-weight: var(--sl-font-weight-semibold);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.server-url {
font-size: var(--sl-font-size-x-small);
color: var(--sl-color-neutral-600);
margin: 0 0 var(--sl-spacing-x-small) 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: monospace;
}
.server-meta {
font-size: var(--sl-font-size-x-small);
color: var(--sl-color-neutral-700);
margin-top: var(--sl-spacing-2x-small);
}
sl-card::part(footer) {
display: flex;
flex-direction: column;
gap: var(--sl-spacing-small);
padding: var(--sl-spacing-medium);
border-top: 1px solid var(--sl-color-neutral-200);
}
.footer-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-actions {
display: flex;
gap: var(--sl-spacing-x-small);
flex: 1;
}
sl-button {
flex: 1;
}
.enable-control {
display: flex;
align-items: center;
justify-content: space-between;
font-size: var(--sl-font-size-small);
color: var(--sl-color-neutral-700);
margin-bottom: var(--sl-spacing-medium);
padding-top: var(--sl-spacing-2x-small);
}
sl-card {
height: 100%;
}
`;
private requestDeleteConfirmation() {
this.isConfirmingDelete = true;
}
private cancelDelete() {
this.isConfirmingDelete = false;
}
private confirmDelete() {
if (!this.server) return;
this.dispatchEvent(
new CustomEvent('server-deleted', {
detail: { id: this.server.id },
bubbles: true,
composed: true,
})
);
this.isConfirmingDelete = false;
}
private handleEdit() {
if (!this.server) return;
this.dispatchEvent(
new CustomEvent('server-edit', {
detail: { server: this.server },
bubbles: true,
composed: true,
})
);
}
private handleScan() {
if (!this.server) return;
this.dispatchEvent(
new CustomEvent('server-scan', {
detail: { id: this.server.id },
bubbles: true,
composed: true,
})
);
}
private handleToggleEnabled() {
if (!this.server) return;
this.dispatchEvent(
new CustomEvent('server-toggle-enabled', {
detail: {
id: this.server.id,
enabled: this.server.status !== 'active',
},
bubbles: true,
composed: true,
})
);
}
render() {
if (!this.server) {
return html``;
}
return html`
<sl-dialog
label="Confirm Deletion"
?open=${this.isConfirmingDelete}
@sl-hide=${this.cancelDelete}
>
Are you sure you want to delete the MCP server "${this.server?.name}"?
This will also remove all discovered tools from this server.
<sl-button slot="footer" @click=${this.cancelDelete}>Cancel</sl-button>
<sl-button slot="footer" variant="danger" @click=${this.confirmDelete}>
Delete
</sl-button>
</sl-dialog>
<sl-card class="server-card">
<div class="card-content">
<div class="server-header">
<h3 class="server-name" title=${this.server.name}>
${this.server.name}
</h3>
<sl-badge
variant=${this.server.status === 'active' ? 'success' : 'danger'}
size="small"
>
${this.server.status}
</sl-badge>
</div>
<p class="server-url" title=${this.server.url}>${this.server.url}</p>
<div class="server-meta">
${this.server.tool_count !== undefined
? `${this.server.tool_count} tool${this.server.tool_count !== 1 ? 's' : ''}`
: 'No tools discovered'}
</div>
</div>
<div slot="footer">
<div class="enable-control">
<span>Enabled</span>
<sl-switch
?checked=${this.server.status === 'active'}
@sl-change=${this.handleToggleEnabled}
></sl-switch>
</div>
<div class="footer-actions">
<sl-button size="small" @click=${this.handleScan}>
Refresh
</sl-button>
<sl-button size="small" @click=${this.handleEdit}> Edit </sl-button>
<sl-button
size="small"
variant="danger"
@click=${this.requestDeleteConfirmation}
>
Delete
</sl-button>
</div>
</div>
</sl-card>
`;
}
}
