@kb-labs/studio-app 0.6.0

package/src/modules/plugins/components/plugin-detail/permissions/resource-quotas.tsx

@@ -0,0 +1,96 @@
+import { UICard, UIText, useUITheme } from '@kb-labs/studio-ui-kit';
+
+interface ResourceQuotasProps {
+  quotas: {
+    timeoutMs?: number;
+    memoryMb?: number;
+    cpuMs?: number;
+  };
+}
+
+export function ResourceQuotas({ quotas }: ResourceQuotasProps) {
+  const { token } = useUITheme();
+
+  return (
+    <UICard title="Resource Quotas">
+      <UIText color="secondary" style={{ marginBottom: 16, display: 'block' }}>
+        Maximum resource limits for this plugin to prevent runaway processes and ensure system
+        stability.
+      </UIText>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+          gap: 16,
+        }}
+      >
+        {quotas.timeoutMs && (
+          <UICard size="small">
+            <div style={{ textAlign: 'center' }}>
+              <UIText
+                color="secondary"
+                style={{
+                  fontSize: token.fontSizeSM,
+                  display: 'block',
+                  marginBottom: 8,
+                }}
+              >
+                Timeout
+              </UIText>
+              <UIText weight="semibold" style={{ fontSize: 20 }}>
+                {quotas.timeoutMs}
+              </UIText>
+              <UIText color="secondary" style={{ fontSize: token.fontSizeSM }}>
+                ms
+              </UIText>
+            </div>
+          </UICard>
+        )}
+        {quotas.memoryMb && (
+          <UICard size="small">
+            <div style={{ textAlign: 'center' }}>
+              <UIText
+                color="secondary"
+                style={{
+                  fontSize: token.fontSizeSM,
+                  display: 'block',
+                  marginBottom: 8,
+                }}
+              >
+                Memory
+              </UIText>
+              <UIText weight="semibold" style={{ fontSize: 20 }}>
+                {quotas.memoryMb}
+              </UIText>
+              <UIText color="secondary" style={{ fontSize: token.fontSizeSM }}>
+                MB
+              </UIText>
+            </div>
+          </UICard>
+        )}
+        {quotas.cpuMs && (
+          <UICard size="small">
+            <div style={{ textAlign: 'center' }}>
+              <UIText
+                color="secondary"
+                style={{
+                  fontSize: token.fontSizeSM,
+                  display: 'block',
+                  marginBottom: 8,
+                }}
+              >
+                CPU Time
+              </UIText>
+              <UIText weight="semibold" style={{ fontSize: 20 }}>
+                {quotas.cpuMs}
+              </UIText>
+              <UIText color="secondary" style={{ fontSize: token.fontSizeSM }}>
+                ms
+              </UIText>
+            </div>
+          </UICard>
+        )}
+      </div>
+    </UICard>
+  );
+}

package/src/modules/plugins/components/plugin-detail/permissions/shell-permissions.tsx

@@ -0,0 +1,55 @@
+import { UISpace, UIAlert, UICard, UIText, UIIcon, useUITheme } from '@kb-labs/studio-ui-kit';
+
+interface ShellPermissionsProps {
+  permissions: {
+    allow?: string[];
+  };
+}
+
+export function ShellPermissions({ permissions }: ShellPermissionsProps) {
+  const { token } = useUITheme();
+
+  return (
+    <UICard
+      title={
+        <UISpace>
+          <UIIcon name="ConsoleSqlOutlined" />
+          <span>Shell Permissions</span>
+        </UISpace>
+      }
+    >
+      <UIText color="secondary" style={{ marginBottom: 16, display: 'block' }}>
+        Shell commands that this plugin is allowed to execute. Shell access is restricted by
+        default for security.
+      </UIText>
+      {permissions.allow && permissions.allow.length > 0 ? (
+        <div>
+          <UIText weight="semibold">Allowed Commands:</UIText>
+          <div style={{ marginTop: 8 }}>
+            <UISpace direction="vertical" style={{ width: '100%' }}>
+              {permissions.allow.map((cmd: string, idx: number) => (
+                <div key={idx} style={{ marginBottom: 4 }}>
+                  <UIText
+                    style={{
+                      fontSize: token.fontSizeSM,
+                      fontFamily: token.fontFamilyCode,
+                    }}
+                  >
+                    {cmd}
+                  </UIText>
+                </div>
+              ))}
+            </UISpace>
+          </div>
+        </div>
+      ) : (
+        <UIAlert
+          variant="warning"
+          message="Shell access disabled"
+          description="This plugin has no shell execution permissions."
+          showIcon
+        />
+      )}
+    </UICard>
+  );
+}

package/src/modules/plugins/components/plugin-detail/permissions-view.tsx

@@ -0,0 +1,47 @@
+import { UISpace, UIEmptyState, UICard } from '@kb-labs/studio-ui-kit';
+import { FilesystemPermissions } from './permissions/filesystem-permissions';
+import { NetworkPermissions } from './permissions/network-permissions';
+import { EnvPermissions } from './permissions/env-permissions';
+import { ShellPermissions } from './permissions/shell-permissions';
+import { PlatformServices } from './permissions/platform-services';
+import { ResourceQuotas } from './permissions/resource-quotas';
+
+interface PermissionsViewProps {
+  permissions: any;
+}
+
+export function PermissionsView({ permissions }: PermissionsViewProps) {
+  if (!permissions) {
+    return (
+      <UICard>
+        <UIEmptyState description="No permissions specified for this plugin" />
+      </UICard>
+    );
+  }
+
+  return (
+    <UISpace direction="vertical" size="large" style={{ width: '100%' }}>
+      {/* Filesystem Permissions */}
+      {permissions.fs && <FilesystemPermissions permissions={permissions.fs} />}
+
+      {/* Network Permissions */}
+      {permissions.network?.fetch && permissions.network.fetch.length > 0 && (
+        <NetworkPermissions permissions={permissions.network} />
+      )}
+
+      {/* Environment Variables */}
+      {permissions.env?.read && permissions.env.read.length > 0 && (
+        <EnvPermissions permissions={permissions.env} />
+      )}
+
+      {/* Shell Permissions */}
+      {permissions.shell && <ShellPermissions permissions={permissions.shell} />}
+
+      {/* Platform Services */}
+      {permissions.platform && <PlatformServices permissions={permissions.platform} />}
+
+      {/* Quotas */}
+      {permissions.quotas && <ResourceQuotas quotas={permissions.quotas} />}
+    </UISpace>
+  );
+}

package/src/modules/plugins/components/plugin-detail/plugin-header.tsx

@@ -0,0 +1,169 @@
+import { UISpace, UIAccordion, UICard, UIText, UITitle, UITag, UIIcon, useUITheme } from '@kb-labs/studio-ui-kit';
+import type { PluginManifestEntry } from '@kb-labs/studio-data-client';
+
+interface PluginHeaderProps {
+  plugin: PluginManifestEntry;
+}
+
+export function PluginHeader({ plugin }: PluginHeaderProps) {
+  const { token } = useUITheme();
+  const { manifest } = plugin;
+  const display = manifest.display;
+
+  return (
+    <UICard>
+      <UISpace direction="vertical" size="middle" style={{ width: '100%' }}>
+        {/* Icon + Name + Version */}
+        <UISpace align="start" size="large">
+          <div style={{ fontSize: 64, lineHeight: 1 }}>{display?.icon || ''}</div>
+          <div style={{ flex: 1 }}>
+            <UITitle level={2} style={{ marginBottom: 4 }}>
+              {display?.name || manifest.id}
+            </UITitle>
+            <UISpace size="middle">
+              <UIText color="secondary" style={{ fontSize: 16 }}>
+                v{manifest.version}
+              </UIText>
+              <UITag color="blue">
+                {typeof plugin.source === 'string'
+                  ? plugin.source
+                  : plugin.source?.kind || 'unknown'}
+              </UITag>
+              <UITag>{manifest.schema}</UITag>
+            </UISpace>
+          </div>
+        </UISpace>
+
+        {/* Description */}
+        {display?.description && (
+          <UIText style={{ fontSize: 15, marginBottom: 0, color: token.colorTextSecondary }}>
+            {display.description}
+          </UIText>
+        )}
+
+        {/* Tags */}
+        {display?.tags && display.tags.length > 0 && (
+          <UISpace wrap>
+            {display.tags.map((tag, idx) => (
+              <UITag key={typeof tag === 'string' ? tag : `tag-${idx}`} color="default">
+                {typeof tag === 'string' ? tag : JSON.stringify(tag)}
+              </UITag>
+            ))}
+          </UISpace>
+        )}
+
+        {/* Metadata Row */}
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+            gap: 16,
+            marginTop: 8,
+          }}
+        >
+          {display?.author && (
+            <div>
+              <UIText
+                color="secondary"
+                style={{ fontSize: token.fontSizeSM, display: 'block', marginBottom: 4 }}
+              >
+                Author
+              </UIText>
+              <UISpace>
+                <UIIcon name="UserOutlined" />
+                <UIText>{display.author}</UIText>
+              </UISpace>
+            </div>
+          )}
+          <div>
+            <UIText
+              color="secondary"
+              style={{ fontSize: token.fontSizeSM, display: 'block', marginBottom: 4 }}
+            >
+              Plugin ID
+            </UIText>
+            <UIText style={{ fontFamily: token.fontFamilyCode }}>{manifest.id}</UIText>
+          </div>
+        </div>
+
+        {/* Links */}
+        {(display?.homepage || display?.repository) && (
+          <UISpace size="large">
+            {display?.homepage && (
+              <a href={display.homepage} target="_blank" rel="noopener noreferrer">
+                <UISpace>
+                  <UIIcon name="GlobalOutlined" />
+                  Homepage
+                </UISpace>
+              </a>
+            )}
+            {display?.repository && (
+              <a href={display.repository} target="_blank" rel="noopener noreferrer">
+                <UISpace>
+                  <UIIcon name="LinkOutlined" />
+                  Repository
+                </UISpace>
+              </a>
+            )}
+          </UISpace>
+        )}
+
+        {/* Timestamps */}
+        {(plugin.discoveredAt || plugin.buildTimestamp) && (
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+              gap: 16,
+            }}
+          >
+            {plugin.discoveredAt && (
+              <div>
+                <UIText
+                  color="secondary"
+                  style={{ fontSize: token.fontSizeSM, display: 'block', marginBottom: 4 }}
+                >
+                  Discovered At
+                </UIText>
+                <UISpace>
+                  <UIIcon name="SearchOutlined" />
+                  <UIText>{new Date(plugin.discoveredAt).toLocaleString()}</UIText>
+                </UISpace>
+              </div>
+            )}
+            {plugin.buildTimestamp && (
+              <div>
+                <UIText
+                  color="secondary"
+                  style={{ fontSize: token.fontSizeSM, display: 'block', marginBottom: 4 }}
+                >
+                  Last Built
+                </UIText>
+                <UISpace>
+                  <UIIcon name="ClockCircleOutlined" />
+                  <UIText>{new Date(plugin.buildTimestamp).toLocaleString()}</UIText>
+                </UISpace>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Plugin Root (collapsible) */}
+        <UIAccordion
+          ghost
+          items={[
+            {
+              key: 'root',
+              label: 'Plugin Root Path',
+              children: (
+                <UIText style={{ fontSize: token.fontSizeSM, fontFamily: token.fontFamilyCode }}>
+                  {plugin.pluginRoot}
+                </UIText>
+              ),
+            },
+          ]}
+        />
+      </UISpace>
+    </UICard>
+  );
+}

package/src/modules/plugins/components/plugin-detail/rest-routes-table.tsx

@@ -0,0 +1,159 @@
+import { UITable, UIAlert, UICard, UIText, UITag, UITitle, useUITheme, type UITableColumn } from '@kb-labs/studio-ui-kit';
+
+interface RestRoutesTableProps {
+  routes: any[];
+  basePath?: string;
+  apiBasePath?: string;
+}
+
+export function RestRoutesTable({ routes, basePath, apiBasePath }: RestRoutesTableProps) {
+  const { token } = useUITheme();
+
+  // Combine API base path with plugin base path, avoiding duplicate /v1
+  const fullBasePath =
+    apiBasePath && basePath
+      ? basePath.startsWith('/v1')
+        ? apiBasePath + basePath.slice(3) // Remove /v1 from plugin basePath if API already has /api/v1
+        : apiBasePath + basePath
+      : basePath || '';
+
+  const columns: UITableColumn<any>[] = [
+    {
+      title: 'Method',
+      dataIndex: 'method',
+      key: 'method',
+      width: 100,
+      render: (method) => {
+        const colors: Record<string, string> = {
+          GET: 'green',
+          POST: 'blue',
+          PUT: 'orange',
+          PATCH: 'purple',
+          DELETE: 'red',
+        };
+        return <UITag color={colors[method] || 'default'}>{method}</UITag>;
+      },
+    },
+    {
+      title: 'Path',
+      dataIndex: 'path',
+      key: 'path',
+      render: (path) => (
+        <UIText style={{ fontFamily: token.fontFamilyCode }}>
+          {fullBasePath}
+          {path}
+        </UIText>
+      ),
+    },
+    {
+      title: 'Description',
+      dataIndex: 'description',
+      key: 'description',
+      render: (desc) => (typeof desc === 'string' ? desc : desc ? JSON.stringify(desc) : '--'),
+    },
+    {
+      title: 'Timeout',
+      dataIndex: 'timeoutMs',
+      key: 'timeoutMs',
+      render: (timeout) => (timeout ? `${timeout}ms` : '--'),
+    },
+    {
+      title: 'Handler',
+      dataIndex: 'handler',
+      key: 'handler',
+      render: (handler) => (
+        <UIText style={{ fontSize: 11, fontFamily: token.fontFamilyCode }}>
+          {handler}
+        </UIText>
+      ),
+    },
+  ];
+
+  const formatSchemaRef = (schema: any): string => {
+    if (!schema) {
+      return '--';
+    }
+    if (typeof schema === 'string') {
+      return schema;
+    }
+    if ('$ref' in schema) {
+      return schema.$ref;
+    }
+    if ('zod' in schema) {
+      return schema.zod;
+    }
+    return JSON.stringify(schema);
+  };
+
+  return (
+    <UICard>
+      {fullBasePath && (
+        <UIAlert
+          message={
+            <span>
+              Base Path:{' '}
+              <UIText style={{ fontFamily: token.fontFamilyCode }}>
+                {fullBasePath}
+              </UIText>
+            </span>
+          }
+          variant="info"
+          style={{ marginBottom: 16 }}
+        />
+      )}
+      <UITable
+        columns={columns}
+        dataSource={routes}
+        rowKey={(record) => `${record.method} ${record.path}`}
+        pagination={false}
+        expandable={{
+          expandedRowRender: (record) => {
+            const hasInput = record.input;
+            const hasOutput = record.output;
+            const hasErrors = record.errors && record.errors.length > 0;
+
+            if (!hasInput && !hasOutput && !hasErrors) {
+              return null;
+            }
+
+            return (
+              <div style={{ margin: 0, paddingLeft: 48 }}>
+                {hasInput && (
+                  <div style={{ marginBottom: 16 }}>
+                    <UITitle level={5}>
+                      {record.method === 'GET' ? 'Query Parameters' : 'Request Body'}
+                    </UITitle>
+                    <UIText style={{ fontFamily: token.fontFamilyCode }}>
+                      {formatSchemaRef(record.input)}
+                    </UIText>
+                  </div>
+                )}
+                {hasOutput && (
+                  <div style={{ marginBottom: 16 }}>
+                    <UITitle level={5}>Response</UITitle>
+                    <UIText style={{ fontFamily: token.fontFamilyCode }}>
+                      {formatSchemaRef(record.output)}
+                    </UIText>
+                  </div>
+                )}
+                {hasErrors && (
+                  <div>
+                    <UITitle level={5}>Error Responses</UITitle>
+                    {record.errors.map((error: any, idx: number) => (
+                      <div key={idx} style={{ marginBottom: 8 }}>
+                        <UITag color="red">{error.code}</UITag>
+                        <UIText>{error.message || '--'}</UIText>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            );
+          },
+          rowExpandable: (record) =>
+            !!(record.input || record.output || (record.errors && record.errors.length > 0)),
+        }}
+      />
+    </UICard>
+  );
+}

package/src/modules/plugins/components/plugin-detail/workflows-table.tsx

@@ -0,0 +1,40 @@
+import { UITable, UICard, UIText, useUITheme, type UITableColumn } from '@kb-labs/studio-ui-kit';
+
+interface WorkflowsTableProps {
+  handlers: any[];
+}
+
+export function WorkflowsTable({ handlers }: WorkflowsTableProps) {
+  const { token } = useUITheme();
+
+  const columns: UITableColumn<any>[] = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+      render: (id) => <UIText style={{ fontFamily: token.fontFamilyCode }}>{id}</UIText>,
+    },
+    {
+      title: 'Description',
+      dataIndex: 'describe',
+      key: 'describe',
+      render: (desc) => (typeof desc === 'string' ? desc : desc ? JSON.stringify(desc) : '--'),
+    },
+    {
+      title: 'Handler',
+      dataIndex: 'handler',
+      key: 'handler',
+      render: (handler) => (
+        <UIText style={{ fontSize: 11, fontFamily: token.fontFamilyCode }}>
+          {handler}
+        </UIText>
+      ),
+    },
+  ];
+
+  return (
+    <UICard>
+      <UITable columns={columns} dataSource={handlers} rowKey="id" pagination={false} />
+    </UICard>
+  );
+}

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

@@ -0,0 +1,20 @@
+import { UIRow, UICol } from '@kb-labs/studio-ui-kit';
+import type { PluginManifestEntry } from '@kb-labs/studio-data-client';
+import { PluginCard } from './plugin-card';
+
+interface PluginGridProps {
+  plugins: PluginManifestEntry[];
+  onPluginClick: (plugin: PluginManifestEntry) => void;
+}
+
+export function PluginGrid({ plugins, onPluginClick }: PluginGridProps) {
+  return (
+    <UIRow gutter={[16, 16]}>
+      {plugins.map((plugin) => (
+        <UICol key={plugin.pluginId} xs={24} sm={12} lg={8} xl={6}>
+          <PluginCard plugin={plugin} onClick={() => onPluginClick(plugin)} />
+        </UICol>
+      ))}
+    </UIRow>
+  );
+}