Skip to content

Commit 3f08f39

Browse files
author
Lasim
committed
feat(frontend): enhance MCP server details with specifications view
1 parent 703416c commit 3f08f39

15 files changed

+314
-202
lines changed

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@
77
</p>
88

99
<p align="center">
10+
<a href="https://cloud.deploystack.io">🚀 Try it out</a> ·&nbsp;
1011
<a href="https://deploystack.io">🌐 Website</a> ·&nbsp;
1112
<a href="https://docs.deploystack.io/">📚 Documentation</a> ·&nbsp;
12-
<a href="https://deploystack.io/roadmap"><img src="./.assets/planner-icon.svg" alt="Roadmap" width="12" height="12"/> Roadmap </a> ·&nbsp;
13+
<a href="https://github.com/deploystackio/deploystack?tab=readme-ov-file#roadmap"><img src="./.assets/planner-icon.svg" alt="Roadmap" width="12" height="12"/> Roadmap </a> ·&nbsp;
1314
<a href="https://discord.gg/42Ce3S7b3b"><img src="./.assets/discord-icon.svg" alt="Discord" width="12" height="12"/> Discord</a>
1415
</p>
1516

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"dev:backend": "cd services/backend && npm run dev",
1414
"build:frontend": "cd services/frontend && npm run build",
1515
"build:backend": "cd services/backend && npm run build",
16-
"lint:md": "npx markdownlint-cli2 '**/*.md' '#services/backend/src/routes/users/satellite/ai-instructions/**' '#node_modules' '#CLAUDE.md' '#services/frontend/src/components/ui/**' '#**/node_modules/**' '#.github' '#**/CHANGELOG.md' '#**/._*'",
16+
"lint:md": "npx markdownlint-cli2 '**/*.md' '#**/dist/**' '#services/backend/src/routes/users/satellite/ai-instructions/**' '#node_modules' '#CLAUDE.md' '#services/frontend/src/components/ui/**' '#**/node_modules/**' '#.github' '#**/CHANGELOG.md' '#**/._*'",
1717
"lint:frontend": "cd services/frontend && npm run lint",
1818
"lint:backend": "cd services/backend && npm run lint",
1919
"check:no-console:backend": "cd services/backend && npm run check:no-console",

‎services/frontend/README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -85,10 +85,10 @@ The frontend uses a dual-layer environment system that works seamlessly across d
8585

8686
### Core Variables
8787

88-
| Variable | Description | Default | Required |
89-
|----------|-------------|---------|----------|
90-
| `VITE_DEPLOYSTACK_BACKEND_URL` | Backend API URL | `http://localhost:3000` | Yes |
91-
| `VITE_APP_TITLE` | Application title | `DeployStack` | Yes |
88+
| Variable | Description | Default | Required |
89+
|--------------------------------|---------------------|-------------------------|----------|
90+
| `VITE_DEPLOYSTACK_BACKEND_URL` | Backend API URL | `http://localhost:3000` | Yes |
91+
| `VITE_APP_TITLE` | Application title | `DeployStack` | Yes |
9292

9393
### Development Setup
9494

‎services/frontend/src/components/DashboardLayout.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const sidebarStyle = computed(() => ({
4141
<Separator class="my-6 max-w-7xl" />
4242

4343
<!-- Content area -->
44-
<div class="flex flex-1 flex-col gap-4 p-4 pt-0 max-w-7xl">
44+
<div class="flex flex-1 flex-col gap-4 py-4 pt-0 max-w-7xl">
4545
<slot />
4646
</div>
4747
</SidebarInset>

‎services/frontend/src/components/mcp-server/CategoryDisplay.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ const shouldShowNotProvided = computed(() => {
7575
<div class="h-4 w-16 bg-gray-200 rounded animate-pulse"></div>
7676
</div>
7777

78-
<div v-else-if="shouldShowNotProvided" class="text-muted-foreground italic">
78+
<div v-else-if="shouldShowNotProvided" :class="textClass || 'text-muted-foreground'">
7979
{{ t('mcpCatalog.edit.values.notProvided') }}
8080
</div>
8181
</template>

‎services/frontend/src/components/mcp-server/McpInstallationsList.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -243,10 +243,10 @@ onUnmounted(() => {
243243
:server-name="installation.installation_name"
244244
size="sm"
245245
rounded="md"
246-
class="shrink-0"
246+
class="shrink-0 hidden sm:flex"
247247
/>
248248

249-
<dl class="flex-1 grid grid-cols-1 gap-x-8 gap-y-1 text-xs/5 text-gray-500 sm:grid-cols-4">
249+
<dl class="flex-1 grid grid-cols-2 gap-x-8 gap-y-1 text-xs/5 text-gray-500 sm:grid-cols-4">
250250
<div>
251251
<dt class="font-medium text-gray-700">Satellite</dt>
252252
<dd>{{ installation.installation_type }}</dd>

‎services/frontend/src/components/mcp-server/McpServerAvatar.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ const handleImageError = () => {
119119
'justify-center',
120120
'select-none'
121121
]"
122-
:style="{ ...customSize, ...customFontSize }"
122+
:style="{ ...customSize, ...customFontSize, lineHeight: '1' }"
123123
:aria-label="serverName ? `${serverName} avatar` : 'MCP server avatar'"
124124
>
125125
{{ firstLetter }}

‎services/frontend/src/components/mcp-server/view/McpServerInfoHeader.vue‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ interface Props {
99
githubStars?: number | null
1010
githubAccountId?: string | null
1111
description?: string | null
12+
repositoryUrl?: string | null
1213
}
1314
1415
const props = defineProps<Props>()
@@ -46,11 +47,13 @@ const formattedStars = computed(() => {
4647
<h2 class="text-lg font-semibold">{{ name }}</h2>
4748
<div class="flex items-center justify-center gap-2 text-sm text-muted-foreground">
4849
<span>By <span class="font-medium text-foreground">{{ displayAuthor }}</span></span>
49-
<span>·</span>
50-
<div class="flex items-center gap-1">
51-
<Star class="h-4 w-4" />
52-
<span>{{ formattedStars }}</span>
53-
</div>
50+
<template v-if="repositoryUrl">
51+
<span>·</span>
52+
<div class="flex items-center gap-1">
53+
<Star class="h-4 w-4" />
54+
<span>{{ formattedStars }}</span>
55+
</div>
56+
</template>
5457
</div>
5558
</div>
5659

‎services/frontend/src/components/mcp-server/view/McpServerInfoLinks.vue‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Github, ExternalLink } from 'lucide-vue-next'
33
import { useI18n } from 'vue-i18n'
44
55
interface Props {
6-
githubUrl?: string | null
6+
repositoryUrl?: string | null
77
homepageUrl?: string | null
88
}
99
@@ -14,19 +14,18 @@ const { t } = useI18n()
1414

1515
<template>
1616
<div class="space-y-3">
17-
<h3 class="text-sm font-semibold">{{ t('mcpInstallations.view.fields.links') }}</h3>
17+
<h3 class="text-sm font-semibold">Links</h3>
1818

1919
<ul class="space-y-2">
20-
<li v-if="githubUrl">
20+
<li v-if="repositoryUrl">
2121
<a
22-
:href="githubUrl"
22+
:href="repositoryUrl"
2323
target="_blank"
2424
rel="noopener noreferrer"
2525
class="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
2626
>
2727
<Github class="h-4 w-4" />
2828
<span>{{ t('mcpInstallations.view.values.repository') }}</span>
29-
<ExternalLink class="h-3 w-3 ml-auto" />
3029
</a>
3130
</li>
3231

@@ -38,12 +37,11 @@ const { t } = useI18n()
3837
class="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
3938
>
4039
<ExternalLink class="h-4 w-4" />
41-
<span>{{ t('mcpInstallations.view.values.homepage') }}</span>
42-
<ExternalLink class="h-3 w-3 ml-auto" />
40+
<span>{{ homepageUrl.replace('https://', '').replace('http://', '') }}</span>
4341
</a>
4442
</li>
4543

46-
<li v-if="!githubUrl && !homepageUrl" class="text-sm text-muted-foreground">
44+
<li v-if="!repositoryUrl && !homepageUrl" class="text-sm text-muted-foreground">
4745
{{ t('mcpInstallations.view.values.noLinks') }}
4846
</li>
4947
</ul>

‎services/frontend/src/components/mcp-server/view/McpServerInfoMetadata.vue‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ interface Props {
99
tags?: string[] | string | null
1010
license?: string | null
1111
runtime: string
12+
transportType?: string | null
1213
categoryId?: string | null
1314
}
1415
@@ -50,18 +51,22 @@ const displayTags = computed(() => {
5051
<dt class="text-muted-foreground">{{ t('mcpInstallations.view.values.runtime') }}</dt>
5152
<dd class="font-mono text-xs">{{ runtime }}</dd>
5253
</div>
53-
<div class="flex items-center justify-between">
54+
<div v-if="transportType" class="flex items-center justify-between">
55+
<dt class="text-muted-foreground">Transport Type</dt>
56+
<dd class="font-mono text-xs uppercase">{{ transportType }}</dd>
57+
</div>
58+
<div v-if="license" class="flex items-center justify-between">
5459
<dt class="text-muted-foreground">{{ t('mcpInstallations.view.values.license') }}</dt>
55-
<dd>{{ license || t('mcpInstallations.view.values.notProvided') }}</dd>
60+
<dd>{{ license }}</dd>
5661
</div>
5762
</dl>
5863
</div>
5964

60-
<div class="space-y-2">
65+
<div v-if="categoryId" class="space-y-2">
6166
<h3 class="text-sm font-semibold">{{ t('mcpInstallations.view.fields.category') }}</h3>
6267
<CategoryDisplay
6368
:category-id="categoryId"
64-
:show-not-provided="true"
69+
:show-not-provided="false"
6570
text-class="text-sm"
6671
/>
6772
</div>

0 commit comments

Comments
 (0)