obsidian-plugin/murashit_codex-panel
1
0
Fork 0
mirror of https://github.com/murashit/codex-panel.git synced 2026-07-22 17:30:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Render effective config with React

Browse source
This commit is contained in:
murashit 2026-05-28 07:39:16 +09:00
parent b1669e768b
commit e22214b9d3
2 changed files with 24 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/features/chat/ui/config.ts
View file

@ -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);
}
}
}

33
src/features/chat/ui/toolbar.tsx
View file

@ -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 {