@flaredev/cli 0.8.1 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flaredev/cli",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "The flare command-line tool: create, generate, migrate, and deploy Flare apps",
   "license": "MIT",
   "author": "Muke Johnbaptist",
@@ -41,7 +41,7 @@
     "jiti": "^2.7.0",
     "jsonc-parser": "^3.3.1",
     "picocolors": "^1.1.1",
-    "@flaredev/core": "0.8.1"
+    "@flaredev/core": "0.9.0"
   },
   "engines": {
     "node": ">=22"

package/templates/app/app/dashboard/actions.ts

@@ -43,20 +43,58 @@ async function removeUploads(resource: Resource, record: Record<string, unknown>
   }
 }
 
-export async function deleteRecordAction(resourceName: string, id: string): Promise<ActionResult<{ id: string }>> {
+/**
+ * Delete a record, or empty it from the trash with `force`.
+ *
+ * Uploads are only cleaned up when the row really goes. A soft delete is meant to be
+ * reversible, and a restore that gave back a record with its files missing would be a
+ * worse outcome than keeping the bytes a little longer.
+ */
+export async function deleteRecordAction(
+  resourceName: string,
+  id: string,
+  options: { force?: boolean } = {},
+): Promise<ActionResult<{ id: string }>> {
   const denied = await allowed(resourceName, "delete");
   if (denied) return denied;
 
   const store = dashboardStore(resourceName);
-  const existing = await store.get(id);
-  const result = await store.delete(id);
+  const force = options.force === true;
+  const soft = store.resource.softDelete && !force;
+  // `deleted: "all"` so emptying the trash can read the row it is about to remove.
+  const existing = await store.get(id, { deleted: "all" });
+  const result = await store.delete(id, { force });
   if (result.ok) {
-    await removeUploads(store.resource, existing.ok ? existing.data : null);
+    if (!soft) await removeUploads(store.resource, existing.ok ? existing.data : null);
     await recordAudit({
       action: "delete",
       resource: resourceName,
       recordId: id,
       recordLabel: existing.ok ? recordTitle(store.resource, existing.data) : null,
+      // Which kind of delete this was, since on a softDelete resource they are different
+      // events with the same name.
+      changes: store.resource.softDelete ? { trash: soft ? "moved to" : "emptied from" } : null,
+    });
+    revalidatePath(resourcePath(store.resource));
+  }
+  return result;
+}
+
+/** Put a record back from the trash. Only a `softDelete` resource has anything to restore. */
+export async function restoreRecordAction(resourceName: string, id: string): Promise<ActionResult<Record<string, unknown>>> {
+  // Restoring is a change to the record, so it needs the permission that changes records.
+  const denied = await allowed(resourceName, "update");
+  if (denied) return denied;
+
+  const store = dashboardStore(resourceName);
+  const result = await store.restore(id);
+  if (result.ok) {
+    await recordAudit({
+      action: "update",
+      resource: resourceName,
+      recordId: id,
+      recordLabel: recordTitle(store.resource, result.data),
+      changes: { trash: "restored from" },
     });
     revalidatePath(resourcePath(store.resource));
   }

package/templates/app/components/dashboard/fields/field-widget.tsx

@@ -1,6 +1,15 @@
 "use client";
 
-import { normalizeDomain, optionLabel, slugify, type FileField as FileFieldDef, type MultiSelectField as MultiSelectDef, type StoredField } from "@flaredev/core";
+import {
+  normalizeDomain,
+  optionLabel,
+  slugify,
+  type FileField as FileFieldDef,
+  type JsonField as JsonDef,
+  type MultiSelectField as MultiSelectDef,
+  type StoredField,
+  type TagsField as TagsDef,
+} from "@flaredev/core";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
@@ -13,7 +22,10 @@ import { groupDigits, ungroup } from "@/lib/number";
 import { DateField, DateTimeField } from "./date-field";
 import { CountryField } from "./country-field";
 import { FileField } from "./file-field";
+import { JsonField } from "./json-field";
+import { MarkdownField } from "./markdown-field";
 import { MultiSelectField } from "./multi-select-field";
+import { TagsField } from "./tags-field";
 import { PhoneField } from "./phone-field";
 import { RelationField } from "./relation-field";
 
@@ -56,7 +68,21 @@ export function FieldWidget(props: WidgetProps) {
 
   switch (field.kind) {
     case "text":
-      return <Textarea {...common} value={text} rows={4} onChange={(event) => onChange(event.target.value)} />;
+      // A markdown field is the same column; the editor is what differs.
+      return field.format === "markdown" ? (
+        <MarkdownField
+          id={id}
+          value={text}
+          onChange={onChange}
+          invalid={invalid}
+          disabled={disabled}
+          required={field.required}
+          placeholder={field.placeholder}
+          maxLength={field.maxLength}
+        />
+      ) : (
+        <Textarea {...common} value={text} rows={4} onChange={(event) => onChange(event.target.value)} />
+      );
 
     case "int":
     case "float": {
@@ -174,6 +200,12 @@ export function FieldWidget(props: WidgetProps) {
         <MultiSelectField id={id} field={field as MultiSelectDef & { label: string }} value={text} onChange={onChange} invalid={invalid} disabled={disabled} />
       );
 
+    case "tags":
+      return <TagsField id={id} field={field as TagsDef & { label: string }} value={text} onChange={onChange} invalid={invalid} disabled={disabled} />;
+
+    case "json":
+      return <JsonField id={id} field={field as JsonDef & { label: string }} value={text} onChange={onChange} invalid={invalid} disabled={disabled} />;
+
     case "date":
       return (
         <DateField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} placeholder={field.placeholder} />

package/templates/app/components/dashboard/fields/json-field.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useState } from "react";
+import { BracesIcon, CheckIcon } from "lucide-react";
+import type { JsonField as JsonDef } from "@flaredev/core";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+
+interface Props {
+  id: string;
+  field: JsonDef & { label: string };
+  /** Form state: the JSON source as typed. */
+  value: string;
+  onChange: (value: string) => void;
+  invalid: boolean;
+  disabled?: boolean;
+}
+
+/** Parse, and say what is wrong if it will not. */
+function problem(source: string, mustBeObject: boolean): string | null {
+  const text = source.trim();
+  if (text === "") return null;
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(text);
+  } catch (error) {
+    // The browser's message names the position, which is the useful part.
+    return error instanceof Error ? error.message.replace(/^JSON\.parse:\s*/, "") : "Not valid JSON";
+  }
+  if (mustBeObject && (parsed === null || typeof parsed !== "object" || Array.isArray(parsed))) {
+    return "This field holds a JSON object, like { }";
+  }
+  return null;
+}
+
+/**
+ * A `json` field: a textarea that says what is wrong with the JSON as you type.
+ *
+ * The form state is the source text, not a parsed value, so what you typed is what you
+ * see — including while it is half-written. The save is blocked by the form's own
+ * validation, which rejects text that does not parse, so nothing malformed can be stored;
+ * this is here to tell you *why* before you get there.
+ */
+export function JsonField({ id, field, value, onChange, invalid, disabled }: Props) {
+  const [touched, setTouched] = useState(false);
+  const message = problem(value, field.object === true);
+  const lines = Math.min(16, Math.max(4, value.split("\n").length + 1));
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Textarea
+        id={id}
+        value={value}
+        rows={lines}
+        spellCheck={false}
+        disabled={disabled}
+        aria-invalid={invalid || (touched && message !== null) || undefined}
+        aria-describedby={message ? `${id}-json-error` : undefined}
+        onBlur={() => setTouched(true)}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder={field.object ? '{\n  "key": "value"\n}' : "null"}
+        className="font-mono text-sm"
+      />
+      <div className="flex items-center justify-between gap-2">
+        {message ? (
+          <p id={`${id}-json-error`} className="text-destructive text-sm">
+            {message}
+          </p>
+        ) : value.trim() === "" ? (
+          <p className="text-muted-foreground text-sm">Empty</p>
+        ) : (
+          <p className="text-muted-foreground flex items-center gap-1 text-sm">
+            <CheckIcon className="size-3.5" />
+            Valid JSON
+          </p>
+        )}
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          disabled={disabled || message !== null || value.trim() === ""}
+          onClick={() => onChange(JSON.stringify(JSON.parse(value), null, 2))}
+        >
+          <BracesIcon data-icon="inline-start" />
+          Format
+        </Button>
+      </div>
+    </div>
+  );
+}

package/templates/app/components/dashboard/fields/markdown-field.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useState } from "react";
+import { EyeIcon, PencilIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Markdown } from "./markdown";
+
+interface Props {
+  id: string;
+  value: string;
+  onChange: (value: string) => void;
+  invalid: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  placeholder?: string;
+  maxLength?: number;
+}
+
+/**
+ * A `markdown` field: write on one pane, see it on the other.
+ *
+ * Not a WYSIWYG editor, and that is a choice rather than a shortcut. A rich-text editor is
+ * a large dependency that stores HTML you then have to sanitise everywhere it is shown;
+ * Markdown is text, it diffs, it survives being edited by a script, and the preview uses
+ * the same renderer as the record page.
+ *
+ * Two buttons rather than a Tabs component, because this is two states and Tabs would mean
+ * adding another Radix package to every app for one field.
+ */
+export function MarkdownField({ id, value, onChange, invalid, disabled, required, placeholder, maxLength }: Props) {
+  const [previewing, setPreviewing] = useState(false);
+  const lines = Math.min(24, Math.max(6, value.split("\n").length + 1));
+  const empty = value.trim() === "";
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center gap-1" role="group" aria-label="Markdown editor view">
+        <Button
+          type="button"
+          size="sm"
+          variant={previewing ? "ghost" : "secondary"}
+          aria-pressed={!previewing}
+          onClick={() => setPreviewing(false)}
+        >
+          <PencilIcon data-icon="inline-start" />
+          Write
+        </Button>
+        <Button
+          type="button"
+          size="sm"
+          variant={previewing ? "secondary" : "ghost"}
+          aria-pressed={previewing}
+          disabled={empty}
+          onClick={() => setPreviewing(true)}
+        >
+          <EyeIcon data-icon="inline-start" />
+          Preview
+        </Button>
+      </div>
+      {previewing ? (
+        // Same minimum height as the editor, so switching does not move the page about.
+        <div className="min-h-32 rounded-md border px-3 py-2">
+          <Markdown source={value} />
+        </div>
+      ) : (
+        <Textarea
+          id={id}
+          value={value}
+          rows={lines}
+          disabled={disabled}
+          required={required}
+          maxLength={maxLength}
+          aria-invalid={invalid || undefined}
+          onChange={(event) => onChange(event.target.value)}
+          placeholder={placeholder ?? "Markdown: **bold**, [links](https://example.com), - lists"}
+          className="font-mono text-sm"
+        />
+      )}
+    </div>
+  );
+}

package/templates/app/components/dashboard/fields/markdown.tsx

@@ -0,0 +1,159 @@
+import type { ReactNode } from "react";
+
+/**
+ * A small Markdown renderer for `markdown` fields.
+ *
+ * It builds React elements, not an HTML string. That is the whole reason it exists rather
+ * than a dependency: there is no `dangerouslySetInnerHTML` anywhere in it, so there is no
+ * sanitiser to get right and no way for stored text to become markup. Link hrefs are the
+ * one place a value reaches an attribute, and those are checked against a protocol list.
+ *
+ * What it supports, and nothing else: headings, paragraphs, bulleted and numbered lists,
+ * blockquotes, fenced and inline code, bold, italic, links, and `---`. Tables, footnotes,
+ * images and raw HTML are not rendered — they appear as the text you typed. If you need
+ * more than this, this file is yours: replace it with a parser you like.
+ */
+
+/** `javascript:` in a link is the one way text here could become an action. */
+const SAFE_PROTOCOL = /^(https?:|mailto:|tel:|\/|#)/i;
+
+/** Inline: **bold**, *italic*, `code`, [text](href). Leftmost match wins, then recurse. */
+function inline(text: string, keyPrefix: string): ReactNode[] {
+  const out: ReactNode[] = [];
+  let rest = text;
+  let index = 0;
+
+  while (rest.length > 0) {
+    const match = /(\*\*(.+?)\*\*)|(\*(.+?)\*)|(`([^`]+?)`)|(\[([^\]]*)\]\(([^)\s]+)\))/.exec(rest);
+    if (!match) {
+      out.push(rest);
+      break;
+    }
+    if (match.index > 0) out.push(rest.slice(0, match.index));
+    const key = `${keyPrefix}-${index++}`;
+
+    if (match[2] !== undefined) out.push(<strong key={key}>{inline(match[2], key)}</strong>);
+    else if (match[4] !== undefined) out.push(<em key={key}>{inline(match[4], key)}</em>);
+    else if (match[6] !== undefined)
+      out.push(
+        <code key={key} className="bg-muted rounded px-1 py-0.5 font-mono text-[0.9em]">
+          {match[6]}
+        </code>,
+      );
+    else if (match[9] !== undefined) {
+      const href = match[9];
+      const label = match[8] || href;
+      out.push(
+        SAFE_PROTOCOL.test(href) ? (
+          <a key={key} href={href} className="underline underline-offset-2" rel="noreferrer noopener" target="_blank">
+            {label}
+          </a>
+        ) : (
+          // Not a link: shown as the text it is, so nothing is silently dropped either.
+          <span key={key}>{match[7]}</span>
+        ),
+      );
+    }
+    rest = rest.slice(match.index + match[0]!.length);
+  }
+  return out;
+}
+
+const HEADINGS = { 1: "text-xl font-semibold", 2: "text-lg font-semibold", 3: "text-base font-semibold" } as const;
+
+export function Markdown({ source }: { source: string }) {
+  const lines = source.replace(/\r\n/g, "\n").split("\n");
+  const blocks: ReactNode[] = [];
+  let paragraph: string[] = [];
+  let at = 0;
+
+  const flush = () => {
+    if (paragraph.length === 0) return;
+    blocks.push(<p key={`p-${blocks.length}`}>{inline(paragraph.join(" "), `p-${blocks.length}`)}</p>);
+    paragraph = [];
+  };
+
+  while (at < lines.length) {
+    const line = lines[at]!;
+
+    if (line.trim() === "") {
+      flush();
+      at += 1;
+      continue;
+    }
+
+    // ``` fenced code: taken literally to the closing fence, or to the end.
+    if (/^\s*```/.test(line)) {
+      flush();
+      const body: string[] = [];
+      at += 1;
+      while (at < lines.length && !/^\s*```/.test(lines[at]!)) body.push(lines[at++]!);
+      at += 1;
+      blocks.push(
+        <pre key={`pre-${blocks.length}`} className="bg-muted overflow-x-auto rounded-md p-3 font-mono text-sm">
+          <code>{body.join("\n")}</code>
+        </pre>,
+      );
+      continue;
+    }
+
+    const heading = /^(#{1,3})\s+(.*)$/.exec(line);
+    if (heading) {
+      flush();
+      const level = heading[1]!.length as 1 | 2 | 3;
+      const Tag = (["h1", "h2", "h3"] as const)[level - 1]!;
+      blocks.push(
+        <Tag key={`h-${blocks.length}`} className={HEADINGS[level]}>
+          {inline(heading[2]!, `h-${blocks.length}`)}
+        </Tag>,
+      );
+      at += 1;
+      continue;
+    }
+
+    if (/^\s*(-{3,}|\*{3,})\s*$/.test(line)) {
+      flush();
+      blocks.push(<hr key={`hr-${blocks.length}`} className="border-border" />);
+      at += 1;
+      continue;
+    }
+
+    const bullet = /^\s*[-*+]\s+/;
+    const numbered = /^\s*\d+[.)]\s+/;
+    if (bullet.test(line) || numbered.test(line)) {
+      flush();
+      const ordered = numbered.test(line);
+      const pattern = ordered ? numbered : bullet;
+      const items: string[] = [];
+      while (at < lines.length && pattern.test(lines[at]!)) items.push(lines[at++]!.replace(pattern, ""));
+      const List = ordered ? "ol" : "ul";
+      blocks.push(
+        <List key={`l-${blocks.length}`} className={ordered ? "list-decimal pl-5" : "list-disc pl-5"}>
+          {items.map((item, index) => (
+            <li key={index}>{inline(item, `l-${blocks.length}-${index}`)}</li>
+          ))}
+        </List>,
+      );
+      continue;
+    }
+
+    if (/^\s*>\s?/.test(line)) {
+      flush();
+      const quoted: string[] = [];
+      while (at < lines.length && /^\s*>\s?/.test(lines[at]!)) quoted.push(lines[at++]!.replace(/^\s*>\s?/, ""));
+      blocks.push(
+        <blockquote key={`q-${blocks.length}`} className="text-muted-foreground border-l-2 pl-3 italic">
+          {inline(quoted.join(" "), `q-${blocks.length}`)}
+        </blockquote>,
+      );
+      continue;
+    }
+
+    paragraph.push(line.trim());
+    at += 1;
+  }
+  flush();
+
+  if (blocks.length === 0) return <p className="text-muted-foreground text-sm">Nothing to preview.</p>;
+  return <div className="flex flex-col gap-3 text-sm leading-relaxed [&_a]:text-primary">{blocks}</div>;
+}

package/templates/app/components/dashboard/fields/tags-field.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useRef, useState, type KeyboardEvent } from "react";
+import { XIcon } from "lucide-react";
+import { parseMultiValue, type TagsField as TagsDef } from "@flaredev/core";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+
+interface Props {
+  id: string;
+  field: TagsDef & { label: string };
+  /** Form state: a JSON array of the tags. */
+  value: string;
+  onChange: (value: string) => void;
+  invalid: boolean;
+  disabled?: boolean;
+}
+
+/**
+ * A `tags` field: type a label, press Enter.
+ *
+ * Unlike a multiselect there is no list to pick from, so the input has to carry the whole
+ * interaction: Enter and comma commit, Backspace on an empty box removes the last tag, and
+ * a duplicate is refused rather than added twice — case-insensitively, because "Urgent"
+ * and "urgent" as two tags is a mistake every time.
+ */
+export function TagsField({ id, field, value, onChange, invalid, disabled }: Props) {
+  const tags = parseMultiValue(value);
+  const [draft, setDraft] = useState("");
+  const input = useRef<HTMLInputElement>(null);
+  const maxLength = field.maxLength ?? 32;
+  const full = field.maxItems !== undefined && tags.length >= field.maxItems;
+
+  const commit = (raw: string) => {
+    const tag = raw.trim().slice(0, maxLength);
+    setDraft("");
+    if (!tag || full) return;
+    if (tags.some((existing) => existing.toLowerCase() === tag.toLowerCase())) return;
+    onChange(JSON.stringify([...tags, tag]));
+  };
+
+  const remove = (tag: string) => onChange(JSON.stringify(tags.filter((existing) => existing !== tag)));
+
+  function onKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+    if (event.key === "Enter" || event.key === ",") {
+      // Enter in a text input submits the form; this is a tag, not a save.
+      event.preventDefault();
+      commit(draft);
+      return;
+    }
+    if (event.key === "Backspace" && draft === "" && tags.length > 0) {
+      event.preventDefault();
+      remove(tags[tags.length - 1]!);
+    }
+  }
+
+  return (
+    <div
+      id={id}
+      role="group"
+      aria-label={field.label}
+      aria-invalid={invalid || undefined}
+      className="border-input focus-within:border-ring focus-within:ring-ring/50 aria-invalid:border-destructive flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent px-2 py-1.5 focus-within:ring-[3px]"
+      // The box looks like one input, so clicking the empty part of it focuses the input.
+      onClick={() => input.current?.focus()}
+    >
+      {tags.map((tag) => (
+        <Badge key={tag} variant="secondary" className="gap-1 pr-1">
+          {tag}
+          {!disabled && (
+            <button
+              type="button"
+              aria-label={`Remove ${tag}`}
+              className="hover:text-foreground text-muted-foreground rounded-sm"
+              onClick={(event) => {
+                event.stopPropagation();
+                remove(tag);
+              }}
+            >
+              <XIcon className="size-3" />
+            </button>
+          )}
+        </Badge>
+      ))}
+      <Input
+        ref={input}
+        value={draft}
+        disabled={disabled || full}
+        maxLength={maxLength}
+        // Committing on blur too: typing a tag and clicking Save should not lose it.
+        onBlur={() => commit(draft)}
+        onChange={(event) => setDraft(event.target.value)}
+        onKeyDown={onKeyDown}
+        placeholder={full ? `${field.maxItems} is the most` : (field.placeholder ?? (tags.length === 0 ? "Type and press Enter" : ""))}
+        className="h-6 min-w-32 flex-1 border-0 bg-transparent p-0 shadow-none focus-visible:ring-0 dark:bg-transparent"
+        aria-label={`Add a ${field.label.toLowerCase()} tag`}
+      />
+    </div>
+  );
+}

package/templates/app/components/dashboard/import-dialog.tsx

@@ -62,6 +62,11 @@ function exampleFor(key: string, def: StoredField & { label: string }): string {
       return String((def as EnumField).options[0] ?? "");
     case "multiselect":
       return ((def as MultiSelectField).options.slice(0, 2) as string[]).join("; ");
+    case "tags":
+      return "urgent; q3";
+    case "json":
+      // Quoted, because a CSV cell holding JSON has commas in it.
+      return '{"key": "value"}';
     case "belongsTo":
       return "id of an existing " + (def as { target: string }).target;
     default:
@@ -177,6 +182,20 @@ function toValue(def: StoredField, raw: string): unknown {
         .map((part) => part.trim())
         .filter(Boolean)
         .map((part) => matchOption(def, part));
+    case "tags":
+      // Semicolons first so a tag may contain a comma: "a, b; c" is two tags.
+      return text
+        .split(text.includes(";") ? ";" : ",")
+        .map((part) => part.trim())
+        .filter(Boolean);
+    case "json":
+      try {
+        return JSON.parse(text);
+      } catch {
+        // Handed over as typed: the validator reports it against the row and the column,
+        // which is more use than this throwing halfway through a file.
+        return text;
+      }
     default:
       // Dates keep their text: the descriptor's schema decides which formats it takes.
       return text;

package/templates/app/components/dashboard/record-actions.tsx

@@ -25,6 +25,8 @@ interface Props {
   id: string;
   record: Record<string, unknown>;
   relations: FormRelations;
+  /** Fields the edit form leaves out — see ResourceForm. */
+  omit?: string[];
   listHref: string;
   editHref: string;
   canUpdate: boolean;
@@ -34,7 +36,7 @@ interface Props {
 }
 
 /** Edit and delete, at the top of a record's own page. Deleting goes back to the list. */
-export function RecordActions({ resource, id, record, relations, listHref, editHref, canUpdate, canDelete, overlayForms }: Props) {
+export function RecordActions({ resource, id, record, relations, omit, listHref, editHref, canUpdate, canDelete, overlayForms }: Props) {
   const router = useRouter();
   const [editing, setEditing] = useState(false);
   const [confirming, setConfirming] = useState(false);
@@ -81,6 +83,7 @@ export function RecordActions({ resource, id, record, relations, listHref, editH
         <ResourceFormSheet
           resource={resource}
           relations={relations}
+          omit={omit}
           listHref={listHref}
           mode="edit"
           id={id}

package/templates/app/components/dashboard/record-detail.tsx

@@ -3,6 +3,7 @@ import { notFound } from "next/navigation";
 import { clientResource, formatValue, optionLabel, relationGraph, statusTone, storedFields, type Resource } from "@flaredev/core";
 import { Badge } from "@/components/ui/badge";
 import { FileCell } from "@/components/dashboard/fields/file-cell";
+import { Markdown } from "@/components/dashboard/fields/markdown";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { recentAudit } from "@/lib/audit";
@@ -115,6 +116,23 @@ export async function RecordDetail({ resource, id }: { resource: Resource; id: s
               } else if (def.kind === "file" && typeof value === "string" && value) {
                 // Bigger here than in the table: this is the page for looking at one record.
                 content = <FileCell resourceName={resource.name} fieldKey={key} value={value} size={96} />;
+              } else if (def.kind === "tags" && Array.isArray(value) && value.length > 0) {
+                content = (
+                  <span className="flex flex-wrap gap-1">
+                    {value.map((item) => (
+                      <Badge key={String(item)} variant="outline">
+                        {String(item)}
+                      </Badge>
+                    ))}
+                  </span>
+                );
+              } else if (def.kind === "json" && value !== null && value !== undefined) {
+                // In full here, indented. The table cell gets one truncated line.
+                content = (
+                  <pre className="bg-muted max-h-80 overflow-auto rounded-md p-3 font-mono text-xs">{JSON.stringify(value, null, 2)}</pre>
+                );
+              } else if (def.kind === "text" && def.format === "markdown" && typeof value === "string" && value.trim()) {
+                content = <Markdown source={value} />;
               } else if (def.kind === "multiselect" && Array.isArray(value) && value.length > 0) {
                 content = (
                   <span className="flex flex-wrap gap-1">