@dxos/plugin-youtube 0.8.3

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "@dxos/plugin-youtube",
+  "version": "0.8.3",
+  "description": "DXOS YouTube feed plugin",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
+  "license": "MIT",
+  "author": "DXOS.org",
+  "sideEffects": true,
+  "type": "module",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": "./dist/lib/node-esm/index.mjs"
+    },
+    "./blueprints": {
+      "source": "./src/blueprints/index.ts",
+      "types": "./dist/types/src/blueprints/index.d.ts",
+      "browser": "./dist/lib/browser/blueprints/index.mjs",
+      "node": "./dist/lib/node-esm/blueprints/index.mjs"
+    },
+    "./types": {
+      "source": "./src/types/index.ts",
+      "types": "./dist/types/src/types/index.d.ts",
+      "browser": "./dist/lib/browser/types/index.mjs",
+      "node": "./dist/lib/node-esm/types/index.mjs"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "blueprints": [
+        "dist/types/src/blueprints/index.d.ts"
+      ],
+      "types": [
+        "dist/types/src/types/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
+    "@radix-ui/react-context": "1.1.1",
+    "effect": "3.20.0",
+    "youtube-caption-extractor": "^1.9.1",
+    "@dxos/blueprints": "0.8.3",
+    "@dxos/app-framework": "0.8.3",
+    "@dxos/app-toolkit": "0.8.3",
+    "@dxos/async": "0.8.3",
+    "@dxos/client": "0.8.3",
+    "@dxos/debug": "0.8.3",
+    "@dxos/echo-atom": "0.8.3",
+    "@dxos/echo": "0.8.3",
+    "@dxos/effect": "0.8.3",
+    "@dxos/echo-db": "0.8.3",
+    "@dxos/invariant": "0.8.3",
+    "@dxos/errors": "0.8.3",
+    "@dxos/plugin-attention": "0.8.3",
+    "@dxos/log": "0.8.3",
+    "@dxos/operation": "0.8.3",
+    "@dxos/plugin-automation": "0.8.3",
+    "@dxos/plugin-client": "0.8.3",
+    "@dxos/functions": "0.8.3",
+    "@dxos/plugin-graph": "0.8.3",
+    "@dxos/plugin-space": "0.8.3",
+    "@dxos/react-ui-attention": "0.8.3",
+    "@dxos/schema": "0.8.3",
+    "@dxos/react-ui": "0.8.3",
+    "@dxos/types": "0.8.3",
+    "@dxos/react-client": "0.8.3",
+    "@dxos/keys": "0.8.3",
+    "@dxos/plugin-deck": "0.8.3",
+    "@dxos/util": "0.8.3",
+    "@dxos/react-ui-stack": "0.8.3"
+  },
+  "devDependencies": {
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^7.1.11",
+    "@dxos/plugin-testing": "0.8.3",
+    "@dxos/plugin-theme": "0.8.3",
+    "@dxos/protocols": "0.8.3",
+    "@dxos/config": "0.8.3",
+    "@dxos/react-ui": "0.8.3",
+    "@dxos/random": "0.8.3",
+    "@dxos/storybook-utils": "0.8.3",
+    "@dxos/ui-theme": "0.8.3"
+  },
+  "peerDependencies": {
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
+    "effect": "3.20.0",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.3",
+    "@dxos/ui-theme": "0.8.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/YouTubePlugin.tsx

@@ -0,0 +1,66 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
+
+import { ActivationEvent, Plugin } from '@dxos/app-framework';
+import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
+import { Annotation } from '@dxos/echo';
+import { Operation } from '@dxos/operation';
+import { AttentionEvents } from '@dxos/plugin-attention';
+import { type CreateObject } from '@dxos/plugin-space/types';
+import { SpaceOperation } from '@dxos/plugin-space/operations';
+
+import { YouTubeBlueprint } from './blueprints';
+import { AppGraphBuilder, BlueprintDefinition, ReactSurface } from './capabilities';
+import { meta } from './meta';
+import { translations } from './translations';
+import { Channel, Video } from './types';
+
+export const YouTubePlugin = Plugin.define(meta).pipe(
+  AppPlugin.addAppGraphModule({
+    activatesOn: ActivationEvent.allOf(AppActivationEvents.SetupAppGraph, AttentionEvents.AttentionReady),
+    activate: AppGraphBuilder,
+  }),
+  AppPlugin.addBlueprintDefinitionModule({ activate: BlueprintDefinition }),
+  AppPlugin.addMetadataModule({
+    metadata: [
+      {
+        id: Channel.YouTubeChannel.typename,
+        metadata: {
+          label: (object: Channel.YouTubeChannel) => object.name ?? object.channelUrl ?? object.channelId ?? 'YouTube',
+          icon: Annotation.IconAnnotation.get(Channel.YouTubeChannel).pipe(Option.getOrThrow).icon,
+          iconHue: Annotation.IconAnnotation.get(Channel.YouTubeChannel).pipe(Option.getOrThrow).hue ?? 'white',
+          blueprints: [YouTubeBlueprint.key],
+          inputSchema: Channel.CreateYouTubeChannelSchema,
+          createObject: ((props, options) =>
+            Effect.gen(function* () {
+              const object = Channel.make(props);
+              return yield* Operation.invoke(SpaceOperation.AddObject, {
+                object,
+                target: options.target,
+                hidden: true,
+                targetNodeId: options.targetNodeId,
+              });
+            })) satisfies CreateObject,
+        },
+      },
+      {
+        id: Video.YouTubeVideo.typename,
+        metadata: {
+          label: (object: Video.YouTubeVideo) => object.title,
+          icon: Annotation.IconAnnotation.get(Video.YouTubeVideo).pipe(Option.getOrThrow).icon,
+          iconHue: Annotation.IconAnnotation.get(Video.YouTubeVideo).pipe(Option.getOrThrow).hue ?? 'white',
+        },
+      },
+    ],
+  }),
+  AppPlugin.addSchemaModule({
+    schema: [Channel.YouTubeChannel, Video.YouTubeVideo],
+  }),
+  AppPlugin.addSurfaceModule({ activate: ReactSurface }),
+  AppPlugin.addTranslationsModule({ translations }),
+  Plugin.make,
+);

package/src/blueprints/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import YouTubeBlueprint from './youtube';
+
+export { YouTubeBlueprint };

package/src/blueprints/youtube.ts

@@ -0,0 +1,52 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type AppCapabilities } from '@dxos/app-toolkit';
+import { Blueprint, Template } from '@dxos/blueprints';
+import { trim } from '@dxos/util';
+
+import { ClearSyncedVideos, Sync } from '../operations';
+
+const BLUEPRINT_KEY = 'dxos.org/blueprint/youtube';
+
+const make = () =>
+  Blueprint.make({
+    key: BLUEPRINT_KEY,
+    name: 'YouTube',
+    tools: Blueprint.toolDefinitions({ operations: [Sync, ClearSyncedVideos], tools: [] }),
+    instructions: Template.make({
+      source: trim`
+        You manage YouTube channel subscriptions and video content.
+
+        # Summary formatting:
+        - Format summaries as markdown documents without extra comments.
+        - Use markdown formatting for headings and bullet points.
+        - Format video summaries as lists with key points.
+
+        # References
+        - Use references to objects in the form of:
+        @dxn:queue:data:B6INSIBY3CBEF4M5VZRYBCMAHQMPYK5AJ:01K24XMVHSZHS97SG1VTVQDM5Z:01K24XPK464FSCKVQJAB2H662M
+        - References are rendered as rich content in the response to the user.
+
+        # Video Analysis
+        When analyzing videos:
+        - Summarize the key topics and themes.
+        - Extract important quotes or statements.
+        - Identify action items or recommendations.
+        - Note any timestamps for important sections.
+
+        # Transcript Usage
+        - Videos may include transcripts that can be used for deeper analysis.
+        - When summarizing content, reference the transcript for accuracy.
+        - Transcripts include timestamps that can help locate specific content.
+      `,
+    }),
+  });
+
+const blueprint: AppCapabilities.BlueprintDefinition = {
+  key: BLUEPRINT_KEY,
+  make,
+};
+
+export default blueprint;

package/src/capabilities/app-graph-builder/app-graph-builder.ts

@@ -0,0 +1,148 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
+
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities, companionSegment, LayoutOperation } from '@dxos/app-toolkit';
+import { type Feed, Filter, Obj, Query, Ref } from '@dxos/echo';
+import { AtomQuery, AtomRef } from '@dxos/echo-atom';
+import { invariant } from '@dxos/invariant';
+import { log } from '@dxos/log';
+import { Operation } from '@dxos/operation';
+import { AttentionCapabilities } from '@dxos/plugin-attention';
+import { AutomationCapabilities, invokeFunctionWithTracing } from '@dxos/plugin-automation';
+import { PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
+import { GraphBuilder, NodeMatcher } from '@dxos/plugin-graph';
+
+import { ClearSyncedVideos, Sync } from '../../operations';
+import { meta } from '../../meta';
+import { Channel, Video } from '../../types';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const selectionManager = yield* Capability.get(AttentionCapabilities.Selection);
+    const selectedId = Atom.family((nodeId: string) =>
+      Atom.make((get) => {
+        const state = get(selectionManager.state);
+        const selection = state.selections[nodeId];
+        return selection?.mode === 'single' ? selection.id : undefined;
+      }),
+    );
+
+    const whenYouTubeChannel = NodeMatcher.whenEchoType(Channel.YouTubeChannel);
+
+    const extensions = yield* Effect.all([
+      GraphBuilder.createExtension({
+        id: `${meta.id}.channel-video`,
+        match: (node) =>
+          Channel.instanceOf(node.data) ? Option.some({ channel: node.data, nodeId: node.id }) : Option.none(),
+        connector: (matched, get) => {
+          const channel = matched.channel;
+          const db = Obj.getDatabase(channel);
+          const feed = channel.feed ? (get(AtomRef.make(channel.feed)) as Feed.Feed | undefined) : undefined;
+          if (!db || !feed) {
+            return Effect.succeed([]);
+          }
+
+          const videoId = get(selectedId(matched.nodeId));
+          const video = get(
+            AtomQuery.make<Video.YouTubeVideo>(
+              db,
+              Query.select(videoId ? Filter.id(videoId) : Filter.nothing()).from(feed),
+            ),
+          )[0];
+          return Effect.succeed([
+            {
+              id: companionSegment('video'),
+              type: PLANK_COMPANION_TYPE,
+              data: video ?? 'video',
+              properties: {
+                label: ['video label', { ns: meta.id }],
+                icon: 'ph--play--regular',
+                disposition: 'hidden',
+              },
+            },
+          ]);
+        },
+      }),
+
+      GraphBuilder.createExtension({
+        id: `${meta.id}.sync-channel`,
+        match: whenYouTubeChannel,
+        actions: (channel) =>
+          Effect.succeed([
+            {
+              id: 'sync',
+              data: Effect.fnUntraced(function* () {
+                const computeRuntime = yield* Capability.get(AutomationCapabilities.ComputeRuntime);
+                const db = Obj.getDatabase(channel);
+                invariant(db);
+                const runtime = computeRuntime.getRuntime(db.spaceId);
+                yield* Effect.tryPromise(() =>
+                  runtime.runPromise(
+                    invokeFunctionWithTracing(Sync, {
+                      channel: Ref.make(channel),
+                    }),
+                  ),
+                ).pipe(
+                  Effect.catchAll((error) => {
+                    log.catch(error);
+                    return Operation.invoke(LayoutOperation.AddToast, {
+                      id: `${meta.id}.sync-channel-error`,
+                      icon: 'ph--warning--regular',
+                      duration: 5_000,
+                      title: ['sync channel error title', { ns: meta.id }],
+                      closeLabel: ['close label', { ns: meta.id }],
+                    });
+                  }),
+                );
+              }),
+              properties: {
+                label: ['sync channel label', { ns: meta.id }],
+                icon: 'ph--arrows-clockwise--regular',
+                disposition: 'list-item',
+              },
+            },
+            {
+              id: 'clear-synced-videos',
+              data: Effect.fnUntraced(function* () {
+                const computeRuntime = yield* Capability.get(AutomationCapabilities.ComputeRuntime);
+                const db = Obj.getDatabase(channel);
+                invariant(db);
+                const runtime = computeRuntime.getRuntime(db.spaceId);
+                yield* Effect.tryPromise(() =>
+                  runtime.runPromise(
+                    invokeFunctionWithTracing(ClearSyncedVideos, {
+                      channel: Ref.make(channel),
+                    }),
+                  ),
+                ).pipe(
+                  Effect.catchAll((error) => {
+                    log.catch(error);
+                    return Operation.invoke(LayoutOperation.AddToast, {
+                      id: `${meta.id}.clear-synced-videos-error`,
+                      icon: 'ph--warning--regular',
+                      duration: 5_000,
+                      title: ['clear synced videos error title', { ns: meta.id }],
+                      closeLabel: ['close label', { ns: meta.id }],
+                    });
+                  }),
+                );
+              }),
+              properties: {
+                label: ['clear synced videos label', { ns: meta.id }],
+                icon: 'ph--trash--regular',
+                disposition: 'list-item',
+              },
+            },
+          ]),
+      }),
+    ]);
+
+    return Capability.contributes(AppCapabilities.AppGraphBuilder, extensions);
+  }),
+);

package/src/capabilities/app-graph-builder/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));

package/src/capabilities/blueprint-definition/blueprint-definition.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+
+import { YouTubeBlueprint } from '../../blueprints';
+
+const blueprintDefinition = Capability.makeModule<
+  [],
+  Capability.Capability<typeof AppCapabilities.BlueprintDefinition>[]
+>(() => Effect.succeed([Capability.contributes(AppCapabilities.BlueprintDefinition, YouTubeBlueprint)]));
+
+export default blueprintDefinition;

package/src/capabilities/blueprint-definition/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const BlueprintDefinition = Capability.lazy('BlueprintDefinition', () => import('./blueprint-definition'));

package/src/capabilities/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './app-graph-builder';
+export * from './blueprint-definition';
+export * from './react-surface';

package/src/capabilities/react-surface/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));

package/src/capabilities/react-surface/react-surface.tsx

@@ -0,0 +1,54 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
+
+import { ChannelArticle, ChannelSettings, VideoArticle, VideoCard } from '../../containers';
+import { meta } from '../../meta';
+import { Channel, Video } from '../../types';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: `${meta.id}.channel`,
+        role: ['article'],
+        filter: (data): data is { attendableId?: string; subject: Channel.YouTubeChannel } =>
+          Channel.instanceOf(data.subject),
+        component: ({ data }) => {
+          return <ChannelArticle subject={data.subject} attendableId={data.attendableId} />;
+        },
+      }),
+      Surface.create({
+        id: `${meta.id}.video`,
+        role: ['article', 'section'],
+        filter: (
+          data,
+        ): data is { attendableId: string; subject: Video.YouTubeVideo; companionTo: Channel.YouTubeChannel } =>
+          typeof data.attendableId === 'string' &&
+          Video.instanceOf(data.subject) &&
+          Channel.instanceOf(data.companionTo),
+        component: ({ data: { attendableId, companionTo, subject }, role }) => {
+          return <VideoArticle role={role} subject={subject} channel={companionTo} attendableId={attendableId} />;
+        },
+      }),
+      Surface.create({
+        id: `${meta.id}.video-card`,
+        role: 'card--content',
+        filter: (data): data is { subject: Video.YouTubeVideo } => Video.instanceOf(data?.subject),
+        component: ({ data: { subject }, role }) => <VideoCard subject={subject} role={role} />,
+      }),
+      Surface.create({
+        id: `${meta.id}.channel.companion.settings`,
+        role: 'object-settings',
+        filter: (data): data is { subject: Channel.YouTubeChannel } => Channel.instanceOf(data.subject),
+        component: ({ data }) => <ChannelSettings subject={data.subject} />,
+      }),
+    ]),
+  ),
+);

package/src/containers/ChannelArticle/ChannelArticle.tsx

@@ -0,0 +1,115 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { type Feed, Obj, Query } from '@dxos/echo';
+import { Filter, useObject, useQuery } from '@dxos/react-client/echo';
+import { Icon, Panel } from '@dxos/react-ui';
+
+import * as Channel from '../../types/Channel';
+import * as Video from '../../types/Video';
+
+export type ChannelArticleProps = {
+  subject: Channel.YouTubeChannel;
+  attendableId?: string;
+};
+
+export const ChannelArticle = ({ subject: channel }: ChannelArticleProps) => {
+  useObject(channel);
+  const feed = channel.feed?.target as Feed.Feed | undefined;
+  const db = Obj.getDatabase(channel);
+  const videos = useQuery(
+    db,
+    feed ? Query.select(Filter.type(Video.YouTubeVideo)).from(feed) : Query.select(Filter.nothing()),
+  ) as Video.YouTubeVideo[];
+
+  const sortedVideos = useMemo(
+    () =>
+      [...videos].sort(
+        (videoA, videoB) => new Date(videoB.publishedAt).getTime() - new Date(videoA.publishedAt).getTime(),
+      ),
+    [videos],
+  );
+
+  return (
+    <Panel.Root>
+      <Panel.Content className='overflow-auto'>
+        <div className='flex flex-col gap-4 p-4'>
+          <div className='flex items-center justify-between'>
+            <div className='flex items-center gap-2'>
+              <Icon icon='ph--youtube-logo--regular' size={6} />
+              <h2 className='text-lg font-semibold'>{channel.name ?? 'YouTube Channel'}</h2>
+            </div>
+            {channel.lastSyncedAt && (
+              <span className='text-xs text-description'>
+                Last synced: {new Date(channel.lastSyncedAt).toLocaleString()}
+              </span>
+            )}
+          </div>
+
+          {channel.channelUrl && (
+            <div className='text-sm text-description'>
+              <a
+                href={
+                  channel.channelUrl.startsWith('http')
+                    ? channel.channelUrl
+                    : `https://www.youtube.com/@${channel.channelUrl}`
+                }
+                target='_blank'
+                rel='noopener noreferrer'
+                className='hover:underline'
+              >
+                {channel.channelUrl}
+              </a>
+            </div>
+          )}
+
+          <div className='flex flex-col gap-2'>
+            <h3 className='text-md font-medium'>Videos ({sortedVideos.length})</h3>
+            <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
+              {sortedVideos.map((video) => (
+                <div key={video.videoId} className='flex flex-col gap-2 p-2 rounded hover:bg-surface-hover'>
+                  {video.thumbnailUrl ? (
+                    <a
+                      href={video.url}
+                      target='_blank'
+                      rel='noopener noreferrer'
+                      className='relative aspect-video group'
+                    >
+                      <img src={video.thumbnailUrl} alt={video.title} className='h-full w-full object-cover rounded' />
+                      <div className='absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/30 rounded transition-colors'>
+                        <div className='opacity-0 group-hover:opacity-100 bg-red-600 text-white rounded-full p-2 transition-opacity'>
+                          <Icon icon='ph--play--fill' size={4} />
+                        </div>
+                      </div>
+                    </a>
+                  ) : (
+                    <div className='aspect-video bg-surface-hover rounded flex items-center justify-center'>
+                      <Icon icon='ph--video--regular' size={8} />
+                    </div>
+                  )}
+                  <div className='flex flex-col gap-1'>
+                    <span className='font-medium line-clamp-2' title={video.title}>
+                      {video.title}
+                    </span>
+                    <span className='text-xs text-description'>
+                      {new Date(video.publishedAt).toLocaleDateString()}
+                      {video.transcript && ' • Transcript available'}
+                    </span>
+                  </div>
+                </div>
+              ))}
+              {sortedVideos.length === 0 && (
+                <div className='col-span-full text-sm text-description p-4 text-center'>
+                  No videos synced yet. Sync the channel to fetch videos.
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </Panel.Content>
+    </Panel.Root>
+  );
+};

package/src/containers/ChannelArticle/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { ChannelArticle } from './ChannelArticle';
+
+export default ChannelArticle;

package/src/containers/ChannelSettings/ChannelSettings.tsx

@@ -0,0 +1,34 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import * as Channel from '../../types/Channel';
+
+export type ChannelSettingsProps = {
+  subject: Channel.YouTubeChannel;
+};
+
+export const ChannelSettings = ({ subject: channel }: ChannelSettingsProps) => {
+  return (
+    <div className='flex flex-col gap-4 p-4'>
+      <h3 className='text-md font-medium'>Channel Settings</h3>
+      <div className='flex flex-col gap-2 text-sm'>
+        <div>
+          <span className='text-description'>Name:</span> <span>{channel.name ?? 'Not set'}</span>
+        </div>
+        <div>
+          <span className='text-description'>Channel URL:</span> <span>{channel.channelUrl ?? 'Not set'}</span>
+        </div>
+        <div>
+          <span className='text-description'>Channel ID:</span> <span>{channel.channelId ?? 'Not set'}</span>
+        </div>
+        <div>
+          <span className='text-description'>Last Synced:</span>{' '}
+          <span>{channel.lastSyncedAt ? new Date(channel.lastSyncedAt).toLocaleString() : 'Never'}</span>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/containers/ChannelSettings/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { ChannelSettings } from './ChannelSettings';
+
+export default ChannelSettings;