improve ui

Author: yaqi-lyu

plan.md

@@ -23,9 +23,9 @@ const SETTINGS_FILE = "custom-settings.enc";
 
 const TEMPLATE_PROMPT: CustomPrompt = {
   id: "default",
-  name: "Create Issues from Video Recordings",
+  name: "Create Issues Template",
   description: "Template for creating issues from video recordings",
-  content: `Project Name: <REPLACE WITH PROJECT NAME>\nProject URL: <REPLACE WITH YOUR REPO OR BOARD URL>\n${defaultCustomPrompt}`,
+  content: `Project Name: «your project name»\nProject URL: «repo or board URL»\n${defaultCustomPrompt}`,
   isDefault: true,
   isTemplate: true,
   createdAt: Date.now(),

src/backend/services/storage/custom-prompt-storage.ts

@@ -2,46 +2,56 @@ import type { MCPServerConfig } from "../types/mcp";
 
 /**
  * IDs for well-known preset MCP servers.
- * These must stay in sync with the card components in the frontend.
  */
 export const PRESET_SERVER_IDS = {
   GITHUB: "f12980ac-f80c-47e0-b4ac-181a54122d61",
   AZURE_DEVOPS: "483d49a4-0902-415a-a987-832a21bd3d63",
   JIRA: "0f03a50c-219b-46e9-9ce3-54f925c44479",
 } as const;
 
+/** Default config for the GitHub preset MCP server. */
+export const GITHUB_PRESET_CONFIG = {
+  id: PRESET_SERVER_IDS.GITHUB,
+  name: "GitHub",
+  transport: "streamableHttp",
+  url: "https://api.githubcopilot.com/mcp/",
+  description: "GitHub MCP Server",
+  toolWhitelist: [],
+  enabled: false,
+} satisfies MCPServerConfig;
+
+/** Default config for the Azure DevOps preset MCP server. */
+export const AZURE_DEVOPS_PRESET_CONFIG = {
+  id: PRESET_SERVER_IDS.AZURE_DEVOPS,
+  name: "Azure_DevOps", // MCP server names cannot contain spaces
+  transport: "stdio",
+  command: "npx",
+  // TODO: need to be able to customize this last parameter
+  // https://github.com/SSWConsulting/SSW.YakShaver.Desktop/issues/547
+  args: ["-y", "@azure-devops/mcp", "ssw2"],
+  description: "Azure DevOps MCP Server",
+  toolWhitelist: [],
+  enabled: false,
+} satisfies MCPServerConfig;
+
+/** Default config for the Jira preset MCP server. */
+export const JIRA_PRESET_CONFIG = {
+  id: PRESET_SERVER_IDS.JIRA,
+  name: "Jira",
+  transport: "streamableHttp",
+  url: "https://mcp.atlassian.com/v1/mcp",
+  description: "Atlassian MCP Server",
+  toolWhitelist: [],
+  enabled: false,
+} satisfies MCPServerConfig;
+
 /**
- * Default configs for preset MCP servers.
+ * All preset MCP server configs.
  * Included in listAvailableServers() even before the user connects.
  * Once a user saves a server with the same ID, the stored version takes precedence.
  */
 export const PRESET_MCP_SERVERS: readonly MCPServerConfig[] = [
-  {
-    id: PRESET_SERVER_IDS.GITHUB,
-    name: "GitHub",
-    transport: "streamableHttp",
-    url: "https://api.githubcopilot.com/mcp/",
-    description: "GitHub MCP Server",
-    toolWhitelist: [],
-    enabled: false,
-  },
-  {
-    id: PRESET_SERVER_IDS.AZURE_DEVOPS,
-    name: "Azure_DevOps",
-    transport: "stdio",
-    command: "npx",
-    args: ["-y", "@azure-devops/mcp", "ssw2"],
-    description: "Azure DevOps MCP Server",
-    toolWhitelist: [],
-    enabled: false,
-  },
-  {
-    id: PRESET_SERVER_IDS.JIRA,
-    name: "Jira",
-    transport: "streamableHttp",
-    url: "https://mcp.atlassian.com/v1/mcp",
-    description: "Atlassian MCP Server",
-    toolWhitelist: [],
-    enabled: false,
-  },
-] as MCPServerConfig[];
+  GITHUB_PRESET_CONFIG,
+  AZURE_DEVOPS_PRESET_CONFIG,
+  JIRA_PRESET_CONFIG,
+];

src/shared/mcp/preset-servers.ts

@@ -182,7 +182,7 @@ export function SettingsDialog() {
 
           <section className="flex-1 h-full overflow-hidden">
             <ScrollArea className="h-full pr-1">
-              <div className="pb-4 pr-2">
+              <div className="pb-4">
                 {activeTab?.id === "general" && (
                   <GeneralSettingsPanel isActive={open && activeTabId === "general"} />
                 )}

src/ui/src/components/settings/SettingsDialog.tsx

@@ -262,7 +262,7 @@ export function CustomPromptSettingsPanel({
           {/* Templates section */}
           {promptManager.templates.length > 0 && (
             <>
-              <div className="flex flex-col gap-3 pt-2">
+              <div className="flex flex-col gap-3 pt-6">
                 <h3 className="text-sm font-semibold text-white/70 uppercase tracking-wide">
                   Template
                 </h3>
@@ -371,12 +371,12 @@ export function CustomPromptSettingsPanel({
             <h2 className="text-xl font-semibold">Custom Prompt Manager</h2>
             <p className="text-muted-foreground text-sm">
               Manage your custom prompts. Use a template to get started quickly, or create your own
-              prompt with custom MCP server selections.
+              prompt.
             </p>
           </header>
         )}
         <ScrollArea className="flex-1">
-          <div className="h-full min-h-0 pr-3">{renderContent()}</div>
+          <div className="w-full overflow-x-hidden">{renderContent()}</div>
         </ScrollArea>
       </div>
 

src/ui/src/components/settings/custom-prompt/CustomPromptManager.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useCallback, useRef } from "react";
 import { cn } from "@/lib/utils";
 
-const PLACEHOLDER_PATTERN = /<REPLACE[A-Z0-9_ ]+>/g;
+const PLACEHOLDER_PATTERN = /«[^»]+»/g;
 
 function renderHighlighted(text: string): React.ReactNode[] {
   const parts: React.ReactNode[] = [];