Add in-app micro-feedback prompts (#497)

apps/yaak-client/components/FeedbackToast.tsx

@@ -0,0 +1,76 @@
+import { HStack, VStack } from "@yaakapp-internal/ui";
+import { useRef, useState } from "react";
+import type { FeedbackFeature } from "../lib/featureFeedbackConstants";
+import { FEEDBACK_FEATURES } from "../lib/featureFeedbackConstants";
+import { invokeCmd } from "../lib/tauri";
+import { hideToastById, showToast } from "../lib/toast";
+import { Button } from "./core/Button";
+import { Input } from "./core/Input";
+
+interface Props {
+  feature: FeedbackFeature;
+  onDone: () => void;
+}
+
+export function FeedbackToast({ feature, onDone }: Props) {
+  const [text, setText] = useState<string>("");
+  const [sent, setSent] = useState(false);
+  const sentRef = useRef(false);
+
+  const handleDismiss = () => {
+    onDone();
+    hideToastById(`feature-feedback-${feature}`);
+  };
+
+  const handleSend = () => {
+    const trimmedText = text.trim();
+    if (sentRef.current || trimmedText.length === 0) return;
+
+    sentRef.current = true;
+    setSent(true);
+    onDone();
+
+    // Fire-and-forget; failures are intentionally ignored
+    invokeCmd("cmd_send_feedback", { feature, text: trimmedText }).catch(() => {});
+    showToast({
+      id: `feature-feedback-${feature}`,
+      timeout: 3000,
+      color: "success",
+      message: "Thanks for the feedback!",
+    });
+  };
+
+  return (
+    <VStack space={2}>
+      <p className="text-sm font-semibold">{FEEDBACK_FEATURES[feature]}</p>
+      <div className="h-20">
+        <Input
+          size="xs"
+          // The editor forces its mono font on the scroller, so the override
+          // has to target it directly
+          className="[&_.cm-scroller]:font-sans! [&_.cm-scroller]:text-sm!"
+          label="Feedback"
+          hideLabel
+          stateKey={null}
+          multiLine
+          fullHeight
+          placeholder="Your thoughts..."
+          onChange={setText}
+        />
+      </div>
+      <HStack space={1.5} justifyContent="end">
+        <Button size="xs" color="secondary" variant="border" onClick={handleDismiss}>
+          Dismiss
+        </Button>
+        <Button
+          size="xs"
+          color="primary"
+          disabled={sent || text.trim().length === 0}
+          onClick={handleSend}
+        >
+          Send
+        </Button>
+      </HStack>
+    </VStack>
+  );
+}

apps/yaak-client/components/RecentHttpResponsesDropdown.tsx

@@ -92,7 +92,9 @@ export const RecentHttpResponsesDropdown = function ResponsePane({
         </HStack>
       ),
       leftSlot: activeResponse?.id === r.id ? <Icon icon="check" /> : <Icon icon="empty" />,
-      onSelect: () => onPinnedResponseId(r.id),
+      onSelect: () => {
+        onPinnedResponseId(r.id);
+      },
     });
   }
 

apps/yaak-client/components/Settings/SettingsGeneral.tsx

@@ -112,6 +112,17 @@ export function SettingsGeneral() {
           </SettingsSection>
         </CargoFeature>
 
+        <CargoFeature feature="license">
+          <SettingsSection title="Feedback">
+            <SettingRowBoolean
+              title="Prompt for feedback"
+              description="Show rare one-time prompts asking how new features are working."
+              checked={settings.promptFeedback}
+              onChange={(promptFeedback) => patchModel(settings, { promptFeedback })}
+            />
+          </SettingsSection>
+        </CargoFeature>
+
         {showWorkspaceSettingsMovedBanner && (
           <DismissibleBanner
             id="workspace-settings-moved-2026-06-30"

apps/yaak-client/components/core/Input.tsx

@@ -318,6 +318,7 @@ function BaseInput({
               editorClassName,
               multiLine && size === "md" && "py-1.5",
               multiLine && size === "sm" && "py-1",
+              multiLine && (size === "xs" || size === "2xs") && "py-0.5",
             )}
             onFocus={handleFocus}
             onBlur={handleBlur}

apps/yaak-client/components/core/Toast.tsx

@@ -3,6 +3,7 @@ import { Icon, type IconProps, VStack } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import * as m from "motion/react-m";
 import type { ReactNode } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useKey } from "react-use";
 import { IconButton } from "./IconButton";
 
@@ -15,6 +16,12 @@ export interface ToastProps {
   action?: (args: { hide: () => void }) => ReactNode;
   icon?: ShowToastRequest["icon"] | null;
   color?: ShowToastRequest["color"];
+  // Grow with the content (up to the viewport) instead of scrolling internally
+  // past the default max height
+  dynamicHeight?: boolean;
+  // Hide the close button, for toasts that render their own dismiss action.
+  // Escape still closes the toast
+  hideDismiss?: boolean;
 }
 
 const ICONS: Record<NonNullable<ToastProps["color"] | "custom">, IconProps["icon"] | null> = {
@@ -28,7 +35,47 @@ const ICONS: Record<NonNullable<ToastProps["color"] | "custom">, IconProps["icon
   warning: "alert_triangle",
 };
 
-export function Toast({ children, open, onClose, timeout, action, icon, color }: ToastProps) {
+export function Toast({
+  children,
+  open,
+  onClose,
+  timeout,
+  action,
+  icon,
+  color,
+  dynamicHeight,
+  hideDismiss,
+}: ToastProps) {
+  const onCloseRef = useRef(onClose);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [autoHideCanceled, setAutoHideCanceled] = useState(false);
+
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
+
+  const cancelAutoHide = useCallback(() => {
+    if (timeoutRef.current == null) return;
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = null;
+    setAutoHideCanceled(true);
+  }, []);
+
+  useEffect(() => {
+    if (!open || timeout == null || autoHideCanceled) return;
+
+    timeoutRef.current = setTimeout(() => {
+      timeoutRef.current = null;
+      onCloseRef.current();
+    }, timeout);
+
+    return () => {
+      if (timeoutRef.current == null) return;
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    };
+  }, [autoHideCanceled, open, timeout]);
+
   useKey(
     "Escape",
     () => {
@@ -56,8 +103,17 @@ export function Toast({ children, open, onClose, timeout, action, icon, color }:
           "relative pointer-events-auto bg-surface text-text rounded-lg",
           "border border-border shadow-lg w-100",
         )}
+        onFocusCapture={cancelAutoHide}
+        onKeyDownCapture={cancelAutoHide}
+        onPointerDownCapture={cancelAutoHide}
       >
-        <div className="pl-3 py-3 pr-10 flex items-start gap-2 w-full max-h-44 overflow-auto">
+        <div
+          className={classNames(
+            "pl-3 py-3 flex items-start gap-2 w-full overflow-auto",
+            hideDismiss ? "pr-3" : "pr-10",
+            dynamicHeight ? "max-h-[80vh]" : "max-h-44",
+          )}
+        >
           {toastIcon && <Icon icon={toastIcon} color={color} className="mt-1 shrink-0" />}
           <VStack space={2} className="w-full min-w-0">
             <div className="select-auto">{children}</div>
@@ -65,16 +121,18 @@ export function Toast({ children, open, onClose, timeout, action, icon, color }:
           </VStack>
         </div>
 
-        <IconButton
-          color={color}
-          variant="border"
-          className="opacity-60 border-0 absolute! top-2 right-2"
-          title="Dismiss"
-          icon="x"
-          onClick={onClose}
-        />
+        {!hideDismiss && (
+          <IconButton
+            color={color}
+            variant="border"
+            className="opacity-60 border-0 absolute! top-2 right-2"
+            title="Dismiss"
+            icon="x"
+            onClick={onClose}
+          />
+        )}
 
-        {timeout != null && (
+        {timeout != null && !autoHideCanceled && (
           <div className="w-full absolute bottom-0 left-0 right-0">
             <m.div
               className="bg-surface-highlight h-[3px]"

apps/yaak-client/components/git/GitCommitDialog.tsx

@@ -12,6 +12,7 @@ import { Banner, HStack, Icon, InlineCode, SplitLayout } from "@yaakapp-internal
 import classNames from "classnames";
 import { useCallback, useMemo, useState } from "react";
 import { modelToYaml } from "../../lib/diffYaml";
+import { trackFeatureUsage } from "../../lib/featureFeedback";
 import { resolvedModelName } from "../../lib/resolvedModelName";
 import { showConfirm } from "../../lib/confirm";
 import { showErrorToast } from "../../lib/toast";
@@ -55,6 +56,7 @@ export function GitCommitDialog({ syncDir, onDone, workspace }: Props) {
     setCommitError(null);
     try {
       await commit.mutateAsync({ message });
+      trackFeatureUsage("git-sync");
       onDone();
     } catch (err) {
       setCommitError(String(err));
@@ -66,6 +68,7 @@ export function GitCommitDialog({ syncDir, onDone, workspace }: Props) {
     try {
       const r = await commitAndPush.mutateAsync({ message });
       handlePushResult(r);
+      trackFeatureUsage("git-sync");
       onDone();
     } catch (err) {
       showErrorToast({

apps/yaak-client/components/responseViewers/EventStreamViewer.tsx

@@ -71,6 +71,7 @@ function ActualEventStreamViewer({ response }: Props) {
     summary.data.fragmentCount === 0 &&
     !summary.isFetching &&
     summary.error == null;
+
   const filterEventPreviews = showExtractedText && filterEventPreviewsSetting.value === true;
   const applyToDetails = showExtractedText && applyToDetailsSetting.value === true;
   const renderMarkdown = showExtractedText && renderMarkdownSetting.value === true;

apps/yaak-client/lib/featureFeedback.tsx

@@ -0,0 +1,103 @@
+import { settingsAtom } from "@yaakapp-internal/models";
+import { FeedbackToast } from "../components/FeedbackToast";
+import { appInfo } from "./appInfo";
+import type { FeedbackFeature } from "./featureFeedbackConstants";
+import { dialogsAtom } from "./dialog";
+import { jotaiStore } from "./jotai";
+import { getKeyValue, setKeyValue } from "./keyValueStore";
+import { showToast } from "./toast";
+
+interface FeatureFeedbackState {
+  uses: number;
+  done: boolean;
+}
+
+const FEEDBACK_PROMPT_DELAY_MS = 1500;
+const FEEDBACK_PROMPT_TIMEOUT_MS = 8000;
+
+// Ask once the user has used a feature enough times to have formed an opinion
+const PROMPT_AFTER_USES = 3;
+
+// Show at most one feedback prompt per app session to stay unobtrusive
+let promptedThisSession = false;
+
+const lastTrackedAt: Partial<Record<FeedbackFeature, number>> = {};
+const FEATURE_USE_DEBOUNCE_MS = 10_000;
+
+const kvArgs = (feature: FeedbackFeature) => ({
+  namespace: "global",
+  key: ["feature-feedback", feature],
+});
+
+function getFeatureFeedbackState(feature: FeedbackFeature): FeatureFeedbackState {
+  return getKeyValue<FeatureFeedbackState>({
+    ...kvArgs(feature),
+    fallback: { uses: 0, done: false },
+  });
+}
+
+function patchFeatureFeedbackState(feature: FeedbackFeature, patch: Partial<FeatureFeedbackState>) {
+  const value = { ...getFeatureFeedbackState(feature), ...patch };
+  setKeyValue({ ...kvArgs(feature), value }).catch(console.error);
+}
+
+function markFeatureFeedbackDone(feature: FeedbackFeature) {
+  patchFeatureFeedbackState(feature, { done: true });
+}
+
+function showFeedbackToast(feature: FeedbackFeature) {
+  if (!jotaiStore.get(settingsAtom).promptFeedback) return;
+
+  showToast({
+    id: `feature-feedback-${feature}`,
+    timeout: FEEDBACK_PROMPT_TIMEOUT_MS,
+    dynamicHeight: true,
+    hideDismiss: true,
+    message: (
+      <FeedbackToast feature={feature} onDone={() => markFeatureFeedbackDone(feature)} />
+    ),
+  });
+}
+
+function showFeedbackToastWhenReady(feature: FeedbackFeature) {
+  setTimeout(() => {
+    if (!jotaiStore.get(settingsAtom).promptFeedback) return;
+
+    if (jotaiStore.get(dialogsAtom).length === 0) {
+      showFeedbackToast(feature);
+      return;
+    }
+
+    const unsubscribe = jotaiStore.sub(dialogsAtom, () => {
+      if (jotaiStore.get(dialogsAtom).length > 0) return;
+
+      unsubscribe();
+      showFeedbackToast(feature);
+    });
+  }, FEEDBACK_PROMPT_DELAY_MS);
+}
+
+// Record a successful use of a feature, and prompt for feedback on the Nth use.
+// Nothing is ever sent to the server from here; showing the toast is local-only
+// and a submission only happens when the user clicks Send in it.
+export function trackFeatureUsage(feature: FeedbackFeature) {
+  if (appInfo.featureLicense !== true || !jotaiStore.get(settingsAtom).promptFeedback) return;
+
+  const now = Date.now();
+  if (lastTrackedAt[feature] != null && now - lastTrackedAt[feature] < FEATURE_USE_DEBOUNCE_MS) {
+    return;
+  }
+  lastTrackedAt[feature] = now;
+
+  const state = getFeatureFeedbackState(feature);
+  if (state.done) return;
+
+  const uses = state.uses + 1;
+  const shouldPrompt = uses >= PROMPT_AFTER_USES && !promptedThisSession;
+
+  patchFeatureFeedbackState(feature, { uses });
+  if (!shouldPrompt) return;
+
+  promptedThisSession = true;
+  showFeedbackToastWhenReady(feature);
+}

apps/yaak-client/lib/featureFeedbackConstants.ts

@@ -0,0 +1,8 @@
+// Feature keys are sent to the server and used to group feedback for analysis.
+// NEVER rename a key once it has shipped, or historical feedback will be split
+// across the old and new names.
+export const FEEDBACK_FEATURES = {
+  "git-sync": "How is Git sync working for you?",
+} as const;
+
+export type FeedbackFeature = keyof typeof FEEDBACK_FEATURES;

apps/yaak-client/lib/tauri.ts

@@ -48,6 +48,7 @@ type TauriCmd =
   | "cmd_save_response"
   | "cmd_secure_template"
   | "cmd_send_ephemeral_request"
+  | "cmd_send_feedback"
   | "cmd_send_http_request"
   | "cmd_template_function_summaries"
   | "cmd_template_function_config"

apps/yaak-client/lib/toast.tsx

@@ -28,15 +28,17 @@ export function showToast({
 
   setTimeout(() => {
     const newToast: ToastInstance = { id, uniqueKey, timeout, ...props };
-    if (timeout != null) {
-      setTimeout(() => hideToast(newToast), timeout);
-    }
     jotaiStore.set(toastsAtom, (prev) => [...prev, newToast]);
   }, delay);
 
   return id;
 }
 
+export function hideToastById(id: string) {
+  const toast = jotaiStore.get(toastsAtom).find((t) => t.id === id);
+  if (toast) hideToast(toast);
+}
+
 export function hideToast(toHide: ToastInstance) {
   jotaiStore.set(toastsAtom, (all) => {
     const t = all.find((t) => t.uniqueKey === toHide.uniqueKey);