strapi-mcp-server 0.1.1

package/admin/src/pages/EditClient.tsx

@@ -0,0 +1,248 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import {
+  Box,
+  Button,
+  Flex,
+  Typography,
+  TextInput,
+  Textarea,
+  Checkbox,
+  Grid,
+} from '@strapi/design-system';
+import { ArrowLeft } from '@strapi/icons';
+import { useMcpApi } from '../lib/api';
+import { PageHeader } from '../components/PageHeader';
+
+const ALL_SCOPES = [
+  { id: 'strapi:content:read', label: 'Read content (list types, schemas, entries)' },
+  { id: 'strapi:content:write', label: 'Create / update content entries (draft only)' },
+  { id: 'strapi:media:read', label: 'List media files' },
+  { id: 'strapi:media:write', label: 'Upload media files' },
+];
+
+interface Client {
+  clientId: string;
+  clientName: string;
+  isConfidential: boolean;
+  redirectUris: string[];
+  scopes: string[];
+  disabled: boolean;
+}
+
+export function EditClient(): JSX.Element {
+  const api = useMcpApi();
+  const navigate = useNavigate();
+  const { clientId } = useParams<{ clientId: string }>();
+
+  const [original, setOriginal] = useState<Client | null>(null);
+  const [name, setName] = useState('');
+  const [redirects, setRedirects] = useState('');
+  const [scopes, setScopes] = useState<string[]>([]);
+  const [disabled, setDisabled] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!clientId) return;
+    api
+      .getClient(clientId)
+      .then((c: Client) => {
+        setOriginal(c);
+        setName(c.clientName);
+        setRedirects((c.redirectUris ?? []).join('\n'));
+        setScopes(c.scopes ?? []);
+        setDisabled(c.disabled);
+      })
+      .catch((err: Error) => setError(err.message ?? String(err)))
+      .finally(() => setLoading(false));
+  }, [clientId]);
+
+  async function submit(): Promise<void> {
+    if (!clientId) return;
+    if (!name.trim() || !redirects.trim() || scopes.length === 0) {
+      setError('Name, at least one redirect URI, and at least one scope are required.');
+      return;
+    }
+    setSubmitting(true);
+    setError(null);
+    try {
+      await api.updateClient(clientId, {
+        clientName: name.trim(),
+        redirectUris: redirects
+          .split('\n')
+          .map((s) => s.trim())
+          .filter(Boolean),
+        scopes,
+        disabled,
+      });
+      navigate('/plugins/mcp-server/clients');
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  if (loading && !original) {
+    return (
+      <Box>
+        <PageHeader title="Edit client" />
+        <Typography>Loading…</Typography>
+      </Box>
+    );
+  }
+
+  if (!original) {
+    return (
+      <Box>
+        <PageHeader title="Edit client" />
+        <Box background="danger100" padding={4} hasRadius>
+          <Typography textColor="danger700">
+            {error ?? 'Client not found'}
+          </Typography>
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      <PageHeader
+        title="Edit client"
+        subtitle={`Update settings for ${original.clientName}`}
+        actions={
+          <Button
+            variant="tertiary"
+            startIcon={<ArrowLeft />}
+            onClick={() => navigate('/plugins/mcp-server/clients')}
+          >
+            Back
+          </Button>
+        }
+      />
+
+      {error && (
+        <Box background="danger100" padding={4} hasRadius marginBottom={6}>
+          <Typography textColor="danger700">{error}</Typography>
+        </Box>
+      )}
+
+      <Box background="neutral0" padding={6} hasRadius shadow="tableShadow">
+        <Flex direction="column" gap={6} alignItems="stretch">
+          <Grid.Root gap={6}>
+            <Grid.Item col={6} s={12} direction="column" alignItems="stretch">
+              <Box>
+                <Typography variant="pi" fontWeight="bold" textColor="neutral800">
+                  Client name
+                </Typography>
+                <Box paddingTop={1}>
+                  <TextInput
+                    name="clientName"
+                    value={name}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      setName(e.target.value)
+                    }
+                  />
+                </Box>
+              </Box>
+            </Grid.Item>
+            <Grid.Item col={6} s={12} direction="column" alignItems="stretch">
+              <Box>
+                <Typography variant="pi" fontWeight="bold" textColor="neutral800">
+                  Client ID
+                </Typography>
+                <Box paddingTop={1}>
+                  <TextInput name="clientId" value={original.clientId} disabled aria-readonly />
+                </Box>
+              </Box>
+            </Grid.Item>
+            <Grid.Item col={6} s={12} direction="column" alignItems="stretch">
+              <Box paddingTop={3}>
+                <Typography variant="pi" fontWeight="bold" textColor="neutral800">
+                  Type
+                </Typography>
+                <Box paddingTop={2}>
+                  <Typography variant="omega" textColor="neutral700">
+                    {original.isConfidential
+                      ? 'Confidential (cannot be changed after creation)'
+                      : 'Public (cannot be changed after creation)'}
+                  </Typography>
+                </Box>
+              </Box>
+            </Grid.Item>
+            <Grid.Item col={6} s={12} direction="column" alignItems="stretch">
+              <Box paddingTop={6}>
+                <Checkbox
+                  checked={disabled}
+                  onCheckedChange={(c: boolean | 'indeterminate') => setDisabled(c === true)}
+                >
+                  Disabled — token issuance is blocked for this client
+                </Checkbox>
+              </Box>
+            </Grid.Item>
+          </Grid.Root>
+
+          <Box>
+            <Typography variant="pi" fontWeight="bold" textColor="neutral800">
+              Redirect URIs
+            </Typography>
+            <Box paddingTop={2}>
+              <Textarea
+                name="redirectUris"
+                value={redirects}
+                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                  setRedirects(e.target.value)
+                }
+                rows={5}
+              />
+            </Box>
+            <Box paddingTop={1}>
+              <Typography variant="pi" textColor="neutral600">
+                One per line — exact match, no wildcards.
+              </Typography>
+            </Box>
+          </Box>
+
+          <Box>
+            <Typography variant="pi" fontWeight="bold" textColor="neutral800">
+              Scopes
+            </Typography>
+            <Box paddingTop={2}>
+              <Flex direction="column" gap={2} alignItems="stretch">
+                {ALL_SCOPES.map((s) => (
+                  <Checkbox
+                    key={s.id}
+                    checked={scopes.includes(s.id)}
+                    onCheckedChange={(c: boolean | 'indeterminate') => {
+                      if (c === true) setScopes((prev) => [...prev, s.id]);
+                      else setScopes((prev) => prev.filter((x) => x !== s.id));
+                    }}
+                  >
+                    <Typography variant="omega">
+                      <code>{s.id}</code> — {s.label}
+                    </Typography>
+                  </Checkbox>
+                ))}
+              </Flex>
+            </Box>
+          </Box>
+
+          <Flex justifyContent="flex-end" gap={2}>
+            <Button
+              variant="tertiary"
+              onClick={() => navigate('/plugins/mcp-server/clients')}
+              disabled={submitting}
+            >
+              Cancel
+            </Button>
+            <Button loading={submitting} onClick={submit}>
+              Save changes
+            </Button>
+          </Flex>
+        </Flex>
+      </Box>
+    </Box>
+  );
+}

package/admin/src/pages/HomePage.tsx

@@ -0,0 +1,378 @@
+import { useEffect, useState } from 'react';
+import {
+  Badge,
+  Box,
+  Button,
+  Flex,
+  Grid,
+  IconButton,
+  Modal,
+  Table,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  Typography,
+} from '@strapi/design-system';
+import { Eye } from '@strapi/icons';
+import { useMcpApi } from '../lib/api';
+import { PageHeader } from '../components/PageHeader';
+
+interface PrincipalAdmin {
+  id: number;
+  email?: string;
+  firstname?: string;
+  lastname?: string;
+  username?: string;
+}
+
+interface AuditClient {
+  clientId: string;
+  clientName: string;
+}
+
+interface RecentCall {
+  ts: string;
+  principalType?: string;
+  principalId: string;
+  principalAdmin?: PrincipalAdmin | null;
+  sessionId?: string | null;
+  clientId?: string | null;
+  client?: AuditClient | null;
+  tool: string;
+  params?: unknown;
+  resultStatus: 'ok' | 'error';
+  errorCode?: string | null;
+  durationMs?: number | null;
+  ip?: string | null;
+  userAgent?: string | null;
+}
+
+interface Overview {
+  enabled: boolean;
+  resourceUrl: string;
+  allowedOrigins: string[];
+  sessions: { total: number; byPrincipal: Record<string, number> };
+  recentCalls: RecentCall[];
+  oauth: { mode: string; dcrEnabled: boolean };
+}
+
+function formatPrincipal(admin: PrincipalAdmin | null | undefined, fallbackId: string): string {
+  if (!admin) return fallbackId ? `#${fallbackId}` : '—';
+  const name = [admin.firstname, admin.lastname].filter(Boolean).join(' ').trim();
+  return name || admin.email || admin.username || `#${admin.id}`;
+}
+
+function Card({ title, children }: { title: string; children: React.ReactNode }): JSX.Element {
+  return (
+    <Box background="neutral0" padding={6} hasRadius shadow="tableShadow">
+      <Box paddingBottom={4}>
+        <Typography variant="delta" tag="h2">
+          {title}
+        </Typography>
+      </Box>
+      {children}
+    </Box>
+  );
+}
+
+function StatRow({ label, value }: { label: string; value: React.ReactNode }): JSX.Element {
+  return (
+    <Box>
+      <Typography variant="sigma" textColor="neutral600">
+        {label}
+      </Typography>
+      <Box paddingTop={1}>
+        <Typography variant="omega" fontWeight="semiBold">
+          {value}
+        </Typography>
+      </Box>
+    </Box>
+  );
+}
+
+function DetailRow({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}): JSX.Element {
+  return (
+    <Box paddingBottom={4}>
+      <Typography variant="sigma" textColor="neutral600">
+        {label}
+      </Typography>
+      <Box paddingTop={1}>{children}</Box>
+    </Box>
+  );
+}
+
+export function HomePage(): JSX.Element {
+  const api = useMcpApi();
+  const [data, setData] = useState<Overview | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [selected, setSelected] = useState<RecentCall | null>(null);
+
+  useEffect(() => {
+    api
+      .overview()
+      .then(setData)
+      .catch((err: Error) => setError(err.message ?? String(err)));
+  }, []);
+
+  return (
+    <Box>
+      <PageHeader title="Overview" subtitle="Server status, sessions, and recent activity" />
+
+      {error && (
+        <Box background="danger100" padding={4} hasRadius marginBottom={6}>
+          <Typography textColor="danger700">Failed to load overview: {error}</Typography>
+        </Box>
+      )}
+
+      {!data && !error && <Typography>Loading…</Typography>}
+
+      {data && (
+        <Flex direction="column" gap={6} alignItems="stretch">
+          <Card title="Status">
+            <Grid.Root gap={6}>
+              <Grid.Item col={3} s={6} xs={12} direction="column" alignItems="flex-start">
+                <StatRow
+                  label="State"
+                  value={
+                    <Badge backgroundColor={data.enabled ? 'success100' : 'danger100'}>
+                      {data.enabled ? 'Enabled' : 'Disabled'}
+                    </Badge>
+                  }
+                />
+              </Grid.Item>
+              <Grid.Item col={5} s={6} xs={12} direction="column" alignItems="flex-start">
+                <StatRow
+                  label="Resource URL"
+                  value={data.resourceUrl || '(not configured)'}
+                />
+              </Grid.Item>
+              <Grid.Item col={2} s={6} xs={12} direction="column" alignItems="flex-start">
+                <StatRow label="OAuth mode" value={data.oauth.mode} />
+              </Grid.Item>
+              <Grid.Item col={2} s={6} xs={12} direction="column" alignItems="flex-start">
+                <StatRow label="DCR" value={data.oauth.dcrEnabled ? 'enabled' : 'disabled'} />
+              </Grid.Item>
+            </Grid.Root>
+          </Card>
+
+          <Card title="Sessions">
+            <Grid.Root gap={6}>
+              <Grid.Item col={3} s={6} xs={12} direction="column" alignItems="flex-start">
+                <StatRow label="Active total" value={String(data.sessions.total)} />
+              </Grid.Item>
+            </Grid.Root>
+          </Card>
+
+          <Card title="Recent tool calls">
+            <Table colCount={7} rowCount={data.recentCalls.length}>
+              <Thead>
+                <Tr>
+                  <Th>
+                    <Typography variant="sigma">Time</Typography>
+                  </Th>
+                  <Th>
+                    <Typography variant="sigma">Principal</Typography>
+                  </Th>
+                  <Th>
+                    <Typography variant="sigma">Client</Typography>
+                  </Th>
+                  <Th>
+                    <Typography variant="sigma">Tool</Typography>
+                  </Th>
+                  <Th>
+                    <Typography variant="sigma">Status</Typography>
+                  </Th>
+                  <Th>
+                    <Typography variant="sigma">Duration</Typography>
+                  </Th>
+                  <Th>
+                    <Typography variant="sigma">&nbsp;</Typography>
+                  </Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {data.recentCalls.map((c, i) => (
+                  <Tr key={i}>
+                    <Td>
+                      <Typography variant="omega" textColor="neutral700">
+                        {new Date(c.ts).toLocaleString()}
+                      </Typography>
+                    </Td>
+                    <Td>
+                      <Typography variant="omega">
+                        {formatPrincipal(c.principalAdmin, c.principalId)}
+                      </Typography>
+                    </Td>
+                    <Td>
+                      <Typography variant="omega" textColor="neutral700">
+                        {c.client?.clientName ?? '—'}
+                      </Typography>
+                    </Td>
+                    <Td>
+                      <Typography variant="omega" fontWeight="semiBold">
+                        {c.tool}
+                      </Typography>
+                    </Td>
+                    <Td>
+                      <Badge
+                        backgroundColor={c.resultStatus === 'ok' ? 'success100' : 'danger100'}
+                      >
+                        {c.resultStatus}
+                      </Badge>
+                    </Td>
+                    <Td>
+                      <Typography variant="omega" textColor="neutral700">
+                        {c.durationMs !== undefined && c.durationMs !== null
+                          ? `${c.durationMs}ms`
+                          : ''}
+                      </Typography>
+                    </Td>
+                    <Td>
+                      <Flex justifyContent="flex-end">
+                        <IconButton
+                          label="View details"
+                          variant="ghost"
+                          onClick={() => setSelected(c)}
+                        >
+                          <Eye />
+                        </IconButton>
+                      </Flex>
+                    </Td>
+                  </Tr>
+                ))}
+                {data.recentCalls.length === 0 && (
+                  <Tr>
+                    <Td colSpan={7}>
+                      <Box paddingTop={6} paddingBottom={6}>
+                        <Typography textColor="neutral600">No activity yet.</Typography>
+                      </Box>
+                    </Td>
+                  </Tr>
+                )}
+              </Tbody>
+            </Table>
+          </Card>
+        </Flex>
+      )}
+
+      <Modal.Root
+        open={selected !== null}
+        onOpenChange={(open) => !open && setSelected(null)}
+      >
+        <Modal.Content>
+          <Modal.Header>
+            <Modal.Title>Audit entry</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            {selected && (
+              <Box paddingTop={2}>
+                <DetailRow label="Time">
+                  <Typography variant="omega">
+                    {new Date(selected.ts).toLocaleString()}
+                  </Typography>
+                </DetailRow>
+                <DetailRow label="Tool">
+                  <Typography variant="omega" fontWeight="semiBold">
+                    {selected.tool}
+                  </Typography>
+                </DetailRow>
+                <DetailRow label="Status">
+                  <Badge
+                    backgroundColor={
+                      selected.resultStatus === 'ok' ? 'success100' : 'danger100'
+                    }
+                  >
+                    {selected.resultStatus}
+                  </Badge>
+                  {selected.errorCode && (
+                    <Box paddingTop={2}>
+                      <Typography variant="omega" textColor="danger700">
+                        Error: <code>{selected.errorCode}</code>
+                      </Typography>
+                    </Box>
+                  )}
+                </DetailRow>
+                <DetailRow label="Duration">
+                  <Typography variant="omega">
+                    {selected.durationMs !== undefined && selected.durationMs !== null
+                      ? `${selected.durationMs}ms`
+                      : '—'}
+                  </Typography>
+                </DetailRow>
+                <DetailRow label="Principal">
+                  <Typography variant="omega">
+                    {formatPrincipal(selected.principalAdmin, selected.principalId)}
+                    {selected.principalAdmin?.email && (
+                      <Typography variant="pi" textColor="neutral600">
+                        {' '}
+                        ({selected.principalAdmin.email})
+                      </Typography>
+                    )}
+                  </Typography>
+                </DetailRow>
+                <DetailRow label="Client">
+                  <Typography variant="omega">
+                    {selected.client?.clientName ?? '—'}
+                    {selected.clientId && (
+                      <Typography variant="pi" textColor="neutral600">
+                        {' '}
+                        (<code>{selected.clientId}</code>)
+                      </Typography>
+                    )}
+                  </Typography>
+                </DetailRow>
+                <DetailRow label="Session">
+                  <Typography variant="omega" textColor="neutral700">
+                    <code>{selected.sessionId ?? '—'}</code>
+                  </Typography>
+                </DetailRow>
+                <DetailRow label="IP">
+                  <Typography variant="omega" textColor="neutral700">
+                    {selected.ip ?? '—'}
+                  </Typography>
+                </DetailRow>
+                {selected.userAgent && (
+                  <DetailRow label="User-Agent">
+                    <Typography variant="omega" textColor="neutral700">
+                      {selected.userAgent}
+                    </Typography>
+                  </DetailRow>
+                )}
+                <DetailRow label="Parameters">
+                  <Box background="neutral100" padding={3} hasRadius>
+                    <pre
+                      style={{
+                        margin: 0,
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-all',
+                        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+                        fontSize: 13,
+                      }}
+                    >
+                      {selected.params === undefined || selected.params === null
+                        ? '(none)'
+                        : JSON.stringify(selected.params, null, 2)}
+                    </pre>
+                  </Box>
+                </DetailRow>
+              </Box>
+            )}
+          </Modal.Body>
+          <Modal.Footer>
+            <Modal.Close>
+              <Button variant="tertiary">Close</Button>
+            </Modal.Close>
+          </Modal.Footer>
+        </Modal.Content>
+      </Modal.Root>
+    </Box>
+  );
+}