Status
Loading, error, empty and not-yet-built. The app is unusually honest about the last one, and that honesty is worth preserving as a house style rather than tidying away.
Loading
A bordered circle with one blue quadrant, spun. There is no skeleton system; NdoView uses a single animate-pulse bar for its title and nothing else.
<span class="mr-2 inline-block h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600"></span>
Loading NDOs…Error with a retry
Red-50 on red-200, with the retry as a white bordered button inside the alert. The NDO view's variant is a plain underlined link instead, which is the same idea at a different weight.
<div role="alert" class="mb-3 flex items-center justify-between gap-3 rounded border border-red-200 bg-red-50 p-2 text-sm text-red-700">
<span>{errorMessage}</span>
<button class="shrink-0 rounded border border-red-300 bg-white px-3 py-1 text-xs font-medium text-red-700 hover:bg-red-100">Retry</button>
</div>Not built yet
An amber chip on a dashed card, and an amber paragraph that cites the documentation section where the gap is tracked. The app tells you which file to read; keep that.
Composition view (NdoHardLink graph and D3) is not wired yet.
NDO member listing is not yet implemented on the DHT. See documentation/zomes/resource_zome.md § NDO membership (planned).
<span class="mb-3 inline-block rounded bg-amber-50 px-2 py-0.5 text-xs text-amber-600">Coming soon</span>
<p class="mt-2 text-xs text-amber-700">
NDO member listing is not yet implemented on the DHT.
See documentation/zomes/resource_zome.md § NDO membership (planned).
</p>Conditional state rows — NdoIdentityLayer.svelte
Hibernating and Deprecated each get a tinted strip under the badges, in their own hue, naming what happens next. The best pattern in the app: state that carries a consequence gets a sentence, not just a colour.
<div class="mt-2 flex items-center gap-2 rounded bg-yellow-50 px-3 py-1.5 text-xs text-yellow-700">
<span class="font-medium">Hibernating</span>
<span class="text-yellow-500">·</span>
<span>Will resume from: <span class="font-semibold">Active</span></span>
</div>Empty
Three shapes, all in use: an italic grey line, a dashed box, and a blue onboarding card with two actions. The blue one appears only when the agent has no groups at all.
No NDOs yet. Create one inside a group to see it here.
No groups yet.
Create or join a group to see NDOs
NDOs are scoped to groups. Start by creating a group or pasting an invite link.
<p class="text-sm text-gray-500">No NDOs yet. Create one inside a group to see it here.</p>
<p class="mb-2 text-xs text-gray-400 italic">No groups yet.</p>