@kb-labs/studio-app 0.6.0

package/src/modules/plugins/components/plugin-detail/capabilities-summary.tsx

@@ -0,0 +1,101 @@
+import { UISpace, UIAlert, UICard, UITag, UIIcon } from '@kb-labs/studio-ui-kit';
+
+interface CapabilitiesSummaryProps {
+  cliCommands: any[];
+  restRoutes: any[];
+  workflowHandlers: any[];
+  jobs: any[];
+  permissions?: any;
+  platformReqs?: {
+    requires?: string[];
+  };
+}
+
+export function CapabilitiesSummary({
+  cliCommands,
+  restRoutes,
+  workflowHandlers,
+  jobs,
+  permissions,
+  platformReqs,
+}: CapabilitiesSummaryProps) {
+  return (
+    <UICard title="Capabilities">
+      <UISpace direction="vertical" size="middle" style={{ width: '100%' }}>
+        <UISpace wrap size="large">
+          {cliCommands.length > 0 && (
+            <div>
+              <UITag
+                icon={<UIIcon name="CodeOutlined" />}
+                color="blue"
+                style={{ fontSize: 14, padding: '4px 12px' }}
+              >
+                {cliCommands.length} CLI Command{cliCommands.length > 1 ? 's' : ''}
+              </UITag>
+            </div>
+          )}
+          {restRoutes.length > 0 && (
+            <div>
+              <UITag
+                icon={<UIIcon name="ApiOutlined" />}
+                color="green"
+                style={{ fontSize: 14, padding: '4px 12px' }}
+              >
+                {restRoutes.length} REST Route{restRoutes.length > 1 ? 's' : ''}
+              </UITag>
+            </div>
+          )}
+          {workflowHandlers.length > 0 && (
+            <div>
+              <UITag
+                icon={<UIIcon name="NodeIndexOutlined" />}
+                color="purple"
+                style={{ fontSize: 14, padding: '4px 12px' }}
+              >
+                {workflowHandlers.length} Workflow{workflowHandlers.length > 1 ? 's' : ''}
+              </UITag>
+            </div>
+          )}
+          {jobs.length > 0 && (
+            <div>
+              <UITag
+                icon={<UIIcon name="ClockCircleOutlined" />}
+                color="orange"
+                style={{ fontSize: 14, padding: '4px 12px' }}
+              >
+                {jobs.length} Scheduled Job{jobs.length > 1 ? 's' : ''}
+              </UITag>
+            </div>
+          )}
+        </UISpace>
+
+        {permissions && (
+          <UIAlert
+            icon={<UIIcon name="LockOutlined" />}
+            variant="warning"
+            message="This plugin requires permissions"
+            description="See Permissions tab for details"
+            showIcon
+          />
+        )}
+        {platformReqs?.requires && platformReqs.requires.length > 0 && (
+          <UIAlert
+            icon={<UIIcon name="DatabaseOutlined" />}
+            variant="info"
+            message="Platform Requirements"
+            description={
+              <UISpace wrap>
+                {platformReqs.requires.map((req) => (
+                  <UITag key={req} color="cyan">
+                    {req}
+                  </UITag>
+                ))}
+              </UISpace>
+            }
+            showIcon
+          />
+        )}
+      </UISpace>
+    </UICard>
+  );
+}

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

@@ -0,0 +1,101 @@
+import { UITable, UISpace, UICard, UIText, UITag, UITitle, useUITheme, type UITableColumn } from '@kb-labs/studio-ui-kit';
+
+interface CLICommandsTableProps {
+  commands: any[];
+}
+
+export function CLICommandsTable({ commands }: CLICommandsTableProps) {
+  const { token } = useUITheme();
+
+  const columns: UITableColumn<any>[] = [
+    {
+      title: 'Command',
+      dataIndex: 'id',
+      key: 'id',
+      render: (id, record) => (
+        <div>
+          <UIText weight="semibold" style={{ fontFamily: token.fontFamilyCode }}>
+            {record.group ? `${record.group}:${id}` : id}
+          </UIText>
+        </div>
+      ),
+    },
+    {
+      title: 'Description',
+      dataIndex: 'describe',
+      key: 'describe',
+      render: (desc) => (typeof desc === 'string' ? desc : desc ? JSON.stringify(desc) : '--'),
+    },
+    {
+      title: 'Flags',
+      dataIndex: 'flags',
+      key: 'flags',
+      render: (flags) => {
+        return flags?.length > 0 ? (
+          <UISpace wrap>
+            {flags.map((flag: any) => (
+              <UITag key={flag.name}>
+                --{flag.name}
+                {flag.required && <UIText color="error">*</UIText>}
+              </UITag>
+            ))}
+          </UISpace>
+        ) : (
+          <UIText color="secondary">None</UIText>
+        );
+      },
+    },
+    {
+      title: 'Handler',
+      dataIndex: 'handler',
+      key: 'handler',
+      render: (handler) => (
+        <UIText style={{ fontSize: 11, fontFamily: token.fontFamilyCode }}>
+          {handler}
+        </UIText>
+      ),
+    },
+  ];
+
+  return (
+    <UICard>
+      <UITable
+        columns={columns}
+        dataSource={commands}
+        rowKey="id"
+        pagination={false}
+        expandable={{
+          expandedRowRender: (record) =>
+            record.flags && record.flags.length > 0 ? (
+              <div style={{ margin: 0, paddingLeft: 48 }}>
+                <UITitle level={5}>Flags</UITitle>
+                {record.flags.map((flag: any) => (
+                  <div key={flag.name} style={{ marginBottom: 8 }}>
+                    <UIText style={{ fontFamily: token.fontFamilyCode }}>
+                      --{flag.name}
+                    </UIText>
+                    {flag.alias && <UIText color="secondary"> (-{flag.alias})</UIText>}
+                    {flag.required && <UITag color="red">Required</UITag>}
+                    <UITag>{flag.type}</UITag>
+                    {flag.default !== undefined && (
+                      <UITag color="blue">
+                        Default: {typeof flag.default === 'object' ? JSON.stringify(flag.default) : String(flag.default)}
+                      </UITag>
+                    )}
+                    {flag.choices && flag.choices.length > 0 && (
+                      <UITag color="cyan">
+                        Choices: {flag.choices.join(', ')}
+                      </UITag>
+                    )}
+                    <div>
+                      <UIText color="secondary">{flag.description || '--'}</UIText>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : null,
+        }}
+      />
+    </UICard>
+  );
+}

package/src/modules/plugins/components/plugin-detail/index.ts

@@ -0,0 +1,7 @@
+export { PluginHeader } from './plugin-header';
+export { CapabilitiesSummary } from './capabilities-summary';
+export { CLICommandsTable } from './cli-commands-table';
+export { RestRoutesTable } from './rest-routes-table';
+export { WorkflowsTable } from './workflows-table';
+export { JobsTable } from './jobs-table';
+export { PermissionsView } from './permissions-view';

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

@@ -0,0 +1,64 @@
+import { UITable, UICard, UIText, UITag, useUITheme, type UITableColumn } from '@kb-labs/studio-ui-kit';
+
+interface JobsTableProps {
+  jobs: any[];
+}
+
+export function JobsTable({ jobs }: JobsTableProps) {
+  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: 'Schedule',
+      dataIndex: 'schedule',
+      key: 'schedule',
+      render: (schedule) =>
+        schedule ? (
+          <UITag color="orange">{schedule}</UITag>
+        ) : (
+          <UIText color="secondary">Manual</UIText>
+        ),
+    },
+    {
+      title: 'Enabled',
+      dataIndex: 'enabled',
+      key: 'enabled',
+      render: (enabled) =>
+        enabled !== false ? <UITag color="green">Yes</UITag> : <UITag color="red">No</UITag>,
+    },
+    {
+      title: 'Priority',
+      dataIndex: 'priority',
+      key: 'priority',
+      render: (priority) => priority || 5,
+    },
+    {
+      title: 'Handler',
+      dataIndex: 'handler',
+      key: 'handler',
+      render: (handler) => (
+        <UIText style={{ fontSize: 11, fontFamily: token.fontFamilyCode }}>
+          {handler}
+        </UIText>
+      ),
+    },
+  ];
+
+  return (
+    <UICard>
+      <UITable columns={columns} dataSource={jobs} rowKey="id" pagination={false} />
+    </UICard>
+  );
+}

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

@@ -0,0 +1,30 @@
+import { UISpace, UICard, UIText, UITag } from '@kb-labs/studio-ui-kit';
+
+interface EnvPermissionsProps {
+  permissions: {
+    read: string[];
+  };
+}
+
+export function EnvPermissions({ permissions }: EnvPermissionsProps) {
+  return (
+    <UICard title="Environment Variables">
+      <UIText color="secondary" style={{ marginBottom: 16, display: 'block' }}>
+        System environment variables that this plugin can access. Used for configuration and
+        secrets management.
+      </UIText>
+      <div>
+        <UIText weight="bold">Read Access:</UIText>
+        <div style={{ marginTop: 8 }}>
+          <UISpace wrap>
+            {permissions.read.map((env: string, idx: number) => (
+              <UITag key={idx} color="cyan">
+                {env}
+              </UITag>
+            ))}
+          </UISpace>
+        </div>
+      </div>
+    </UICard>
+  );
+}

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

@@ -0,0 +1,68 @@
+import { UISpace, UICard, UIText, UIIcon, useUITheme } from '@kb-labs/studio-ui-kit';
+
+interface FilesystemPermissionsProps {
+  permissions: {
+    read?: string[];
+    write?: string[];
+  };
+}
+
+export function FilesystemPermissions({ permissions }: FilesystemPermissionsProps) {
+  const { token } = useUITheme();
+
+  return (
+    <UICard
+      title={
+        <UISpace>
+          <UIIcon name="LockOutlined" />
+          <span>Filesystem Permissions</span>
+        </UISpace>
+      }
+    >
+      <UIText color="secondary" style={{ marginBottom: 16, display: 'block' }}>
+        File and directory access patterns that this plugin is allowed to use. Read access allows
+        viewing files, write access allows creating or modifying files.
+      </UIText>
+      <UISpace direction="vertical" size="middle" style={{ width: '100%' }}>
+        {permissions.read && permissions.read.length > 0 && (
+          <div>
+            <UIText weight="semibold">Read Access:</UIText>
+            <div style={{ marginTop: 8 }}>
+              {permissions.read.map((path: string, idx: number) => (
+                <div key={idx} style={{ marginBottom: 4 }}>
+                  <UIText
+                    style={{
+                      fontSize: token.fontSizeSM,
+                      fontFamily: token.fontFamilyCode,
+                    }}
+                  >
+                    {path}
+                  </UIText>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+        {permissions.write && permissions.write.length > 0 && (
+          <div>
+            <UIText weight="semibold">Write Access:</UIText>
+            <div style={{ marginTop: 8 }}>
+              {permissions.write.map((path: string, idx: number) => (
+                <div key={idx} style={{ marginBottom: 4 }}>
+                  <UIText
+                    style={{
+                      fontSize: token.fontSizeSM,
+                      fontFamily: token.fontFamilyCode,
+                    }}
+                  >
+                    {path}
+                  </UIText>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </UISpace>
+    </UICard>
+  );
+}

package/src/modules/plugins/components/plugin-detail/permissions/index.ts

@@ -0,0 +1,6 @@
+export { FilesystemPermissions } from './filesystem-permissions';
+export { NetworkPermissions } from './network-permissions';
+export { EnvPermissions } from './env-permissions';
+export { ShellPermissions } from './shell-permissions';
+export { PlatformServices } from './platform-services';
+export { ResourceQuotas } from './resource-quotas';

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

@@ -0,0 +1,43 @@
+import { UISpace, UICard, UIText, UIIcon, useUITheme } from '@kb-labs/studio-ui-kit';
+
+interface NetworkPermissionsProps {
+  permissions: {
+    fetch: string[];
+  };
+}
+
+export function NetworkPermissions({ permissions }: NetworkPermissionsProps) {
+  const { token } = useUITheme();
+
+  return (
+    <UICard
+      title={
+        <UISpace>
+          <UIIcon name="GlobalOutlined" />
+          <span>Network Permissions</span>
+        </UISpace>
+      }
+    >
+      <UIText color="secondary" style={{ marginBottom: 16, display: 'block' }}>
+        External hosts and APIs that this plugin can communicate with over the network.
+      </UIText>
+      <div>
+        <UIText weight="semibold">Allowed Hosts:</UIText>
+        <div style={{ marginTop: 8 }}>
+          {permissions.fetch.map((host: string, idx: number) => (
+            <div key={idx} style={{ marginBottom: 4 }}>
+              <UIText
+                style={{
+                  fontSize: token.fontSizeSM,
+                  fontFamily: token.fontFamilyCode,
+                }}
+              >
+                {host}
+              </UIText>
+            </div>
+          ))}
+        </div>
+      </div>
+    </UICard>
+  );
+}

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

@@ -0,0 +1,242 @@
+import { UISpace, UICard, UIText, UITag, UIIcon, useUITheme } from '@kb-labs/studio-ui-kit';
+
+interface PlatformServicesProps {
+  permissions: any;
+}
+
+export function PlatformServices({ permissions }: PlatformServicesProps) {
+  const { token } = useUITheme();
+
+  return (
+    <UICard
+      title={
+        <UISpace>
+          <UIIcon name="DatabaseOutlined" />
+          <span>Platform Services</span>
+        </UISpace>
+      }
+    >
+      <UIText color="secondary" style={{ marginBottom: 16, display: 'block' }}>
+        Access to KB Labs platform services like LLM, vector store, cache, and analytics.
+      </UIText>
+      <UISpace direction="vertical" size="middle" style={{ width: '100%' }}>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+            gap: 12,
+          }}
+        >
+          {/* LLM Service */}
+          {permissions.llm !== undefined && (
+            <UICard size="small">
+              <UISpace direction="vertical" size="small">
+                <UISpace>
+                  {permissions.llm ? (
+                    <UIIcon name="CheckCircleOutlined" style={{ color: token.colorSuccess }} />
+                  ) : (
+                    <UIIcon name="WarningOutlined" style={{ color: token.colorTextDisabled }} />
+                  )}
+                  <UIText weight="semibold">LLM Service</UIText>
+                </UISpace>
+                {typeof permissions.llm === 'object' && permissions.llm.models && (
+                  <div>
+                    <UIText color="secondary" style={{ fontSize: token.fontSizeSM }}>
+                      Models:
+                    </UIText>
+                    <div style={{ marginTop: 4 }}>
+                      <UISpace wrap size="small">
+                        {permissions.llm.models.map((model: string, idx: number) => (
+                          <UITag key={idx} color="blue" style={{ fontSize: 11 }}>
+                            {model}
+                          </UITag>
+                        ))}
+                      </UISpace>
+                    </div>
+                  </div>
+                )}
+              </UISpace>
+            </UICard>
+          )}
+
+          {/* Vector Store */}
+          {permissions.vectorStore !== undefined && (
+            <UICard size="small">
+              <UISpace direction="vertical" size="small">
+                <UISpace>
+                  {permissions.vectorStore ? (
+                    <UIIcon name="CheckCircleOutlined" style={{ color: token.colorSuccess }} />
+                  ) : (
+                    <UIIcon name="WarningOutlined" style={{ color: token.colorTextDisabled }} />
+                  )}
+                  <UIText weight="semibold">Vector Store</UIText>
+                </UISpace>
+                {typeof permissions.vectorStore === 'object' &&
+                  permissions.vectorStore.collections && (
+                    <div>
+                      <UIText color="secondary" style={{ fontSize: token.fontSizeSM }}>
+                        Collections:
+                      </UIText>
+                      <div style={{ marginTop: 4 }}>
+                        <UISpace wrap size="small">
+                          {permissions.vectorStore.collections.map((col: string, idx: number) => (
+                            <UITag key={idx} color="purple" style={{ fontSize: 11 }}>
+                              {col}
+                            </UITag>
+                          ))}
+                        </UISpace>
+                      </div>
+                    </div>
+                  )}
+              </UISpace>
+            </UICard>
+          )}
+
+          {/* Cache */}
+          {permissions.cache !== undefined && (
+            <UICard size="small">
+              <UISpace direction="vertical" size="small">
+                <UISpace>
+                  {permissions.cache ? (
+                    <UIIcon name="CheckCircleOutlined" style={{ color: token.colorSuccess }} />
+                  ) : (
+                    <UIIcon name="WarningOutlined" style={{ color: token.colorTextDisabled }} />
+                  )}
+                  <UIText weight="semibold">Cache</UIText>
+                </UISpace>
+                {typeof permissions.cache === 'object' && permissions.cache.namespaces && (
+                  <div>
+                    <UIText color="secondary" style={{ fontSize: token.fontSizeSM }}>
+                      Namespaces:
+                    </UIText>
+                    <div style={{ marginTop: 4 }}>
+                      <UISpace wrap size="small">
+                        {permissions.cache.namespaces.map((ns: string, idx: number) => (
+                          <UITag key={idx} color="cyan" style={{ fontSize: 11 }}>
+                            {ns}
+                          </UITag>
+                        ))}
+                      </UISpace>
+                    </div>
+                  </div>
+                )}
+              </UISpace>
+            </UICard>
+          )}
+
+          {/* Storage */}
+          {permissions.storage !== undefined && (
+            <UICard size="small">
+              <UISpace direction="vertical" size="small">
+                <UISpace>
+                  {permissions.storage ? (
+                    <UIIcon name="CheckCircleOutlined" style={{ color: token.colorSuccess }} />
+                  ) : (
+                    <UIIcon name="WarningOutlined" style={{ color: token.colorTextDisabled }} />
+                  )}
+                  <UIText weight="semibold">Storage</UIText>
+                </UISpace>
+                {typeof permissions.storage === 'object' && permissions.storage.paths && (
+                  <div>
+                    <UIText color="secondary" style={{ fontSize: token.fontSizeSM }}>
+                      Paths:
+                    </UIText>
+                    <div style={{ marginTop: 4 }}>
+                      <UISpace wrap size="small">
+                        {permissions.storage.paths.map((path: string, idx: number) => (
+                          <UITag key={idx} color="orange" style={{ fontSize: 11 }}>
+                            {path}
+                          </UITag>
+                        ))}
+                      </UISpace>
+                    </div>
+                  </div>
+                )}
+              </UISpace>
+            </UICard>
+          )}
+
+          {/* Analytics */}
+          {permissions.analytics !== undefined && (
+            <UICard size="small">
+              <UISpace>
+                {permissions.analytics ? (
+                  <UIIcon name="CheckCircleOutlined" style={{ color: token.colorSuccess }} />
+                ) : (
+                  <UIIcon name="WarningOutlined" style={{ color: token.colorTextDisabled }} />
+                )}
+                <UIText weight="semibold">Analytics</UIText>
+              </UISpace>
+            </UICard>
+          )}
+
+          {/* Embeddings */}
+          {permissions.embeddings !== undefined && (
+            <UICard size="small">
+              <UISpace>
+                {permissions.embeddings ? (
+                  <UIIcon name="CheckCircleOutlined" style={{ color: token.colorSuccess }} />
+                ) : (
+                  <UIIcon name="WarningOutlined" style={{ color: token.colorTextDisabled }} />
+                )}
+                <UIText weight="semibold">Embeddings</UIText>
+              </UISpace>
+            </UICard>
+          )}
+
+          {/* Events */}
+          {permissions.events !== undefined && (
+            <UICard size="small">
+              <UISpace direction="vertical" size="small">
+                <UISpace>
+                  {permissions.events ? (
+                    <UIIcon name="CheckCircleOutlined" style={{ color: token.colorSuccess }} />
+                  ) : (
+                    <UIIcon name="WarningOutlined" style={{ color: token.colorTextDisabled }} />
+                  )}
+                  <UIText weight="semibold">Event Bus</UIText>
+                </UISpace>
+                {typeof permissions.events === 'object' && (
+                  <div>
+                    {permissions.events.publish && permissions.events.publish.length > 0 && (
+                      <div style={{ marginBottom: 8 }}>
+                        <UIText color="secondary" style={{ fontSize: token.fontSizeSM }}>
+                          Publish:
+                        </UIText>
+                        <div style={{ marginTop: 4 }}>
+                          <UISpace wrap size="small">
+                            {permissions.events.publish.map((evt: string, idx: number) => (
+                              <UITag key={idx} color="green" style={{ fontSize: 11 }}>
+                                {evt}
+                              </UITag>
+                            ))}
+                          </UISpace>
+                        </div>
+                      </div>
+                    )}
+                    {permissions.events.subscribe && permissions.events.subscribe.length > 0 && (
+                      <div>
+                        <UIText color="secondary" style={{ fontSize: token.fontSizeSM }}>
+                          Subscribe:
+                        </UIText>
+                        <div style={{ marginTop: 4 }}>
+                          <UISpace wrap size="small">
+                            {permissions.events.subscribe.map((evt: string, idx: number) => (
+                              <UITag key={idx} color="blue" style={{ fontSize: 11 }}>
+                                {evt}
+                              </UITag>
+                            ))}
+                          </UISpace>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </UISpace>
+            </UICard>
+          )}
+        </div>
+      </UISpace>
+    </UICard>
+  );
+}