Code editor

"use client"

import * as React from "react"
import { CodeEditor, type CodeEditorError } from "@/components/candor/code-editor"
import { PermissionPrompt, type PermissionRequest } from "@/components/candor/permission-prompt"

const start = `{
  "table": "orders",
  "where": { "status": "settled" },
  "limit": 50
}`

/** Your app's validation: here, JSON.parse, with the line worked out from the position it reports. */
function check(text: string): CodeEditorError | undefined {
  try {
    const v = JSON.parse(text) as unknown
    return v && typeof v === "object" && !Array.isArray(v) ? undefined : { message: "That isn’t a JSON object, so it can’t be used." }
  } catch (e) {
    const at = /position (\d+)/.exec(String(e))
    const line = at ? text.slice(0, Number(at[1])).split("\n").length : undefined
    return { message: "That isn’t valid JSON.", line }
  }
}

const request: PermissionRequest = {
  id: "p1",
  tool: "Bash",
  title: "The agent wants to run npm test -- invoices",
  reason: "No rule allows Bash commands yet.",
  input: { command: "npm test -- invoices", timeout: 120000 },
}

export default function Example() {
  const [value, setValue] = React.useState(start)
  const [said, setSaid] = React.useState<string>()
  return (
    <div className="flex max-w-lg flex-col gap-6">
      <div className="flex flex-col gap-2">
        <CodeEditor highlight label="Query, as JSON" language="json" value={value} onValueChange={setValue} error={check(value)} minLines={6} />
        <p className="text-xs text-muted-foreground">Delete a comma to see the message tied to its line.</p>
      </div>
      {/* PermissionPrompt (free) edits the input in a plain field; pass CodeEditor and it edits in this one. */}
      <PermissionPrompt
        request={request}
        editable
        jsonEditor={CodeEditor}
        onAllow={(a) => setSaid(`Allowed${a.updatedInput ? " as edited" : ""}.`)}
        onDeny={() => setSaid("Denied.")}
      />
      <p role="status" className="text-sm text-muted-foreground">{said}</p>
    </div>
  )
}