feat(inbox): add session problem signal card with moment preview

[Twixes]

Problem

Session problem signals from the video summarization pipeline have no dedicated card in PostHog Code. They fall through to the generic card and don't display the rasterized moment preview GIF.

Changes

• Added SessionProblemSignalCard component with inline GIF preview, loading/error states, time range overlay, problem type badge (color-coded), segment title, and session context
• Added isSessionProblemExtra type guard and SessionProblemExtra interface
• Added "Session replay · Session problem" source line label
• Routes session_replay/session_problem signals to the new card

How did you test this code?

TypeScript compiles cleanly. Manual visual verification pending once backend PR (PostHog/posthog#55463) lands and local data is available.

🤖 LLM context

Co-authored with Claude Code. Depends on PostHog/posthog#55463 for the backend moment_preview_url enrichment.

[greptile-apps]

Prompt To Fix All With AI

This is a comment left during a code review.
Path: apps/code/src/renderer/features/inbox/components/detail/SignalCard.tsx
Line: 527-536

Comment:
**Invalid CSS: can't append hex-alpha to `var()` references**

`problemMeta.color` is a string like `"var(--red-9)"`. Appending `15` or `40` produces `"var(--red-9)15"` and `"var(--red-9)40"`, which are not valid CSS values. Browsers will silently ignore those declarations, so the badge background and border will always be transparent/invisible, leaving only the text color (which uses `color: var(--red-9)` directly and does work).

Either switch the `PROBLEM_TYPE_LABELS` color values to static hex strings (matching the pattern used in `GitHubIssueSignalCard` with `#${label.color}20`), or use `color-mix()` with CSS variables:

```tsx
const PROBLEM_TYPE_LABELS: Record<string, { label: string; color: string }> = {
  blocking_exception: { label: "Blocking exception", color: "#e5484d" },
  abandonment: { label: "Abandonment", color: "#f76b15" },
  non_blocking_exception: { label: "Non-blocking exception", color: "#ffc53d" },
  confusion: { label: "Confusion", color: "#ffe629" },
  failure: { label: "Failure", color: "#e5484d" },
};
```

Then the existing template literals `${problemMeta.color}15` / `${problemMeta.color}40` would produce valid hex-with-alpha values.

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (1): Last reviewed commit: "feat(inbox): add session problem signal ..." | Re-trigger Greptile}

[greptile-apps]

Invalid CSS: can't append hex-alpha to var() references

problemMeta.color is a string like "var(--red-9)". Appending 15 or 40 produces "var(--red-9)15" and "var(--red-9)40", which are not valid CSS values. Browsers will silently ignore those declarations, so the badge background and border will always be transparent/invisible, leaving only the text color (which uses color: var(--red-9) directly and does work).

Either switch the PROBLEM_TYPE_LABELS color values to static hex strings (matching the pattern used in GitHubIssueSignalCard with #${label.color}20), or use color-mix() with CSS variables:

const PROBLEM_TYPE_LABELS: Record<string, { label: string; color: string }> = {
  blocking_exception: { label: "Blocking exception", color: "#e5484d" },
  abandonment: { label: "Abandonment", color: "#f76b15" },
  non_blocking_exception: { label: "Non-blocking exception", color: "#ffc53d" },
  confusion: { label: "Confusion", color: "#ffe629" },
  failure: { label: "Failure", color: "#e5484d" },
};

Then the existing template literals ${problemMeta.color}15 / ${problemMeta.color}40 would produce valid hex-with-alpha values.

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/code/src/renderer/features/inbox/components/detail/SignalCard.tsx
Line: 527-536

Comment:
**Invalid CSS: can't append hex-alpha to `var()` references**

`problemMeta.color` is a string like `"var(--red-9)"`. Appending `15` or `40` produces `"var(--red-9)15"` and `"var(--red-9)40"`, which are not valid CSS values. Browsers will silently ignore those declarations, so the badge background and border will always be transparent/invisible, leaving only the text color (which uses `color: var(--red-9)` directly and does work).

Either switch the `PROBLEM_TYPE_LABELS` color values to static hex strings (matching the pattern used in `GitHubIssueSignalCard` with `#${label.color}20`), or use `color-mix()` with CSS variables:

```tsx
const PROBLEM_TYPE_LABELS: Record<string, { label: string; color: string }> = {
  blocking_exception: { label: "Blocking exception", color: "#e5484d" },
  abandonment: { label: "Abandonment", color: "#f76b15" },
  non_blocking_exception: { label: "Non-blocking exception", color: "#ffc53d" },
  confusion: { label: "Confusion", color: "#ffe629" },
  failure: { label: "Failure", color: "#e5484d" },
};
```

Then the existing template literals `${problemMeta.color}15` / `${problemMeta.color}40` would produce valid hex-with-alpha values.

How can I resolve this? If you propose a fix, please make it concise.

[Twixes]

Claude speaking: Addressed — the entire SessionProblemSignalCard component and PROBLEM_TYPE_LABELS constant were removed in the follow-up commit (0765488), so the invalid CSS template literals (${problemMeta.color}15 / ${problemMeta.color}40) no longer exist in the branch.

[Twixes]

• feat(inbox): add session problem signal card with moment preview #1753 👈 (View in Graphite)
• feat(inbox): Support session problem signals #1606
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.