feat: First session polish (#1658)

## Problem

<!-- Who is this for and what problem does it solve? -->

<!-- Closes #ISSUE_ID -->

Closes https://github.com/PostHog/code/issues/1638
Closes https://github.com/PostHog/code/issues/1649

## Changes

1. Add slide-in animation for new user messages via framer-motion
2. Remove DiffStatsIndicator component and all cloudDiffStats plumbing from editor/stores/views
3. Remove "Copy Task ID" and "Copy Path" from context menus
4. Fix skills detail panel close button not selecting null on deselect
5. Move setContext from render body into useEffect to avoid side effects during render
6. Minor spacing/padding fixes for environment cards, generating indicator and session footer
7. Rename "Auto-accept Permissions" labels to "Bypass Permissions" across settings, execution modes and permission options
    1. Doing this because actual claude code auto mode is coming in the next adapter upgrade. https://code.claude.com/docs/en/permission-modes#eliminate-prompts-with-auto-mode

<!-- What did you change and why? -->

<!-- If there are frontend changes, include screenshots. -->

## How did you test this?

Manually

<!-- Describe what you tested -- manual steps, automated tests, or both. -->

<!-- If you're an agent, only list tests you actually ran. -->

Author: charlesvien

.gitignore

@@ -39,6 +39,8 @@ AGENTS.md
 MEMORY.md
 .claude-config/
 .agent-trigger
+.posthog-code/
+.claude/worktrees/
 
 # Testing
 playwright-results/

.posthog-code/environments/twig.toml

@@ -37,7 +37,6 @@ const externalAppAction = z.discriminatedUnion("type", [
 const taskAction = z.discriminatedUnion("type", [
   z.object({ type: z.literal("rename") }),
   z.object({ type: z.literal("pin") }),
-  z.object({ type: z.literal("copy-task-id") }),
   z.object({ type: z.literal("suspend") }),
   z.object({ type: z.literal("archive") }),
   z.object({ type: z.literal("archive-prior") }),

apps/code/src/main/services/context-menu/schemas.ts

@@ -118,7 +118,6 @@ export class ContextMenuService {
     return this.showMenu<TaskAction>([
       this.item(isPinned ? "Unpin" : "Pin", { type: "pin" }),
       this.item("Rename", { type: "rename" }),
-      this.item("Copy Task ID", { type: "copy-task-id" }),
       ...(worktreePath
         ? [
             this.separator(),
@@ -273,11 +272,6 @@ export class ContextMenuService {
     const lastUsedApp = apps.find((app) => app.id === lastUsedAppId) || apps[0];
     const openIn = (appId: string): T =>
       ({ type: "external-app", action: { type: "open-in-app", appId } }) as T;
-    const copyPath: T = {
-      type: "external-app",
-      action: { type: "copy-path" },
-    } as T;
-
     return [
       this.item(`Open in ${lastUsedApp.name}`, openIn(lastUsedApp.id)),
       {
@@ -293,7 +287,6 @@ export class ContextMenuService {
           action: openIn(app.id),
         })),
       },
-      this.item("Copy Path", copyPath, { accelerator: "CmdOrCtrl+Shift+C" }),
     ];
   }
 

apps/code/src/main/services/context-menu/service.ts

@@ -87,7 +87,7 @@ function EmptyCell({ cellIndex }: { cellIndex: number }) {
 
   return (
     <Flex align="center" justify="center" height="100%">
-      <Flex direction="column" align="center" gap="2">
+      <Flex direction="column" align="center" gap="2" className="select-none">
         <TaskSelector
           cellIndex={cellIndex}
           open={selectorOpen}

apps/code/src/renderer/features/command-center/components/CommandCenterPanel.tsx

@@ -5,7 +5,7 @@ import { useGitQueries } from "@features/git-interaction/hooks/useGitQueries";
 import { getUserPromptsForTask } from "@features/sessions/stores/sessionStore";
 import { useIsWorkspaceCloudRun } from "@features/workspace/hooks/useWorkspace";
 import { useConnectivity } from "@hooks/useConnectivity";
-import { ArrowUp, Circle, Stop } from "@phosphor-icons/react";
+import { ArrowUp, Stop } from "@phosphor-icons/react";
 import { Flex, IconButton, Text, Tooltip } from "@radix-ui/themes";
 import { EditorContent } from "@tiptap/react";
 import { hasOpenOverlay } from "@utils/overlay";
@@ -15,7 +15,6 @@ import { useDraftStore } from "../stores/draftStore";
 import { useTiptapEditor } from "../tiptap/useTiptapEditor";
 import type { EditorHandle } from "../types";
 import { AttachmentsBar } from "./AttachmentsBar";
-import { DiffStatsIndicator } from "./DiffStatsIndicator";
 import { EditorToolbar } from "./EditorToolbar";
 import { ModeIndicatorInput } from "./ModeIndicatorInput";
 
@@ -26,11 +25,6 @@ interface ModeAndBranchRowProps {
   onModeChange?: () => void;
   repoPath?: string | null;
   cloudBranch?: string | null;
-  cloudDiffStats?: {
-    filesChanged: number;
-    linesAdded: number;
-    linesRemoved: number;
-  } | null;
   disabled?: boolean;
   isBashMode?: boolean;
   isCloud?: boolean;
@@ -42,25 +36,16 @@ function ModeAndBranchRow({
   onModeChange,
   repoPath,
   cloudBranch,
-  cloudDiffStats,
   disabled,
   isBashMode,
   isCloud,
   taskId,
 }: ModeAndBranchRowProps) {
-  const { currentBranch: gitBranch, diffStats } = useGitQueries(
-    repoPath ?? undefined,
-  );
+  const { currentBranch: gitBranch } = useGitQueries(repoPath ?? undefined);
   const currentBranch = cloudBranch ?? gitBranch;
 
   const showModeIndicator = !!onModeChange;
   const showBranchSelector = !!currentBranch;
-  const effectiveDiffStats = cloudDiffStats ?? diffStats;
-  const showDiffStats =
-    effectiveDiffStats &&
-    (effectiveDiffStats.filesChanged > 0 ||
-      effectiveDiffStats.linesAdded > 0 ||
-      effectiveDiffStats.linesRemoved > 0);
 
   if (!showModeIndicator && !showBranchSelector && !isBashMode) {
     return null;
@@ -103,20 +88,6 @@ function ModeAndBranchRow({
         wrap="nowrap"
         style={{ minWidth: 0, overflow: "hidden" }}
       >
-        <DiffStatsIndicator
-          repoPath={repoPath}
-          overrideStats={cloudDiffStats}
-          taskId={taskId}
-        />
-        {showBranchSelector && showDiffStats && (
-          <Flex
-            align="center"
-            justify="center"
-            style={{ height: 16, marginRight: -8, flexShrink: 0 }}
-          >
-            <Circle size={4} weight="fill" color="var(--gray-9)" />
-          </Flex>
-        )}
         {showBranchSelector && (
           <Flex style={{ maxWidth: 200, minWidth: 0 }}>
             <BranchSelector
@@ -178,7 +149,6 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
     const isLoading = context?.isLoading ?? false;
     const repoPath = context?.repoPath;
     const cloudBranch = context?.cloudBranch;
-    const cloudDiffStats = context?.cloudDiffStats;
     const isSubmitDisabled = disabled || !isOnline;
 
     const getPromptHistory = useCallback(
@@ -361,7 +331,6 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
           onModeChange={onModeChange}
           repoPath={repoPath}
           cloudBranch={cloudBranch}
-          cloudDiffStats={cloudDiffStats}
           disabled={disabled}
           isBashMode={isBashMode}
           isCloud={isCloud}

apps/code/src/renderer/features/message-editor/components/DiffStatsIndicator.tsx

@@ -7,18 +7,11 @@ import type { EditorContent } from "../utils/content";
 
 type SessionId = string;
 
-export interface CloudDiffStats {
-  filesChanged: number;
-  linesAdded: number;
-  linesRemoved: number;
-}
-
 export interface EditorContext {
   sessionId: string;
   taskId: string | undefined;
   repoPath: string | null | undefined;
   cloudBranch?: string | null;
-  cloudDiffStats?: CloudDiffStats | null;
   disabled: boolean;
   isLoading: boolean;
 }
@@ -87,7 +80,6 @@ export const useDraftStore = create<DraftStore>()(
             taskId: context.taskId ?? existing?.taskId,
             repoPath: context.repoPath ?? existing?.repoPath,
             cloudBranch: context.cloudBranch ?? existing?.cloudBranch,
-            cloudDiffStats: context.cloudDiffStats ?? existing?.cloudDiffStats,
             disabled: context.disabled ?? existing?.disabled ?? false,
             isLoading: context.isLoading ?? existing?.isLoading ?? false,
           };
@@ -96,12 +88,6 @@ export const useDraftStore = create<DraftStore>()(
             existing?.taskId === newContext.taskId &&
             existing?.repoPath === newContext.repoPath &&
             existing?.cloudBranch === newContext.cloudBranch &&
-            existing?.cloudDiffStats?.filesChanged ===
-              newContext.cloudDiffStats?.filesChanged &&
-            existing?.cloudDiffStats?.linesAdded ===
-              newContext.cloudDiffStats?.linesAdded &&
-            existing?.cloudDiffStats?.linesRemoved ===
-              newContext.cloudDiffStats?.linesRemoved &&
             existing?.disabled === newContext.disabled &&
             existing?.isLoading === newContext.isLoading
           ) {

apps/code/src/renderer/features/message-editor/components/MessageEditor.tsx

@@ -73,6 +73,15 @@ export function ConversationView({
   }
   const firstUserMessageId = firstUserMessageIdRef.current;
 
+  const [initialItemIds] = useState(
+    () =>
+      new Set(
+        conversationItems
+          .filter((i) => i.type === "user_message")
+          .map((i) => i.id),
+      ),
+  );
+
   const pendingPermissions = usePendingPermissionsForTask(taskId ?? "");
   const pendingPermissionsCount = pendingPermissions.size;
   const queuedMessages = useQueuedMessagesForTask(taskId);
@@ -148,6 +157,7 @@ export function ConversationView({
               content={item.content}
               attachments={item.attachments}
               timestamp={item.timestamp}
+              animate={!initialItemIds.has(item.id)}
               sourceUrl={
                 slackThreadUrl && item.id === firstUserMessageId
                   ? slackThreadUrl
@@ -194,7 +204,7 @@ export function ConversationView({
           );
       }
     },
-    [repoPath, taskId, slackThreadUrl, firstUserMessageId],
+    [repoPath, taskId, slackThreadUrl, firstUserMessageId, initialItemIds],
   );
 
   const getItemKey = useCallback((item: ConversationItem) => item.id, []);

apps/code/src/renderer/features/message-editor/stores/draftStore.ts

@@ -152,11 +152,13 @@ export function GeneratingIndicator({
     <Flex
       align="center"
       gap="2"
-      className="select-none text-accent-11"
+      className="select-none"
       style={{ userSelect: "none", WebkitUserSelect: "none" }}
     >
       <Brain size={12} className="ph-pulse" />
-      <Text size="1">{activity}...</Text>
+      <Text size="1" className="text-accent-11">
+        {activity}...
+      </Text>
       <Text size="1" color="gray">
         (Esc to stop
       </Text>