// Personal Connectors — PERSONAL-mode Connectors surface.
//
// Rendered instead of the org ConnectorsHub when the session is in personal
// mode (see shell.jsx). A small set of personal apps you connect via OAuth
// (Google / Notion / GitHub) plus a local folder. Data + mock client live in
// personal_connectors_data.jsx; this file is presentation + flow only.
const { useState: usePcUi } = React;
// ── Brand marks ─────────────────────────────────────────────────────────────
// Real, recognizable logos (a deliberate departure from the org catalog's
// abstract category glyphs). Rendered inside a rounded tile.
function BrandGlyph({ logo, size = 22 }) {
switch (logo) {
case 'google':
return (
);
case 'notion':
return (
);
case 'github':
return (
);
case 'hubspot':
return (
);
case 'linear':
return (
);
case 'folder':
return (
);
default:
return null;
}
}
function BrandLogo({ app, size = 40, radius = 10 }) {
return (
);
}
function Spin({ size = 13 }) {
return ;
}
// ── Page ────────────────────────────────────────────────────────────────────
function PersonalConnectors({ session }) {
const { conns, start, syncNow, disconnect, addLocalFolder, removeLocalFolder, sources, sourcesLoading, refreshSources } = usePersonalConnectors();
const [manageId, setManageId] = usePcUi(null);
// Local Folder is daemon-driven now; presence is detected on click (the daemon
// pops the picker). Surface a hint when a click found no daemon on this machine.
const noDaemon = conns.localfolder && conns.localfolder.error === 'no_daemon';
const isConnected = (app) => {
const c = conns[app.id];
if (!c) return false;
if (app.provider === 'local') return Array.isArray(c.folders) && c.folders.length > 0;
return c.status === 'active';
};
const connectedCount = PERSONAL_APPS.filter(isConnected).length;
// OAuth app currently mid-handshake drives the overlay (local folder shows
// its own inline indexing, so it's excluded).
const busyId = PERSONAL_APPS
.map(a => a.id)
.find(id => conns[id] && conns[id].status === 'connecting');
const busyApp = busyId ? PERSONAL_APP_BY_ID[busyId] : null;
const manageApp = manageId ? PERSONAL_APP_BY_ID[manageId] : null;
// Content lists only exist with a live backend (the sources endpoint). In the
// standalone demo there's nothing to fetch, so hide the per-bucket UI rather
// than render a row of misleading zeros.
const bucketsFor = (appId) => (pcLive() ? pcAppBuckets(appId, sources) : []);
return (
{/* Title */}
Connectors
Connect your personal tools. Parcle reads them to power your workspace — read-only.
{/* Summary strip */}
{connectedCount
? `${connectedCount} of ${PERSONAL_APPS.length} connected`
: 'No connections yet'}
);
}
// Turn a product key ('google_calendar', 'github') into a short display label.
function prettyProduct(p) {
if (!p) return '';
const s = String(p).replace(/^google_/, '');
return s.charAt(0).toUpperCase() + s.slice(1);
}
// Status text while a server-driven connector sync runs. During the export
// phase there are no file counts yet (one opaque fetch), so show "Fetching…";
// once ingestion starts, reuse the Local Folder "{done}/{total}" idiom and
// append the item currently being processed.
function connectorSyncLabel(conn) {
const sp = conn && conn.syncProgress;
if (!sp) return 'Syncing initial data';
// Discovery streams items in — surface the live discovered count as it grows
// (the backend updates total every ~0.5s during the manifest phase) instead of
// an "Indexing 0/N", since processing hasn't started yet.
if (sp.phase === 'discovering') {
if (sp.total > 0) return `Discovering ${sp.total} items…`;
return sp.product ? `Discovering ${sp.product}…` : 'Discovering items…';
}
// A product that exported successfully but had nothing to ingest (e.g. an empty
// calendar/contacts). Surface it explicitly instead of skipping past silently.
if (sp.phase === 'skipped_empty') {
return sp.product ? `No content in ${prettyProduct(sp.product)} — skipped` : 'Skipped (no content)';
}
if (sp.total > 0) {
const base = `Indexing ${sp.processed}/${sp.total}`;
return sp.current ? `${base} · ${sp.current}` : base;
}
if (sp.phase === 'exporting') return sp.product ? `Fetching ${sp.product}…` : 'Fetching data…';
if (sp.phase === 'ingesting') return 'Indexing…';
return 'Syncing initial data';
}
// Thin progress bar shown under the status line while a sync runs. Prefers the
// server's smoothed 0..1 job progress (monotonic across products, so it doesn't
// jump backwards when a later product's manifest grows the total); falls back to
// processed/total. During the discovery phase neither is meaningful yet, so it
// renders an indeterminate sliding bar instead of a frozen empty track.
function ConnectorSyncBar({ sp }) {
// During discovery the denominator is still growing, so a fractional bar would
// be misleading — show an indeterminate sweep until processing begins.
const discovering = sp && sp.phase === 'discovering';
let frac = null;
if (!discovering) {
if (sp && typeof sp.progress === 'number') frac = sp.progress;
else if (sp && sp.total > 0) frac = sp.processed / sp.total;
}
const determinate = typeof frac === 'number' && frac > 0;
const pct = determinate ? Math.max(2, Math.min(100, Math.round(frac * 100))) : 30;
return (
);
}
// Status line for a connected connector when it is NOT syncing. A failed/unknown
// last sync must be surfaced here — the `errored` branch below only covers
// connection failures (status==='error'), so without this a failed sync would
// silently render as "Connected".
function connectorRestLabel(conn) {
if (conn.lastSync === 'failed') return { text: 'Sync failed', color: 'var(--error)', bad: true };
if (conn.lastSync === 'sync unknown') return { text: 'Sync status unknown', color: 'var(--warning)', bad: true };
// A completed sync that discovered nothing — distinguish it from a fresh
// "Connected" so an empty Notion (no shared pages) doesn't look like it never ran.
if (conn.lastSyncEmpty) return { text: 'No items found', color: 'var(--text-tertiary)', bad: false };
return { text: conn.identity || 'Connected', color: 'var(--text-secondary)', bad: false };
}
// ── Card ────────────────────────────────────────────────────────────────────
function ConnectorCard({ app, conn, buckets, onStart, onManage }) {
const status = conn && conn.status;
const active = status === 'active';
const busy = status === 'connecting';
const errored = status === 'error';
// Resting (not-syncing) status for a connected connector — surfaces a failed sync.
const rest = (active && conn && !conn.syncing) ? connectorRestLabel(conn) : null;
return (
{app.name}
{app.blurb}
{/* Status line (+ progress bar while syncing) */}
{active && (
);
}
// Initial rows shown per expandable list (local folders and the Manage drawer's
// per-bucket lists). The rest stay collapsed behind a "Show more" control so a
// large source (e.g. hundreds of files/contacts) doesn't blow up the DOM until
// the user asks for it; each click reveals another page.
const PC_DRAWER_ITEM_LIMIT = 50;
// ── Local folder card (multiple folders, add/remove individually) ───────────
function localFolderStatusLabel(folder) {
const total = folder.fileCount || 0;
const uploaded = folder.uploadedCount || 0;
const done = folder.doneCount || 0;
const failed = folder.failedCount || 0;
if (folder.status === 'indexing') {
if (uploaded < total) return `Uploading ${uploaded}/${total}`;
return `Indexing ${done}/${total}`;
}
if (folder.status === 'error') return failed ? `${failed} failed` : 'Failed';
return `${total} files`;
}
// One added folder: a clickable header (expands into its file list, mirroring
// the per-bucket lists other connectors show) plus the existing status + remove.
// File titles come from the connector content endpoint, grouped by folder.
function LocalFolderRow({ folder, files, sourcesLoading, onRefresh, onRemove }) {
const [open, setOpen] = usePcUi(false);
const [visible, setVisible] = usePcUi(PC_DRAWER_ITEM_LIMIT);
// Expandability keys off the locally-known file count, not the fetched list:
// a just-added folder reports its count immediately while its files are still
// being registered server-side, so it must stay openable to trigger the pull.
const canExpand = (folder.fileCount || 0) > 0 || files.length > 0;
const shown = files.slice(0, visible);
const remaining = files.length - shown.length;
const statusColor = folder.status === 'error'
? 'var(--error)'
: (folder.status === 'indexing' ? 'var(--accent-text)' : 'var(--text-secondary)');
// Lazily pull file titles when the folder is opened — the after-add refresh
// can race the background ingestion, so re-fetch on demand.
const toggle = () => setOpen(o => {
const next = !o;
if (next && files.length === 0 && onRefresh) onRefresh();
return next;
});
return (