fractal-web: prepare the client-control v1 web test client (disabled until the contract lands)

.gitattributes

@@ -5,6 +5,8 @@ crates/fractal-client/src/generated.rs linguist-generated=true
 crates/fractal-client/src/contract.rs linguist-generated=true
 crates/fractal-client/src/lib.rs linguist-generated=true
 crates/fractal-client/src/notice_descriptors.generated.rs linguist-generated=true
+crates/fractal-schema/src/client_control.rs linguist-generated=true
+fixtures/clients/client-control-v1.golden.json linguist-generated=true
 clients/typescript/fractal-client/*.generated.ts linguist-generated=true
 clients/swift/FractalClient/Sources/FractalClient/*.generated.swift linguist-generated=true
 clients/swift/FractalClient/Sources/FractalClient/Models.swift linguist-generated=true

apps/fractal-web/src/client-control/ClientControlIndicator.integration.test.tsx

@@ -0,0 +1,43 @@
+// @vitest-environment jsdom
+import * as React from 'react'
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, expect, it, vi } from 'vitest'
+import { ClientControlIndicator, type ClientControlIndicatorState } from './ClientControlIndicator.tsx'
+
+vi.mock('@stylexjs/stylex', () => import('../testStylex.ts'))
+
+const host = document.createElement('div')
+const root = createRoot(host)
+afterEach(async () => { await act(async () => root.render(null)); vi.unstubAllGlobals() })
+
+const render = async (state: ClientControlIndicatorState, onRevokeEnrollment = () => {}) => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  await act(async () => root.render(<ClientControlIndicator state={state} onRevokeEnrollment={onRevokeEnrollment} />))
+}
+
+it('renders nothing when no grant is active', async () => {
+  await render({ _tag: 'Inactive' })
+  expect(host.childElementCount).toBe(0)
+})
+
+it('names the run and invokes enrollment revoke rather than hiding the grant optimistically', async () => {
+  let revokes = 0
+  await render({ _tag: 'Active', runId: 'mission-run/fixture' }, () => { revokes += 1 })
+  expect(host.querySelector('[data-client-control-run]')?.getAttribute('data-client-control-run')).toBe('mission-run/fixture')
+  expect(host.querySelector('code')?.textContent).toBe('mission-run/fixture')
+  const button = host.querySelector('button')!
+  expect(button.textContent).toBe('Revoke test enrollment')
+  await act(async () => button.click())
+  expect(revokes).toBe(1)
+  expect(host.querySelector('[aria-label="Test client control"]')).not.toBeNull()
+})
+
+it('keeps the run visible during revocation and explains an unconfirmed revoke', async () => {
+  await render({ _tag: 'Revoking', runId: 'mission-run/fixture' })
+  expect(host.querySelector('button')?.disabled).toBe(true)
+  expect(host.querySelector('code')?.textContent).toBe('mission-run/fixture')
+  await render({ _tag: 'RevokeFailed', runId: 'mission-run/fixture' })
+  expect(host.querySelector('[role="alert"]')?.textContent).toContain('not confirmed')
+  expect(host.querySelector('button')?.disabled).toBe(false)
+})

apps/fractal-web/src/client-control/ClientControlIndicator.tsx

@@ -0,0 +1,47 @@
+import * as Aria from 'react-aria-components'
+import * as stylex from '@stylexjs/stylex'
+import { borderVars, interactionVars, statusVars, surfaceVars, textVars, typeVars } from '../../../../packages/fractal-ui/src/assistant-ui/composition-tokens.stylex.ts'
+
+/** Controller-owned state; this component cannot create or extend authority. */
+export type ClientControlIndicatorState =
+  | { readonly _tag: 'Inactive' }
+  | { readonly _tag: 'Active'; readonly runId: string }
+  | { readonly _tag: 'Revoking'; readonly runId: string }
+  | { readonly _tag: 'RevokeFailed'; readonly runId: string }
+
+export const ClientControlIndicator = ({ state, onRevokeEnrollment }: {
+  readonly state: ClientControlIndicatorState
+  /** End the enrollment and all grants, never just the displayed run's grant. */
+  readonly onRevokeEnrollment: () => void
+}) => {
+  if (state._tag === 'Inactive') return null
+  return <section aria-label="Test client control" data-client-control-run={state.runId} {...stylex.props(styles.indicator)}>
+    <span role="status" {...stylex.props(styles.description)}>
+      Test control <code {...stylex.props(styles.run)}>{state.runId}</code>
+    </span>
+    <Aria.Button onPress={onRevokeEnrollment} isDisabled={state._tag === 'Revoking'} {...stylex.props(styles.revoke)}>
+      {state._tag === 'Revoking' ? 'Revoking enrollment…' : 'Revoke test enrollment'}
+    </Aria.Button>
+    {state._tag === 'RevokeFailed' && <span role="alert" {...stylex.props(styles.error)}>
+      Enrollment revoke was not confirmed. Check the connection and try again.
+    </span>}
+  </section>
+}
+
+const styles = stylex.create({
+  indicator: {
+    display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 8,
+    paddingBlock: 8, paddingInline: 12, backgroundColor: surfaceVars.raised,
+    color: textVars.fg, borderBottomWidth: 1, borderBottomStyle: 'solid', borderBottomColor: borderVars.borderStrong,
+    fontFamily: typeVars.fontSans, fontSize: typeVars.metaSize, lineHeight: typeVars.metaLeading,
+  },
+  description: { display: 'flex', alignItems: 'baseline', flexWrap: 'wrap', gap: 8, minWidth: 0 },
+  run: { fontFamily: typeVars.fontMono, overflowWrap: 'anywhere', color: statusVars.attention },
+  revoke: {
+    flexShrink: 0, paddingBlock: 4, paddingInline: 8, cursor: 'pointer', color: textVars.fg,
+    backgroundColor: surfaceVars.raised, borderWidth: 1, borderStyle: 'solid', borderColor: borderVars.borderStrong,
+    ':focus-visible': { outlineWidth: 2, outlineStyle: 'solid', outlineColor: interactionVars.focusRing, outlineOffset: 2 },
+    ':disabled': { cursor: 'default', opacity: 0.6 },
+  },
+  error: { flexBasis: '100%', color: statusVars.dangerFg },
+})