Add MCP (Model Context Protocol) server support as an integration

.gitignore

@@ -80,3 +80,9 @@ src/beaker_notebook/**/ui/*
 
 beaker-ts/package-lock.json
 beaker-vue/package-lock.json
+
+# Personal integrations
+.mcp.yaml
+.mcp.yml
+.mcp.json
+.skills.json

beaker-vue/src/components/integrations/IntegrationPanel.vue

@@ -78,17 +78,24 @@
                     >
                         <template #title>
                             <div class="integration-card-title">
+                                <img
+                                    v-if="getIntegrationIcon(integration)"
+                                    class="integration-card-icon"
+                                    :src="getIntegrationIcon(integration)"
+                                    :alt="`${integration?.datatype ?? ''} icon`"
+                                    v-tooltip.top="getIntegrationTypeLabel(integration)"
+                                />
                                 <span class="integration-card-title-text">
                                     {{ integration?.name }}
                                 </span>
 
                                 <span v-if="expandedIntegration === integration.uuid">
                                     <RouterLink
                                         :to="`/integrations?selected=${integration?.uuid}${sessionIdParam}`"
-                                        :aria-label="(getIntegrationProviderType(integration) === 'adhoc' ? 'Edit' : 'View') + ' ' + integration?.name"
+                                        :aria-label="(isEditableType(integration) ? 'Edit' : 'View') + ' ' + integration?.name"
                                     >
                                         <Button
-                                            v-if="getIntegrationProviderType(integration) === 'adhoc'"
+                                            v-if="isEditableType(integration)"
                                             style="
                                                 width: fit-content;
                                                 height: 32px;
@@ -136,7 +143,7 @@ import InputText from "primevue/inputtext";
 import Card from "primevue/card";
 import { marked } from "marked";
 import { type BeakerSessionComponentType } from "../session/BeakerSession.vue";
-import { type IntegrationMap, type Integration, type IntegrationProviders, listIntegrations, getIntegrationProviderType } from "@/util/integration";
+import { type IntegrationMap, type Integration, type IntegrationProviders, listIntegrations, getIntegrationProviderType, getIntegrationIcon, getIntegrationTypeLabel, isContextProvidedIntegration } from "@/util/integration";
 import { RouterLink } from "vue-router";
 import { read } from "fs";
 
@@ -177,6 +184,18 @@ const processIntegrations = (integrations: Integration[]) =>
 //         .filter((name) => processIntegrations(providers[name].integrations).length >= 1)
 //         .reduce((result, key) => (result[key] = providers[key], result), {})
 
+// Whether a card opens into an editor ("Edit") rather than a read-only viewer
+// ("View"). MCP servers are editable unless provided by a context (see
+// isContextProvidedIntegration); adhoc integrations are always editable; every
+// other type is view-only.
+const isEditableType = (integration: Integration): boolean => {
+    const type = getIntegrationProviderType(integration);
+    if (type === 'mcp') {
+        return !isContextProvidedIntegration(integration);
+    }
+    return type === 'adhoc';
+};
+
 const allIntegrations = computed<Integration[]>(() => Object.values(integrations.value))
 
 const expandedIntegration = ref<string|undefined>(undefined);
@@ -237,9 +256,17 @@ watch(searchText, () => {
 .integration-card-title {
     display: flex;
     flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
     .integration-show-more {
         aspect-ratio: 1/1;
     }
+    .integration-card-icon {
+        width: 1.25rem;
+        height: 1.25rem;
+        object-fit: contain;
+        flex-shrink: 0;
+    }
     .integration-card-title-text {
         flex: 1 1;
         font-size: 1rem;