Merge remote-tracking branch 'origin/main' into web-bind-pi-runner-stub-enricher

Author: gantoine

apps/code/snapshots.yml

@@ -561,17 +561,17 @@ snapshots:
     git-dialogs--sync-success--light:
         hash: v1.k4693efd2.8d79d77c9338aeaa73734836f0e17fde987f6d3239914f4013889d3110e5088d.Rq-w2o1uhes_a5hUWqMXeiDkfnoPCZPt932LkEQXCco
     loops-loopslistview--comprehensive--dark:
-        hash: v1.k4693efd2.3c2a6b87092674a3d395a6f5d36889ea231696d788b159f357be0926f3804c8a.Ihzlq7XIy9rRoA7DTbpLePlBhjP34o8ppgP__NXx-Yw
+        hash: v1.k4693efd2.b9223e477701b5ef4587310a1de71500dd5214222531648ef76d66766b049a9f.2lckIm16WmmwZv1xVZnUL42InIHDzemQwU3EJzzw9_U
     loops-loopslistview--comprehensive--light:
-        hash: v1.k4693efd2.42c2994def56651de08f5be20e98dbe67bfbdb03e7edd8bdf008401468c1653a.EnH7NwNkvclS7g5Htf7OCZuYEm7fI5W6hEr4DmwZC8I
+        hash: v1.k4693efd2.1f172c831aefdfd4b3bae97af84f80aae3c09c4919f6b1b68315240cc482af50.hnrwbv8il_Ay6DcYxmQXNtxKU3rqOIWAkjnGB8n4AT4
     loops-loopslistview--long-mixed-list--dark:
-        hash: v1.k4693efd2.384486583f8d9b66a4bf1d9cc45036a07310cb9e1943ea5b52ff466f55a03d7b.F_sXrJ13XWHzAF8yhoKun_k4BY8Jcb3EDtT0L1I6nKw
+        hash: v1.k4693efd2.654250bc74fff46c496747eb13031e0e7a7ef264be5bb7be41451d82a497a515.vvrxXbbABkVY3hcHS3oThQ339JFgwIzB8E4n1usVWf0
     loops-loopslistview--long-mixed-list--light:
-        hash: v1.k4693efd2.d80a0c55c4490276df53f781ac88ed9d9c6ec282bc14ddb80140b3ddcc44d32f.L6hw9ZixUiyTFKOybYzmjfUSIOayvmhueMTcmYt-IWo
+        hash: v1.k4693efd2.a8e53087efdaf58e351809775aaf410f53a781a97e10e973ee53fd0db2f94e73.7GcprWAYAgATLtNckNBd-44EyctqKNcb4FXiHA08QJs
     loops-loopslistview--with-builder-sessions--dark:
-        hash: v1.k4693efd2.bc59812bf49ff161cf20e75dcf043367ae3d2817aa2c2cf91c91d9771c6b62f8.yOBz-llmwDVay7GIHlMwlMT3EuKjkoW0Vwmwvi4noCM
+        hash: v1.k4693efd2.84cfc28bedc22a6728ba4ecf69274ab03537faeed5333775991716bf0b5f439e.fHsD0XKPnud-oDM4PLJ7edCbMnVcW6uVMdMHBYp3K08
     loops-loopslistview--with-builder-sessions--light:
-        hash: v1.k4693efd2.fb97e3fe3205ddf71d98c4e35446c73e394aaa9761d3bb35b146ddafc438df4d.UUEWc0G12NQibZTyskIHGS62mB36gKJ594GrJp1E9II
+        hash: v1.k4693efd2.fb6c9b85bd660a6be4645cf7ba8fe3ab08a169e3823e5354325b7d7ecbe13aba.4FbKrdxiUN1PZOGwFa_kl7Rpz3Z8DnTVNJvUM_3FIp0
     scouts-scoutsfleetlist--filtered-to-you--dark:
         hash: v1.k4693efd2.a3af6e76ef36598eaa347bedc4430878ed62754660166398e0576a9978cd084b.x3Ky-O6HOw0srWdOmnnKJwFNpmGmQVWip0t7CwVaRXY
     scouts-scoutsfleetlist--filtered-to-you--light:

packages/core/src/sessions/sessionService.ts

@@ -35,6 +35,7 @@ import {
   type StoredLogEntry,
   sendableQueuePrefixLength,
   sessionSupportsNativeSteer,
+  type TaskRunArtifact,
   type TaskRunStatus,
 } from "@posthog/shared";
 import { ANALYTICS_EVENTS } from "@posthog/shared/analytics-events";
@@ -1599,7 +1600,7 @@ export class SessionService {
   /** Deduplicates concurrent manifest reads when a message renders many images. */
   private cloudAttachmentManifestRequests = new Map<
     string,
-    Promise<Array<{ id?: string; storage_path?: string }>>
+    Promise<TaskRunArtifact[]>
   >();
   private idleKilledSubscription: { unsubscribe: () => void } | null = null;
   /**
@@ -4673,6 +4674,7 @@ export class SessionService {
         cloudStatus: run.status,
         cloudStage: run.stage ?? null,
         cloudOutput: run.output ?? null,
+        cloudArtifacts: run.artifacts ?? [],
         cloudErrorMessage: run.error_message,
         logUrl: run.log_url ?? session.logUrl,
       });
@@ -7293,22 +7295,34 @@ export class SessionService {
     }
   }
 
+  async getCloudRunArtifacts(
+    taskId: string,
+    runId: string,
+  ): Promise<TaskRunArtifact[]> {
+    const authStatus = await this.getAuthCredentialsStatus();
+    if (authStatus.kind !== "ready") return [];
+
+    return this.getCloudAttachmentManifest(
+      authStatus.auth.client,
+      `${authStatus.auth.apiHost}:${authStatus.auth.projectId}`,
+      taskId,
+      runId,
+    );
+  }
+
   private getCloudAttachmentManifest(
     client: AuthClient,
     authIdentity: string,
     taskId: string,
     runId: string,
-  ): Promise<Array<{ id?: string; storage_path?: string }>> {
+  ): Promise<TaskRunArtifact[]> {
     const key = `${authIdentity}:${taskId}:${runId}`;
     const existing = this.cloudAttachmentManifestRequests.get(key);
     if (existing) return existing;
 
     const request = client
       .getTaskRun(taskId, runId)
-      .then(
-        (run: { artifacts?: Array<{ id?: string; storage_path?: string }> }) =>
-          run.artifacts ?? [],
-      );
+      .then((run: { artifacts?: TaskRunArtifact[] }) => run.artifacts ?? []);
     this.cloudAttachmentManifestRequests.set(key, request);
 
     const clear = () => {

packages/shared/src/domain-types.ts

@@ -3,6 +3,7 @@ import type { Adapter } from "./adapter";
 import type { AgentRuntime } from "./agent-runtime";
 import type { DismissalReasonOptionValue } from "./dismissal-reasons";
 import type { StoredLogEntry } from "./session-events";
+import type { TaskRunArtifact } from "./task";
 
 // Execution mode schema and type - shared between main and renderer
 export const executionModeSchema = z.enum([
@@ -180,6 +181,7 @@ export interface TaskRun {
   error_message: string | null;
   output: Record<string, unknown> | null; // Structured output (PR URL, commit SHA, etc.)
   state: Record<string, unknown>; // Intermediate run state (defaults to {}, never null)
+  artifacts?: TaskRunArtifact[];
   created_at: string;
   updated_at: string;
   completed_at: string | null;

packages/shared/src/sessions.ts

@@ -10,7 +10,7 @@ import type { Adapter } from "./adapter";
 import type { SkillButtonId } from "./analytics-events";
 import type { ExecutionMode } from "./exec-types";
 import type { AcpMessage } from "./session-events";
-import type { TaskRunStatus } from "./task";
+import type { TaskRunArtifact, TaskRunStatus } from "./task";
 
 export type { Adapter };
 
@@ -94,6 +94,7 @@ export interface AgentSession {
   cloudStatus?: TaskRunStatus;
   cloudStage?: string | null;
   cloudOutput?: Record<string, unknown> | null;
+  cloudArtifacts?: TaskRunArtifact[];
   cloudErrorMessage?: string | null;
   initialPrompt?: ContentBlock[];
   cloudBranch?: string | null;

packages/ui/src/features/canvas/components/WebsiteChannelLoops.tsx

@@ -81,11 +81,15 @@ export function WebsiteChannelLoops({ channelId }: { channelId: string }) {
         <Flex
           direction="column"
           gap="6"
-          className="mx-auto w-full max-w-3xl px-8 py-8"
+          className="@container mx-auto w-full max-w-3xl px-8 py-8"
         >
-          <Flex align="center" justify="between" gap="3">
-            <Flex direction="column" gap="1" className="min-w-0 max-w-[70%]">
-              <Flex align="center" gap="2">
+          <div className="flex @min-[640px]:flex-row flex-col items-start @min-[640px]:items-center justify-between gap-3">
+            <Flex
+              direction="column"
+              gap="1"
+              className="w-full min-w-0 @min-[640px]:max-w-[70%]"
+            >
+              <Flex align="center" gap="2" wrap="wrap">
                 <Heading className="font-bold text-2xl">
                   Automate #{contextName}
                 </Heading>
@@ -119,7 +123,7 @@ export function WebsiteChannelLoops({ channelId }: { channelId: string }) {
               <PlusIcon size={14} />
               Create manually
             </Button>
-          </Flex>
+          </div>
 
           {isLoading ? (
             <LoopsSkeleton />
@@ -140,7 +144,11 @@ export function WebsiteChannelLoops({ channelId }: { channelId: string }) {
               </Flex>
             </Flex>
           ) : (
-            <LoopsEmptyState contextName={contextName} />
+            <LoopsEmptyState
+              contextName={contextName}
+              onCreate={startBlank}
+              disabledReason={limitReason}
+            />
           )}
         </Flex>
       </div>

packages/ui/src/features/loops/components/LoopRow.tsx

@@ -1,5 +1,6 @@
 import { CaretRightIcon, RepeatIcon } from "@phosphor-icons/react";
 import type { LoopSchemas } from "@posthog/api-client/loops";
+import { formatRelativeTimeLong } from "@posthog/shared";
 import type { UserBasic } from "@posthog/shared/domain-types";
 import { userDisplayName } from "@posthog/ui/features/canvas/utils/userDisplay";
 import { Badge } from "@posthog/ui/primitives/Badge";
@@ -71,11 +72,19 @@ export function LoopRow({
               {description}
             </Text>
           ) : null}
-          {metadata.length > 0 ? (
-            <Text className="mt-0.5 text-(--accent-11) text-[11px] leading-snug">
-              {metadata.join(" · ")}
+          <Flex align="center" gap="1" wrap="wrap" className="mt-0.5">
+            {metadata.length > 0 ? (
+              <Text className="text-(--accent-11) text-[11px] leading-snug">
+                {metadata.join(" · ")}
+              </Text>
+            ) : null}
+            {metadata.length > 0 ? (
+              <Text className="text-[11px] text-gray-9">·</Text>
+            ) : null}
+            <Text className="text-[11px] text-gray-9">
+              Created {formatRelativeTimeLong(loop.created_at)}
             </Text>
-          ) : null}
+          </Flex>
         </Flex>
       </Flex>
       <Flex align="center" gap="3" className="shrink-0">

packages/ui/src/features/loops/components/LoopTemplatesSection.tsx

@@ -28,8 +28,8 @@ export function LoopTemplatesSection({
     useState<LoopTemplateCategory>("engineering");
 
   return (
-    <Flex direction="column" gap="3">
-      <Flex align="center" justify="between" gap="3">
+    <div className="@container flex flex-col gap-3">
+      <div className="flex @min-[480px]:flex-row flex-col items-start @min-[480px]:items-center justify-between gap-3">
         <Text className="font-medium text-[12px] text-gray-10 uppercase tracking-wide">
           Start from a template
         </Text>
@@ -49,19 +49,20 @@ export function LoopTemplatesSection({
             </button>
           ))}
         </Flex>
-      </Flex>
-      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+      </div>
+      <div className="grid @min-[640px]:grid-cols-2 grid-cols-1 gap-3">
         {LOOP_TEMPLATES.filter(
           (template) => template.category === templateCategory,
         ).map((template) => (
-          <TemplateCard
-            key={template.id}
-            template={template}
-            onSelect={() => onSelect(template)}
-          />
+          <div key={template.id} className="@container">
+            <TemplateCard
+              template={template}
+              onSelect={() => onSelect(template)}
+            />
+          </div>
         ))}
       </div>
-    </Flex>
+    </div>
   );
 }
 
@@ -80,7 +81,7 @@ function TemplateCard({
     <button
       type="button"
       onClick={onSelect}
-      className="flex items-start gap-2.5 rounded-(--radius-3) border border-border bg-(--color-panel-solid) p-3 text-left transition-colors hover:border-(--gray-6) hover:bg-(--gray-2)"
+      className="@container flex h-full w-full @min-[300px]:flex-row flex-col items-start gap-2.5 overflow-hidden rounded-(--radius-3) border border-border bg-(--color-panel-solid) p-3 text-left transition-colors hover:border-(--gray-6) hover:bg-(--gray-2)"
     >
       <Flex
         align="center"
@@ -97,20 +98,17 @@ function TemplateCard({
           {template.description}
         </Text>
         <Flex
-          align="center"
-          justify="between"
+          align="start"
           gap="3"
-          className="mt-0.5 w-full text-(--accent-11)"
+          className="mt-0.5 w-full @min-[400px]:flex-row flex-col text-(--accent-11)"
         >
           <Flex align="center" className="min-w-0 gap-1.5">
             <TriggerIcon size={11} className="shrink-0" />
-            <Text className="truncate text-[11px]">
-              {template.triggerLabel}
-            </Text>
+            <Text className="text-[11px]">{template.triggerLabel}</Text>
           </Flex>
-          <Flex align="center" className="shrink-0 gap-1.5">
+          <Flex align="center" className="min-w-0 gap-1.5">
             <PlugsIcon size={11} className="shrink-0" />
-            <Text className="text-[11px]">
+            <Text className="min-w-0 text-[11px]">
               Works with {template.worksWith.join(" · ")}
             </Text>
           </Flex>

packages/ui/src/features/loops/components/LoopTriggerEditor.tsx

@@ -421,7 +421,7 @@ function ScheduleTriggerFields({
               type="time"
               disabled={disabled}
               value={time}
-              className="h-8 rounded-(--radius-2) border border-border bg-(--color-panel-solid) px-2.5 text-[13px] text-gray-12"
+              className="h-8 rounded-(--radius-2) border border-border bg-transparent px-2.5 text-[13px] text-gray-12"
               onChange={(e) => {
                 if (!e.target.value) return;
                 setRecurring(frequency, e.target.value, weekday);
@@ -448,7 +448,7 @@ function ScheduleTriggerFields({
             <input
               type="datetime-local"
               disabled={disabled}
-              className="h-8 rounded-(--radius-2) border border-border bg-(--color-panel-solid) px-2.5 text-[13px] text-gray-12"
+              className="h-8 rounded-(--radius-2) border border-border bg-transparent px-2.5 text-[13px] text-gray-12"
               value={config.run_at ? toDatetimeLocal(config.run_at) : ""}
               onChange={(e) =>
                 onChange({

packages/ui/src/features/loops/components/LoopsEmptyState.test.tsx

@@ -0,0 +1,37 @@
+import { Theme } from "@radix-ui/themes";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { LoopsEmptyState } from "./LoopsEmptyState";
+
+describe("LoopsEmptyState", () => {
+  it("starts loop creation from the primary CTA", async () => {
+    const onCreate = vi.fn();
+    render(
+      <Theme>
+        <LoopsEmptyState onCreate={onCreate} />
+      </Theme>,
+    );
+
+    await userEvent.click(
+      screen.getByRole("button", { name: "Create a loop" }),
+    );
+
+    expect(onCreate).toHaveBeenCalledOnce();
+  });
+
+  it("disables creation when the project reached its loop limit", () => {
+    render(
+      <Theme>
+        <LoopsEmptyState
+          onCreate={vi.fn()}
+          disabledReason="This project reached its loop limit."
+        />
+      </Theme>,
+    );
+
+    expect(
+      screen.getByRole("button", { name: "Create a loop" }),
+    ).toBeDisabled();
+  });
+});