Inbox beta labeling + button spring cleaning

apps/code/src/renderer/features/inbox/components/InboxSignalsTab.tsx

@@ -481,6 +481,7 @@ export function InboxSignalsTab() {
                     reports={reports}
                     effectiveBulkIds={selectedReportIds}
                     onToggleSelectAll={handleToggleSelectAll}
+                    onConfigureSources={() => setSourcesDialogOpen(true)}
                   />
                 </Box>
                 <ReportListPane
@@ -558,6 +559,7 @@ export function InboxSignalsTab() {
               pipelinePausedUntil={signalProcessingState?.paused_until}
               searchDisabledReason={searchDisabledReason}
               hideFilters
+              onConfigureSources={() => setSourcesDialogOpen(true)}
             />
             <SkeletonBackdrop />
           </Flex>

apps/code/src/renderer/features/inbox/components/InboxView.tsx

@@ -1,13 +1,10 @@
-import { useInboxSourcesDialogStore } from "@features/inbox/stores/inboxSourcesDialogStore";
 import { useSetHeaderContent } from "@hooks/useSetHeaderContent";
-import { EnvelopeSimpleIcon, GearSixIcon } from "@phosphor-icons/react";
-import { Box, Flex, Text } from "@radix-ui/themes";
+import { EnvelopeSimpleIcon } from "@phosphor-icons/react";
+import { Flex, Text } from "@radix-ui/themes";
 import { useMemo } from "react";
 import { InboxSignalsTab } from "./InboxSignalsTab";
 
 export function InboxView() {
-  const openSourcesDialog = useInboxSourcesDialogStore((s) => s.setOpen);
-
   const headerContent = useMemo(
     () => (
       <Flex align="center" gap="2" className="w-full min-w-0">
@@ -20,24 +17,16 @@ export function InboxView() {
         >
           Inbox
         </Text>
-        <button
-          type="button"
-          onClick={() => openSourcesDialog(true)}
-          className="no-drag ml-auto flex cursor-pointer items-center gap-1 border-0 bg-transparent p-0 text-[12px] text-gray-10 transition-colors hover:text-gray-12"
-        >
-          <GearSixIcon size={12} />
-          <span>Configure sources</span>
-        </button>
       </Flex>
     ),
-    [openSourcesDialog],
+    [],
   );
 
   useSetHeaderContent(headerContent);
 
   return (
-    <Box style={{ height: "100%" }}>
+    <div style={{ height: "100%" }}>
       <InboxSignalsTab />
-    </Box>
+    </div>
   );
 }

apps/code/src/renderer/features/inbox/components/SignalSourceToggles.tsx

@@ -9,13 +9,15 @@ import {
   VideoIcon,
 } from "@phosphor-icons/react";
 import {
+  Badge,
   Box,
   Button,
   Flex,
   Link,
   Spinner,
   Switch,
   Text,
+  Tooltip,
 } from "@radix-ui/themes";
 import type {
   Evaluation,
@@ -34,6 +36,7 @@ export interface SignalSourceValues {
 interface SignalSourceToggleCardProps {
   icon: React.ReactNode;
   label: string;
+  labelSuffix?: React.ReactNode;
   description: string;
   checked: boolean;
   onCheckedChange: (checked: boolean) => void;
@@ -47,6 +50,7 @@ interface SignalSourceToggleCardProps {
 const SignalSourceToggleCard = memo(function SignalSourceToggleCard({
   icon,
   label,
+  labelSuffix,
   description,
   checked,
   onCheckedChange,
@@ -77,9 +81,16 @@ const SignalSourceToggleCard = memo(function SignalSourceToggleCard({
         <Flex align="center" gap="3">
           <Box style={{ color: "var(--gray-11)", flexShrink: 0 }}>{icon}</Box>
           <Flex direction="column" gap="1">
-            <Text size="2" weight="medium" style={{ color: "var(--gray-12)" }}>
-              {label}
-            </Text>
+            <Flex align="center" gap="2">
+              <Text
+                size="2"
+                weight="medium"
+                style={{ color: "var(--gray-12)" }}
+              >
+                {label}
+              </Text>
+              {labelSuffix}
+            </Flex>
             <Text size="1" style={{ color: "var(--gray-11)" }}>
               {description}
             </Text>
@@ -90,13 +101,12 @@ const SignalSourceToggleCard = memo(function SignalSourceToggleCard({
         ) : requiresSetup ? (
           <Button
             size="1"
-            variant="soft"
             onClick={(e) => {
               e.stopPropagation();
               onSetup?.();
             }}
           >
-            Connect
+            Enable
           </Button>
         ) : (
           <Switch
@@ -174,9 +184,25 @@ export const EvaluationsSection = memo(function EvaluationsSection({
             <BrainIcon size={20} />
           </Box>
           <Flex direction="column" gap="1" style={{ flex: 1, minWidth: 0 }}>
-            <Text size="2" weight="medium" style={{ color: "var(--gray-12)" }}>
-              LLM evaluations
-            </Text>
+            <Flex align="center" gap="2">
+              <Text
+                size="2"
+                weight="medium"
+                style={{ color: "var(--gray-12)" }}
+              >
+                PostHog LLM Analytics
+              </Text>
+              <Tooltip content="This is only visible to staff users of PostHog">
+                <Badge
+                  color="blue"
+                  size="1"
+                  variant="surface"
+                  className="!py-0 !text-[9px] !leading-tight uppercase"
+                >
+                  Internal
+                </Badge>
+              </Tooltip>
+            </Flex>
             <Text size="1" style={{ color: "var(--gray-11)" }}>
               Ongoing evaluation of how your AI features are performing based on
               defined criteria
@@ -295,9 +321,27 @@ export function SignalSourceToggles({
 
   return (
     <Flex direction="column" gap="2">
+      <SignalSourceToggleCard
+        icon={<BugIcon size={20} />}
+        label="PostHog Error Tracking"
+        description="Surface new issues, reopenings, and volume spikes"
+        checked={value.error_tracking}
+        onCheckedChange={toggleErrorTracking}
+        disabled={disabled}
+      />
       <SignalSourceToggleCard
         icon={<VideoIcon size={20} />}
         label="PostHog Session Replay"
+        labelSuffix={
+          <Badge
+            color="orange"
+            size="1"
+            variant="surface"
+            className="!py-0 !text-[9px] !leading-tight uppercase"
+          >
+            Alpha
+          </Badge>
+        }
         description="Analyze session recordings and event data for UX issues"
         checked={value.session_replay}
         onCheckedChange={toggleSessionReplay}
@@ -311,14 +355,6 @@ export function SignalSourceToggles({
           ) : undefined
         }
       />
-      <SignalSourceToggleCard
-        icon={<BugIcon size={20} />}
-        label="PostHog Error Tracking"
-        description="Surface new issues, reopenings, and volume spikes"
-        checked={value.error_tracking}
-        onCheckedChange={toggleErrorTracking}
-        disabled={disabled}
-      />
       {evaluations && evaluationsUrl && onToggleEvaluation && (
         <EvaluationsSection
           evaluations={evaluations}

apps/code/src/renderer/features/inbox/components/detail/ReportDetailPane.tsx

@@ -18,13 +18,13 @@ import {
   Cloud as CloudIcon,
   CommandIcon,
   EyeIcon,
-  GithubLogoIcon,
   KeyReturnIcon,
   WarningIcon,
   XIcon,
 } from "@phosphor-icons/react";
 import {
   AlertDialog,
+  Badge,
   Box,
   Button,
   Flex,
@@ -469,9 +469,12 @@ export function ReportDetailPane({ report, onClose }: ReportDetailPaneProps) {
                       gap="2"
                       wrap="wrap"
                     >
-                      <GithubLogoIcon
-                        size={14}
-                        className="shrink-0 text-gray-10"
+                      <img
+                        src={`https://github.com/${reviewer.github_login}.png?size=28`}
+                        alt=""
+                        className="github-avatar shrink-0 rounded-full"
+                        style={{ width: 18, height: 18 }}
+                        onLoad={(e) => e.currentTarget.classList.add("loaded")}
                       />
                       <Text size="1" className="text-[12px]">
                         {reviewer.user?.first_name ??
@@ -480,16 +483,18 @@ export function ReportDetailPane({ report, onClose }: ReportDetailPaneProps) {
                       </Text>
                       {isMe && (
                         <Tooltip content="You are a suggested reviewer">
-                          <span
-                            className="inline-flex shrink-0 items-center rounded-sm px-1 py-px"
-                            style={{
-                              color: "var(--amber-11)",
-                              backgroundColor: "var(--amber-3)",
-                              border: "1px solid var(--amber-6)",
-                            }}
+                          <Badge
+                            color="amber"
+                            size="1"
+                            variant="surface"
+                            className="!py-1 !text-[8px] !leading-tight"
                           >
-                            <EyeIcon size={10} weight="bold" />
-                          </span>
+                            <EyeIcon
+                              size={8}
+                              weight="bold"
+                              className="shrink-0"
+                            />
+                          </Badge>
                         </Tooltip>
                       )}
                       <a

apps/code/src/renderer/features/inbox/components/list/GitHubConnectionBanner.tsx

@@ -80,8 +80,8 @@ export function GitHubConnectionBanner() {
         }}
       >
         <GithubLogoIcon className="flex-none" size={12} />
-        <span className="min-w-0 flex-1 basis-0">
-          {`Connect your GitHub profile to highlight what's relevant to you`}
+        <span className="min-w-0 flex-1 basis-0 text-balance">
+          Connect your GitHub profile to highlight what's relevant to you
         </span>
         <ArrowSquareOutIcon className="flex-none" size={11} />
       </Button>