From 34d8a96db7fd762aa3061a2438b648f1bfeae54e Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Wed, 13 May 2026 10:59:13 +0530
Subject: [PATCH] feat: show example values in API fields, increase section
 spacing

- Add example field to SchemaField from OpenAPI schema examples
- Display example values inline with field description
- Increase divider margin between sections for better readability

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/api/api-field-list.module.css   | 14 ++++++++++++++
 .../src/components/api/api-field-list.tsx          |  4 ++++
 .../src/components/api/api-overview.module.css     |  2 +-
 .../chronicle/src/components/api/api-overview.tsx  |  2 +-
 .../src/components/api/playground-dialog.tsx       |  4 ++--
 packages/chronicle/src/lib/schema.ts               |  2 ++
 6 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/chronicle/src/components/api/api-field-list.module.css b/packages/chronicle/src/components/api/api-field-list.module.css
index bf91645..a8d551b 100644
--- a/packages/chronicle/src/components/api/api-field-list.module.css
+++ b/packages/chronicle/src/components/api/api-field-list.module.css
@@ -30,6 +30,20 @@
   color: var(--rs-color-foreground-base-secondary);
 }
 
+.fieldExample {
+  font-size: var(--rs-font-size-small);
+  line-height: var(--rs-line-height-small);
+  color: var(--rs-color-foreground-base-tertiary);
+}
+
+.fieldExample code {
+  font-family: var(--rs-font-mono);
+  font-size: var(--rs-font-size-mono-small);
+  background: var(--rs-color-background-neutral-secondary);
+  padding: 1px var(--rs-space-2);
+  border-radius: 3px;
+}
+
 .statusDescription {
   font-size: var(--rs-font-size-regular);
   line-height: var(--rs-line-height-regular);
diff --git a/packages/chronicle/src/components/api/api-field-list.tsx b/packages/chronicle/src/components/api/api-field-list.tsx
index 7a2876c..a4f2da4 100644
--- a/packages/chronicle/src/components/api/api-field-list.tsx
+++ b/packages/chronicle/src/components/api/api-field-list.tsx
@@ -44,10 +44,14 @@ function FieldItem({ field }: { field: SchemaField }) {
       <Flex align="center" gap={3}>
         <Badge variant="neutral" size="micro">{field.name}</Badge>
         <span className={styles.fieldType}>{field.type}</span>
+        {field.required && <Badge variant="danger" size="micro">required</Badge>}
       </Flex>
       {field.description && (
         <span className={styles.fieldDescription}>{field.description}</span>
       )}
+      {field.example !== undefined && (
+        <span className={styles.fieldExample}>Example: <code>{JSON.stringify(field.example)}</code></span>
+      )}
       {hasChildren && <ExpandableChildren field={field} />}
     </Flex>
   )
diff --git a/packages/chronicle/src/components/api/api-overview.module.css b/packages/chronicle/src/components/api/api-overview.module.css
index 1b3917d..29e4d19 100644
--- a/packages/chronicle/src/components/api/api-overview.module.css
+++ b/packages/chronicle/src/components/api/api-overview.module.css
@@ -49,7 +49,7 @@
 
 .divider {
   padding: 0;
-  margin: var(--rs-space-2) 0;
+  margin: var(--rs-space-4) 0;
 }
 
 @media (max-width: 1100px) {
diff --git a/packages/chronicle/src/components/api/api-overview.tsx b/packages/chronicle/src/components/api/api-overview.tsx
index b92a809..76c4b01 100644
--- a/packages/chronicle/src/components/api/api-overview.tsx
+++ b/packages/chronicle/src/components/api/api-overview.tsx
@@ -47,7 +47,7 @@ export function ApiOverview({ method, path, operation, auth }: ApiOverviewProps)
 
   return (
     <Flex className={styles.layout}>
-      <Flex direction='column' gap={10} className={styles.left}>
+      <Flex direction='column' gap={9} className={styles.left}>
         <Flex direction='column' gap={7}>
           <Flex direction='column' gap={4}>
             {operation.summary && (
diff --git a/packages/chronicle/src/components/api/playground-dialog.tsx b/packages/chronicle/src/components/api/playground-dialog.tsx
index 4bd1cfe..eb329d8 100644
--- a/packages/chronicle/src/components/api/playground-dialog.tsx
+++ b/packages/chronicle/src/components/api/playground-dialog.tsx
@@ -486,7 +486,7 @@ function BodyFieldRow({ field, value, onChange }: {
     return (
       <div className={styles.arrayField}>
         <div className={styles.fieldRow}>
-          <span className={styles.fieldLabel}>{field.name}</span>
+          <span className={styles.fieldLabel}>{field.name} {field.required && <Badge variant="danger" size="micro">required</Badge>}</span>
           <IconButton size={2} onClick={() => onChange([...items, ''])} aria-label="Add item">
             <PlusIcon />
           </IconButton>
@@ -537,7 +537,7 @@ function BodyFieldRow({ field, value, onChange }: {
 
   return (
     <div className={styles.fieldRow}>
-      <span className={styles.fieldLabel}>{field.name}</span>
+      <span className={styles.fieldLabel}>{field.name} {field.required && <Badge variant="danger" size="micro">required</Badge>}</span>
       <div className={styles.fieldInput}>
         <InputField
           size="small"
diff --git a/packages/chronicle/src/lib/schema.ts b/packages/chronicle/src/lib/schema.ts
index 1c21c87..a86eefa 100644
--- a/packages/chronicle/src/lib/schema.ts
+++ b/packages/chronicle/src/lib/schema.ts
@@ -19,6 +19,7 @@ export interface SchemaField {
   required: boolean
   description?: string
   default?: unknown
+  example?: unknown
   enum?: unknown[]
   children?: SchemaField[]
 }
@@ -90,6 +91,7 @@ export function flattenSchema(
         required: required.includes(name),
         description: rawProp.description ?? prop.description,
         default: prop.default,
+        example: prop.example,
         enum: prop.enum,
         children: children?.length ? children : undefined,
       }