Align structured command rows

This commit is contained in:
murashit 2026-06-20 17:27:40 +09:00
parent 759adabb9c
commit d45cb98c67
3 changed files with 81 additions and 8 deletions

View file

@ -265,14 +265,20 @@ function TextDetails({
function SystemDetails({ details }: { details: readonly TextItemDetailSectionView[] }): UiNode {
return (
<>
<div className="codex-panel__system-result-grid">
{details.map((section, index) => (
<div key={`${section.title ?? ""}:${String(index)}`} className="codex-panel__output codex-panel__system-result-section">
{section.title ? <div className="codex-panel__output-title">{section.title}</div> : null}
<DetailSectionBody section={section} />
</div>
<Fragment key={`${section.title ?? ""}:${String(index)}`}>
{section.title ? <div className="codex-panel__system-result-heading">{section.title}</div> : null}
{section.facts?.map((row) => (
<Fragment key={`${row.key}\n${row.value}`}>
<div className="codex-panel__system-result-key">{row.key}</div>
<div className="codex-panel__system-result-value">{row.value}</div>
</Fragment>
))}
{section.body ? <pre className="codex-panel__system-result-body">{section.body}</pre> : null}
</Fragment>
))}
</>
</div>
);
}

View file

@ -102,6 +102,57 @@
margin-top: var(--codex-panel-item-gap);
}
.codex-panel__system-result-grid {
display: grid;
grid-template-columns: minmax(max-content, 28%) minmax(0, 1fr);
gap: var(--codex-panel-control-gap) var(--codex-panel-section-gap);
margin: var(--codex-panel-item-gap) 0 0;
font-size: var(--font-ui-smaller);
cursor: text;
user-select: text;
}
.codex-panel__system-result-heading {
grid-column: 1 / -1;
margin-top: var(--codex-panel-item-gap);
color: var(--text-muted);
line-height: var(--line-height-tight);
}
.codex-panel__system-result-heading:first-child {
margin-top: 0;
}
.codex-panel__system-result-key {
color: var(--text-faint);
cursor: text;
user-select: text;
}
.codex-panel__system-result-value {
min-width: 0;
overflow-wrap: anywhere;
cursor: text;
user-select: text;
white-space: pre-wrap;
}
.codex-panel__system-result-body {
grid-column: 1 / -1;
max-height: var(--codex-panel-size-output-max-height);
margin: 0;
padding: var(--codex-panel-section-gap);
overflow: auto;
border-radius: var(--codex-panel-code-radius);
background: var(--codex-panel-code-surface);
color: var(--code-normal, var(--codex-panel-text-muted));
font-family: var(--font-monospace);
font-size: var(--font-smaller);
cursor: text;
user-select: text;
white-space: pre-wrap;
}
.codex-panel__message--system .codex-panel__meta-grid {
grid-template-columns: minmax(max-content, 28%) minmax(0, 1fr);
margin-bottom: 0;

View file

@ -234,11 +234,16 @@ describe("message stream rendering and message action menu", () => {
text: "Available slash commands",
noticeSections: [
{
title: "Thread",
auditFacts: [
{ key: "/help", value: "Show available Codex slash commands." },
{ key: "/resume [thread]", value: "Resume a recent Codex thread." },
],
},
{
title: "Runtime",
auditFacts: [{ key: "/doctor", value: "Show Codex CLI and Codex App Server diagnostics." }],
},
],
},
],
@ -256,8 +261,19 @@ describe("message stream rendering and message action menu", () => {
expect(renderMarkdown).not.toHaveBeenCalled();
expect(element.querySelector("details")).toBeNull();
expect(element.querySelector(".codex-panel__output-title")).toBeNull();
expect(element.querySelector(".codex-panel__meta-grid")?.textContent).toContain("/helpShow available Codex slash commands.");
expect(element.querySelector(".codex-panel__meta-grid")?.textContent).toContain("/resume [thread]Resume a recent Codex thread.");
expect(element.querySelector(".codex-panel__meta-grid")).toBeNull();
expect(element.querySelectorAll(".codex-panel__system-result-grid")).toHaveLength(1);
expect([...element.querySelectorAll(".codex-panel__system-result-heading")].map((heading) => heading.textContent)).toEqual([
"Thread",
"Runtime",
]);
expect(element.querySelector(".codex-panel__system-result-grid")?.textContent).toContain("/helpShow available Codex slash commands.");
expect(element.querySelector(".codex-panel__system-result-grid")?.textContent).toContain(
"/resume [thread]Resume a recent Codex thread.",
);
expect(element.querySelector(".codex-panel__system-result-grid")?.textContent).toContain(
"/doctorShow Codex CLI and Codex App Server diagnostics.",
);
});
it("renders goal events as collapsed tool-like message stream items", () => {