mirror of
https://github.com/murashit/codex-panel.git
synced 2026-07-22 06:57:10 +00:00
Align structured command rows
This commit is contained in:
parent
759adabb9c
commit
d45cb98c67
3 changed files with 81 additions and 8 deletions
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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", () => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue