@tribe-nest/forge 3.59.0 → 3.61.0

package/src/ui/styled/community/CommunityAgent.tsx

@@ -0,0 +1,286 @@
+import { Bot, Sparkles, ThumbsDown, ThumbsUp, X } from "lucide-react";
+import { useForgeT } from "../../../i18n";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import {
+  linkifyText,
+  useCommunityAgentAnswerFeedback,
+  useCommunityCatchUp,
+} from "../../headless/community/useCommunityAgent";
+import type { CommunityAgentFeedbackEntity } from "../../../data/queries/useCommunityAgent";
+
+/** What an agent is drawn from: its name and avatar. */
+export interface CommunityAgentIdentity {
+  name: string;
+  avatarUrl?: string | null;
+}
+
+/**
+ * The "AI" chip. Shown beside the community AI's name everywhere it appears,
+ * so it is never mistaken for a member or for the creator.
+ */
+export function CommunityAgentBadge() {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  return (
+    <span
+      data-testid="community-agent-badge"
+      title={tr("forge.community_agent.badge_title")}
+      style={{
+        background: t.primary,
+        color: t.textPrimary,
+        borderRadius: 999,
+        fontSize: 10,
+        fontWeight: 700,
+        padding: "1px 6px",
+        letterSpacing: 0.4,
+        whiteSpace: "nowrap",
+        flexShrink: 0,
+      }}
+    >
+      {tr("forge.community_agent.badge")}
+    </span>
+  );
+}
+
+export interface CommunityAgentAvatarProps {
+  agent: CommunityAgentIdentity;
+  size?: number;
+}
+
+/** The agent's avatar, or a neutral AI glyph when the creator set none. */
+export function CommunityAgentAvatar({ agent, size = 36 }: CommunityAgentAvatarProps) {
+  const t = useThemeTokens();
+  const style: React.CSSProperties = { width: size, height: size, borderRadius: "50%", flexShrink: 0, objectFit: "cover" };
+  if (agent.avatarUrl) return <img src={agent.avatarUrl} alt={agent.name} style={style} />;
+  return (
+    <div
+      role="img"
+      aria-label={agent.name}
+      data-testid="community-agent-glyph"
+      style={{
+        ...style,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: `${t.primary}22`,
+        color: t.primary,
+      }}
+    >
+      <Bot size={Math.max(12, Math.round(size * 0.55))} aria-hidden />
+    </div>
+  );
+}
+
+export interface CommunityAgentNameProps {
+  agent: CommunityAgentIdentity;
+  fontSize?: number;
+  fontWeight?: number;
+}
+
+/** The agent's name with its "AI" badge, in place of a member's name. */
+export function CommunityAgentName({ agent, fontSize = 14, fontWeight = 600 }: CommunityAgentNameProps) {
+  const t = useThemeTokens();
+  return (
+    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, minWidth: 0 }}>
+      <span
+        style={{
+          color: t.text,
+          fontWeight,
+          fontSize,
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+        }}
+      >
+        {agent.name}
+      </span>
+      <CommunityAgentBadge />
+    </span>
+  );
+}
+
+/**
+ * Plain text with its http(s) addresses made clickable, line breaks kept. For
+ * the agent's answers, which end with a "Sources:" list of addresses.
+ */
+export function CommunityLinkifiedText({ text }: { text: string }) {
+  const t = useThemeTokens();
+  return (
+    <span style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}>
+      {linkifyText(text).map((segment, i) =>
+        segment.kind === "link" ? (
+          <a
+            key={i}
+            href={segment.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{ color: "inherit", textDecoration: "underline", textDecorationColor: t.primary }}
+          >
+            {segment.text}
+          </a>
+        ) : (
+          <span key={i}>{segment.text}</span>
+        ),
+      )}
+    </span>
+  );
+}
+
+/** "<name> is thinking..." while the agent writes an answer. */
+export function CommunityAgentThinking({ name }: { name?: string | null }) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  return (
+    <div
+      role="status"
+      data-testid="community-agent-thinking"
+      style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, color: t.muted }}
+    >
+      <Sparkles size={13} aria-hidden style={{ color: t.primary }} />
+      {name ? tr("forge.community_agent.thinking", { agent_name: name }) : tr("forge.community_agent.thinking_unnamed")}
+    </div>
+  );
+}
+
+export interface CommunityAgentFeedbackProps {
+  entityType: CommunityAgentFeedbackEntity;
+  entityId: string;
+  /** The member's saved rating, from `useCommunityAgentAnswerRatings`. */
+  saved?: 1 | -1 | null;
+}
+
+/**
+ * Thumbs up / down on one AI answer, for the member who asked (render it only
+ * where `useCommunityAgentAnswerRatings` says they may rate). Starts from the
+ * saved rating; optimistic; a second press on the active thumb clears it. A
+ * 404 hides it without a word.
+ */
+export function CommunityAgentFeedback({ entityType, entityId, saved = null }: CommunityAgentFeedbackProps) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const feedback = useCommunityAgentAnswerFeedback(entityType, entityId, saved);
+  if (feedback.hidden) return null;
+
+  const thumb = (value: 1 | -1, label: string, icon: React.ReactNode) => {
+    const active = feedback.value === value;
+    return (
+      <button
+        type="button"
+        onClick={() => feedback.rate(value)}
+        aria-label={label}
+        aria-pressed={active}
+        title={label}
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          background: active ? `${t.primary}1a` : "none",
+          border: "none",
+          borderRadius: t.cornerRadius,
+          cursor: "pointer",
+          color: active ? t.primary : t.muted,
+          padding: "2px 4px",
+        }}
+      >
+        {icon}
+      </button>
+    );
+  };
+
+  return (
+    <span data-testid="community-agent-feedback" style={{ display: "inline-flex", alignItems: "center", gap: 2 }}>
+      {thumb(1, tr("forge.community_agent.feedback_up"), <ThumbsUp size={13} aria-hidden />)}
+      {thumb(-1, tr("forge.community_agent.feedback_down"), <ThumbsDown size={13} aria-hidden />)}
+    </span>
+  );
+}
+
+export interface CommunityCatchMeUpProps {
+  postId: string;
+  agent: CommunityAgentIdentity;
+}
+
+/**
+ * "Catch me up" on a long thread. The summary opens in a private panel, marked
+ * as written by the AI, that only this member sees; nothing is posted. A
+ * reached daily limit or an unavailable AI is said plainly.
+ */
+export function CommunityCatchMeUp({ postId, agent }: CommunityCatchMeUpProps) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const catchUp = useCommunityCatchUp(postId);
+  const border = `1px solid ${t.border}`;
+
+  const errorCopy =
+    catchUp.error === "daily_limit"
+      ? tr("forge.community_agent.catch_up_daily_limit")
+      : catchUp.error === "unavailable"
+        ? tr("forge.community_agent.catch_up_unavailable")
+        : catchUp.error
+          ? tr("forge.community_agent.catch_up_failed")
+          : null;
+
+  if (catchUp.summary) {
+    return (
+      <section
+        data-testid="community-catch-me-up-panel"
+        aria-label={tr("forge.community_agent.catch_up_panel_label", { agent_name: catchUp.summary.agentName })}
+        style={{ border, borderRadius: t.cornerRadius, background: `${t.primary}0d`, padding: 14 }}
+      >
+        <header style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
+          <CommunityAgentAvatar agent={agent} size={24} />
+          <span style={{ flex: 1, minWidth: 0, display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap" }}>
+            <CommunityAgentName agent={{ ...agent, name: catchUp.summary.agentName || agent.name }} fontSize={13} />
+            <span style={{ fontSize: 12, color: t.muted }}>{tr("forge.community_agent.catch_up_private")}</span>
+          </span>
+          <button
+            type="button"
+            onClick={catchUp.dismiss}
+            aria-label={tr("forge.community_agent.catch_up_dismiss")}
+            style={{ background: "none", border: "none", cursor: "pointer", color: t.muted, padding: 2 }}
+          >
+            <X size={15} aria-hidden />
+          </button>
+        </header>
+        <div style={{ color: t.text, fontSize: 14, lineHeight: 1.55 }}>
+          <CommunityLinkifiedText text={catchUp.summary.summary} />
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 6, alignItems: "flex-start" }}>
+      <button
+        type="button"
+        onClick={catchUp.ask}
+        disabled={catchUp.isPending}
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 6,
+          background: "none",
+          border,
+          borderRadius: t.cornerRadius,
+          padding: "6px 12px",
+          cursor: catchUp.isPending ? "wait" : "pointer",
+          color: t.text,
+          fontSize: 13,
+          fontWeight: 600,
+          opacity: catchUp.isPending ? 0.7 : 1,
+        }}
+      >
+        <Sparkles size={14} aria-hidden style={{ color: t.primary }} />
+        {catchUp.isPending ? tr("forge.community_agent.catch_up_pending") : tr("forge.community_agent.catch_up")}
+      </button>
+      {errorCopy && (
+        <div
+          role="alert"
+          data-testid="community-catch-me-up-error"
+          style={{ fontSize: 13, color: t.text, borderLeft: `3px solid ${t.primary}`, paddingLeft: 8 }}
+        >
+          {errorCopy}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/styled/community/CommunityComposer.tsx

@@ -1,9 +1,15 @@
 import { useEffect, useId, useRef, useState } from "react";
-import { Bold, Italic, Underline, List, ListOrdered, Link as LinkIcon, PenLine } from "lucide-react";
+import { BarChart3, Bold, Italic, Underline, List, ListOrdered, Link as LinkIcon, PenLine, Plus, X } from "lucide-react";
+import { useForgeT } from "../../../i18n";
 import { useThemeTokens } from "../../theme/ForgeThemeProvider";
 import { formatBytes } from "../../headless/chat/attachmentKind";
 import { useCommunityAttachmentUpload } from "../../headless/community/useCommunityAttachmentUpload";
 import { useRichMentionComposer, type RichCommand } from "../../headless/community/useRichMentionComposer";
+import {
+  COMMUNITY_POLL_LIMITS,
+  buildPollPayload,
+  useCommunityPollDraft,
+} from "../../headless/community/communityPoll";
 // Forge's own `?` disclosure. It is named for the call screen it was first built
 // for, but it is a plain button + panel over the theme tokens with no media
 // dependency, so every styled surface uses it rather than growing a second one.
@@ -11,18 +17,50 @@ import { useRichMentionComposer, type RichCommand } from "../../headless/communi
 // is not a Forge dependency and would not resolve on a real creator site.
 import { CallHelpHint } from "../../media/CallHelpHint";
 import { MemberAvatar } from "./MemberAvatar";
-import type { CommunityAttachmentInput } from "../../../data/queries/useCommunity";
+import { CommunityAgentAvatar, CommunityAgentName } from "./CommunityAgent";
+import type {
+  CommunityAttachmentInput,
+  CommunityPollInput,
+  CommunityPollResultsVisibility,
+} from "../../../data/queries/useCommunity";
 
 export interface CommunityComposerSubmit {
   title?: string;
   body: unknown;
   attachments: CommunityAttachmentInput[];
   mentionedAccountIds: string[];
+  /** Present when the member attached a poll. `title` is then its question. */
+  poll?: CommunityPollInput;
 }
 
+const POLL_ERROR_KEY: Record<string, string> = {
+  question_required: "forge.community_composer.poll_question_required",
+  question_too_long: "forge.community_composer.poll_question_too_long",
+  option_empty: "forge.community_composer.poll_option_empty",
+  option_too_long: "forge.community_composer.poll_option_too_long",
+  option_duplicate: "forge.community_composer.poll_option_duplicate",
+  options_too_few: "forge.community_composer.poll_options_too_few",
+  options_too_many: "forge.community_composer.poll_options_too_many",
+  closes_invalid: "forge.community_composer.poll_closes_invalid",
+  closes_in_past: "forge.community_composer.poll_closes_in_past",
+  closes_required: "forge.community_composer.poll_closes_required",
+  visibility_invalid: "forge.community_composer.poll_visibility_invalid",
+};
+
+const VISIBILITY_KEY: Record<CommunityPollResultsVisibility, string> = {
+  always: "forge.community_composer.poll_visibility_always",
+  after_vote: "forge.community_composer.poll_visibility_after_vote",
+  after_close: "forge.community_composer.poll_visibility_after_close",
+};
+
 export interface CommunityComposerProps {
   /** Show the title input (forum spaces). */
   withTitle?: boolean;
+  /**
+   * Offer a Poll toggle (the space feed's post box). The poll's question is
+   * the post title, so turning it on shows the title input whatever `withTitle` says.
+   */
+  allowPoll?: boolean;
   placeholder?: string;
   submitLabel?: string;
   autoFocus?: boolean;
@@ -72,6 +110,7 @@ export interface CommunityComposerProps {
  */
 export function CommunityComposer({
   withTitle = false,
+  allowPoll = false,
   placeholder = "Write something…",
   submitLabel = "Post",
   autoFocus = false,
@@ -84,7 +123,13 @@ export function CommunityComposer({
   onCancel,
 }: CommunityComposerProps) {
   const t = useThemeTokens();
+  const tr = useForgeT();
   const composer = useRichMentionComposer();
+  const poll = useCommunityPollDraft();
+  const [pollOn, setPollOn] = useState(false);
+  const withPoll = allowPoll && pollOn;
+  const showTitle = withTitle || withPoll;
+  const pollFieldId = useId();
   const upload = useCommunityAttachmentUpload();
   const [title, setTitle] = useState("");
   const [sending, setSending] = useState(false);
@@ -105,15 +150,18 @@ export function CommunityComposer({
   const [confirmingDiscard, setConfirmingDiscard] = useState(false);
 
   const border = `1px solid ${t.border}`;
-  const canSubmit =
-    (!composer.isEmpty || upload.hasPending) && !sending && (!withTitle || title.trim().length > 0);
+  // A poll may go out with no body: the question and options are the post. Its
+  // own checks run on submit, so the button stays live and a click shows why.
+  const canSubmit = withPoll
+    ? !sending
+    : (!composer.isEmpty || upload.hasPending) && !sending && (!withTitle || title.trim().length > 0);
   /** Is there work in here that closing would otherwise have thrown away? */
   const hasDraft = !composer.isEmpty || upload.hasPending || title.trim().length > 0;
 
   /** Put the caret where typing should carry on: the title first on a forum
    * post, otherwise the end of whatever is already written. */
   const focusEditor = () => {
-    if (withTitle && titleRef.current) {
+    if (showTitle && titleRef.current) {
       titleRef.current.focus();
       return;
     }
@@ -142,25 +190,37 @@ export function CommunityComposer({
     composer.reset();
     setTitle("");
     upload.clear();
+    poll.reset();
+    setPollOn(false);
     setError(null);
     setConfirmingDiscard(false);
   };
 
+  const changeTitle = (value: string) => {
+    setTitle(value);
+    poll.setQuestion(value);
+  };
+
   const submit = async () => {
     if (!canSubmit) return;
+    if (withPoll && !poll.attempt()) return;
     setSending(true);
     setError(null);
     try {
       const attachments = upload.hasPending ? await upload.uploadAll() : [];
+      const pollPayload = withPoll ? buildPollPayload(poll.draft) : null;
       await onSubmit({
-        title: withTitle ? title.trim() : undefined,
+        title: pollPayload ? pollPayload.title : withTitle ? title.trim() : undefined,
         body: composer.getBody(),
         attachments,
         mentionedAccountIds: composer.getMentionedAccountIds(),
+        ...(pollPayload ? { poll: pollPayload.poll } : {}),
       });
       composer.reset();
       setTitle("");
       upload.clear();
+      poll.reset();
+      setPollOn(false);
       // Posted, so the box has served its purpose and folds away. There is no
       // draft left to lose: reset() ran a line above.
       if (collapsible) setOpen(false);
@@ -285,13 +345,15 @@ export function CommunityComposer({
         id={bodyId}
         style={{ display: isOpen ? "flex" : "none", flexDirection: "column", gap: 8 }}
       >
-      {withTitle && (
+      {showTitle && (
         <input
           ref={titleRef}
           value={title}
-          onChange={(e) => setTitle(e.target.value)}
-          placeholder="Title"
-          maxLength={200}
+          onChange={(e) => changeTitle(e.target.value)}
+          placeholder={withPoll ? tr("forge.community_composer.poll_question_placeholder") : "Title"}
+          aria-label={withPoll ? tr("forge.community_composer.poll_question_label") : undefined}
+          aria-invalid={withPoll && poll.showErrors && !!poll.errors.question}
+          maxLength={COMMUNITY_POLL_LIMITS.questionMaxLength}
           style={{
             padding: "8px 10px",
             borderRadius: t.cornerRadius,
@@ -302,6 +364,11 @@ export function CommunityComposer({
           }}
         />
       )}
+      {withPoll && poll.showErrors && poll.errors.question && (
+        <div role="alert" style={{ fontSize: 12, color: "#dc2626" }}>
+          {tr(POLL_ERROR_KEY[poll.errors.question])}
+        </div>
+      )}
 
       {/* Formatting toolbar */}
       <div style={{ display: "flex", alignItems: "center", gap: 4, flexWrap: "wrap" }}>
@@ -358,7 +425,8 @@ export function CommunityComposer({
             color: ${t.muted};
             pointer-events: none;
           }
-          .forge-community-composer-editable [data-account-id] {
+          .forge-community-composer-editable [data-account-id],
+          .forge-community-composer-editable [data-agent-id] {
             color: ${t.primary};
             font-weight: 600;
             background: ${t.primary}1a;
@@ -386,7 +454,8 @@ export function CommunityComposer({
           >
             {composer.suggestions.map((s) => (
               <button
-                key={s.accountId}
+                key={s.agentId ? `agent:${s.agentId}` : s.accountId}
+                data-testid={s.agentId ? "community-mention-agent" : "community-mention-member"}
                 type="button"
                 onMouseDown={(e) => {
                   // mousedown so the editor keeps focus.
@@ -407,14 +476,173 @@ export function CommunityComposer({
                   fontSize: 14,
                 }}
               >
-                <MemberAvatar member={{ displayName: s.name, avatarUrl: s.avatarUrl }} size={24} />
-                <span style={{ fontWeight: 500 }}>{s.name}</span>
+                {s.agentId ? (
+                  <>
+                    <CommunityAgentAvatar agent={s} size={24} />
+                    <CommunityAgentName agent={s} fontWeight={500} />
+                  </>
+                ) : (
+                  <>
+                    <MemberAvatar member={{ displayName: s.name, avatarUrl: s.avatarUrl }} size={24} />
+                    <span style={{ fontWeight: 500 }}>{s.name}</span>
+                  </>
+                )}
               </button>
             ))}
           </div>
         )}
       </div>
 
+      {withPoll && (
+        <fieldset
+          data-testid="community-composer-poll"
+          style={{ border, borderRadius: t.cornerRadius, padding: 10, margin: 0, minWidth: 0 }}
+        >
+          <legend style={{ padding: "0 4px", fontSize: 13, fontWeight: 600, color: t.text }}>
+            {tr("forge.community_composer.poll_options_legend")}
+          </legend>
+          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+            {poll.draft.options.map((option, index) => {
+              const optionError = poll.showErrors ? poll.errors.options[index] : null;
+              const errorId = `${pollFieldId}-option-${index}-error`;
+              return (
+                <div key={index} style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+                  <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+                    <input
+                      value={option}
+                      onChange={(e) => poll.setOption(index, e.target.value)}
+                      placeholder={tr("forge.community_composer.poll_option_placeholder", { number: index + 1 })}
+                      aria-label={tr("forge.community_composer.poll_option_label", { number: index + 1 })}
+                      aria-invalid={!!optionError}
+                      aria-describedby={optionError ? errorId : undefined}
+                      maxLength={COMMUNITY_POLL_LIMITS.optionMaxLength}
+                      style={{
+                        flex: 1,
+                        minWidth: 0,
+                        padding: "6px 10px",
+                        borderRadius: t.cornerRadius,
+                        border: `1px solid ${optionError ? "#dc2626" : t.border}`,
+                        background: t.background,
+                        color: t.text,
+                        fontSize: 14,
+                      }}
+                    />
+                    <button
+                      type="button"
+                      onClick={() => poll.removeOption(index)}
+                      disabled={!poll.canRemoveOption}
+                      aria-label={tr("forge.community_composer.poll_remove_option", { number: index + 1 })}
+                      style={{
+                        ...ghostButton,
+                        padding: "4px 8px",
+                        display: "inline-flex",
+                        alignItems: "center",
+                        cursor: poll.canRemoveOption ? "pointer" : "not-allowed",
+                        opacity: poll.canRemoveOption ? 1 : 0.4,
+                      }}
+                    >
+                      <X size={14} aria-hidden />
+                    </button>
+                  </div>
+                  {optionError && (
+                    <span id={errorId} role="alert" style={{ fontSize: 12, color: "#dc2626" }}>
+                      {tr(POLL_ERROR_KEY[optionError])}
+                    </span>
+                  )}
+                </div>
+              );
+            })}
+            {poll.showErrors && poll.errors.optionsList && (
+              <span role="alert" style={{ fontSize: 12, color: "#dc2626" }}>
+                {tr(POLL_ERROR_KEY[poll.errors.optionsList])}
+              </span>
+            )}
+            <button
+              type="button"
+              onClick={poll.addOption}
+              disabled={!poll.canAddOption}
+              style={{
+                ...ghostButton,
+                alignSelf: "flex-start",
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 4,
+                cursor: poll.canAddOption ? "pointer" : "not-allowed",
+                opacity: poll.canAddOption ? 1 : 0.5,
+              }}
+            >
+              <Plus size={14} aria-hidden />
+              {tr("forge.community_composer.poll_add_option")}
+            </button>
+          </div>
+
+          <label
+            style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 10, fontSize: 13, color: t.text }}
+          >
+            <input
+              type="checkbox"
+              role="switch"
+              checked={poll.draft.multipleChoice}
+              onChange={(e) => poll.setMultipleChoice(e.target.checked)}
+              style={{ accentColor: t.primary, margin: 0 }}
+            />
+            {tr("forge.community_composer.poll_multiple_choice")}
+          </label>
+
+          <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 10 }}>
+            <label style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 13, color: t.text }}>
+              {tr("forge.community_composer.poll_closes_label")}
+              <input
+                type="datetime-local"
+                value={poll.draft.closesAt}
+                onChange={(e) => poll.setClosesAt(e.target.value)}
+                aria-invalid={poll.showErrors && !!poll.errors.closesAt}
+                style={{
+                  padding: "6px 8px",
+                  borderRadius: t.cornerRadius,
+                  border: `1px solid ${poll.showErrors && poll.errors.closesAt ? "#dc2626" : t.border}`,
+                  background: t.background,
+                  color: t.text,
+                  fontSize: 13,
+                }}
+              />
+            </label>
+            <div style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 13, color: t.text }}>
+              <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
+                <label htmlFor={`${pollFieldId}-visibility`}>{tr("forge.community_composer.poll_visibility_label")}</label>
+                <CallHelpHint label={tr("forge.community_composer.poll_visibility_help_label")}>
+                  {tr("forge.community_composer.poll_visibility_help")}
+                </CallHelpHint>
+              </span>
+              <select
+                id={`${pollFieldId}-visibility`}
+                value={poll.draft.resultsVisibility}
+                onChange={(e) => poll.setResultsVisibility(e.target.value as CommunityPollResultsVisibility)}
+                style={{
+                  padding: "6px 8px",
+                  borderRadius: t.cornerRadius,
+                  border,
+                  background: t.background,
+                  color: t.text,
+                  fontSize: 13,
+                }}
+              >
+                {(Object.keys(VISIBILITY_KEY) as CommunityPollResultsVisibility[]).map((value) => (
+                  <option key={value} value={value}>
+                    {tr(VISIBILITY_KEY[value])}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+          {poll.showErrors && poll.errors.closesAt && (
+            <div role="alert" style={{ fontSize: 12, color: "#dc2626", marginTop: 4 }}>
+              {tr(POLL_ERROR_KEY[poll.errors.closesAt])}
+            </div>
+          )}
+        </fieldset>
+      )}
+
       {upload.error && <div style={{ fontSize: 12, color: "#dc2626" }}>{upload.error}</div>}
       {error && <div style={{ fontSize: 12, color: "#dc2626" }}>{error}</div>}
 
@@ -485,7 +713,30 @@ export function CommunityComposer({
         >
           📎
         </button>
-        <span style={{ flex: 1, fontSize: 11, color: t.muted }}>Use @ to mention members</span>
+        {allowPoll && (
+          <button
+            type="button"
+            onClick={() => setPollOn((on) => !on)}
+            aria-pressed={pollOn}
+            style={{
+              ...ghostButton,
+              padding: "4px 10px",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 4,
+              background: pollOn ? `${t.primary}1a` : "none",
+              color: pollOn ? t.primary : t.text,
+            }}
+          >
+            <BarChart3 size={14} aria-hidden />
+            {tr("forge.community_composer.poll_toggle")}
+          </button>
+        )}
+        <span style={{ flex: 1, fontSize: 11, color: t.muted }}>
+          {composer.agent
+            ? tr("forge.community_composer.mention_hint_agent", { agent_name: composer.agent.name })
+            : tr("forge.community_composer.mention_hint")}
+        </span>
         {collapsible && (
           <>
             <CallHelpHint label="What happens to what I have typed?">