# GithubActivity

> A repository activity card with a merged timeline plus commits, pull requests, workflow runs and deployments, each with status, author and a link to GitHub, filterable, with refresh, deploy and re-run callbacks.

Source: https://docs.nasaqui.com/components/github-activity

## Install

```bash
npx shadcn@latest add https://docs.nasaqui.com/r/github-activity.json
```

What is happening in a repository, in one card: a merged timeline of everything, and a tab each for commits,
pull requests, workflow runs and deployments. Every row has its status, the author and a link to GitHub.
It has no backend and does not call GitHub: you fetch the feeds (a GitHub App, or the Mahaam GitHub tools)
and pass them in. It uses the official GitHub mark, reused from `GitHubLogo` in `oauth-buttons`.

## When to use

- A project or deploy page that shows the health of the repository next to the product.
- A dashboard that needs commits, PRs, CI and deploys together, newest first.

## When not to use

- Reading the full log of one run: use `LogViewer` or `DeployView`.
- Code review (diffs, comments): this only lists.

## Import

```tsx
import { GithubActivity } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```

## Quick start

```tsx
import { GithubActivity, type GithubCommit, type GithubRun } from "@fadymondy/nasaq/web";

declare const commits: GithubCommit[];
declare const runs: GithubRun[];

export function Repo() {
  return (
    <GithubActivity
      repo={{ owner: "acme", name: "storefront", href: "https://github.com/acme/storefront" }}
      commits={commits}
      runs={runs}
      onRerun={async (id) => {
        await fetch(`/api/runs/${id}/rerun`, { method: "POST" });
      }}
    />
  );
}
```

## Anatomy

```
GithubActivity                  data-slot="github-activity" (Card)
├─ header                       GitHubLogo, owner/name link, Refresh and Deploy buttons
├─ filter Input                 searches the message, author, branch, number
└─ Tabs (underline)             only for the feeds you pass
   ├─ Activity                  merged Timeline, newest first
   ├─ Commits                   short SHA, title, author, branch, checks
   ├─ Pull requests             state badge, labels, head to base, comments
   ├─ Workflow runs             Status, branch, event, duration, Re-run
   └─ Deployments               environment, ref, status, URL
```

## API

**GithubActivity**: every `div` prop except `children`, plus:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `repo` | `GithubRepo` | required | `{ owner, name, href? }`. |
| `commits` | `readonly GithubCommit[]` | none | `{ id, message, author, date, href?, branch?, checks? }`. |
| `pulls` | `readonly GithubPull[]` | none | `{ id, number, title, author, state, createdAt, mergedAt?, labels?, checks?, comments?, head?, base?, href? }`. State is `open`, `draft`, `merged` or `closed`. |
| `runs` | `readonly GithubRun[]` | none | `{ id, name, status, startedAt, durationMs?, branch?, sha?, event?, actor?, href? }`. |
| `deployments` | `readonly GithubDeployment[]` | none | `{ id, environment, status, ref, createdAt, sha?, creator?, url?, href? }`. |
| `defaultTab` | `"activity" \| "commits" \| "pulls" \| "runs" \| "deployments"` | activity | The tab shown first. |
| `loading` | `boolean` | `false` | Skeleton rows. |
| `onRefresh` | `() => Promise<void \| { error? }>` | | Shows Refresh. |
| `onDeploy` | `() => Promise<void \| { error? }>` | | Shows Deploy. |
| `onRerun` | `(runId) => Promise<void \| { error? }>` | | Shows Re-run on finished runs. |
| `hideSearch` | `boolean` | `false` | Hide the filter box. |
| `labels` | `Partial<GithubActivityLabels>` | | Override any string. |

**Helpers** (pure, tested): `shortSha`, `commitTitle`, `commitBody`, `runTone`, `pullTone`, `deploymentTone`, `isActive`,
`matches`, `mergeActivity`, `countBy`.

## Examples

**Only pull requests**

```tsx
import { GithubActivity, type GithubPull } from "@fadymondy/nasaq/web";

declare const pulls: GithubPull[];

export const Pulls = () => <GithubActivity repo={{ owner: "acme", name: "storefront" }} pulls={pulls} hideSearch />;
```

## Accessibility

- Tabs follow the WAI-ARIA tabs pattern (arrow keys, and they mirror in RTL).
- Status is an icon plus a word, never colour alone. Links say where they go, and external ones open in a new tab with `rel="noopener noreferrer"`.
- Refresh, Deploy and Re-run show a busy state and errors appear in an `Alert` with `role="alert"`.

## RTL & i18n

- English and Arabic strings follow the Nasaq locale. SHAs, branch names, refs, URLs and PR numbers are `dir="ltr"`.
- The GitHub mark never mirrors. Direction icons flip.

## Styling & tokens

- Built on `Card`, `Tabs`, `Timeline`, `Status`, `Badge`, `Avatar`, `DateTime` and `--nq-*` tokens.
- Target `[data-slot="github-activity"]`.

## Do / Don't

- Do keep the token and API calls on your server. Pass only public data in.
- Do pass the feeds you have; a tab appears only for a feed that is given.
- Don't use another GitHub logo. Reuse the official mark from `oauth-buttons`.
- Don't put more than a few dozen items per feed. Page on the server and refresh.

## Related

- [`DeployView`](https://docs.nasaqui.com/components/deploy-view)
- [`LogViewer`](https://docs.nasaqui.com/components/log-viewer)
- [`Timeline`](https://docs.nasaqui.com/components/timeline)

## Lab

https://docs.nasaqui.com/?path=/docs/components-developer-tools-github-activity--docs

## Code

### React

```tsx
import { GithubActivity, type GithubCommit, type GithubRun } from "@fadymondy/nasaq/web";

declare const commits: GithubCommit[];
declare const runs: GithubRun[];

export function Repo() {
  return (
    <GithubActivity
      repo={{ owner: "acme", name: "storefront", href: "https://github.com/acme/storefront" }}
      commits={commits}
      runs={runs}
      onRerun={async (id) => {
        await fetch(`/api/runs/${id}/rerun`, { method: "POST" });
      }}
    />
  );
}
```

### shadcn

```tsx
import { GithubActivity, type GithubCommit, type GithubRun } from "@/components/ui/github-activity";

declare const commits: GithubCommit[];
declare const runs: GithubRun[];

export function Repo() {
  return (
    <GithubActivity
      repo={{ owner: "acme", name: "storefront", href: "https://github.com/acme/storefront" }}
      commits={commits}
      runs={runs}
      onRerun={async (id) => {
        await fetch(`/api/runs/${id}/rerun`, { method: "POST" });
      }}
    />
  );
}
```

### Vue

```vue
<script setup lang="ts">
import { NqGithubActivity, type GithubCommit, type GithubRun } from "@fadymondy/nasaq/vue";

const commits: GithubCommit[] = [
  {
    id: "4f2a91c0e7b3d58a1c6f9e20b4d7a3c815e6f902",
    message: "fix(auth): keep the redirect after sign-in\n\nThe return path was dropped when the session refreshed.",
    author: { login: "sara-alharbi" },
    date: "2026-09-29T07:40:00Z",
    branch: "main",
    checks: "success",
    href: "https://github.com/acme/storefront/commit/4f2a91c",
  },
  {
    id: "9c1d77e2a40b6f3158d2c9e7a1b04f6d3e85a7c1",
    message: "feat(cart): add a gift note field",
    author: { login: "khaled-n" },
    date: "2026-09-28T16:05:00Z",
    branch: "feat/gift-note",
    checks: "pending",
  },
];

const runs: GithubRun[] = [
  {
    id: "run-412",
    name: "CI",
    number: 412,
    status: "failure",
    branch: "main",
    sha: "4f2a91c0e7b3d58a1c6f9e20b4d7a3c815e6f902",
    event: "push",
    actor: { login: "sara-alharbi" },
    startedAt: "2026-09-29T07:41:00Z",
    durationMs: 184000,
    href: "https://github.com/acme/storefront/actions/runs/412",
  },
  { id: "run-411", name: "CI", number: 411, status: "success", branch: "main", event: "push", startedAt: "2026-09-28T16:06:00Z", durationMs: 171000 },
];

const rerun = async (id: string) => {
  await fetch(`/api/runs/${id}/rerun`, { method: "POST" });
};
</script>

<template>
  <NqGithubActivity :repo="{ owner: 'acme', name: 'storefront', href: 'https://github.com/acme/storefront' }" :commits="commits" :runs="runs" :on-rerun="rerun" />
</template>
```

### Blade

```blade
@php
    $commits = [
        ['id' => '4f2a91c0e7b3d58a1c6f9e20b4d7a3c815e6f902', 'message' => "fix(auth): keep the redirect after sign-in\n\nThe return path was dropped when the session refreshed.", 'author' => ['login' => 'sara-alharbi'], 'date' => '2026-09-29T07:40:00Z', 'branch' => 'main', 'checks' => 'success', 'href' => 'https://github.com/acme/storefront/commit/4f2a91c'],
        ['id' => '9c1d77e2a40b6f3158d2c9e7a1b04f6d3e85a7c1', 'message' => 'feat(cart): add a gift note field', 'author' => ['login' => 'khaled-n'], 'date' => '2026-09-28T16:05:00Z', 'branch' => 'feat/gift-note', 'checks' => 'pending'],
    ];
    $runs = [
        ['id' => 'run-412', 'name' => 'CI', 'number' => 412, 'status' => 'failure', 'branch' => 'main', 'sha' => '4f2a91c0e7b3d58a1c6f9e20b4d7a3c815e6f902', 'event' => 'push', 'actor' => ['login' => 'sara-alharbi'], 'startedAt' => '2026-09-29T07:41:00Z', 'durationMs' => 184000, 'href' => 'https://github.com/acme/storefront/actions/runs/412'],
        ['id' => 'run-411', 'name' => 'CI', 'number' => 411, 'status' => 'success', 'branch' => 'main', 'event' => 'push', 'startedAt' => '2026-09-28T16:06:00Z', 'durationMs' => 171000],
    ];
@endphp
<x-nq::github-activity :repo="['owner' => 'acme', 'name' => 'storefront', 'href' => 'https://github.com/acme/storefront']" :commits="$commits" :runs="$runs" can-rerun
    x-on:rerun="$event.detail.wait(Promise.resolve())" />
```

### HTML + Alpine

```html
<div data-slot="github-activity" x-data="nqGithubActivity(JSON.parse('{\u0022search\u0022:{\u0022commits\u0022:[\u0022fix(auth): keep the redirect after sign-in\\n\\nthe return path was dropped when the session refreshed.\\nsara-alharbi\\n4f2a91c0e7b3d58a1c6f9e20b4d7a3c815e6f902\\nmain\u0022,\u0022feat(cart): add a gift note field\\nkhaled-n\\n9c1d77e2a40b6f3158d2c9e7a1b04f6d3e85a7c1\\nfeat\\\/gift-note\u0022],\u0022pulls\u0022:[],\u0022runs\u0022:[\u0022ci\\nmain\\nsara-alharbi\\npush\\n4f2a91c0e7b3d58a1c6f9e20b4d7a3c815e6f902\u0022,\u0022ci\\nmain\\npush\u0022],\u0022deployments\u0022:[],\u0022activity\u0022:[\u0022ci\\nmain\\nsara-alharbi\\npush\\n4f2a91c0e7b3d58a1c6f9e20b4d7a3c815e6f902\u0022,\u0022fix(auth): keep the redirect after sign-in\\n\\nthe return path was dropped when the session refreshed.\\nsara-alharbi\\n4f2a91c0e7b3d58a1c6f9e20b4d7a3c815e6f902\\nmain\u0022,\u0022ci\\nmain\\npush\u0022,\u0022feat(cart): add a gift note field\\nkhaled-n\\n9c1d77e2a40b6f3158d2c9e7a1b04f6d3e85a7c1\\nfeat\\\/gift-note\u0022]},\u0022runIds\u0022:[\u0022run-412\u0022,\u0022run-411\u0022],\u0022genericError\u0022:\u0022Something went wrong. Try again.\u0022}'))"
    x-on:rerun="$event.detail.wait(Promise.resolve())" class="flex flex-col gap-4 rounded-card border border-border bg-card py-4 text-card-foreground w-full max-w-5xl">
    <div data-slot="card-header" class="grid auto-rows-min items-start gap-1 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] sm:flex sm:items-start sm:justify-between sm:gap-4"><div class="flex min-w-0 items-start gap-3">
            <span data-slot="github-mark" class="mt-0.5 shrink-0"><svg viewBox="0 0 98 96" width="20" height="20" aria-hidden="true" focusable="false" class="size-7">
    <path d="M41.4395 69.3848C28.8066 67.8535 19.9062 58.7617 19.9062 46.9902C19.9062 42.2051 21.6289 37.0371 24.5 33.5918C23.2559 30.4336 23.4473 23.7344 24.8828 20.959C28.7109 20.4805 33.8789 22.4902 36.9414 25.2656C40.5781 24.1172 44.4062 23.543 49.0957 23.543C53.7852 23.543 57.6133 24.1172 61.0586 25.1699C64.0254 22.4902 69.2891 20.4805 73.1172 20.959C74.457 23.543 74.6484 30.2422 73.4043 33.4961C76.4668 37.1328 78.0937 42.0137 78.0937 46.9902C78.0937 58.7617 69.1934 67.6621 56.3691 69.2891C59.623 71.3945 61.8242 75.9883 61.8242 81.252L61.8242 91.2051C61.8242 94.0762 64.2168 95.7031 67.0879 94.5547C84.4102 87.9512 98 70.6289 98 49.1914C98 22.1074 75.9883 6.69539e-07 48.9043 4.309e-07C21.8203 1.92261e-07 -1.9479e-07 22.1074 -4.3343e-07 49.1914C-6.20631e-07 70.4375 13.4941 88.0469 31.6777 94.6504C34.2617 95.6074 36.75 93.8848 36.75 91.3008L36.75 83.6445C35.4102 84.2188 33.6875 84.6016 32.1562 84.6016C25.8398 84.6016 22.1074 81.1563 19.4277 74.7441C18.375 72.1602 17.2266 70.6289 15.0254 70.3418C13.877 70.2461 13.4941 69.7676 13.4941 69.1934C13.4941 68.0449 15.4082 67.1836 17.3223 67.1836C20.0977 67.1836 22.4902 68.9063 24.9785 72.4473C26.8926 75.2227 28.9023 76.4668 31.2949 76.4668C33.6875 76.4668 35.2187 75.6055 37.4199 73.4043C39.0469 71.7773 40.291 70.3418 41.4395 69.3848Z"  class="fill-black dark:fill-white"  />
</svg>
</span>
            <div class="flex min-w-0 flex-col gap-1.5">
                <h2 data-slot="card-title" class="text-label text-foreground">GitHub activity</h2>
                <div data-slot="card-description" class="text-body-sm text-muted-foreground">Commits, pull requests, workflow runs and deployments for this repository.</div>
                <a href="https://github.com/acme/storefront" target="_blank" rel="noopener noreferrer"
        aria-label="Open on GitHub: acme/storefront" class="rounded-sm outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus w-fit text-label text-foreground"><bdi dir="ltr" class="font-mono text-code">acme/storefront</bdi></a>
            </div>
        </div>
        <div class="mt-3 flex shrink-0 flex-wrap gap-2 sm:mt-0">
                                </div></div>
    <div data-slot="card-content" class="px-4 flex flex-col gap-4"><template x-if="error">
            <div data-slot="alert" data-tone="danger" role="alert"
        class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-danger/30 bg-nq-danger-soft">
    <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>    <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
                            <div data-slot="alert-description" class="text-body-sm text-foreground"><span x-text="error"></span></div>
            </div>
            <div data-slot="alert-actions" class="ms-3 flex items-center gap-1">
            <button data-slot="button"
     type="button"                         aria-label="Dismiss" x-on:click="error = null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-nq-hover size-control-sm p-0 text-muted-foreground [&_svg]:size-3.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
        </template>
                    <div data-slot="tabs" data-orientation="horizontal" x-data="nqTabs('activity')" x-modelable="value" x-id="['nq-tabs']" class="flex flex-col gap-4">
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <div data-slot="tabs-list" data-variant="underline" aria-orientation="horizontal" x-bind="list"
    class="relative z-0 flex max-w-full overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden gap-4 border-b border-border">
    <button type="button" data-slot="tabs-tab" x-bind="tab('activity')"
     data-active aria-selected="true"         class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 h-9 px-0.5">Activity</button>
                                                    <button type="button" data-slot="tabs-tab" x-bind="tab('commits')"
            class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 h-9 px-0.5">Commits <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border bg-secondary text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">2</bdi></span></button>
                                                    <button type="button" data-slot="tabs-tab" x-bind="tab('runs')"
            class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 h-9 px-0.5">Workflow runs <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border bg-secondary text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">2</bdi></span></button>
</div>
                                            <div class="relative w-full sm:w-64">
                            <svg aria-hidden="true" class="pointer-events-none absolute inset-y-0 start-2.5 my-auto size-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>                            <input data-slot="input" type="search"
                    x-model="query" placeholder="Filter by title, author or branch" aria-label="Filter by title, author or branch" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control ps-8">
                        </div>
                                    </div>
                                    <div data-slot="tabs-panel" x-bind="panel('activity')"
        class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus"><div x-show="none('activity')" style="display: none"><div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border border-dashed border-border px-6 py-12 text-center rounded-card">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No matches</p>
                    <p class="text-body-sm text-muted-foreground">Nothing matches that filter. Clear it to see everything.</p>
            </div>
    </div>
</div>
                            <div x-show="any('activity')">
                                <ol data-slot="timeline" aria-label="Activity" class="m-0 flex list-none flex-col p-0"><li data-slot="timeline-item" x-show="showActivity(0)" class="group/timeline grid grid-cols-[2rem_1fr] gap-x-3">
    <div class="flex flex-col items-center">
        <span data-slot="timeline-marker" class="flex size-8 shrink-0 items-center justify-center">
                            <span class="flex size-8 items-center justify-center rounded-full border border-border bg-secondary text-muted-foreground [&_svg]:size-4"><svg aria-hidden="true" class="text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg></span>
                    </span>
        <span aria-hidden="true" data-slot="timeline-rail" class="my-1 w-px flex-1 bg-border group-last/timeline:hidden"></span>
    </div>
    <div data-slot="timeline-content" class="flex min-w-0 flex-col gap-1 pb-6 pt-1 group-last/timeline:pb-0">
        <div class="flex items-baseline justify-between gap-3">
            <p class="min-w-0 text-body-sm font-medium text-foreground"><a href="https://github.com/acme/storefront/actions/runs/412" target="_blank" rel="noopener noreferrer"
        dir="auto" class="rounded-sm outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">CI</a></p>
                            <time data-slot="date-time" datetime="2026-09-29T07:41:00+00:00" dir="auto"  title="Sep 29, 2026"     class="tabular-nums [unicode-bidi:isolate] shrink-0 text-caption text-muted-foreground">1 hour ago</time>
                    </div>
                            <div class="flex flex-wrap items-center gap-2"><span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border text-muted-foreground">Workflow run</span>
                                                <span data-slot="status" data-tone="danger" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
            <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>        <span class="truncate"  title="Failed" >Failed</span>
</span>
                                                <span dir="ltr" class="inline-flex max-w-48 items-center gap-1 truncate font-mono text-code text-muted-foreground"><svg aria-hidden="true" class="size-3 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15 6a9 9 0 0 0-9 9V3"/>
  <circle cx="18" cy="6" r="3"/>
  <circle cx="6" cy="18" r="3"/>
</svg><bdi class="truncate">main</bdi></span></div>
            </div>
</li>
                                                                                                                                                                                                        <li data-slot="timeline-item" x-show="showActivity(1)" class="group/timeline grid grid-cols-[2rem_1fr] gap-x-3">
    <div class="flex flex-col items-center">
        <span data-slot="timeline-marker" class="flex size-8 shrink-0 items-center justify-center">
                            <span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-8 text-caption rounded-full">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="sara-alharbi" >S</span>
    </span>
                    </span>
        <span aria-hidden="true" data-slot="timeline-rail" class="my-1 w-px flex-1 bg-border group-last/timeline:hidden"></span>
    </div>
    <div data-slot="timeline-content" class="flex min-w-0 flex-col gap-1 pb-6 pt-1 group-last/timeline:pb-0">
        <div class="flex items-baseline justify-between gap-3">
            <p class="min-w-0 text-body-sm font-medium text-foreground"><a href="https://github.com/acme/storefront/commit/4f2a91c" target="_blank" rel="noopener noreferrer"
        dir="auto" class="rounded-sm outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">fix(auth): keep the redirect after sign-in</a></p>
                            <time data-slot="date-time" datetime="2026-09-29T07:40:00+00:00" dir="auto"  title="Sep 29, 2026"     class="tabular-nums [unicode-bidi:isolate] shrink-0 text-caption text-muted-foreground">1 hour ago</time>
                    </div>
                    <p class="text-body-sm text-muted-foreground"><bdi>sara-alharbi committed</bdi></p>
                            <div class="flex flex-wrap items-center gap-2"><span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border text-muted-foreground">Commit</span>
                                                <a href="https://github.com/acme/storefront/commit/4f2a91c" target="_blank" rel="noopener noreferrer"
        class="rounded-sm outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus"><code dir="ltr" class="rounded-sm bg-secondary px-1 py-0.5 font-mono text-code text-muted-foreground">4f2a91c</code></a></div>
            </div>
</li>
                                                                                                                                                                                                        <li data-slot="timeline-item" x-show="showActivity(2)" class="group/timeline grid grid-cols-[2rem_1fr] gap-x-3">
    <div class="flex flex-col items-center">
        <span data-slot="timeline-marker" class="flex size-8 shrink-0 items-center justify-center">
                            <span class="flex size-8 items-center justify-center rounded-full border border-border bg-secondary text-muted-foreground [&_svg]:size-4"><svg aria-hidden="true" class="text-nq-success-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m9 12 2 2 4-4"/>
</svg></span>
                    </span>
        <span aria-hidden="true" data-slot="timeline-rail" class="my-1 w-px flex-1 bg-border group-last/timeline:hidden"></span>
    </div>
    <div data-slot="timeline-content" class="flex min-w-0 flex-col gap-1 pb-6 pt-1 group-last/timeline:pb-0">
        <div class="flex items-baseline justify-between gap-3">
            <p class="min-w-0 text-body-sm font-medium text-foreground"><span class="">CI</span></p>
                            <time data-slot="date-time" datetime="2026-09-28T16:06:00+00:00" dir="auto"  title="Sep 28, 2026"     class="tabular-nums [unicode-bidi:isolate] shrink-0 text-caption text-muted-foreground">16 hours ago</time>
                    </div>
                            <div class="flex flex-wrap items-center gap-2"><span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border text-muted-foreground">Workflow run</span>
                                                <span data-slot="status" data-tone="success" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
            <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-success-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m9 12 2 2 4-4"/>
</svg>        <span class="truncate"  title="Passed" >Passed</span>
</span>
                                                <span dir="ltr" class="inline-flex max-w-48 items-center gap-1 truncate font-mono text-code text-muted-foreground"><svg aria-hidden="true" class="size-3 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15 6a9 9 0 0 0-9 9V3"/>
  <circle cx="18" cy="6" r="3"/>
  <circle cx="6" cy="18" r="3"/>
</svg><bdi class="truncate">main</bdi></span></div>
            </div>
</li>
                                                                                                                                                                                                        <li data-slot="timeline-item" x-show="showActivity(3)" class="group/timeline grid grid-cols-[2rem_1fr] gap-x-3">
    <div class="flex flex-col items-center">
        <span data-slot="timeline-marker" class="flex size-8 shrink-0 items-center justify-center">
                            <span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-8 text-caption rounded-full">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="khaled-n" >K</span>
    </span>
                    </span>
        <span aria-hidden="true" data-slot="timeline-rail" class="my-1 w-px flex-1 bg-border group-last/timeline:hidden"></span>
    </div>
    <div data-slot="timeline-content" class="flex min-w-0 flex-col gap-1 pb-6 pt-1 group-last/timeline:pb-0">
        <div class="flex items-baseline justify-between gap-3">
            <p class="min-w-0 text-body-sm font-medium text-foreground"><span class="">feat(cart): add a gift note field</span></p>
                            <time data-slot="date-time" datetime="2026-09-28T16:05:00+00:00" dir="auto"  title="Sep 28, 2026"     class="tabular-nums [unicode-bidi:isolate] shrink-0 text-caption text-muted-foreground">16 hours ago</time>
                    </div>
                    <p class="text-body-sm text-muted-foreground"><bdi>khaled-n committed</bdi></p>
                            <div class="flex flex-wrap items-center gap-2"><span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border text-muted-foreground">Commit</span>
                                                <span class=""><code dir="ltr" class="rounded-sm bg-secondary px-1 py-0.5 font-mono text-code text-muted-foreground">9c1d77e</code></span></div>
            </div>
</li></ol>
                            </div></div>
                                    <div data-slot="tabs-panel" x-bind="panel('commits')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus"><div x-show="none('commits')" style="display: none"><div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border border-dashed border-border px-6 py-12 text-center rounded-card">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No matches</p>
                    <p class="text-body-sm text-muted-foreground">Nothing matches that filter. Clear it to see everything.</p>
            </div>
    </div>
</div>
                            <ul aria-label="Commits" x-show="any('commits')" class="overflow-hidden rounded-card border border-border">
                                                                    <li data-slot="github-commit" x-show="show('commits', 0)" x-bind:class="{ 'border-t-0': firstVisible('commits', 0) }" class="flex items-start gap-3 border-t border-border px-4 py-3 first:border-t-0">
                                        <span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-6 text-[10px] rounded-full">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="sara-alharbi" >S</span>
    </span>
                                        <div class="flex min-w-0 flex-1 flex-col gap-1">
                                            <a href="https://github.com/acme/storefront/commit/4f2a91c" target="_blank" rel="noopener noreferrer"
        dir="auto" class="rounded-sm outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus text-label text-foreground">fix(auth): keep the redirect after sign-in</a>
                                            <div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-caption text-muted-foreground">
                                                <bdi>sara-alharbi committed</bdi>
                                                <time data-slot="date-time" datetime="2026-09-29T07:40:00+00:00" dir="auto"  title="Sep 29, 2026"     class="tabular-nums [unicode-bidi:isolate]">1 hour ago</time>
                                                <span dir="ltr" class="inline-flex max-w-48 items-center gap-1 truncate font-mono text-code text-muted-foreground"><svg aria-hidden="true" class="size-3 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15 6a9 9 0 0 0-9 9V3"/>
  <circle cx="18" cy="6" r="3"/>
  <circle cx="6" cy="18" r="3"/>
</svg><bdi class="truncate">main</bdi></span>
                                                <span data-slot="status" data-tone="success" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
            <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-success-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m9 12 2 2 4-4"/>
</svg>        <span class="truncate"  title="Checks passed" >Checks passed</span>
</span>
                                            </div>
                                        </div>
                                        <a href="https://github.com/acme/storefront/commit/4f2a91c" target="_blank" rel="noopener noreferrer"
        class="rounded-sm outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus"><code dir="ltr" class="rounded-sm bg-secondary px-1 py-0.5 font-mono text-code text-muted-foreground">4f2a91c</code></a>
                                    </li>
                                                                    <li data-slot="github-commit" x-show="show('commits', 1)" x-bind:class="{ 'border-t-0': firstVisible('commits', 1) }" class="flex items-start gap-3 border-t border-border px-4 py-3 first:border-t-0">
                                        <span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-6 text-[10px] rounded-full">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="khaled-n" >K</span>
    </span>
                                        <div class="flex min-w-0 flex-1 flex-col gap-1">
                                            <span class="text-label text-foreground">feat(cart): add a gift note field</span>
                                            <div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-caption text-muted-foreground">
                                                <bdi>khaled-n committed</bdi>
                                                <time data-slot="date-time" datetime="2026-09-28T16:05:00+00:00" dir="auto"  title="Sep 28, 2026"     class="tabular-nums [unicode-bidi:isolate]">16 hours ago</time>
                                                <span dir="ltr" class="inline-flex max-w-48 items-center gap-1 truncate font-mono text-code text-muted-foreground"><svg aria-hidden="true" class="size-3 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15 6a9 9 0 0 0-9 9V3"/>
  <circle cx="18" cy="6" r="3"/>
  <circle cx="6" cy="18" r="3"/>
</svg><bdi class="truncate">feat/gift-note</bdi></span>
                                                <span data-slot="status" data-tone="info" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
            <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-info-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <circle cx="12" cy="12" r="1"/>
</svg>        <span class="truncate"  title="Checks running" >Checks running</span>
</span>
                                            </div>
                                        </div>
                                        <span class=""><code dir="ltr" class="rounded-sm bg-secondary px-1 py-0.5 font-mono text-code text-muted-foreground">9c1d77e</code></span>
                                    </li>
                                                            </ul></div>
                                    <div data-slot="tabs-panel" x-bind="panel('runs')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus"><div x-show="none('runs')" style="display: none"><div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border border-dashed border-border px-6 py-12 text-center rounded-card">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No matches</p>
                    <p class="text-body-sm text-muted-foreground">Nothing matches that filter. Clear it to see everything.</p>
            </div>
    </div>
</div>
                            <ul aria-label="Workflow runs" x-show="any('runs')" class="overflow-hidden rounded-card border border-border">
                                                                    <li data-slot="github-run" data-status="failure" x-show="show('runs', 0)" x-bind:class="{ 'border-t-0': firstVisible('runs', 0) }" class="flex items-start gap-3 border-t border-border px-4 py-3 first:border-t-0">
                                        <svg aria-hidden="true" class="mt-0.5 size-4 shrink-0 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>                                        <div class="flex min-w-0 flex-1 flex-col gap-1">
                                            <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
                                                <a href="https://github.com/acme/storefront/actions/runs/412" target="_blank" rel="noopener noreferrer"
        dir="auto" class="rounded-sm outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus text-label text-foreground">CI</a>
                                                <span dir="ltr" class="text-caption text-muted-foreground">#412</span>                                                <span data-slot="status" data-tone="danger" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
            <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>        <span class="truncate"  title="Failed" >Failed</span>
</span>
                                            </div>
                                            <div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-caption text-muted-foreground">
                                                <span dir="ltr" class="inline-flex max-w-48 items-center gap-1 truncate font-mono text-code text-muted-foreground"><svg aria-hidden="true" class="size-3 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15 6a9 9 0 0 0-9 9V3"/>
  <circle cx="18" cy="6" r="3"/>
  <circle cx="6" cy="18" r="3"/>
</svg><bdi class="truncate">main</bdi></span>
                                                <span class=""><code dir="ltr" class="rounded-sm bg-secondary px-1 py-0.5 font-mono text-code text-muted-foreground">4f2a91c</code></span>
                                                <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border text-muted-foreground"><bdi dir="ltr">push</bdi></span>
                                                <bdi>started by sara-alharbi</bdi>                                                <time data-slot="date-time" datetime="2026-09-29T07:41:00+00:00" dir="auto"  title="Sep 29, 2026"     class="tabular-nums [unicode-bidi:isolate]">1 hour ago</time>
                                                <span dir="ltr" class="tabular-nums">3m 04s</span>                                            </div>
                                        </div>
                                                                                    <button data-slot="button"
     type="button"                         aria-label="Re-run CI" x-on:click="rerun(0)" x-bind:aria-busy="isRerunning(0) ? `true` : null" x-bind:data-disabled="isRerunning(0) ? `` : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg data-slot="spinner" aria-hidden="true" style="display: none;" x-show="isRerunning(0)" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg>                                                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/>
</svg>                                                Re-run</button>
                                                                            </li>
                                                                    <li data-slot="github-run" data-status="success" x-show="show('runs', 1)" x-bind:class="{ 'border-t-0': firstVisible('runs', 1) }" class="flex items-start gap-3 border-t border-border px-4 py-3 first:border-t-0">
                                        <svg aria-hidden="true" class="mt-0.5 size-4 shrink-0 text-nq-success-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m9 12 2 2 4-4"/>
</svg>                                        <div class="flex min-w-0 flex-1 flex-col gap-1">
                                            <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
                                                <span class="text-label text-foreground">CI</span>
                                                <span dir="ltr" class="text-caption text-muted-foreground">#411</span>                                                <span data-slot="status" data-tone="success" class="inline-flex min-w-0 items-center gap-1.5 text-body-sm text-foreground">
            <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-success-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m9 12 2 2 4-4"/>
</svg>        <span class="truncate"  title="Passed" >Passed</span>
</span>
                                            </div>
                                            <div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-caption text-muted-foreground">
                                                <span dir="ltr" class="inline-flex max-w-48 items-center gap-1 truncate font-mono text-code text-muted-foreground"><svg aria-hidden="true" class="size-3 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15 6a9 9 0 0 0-9 9V3"/>
  <circle cx="18" cy="6" r="3"/>
  <circle cx="6" cy="18" r="3"/>
</svg><bdi class="truncate">main</bdi></span>
                                                                                                <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border text-muted-foreground"><bdi dir="ltr">push</bdi></span>
                                                                                                <time data-slot="date-time" datetime="2026-09-28T16:06:00+00:00" dir="auto"  title="Sep 28, 2026"     class="tabular-nums [unicode-bidi:isolate]">16 hours ago</time>
                                                <span dir="ltr" class="tabular-nums">2m 51s</span>                                            </div>
                                        </div>
                                                                                    <button data-slot="button"
     type="button"                         aria-label="Re-run CI" x-on:click="rerun(1)" x-bind:aria-busy="isRerunning(1) ? `true` : null" x-bind:data-disabled="isRerunning(1) ? `` : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg data-slot="spinner" aria-hidden="true" style="display: none;" x-show="isRerunning(1)" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg>                                                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/>
</svg>                                                Re-run</button>
                                                                            </li>
                                                            </ul></div>
</div></div>
</div>
```