@kb-labs/studio-app 0.6.0

package/src/modules/plugins/components/marketplace-card.tsx

@@ -0,0 +1,153 @@
+import { useState } from 'react';
+import { UITooltip, UIButton, UIIcon } from '@kb-labs/studio-ui-kit';
+import type { PluginManifestEntry } from '@kb-labs/studio-data-client';
+
+interface MarketplaceCardProps {
+  plugin: PluginManifestEntry;
+  onClick: () => void;
+}
+
+const SURFACE_CONFIG = [
+  { key: 'cli',       label: 'CLI',      color: '#6366f1', bg: 'rgba(99,102,241,0.10)',  getCount: (m: any) => m.cli?.commands?.length ?? 0 },
+  { key: 'studio',    label: 'Studio',   color: '#0c66ff', bg: 'rgba(12,102,255,0.10)',  getCount: (m: any) => m.studio?.pages?.length ?? 0 },
+  { key: 'rest',      label: 'REST',     color: '#10b981', bg: 'rgba(16,185,129,0.10)',  getCount: (m: any) => m.rest?.routes?.length ?? 0 },
+  { key: 'workflows', label: 'Workflows',color: '#8b5cf6', bg: 'rgba(139,92,246,0.10)', getCount: (m: any) => m.workflows?.handlers?.length ?? 0 },
+  { key: 'jobs',      label: 'Jobs',     color: '#f59e0b', bg: 'rgba(245,158,11,0.10)', getCount: (m: any) => m.jobs?.handlers?.length ?? 0 },
+];
+
+export function MarketplaceCard({ plugin, onClick }: MarketplaceCardProps) {
+  const [hovered, setHovered] = useState(false);
+  const { manifest } = plugin;
+  const display = manifest.display;
+
+  const surfaces = SURFACE_CONFIG.filter(s => s.getCount(manifest) > 0);
+  const hasPermWarning = !!manifest.permissions;
+  const hasError = plugin.validation && !plugin.validation.valid;
+
+  const name = display?.name || manifest.id;
+  const iconLetter = name.charAt(0).toUpperCase();
+  const iconBg = stringToColor(manifest.id);
+
+  return (
+    <div
+      onClick={onClick}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        background: 'var(--bg-secondary)',
+        border: `1px solid ${hovered ? 'var(--border-secondary)' : 'var(--border-primary)'}`,
+        borderRadius: 12,
+        padding: '20px',
+        cursor: 'pointer',
+        transition: 'border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease',
+        boxShadow: hovered ? '0 4px 16px rgba(0,0,0,0.08)' : '0 1px 3px rgba(0,0,0,0.04)',
+        transform: hovered ? 'translateY(-1px)' : 'none',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 14,
+        height: '100%',
+        boxSizing: 'border-box',
+      }}
+    >
+      {/* Top: icon + status badge */}
+      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
+        <div style={{
+          width: 44, height: 44, borderRadius: 11, flexShrink: 0,
+          background: iconBg,
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          fontSize: 18, fontWeight: 700, color: '#fff',
+          fontFamily: 'var(--font-heading)',
+        }}>
+          {iconLetter}
+        </div>
+
+        {hasError ? (
+          <StatusBadge color="#ff4d4f" bg="rgba(255,77,79,0.10)">Invalid</StatusBadge>
+        ) : (
+          <StatusBadge color="#52c41a" bg="rgba(82,196,26,0.10)">Installed</StatusBadge>
+        )}
+      </div>
+
+      {/* Name + version */}
+      <div>
+        <div style={{
+          fontSize: 15, fontWeight: 600, color: 'var(--text-primary)',
+          lineHeight: 1.3, marginBottom: 3,
+          fontFamily: 'var(--font-heading)',
+        }}>
+          {name}
+        </div>
+        <div style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>
+          v{manifest.version}
+        </div>
+      </div>
+
+      {/* Description */}
+      <div style={{
+        fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.55,
+        display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
+        overflow: 'hidden', flex: 1,
+      }}>
+        {display?.description || 'No description'}
+      </div>
+
+      {/* Footer: surfaces + warning */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
+        <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
+          {surfaces.map(s => (
+            <UITooltip key={s.key} title={`${s.getCount(manifest)} ${s.label}`}>
+              <span style={{
+                fontSize: 11, fontWeight: 500, padding: '3px 8px',
+                borderRadius: 20, color: s.color, background: s.bg,
+              }}>
+                {s.label}
+              </span>
+            </UITooltip>
+          ))}
+        </div>
+
+        <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
+          {hasPermWarning && (
+            <UITooltip title="Requires permissions">
+              <UIIcon name="WarningOutlined" style={{ fontSize: 13, color: 'var(--warning)' }} />
+            </UITooltip>
+          )}
+          {hovered && (
+            <UIButton
+              size="small"
+              style={{ fontSize: 12, height: 26, padding: '0 10px' }}
+              onClick={e => { e.stopPropagation(); onClick(); }}
+            >
+              Open
+            </UIButton>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StatusBadge({ color, bg, children }: { color: string; bg: string; children: string }) {
+  return (
+    <span style={{
+      fontSize: 11, fontWeight: 600, padding: '3px 9px',
+      borderRadius: 20, color, background: bg,
+      letterSpacing: '0.01em',
+    }}>
+      {children}
+    </span>
+  );
+}
+
+function stringToColor(str: string): string {
+  const colors = [
+    '#6366f1', '#0c66ff', '#10b981', '#8b5cf6',
+    '#f59e0b', '#ef4444', '#06b6d4', '#ec4899',
+    '#84cc16', '#f97316',
+  ];
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return colors[Math.abs(hash) % colors.length]!;
+}

package/src/modules/plugins/components/plugin-ai-assistant-modal.tsx

@@ -0,0 +1,374 @@
+/**
+ * AI Assistant Modal for Plugin Inspector
+ *
+ * Allows users to ask questions about a plugin and get AI-generated answers
+ * based on the plugin's manifest.
+ */
+
+import React, { useState } from 'react';
+import {
+  UIModal,
+  UIInputTextArea,
+  UIButton,
+  UISpace,
+  UITypographyText,
+  UICard,
+  UISpin,
+  UIAlert,
+  UITag,
+  UIDivider,
+  UIRow,
+  UICol,
+  UIIcon,
+} from '@kb-labs/studio-ui-kit';
+import type { PluginAskResponse } from '@kb-labs/studio-data-client';
+import { UIMarkdownViewer } from '@kb-labs/studio-ui-kit';
+
+interface PluginAIAssistantModalProps {
+  open: boolean;
+  onClose: () => void;
+  pluginId: string;
+  pluginName: string;
+  onAsk: (question: string) => Promise<PluginAskResponse>;
+}
+
+interface QAItem {
+  question: string;
+  answer: string;
+  timestamp: Date;
+  usage: {
+    promptTokens: number;
+    completionTokens: number;
+  };
+}
+
+const QUESTION_TEMPLATES = [
+  { label: 'What permissions?', value: 'What permissions does this plugin need and why?' },
+  { label: 'Show CLI commands', value: 'What CLI commands does this plugin provide? List them with their flags and usage.' },
+  { label: 'Show REST APIs', value: 'What REST API endpoints does this plugin expose? Describe their paths, methods, and purpose.' },
+  { label: 'What does it do?', value: 'What does this plugin do? Explain its main features and use cases.' },
+  { label: 'How to configure?', value: 'How do I configure this plugin? What options are available?' },
+  { label: 'What files created?', value: 'What files or directories does this plugin create or modify?' },
+];
+
+export function PluginAIAssistantModal({
+  open,
+  onClose,
+  pluginId,
+  pluginName,
+  onAsk,
+}: PluginAIAssistantModalProps) {
+  const [customQuestion, setCustomQuestion] = useState('');
+  const [history, setHistory] = useState<QAItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleAsk = async (question: string) => {
+    if (!question.trim()) {return;}
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await onAsk(question);
+
+      setHistory((prev) => [
+        {
+          question,
+          answer: response.answer,
+          timestamp: new Date(),
+          usage: response.usage,
+        },
+        ...prev,
+      ]);
+      setCustomQuestion('');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to get AI response');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleTemplateClick = (question: string) => {
+    setCustomQuestion(question);
+  };
+
+  const handleSubmit = () => {
+    handleAsk(customQuestion);
+  };
+
+  return (
+    <UIModal
+      title={
+        <UISpace>
+          <UIIcon name="RobotOutlined" />
+          <span>AI Assistant</span>
+        </UISpace>
+      }
+      open={open}
+      onCancel={onClose}
+      width={800}
+      footer={[
+        <UIButton key="cancel" onClick={onClose}>
+          Close
+        </UIButton>,
+        <UIButton
+          key="ask"
+          variant="primary"
+          icon={<UIIcon name="ThunderboltOutlined" />}
+          loading={loading}
+          onClick={handleSubmit}
+          disabled={!customQuestion.trim()}
+        >
+          Ask Question
+        </UIButton>,
+      ]}
+    >
+      <UISpace direction="vertical" style={{ width: '100%' }} size="large">
+        {/* Plugin Preview */}
+        <UICard size="small" style={{ backgroundColor: '#fafafa' }}>
+          <UIRow gutter={16}>
+            <UICol span={12}>
+              <UITypographyText type="secondary">Plugin:</UITypographyText>
+              <div>
+                <UITypographyText strong>{pluginName}</UITypographyText>
+              </div>
+            </UICol>
+            <UICol span={12}>
+              <UITypographyText type="secondary">Plugin ID:</UITypographyText>
+              <div>
+                <UITypographyText code style={{ fontSize: 12 }}>{pluginId}</UITypographyText>
+              </div>
+            </UICol>
+          </UIRow>
+        </UICard>
+
+        {/* Quick Templates */}
+        <div>
+          <UITypographyText strong>Quick Questions:</UITypographyText>
+          <div style={{ marginTop: 8 }}>
+            <UISpace wrap>
+              {QUESTION_TEMPLATES.map((template) => (
+                <UIButton
+                  key={template.label}
+                  size="small"
+                  onClick={() => handleTemplateClick(template.value)}
+                >
+                  {template.label}
+                </UIButton>
+              ))}
+            </UISpace>
+          </div>
+        </div>
+
+        <UIDivider style={{ margin: '8px 0' }} />
+
+        {/* Custom Question */}
+        <div>
+          <UITypographyText strong>Your Question:</UITypographyText>
+          <UIInputTextArea
+            value={customQuestion}
+            onChange={(e) => setCustomQuestion(e.target.value)}
+            placeholder="Ask anything about this plugin... (e.g., 'How do I use this plugin?')"
+            rows={3}
+            style={{ marginTop: 8 }}
+            onPressEnter={(e) => {
+              if (e.ctrlKey || e.metaKey) {
+                handleSubmit();
+              }
+            }}
+          />
+          <UITypographyText type="secondary" style={{ fontSize: 12, marginTop: 4, display: 'block' }}>
+            Press Ctrl/Cmd + Enter to ask
+          </UITypographyText>
+        </div>
+
+        {/* Error Display */}
+        {error && (
+          <UIAlert
+            message="Error"
+            description={error}
+            variant="error"
+            closable
+            onClose={() => setError(null)}
+            showIcon
+          />
+        )}
+
+        {/* Loading State */}
+        {loading && (
+          <div style={{ textAlign: 'center', padding: '24px 0' }}>
+            <UISpin tip="AI is thinking..." size="large" />
+          </div>
+        )}
+
+        {/* Q&A History */}
+        {history.length > 0 && !loading && (
+          <div>
+            <UIDivider orientation="left" style={{ margin: '16px 0 8px 0' }}>
+              <UITypographyText strong>Conversation History</UITypographyText>
+            </UIDivider>
+            <UISpace direction="vertical" style={{ width: '100%' }} size="middle">
+              {history.map((item, index) => (
+                <UICard
+                  key={index}
+                  size="small"
+                  style={{
+                    backgroundColor: '#fafafa',
+                  }}
+                >
+                  {/* Question */}
+                  <div style={{ marginBottom: 12 }}>
+                    <UISpace style={{ marginBottom: 4 }}>
+                      <UIIcon name="QuestionCircleOutlined" style={{ color: '#1890ff' }} />
+                      <UITypographyText strong>{item.question}</UITypographyText>
+                    </UISpace>
+                  </div>
+
+                  {/* Answer */}
+                  <div
+                    style={{
+                      background: '#fff',
+                      padding: 12,
+                      borderRadius: 4,
+                      border: '1px solid #e8e8e8',
+                      marginBottom: 8,
+                    }}
+                  >
+                    <UIMarkdownViewer content={item.answer} className="plugin-assistant-markdown" />
+                  </div>
+
+                  {/* Metadata */}
+                  <div style={{ textAlign: 'right' }}>
+                    <UISpace size="small">
+                      <UITag icon={<UIIcon name="ClockCircleOutlined" />} color="blue">
+                        {item.timestamp.toLocaleTimeString()}
+                      </UITag>
+                      <UITag color="green">
+                        {item.usage.promptTokens + item.usage.completionTokens} tokens
+                      </UITag>
+                    </UISpace>
+                  </div>
+                </UICard>
+              ))}
+            </UISpace>
+          </div>
+        )}
+
+        {/* Empty State */}
+        {history.length === 0 && !loading && (
+          <div
+            style={{
+              textAlign: 'center',
+              padding: 40,
+              backgroundColor: '#fafafa',
+              borderRadius: 4,
+              border: '1px dashed #d9d9d9',
+            }}
+          >
+            <UIIcon name="RobotOutlined" style={{ fontSize: 48, color: '#d9d9d9', marginBottom: 16 }} />
+            <div style={{ fontSize: 14, color: '#999' }}>
+              Select a quick question or type your own to get started
+            </div>
+          </div>
+        )}
+      </UISpace>
+
+      {/* Custom styles for markdown in modal context */}
+      <style>{`
+        .plugin-assistant-markdown {
+          padding: 0;
+          background: transparent;
+          border-radius: 0;
+        }
+        .plugin-assistant-markdown p {
+          margin: 0 0 8px 0;
+        }
+        .plugin-assistant-markdown p:last-child {
+          margin-bottom: 0;
+        }
+        .plugin-assistant-markdown h1,
+        .plugin-assistant-markdown h2,
+        .plugin-assistant-markdown h3,
+        .plugin-assistant-markdown h4 {
+          margin-top: 12px;
+          margin-bottom: 8px;
+          font-size: 1em;
+          font-weight: 600;
+          border: none;
+          padding: 0;
+        }
+        .plugin-assistant-markdown h1 {
+          font-size: 1.15em;
+        }
+        .plugin-assistant-markdown h2 {
+          font-size: 1.1em;
+        }
+        .plugin-assistant-markdown h3 {
+          font-size: 1.05em;
+        }
+        .plugin-assistant-markdown ul,
+        .plugin-assistant-markdown ol {
+          margin: 8px 0;
+          padding-left: 20px;
+        }
+        .plugin-assistant-markdown li {
+          margin: 4px 0;
+        }
+        .plugin-assistant-markdown code {
+          background: rgba(0, 0, 0, 0.06);
+          padding: 2px 6px;
+          border-radius: 4px;
+          font-size: 0.9em;
+          font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
+        }
+        .plugin-assistant-markdown pre {
+          background: #f5f5f5;
+          padding: 12px 16px;
+          border-radius: 6px;
+          margin: 12px 0;
+          overflow-x: auto;
+        }
+        .plugin-assistant-markdown pre code {
+          background: none;
+          padding: 0;
+          font-size: 0.85em;
+        }
+        .plugin-assistant-markdown table {
+          margin: 12px 0;
+          font-size: 0.9em;
+          width: 100%;
+          border-collapse: collapse;
+        }
+        .plugin-assistant-markdown th,
+        .plugin-assistant-markdown td {
+          padding: 8px 12px;
+          border: 1px solid #e8e8e8;
+          text-align: left;
+        }
+        .plugin-assistant-markdown th {
+          background: #fafafa;
+          font-weight: 600;
+        }
+        .plugin-assistant-markdown blockquote {
+          margin: 12px 0;
+          padding: 8px 16px;
+          border-left: 4px solid #1890ff;
+          background: #f6f8fa;
+          border-radius: 0 4px 4px 0;
+        }
+        .plugin-assistant-markdown strong {
+          font-weight: 600;
+        }
+        .plugin-assistant-markdown a {
+          color: #1890ff;
+        }
+        .plugin-assistant-markdown hr {
+          margin: 16px 0;
+          border: none;
+          border-top: 1px solid #e8e8e8;
+        }
+      `}</style>
+    </UIModal>
+  );
+}

package/src/modules/plugins/components/plugin-card.tsx

@@ -0,0 +1,136 @@
+import {
+  UICard,
+  UITag,
+  UISpace,
+  UITypographyText,
+  UITypographyParagraph,
+  UITooltip,
+  UIIcon,
+} from '@kb-labs/studio-ui-kit';
+import type { PluginManifestEntry } from '@kb-labs/studio-data-client';
+
+interface PluginCardProps {
+  plugin: PluginManifestEntry;
+  onClick: () => void;
+}
+
+export function PluginCard({ plugin, onClick }: PluginCardProps) {
+  const { manifest } = plugin;
+  const display = manifest.display;
+
+  const cliCount = manifest.cli?.commands.length ?? 0;
+  const restCount = manifest.rest?.routes.length ?? 0;
+  const workflowCount = manifest.workflows?.handlers.length ?? 0;
+  const jobCount = manifest.jobs?.handlers.length ?? 0;
+
+  const hasPermissions = !!manifest.permissions;
+  const requiresPlatform = manifest.platform?.requires && manifest.platform.requires.length > 0;
+  const hasValidationErrors = plugin.validation && !plugin.validation.valid;
+
+  return (
+    <UICard
+      hoverable
+      onClick={onClick}
+      style={{ height: '100%', cursor: 'pointer' }}
+      styles={{ body: { display: 'flex', flexDirection: 'column', height: '100%' } }}
+    >
+      <UISpace direction="vertical" size="small" style={{ width: '100%', flex: 1 }}>
+        {/* Header: Icon + Name */}
+        <UISpace align="center" style={{ width: '100%' }}>
+          <span style={{ fontSize: 18, lineHeight: 1, flexShrink: 0, opacity: display?.icon ? 1 : 0.4 }}>
+            {display?.icon || <UIIcon name="AppstoreOutlined" />}
+          </span>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <UITypographyText strong style={{ fontSize: 14 }}>
+              {display?.name || manifest.id}
+            </UITypographyText>
+            <br />
+            <UITypographyText type="secondary" style={{ fontSize: 12 }}>
+              v{manifest.version}
+            </UITypographyText>
+          </div>
+        </UISpace>
+
+        {/* Description */}
+        {display?.description && (
+          <UITypographyParagraph
+            type="secondary"
+            style={{
+              fontSize: 13,
+              marginBottom: 8,
+              lineHeight: 1.4,
+            }}
+            ellipsis={{ rows: 2, tooltip: display.description }}
+          >
+            {display.description}
+          </UITypographyParagraph>
+        )}
+
+        {/* Tags */}
+        {display?.tags && display.tags.length > 0 && (
+          <div style={{ marginBottom: 8 }}>
+            {display.tags.slice(0, 3).map((tag) => (
+              <UITag key={tag} style={{ fontSize: 11, marginBottom: 4 }}>
+                {tag}
+              </UITag>
+            ))}
+            {display.tags.length > 3 && (
+              <UITag style={{ fontSize: 11 }}>+{display.tags.length - 3}</UITag>
+            )}
+          </div>
+        )}
+
+        {/* Capabilities */}
+        <UISpace wrap size={4}>
+          {cliCount > 0 && (
+            <UITooltip title={`${cliCount} CLI command${cliCount > 1 ? 's' : ''}`}>
+              <UITag icon={<UIIcon name="CodeOutlined" />} color="blue">
+                {cliCount}
+              </UITag>
+            </UITooltip>
+          )}
+          {restCount > 0 && (
+            <UITooltip title={`${restCount} REST route${restCount > 1 ? 's' : ''}`}>
+              <UITag icon={<UIIcon name="ApiOutlined" />} color="green">
+                {restCount}
+              </UITag>
+            </UITooltip>
+          )}
+          {workflowCount > 0 && (
+            <UITooltip title={`${workflowCount} workflow${workflowCount > 1 ? 's' : ''}`}>
+              <UITag icon={<UIIcon name="NodeIndexOutlined" />} color="purple">
+                {workflowCount}
+              </UITag>
+            </UITooltip>
+          )}
+          {jobCount > 0 && (
+            <UITooltip title={`${jobCount} scheduled job${jobCount > 1 ? 's' : ''}`}>
+              <UITag icon={<UIIcon name="ClockCircleOutlined" />} color="orange">
+                {jobCount}
+              </UITag>
+            </UITooltip>
+          )}
+        </UISpace>
+
+        {/* Indicators */}
+        <UISpace wrap size={4} style={{ marginTop: 'auto' }}>
+          {hasValidationErrors && (
+            <UITooltip title={`${plugin.validation!.errors.length} validation error${plugin.validation!.errors.length > 1 ? 's' : ''}`}>
+              <UITag icon={<UIIcon name="CloseCircleOutlined" />} color="red" style={{ fontSize: 11 }}>Invalid</UITag>
+            </UITooltip>
+          )}
+          {hasPermissions && (
+            <UITooltip title="Requires permissions">
+              <UITag icon={<UIIcon name="WarningOutlined" />} color="gold" style={{ fontSize: 11 }}>Permissions</UITag>
+            </UITooltip>
+          )}
+          {requiresPlatform && (
+            <UITooltip title={`Requires: ${manifest.platform!.requires!.join(', ')}`}>
+              <UITag icon={<UIIcon name="CheckCircleOutlined" />} color="cyan" style={{ fontSize: 11 }}>Platform</UITag>
+            </UITooltip>
+          )}
+        </UISpace>
+      </UISpace>
+    </UICard>
+  );
+}