Phone

Call management and dialing for a circle's phone number. The panel is a two-surface workbench — a Dialer keypad for outbound calls and a Recent calls history — selectable from the rail or by keyboard. A call-state machine drives the body: while a call is live it takes over the whole viewport as an active-call overlay and the rail is suppressed. Before a number is provisioned the panel walks the user through claim / activate.

binds_to: phone-numberdensity: comfortablesource: portal/src/canvas/phone_panel.rs

Declared but not yet dispatched — a real panel whose bound element types do not route to it at runtime today (often intentionally: an anchored popover, a sub-surface of another panel, or a future surface pending other work). See the panel's YAML for the specific reason. Amber means "still to do", not "broken".

Live

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

phone
progress_activity

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.

Phoneportal/src/canvas/phone_panel.rspartial

States

  • unknownLoading phone status…
  • no_numberPhone unclaimed — explore or activate a number
  • provisioningRequesting a phone number from the carrier…
  • errorPhone status check failed — details in the top banner
  • ready_idleReady — dialer and recent calls, no active call
  • ready_ringingIncoming call — accept or decline
  • ready_active_callCall in progress — full-viewport overlay, rail suppressed

Composition

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

WorkspaceShellouterL-chrome (top + rail + body + status) — single role=application landmark shared with the browser workbench panel.
WorkspaceTopchromeTop chrome — also hosts a dismissible error banner when a phone-status check fails.
WorkspaceRailrailTwo-surface rail — Dialer and Recent. Present only while the call state is Idle; an active call suppresses it so the overlay can take the viewport.
RailItemrailDialer surface — the outbound keypad. Activated by rail click or the 'g 1' keyboard chord.
RailItemrailRecent surface — call history. Activated by rail click or the 'g 2' keyboard chord.
WorkspaceBodycontentState-driven — readiness (loading / unclaimed / provisioning / error / ready) gates which surface renders; within Ready, the call state picks dialer, recent, or the active-call overlay.
DialerViewcontentOutbound keypad — number display, 12-key grid (long-press for +), and the call action.
RecentCallsViewcontentCall history — direction, contact, duration, and a redial affordance per row; empty state when there are no calls.
ActiveCallViewcontentFull-viewport overlay while a call is live — status + timer, with ringing (accept / decline) or in-call (mute / hold / hang-up) controls.
LoadingViewstateReadiness=Unknown — spinner while the initial phone-status check is in flight.
UnclaimedPanelcontentReadiness=NoNumber — preview surface: an activation banner above a working dialer, so the user can place an outbound call before claiming a number.
ClaimNumberViewcontentReadiness=NoNumber while claiming — the number-provisioning flow reached from UnclaimedPanel's 'Get a number' CTA.
ProvisioningViewstateReadiness=Provisioning — progress copy while the carrier allocates a number.
ReadinessErrorstateReadiness=Error — surfaces a failed phone-status check with its error detail.
WorkspaceStatuschromeBottom strip — readiness dot + 'Ready' label; present once the panel reaches the Ready shell.

Uses Components

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