onChange(e.target.value)}
        onKeyDown={onKeyDown}
        className={cn(
          "min-h-[60px] max-h-[200px] resize-none overflow-y-auto bg-background border-border",
        )}
      />
      <div className="flex items-center gap-2">
        <Button
          size="sm"
          variant="default"
          onClick={onSave}
          disabled={saving || !value.trim()}
          className="h-7 cursor-pointer"
        >
          <IconCheck className="mr-1 h-3.5 w-3.5" />
          Save
        </Button>
        <Button
          size="sm"
          variant="ghost"
          onClick={onCancel}
          disabled={saving}
          className="h-7 cursor-pointer"
        >
          Cancel
        </Button>
        <span className="ml-auto text-xs text-muted-foreground">
          Press Esc to cancel, Cmd+Enter to save
        </span>
      </div>
    </div>
  );
}

type DisplayViewProps = {
  entry: QueuedMessage;
  positionLabel: string;
  canEdit: boolean;
  onStartEdit: () => void;
  onRemove: () => void;
};

/** Rough threshold above which we offer a per-row expand toggle. Two lines of
 * the row's text width fit ~80 chars OR any explicit newline implies overflow,
 * so we use either signal to surface the chevron — short multi-line messages
 * (lists, code blocks) would otherwise be silently truncated. */
const EXPAND_THRESHOLD = 80;

function shouldOfferExpand(text: string): boolean {
  return text.length > EXPAND_THRESHOLD || text.includes("\n");
}

type QueuedGhostMessageProps = {
  entry: QueuedMessage;
  /** Zero-based render position; combined with entry.position to label the row. */
  index?: number;
  /**
   * Edit is only allowed when the caller's identity (currentUserId) matches the
   * entry's queued_by. Inter-task entries are visible but read-only.
   */
  canEdit: boolean;
  onSave: (content: string) => Promise<void>;
  onRemove: () => void | Promise<void>;
  /** Called after edit save/cancel so the parent can refocus the chat input. */
  onEditComplete?: () => void;
};

export const QueuedGhostMessage = forwardRef<QueuedGhostMessageHandle, QueuedGhostMessageProps>(
  function QueuedGhostMessage({ entry, index, canEdit, onSave, onRemove, onEditComplete }, ref) {
    const [editing, setEditing] = useState(false);
    const [value, setValue] = useState(entry.content);
    const [saving, setSaving] = useState(false);
    const textareaRef = useRef<HTMLTextAreaElement>(null);

useEffect(() => {
      if (!editing) setValue(entry.content);
    }, [entry.content, editing]);

useEffect(() => {
      if (editing && textareaRef.current) {
        const el = textareaRef.current;
        el.focus();
        el.setSelectionRange(el.value.length, el.value.length);
      }
    }, [editing]);

const startEdit = useCallback(() => {
      if (!canEdit) return;
      setValue(entry.content);
      setEditing(true);
    }, [entry.content, canEdit]);

useImperativeHandle(ref, () => ({ startEdit }), [startEdit]);

const handleCancel = useCallback(() => {
      setValue(entry.content);
      setEditing(false);
      onEditComplete?.();
    }, [entry.content, onEditComplete]);

const positionNumber = entry.position ?? (index ?? 0) + 1;
    const positionLabel = `#${positionNumber}`;

return (
      <div
        className={cn(
          "rounded-md border border-border/60 bg-background/40 px-2 text-sm",
          "hover:border-border transition-colors",
        )}
      >
        {editing ? (
          <EditView
            value={value}
            saving={saving}
            attachments={(entry.attachments ?? []) as QueuedAttachment[]}
            onChange={setValue}
            onSave={handleSave}
            onCancel={handleCancel}
            textareaRef={textareaRef}
          />
        ) : (
          <DisplayView
            entry={entry}
            positionLabel={positionLabel}
            canEdit={canEdit}
            onStartEdit={startEdit}
            onRemove={onRemove}
          />
        )}
      </div>
    );
  },
);