fix(app): show an unusable sandbox image in the danger colour

"That image is for macOS sandboxes. This computer needs the Windows/Linux
image." was rendered in the muted colour, the same as the line above it that
says the image is being checked and the one below that says it is fine. The
one message that means the create cannot go ahead read as an aside.

It now uses the v2 danger token with role="alert", matching how the other v2
dialogs report an inline validation failure. The whole message() family goes
with it — wrong architecture, not an archive, not a sandbox image, unreadable —
since each of them blocks the create for the same reason.

One change covers both dialogs: the field is shared by DialogAddSandbox in
Settings and DialogAddDefaultSandbox in Work.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: quickbeard

packages/app/src/sandbox/image-field.tsx

@@ -111,7 +111,17 @@ export function createSandboxImageField() {
         <Show when={store.checking}>
           <p class="text-12 text-v2-text-text-muted">{language.t("sandbox.add.imageChecking")}</p>
         </Show>
-        <Show when={message()}>{(text) => <p class="text-12 text-v2-text-text-muted">{text()}</p>}</Show>
+        {/* The only line here that reports a problem, so it is the only one
+            in the danger colour — "checking" and "this image can be used" sit
+            beside it in the muted one. role="alert" matches how the other v2
+            dialogs announce an inline validation failure. */}
+        <Show when={message()}>
+          {(text) => (
+            <p role="alert" class="text-12 text-v2-state-fg-danger">
+              {text()}
+            </p>
+          )}
+        </Show>
         <Show when={store.checkedPath === store.path && store.path && !store.problem}>
           <p class="text-12 text-v2-text-text-muted">{language.t("sandbox.add.imageOk")}</p>
         </Show>