unused var

* first attempt at stream sidebar, tasks, and events

* fix folder from root

* cleanup folders and events, and condense changes

* cleanup and add toggle for sidebar

* cleanup

* fix nits

.github/workflows/_deploy.yml

@@ -79,7 +79,7 @@ jobs:
         run: |
           if [ "${{ inputs.module }}" = "migrations" ]; then
             kubectl delete job migrations --ignore-not-found
-            skaffold run -p migrations --tail
+            skaffold run -p migrations
           else
             skaffold run -p ${{ inputs.environment }} -m ${{ inputs.module }}
           fi

go/Makefile

@@ -38,12 +38,12 @@ PROD_REPO := us-west2-docker.pkg.dev/flowy-prod-440017/deployments
 .PHONY: migrate-dev
 migrate-dev:
 	kubectl delete job migrations --ignore-not-found --context=dev
-	SKAFFOLD_DEFAULT_REPO=$(DEV_REPO) skaffold run -p migrations --kube-context dev --tail
+	SKAFFOLD_DEFAULT_REPO=$(DEV_REPO) skaffold run -p migrations --kube-context dev
 
 .PHONY: migrate-prod
 migrate-prod:
 	kubectl delete job migrations --ignore-not-found --context=prod
-	SKAFFOLD_DEFAULT_REPO=$(PROD_REPO) skaffold run -p migrations --kube-context prod --tail
+	SKAFFOLD_DEFAULT_REPO=$(PROD_REPO) skaffold run -p migrations --kube-context prod
 
 # ---- Deploy ----
 # Use MODULE=orion or MODULE=particleprocessor or MODULE=pusher or MODULE=emailnotifierjob to deploy a single service, e.g.:

js/desktop/package.json

@@ -1,7 +1,7 @@
 {
   "name": "Flowy.llink",
   "productName": "Flowy.llink",
-  "version": "1.5.2",
+  "version": "1.7.0",
   "description": "Flowy.llink is a video messaging app for teams",
   "main": ".vite/build/main.js",
   "private": true,
@@ -64,6 +64,7 @@
     "@livekit/components-react": "^2.9.20",
     "@livekit/components-styles": "^1.2.0",
     "@milkdown/crepe": "^7.21.1",
+    "@milkdown/kit": "7.21.1",
     "@sentry/electron": "^7.11.0",
     "@sentry/react": "^10.54.0",
     "@tanstack/react-query": "^5.90.21",

js/desktop/src/api/types.ts

@@ -146,14 +146,21 @@ export const TextPropertiesSchema = z.object({
 });
 export type TextProperties = z.infer<typeof TextPropertiesSchema>;
 
-export const QuestPropertiesSchema = z.object({
+export const ChecklistItemSchema = z.object({
+  text: z.string(),
+  done: z.boolean(),
+});
+export type ChecklistItem = z.infer<typeof ChecklistItemSchema>;
+
+export const TaskPropertiesSchema = z.object({
   title: z.string(),
-  description: z.string(),
-  status: z.string().optional(),
+  notes: z.string().optional(),
+  checklist: z.array(ChecklistItemSchema).optional(),
   // humanId
   assigned_to: z.string().optional(),
+  done: z.boolean(),
 });
-export type QuestProperties = z.infer<typeof QuestPropertiesSchema>;
+export type TaskProperties = z.infer<typeof TaskPropertiesSchema>;
 
 export const PaperPropertiesSchema = z.object({
   title: z.string(),
@@ -194,7 +201,7 @@ export interface ParticlePropertiesMap {
   media: MediaProperties;
   file: FileProperties;
   text: TextProperties;
-  quest: QuestProperties;
+  task: TaskProperties;
   paper: PaperProperties;
 }
 
@@ -211,6 +218,9 @@ export const ParticleSchema = z.discriminatedUnion('type', [
   ParticleBaseSchema.extend({
     type: z.literal('stream'),
     properties: StreamPropertiesSchema,
+    // Open/closed lifecycle. Optional because some streams were created while
+    // the field was dropped — treat missing as 'open' (see isStreamOpen).
+    status: z.enum(['open', 'closed']).optional(),
     // e.g. ["human:human_xxxx", "human:human_yyyy"] - visible only to Aron and John
     // e.g. ["network:xywx"] - visible to everyone in the network
     visible_to: z.array(z.string()),
@@ -221,7 +231,6 @@ export const ParticleSchema = z.discriminatedUnion('type', [
     last_child_created_at: z.coerce.date().optional(),
     // Array of humanIds currently in the huddle (updated via LiveKit webhooks)
     huddle_active_participants: z.array(z.string()).optional(),
-    status: z.enum(['open', 'closed']).optional(),
   }),
   ParticleBaseSchema.extend({
     type: z.literal('folder'),
@@ -229,6 +238,9 @@ export const ParticleSchema = z.discriminatedUnion('type', [
     // e.g. ["human:human_xxxx", "human:human_yyyy"] - visible only to Aron and John
     // e.g. ["network:123"] - visible to everyone in the network
     visible_to: z.array(z.string()),
+    // Set to created_at on creation, bumped when children are added — keeps
+    // folders present in activity-ordered container queries.
+    last_child_created_at: z.coerce.date().optional(),
   }),
   ParticleBaseSchema.extend({
     type: z.literal('media'),
@@ -248,8 +260,9 @@ export const ParticleSchema = z.discriminatedUnion('type', [
     ...TombstoneFields,
   }),
   ParticleBaseSchema.extend({
-    type: z.literal('quest'),
-    properties: QuestPropertiesSchema,
+    type: z.literal('task'),
+    properties: TaskPropertiesSchema,
+    reactions: ReactionsSchema,
     ...TombstoneFields,
   }),
   ParticleBaseSchema.extend({
@@ -259,17 +272,28 @@ export const ParticleSchema = z.discriminatedUnion('type', [
   }),
 ]);
 
-export type Particle = z.infer<typeof ParticleSchema>;
+// Placeholder for docs whose `type` this client version doesn't recognize
+// (e.g. a newer client wrote a particle type we don't ship yet). The converter
+// maps them here instead of throwing, so they degrade to an "unsupported"
+// view rather than breaking the whole subscription.
+export const UnknownParticleSchema = ParticleBaseSchema.extend({
+  type: z.literal('unknown'),
+  raw_type: z.string(),
+});
+export type UnknownParticle = z.infer<typeof UnknownParticleSchema>;
 
-export type ParticleType = Particle['type'];
+export type Particle = z.infer<typeof ParticleSchema> | UnknownParticle;
+
+/** Particle types this client can read and write — excludes 'unknown'. */
+export type ParticleType = z.infer<typeof ParticleSchema>['type'];
 
 /** Container types can have children subcollections */
-export const CONTAINER_TYPES: ReadonlySet<ParticleType> = new Set([
+export const CONTAINER_TYPES: ReadonlySet<Particle['type']> = new Set([
   'stream',
   'folder',
 ]);
 
-export function isContainerType(type: ParticleType): boolean {
+export function isContainerType(type: Particle['type']): boolean {
   return CONTAINER_TYPES.has(type);
 }
 
@@ -278,6 +302,11 @@ export function isParticleDeleted(particle: Particle): boolean {
   return 'deleted_at' in particle && particle.deleted_at != null;
 }
 
+/** Missing status counts as open (streams created while the field was dropped). */
+export function isStreamOpen(stream: Extract<Particle, { type: 'stream' }>) {
+  return stream.status !== 'closed';
+}
+
 // --- LiveKit types ---
 
 export const GetLivekitTokenResponseSchema = z.object({

js/desktop/src/components/link-preview-card.tsx

@@ -1,5 +1,5 @@
 import { Copy, ExternalLink, Globe } from 'lucide-react';
-import type { LinkMetadata } from '@/lib/link-metadata';
+import { domainFromUrl, type LinkMetadata } from '@/lib/link-metadata';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Button } from '@/components/ui/button';
 import { platform } from '@/lib/platform';
@@ -93,6 +93,22 @@ export function LinkPreviewCard({ metadata, compact }: LinkPreviewCardProps) {
   );
 }
 
+/** Shown when metadata couldn't be fetched — the link itself still works. */
+export function LinkPreviewCardFallback({ url }: { url: string }) {
+  return (
+    <LinkPreviewCard
+      metadata={{
+        url,
+        domain: domainFromUrl(url),
+        title: url,
+        description: null,
+        image: null,
+        favicon: null,
+      }}
+    />
+  );
+}
+
 export function LinkPreviewCardSkeleton() {
   return (
     <div className="max-w-sm overflow-hidden rounded-2xl bg-white/10 backdrop-blur-md">

js/desktop/src/components/ui/scroll-area.tsx

@@ -16,7 +16,7 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&>div]:!w-full"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>

js/desktop/src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        'flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

js/desktop/src/features/compose/attachment-strip.tsx

@@ -4,6 +4,7 @@ import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import { Skeleton } from '@/components/ui/skeleton';
 import { cn } from '@/lib/utils';
 import type { LinkPreviewEntry } from '@/hooks/use-link-metadata';
+import { domainFromUrl } from '@/lib/link-metadata';
 import {
   AttachmentLightbox,
   getAttachmentHandler,
@@ -114,18 +115,19 @@ function LinkPreviewThumbnail({ entry }: { entry: LinkPreviewEntry }) {
     );
   }
 
-  if (!entry.metadata) return null;
-
+  // Metadata fetch can fail; fall back to the bare URL so the link stays usable.
   const { metadata } = entry;
+  const domain = metadata?.domain ?? domainFromUrl(entry.url);
+  const title = metadata?.title ?? entry.url;
 
   return (
     <button
       type="button"
-      onClick={() => platform.link.openExternal(metadata.url)}
+      onClick={() => platform.link.openExternal(metadata?.url ?? entry.url)}
       className="flex h-16 w-28 shrink-0 flex-col justify-center gap-1 overflow-hidden rounded-lg bg-white/10 px-2 py-1.5 text-left transition-colors hover:bg-white/15"
     >
       <div className="flex items-center gap-1 text-[10px] text-white/40">
-        {metadata.favicon ? (
+        {metadata?.favicon ? (
           <img
             src={metadata.favicon}
             alt=""
@@ -137,11 +139,11 @@ function LinkPreviewThumbnail({ entry }: { entry: LinkPreviewEntry }) {
         ) : (
           <Globe className="size-3" />
         )}
-        <span className="truncate">{metadata.domain}</span>
+        <span className="truncate">{domain}</span>
       </div>
-      {metadata.title && (
+      {title && (
         <p className="line-clamp-2 text-[11px] font-medium leading-tight text-white/80">
-          {metadata.title}
+          {title}
         </p>
       )}
     </button>

js/desktop/src/features/compose/compose-overlay.tsx

@@ -19,7 +19,9 @@ import { RecordingOverlay } from '@/features/compose/recording-overlay';
 import { ScreenSourcePicker } from '@/components/screen-source-picker';
 import { KeyHint } from '@/components/key-hint';
 import { TextComposeStep } from '@/features/compose/text-compose-step';
-import { ConfigureStreamStep } from '@/features/compose/configure-stream-step';
+import { TaskComposeStep } from '@/features/compose/task-compose-step';
+import { ConfigureContainerStep } from '@/features/compose/configure-container-step';
+import type { TaskProperties } from '@/api/types';
 import { apiClient } from '@/api/client';
 import { useMediaSettingsStore } from '@/stores/media-settings-store';
 import { useMediaDevicesStore } from '@/stores/media-devices-store';
@@ -40,11 +42,14 @@ export type ComposeStep =
   | 'recording'
   | 'reviewing'
   | 'typing'
+  | 'task'
   | 'configuring'
   | 'submitting';
 
 type RecordingSource = 'media' | 'screen';
 
+type PendingArtifact = { type: 'task'; properties: TaskProperties };
+
 interface ComposeOverlayProps {
   networkId: string;
   // Optional target path for reply mode. If not provided, compose creates a new stream.
@@ -52,8 +57,6 @@ interface ComposeOverlayProps {
   onActiveChange?: (active: boolean) => void;
   onStepChange?: (step: ComposeStep) => void;
   onParticleCreated?: (particleId: string) => void;
-  /** When true, composing is blocked (e.g. stream is closed). */
-  disabled?: boolean;
 }
 
 const HOLD_THRESHOLD_MS = 250;
@@ -68,7 +71,6 @@ export function ComposeOverlay({
   onActiveChange,
   onStepChange,
   onParticleCreated,
-  disabled,
 }: ComposeOverlayProps) {
   const [step, setStep] = useState<ComposeStep>('idle');
   const [error, setError] = useState<string | null>(null);
@@ -98,14 +100,14 @@ export function ComposeOverlay({
   // Latest props/state for synchronous reads in keyboard handlers.
   const stepRef = useRef(step);
   const recordStartRef = useRef(0);
-  const disabledRef = useRef(disabled);
   const quotaExhaustedRef = useRef(quotaExhausted);
   const recordingSourceRef = useRef(recordingSource);
+
+  const pendingArtifactRef = useRef<PendingArtifact | null>(null);
   useEffect(() => {
-    disabledRef.current = disabled;
     quotaExhaustedRef.current = quotaExhausted;
     recordingSourceRef.current = recordingSource;
-  }, [disabled, quotaExhausted, recordingSource]);
+  }, [quotaExhausted, recordingSource]);
 
   const setStepSync = useCallback((next: ComposeStep) => {
     stepRef.current = next;
@@ -142,6 +144,7 @@ export function ComposeOverlay({
     setReviewDurationMs(0);
     setReviewMimeType(null);
     setRecordingSource('media');
+    pendingArtifactRef.current = null;
     setAttachments((prev) => {
       revokeAttachmentThumbnails(prev);
       return [];
@@ -330,7 +333,15 @@ export function ComposeOverlay({
       if (!userId) return;
 
       let particleId: undefined | string;
-      if (textContent.trim()) {
+      const pendingArtifact = pendingArtifactRef.current;
+      if (pendingArtifact) {
+        particleId = await createParticle.mutateAsync({
+          path,
+          type: pendingArtifact.type,
+          properties: pendingArtifact.properties,
+          createdByHumanId: userId,
+        });
+      } else if (textContent.trim()) {
         particleId = await createParticle.mutateAsync({
           path,
           type: 'text',
@@ -454,14 +465,10 @@ export function ComposeOverlay({
   // --- Compose intent handlers ---
   // Single source of truth for the step transitions triggered by the user.
   // Both the keyboard handler and the intent store dispatch into these so
-  // guards (disabled, quota) and screen-vs-media branching live in one place.
+  // guards (quota) and screen-vs-media branching live in one place.
 
   const guardIdle = useCallback((): boolean => {
     if (stepRef.current !== 'idle') return false;
-    if (disabledRef.current) {
-      toast.info('This stream is closed');
-      return false;
-    }
     if (quotaExhaustedRef.current) {
       toast.info(
         'Daily message limit reached. Upgrade to Pro to keep sending.',
@@ -484,6 +491,26 @@ export function ComposeOverlay({
     setStepSync('typing');
   }, [guardIdle, setStepSync]);
 
+  const handleTaskIntent = useCallback(() => {
+    if (!guardIdle()) return;
+    setStepSync('task');
+  }, [guardIdle, setStepSync]);
+
+  // Artifact submit: capture the artifact, then reuse the standard flow —
+  // reply mode creates it under targetPath, root mode configures a stream
+  // that will hold it as its first child.
+  const handleArtifactSubmit = useCallback(
+    (artifact: PendingArtifact) => {
+      pendingArtifactRef.current = artifact;
+      if (targetPath) {
+        void onSubmitReply();
+      } else {
+        setStepSync('configuring');
+      }
+    },
+    [targetPath, onSubmitReply, setStepSync],
+  );
+
   const handleStopIntent = useCallback(() => {
     if (stepRef.current !== 'recording') return;
     if (recordingSourceRef.current === 'screen') {
@@ -537,6 +564,9 @@ export function ComposeOverlay({
         case 'text':
           handleTextIntent();
           break;
+        case 'task':
+          handleTaskIntent();
+          break;
         case 'stop':
           handleStopIntent();
           break;
@@ -552,6 +582,7 @@ export function ComposeOverlay({
   }, [
     handleRecordIntent,
     handleTextIntent,
+    handleTaskIntent,
     handleStopIntent,
     handleCancelIntent,
     handleSendIntent,
@@ -566,6 +597,7 @@ export function ComposeOverlay({
 
       if (
         currentStep === 'typing' ||
+        currentStep === 'task' ||
         currentStep === 'configuring' ||
         currentStep === 'picking'
       ) {
@@ -599,6 +631,9 @@ export function ComposeOverlay({
           } else if (e.key === 't' || e.key === 'T') {
             e.preventDefault();
             handleTextIntent();
+          } else if (e.key === 'd' || e.key === 'D') {
+            e.preventDefault();
+            handleTaskIntent();
           }
           break;
         }
@@ -666,6 +701,7 @@ export function ComposeOverlay({
     guardIdle,
     handleRecordIntent,
     handleTextIntent,
+    handleTaskIntent,
     handleStopIntent,
     handleCancelIntent,
     handleSendIntent,
@@ -774,8 +810,17 @@ export function ComposeOverlay({
           dropZoneProps={dropZoneProps}
         />
       )}
+      {step === 'task' && (
+        <TaskComposeStep
+          networkId={networkId}
+          onCancel={cancel}
+          onSubmit={(properties) =>
+            handleArtifactSubmit({ type: 'task', properties })
+          }
+        />
+      )}
       {!targetPath && step === 'configuring' && (
-        <ConfigureStreamStep
+        <ConfigureContainerStep
           networkId={networkId}
           onCancel={cancel}
           onSubmit={handleStreamSubmit}

js/desktop/src/features/compose/configure-container-step.tsx

@@ -10,17 +10,20 @@ import { Label } from '@/components/ui/label';
 import { Checkbox } from '@/components/ui/checkbox';
 import { ScrollArea } from '@/components/ui/scroll-area';
 
-interface ConfigureStreamStepProps {
+interface ConfigureContainerStepProps {
+  /** Drives labels and hints; the form is identical for both kinds. */
+  kind?: 'stream' | 'folder';
   networkId: string | null;
   onCancel: () => void;
-  onSubmit: (streamName: string, visibleTo: string[]) => void;
+  onSubmit: (name: string, visibleTo: string[]) => void;
 }
 
-export function ConfigureStreamStep({
+export function ConfigureContainerStep({
+  kind = 'stream',
   networkId,
   onCancel,
   onSubmit,
-}: ConfigureStreamStepProps) {
+}: ConfigureContainerStepProps) {
   const { data: networks } = useNetworks();
   const network = networks?.find((n) => n.id === networkId);
 
@@ -79,9 +82,10 @@ export function ConfigureStreamStep({
       tabIndex={-1}
     >
       <div className="mx-auto w-full max-w-sm space-y-4 px-6">
-        {/* Stream name */}
         <div>
-          <Label className="mb-1 text-xs text-white/50">Stream name</Label>
+          <Label className="mb-1 text-xs text-white/50">
+            {kind === 'folder' ? 'Folder name' : 'Stream name'}
+          </Label>
           <Input
             type="text"
             autoFocus
@@ -165,7 +169,7 @@ export function ConfigureStreamStep({
         <KeyHint
           keys={`${metaKey}+Enter`}
           onClick={handleSubmit}
-          title={`Create stream (or press ${metaKey}+Enter)`}
+          title={`Create ${kind} (or press ${metaKey}+Enter)`}
         >
           create
         </KeyHint>

js/desktop/src/features/compose/markdown-editor.css

@@ -57,6 +57,80 @@
 .llink-crepe .milkdown .ProseMirror {
   padding: 0;
   outline: none;
+  caret-color: white;
+}
+
+/* Crepe's default heading scale (42px h1) is sized for a document editor;
+ * tighten it to message-card proportions. Applies to compose and read-only
+ * alike so the editing view matches the posted card. */
+.llink-crepe .milkdown .ProseMirror h1 {
+  font-size: 1.875rem;
+  line-height: 2.375rem;
+  font-weight: 600;
+  margin-top: 24px;
+}
+
+.llink-crepe .milkdown .ProseMirror h2 {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-weight: 600;
+  margin-top: 20px;
+}
+
+.llink-crepe .milkdown .ProseMirror h3 {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+  margin-top: 16px;
+}
+
+.llink-crepe .milkdown .ProseMirror h4 {
+  font-size: 1.125rem;
+  line-height: 1.625rem;
+  font-weight: 600;
+  margin-top: 12px;
+}
+
+.llink-crepe .milkdown .ProseMirror h5 {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 600;
+  margin-top: 12px;
+}
+
+.llink-crepe .milkdown .ProseMirror h6 {
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+  font-weight: 700;
+  margin-top: 12px;
+  color: rgb(255 255 255 / 0.7);
+}
+
+.llink-crepe .milkdown .ProseMirror > :first-child {
+  margin-top: 0;
+}
+
+/* Images come from URLs only (no stable public upload URL), so hide the
+ * file uploader — the placeholder then just prompts for a link. */
+.llink-crepe
+  .milkdown
+  :is(.milkdown-image-block, .milkdown-image-inline)
+  .placeholder
+  .uploader {
+  display: none;
+}
+
+/* Read-only renders the image node view with inert editing chrome — hide it. */
+.llink-crepe:not(.llink-crepe--fill) .milkdown .milkdown-image-block .operation,
+.llink-crepe:not(.llink-crepe--fill)
+  .milkdown
+  .milkdown-image-block
+  .image-resize-handle {
+  display: none;
+}
+
+.llink-crepe .milkdown .milkdown-image-block img {
+  border-radius: 8px;
 }
 
 /* Editing context: fill the compose card and scroll internally so a long
@@ -71,8 +145,10 @@
 }
 
 /* Pad the content (not the card) so the slash menu — which Crepe appends to
- * .milkdown — can use the full card width/height before clipping. */
+ * .milkdown — can use the full card width/height before clipping. The shared
+ * layout variables (globals.css) keep the editor's content column identical
+ * to the posted card's, and the gutter fits the block drag handle. */
 .llink-crepe--fill .milkdown .ProseMirror {
   min-height: 100%;
-  padding: 1.25rem;
+  padding: var(--message-card-padding) var(--message-editor-gutter);
 }

js/desktop/src/features/compose/markdown-editor.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { Crepe } from '@milkdown/crepe';
+import { editorViewCtx } from '@milkdown/kit/core';
+import { Selection } from '@milkdown/kit/prose/state';
 import '@milkdown/crepe/theme/common/style.css';
 import '@milkdown/crepe/theme/frame-dark.css';
 import './markdown-editor.css';
@@ -55,13 +57,23 @@ export function MarkdownEditor({
         [Crepe.Feature.BlockEdit]: !readOnly,
         [Crepe.Feature.Toolbar]: !readOnly,
         [Crepe.Feature.Placeholder]: !readOnly,
-        [Crepe.Feature.ImageBlock]: false,
+        [Crepe.Feature.ImageBlock]: true,
         [Crepe.Feature.Latex]: false,
         [Crepe.Feature.TopBar]: false,
         [Crepe.Feature.AI]: false,
       },
       featureConfigs: {
         [Crepe.Feature.Placeholder]: { text: placeholder ?? '' },
+        // Images come from URLs only (e.g. pasted markdown) — there is no
+        // stable public upload URL, so the file uploader is hidden in CSS and
+        // onUpload rejects in case a file ever reaches it anyway (the default
+        // would serialize an ephemeral blob: URL into the message).
+        [Crepe.Feature.ImageBlock]: {
+          blockUploadPlaceholderText: 'Paste an image link…',
+          inlineUploadPlaceholderText: 'paste an image link',
+          maxHeight: 420,
+          onUpload: () => Promise.reject(new Error('Image uploads disabled')),
+        },
       },
     });
 
@@ -82,7 +94,18 @@ export function MarkdownEditor({
       }
       created = crepe;
       if (autoFocus && !readOnly) {
-        root.querySelector<HTMLElement>('.ProseMirror')?.focus();
+        // Place the caret at the end of the document — the editor often mounts
+        // mid-typing (immersive → card flip), where start-of-doc would strand
+        // the user. Selection-only transactions don't echo markdownUpdated.
+        crepe.editor.action((ctx) => {
+          const view = ctx.get(editorViewCtx);
+          view.dispatch(
+            view.state.tr
+              .setSelection(Selection.atEnd(view.state.doc))
+              .scrollIntoView(),
+          );
+          view.focus();
+        });
       }
     });
 
@@ -97,7 +120,11 @@ export function MarkdownEditor({
   return (
     <div
       ref={rootRef}
-      className={cn('llink-crepe', !readOnly && 'llink-crepe--fill', className)}
+      className={cn(
+        'llink-crepe',
+        !readOnly && 'llink-crepe--fill scrollbar-card',
+        className,
+      )}
     />
   );
 }

js/desktop/src/features/compose/task-compose-step.tsx

@@ -0,0 +1,125 @@
+import { useCallback, useState } from 'react';
+import type { TaskProperties } from '@/api/types';
+import { useNetwork } from '@/hooks/use-networks';
+import { metaKey } from '@/lib/platform';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { KeyHint } from '@/components/key-hint';
+
+const UNASSIGNED = 'unassigned';
+
+interface TaskComposeStepProps {
+  networkId: string;
+  onCancel: () => void;
+  onSubmit: (properties: TaskProperties) => void;
+}
+
+/**
+ * Minimal task creation form. Checklist items are added after creation in
+ * the always-editable task view, keeping this step a quick capture.
+ */
+export function TaskComposeStep({
+  networkId,
+  onCancel,
+  onSubmit,
+}: TaskComposeStepProps) {
+  const network = useNetwork(networkId);
+  const [title, setTitle] = useState('');
+  const [notes, setNotes] = useState('');
+  const [assignedTo, setAssignedTo] = useState<string>(UNASSIGNED);
+
+  const handleSubmit = useCallback(() => {
+    const trimmed = title.trim();
+    if (!trimmed) return;
+    onSubmit({
+      title: trimmed,
+      ...(notes.trim() && { notes: notes.trim() }),
+      ...(assignedTo !== UNASSIGNED && { assigned_to: assignedTo }),
+      checklist: [],
+      done: false,
+    });
+  }, [title, notes, assignedTo, onSubmit]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onCancel();
+      } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [onCancel, handleSubmit],
+  );
+
+  return (
+    <div
+      className="absolute inset-0 z-50 flex flex-col bg-black/90 pt-16"
+      onKeyDown={handleKeyDown}
+      tabIndex={-1}
+    >
+      <div className="mx-auto w-full max-w-sm space-y-4 px-6">
+        <div>
+          <Label className="mb-1 text-xs text-white/50">Task</Label>
+          <Input
+            type="text"
+            autoFocus
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="What needs to get done?"
+            className="border-white/10 bg-white/5 text-white placeholder-white/30 focus-visible:border-white/30 focus-visible:ring-0"
+          />
+        </div>
+
+        <div>
+          <Label className="mb-1 text-xs text-white/50">Notes</Label>
+          <Textarea
+            value={notes}
+            onChange={(e) => setNotes(e.target.value)}
+            placeholder="Optional details…"
+            className="min-h-20 border-white/10 bg-white/5 text-white placeholder:text-white/30 focus-visible:border-white/30 focus-visible:ring-0 dark:bg-white/5"
+          />
+        </div>
+
+        <div>
+          <Label className="mb-1 text-xs text-white/50">Assign to</Label>
+          <Select value={assignedTo} onValueChange={setAssignedTo}>
+            <SelectTrigger className="w-full border-white/10 bg-white/5 text-white">
+              <SelectValue placeholder="Unassigned" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value={UNASSIGNED}>Unassigned</SelectItem>
+              {network?.humans?.map((human) => (
+                <SelectItem key={human.id} value={human.id}>
+                  {human.email_prefix}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <div className="absolute bottom-8 left-0 right-0 flex items-center justify-center gap-4 text-sm text-white/50">
+        <KeyHint keys="Esc" onClick={onCancel} title="Cancel (or press Esc)">
+          cancel
+        </KeyHint>
+        <KeyHint
+          keys={`${metaKey}+Enter`}
+          onClick={handleSubmit}
+          title={`Create task (or press ${metaKey}+Enter)`}
+        >
+          create
+        </KeyHint>
+      </div>
+    </div>
+  );
+}

js/desktop/src/features/compose/text-editor.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useRef, useCallback, useState } from 'react';
 import { Paperclip } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { getImmersiveTextStyle } from '@/lib/immersive-text';
+import { hasMarkdownFormatting } from '@/lib/markdown';
 import { metaKey } from '@/lib/platform';
 import { useAllLinkMetadata } from '@/hooks/use-link-metadata';
 import { AttachmentStrip } from '@/features/compose/attachment-strip';
@@ -35,12 +37,6 @@ interface TextEditorProps {
 
 const IMMERSIVE_CHAR_LIMIT = 120;
 
-function getImmersiveTextStyle(length: number) {
-  if (length < 70) return { size: 'text-5xl', weight: 'font-semibold' };
-  if (length < 130) return { size: 'text-3xl', weight: 'font-semibold' };
-  return { size: 'text-2xl', weight: 'font-normal' };
-}
-
 export function TextEditor({
   textContent,
   onTextChange,
@@ -50,7 +46,9 @@ export function TextEditor({
   attachmentProps,
 }: TextEditorProps) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const [forceCardMode, setForceCardMode] = useState(false);
+  // Card mode latches: once the message needs the full editor, snapping back
+  // to immersive mid-edit would be jarring, so it stays for the session.
+  const [carded, setCarded] = useState(false);
 
   const [debouncedText, setDebouncedText] = useState(textContent);
   useEffect(() => {
@@ -61,13 +59,16 @@ export function TextEditor({
 
   const attachmentCount = attachmentProps?.attachments.length ?? 0;
   const hasEnrichments = attachmentCount > 0 || linkPreviews.length > 0;
-  const immersive =
-    textContent.length < IMMERSIVE_CHAR_LIMIT &&
-    !hasEnrichments &&
-    !forceCardMode;
+  const shouldCard =
+    !carded &&
+    (textContent.length >= IMMERSIVE_CHAR_LIMIT ||
+      hasEnrichments ||
+      hasMarkdownFormatting(textContent));
+  if (shouldCard) setCarded(true);
+  const immersive = !carded;
 
-  // Keep the immersive textarea focused with the caret at the end when we
-  // (re)enter it. The card-mode editor manages its own focus.
+  // Keep the immersive textarea focused with the caret at the end on mount.
+  // The card-mode editor manages its own focus.
   useEffect(() => {
     if (!immersive) return;
     const t = setTimeout(() => {
@@ -95,7 +96,7 @@ export function TextEditor({
       } else if (e.key === 'm' && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
         e.stopPropagation();
-        setForceCardMode(true);
+        setCarded(true);
       }
     },
     [onCancel, onSubmit, textContent],
@@ -127,7 +128,7 @@ export function TextEditor({
       {immersive && (
         <KeyHint
           keys={`${metaKey}+M`}
-          onClick={() => setForceCardMode(true)}
+          onClick={() => setCarded(true)}
           title={`Switch to markdown editor (or press ${metaKey}+M)`}
         >
           markdown
@@ -194,7 +195,7 @@ export function TextEditor({
       {...dropZoneProps}
       onKeyDownCapture={handleKeyDown}
     >
-      <div className="mx-8 flex h-[calc(100%-8rem)] w-full min-w-0 flex-col overflow-hidden rounded border border-white/10 bg-white/5 backdrop-blur-xl">
+      <div className="mx-8 flex h-[calc(100%-8rem)] w-full min-w-0 max-w-[calc(var(--message-content-width)_+_var(--message-editor-gutter)*2)] flex-col overflow-hidden rounded border border-white/10 bg-white/5 backdrop-blur-xl animate-in fade-in zoom-in-95 duration-200">
         {/* No padding here: the editor's own scroll box hosts the slash menu,
             so we pad inside the editor (ProseMirror) instead. That keeps the
             menu's clipping bounds the full card rather than the inset box. */}

js/desktop/src/features/layout.tsx

@@ -16,30 +16,12 @@ import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { useNetworks } from '@/hooks/use-networks';
 import { particlePath } from '@/lib/particle-path';
 import { useParticle } from '@/hooks/use-particle';
-import type { Particle } from '@/api/types';
+import { getParticleDisplayName } from '@/lib/particle-display';
 import { PropsWithChildren, useCallback } from 'react';
 import { useDockBadge } from '@/hooks/use-dock-badge';
 import { toast } from 'sonner';
 import { RouteErrorBoundary } from '@/components/app-error-boundary';
 
-function getParticleDisplayName(particle: Particle): string {
-  switch (particle.type) {
-    case 'stream':
-    case 'folder':
-      return particle.properties.name;
-    case 'quest':
-      return particle.properties.title;
-    case 'paper':
-      return particle.properties.title;
-    case 'file':
-      return particle.properties.filename;
-    case 'text':
-      return particle.properties.content.slice(0, 30);
-    case 'media':
-      return particle.type;
-  }
-}
-
 function NetworkBreadcrumbContent({ networkId }: { networkId: string }) {
   const { data: networks } = useNetworks();
   const network = networks?.find((n) => n.id === networkId);

js/desktop/src/features/network-root.tsx

@@ -1,126 +1,15 @@
-import { useCallback, useState } from 'react';
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
-import { CircleDot, CircleCheckBig } from 'lucide-react';
+import { useParams } from 'react-router-dom';
 import { particlePath } from '@/lib/particle-path';
-import { ParticleListView } from '@/features/particles/particle-list-view';
-import { VideoAudioToggle } from '@/components/video-audio-toggle';
-import { KeyHint } from '@/components/key-hint';
-import { ComposeOverlay } from './compose/compose-overlay';
-import { useComposeIntentStore } from '@/stores/compose-intent-store';
-import { ComposeQuotaIndicator } from './compose/compose-quota-indicator';
-import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { useStreamParticles } from '@/hooks/use-stream-particles';
-import { useStreamKeyboardNav } from '@/hooks/use-stream-keyboard-nav';
+import { ContainerView } from '@/features/particles/container-view';
 
 /**
- * Route-level component for /:networkId (index).
- * Shows root-level particles for the selected network.
+ * Route-level component for /:networkId (index). The network root behaves
+ * like a folder: a container of streams, folders, and loose particles.
  */
 export default function NetworkRoot() {
   const { networkId } = useParams();
   if (!networkId)
     throw new Error('NetworkRoot requires a :networkId route param');
-  const navigate = useNavigate();
-  const path = particlePath(networkId, []);
 
-  const [composeActive, setComposeActive] = useState(false);
-  const [searchParams, setSearchParams] = useSearchParams();
-  const statusTab: 'open' | 'closed' =
-    searchParams.get('status') === 'closed' ? 'closed' : 'open';
-  const setStatusTab = (next: 'open' | 'closed') => {
-    setSearchParams(
-      (prev) => {
-        const params = new URLSearchParams(prev);
-        params.set('status', next);
-        return params;
-      },
-      { replace: true },
-    );
-  };
-
-  const { streams, isLoading, canLoadMore, loadMore } = useStreamParticles(
-    path,
-    {
-      status: statusTab,
-    },
-  );
-
-  const { selectedIndex } = useStreamKeyboardNav({
-    streams,
-    enabled: !composeActive,
-    onNavigate: useCallback(
-      (streamId: string) => navigate(`/${networkId}/${streamId}`),
-      [navigate, networkId],
-    ),
-  });
-
-  return (
-    <div className="relative flex min-h-0 flex-1 flex-col">
-      <div className="flex shrink-0 items-center p-1 border-b">
-        <Tabs
-          value={statusTab}
-          onValueChange={(v) =>
-            setStatusTab(v === 'closed' ? 'closed' : 'open')
-          }
-        >
-          <TabsList>
-            <TabsTrigger value="open">
-              <CircleDot className="size-3 text-green-500" /> Open
-            </TabsTrigger>
-            <TabsTrigger value="closed">
-              <CircleCheckBig className="size-3" /> Closed
-            </TabsTrigger>
-          </TabsList>
-        </Tabs>
-      </div>
-
-      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain pb-14 py-2">
-        <ParticleListView
-          streams={streams}
-          networkId={networkId}
-          isLoading={isLoading}
-          selectedIndex={selectedIndex}
-          canLoadMore={canLoadMore}
-          onLoadMore={loadMore}
-        />
-      </div>
-
-      <ComposeOverlay networkId={networkId} onActiveChange={setComposeActive} />
-      {!composeActive && (
-        <div className="pointer-events-none absolute inset-x-0 bottom-16 z-20 flex justify-center px-3">
-          <ComposeQuotaIndicator networkId={networkId} />
-        </div>
-      )}
-      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 flex justify-center p-3">
-        <div className="pointer-events-auto">
-          <NetworkRootControls />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function NetworkRootControls() {
-  const requestIntent = useComposeIntentStore((s) => s.request);
-  return (
-    <div className="flex items-center gap-4 text-sm text-white/50">
-      <KeyHint keys={['↑↓', 'Enter']}>navigate</KeyHint>
-      <KeyHint keys="1–9">jump</KeyHint>
-      <VideoAudioToggle />
-      <KeyHint
-        keys="Hold `"
-        onClick={() => requestIntent('record')}
-        title="Start recording (or hold `)"
-      >
-        to start
-      </KeyHint>
-      <KeyHint
-        keys="T"
-        onClick={() => requestIntent('text')}
-        title="Compose text (or press T)"
-      >
-        text
-      </KeyHint>
-    </div>
-  );
+  return <ContainerView path={particlePath(networkId, [])} />;
 }

js/desktop/src/features/particles/container-view.tsx

@@ -0,0 +1,269 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { CircleCheckBig, CircleDot, FolderIcon } from 'lucide-react';
+import type { Particle } from '@/api/types';
+import { parseParticlePath, type ParticlePath } from '@/lib/particle-path';
+import { useAuthStore } from '@/stores/auth-store';
+import { useContainerChildren } from '@/hooks/use-container-children';
+import { useListKeyboardNav } from '@/hooks/use-list-keyboard-nav';
+import {
+  useCreateParticle,
+  useCreateStreamParticle,
+} from '@/hooks/use-create-particle';
+import { ParticleChildrenList } from '@/features/particles/particle-children-list';
+import { ComposeOverlay } from '@/features/compose/compose-overlay';
+import { ComposeQuotaIndicator } from '@/features/compose/compose-quota-indicator';
+import { ConfigureContainerStep } from '@/features/compose/configure-container-step';
+import { useComposeIntentStore } from '@/stores/compose-intent-store';
+import { VideoAudioToggle } from '@/components/video-audio-toggle';
+import { KeyHint } from '@/components/key-hint';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+
+type ContainerKind = 'stream' | 'folder';
+
+interface ContainerViewProps {
+  /** Path of the container; network root when it has no segments. */
+  path: ParticlePath;
+  /** Present when the container is a folder particle (drives the header). */
+  folderParticle?: Particle & { type: 'folder' };
+}
+
+/**
+ * Browsable view of a container's children — used for both the network root
+ * and folders, which share the same structure: a mixed-type child list, the
+ * compose overlay, and one keyboard grammar. The root is just a folder
+ * without a doc.
+ */
+export function ContainerView({ path, folderParticle }: ContainerViewProps) {
+  const { networkId, segments } = parseParticlePath(path);
+  const isRoot = segments.length === 0;
+  const navigate = useNavigate();
+  const userId = useAuthStore((s) => s.user?.id);
+
+  const [composeActive, setComposeActive] = useState(false);
+  const [creating, setCreating] = useState<ContainerKind | null>(null);
+
+  const [searchParams, setSearchParams] = useSearchParams();
+  const statusTab: 'open' | 'closed' =
+    searchParams.get('status') === 'closed' ? 'closed' : 'open';
+  const setStatusTab = (next: 'open' | 'closed') => {
+    setSearchParams(
+      (prev) => {
+        const params = new URLSearchParams(prev);
+        params.set('status', next);
+        return params;
+      },
+      { replace: true },
+    );
+  };
+
+  // Folders are shelved for now: the root lists streams only, split by
+  // open/closed status (server-side filter, like before folders). Folder
+  // containers keep the mixed-type child list so the recursive container
+  // model can be revived later.
+  const { items, isLoading, canLoadMore, loadMore } = useContainerChildren(
+    path,
+    { streamStatus: isRoot ? statusTab : undefined },
+  );
+
+  const createParticle = useCreateParticle();
+  const createStream = useCreateStreamParticle();
+
+  const handleOpen = useCallback(
+    (particleId: string) => {
+      navigate(`/${networkId}/${[...segments, particleId].join('/')}`);
+    },
+    [navigate, networkId, segments],
+  );
+
+  const { selectedIndex } = useListKeyboardNav({
+    items,
+    enabled: !composeActive && creating === null,
+    onOpen: handleOpen,
+  });
+
+  // N creates a stream inside a folder. Root stream creation goes through the
+  // compose flow.
+  useEffect(() => {
+    if (isRoot || composeActive || creating !== null) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.defaultPrevented) return;
+      const target = e.target as HTMLElement;
+      if (
+        target.tagName === 'INPUT' ||
+        target.tagName === 'TEXTAREA' ||
+        target.isContentEditable
+      ) {
+        return;
+      }
+      if (e.key === 'n' || e.key === 'N') {
+        e.preventDefault();
+        setCreating('stream');
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isRoot, composeActive, creating]);
+
+  const handleCreateContainer = useCallback(
+    async (name: string, visibleTo: string[]) => {
+      if (!userId || !creating) return;
+      const kind = creating;
+      setCreating(null);
+      const id =
+        kind === 'folder'
+          ? await createParticle.mutateAsync({
+              path,
+              type: 'folder',
+              properties: { name },
+              createdByHumanId: userId,
+              visibleTo,
+            })
+          : await createStream.mutateAsync({
+              networkId,
+              parentPath: path,
+              properties: { name },
+              createdByHumanId: userId,
+              visibleTo,
+            });
+      handleOpen(id);
+    },
+    [
+      userId,
+      creating,
+      path,
+      networkId,
+      createParticle,
+      createStream,
+      handleOpen,
+    ],
+  );
+
+  return (
+    <div className="relative flex min-h-0 flex-1 flex-col">
+      {isRoot && (
+        <div className="flex shrink-0 items-center border-b p-1">
+          <Tabs
+            value={statusTab}
+            onValueChange={(v) =>
+              setStatusTab(v === 'closed' ? 'closed' : 'open')
+            }
+          >
+            <TabsList>
+              <TabsTrigger value="open">
+                <CircleDot className="size-3 text-green-500" /> Open
+              </TabsTrigger>
+              <TabsTrigger value="closed">
+                <CircleCheckBig className="size-3" /> Closed
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+      )}
+      {folderParticle && (
+        <div className="flex shrink-0 items-center gap-2 border-b px-4 py-3">
+          <span className="flex size-7 items-center justify-center rounded-md bg-amber-500/15">
+            <FolderIcon className="size-4 text-amber-500" />
+          </span>
+          <h1 className="truncate text-sm font-semibold">
+            {folderParticle.properties.name}
+          </h1>
+        </div>
+      )}
+
+      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain pb-14 py-2">
+        <ParticleChildrenList
+          items={items}
+          networkId={networkId}
+          isLoading={isLoading}
+          onOpen={handleOpen}
+          selectedIndex={selectedIndex}
+          canLoadMore={canLoadMore}
+          onLoadMore={loadMore}
+          emptyMessage={
+            !isRoot
+              ? 'This folder is empty. Add something using the keyboard shortcuts below.'
+              : statusTab === 'closed'
+                ? 'No closed streams.'
+                : 'No streams here. Start a conversation using the keyboard shortcuts below.'
+          }
+        />
+      </div>
+
+      <ComposeOverlay
+        networkId={networkId}
+        targetPath={isRoot ? undefined : path}
+        onActiveChange={setComposeActive}
+      />
+      {!composeActive && (
+        <div className="pointer-events-none absolute inset-x-0 bottom-16 z-20 flex justify-center px-3">
+          <ComposeQuotaIndicator networkId={networkId} />
+        </div>
+      )}
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 flex justify-center p-3">
+        <div className="pointer-events-auto">
+          <ContainerControls
+            isRoot={isRoot}
+            onCreateStream={() => setCreating('stream')}
+          />
+        </div>
+      </div>
+
+      {creating && (
+        <ConfigureContainerStep
+          kind={creating}
+          networkId={networkId}
+          onCancel={() => setCreating(null)}
+          onSubmit={handleCreateContainer}
+        />
+      )}
+    </div>
+  );
+}
+
+function ContainerControls({
+  isRoot,
+  onCreateStream,
+}: {
+  isRoot: boolean;
+  onCreateStream: () => void;
+}) {
+  const requestIntent = useComposeIntentStore((s) => s.request);
+  return (
+    <div className="flex items-center gap-4 text-sm text-white/50">
+      <KeyHint keys={['↑↓', 'Enter']}>navigate</KeyHint>
+      <KeyHint keys="1–9">jump</KeyHint>
+      <VideoAudioToggle />
+      <KeyHint
+        keys="Hold `"
+        onClick={() => requestIntent('record')}
+        title="Start recording (or hold `)"
+      >
+        to start
+      </KeyHint>
+      <KeyHint
+        keys="T"
+        onClick={() => requestIntent('text')}
+        title="Compose text (or press T)"
+      >
+        text
+      </KeyHint>
+      <KeyHint
+        keys="D"
+        onClick={() => requestIntent('task')}
+        title="Create a task (or press D)"
+      >
+        task
+      </KeyHint>
+      {!isRoot && (
+        <KeyHint
+          keys="N"
+          onClick={onCreateStream}
+          title="Create a stream here (or press N)"
+        >
+          stream
+        </KeyHint>
+      )}
+    </div>
+  );
+}

js/desktop/src/features/particles/delete-particle-overlay.tsx

@@ -2,21 +2,25 @@ import { useCallback, useState } from 'react';
 import { toast } from 'sonner';
 import { ConfirmDestructiveOverlay } from '@/components/confirm-destructive-overlay';
 import { softDeleteParticle } from '@/lib/firestore-particles';
-import { particlePath, toFirestoreDocPath } from '@/lib/particle-path';
+import {
+  particlePath,
+  parseParticlePath,
+  toFirestoreDocPath,
+  type ParticlePath,
+} from '@/lib/particle-path';
 import type { Particle } from '@/api/types';
 import { useSuspendPlayback } from '@/hooks/use-suspend-playback';
 
 interface DeleteParticleOverlayProps {
-  networkId: string;
-  streamId: string;
+  /** Path of the stream the particle lives in — may be nested. */
+  streamPath: ParticlePath;
   particle: Particle;
   userId: string;
   onClose: () => void;
 }
 
 export function DeleteParticleOverlay({
-  networkId,
-  streamId,
+  streamPath,
   particle,
   userId,
   onClose,
@@ -29,8 +33,9 @@ export function DeleteParticleOverlay({
     if (deleting) return;
     setDeleting(true);
     try {
+      const { networkId, segments } = parseParticlePath(streamPath);
       const docPath = toFirestoreDocPath(
-        particlePath(networkId, [streamId, particle.id]),
+        particlePath(networkId, [...segments, particle.id]),
       );
       await softDeleteParticle(docPath, userId);
       toast.success('Particle deleted');
@@ -41,7 +46,7 @@ export function DeleteParticleOverlay({
       toast.error(message);
       setDeleting(false);
     }
-  }, [deleting, networkId, onClose, particle.id, streamId, userId]);
+  }, [deleting, onClose, particle.id, streamPath, userId]);
 
   return (
     <ConfirmDestructiveOverlay

js/desktop/src/features/particles/fallback-particle-view.tsx

@@ -6,17 +6,11 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-import {
-  FileIcon,
-  HelpCircleIcon,
-  ScrollTextIcon,
-  BookOpenIcon,
-} from 'lucide-react';
+import { FileIcon, HelpCircleIcon, BookOpenIcon } from 'lucide-react';
 import { useNetwork } from '@/hooks/use-networks';
 import { resolveHumanDisplay } from '@/lib/humans';
 
 const TYPE_META: Record<string, { icon: typeof FileIcon; label: string }> = {
-  quest: { icon: ScrollTextIcon, label: 'Quest' },
   paper: { icon: BookOpenIcon, label: 'Paper' },
   file: { icon: FileIcon, label: 'File' },
 };
@@ -37,19 +31,19 @@ export function FallbackParticleView({
   );
   const meta = TYPE_META[particle.type] ?? {
     icon: HelpCircleIcon,
-    label: particle.type,
+    label: particle.type === 'unknown' ? particle.raw_type : particle.type,
   };
   const Icon = meta.icon;
   const title = (() => {
     switch (particle.type) {
-      case 'quest':
-        return particle.properties.title;
       case 'paper':
         return particle.properties.title;
       case 'file':
         return particle.properties.filename;
       case 'folder':
         return particle.properties.name;
+      case 'unknown':
+        return 'Not supported in this version of the app';
       default:
         return null;
     }

js/desktop/src/features/particles/folder-view.tsx

@@ -1,21 +1,12 @@
 import { Particle } from '@/api/types';
-import { parseParticlePath, type ParticlePath } from '@/lib/particle-path';
-import { ComposeOverlay } from '@/features/compose/compose-overlay';
+import { type ParticlePath } from '@/lib/particle-path';
+import { ContainerView } from '@/features/particles/container-view';
 
 interface FolderViewProps {
-  folderParticle: Particle;
+  folderParticle: Particle & { type: 'folder' };
   path: ParticlePath;
 }
 
 export function FolderView({ path, folderParticle }: FolderViewProps) {
-  const { networkId } = parseParticlePath(path);
-
-  return (
-    <div className="flex h-full items-center justify-center">
-      <p className="text-muted-foreground text-sm">
-        Folder view — {folderParticle.id}
-      </p>
-      <ComposeOverlay networkId={networkId} />
-    </div>
-  );
+  return <ContainerView path={path} folderParticle={folderParticle} />;
 }

js/desktop/src/features/particles/particle-children-list.tsx

@@ -1,25 +1,12 @@
 import {
+  Fragment,
   useMemo,
   useRef,
   useEffect,
-  useCallback,
   memo,
   createElement,
 } from 'react';
-import { useNavigate } from 'react-router-dom';
-import {
-  Radio,
-  MessageSquare,
-  Video,
-  Mic,
-  Image,
-  FileText,
-  CircleCheck,
-  StickyNote,
-  Headphones,
-  Trash2,
-  type LucideIcon,
-} from 'lucide-react';
+import { Headphones, Radio, FolderIcon } from 'lucide-react';
 import { cn, getInitials } from '@/lib/utils';
 import { useLiveLatestChild } from '@/hooks/use-particle';
 import { useAuthStore } from '@/stores/auth-store';
@@ -36,12 +23,17 @@ import {
   type Particle,
   type StreamProperties,
 } from '@/api/types';
-import type { StreamParticle } from '@/hooks/use-stream-particles';
 import { useNetwork } from '@/hooks/use-networks';
 import { useStreamAutoplay } from '@/hooks/use-stream-autoplay';
 import { useDownloadUrl } from '@/hooks/use-download-url';
+import { getMessagePreview, getParticleTypeIcon } from '@/lib/particle-display';
 import { StreamContextMenu } from '@/features/particles/stream-context-menu';
 
+type StreamParticle = Particle & {
+  type: 'stream';
+  properties: StreamProperties;
+};
+
 function VideoThumbnail({
   objectId,
   isUnseen,
@@ -71,65 +63,16 @@ function VideoThumbnail({
   );
 }
 
-function getParticleTypeIcon(particle: Particle): LucideIcon {
-  if (isParticleDeleted(particle)) return Trash2;
-  switch (particle.type) {
-    case 'text':
-      return MessageSquare;
-    case 'media': {
-      const mime = particle.properties.mime_type;
-      if (mime.startsWith('video/')) return Video;
-      if (mime.startsWith('audio/')) return Mic;
-      if (mime.startsWith('image/')) return Image;
-      return Video;
-    }
-    case 'file':
-      return FileText;
-    case 'quest':
-      return CircleCheck;
-    case 'paper':
-      return StickyNote;
-    default:
-      return Radio;
-  }
-}
-
-function getMessagePreview(particle: Particle): string {
-  if (isParticleDeleted(particle)) return 'Deleted particle';
-  switch (particle.type) {
-    case 'text':
-      return particle.properties.content;
-    case 'media': {
-      const mime = particle.properties.mime_type;
-      if (mime.startsWith('image/')) return 'Photo';
-      if (mime.startsWith('video/') || mime.startsWith('audio/')) {
-        const transcriptText = particle.properties.transcript?.transcript;
-        if (transcriptText) return transcriptText;
-        return mime.startsWith('video/') ? 'Video clip' : 'Voice note';
-      }
-      return 'Media';
-    }
-    case 'file':
-      return particle.properties.filename;
-    case 'quest':
-      return particle.properties.title;
-    case 'paper':
-      return particle.properties.title;
-    default:
-      return particle.type;
-  }
-}
-
 const StreamRow = memo(function StreamRow({
   particle,
   networkId,
-  onNavigate,
+  onOpen,
   isSelected,
   shortcutKey,
 }: {
-  particle: Particle & { type: 'stream'; properties: StreamProperties };
+  particle: StreamParticle;
   networkId: string;
-  onNavigate: (streamId: string) => void;
+  onOpen: (particleId: string) => void;
   isSelected?: boolean;
   shortcutKey?: number;
 }) {
@@ -237,9 +180,9 @@ const StreamRow = memo(function StreamRow({
     <div
       role="button"
       tabIndex={0}
-      onClick={() => onNavigate(particle.id)}
+      onClick={() => onOpen(particle.id)}
       onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') onNavigate(particle.id);
+        if (e.key === 'Enter' || e.key === ' ') onOpen(particle.id);
       }}
       className={cn(
         'flex w-full items-center gap-3 px-4 py-3 text-left cursor-pointer transition-colors hover:bg-accent',
@@ -322,34 +265,160 @@ const StreamRow = memo(function StreamRow({
   );
 });
 
-interface ParticleListViewProps {
-  streams: StreamParticle[];
+const FolderRow = memo(function FolderRow({
+  particle,
+  networkId,
+  onOpen,
+  isSelected,
+  shortcutKey,
+}: {
+  particle: Particle & { type: 'folder' };
+  networkId: string;
+  onOpen: (particleId: string) => void;
+  isSelected?: boolean;
+  shortcutKey?: number;
+}) {
+  const network = useNetwork(networkId);
+  const creator = resolveHumanDisplay(
+    particle.created_by_human_id,
+    network?.humans,
+  );
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={() => onOpen(particle.id)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') onOpen(particle.id);
+      }}
+      className={cn(
+        'flex w-full items-center gap-3 px-4 py-3 text-left cursor-pointer transition-colors hover:bg-accent',
+        isSelected && 'bg-accent',
+      )}
+    >
+      {shortcutKey && (
+        <kbd className="flex size-5 shrink-0 items-center justify-center rounded bg-white/10 font-mono text-xs text-muted-foreground">
+          {shortcutKey}
+        </kbd>
+      )}
+      <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-amber-500/15">
+        <FolderIcon className="size-4 text-amber-500" />
+      </span>
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-sm font-medium text-foreground">
+          {particle.properties.name}
+        </p>
+        <Small className="text-muted-foreground font-normal">
+          Folder · {creator.displayName}
+        </Small>
+      </div>
+      <Small className="shrink-0 text-muted-foreground">
+        <RelativeTimestamp date={particle.created_at} />
+      </Small>
+    </div>
+  );
+});
+
+const LeafRow = memo(function LeafRow({
+  particle,
+  networkId,
+  onOpen,
+  isSelected,
+  shortcutKey,
+}: {
+  particle: Particle;
+  networkId: string;
+  onOpen: (particleId: string) => void;
+  isSelected?: boolean;
+  shortcutKey?: number;
+}) {
+  const network = useNetwork(networkId);
+  const creator = resolveHumanDisplay(
+    particle.created_by_human_id,
+    network?.humans,
+  );
+  const typeIcon = getParticleTypeIcon(particle);
+  const deleted = isParticleDeleted(particle);
+  const taskDone = particle.type === 'task' && particle.properties.done;
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={() => onOpen(particle.id)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') onOpen(particle.id);
+      }}
+      className={cn(
+        'flex w-full items-center gap-3 px-4 py-3 text-left cursor-pointer transition-colors hover:bg-accent',
+        isSelected && 'bg-accent',
+      )}
+    >
+      {shortcutKey && (
+        <kbd className="flex size-5 shrink-0 items-center justify-center rounded bg-white/10 font-mono text-xs text-muted-foreground">
+          {shortcutKey}
+        </kbd>
+      )}
+      {createElement(typeIcon, {
+        className: cn(
+          'size-4 shrink-0 text-muted-foreground',
+          taskDone && 'text-emerald-500',
+        ),
+      })}
+      <div className="min-w-0 flex-1">
+        <p
+          className={cn(
+            'truncate text-sm',
+            deleted || taskDone
+              ? 'text-muted-foreground line-through'
+              : 'text-foreground',
+          )}
+        >
+          {getMessagePreview(particle)}
+        </p>
+        <Small className="text-muted-foreground font-normal">
+          {creator.displayName}
+        </Small>
+      </div>
+      <Small className="shrink-0 text-muted-foreground">
+        <RelativeTimestamp date={particle.created_at} />
+      </Small>
+    </div>
+  );
+});
+
+interface ParticleChildrenListProps {
+  items: Particle[];
   networkId: string;
   isLoading: boolean;
+  /** Open (navigate into / select) a particle by id. */
+  onOpen: (particleId: string) => void;
   selectedIndex?: number | null;
+  /** Render 1–9 shortcut badges next to the first nine rows. */
+  showShortcuts?: boolean;
+  emptyMessage?: string;
   /** When true, render a footer that invokes onLoadMore. */
   canLoadMore?: boolean;
   onLoadMore?: () => void;
 }
 
 /**
- * List of stream particles for a container (network root, folder, etc.).
+ * Browsable list of a container's children, any particle type. Used by the
+ * network root and folder views.
  */
-export function ParticleListView({
-  streams,
+export function ParticleChildrenList({
+  items,
   networkId,
   isLoading,
+  onOpen,
   selectedIndex,
+  showShortcuts = true,
+  emptyMessage = 'Nothing here yet. Create something using the keyboard shortcuts below.',
   canLoadMore,
   onLoadMore,
-}: ParticleListViewProps) {
-  const navigate = useNavigate();
-  const rowRefs = useRef<(HTMLDivElement | null)[]>([]);
-
-  const navigateToStream = useCallback(
-    (streamId: string) => navigate(`/${networkId}/${streamId}`),
-    [navigate, networkId],
-  );
+}: ParticleChildrenListProps) {
+  const rowRefs = useRef<Array<HTMLDivElement | null>>([]);
 
   useEffect(() => {
     if (
@@ -365,42 +434,52 @@ export function ParticleListView({
     return <Progress />;
   }
 
-  if (streams.length === 0) {
+  if (items.length === 0) {
     return (
       <div className="mx-auto flex h-full max-w-sm flex-col items-center justify-center gap-2 px-4 text-center">
         <Radio className="text-muted-foreground size-8" />
-        <p className="text-muted-foreground text-sm">
-          No streams here. Start a conversation using the keyboard shortcuts
-          below.
-        </p>
+        <p className="text-muted-foreground text-sm">{emptyMessage}</p>
       </div>
     );
   }
 
   return (
     <div>
-      {streams.map((stream, index) => (
-        <StreamContextMenu
-          key={stream.id}
-          particle={stream}
-          networkId={networkId}
-        >
+      {items.map((item, index) => {
+        const rowProps = {
+          networkId,
+          onOpen,
+          isSelected: index === selectedIndex,
+          shortcutKey: showShortcuts && index < 9 ? index + 1 : undefined,
+        };
+        const row = (
           <div
             ref={(el) => {
               rowRefs.current[index] = el;
             }}
           >
-            <StreamRow
-              particle={stream}
-              networkId={networkId}
-              onNavigate={navigateToStream}
-              isSelected={index === selectedIndex}
-              shortcutKey={index < 9 ? index + 1 : undefined}
-            />
-            {index < streams.length - 1 && <Separator className="px-4" />}
+            {item.type === 'stream' ? (
+              <StreamRow particle={item} {...rowProps} />
+            ) : item.type === 'folder' ? (
+              <FolderRow particle={item} {...rowProps} />
+            ) : (
+              <LeafRow particle={item} {...rowProps} />
+            )}
+            {index < items.length - 1 && <Separator className="px-4" />}
           </div>
-        </StreamContextMenu>
-      ))}
+        );
+        return item.type === 'stream' ? (
+          <StreamContextMenu
+            key={item.id}
+            particle={item}
+            networkId={networkId}
+          >
+            {row}
+          </StreamContextMenu>
+        ) : (
+          <Fragment key={item.id}>{row}</Fragment>
+        );
+      })}
       {canLoadMore && onLoadMore && (
         <div className="flex justify-center p-3">
           <Button variant="ghost" size="sm" onClick={onLoadMore}>

js/desktop/src/features/particles/particle-preview.tsx

@@ -5,11 +5,12 @@ import { Skeleton } from '@/components/ui/skeleton';
 import {
   Video,
   Mic,
-  ScrollText,
+  CircleCheck,
   BookOpen,
   FileIcon,
   FolderIcon,
 } from 'lucide-react';
+import { cn } from '@/lib/utils';
 
 export function ParticlePreview({ particle }: { particle: Particle }) {
   switch (particle.type) {
@@ -17,8 +18,8 @@ export function ParticlePreview({ particle }: { particle: Particle }) {
       return <TextPreview particle={particle} />;
     case 'media':
       return <MediaPreview particle={particle} />;
-    case 'quest':
-      return <QuestPreview particle={particle} />;
+    case 'task':
+      return <TaskPreview particle={particle} />;
     case 'paper':
       return <PaperPreview particle={particle} />;
     case 'file':
@@ -128,21 +129,30 @@ function VideoThumbnail({
   );
 }
 
-function QuestPreview({
+function TaskPreview({
   particle,
 }: {
-  particle: Extract<Particle, { type: 'quest' }>;
+  particle: Extract<Particle, { type: 'task' }>;
 }) {
-  const { title, status } = particle.properties;
+  const { title, done } = particle.properties;
   return (
     <div className="flex h-full w-full flex-col items-center justify-center gap-2 bg-amber-500/10 p-4">
-      <ScrollText className="h-6 w-6 text-amber-600/70 dark:text-amber-400/70" />
-      <p className="line-clamp-2 text-center text-sm font-medium">{title}</p>
-      {status && (
-        <span className="text-muted-foreground text-[10px] uppercase tracking-wide">
-          {status}
-        </span>
-      )}
+      <CircleCheck
+        className={cn(
+          'h-6 w-6',
+          done
+            ? 'text-emerald-600/80 dark:text-emerald-400/80'
+            : 'text-amber-600/70 dark:text-amber-400/70',
+        )}
+      />
+      <p
+        className={cn(
+          'line-clamp-2 text-center text-sm font-medium',
+          done && 'text-muted-foreground line-through',
+        )}
+      >
+        {title}
+      </p>
     </div>
   );
 }

js/desktop/src/features/particles/particle-view-resolver.tsx

@@ -2,12 +2,19 @@ import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useQueryClient } from '@tanstack/react-query';
 import { Lock } from 'lucide-react';
+import { isParticleDeleted, type Particle } from '@/api/types';
 import { useLiveParticle } from '@/hooks/use-particle';
-import { particlePath } from '@/lib/particle-path';
+import { particlePath, type ParticlePath } from '@/lib/particle-path';
 import { Button } from '@/components/ui/button';
 
+import Layout from '@/features/layout';
 import { StreamView } from '@/features/particles/stream-view';
 import { FolderView } from '@/features/particles/folder-view';
+import { MediaParticleView } from '@/features/particles/media-particle-view';
+import { TextParticleView } from '@/features/particles/text-particle-view';
+import { TaskParticleView } from '@/features/particles/task-particle-view';
+import { FallbackParticleView } from '@/features/particles/fallback-particle-view';
+import { DeletedParticleView } from '@/features/particles/deleted-particle-view';
 
 /**
  * Route-level component for /:networkId/*.
@@ -25,9 +32,11 @@ export default function ParticleViewResolver() {
 
   if (isLoading) {
     return (
-      <div className="flex h-full items-center justify-center">
-        <p className="text-muted-foreground text-sm">Loading...</p>
-      </div>
+      <Layout>
+        <div className="flex h-full items-center justify-center">
+          <p className="text-muted-foreground text-sm">Loading...</p>
+        </div>
+      </Layout>
     );
   }
 
@@ -35,25 +44,106 @@ export default function ParticleViewResolver() {
     // Errors here are almost always Firestore permission-denied — the user lost
     // access to the network or to a custom-visibility particle. The React Router
     // stays on the dead route, so without an explicit escape the user is stuck.
-    return <InaccessibleParticle />;
+    return (
+      <Layout>
+        <InaccessibleParticle />
+      </Layout>
+    );
   }
 
+  // Streams render their own full-screen chrome; folders and leaves live
+  // inside the app Layout (breadcrumbs, full-height column) like the root.
   switch (particle.type) {
     case 'stream':
       return <StreamView streamParticle={particle} path={path} />;
     case 'folder':
-      return <FolderView folderParticle={particle} path={path} />;
+      return (
+        <Layout>
+          <FolderView folderParticle={particle} path={path} />
+        </Layout>
+      );
     default:
       return (
-        <div className="flex h-full items-center justify-center">
-          <p className="text-muted-foreground text-sm">
-            {particle.type} particle: {particle.id}
-          </p>
-        </div>
+        <Layout>
+          <LeafParticleView
+            particle={particle}
+            containerPath={particlePath(networkId, segments.slice(0, -1))}
+            networkId={networkId}
+          />
+        </Layout>
       );
   }
 }
 
+const noop = () => {};
+
+/**
+ * Standalone view for a leaf particle opened directly (e.g. from a folder),
+ * outside any stream playback: renders the particle's native view with no
+ * auto-advance.
+ */
+function LeafParticleView({
+  particle,
+  containerPath,
+  networkId,
+}: {
+  particle: Particle;
+  containerPath: ParticlePath;
+  networkId: string;
+}) {
+  const content = (() => {
+    if (isParticleDeleted(particle)) {
+      return (
+        <DeletedParticleView
+          particle={particle}
+          networkId={networkId}
+          paused
+          onEnded={noop}
+        />
+      );
+    }
+    switch (particle.type) {
+      case 'media':
+        return (
+          <MediaParticleView
+            particle={particle}
+            streamPath={containerPath}
+            paused={false}
+            onEnded={noop}
+          />
+        );
+      case 'text':
+        return (
+          <TextParticleView
+            particle={particle}
+            streamPath={containerPath}
+            paused
+            onEnded={noop}
+          />
+        );
+      case 'task':
+        return (
+          <TaskParticleView
+            particle={particle}
+            containerPath={containerPath}
+            paused
+            onEnded={noop}
+          />
+        );
+      default:
+        return (
+          <FallbackParticleView particle={particle} networkId={networkId} />
+        );
+    }
+  })();
+
+  return (
+    <div className="min-h-0 flex-1 bg-black text-white [--stream-safe-top:2rem] [--stream-safe-bottom:2rem]">
+      {content}
+    </div>
+  );
+}
+
 function InaccessibleParticle() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();

js/desktop/src/features/particles/rename-stream-overlay.tsx

@@ -4,18 +4,18 @@ import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { KeyHint } from '@/components/key-hint';
 import { updateParticleProperties } from '@/lib/firestore-particles';
-import { particlePath, toFirestoreDocPath } from '@/lib/particle-path';
+import { toFirestoreDocPath, type ParticlePath } from '@/lib/particle-path';
 import type { Particle } from '@/api/types';
 import { useSuspendPlayback } from '@/hooks/use-suspend-playback';
 
 interface RenameStreamOverlayProps {
-  networkId: string;
+  streamPath: ParticlePath;
   streamParticle: Particle & { type: 'stream' };
   onClose: () => void;
 }
 
 export function RenameStreamOverlay({
-  networkId,
+  streamPath,
   streamParticle,
   onClose,
 }: RenameStreamOverlayProps) {
@@ -32,15 +32,13 @@ export function RenameStreamOverlay({
     if (!canSave) return;
     setSaving(true);
     try {
-      const docPath = toFirestoreDocPath(
-        particlePath(networkId, [streamParticle.id]),
-      );
+      const docPath = toFirestoreDocPath(streamPath);
       await updateParticleProperties<'stream'>(docPath, { name: trimmed });
       onClose();
     } finally {
       setSaving(false);
     }
-  }, [canSave, networkId, onClose, streamParticle.id, trimmed]);
+  }, [canSave, streamPath, onClose, trimmed]);
 
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {

js/desktop/src/features/particles/stream-bottom-bar.tsx

@@ -0,0 +1,141 @@
+import { cn } from '@/lib/utils';
+import { PlaybackPageIndicator } from '@/features/particles/playback-page-indicator';
+import { VideoAudioToggle } from '@/components/video-audio-toggle';
+import { KeyHint } from '@/components/key-hint';
+import { useComposeIntentStore } from '@/stores/compose-intent-store';
+import type { HumanPresence } from '@/hooks/use-presence-positions';
+
+export function BottomBar({
+  visible,
+  total,
+  current,
+  progress,
+  onGoTo,
+  presenceBySegment,
+  onlineHumanIds,
+  exitRemainingMs,
+  onOpenKeybindings,
+  onOpenHuddle,
+  onExit,
+}: {
+  visible: boolean;
+  total: number;
+  current: number;
+  progress: number;
+  onGoTo: (index: number) => void;
+  presenceBySegment: Map<number, HumanPresence[]>;
+  onlineHumanIds: Set<string>;
+  exitRemainingMs: number | null;
+  onOpenKeybindings: () => void;
+  onOpenHuddle: () => void;
+  onExit: () => void;
+}) {
+  return (
+    <div
+      className={cn(
+        'absolute inset-x-0 bottom-0 z-10 transition-all duration-300',
+        visible
+          ? 'opacity-100 translate-y-0'
+          : 'opacity-0 translate-y-2 pointer-events-none',
+      )}
+    >
+      {/* Presence avatars — above the blurred background */}
+      <PlaybackPageIndicator
+        total={total}
+        current={current}
+        progress={progress}
+        onGoTo={onGoTo}
+        presenceBySegment={presenceBySegment}
+        onlineHumanIds={onlineHumanIds}
+        layer="avatars"
+      />
+      {/* Blurred background container — tracks + controls */}
+      <div className="pb-3">
+        <PlaybackPageIndicator
+          total={total}
+          current={current}
+          progress={progress}
+          onGoTo={onGoTo}
+          layer="tracks"
+        />
+        <div className="flex items-center justify-center px-3 pt-2 gap-2">
+          {exitRemainingMs !== null && (
+            <div className="flex justify-center">
+              <span className="rounded-full bg-black/30 px-2 text-xs text-white/70 backdrop-blur-sm">
+                Closing in {Math.ceil(exitRemainingMs / 1000)}s
+              </span>
+            </div>
+          )}
+          <StreamViewControls
+            showEscape
+            onOpenKeybindings={onOpenKeybindings}
+            onOpenHuddle={onOpenHuddle}
+            onExit={onExit}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function StreamViewControls({
+  showEscape,
+  onOpenKeybindings,
+  onOpenHuddle,
+  onExit,
+}: {
+  showEscape?: boolean;
+  onOpenKeybindings: () => void;
+  onOpenHuddle: () => void;
+  onExit: () => void;
+}) {
+  const requestIntent = useComposeIntentStore((s) => s.request);
+  return (
+    <div className="flex items-center gap-4 text-sm text-white/50">
+      {showEscape && (
+        <KeyHint
+          keys="Esc"
+          onClick={onExit}
+          title="Back to network (or press Esc)"
+        >
+          back
+        </KeyHint>
+      )}
+      <VideoAudioToggle />
+      <KeyHint
+        keys="Hold `"
+        onClick={() => requestIntent('record')}
+        title="Reply with a recording (or hold `)"
+      >
+        to reply
+      </KeyHint>
+      <KeyHint
+        keys="T"
+        onClick={() => requestIntent('text')}
+        title="Reply with text (or press T)"
+      >
+        text
+      </KeyHint>
+      <KeyHint
+        keys="D"
+        onClick={() => requestIntent('task')}
+        title="Add a task (or press D)"
+      >
+        task
+      </KeyHint>
+      <KeyHint
+        keys="H"
+        onClick={onOpenHuddle}
+        title="Start a huddle (or press H)"
+      >
+        huddle
+      </KeyHint>
+      <KeyHint
+        keys="?"
+        onClick={onOpenKeybindings}
+        title="Show all shortcuts"
+        aria-label="Show keyboard shortcuts"
+      />
+    </div>
+  );
+}

js/desktop/src/features/particles/stream-context-menu.tsx

@@ -7,10 +7,10 @@ import {
 import { CircleCheckBig, CircleDot } from 'lucide-react';
 import { updateStreamStatus } from '@/lib/firestore-particles';
 import { toFirestoreDocPath, particlePath } from '@/lib/particle-path';
-import type { StreamParticle } from '@/hooks/use-stream-particles';
+import { isStreamOpen, type Particle } from '@/api/types';
 
 interface StreamContextMenuProps {
-  particle: StreamParticle;
+  particle: Extract<Particle, { type: 'stream' }>;
   networkId: string;
   children: React.ReactNode;
 }
@@ -20,7 +20,7 @@ export function StreamContextMenu({
   networkId,
   children,
 }: StreamContextMenuProps) {
-  const isOpen = particle.status === 'open';
+  const isOpen = isStreamOpen(particle);
   const docPath = toFirestoreDocPath(particlePath(networkId, [particle.id]));
 
   const toggleStatus = async () => {

js/desktop/src/features/particles/stream-list-sidebar.tsx

@@ -0,0 +1,224 @@
+import { useEffect, useRef } from 'react';
+import { CircleCheck, FileText, Image, List, Mic, Video } from 'lucide-react';
+import { isParticleDeleted, type Human, type Particle } from '@/api/types';
+import { cn } from '@/lib/utils';
+import { useNetwork } from '@/hooks/use-networks';
+import { resolveHumanDisplay } from '@/lib/humans';
+import { RelativeTimestamp } from '@/components/relative-timestamp';
+import { HumanAvatar } from '@/components/human-avatar';
+import { KeyHint } from '@/components/key-hint';
+import { ScrollArea } from '@/components/ui/scroll-area';
+
+interface StreamListSidebarProps {
+  items: Particle[];
+  networkId: string;
+  currentIndex: number;
+  onSelect: (index: number) => void;
+  onToggle: () => void;
+}
+
+/**
+ * Browse-mode panel beside the stream: a chat-like timeline of every
+ * particle. Selecting a message plays it in the immersive stream view;
+ * nothing auto-advances.
+ */
+export function StreamListSidebar({
+  items,
+  networkId,
+  currentIndex,
+  onSelect,
+  onToggle,
+}: StreamListSidebarProps) {
+  const network = useNetwork(networkId);
+  const rowRefs = useRef<Array<HTMLDivElement | null>>([]);
+
+  useEffect(() => {
+    if (currentIndex >= 0) {
+      rowRefs.current[currentIndex]?.scrollIntoView({ block: 'nearest' });
+    }
+  }, [currentIndex]);
+
+  return (
+    <aside className="dark flex max-w-60 shrink-0 flex-col border-l border-white/10 bg-zinc-950">
+      <div className="flex shrink-0 items-center gap-2 border-b border-white/10 px-4 py-3">
+        <List className="size-3.5 text-white/40" />
+        <span className="truncate text-sm font-medium text-white/90 mr-auto">
+          {items.length} messages
+        </span>
+        <KeyHint
+          keys="L"
+          onClick={onToggle}
+          title="Hide list (or press L)"
+          className="text-xs text-white/40"
+        >
+          to close
+        </KeyHint>
+      </div>
+      <ScrollArea className="min-h-0 flex-1">
+        <div className="flex flex-col gap-0.5 px-2 py-2">
+          {items.map((item, index) => (
+            <div
+              key={item.id}
+              ref={(el) => {
+                rowRefs.current[index] = el;
+              }}
+            >
+              <ChatRow
+                particle={item}
+                humans={network?.humans}
+                isSelected={index === currentIndex}
+                onClick={() => onSelect(index)}
+              />
+            </div>
+          ))}
+          {items.length === 0 && (
+            <p className="px-2 py-8 text-center text-sm text-white/40">
+              No particles in this stream yet.
+            </p>
+          )}
+        </div>
+      </ScrollArea>
+    </aside>
+  );
+}
+
+function ChatRow({
+  particle,
+  humans,
+  isSelected,
+  onClick,
+}: {
+  particle: Particle;
+  humans: Human[] | undefined;
+  isSelected: boolean;
+  onClick: () => void;
+}) {
+  const sender = resolveHumanDisplay(particle.created_by_human_id, humans);
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={onClick}
+      // Enter only — Space is reserved for play/pause in the stream view.
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') onClick();
+      }}
+      className={cn(
+        'flex w-full cursor-pointer items-start gap-2.5 rounded-md px-2 py-2 text-left transition-colors',
+        isSelected ? 'bg-white/10' : 'hover:bg-white/5',
+      )}
+    >
+      <HumanAvatar
+        size="sm"
+        className="mt-0.5 shrink-0"
+        initials={sender.initials}
+        avatarObjectId={sender.avatarObjectId}
+        fallbackClassName="bg-white/10 text-white/80 text-[10px] font-medium"
+      />
+      <div className="min-w-0 flex-1">
+        <div className="flex items-baseline justify-between gap-2">
+          <span className="truncate text-xs font-semibold text-white/90">
+            {sender.displayName}
+          </span>
+          <span className="shrink-0 text-[10px] text-white/35">
+            <RelativeTimestamp date={particle.created_at} />
+          </span>
+        </div>
+        <ChatRowContent particle={particle} />
+      </div>
+    </div>
+  );
+}
+
+function ChatRowContent({ particle }: { particle: Particle }) {
+  if (isParticleDeleted(particle)) {
+    return (
+      <p className="text-xs italic text-white/35">This particle was deleted</p>
+    );
+  }
+
+  switch (particle.type) {
+    case 'text':
+      return (
+        <p className="line-clamp-2 text-xs leading-relaxed whitespace-pre-line text-white/70">
+          {particle.properties.content}
+        </p>
+      );
+    case 'media': {
+      const mime = particle.properties.mime_type;
+      const transcript = particle.properties.transcript?.transcript;
+      const isVideo = mime.startsWith('video/');
+      const isAudio = mime.startsWith('audio/');
+      const isImage = mime.startsWith('image/');
+      const Icon = isVideo ? Video : isAudio ? Mic : isImage ? Image : Video;
+      const label = isVideo
+        ? 'Video clip'
+        : isAudio
+          ? 'Voice note'
+          : isImage
+            ? 'Photo'
+            : 'Media';
+      const durationSec = Math.round(particle.properties.duration_ms / 1000);
+      const duration =
+        durationSec > 0
+          ? ` · ${Math.floor(durationSec / 60)}:${String(durationSec % 60).padStart(2, '0')}`
+          : '';
+      return (
+        <div className="flex flex-col gap-0.5">
+          <span className="flex items-center gap-1.5 text-xs text-white/70">
+            <Icon className="size-3.5 shrink-0 text-white/50" />
+            {label}
+            {duration}
+          </span>
+          {transcript && (
+            <p className="line-clamp-2 text-xs leading-relaxed text-white/45">
+              {transcript}
+            </p>
+          )}
+        </div>
+      );
+    }
+    case 'file':
+      return (
+        <span className="flex items-center gap-1.5 text-xs text-white/70">
+          <FileText className="size-3.5 shrink-0 text-white/50" />
+          <span className="truncate">{particle.properties.filename}</span>
+        </span>
+      );
+    case 'task': {
+      const { title, done, checklist = [] } = particle.properties;
+      const doneCount = checklist.filter((item) => item.done).length;
+      return (
+        <div className="flex flex-col gap-0.5">
+          <span className="flex items-center gap-1.5 text-xs text-white/70">
+            <CircleCheck
+              className={cn(
+                'size-3.5 shrink-0',
+                done ? 'text-emerald-400' : 'text-white/50',
+              )}
+            />
+            <span
+              className={cn('truncate', done && 'text-white/40 line-through')}
+            >
+              {title}
+            </span>
+          </span>
+          {checklist.length > 0 && (
+            <span className="pl-5 text-[10px] text-white/40">
+              {doneCount} / {checklist.length} subtasks
+            </span>
+          )}
+        </div>
+      );
+    }
+    case 'paper':
+      return (
+        <p className="truncate text-xs text-white/70">
+          {particle.properties.title}
+        </p>
+      );
+    default:
+      return <p className="text-xs text-white/45">{particle.type}</p>;
+  }
+}

js/desktop/src/features/particles/stream-members-overlay.tsx

@@ -10,7 +10,7 @@ import {
   parseVisibleTo,
 } from '@/lib/stream-visibility';
 import { updateParticleVisibleTo } from '@/lib/firestore-particles';
-import { particlePath, toFirestoreDocPath } from '@/lib/particle-path';
+import { toFirestoreDocPath, type ParticlePath } from '@/lib/particle-path';
 import { useNetwork } from '@/hooks/use-networks';
 import { cn, getInitials } from '@/lib/utils';
 import { resolveHumanDisplay } from '@/lib/humans';
@@ -19,6 +19,7 @@ import { useSuspendPlayback } from '@/hooks/use-suspend-playback';
 
 interface StreamMembersOverlayProps {
   networkId: string;
+  streamPath: ParticlePath;
   streamParticle: Particle & { type: 'stream' };
   isCreator: boolean;
   onClose: () => void;
@@ -26,6 +27,7 @@ interface StreamMembersOverlayProps {
 
 export function StreamMembersOverlay({
   networkId,
+  streamPath,
   streamParticle,
   isCreator,
   onClose,
@@ -40,10 +42,7 @@ export function StreamMembersOverlay({
     [streamParticle.visible_to, networkId],
   );
 
-  const docPath = useMemo(
-    () => toFirestoreDocPath(particlePath(networkId, [streamParticle.id])),
-    [networkId, streamParticle.id],
-  );
+  const docPath = useMemo(() => toFirestoreDocPath(streamPath), [streamPath]);
 
   const memberIds =
     visibility.mode === 'network'

js/desktop/src/features/particles/stream-top-bar.tsx

@@ -1,9 +1,7 @@
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useAuthStore } from '@/stores/auth-store';
 import { apiClient } from '@/api/client';
-import { isParticleDeleted, type Particle } from '@/api/types';
-import { particlePath, toFirestoreDocPath } from '@/lib/particle-path';
+import { isParticleDeleted, isStreamOpen, type Particle } from '@/api/types';
 import { AvatarGroup } from '@/components/ui/avatar';
 import { HumanAvatar } from '@/components/human-avatar';
 import {
@@ -20,20 +18,21 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import {
-  Settings,
-  CircleCheckBig,
-  CircleDot,
   EllipsisVertical,
   Pencil,
   Lock,
   Globe,
   Trash2,
+  CircleCheckBig,
+  CircleDot,
 } from 'lucide-react';
 import { updateStreamStatus } from '@/lib/firestore-particles';
+import { toFirestoreDocPath, type ParticlePath } from '@/lib/particle-path';
 import { RenameStreamOverlay } from '@/features/particles/rename-stream-overlay';
 import { DeleteParticleOverlay } from '@/features/particles/delete-particle-overlay';
 import { StreamMembersOverlay } from '@/features/particles/stream-members-overlay';
 import { parseVisibleTo } from '@/lib/stream-visibility';
+import { getParticleDisplayName } from '@/lib/particle-display';
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -48,32 +47,20 @@ import { resolveHumanDisplay } from '@/lib/humans';
 import { platform } from '@/lib/platform';
 import { requireDesktop } from '@/lib/platform/desktop-only';
 
-function getParticleDisplayName(particle: Particle): string {
-  switch (particle.type) {
-    case 'stream':
-    case 'folder':
-      return particle.properties.name;
-    case 'quest':
-      return particle.properties.title;
-    case 'paper':
-      return particle.properties.title;
-    case 'file':
-      return particle.properties.filename;
-    case 'text':
-      return particle.properties.content.slice(0, 30);
-    case 'media':
-      return particle.type;
-  }
-}
-
 interface TopBarProps {
   networkId: string;
   particle: Particle | null;
   streamParticle: Particle & { type: 'stream' };
+  /** Resolved path of the stream — may be nested under a container. */
+  streamPath: ParticlePath;
 }
 
-export function TopBar({ networkId, particle, streamParticle }: TopBarProps) {
-  const navigate = useNavigate();
+export function TopBar({
+  networkId,
+  particle,
+  streamParticle,
+  streamPath,
+}: TopBarProps) {
   const network = useNetwork(networkId);
   const userId = useAuthStore((s) => s.user?.id);
   const isCreator = !!userId && userId === streamParticle.created_by_human_id;
@@ -164,8 +151,8 @@ export function TopBar({ networkId, particle, streamParticle }: TopBarProps) {
         </button>
       )}
 
-      {streamParticle.status === 'closed' && (
-        <span className="no-drag flex items-center gap-1 rounded-full bg-white/10 px-2 py-0.5 text-xs text-muted-foreground backdrop-blur-sm">
+      {!isStreamOpen(streamParticle) && (
+        <span className="no-drag text-muted-foreground flex items-center gap-1 rounded-full bg-white/10 px-2 py-0.5 text-xs backdrop-blur-sm">
           <CircleCheckBig className="size-3" />
           Closed
         </span>
@@ -188,18 +175,22 @@ export function TopBar({ networkId, particle, streamParticle }: TopBarProps) {
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
+          {isCreator && (
+            <DropdownMenuItem onSelect={() => setRenameOpen(true)}>
+              <Pencil className="size-4" />
+              Rename stream
+            </DropdownMenuItem>
+          )}
           <DropdownMenuItem
             onSelect={async () => {
-              const docPath = toFirestoreDocPath(
-                particlePath(networkId, [streamParticle.id]),
-              );
+              const docPath = toFirestoreDocPath(streamPath);
               await updateStreamStatus(
                 docPath,
-                streamParticle.status === 'open' ? 'closed' : 'open',
+                isStreamOpen(streamParticle) ? 'closed' : 'open',
               );
             }}
           >
-            {streamParticle.status === 'open' ? (
+            {isStreamOpen(streamParticle) ? (
               <>
                 <CircleCheckBig className="size-4" />
                 Close stream
@@ -211,12 +202,6 @@ export function TopBar({ networkId, particle, streamParticle }: TopBarProps) {
               </>
             )}
           </DropdownMenuItem>
-          {isCreator && (
-            <DropdownMenuItem onSelect={() => setRenameOpen(true)}>
-              <Pencil className="size-4" />
-              Rename stream
-            </DropdownMenuItem>
-          )}
           {canDeleteParticle && (
             <DropdownMenuItem
               onSelect={() => setDeleteOpen(true)}
@@ -226,16 +211,12 @@ export function TopBar({ networkId, particle, streamParticle }: TopBarProps) {
               Delete particle
             </DropdownMenuItem>
           )}
-          <DropdownMenuItem onSelect={() => navigate('/settings')}>
-            <Settings className="size-4" />
-            Settings
-          </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
 
       {renameOpen && isCreator && (
         <RenameStreamOverlay
-          networkId={networkId}
+          streamPath={streamPath}
           streamParticle={streamParticle}
           onClose={() => setRenameOpen(false)}
         />
@@ -243,8 +224,7 @@ export function TopBar({ networkId, particle, streamParticle }: TopBarProps) {
 
       {deleteOpen && canDeleteParticle && particle && userId && (
         <DeleteParticleOverlay
-          networkId={networkId}
-          streamId={streamParticle.id}
+          streamPath={streamPath}
           particle={particle}
           userId={userId}
           onClose={() => setDeleteOpen(false)}
@@ -254,6 +234,7 @@ export function TopBar({ networkId, particle, streamParticle }: TopBarProps) {
       {membersOpen && (
         <StreamMembersOverlay
           networkId={networkId}
+          streamPath={streamPath}
           streamParticle={streamParticle}
           isCreator={isCreator}
           onClose={() => setMembersOpen(false)}

js/desktop/src/features/particles/stream-view.tsx

@@ -6,6 +6,7 @@ import {
   useRef,
 } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { Play } from 'lucide-react';
 import { useAuthStore } from '@/stores/auth-store';
 import { apiClient } from '@/api/client';
 import { isParticleDeleted, type Particle } from '@/api/types';
@@ -19,17 +20,20 @@ import {
   ComposeOverlay,
   type ComposeStep,
 } from '@/features/compose/compose-overlay';
-import { useComposeIntentStore } from '@/stores/compose-intent-store';
-import { PlaybackPageIndicator } from '@/features/particles/playback-page-indicator';
 import {
   MediaParticleView,
   type MediaParticleHandle,
 } from '@/features/particles/media-particle-view';
 import { TextParticleView } from '@/features/particles/text-particle-view';
+import { TaskParticleView } from '@/features/particles/task-particle-view';
 import { FallbackParticleView } from '@/features/particles/fallback-particle-view';
 import { DeletedParticleView } from '@/features/particles/deleted-particle-view';
-import { VideoAudioToggle } from '@/components/video-audio-toggle';
-import { KeyHint } from '@/components/key-hint';
+import {
+  BottomBar,
+  StreamViewControls,
+} from '@/features/particles/stream-bottom-bar';
+import { StreamListSidebar } from '@/features/particles/stream-list-sidebar';
+import { useStreamViewMode } from '@/hooks/use-stream-view-mode';
 import { useMediaSettingsStore } from '@/stores/media-settings-store';
 import {
   KeybindingsOverlay,
@@ -51,7 +55,6 @@ import {
   type ComposingMode,
 } from '@/features/particles/stream-presence-context';
 import { ComposingIndicator } from '@/components/composing-indicator';
-import { cn } from '@/lib/utils';
 import { useMount } from 'react-use';
 import {
   usePlaybackPauseStore,
@@ -63,11 +66,29 @@ import { useStreamActionKeys } from '@/hooks/use-stream-action-keys';
 import { platform } from '@/lib/platform';
 import { requireDesktop } from '@/lib/platform/desktop-only';
 
+const noop = () => {};
+
+// Compose step → the composing-presence mode broadcast to other viewers.
+const STEP_TO_COMPOSING_MODE: Record<ComposeStep, ComposingMode | null> = {
+  idle: null,
+  submitting: null,
+  recording: 'recording',
+  typing: 'typing',
+  task: 'typing',
+  reviewing: 'typing',
+  configuring: 'typing',
+  picking: 'screen',
+};
+
 function getReactions(
   particle: Particle,
 ): Record<string, string[]> | undefined {
   if (isParticleDeleted(particle)) return undefined;
-  if (particle.type === 'media' || particle.type === 'text')
+  if (
+    particle.type === 'media' ||
+    particle.type === 'text' ||
+    particle.type === 'task'
+  )
     return particle.reactions;
   return undefined;
 }
@@ -134,6 +155,7 @@ const STREAM_VIEW_KEYBINDINGS: KeybindingGroup[] = [
     bindings: [
       { keys: ['←', '→', '↑', '↓'], description: 'Previous / next particle' },
       { keys: ['Esc'], description: 'Back to network' },
+      { keys: ['L'], description: 'Toggle list view' },
     ],
   },
   {
@@ -151,6 +173,7 @@ const STREAM_VIEW_KEYBINDINGS: KeybindingGroup[] = [
       { keys: ['Hold', '`'], description: 'Reply' },
       { keys: ['S'], description: 'Screen record' },
       { keys: ['T'], description: 'Text compose' },
+      { keys: ['D'], description: 'New task' },
       { keys: ['V'], description: 'Toggle video / audio' },
       { keys: ['H'], description: 'Join huddle' },
     ],
@@ -189,6 +212,8 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
     platform.autoplay.dismiss();
   });
 
+  const { mode, toggle: toggleViewMode } = useStreamViewMode();
+
   const {
     children,
     currentParticle,
@@ -198,7 +223,9 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
     prev,
     goTo,
     goToParticle,
-  } = useStreamPlayback(streamParticle, path);
+  } = useStreamPlayback(streamParticle, path, {
+    autoAdvanceOnNew: mode === 'player',
+  });
 
   usePrefetchAdjacentMedia(children, currentIndex);
 
@@ -258,7 +285,7 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
     [handleToggleReaction],
   );
 
-  const { fastPlayback } = usePlaybackKeys({ mediaRef });
+  const { fastPlayback, spacePaused, resume } = usePlaybackKeys({ mediaRef });
 
   const handleExitNavigate = useCallback(() => {
     navigate(`/${networkId}`);
@@ -271,6 +298,7 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
     childrenLength: children.length,
     mediaRef,
     onExit: handleExitNavigate,
+    onToggleViewMode: toggleViewMode,
   });
 
   const handleOpenHuddle = useCallback(() => {
@@ -301,16 +329,7 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
 
   // Broadcast composing state to other viewers
   useEffect(() => {
-    const stepToMode: Record<string, ComposingMode | null> = {
-      idle: null,
-      submitting: null,
-      recording: 'recording',
-      typing: 'typing',
-      reviewing: 'typing',
-      configuring: 'typing',
-      picking: 'screen',
-    };
-    const mode = stepToMode[composeStep] ?? null;
+    const mode = STEP_TO_COMPOSING_MODE[composeStep] ?? null;
     if (mode) {
       startComposing(mode);
     } else {
@@ -331,7 +350,12 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
   // Always show controls when compose is active or exit countdown is visible
   const controlsVisible = showControls || composeActive || status === 'ended';
 
-  const exitRemainingMs = useExitCountdown(status, paused, handleExitNavigate);
+  // No auto-exit while browsing in list mode.
+  const exitRemainingMs = useExitCountdown(
+    status,
+    paused || mode === 'list',
+    handleExitNavigate,
+  );
 
   // Reset progress when the particle changes.
   if (currentParticle?.id !== prevParticleId) {
@@ -371,14 +395,15 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
           networkId={networkId}
           targetPath={path}
           onActiveChange={setComposeActive}
-          disabled={streamParticle.status === 'closed'}
           onParticleCreated={handleParticleCreated}
         />
       </div>
     );
   }
 
-  // Render particle content inline
+  // Render particle content inline. In list mode the selected particle still
+  // plays, but nothing chains: reaching the end doesn't advance.
+  const handleParticleEnded = mode === 'player' ? next : noop;
   function renderParticle(particle: Particle) {
     if (isParticleDeleted(particle)) {
       return (
@@ -387,7 +412,7 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
           particle={particle}
           networkId={networkId}
           paused={paused}
-          onEnded={next}
+          onEnded={handleParticleEnded}
         />
       );
     }
@@ -400,7 +425,7 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
             particle={particle}
             streamPath={path}
             paused={paused}
-            onEnded={next}
+            onEnded={handleParticleEnded}
             onProgress={setProgress}
           />
         );
@@ -411,7 +436,18 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
             particle={particle}
             streamPath={path}
             paused={paused}
-            onEnded={next}
+            onEnded={handleParticleEnded}
+            onProgress={setProgress}
+          />
+        );
+      case 'task':
+        return (
+          <TaskParticleView
+            key={particle.id}
+            particle={particle}
+            containerPath={path}
+            paused={paused}
+            onEnded={handleParticleEnded}
             onProgress={setProgress}
           />
         );
@@ -423,233 +459,122 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
   }
 
   return (
-    <div
-      className="relative flex h-screen flex-col overflow-hidden bg-black text-white [--stream-safe-top:4rem] [--stream-safe-bottom:5rem]"
-      onMouseMove={handleMouseActivity}
-      onMouseLeave={() => setShowControls(false)}
-    >
-      {/* Top gradient safe zone */}
-      <div className="pointer-events-none absolute inset-x-0 top-0 z-[5] h-32 bg-gradient-to-b from-black/60 to-transparent" />
+    <div className="flex h-screen overflow-hidden bg-black">
+      {/* Stream chrome — immersive playback column */}
+      <div
+        className="relative flex min-w-0 flex-1 flex-col overflow-hidden bg-black text-white [--stream-safe-top:4rem] [--stream-safe-bottom:5rem]"
+        onMouseMove={handleMouseActivity}
+        onMouseLeave={() => setShowControls(false)}
+      >
+        {/* Top gradient safe zone */}
+        <div className="pointer-events-none absolute inset-x-0 top-0 z-[5] h-32 bg-gradient-to-b from-black/60 to-transparent" />
 
-      {/* TopBar — always visible */}
-      <div className="z-10 absolute left-0 right-0 pt-2">
-        <TopBar
-          networkId={networkId}
-          particle={currentParticle}
-          streamParticle={streamParticle}
-        />
-      </div>
-
-      {/* Main playback area */}
-      <div className="flex-1 overflow-hidden">
-        {currentParticle && (
-          <div className="relative flex h-full w-full cursor-pointer items-center justify-center">
-            {renderParticle(currentParticle)}
-
-            <div className="pointer-events-none absolute right-4 top-14 z-20 flex flex-col items-end gap-1.5">
-              {fastPlayback && (
-                <div className="rounded-full bg-black/50 px-2.5 py-1 text-xs font-medium text-white backdrop-blur-sm">
-                  1.5x
-                </div>
-              )}
-              {paused && (
-                <div className="rounded-full bg-black/40 px-2.5 py-1 text-xs font-medium text-white/70 backdrop-blur-sm">
-                  Paused
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Reaction bar — always visible */}
-      {currentParticle && !isParticleDeleted(currentParticle) && (
-        <div className="absolute right-4 top-1/2 z-10 flex -translate-y-1/2 flex-col items-end gap-2">
-          <ReactionBar
-            reactions={getReactions(currentParticle)}
-            currentHumanId={authedUser?.id ?? ''}
-            humans={network?.humans}
-            onToggle={handleToggleReaction}
-            onOpenTextReaction={() => setTextReactionOpen(true)}
-          />
-          <TextReactionInput
-            open={textReactionOpen}
-            onSubmit={handleSubmitTextReaction}
-            onClose={() => setTextReactionOpen(false)}
+        {/* TopBar — always visible */}
+        <div className="z-10 absolute left-0 right-0 pt-2">
+          <TopBar
+            networkId={networkId}
+            particle={currentParticle}
+            streamParticle={streamParticle}
+            streamPath={path}
           />
         </div>
-      )}
 
-      {/* Composing indicator — left edge, always visible */}
-      <ComposingIndicator
-        users={composingUsers}
-        networkHumans={network?.humans}
-      />
+        {/* Main playback area */}
+        <div className="flex-1 overflow-hidden">
+          {currentParticle && (
+            <div className="relative flex h-full w-full cursor-pointer items-center justify-center">
+              {renderParticle(currentParticle)}
 
-      <ComposeOverlay
-        networkId={networkId}
-        targetPath={path}
-        onActiveChange={setComposeActive}
-        onStepChange={setComposeStep}
-        disabled={streamParticle.status === 'closed'}
-        onParticleCreated={handleParticleCreated}
-      />
-
-      {/* Bottom gradient safe zone for keyboard hints */}
-      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-[5] h-1/4 bg-gradient-to-t from-black/60 to-transparent" />
-
-      {/* BottomBar */}
-      <BottomBar
-        visible={controlsVisible}
-        total={children.length}
-        current={currentIndex}
-        progress={progress}
-        onGoTo={goTo}
-        presenceBySegment={presenceBySegment}
-        onlineHumanIds={onlineHumanIds}
-        exitRemainingMs={exitRemainingMs}
-        onOpenKeybindings={() => setShowKeybindings(true)}
-        onOpenHuddle={handleOpenHuddle}
-        onExit={handleExitNavigate}
-      />
-
-      <KeybindingsOverlay
-        open={showKeybindings}
-        onClose={() => setShowKeybindings(false)}
-        groups={STREAM_VIEW_KEYBINDINGS}
-        title="Stream View"
-      />
-    </div>
-  );
-}
-
-function BottomBar({
-  visible,
-  total,
-  current,
-  progress,
-  onGoTo,
-  presenceBySegment,
-  onlineHumanIds,
-  exitRemainingMs,
-  onOpenKeybindings,
-  onOpenHuddle,
-  onExit,
-}: {
-  visible: boolean;
-  total: number;
-  current: number;
-  progress: number;
-  onGoTo: (index: number) => void;
-  presenceBySegment: Map<
-    number,
-    import('@/hooks/use-presence-positions').HumanPresence[]
-  >;
-  onlineHumanIds: Set<string>;
-  exitRemainingMs: number | null;
-  onOpenKeybindings: () => void;
-  onOpenHuddle: () => void;
-  onExit: () => void;
-}) {
-  return (
-    <div
-      className={cn(
-        'absolute inset-x-0 bottom-0 z-10 transition-all duration-300',
-        visible
-          ? 'opacity-100 translate-y-0'
-          : 'opacity-0 translate-y-2 pointer-events-none',
-      )}
-    >
-      {/* Presence avatars — above the blurred background */}
-      <PlaybackPageIndicator
-        total={total}
-        current={current}
-        progress={progress}
-        onGoTo={onGoTo}
-        presenceBySegment={presenceBySegment}
-        onlineHumanIds={onlineHumanIds}
-        layer="avatars"
-      />
-      {/* Blurred background container — tracks + controls */}
-      <div className="pb-3">
-        <PlaybackPageIndicator
-          total={total}
-          current={current}
-          progress={progress}
-          onGoTo={onGoTo}
-          layer="tracks"
-        />
-        <div className="flex items-center justify-center px-3 pt-2 gap-2">
-          {exitRemainingMs !== null && (
-            <div className="flex justify-center">
-              <span className="rounded-full bg-black/30 px-2 text-xs text-white/70 backdrop-blur-sm">
-                Closing in {Math.ceil(exitRemainingMs / 1000)}s
-              </span>
+              <div className="pointer-events-none absolute right-4 top-14 z-20 flex flex-col items-end gap-1.5">
+                {fastPlayback && (
+                  <div className="rounded-full bg-black/50 px-2.5 py-1 text-xs font-medium text-white backdrop-blur-sm">
+                    1.5x
+                  </div>
+                )}
+                {spacePaused && (
+                  <button
+                    type="button"
+                    onClick={resume}
+                    title="Resume (or press Space)"
+                    className="pointer-events-auto flex items-center gap-1.5 rounded-full bg-black/40 px-2.5 py-1 text-xs font-medium text-white/70 backdrop-blur-sm transition-colors hover:bg-black/60 hover:text-white"
+                  >
+                    <Play className="size-3 fill-current" />
+                    Paused
+                  </button>
+                )}
+              </div>
             </div>
           )}
-          <StreamViewControls
-            showEscape
-            onOpenKeybindings={onOpenKeybindings}
-            onOpenHuddle={onOpenHuddle}
-            onExit={onExit}
-          />
         </div>
-      </div>
-    </div>
-  );
-}
 
-function StreamViewControls({
-  showEscape,
-  onOpenKeybindings,
-  onOpenHuddle,
-  onExit,
-}: {
-  showEscape?: boolean;
-  onOpenKeybindings: () => void;
-  onOpenHuddle: () => void;
-  onExit: () => void;
-}) {
-  const requestIntent = useComposeIntentStore((s) => s.request);
-  return (
-    <div className="flex items-center gap-4 text-sm text-white/50">
-      {showEscape && (
-        <KeyHint
-          keys="Esc"
-          onClick={onExit}
-          title="Back to network (or press Esc)"
-        >
-          back
-        </KeyHint>
+        {/* Reaction bar — always visible */}
+        {currentParticle && !isParticleDeleted(currentParticle) && (
+          <div className="absolute right-4 top-1/2 z-10 flex -translate-y-1/2 flex-col items-end gap-2">
+            <ReactionBar
+              reactions={getReactions(currentParticle)}
+              currentHumanId={authedUser?.id ?? ''}
+              humans={network?.humans}
+              onToggle={handleToggleReaction}
+              onOpenTextReaction={() => setTextReactionOpen(true)}
+            />
+            <TextReactionInput
+              open={textReactionOpen}
+              onSubmit={handleSubmitTextReaction}
+              onClose={() => setTextReactionOpen(false)}
+            />
+          </div>
+        )}
+
+        {/* Composing indicator — left edge, always visible */}
+        <ComposingIndicator
+          users={composingUsers}
+          networkHumans={network?.humans}
+        />
+
+        <ComposeOverlay
+          networkId={networkId}
+          targetPath={path}
+          onActiveChange={setComposeActive}
+          onStepChange={setComposeStep}
+          onParticleCreated={handleParticleCreated}
+        />
+
+        {/* Bottom gradient safe zone for keyboard hints */}
+        <div className="pointer-events-none absolute inset-x-0 bottom-0 z-[5] h-1/4 bg-gradient-to-t from-black/60 to-transparent" />
+
+        {/* BottomBar — pinned visible while browsing, mouse-activity in player */}
+        <BottomBar
+          visible={mode === 'list' || controlsVisible}
+          total={children.length}
+          current={currentIndex}
+          progress={progress}
+          onGoTo={goTo}
+          presenceBySegment={presenceBySegment}
+          onlineHumanIds={onlineHumanIds}
+          exitRemainingMs={exitRemainingMs}
+          onOpenKeybindings={() => setShowKeybindings(true)}
+          onOpenHuddle={handleOpenHuddle}
+          onExit={handleExitNavigate}
+        />
+
+        <KeybindingsOverlay
+          open={showKeybindings}
+          onClose={() => setShowKeybindings(false)}
+          groups={STREAM_VIEW_KEYBINDINGS}
+          title="Stream View"
+        />
+      </div>
+
+      {/* Browse sidebar — a separate chat-like panel beside the stream */}
+      {mode === 'list' && (
+        <StreamListSidebar
+          items={children}
+          networkId={networkId}
+          currentIndex={currentIndex}
+          onSelect={goTo}
+          onToggle={toggleViewMode}
+        />
       )}
-      <VideoAudioToggle />
-      <KeyHint
-        keys="Hold `"
-        onClick={() => requestIntent('record')}
-        title="Reply with a recording (or hold `)"
-      >
-        to reply
-      </KeyHint>
-      <KeyHint
-        keys="T"
-        onClick={() => requestIntent('text')}
-        title="Reply with text (or press T)"
-      >
-        text
-      </KeyHint>
-      <KeyHint
-        keys="H"
-        onClick={onOpenHuddle}
-        title="Start a huddle (or press H)"
-      >
-        huddle
-      </KeyHint>
-      <KeyHint
-        keys="?"
-        onClick={onOpenKeybindings}
-        title="Show all shortcuts"
-        aria-label="Show keyboard shortcuts"
-      />
     </div>
   );
 }

js/desktop/src/features/particles/task-particle-view.tsx

@@ -0,0 +1,335 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { deleteField } from 'firebase/firestore';
+import { Plus, X } from 'lucide-react';
+import type { ChecklistItem, Particle } from '@/api/types';
+import {
+  particlePath,
+  parseParticlePath,
+  toFirestoreDocPath,
+  type ParticlePath,
+} from '@/lib/particle-path';
+import {
+  updateParticle,
+  updateParticleProperties,
+} from '@/lib/firestore-particles';
+import { cn } from '@/lib/utils';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { HumanAvatar } from '@/components/human-avatar';
+import { useNetwork } from '@/hooks/use-networks';
+import { useFixedDwell } from '@/hooks/use-fixed-dwell';
+import { useLiveDraftField } from '@/hooks/use-live-draft-field';
+import { useSuspendPlayback } from '@/hooks/use-suspend-playback';
+import { resolveHumanDisplay } from '@/lib/humans';
+
+type TaskParticle = Extract<Particle, { type: 'task' }>;
+
+interface TaskParticleViewProps {
+  particle: TaskParticle;
+  containerPath: ParticlePath;
+  paused: boolean;
+  onEnded: () => void;
+  onProgress?: (ratio: number) => void;
+}
+
+const DWELL_DURATION_S = 8;
+const UNASSIGNED = 'unassigned';
+
+function useParticleDocPath(
+  containerPath: ParticlePath,
+  particleId: string,
+): string {
+  const { networkId, segments } = parseParticlePath(containerPath);
+  return toFirestoreDocPath(particlePath(networkId, [...segments, particleId]));
+}
+
+export function TaskParticleView({
+  particle,
+  containerPath,
+  paused,
+  onEnded,
+  onProgress,
+}: TaskParticleViewProps) {
+  const { networkId } = parseParticlePath(containerPath);
+  const network = useNetwork(networkId);
+  const docPath = useParticleDocPath(containerPath, particle.id);
+
+  const {
+    title,
+    notes,
+    checklist = [],
+    assigned_to,
+    done,
+  } = particle.properties;
+
+  // Suspend playback while any field inside the card has focus so typing
+  // doesn't race the dwell timer or get eaten by global key handlers.
+  const [editing, setEditing] = useState(false);
+  useSuspendPlayback(editing, `task-edit-${particle.id}`);
+
+  useFixedDwell({
+    id: particle.id,
+    durationS: DWELL_DURATION_S,
+    paused,
+    onEnded,
+    onProgress,
+  });
+
+  const titleField = useLiveDraftField({
+    remoteValue: title,
+    commit: (value) =>
+      updateParticleProperties<'task'>(docPath, { title: value }),
+  });
+  const notesField = useLiveDraftField({
+    remoteValue: notes ?? '',
+    commit: (value) =>
+      updateParticleProperties<'task'>(docPath, { notes: value }),
+  });
+
+  // Checklist writes replace the whole array (merged against the latest live
+  // value); concurrent edits to the same checklist are last-write-wins.
+  const checklistRef = useRef(checklist);
+  useEffect(() => {
+    checklistRef.current = checklist;
+  }, [checklist]);
+
+  const writeChecklist = useCallback(
+    (items: ChecklistItem[]) => {
+      // Advance the local base before the write so a second edit issued before
+      // the next snapshot composes on top of this one instead of dropping it.
+      checklistRef.current = items;
+      return updateParticleProperties<'task'>(docPath, { checklist: items });
+    },
+    [docPath],
+  );
+
+  const handleToggleDone = useCallback(
+    (checked: boolean) =>
+      updateParticleProperties<'task'>(docPath, { done: checked }),
+    [docPath],
+  );
+
+  const handleToggleItem = useCallback(
+    (index: number, checked: boolean) => {
+      const items = checklistRef.current.map((item, i) =>
+        i === index ? { ...item, done: checked } : item,
+      );
+      void writeChecklist(items);
+    },
+    [writeChecklist],
+  );
+
+  const handleCommitItemText = useCallback(
+    (index: number, text: string) => {
+      const items = checklistRef.current.map((item, i) =>
+        i === index ? { ...item, text } : item,
+      );
+      void writeChecklist(items);
+    },
+    [writeChecklist],
+  );
+
+  const handleRemoveItem = useCallback(
+    (index: number) => {
+      void writeChecklist(checklistRef.current.filter((_, i) => i !== index));
+    },
+    [writeChecklist],
+  );
+
+  const handleAddItem = useCallback(
+    (text: string) => {
+      void writeChecklist([...checklistRef.current, { text, done: false }]);
+    },
+    [writeChecklist],
+  );
+
+  const handleAssign = useCallback(
+    (value: string) => {
+      if (value === UNASSIGNED) {
+        void updateParticle(docPath, 'properties.assigned_to', deleteField());
+      } else {
+        void updateParticleProperties<'task'>(docPath, { assigned_to: value });
+      }
+    },
+    [docPath],
+  );
+
+  const assignee = resolveHumanDisplay(assigned_to, network?.humans);
+  const doneCount = checklist.filter((item) => item.done).length;
+
+  return (
+    <div className="flex h-full w-full items-center justify-center bg-gradient-to-b from-black/40 via-black/20 to-black/40 px-8 pt-[var(--stream-safe-top,2rem)] pb-[var(--stream-safe-bottom,2rem)]">
+      <div
+        className="scrollbar-card flex max-h-full w-full max-w-[calc(var(--message-content-width)_+_var(--message-card-padding)*2)] flex-col gap-5 overflow-y-auto overscroll-contain rounded bg-white/10 p-[var(--message-card-padding)] backdrop-blur-md"
+        onFocusCapture={() => setEditing(true)}
+        onBlurCapture={(e) => {
+          if (!e.currentTarget.contains(e.relatedTarget)) setEditing(false);
+        }}
+      >
+        <div className="flex items-start gap-3">
+          <Checkbox
+            checked={done}
+            onCheckedChange={(checked) => handleToggleDone(checked === true)}
+            className="mt-1.5 size-5 rounded-full border-white/40 data-[state=checked]:border-emerald-500 data-[state=checked]:bg-emerald-500"
+            aria-label={done ? 'Mark task as not done' : 'Mark task as done'}
+          />
+          <input
+            value={titleField.value}
+            onChange={(e) => titleField.onChange(e.target.value)}
+            onFocus={titleField.onFocus}
+            onBlur={titleField.onBlur}
+            placeholder="Task title"
+            className={cn(
+              'w-full bg-transparent text-2xl font-semibold text-white outline-none placeholder:text-white/30',
+              done && 'text-white/50 line-through',
+            )}
+          />
+        </div>
+
+        <Textarea
+          value={notesField.value}
+          onChange={(e) => notesField.onChange(e.target.value)}
+          onFocus={notesField.onFocus}
+          onBlur={notesField.onBlur}
+          placeholder="Add notes…"
+          className="min-h-16 resize-none border-none bg-transparent p-0 text-sm text-white/80 shadow-none placeholder:text-white/30 focus-visible:ring-0 dark:bg-transparent"
+        />
+
+        <div className="flex flex-col gap-1.5">
+          {checklist.length > 0 && (
+            <span className="text-xs text-white/40">
+              {doneCount} / {checklist.length} done
+            </span>
+          )}
+          {checklist.map((item, index) => (
+            <ChecklistItemRow
+              // Index keys + whole-array writes are an accepted tradeoff:
+              // concurrent removal while someone types can shift focus.
+              key={index}
+              item={item}
+              onToggle={(checked) => handleToggleItem(index, checked)}
+              onCommitText={(text) => handleCommitItemText(index, text)}
+              onRemove={() => handleRemoveItem(index)}
+            />
+          ))}
+          <AddChecklistItemRow onAdd={handleAddItem} />
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Select
+            value={assigned_to ?? UNASSIGNED}
+            onValueChange={handleAssign}
+          >
+            <SelectTrigger
+              size="sm"
+              className="w-fit gap-2 border-white/15 bg-white/5 text-white/80"
+            >
+              {assigned_to && assignee.exists && (
+                <HumanAvatar
+                  size="sm"
+                  initials={assignee.initials}
+                  avatarObjectId={assignee.avatarObjectId}
+                />
+              )}
+              <SelectValue placeholder="Unassigned" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value={UNASSIGNED}>Unassigned</SelectItem>
+              {network?.humans?.map((human) => (
+                <SelectItem key={human.id} value={human.id}>
+                  {human.email_prefix}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ChecklistItemRow({
+  item,
+  onToggle,
+  onCommitText,
+  onRemove,
+}: {
+  item: ChecklistItem;
+  onToggle: (checked: boolean) => void;
+  onCommitText: (text: string) => void;
+  onRemove: () => void;
+}) {
+  const textField = useLiveDraftField({
+    remoteValue: item.text,
+    commit: onCommitText,
+  });
+
+  return (
+    <div className="group/item flex items-center gap-2.5">
+      <Checkbox
+        checked={item.done}
+        onCheckedChange={(checked) => onToggle(checked === true)}
+        className="border-white/30 data-[state=checked]:border-emerald-500 data-[state=checked]:bg-emerald-500"
+        aria-label={
+          item.done ? 'Mark subtask as not done' : 'Mark subtask as done'
+        }
+      />
+      <input
+        value={textField.value}
+        onChange={(e) => textField.onChange(e.target.value)}
+        onFocus={textField.onFocus}
+        onBlur={textField.onBlur}
+        placeholder="Subtask"
+        className={cn(
+          'w-full bg-transparent text-sm text-white/90 outline-none placeholder:text-white/30',
+          item.done && 'text-white/40 line-through',
+        )}
+      />
+      <button
+        type="button"
+        onClick={onRemove}
+        className="text-white/30 opacity-0 transition-opacity hover:text-white/70 group-hover/item:opacity-100"
+        aria-label="Remove subtask"
+      >
+        <X className="size-3.5" />
+      </button>
+    </div>
+  );
+}
+
+function AddChecklistItemRow({ onAdd }: { onAdd: (text: string) => void }) {
+  const [draft, setDraft] = useState('');
+
+  const submit = () => {
+    const text = draft.trim();
+    if (!text) return;
+    onAdd(text);
+    setDraft('');
+  };
+
+  return (
+    <div className="flex items-center gap-2.5">
+      <Plus className="size-4 text-white/30" />
+      <input
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            submit();
+          }
+        }}
+        onBlur={submit}
+        placeholder="Add subtask…"
+        className="w-full bg-transparent text-sm text-white/70 outline-none placeholder:text-white/30"
+      />
+    </div>
+  );
+}

js/desktop/src/features/particles/text-particle-view.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useState } from 'react';
 import { Pencil } from 'lucide-react';
 import type { Particle } from '@/api/types';
 import type { ParticlePath } from '@/lib/particle-path';
@@ -8,8 +8,11 @@ import {
   type LinkPreviewEntry,
 } from '@/hooks/use-link-metadata';
 import { extractUrls } from '@/lib/link-metadata';
+import { getImmersiveTextStyle } from '@/lib/immersive-text';
+import { hasMarkdownFormatting } from '@/lib/markdown';
 import {
   LinkPreviewCard,
+  LinkPreviewCardFallback,
   LinkPreviewCardSkeleton,
 } from '@/components/link-preview-card';
 import { useParticleAttachments } from '@/hooks/use-particle-attachments';
@@ -17,6 +20,7 @@ import { ParticleAttachments } from '@/features/particles/particle-attachments';
 import { TextEditOverlay } from '@/features/particles/text-edit-overlay';
 import { RelativeTimestamp } from '@/components/relative-timestamp';
 import { useAuthStore } from '@/stores/auth-store';
+import { useFixedDwell } from '@/hooks/use-fixed-dwell';
 import { MarkdownEditor } from '@/features/compose/markdown-editor';
 
 type TextParticle = Extract<Particle, { type: 'text' }>;
@@ -33,7 +37,6 @@ interface TextParticleViewProps {
 const CHARS_PER_MINUTE = 1000;
 const MIN_DURATION_S = 3;
 const MAX_DURATION_S = 15;
-const TICK_MS = 100;
 const EXTRA_S_PER_LINK = 2;
 const EXTRA_S_PER_ATTACHMENT = 2;
 
@@ -51,18 +54,6 @@ function computeReadDuration(
   return Math.min(Math.max(base + extra, MIN_DURATION_S), MAX_DURATION_S);
 }
 
-function getImmersiveTextStyle(length: number) {
-  if (length < 30) return { size: 'text-5xl', weight: 'font-semibold' };
-  if (length < 70) return { size: 'text-3xl', weight: 'font-semibold' };
-  return { size: 'text-2xl', weight: 'font-normal' };
-}
-
-function hasMarkdownFormatting(content: string): boolean {
-  return /^#{1,6} |^\s*[-*+] |^\s*\d+\. |^```|`[^`]+`|\*\*|__|\*[^*]|_[^_]|^>/m.test(
-    content,
-  );
-}
-
 function LinkPreviews({ entries }: { entries: LinkPreviewEntry[] }) {
   return (
     <div className="flex flex-wrap gap-3">
@@ -72,7 +63,9 @@ function LinkPreviews({ entries }: { entries: LinkPreviewEntry[] }) {
             <LinkPreviewCardSkeleton />
           ) : entry.metadata ? (
             <LinkPreviewCard metadata={entry.metadata} />
-          ) : null}
+          ) : (
+            <LinkPreviewCardFallback url={entry.url} />
+          )}
         </div>
       ))}
     </div>
@@ -104,29 +97,14 @@ export function TextParticleView({
     urls.length,
     attachments.length,
   );
-  const elapsedRef = useRef(0);
 
-  // Reset elapsed when particle changes
-  useEffect(() => {
-    elapsedRef.current = 0;
-  }, [particle.id]);
-
-  useEffect(() => {
-    if (paused) return;
-
-    const interval = setInterval(() => {
-      elapsedRef.current += TICK_MS / 1000;
-      const ratio = Math.min(elapsedRef.current / durationS, 1);
-      onProgress?.(ratio);
-
-      if (ratio >= 1) {
-        clearInterval(interval);
-        onEnded();
-      }
-    }, TICK_MS);
-
-    return () => clearInterval(interval);
-  }, [paused, durationS, onEnded, onProgress, particle.id]);
+  useFixedDwell({
+    id: particle.id,
+    durationS,
+    paused,
+    onEnded,
+    onProgress,
+  });
 
   // Content is just bare URLs with no surrounding text
   const contentTrimmed = content.trim();
@@ -209,17 +187,7 @@ export function TextParticleView({
   // Mode 3: card layout
   return (
     <div className="group relative flex h-full w-full items-center justify-center bg-gradient-to-b from-black/40 via-black/20 to-black/40 px-8 pt-[var(--stream-safe-top,2rem)] pb-[var(--stream-safe-bottom,2rem)]">
-      <div
-        className={cn(
-          'flex max-h-full w-full max-w-2xl flex-col gap-4 overflow-y-auto overscroll-contain rounded bg-white/10 p-6 backdrop-blur-md',
-          '[&::-webkit-scrollbar]:w-2',
-          '[&::-webkit-scrollbar]:p-2',
-          '[&::-webkit-scrollbar-track]:bg-transparent',
-          '[&::-webkit-scrollbar-thumb]:rounded-full',
-          '[&::-webkit-scrollbar-thumb]:bg-white/30',
-          '[&::-webkit-scrollbar-thumb]:hover:bg-white/50',
-        )}
-      >
+      <div className="scrollbar-card flex max-h-full w-full max-w-[calc(var(--message-content-width)_+_var(--message-card-padding)*2)] flex-col gap-4 overflow-y-auto overscroll-contain rounded bg-white/10 p-[var(--message-card-padding)] backdrop-blur-md">
         <MarkdownEditor
           key={content}
           value={content}

js/desktop/src/features/settings-page.tsx

@@ -145,13 +145,14 @@ export default function SettingsPage() {
             aria-label="Change profile picture"
           >
             <HumanAvatar
-              size="lg"
+              className="size-16"
               avatarObjectId={user?.avatar_object_id}
               initials={initials}
-              fallbackClassName="bg-primary/10 text-primary font-medium"
+              fallbackClassName="bg-primary/10 text-primary text-xl font-medium"
             />
-            <span className="absolute inset-0 flex items-center justify-center rounded-full bg-black/40 opacity-0 transition-opacity group-hover:opacity-100">
-              <Camera className="size-4 text-white" />
+            <span className="absolute inset-0 flex items-center justify-center rounded-full bg-black/40 opacity-0 transition-opacity group-hover:opacity-100" />
+            <span className="bg-primary text-primary-foreground ring-background absolute bottom-0 right-0 flex size-5 items-center justify-center rounded-full ring-2">
+              <Camera className="size-2.5" />
             </span>
           </button>
           <div className="min-w-0 flex-1">

js/desktop/src/hooks/use-container-children.ts

@@ -0,0 +1,121 @@
+import { useCallback, useMemo, useState } from 'react';
+import { where } from 'firebase/firestore';
+import { useLiveParticleChildren } from '@/hooks/use-particle';
+import { useAuthStore } from '@/stores/auth-store';
+import { parseParticlePath, type ParticlePath } from '@/lib/particle-path';
+import type { Particle } from '@/api/types';
+
+const INITIAL_PAGE_SIZE = 9;
+const PAGE_INCREMENT = 9;
+
+// Stable references so the Firestore subscriptions don't re-attach per render.
+const OPEN_STATUS_FILTER = where('status', '==', 'open');
+const CLOSED_STATUS_FILTER = where('status', '==', 'closed');
+const CONTAINER_TYPE_FILTER = where('type', 'in', ['stream', 'folder']);
+const LEAF_TYPE_FILTER = where('type', 'in', [
+  'media',
+  'file',
+  'text',
+  'task',
+  'paper',
+]);
+
+interface UseContainerChildrenOptions {
+  /**
+   * When set, list only streams with this status, filtered server-side like
+   * the pre-folder query (reuses its composite indexes). Used by the network
+   * root while folders are shelved; folders keep the full mixed-type behavior
+   * so the container model can be picked back up later. Only streams carry
+   * `status`, so the filter excludes other types by itself.
+   */
+  streamStatus?: 'open' | 'closed';
+}
+
+interface UseContainerChildrenResult {
+  /** All visible children, sorted by latest activity (then creation). */
+  items: Particle[];
+  isLoading: boolean;
+  canLoadMore: boolean;
+  loadMore: () => void;
+}
+
+function activityTime(particle: Particle): number {
+  if (
+    (particle.type === 'stream' || particle.type === 'folder') &&
+    particle.last_child_created_at
+  ) {
+    return particle.last_child_created_at.getTime();
+  }
+  return particle.created_at.getTime();
+}
+
+/**
+ * Children of a container (network root or folder), all particle types.
+ *
+ * Two merged subscriptions because visibility scoping filters on `visible_to`
+ * with array-contains-any, and leaf particles don't carry that field — a
+ * single scoped query would silently exclude them. Containers (streams,
+ * folders) are visibility-scoped; leaves inherit access from their container.
+ */
+export function useContainerChildren(
+  path: ParticlePath,
+  { streamStatus }: UseContainerChildrenOptions = {},
+): UseContainerChildrenResult {
+  const { networkId } = parseParticlePath(path);
+  const userId = useAuthStore((s) => s.user?.id);
+
+  const visibilityScopes = useMemo(() => {
+    const scopes: string[] = [];
+    if (userId) scopes.push(`human:${userId}`);
+    scopes.push(`network:${networkId}`);
+    return scopes;
+  }, [userId, networkId]);
+
+  const [limit, setLimit] = useState(INITIAL_PAGE_SIZE);
+
+  const containerFilter = streamStatus
+    ? streamStatus === 'open'
+      ? OPEN_STATUS_FILTER
+      : CLOSED_STATUS_FILTER
+    : CONTAINER_TYPE_FILTER;
+
+  const { children: containers, isLoading: containersLoading } =
+    useLiveParticleChildren(path, {
+      orderByField: 'last_child_created_at',
+      orderDirection: 'desc',
+      visibilityScopes,
+      whereFilter: containerFilter,
+      limit,
+    });
+
+  // Passing undefined disables the subscription entirely in streams-only mode.
+  const { children: leaves, isLoading: leavesLoading } =
+    useLiveParticleChildren(streamStatus ? undefined : path, {
+      orderByField: 'created_at',
+      orderDirection: 'desc',
+      whereFilter: LEAF_TYPE_FILTER,
+      limit,
+    });
+
+  const items = useMemo(
+    () =>
+      [...containers, ...leaves].sort(
+        (a, b) => activityTime(b) - activityTime(a),
+      ),
+    [containers, leaves],
+  );
+
+  // Heuristic: a query returning a full page may have more behind it.
+  const canLoadMore = containers.length >= limit || leaves.length >= limit;
+
+  const loadMore = useCallback(() => {
+    setLimit((prev) => prev + PAGE_INCREMENT);
+  }, []);
+
+  return {
+    items,
+    isLoading: containersLoading || leavesLoading,
+    canLoadMore,
+    loadMore,
+  };
+}

js/desktop/src/hooks/use-create-particle.ts

@@ -29,6 +29,8 @@ interface CreateParticleParams<T extends ParticleType = ParticleType> {
   type: T;
   properties: ParticlePropertiesMap[T];
   createdByHumanId: string;
+  // Required for container types
+  visibleTo?: string[];
 }
 
 export function useCreateParticle() {
@@ -59,6 +61,7 @@ export function useCreateParticle() {
         params.type,
         params.properties,
         params.createdByHumanId,
+        params.visibleTo,
       );
 
       if (!CONTAINER_TYPES.has(params.type)) {
@@ -76,15 +79,17 @@ type CreateStreamParticleParams = {
   properties: ParticlePropertiesMap['stream'];
   createdByHumanId: string;
   visibleTo?: string[];
+  // Container to create the stream in; defaults to the network root.
+  parentPath?: ParticlePath;
 };
 
 export function useCreateStreamParticle() {
   return useMutation({
     mutationFn: async (params: CreateStreamParticleParams) => {
-      const path = particlePath(params.networkId, []);
-      const networkCollectionPath = toFirestoreChildrenPath(path);
+      const path = params.parentPath ?? particlePath(params.networkId, []);
+      const collectionPath = toFirestoreChildrenPath(path);
       return await createStreamParticle(
-        networkCollectionPath,
+        collectionPath,
         params.properties,
         params.createdByHumanId,
         params.visibleTo,

js/desktop/src/hooks/use-file-input.ts

@@ -48,16 +48,22 @@ export function useFileInput({
   useEffect(() => {
     if (!enabled) return;
 
+    // Capture phase so file pastes always become attachments — ProseMirror
+    // would otherwise inline pasted images as ephemeral blob: URLs. Mixed
+    // clipboards (e.g. Excel/Word ship an image rendition alongside the text)
+    // must still paste as text, so only file-only pastes are intercepted.
     const handlePaste = (e: ClipboardEvent) => {
-      const files = Array.from(e.clipboardData?.files ?? []);
-      if (files.length > 0) {
-        e.preventDefault();
-        onFilesRef.current(files);
-      }
+      const data = e.clipboardData;
+      if (!data) return;
+      const files = Array.from(data.files);
+      if (files.length === 0 || data.types.includes('text/plain')) return;
+      e.preventDefault();
+      e.stopPropagation();
+      onFilesRef.current(files);
     };
 
-    window.addEventListener('paste', handlePaste);
-    return () => window.removeEventListener('paste', handlePaste);
+    window.addEventListener('paste', handlePaste, true);
+    return () => window.removeEventListener('paste', handlePaste, true);
   }, [enabled]);
 
   // Drag and drop handlers

js/desktop/src/hooks/use-fixed-dwell.ts

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from 'react';
+
+const TICK_MS = 100;
+
+interface UseFixedDwellOptions {
+  /** Reset key — restarts the timer when it changes (particle id). */
+  id: string;
+  durationS: number;
+  paused: boolean;
+  onEnded: () => void;
+  onProgress?: (ratio: number) => void;
+}
+
+/**
+ * Drives a fixed-duration dwell timer for particles without intrinsic
+ * playback (text, tasks, events): reports progress and fires onEnded once
+ * the duration elapses. Pausing freezes elapsed time rather than resetting.
+ */
+export function useFixedDwell({
+  id,
+  durationS,
+  paused,
+  onEnded,
+  onProgress,
+}: UseFixedDwellOptions): void {
+  const elapsedRef = useRef(0);
+
+  useEffect(() => {
+    elapsedRef.current = 0;
+  }, [id]);
+
+  useEffect(() => {
+    if (paused) return;
+
+    const interval = setInterval(() => {
+      elapsedRef.current += TICK_MS / 1000;
+      const ratio = Math.min(elapsedRef.current / durationS, 1);
+      onProgress?.(ratio);
+
+      if (ratio >= 1) {
+        clearInterval(interval);
+        onEnded();
+      }
+    }, TICK_MS);
+
+    return () => clearInterval(interval);
+  }, [paused, durationS, onEnded, onProgress, id]);
+}

js/desktop/src/hooks/use-list-keyboard-nav.ts

@@ -1,29 +1,33 @@
 import { useEffect, useState } from 'react';
 import { useMediaSettingsStore } from '@/stores/media-settings-store';
 
-interface UseStreamKeyboardNavOptions {
-  streams: Array<{ id: string }>;
+interface UseListKeyboardNavOptions {
+  items: Array<{ id: string }>;
   enabled: boolean;
-  onNavigate: (streamId: string) => void;
+  onOpen: (id: string) => void;
 }
 
-export function useStreamKeyboardNav({
-  streams,
+/**
+ * Shared keyboard grammar for browsable lists (network root, folders):
+ * ↑/↓ move selection, Enter opens, 1–9 jump, V toggles video/audio.
+ */
+export function useListKeyboardNav({
+  items,
   enabled,
-  onNavigate,
-}: UseStreamKeyboardNavOptions) {
+  onOpen,
+}: UseListKeyboardNavOptions) {
   const [selectedIndex, setSelectedIndex] = useState<number | null>(
-    streams.length > 0 ? 0 : null,
+    items.length > 0 ? 0 : null,
   );
-  const [prevStreamCount, setPrevStreamCount] = useState(streams.length);
+  const [prevItemCount, setPrevItemCount] = useState(items.length);
   const recordingMode = useMediaSettingsStore((s) => s.recordingMode);
   const setRecordingMode = useMediaSettingsStore((s) => s.setRecordingMode);
 
-  // Select the first stream once they load and clear when empty — but not on
+  // Select the first item once they load and clear when empty — but not on
   // every Firestore update, which would scroll the list back to the top.
-  if (streams.length !== prevStreamCount) {
-    setPrevStreamCount(streams.length);
-    if (streams.length === 0) {
+  if (items.length !== prevItemCount) {
+    setPrevItemCount(items.length);
+    if (items.length === 0) {
       setSelectedIndex(null);
     } else if (selectedIndex === null) {
       setSelectedIndex(0);
@@ -31,7 +35,7 @@ export function useStreamKeyboardNav({
   }
 
   useEffect(() => {
-    if (!enabled || streams.length === 0) return;
+    if (!enabled || items.length === 0) return;
 
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.defaultPrevented) return;
@@ -49,19 +53,19 @@ export function useStreamKeyboardNav({
       const digit = parseInt(e.key, 10);
       if (digit >= 1 && digit <= 9) {
         const index = digit - 1;
-        if (index < streams.length) {
+        if (index < items.length) {
           e.preventDefault();
-          onNavigate(streams[index].id);
+          onOpen(items[index].id);
         }
         return;
       }
 
-      // Enter: navigate to selected
+      // Enter: open selected
       if (e.key === 'Enter') {
         setSelectedIndex((idx) => {
-          if (idx !== null && idx < streams.length) {
+          if (idx !== null && idx < items.length) {
             e.preventDefault();
-            onNavigate(streams[idx].id);
+            onOpen(items[idx].id);
           }
           return idx;
         });
@@ -86,7 +90,7 @@ export function useStreamKeyboardNav({
         setSelectedIndex((prev) => {
           if (prev === null) return 0;
           const next = prev + delta;
-          return Math.max(0, Math.min(next, streams.length - 1));
+          return Math.max(0, Math.min(next, items.length - 1));
         });
       }
     };
@@ -95,7 +99,7 @@ export function useStreamKeyboardNav({
     // components (ToggleGroup, etc.) consume them for their own navigation.
     window.addEventListener('keydown', handleKeyDown, true);
     return () => window.removeEventListener('keydown', handleKeyDown, true);
-  }, [enabled, streams, onNavigate, recordingMode, setRecordingMode]);
+  }, [enabled, items, onOpen, recordingMode, setRecordingMode]);
 
   return { selectedIndex };
 }

js/desktop/src/hooks/use-live-draft-field.ts

@@ -0,0 +1,85 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const DEFAULT_DEBOUNCE_MS = 600;
+
+interface UseLiveDraftFieldOptions {
+  remoteValue: string;
+  commit: (value: string) => void | Promise<void>;
+  debounceMs?: number;
+}
+
+export interface LiveDraftField {
+  value: string;
+  onChange: (value: string) => void;
+  onFocus: () => void;
+  onBlur: () => void;
+}
+
+/**
+ * State for a multiplayer always-editable text field: local draft while
+ * typing, debounced write-through, immediate flush on blur. Incoming remote
+ * values are applied only while the field is unfocused, so collaborators'
+ * snapshot updates never clobber in-progress typing (blur flushes pending
+ * writes synchronously, so unfocused implies no pending draft). Concurrent
+ * edits to the same field are last-write-wins.
+ */
+export function useLiveDraftField({
+  remoteValue,
+  commit,
+  debounceMs = DEFAULT_DEBOUNCE_MS,
+}: UseLiveDraftFieldOptions): LiveDraftField {
+  const [value, setValue] = useState(remoteValue);
+  const [focused, setFocused] = useState(false);
+
+  // Sync from remote during render (derived-state pattern) unless the user
+  // is editing the field.
+  const [prevRemote, setPrevRemote] = useState(remoteValue);
+  if (remoteValue !== prevRemote) {
+    setPrevRemote(remoteValue);
+    if (!focused) {
+      setValue(remoteValue);
+    }
+  }
+
+  // Written only in handlers; read by flush() so its identity stays stable.
+  const valueRef = useRef(remoteValue);
+  const pendingRef = useRef(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const commitRef = useRef(commit);
+  useEffect(() => {
+    commitRef.current = commit;
+  }, [commit]);
+
+  const flush = useCallback(() => {
+    clearTimeout(timerRef.current);
+    timerRef.current = undefined;
+    if (!pendingRef.current) return;
+    pendingRef.current = false;
+    void commitRef.current(valueRef.current);
+  }, []);
+
+  // Flush any pending write when the field unmounts (e.g. playback advances).
+  useEffect(() => flush, [flush]);
+
+  const onChange = useCallback(
+    (next: string) => {
+      valueRef.current = next;
+      setValue(next);
+      pendingRef.current = true;
+      clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(flush, debounceMs);
+    },
+    [debounceMs, flush],
+  );
+
+  const onFocus = useCallback(() => {
+    setFocused(true);
+  }, []);
+
+  const onBlur = useCallback(() => {
+    setFocused(false);
+    flush();
+  }, [flush]);
+
+  return { value, onChange, onFocus, onBlur };
+}

js/desktop/src/hooks/use-playback-keys.ts

@@ -1,4 +1,10 @@
-import { useEffect, useRef, useState, type RefObject } from 'react';
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type RefObject,
+} from 'react';
 import type { MediaParticleHandle } from '@/features/particles/media-particle-view';
 import { useSuspendPlayback } from '@/hooks/use-suspend-playback';
 import {
@@ -15,6 +21,10 @@ interface UsePlaybackKeysOptions {
 
 interface UsePlaybackKeysResult {
   fastPlayback: boolean;
+  /** True while playback is paused by the user's space toggle/hold. */
+  spacePaused: boolean;
+  /** Clear the user's space pause (e.g. clicking the on-screen play button). */
+  resume: () => void;
 }
 
 /**
@@ -31,6 +41,11 @@ export function usePlaybackKeys({
 
   useSuspendPlayback(spaceHeld, 'hold-space');
 
+  const resume = useCallback(() => {
+    setSpaceHeld(false);
+    spaceStartRef.current = 0;
+  }, []);
+
   useEffect(() => {
     const isExternallyPaused = () =>
       selectIsPaused(usePlaybackPauseStore.getState()) && !spaceHeld;
@@ -92,5 +107,5 @@ export function usePlaybackKeys({
     };
   }, [mediaRef, spaceHeld]);
 
-  return { fastPlayback };
+  return { fastPlayback, spacePaused: spaceHeld, resume };
 }

js/desktop/src/hooks/use-stream-navigation-keys.ts

@@ -11,6 +11,7 @@ interface UseStreamNavigationKeysOptions {
   childrenLength: number;
   mediaRef: RefObject<MediaParticleHandle | null>;
   onExit: () => void;
+  onToggleViewMode: () => void;
 }
 
 /**
@@ -24,6 +25,7 @@ export function useStreamNavigationKeys({
   childrenLength,
   mediaRef,
   onExit,
+  onToggleViewMode,
 }: UseStreamNavigationKeysOptions) {
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
@@ -54,10 +56,25 @@ export function useStreamNavigationKeys({
           e.preventDefault();
           onExit();
           break;
+        case 'l':
+        case 'L':
+          // Registered here (not in action keys) because the toggle must work
+          // in list mode, where playback is suspended and action keys bail.
+          e.preventDefault();
+          onToggleViewMode();
+          break;
       }
     };
 
     window.addEventListener('keydown', onKeyDown);
     return () => window.removeEventListener('keydown', onKeyDown);
-  }, [next, prev, currentIndex, childrenLength, mediaRef, onExit]);
+  }, [
+    next,
+    prev,
+    currentIndex,
+    childrenLength,
+    mediaRef,
+    onExit,
+    onToggleViewMode,
+  ]);
 }

js/desktop/src/hooks/use-stream-particles.ts

@@ -1,80 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { where, type QueryFieldFilterConstraint } from 'firebase/firestore';
-import { useLiveParticleChildren } from '@/hooks/use-particle';
-import { useAuthStore } from '@/stores/auth-store';
-import { parseParticlePath, type ParticlePath } from '@/lib/particle-path';
-import type { Particle, StreamProperties } from '@/api/types';
-
-export type StreamParticle = Particle & {
-  type: 'stream';
-  properties: StreamProperties;
-};
-
-const INITIAL_PAGE_SIZE = 12;
-const PAGE_INCREMENT = 12;
-
-// Stable where-constraint references so the Firestore subscription only
-// re-attaches when the tab actually changes, not on every render.
-const OPEN_STATUS_FILTER = where('status', '==', 'open');
-const CLOSED_STATUS_FILTER = where('status', '==', 'closed');
-
-function useVisibilityScopes(userId?: string, networkId?: string) {
-  return useMemo(() => {
-    const scopes: string[] = [];
-    if (userId) scopes.push(`human:${userId}`);
-    if (networkId) scopes.push(`network:${networkId}`);
-    return scopes;
-  }, [userId, networkId]);
-}
-
-interface UseStreamParticlesOptions {
-  // Which streams to subscribe to
-  status: 'open' | 'closed';
-}
-
-interface UseStreamParticlesResult {
-  streams: StreamParticle[];
-  isLoading: boolean;
-  networkId: string;
-  /** True when more streams may exist beyond the current window. */
-  canLoadMore: boolean;
-  /** Extend the pagination window. */
-  loadMore: () => void;
-}
-
-export function useStreamParticles(
-  path: ParticlePath,
-  { status }: UseStreamParticlesOptions,
-): UseStreamParticlesResult {
-  const { networkId } = parseParticlePath(path);
-  const user = useAuthStore((s) => s.user);
-  const visibilityScopes = useVisibilityScopes(user?.id, networkId);
-
-  const [limit, setLimit] = useState(INITIAL_PAGE_SIZE);
-
-  const whereFilter: QueryFieldFilterConstraint =
-    status === 'open' ? OPEN_STATUS_FILTER : CLOSED_STATUS_FILTER;
-
-  const { children, isLoading } = useLiveParticleChildren(path, {
-    orderByField: 'last_child_created_at',
-    orderDirection: 'desc',
-    visibilityScopes,
-    whereFilter,
-    limit,
-  });
-
-  const streams = useMemo(
-    () => children.filter((c): c is StreamParticle => c.type === 'stream'),
-    [children],
-  );
-
-  // Heuristic: if we got back as many items as we asked for, assume there
-  // might be more. Clicking load-more when there are no more is a no-op.
-  const canLoadMore = streams.length >= limit;
-
-  const loadMore = useCallback(() => {
-    setLimit((prev) => prev + PAGE_INCREMENT);
-  }, []);
-
-  return { streams, isLoading, networkId, canLoadMore, loadMore };
-}

js/desktop/src/hooks/use-stream-playback.ts

@@ -98,12 +98,26 @@ interface UseStreamPlaybackResult {
   goToParticle: (particleId: string) => void;
 }
 
+interface UseStreamPlaybackOptions {
+  /**
+   * When false, newly arriving particles don't pull playback forward after
+   * it has ended (list mode browses; selection must stay put). Default true.
+   */
+  autoAdvanceOnNew?: boolean;
+}
+
 export function useStreamPlayback(
   streamParticle: Particle & { type: 'stream' },
   path: ParticlePath,
+  { autoAdvanceOnNew = true }: UseStreamPlaybackOptions = {},
 ): UseStreamPlaybackResult {
   const userId = useAuthStore((s) => s.user?.id);
   const [state, dispatch] = useReducer(playbackReducer, initialState);
+  // Read via ref so the onAdded subscription callback stays stable.
+  const autoAdvanceOnNewRef = useRef(autoAdvanceOnNew);
+  useEffect(() => {
+    autoAdvanceOnNewRef.current = autoAdvanceOnNew;
+  }, [autoAdvanceOnNew]);
   // Track the stream ID we've initialized for, to reset when navigating between streams
   const initializedForRef = useRef<string | null>(null);
   // Latest currentIndex for onParticleRemoved, which is passed into
@@ -115,6 +129,7 @@ export function useStreamPlayback(
 
   // --- Firestore change callbacks ---
   const onParticleAdded = useCallback((particle: Particle) => {
+    if (!autoAdvanceOnNewRef.current) return;
     dispatch({ type: 'PARTICLE_ADDED', particleId: particle.id });
   }, []);
 

js/desktop/src/hooks/use-stream-view-mode.ts

@@ -0,0 +1,15 @@
+import { useCallback, useState } from 'react';
+
+export type StreamViewMode = 'player' | 'list';
+
+export function useStreamViewMode(): {
+  mode: StreamViewMode;
+  toggle: () => void;
+} {
+  const [mode, setMode] = useState<StreamViewMode>('player');
+  const toggle = useCallback(() => {
+    setMode((prev) => (prev === 'player' ? 'list' : 'player'));
+  }, []);
+
+  return { mode, toggle };
+}

js/desktop/src/lib/firestore-particles.ts

@@ -23,7 +23,11 @@ import {
   QueryFieldFilterConstraint,
 } from 'firebase/firestore';
 import { firestoreDb } from '@/firebase';
-import { isContainerType, ParticleSchema } from '@/api/types';
+import {
+  isContainerType,
+  ParticleSchema,
+  UnknownParticleSchema,
+} from '@/api/types';
 import type {
   Particle,
   ParticleType,
@@ -33,6 +37,22 @@ import type {
 
 // --- Converter ---
 
+// Firestore stores timestamps as `Timestamp`; zod expects `Date`. Coerce the
+// per-type property fields that carry timestamps.
+function coerceLeafPropertyDates(
+  type: ParticleType,
+  properties: DocumentData | undefined,
+): DocumentData | undefined {
+  if (!properties) return properties;
+  if (type === 'text' && properties.edited_at) {
+    return {
+      ...properties,
+      edited_at: (properties.edited_at as Timestamp).toDate(),
+    };
+  }
+  return properties;
+}
+
 const particleConverter: FirestoreDataConverter<Particle> = {
   toFirestore(particle: Particle): DocumentData {
     const { id: _id, created_at, updated_at, ...rest } = particle;
@@ -60,6 +80,7 @@ const particleConverter: FirestoreDataConverter<Particle> = {
           id: snap.id,
           type: raw.type,
           properties: raw.properties,
+          status: raw.status ?? undefined,
           created_at: (raw.created_at as Timestamp).toDate(),
           created_by_human_id: raw.created_by_human_id,
           updated_at: raw.updated_at
@@ -79,7 +100,6 @@ const particleConverter: FirestoreDataConverter<Particle> = {
             : undefined,
           huddle_active_participants:
             raw.huddle_active_participants ?? undefined,
-          status: raw.status ?? undefined,
         });
       case 'folder':
         return ParticleSchema.parse({
@@ -92,21 +112,16 @@ const particleConverter: FirestoreDataConverter<Particle> = {
             ? (raw.updated_at as Timestamp).toDate()
             : undefined,
           visible_to: raw.visible_to,
+          last_child_created_at: raw.last_child_created_at
+            ? (raw.last_child_created_at as Timestamp).toDate()
+            : undefined,
         });
       case 'media':
       case 'file':
       case 'text':
-      case 'quest':
+      case 'task':
       case 'paper': {
-        // Firestore stores timestamps as `Timestamp`; zod expects `Date`. Text
-        // particles carry `properties.edited_at`, so coerce it if present.
-        const properties =
-          type === 'text' && raw.properties?.edited_at
-            ? {
-                ...raw.properties,
-                edited_at: (raw.properties.edited_at as Timestamp).toDate(),
-              }
-            : raw.properties;
+        const properties = coerceLeafPropertyDates(type, raw.properties);
         return ParticleSchema.parse({
           id: snap.id,
           type: raw.type,
@@ -124,11 +139,33 @@ const particleConverter: FirestoreDataConverter<Particle> = {
         });
       }
       default:
-        throw new Error(`Unknown particle type: ${type}`);
+        // Forward compatibility: keep unrecognized types visible as
+        // placeholders instead of breaking the snapshot they arrive in.
+        return UnknownParticleSchema.parse({
+          id: snap.id,
+          type: 'unknown',
+          raw_type: raw.type,
+          created_at: (raw.created_at as Timestamp).toDate(),
+          created_by_human_id: raw.created_by_human_id,
+          updated_at: raw.updated_at
+            ? (raw.updated_at as Timestamp).toDate()
+            : undefined,
+        });
     }
   },
 };
 
+// Corrupt docs (malformed base fields, schema parse failures) shouldn't take
+// down a whole subscription — skip just the bad doc and keep the rest.
+function safeData(snap: QueryDocumentSnapshot<Particle>): Particle | null {
+  try {
+    return snap.data();
+  } catch (err) {
+    console.warn(`Skipping unparseable particle at ${snap.ref.path}:`, err);
+    return null;
+  }
+}
+
 // --- Typed reference helpers ---
 
 function typedDoc(path: string) {
@@ -149,7 +186,7 @@ export function subscribeToParticle(
   return onSnapshot(
     typedDoc(docPath),
     (snap) => {
-      onData(snap.exists() ? snap.data() : null);
+      onData(snap.exists() ? safeData(snap) : null);
     },
     onError,
   );
@@ -161,7 +198,7 @@ export async function getParticle(docPath: string): Promise<Particle | null> {
     return null;
   }
 
-  return doc.data();
+  return safeData(doc);
 }
 
 export interface GetParticleChildrenOptions {
@@ -184,7 +221,7 @@ export async function getParticleChildren(
     orderBy(orderByField, orderDirection),
   );
   const snap = await getDocs(q);
-  return snap.docs.map((d) => d.data());
+  return snap.docs.flatMap((d) => safeData(d) ?? []);
 }
 
 export interface SubscribeToParticleChildrenOptions {
@@ -230,14 +267,16 @@ export function subscribeToParticleChildren(
   return onSnapshot(
     q,
     (snap) => {
-      const updatedChildren = snap.docs.map((d) => d.data());
+      const updatedChildren = snap.docs.flatMap((d) => safeData(d) ?? []);
       onData(updatedChildren);
 
       if (onAdded || onRemoved) {
         for (const change of snap.docChanges()) {
-          if (change.type === 'added' && onAdded) onAdded(change.doc.data());
+          const child = safeData(change.doc);
+          if (!child) continue;
+          if (change.type === 'added' && onAdded) onAdded(child);
           if (change.type === 'removed' && onRemoved)
-            onRemoved(change.doc.data(), updatedChildren);
+            onRemoved(child, updatedChildren);
         }
       }
     },
@@ -258,12 +297,31 @@ export function subscribeToLatestChild(
   return onSnapshot(
     q,
     (snap) => {
-      onData(snap.empty ? null : snap.docs[0].data());
+      onData(snap.empty ? null : safeData(snap.docs[0]));
     },
     onError,
   );
 }
 
+// Best-effort bump of the parent container's last_child_created_at when a
+// child is created. The particle processor worker does this for stream
+// parents, but skips folders, so the client keeps folder activity fresh
+// itself. Same value semantics as the worker: the child's created_at, so it
+// stays directly comparable with playback markers.
+function bumpParentLastChildCreatedAt(
+  collectionPath: string,
+  childCreatedAt: Date,
+): void {
+  const parentDocPath = collectionPath.replace(/\/children$/, '');
+  // The network root (networks/{id}) is not a particle doc — nothing to bump.
+  if (!parentDocPath.includes('/children/')) return;
+  updateDoc(doc(firestoreDb, parentDocPath), {
+    last_child_created_at: Timestamp.fromDate(childCreatedAt),
+  }).catch(() => {
+    // Non-fatal: ordering freshness only.
+  });
+}
+
 // This creates a new particle document with the given properties and returns its ID.
 export async function createParticle<T extends ParticleType>(
   collectionPath: string,
@@ -279,15 +337,21 @@ export async function createParticle<T extends ParticleType>(
     );
   }
 
+  const createdAt = new Date();
   const particle: Particle = ParticleSchema.parse({
     id: '', // ignored by toFirestore, but needed to satisfy the type
     type,
     properties,
-    created_at: new Date(),
+    created_at: createdAt,
     created_by_human_id: createdByHumanId,
     ...(visibleTo ? { visible_to: visibleTo } : {}),
+    // Containers start with last_child_created_at = created_at so they appear
+    // in activity-ordered queries before they have any children (Firestore
+    // orderBy drops docs missing the field).
+    ...(isContainerType(type) ? { last_child_created_at: createdAt } : {}),
   });
   const ref = await addDoc(typedCollection(collectionPath), particle);
+  bumpParentLastChildCreatedAt(collectionPath, createdAt);
   return ref.id;
 }
 
@@ -301,19 +365,32 @@ export async function createStreamParticle(
     throw new Error('visibleTo is required for streams and cannot be empty');
   }
 
+  const createdAt = new Date();
   const particle: Particle = ParticleSchema.parse({
     id: '',
     type: 'stream',
     properties,
-    created_at: new Date(),
+    status: 'open',
+    created_at: createdAt,
     created_by_human_id: createdByHumanId,
     visible_to: visibleTo,
-    status: 'open',
+    last_child_created_at: createdAt,
   });
   const ref = await addDoc(typedCollection(collectionPath), particle);
+  bumpParentLastChildCreatedAt(collectionPath, createdAt);
   return ref.id;
 }
 
+export async function updateStreamStatus(
+  docPath: string,
+  status: 'open' | 'closed',
+): Promise<void> {
+  await updateDoc(typedDoc(docPath), {
+    status,
+    updated_at: serverTimestamp(),
+  });
+}
+
 // This allows updating properties without overwriting the entire properties object
 export async function updateParticleProperties<T extends ParticleType>(
   docPath: string,
@@ -382,14 +459,6 @@ export async function updateParticle(
   });
 }
 
-export async function updateStreamStatus(
-  docPath: string,
-  status: 'open' | 'closed',
-): Promise<void> {
-  const particleRef = typedDoc(docPath);
-  await updateDoc(particleRef, { status, updated_at: serverTimestamp() });
-}
-
 /**
  * Soft-delete (tombstone) a non-container particle. The Firestore doc stays
  * in place so concurrent viewers see the deletion inline rather than being

js/desktop/src/lib/immersive-text.ts

@@ -0,0 +1,7 @@
+/** Font scale for short messages shown as large centered text. Shared by the
+ *  composer and the posted view so editing matches the final render. */
+export function getImmersiveTextStyle(length: number) {
+  if (length < 30) return { size: 'text-5xl', weight: 'font-semibold' };
+  if (length < 70) return { size: 'text-3xl', weight: 'font-semibold' };
+  return { size: 'text-2xl', weight: 'font-normal' };
+}

js/desktop/src/lib/link-metadata.ts

@@ -14,3 +14,11 @@ export function extractUrls(text: string): string[] {
   // should only yield a single preview card.
   return Array.from(new Set(Array.from(text.matchAll(URL_REGEX), (m) => m[0])));
 }
+
+export function domainFromUrl(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./, '');
+  } catch {
+    return url;
+  }
+}

js/desktop/src/lib/markdown.ts

@@ -0,0 +1,5 @@
+export function hasMarkdownFormatting(content: string): boolean {
+  return /^#{1,6} |^\s*[-*+] |^\s*\d+\. |^```|`[^`]+`|\*\*|__|\*\S[^*]*\*|\b_\S[^_]*_\b|^>/m.test(
+    content,
+  );
+}

js/desktop/src/lib/particle-display.ts

@@ -0,0 +1,91 @@
+import {
+  CircleCheck,
+  FileText,
+  Folder,
+  HelpCircle,
+  Image,
+  MessageSquare,
+  Mic,
+  Radio,
+  StickyNote,
+  Trash2,
+  Video,
+  type LucideIcon,
+} from 'lucide-react';
+import { isParticleDeleted, type Particle } from '@/api/types';
+
+export function getParticleTypeIcon(particle: Particle): LucideIcon {
+  if (isParticleDeleted(particle)) return Trash2;
+  switch (particle.type) {
+    case 'stream':
+      return Radio;
+    case 'folder':
+      return Folder;
+    case 'text':
+      return MessageSquare;
+    case 'media': {
+      const mime = particle.properties.mime_type;
+      if (mime.startsWith('video/')) return Video;
+      if (mime.startsWith('audio/')) return Mic;
+      if (mime.startsWith('image/')) return Image;
+      return Video;
+    }
+    case 'file':
+      return FileText;
+    case 'task':
+      return CircleCheck;
+    case 'paper':
+      return StickyNote;
+    case 'unknown':
+      return HelpCircle;
+  }
+}
+
+export function getMessagePreview(particle: Particle): string {
+  if (isParticleDeleted(particle)) return 'Deleted particle';
+  switch (particle.type) {
+    case 'stream':
+    case 'folder':
+      return particle.properties.name;
+    case 'text':
+      return particle.properties.content;
+    case 'media': {
+      const mime = particle.properties.mime_type;
+      if (mime.startsWith('image/')) return 'Photo';
+      if (mime.startsWith('video/') || mime.startsWith('audio/')) {
+        const transcriptText = particle.properties.transcript?.transcript;
+        if (transcriptText) return transcriptText;
+        return mime.startsWith('video/') ? 'Video clip' : 'Voice note';
+      }
+      return 'Media';
+    }
+    case 'file':
+      return particle.properties.filename;
+    case 'task':
+      return particle.properties.title;
+    case 'paper':
+      return particle.properties.title;
+    case 'unknown':
+      return 'Unsupported particle';
+  }
+}
+
+export function getParticleDisplayName(particle: Particle): string {
+  switch (particle.type) {
+    case 'stream':
+    case 'folder':
+      return particle.properties.name;
+    case 'task':
+      return particle.properties.title;
+    case 'paper':
+      return particle.properties.title;
+    case 'file':
+      return particle.properties.filename;
+    case 'text':
+      return particle.properties.content.slice(0, 30);
+    case 'media':
+      return particle.type;
+    case 'unknown':
+      return 'Unsupported particle';
+  }
+}

js/desktop/src/stores/compose-intent-store.ts

@@ -10,6 +10,7 @@ import { create } from 'zustand';
  * |--------|-----------------|--------------------------------------------|
  * | record | idle            | start a media (camera/mic) recording       |
  * | text   | idle            | open the text compose step                 |
+ * | task   | idle            | open the task compose step                 |
  * | stop   | recording       | finish recording → review                  |
  * | cancel | recording, etc. | abort recording / discard review           |
  * | send   | reviewing       | submit the recorded particle               |
@@ -18,7 +19,13 @@ import { create } from 'zustand';
  * ultimately invoke the same callbacks the intent dispatcher does, so the
  * guard logic stays in one place.
  */
-export type ComposeIntent = 'record' | 'text' | 'stop' | 'cancel' | 'send';
+export type ComposeIntent =
+  | 'record'
+  | 'text'
+  | 'task'
+  | 'stop'
+  | 'cancel'
+  | 'send';
 
 interface ComposeIntentState {
   intent: { kind: ComposeIntent } | null;

js/desktop/src/styles/globals.css

@@ -151,6 +151,34 @@
   background: oklch(1 0 0 / 35%);
 }
 
+/* Message cards: more prominent scrollbar than the subtle global default.
+   The descendant form reaches scroll containers we don't own (Crepe's .milkdown). */
+.scrollbar-card::-webkit-scrollbar,
+.scrollbar-card ::-webkit-scrollbar {
+  width: 8px;
+}
+
+.scrollbar-card::-webkit-scrollbar-thumb,
+.scrollbar-card ::-webkit-scrollbar-thumb {
+  background: oklch(1 0 0 / 30%);
+  border-radius: 9999px;
+}
+
+.scrollbar-card::-webkit-scrollbar-thumb:hover,
+.scrollbar-card ::-webkit-scrollbar-thumb:hover {
+  background: oklch(1 0 0 / 50%);
+}
+
+/* Message layout: the compose editor and the posted card derive their widths
+   from one shared content column, so line wrapping while editing matches the
+   final render. The editor gutter additionally fits Crepe's block drag handle
+   (66px wide, offset 16px left of the block). */
+:root {
+  --message-content-width: 39rem;
+  --message-card-padding: 1.5rem;
+  --message-editor-gutter: 5.5rem;
+}
+
 /* Frameless window drag regions */
 .drag-region {
   -webkit-app-region: drag;

js/mobile/src/lib/firestore-particles.ts

@@ -16,6 +16,7 @@ import {
   arrayRemove,
   FieldPath,
   type DocumentData,
+  type DocumentSnapshot,
   type FirestoreDataConverter,
   type QueryDocumentSnapshot,
   type SnapshotOptions,
@@ -129,6 +130,18 @@ const particleConverter: FirestoreDataConverter<Particle> = {
   },
 };
 
+// Parse a snapshot defensively: newer clients may write particle types this
+// app version doesn't know yet. A single unparseable doc must not break the
+// whole subscription, so skip it instead of throwing inside onSnapshot.
+function safeData(snap: DocumentSnapshot<Particle>): Particle | null {
+  try {
+    return snap.data() ?? null;
+  } catch (error) {
+    console.warn(`Skipping unparseable particle ${snap.ref.path}:`, error);
+    return null;
+  }
+}
+
 // --- Typed reference helpers ---
 
 function typedDoc(path: string) {
@@ -149,7 +162,7 @@ export function subscribeToParticle(
   return onSnapshot(
     typedDoc(docPath),
     (snap) => {
-      onData(snap.exists() ? snap.data() : null);
+      onData(safeData(snap));
     },
     onError,
   );
@@ -160,7 +173,7 @@ export async function getParticle(docPath: string): Promise<Particle | null> {
   if (!docSnap.exists()) {
     return null;
   }
-  return docSnap.data();
+  return safeData(docSnap);
 }
 
 export interface GetParticleChildrenOptions {
@@ -183,7 +196,9 @@ export async function getParticleChildren(
     orderBy(orderByField, orderDirection),
   );
   const snap = await getDocs(q);
-  return snap.docs.map((d) => d.data());
+  return snap.docs
+    .map((d) => safeData(d))
+    .filter((p): p is Particle => p !== null);
 }
 
 export interface SubscribeToParticleChildrenOptions {
@@ -229,14 +244,18 @@ export function subscribeToParticleChildren(
   return onSnapshot(
     q,
     (snap) => {
-      const updatedChildren = snap.docs.map((d) => d.data());
+      const updatedChildren = snap.docs
+        .map((d) => safeData(d))
+        .filter((p): p is Particle => p !== null);
       onData(updatedChildren);
 
       if (onAdded || onRemoved) {
         for (const change of snap.docChanges()) {
-          if (change.type === 'added' && onAdded) onAdded(change.doc.data());
+          const changed = safeData(change.doc);
+          if (!changed) continue;
+          if (change.type === 'added' && onAdded) onAdded(changed);
           if (change.type === 'removed' && onRemoved)
-            onRemoved(change.doc.data(), updatedChildren);
+            onRemoved(changed, updatedChildren);
         }
       }
     },
@@ -257,7 +276,7 @@ export function subscribeToLatestChild(
   return onSnapshot(
     q,
     (snap) => {
-      onData(snap.empty ? null : snap.docs[0].data());
+      onData(snap.empty ? null : safeData(snap.docs[0]));
     },
     onError,
   );