From e22214b9d31cba198b5cc52db520d494b3c261ed Mon Sep 17 00:00:00 2001
From: murashit <murashit@proton.me>
Date: Thu, 28 May 2026 07:39:16 +0900
Subject: [PATCH] Render effective config with React

---
 src/features/chat/ui/config.ts   | 14 --------------
 src/features/chat/ui/toolbar.tsx | 33 +++++++++++++++++++++++---------
 2 files changed, 24 insertions(+), 23 deletions(-)
 delete mode 100644 src/features/chat/ui/config.ts

diff --git a/src/features/chat/ui/config.ts b/src/features/chat/ui/config.ts
deleted file mode 100644
index b1c320a3..00000000
--- a/src/features/chat/ui/config.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { EffectiveConfigSection } from "../../../runtime/view";
-import { createDefinitionRow } from "../../../shared/ui/components";
-
-export function renderEffectiveConfig(parent: HTMLElement, sections: EffectiveConfigSection[]): void {
-  const panel = parent.createDiv({ cls: "codex-panel__config" });
-  panel.createDiv({ cls: "codex-panel__config-title", text: "Effective Codex config" });
-  const list = panel.createEl("dl", { cls: "codex-panel__config-list" });
-  for (const section of sections) {
-    list.createDiv({ cls: "codex-panel__config-section", text: section.title });
-    for (const row of section.rows) {
-      createDefinitionRow(list, "codex-panel__config-row", row.key, row.value);
-    }
-  }
-}
diff --git a/src/features/chat/ui/toolbar.tsx b/src/features/chat/ui/toolbar.tsx
index cf7177d4..858d09af 100644
--- a/src/features/chat/ui/toolbar.tsx
+++ b/src/features/chat/ui/toolbar.tsx
@@ -4,7 +4,6 @@ import { useLayoutEffect, useRef, type ButtonHTMLAttributes, type KeyboardEvent,
 import type { EffectiveConfigSection, RateLimitSummary } from "../../../runtime/view";
 import { IconButton } from "../../../shared/ui/react-components";
 import { renderReactRoot } from "../../../shared/ui/react-root";
-import { renderEffectiveConfig } from "./config";
 
 export type ToolbarPanelKind = "history" | "status" | "runtime";
 export type ToolbarStatusState = "offline" | "connected" | "running";
@@ -312,14 +311,30 @@ function DiagnosticSection({ section }: { section: ToolbarDiagnosticSection }):
 }
 
 function EffectiveConfigPanel({ sections }: { sections: EffectiveConfigSection[] }): ReactNode {
-  const ref = useRef<HTMLDivElement | null>(null);
-  useLayoutEffect(() => {
-    const element = ref.current;
-    if (!element) return;
-    element.replaceChildren();
-    renderEffectiveConfig(element, sections);
-  }, [sections]);
-  return <div ref={ref} />;
+  return (
+    <div className="codex-panel__config">
+      <div className="codex-panel__config-title">Effective Codex config</div>
+      <dl className="codex-panel__config-list">
+        {sections.map((section) => (
+          <FragmentedConfigSection key={section.title} section={section} />
+        ))}
+      </dl>
+    </div>
+  );
+}
+
+function FragmentedConfigSection({ section }: { section: EffectiveConfigSection }): ReactNode {
+  return (
+    <>
+      <div className="codex-panel__config-section">{section.title}</div>
+      {section.rows.map((row) => (
+        <div key={`${row.key}\n${row.value}`} className="codex-panel__config-row">
+          <dt>{row.key}</dt>
+          <dd>{row.value}</dd>
+        </div>
+      ))}
+    </>
+  );
 }
 
 function RuntimePicker({ model }: { model: ToolbarViewModel }): ReactNode {