From e1d8f5292603e55c84403be08ece95fb1ef43273 Mon Sep 17 00:00:00 2001
From: Hirotaka Mizutani <52546+hirotaka@users.noreply.github.com>
Date: Thu, 25 Jun 2026 14:02:55 +0900
Subject: [PATCH] feat(registry): Add reasoning disclosure component

---
 .../demo/ReasoningDisclosureDemo.vue          | 21 +++++
 .../ReasoningDisclosure.vue                   | 80 +++++++++++++++++++
 .../blocks/reasoning-disclosure/index.ts      |  1 +
 content/docs/2.components/1.chat.md           |  7 ++
 .../2.components/8.reasoning-disclosure.md    | 61 ++++++++++++++
 scripts/registry-verify.ts                    |  4 +
 6 files changed, 174 insertions(+)
 create mode 100644 app/components/demo/ReasoningDisclosureDemo.vue
 create mode 100644 app/registry/blocks/reasoning-disclosure/ReasoningDisclosure.vue
 create mode 100644 app/registry/blocks/reasoning-disclosure/index.ts
 create mode 100644 content/docs/2.components/8.reasoning-disclosure.md

diff --git a/app/components/demo/ReasoningDisclosureDemo.vue b/app/components/demo/ReasoningDisclosureDemo.vue
new file mode 100644
index 0000000..6414c6d
--- /dev/null
+++ b/app/components/demo/ReasoningDisclosureDemo.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ReasoningDisclosure } from "~/registry/blocks/reasoning-disclosure";
+
+const completedReasoning = `# Plan
+Compare the user's request with the current chat state.
+**Then** choose the smallest UI boundary that can be installed as source code.`;
+
+const streamingReasoning = `Reading the latest message...
+Checking available tools and context...
+Drafting a concise response.`;
+</script>
+
+<template>
+  <div class="flex w-full max-w-xl flex-col gap-4">
+    <ReasoningDisclosure :text="completedReasoning" />
+    <ReasoningDisclosure
+      :text="streamingReasoning"
+      is-streaming
+    />
+  </div>
+</template>
diff --git a/app/registry/blocks/reasoning-disclosure/ReasoningDisclosure.vue b/app/registry/blocks/reasoning-disclosure/ReasoningDisclosure.vue
new file mode 100644
index 0000000..dd77b65
--- /dev/null
+++ b/app/registry/blocks/reasoning-disclosure/ReasoningDisclosure.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { computed, ref, watch } from "vue";
+import { ChevronDown } from "@lucide/vue";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+
+export interface ReasoningDisclosureProps {
+  /** Reasoning text supplied by the consuming app */
+  text: string;
+  /** Whether the model is currently streaming reasoning content */
+  isStreaming?: boolean;
+  /** Label shown while streaming */
+  streamingLabel?: string;
+  /** Label shown after streaming is complete */
+  completeLabel?: string;
+  /** Initial open state when not streaming */
+  defaultOpen?: boolean;
+  /** Additional CSS classes */
+  class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<ReasoningDisclosureProps>(), {
+  isStreaming: false,
+  streamingLabel: "Thinking...",
+  completeLabel: "Thoughts",
+  defaultOpen: false,
+});
+
+const open = ref(props.isStreaming || props.defaultOpen);
+
+const lines = computed(() => cleanMarkdown(props.text).split("\n").filter(Boolean));
+
+watch(() => props.isStreaming, (isStreaming) => {
+  if (isStreaming) {
+    open.value = true;
+  }
+}, { immediate: true });
+
+function cleanMarkdown(text: string): string {
+  return text
+    .replace(/\*\*(.+?)\*\*/g, "$1")
+    .replace(/\*(.+?)\*/g, "$1")
+    .replace(/`(.+?)`/g, "$1")
+    .replace(/^#+\s+/gm, "");
+}
+</script>
+
+<template>
+  <Collapsible
+    v-model:open="open"
+    data-slot="reasoning-disclosure"
+    :class="cn('relative min-w-0 w-full text-pretty *:first:mt-0 *:last:mb-0', props.class)"
+  >
+    <CollapsibleTrigger as-child>
+      <Button
+        type="button"
+        class="group p-0! text-muted-foreground"
+        variant="link"
+      >
+        {{ isStreaming ? streamingLabel : completeLabel }}
+        <ChevronDown
+          v-if="text.length > 0"
+          class="size-4 transition-transform duration-200 group-data-[state=open]:rotate-180"
+          aria-hidden="true"
+        />
+      </Button>
+    </CollapsibleTrigger>
+
+    <CollapsibleContent>
+      <div
+        v-for="(line, index) in lines"
+        :key="index"
+      >
+        <span class="whitespace-pre-wrap text-sm font-normal text-muted-foreground">{{ line }}</span>
+      </div>
+    </CollapsibleContent>
+  </Collapsible>
+</template>
diff --git a/app/registry/blocks/reasoning-disclosure/index.ts b/app/registry/blocks/reasoning-disclosure/index.ts
new file mode 100644
index 0000000..0926bd6
--- /dev/null
+++ b/app/registry/blocks/reasoning-disclosure/index.ts
@@ -0,0 +1 @@
+export { default as ReasoningDisclosure, type ReasoningDisclosureProps } from "./ReasoningDisclosure.vue";
diff --git a/content/docs/2.components/1.chat.md b/content/docs/2.components/1.chat.md
index 76bfbd7..1e9ccc1 100644
--- a/content/docs/2.components/1.chat.md
+++ b/content/docs/2.components/1.chat.md
@@ -16,6 +16,7 @@ Unlike an integrated UI module, these registry items are installed as source cod
 | [ChatMessage](/docs/components/chat-message) | Individual message bubble component with content slots, leading content, and action buttons. |
 | [ChatPrompt](/docs/components/chat-prompt) | Prompt input wrapper for composing text areas, errors, and footer controls. |
 | [ChatPromptSubmit](/docs/components/chat-prompt-submit) | Status-aware submit, stop, and retry button for prompt workflows. |
+| [ReasoningDisclosure](/docs/components/reasoning-disclosure) | Collapsible disclosure for app-owned AI reasoning text. |
 
 ## Install
 
@@ -32,6 +33,12 @@ npx shadcn-vue@latest add "https://ui.stackhacker.io/r/chat-prompt.json"
 npx shadcn-vue@latest add "https://ui.stackhacker.io/r/chat-prompt-submit.json"
 ```
 
+Install reasoning disclosure when you want to show app-owned reasoning text.
+
+```bash
+npx shadcn-vue@latest add "https://ui.stackhacker.io/r/reasoning-disclosure.json"
+```
+
 ## Basic Composition
 
 ```vue
diff --git a/content/docs/2.components/8.reasoning-disclosure.md b/content/docs/2.components/8.reasoning-disclosure.md
new file mode 100644
index 0000000..63fd239
--- /dev/null
+++ b/content/docs/2.components/8.reasoning-disclosure.md
@@ -0,0 +1,61 @@
+---
+title: ReasoningDisclosure
+description: Show app-owned AI reasoning text in a compact collapsible disclosure.
+category: chat
+---
+
+::component-preview
+---
+name: ReasoningDisclosureDemo
+---
+::
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add "https://ui.stackhacker.io/r/reasoning-disclosure.json"
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ReasoningDisclosure } from '@/components/reasoning-disclosure'
+
+const reasoning = ref('Compare the user request with the current chat state.')
+const isStreaming = ref(false)
+</script>
+
+<template>
+  <ReasoningDisclosure :text="reasoning" :is-streaming="isStreaming" />
+</template>
+```
+
+## App-Owned Reasoning
+
+`ReasoningDisclosure` renders reasoning text that your app already has. Your app owns model output, streaming state, message schemas, persistence, and whether reasoning should be shown.
+
+The component performs light text cleanup for simple markdown markers. It is not a full markdown renderer.
+
+## Examples
+
+### Default
+
+::component-preview
+---
+name: ReasoningDisclosureDemo
+---
+::
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `text` | `string` | — | Reasoning text supplied by the consuming app. |
+| `isStreaming` | `boolean` | `false` | Opens the disclosure and shows the streaming label while reasoning is streaming. |
+| `streamingLabel` | `string` | `'Thinking...'` | Label shown while streaming. |
+| `completeLabel` | `string` | `'Thoughts'` | Label shown after streaming is complete. |
+| `defaultOpen` | `boolean` | `false` | Initial open state when not streaming. |
+| `class` | `string` | — | Additional CSS classes. |
diff --git a/scripts/registry-verify.ts b/scripts/registry-verify.ts
index fae4e56..7742e1f 100644
--- a/scripts/registry-verify.ts
+++ b/scripts/registry-verify.ts
@@ -99,6 +99,10 @@ const expectedItems: Record<string, ExpectedRegistryItem> = {
     dependencies: ["@lucide/vue"],
     registryDependencies: ["badge", "button", "card"],
   },
+  "reasoning-disclosure": {
+    dependencies: ["@lucide/vue"],
+    registryDependencies: ["button", "collapsible"],
+  },
 };
 
 if (registryIndex) {