From 9bf3f5f2ef67e03c16d123c3d8a026e6b53f5da0 Mon Sep 17 00:00:00 2001
From: dbpolito <danielbpolito@gmail.com>
Date: Thu, 26 Feb 2026 13:43:28 -0300
Subject: [PATCH] feat(desktop): Make Reasoning Collapsable

---
 packages/ui/src/components/message-part.css | 24 +++++++++++++++++++-
 packages/ui/src/components/message-part.tsx | 25 ++++++++++++++++++---
 packages/ui/src/i18n/ar.ts                  |  2 ++
 packages/ui/src/i18n/br.ts                  |  2 ++
 packages/ui/src/i18n/bs.ts                  |  2 ++
 packages/ui/src/i18n/da.ts                  |  2 ++
 packages/ui/src/i18n/de.ts                  |  2 ++
 packages/ui/src/i18n/en.ts                  |  2 ++
 packages/ui/src/i18n/es.ts                  |  2 ++
 packages/ui/src/i18n/fr.ts                  |  2 ++
 packages/ui/src/i18n/ja.ts                  |  2 ++
 packages/ui/src/i18n/ko.ts                  |  2 ++
 packages/ui/src/i18n/no.ts                  |  2 ++
 packages/ui/src/i18n/pl.ts                  |  2 ++
 packages/ui/src/i18n/ru.ts                  |  2 ++
 packages/ui/src/i18n/th.ts                  |  2 ++
 packages/ui/src/i18n/zh.ts                  |  2 ++
 packages/ui/src/i18n/zht.ts                 |  2 ++
 18 files changed, 77 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css
index bea33ff54cf..1f1d5abcafc 100644
--- a/packages/ui/src/components/message-part.css
+++ b/packages/ui/src/components/message-part.css
@@ -225,13 +225,35 @@
   }
 }
 
+[data-component="reasoning-part-trigger"] {
+  width: 100%;
+  min-height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0px;
+  cursor: pointer;
+
+  [data-slot="reasoning-part-label"] {
+    font-family: var(--font-family-sans);
+    font-size: 14px;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large);
+    color: var(--text-strong);
+  }
+
+  [data-slot="collapsible-arrow"] {
+    color: var(--icon-weaker);
+  }
+}
+
 [data-component="reasoning-part"] {
   width: 100%;
   color: var(--text-base);
   line-height: var(--line-height-normal);
 
   [data-component="markdown"] {
-    margin-top: 24px;
+    margin-top: 4px;
     font-style: normal;
     font-size: inherit;
     color: var(--text-weak);
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index 8fbad45bd8a..e279906a8e1 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -103,6 +103,7 @@ export interface MessagePartProps {
   defaultOpen?: boolean
   showAssistantCopyPartID?: string | null
   turnDurationMs?: number
+  working?: boolean
 }
 
 export type PartComponent = Component<MessagePartProps>
@@ -382,6 +383,7 @@ export function AssistantParts(props: {
                   showAssistantCopyPartID={props.showAssistantCopyPartID}
                   turnDurationMs={props.turnDurationMs}
                   defaultOpen={partDefaultOpen(entry().part, props.shellToolDefaultOpen, props.editToolDefaultOpen)}
+                  working={props.working && tail()}
                 />
               )}
             </Show>
@@ -869,6 +871,7 @@ export function Part(props: MessagePartProps) {
         defaultOpen={props.defaultOpen}
         showAssistantCopyPartID={props.showAssistantCopyPartID}
         turnDurationMs={props.turnDurationMs}
+        working={props.working}
       />
     </Show>
   )
@@ -1125,15 +1128,31 @@ PART_MAPPING["text"] = function TextPartDisplay(props) {
 }
 
 PART_MAPPING["reasoning"] = function ReasoningPartDisplay(props) {
+  const i18n = useI18n()
   const part = props.part as ReasoningPart
   const text = () => part.text.trim()
   const throttledText = createThrottledValue(text)
+  const [open, setOpen] = createSignal(true)
 
   return (
     <Show when={throttledText()}>
-      <div data-component="reasoning-part">
-        <Markdown text={throttledText()} cacheKey={part.id} />
-      </div>
+      <Collapsible open={open()} onOpenChange={setOpen} variant="ghost">
+        <Collapsible.Trigger>
+          <div data-component="reasoning-part-trigger">
+            <span data-slot="reasoning-part-label">
+              <Show when={props.working} fallback={i18n.t("ui.sessionTurn.status.reasoningSummary")}>
+                <TextShimmer text={i18n.t("ui.sessionTurn.status.reasoning")} />
+              </Show>
+            </span>
+            <Collapsible.Arrow />
+          </div>
+        </Collapsible.Trigger>
+        <Collapsible.Content>
+          <div data-component="reasoning-part">
+            <Markdown text={throttledText()} cacheKey={part.id} />
+          </div>
+        </Collapsible.Content>
+      </Collapsible>
     </Show>
   )
 }
diff --git a/packages/ui/src/i18n/ar.ts b/packages/ui/src/i18n/ar.ts
index 4d79f3d001c..2ca376d91fc 100644
--- a/packages/ui/src/i18n/ar.ts
+++ b/packages/ui/src/i18n/ar.ts
@@ -43,6 +43,8 @@ export const dict = {
   "ui.sessionTurn.status.thinkingWithTopic": "تفكير - {{topic}}",
   "ui.sessionTurn.status.gatheringThoughts": "جمع الأفكار",
   "ui.sessionTurn.status.consideringNextSteps": "النظر في الخطوات التالية",
+  "ui.sessionTurn.status.reasoning": "التفكير",
+  "ui.sessionTurn.status.reasoningSummary": "ملخّص التفكير",
 
   "ui.messagePart.diagnostic.error": "خطأ",
   "ui.messagePart.title.edit": "تحرير",
diff --git a/packages/ui/src/i18n/br.ts b/packages/ui/src/i18n/br.ts
index 777f1455bd5..b912b8709de 100644
--- a/packages/ui/src/i18n/br.ts
+++ b/packages/ui/src/i18n/br.ts
@@ -43,6 +43,8 @@ export const dict = {
   "ui.sessionTurn.status.thinkingWithTopic": "Pensando - {{topic}}",
   "ui.sessionTurn.status.gatheringThoughts": "Organizando pensamentos",
   "ui.sessionTurn.status.consideringNextSteps": "Considerando próximos passos",
+  "ui.sessionTurn.status.reasoning": "Raciocínio",
+  "ui.sessionTurn.status.reasoningSummary": "Resumo do Raciocínio",
 
   "ui.messagePart.diagnostic.error": "Erro",
   "ui.messagePart.title.edit": "Editar",
diff --git a/packages/ui/src/i18n/bs.ts b/packages/ui/src/i18n/bs.ts
index e499647dff3..d80cc8fe66a 100644
--- a/packages/ui/src/i18n/bs.ts
+++ b/packages/ui/src/i18n/bs.ts
@@ -47,6 +47,8 @@ export const dict = {
   "ui.sessionTurn.status.thinkingWithTopic": "Razmišljanje - {{topic}}",
   "ui.sessionTurn.status.gatheringThoughts": "Sređivanje misli",
   "ui.sessionTurn.status.consideringNextSteps": "Razmatranje sljedećih koraka",
+  "ui.sessionTurn.status.reasoning": "Razmišljanje",
+  "ui.sessionTurn.status.reasoningSummary": "Sažetak Razmišljanja",
 
   "ui.messagePart.diagnostic.error": "Greška",
   "ui.messagePart.title.edit": "Uredi",
diff --git a/packages/ui/src/i18n/da.ts b/packages/ui/src/i18n/da.ts
index 546040598f8..670a600aba7 100644
--- a/packages/ui/src/i18n/da.ts
+++ b/packages/ui/src/i18n/da.ts
@@ -42,6 +42,8 @@ export const dict = {
   "ui.sessionTurn.status.thinkingWithTopic": "Tænker - {{topic}}",
   "ui.sessionTurn.status.gatheringThoughts": "Samler tanker",
   "ui.sessionTurn.status.consideringNextSteps": "Overvejer næste skridt",
+  "ui.sessionTurn.status.reasoning": "Ræsonnering",
+  "ui.sessionTurn.status.reasoningSummary": "Ræsonnerings Oversigt",
 
   "ui.messagePart.diagnostic.error": "Fejl",
   "ui.messagePart.title.edit": "Rediger",
diff --git a/packages/ui/src/i18n/de.ts b/packages/ui/src/i18n/de.ts
index bf5730f85f2..4c30b069bd4 100644
--- a/packages/ui/src/i18n/de.ts
+++ b/packages/ui/src/i18n/de.ts
@@ -46,6 +46,8 @@ export const dict = {
   "ui.sessionTurn.status.thinkingWithTopic": "Denken - {{topic}}",
   "ui.sessionTurn.status.gatheringThoughts": "Gedanken sammeln",
   "ui.sessionTurn.status.consideringNextSteps": "Nächste Schritte erwägen",
+  "ui.sessionTurn.status.reasoning": "Überlegung",
+  "ui.sessionTurn.status.reasoningSummary": "Überlegungs Zusammenfassung",
 
   "ui.messagePart.diagnostic.error": "Fehler",
   "ui.messagePart.title.edit": "Bearbeiten",
diff --git a/packages/ui/src/i18n/en.ts b/packages/ui/src/i18n/en.ts
index 4c9b89c6cfe..aaedb89c04a 100644
--- a/packages/ui/src/i18n/en.ts
+++ b/packages/ui/src/i18n/en.ts
@@ -43,6 +43,8 @@ export const dict = {
   "ui.sessionTurn.status.thinkingWithTopic": "Thinking - {{topic}}",
   "ui.sessionTurn.status.gatheringThoughts": "Gathering thoughts",
   "ui.sessionTurn.status.consideringNextSteps": "Considering next steps",
+  "ui.sessionTurn.status.reasoning": "Reasoning",
+  "ui.sessionTurn.status.reasoningSummary": "Reasoning Summary",
 
   "ui.messagePart.diagnostic.error": "Error",
   "ui.messagePart.title.edit": "Edit",
diff --git a/packages/ui/src/i18n/es.ts b/packages/ui/src/i18n/es.ts
index 2f21b398f1c..eabaeb21f0e 100644
--- a/packages/ui/src/i18n/es.ts
+++ b/packages/ui/src/i18n/es.ts
@@ -43,6 +43,8 @@ export const dict = {
   "ui.sessionTurn.status.thinkingWithTopic": "Pensando - {{topic}}",
   "ui.sessionTurn.status.gatheringThoughts": "Recopilando pensamientos",
   "ui.sessionTurn.status.consideringNextSteps": "Considerando siguientes pasos",
+  "ui.sessionTurn.status.reasoning": "Razonamiento",
+  "ui.sessionTurn.status.reasoningSummary": "Resumen del Razonamiento",
 
   "ui.messagePart.diagnostic.error": "Error",
   "ui.messagePart.title.edit": "Editar",
diff --git a/packages/ui/src/i18n/fr.ts b/packages/ui/src/i18n/fr.ts
index d4ea9386848..0d051429f63 100644
--- a/packages/ui/src/i18n/fr.ts
+++ b/packages/ui/src/i18n/fr.ts
@@ -43,6 +43,8 @@ export const dict = {
   "ui.sessionTurn.status.thinkingWithTopic": "Réflexion - {{topic}}",
   "ui.sessionTurn.status.gatheringThoughts": "Rassemblement des idées",
   "ui.sessionTurn.status.consideringNextSteps": "Examen des prochaines étapes",
+  "ui.sessionTurn.status.reasoning": "Raisonnement",
+  "ui.sessionTurn.status.reasoningSummary": "Résumé du Raisonnement",
 
   "ui.messagePart.diagnostic.error": "Erreur",
   "ui.messagePart.title.edit": "Modifier",
diff --git a/packages/ui/src/i18n/ja.ts b/packages/ui/src/i18n/ja.ts
index 0a4366ebefd..7c295d2ae91 100644
--- a/packages/ui/src/i18n/ja.ts
+++ b/packages/ui/src/i18n/ja.ts
@@ -42,6 +42,8 @@ export const dict = {
   "ui.sessionTurn.status.thinkingWithTopic": "思考中 - {{topic}}",
   "ui.sessionTurn.status.gatheringThoughts": "考えをまとめています",
   "ui.sessionTurn.status.consideringNextSteps": "次のステップを検討中",
+  "ui.sessionTurn.status.reasoning": "推論",
+  "ui.sessionTurn.status.reasoningSummary": "推論サマリー",
 
   "ui.messagePart.diagnostic.error": "エラー",
   "ui.messagePart.title.edit": "編集",
diff --git a/packages/ui/src/i18n/ko.ts b/packages/ui/src/i18n/ko.ts
index 58bd51b9910..ed054037ce4 100644
--- a/packages/ui/src/i18n/ko.ts
+++ b/packages/ui/src/i18n/ko.ts
@@ -43,6 +43,8 @@ export const dict = {
   "ui.sessionTurn.status.thinkingWithTopic": "생각 중 - {{topic}}",
   "ui.sessionTurn.status.gatheringThoughts": "생각 정리 중",
   "ui.sessionTurn.status.consideringNextSteps": "다음 단계 고려 중",
+  "ui.sessionTurn.status.reasoning": "추론",
+  "ui.sessionTurn.status.reasoningSummary": "추론 요약",
 
   "ui.messagePart.diagnostic.error": "오류",
   "ui.messagePart.title.edit": "편집",
diff --git a/packages/ui/src/i18n/no.ts b/packages/ui/src/i18n/no.ts
index b7e604f9acb..208be2b1f4d 100644
--- a/packages/ui/src/i18n/no.ts
+++ b/packages/ui/src/i18n/no.ts
@@ -46,6 +46,8 @@ export const dict: Record<Keys, string> = {
   "ui.sessionTurn.status.thinkingWithTopic": "Tenker - {{topic}}",
   "ui.sessionTurn.status.gatheringThoughts": "Samler tanker",
   "ui.sessionTurn.status.consideringNextSteps": "Vurderer neste trinn",
+  "ui.sessionTurn.status.reasoning": "Resonnering",
+  "ui.sessionTurn.status.reasoningSummary": "Resonnerings Sammendrag",
 
   "ui.messagePart.diagnostic.error": "Feil",
   "ui.messagePart.title.edit": "Rediger",
diff --git a/packages/ui/src/i18n/pl.ts b/packages/ui/src/i18n/pl.ts
index fbccb92207c..15fdbd02f87 100644
--- a/packages/ui/src/i18n/pl.ts
+++ b/packages/ui/src/i18n/pl.ts
@@ -42,6 +42,8 @@ export const dict = {
   "ui.sessionTurn.status.thinkingWithTopic": "Myślenie - {{topic}}",
   "ui.sessionTurn.status.gatheringThoughts": "Zbieranie myśli",
   "ui.sessionTurn.status.consideringNextSteps": "Rozważanie kolejnych kroków",
+  "ui.sessionTurn.status.reasoning": "Rozumowanie",
+  "ui.sessionTurn.status.reasoningSummary": "Podsumowanie Rozumowania",
 
   "ui.messagePart.diagnostic.error": "Błąd",
   "ui.messagePart.title.edit": "Edycja",
diff --git a/packages/ui/src/i18n/ru.ts b/packages/ui/src/i18n/ru.ts
index 705f2d21090..d855f449fb2 100644
--- a/packages/ui/src/i18n/ru.ts
+++ b/packages/ui/src/i18n/ru.ts
@@ -42,6 +42,8 @@ export const dict = {
   "ui.sessionTurn.status.thinkingWithTopic": "Размышление - {{topic}}",
   "ui.sessionTurn.status.gatheringThoughts": "Сбор мыслей",
   "ui.sessionTurn.status.consideringNextSteps": "Рассмотрение следующих шагов",
+  "ui.sessionTurn.status.reasoning": "Рассуждение",
+  "ui.sessionTurn.status.reasoningSummary": "Сводка Рассуждений",
 
   "ui.messagePart.diagnostic.error": "Ошибка",
   "ui.messagePart.title.edit": "Редактировать",
diff --git a/packages/ui/src/i18n/th.ts b/packages/ui/src/i18n/th.ts
index cf536e1ff6c..c70d26e96e9 100644
--- a/packages/ui/src/i18n/th.ts
+++ b/packages/ui/src/i18n/th.ts
@@ -44,6 +44,8 @@ export const dict = {
   "ui.sessionTurn.status.thinkingWithTopic": "กำลังคิด - {{topic}}",
   "ui.sessionTurn.status.gatheringThoughts": "รวบรวมความคิด",
   "ui.sessionTurn.status.consideringNextSteps": "พิจารณาขั้นตอนถัดไป",
+  "ui.sessionTurn.status.reasoning": "การใช้เหตุผล",
+  "ui.sessionTurn.status.reasoningSummary": "สรุปการใช้เหตุผล",
 
   "ui.messagePart.diagnostic.error": "ข้อผิดพลาด",
   "ui.messagePart.title.edit": "แก้ไข",
diff --git a/packages/ui/src/i18n/zh.ts b/packages/ui/src/i18n/zh.ts
index 5d3d5613da5..42f8366b7be 100644
--- a/packages/ui/src/i18n/zh.ts
+++ b/packages/ui/src/i18n/zh.ts
@@ -47,6 +47,8 @@ export const dict = {
   "ui.sessionTurn.status.thinkingWithTopic": "思考：{{topic}}",
   "ui.sessionTurn.status.gatheringThoughts": "正在整理思路",
   "ui.sessionTurn.status.consideringNextSteps": "正在考虑下一步",
+  "ui.sessionTurn.status.reasoning": "推理",
+  "ui.sessionTurn.status.reasoningSummary": "推理摘要",
 
   "ui.messagePart.diagnostic.error": "错误",
   "ui.messagePart.title.edit": "编辑",
diff --git a/packages/ui/src/i18n/zht.ts b/packages/ui/src/i18n/zht.ts
index b61349e25d2..3a5dbfb4c64 100644
--- a/packages/ui/src/i18n/zht.ts
+++ b/packages/ui/src/i18n/zht.ts
@@ -47,6 +47,8 @@ export const dict = {
   "ui.sessionTurn.status.thinkingWithTopic": "思考 - {{topic}}",
   "ui.sessionTurn.status.gatheringThoughts": "正在整理思緒",
   "ui.sessionTurn.status.consideringNextSteps": "正在考慮下一步",
+  "ui.sessionTurn.status.reasoning": "推理",
+  "ui.sessionTurn.status.reasoningSummary": "推理摘要",
 
   "ui.messagePart.diagnostic.error": "錯誤",
   "ui.messagePart.title.edit": "編輯",