fix(app): suggest channel members after @ (#583)

* fix(app): suggest channel members after @, and keep unknown @words plain on the Dashboard

* chore: confirm composer and dashboard notes

* chore: confirm dashboard note

Author: iamnbutler

.lane/memory/apps/app/src/composer.tsx/01M4YQG7BVWEFZPD56A2BA0VE9-mode-ace-mode-channels-id-an.md

@@ -4,9 +4,9 @@ anchor: function Composer
 created: 2026-10-15T02:50:44Z
 norm: '1'
 sig: 6e0e6c5c8afbd01a
-body_hash: 75fc838bf3451b29
-raw_hash: 1948feaaac06338f
-vouched: 2026-10-22T15:03:16Z
+body_hash: c1bc4d0ff6028d0a
+raw_hash: f2b2dae833097ad7
+vouched: 2026-10-22T15:13:29Z
 lines: 99-282
 ---
 

.lane/memory/apps/app/src/composer.tsx/01M4ZSEZBJJ3AMEBTR7SH36FW4-models-are-read-only-while-t.md

@@ -4,9 +4,9 @@ anchor: function Composer
 created: 2026-10-15T12:44:15Z
 norm: '1'
 sig: 6e0e6c5c8afbd01a
-body_hash: 75fc838bf3451b29
-raw_hash: 1948feaaac06338f
-vouched: 2026-10-22T15:03:16Z
+body_hash: c1bc4d0ff6028d0a
+raw_hash: f2b2dae833097ad7
+vouched: 2026-10-22T15:13:29Z
 lines: 101-290
 ---
 

.lane/memory/apps/app/src/composer.tsx/01M4ZYQVGB6C87WBEV12WPQ8PF-a-withdrawn-message-returns.md

@@ -4,9 +4,9 @@ anchor: function Composer
 created: 2026-10-15T14:16:28Z
 norm: '1'
 sig: 6e0e6c5c8afbd01a
-body_hash: 75fc838bf3451b29
-raw_hash: 1948feaaac06338f
-vouched: 2026-10-22T15:03:16Z
+body_hash: c1bc4d0ff6028d0a
+raw_hash: f2b2dae833097ad7
+vouched: 2026-10-22T15:13:25Z
 lines: 104-326
 ---
 

.lane/memory/apps/app/src/dashboard.tsx/01M5AYX7CX6GW2PYNTV3BS5F91-with-no-usable-model-on-this.md

@@ -4,9 +4,9 @@ anchor: function Dashboard
 created: 2026-10-19T20:51:03Z
 norm: '1'
 sig: 4bfb45497157c0e0
-body_hash: d1696132fea7c765
-raw_hash: 907b4bdd8de26f76
-vouched: 2026-10-22T15:09:45Z
+body_hash: 97a54ddcbd872f30
+raw_hash: 758dbb3d2b2fb407
+vouched: 2026-10-22T15:14:58Z
 lines: 256-606
 ---
 

apps/app/src/composer.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { type ReactNode, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 
 import {
 	aceAvatar,
@@ -24,8 +24,7 @@ const MODES = [
 ];
 // A teammate the owner hasn't let invoke sees no @ace; the stored mode brings it back with access.
 const BLOCKED_MODES = [{ id: "chat", name: "Chat", placeholder: "Message the channel" }];
-const MENTIONS = [{ name: "ace", avatar: aceAvatar }];
-const NO_MENTIONS: typeof MENTIONS = [];
+const ACE_MENTION = { name: "ace", avatar: aceAvatar };
 export const EFFORTS: Record<Effort, string> = {
 	off: "Off",
 	minimal: "Minimal",
@@ -65,6 +64,8 @@ type Props = {
 	failure?: string;
 	onProviders?: () => void;
 	accessory?: ReactNode;
+	/** People to suggest after @, by GitHub login. */
+	members: { name: string; avatar?: string }[];
 };
 
 /** Below the composer: its attachment tray rises over the space above it and takes clicks there. */
@@ -98,6 +99,7 @@ export function Composer(
 		failure,
 		onProviders,
 		accessory,
+		members,
 	}: Props,
 ) {
 	const composer = useRef<ChatComposerHandle>(null);
@@ -110,6 +112,7 @@ export function Composer(
 	// The channel refuses a blocked teammate's ask, stop, and kill too.
 	const blocked = shared === false && channel.owner !== user;
 	const mode = blocked ? "chat" : stored;
+	const mentions = useMemo(() => blocked ? members : [ACE_MENTION, ...members], [blocked, members]);
 	const [models, setModels] = useState<ModelOption[]>();
 	const [modelError, setModelError] = useState<string>();
 	const status = useSyncExternalStore(host.subscribe, () => host.status);
@@ -319,7 +322,7 @@ export function Composer(
 				modes={blocked ? BLOCKED_MODES : MODES}
 				mode={mode}
 				onModeChange={changeMode}
-				mentions={blocked ? NO_MENTIONS : MENTIONS}
+				mentions={mentions}
 				models={choices}
 				model={model}
 				onModelChange={(value) => changePick({ model: value })}

apps/app/src/conversation.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
 
 import { Button, Timeline, toast } from "@ace/ui";
-import type { Listing } from "@ace/host/protocol";
+import { channelProject, type Listing } from "@ace/host/protocol";
 
 import { Checks } from "./checks";
 import { Composer } from "./composer";
@@ -11,7 +11,8 @@ import { EditMessage } from "./edit-message";
 import { publish, useDetails } from "./details";
 import { host } from "./host";
 import { MessageQueue } from "./message-queue";
-import { OfflineHost } from "./onboarding";
+import { OfflineHost, useRoster } from "./onboarding";
+import { present } from "./presence";
 import { pendingQuestion, Question } from "./question";
 import { sources, toEvents } from "./timeline";
 import { useTranscript } from "./transcript";
@@ -158,6 +159,23 @@ export function Conversation(
 			),
 		[people],
 	);
+	const presence = useSyncExternalStore(host.subscribe, () => host.presence);
+	const roster = useRoster();
+	// Mentions name people by GitHub login. A name still holding @ is a Tailscale login with no
+	// GitHub account, or an agent from another channel (`agent@<prefix>`), and can't be mentioned.
+	const members = useMemo(() => {
+		const self = people[user] || user;
+		const names = new Set([
+			...present(presence[channelProject(channel)], self, channel.id).map((value) => value.name),
+			...transcript.items.flatMap((item) =>
+				item.kind === "message" ? [people[item.author] || item.author] : []
+			),
+			...(roster || []).map((member) => member.github || member.login),
+		]);
+		return [...names]
+			.filter((name) => name !== self && name !== "ace" && !name.includes("@"))
+			.map((name) => ({ name, avatar: avatars[name] }));
+	}, [people, user, presence, channel, transcript.items, roster, avatars]);
 	const results = useMemo(
 		() =>
 			transcript.items.reduce(
@@ -304,6 +322,7 @@ export function Conversation(
 						failure={failure}
 						onProviders={onProviders}
 						accessory={chat?.usage && <Usage value={chat.usage} context={chat.context} />}
+						members={members}
 					/>
 				</div>
 			</div>

apps/app/src/dashboard.tsx

@@ -1,6 +1,7 @@
 import { type ReactNode, useEffect, useRef, useState, useSyncExternalStore } from "react";
 
 import {
+	aceAvatar,
 	Button,
 	buttonVariants,
 	ChatComposer,
@@ -67,6 +68,8 @@ function adopt(project: AppProject): string {
 }
 
 const MODES = [{ id: "ace", name: "Ace", placeholder: "Start a new channel" }];
+// A new channel has no one else in it yet; a list also stops unknown @words becoming chips.
+const MENTIONS = [{ name: "ace", avatar: aceAvatar }];
 
 /** Where a new channel's agent works, offered while the cloud compute beta is on. */
 const PLACES = [
@@ -449,6 +452,7 @@ export function Dashboard(
 						ref={composer}
 						scope={scope}
 						modes={MODES}
+						mentions={MENTIONS}
 						mode="ace"
 						agents={cloud ? PLACES : undefined}
 						agent={place}