feat: add missing integrations and rich notification previews

Add TickTick, Google Calendar, Google Drive and API (WebPage) notification
types, which the backend already supported but the extension ignored.

Fill the previously empty notification previews with content modeled on the
web app: a metadata sidebar (status, priority, assignee, labels, dates,
channel, etc.) plus a markdown body and comment/message threads. Add shared
helpers: PreviewDetail wrapper, TaskMetadata, Slack mrkdwn renderer, GitHub
check/review emoji, and date/HTML utils (cleanHtml strips raw HTML from
GitHub bodies).

The preview metadata "Type" row shows the source item type (Linear Issue,
GitHub Pull Request, Slack Thread, etc.).

Swap list-screen shortcuts: Enter shows details, Cmd+Enter opens in browser.

CHANGELOG.md

@@ -2,6 +2,20 @@
 
 ## [Unreleased]
 
+### Added
+
+- Add support for TickTick, Google Calendar, Google Drive and API (web page) notifications
+- Fill notification previews with rich content (metadata sidebar, body and comment/message threads) modeled on the web app
+- Show the notification source type (e.g. Linear Issue, GitHub Pull Request) in the preview metadata
+
+### Changed
+
+- Swap notification list shortcuts: `Enter` shows details, `Cmd+Enter` opens in browser
+
+### Fixed
+
+- Fix "could not open app" error when opening Google Calendar notifications
+
 ## [0.2.0] - 2024-12-16
 
 ### Added

src/action/NotificationActions.tsx

@@ -26,8 +26,8 @@ export function NotificationActions({ notification, detailsTarget, mutate }: Not
 
   return (
     <ActionPanel>
-      <Action.OpenInBrowser url={notificationHtmlUrl} />
       <Action.Push title="Show Details" icon={Icon.AppWindowSidebarRight} target={detailsTarget} />
+      <Action.OpenInBrowser url={notificationHtmlUrl} shortcut={{ modifiers: ["cmd"], key: "enter" }} />
       <Action
         title="Delete Notification"
         icon={Icon.Trash}

src/action/NotificationTaskActions.tsx

@@ -22,8 +22,8 @@ export function NotificationTaskActions({ notification, detailsTarget, mutate }:
 
   return (
     <ActionPanel>
-      <Action.OpenInBrowser url={notificationHtmlUrl} />
       <Action.Push title="Show Details" icon={Icon.AppWindowSidebarRight} target={detailsTarget} />
+      <Action.OpenInBrowser url={notificationHtmlUrl} shortcut={{ modifiers: ["cmd"], key: "enter" }} />
       <Action
         title="Delete Notification"
         icon={Icon.Trash}

src/index.tsx

@@ -1,10 +1,14 @@
+import { GoogleCalendarNotificationListItem } from "./integrations/google-calendar/listitem/GoogleCalendarNotificationListItem";
+import { GoogleDriveNotificationListItem } from "./integrations/google-drive/listitem/GoogleDriveNotificationListItem";
 import { Action, ActionPanel, Detail, Icon, List, getPreferenceValues, openExtensionPreferences } from "@raycast/api";
 import { GoogleMailNotificationListItem } from "./integrations/google-mail/listitem/GoogleMailNotificationListItem";
+import { TickTickNotificationListItem } from "./integrations/ticktick/listitem/TickTickNotificationListItem";
 import { TodoistNotificationListItem } from "./integrations/todoist/listitem/TodoistNotificationListItem";
 import { LinearNotificationListItem } from "./integrations/linear/listitem/LinearNotificationListItem";
 import { GithubNotificationListItem } from "./integrations/github/listitem/GithubNotificationListItem";
 import { SlackNotificationListItem } from "./integrations/slack/listitem/SlackNotificationListItem";
 import { Notification, NotificationListItemProps, NotificationSourceKind } from "./notification";
+import { APINotificationListItem } from "./integrations/api/listitem/APINotificationListItem";
 import { NotificationActions } from "./action/NotificationActions";
 import { Page, UniversalInboxPreferences } from "./types";
 import { useFetch } from "@raycast/utils";
@@ -78,6 +82,14 @@ function NotificationListItem({ notification, mutate }: NotificationListItemProp
       return <SlackNotificationListItem notification={notification} mutate={mutate} />;
     case NotificationSourceKind.Todoist:
       return <TodoistNotificationListItem notification={notification} mutate={mutate} />;
+    case NotificationSourceKind.TickTick:
+      return <TickTickNotificationListItem notification={notification} mutate={mutate} />;
+    case NotificationSourceKind.GoogleCalendar:
+      return <GoogleCalendarNotificationListItem notification={notification} mutate={mutate} />;
+    case NotificationSourceKind.GoogleDrive:
+      return <GoogleDriveNotificationListItem notification={notification} mutate={mutate} />;
+    case NotificationSourceKind.API:
+      return <APINotificationListItem notification={notification} mutate={mutate} />;
     default:
       return <DefaultNotificationListItem notification={notification} mutate={mutate} />;
   }
@@ -115,6 +127,10 @@ function NotificationKindDropdown({ value, onNotificationKindChange }: Notificat
         <List.Dropdown.Item key="GoogleMail" title="Google Mail" value="GoogleMail" />
         <List.Dropdown.Item key="Slack" title="Slack" value="Slack" />
         <List.Dropdown.Item key="Todoist" title="Todoist" value="Todoist" />
+        <List.Dropdown.Item key="TickTick" title="TickTick" value="TickTick" />
+        <List.Dropdown.Item key="GoogleCalendar" title="Google Calendar" value="GoogleCalendar" />
+        <List.Dropdown.Item key="GoogleDrive" title="Google Drive" value="GoogleDrive" />
+        <List.Dropdown.Item key="API" title="API" value="API" />
       </List.Dropdown.Section>
     </List.Dropdown>
   );

src/integrations/api/listitem/APINotificationListItem.tsx

@@ -0,0 +1,35 @@
+import { APINotificationPreview } from "../preview/APINotificationPreview";
+import { NotificationActions } from "../../../action/NotificationActions";
+import { NotificationListItemProps } from "../../../notification";
+import { Icon, List } from "@raycast/api";
+import { WebPage } from "../types";
+
+export function APINotificationListItem({ notification, mutate }: NotificationListItemProps) {
+  if (notification.source_item.data.type !== "WebPage") return null;
+
+  const webPage: WebPage = notification.source_item.data.content;
+
+  const accessories: List.Item.Accessory[] = [
+    {
+      date: new Date(notification.updated_at),
+      tooltip: `Updated at ${notification.updated_at}`,
+    },
+  ];
+
+  return (
+    <List.Item
+      key={notification.id}
+      title={notification.title}
+      icon={Icon.Globe}
+      subtitle={webPage.url}
+      accessories={accessories}
+      actions={
+        <NotificationActions
+          notification={notification}
+          detailsTarget={<APINotificationPreview notification={notification} webPage={webPage} />}
+          mutate={mutate}
+        />
+      }
+    />
+  );
+}

src/integrations/api/preview/APINotificationPreview.tsx

@@ -0,0 +1,38 @@
+import { formatDateTime, formatElapsedTime } from "../../../utils";
+import { PreviewDetail } from "../../../preview/PreviewDetail";
+import { Notification } from "../../../notification";
+import { Detail } from "@raycast/api";
+import { WebPage } from "../types";
+
+interface APINotificationPreviewProps {
+  notification: Notification;
+  webPage: WebPage;
+}
+
+function getHost(url: string): string {
+  try {
+    return new URL(url).host;
+  } catch {
+    return url;
+  }
+}
+
+export function APINotificationPreview({ notification, webPage }: APINotificationPreviewProps) {
+  const sourceLabel = webPage.source === "universalinboxextension" ? "Universal Inbox extension" : webPage.source;
+  const markdown = `# ${webPage.title || notification.title}\n\n[${webPage.url}](${webPage.url})`;
+
+  const metadata = (
+    <>
+      <Detail.Metadata.Link title="Host" target={webPage.url} text={getHost(webPage.url)} />
+      <Detail.Metadata.Label title="Source" text={sourceLabel} />
+      {webPage.timestamp ? (
+        <Detail.Metadata.Label
+          title="Captured"
+          text={`${formatDateTime(webPage.timestamp)} (${formatElapsedTime(webPage.timestamp)})`}
+        />
+      ) : null}
+    </>
+  );
+
+  return <PreviewDetail notification={notification} markdown={markdown} metadata={metadata} />;
+}

src/integrations/api/types.ts

@@ -0,0 +1,13 @@
+export type APISource = "universalinboxextension" | string;
+
+export interface WebPage {
+  url: string;
+  title: string;
+  timestamp: string;
+  source: APISource;
+  favicon?: string;
+}
+
+export function getWebPageHtmlUrl(webPage: WebPage): string {
+  return webPage.url;
+}

src/integrations/github/markdown.ts

@@ -0,0 +1,42 @@
+import { GithubCheckConclusionState, GithubCheckStatusState, GithubPullRequestReviewState } from "./types";
+
+/** Emoji for a GitHub check run based on its conclusion / status. */
+export function checkRunEmoji(conclusion?: GithubCheckConclusionState, status?: GithubCheckStatusState): string {
+  if (status && status !== GithubCheckStatusState.Completed) {
+    return "⏳";
+  }
+  switch (conclusion) {
+    case GithubCheckConclusionState.Success:
+      return "✅";
+    case GithubCheckConclusionState.Failure:
+    case GithubCheckConclusionState.StartupFailure:
+    case GithubCheckConclusionState.TimedOut:
+      return "❌";
+    case GithubCheckConclusionState.ActionRequired:
+      return "⚠️";
+    case GithubCheckConclusionState.Cancelled:
+    case GithubCheckConclusionState.Skipped:
+    case GithubCheckConclusionState.Stale:
+      return "⚪";
+    case GithubCheckConclusionState.Neutral:
+      return "➖";
+    default:
+      return "🟡";
+  }
+}
+
+/** Emoji for a GitHub pull request review state. */
+export function reviewStateEmoji(state: GithubPullRequestReviewState): string {
+  switch (state) {
+    case GithubPullRequestReviewState.Approved:
+      return "✅";
+    case GithubPullRequestReviewState.ChangesRequested:
+      return "🔴";
+    case GithubPullRequestReviewState.Commented:
+      return "💬";
+    case GithubPullRequestReviewState.Dismissed:
+      return "🚫";
+    case GithubPullRequestReviewState.Pending:
+      return "⏳";
+  }
+}

src/integrations/github/preview/GithubDiscussionPreview.tsx

@@ -1,26 +1,45 @@
-import { getNotificationHtmlUrl, Notification } from "../../../notification";
+import { getGithubActorName, GithubDiscussion } from "../types";
-import { Detail, ActionPanel, Action } from "@raycast/api";
+import { PreviewDetail } from "../../../preview/PreviewDetail";
-import { GithubDiscussion } from "../types";
+import { cleanHtml, formatElapsedTime } from "../../../utils";
-import { useMemo } from "react";
+import { Notification } from "../../../notification";
+import { Detail } from "@raycast/api";
 
 interface GithubDiscussionPreviewProps {
   notification: Notification;
   githubDiscussion: GithubDiscussion;
 }
 
-export function GithubDiscussionPreview({ notification, githubDiscussion }: GithubDiscussionPreviewProps) {
+export function GithubDiscussionPreview({ notification, githubDiscussion: discussion }: GithubDiscussionPreviewProps) {
-  const notificationHtmlUrl = useMemo(() => {
+  let markdown = `# ${discussion.title} #${discussion.number}`;
-    return getNotificationHtmlUrl(notification);
+  if (discussion.author) {
-  }, [notification]);
+    markdown += `\n\n_Opened by ${getGithubActorName(discussion.author)} · ${formatElapsedTime(discussion.created_at)}_`;
-
-  return (
-    <Detail
-      markdown={`# ${githubDiscussion.title}`}
-      actions={
-        <ActionPanel>
-          <Action.OpenInBrowser url={notificationHtmlUrl} />
-        </ActionPanel>
   }
-    />
+  if (discussion.body) {
+    markdown += `\n\n${cleanHtml(discussion.body)}`;
+  }
+  if (discussion.answer) {
+    markdown += `\n\n---\n\n## ✅ Answer`;
+    markdown += `\n\n**${getGithubActorName(discussion.answer.author)}**\n\n${cleanHtml(discussion.answer.body)}`;
+  }
+
+  const metadata = (
+    <>
+      <Detail.Metadata.Label title="Repository" text={discussion.repository.name_with_owner} />
+      {discussion.state_reason ? <Detail.Metadata.Label title="State" text={discussion.state_reason} /> : null}
+      <Detail.Metadata.Label title="Comments" text={`${discussion.comments_count}`} />
+      <Detail.Metadata.Label title="Updated" text={formatElapsedTime(discussion.updated_at)} />
+      {discussion.answer_chosen_by ? (
+        <Detail.Metadata.Label title="Answered by" text={getGithubActorName(discussion.answer_chosen_by)} />
+      ) : null}
+      {discussion.labels.length > 0 ? (
+        <Detail.Metadata.TagList title="Labels">
+          {discussion.labels.map((label) => (
+            <Detail.Metadata.TagList.Item key={label.name} text={label.name} color={`#${label.color}`} />
+          ))}
+        </Detail.Metadata.TagList>
+      ) : null}
+    </>
   );
+
+  return <PreviewDetail notification={notification} markdown={markdown} metadata={metadata} />;
 }

src/integrations/github/preview/GithubPullRequestPreview.tsx

@@ -1,26 +1,103 @@
-import { getNotificationHtmlUrl, Notification } from "../../../notification";
+import { getGithubActorName, GithubPullRequest, GithubPullRequestState, GithubReviewer } from "../types";
-import { Detail, ActionPanel, Action } from "@raycast/api";
+import { PreviewDetail } from "../../../preview/PreviewDetail";
-import { GithubPullRequest } from "../types";
+import { cleanHtml, formatElapsedTime } from "../../../utils";
-import { useMemo } from "react";
+import { checkRunEmoji, reviewStateEmoji } from "../markdown";
+import { Notification } from "../../../notification";
+import { Color, Detail } from "@raycast/api";
 
 interface GithubPullRequestPreviewProps {
   notification: Notification;
   githubPullRequest: GithubPullRequest;
 }
 
-export function GithubPullRequestPreview({ notification, githubPullRequest }: GithubPullRequestPreviewProps) {
+function stateTag(pr: GithubPullRequest): { text: string; color: Color } {
-  const notificationHtmlUrl = useMemo(() => {
+  if (pr.state === GithubPullRequestState.Merged) return { text: "Merged", color: Color.Purple };
-    return getNotificationHtmlUrl(notification);
+  if (pr.state === GithubPullRequestState.Closed) return { text: "Closed", color: Color.Red };
-  }, [notification]);
+  if (pr.is_draft) return { text: "Draft", color: Color.SecondaryText };
-
+  return { text: "Open", color: Color.Green };
-  return (
+}
-    <Detail
+
-      markdown={`# ${githubPullRequest.title}`}
+function reviewerName(reviewer: GithubReviewer): string {
-      actions={
+  switch (reviewer.type) {
-        <ActionPanel>
+    case "GithubUserSummary":
-          <Action.OpenInBrowser url={notificationHtmlUrl} />
+      return reviewer.content.name || reviewer.content.login;
-        </ActionPanel>
+    case "GithubBotSummary":
-      }
+    case "GithubMannequinSummary":
-    />
+      return reviewer.content.login;
-  );
+    case "GithubTeamSummary":
+      return reviewer.content.name;
+  }
+}
+
+export function GithubPullRequestPreview({ notification, githubPullRequest: pr }: GithubPullRequestPreviewProps) {
+  let markdown = `# ${pr.title} #${pr.number}`;
+  if (pr.body) {
+    markdown += `\n\n${cleanHtml(pr.body)}`;
+  }
+
+  const checkRuns = pr.latest_commit.check_suites?.flatMap((suite) => suite.check_runs) ?? [];
+  if (checkRuns.length > 0) {
+    markdown += `\n\n---\n\n## Checks\n\n`;
+    markdown += checkRuns.map((run) => `${checkRunEmoji(run.conclusion, run.status)} ${run.name}`).join("\n");
+  }
+
+  if (pr.reviews.length > 0) {
+    markdown += `\n\n---\n\n## Reviews\n\n`;
+    markdown += pr.reviews
+      .map((review) => {
+        const head = `${reviewStateEmoji(review.state)} **${getGithubActorName(review.author)}**`;
+        return review.body ? `${head}\n\n${cleanHtml(review.body)}` : head;
+      })
+      .join("\n\n");
+  }
+
+  if (pr.comments.length > 0) {
+    markdown += `\n\n---\n\n## Comments\n\n`;
+    markdown += pr.comments
+      .map(
+        (comment) =>
+          `**${getGithubActorName(comment.author)}** · ${formatElapsedTime(comment.created_at)}\n\n${cleanHtml(comment.body)}`,
+      )
+      .join("\n\n---\n\n");
+  }
+
+  const state = stateTag(pr);
+
+  const metadata = (
+    <>
+      <Detail.Metadata.TagList title="Status">
+        <Detail.Metadata.TagList.Item text={state.text} color={state.color} />
+      </Detail.Metadata.TagList>
+      {pr.state === GithubPullRequestState.Open ? (
+        <Detail.Metadata.Label title="Mergeable" text={`${pr.mergeable_state} · ${pr.merge_state_status}`} />
+      ) : null}
+      <Detail.Metadata.Label title="Changes" text={`+${pr.additions} −${pr.deletions} in ${pr.changed_files} files`} />
+      <Detail.Metadata.Label title="Branch" text={`${pr.head_ref_name} → ${pr.base_ref_name}`} />
+      {pr.review_decision ? <Detail.Metadata.Label title="Review" text={pr.review_decision} /> : null}
+      {pr.author ? <Detail.Metadata.Label title="Author" text={getGithubActorName(pr.author)} /> : null}
+      {pr.assignees.length > 0 ? (
+        <Detail.Metadata.TagList title="Assignees">
+          {pr.assignees.map((assignee, index) => (
+            <Detail.Metadata.TagList.Item key={index} text={getGithubActorName(assignee)} />
+          ))}
+        </Detail.Metadata.TagList>
+      ) : null}
+      {pr.review_requests.length > 0 ? (
+        <Detail.Metadata.TagList title="Review requests">
+          {pr.review_requests.map((reviewer, index) => (
+            <Detail.Metadata.TagList.Item key={index} text={reviewerName(reviewer)} />
+          ))}
+        </Detail.Metadata.TagList>
+      ) : null}
+      {pr.labels.length > 0 ? (
+        <Detail.Metadata.TagList title="Labels">
+          {pr.labels.map((label) => (
+            <Detail.Metadata.TagList.Item key={label.name} text={label.name} color={`#${label.color}`} />
+          ))}
+        </Detail.Metadata.TagList>
+      ) : null}
+    </>
+  );
+
+  return <PreviewDetail notification={notification} markdown={markdown} metadata={metadata} />;
 }

src/integrations/google-calendar/listitem/GoogleCalendarNotificationListItem.tsx

@@ -0,0 +1,59 @@
+import { GoogleCalendarEventPreview } from "../preview/GoogleCalendarEventPreview";
+import { GoogleCalendarEvent, getEventStartDisplay, getMeetLink } from "../types";
+import { NotificationActions } from "../../../action/NotificationActions";
+import { NotificationListItemProps } from "../../../notification";
+import { Icon, Color, List } from "@raycast/api";
+
+export function GoogleCalendarNotificationListItem({ notification, mutate }: NotificationListItemProps) {
+  if (notification.source_item.data.type !== "GoogleCalendarEvent") return null;
+
+  const event: GoogleCalendarEvent = notification.source_item.data.content;
+  const subtitle = getEventStartDisplay(event);
+  const meetLink = getMeetLink(event);
+
+  const accessories: List.Item.Accessory[] = [
+    {
+      date: new Date(notification.updated_at),
+      tooltip: `Updated at ${notification.updated_at}`,
+    },
+  ];
+
+  if (event.attendees.length > 0) {
+    accessories.unshift({
+      text: `${event.attendees.length}`,
+      icon: Icon.Person,
+      tooltip: `${event.attendees.length} attendee(s)`,
+    });
+  }
+
+  if (meetLink) {
+    accessories.unshift({
+      icon: { source: Icon.Video, tintColor: Color.Green },
+      tooltip: "Google Meet link available",
+    });
+  }
+
+  if (event.status === "cancelled") {
+    accessories.unshift({
+      icon: { source: Icon.XMarkCircle, tintColor: Color.Red },
+      tooltip: "Cancelled",
+    });
+  }
+
+  return (
+    <List.Item
+      key={notification.id}
+      title={notification.title}
+      icon={Icon.Calendar}
+      subtitle={subtitle}
+      accessories={accessories}
+      actions={
+        <NotificationActions
+          notification={notification}
+          detailsTarget={<GoogleCalendarEventPreview notification={notification} event={event} />}
+          mutate={mutate}
+        />
+      }
+    />
+  );
+}

src/integrations/google-calendar/preview/GoogleCalendarEventPreview.tsx

@@ -0,0 +1,58 @@
+import { GoogleCalendarEvent, getEventStartDisplay, getMeetLink } from "../types";
+import { getNotificationHtmlUrl, Notification } from "../../../notification";
+import { getThirdPartyItemSourceLabel } from "../../../third_party_item";
+import { Detail, ActionPanel, Action, Color } from "@raycast/api";
+import { useMemo } from "react";
+
+interface GoogleCalendarEventPreviewProps {
+  notification: Notification;
+  event: GoogleCalendarEvent;
+}
+
+export function GoogleCalendarEventPreview({ notification, event }: GoogleCalendarEventPreviewProps) {
+  const notificationHtmlUrl = useMemo(() => getNotificationHtmlUrl(notification), [notification]);
+  const meetLink = getMeetLink(event);
+
+  const endDisplay = event.end.dateTime ? new Date(event.end.dateTime).toLocaleString() : (event.end.date ?? "");
+
+  const attendeeLines = event.attendees
+    .map((a) => {
+      const name = a.displayName ?? a.email;
+      const status = a.responseStatus === "accepted" ? "✓" : a.responseStatus === "declined" ? "✗" : "?";
+      return `- ${status} ${name}`;
+    })
+    .join("\n");
+
+  const markdown = [
+    `# ${event.summary}`,
+    event.description ? `\n${event.description}` : null,
+    attendeeLines ? `\n## Attendees\n\n${attendeeLines}` : null,
+  ]
+    .filter(Boolean)
+    .join("\n");
+
+  const statusColor =
+    event.status === "cancelled" ? Color.Red : event.status === "tentative" ? Color.Yellow : Color.Green;
+
+  const metadata = (
+    <Detail.Metadata>
+      <Detail.Metadata.Label title="Type" text={getThirdPartyItemSourceLabel(notification.source_item)} />
+      <Detail.Metadata.Separator />
+      <Detail.Metadata.TagList title="Status">
+        <Detail.Metadata.TagList.Item text={event.status} color={statusColor} />
+      </Detail.Metadata.TagList>
+      <Detail.Metadata.Label title="Start" text={getEventStartDisplay(event)} />
+      <Detail.Metadata.Label title="End" text={endDisplay} />
+      {event.location ? <Detail.Metadata.Label title="Location" text={event.location} /> : null}
+      {meetLink ? <Detail.Metadata.Link title="Meet" target={meetLink} text="Join" /> : null}
+      <Detail.Metadata.Label title="Attendees" text={`${event.attendees.length}`} />
+    </Detail.Metadata>
+  );
+
+  const actions = [<Action.OpenInBrowser key="open" url={notificationHtmlUrl} />];
+  if (meetLink) {
+    actions.push(<Action.OpenInBrowser key="meet" title="Join Meeting" url={meetLink} />);
+  }
+
+  return <Detail markdown={markdown} metadata={metadata} actions={<ActionPanel>{actions}</ActionPanel>} />;
+}

src/integrations/google-calendar/types.ts

@@ -0,0 +1,64 @@
+export interface EventDateTime {
+  dateTime?: string;
+  date?: string;
+  timeZone?: string;
+}
+
+export interface EventAttendee {
+  email: string;
+  displayName?: string;
+  responseStatus: "needsAction" | "declined" | "tentative" | "accepted";
+  self?: boolean;
+  organizer?: boolean;
+}
+
+export interface EntryPoint {
+  entryPointType: "video" | "phone" | "sip" | "more";
+  uri: string;
+  label?: string;
+}
+
+export interface ConferenceSolution {
+  name: string;
+  iconUri?: string;
+}
+
+export interface ConferenceData {
+  entryPoints?: EntryPoint[];
+  conferenceSolution?: ConferenceSolution;
+}
+
+export interface GoogleCalendarEvent {
+  id: string;
+  summary: string;
+  htmlLink: string;
+  hangoutLink?: string;
+  start: EventDateTime;
+  end: EventDateTime;
+  attendees: EventAttendee[];
+  status: "confirmed" | "tentative" | "cancelled";
+  eventType: string;
+  conferenceData?: ConferenceData;
+  description?: string;
+  location?: string;
+}
+
+export function getGoogleCalendarEventHtmlUrl(event: GoogleCalendarEvent): string {
+  return event.htmlLink;
+}
+
+export function getEventStartDisplay(event: GoogleCalendarEvent): string {
+  if (event.start.dateTime) {
+    return new Date(event.start.dateTime).toLocaleString();
+  }
+  if (event.start.date) {
+    return event.start.date;
+  }
+  return "";
+}
+
+export function getMeetLink(event: GoogleCalendarEvent): string | undefined {
+  if (event.hangoutLink) return event.hangoutLink;
+  const meetEntry = event.conferenceData?.entryPoints?.find((ep) => ep.entryPointType === "video");
+  return meetEntry?.uri;
+}

src/integrations/google-drive/listitem/GoogleDriveNotificationListItem.tsx

@@ -0,0 +1,50 @@
+import { GoogleDriveCommentPreview } from "../preview/GoogleDriveCommentPreview";
+import { NotificationActions } from "../../../action/NotificationActions";
+import { NotificationListItemProps } from "../../../notification";
+import { Icon, Color, List } from "@raycast/api";
+import { GoogleDriveComment } from "../types";
+
+export function GoogleDriveNotificationListItem({ notification, mutate }: NotificationListItemProps) {
+  if (notification.source_item.data.type !== "GoogleDriveComment") return null;
+
+  const comment: GoogleDriveComment = notification.source_item.data.content;
+
+  const accessories: List.Item.Accessory[] = [
+    {
+      date: new Date(notification.updated_at),
+      tooltip: `Updated at ${notification.updated_at}`,
+    },
+  ];
+
+  if (comment.resolved) {
+    accessories.unshift({
+      icon: { source: Icon.CheckCircle, tintColor: Color.Green },
+      tooltip: "Resolved",
+    });
+  }
+
+  if (comment.replies.length > 0) {
+    accessories.unshift({
+      text: `${comment.replies.length}`,
+      icon: Icon.Message,
+      tooltip: `${comment.replies.length} repl${comment.replies.length === 1 ? "y" : "ies"}`,
+    });
+  }
+
+  return (
+    <List.Item
+      key={notification.id}
+      title={notification.title}
+      icon={Icon.Document}
+      subtitle={comment.file_name}
+      accessories={accessories}
+      actions={
+        <NotificationActions
+          notification={notification}
+          detailsTarget={<GoogleDriveCommentPreview notification={notification} comment={comment} />}
+          mutate={mutate}
+        />
+      }
+    />
+  );
+}

src/integrations/google-drive/preview/GoogleDriveCommentPreview.tsx

@@ -0,0 +1,44 @@
+import { PreviewDetail } from "../../../preview/PreviewDetail";
+import { Notification } from "../../../notification";
+import { GoogleDriveComment } from "../types";
+import { Color, Detail } from "@raycast/api";
+
+interface GoogleDriveCommentPreviewProps {
+  notification: Notification;
+  comment: GoogleDriveComment;
+}
+
+export function GoogleDriveCommentPreview({ notification, comment }: GoogleDriveCommentPreviewProps) {
+  const quotedSection = comment.quoted_file_content
+    ? `> ${comment.quoted_file_content.split("\n").join("\n> ")}\n\n`
+    : "";
+
+  const replyLines = comment.replies.map((r) => `**${r.author.display_name}:** ${r.content}`).join("\n\n");
+
+  const markdown = [
+    `# ${comment.file_name}`,
+    ``,
+    `**Comment by ${comment.author.display_name}:**`,
+    ``,
+    quotedSection + comment.content,
+    replyLines ? `\n---\n\n### Replies\n\n${replyLines}` : null,
+  ]
+    .filter((line) => line !== null)
+    .join("\n");
+
+  const metadata = (
+    <>
+      <Detail.Metadata.Label title="File" text={comment.file_name} />
+      <Detail.Metadata.Label title="Author" text={comment.author.display_name} />
+      <Detail.Metadata.Label title="Replies" text={`${comment.replies.length}`} />
+      <Detail.Metadata.TagList title="Status">
+        <Detail.Metadata.TagList.Item
+          text={comment.resolved ? "Resolved" : "Open"}
+          color={comment.resolved ? Color.Green : Color.Yellow}
+        />
+      </Detail.Metadata.TagList>
+    </>
+  );
+
+  return <PreviewDetail notification={notification} markdown={markdown} metadata={metadata} />;
+}

src/integrations/google-drive/types.ts

@@ -0,0 +1,34 @@
+export interface GoogleDriveCommentAuthor {
+  display_name: string;
+  email_address?: string;
+  photo_link?: string;
+}
+
+export interface GoogleDriveCommentReply {
+  id: string;
+  content: string;
+  html_content?: string;
+  author: GoogleDriveCommentAuthor;
+  created_time: string;
+  modified_time: string;
+  action?: string;
+}
+
+export interface GoogleDriveComment {
+  id: string;
+  file_id: string;
+  file_name: string;
+  file_mime_type: string;
+  content: string;
+  html_content?: string;
+  quoted_file_content?: string;
+  author: GoogleDriveCommentAuthor;
+  created_time: string;
+  modified_time: string;
+  resolved?: boolean;
+  replies: GoogleDriveCommentReply[];
+}
+
+export function getGoogleDriveCommentHtmlUrl(comment: GoogleDriveComment): string {
+  return `https://drive.google.com/file/d/${comment.file_id}/view`;
+}

src/integrations/google-mail/preview/GoogleMailThreadPreview.tsx

@@ -1,26 +1,49 @@
-import { getNotificationHtmlUrl, Notification } from "../../../notification";
+import { PreviewDetail } from "../../../preview/PreviewDetail";
-import { Detail, ActionPanel, Action } from "@raycast/api";
+import { GoogleMailMessage, GoogleMailThread } from "../types";
-import { GoogleMailThread } from "../types";
+import { Notification } from "../../../notification";
-import { useMemo } from "react";
+import { formatDateTime } from "../../../utils";
+import { Color, Detail } from "@raycast/api";
 
 interface GoogleMailThreadPreviewProps {
   notification: Notification;
   googleMailThread: GoogleMailThread;
 }
 
-export function GoogleMailThreadPreview({ notification }: GoogleMailThreadPreviewProps) {
+function header(message: GoogleMailMessage, name: string): string | undefined {
-  const notificationHtmlUrl = useMemo(() => {
+  return message.payload.headers.find((h) => h.name.toLowerCase() === name.toLowerCase())?.value;
-    return getNotificationHtmlUrl(notification);
+}
-  }, [notification]);
+
-
+export function GoogleMailThreadPreview({ notification, googleMailThread }: GoogleMailThreadPreviewProps) {
-  return (
+  const messages = googleMailThread.messages;
-    <Detail
+  const firstMessage = messages[0];
-      markdown={`# ${notification.title}`}
+  const subject = (firstMessage && header(firstMessage, "Subject")) || notification.title;
-      actions={
+
-        <ActionPanel>
+  const isStarred = messages.some((m) => m.labelIds?.includes("STARRED"));
-          <Action.OpenInBrowser url={notificationHtmlUrl} />
+  const isImportant = messages.some((m) => m.labelIds?.includes("IMPORTANT"));
-        </ActionPanel>
+
-      }
+  const body = messages
-    />
+    .map((message) => {
-  );
+      const from = header(message, "From") ?? "Unknown sender";
+      const date = formatDateTime(message.internalDate);
+      return `**${from}** · ${date}\n\n${message.snippet}`;
+    })
+    .join("\n\n---\n\n");
+
+  const markdown = `# ${subject}\n\n${body}`;
+
+  const metadata = (
+    <>
+      {firstMessage ? <Detail.Metadata.Label title="From" text={header(firstMessage, "From") ?? "Unknown"} /> : null}
+      <Detail.Metadata.Label title="Subject" text={subject} />
+      <Detail.Metadata.Label title="Messages" text={`${messages.length}`} />
+      {isStarred || isImportant ? (
+        <Detail.Metadata.TagList title="Labels">
+          {isStarred ? <Detail.Metadata.TagList.Item text="Starred" color={Color.Yellow} /> : null}
+          {isImportant ? <Detail.Metadata.TagList.Item text="Important" color={Color.Red} /> : null}
+        </Detail.Metadata.TagList>
+      ) : null}
+    </>
+  );
+
+  return <PreviewDetail notification={notification} markdown={markdown} metadata={metadata} />;
 }

src/integrations/linear/preview/LinearIssuePreview.tsx

@@ -1,26 +1,85 @@
-import { getNotificationHtmlUrl, Notification } from "../../../notification";
+import { PreviewDetail } from "../../../preview/PreviewDetail";
-import { Detail, ActionPanel, Action } from "@raycast/api";
+import { formatDate, formatElapsedTime } from "../../../utils";
-import { LinearIssue } from "../types";
+import { LinearIssue, LinearIssuePriority } from "../types";
-import { useMemo } from "react";
+import { Notification } from "../../../notification";
+import { Color, Detail, Image } from "@raycast/api";
 
 interface LinearIssuePreviewProps {
   notification: Notification;
   linearIssue: LinearIssue;
 }
 
-export function LinearIssuePreview({ notification, linearIssue }: LinearIssuePreviewProps) {
+const PRIORITY_LABEL: Record<LinearIssuePriority, string> = {
-  const notificationHtmlUrl = useMemo(() => {
+  [LinearIssuePriority.NoPriority]: "No priority",
-    return getNotificationHtmlUrl(notification);
+  [LinearIssuePriority.Urgent]: "Urgent",
-  }, [notification]);
+  [LinearIssuePriority.High]: "High",
+  [LinearIssuePriority.Normal]: "Normal",
+  [LinearIssuePriority.Low]: "Low",
+};
 
-  return (
+const PRIORITY_COLOR: Record<LinearIssuePriority, Color> = {
-    <Detail
+  [LinearIssuePriority.NoPriority]: Color.SecondaryText,
-      markdown={`# ${linearIssue.title}`}
+  [LinearIssuePriority.Urgent]: Color.Red,
-      actions={
+  [LinearIssuePriority.High]: Color.Orange,
-        <ActionPanel>
+  [LinearIssuePriority.Normal]: Color.Yellow,
-          <Action.OpenInBrowser url={notificationHtmlUrl} />
+  [LinearIssuePriority.Low]: Color.Blue,
-        </ActionPanel>
+};
-      }
+
-    />
+function userIcon(avatarUrl?: string): Image.ImageLike | undefined {
-  );
+  return avatarUrl ? { source: avatarUrl, mask: Image.Mask.Circle } : undefined;
+}
+
+export function LinearIssuePreview({ notification, linearIssue }: LinearIssuePreviewProps) {
+  let markdown = `# ${linearIssue.identifier} ${linearIssue.title}`;
+  if (linearIssue.creator) {
+    markdown += `\n\n_Opened by ${linearIssue.creator.name} · ${formatElapsedTime(linearIssue.created_at)}_`;
+  }
+  if (linearIssue.description) {
+    markdown += `\n\n${linearIssue.description}`;
+  }
+
+  const metadata = (
+    <>
+      <Detail.Metadata.TagList title="Status">
+        <Detail.Metadata.TagList.Item text={linearIssue.state.name} color={linearIssue.state.color} />
+      </Detail.Metadata.TagList>
+      <Detail.Metadata.TagList title="Priority">
+        <Detail.Metadata.TagList.Item
+          text={PRIORITY_LABEL[linearIssue.priority]}
+          color={PRIORITY_COLOR[linearIssue.priority]}
+        />
+      </Detail.Metadata.TagList>
+      {linearIssue.assignee ? (
+        <Detail.Metadata.Label
+          title="Assignee"
+          text={linearIssue.assignee.name}
+          icon={userIcon(linearIssue.assignee.avatar_url)}
+        />
+      ) : null}
+      {linearIssue.creator ? (
+        <Detail.Metadata.Label
+          title="Creator"
+          text={linearIssue.creator.name}
+          icon={userIcon(linearIssue.creator.avatar_url)}
+        />
+      ) : null}
+      {linearIssue.project ? (
+        <Detail.Metadata.Link title="Project" target={linearIssue.project.url} text={linearIssue.project.name} />
+      ) : null}
+      {linearIssue.project_milestone ? (
+        <Detail.Metadata.Label title="Milestone" text={linearIssue.project_milestone.name} />
+      ) : null}
+      <Detail.Metadata.Label title="Team" text={linearIssue.team.name} />
+      {linearIssue.due_date ? <Detail.Metadata.Label title="Due" text={formatDate(linearIssue.due_date)} /> : null}
+      {linearIssue.labels.length > 0 ? (
+        <Detail.Metadata.TagList title="Labels">
+          {linearIssue.labels.map((label) => (
+            <Detail.Metadata.TagList.Item key={label.name} text={label.name} color={label.color} />
+          ))}
+        </Detail.Metadata.TagList>
+      ) : null}
+    </>
+  );
+
+  return <PreviewDetail notification={notification} markdown={markdown} metadata={metadata} />;
 }

src/integrations/linear/preview/LinearProjectPreview.tsx

@@ -1,26 +1,60 @@
-import { getNotificationHtmlUrl, Notification } from "../../../notification";
+import { PreviewDetail } from "../../../preview/PreviewDetail";
-import { Detail, ActionPanel, Action } from "@raycast/api";
+import { LinearProject, LinearProjectState } from "../types";
-import { LinearProject } from "../types";
+import { Notification } from "../../../notification";
-import { useMemo } from "react";
+import { Color, Detail, Image } from "@raycast/api";
+import { formatDate } from "../../../utils";
 
 interface LinearProjectPreviewProps {
   notification: Notification;
   linearProject: LinearProject;
 }
 
-export function LinearProjectPreview({ notification, linearProject }: LinearProjectPreviewProps) {
+const STATE_COLOR: Record<LinearProjectState, Color> = {
-  const notificationHtmlUrl = useMemo(() => {
+  [LinearProjectState.Planned]: Color.Blue,
-    return getNotificationHtmlUrl(notification);
+  [LinearProjectState.Backlog]: Color.SecondaryText,
-  }, [notification]);
+  [LinearProjectState.Started]: Color.Yellow,
+  [LinearProjectState.Paused]: Color.Orange,
+  [LinearProjectState.Completed]: Color.Green,
+  [LinearProjectState.Canceled]: Color.Red,
+};
 
-  return (
+function progressBar(progress: number): string {
-    <Detail
+  const filled = Math.round(progress / 10);
-      markdown={`# ${linearProject.name}`}
+  return `${"▰".repeat(filled)}${"▱".repeat(10 - filled)} ${progress}%`;
-      actions={
+}
-        <ActionPanel>
+
-          <Action.OpenInBrowser url={notificationHtmlUrl} />
+export function LinearProjectPreview({ notification, linearProject }: LinearProjectPreviewProps) {
-        </ActionPanel>
+  let markdown = `# ${linearProject.name}`;
+  markdown += `\n\n${progressBar(linearProject.progress)}`;
+  if (linearProject.description) {
+    markdown += `\n\n${linearProject.description}`;
+  }
+
+  const metadata = (
+    <>
+      <Detail.Metadata.TagList title="State">
+        <Detail.Metadata.TagList.Item text={linearProject.state} color={STATE_COLOR[linearProject.state]} />
+      </Detail.Metadata.TagList>
+      <Detail.Metadata.Label title="Progress" text={`${linearProject.progress}%`} />
+      {linearProject.lead ? (
+        <Detail.Metadata.Label
+          title="Lead"
+          text={linearProject.lead.name}
+          icon={
+            linearProject.lead.avatar_url
+              ? { source: linearProject.lead.avatar_url, mask: Image.Mask.Circle }
+              : undefined
           }
         />
+      ) : null}
+      {linearProject.start_date ? (
+        <Detail.Metadata.Label title="Start" text={formatDate(linearProject.start_date)} />
+      ) : null}
+      {linearProject.target_date ? (
+        <Detail.Metadata.Label title="Target" text={formatDate(linearProject.target_date)} />
+      ) : null}
+    </>
   );
+
+  return <PreviewDetail notification={notification} markdown={markdown} metadata={metadata} />;
 }

src/integrations/slack/markdown.ts

@@ -0,0 +1,100 @@
+import { SlackBlock, SlackBlockText, SlackHistoryMessage, SlackMessageSenderDetails, SlackReferences } from "./types";
+
+function blockTextToString(text?: SlackBlockText): string {
+  if (!text) return "";
+  return text.type === "plain_text" ? text.value : text.text;
+}
+
+/** Resolve the display name of a message's sender from the thread's sender_profiles map. */
+export function slackSenderName(
+  message: SlackHistoryMessage,
+  senderProfiles: Record<string, SlackMessageSenderDetails>,
+): string {
+  const key = message.user ?? message.bot_id ?? "";
+  const profile = senderProfiles[key];
+  if (!profile) return "Unknown";
+  if (profile.type === "User") {
+    return (
+      profile.content.profile?.display_name || profile.content.real_name || profile.content.name || profile.content.id
+    );
+  }
+  return profile.content.name;
+}
+
+/** Replace Slack reference tokens (<@U…>, <#C…>, <url|label>, <!here>) with markdown. */
+function resolveReferences(text: string, references?: SlackReferences): string {
+  let out = text;
+  out = out.replace(/<@([A-Z0-9]+)(\|[^>]*)?>/g, (_match, id: string) => {
+    const name = references?.users?.[id];
+    return name ? `@${name}` : `@${id}`;
+  });
+  out = out.replace(/<#([A-Z0-9]+)(\|([^>]*))?>/g, (_match, id: string, _full: string, name: string) => {
+    const refName = name || references?.channels?.[id];
+    return refName ? `#${refName}` : `#${id}`;
+  });
+  out = out.replace(/<!subteam\^([A-Z0-9]+)(\|([^>]*))?>/g, (_match, id: string, _full: string, name: string) =>
+    name ? `@${name}` : `@${id}`,
+  );
+  out = out.replace(/<!(here|channel|everyone)>/g, (_match, keyword: string) => `@${keyword}`);
+  out = out.replace(/<(https?:[^|>]+)\|([^>]+)>/g, (_match, url: string, label: string) => `[${label}](${url})`);
+  out = out.replace(/<(https?:[^|>]+)>/g, (_match, url: string) => url);
+  return out;
+}
+
+/** Convert Slack mrkdwn emphasis to GitHub-flavoured markdown. */
+function slackMrkdwnToMarkdown(text: string): string {
+  let out = text;
+  // *bold* -> **bold** (Slack uses single asterisks)
+  out = out.replace(/(^|[\s(])\*(?!\s)([^*\n]+?)\*(?=[\s).,!?:]|$)/g, "$1**$2**");
+  // ~strike~ -> ~~strike~~
+  out = out.replace(/(^|[\s(])~(?!\s)([^~\n]+?)~(?=[\s).,!?:]|$)/g, "$1~~$2~~");
+  return out;
+}
+
+function blockToMarkdown(block: SlackBlock): string {
+  switch (block.type) {
+    case "section": {
+      const main = blockTextToString(block.text);
+      const fields = block.fields?.map(blockTextToString).filter(Boolean).join("\n") ?? "";
+      return [main, fields].filter(Boolean).join("\n");
+    }
+    case "header":
+      return `### ${blockTextToString(block.text)}`;
+    case "divider":
+      return "---";
+    case "image":
+      return `![${block.alt_text}](${block.image_url})`;
+    default:
+      return "";
+  }
+}
+
+/** Render a Slack message (text or blocks, files, reactions) as markdown. */
+export function slackMessageToMarkdown(message: SlackHistoryMessage, references?: SlackReferences): string {
+  const parts: string[] = [];
+
+  let body = message.text ?? "";
+  if (!body && message.blocks) {
+    body = message.blocks.map(blockToMarkdown).filter(Boolean).join("\n\n");
+  }
+  if (body) {
+    parts.push(slackMrkdwnToMarkdown(resolveReferences(body, references)));
+  }
+
+  if (message.files?.length) {
+    parts.push(
+      message.files
+        .map((file) => {
+          const name = file.title || file.name || "file";
+          return file.permalink ? `📎 [${name}](${file.permalink})` : `📎 ${name}`;
+        })
+        .join("\n"),
+    );
+  }
+
+  if (message.reactions?.length) {
+    parts.push(`_${message.reactions.map((reaction) => `:${reaction.name}: ${reaction.count}`).join("  ")}_`);
+  }
+
+  return parts.join("\n\n") || "_No message content_";
+}

src/integrations/slack/preview/SlackReactionPreview.tsx

@@ -1,26 +1,41 @@
-import { getNotificationHtmlUrl, Notification } from "../../../notification";
+import { PreviewDetail } from "../../../preview/PreviewDetail";
-import { Detail, ActionPanel, Action } from "@raycast/api";
+import { SlackReaction, SlackReactionState } from "../types";
-import { SlackReaction } from "../types";
+import { Notification } from "../../../notification";
-import { useMemo } from "react";
+import { slackMessageToMarkdown } from "../markdown";
+import { Color, Detail } from "@raycast/api";
+import { match } from "ts-pattern";
 
 interface SlackReactionPreviewProps {
   notification: Notification;
   slack_reaction: SlackReaction;
 }
 
-export function SlackReactionPreview({ notification }: SlackReactionPreviewProps) {
+function reactionContent(reaction: SlackReaction): { body: string; channel?: string } {
-  const notificationHtmlUrl = useMemo(() => {
+  return match(reaction.item)
-    return getNotificationHtmlUrl(notification);
+    .with({ type: "Message" }, (item) => ({
-  }, [notification]);
+      body: slackMessageToMarkdown(item.content.message),
-
+      channel: item.content.channel.name,
-  return (
+    }))
-    <Detail
+    .with({ type: "File" }, (item) => ({ body: "_Reacted file_", channel: item.content.channel.name }))
-      markdown={`# ${notification.title}`}
+    .exhaustive();
-      actions={
+}
-        <ActionPanel>
+
-          <Action.OpenInBrowser url={notificationHtmlUrl} />
+export function SlackReactionPreview({ notification, slack_reaction }: SlackReactionPreviewProps) {
-        </ActionPanel>
+  const { body, channel } = reactionContent(slack_reaction);
-      }
+  const markdown = `# ${notification.title}\n\n:${slack_reaction.name}:\n\n${body}`;
-    />
+
-  );
+  const metadata = (
+    <>
+      <Detail.Metadata.TagList title="State">
+        <Detail.Metadata.TagList.Item
+          text={slack_reaction.state === SlackReactionState.ReactionAdded ? "Added" : "Removed"}
+          color={slack_reaction.state === SlackReactionState.ReactionAdded ? Color.Green : Color.SecondaryText}
+        />
+      </Detail.Metadata.TagList>
+      <Detail.Metadata.Label title="Reaction" text={`:${slack_reaction.name}:`} />
+      {channel ? <Detail.Metadata.Label title="Channel" text={`#${channel}`} /> : null}
+    </>
+  );
+
+  return <PreviewDetail notification={notification} markdown={markdown} metadata={metadata} />;
 }

src/integrations/slack/preview/SlackStarPreview.tsx

@@ -1,26 +1,47 @@
-import { getNotificationHtmlUrl, Notification } from "../../../notification";
+import { PreviewDetail } from "../../../preview/PreviewDetail";
-import { Detail, ActionPanel, Action } from "@raycast/api";
+import { Notification } from "../../../notification";
-import { SlackStar } from "../types";
+import { slackMessageToMarkdown } from "../markdown";
-import { useMemo } from "react";
+import { SlackStar, SlackStarState } from "../types";
+import { Color, Detail } from "@raycast/api";
+import { match } from "ts-pattern";
 
 interface SlackStarPreviewProps {
   notification: Notification;
   slack_star: SlackStar;
 }
 
-export function SlackStarPreview({ notification }: SlackStarPreviewProps) {
+function starContent(star: SlackStar): { body: string; channel?: string } {
-  const notificationHtmlUrl = useMemo(() => {
+  return match(star.item)
-    return getNotificationHtmlUrl(notification);
+    .with({ type: "Message" }, (item) => ({
-  }, [notification]);
+      body: slackMessageToMarkdown(item.content.message),
-
+      channel: item.content.channel.name,
-  return (
+    }))
-    <Detail
+    .with({ type: "File" }, (item) => ({ body: "_Starred file_", channel: item.content.channel.name }))
-      markdown={`# ${notification.title}`}
+    .with({ type: "FileComment" }, (item) => ({ body: "_File comment_", channel: item.content.channel.name }))
-      actions={
+    .with({ type: "Channel" }, (item) => ({
-        <ActionPanel>
+      body: `_Channel_ #${item.content.channel.name ?? item.content.channel.id}`,
-          <Action.OpenInBrowser url={notificationHtmlUrl} />
+      channel: item.content.channel.name,
-        </ActionPanel>
+    }))
-      }
+    .with({ type: "Im" }, (item) => ({ body: "_Direct message_", channel: item.content.channel.name }))
-    />
+    .with({ type: "Group" }, (item) => ({ body: "_Group message_", channel: item.content.channel.name }))
-  );
+    .exhaustive();
+}
+
+export function SlackStarPreview({ notification, slack_star }: SlackStarPreviewProps) {
+  const { body, channel } = starContent(slack_star);
+  const markdown = `# ${notification.title}\n\n${body}`;
+
+  const metadata = (
+    <>
+      <Detail.Metadata.TagList title="State">
+        <Detail.Metadata.TagList.Item
+          text={slack_star.state === SlackStarState.StarAdded ? "Starred" : "Unstarred"}
+          color={slack_star.state === SlackStarState.StarAdded ? Color.Yellow : Color.SecondaryText}
+        />
+      </Detail.Metadata.TagList>
+      {channel ? <Detail.Metadata.Label title="Channel" text={`#${channel}`} /> : null}
+    </>
+  );
+
+  return <PreviewDetail notification={notification} markdown={markdown} metadata={metadata} />;
 }

src/integrations/slack/preview/SlackThreadPreview.tsx

@@ -1,26 +1,36 @@
-import { getNotificationHtmlUrl, Notification } from "../../../notification";
+import { slackMessageToMarkdown, slackSenderName } from "../markdown";
-import { Detail, ActionPanel, Action } from "@raycast/api";
+import { PreviewDetail } from "../../../preview/PreviewDetail";
+import { Notification } from "../../../notification";
+import { formatElapsedTime } from "../../../utils";
 import { SlackThread } from "../types";
-import { useMemo } from "react";
+import { Detail } from "@raycast/api";
 
 interface SlackThreadPreviewProps {
   notification: Notification;
   slack_thread: SlackThread;
 }
 
-export function SlackThreadPreview({ notification }: SlackThreadPreviewProps) {
+export function SlackThreadPreview({ notification, slack_thread }: SlackThreadPreviewProps) {
-  const notificationHtmlUrl = useMemo(() => {
+  const channelName = slack_thread.channel.name ?? slack_thread.channel.id;
-    return getNotificationHtmlUrl(notification);
-  }, [notification]);
 
-  return (
+  const body = slack_thread.messages
-    <Detail
+    .map((message) => {
-      markdown={`# ${notification.title}`}
+      const sender = slackSenderName(message, slack_thread.sender_profiles);
-      actions={
+      const when = message.ts ? ` · ${formatElapsedTime(new Date(parseFloat(message.ts) * 1000))}` : "";
-        <ActionPanel>
+      return `**${sender}**${when}\n\n${slackMessageToMarkdown(message, slack_thread.references)}`;
-          <Action.OpenInBrowser url={notificationHtmlUrl} />
+    })
-        </ActionPanel>
+    .join("\n\n---\n\n");
-      }
+
-    />
+  const markdown = `# ${notification.title}\n\n${body}`;
+
+  const metadata = (
+    <>
+      <Detail.Metadata.Link title="Channel" target={slack_thread.url} text={`#${channelName}`} />
+      {slack_thread.team.name ? <Detail.Metadata.Label title="Team" text={slack_thread.team.name} /> : null}
+      <Detail.Metadata.Label title="Messages" text={`${slack_thread.messages.length}`} />
+      <Detail.Metadata.Label title="Subscribed" text={slack_thread.subscribed ? "Yes" : "No"} />
+    </>
   );
+
+  return <PreviewDetail notification={notification} markdown={markdown} metadata={metadata} />;
 }

src/integrations/ticktick/listitem/TickTickNotificationListItem.tsx

@@ -0,0 +1,52 @@
+import { NotificationTaskActions } from "../../../action/NotificationTaskActions";
+import { TickTickTaskPreview } from "../preview/TickTickTaskPreview";
+import { NotificationListItemProps } from "../../../notification";
+import { Icon, List, Color } from "@raycast/api";
+import { TaskPriority } from "../../../task";
+import { match } from "ts-pattern";
+import dayjs from "dayjs";
+
+export function TickTickNotificationListItem({ notification, mutate }: NotificationListItemProps) {
+  const dueAt = notification.task?.due_at?.content;
+  const subtitle = dueAt ? dayjs(dueAt).format("YYYY-MM-DD") : undefined;
+
+  const color = match(notification)
+    .with({ task: { priority: TaskPriority.P1 } }, () => Color.Red)
+    .with({ task: { priority: TaskPriority.P2 } }, () => Color.Orange)
+    .with({ task: { priority: TaskPriority.P3 } }, () => Color.Yellow)
+    .otherwise(() => null);
+
+  const accessories: List.Item.Accessory[] = [
+    {
+      icon: { source: Icon.Circle, tintColor: color },
+    },
+    {
+      date: new Date(notification.updated_at),
+      tooltip: `Updated at ${notification.updated_at}`,
+    },
+  ];
+
+  const task = notification.task;
+  if (task) {
+    for (const tag of task.tags) {
+      accessories.unshift({ tag: { value: tag } });
+    }
+  }
+
+  return (
+    <List.Item
+      key={notification.id}
+      title={notification.title}
+      icon={Icon.CheckCircle}
+      subtitle={subtitle}
+      accessories={accessories}
+      actions={
+        <NotificationTaskActions
+          notification={notification}
+          detailsTarget={<TickTickTaskPreview notification={notification} />}
+          mutate={mutate}
+        />
+      }
+    />
+  );
+}

src/integrations/ticktick/preview/TickTickTaskPreview.tsx

@@ -0,0 +1,34 @@
+import { PreviewDetail } from "../../../preview/PreviewDetail";
+import { TaskMetadata } from "../../../preview/TaskMetadata";
+import { Notification } from "../../../notification";
+import { TickTickTaskStatus } from "../types";
+
+interface TickTickTaskPreviewProps {
+  notification: Notification;
+}
+
+export function TickTickTaskPreview({ notification }: TickTickTaskPreviewProps) {
+  const task = notification.task;
+  const item =
+    notification.source_item.data.type === "TickTickItem" ? notification.source_item.data.content : undefined;
+  const title = task?.title ?? notification.title;
+
+  let markdown = `# ${title}`;
+  if (task?.body) {
+    markdown += `\n\n${task.body}`;
+  }
+  if (item?.items?.length) {
+    const checklist = item.items
+      .map((entry) => `- [${entry.status === TickTickTaskStatus.Completed ? "x" : " "}] ${entry.title}`)
+      .join("\n");
+    markdown += `\n\n## Checklist\n\n${checklist}`;
+  }
+
+  return (
+    <PreviewDetail
+      notification={notification}
+      markdown={markdown}
+      metadata={task ? <TaskMetadata task={task} /> : undefined}
+    />
+  );
+}

src/integrations/ticktick/types.ts

@@ -0,0 +1,41 @@
+export enum TickTickItemPriority {
+  None = 0,
+  Low = 1,
+  Medium = 3,
+  High = 5,
+}
+
+export enum TickTickTaskStatus {
+  Normal = 0,
+  Completed = 2,
+}
+
+export interface TickTickTag {
+  name: string;
+  color?: string;
+}
+
+export interface TickTickChecklistItem {
+  id: string;
+  title: string;
+  status: TickTickTaskStatus;
+  sortOrder?: number;
+}
+
+export interface TickTickItem {
+  id: string;
+  projectId: string;
+  title: string;
+  content?: string;
+  allDay?: boolean;
+  startDate?: string;
+  dueDate?: string;
+  priority: TickTickItemPriority;
+  status: TickTickTaskStatus;
+  tags?: TickTickTag[];
+  items?: TickTickChecklistItem[];
+}
+
+export function getTickTickItemHtmlUrl(item: TickTickItem): string {
+  return `https://ticktick.com/webapp/#p/${item.projectId}/tasks/${item.id}`;
+}

src/integrations/todoist/preview/TodoistTaskPreview.tsx

@@ -1,24 +1,25 @@
-import { getNotificationHtmlUrl, Notification } from "../../../notification";
+import { PreviewDetail } from "../../../preview/PreviewDetail";
-import { Detail, ActionPanel, Action } from "@raycast/api";
+import { TaskMetadata } from "../../../preview/TaskMetadata";
-import { useMemo } from "react";
+import { Notification } from "../../../notification";
 
 interface TodoistTaskPreviewProps {
   notification: Notification;
 }
 
 export function TodoistTaskPreview({ notification }: TodoistTaskPreviewProps) {
-  const notificationHtmlUrl = useMemo(() => {
+  const task = notification.task;
-    return getNotificationHtmlUrl(notification);
+  const title = task?.title ?? notification.title;
-  }, [notification]);
+
+  let markdown = `# ${title}`;
+  if (task?.body) {
+    markdown += `\n\n${task.body}`;
+  }
 
   return (
-    <Detail
+    <PreviewDetail
-      markdown={`# ${notification.title}`}
+      notification={notification}
-      actions={
+      markdown={markdown}
-        <ActionPanel>
+      metadata={task ? <TaskMetadata task={task} /> : undefined}
-          <Action.OpenInBrowser url={notificationHtmlUrl} />
-        </ActionPanel>
-      }
     />
   );
 }

src/notification.ts

@@ -20,9 +20,13 @@ export interface Notification {
 export enum NotificationSourceKind {
   Github = "Github",
   Todoist = "Todoist",
+  TickTick = "TickTick",
   Linear = "Linear",
   GoogleMail = "GoogleMail",
+  GoogleCalendar = "GoogleCalendar",
+  GoogleDrive = "GoogleDrive",
   Slack = "Slack",
+  API = "API",
 }
 
 export enum NotificationStatus {
@@ -42,5 +46,5 @@ export function getNotificationHtmlUrl(notification: Notification): string {
 }
 
 export function isNotificationBuiltFromTask(notification: Notification) {
-  return notification.kind === NotificationSourceKind.Todoist;
+  return notification.kind === NotificationSourceKind.Todoist || notification.kind === NotificationSourceKind.TickTick;
 }

src/preview/PreviewDetail.tsx

@@ -0,0 +1,38 @@
+import { getNotificationHtmlUrl, Notification } from "../notification";
+import { getThirdPartyItemSourceLabel } from "../third_party_item";
+import { Detail, ActionPanel, Action } from "@raycast/api";
+import { ReactNode, useMemo } from "react";
+
+interface PreviewDetailProps {
+  notification: Notification;
+  markdown: string;
+  /** Inner `Detail.Metadata.*` items — rendered below the notification Type row. */
+  metadata?: ReactNode;
+}
+
+/**
+ * Shared wrapper for every notification preview: renders a `Detail` with the
+ * standard "Open in Browser" action, and a metadata sidebar whose first row is
+ * always the notification type, followed by the preview-specific `metadata`.
+ */
+export function PreviewDetail({ notification, markdown, metadata }: PreviewDetailProps) {
+  const notificationHtmlUrl = useMemo(() => getNotificationHtmlUrl(notification), [notification]);
+
+  return (
+    <Detail
+      markdown={markdown}
+      metadata={
+        <Detail.Metadata>
+          <Detail.Metadata.Label title="Type" text={getThirdPartyItemSourceLabel(notification.source_item)} />
+          {metadata ? <Detail.Metadata.Separator /> : null}
+          {metadata}
+        </Detail.Metadata>
+      }
+      actions={
+        <ActionPanel>
+          <Action.OpenInBrowser url={notificationHtmlUrl} />
+        </ActionPanel>
+      }
+    />
+  );
+}

src/preview/TaskMetadata.tsx

@@ -0,0 +1,38 @@
+import { Task, TaskPriority, TaskStatus } from "../task";
+import { Color, Detail } from "@raycast/api";
+import { formatDate } from "../utils";
+
+const PRIORITY_COLOR: Record<TaskPriority, Color> = {
+  [TaskPriority.P1]: Color.Red,
+  [TaskPriority.P2]: Color.Orange,
+  [TaskPriority.P3]: Color.Yellow,
+  [TaskPriority.P4]: Color.SecondaryText,
+};
+
+/** Metadata sidebar shared by the Todoist and TickTick task previews. */
+export function TaskMetadata({ task }: { task: Task }) {
+  const due = task.due_at?.content ? formatDate(task.due_at.content) : undefined;
+
+  return (
+    <>
+      <Detail.Metadata.TagList title="Status">
+        <Detail.Metadata.TagList.Item
+          text={task.status}
+          color={task.status === TaskStatus.Done ? Color.Green : Color.Blue}
+        />
+      </Detail.Metadata.TagList>
+      <Detail.Metadata.TagList title="Priority">
+        <Detail.Metadata.TagList.Item text={`P${task.priority}`} color={PRIORITY_COLOR[task.priority]} />
+      </Detail.Metadata.TagList>
+      {due ? <Detail.Metadata.Label title="Due" text={due} /> : null}
+      {task.project ? <Detail.Metadata.Label title="Project" text={task.project} /> : null}
+      {task.tags.length > 0 ? (
+        <Detail.Metadata.TagList title="Tags">
+          {task.tags.map((tag) => (
+            <Detail.Metadata.TagList.Item key={tag} text={tag} />
+          ))}
+        </Detail.Metadata.TagList>
+      ) : null}
+    </>
+  );
+}

src/third_party_item.ts

@@ -12,7 +12,11 @@ import {
   LinearIssue,
   LinearNotification,
 } from "./integrations/linear/types";
+import { getGoogleCalendarEventHtmlUrl, GoogleCalendarEvent } from "./integrations/google-calendar/types";
+import { getGoogleDriveCommentHtmlUrl, GoogleDriveComment } from "./integrations/google-drive/types";
 import { getGithubNotificationHtmlUrl, GithubNotification } from "./integrations/github/types";
+import { getTickTickItemHtmlUrl, TickTickItem } from "./integrations/ticktick/types";
+import { getWebPageHtmlUrl, WebPage } from "./integrations/api/types";
 import { GoogleMailThread } from "./integrations/google-mail/types";
 import { TodoistItem } from "./integrations/todoist/types";
 
@@ -28,13 +32,55 @@ export interface ThirdPartyItem {
 
 export type ThirdPartyItemData =
   | { type: "TodoistItem"; content: TodoistItem }
+  | { type: "TickTickItem"; content: TickTickItem }
   | { type: "SlackStar"; content: SlackStar }
   | { type: "SlackReaction"; content: SlackReaction }
   | { type: "SlackThread"; content: SlackThread }
   | { type: "LinearIssue"; content: LinearIssue }
   | { type: "LinearNotification"; content: LinearNotification }
   | { type: "GithubNotification"; content: GithubNotification }
-  | { type: "GoogleMailThread"; content: GoogleMailThread };
+  | { type: "GoogleMailThread"; content: GoogleMailThread }
+  | { type: "GoogleCalendarEvent"; content: GoogleCalendarEvent }
+  | { type: "GoogleDriveComment"; content: GoogleDriveComment }
+  | { type: "WebPage"; content: WebPage };
+
+/** Human-readable label for the notification's source item type (e.g. "Linear Issue", "GitHub Pull Request"). */
+export function getThirdPartyItemSourceLabel(thirdPartyItem: ThirdPartyItem): string {
+  switch (thirdPartyItem.data.type) {
+    case "TodoistItem":
+      return "Todoist Task";
+    case "TickTickItem":
+      return "TickTick Task";
+    case "SlackStar":
+      return "Slack Star";
+    case "SlackReaction":
+      return "Slack Reaction";
+    case "SlackThread":
+      return "Slack Thread";
+    case "LinearIssue":
+      return "Linear Issue";
+    case "LinearNotification":
+      return thirdPartyItem.data.content.type === "ProjectNotification" ? "Linear Project" : "Linear Issue";
+    case "GithubNotification": {
+      switch (thirdPartyItem.data.content.item?.type) {
+        case "GithubPullRequest":
+          return "GitHub Pull Request";
+        case "GithubDiscussion":
+          return "GitHub Discussion";
+        default:
+          return "GitHub";
+      }
+    }
+    case "GoogleMailThread":
+      return "Google Mail";
+    case "GoogleCalendarEvent":
+      return "Google Calendar Event";
+    case "GoogleDriveComment":
+      return "Google Drive Comment";
+    case "WebPage":
+      return "Web Page";
+  }
+}
 
 export function getThirdPartyItemHtmlUrl(thirdPartyItem: ThirdPartyItem): string {
   switch (thirdPartyItem.data.type) {
@@ -54,5 +100,13 @@ export function getThirdPartyItemHtmlUrl(thirdPartyItem: ThirdPartyItem): string
       return getGithubNotificationHtmlUrl(thirdPartyItem.data.content);
     case "GoogleMailThread":
       return `https://mail.google.com/mail/u/0/#inbox/${thirdPartyItem.data.content.id}`;
+    case "TickTickItem":
+      return getTickTickItemHtmlUrl(thirdPartyItem.data.content);
+    case "GoogleCalendarEvent":
+      return getGoogleCalendarEventHtmlUrl(thirdPartyItem.data.content);
+    case "GoogleDriveComment":
+      return getGoogleDriveCommentHtmlUrl(thirdPartyItem.data.content);
+    case "WebPage":
+      return getWebPageHtmlUrl(thirdPartyItem.data.content);
   }
 }

src/utils.ts

@@ -0,0 +1,38 @@
+import relativeTime from "dayjs/plugin/relativeTime";
+import dayjs from "dayjs";
+
+dayjs.extend(relativeTime);
+
+export function formatElapsedTime(date: Date | string): string {
+  return dayjs(date).fromNow();
+}
+
+export function formatDate(date: Date | string): string {
+  return dayjs(date).format("YYYY-MM-DD");
+}
+
+export function formatDateTime(date: Date | string): string {
+  return dayjs(date).format("YYYY-MM-DD HH:mm");
+}
+
+/**
+ * Convert an HTML-flavoured body (as GitHub sometimes returns) into readable
+ * markdown: strips comments and tags, turns block elements into line breaks,
+ * and decodes common entities. Preserves markdown autolinks like <https://…>.
+ */
+export function cleanHtml(text: string): string {
+  return text
+    .replace(/<!--[\s\S]*?-->/g, "")
+    .replace(/<br\s*\/?>/gi, "\n")
+    .replace(/<\/(?:p|div|li|h[1-6]|tr|ul|ol|blockquote)>/gi, "\n\n")
+    .replace(/<li[^>]*>/gi, "- ")
+    .replace(/<\/?[a-zA-Z][a-zA-Z0-9-]*(?:\s[^>]*)?>/g, "")
+    .replace(/&nbsp;/g, " ")
+    .replace(/&amp;/g, "&")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+}