@runfusion/fusion 0.25.0 → 0.27.0

package/dist/plugins/fusion-plugin-cli-printing-press/src/dashboard-view.css

@@ -0,0 +1,43 @@
+.cli-press-wizard {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.cli-press-stepper {
+  display: flex;
+  gap: var(--space-sm);
+  flex-wrap: wrap;
+}
+
+.cli-press-step {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-pill);
+  padding: var(--space-xs) var(--space-md);
+}
+
+.cli-press-step.is-active {
+  background: var(--todo);
+  color: var(--accent-text);
+}
+
+.cli-press-endpoint-row {
+  display: grid;
+  gap: var(--space-sm);
+  grid-template-columns: 1fr 1fr 1fr auto;
+}
+
+.cli-press-actions {
+  display: flex;
+  gap: var(--space-sm);
+}
+
+@media (max-width: 768px) {
+  .cli-press-endpoint-row {
+    grid-template-columns: 1fr;
+  }
+
+  .cli-press-actions {
+    flex-direction: column;
+  }
+}

package/dist/plugins/fusion-plugin-cli-printing-press/src/dashboard-view.tsx

@@ -0,0 +1,49 @@
+import type { PluginDashboardViewContext } from "@fusion/dashboard/app/plugins/types";
+import { useMemo, useState } from "react";
+import { BasicsStep, CredentialsStep, EndpointsStep, ReviewStep, TransportStep } from "./wizard/steps.js";
+import type { ServiceDraft, WizardStep } from "./wizard/types.js";
+import { validateBasics, validateCredentials, validateEndpoints, validateTransport } from "./wizard/validation.js";
+import "./dashboard-view.css";
+
+const STEPS: WizardStep[] = ["basics", "transport", "endpoints", "credentials", "review"];
+
+function createInitialDraft(): ServiceDraft {
+  const now = new Date().toISOString();
+  return { id: "", name: "", slug: "", description: "", baseUrl: "", transport: "http", endpoints: [{ id: crypto.randomUUID(), name: "", method: "GET", path: "" }], credential: { kind: "none" }, createdAt: now, updatedAt: now };
+}
+
+export function CliPrintingPressWizardView({ context: _context }: { context?: PluginDashboardViewContext }) {
+  const [draft, setDraft] = useState<ServiceDraft>(() => createInitialDraft());
+  const [stepIndex, setStepIndex] = useState(0);
+  const [savedId, setSavedId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const currentStep = STEPS[stepIndex];
+  const currentValidation = useMemo(() => {
+    if (currentStep === "basics") return validateBasics(draft);
+    if (currentStep === "transport") return validateTransport(draft);
+    if (currentStep === "endpoints") return validateEndpoints(draft);
+    if (currentStep === "credentials") return validateCredentials(draft.credential);
+    return { ok: true } as const;
+  }, [currentStep, draft]);
+
+  async function onSave() {
+    const response = await fetch("/api/plugins/fusion-plugin-cli-printing-press/drafts", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(draft) });
+    if (!response.ok) {
+      const body = await response.json().catch(() => ({} as { error?: string; errors?: Record<string, string> }));
+      const firstError = body?.errors ? Object.values(body.errors)[0] : undefined;
+      setError(body?.error ?? firstError ?? "Failed to save draft");
+      return;
+    }
+    const body = await response.json();
+    setSavedId(body.id);
+  }
+
+  if (savedId) {
+    return <section className="card"><h2>Saved — draft id {savedId}</h2><p>List, edit, regenerate, run/test, and runtime exposure land in FN-3764 / FN-3765 / FN-3767.</p></section>;
+  }
+
+  return <section className="cli-press-wizard"><div className="cli-press-stepper">{STEPS.map((step, index) => <span className={`cli-press-step${index === stepIndex ? " is-active" : ""}`} key={step}>{step}</span>)}</div>{error ? <p className="form-error">{error}</p> : null}{currentStep === "basics" ? <BasicsStep draft={draft} onChange={(patch) => setDraft((current) => ({ ...current, ...patch, updatedAt: new Date().toISOString() }))} /> : null}{currentStep === "transport" ? <TransportStep /> : null}{currentStep === "endpoints" ? <EndpointsStep draft={draft} onChange={(endpoints) => setDraft((current) => ({ ...current, endpoints, updatedAt: new Date().toISOString() }))} /> : null}{currentStep === "credentials" ? <CredentialsStep draft={draft} onChange={(credential) => setDraft((current) => ({ ...current, credential, updatedAt: new Date().toISOString() }))} /> : null}{currentStep === "review" ? <ReviewStep draft={draft} /> : null}<div className="cli-press-actions"><button className="btn" onClick={() => setDraft(createInitialDraft())}>Cancel</button><button className="btn" disabled={stepIndex === 0} onClick={() => setStepIndex((value) => Math.max(0, value - 1))}>Back</button>{stepIndex < STEPS.length - 1 ? <button className="btn btn-primary" disabled={!currentValidation.ok} onClick={() => setStepIndex((value) => Math.min(STEPS.length - 1, value + 1))}>Next</button> : <button className="btn btn-primary" onClick={() => void onSave()}>Save draft</button>}</div></section>;
+}
+
+export default CliPrintingPressWizardView;

package/dist/plugins/fusion-plugin-cli-printing-press/src/generation/generator.ts

@@ -0,0 +1,95 @@
+import { chmod, mkdir, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import type { GenerateCliInput, GeneratedCliArtifact } from "./types.js";
+
+function buildScript(draftJson: string): string {
+  return `#!/usr/bin/env node
+const draft = ${draftJson};
+
+function parseArgs(argv) {
+  const parsed = { endpoint: "", params: {} };
+  for (let i = 0; i < argv.length; i += 1) {
+    const part = argv[i];
+    if (part === "--endpoint") {
+      parsed.endpoint = String(argv[i + 1] ?? "");
+      i += 1;
+      continue;
+    }
+    if (part.startsWith("--")) {
+      const key = part.slice(2);
+      const next = argv[i + 1];
+      if (next === undefined || String(next).startsWith("--")) {
+        parsed.params[key] = true;
+      } else {
+        parsed.params[key] = String(next);
+        i += 1;
+      }
+    }
+  }
+  return parsed;
+}
+
+function endpointUrl(baseUrl, path) {
+  return new URL(path, baseUrl).toString();
+}
+
+(async () => {
+  const args = parseArgs(process.argv.slice(2));
+  const endpoint = draft.endpoints.find((item) => item.id === args.endpoint);
+  if (!endpoint) {
+    process.stderr.write(\`Unknown endpoint: \${args.endpoint}\\n\`);
+    process.exit(2);
+  }
+
+  const method = endpoint.method || "GET";
+  const url = endpointUrl(draft.baseUrl, endpoint.path || "/");
+  const headers = { "content-type": "application/json" };
+
+  if (draft.credential?.kind === "apiKey") {
+    const envValue = process.env[draft.credential.envVar] ?? process.env[\`CLIPP_CRED_\${String(draft.credential.envVar).toUpperCase()}\`];
+    if (envValue) headers[draft.credential.header] = envValue;
+  }
+  if (draft.credential?.kind === "bearerToken") {
+    const token = process.env[draft.credential.envVar] ?? process.env[\`CLIPP_CRED_\${String(draft.credential.envVar).toUpperCase()}\`];
+    if (token) headers.authorization = \`Bearer \${token}\`;
+  }
+  if (draft.credential?.kind === "basicAuth") {
+    const username = process.env[draft.credential.usernameEnvVar] ?? process.env[\`CLIPP_CRED_\${String(draft.credential.usernameEnvVar).toUpperCase()}\`];
+    const password = process.env[draft.credential.passwordEnvVar] ?? process.env[\`CLIPP_CRED_\${String(draft.credential.passwordEnvVar).toUpperCase()}\`];
+    if (username || password) {
+      headers.authorization = "Basic " + Buffer.from(String(username ?? "") + ":" + String(password ?? "")).toString("base64");
+    }
+  }
+
+  const body = method === "GET" || method === "DELETE" ? undefined : JSON.stringify(args.params);
+  const response = await fetch(url, { method, headers, body });
+  const text = await response.text();
+  if (!response.ok) {
+    process.stderr.write(text || \`HTTP \${response.status}\\n\`);
+    process.exit(1);
+  }
+  process.stdout.write(text);
+})().catch((error) => {
+  process.stderr.write(String(error?.message ?? error));
+  process.exit(1);
+});
+`;
+}
+
+export async function generateCli({ draft, outDir }: GenerateCliInput): Promise<GeneratedCliArtifact> {
+  await mkdir(outDir, { recursive: true });
+  const binPath = join(outDir, `${draft.slug}.mjs`);
+  await writeFile(binPath, buildScript(JSON.stringify(draft)), "utf8");
+
+  if (process.platform !== "win32") {
+    await chmod(binPath, 0o755);
+  }
+
+  return {
+    draftId: draft.id,
+    slug: draft.slug,
+    binPath,
+    entrypoint: "node",
+    generatedAt: new Date().toISOString(),
+  };
+}

package/dist/plugins/fusion-plugin-cli-printing-press/src/generation/redact.ts

@@ -0,0 +1,9 @@
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+export function redact(text: string, secrets: string[]): string {
+  if (!text) return text;
+  const unique = [...new Set(secrets.filter((secret) => secret && secret.length > 0))].sort((a, b) => b.length - a.length);
+  return unique.reduce((acc, secret) => acc.replace(new RegExp(escapeRegExp(secret), "g"), "***"), text);
+}

package/dist/plugins/fusion-plugin-cli-printing-press/src/generation/runner.ts

@@ -0,0 +1,79 @@
+import { exec } from "node:child_process";
+import { promisify } from "node:util";
+import { redact } from "./redact.js";
+import type { GeneratedCliArtifact, RunResult } from "./types.js";
+
+const execAsync = promisify(exec);
+
+export interface RunGeneratedCliInput {
+  artifact: GeneratedCliArtifact;
+  endpointId: string;
+  params: Record<string, string | number | boolean>;
+  credentials?: Record<string, string>;
+  timeoutMs?: number;
+  cwd?: string;
+}
+
+function toFlagName(key: string): string {
+  return key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+
+function createArgs(endpointId: string, params: Record<string, string | number | boolean>): string[] {
+  const args: string[] = ["--endpoint", endpointId];
+  for (const [key, value] of Object.entries(params)) {
+    if (typeof value === "boolean") {
+      if (value) args.push(`--${toFlagName(key)}`);
+      continue;
+    }
+    args.push(`--${toFlagName(key)}`, String(value));
+  }
+  return args;
+}
+
+function quoteArg(arg: string): string {
+  return JSON.stringify(arg);
+}
+
+// Credentials are passed only via env vars: CLIPP_CRED_<UPPER_SNAKE_KEY>.
+export async function runGeneratedCli({ artifact, endpointId, params, credentials, timeoutMs = 30_000, cwd }: RunGeneratedCliInput): Promise<RunResult> {
+  const args = createArgs(endpointId, params);
+  const argv = [artifact.binPath, ...args];
+  const command = ["node", ...argv].map(quoteArg).join(" ");
+
+  const credEnv: Record<string, string> = {};
+  for (const [key, value] of Object.entries(credentials ?? {})) {
+    credEnv[`CLIPP_CRED_${key.replace(/[^a-zA-Z0-9]/g, "_").toUpperCase()}`] = value;
+  }
+
+  const start = Date.now();
+  try {
+    const { stdout, stderr } = await execAsync(command, {
+      cwd,
+      timeout: timeoutMs,
+      maxBuffer: 10 * 1024 * 1024,
+      env: { ...process.env, ...credEnv },
+    });
+
+    const secrets = Object.values(credentials ?? {});
+    return {
+      stdout: redact(stdout, secrets),
+      stderr: redact(stderr, secrets),
+      exitCode: 0,
+      durationMs: Date.now() - start,
+      timedOut: false,
+      argv: argv.map((part) => redact(part, secrets)),
+    };
+  } catch (error) {
+    const err = error as { stdout?: string; stderr?: string; code?: number | null; killed?: boolean; signal?: string };
+    const timedOut = Boolean(err.killed && err.signal === "SIGTERM");
+    const secrets = Object.values(credentials ?? {});
+    return {
+      stdout: redact(err.stdout ?? "", secrets),
+      stderr: redact(err.stderr ?? (timedOut ? "Command timed out" : ""), secrets),
+      exitCode: timedOut ? null : (typeof err.code === "number" ? err.code : null),
+      durationMs: Date.now() - start,
+      timedOut,
+      argv: argv.map((part) => redact(part, secrets)),
+    };
+  }
+}

package/dist/plugins/fusion-plugin-cli-printing-press/src/generation/types.ts

@@ -0,0 +1,31 @@
+import type { ServiceDraft } from "../wizard/types.js";
+
+// Symbol drift note (FN-3764): draft uses `credential` field and optional `params?: string` per endpoint.
+export type GeneratedCliArtifact = {
+  draftId: string;
+  slug: string;
+  binPath: string;
+  entrypoint: "node" | "npx" | "direct";
+  generatedAt: string;
+};
+
+export type RunRequest = {
+  endpointId: string;
+  params: Record<string, string | number | boolean>;
+  credentials?: Record<string, string>;
+  timeoutMs?: number;
+};
+
+export type RunResult = {
+  stdout: string;
+  stderr: string;
+  exitCode: number | null;
+  durationMs: number;
+  timedOut: boolean;
+  argv: string[];
+};
+
+export type GenerateCliInput = {
+  draft: ServiceDraft;
+  outDir: string;
+};

package/dist/plugins/fusion-plugin-cli-printing-press/src/index.ts

@@ -0,0 +1,58 @@
+import { definePlugin } from "@fusion/plugin-sdk";
+import { createCliPrintingPressRoutes } from "./routes/wizard-routes.js";
+import { buildExecutorRuntimeEnv } from "./runtime/executor-runtime-env.js";
+import { createCliPressStore, ensureCliPressSchema } from "./store/cli-press-store.js";
+
+const storeByDb = new WeakMap<object, ReturnType<typeof createCliPressStore>>();
+
+function getStore(taskStore: { getDatabase: () => object }) {
+  const db = taskStore.getDatabase();
+  const existing = storeByDb.get(db);
+  if (existing) return existing;
+  const next = createCliPressStore(db as never);
+  storeByDb.set(db, next);
+  return next;
+}
+
+const plugin = definePlugin({
+  manifest: {
+    id: "fusion-plugin-cli-printing-press",
+    name: "CLI Printing Press",
+    version: "0.1.0",
+    description: "Guided wizard for drafting external service CLI definitions",
+  },
+  state: "installed",
+  hooks: {
+    onSchemaInit: ensureCliPressSchema,
+  },
+  routes: createCliPrintingPressRoutes(),
+  executorRuntimeEnv: (taskCtx, ctx) => {
+    const store = getStore(ctx.taskStore as { getDatabase: () => object });
+    return buildExecutorRuntimeEnv(store, taskCtx, ctx);
+  },
+  dashboardViews: [
+    {
+      viewId: "wizard",
+      label: "Create Service CLI",
+      componentPath: "./dashboard-view",
+      icon: "Wand2",
+      placement: "primary",
+      order: 60,
+    },
+    {
+      viewId: "manage",
+      label: "Manage Service CLIs",
+      componentPath: "./manage-view",
+      icon: "List",
+      placement: "primary",
+      order: 61,
+    },
+  ],
+});
+
+export default plugin;
+export { CliPrintingPressWizardView } from "./dashboard-view.js";
+export { CliPrintingPressManageView } from "./manage-view.js";
+export { CliPrintingPressTestRunner } from "./run/TestRunnerPanel.js";
+export { createCliPressStore, ensureCliPressSchema } from "./store/cli-press-store.js";
+export * from "./store/cli-press-types.js";

package/dist/plugins/fusion-plugin-cli-printing-press/src/manage/EditDraftModal.tsx

@@ -0,0 +1,75 @@
+import { useMemo, useState } from "react";
+import { BasicsStep, CredentialsStep, EndpointsStep, TransportStep } from "../wizard/steps.js";
+import type { ServiceDraft, WizardStep } from "../wizard/types.js";
+import { validateBasics, validateCredentials, validateDraft, validateEndpoints, validateTransport } from "../wizard/validation.js";
+
+const STEPS: WizardStep[] = ["basics", "transport", "endpoints", "credentials", "review"];
+
+export function EditDraftModal({
+  initialDraft,
+  onClose,
+  onSave,
+}: {
+  initialDraft: ServiceDraft;
+  onClose: () => void;
+  onSave: (draft: ServiceDraft) => Promise<void>;
+}) {
+  const [draft, setDraft] = useState<ServiceDraft>(initialDraft);
+  const [stepIndex, setStepIndex] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  const currentStep = STEPS[stepIndex];
+  const currentValidation = useMemo(() => {
+    if (currentStep === "basics") return validateBasics(draft);
+    if (currentStep === "transport") return validateTransport(draft);
+    if (currentStep === "endpoints") return validateEndpoints(draft);
+    if (currentStep === "credentials") return validateCredentials(draft.credential);
+    return { ok: true } as const;
+  }, [currentStep, draft]);
+
+  async function saveDraft() {
+    const validation = validateDraft(draft);
+    if (!validation.ok) {
+      setError(Object.values(validation.errors)[0] ?? "Draft validation failed");
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      await onSave(draft);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to save draft");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="modal-overlay open" role="dialog" aria-modal="true">
+      <div className="modal modal-lg">
+        <div className="modal-header">
+          <h2>Edit Service CLI Draft</h2>
+          <button className="modal-close" onClick={onClose} aria-label="Close edit modal">×</button>
+        </div>
+        {error ? <p className="form-error">{error}</p> : null}
+
+        {currentStep === "basics" ? <BasicsStep draft={draft} onChange={(patch) => setDraft((current) => ({ ...current, ...patch }))} /> : null}
+        {currentStep === "transport" ? <TransportStep /> : null}
+        {currentStep === "endpoints" ? <EndpointsStep draft={draft} onChange={(endpoints) => setDraft((current) => ({ ...current, endpoints }))} /> : null}
+        {currentStep === "credentials" ? <CredentialsStep draft={draft} onChange={(credential) => setDraft((current) => ({ ...current, credential }))} /> : null}
+        {currentStep === "review" ? <pre className="card cli-press-manage-json-preview">{JSON.stringify(draft, null, 2)}</pre> : null}
+
+        <div className="modal-actions">
+          <button className="btn" onClick={onClose}>Cancel</button>
+          <button className="btn" disabled={stepIndex === 0 || saving} onClick={() => setStepIndex((value) => Math.max(0, value - 1))}>Back</button>
+          {stepIndex < STEPS.length - 1 ? (
+            <button className="btn btn-primary" disabled={!currentValidation.ok || saving} onClick={() => setStepIndex((value) => Math.min(STEPS.length - 1, value + 1))}>Next</button>
+          ) : (
+            <button className="btn btn-primary" disabled={saving} onClick={() => void saveDraft()}>{saving ? "Saving…" : "Save"}</button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/plugins/fusion-plugin-cli-printing-press/src/manage/useDrafts.ts

@@ -0,0 +1,73 @@
+import { useCallback, useEffect, useState } from "react";
+import type { GeneratedCliArtifact } from "../generation/types.js";
+import type { ServiceDraft } from "../wizard/types.js";
+
+export interface DraftListItem {
+  id: string;
+  name: string;
+  slug: string;
+  updatedAt: string;
+}
+
+const BASE_PATH = "/api/plugins/fusion-plugin-cli-printing-press/drafts";
+
+async function parseError(response: Response, fallback: string): Promise<string> {
+  const body = await response.json().catch(() => ({} as { error?: string }));
+  return body.error ?? fallback;
+}
+
+export function useDrafts() {
+  const [drafts, setDrafts] = useState<DraftListItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async (signal?: AbortSignal) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(BASE_PATH, { signal });
+      if (!response.ok) throw new Error(await parseError(response, "Failed to load drafts"));
+      setDrafts(await response.json() as DraftListItem[]);
+    } catch (err) {
+      if ((err as Error).name === "AbortError") return;
+      setError(err instanceof Error ? err.message : "Failed to load drafts");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    void refresh(controller.signal);
+    return () => controller.abort();
+  }, [refresh]);
+
+  const getDraft = useCallback(async (id: string): Promise<ServiceDraft> => {
+    const response = await fetch(`${BASE_PATH}/${id}`);
+    if (!response.ok) throw new Error(await parseError(response, "Failed to load draft"));
+    return await response.json() as ServiceDraft;
+  }, []);
+
+  const updateDraft = useCallback(async (id: string, draft: ServiceDraft): Promise<ServiceDraft> => {
+    const response = await fetch(`${BASE_PATH}/${id}`, {
+      method: "PUT",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(draft),
+    });
+    if (!response.ok) throw new Error(await parseError(response, "Failed to update draft"));
+    return await response.json() as ServiceDraft;
+  }, []);
+
+  const regenerateDraft = useCallback(async (id: string): Promise<{ draft: ServiceDraft; artifact: GeneratedCliArtifact }> => {
+    const response = await fetch(`${BASE_PATH}/${id}/regenerate`, { method: "POST" });
+    if (!response.ok) throw new Error(await parseError(response, "Failed to regenerate draft"));
+    return await response.json() as { draft: ServiceDraft; artifact: GeneratedCliArtifact };
+  }, []);
+
+  const deleteDraft = useCallback(async (id: string): Promise<void> => {
+    const response = await fetch(`${BASE_PATH}/${id}`, { method: "DELETE" });
+    if (!response.ok && response.status !== 204) throw new Error(await parseError(response, "Failed to delete draft"));
+  }, []);
+
+  return { drafts, loading, error, refresh, getDraft, updateDraft, regenerateDraft, deleteDraft };
+}

package/dist/plugins/fusion-plugin-cli-printing-press/src/manage-view.css

@@ -0,0 +1,79 @@
+.cli-press-manage {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.cli-press-manage-header h2 {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  margin: 0;
+}
+
+.cli-press-manage-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--space-md);
+}
+
+.cli-press-manage-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.cli-press-manage-row {
+  width: 100%;
+  text-align: left;
+  border: var(--btn-border-width) solid var(--border);
+  background: var(--card);
+}
+
+.cli-press-manage-row.is-selected {
+  box-shadow: var(--focus-ring-strong);
+  border-color: var(--todo);
+}
+
+.cli-press-manage-row-title {
+  font-weight: 600;
+}
+
+.cli-press-manage-row-meta {
+  color: var(--text-muted);
+  font-size: 0.875em;
+}
+
+.cli-press-manage-detail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.cli-press-manage-actions {
+  display: flex;
+  gap: var(--space-sm);
+  flex-wrap: wrap;
+}
+
+.cli-press-manage-status {
+  color: var(--text);
+  background: var(--status-in-progress-bg);
+  border-radius: var(--radius-md);
+  padding: var(--space-sm) var(--space-md);
+}
+
+.cli-press-manage-state {
+  padding: var(--space-lg);
+}
+
+.cli-press-manage-json-preview {
+  max-height: 40vh;
+  overflow: auto;
+}
+
+@media (max-width: 768px) {
+  .cli-press-manage-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}