style(web): tighten the in-memory caveat and punctuate the footer

Reads "Memory (this session only): Secrets are not written anywhere and
are lost on exit." — shorter tail than "lost when the Inspector exits",
and a colon separating the store from what follows it.

The colon is added at the footer's composition, not inside
`secretStorageLabel`. The label is also consumed alone by
`secretStorageSummary`, which appends " at <path>" for a file-backed
store, so a colon baked into the label would print
"File (encrypted): at /path" in the startup banner. It renders only when
a detail actually follows.

The caveat string is shared with the banner's warning line, so the
terminal picks up the shorter wording too.

Signed-off-by: cliffhall <cliff@futurescale.com>
This commit is contained in:
cliffhall 2026-08-22 13:56:13 -04:00
commit 2d2c787e22
3 changed files with 123 additions and 14 deletions

View file

@ -80,10 +80,10 @@ export const InMemory: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const band = await canvas.findByTestId("secret-storage-footer");
await expect(band).toHaveTextContent("Secrets: Memory (this session only)");
await expect(
canvas.getByText(/lost when the Inspector exits/),
).toBeInTheDocument();
await expect(band).toHaveTextContent(
"Secrets: Memory (this session only):",
);
await expect(canvas.getByText(/lost on exit/)).toBeInTheDocument();
},
};

View file

@ -62,10 +62,8 @@ describe("SecretStorageFooter", () => {
it("warns that an in-memory store loses secrets on exit", () => {
renderWithMantine(<SecretStorageFooter info={memory} />);
const band = screen.getByTestId("secret-storage-footer");
expect(band).toHaveTextContent("Secrets: Memory (this session only)");
expect(
screen.getByText(/lost when the Inspector exits/),
).toBeInTheDocument();
expect(band).toHaveTextContent("Secrets: Memory (this session only):");
expect(screen.getByText(/lost on exit/)).toBeInTheDocument();
expect(band).toHaveAttribute("data-tone", "warn");
});

View file

@ -144,9 +144,14 @@ export function SecretStorageFooter({ info }: SecretStorageFooterProps) {
`.withProps()` rule, and it takes `color` as a prop rather than a
style. */}
<Icon size={ICON_SIZE} color={color} aria-hidden />
{/* The colon lives here rather than in `secretStorageLabel`, because the
label is also used on its own — by `secretStorageSummary` for the
startup banner, where a trailing colon before " at <path>" would be
wrong. It appears only when something follows it. */}
<FooterLabel c={color}>
<FooterLabelPrefix>Secrets:</FooterLabelPrefix>{" "}
{secretStorageLabel(info)}
{detail ? ":" : ""}
</FooterLabel>
{detail && <FooterDetail c={color}>{detail}</FooterDetail>}
</FooterBand>