@dxos/plugin-magazine 0.0.0

package/src/containers/FeedArticle/FeedArticle.stories.tsx

@@ -0,0 +1,102 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useEffect, useState } from 'react';
+
+import { EffectEx } from '@dxos/effect';
+import { Panel, Toolbar } from '@dxos/react-ui';
+import { withAttention } from '@dxos/react-ui-attention/testing';
+import { withMosaic } from '@dxos/react-ui-mosaic/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { PostStack, type PostStackAction } from '#components';
+import { generateFeed, generatePosts } from '#testing';
+import { type Subscription } from '#types';
+
+type FeedArticleStoryProps = {
+  feedUrl?: string;
+};
+
+const useFeedData = (feedUrl?: string): { feed: Subscription.Subscription; posts: Subscription.Post[] } | undefined => {
+  const [data, setData] = useState<{ feed: Subscription.Subscription; posts: Subscription.Post[] }>();
+
+  useEffect(() => {
+    let cancelled = false;
+    const load = async () => {
+      if (feedUrl) {
+        const { fetchRss } = await import('../../operations/sources/rss');
+        const result = await EffectEx.runPromise(fetchRss(feedUrl, { corsProxy: '/api/rss?url=' }));
+        if (!cancelled) {
+          setData(result);
+        }
+      } else {
+        const feed = generateFeed();
+        const posts = generatePosts(50);
+        if (!cancelled) {
+          setData({ feed, posts });
+        }
+      }
+    };
+
+    void load().catch(() => {});
+
+    return () => {
+      cancelled = true;
+    };
+  }, [feedUrl]);
+
+  return data;
+};
+
+const DefaultStory = ({ feedUrl }: FeedArticleStoryProps) => {
+  const data = useFeedData(feedUrl);
+  const [currentPostId, setCurrentPostId] = useState<string>();
+
+  const handleAction = (action: PostStackAction) => {
+    if (action.type === 'current') {
+      setCurrentPostId(action.postId);
+    }
+  };
+
+  if (!data) {
+    return null;
+  }
+
+  const { feed, posts } = data;
+
+  return (
+    <Panel.Root role='article' className='dx-document'>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root>
+          <Toolbar.Text>{feed.name}</Toolbar.Text>
+        </Toolbar.Root>
+      </Panel.Toolbar>
+      <Panel.Content>
+        <PostStack id='story-feed' posts={posts} currentId={currentPostId} onAction={handleAction} />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+const meta: Meta<typeof DefaultStory> = {
+  title: 'plugins/plugin-magazine/containers/FeedArticle',
+  component: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'column' }), withAttention(), withMosaic()],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const FromRss: Story = {
+  args: {
+    feedUrl: 'https://hnrss.org/frontpage',
+  },
+};

package/src/containers/FeedArticle/FeedArticle.tsx

@@ -0,0 +1,68 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useState } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { Filter, Obj, Query, Ref, Scope } from '@dxos/echo';
+import { useObject, useQuery } from '@dxos/react-client/echo';
+import { Panel } from '@dxos/react-ui';
+
+import { PostStack, type PostStackAction } from '#components';
+import { meta } from '#meta';
+import { FeedOperation } from '#types';
+import { Subscription } from '#types';
+
+import { FeedToolbar } from './FeedToolbar';
+
+export type FeedArticleProps = AppSurface.ObjectArticleProps<Subscription.Subscription>;
+
+export const FeedArticle = ({ role, subject, attendableId }: FeedArticleProps) => {
+  const { invokePromise } = useOperationInvoker();
+  const [currentPostId, setCurrentPostId] = useState<string>();
+  const [subscription] = useObject(subject);
+  // Subscribe to the backing queue via its Ref — `.target` alone does not re-render when the
+  // feed loads after navigation (same pitfall as plugin-inbox MailboxArticle).
+  const [postFeed] = useObject(subscription?.feed);
+  const db = Obj.getDatabase(subscription);
+  const posts = useQuery(
+    db,
+    postFeed
+      ? Query.select(Filter.type(Subscription.Post)).from(Scope.feed(Obj.getURI(postFeed)))
+      : Query.select(Filter.nothing()),
+  );
+
+  const handleAction = useCallback((action: PostStackAction) => {
+    if (action.type === 'current') {
+      setCurrentPostId(action.postId);
+    }
+  }, []);
+
+  const handleSync = useCallback(() => {
+    // Failures surface as a toast via `notify`; invokePromise resolves with `{ error }`, never throws.
+    void invokePromise(
+      FeedOperation.SyncFeed,
+      { feed: Ref.make(subject) },
+      {
+        spaceId: Obj.getDatabase(subject)?.spaceId,
+        notify: { error: ['sync-feed-error.title', { ns: meta.profile.key }] },
+      },
+    );
+  }, [subject, invokePromise]);
+
+  return (
+    <Panel.Root role={role} className='dx-document'>
+      <FeedToolbar attendableId={attendableId} onSync={handleSync} />
+      <Panel.Content asChild>
+        <PostStack
+          id={subscription?.id ?? subject.id}
+          posts={posts}
+          currentId={currentPostId}
+          onAction={handleAction}
+        />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};

package/src/containers/FeedArticle/FeedToolbar.tsx

@@ -0,0 +1,47 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React from 'react';
+
+import { Panel } from '@dxos/react-ui';
+import { Menu, MenuBuilder, useMenuBuilder } from '@dxos/react-ui-menu';
+
+import { meta } from '#meta';
+
+export type FeedToolbarProps = {
+  attendableId?: string;
+  onSync: () => void;
+};
+
+/**
+ * Reactive feed toolbar built from the menu action-graph idiom: a single Sync action. Matches the
+ * magazine/post toolbars; the feed's name is surfaced by the plank chrome, not duplicated here.
+ */
+export const FeedToolbar = ({ attendableId, onSync }: FeedToolbarProps) => {
+  const menuActions = useMenuBuilder(
+    () =>
+      MenuBuilder.make()
+        .action(
+          'sync',
+          {
+            label: ['sync-feed.label', { ns: meta.profile.key }],
+            icon: 'ph--arrows-clockwise--regular',
+            iconOnly: true,
+          },
+          onSync,
+        )
+        .build(),
+    [onSync],
+  );
+
+  return (
+    <Menu.Root {...menuActions} attendableId={attendableId}>
+      <Panel.Toolbar asChild>
+        <Menu.Toolbar />
+      </Panel.Toolbar>
+    </Menu.Root>
+  );
+};
+
+FeedToolbar.displayName = 'FeedToolbar';

package/src/containers/FeedArticle/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { FeedArticle as default } from './FeedArticle';

package/src/containers/FeedProperties/FeedProperties.tsx

@@ -0,0 +1,107 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation, Paths } from '@dxos/app-toolkit';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { Operation, Trigger } from '@dxos/compute';
+import { Filter, Obj, Query, Ref } from '@dxos/echo';
+import { useObject, useQuery } from '@dxos/react-client/echo';
+import { IconButton, Input, useTranslation } from '@dxos/react-ui';
+import { Form } from '@dxos/react-ui-form';
+
+import { meta } from '#meta';
+import { FeedOperation, Subscription } from '#types';
+
+export type FeedPropertiesProps = AppSurface.ObjectPropertiesProps<Subscription.Subscription>;
+
+export const FeedProperties = ({ subject }: FeedPropertiesProps) => {
+  const { t } = useTranslation(meta.profile.key);
+  const { invokePromise } = useOperationInvoker();
+  const db = useMemo(() => Obj.getDatabase(subject), [subject]);
+  const [pending, setPending] = useState(false);
+
+  const childTriggers = useQuery(
+    db,
+    Query.select(Filter.and(Filter.type(Trigger.Trigger), Filter.childOf(subject, { transitive: false }))).debugLabel(
+      'plugin-magazine.FeedProperties.syncTrigger',
+    ),
+  );
+
+  const syncTrigger = useMemo(() => childTriggers.find((trigger) => trigger.spec?.kind === 'timer'), [childTriggers]);
+
+  const [syncEnabled, setSyncEnabled] = useObject(syncTrigger, 'enabled');
+
+  const handleToggleSync = useCallback(async () => {
+    if (!db) {
+      return;
+    }
+
+    if (syncTrigger) {
+      setSyncEnabled((enabled) => !enabled);
+      return;
+    }
+
+    setPending(true);
+    try {
+      const operation = await ensureSyncFeedOperation(db);
+      db.add(
+        Trigger.make({
+          [Obj.Parent]: subject,
+          enabled: true,
+          spec: Trigger.specTimer('*/5 * * * *'),
+          runnable: Ref.make(operation),
+          input: { feed: db.makeRef(Obj.getURI(subject)) },
+        }),
+      );
+    } finally {
+      setPending(false);
+    }
+  }, [syncTrigger, db, subject, setSyncEnabled]);
+
+  const handleViewTrigger = useCallback(() => {
+    if (!db) {
+      return;
+    }
+
+    void invokePromise(LayoutOperation.Open, {
+      subject: [Paths.getSpacePath(db.spaceId, 'settings', 'org.dxos.plugin.routine.routines')],
+      workspace: Paths.getSpacePath(db.spaceId),
+    });
+  }, [invokePromise, db]);
+
+  return (
+    <Form.Section>
+      <Input.Root>
+        <Input.Label>{t('feed-sync.label')}</Input.Label>
+        <div className='flex flex-row items-center'>
+          <Input.Switch
+            checked={syncEnabled ?? false}
+            disabled={pending}
+            onCheckedChange={() => {
+              void handleToggleSync();
+            }}
+          />
+          {syncTrigger && (
+            <IconButton iconOnly icon='ph--gear--regular' label={t('view-trigger.label')} onClick={handleViewTrigger} />
+          )}
+        </div>
+      </Input.Root>
+    </Form.Section>
+  );
+};
+
+const ensureSyncFeedOperation = async (db: NonNullable<ReturnType<typeof Obj.getDatabase>>) => {
+  const existing = await db
+    .query(Filter.and(Filter.type(Operation.PersistentOperation), Filter.key(FeedOperation.SyncFeed.meta.key)))
+    .run();
+  const [existingOperation] = existing;
+  if (existingOperation) {
+    return existingOperation;
+  }
+
+  return db.add(Operation.serialize(FeedOperation.SyncFeed));
+};

package/src/containers/FeedProperties/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { FeedProperties as default } from './FeedProperties';

package/src/containers/MagazineArticle/MagazineArticle.stories.tsx

@@ -0,0 +1,244 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React from 'react';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { type Client } from '@dxos/client';
+import { type Space } from '@dxos/client/echo';
+import { Feed, Filter, Obj, Ref } from '@dxos/echo';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { SpacePlugin } from '@dxos/plugin-space/testing';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { Loading, withLayout } from '@dxos/react-ui/testing';
+
+import { MagazineSkill } from '#skills';
+import { generateCuratedPost, generateFeed, generateMagazine } from '#testing';
+import { translations } from '#translations';
+import { Magazine, Subscription } from '#types';
+
+import { MagazinePlugin } from '../../MagazinePlugin';
+import { MagazineArticle } from './MagazineArticle';
+
+const DefaultStory = () => {
+  const spaces = useSpaces();
+  const space = spaces[spaces.length - 1];
+  const magazines = useQuery(space?.db, Filter.type(Magazine.Magazine));
+  const magazine = magazines[0];
+  if (!magazine) {
+    return <Loading />;
+  }
+
+  return <MagazineArticle role='article' subject={magazine} attendableId='story' />;
+};
+
+const seedSpace =
+  (options: { postCount: number; feedCount: number; readFraction: number }) =>
+  ({ client }: { client: Client }) =>
+    Effect.gen(function* () {
+      yield* initializeIdentity(client);
+      const space = (yield* Effect.promise(() => client.spaces.create())) as Space;
+      yield* Effect.promise(() => space.waitUntilReady());
+
+      const readCount = Math.floor(options.postCount * options.readFraction);
+      const posts: Subscription.Post[] = [];
+      for (let i = 0; i < options.postCount; i++) {
+        posts.push(space.db.add(generateCuratedPost({ read: i < readCount })));
+      }
+
+      const feeds: Subscription.Subscription[] = [];
+      for (let i = 0; i < options.feedCount; i++) {
+        feeds.push(space.db.add(generateFeed()));
+      }
+
+      space.db.add(generateMagazine({ name: 'Distributed Systems Reading', feeds, posts }));
+    });
+
+const buildMeta = (options: {
+  postCount: number;
+  feedCount: number;
+  readFraction: number;
+}): Meta<typeof DefaultStory> => ({
+  component: DefaultStory,
+  decorators: [
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        ClientPlugin({
+          types: [Subscription.Subscription, Subscription.Post, Magazine.Magazine],
+          onClientInitialized: seedSpace(options),
+        }),
+        SpacePlugin({}),
+        StorybookPlugin({}),
+        MagazinePlugin(),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+});
+
+const meta: Meta<typeof DefaultStory> = {
+  title: 'plugins/plugin-magazine/containers/MagazineArticle',
+  ...buildMeta({ postCount: 12, feedCount: 2, readFraction: 0.25 }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+//
+// CurateFlow story
+//
+// Seeds a magazine + a feed whose queue is pre-populated with three Posts.
+// Renders MagazineArticle and exercises the full Curate cycle:
+//   1. Click Curate. CurateMagazine pulls queue items into magazine.posts;
+//      tiles appear.
+//   2. Click Clear. magazine.posts empties; "No articles yet" placeholder
+//      appears.
+//   3. Click Curate again. With the canonical-proxy reuse fix, this must NOT
+//      throw the `addCore` invariant — and the tiles must come back, proving
+//      magazine.posts re-renders reactively after a second Curate.
+//
+
+const seedSpaceWithQueueItems = ({ client }: { client: Client }) =>
+  Effect.gen(function* () {
+    yield* initializeIdentity(client);
+    const space = (yield* Effect.promise(() => client.spaces.create())) as Space;
+    yield* Effect.promise(() => space.waitUntilReady());
+
+    // No `url` set: handleCurate's `validFeeds` filter skips this feed during
+    // the SyncFeed phase, so the test doesn't depend on a real RSS endpoint.
+    // CurateMagazine still iterates `magazine.feeds` and reads the backing
+    // queue, which is what we want to exercise.
+    const subscriptionFeed = space.db.add(
+      Subscription.makeSubscription({
+        name: 'Curate Test Feed',
+        type: 'rss',
+      }),
+    );
+    yield* Effect.promise(() => space.db.flush());
+
+    // Push three Posts into the feed's backing queue via db.appendToFeed.
+    // Loading the ref is necessary post-`db.add` because the inline
+    // `savedTarget` from `Ref.make(echoFeed)` is dropped when the ref is
+    // encoded for persistence.
+    const echoFeed = yield* Effect.promise(() => subscriptionFeed.feed!.load());
+    const feedRef = Ref.make(subscriptionFeed);
+    const posts = [
+      Obj.make(Subscription.Post, {
+        source: feedRef,
+        title: 'Distributed systems are hard',
+        description: 'A long-form discussion of consistency, availability, and partition tolerance.',
+        author: 'Test Author',
+        published: '2026-04-01T00:00:00Z',
+        guid: 'post-a',
+        link: 'https://example.com/post-a',
+      }),
+      Obj.make(Subscription.Post, {
+        source: feedRef,
+        title: 'Local-first is the future',
+        description: 'How CRDTs and last-writer-wins reconcile collaborative state across peers.',
+        author: 'Test Author',
+        published: '2026-04-02T00:00:00Z',
+        guid: 'post-b',
+        link: 'https://example.com/post-b',
+      }),
+      Obj.make(Subscription.Post, {
+        source: feedRef,
+        title: 'P2P discovery patterns',
+        description: 'Comparing rendezvous, DHT-based, and broadcast strategies for peer discovery.',
+        author: 'Test Author',
+        published: '2026-04-03T00:00:00Z',
+        guid: 'post-c',
+        link: 'https://example.com/post-c',
+      }),
+    ];
+    yield* Effect.promise(() => space.db.appendToFeed(echoFeed, posts));
+
+    const mag = Magazine.make({
+      name: 'Curate Flow Test',
+      feeds: [Ref.make(subscriptionFeed)],
+    });
+    space.db.add(mag);
+    // Curation resolves the base methodology skill from the registry; register it here since the
+    // automation plugin (which normally syncs SkillDefinition capabilities) isn't in this story.
+    client.graph.registry.add([MagazineSkill.make()]);
+    yield* Effect.promise(() => space.db.flush());
+  });
+
+// TODO(jdw): Re-enable on jdw/identifiers — the seed path now uses
+// `space.db.appendToFeed(echoFeed, posts)` but the storybook story still loses
+// queue contents between the seed promise resolving and `magazine.posts` being
+// read inside the `CurateMagazine` operation. The unit tests drive
+// `curateMagazine` directly against an `EchoTestBuilder` database and pass;
+// the fully-wired plugin container in this story does not. Default story is
+// unaffected (it never touches the feed path).
+export const CurateFlow: Story = {
+  tags: ['!test'],
+  decorators: [
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        ClientPlugin({
+          types: [Feed.Feed, Subscription.Subscription, Subscription.Post, Magazine.Magazine],
+          onClientInitialized: seedSpaceWithQueueItems,
+        }),
+        SpacePlugin({}),
+        StorybookPlugin({}),
+        MagazinePlugin(),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Wait for the magazine to render (initially empty).
+    const empty = await canvas.findByText(/no articles yet/i, {}, { timeout: 10_000 });
+    await expect(empty).toBeVisible();
+
+    // First Curate.
+    const curateButton = await canvas.findByRole('button', { name: /^curate$/i });
+    await userEvent.click(curateButton);
+
+    await waitFor(
+      async () => {
+        const tile = await canvas.findByText('Distributed systems are hard');
+        await expect(tile).toBeVisible();
+      },
+      { timeout: 15_000 },
+    );
+
+    // Second Curate (back-to-back, no Clear). This is the user-reported
+    // failure mode: the second invocation previously tripped ECHO's
+    // `!_objects.has(core.id)` invariant in `addCore`. With the
+    // reuse-or-add fix it must NOT throw — the tiles already on screen
+    // must remain visible (curate is purely additive, dedups by id).
+    const curateAgain = await canvas.findByRole('button', { name: /^curate$/i });
+    await userEvent.click(curateAgain);
+
+    // Give the operation enough time to run.
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    // The previously-shown tiles must still be present; nothing should have crashed the plank.
+    await expect(await canvas.findByText('Distributed systems are hard')).toBeVisible();
+    await expect(await canvas.findByText('Local-first is the future')).toBeVisible();
+    await expect(await canvas.findByText('P2P discovery patterns')).toBeVisible();
+  },
+};