@kb-labs/studio-app 0.7.0 → 2.8.0

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

@@ -1,153 +0,0 @@
-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

@@ -1,374 +0,0 @@
-/**
- * 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

@@ -1,136 +0,0 @@
-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>
-  );
-}