Merge remote-tracking branch 'origin/main' into feat/loop-skills

Author: charlesvien

apps/code/snapshots.yml

@@ -569,13 +569,13 @@ snapshots:
     git-dialogs--sync-success--light:
         hash: v1.k4693efd2.8d79d77c9338aeaa73734836f0e17fde987f6d3239914f4013889d3110e5088d.Rq-w2o1uhes_a5hUWqMXeiDkfnoPCZPt932LkEQXCco
     loops-loopslistview--comprehensive--dark:
-        hash: v1.k4693efd2.a9b9a8b23cca2079c3ced1878b6537ee9fbbdd0d3de205a9584fbe7d6875d405.dWfER84S8r_MU7EVDmjW8CuCf6lNhTx6RjfV_cNzKOA
+        hash: v1.k4693efd2.3c2a6b87092674a3d395a6f5d36889ea231696d788b159f357be0926f3804c8a.Ihzlq7XIy9rRoA7DTbpLePlBhjP34o8ppgP__NXx-Yw
     loops-loopslistview--comprehensive--light:
-        hash: v1.k4693efd2.9ff3f3787ef56ab9d1d39562eed6f19b6c9c1e7a6d79965fbf99fbac16ba33fb.DDuj_KZx0pcUxXwCgzNGFmCemCT1MuCzIQmbbPMgatw
+        hash: v1.k4693efd2.42c2994def56651de08f5be20e98dbe67bfbdb03e7edd8bdf008401468c1653a.EnH7NwNkvclS7g5Htf7OCZuYEm7fI5W6hEr4DmwZC8I
     loops-loopslistview--long-mixed-list--dark:
-        hash: v1.k4693efd2.683dedbfa7da3313eeaf52ff9e3cc7908af5c77173b1cad450b2acd61ac30cd4.YFm7fXVZSr29fa0R40pzq-FjRZrqIBEsIMiOiddB840
+        hash: v1.k4693efd2.384486583f8d9b66a4bf1d9cc45036a07310cb9e1943ea5b52ff466f55a03d7b.F_sXrJ13XWHzAF8yhoKun_k4BY8Jcb3EDtT0L1I6nKw
     loops-loopslistview--long-mixed-list--light:
-        hash: v1.k4693efd2.577fa23e3bc43f0ba033a59669fa73035ff2d65df1f994cf5753ac306ca830cf.r3v1hne0uC4dHpkzXriz6yzcA3fD2b8wD6ZLxA_0Fuo
+        hash: v1.k4693efd2.d80a0c55c4490276df53f781ac88ed9d9c6ec282bc14ddb80140b3ddcc44d32f.L6hw9ZixUiyTFKOybYzmjfUSIOayvmhueMTcmYt-IWo
     scouts-scoutsfleetlist--filtered-to-you--dark:
         hash: v1.k4693efd2.a3af6e76ef36598eaa347bedc4430878ed62754660166398e0576a9978cd084b.x3Ky-O6HOw0srWdOmnnKJwFNpmGmQVWip0t7CwVaRXY
     scouts-scoutsfleetlist--filtered-to-you--light:

packages/ui/src/features/folder-picker/GitHubRepoPicker.tsx

@@ -43,6 +43,7 @@ export function GitHubRepoPicker({
   repositories,
   isLoading,
   placeholder = "Select repository...",
+  size = "1",
   disabled = false,
   anchor,
   showSearchInput = true,
@@ -55,6 +56,8 @@ export function GitHubRepoPicker({
   hasMore: controlledHasMore,
   onLoadMore,
 }: GitHubRepoPickerProps) {
+  const buttonSize = size === "2" ? "lg" : "sm";
+  const buttonTextClass = size === "2" ? "text-[13px]" : "";
   const triggerRef = useRef<HTMLButtonElement>(null);
   const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
   const [uncontrolledSearchQuery, setUncontrolledSearchQuery] = useState("");
@@ -91,7 +94,12 @@ export function GitHubRepoPicker({
 
   if (isLoading && !showInlineLoadingState) {
     return (
-      <Button variant="outline" disabled size="sm">
+      <Button
+        variant="outline"
+        disabled
+        size={buttonSize}
+        className={buttonTextClass}
+      >
         <GithubLogo size={16} weight="regular" className="shrink-0" />
         Loading repos...
       </Button>
@@ -107,7 +115,12 @@ export function GitHubRepoPicker({
     !hasActiveRemoteSearch
   ) {
     return (
-      <Button variant="outline" disabled size="sm">
+      <Button
+        variant="outline"
+        disabled
+        size={buttonSize}
+        className={buttonTextClass}
+      >
         <GithubLogo size={16} weight="regular" className="shrink-0" />
         No GitHub repos
       </Button>
@@ -121,10 +134,10 @@ export function GitHubRepoPicker({
           <Button
             type="button"
             variant="outline"
-            size="sm"
+            size={buttonSize}
             disabled
             aria-label="Repository"
-            className="pointer-events-none min-w-0 max-w-full cursor-default justify-start disabled:opacity-100"
+            className={`pointer-events-none min-w-0 max-w-full cursor-default justify-start disabled:opacity-100 ${buttonTextClass}`}
           >
             <GithubLogo size={14} weight="regular" className="shrink-0" />
             <span className="min-w-0 truncate">{onlyRepo}</span>
@@ -165,9 +178,10 @@ export function GitHubRepoPicker({
           <Button
             ref={triggerRef}
             variant="outline"
-            size="sm"
+            size={buttonSize}
             disabled={disabled}
             aria-label="Repository"
+            className={buttonTextClass}
           >
             <GithubLogo size={14} weight="regular" className="shrink-0" />
             <span className="min-w-0 truncate">{value ?? placeholder}</span>

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

@@ -18,7 +18,7 @@ export function LoopBehaviorFields({
     <Flex
       direction="column"
       gap="2"
-      className="rounded-(--radius-2) border border-border bg-(--color-panel-solid) p-3"
+      className="rounded-(--radius-2) border border-border bg-(--gray-1) p-3"
     >
       <Flex align="center" justify="between" gap="2">
         <Flex direction="column" gap="0">

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

@@ -50,7 +50,7 @@ export function LoopContextFields({
   };
 
   const contextOptions = [
-    { value: NOT_ATTACHED_VALUE, label: "Not attached" },
+    { value: NOT_ATTACHED_VALUE, label: "Not attached to a channel" },
     ...channels.map((channel) => ({
       value: channel.id,
       label: `#${channel.name}`,
@@ -63,15 +63,16 @@ export function LoopContextFields({
         value={value?.folderId ?? NOT_ATTACHED_VALUE}
         options={contextOptions}
         disabled={disabled}
-        ariaLabel="Context"
+        size="lg"
+        ariaLabel="Context channel"
         onValueChange={selectContext}
       />
 
       {value ? (
         <Flex
           direction="column"
           gap="3"
-          className="rounded-(--radius-2) border border-border bg-(--color-panel-solid) p-3"
+          className="rounded-(--radius-2) border border-border bg-(--gray-1) p-3"
         >
           <ToggleRow
             title="Show runs in the feed"
@@ -110,6 +111,7 @@ export function LoopContextFields({
                 label: dashboard.name,
               }))}
               disabled={disabled}
+              size="lg"
               ariaLabel="Canvas"
               onValueChange={(canvasId) =>
                 patchOutputs({ canvas_id: canvasId })

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

@@ -112,7 +112,7 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
 
   if (isLoading) {
     return (
-      <div className="mx-auto w-full max-w-5xl px-8 py-6">
+      <div className="mx-auto w-full max-w-5xl px-8 py-8">
         <div className="h-24 animate-pulse rounded-(--radius-2) border border-border bg-(--gray-2)" />
       </div>
     );
@@ -123,16 +123,20 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
   }
 
   return (
-    <div className="mx-auto w-full max-w-5xl px-8 py-6">
-      <Flex direction="column" gap="5">
+    <div className="h-full min-h-0 overflow-y-auto">
+      <Flex
+        direction="column"
+        gap="5"
+        className="mx-auto w-full max-w-5xl px-8 py-8"
+      >
         <Flex direction="column" gap="3">
           <Button
             variant="link-muted"
-            size="xs"
+            size="sm"
             onClick={navigateToLoops}
             className="w-fit px-0"
           >
-            <ArrowLeftIcon size={13} />
+            <ArrowLeftIcon size={15} />
             Loops
           </Button>
 
@@ -155,7 +159,7 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
               />
               <Button
                 variant="outline"
-                size="xs"
+                size="sm"
                 loading={runLoop.isPending}
                 disabled={runLoop.isPending}
                 onClick={handleRunNow}
@@ -164,14 +168,14 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
               </Button>
               <Button
                 variant="outline"
-                size="xs"
+                size="sm"
                 onClick={() => navigateToEditLoop(loop.id)}
               >
                 Edit
               </Button>
               <Button
                 variant="destructive"
-                size="xs"
+                size="sm"
                 onClick={() => setDeleteOpen(true)}
               >
                 Delete
@@ -219,7 +223,11 @@ export function LoopDetailView({ loopId }: { loopId: string }) {
           ) : (
             <Flex direction="column" gap="2">
               {runs.map((run) => (
-                <LoopRunRow key={run.id} run={run} />
+                <LoopRunRow
+                  key={run.id}
+                  run={run}
+                  onStopped={() => void runsQuery.refetch()}
+                />
               ))}
             </Flex>
           )}
@@ -498,7 +506,7 @@ function InstructionsSection({ loop }: { loop: LoopSchemas.Loop }) {
         value={draft ?? loop.instructions}
         disabled={updateLoop.isPending}
         aria-label="Loop instructions"
-        className="min-h-[200px] bg-(--color-panel-solid) text-[12.5px] leading-relaxed"
+        className="max-h-[400px] min-h-[200px] bg-(--color-panel-solid) text-[12.5px] leading-relaxed"
         onChange={(e) => setDraft(e.currentTarget.value)}
         onBlur={(e) => commit(e.currentTarget.value)}
         onKeyDown={(e) => {

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

@@ -5,7 +5,10 @@ import {
   Check,
 } from "@phosphor-icons/react";
 import { type LoopSchemas, LoopsApiError } from "@posthog/api-client/loops";
+import { PROJECT_BLUEBIRD_FLAG } from "@posthog/shared";
+import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
 import { SettingsOptionSelect } from "@posthog/ui/features/settings/SettingsOptionSelect";
+import { useSidebarStore } from "@posthog/ui/features/sidebar/sidebarStore";
 import { useSetHeaderContent } from "@posthog/ui/hooks/useSetHeaderContent";
 import { Button } from "@posthog/ui/primitives/Button";
 import { toast } from "@posthog/ui/primitives/toast";
@@ -93,6 +96,17 @@ export function LoopForm({ loop }: LoopFormProps) {
     if (!loop) useLoopDraftStore.getState().setPrefill(null);
   }, [loop]);
 
+  // Contexts are a channels surface; hide the attachment UI when channels are
+  // off, unless this loop is already attached so the link stays visible and
+  // detachable.
+  const bluebirdEnabled = useFeatureFlag(
+    PROJECT_BLUEBIRD_FLAG,
+    import.meta.env.DEV,
+  );
+  const channelsEnabled =
+    useSidebarStore((s) => s.channelsEnabled) && bluebirdEnabled;
+  const showContextField = channelsEnabled || !!values.contextTarget;
+
   const createLoop = useCreateLoop();
   const updateLoop = useUpdateLoop(loop?.id ?? "");
   const deleteLoop = useDeleteLoop();
@@ -229,13 +243,13 @@ export function LoopForm({ loop }: LoopFormProps) {
     <Box className="flex h-full items-center justify-center p-6">
       <Flex
         direction="column"
-        className="max-h-full w-full max-w-[600px] overflow-hidden rounded-(--radius-3) border border-border bg-(--color-panel-solid) shadow-xl"
+        className="max-h-full w-full max-w-[640px] overflow-hidden rounded-(--radius-3) border border-border bg-(--color-panel-solid) shadow-xl"
       >
-        <Box className="border-border border-b px-5 pt-5 pb-4">
+        <Box className="border-border border-b px-6 pt-5 pb-4">
           <Stepper current={step} complete={stepComplete} onSelect={setStep} />
         </Box>
 
-        <Box className="min-h-0 flex-1 overflow-y-auto px-5 py-5">
+        <Box className="min-h-0 flex-1 overflow-y-auto px-6 py-6">
           {step === 0 ? (
             <Step
               title="What should this loop do?"
@@ -271,7 +285,7 @@ export function LoopForm({ loop }: LoopFormProps) {
           {step === 1 ? (
             <Step
               title="When should it run?"
-              description="Add one or more triggers. Leave empty to run it only on demand."
+              description="A loop can have several triggers, and any one of them starts a run. With no triggers, you run it yourself from the loop's page."
             >
               <LoopTriggerEditor
                 triggers={values.triggers}
@@ -292,14 +306,15 @@ export function LoopForm({ loop }: LoopFormProps) {
                 className="max-w-[340px]"
                 hint={
                   values.contextTarget
-                    ? "Loops attached to a context post runs to its shared feed, so they're visible to everyone on the project."
+                    ? "Loops attached to a channel post runs to its shared feed, so they're visible to everyone on the project."
                     : undefined
                 }
               >
                 <SettingsOptionSelect
                   value={values.visibility}
                   options={VISIBILITY_OPTIONS}
                   disabled={isSubmitting || !!values.contextTarget}
+                  size="lg"
                   ariaLabel="Visibility"
                   onValueChange={(value) =>
                     patch({
@@ -311,35 +326,39 @@ export function LoopForm({ loop }: LoopFormProps) {
 
               <Divider />
 
-              <Field
-                label="Context"
-                hint="Attach this loop to a context to file its runs in the feed and keep its context.md or a canvas up to date."
-              >
-                <LoopContextFields
-                  value={values.contextTarget}
-                  disabled={isSubmitting}
-                  onChange={(contextTarget) =>
-                    patch(
-                      contextTarget
-                        ? { contextTarget, visibility: "team" }
-                        : { contextTarget },
-                    )
-                  }
-                />
-              </Field>
+              {showContextField ? (
+                <>
+                  <Field
+                    label="Context"
+                    hint="A context is one of the channels in your sidebar. Attach this loop to a channel and its runs show up in that channel's feed; it can also keep the channel's context.md or a canvas up to date."
+                  >
+                    <LoopContextFields
+                      value={values.contextTarget}
+                      disabled={isSubmitting}
+                      onChange={(contextTarget) =>
+                        patch(
+                          contextTarget
+                            ? { contextTarget, visibility: "team" }
+                            : { contextTarget },
+                        )
+                      }
+                    />
+                  </Field>
 
-              <Divider />
+                  <Divider />
+                </>
+              ) : null}
 
               <Field
-                label="Repository"
+                label="Base repository"
                 hint={
                   values.repositories.length > 1
                     ? `${values.repositories.length - 1} more ${
                         values.repositories.length === 2
                           ? "repository stays"
                           : "repositories stay"
                       } attached to this loop.`
-                    : "Optional. Leave empty for a report-only loop that works purely through connectors."
+                    : "The repository runs check out and work in. Optional. Leave empty for a report-only loop that works purely through connectors."
                 }
               >
                 <LoopRepositoryPicker
@@ -420,7 +439,7 @@ export function LoopForm({ loop }: LoopFormProps) {
               title="Review"
               description="Check everything before you create the loop."
             >
-              <ReviewList values={values} />
+              <ReviewList values={values} showContext={showContextField} />
             </Step>
           ) : null}
         </Box>
@@ -565,7 +584,13 @@ function Divider() {
   return <Box className="h-px bg-(--gray-4)" />;
 }
 
-function ReviewList({ values }: { values: LoopFormValues }) {
+function ReviewList({
+  values,
+  showContext,
+}: {
+  values: LoopFormValues;
+  showContext: boolean;
+}) {
   const reasoning = values.reasoningEffort ?? "auto";
   const channels = (["push", "email", "slack"] as const).filter(
     (channel) => values.notifications[channel]?.enabled,
@@ -596,12 +621,14 @@ function ReviewList({ values }: { values: LoopFormValues }) {
           values.model || "Default model"
         } · ${reasoning} reasoning`}
       />
+      {showContext ? (
+        <ReviewRow
+          label="Context"
+          value={describeContext(values.contextTarget)}
+        />
+      ) : null}
       <ReviewRow
-        label="Context"
-        value={describeContext(values.contextTarget)}
-      />
-      <ReviewRow
-        label="Repository"
+        label="Base repository"
         value={
           values.repositories.length > 0
             ? values.repositories.map((repo) => repo.full_name).join(", ")
@@ -652,7 +679,7 @@ function ReviewRow({
 }
 
 function describeContext(target: LoopContextTargetDraft | null): string {
-  if (!target) return "Not attached";
+  if (!target) return "Not attached to a channel";
   const outputs: string[] = [];
   if (target.outputs.post_to_feed) outputs.push("feed");
   if (target.outputs.update_context) outputs.push("context.md");