fix: improve Prompts tab UX with categories, human-readable names, and better intro (#218)

- Add Category field to PromptInfo for frontend grouping
- Set category on all prompts: "workflow", "toolkit", "custom"
- Exclude platform-overview from prompt metadata (auto-invoked, not copyable)
- Group prompts into Workflows and Quick Actions sections
- Display human-readable titles with machine slug shown below
- Rewrite intro text to describe platform capabilities
- Update test preview data and all affected tests

Author: cjimti

apps/platform-info/index.html

@@ -616,11 +616,18 @@
             margin-bottom: 6px;
         }
 
-        .prompt-card-name {
-            font-family: var(--font-mono);
-            font-size: 13px;
+        .prompt-card-title {
+            font-size: 13.5px;
             font-weight: 600;
             color: var(--text);
+            line-height: 1.3;
+        }
+
+        .prompt-card-slug {
+            font-family: var(--font-mono);
+            font-size: 11px;
+            color: var(--muted);
+            margin-top: 2px;
         }
 
         .prompt-card-desc {
@@ -630,6 +637,19 @@
             margin-bottom: 8px;
         }
 
+        .prompt-section-header {
+            font-size: 11px;
+            font-weight: 600;
+            color: var(--muted);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            margin-bottom: 8px;
+            margin-top: 4px;
+        }
+        .prompt-section-header:not(:first-child) {
+            margin-top: 16px;
+        }
+
         .prompt-card-args {
             display: flex;
             flex-direction: column;
@@ -750,7 +770,7 @@
                 </div>
             </div>
             <div id="tab-prompts" class="tab-pane">
-                <div class="tab-intro">Available prompts — select one to copy the prompt text with arguments filled in.</div>
+                <div class="tab-intro" id="prompt-intro"></div>
                 <div id="prompt-list" class="prompt-cards"></div>
             </div>
             <div id="tab-agent-instructions" class="tab-pane">
@@ -1079,7 +1099,7 @@
 
         // Prompts tab
         if (d.prompts && d.prompts.length) {
-            renderPrompts(d.prompts);
+            renderPrompts(d.prompts, brandName);
             document.getElementById('tab-btn-prompts').classList.remove('hidden');
         }
 
@@ -1093,42 +1113,83 @@
     // Prompt data stored for copy
     var _prompts = [];
 
-    function renderPrompts(prompts) {
+    function humanize(slug) {
+        return slug.replace(/[-_]/g, ' ').replace(/\b\w/g, function(c) { return c.toUpperCase(); });
+    }
+
+    function renderPrompts(prompts, platformName) {
         _prompts = prompts;
+
+        // Set intro text
+        platformName = platformName || 'This platform';
+        document.getElementById('prompt-intro').textContent =
+            platformName + ' has many capabilities built in, including the ability to find insights in your data, visualize it, generate reports, and more. Use the prompts below to kick off common workflows or copy a prompt name to invoke it in your MCP client.';
+
+        // Group by category
+        var workflows = [];
+        var quickActions = [];
+        prompts.forEach(function(p, idx) {
+            p._idx = idx;
+            if (p.category === 'workflow' || (p.arguments && p.arguments.length)) {
+                workflows.push(p);
+            } else {
+                quickActions.push(p);
+            }
+        });
+
         var el = document.getElementById('prompt-list');
-        el.innerHTML = prompts.map(function(p, idx) {
-            var argsHtml = '';
-            if (p.arguments && p.arguments.length) {
-                argsHtml = '<div class="prompt-card-args">'
-                    + p.arguments.map(function(a) {
-                        return '<div class="prompt-arg-row">'
-                            + '<span class="prompt-arg-label">' + esc(a.name)
-                            + (a.required ? '<span class="req">*</span>' : '')
-                            + '</span>'
-                            + '<input class="prompt-arg-input" data-prompt="' + idx
-                            + '" data-arg="' + esc(a.name)
-                            + '" placeholder="' + esc(a.description || a.name) + '">'
-                            + '</div>';
-                    }).join('')
-                    + '</div>';
+        var html = '';
+        var hasMultipleSections = workflows.length > 0 && quickActions.length > 0;
+
+        if (workflows.length > 0) {
+            if (hasMultipleSections) {
+                html += '<div class="prompt-section-header">Workflows</div>';
             }
-            return '<div class="prompt-card">'
-                + '<div class="prompt-card-header">'
-                + '<span class="prompt-card-name">' + esc(p.name) + '</span>'
-                + '<button class="prompt-copy-btn" onclick="copyPrompt(' + idx + ', this)">Copy</button>'
-                + '</div>'
-                + (p.description ? '<div class="prompt-card-desc">' + esc(p.description) + '</div>' : '')
-                + argsHtml
+            html += workflows.map(renderPromptCard).join('');
+        }
+        if (quickActions.length > 0) {
+            if (hasMultipleSections) {
+                html += '<div class="prompt-section-header">Quick Actions</div>';
+            }
+            html += quickActions.map(renderPromptCard).join('');
+        }
+        el.innerHTML = html;
+    }
+
+    function renderPromptCard(p) {
+        var idx = p._idx;
+        var argsHtml = '';
+        if (p.arguments && p.arguments.length) {
+            argsHtml = '<div class="prompt-card-args">'
+                + p.arguments.map(function(a) {
+                    return '<div class="prompt-arg-row">'
+                        + '<span class="prompt-arg-label">' + esc(a.name)
+                        + (a.required ? '<span class="req">*</span>' : '')
+                        + '</span>'
+                        + '<input class="prompt-arg-input" data-prompt="' + idx
+                        + '" data-arg="' + esc(a.name)
+                        + '" placeholder="' + esc(a.description || a.name) + '">'
+                        + '</div>';
+                }).join('')
                 + '</div>';
-        }).join('');
+        }
+        return '<div class="prompt-card">'
+            + '<div class="prompt-card-header">'
+            + '<div>'
+            + '<div class="prompt-card-title">' + esc(humanize(p.name)) + '</div>'
+            + '<div class="prompt-card-slug">' + esc(p.name) + '</div>'
+            + '</div>'
+            + '<button class="prompt-copy-btn" onclick="copyPrompt(' + idx + ', this)">Copy</button>'
+            + '</div>'
+            + (p.description ? '<div class="prompt-card-desc">' + esc(p.description) + '</div>' : '')
+            + argsHtml
+            + '</div>';
     }
 
     function copyPrompt(idx, btn) {
         var p = _prompts[idx];
         if (!p) { return; }
-        // Resolve prompt name as the text to copy (users paste as /prompt invocation)
         var text = p.name;
-        // If prompt has args, collect values and append
         if (p.arguments && p.arguments.length) {
             var inputs = document.querySelectorAll('input[data-prompt="' + idx + '"]');
             var parts = [];

apps/test-preview-data.json

@@ -34,6 +34,55 @@
       "display_name": "Administrator",
       "description": "Full platform access for demo"
     },
+    "prompts": [
+      {
+        "name": "explore-available-data",
+        "description": "Discover what data is available about a topic",
+        "category": "workflow",
+        "arguments": [
+          {"name": "topic", "description": "What topic or subject area?", "required": true}
+        ]
+      },
+      {
+        "name": "create-interactive-dashboard",
+        "description": "Discover data, build a visualization, and save it as a shareable asset",
+        "category": "workflow",
+        "arguments": [
+          {"name": "topic", "description": "What should the dashboard visualize?", "required": true}
+        ]
+      },
+      {
+        "name": "create-a-report",
+        "description": "Analyze data and produce a structured Markdown report",
+        "category": "workflow",
+        "arguments": [
+          {"name": "topic", "description": "What should the report cover?", "required": true}
+        ]
+      },
+      {
+        "name": "trace-data-lineage",
+        "description": "Trace where data comes from and what depends on it",
+        "category": "workflow",
+        "arguments": [
+          {"name": "dataset", "description": "Which dataset or column to trace?", "required": true}
+        ]
+      },
+      {
+        "name": "save-this-as-an-asset",
+        "description": "Save an artifact from this conversation as a viewable, shareable asset",
+        "category": "toolkit"
+      },
+      {
+        "name": "show-my-saved-assets",
+        "description": "Browse your saved artifacts and assets",
+        "category": "toolkit"
+      },
+      {
+        "name": "capture-this-as-knowledge",
+        "description": "Record insights from this conversation for data catalog improvement",
+        "category": "toolkit"
+      }
+    ],
     "features": {
       "semantic_enrichment": true,
       "query_enrichment": true,

pkg/platform/prompts.go

@@ -27,7 +27,7 @@ const (
 func (p *Platform) registerPlatformPrompts() {
 	p.registerAutoPrompt()
 	for _, promptCfg := range p.config.Server.Prompts {
-		p.registerPrompt(promptCfg)
+		p.registerPromptWithCategory(promptCfg, "custom")
 	}
 	p.registerWorkflowPrompts()
 }
@@ -58,10 +58,8 @@ func (p *Platform) registerAutoPrompt() {
 		return buildPromptResult(content), nil
 	})
 
-	p.promptInfos = append(p.promptInfos, registry.PromptInfo{
-		Name:        autoPromptName,
-		Description: "Overview of this data platform — what it covers and how to use it",
-	})
+	// platform-overview is auto-invoked; it is not included in promptInfos
+	// because copy-to-clipboard makes no sense for it.
 }
 
 // buildDynamicOverviewContent builds the platform overview content dynamically
@@ -127,9 +125,10 @@ func (p *Platform) collectCapabilityBullets() []string {
 	return caps
 }
 
-// registerPrompt registers a single prompt with the MCP server,
-// supporting argument substitution in content.
-func (p *Platform) registerPrompt(cfg PromptConfig) {
+// registerPromptWithCategory registers a single prompt with the MCP server,
+// supporting argument substitution in content. The category is stored in
+// prompt metadata for frontend grouping (e.g., "workflow", "custom", "toolkit").
+func (p *Platform) registerPromptWithCategory(cfg PromptConfig, category string) {
 	promptContent := cfg.Content
 
 	// Build MCP prompt arguments
@@ -155,6 +154,7 @@ func (p *Platform) registerPrompt(cfg PromptConfig) {
 	info := registry.PromptInfo{
 		Name:        cfg.Name,
 		Description: cfg.Description,
+		Category:    category,
 	}
 	for _, arg := range cfg.Arguments {
 		info.Arguments = append(info.Arguments, registry.PromptArgumentInfo{
@@ -277,7 +277,7 @@ func (p *Platform) registerWorkflowPrompts() {
 			continue
 		}
 
-		p.registerPrompt(wp.config)
+		p.registerPromptWithCategory(wp.config, "workflow")
 	}
 }
 

pkg/platform/prompts_test.go

@@ -546,14 +546,15 @@ func TestPromptMetadataCollection(t *testing.T) {
 	}
 	assert.True(t, customFound, "custom-prompt should be in collected infos")
 
-	// Find platform-overview (auto-registered because Description is set)
-	var overviewFound bool
+	// platform-overview should NOT be in collected infos (excluded for copy UX)
 	for _, info := range infos {
-		if info.Name == autoPromptName {
-			overviewFound = true
-		}
+		assert.NotEqual(t, autoPromptName, info.Name, "platform-overview should not be in collected infos")
+	}
+
+	// Verify categories are set
+	for _, info := range infos {
+		assert.NotEmpty(t, info.Category, "prompt %q should have a category", info.Name)
 	}
-	assert.True(t, overviewFound, "platform-overview should be in collected infos")
 }
 
 func TestCollectToolkitPromptInfos(t *testing.T) {

pkg/registry/toolkit.go

@@ -48,6 +48,7 @@ type AggregateToolkitFactory func(defaultName string, instances map[string]map[s
 type PromptInfo struct {
 	Name        string               `json:"name"`
 	Description string               `json:"description"`
+	Category    string               `json:"category,omitempty"`
 	Arguments   []PromptArgumentInfo `json:"arguments,omitempty"`
 }
 

pkg/toolkits/knowledge/toolkit.go

@@ -787,10 +787,12 @@ func (*Toolkit) PromptInfos() []registry.PromptInfo {
 		{
 			Name:        promptName,
 			Description: "Guidance on when and how to capture domain knowledge insights",
+			Category:    "toolkit",
 		},
 		{
 			Name:        userPromptName,
 			Description: "Record insights from this conversation for data catalog improvement",
+			Category:    "toolkit",
 		},
 	}
 }

pkg/toolkits/knowledge/toolkit_test.go

@@ -3020,9 +3020,11 @@ func TestPromptInfos(t *testing.T) {
 
 	assert.Equal(t, promptName, infos[0].Name)
 	assert.NotEmpty(t, infos[0].Description)
+	assert.Equal(t, "toolkit", infos[0].Category)
 
 	assert.Equal(t, userPromptName, infos[1].Name)
 	assert.NotEmpty(t, infos[1].Description)
+	assert.Equal(t, "toolkit", infos[1].Category)
 }
 
 func TestRegisterPrompts(t *testing.T) {

pkg/toolkits/portal/toolkit.go

@@ -191,10 +191,12 @@ func (*Toolkit) PromptInfos() []registry.PromptInfo {
 		{
 			Name:        saveAssetPromptName,
 			Description: "Save an artifact from this conversation as a viewable, shareable asset",
+			Category:    "toolkit",
 		},
 		{
 			Name:        showAssetsPromptName,
 			Description: "Browse your saved artifacts and assets",
+			Category:    "toolkit",
 		},
 	}
 }

pkg/toolkits/portal/toolkit_test.go

@@ -863,9 +863,11 @@ func TestPromptInfos(t *testing.T) {
 
 	assert.Equal(t, saveAssetPromptName, infos[0].Name)
 	assert.NotEmpty(t, infos[0].Description)
+	assert.Equal(t, "toolkit", infos[0].Category)
 
 	assert.Equal(t, showAssetsPromptName, infos[1].Name)
 	assert.NotEmpty(t, infos[1].Description)
+	assert.Equal(t, "toolkit", infos[1].Category)
 }
 
 func TestRegisterPrompts(t *testing.T) {