Connector sync
A connected app's sync status, what it pulled in and what failed, and which folders or channels it reads.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/connector-sync-status.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/connector-sync-status.json
Usage & API
Example
import { ConnectorStatus } from "@/components/ai/connector-sync-status"
<ConnectorStatus
app={app}
connected={true}
lastSynced="…"
items={1}
nextSync="…"
paused={true}
onPausedChange={() => {}}
progress={null}
onSyncNow={() => {}}
history={[]}
onRetry={() => {}}
onDisconnect={() => {}}
onConnect={() => {}}
/>Props ConnectorStatus
| Prop | Type & description | Required |
|---|---|---|
app | { name: string; monogram: string; tone: string; account: string } | Required |
connected | boolean | Required |
lastSynced | string | Required |
lastSyncedTitle | string | Optional |
items | number | Required |
nextSync | string | Required |
paused | boolean | Required |
onPausedChange | (p: boolean) => void | Required |
progress | number | null0–1 while a sync runs, null otherwise. | Required |
onSyncNow | () => void | Required |
history | SyncRun[] | Required |
onRetry | (runId: string) => void | Required |
onDisconnect | () => void | Required |
onConnect | () => void | Required |
agentName | stringWhat the agent loses on disconnect, e.g. "Billing support". | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The card shows the app monogram, the account, and a status of Connected, Syncing or Paused. Sync now starts a run, and the button reads Syncing while progress is set. A bar exposes that progress to assistive tech. Facts include the last sync time, with a fuller timestamp on hover, the item count, and the next sync, which reads Paused when automatic sync is off. Recent syncs list each run. A failed run names the files and the reason, and Retry these calls onRetry for that run id. The footer has a switch for Sync automatically and a Disconnect action that asks before it calls onDisconnect. If the app is not connected, the card collapses to Connect and the app name. The preview places this under Connected apps for a support agent.
Example
import { SyncScope } from "@/components/ai/connector-sync-scope"
<SyncScope
nodes={[]}
selected={[]}
onSelectedChange={() => {}}
autoInclude={true}
onAutoIncludeChange={() => {}}
dirty={true}
onSave={() => {}}
onCancel={() => {}}
/>Props SyncScope
| Prop | Type & description | Required |
|---|---|---|
nodes | ScopeNode[] | Required |
selected | string[]Selected leaf ids. | Required |
onSelectedChange | (ids: string[]) => void | Required |
autoInclude | boolean | Required |
onAutoIncludeChange | (v: boolean) => void | Required |
dirty | boolean | Required |
onSave | () => void | Required |
onCancel | () => void | Required |
saved | boolean | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Choose what syncs is a tree with a search box. Matching folders stay, and their parents stay so the path is visible. Arrow keys move, Home and End jump, and Right opens a closed branch or steps into it. A parent with only some leaves selected shows a mixed box. The count of selected items sits with the actions. Auto-include is a switch for new folders. Save is enabled when dirty. Cancel restores the selection you still hold outside the component, because the component never stores the committed set itself. After a save, the button can read as saved. The preview's account is an email on the connected app.
Choosing a layout
Use status on the connected-apps page, where the question is whether the last sync worked and what to do about a failure. Use scope when the person is choosing which folders the agent may read, before or after the first sync. The two belong together, but they are not the same screen: one is history, the other is the allow-list.
The keys behind the account live in the secrets manager. Files that have already been copied into a project's knowledge, with a token total, are knowledge sources. Ingest is for a file or a site you add by hand. Connector sync is the standing link and its last few runs.
Does Pause delete items that were already synced?
No. Pause only flips automatic sync off, and the next-sync line reads Paused. The item count and the history stay. Disconnect is the separate action, and it asks before it fires.
What gets stored when a parent folder is checked?
The selection is a list of leaf ids. Checking a parent adds every leaf under it. Unchecking removes those leaves. A mixed parent is one whose leaves are only partly in that list. Auto-include does not change the current ids. It is a flag for later.