Connector

Connection status and control surface for io elements. The connector panel reads element health through EntityStore signals and renders a declarative body — connection badge, executor selector, error-recovery CTAs, and element-specific actions — generated per element type from the connector shell descriptor. It is element-agnostic across the io family; every io element with a connector descriptor gets an instance.

binds_to: github, slack, http, discorddensity: comfortablesource: portal/src/canvas/connector_panel.rs

Live

The real panel component, mounted here over fixture data — the same shipped chrome the workspace renders, not a sketch.

connector
code

GitHub

Represents a single GitHub account (personal or bot) with a typed op surface for code collaboration: list/fetch repos, list/fetch/publish issues + PRs, comment on issues and PRs, merge PRs, trigger workflow runs, read releases and commits. Shares the io/* element shape with the social connectors (linkedin, twitter, facebook, instagram) but the ops are dev-collab rather than outreach. For mcp, run the official github-mcp-server (Go binary, https://github.com/github/github-mcp-server) and supply GITHUB_PERSONAL_ACCESS_TOKEN via env_refs. A token with the right scopes (repo, workflow, read:org) gates what ops succeed.

Connecting…

Mirror this circle to GitHub

Creates a public GitHub repo under your authenticated account and pushes the circle's library to it. Sensitive elements (api-tokens, variables, cookie-jars) are excluded automatically. Private repos require a paid plan (coming in v2).

Activity log mounts here
● Connecting…6 CTAs

Sketch

Structural preview of the panel chrome. The browser panel renders the real BrowserChrome primitive at miniature scale; the other variants are CSS shape silhouettes. Either way the composition tree below is the authoritative description of what's inside.

Connectorportal/src/canvas/connector_panel.rsexisting

States

  • emptyNo connector selected — open an io element to scan or configure it
  • connectingChecking connection state…
  • healthyConnected — ready for operations
  • expiredSession expired — reconnect to resume
  • challengedLogin challenge pending — CAPTCHA or 2FA
  • unreachableExecutor unreachable — check MCP / browser config
  • errorConnector descriptor missing or codegen stale

Composition

Click any component name to jump to its component-page entry.

WorkspaceShellouterL-chrome (top + body + status) — single role=application landmark. No rail: the connector is one element-contextual surface, not a multi-surface workbench.
WorkspaceTopchromeBreadcrumb chrome — ['Connector', element-type], stable across element state changes.
WorkspaceBreadcrumbchromeNames the connector and the io element type it is bound to.
WorkspaceBodycontentHosts the declarative section stack — body sections render in order from the connector shell descriptor.
PanelBodyRenderercontentRenders the CONNECTOR_PANEL_BODY descriptor — each section is visibility-gated by a bind-path expression over live element state.
ConnectorHeadercontentElement identity + display name at the body head.
ConnectionBadgestateLifecycle badge — healthy / expired / challenged / unreachable, keyed to the element's connection state.
ExecutorSelectorcontrolPicks the executor mode (MCP / browser / direct) the connector runs against.
CtaRowcontrolError-recovery and element-specific action buttons — reconnect, re-auth, run.
ErrorBannerstateSurfaces the connection error and its recovery guidance when the element is unhealthy.
PanelEmptyStatestateDefensive — shown when the connector descriptor is missing or codegen is stale.
WorkspaceStatuschromeBottom strip — connection-state label + dot on the left, a CTA-count CounterPill on the right.
CounterPillchromeCounts the CTAs available for this element type.

Uses Components

Flat list of every component referenced — verifiable against the composition tree by the future generator audit.