# Service notice

A notice about the service itself, above the composer: a usage limit, a model that's down, a trial running out. Each says when things change ("resets in 3 hours", "trying again in 2 minutes") only when the service knows, and what you can do meanwhile.

- Registry name: `service-notice` (`@candor/service-notice`)
- Tier: Pro. Installing it needs a Pro, Premium or Team licence key: the person runs `npx candor-ui key <key>` themselves; never ask for the key in chat or write it to a file.
- Docs: https://candor.themethodic.com/docs/service-notice

## Install

```bash
npx candor-ui add service-notice
```

Run `npx candor-ui@latest init` once first (https://candor.themethodic.com/get-started.md). Without the CLI: `npx shadcn@latest add @candor/service-notice`.
It brings in: locale, relative-time, utils.
npm packages: lucide-react@^1.67.0.

## Example

```tsx
"use client"

import { ServiceNotice } from "@/components/service-notice"

const hoursFromNow = (h: number) => new Date(Date.now() + h * 3_600_000).toISOString()

export default function Example() {
  return (
    <div className="flex max-w-2xl flex-col gap-3">
      <ServiceNotice
        kind="limit"
        title="You’ve used this month’s agent hours"
        detail="Threads stay readable; agents can’t start new runs until the limit resets."
        until={hoursFromNow(3)}
        action={{ label: "Raise the limit", onClick: () => {} }}
      />
      <ServiceNotice kind="trial" title="Your Keel trial is ending" until={hoursFromNow(24 * 4)} action={{ label: "Choose a plan", onClick: () => {} }} onDismiss={() => {}} />
    </div>
  )
}
```

## <ServiceNotice>

Props:

- `kind: Kind`: limit (a usage limit), unavailable (the service or model is down) or trial (a trial running out); sets the icon and tone.
- `title: string`: What's happening, e.g. "You've reached this month's agent hours".
- `detail?: string | undefined`: What you can do meanwhile, under the title.
- `until?: string | undefined`: When the limit resets, the retry happens, or the trial ends.
- `action?: { label: string; onClick: () => void } | undefined`: One thing to do about it, e.g. upgrade or switch model.
- `onDismiss?: (() => void) | undefined`: Shows a dismiss button; called when it's pressed.
- `className?: string | undefined`

## Strings (`serviceNotice`)

The fixed words, English by default. Override any of them under `serviceNotice` in `<LocaleProvider strings={{ serviceNotice: { … } }}>`; the table is exported as `serviceNoticeStrings`.

- `tryingAgain`: trying again {when}
- `resets`: resets {when}
- `ends`: ends {when}
- `dismiss`: Dismiss

## Rules for using Candor UI

- Components take plain typed data. Never pass model output as HTML or render it as a link; messages are typed blocks.
- A control that can't be used says why: wrap it in `<Locked reason="…">`, don't just disable it.
- Don't show a value you don't have: leave it out (it renders as —) rather than guess. An estimate is labelled as one.
- Nothing is pre-selected in a decision a person makes, and the agent is named from your app's data, never from model output.
- Your app's words go in `LocaleProvider` (fixed strings) and `TermsProvider` (nouns); entity kinds and agent roles in `EntityKindsProvider` and `AgentRolesProvider`.