feat(opentrons-ai-client): Header component with progressbar (#16543)

<!--
Thanks for taking the time to open a Pull Request (PR)! Please make sure
you've read the "Opening Pull Requests" section of our Contributing
Guide:


https://github.com/Opentrons/opentrons/blob/edge/CONTRIBUTING.md#opening-pull-requests

GitHub provides robust markdown to format your PR. Links, diagrams,
pictures, and videos along with text formatting make it possible to
create a rich and informative PR. For more information on GitHub
markdown, see:


https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

To ensure your code is reviewed quickly and thoroughly, please fill out
the sections below to the best of your ability!
-->

# Overview

<!--
Describe your PR at a high level. State acceptance criteria and how this
PR fits into other work. Link issues, PRs, and other relevant resources.
-->

Added a progressbar to the header component: 

<img width="1046" alt="image"
src="https://github.com/user-attachments/assets/d7fd060a-d89d-40b1-9a09-a57a08afe2e7">


## Test Plan and Hands on Testing
Manually added in different values for the prop to ensure it works from
0-1

<!--
Describe your testing of the PR. Emphasize testing not reflected in the
code. Attach protocols, logs, screenshots and any other assets that
support your testing.
-->

## Changelog

<!--
List changes introduced by this PR considering future developers and the
end user. Give careful thought and clear documentation to breaking
changes.
-->

## Review requests

<!--
- What do you need from reviewers to feel confident this PR is ready to
merge?
- Ask questions.
-->

## Risk assessment

<!--
- Indicate the level of attention this PR needs.
- Provide context to guide reviewers.
- Discuss trade-offs, coupling, and side effects.
- Look for the possibility, even if you think it's small, that your
change may affect some other part of the system.
- For instance, changing return tip behavior may also change the
behavior of labware calibration.
- How do your unit tests and on hands on testing mitigate this PR's
risks and the risk of future regressions?
- Especially in high risk PRs, explain how you know your testing is
enough.
-->

opentrons-ai-client/src/molecules/HeaderWithMeter/HeaderWithMeter.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { HeaderWithMeter as HeaderWithMeterComponent } from '.'
+import { COLORS, Flex, SPACING } from '@opentrons/components'
+
+const meta: Meta<typeof HeaderWithMeterComponent> = {
+  title: 'AI/Molecules/HeaderWithMeter',
+  component: HeaderWithMeterComponent,
+  decorators: [
+    Story => (
+      <Flex backgroundColor={COLORS.grey10} padding={SPACING.spacing40}>
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+export default meta
+
+type Story = StoryObj<typeof HeaderWithMeterComponent>
+
+export const HeaderWithMeterExample: Story = {}

opentrons-ai-client/src/molecules/HeaderWithMeter/__tests__/HeaderWithMeter.test.tsx

@@ -0,0 +1,51 @@
+import { renderWithProviders } from '../../../__testing-utils__'
+import { i18n } from '../../../i18n'
+import { HeaderWithMeter } from '../index'
+import { describe, expect, it } from 'vitest'
+import { screen, render as rtlRender } from '@testing-library/react'
+
+const render = (): ReturnType<typeof renderWithProviders> => {
+  return renderWithProviders(<HeaderWithMeter progressPercentage={0.3} />, {
+    i18nInstance: i18n,
+  })
+}
+
+describe('HeaderWithMeter', () => {
+  it('should render Header component', () => {
+    render()
+    screen.getByText('Opentrons')
+  })
+
+  it('should render progress bar', () => {
+    render()
+    screen.getByRole('progressbar')
+  })
+
+  it('should render progress bar with correct value', () => {
+    render()
+    const progressBar = screen.getByRole('progressbar')
+    expect(progressBar).toHaveAttribute('value', '0.3')
+  })
+
+  it('should update when progressPercentage prop changes', () => {
+    const { rerender } = rtlRender(
+      <HeaderWithMeter progressPercentage={0.3} />,
+      {}
+    )
+
+    const progressBar = screen.getByRole('progressbar')
+    expect(progressBar).toHaveAttribute('value', '0.3')
+
+    rerender(<HeaderWithMeter progressPercentage={0.6} />)
+    expect(progressBar).toHaveAttribute('value', '0.6')
+
+    rerender(<HeaderWithMeter progressPercentage={1} />)
+    expect(progressBar).toHaveAttribute('value', '1')
+
+    rerender(<HeaderWithMeter progressPercentage={0} />)
+    expect(progressBar).toHaveAttribute('value', '0')
+
+    rerender(<HeaderWithMeter progressPercentage={0.2} />)
+    expect(progressBar).toHaveAttribute('value', '0.2')
+  })
+})

opentrons-ai-client/src/molecules/HeaderWithMeter/index.tsx

@@ -0,0 +1,50 @@
+import {
+  Flex,
+  DIRECTION_COLUMN,
+  JUSTIFY_SPACE_BETWEEN,
+  COLORS,
+} from '@opentrons/components'
+import { Header } from '../Header'
+import styled from 'styled-components'
+
+const SquareProgressBar = styled.progress`
+  width: 100%;
+  height: 4px;
+  border-radius: 0;
+  appearance: none;
+
+  &::-webkit-progress-bar {
+    background-color: ${COLORS.grey30}; /* Background color of the progress bar */
+    border-radius: 0;
+  }
+
+  &::-webkit-progress-value {
+    background-color: ${COLORS.blue50}; /* Color of the progress value */
+    border-radius: 0;
+    transition: width 1s;
+  }
+
+  &::-moz-progress-bar {
+    background-color: ${COLORS.blue50}; /* Color of the progress value for Firefox */
+    border-radius: 0;
+  }
+`
+
+export interface ChatHeaderProps {
+  progressPercentage: number
+}
+
+export function HeaderWithMeter({
+  progressPercentage = 0.5,
+}: ChatHeaderProps): JSX.Element {
+  return (
+    <Flex
+      flexDirection={DIRECTION_COLUMN}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
+      width="100%"
+    >
+      <Header />
+      <SquareProgressBar value={progressPercentage}></SquareProgressBar>
+    </Flex>
+  )
+}