# apps/web/src/components/chat/ComposerActivityStatus.tsx · stienswout/t3code

[View on GitCafe](https://git.cafe/stienswout/t3code/blob/refs%2Fheads%2Ft3%2Fterminal-mobile-incremental-output/apps/web/src/components/chat/ComposerActivityStatus.tsx)

Repository: [stienswout/t3code](https://git.cafe/stienswout/t3code)

Visibility: public

Requested revision: refs/heads/t3/terminal-mobile-incremental-output

Commit: ed4ba0608d7d576b5b4e00cef4870e7f47d97fff

Blob: 7a8b83ae73666216c9a59d8a8660afc4db9c25fd

Size: 687 bytes

[Immutable source](https://git.cafe/stienswout/t3code/blob/ed4ba0608d7d576b5b4e00cef4870e7f47d97fff/apps/web/src/components/chat/ComposerActivityStatus.tsx?format=markdown)

```
import { Spinner } from "~/components/ui/spinner";

import { threadSyncLabel, type ThreadSyncPhase } from "../../threadSync";
import { ComposerBanner } from "./ComposerBanner";

export function ComposerActivityRow({ phase }: { readonly phase: ThreadSyncPhase }) {
  return (
    <ComposerBanner.Row>
      <ComposerBanner.Icon>
        <Spinner />
      </ComposerBanner.Icon>
      <ComposerBanner.Content>
        <span
          className="shrink-0 whitespace-nowrap text-muted-foreground"
          data-composer-sync-status={phase}
          role="status"
        >
          {threadSyncLabel(phase)}
        </span>
      </ComposerBanner.Content>
    </ComposerBanner.Row>
  );
}

```