test: B1

Author: amanabiy

docs/evaluation/HUMAN_EVALUATION.md

@@ -20,7 +20,7 @@
 | Test | Prompt | State | Was the response helpful? | Was the response Accurate? (1-5) | What was missing? | Token cost / Credits Used | Response time | Notes | Response |
 | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
 | B1 | Create a dev page for the badge component using app context to control color | without AGENTS.MD | | | | | | | |
-| | | with AGENTS.md | | | | | | | |
+| | | with AGENTS.md | Yes | 5 | — | 4.77 | 1m 22s | Claude Opus 4.6. Working solution, uses SimplePage template, typed AppContext, all 9 color options. Read ~8 files to match conventions. | [response](responses/with/B1.md) |
 | B2 | Write a style API for the token component | without AGENTS.MD | | | | | | | |
 | | | with AGENTS.md | | | | | | | |
 | B3 | Add a size prop to badge component | without AGENTS.MD | | | | | | | |

docs/evaluation/responses/with/B1.md

@@ -0,0 +1,61 @@
+# B1 — Create a dev page for the badge component using app context to control color
+
+```tsx
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext } from 'react';
+
+import Badge, { BadgeProps } from '~components/badge';
+import FormField from '~components/form-field';
+import Select from '~components/select';
+import SpaceBetween from '~components/space-between';
+
+import AppContext, { AppContextType } from '../app/app-context';
+import { SimplePage } from '../app/templates';
+
+type PageContext = React.Context<AppContextType<{ color: BadgeProps['color'] }>>;
+
+const colorOptions: Array<{ value: NonNullable<BadgeProps['color']>; label: string }> = [
+  { value: 'grey', label: 'Grey' },
+  { value: 'blue', label: 'Blue' },
+  { value: 'green', label: 'Green' },
+  { value: 'red', label: 'Red' },
+  { value: 'severity-critical', label: 'Severity critical' },
+  { value: 'severity-high', label: 'Severity high' },
+  { value: 'severity-medium', label: 'Severity medium' },
+  { value: 'severity-low', label: 'Severity low' },
+  { value: 'severity-neutral', label: 'Severity neutral' },
+];
+
+export default function BadgeAppContext() {
+  const { urlParams, setUrlParams } = useContext(AppContext as PageContext);
+  const color = urlParams.color ?? 'grey';
+
+  return (
+    <SimplePage
+      title="Badge - App Context"
+      screenshotArea={{}}
+      settings={
+        <FormField label="Color">
+          <Select
+            selectedOption={colorOptions.find(o => o.value === color) ?? colorOptions[0]}
+            options={colorOptions}
+            onChange={({ detail }) => setUrlParams({ color: detail.selectedOption.value as BadgeProps['color'] })}
+          />
+        </FormField>
+      }
+    >
+      <SpaceBetween direction="horizontal" size="m">
+        <Badge color={color}>Badge</Badge>
+        <Badge color={color}>Status: Active</Badge>
+        <Badge color={color}>42</Badge>
+      </SpaceBetween>
+    </SimplePage>
+  );
+}
+```
+
+---
+
+*Files read: ~8 (badge/interfaces.ts, badge/index.tsx, badge/permutations.page.tsx, badge/style-custom-types.page.tsx, tooltip/simple.page.tsx, app/app-context.tsx, app/templates.tsx, grep for AppContext usage)*
+*Credits: 4.77 · Time: 1m 22s*

pages/badge/app-context.page.tsx

@@ -0,0 +1,52 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext } from 'react';
+
+import Badge, { BadgeProps } from '~components/badge';
+import FormField from '~components/form-field';
+import Select from '~components/select';
+import SpaceBetween from '~components/space-between';
+
+import AppContext, { AppContextType } from '../app/app-context';
+import { SimplePage } from '../app/templates';
+
+type PageContext = React.Context<AppContextType<{ color: BadgeProps['color'] }>>;
+
+const colorOptions: Array<{ value: NonNullable<BadgeProps['color']>; label: string }> = [
+  { value: 'grey', label: 'Grey' },
+  { value: 'blue', label: 'Blue' },
+  { value: 'green', label: 'Green' },
+  { value: 'red', label: 'Red' },
+  { value: 'severity-critical', label: 'Severity critical' },
+  { value: 'severity-high', label: 'Severity high' },
+  { value: 'severity-medium', label: 'Severity medium' },
+  { value: 'severity-low', label: 'Severity low' },
+  { value: 'severity-neutral', label: 'Severity neutral' },
+];
+
+export default function BadgeAppContext() {
+  const { urlParams, setUrlParams } = useContext(AppContext as PageContext);
+  const color = urlParams.color ?? 'grey';
+
+  return (
+    <SimplePage
+      title="Badge - App Context"
+      screenshotArea={{}}
+      settings={
+        <FormField label="Color">
+          <Select
+            selectedOption={colorOptions.find(o => o.value === color) ?? colorOptions[0]}
+            options={colorOptions}
+            onChange={({ detail }) => setUrlParams({ color: detail.selectedOption.value as BadgeProps['color'] })}
+          />
+        </FormField>
+      }
+    >
+      <SpaceBetween direction="horizontal" size="m">
+        <Badge color={color}>Badge</Badge>
+        <Badge color={color}>Status: Active</Badge>
+        <Badge color={color}>42</Badge>
+      </SpaceBetween>
+    </SimplePage>
+  );
+}