{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"code-execution","type":"registry:ui","title":"Code Execution","description":"A code interpreter run inside chat — the snippet, a running state, stdout as it streams, and errors that stay readable.","author":"Scrim UI (https://scrimui.dev)","categories":["tool-calls"],"docs":"https://scrimui.dev/components/code-execution","dependencies":[],"registryDependencies":[],"files":[{"path":"src/showcase/code-execution/code-execution.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\n\n/* ------------------------------------------------------------------ */\n/* Types                                                               */\n/* ------------------------------------------------------------------ */\n\nexport type CodeExecutionProps = {\n  code: string;\n  status?: \"running\" | \"success\" | \"error\";\n  /** stdout captured so far / on success. */\n  output?: string;\n  /** stderr for the error state. */\n  error?: string;\n  exitCode?: number;\n  /** Elapsed time, e.g. \"1.2s\". */\n  duration?: string;\n  onStop?: () => void;\n  className?: string;\n};\n\n/* ------------------------------------------------------------------ */\n/* Icons                                                               */\n/* ------------------------------------------------------------------ */\n\nfunction TerminalIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" width=\"14\" height=\"14\">\n      <path d=\"m4 17 6-6-6-6\" />\n      <path d=\"M12 19h8\" />\n    </svg>\n  );\n}\n\nfunction XIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" width=\"12\" height=\"12\">\n      <path d=\"M18 6 6 18\" />\n      <path d=\"m6 6 12 12\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" width=\"12\" height=\"12\">\n      <path d=\"M20 6 9 17l-5-5\" />\n    </svg>\n  );\n}\n\n/* ------------------------------------------------------------------ */\n/* CodeExecution                                                       */\n/* ------------------------------------------------------------------ */\n\nexport function CodeExecution({\n  code,\n  status = \"success\",\n  output,\n  error,\n  exitCode = 0,\n  duration,\n  onStop,\n  className = \"\",\n}: CodeExecutionProps) {\n  const running = status === \"running\";\n  const failed = status === \"error\";\n\n  const statusPill = running\n    ? \"bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300\"\n    : failed\n      ? \"bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300\"\n      : \"bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300\";\n\n  const statusText = running ? \"Running\" : failed ? \"Failed\" : \"Succeeded\";\n\n  return (\n    <div className={`overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800 ${className}`}>\n      <div className=\"flex items-center gap-2 bg-zinc-50 px-3 py-2 dark:bg-zinc-800/60\">\n        <span className=\"text-zinc-400 dark:text-zinc-500\">\n          <TerminalIcon />\n        </span>\n        <span className=\"text-[13px] font-medium text-zinc-700 dark:text-zinc-200\">\n          Code execution\n        </span>\n        {duration && (\n          <span className=\"text-xs text-zinc-500 dark:text-zinc-400\">{duration}</span>\n        )}\n        <span className=\"ml-auto flex items-center gap-2\">\n          {running && onStop && (\n            <button\n              type=\"button\"\n              onClick={onStop}\n              className=\"inline-flex h-6 items-center gap-1 rounded-md border border-zinc-200 px-2 text-[11px] text-zinc-600 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800\"\n            >\n              <span className=\"h-2 w-2 rounded-[2px] bg-current\" />\n              Stop\n            </button>\n          )}\n          <span className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium ${statusPill}`}>\n            {running ? (\n              <span className=\"h-2.5 w-2.5 animate-spin rounded-full border-[1.5px] border-current border-t-transparent\" />\n            ) : failed ? (\n              <XIcon />\n            ) : (\n              <CheckIcon />\n            )}\n            {statusText}\n          </span>\n        </span>\n      </div>\n\n      <pre className=\"overflow-x-auto bg-zinc-950 px-3 py-2.5 text-[13px] leading-5 text-zinc-100 dark:bg-zinc-900\">\n        <code>{code}</code>\n      </pre>\n\n      {(output || error) && (\n        <pre className={`overflow-x-auto px-3 py-2.5 text-[12px] leading-5 ${failed ? \"bg-red-50 text-red-700 dark:bg-red-950/40 dark:text-red-300\" : \"bg-zinc-50 text-zinc-600 dark:bg-zinc-800/60 dark:text-zinc-300\"}`}>\n          {failed ? error : output}\n        </pre>\n      )}\n\n      {!running && (output || error) && (\n        <div className={`flex items-center gap-1.5 px-3 pb-2 text-[11px] ${failed ? \"text-red-600 dark:text-red-400\" : \"text-zinc-500 dark:text-zinc-400\"}`}>\n          <span className=\"font-medium\">exit {exitCode}</span>\n          {duration && ` · ${duration}`}\n        </div>\n      )}\n    </div>\n  );\n}\n","type":"registry:ui","target":"components/ui/code-execution.tsx"}]}