# Max Agent UI

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.0.

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the library, run:

```bash
ng build max-agent-ui
```

This command will compile your project, and the build artifacts will be placed in the `dist/` directory.

## Assistant Component

The header mascot SVG is included at `max-agent-ui/assets/max-ai-bot.svg`.
Copy it into the host's `src/assets/max/` directory (served as
`assets/max/max-ai-bot.svg`), alongside the existing Max AI artwork. The
`max-assistant-cloud-mascot` class provides a subtle floating animation and
disables it for reduced motion. The assistant header uses this mascot; the
original sparkles remain available for processing states. Open
`codex/max-ai-cloud-mascot-preview.html` in this repository for an animated
mascot preview; its preview controls never change the assistant.

This package exposes the standalone chat assistant component, its typed models,
and `MaxAssistantService`.

```ts
import { MaxAssistantComponent } from 'max-agent-ui';
```

Add `MaxAssistantComponent` to the consuming component imports and render:

```html
<max-assistant
  app="cortex"
/>
```

The component uses `/agent-api/v1/chat` through the host application's Angular
development proxy in development builds. Production builds call the shared
agent service directly at `https://agent.maxtime.cloud/v1/chat`. The existing
`assistantApiUrl` input and `MAX_ASSISTANT_CONFIG` option can still override
this default for tests or exceptional deployments.

`MaxAssistantComponent` renders the chat panel directly. It does not include a
launcher or manage open/close state, so the host application can place it
inline, in a drawer, or in a dialog. Host-specific header controls can be
projected into the chat header:

```html
<max-assistant app="cortex">
  <button
    maxAssistantHeaderAction
    type="button"
    aria-label="Close assistant"
    (click)="closeAssistant()">
    Close
  </button>
</max-assistant>
```

For authenticated host applications, provide shared configuration once. The
current token and API version are sent as the standard `x-auth-token` and
`x-version` headers. Display identity is sent separately in the request body,
and the agent retrieves current permissions directly from the calling product
API:

```ts
providers: [
  {
    provide: MAX_ASSISTANT_CONFIG,
    useFactory: (session: SessionService) => ({
      app: 'cortex',
      user: () => ({
        name: session.name(),
        username: session.username(),
        email: session.email(),
        token: session.authToken(),
        version: session.apiVersion()
      })
    }),
    deps: [SessionService]
  }
]
```

GET actions are rendered immediately. POST and PATCH proposals are rendered
with Approve and Reject controls. Approval sends a structured confirmation for
the exact pending action; typing words such as "yes" does not execute it.

Host features that already know an action capability can bypass
natural-language routing without bypassing server authorization:

```ts
import { MaxAssistantService } from 'max-agent-ui';

assistant.sendStructuredAction(
  'Cancel this session',
  {
    capabilityKey: 'cortex.timetable.session.cancel',
    arguments: { sessionId: 42 }
  }
).subscribe();
```

The agent still validates the capability and permissions in Supabase, performs
live preflight reads, and returns the normal Approve/Reject proposal.

For Cortex and Nemesys, provide `user.token` and `user.version`; the library
uses the same standard API headers for both products. Use `requestHeaders` only
for additional custom headers:

```ts
requestHeaders: () => ({
  'x-correlation-id': session.correlationId()
})
```

Host apps should provide Angular `HttpClient` for real API calls and include their PrimeNG theme and PrimeIcons styles.

For local integration, install the generated tarball and peer UI dependencies in the consuming app:

```bash
npm install C:/Users/Dev100/Documents/Maxtime/Projects/maxtime-ui-library/dist/max-agent-ui/max-agent-ui-0.0.33.tgz primeng primeicons @angular/cdk
```

### Publishing the Library

Build and package the library:

```bash
ng build max-agent-ui
cd dist/max-agent-ui
npm pack
```

Publish the generated tarball after logging in to npm:

```bash
npm login
npm publish max-agent-ui-0.0.33.tgz
```

## Running unit tests

To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.