feat(today): make the task page and typing feel native on phones

frontend/src/layout/scenes/components/QuillSceneHeader.tsx

@@ -30,9 +30,9 @@ export function QuillSceneHeader({ back, icon, title, actions, className }: Quil
                     {icon}
                 </span>
             )}
-            <div className="flex min-w-0 flex-1 items-center gap-1">{title}</div>
+            <div className="flex min-w-0 flex-1 items-center gap-1 @max-xl/main-content:min-w-48">{title}</div>
             {actions && (
-                <div className="ml-auto flex shrink-0 items-center gap-1 @max-xl/main-content:ml-0 @max-xl/main-content:basis-full @max-xl/main-content:flex-wrap">
+                <div className="ml-auto flex shrink-0 items-center gap-1 @max-xl/main-content:shrink @max-xl/main-content:flex-wrap @max-xl/main-content:justify-end">
                     {actions}
                 </div>
             )}

frontend/src/layout/today/TodayShell.scss

@@ -109,6 +109,16 @@
     display: contents;
 }
 
+@media (pointer: coarse) {
+    .TodayAppLayout--phone:has(:is(input, textarea, [contenteditable='true']):focus) {
+        --today-tab-bar-height: 0px;
+
+        .TodayTabBar {
+            display: none;
+        }
+    }
+}
+
 body:has(.TodayAppLayout--phone) :is(input, textarea, select) {
     font-size: 1rem;
 }
@@ -138,6 +148,7 @@ body:has(.TodayAppLayout--phone) .Toastify__toast-container--bottom-right {
     }
 
     .quill-button--size-row {
+        -webkit-touch-callout: none;
         height: 2.75rem;
         font-size: 0.9375rem;
     }
@@ -158,7 +169,10 @@ body:has(.TodayAppLayout--phone) .Toastify__toast-container--bottom-right {
     align-items: center;
     height: var(--today-tab-bar-height);
     padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
+    user-select: none;
     background: var(--today-paper);
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
 }
 
 @media (prefers-reduced-motion: reduce) {

products/posthog_ai/frontend/components/quill/QuillComposerSendButton.tsx

@@ -1,18 +1,23 @@
+import { useValues } from 'kea'
 import { forwardRef } from 'react'
 
 import { IconArrowRight, IconStopFilled } from '@posthog/icons'
 import { Button, Tooltip, TooltipContent, TooltipTrigger } from '@posthog/quill-primitives'
 
+import { todayShellLogic } from '~/layout/today/todayShellLogic'
+
 import { useComposerContext } from '../composer/Composer'
 
 export const QuillComposerSendButton = forwardRef<HTMLSpanElement, { 'data-attr'?: string }>(
     function QuillComposerSendButton({ 'data-attr': dataAttr }, ref): JSX.Element {
         const { sendDisabledReason, loading, stopLoading, showStop, onStop } = useComposerContext()
+        const { todayRailEnabled, phoneLayout } = useValues(todayShellLogic)
+        const size = todayRailEnabled && phoneLayout ? 'icon-lg' : 'icon'
         const button = showStop ? (
             <Button
                 type="button"
                 variant="destructive"
-                size="icon"
+                size={size}
                 aria-label="Stop"
                 loading={stopLoading}
                 onClick={() => onStop?.()}
@@ -24,7 +29,7 @@ export const QuillComposerSendButton = forwardRef<HTMLSpanElement, { 'data-attr'
             <Button
                 type="submit"
                 variant="primary"
-                size="icon"
+                size={size}
                 aria-label="Send message"
                 loading={loading}
                 disabled={!!sendDisabledReason}

products/posthog_ai/frontend/scenes/TaskTracker/components/QuillTaskNotRunEmpty.tsx

@@ -0,0 +1,48 @@
+import { useActions, useValues } from 'kea'
+
+import { IconPlay } from '@posthog/icons'
+import {
+    Button,
+    Empty,
+    EmptyContent,
+    EmptyDescription,
+    EmptyHeader,
+    EmptyMedia,
+    EmptyTitle,
+} from '@posthog/quill-primitives'
+
+import { isPiTaskRuntime } from '../../../types/taskTypes'
+import { taskDetailSceneLogic } from '../taskDetailSceneLogic'
+
+export function QuillTaskNotRunEmpty({ taskId }: { taskId: string }): JSX.Element {
+    const { task, runTaskInFlight } = useValues(taskDetailSceneLogic({ taskId }))
+    const { runTask } = useActions(taskDetailSceneLogic({ taskId }))
+    const canRun = !!task && !isPiTaskRuntime(task.runtime)
+
+    return (
+        <Empty data-quill className="flex-1 px-4">
+            <EmptyHeader>
+                <EmptyMedia variant="icon">
+                    <IconPlay />
+                </EmptyMedia>
+                <EmptyTitle>Not started yet</EmptyTitle>
+                {task?.description && <EmptyDescription className="line-clamp-4">{task.description}</EmptyDescription>}
+            </EmptyHeader>
+            {canRun && (
+                <EmptyContent>
+                    <Button
+                        variant="primary"
+                        size="lg"
+                        onClick={runTask}
+                        loading={runTaskInFlight}
+                        className="w-full max-w-60"
+                        data-attr="task-empty-run"
+                    >
+                        <IconPlay />
+                        Run task
+                    </Button>
+                </EmptyContent>
+            )}
+        </Empty>
+    )
+}

products/posthog_ai/frontend/scenes/TaskTracker/components/TaskDetailPage.tsx

@@ -24,7 +24,7 @@
     titleActions?: JSX.Element
 }
 
 export function TaskDetailPage({ taskId, isMobile, titleActions }: TaskDetailPageProps): JSX.Element {
     const sceneLogic = taskDetailSceneLogic({ taskId })
     const { task, taskNotFound, taskError, latestRun, selectedRun, isTaskPending, isHeaderLoading, runTaskInFlight } =
         useValues(sceneLogic)
@@ -63,7 +63,7 @@
             <QuillTaskHeaderActions
                 desktopUrl={hasDesktopAccess ? urls.codeTaskLink(task.id) : null}
                 prUrl={prUrl}
-                runLabel={canRun ? runButtonText : null}
+                runLabel={canRun && latestRun ? runButtonText : null}
                 onRun={runTask}
                 running={runTaskInFlight}
             />

products/posthog_ai/frontend/scenes/TaskTracker/components/TaskRunChat.tsx

@@ -1,6 +1,7 @@
 import { BindLogic, useActions, useValues } from 'kea'
 import { type MutableRefObject, useEffect, useRef } from 'react'
 
+import { cn } from 'lib/utils/css-classes'
 import { userLogic } from 'scenes/userLogic'
 
 import { runInteractionLogic, type RunInteractionLogicProps } from 'products/posthog_ai/frontend/api/logics'
@@ -46,7 +47,7 @@
  * re-points scene selection to it. `RunSurface.Root` owns bootstrap: it reads the run status from the tasks
  * API and never opens SSE for an already-terminal run.
  */
 export function TaskRunChat({
     taskId,
     runId,
     streamKey,
@@ -165,7 +166,7 @@
                 textAreaRef={textAreaRef}
                 onEscape={handleEscape}
                 disabled={readOnly}
-                className="@container/thread flex flex-col h-full -mx-4"
+                className={cn('@container/thread flex flex-col h-full', skin === 'lemon' && '-mx-4')}
             >
                 <RunSurface.Thread
                     restoreReadPosition

products/posthog_ai/frontend/scenes/TaskTracker/components/TaskRunComposer.tsx

@@ -8,6 +8,8 @@
 import { urls } from 'scenes/urls'
 import { userLogic } from 'scenes/userLogic'
 
+import { todayShellLogic } from '~/layout/today/todayShellLogic'
+
 import { runInteractionLogic, type RunInteractionLogicProps } from 'products/posthog_ai/frontend/api/logics'
 import { Composer, QueuedMessageList, useThreadSkin } from 'products/posthog_ai/frontend/api/primitives'
 import { modelCatalogueLogic } from 'products/posthog_ai/frontend/logics/modelCatalogueLogic'
@@ -37,7 +39,7 @@
 import { QuillComposerLayout } from '../../../components/quill/QuillComposerLayout'
 import { QuillComposerSendButton } from '../../../components/quill/QuillComposerSendButton'
 
 export function TaskRunComposer({
     logicProps,
     textAreaRef,
     autoFocus,
@@ -114,9 +116,15 @@
     const skin = useThreadSkin()
     const codexBillingEnabled = useFeatureFlag('POSTHOG_CODE_CODEX_OWN_SUBSCRIPTION_CLOUD')
 
-    const placeholder = isTerminal
-        ? 'Send a message to start a new run, or type / for commands…'
-        : 'Send a follow-up message, or type / for commands…'
+    const { todayRailEnabled, phoneLayout } = useValues(todayShellLogic)
+    const placeholder =
+        todayRailEnabled && phoneLayout
+            ? isTerminal
+                ? 'Start a new run…'
+                : 'Reply…'
+            : isTerminal
+              ? 'Send a message to start a new run, or type / for commands…'
+              : 'Send a follow-up message, or type / for commands…'
     // Selection lives in the bound runInteractionLogic and is applied when the message is sent — synced to the
     // running agent on a follow-up, or used to seed the next run once terminal.
     const modePicker = (

products/posthog_ai/frontend/scenes/TaskTracker/components/TaskRunLoadingSkeleton.tsx

@@ -12,7 +12,7 @@ export function TaskRunLoadingSkeleton(): JSX.Element {
         return <RunLogSkeleton />
     }
     return (
-        <div className="@container/thread flex h-full min-h-0 flex-col -mx-4">
+        <div className="@container/thread flex h-full min-h-0 flex-col">
             <RunLogSkeleton className="flex-1" listClassName="py-4" rowClassName="px-4" />
             <QuillRunSurfaceInputs
                 approval={null}

products/posthog_ai/frontend/scenes/TaskTracker/components/TaskRunLog.tsx

@@ -2,7 +2,9 @@
 
 import { NotFound } from 'lib/components/NotFound'
 
+import { useThreadSkin } from '../../../hooks/useThreadSkin'
 import { taskDetailSceneLogic } from '../taskDetailSceneLogic'
+import { QuillTaskNotRunEmpty } from './QuillTaskNotRunEmpty'
 import { TaskErrorBanner } from './TaskErrorBanner'
 import { TaskRunChat } from './TaskRunChat'
 import { TaskRunLoadingSkeleton } from './TaskRunLoadingSkeleton'
@@ -13,7 +15,7 @@
  * `TaskRunChat`. The skeleton is the only loading affordance here — once it hands off to `TaskRunChat`, the
  * eager `RunSurface` shows the same `RunLogSkeleton` during its own bootstrap, so the transition is seamless.
  */
 export function TaskRunLog({
     taskId,
     optimisticStreamKey,
     optimisticRunId,
@@ -41,6 +43,7 @@
         runContinuation,
     } = useValues(logic)
     const { loadTaskRuns, loadSelectedTaskRun, clearContinuationDraft } = useActions(logic)
+    const skin = useThreadSkin()
 
     if (runContinuation && selectedRunId === runContinuation.run.id) {
         return (
@@ -101,6 +104,9 @@
         return <TaskRunLoadingSkeleton />
     }
     if (runs.length === 0 && !selectedRunId) {
+        if (skin === 'quill') {
+            return <QuillTaskNotRunEmpty taskId={taskId} />
+        }
         return (
             <div className="text-center py-16">
                 <p className="text-muted">This task hasn't been run yet</p>

products/posthog_ai/frontend/scenes/TaskTracker/components/TaskRunSceneShell.tsx

@@ -1,3 +1,4 @@
+import { useValues } from 'kea'
 import { type ReactNode } from 'react'
 
 import { IconArchive, IconChevronLeft } from '@posthog/icons'
@@ -21,6 +22,7 @@
     ScenePanelInfoSection,
 } from '~/layout/scenes/SceneLayout'
 import { TodaySessionIcon } from '~/layout/today/TodaySessionIcon'
+import { todayShellLogic } from '~/layout/today/todayShellLogic'
 import { sessionIconFields } from '~/layout/today/todayWorkItems'
 
 import type { TaskRunDetailDTOApi } from 'products/tasks/frontend/generated/api.schemas'
@@ -60,7 +62,7 @@
  * Purely presentational: both the detail page (wired from `taskDetailSceneLogic`) and the optimistic
  * create thread render it, so the thread keeps the same layout across the `/tasks/new → /tasks/:id` handoff.
  */
 export function TaskRunSceneShell({
     task,
     selectedRun,
     isHeaderLoading = false,
@@ -74,6 +76,8 @@
     children,
 }: TaskRunSceneShellProps): JSX.Element {
     const skin = useThreadSkin()
+    const { todayRailEnabled, phoneLayout } = useValues(todayShellLogic)
+    const todayPhone = todayRailEnabled && phoneLayout
     return (
         <SceneContent className="h-full min-h-0 gap-y-0">
             {/* The quill skin moves the panel's facts and actions into the title's overflow menu (QuillTaskMenu). */}
@@ -147,7 +151,7 @@
                         <QuillSceneHeader
                             className={cn(taskError && 'mt-4')}
                             back={
-                                isMobile ? (
+                                isMobile && !todayPhone ? (
                                     <Button
                                         variant="default"
                                         size="icon-sm"