feat(git): play a producer tag sound when pushing to origin

packages/ui/src/features/git-interaction/useGitInteraction.ts

@@ -11,7 +11,9 @@ import {
 import { useService } from "@posthog/di/react";
 import { useHostTRPC } from "@posthog/host-router/react";
 import type { ChangedFile } from "@posthog/shared/domain-types";
+import { useSettingsStore } from "@posthog/ui/features/settings/settingsStore";
 import { useConnectivity } from "@posthog/ui/hooks/useConnectivity";
+import { playCompletionSound } from "@posthog/ui/utils/sounds";
 import { useQueryClient } from "@tanstack/react-query";
 import { useMemo, useRef } from "react";
 import { WORKSPACE_QUERY_KEY } from "../workspace/identifiers";
@@ -330,6 +332,11 @@ export function useGitInteraction(
       updateGitCacheFromSnapshot(queryClient, repoPath, result.snapshot);
     }
     modal.setPushState("success");
+    // Drop the user's producer tag now that code has landed on origin.
+    // playCompletionSound no-ops when the tag is set to "none".
+    const { producerTagSound, producerTagVolume, customSounds } =
+      useSettingsStore.getState();
+    playCompletionSound(producerTagSound, producerTagVolume, customSounds);
   };
 
   const runPush = async (mode?: PushMode) => {

packages/ui/src/features/settings/sections/NotificationsSettings.stories.tsx

@@ -0,0 +1,91 @@
+import { Plus } from "@phosphor-icons/react";
+import { SettingRow } from "@posthog/ui/features/settings/SettingRow";
+import { AddCustomSoundDialog } from "@posthog/ui/features/settings/sections/AddCustomSoundDialog";
+import { ProducerTagSection } from "@posthog/ui/features/settings/sections/NotificationsSettings";
+import {
+  type CompletionSound,
+  useSettingsStore,
+} from "@posthog/ui/features/settings/settingsStore";
+import { Button, Flex } from "@radix-ui/themes";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useEffect, useState } from "react";
+
+// A focused stand-in for the sound-related rows of the Notifications settings
+// page, wired to the real settings store, the real Add-custom-sound dialog and
+// the real ProducerTagSection — enough to demo importing a tag and playing it
+// without pulling in the full page's service-backed hooks (tasks, host
+// capabilities, notification bus).
+function ProducerTagDemo() {
+  const customSounds = useSettingsStore((s) => s.customSounds);
+  const producerTagSound = useSettingsStore((s) => s.producerTagSound);
+  const producerTagVolume = useSettingsStore((s) => s.producerTagVolume);
+  const setProducerTagSound = useSettingsStore((s) => s.setProducerTagSound);
+  const setProducerTagVolume = useSettingsStore((s) => s.setProducerTagVolume);
+  const [addOpen, setAddOpen] = useState(false);
+
+  // Start each mount from a clean slate so the demo is deterministic.
+  useEffect(() => {
+    useSettingsStore.setState({
+      customSounds: [],
+      completionSound: "none",
+      producerTagSound: "none",
+      producerTagVolume: 80,
+    });
+  }, []);
+
+  return (
+    <Flex direction="column">
+      <SettingRow
+        label="Custom sounds"
+        description="Record or import your own sound — e.g. your producer tag."
+      >
+        <Button
+          variant="soft"
+          size="1"
+          className="self-start"
+          onClick={() => setAddOpen(true)}
+        >
+          <Plus /> Add
+        </Button>
+      </SettingRow>
+
+      <AddCustomSoundDialog open={addOpen} onOpenChange={setAddOpen} />
+
+      <ProducerTagSection
+        sound={producerTagSound}
+        volume={producerTagVolume}
+        customSounds={customSounds}
+        onSoundChange={(value: CompletionSound) => setProducerTagSound(value)}
+        onVolumeChange={setProducerTagVolume}
+        onAddSound={() => setAddOpen(true)}
+      />
+    </Flex>
+  );
+}
+
+const meta: Meta<typeof ProducerTagDemo> = {
+  title: "Settings/ProducerTag",
+  component: ProducerTagDemo,
+  // This story is a manual demo/record surface, not a visual-regression target:
+  // its imported clip and play button don't need a signed baseline. The runner
+  // (apps/code/.storybook/test-runner.ts) skips stories tagged "test-skip", so
+  // it's excluded from snapshot capture and won't add unapproved VR snapshots.
+  tags: ["test-skip"],
+  // Match the settings dialog's content column so rows size realistically.
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 640, margin: "2rem auto", padding: "0 1rem" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ProducerTagDemo>;
+
+/**
+ * Import a sound as your producer tag, then play it — the drop that fires when
+ * you push code to origin.
+ */
+export const Default: Story = {};

packages/ui/src/features/settings/sections/NotificationsSettings.tsx

@@ -55,13 +55,17 @@ export function NotificationsSettings() {
     completionVolume,
     scaleSoundWithTaskLength,
     customSounds,
+    producerTagSound,
+    producerTagVolume,
     setDesktopNotifications,
     setDockBadgeNotifications,
     setDockBounceNotifications,
     setToastNotifications,
     setCompletionSound,
     setCompletionVolume,
     setScaleSoundWithTaskLength,
+    setProducerTagSound,
+    setProducerTagVolume,
     removeCustomSound,
     renameCustomSound,
   } = useSettingsStore();
@@ -153,6 +157,22 @@ export function NotificationsSettings() {
     [completionSound, setCompletionSound],
   );
 
+  const handleProducerTagSoundChange = useCallback(
+    (value: CompletionSound) => {
+      // Don't leak generated custom-sound ids into analytics.
+      const analyticsValue = value.startsWith("custom:") ? "custom" : value;
+      track(ANALYTICS_EVENTS.SETTING_CHANGED, {
+        setting_name: "producer_tag_sound",
+        new_value: analyticsValue,
+        old_value: producerTagSound.startsWith("custom:")
+          ? "custom"
+          : producerTagSound,
+      });
+      setProducerTagSound(value);
+    },
+    [producerTagSound, setProducerTagSound],
+  );
+
   const handleScaleSoundChange = useCallback(
     (checked: boolean) => {
       track(ANALYTICS_EVENTS.SETTING_CHANGED, {
@@ -173,6 +193,8 @@ export function NotificationsSettings() {
     setCompletionSound(NOTIFICATION_DEFAULTS.completionSound);
     setCompletionVolume(NOTIFICATION_DEFAULTS.completionVolume);
     setScaleSoundWithTaskLength(NOTIFICATION_DEFAULTS.scaleSoundWithTaskLength);
+    setProducerTagSound(NOTIFICATION_DEFAULTS.producerTagSound);
+    setProducerTagVolume(NOTIFICATION_DEFAULTS.producerTagVolume);
     toast.success("Notification settings reset to defaults");
   }, [
     setDesktopNotifications,
@@ -182,6 +204,8 @@ export function NotificationsSettings() {
     setCompletionSound,
     setCompletionVolume,
     setScaleSoundWithTaskLength,
+    setProducerTagSound,
+    setProducerTagVolume,
   ]);
 
   return (
@@ -255,47 +279,11 @@ export function NotificationsSettings() {
         noBorder={completionSound === "none"}
       >
         <Flex align="center" gap="2">
-          <Select.Root
+          <SoundSelect
             value={completionSound}
-            onValueChange={(value) =>
-              handleCompletionSoundChange(value as CompletionSound)
-            }
-            size="1"
-          >
-            <Select.Trigger className="min-w-[100px]" />
-            <Select.Content>
-              <Select.Item value="none">None</Select.Item>
-              <Select.Item value="random-all">Random (all)</Select.Item>
-              {customSounds.length > 0 && (
-                <Select.Item value="random-custom">Random (custom)</Select.Item>
-              )}
-              <Select.Item value="guitar">Guitar solo</Select.Item>
-              <Select.Item value="danilo">I'm ready</Select.Item>
-              <Select.Item value="revi">Cute noise</Select.Item>
-              <Select.Item value="meep">Meep</Select.Item>
-              <Select.Item value="meep-smol">Meep (smol)</Select.Item>
-              <Select.Item value="bubbles">Bubbles</Select.Item>
-              <Select.Item value="drop">Drop</Select.Item>
-              <Select.Item value="knock">Knock</Select.Item>
-              <Select.Item value="ring">Ring</Select.Item>
-              <Select.Item value="shoot">Shoot</Select.Item>
-              <Select.Item value="slide">Slide</Select.Item>
-              <Select.Item value="switch">Switch</Select.Item>
-              <Select.Item value="wilhelm">Wilhelm scream</Select.Item>
-              <Select.Item value="icq">ICQ</Select.Item>
-              <Select.Item value="msn">MSN Messenger</Select.Item>
-              {customSounds.length > 0 && (
-                <Select.Group>
-                  <Select.Label>Custom</Select.Label>
-                  {customSounds.map((sound) => (
-                    <Select.Item key={sound.id} value={`custom:${sound.id}`}>
-                      {sound.name}
-                    </Select.Item>
-                  ))}
-                </Select.Group>
-              )}
-            </Select.Content>
-          </Select.Root>
+            onValueChange={handleCompletionSoundChange}
+            customSounds={customSounds}
+          />
           {completionSound !== "none" && (
             <Tooltip content="Test sound">
               <IconButton
@@ -384,6 +372,15 @@ export function NotificationsSettings() {
         </SettingRow>
       )}
 
+      <ProducerTagSection
+        sound={producerTagSound}
+        volume={producerTagVolume}
+        customSounds={customSounds}
+        onSoundChange={handleProducerTagSoundChange}
+        onVolumeChange={setProducerTagVolume}
+        onAddSound={() => setAddSoundOpen(true)}
+      />
+
       {spokenNarrationEnabled && <SpokenNotificationsSection />}
 
       <NotificationTestHarness
@@ -396,6 +393,142 @@ export function NotificationsSettings() {
   );
 }
 
+// Sound picker shared by the completion sound and the producer tag: the "none"
+// / random options, the bundled built-ins, and the user's custom-sound pool.
+function SoundSelect({
+  value,
+  onValueChange,
+  customSounds,
+}: {
+  value: CompletionSound;
+  onValueChange: (value: CompletionSound) => void;
+  customSounds: CustomSound[];
+}) {
+  return (
+    <Select.Root
+      value={value}
+      onValueChange={(next) => onValueChange(next as CompletionSound)}
+      size="1"
+    >
+      <Select.Trigger className="min-w-[100px]" />
+      <Select.Content>
+        <Select.Item value="none">None</Select.Item>
+        <Select.Item value="random-all">Random (all)</Select.Item>
+        {customSounds.length > 0 && (
+          <Select.Item value="random-custom">Random (custom)</Select.Item>
+        )}
+        <Select.Item value="guitar">Guitar solo</Select.Item>
+        <Select.Item value="danilo">I'm ready</Select.Item>
+        <Select.Item value="revi">Cute noise</Select.Item>
+        <Select.Item value="meep">Meep</Select.Item>
+        <Select.Item value="meep-smol">Meep (smol)</Select.Item>
+        <Select.Item value="bubbles">Bubbles</Select.Item>
+        <Select.Item value="drop">Drop</Select.Item>
+        <Select.Item value="knock">Knock</Select.Item>
+        <Select.Item value="ring">Ring</Select.Item>
+        <Select.Item value="shoot">Shoot</Select.Item>
+        <Select.Item value="slide">Slide</Select.Item>
+        <Select.Item value="switch">Switch</Select.Item>
+        <Select.Item value="wilhelm">Wilhelm scream</Select.Item>
+        <Select.Item value="icq">ICQ</Select.Item>
+        <Select.Item value="msn">MSN Messenger</Select.Item>
+        {customSounds.length > 0 && (
+          <Select.Group>
+            <Select.Label>Custom</Select.Label>
+            {customSounds.map((sound) => (
+              <Select.Item key={sound.id} value={`custom:${sound.id}`}>
+                {sound.name}
+              </Select.Item>
+            ))}
+          </Select.Group>
+        )}
+      </Select.Content>
+    </Select.Root>
+  );
+}
+
+// Producer tag: a signature drop that plays when you push code to origin, à la
+// a music producer's tag. Reuses the shared sound pool — import your tag under
+// "Custom sounds" above, then select it here.
+export function ProducerTagSection({
+  sound,
+  volume,
+  customSounds,
+  onSoundChange,
+  onVolumeChange,
+  onAddSound,
+}: {
+  sound: CompletionSound;
+  volume: number;
+  customSounds: CustomSound[];
+  onSoundChange: (value: CompletionSound) => void;
+  onVolumeChange: (volume: number) => void;
+  onAddSound: () => void;
+}) {
+  const enabled = sound !== "none";
+  return (
+    <>
+      <Text className="mt-4 mb-1 block border-gray-6 border-t pt-4 font-medium text-sm">
+        Producer tag
+      </Text>
+      <Text color="gray" className="mb-1 text-[13px]">
+        Drop a signature sound — your producer tag — every time you push code to
+        origin. Import your tag under "Custom sounds" above, then pick it here.
+      </Text>
+
+      <SettingRow
+        label="Tag sound"
+        description="Plays on a successful push, sync, or publish to the remote."
+        noBorder={!enabled}
+      >
+        <Flex align="center" gap="2">
+          <SoundSelect
+            value={sound}
+            onValueChange={onSoundChange}
+            customSounds={customSounds}
+          />
+          {enabled && (
+            <Tooltip content="Test tag">
+              <IconButton
+                variant="soft"
+                size="1"
+                aria-label="Test tag"
+                onClick={() => playCompletionSound(sound, volume, customSounds)}
+              >
+                <Play weight="fill" />
+              </IconButton>
+            </Tooltip>
+          )}
+          {customSounds.length === 0 && (
+            <Button variant="soft" size="1" onClick={onAddSound}>
+              <Plus /> Add
+            </Button>
+          )}
+        </Flex>
+      </SettingRow>
+
+      {enabled && (
+        <SettingRow label="Tag volume" noBorder>
+          <Flex align="center" gap="3">
+            <Slider
+              value={[volume]}
+              onValueChange={([value]) => onVolumeChange(value)}
+              min={0}
+              max={100}
+              step={1}
+              size="1"
+              className="w-[120px]"
+            />
+            <Text color="gray" className="text-[13px]">
+              {volume}%
+            </Text>
+          </Flex>
+        </SettingRow>
+      )}
+    </>
+  );
+}
+
 function SpeechSwitchRow({
   label,
   description,