fix(copilot): update homepage copy to focus on problem discovery (#11956 )

## Summary Update the CoPilot homepage to shift from "what do you want to automate?" to "tell me about your problems." This lowers the barrier to engagement by letting users describe their work frustrations instead of requiring them to identify automations themselves. ## Changes | Element | Before | After | |---------|--------|-------| | Headline | "What do you want to automate?" | "Tell me about your work — I'll find what to automate." | | Placeholder | "You can search or just ask - e.g. 'create a blog post outline'" | "What's your role and what eats up most of your day? e.g. 'I'm a real estate agent and I hate...'" | | Button 1 | "Show me what I can automate" | "I don't know where to start, just ask me stuff" | | Button 2 | "Design a custom workflow" | "I do the same thing every week and it's killing me" | | Button 3 | "Help me with content creation" | "Help me find where I'm wasting my time" | | Container | max-w-2xl | max-w-3xl | > **Note on container width:** The `max-w-2xl` → `max-w-3xl` change is just to keep the longer headline on one line. This works but may not be the ideal solution — @lluis-xai should advise on the proper approach. ## Why This Matters The current UX assumes users know what they want to automate. In reality, most users know what frustrates them but can't identify automations. The current screen blocks Otto from starting the discovery conversation that leads to useful recommendations. ## Files Changed - `autogpt_platform/frontend/src/app/(platform)/copilot/page.tsx` — headline, placeholder, container width - `autogpt_platform/frontend/src/app/(platform)/copilot/helpers.ts` — quick action button text Resolves: [SECRT-1876](https://linear.app/autogpt/issue/SECRT-1876) --------- Co-authored-by: Lluis Agusti <hi@llu.lu>
fix(frontend): Prevent reflected XSS in OAuth callback route (#11963 )
2026-02-04 11:55:11 -05:00 · 2026-02-04 17:38:58 +07:00 · 2026-02-04 10:53:17 +01:00 · 2026-02-04 06:11:41 +00:00
8 changed files with 74 additions and 83 deletions
--- a/autogpt_platform/frontend/src/app/(platform)/auth/integrations/oauth_callback/route.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/auth/integrations/oauth_callback/route.ts
@@ -1,6 +1,17 @@
 import { OAuthPopupResultMessage } from "./types";
 import { NextResponse } from "next/server";

+/**
+ * Safely encode a value as JSON for embedding in a script tag.
+ * Escapes characters that could break out of the script context to prevent XSS.
+ */
+function safeJsonStringify(value: unknown): string {
+  return JSON.stringify(value)
+    .replace(/</g, "\\u003c")
+    .replace(/>/g, "\\u003e")
+    .replace(/&/g, "\\u0026");
+}
+
 // This route is intended to be used as the callback for integration OAuth flows,
 // controlled by the CredentialsInput component. The CredentialsInput opens the login
 // page in a pop-up window, which then redirects to this route to close the loop.
@@ -23,12 +34,13 @@ export async function GET(request: Request) {
  console.debug("Sending message to opener:", message);

  // Return a response with the message as JSON and a script to close the window
+  // Use safeJsonStringify to prevent XSS by escaping <, >, and & characters
  return new NextResponse(
    `
    <html>
      <body>
        <script>
-          window.opener.postMessage(${JSON.stringify(message)});
+          window.opener.postMessage(${safeJsonStringify(message)});
          window.close();
        </script>
      </body>
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/helpers.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/helpers.ts
@@ -26,8 +26,20 @@ export function buildCopilotChatUrl(prompt: string): string {

 export function getQuickActions(): string[] {
  return [
-    "Show me what I can automate",
-    "Design a custom workflow",
-    "Help me with content creation",
+    "I don't know where to start, just ask me stuff",
+    "I do the same thing every week and it's killing me",
+    "Help me find where I'm wasting my time",
  ];
 }
+
+export function getInputPlaceholder(width?: number) {
+  if (!width) return "What's your role and what eats up most of your day?";
+
+  if (width < 500) {
+    return "I'm a chef and I hate...";
+  }
+  if (width <= 1080) {
+    return "What's your role and what eats up most of your day?";
+  }
+  return "What's your role and what eats up most of your day? e.g. 'I'm a recruiter and I hate...'";
+}
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/page.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/page.tsx
@@ -6,7 +6,9 @@ import { Text } from "@/components/atoms/Text/Text";
 import { Chat } from "@/components/contextual/Chat/Chat";
 import { ChatInput } from "@/components/contextual/Chat/components/ChatInput/ChatInput";
 import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import { useEffect, useState } from "react";
 import { useCopilotStore } from "./copilot-page-store";
+import { getInputPlaceholder } from "./helpers";
 import { useCopilotPage } from "./useCopilotPage";

 export default function CopilotPage() {
@@ -14,8 +16,25 @@ export default function CopilotPage() {
  const isInterruptModalOpen = useCopilotStore((s) => s.isInterruptModalOpen);
  const confirmInterrupt = useCopilotStore((s) => s.confirmInterrupt);
  const cancelInterrupt = useCopilotStore((s) => s.cancelInterrupt);
+
+  const [inputPlaceholder, setInputPlaceholder] = useState(
+    getInputPlaceholder(),
+  );
+
+  useEffect(() => {
+    const handleResize = () => {
+      setInputPlaceholder(getInputPlaceholder(window.innerWidth));
+    };
+
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
  const { greetingName, quickActions, isLoading, hasSession, initialPrompt } =
    state;
+
  const {
    handleQuickAction,
    startChatWithPrompt,
@@ -73,7 +92,7 @@ export default function CopilotPage() {
  }

  return (
-    <div className="flex h-full flex-1 items-center justify-center overflow-y-auto bg-[#f8f8f9] px-6 py-10">
+    <div className="flex h-full flex-1 items-center justify-center overflow-y-auto bg-[#f8f8f9] px-3 py-5 md:px-6 md:py-10">
      <div className="w-full text-center">
        {isLoading ? (
          <div className="mx-auto max-w-2xl">
@@ -90,25 +109,25 @@ export default function CopilotPage() {
          </div>
        ) : (
          <>
-            <div className="mx-auto max-w-2xl">
+            <div className="mx-auto max-w-3xl">
              <Text
                variant="h3"
-                className="mb-3 !text-[1.375rem] text-zinc-700"
+                className="mb-1 !text-[1.375rem] text-zinc-700"
              >
                Hey, <span className="text-violet-600">{greetingName}</span>
              </Text>
              <Text variant="h3" className="mb-8 !font-normal">
-                What do you want to automate?
+                Tell me about your work — I&apos;ll find what to automate.
              </Text>

              <div className="mb-6">
                <ChatInput
                  onSend={startChatWithPrompt}
-                  placeholder='You can search or just ask - e.g. "create a blog post outline"'
+                  placeholder={inputPlaceholder}
                />
              </div>
            </div>
-            <div className="flex flex-nowrap items-center justify-center gap-3 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+            <div className="flex flex-wrap items-center justify-center gap-3 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
              {quickActions.map((action) => (
                <Button
                  key={action}
@@ -116,7 +135,7 @@ export default function CopilotPage() {
                  variant="outline"
                  size="small"
                  onClick={() => handleQuickAction(action)}
-                  className="h-auto shrink-0 border-zinc-600 !px-4 !py-2 text-[1rem] text-zinc-600"
+                  className="h-auto shrink-0 border-zinc-300 px-3 py-2 text-[.9rem] text-zinc-600"
                >
                  {action}
                </Button>
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatContainer/ChatContainer.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatContainer/ChatContainer.tsx
@@ -2,7 +2,6 @@ import type { SessionDetailResponse } from "@/app/api/__generated__/models/sessi
 import { Button } from "@/components/atoms/Button/Button";
 import { Text } from "@/components/atoms/Text/Text";
 import { Dialog } from "@/components/molecules/Dialog/Dialog";
-import { useBreakpoint } from "@/lib/hooks/useBreakpoint";
 import { cn } from "@/lib/utils";
 import { GlobeHemisphereEastIcon } from "@phosphor-icons/react";
 import { useEffect } from "react";
@@ -56,10 +55,6 @@ export function ChatContainer({
    onStreamingChange?.(isStreaming);
  }, [isStreaming, onStreamingChange]);

-  const breakpoint = useBreakpoint();
-  const isMobile =
-    breakpoint === "base" || breakpoint === "sm" || breakpoint === "md";
-
  return (
    <div
      className={cn(
@@ -127,11 +122,7 @@ export function ChatContainer({
          disabled={isStreaming || !sessionId}
          isStreaming={isStreaming}
          onStop={stopStreaming}
-          placeholder={
-            isMobile
-              ? "You can search or just ask"
-              : 'You can search or just ask — e.g. "create a blog post outline"'
-          }
+          placeholder="What else can I help with?"
        />
      </div>
    </div>
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/ChatInput.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/ChatInput.tsx
@@ -74,19 +74,20 @@ export function ChatInput({
            hasMultipleLines ? "rounded-xlarge" : "rounded-full",
          )}
        >
+          {!value && !isRecording && (
+            <div
+              className="pointer-events-none absolute inset-0 top-0.5 flex items-center justify-start pl-14 text-[1rem] text-zinc-400"
+              aria-hidden="true"
+            >
+              {isTranscribing ? "Transcribing..." : placeholder}
+            </div>
+          )}
          <textarea
            id={inputId}
            aria-label="Chat message input"
            value={value}
            onChange={handleChange}
            onKeyDown={handleKeyDown}
-            placeholder={
-              isTranscribing
-                ? "Transcribing..."
-                : isRecording
-                  ? ""
-                  : placeholder
-            }
            disabled={isInputDisabled}
            rows={1}
            className={cn(
@@ -122,13 +123,14 @@ export function ChatInput({
              size="icon"
              aria-label={isRecording ? "Stop recording" : "Start recording"}
              onClick={toggleRecording}
-              disabled={disabled || isTranscribing}
+              disabled={disabled || isTranscribing || isStreaming}
              className={cn(
                isRecording
                  ? "animate-pulse border-red-500 bg-red-500 text-white hover:border-red-600 hover:bg-red-600"
                  : isTranscribing
                    ? "border-zinc-300 bg-zinc-100 text-zinc-400"
                    : "border-zinc-300 bg-white text-zinc-500 hover:border-zinc-400 hover:bg-zinc-50 hover:text-zinc-700",
+                isStreaming && "opacity-40",
              )}
            >
              {isTranscribing ? (
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/components/AudioWaveform.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/components/AudioWaveform.tsx
@@ -38,8 +38,8 @@ export function AudioWaveform({
    // Create audio context and analyser
    const audioContext = new AudioContext();
    const analyser = audioContext.createAnalyser();
-    analyser.fftSize = 512;
-    analyser.smoothingTimeConstant = 0.8;
+    analyser.fftSize = 256;
+    analyser.smoothingTimeConstant = 0.3;

    // Connect the stream to the analyser
    const source = audioContext.createMediaStreamSource(stream);
@@ -73,10 +73,11 @@ export function AudioWaveform({
          maxAmplitude = Math.max(maxAmplitude, amplitude);
        }

-        // Map amplitude (0-128) to bar height
-        const normalized = (maxAmplitude / 128) * 255;
-        const height =
-          minBarHeight + (normalized / 255) * (maxBarHeight - minBarHeight);
+        // Normalize amplitude (0-128 range) to 0-1
+        const normalized = maxAmplitude / 128;
+        // Apply sensitivity boost (multiply by 4) and use sqrt curve to amplify quiet sounds
+        const boosted = Math.min(1, Math.sqrt(normalized) * 4);
+        const height = minBarHeight + boosted * (maxBarHeight - minBarHeight);
        newBars.push(height);
      }

--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/useVoiceRecording.ts
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/useVoiceRecording.ts
@@ -224,7 +224,7 @@ export function useVoiceRecording({
    [value, isTranscribing, toggleRecording, baseHandleKeyDown],
  );

-  const showMicButton = isSupported && !isStreaming;
+  const showMicButton = isSupported;
  const isInputDisabled = disabled || isStreaming || isTranscribing;

  // Cleanup on unmount
--- a/autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsx
+++ b/autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsx
@@ -15,7 +15,6 @@ import {
 import { cn } from "@/lib/utils";
 import { useOnboarding } from "@/providers/onboarding/onboarding-provider";
 import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
-import { storage, Key as StorageKey } from "@/services/storage/local-storage";
 import { WalletIcon } from "@phosphor-icons/react";
 import { PopoverClose } from "@radix-ui/react-popover";
 import { X } from "lucide-react";
@@ -175,7 +174,6 @@ export function Wallet() {
  const [prevCredits, setPrevCredits] = useState<number | null>(credits);
  const [flash, setFlash] = useState(false);
  const [walletOpen, setWalletOpen] = useState(false);
-  const [lastSeenCredits, setLastSeenCredits] = useState<number | null>(null);

  const totalCount = useMemo(() => {
    return groups.reduce((acc, group) => acc + group.tasks.length, 0);
@@ -200,38 +198,6 @@ export function Wallet() {
    setCompletedCount(completed);
  }, [groups, state?.completedSteps]);

-  // Load last seen credits from localStorage once on mount
-  useEffect(() => {
-    const stored = storage.get(StorageKey.WALLET_LAST_SEEN_CREDITS);
-    if (stored !== undefined && stored !== null) {
-      const parsed = parseFloat(stored);
-      if (!Number.isNaN(parsed)) setLastSeenCredits(parsed);
-      else setLastSeenCredits(0);
-    } else {
-      setLastSeenCredits(0);
-    }
-  }, []);
-
-  // Auto-open once if never shown, otherwise open only when credits increase beyond last seen
-  useEffect(() => {
-    if (typeof credits !== "number") return;
-    // Open once for first-time users
-    if (state && state.walletShown === false) {
-      requestAnimationFrame(() => setWalletOpen(true));
-      // Mark as shown so it won't reopen on every reload
-      updateState({ walletShown: true });
-      return;
-    }
-    // Open if user gained more credits than last acknowledged
-    if (
-      lastSeenCredits !== null &&
-      credits > lastSeenCredits &&
-      walletOpen === false
-    ) {
-      requestAnimationFrame(() => setWalletOpen(true));
-    }
-  }, [credits, lastSeenCredits, state?.walletShown, updateState, walletOpen]);
-
  const onWalletOpen = useCallback(async () => {
    if (!state?.walletShown) {
      updateState({ walletShown: true });
@@ -324,19 +290,7 @@ export function Wallet() {
  if (credits === null || !state) return null;

  return (
-    <Popover
-      open={walletOpen}
-      onOpenChange={(open) => {
-        setWalletOpen(open);
-        if (!open) {
-          // Persist the latest acknowledged credits so we only auto-open on future gains
-          if (typeof credits === "number") {
-            storage.set(StorageKey.WALLET_LAST_SEEN_CREDITS, String(credits));
-            setLastSeenCredits(credits);
-          }
-        }
-      }}
-    >
+    <Popover open={walletOpen} onOpenChange={(open) => setWalletOpen(open)}>
      <PopoverTrigger asChild>
        <div className="relative inline-block">
          <button