+ {/* First, because it explains everything under it: a conversation that
+ is not receiving looks like a quiet one otherwise. */}
+
{/* Above the log and outside the scroller. Who is talking is only
useful while it can be seen, and a panel that scrolled away with
the backlog would be gone the moment anybody read anything. */}
diff --git a/src/renderer/src/components/ServiceBanner.tsx b/src/renderer/src/components/ServiceBanner.tsx
new file mode 100644
index 0000000..a29871d
--- /dev/null
+++ b/src/renderer/src/components/ServiceBanner.tsx
@@ -0,0 +1,28 @@
+import { Icon } from './Icon'
+import { useChat } from '../state/hooks'
+import { bufferLink } from '../lib/bufferlink'
+
+/**
+ * Said at the top of a conversation that is not receiving: what is wrong, and
+ * whether anything is being done about it.
+ *
+ * Otherwise a room that has lost its connection looks exactly like a quiet
+ * one, and the first sign anything is wrong is a message that will not send.
+ */
+export function ServiceBanner({ bufferId }: { bufferId: string }): JSX.Element | null {
+ const buffer = useChat((s) => s.buffers.find((b) => b.id === bufferId))
+ const account = useChat((s) => s.accounts.find((a) => a.id === buffer?.accountId))
+ const detail = useChat((s) => (buffer ? s.connectionDetail[buffer.accountId] : undefined))
+ if (!buffer) return null
+ const link = bufferLink(buffer, account, detail)
+ if (!link) return null
+ return (
+
+ {link.retrying ? : }
+ Service interruption
+ {/* The daemon's own words, which start in lower case when they are a
+ library's ("an io error occurred"). */}
+ {link.detail.charAt(0).toUpperCase() + link.detail.slice(1)}
+
+ )
+}
diff --git a/src/renderer/src/lib/bufferlink.ts b/src/renderer/src/lib/bufferlink.ts
new file mode 100644
index 0000000..90fb6af
--- /dev/null
+++ b/src/renderer/src/lib/bufferlink.ts
@@ -0,0 +1,43 @@
+import type { Account, Buffer } from '../../../shared/wire'
+
+/**
+ * Whether a conversation is actually receiving, and if not, why.
+ *
+ * Two places can say no. The account: every conversation under an account
+ * that is not connected is not either. And the conversation itself, where it
+ * has a connection of its own or a join of its own to fail - a Sneedchat room,
+ * an IRC channel that refused us, a Kick channel Kick has not answered for -
+ * which the daemon reports as the buffer's `link`.
+ */
+export interface LinkState {
+ /** Something is trying: drawn with a spinner. */
+ retrying: boolean
+ /** What to say in the banner. */
+ detail: string
+ /** Which part is down, where the daemon knows: tor, site, chat, refused. */
+ cause?: string
+}
+
+/** Causes the daemon keeps retrying on its own. */
+const RETRIED = new Set(['tor', 'site', 'chat'])
+
+export function bufferLink(buffer: Buffer, account: Account | undefined, accountDetail?: string): LinkState | null {
+ if (account && account.state !== 'connected') {
+ switch (account.state) {
+ case 'connecting':
+ return { retrying: true, detail: accountDetail || `Connecting to ${account.displayName}…` }
+ case 'auth_failed':
+ return { retrying: false, detail: `${account.displayName} needs signing in again - see Accounts.`, cause: 'refused' }
+ default:
+ return { retrying: false, detail: `${account.displayName} is disconnected.` }
+ }
+ }
+ const link = buffer.link
+ if (!link) return null
+ if (link.state === 'connecting') return { retrying: true, detail: link.detail || 'Connecting…', cause: link.cause }
+ return {
+ retrying: RETRIED.has(link.cause ?? ''),
+ detail: link.detail || 'Not connected.',
+ cause: link.cause
+ }
+}
diff --git a/src/shared/wire.ts b/src/shared/wire.ts
index e6eaa9f..54978f3 100644
--- a/src/shared/wire.ts
+++ b/src/shared/wire.ts
@@ -148,6 +148,18 @@ export interface Buffer {
* a room with nothing in it.
*/
syncing?: boolean
+ /**
+ * Set while this conversation's own connection is not up though its
+ * account's is - a Sneedchat room that cannot connect, an IRC channel that
+ * refused the join, a Kick channel still being looked up. See
+ * lib/bufferlink for how it combines with the account's state.
+ */
+ link?: {
+ state: 'connecting' | 'down'
+ detail?: string
+ /** tor | site | chat | refused */
+ cause?: string
+ }
}
/**