fix BlobRef, add helper to render blob to cdn url, bring in bsky profile to Slices frontend

api/scripts/generate_typescript.ts

···
     isExported: true,
     properties: [
       { name: "$type", type: "string" },
-      { name: "ref", type: "string" },
+      { name: "ref", type: "{ $link: string }" },
       { name: "mimeType", type: "string" },
       { name: "size", type: "number" },
     ],
···
           `return await response.json() as T;`,
         ],
       },
+      {
+        name: "blobToCdnUrl",
+        scope: "public",
+        parameters: [
+          { name: "blobRef", type: "BlobRef" },
+          { name: "did", type: "string" },
+          { name: "preset", type: "'avatar' | 'banner' | 'feed_thumbnail' | 'feed_fullsize'", hasQuestionToken: true },
+          { name: "cdnBaseUrl", type: "string", hasQuestionToken: true },
+        ],
+        returnType: "string",
+        statements: [
+          `// Convert BlobRef to CDN URL with size preset`,
+          `const cdnBase = cdnBaseUrl || 'https://cdn.bsky.app/img';`,
+          `const sizePreset = preset || 'feed_fullsize';`,
+          `const cid = blobRef.ref;`,
+          `return \`\${cdnBase}/\${sizePreset}/plain/\${did}/\${cid}@jpeg\`;`,
+        ],
+      },
     ],
   });
 }
···
 
 const finalCode = await formatCode(unformattedCode);
 
+// Add utility function after the generated client code
+const utilityFunction = `
+
+// Utility function to convert BlobRef to CDN URL using record context
+export function recordBlobToCdnUrl<T>(
+  record: RecordResponse<T>,
+  blobRef: BlobRef,
+  preset?: 'avatar' | 'banner' | 'feed_thumbnail' | 'feed_fullsize',
+  cdnBaseUrl?: string
+): string {
+  const cdnBase = cdnBaseUrl || 'https://cdn.bsky.app/img';
+  const sizePreset = preset || 'feed_fullsize';
+  const cid = blobRef.ref.$link;
+  return \`\${cdnBase}/\${sizePreset}/plain/\${record.did}/\${cid}@jpeg\`;
+}
+`;
+
+const finalCodeWithUtility = finalCode + utilityFunction;
+
 // Output to stdout for the Rust handler to capture
-Deno.stdout.writeSync(new TextEncoder().encode(finalCode));
+Deno.stdout.writeSync(new TextEncoder().encode(finalCodeWithUtility));

frontend/src/client.ts

···
 // Generated TypeScript client for AT Protocol records
-// Generated at: 2025-08-30 17:33:35 UTC
+// Generated at: 2025-08-30 19:20:05 UTC
 // Lexicons: 6
 
 /**
···
  *
  * const client = new AtProtoClient(
  *   'https://slices-api.fly.dev',
- *   'at://did:plc:bcgltzqazw5tb6k2g3ttenbj/social.slices.slice/3lwzmbjpqxk2q'
+ *   'at://did:plc:bcgltzqazw5tb6k2g3ttenbj/social.slices.slice/3lx5zq4t56s2q'
  * );
  *
  * // List records from the app.bsky.actor.profile collection
···
 
 export interface BlobRef {
   $type: string;
-  ref: string;
+  ref: { $link: string };
   mimeType: string;
   size: number;
 }
···
   searchRecords(params: SearchRecordsParams): Promise<ListRecordsResponse<T>>;
 }
 
+export interface AppBskyActorProfile {
+  /** Small image to be displayed next to posts from account. AKA, 'profile picture' */
+  avatar?: BlobRef;
+  /** Larger horizontal image to display behind profile view. */
+  banner?: BlobRef;
+  /** Self-label values, specific to the Bluesky application, on the overall account. */
+  labels?:
+    | ComAtprotoLabelDefs["SelfLabels"]
+    | {
+        $type: string;
+        [key: string]: unknown;
+      };
+  createdAt?: string;
+  pinnedPost?: ComAtprotoRepoStrongRef;
+  /** Free-form profile description text. */
+  description?: string;
+  displayName?: string;
+  joinedViaStarterPack?: ComAtprotoRepoStrongRef;
+}
+
+export type AppBskyActorProfileSortFields =
+  | "createdAt"
+  | "description"
+  | "displayName";
+
+export interface SocialSlicesSlice {
+  /** Name of the slice */
+  name: string;
+  /** Primary domain namespace for this slice (e.g. social.grain) */
+  domain: string;
+  /** When the slice was created */
+  createdAt: string;
+}
+
+export type SocialSlicesSliceSortFields = "name" | "domain" | "createdAt";
+
+export interface SocialSlicesLexicon {
+  /** Namespaced identifier for the lexicon */
+  nsid: string;
+  /** The lexicon schema definitions as JSON */
+  definitions: string;
+  /** When the lexicon was created */
+  createdAt: string;
+  /** When the lexicon was last updated */
+  updatedAt?: string;
+  /** AT-URI reference to the slice this lexicon belongs to */
+  slice: string;
+}
+
+export type SocialSlicesLexiconSortFields =
+  | "nsid"
+  | "definitions"
+  | "createdAt"
+  | "updatedAt"
+  | "slice";
+
+export interface SocialSlicesActorProfile {
+  displayName?: string;
+  /** Free-form profile description text. */
+  description?: string;
+  /** Small image to be displayed next to posts from account. AKA, 'profile picture' */
+  avatar?: BlobRef;
+  createdAt?: string;
+}
+
+export type SocialSlicesActorProfileSortFields =
+  | "displayName"
+  | "description"
+  | "createdAt";
+
 export interface ComAtprotoLabelDefsLabel {
   /** Optionally, CID specifying the specific version of 'uri' resource this label applies to. */
   cid?: string;
···
   ver?: number;
 }
 
+export interface ComAtprotoLabelDefsSelfLabel {
+  /** The short string name of the value or type of this label. */
+  val: string;
+}
+
+export interface ComAtprotoLabelDefsSelfLabels {
+  values: ComAtprotoLabelDefs["SelfLabel"][];
+}
+
 export interface ComAtprotoLabelDefsLabelValueDefinition {
-  /** Does the user need to have adult content enabled in order to configure this label? */
-  adultOnly?: boolean;
   /** What should this label hide in the UI, if applied? 'content' hides all of the target; 'media' hides the images/video/audio; 'none' hides nothing. */
   blurs: string;
-  /** The default setting for this label. */
-  defaultSetting?: string;
-  /** The value of the label being defined. Must only include lowercase ascii and the '-' character ([a-z-]+). */
-  identifier: string;
   locales: ComAtprotoLabelDefs["LabelValueDefinitionStrings"][];
   /** How should a client visually convey this label? 'inform' means neutral and informational; 'alert' means negative and warning; 'none' means show nothing. */
   severity: string;
+  /** Does the user need to have adult content enabled in order to configure this label? */
+  adultOnly?: boolean;
+  /** The value of the label being defined. Must only include lowercase ascii and the '-' character ([a-z-]+). */
+  identifier: string;
+  /** The default setting for this label. */
+  defaultSetting?: string;
 }
 
 export interface ComAtprotoLabelDefsLabelValueDefinitionStrings {
-  /** A longer description of what the label means and why it might be applied. */
-  description: string;
   /** The code of the language these strings are written in. */
   lang: string;
   /** A short human-readable name for the label. */
   name: string;
-}
-
-export interface ComAtprotoLabelDefsSelfLabel {
-  /** The short string name of the value or type of this label. */
-  val: string;
-}
-
-export interface ComAtprotoLabelDefsSelfLabels {
-  values: ComAtprotoLabelDefs["SelfLabel"][];
+  /** A longer description of what the label means and why it might be applied. */
+  description: string;
 }
 
 export interface ComAtprotoRepoStrongRef {
···
   uri: string;
 }
 
-export interface AppBskyActorProfile {
-  /** Small image to be displayed next to posts from account. AKA, 'profile picture' */
-  avatar?: BlobRef;
-  /** Larger horizontal image to display behind profile view. */
-  banner?: BlobRef;
-  createdAt?: string;
-  /** Free-form profile description text. */
-  description?: string;
-  displayName?: string;
-  joinedViaStarterPack?: ComAtprotoRepoStrongRef;
-  /** Self-label values, specific to the Bluesky application, on the overall account. */
-  labels?:
-    | ComAtprotoLabelDefs["SelfLabels"]
-    | {
-        $type: string;
-        [key: string]: unknown;
-      };
-  pinnedPost?: ComAtprotoRepoStrongRef;
-}
-
-export type AppBskyActorProfileSortFields =
-  | "createdAt"
-  | "description"
-  | "displayName";
-
-export interface SocialSlicesActorProfile {
-  /** Small image to be displayed next to posts from account. AKA, 'profile picture' */
-  avatar?: BlobRef;
-  createdAt?: string;
-  /** Free-form profile description text. */
-  description?: string;
-  displayName?: string;
-}
-
-export type SocialSlicesActorProfileSortFields =
-  | "createdAt"
-  | "description"
-  | "displayName";
-
-export interface SocialSlicesLexicon {
-  /** When the lexicon was created */
-  createdAt: string;
-  /** The lexicon schema definitions as JSON */
-  definitions: string;
-  /** Namespaced identifier for the lexicon */
-  nsid: string;
-  /** AT-URI reference to the slice this lexicon belongs to */
-  slice: string;
-  /** When the lexicon was last updated */
-  updatedAt?: string;
-}
-
-export type SocialSlicesLexiconSortFields =
-  | "createdAt"
-  | "definitions"
-  | "nsid"
-  | "slice"
-  | "updatedAt";
-
-export interface SocialSlicesSlice {
-  /** When the slice was created */
-  createdAt: string;
-  /** Name of the slice */
-  name: string;
-}
-
-export type SocialSlicesSliceSortFields = "createdAt" | "name";
-
 export interface ComAtprotoLabelDefs {
   readonly Label: ComAtprotoLabelDefsLabel;
+  readonly SelfLabel: ComAtprotoLabelDefsSelfLabel;
+  readonly SelfLabels: ComAtprotoLabelDefsSelfLabels;
   readonly LabelValueDefinition: ComAtprotoLabelDefsLabelValueDefinition;
   readonly LabelValueDefinitionStrings: ComAtprotoLabelDefsLabelValueDefinitionStrings;
-  readonly SelfLabel: ComAtprotoLabelDefsSelfLabel;
-  readonly SelfLabels: ComAtprotoLabelDefsSelfLabels;
 }
 
 class BaseClient {
···
     }
 
     return (await response.json()) as T;
+  }
+
+  public blobToCdnUrl(
+    blobRef: BlobRef,
+    did: string,
+    preset?: "avatar" | "banner" | "feed_thumbnail" | "feed_fullsize",
+    cdnBaseUrl?: string
+  ): string {
+    // Convert BlobRef to CDN URL with size preset
+    const cdnBase = cdnBaseUrl || "https://cdn.bsky.app/img";
+    const sizePreset = preset || "feed_fullsize";
+    const cid = blobRef.ref;
+    return `${cdnBase}/${sizePreset}/plain/${did}/${cid}@jpeg`;
   }
 }
 
···
   }
 }
 
-class ProfileActorSlicesSocialClient extends BaseClient {
+class SliceSlicesSocialClient extends BaseClient {
   private readonly sliceUri: string;
 
   constructor(baseUrl: string, sliceUri: string, oauthClient?: OAuthClient) {
···
   }
 
   async listRecords(
-    params?: ListRecordsParams<SocialSlicesActorProfileSortFields>
-  ): Promise<ListRecordsResponse<SocialSlicesActorProfile>> {
+    params?: ListRecordsParams<SocialSlicesSliceSortFields>
+  ): Promise<ListRecordsResponse<SocialSlicesSlice>> {
     const requestParams = { ...params, slice: this.sliceUri };
-    return await this.makeRequest<
-      ListRecordsResponse<SocialSlicesActorProfile>
-    >("social.slices.actor.profile.listRecords", "GET", requestParams);
+    return await this.makeRequest<ListRecordsResponse<SocialSlicesSlice>>(
+      "social.slices.slice.listRecords",
+      "GET",
+      requestParams
+    );
   }
 
   async getRecord(
     params: GetRecordParams
-  ): Promise<RecordResponse<SocialSlicesActorProfile>> {
+  ): Promise<RecordResponse<SocialSlicesSlice>> {
     const requestParams = { ...params, slice: this.sliceUri };
-    return await this.makeRequest<RecordResponse<SocialSlicesActorProfile>>(
-      "social.slices.actor.profile.getRecord",
+    return await this.makeRequest<RecordResponse<SocialSlicesSlice>>(
+      "social.slices.slice.getRecord",
       "GET",
       requestParams
     );
   }
 
   async searchRecords(
-    params: SearchRecordsParams<SocialSlicesActorProfileSortFields>
-  ): Promise<ListRecordsResponse<SocialSlicesActorProfile>> {
+    params: SearchRecordsParams<SocialSlicesSliceSortFields>
+  ): Promise<ListRecordsResponse<SocialSlicesSlice>> {
     const requestParams = { ...params, slice: this.sliceUri };
-    return await this.makeRequest<
-      ListRecordsResponse<SocialSlicesActorProfile>
-    >("social.slices.actor.profile.searchRecords", "GET", requestParams);
+    return await this.makeRequest<ListRecordsResponse<SocialSlicesSlice>>(
+      "social.slices.slice.searchRecords",
+      "GET",
+      requestParams
+    );
   }
 
   async createRecord(
-    record: SocialSlicesActorProfile,
+    record: SocialSlicesSlice,
     useSelfRkey?: boolean
   ): Promise<{ uri: string; cid: string }> {
-    const recordValue = { $type: "social.slices.actor.profile", ...record };
+    const recordValue = { $type: "social.slices.slice", ...record };
     const payload = {
       slice: this.sliceUri,
       ...(useSelfRkey ? { rkey: "self" } : {}),
       record: recordValue,
     };
     return await this.makeRequest<{ uri: string; cid: string }>(
-      "social.slices.actor.profile.createRecord",
+      "social.slices.slice.createRecord",
       "POST",
       payload
     );
···
 
   async updateRecord(
     rkey: string,
-    record: SocialSlicesActorProfile
+    record: SocialSlicesSlice
   ): Promise<{ uri: string; cid: string }> {
-    const recordValue = { $type: "social.slices.actor.profile", ...record };
+    const recordValue = { $type: "social.slices.slice", ...record };
     const payload = {
       slice: this.sliceUri,
       rkey,
       record: recordValue,
     };
     return await this.makeRequest<{ uri: string; cid: string }>(
-      "social.slices.actor.profile.updateRecord",
+      "social.slices.slice.updateRecord",
       "POST",
       payload
     );
···
 
   async deleteRecord(rkey: string): Promise<void> {
     return await this.makeRequest<void>(
-      "social.slices.actor.profile.deleteRecord",
+      "social.slices.slice.deleteRecord",
       "POST",
       { rkey }
     );
   }
-}
 
-class ActorSlicesSocialClient extends BaseClient {
-  readonly profile: ProfileActorSlicesSocialClient;
-  private readonly sliceUri: string;
+  async codegen(request: CodegenXrpcRequest): Promise<CodegenXrpcResponse> {
+    return await this.makeRequest<CodegenXrpcResponse>(
+      "social.slices.slice.codegen",
+      "POST",
+      request
+    );
+  }
 
-  constructor(baseUrl: string, sliceUri: string, oauthClient?: OAuthClient) {
-    super(baseUrl, oauthClient);
-    this.sliceUri = sliceUri;
-    this.profile = new ProfileActorSlicesSocialClient(
-      baseUrl,
-      sliceUri,
-      oauthClient
+  async stats(params: SliceStatsParams): Promise<SliceStatsOutput> {
+    return await this.makeRequest<SliceStatsOutput>(
+      "social.slices.slice.stats",
+      "POST",
+      params
+    );
+  }
+
+  async records(params: SliceRecordsParams): Promise<SliceRecordsOutput> {
+    return await this.makeRequest<SliceRecordsOutput>(
+      "social.slices.slice.records",
+      "POST",
+      params
+    );
+  }
+
+  async getActors(params?: GetActorsParams): Promise<GetActorsResponse> {
+    const requestParams = { ...params, slice: this.sliceUri };
+    return await this.makeRequest<GetActorsResponse>(
+      "social.slices.slice.getActors",
+      "GET",
+      requestParams
+    );
+  }
+
+  async startSync(params: BulkSyncParams): Promise<SyncJobResponse> {
+    const requestParams = { ...params, slice: this.sliceUri };
+    return await this.makeRequest<SyncJobResponse>(
+      "social.slices.slice.startSync",
+      "POST",
+      requestParams
+    );
+  }
+
+  async getJobStatus(params: GetJobStatusParams): Promise<JobStatus> {
+    return await this.makeRequest<JobStatus>(
+      "social.slices.slice.getJobStatus",
+      "GET",
+      params
+    );
+  }
+
+  async getJobHistory(
+    params: GetJobHistoryParams
+  ): Promise<GetJobHistoryResponse> {
+    return await this.makeRequest<GetJobHistoryResponse>(
+      "social.slices.slice.getJobHistory",
+      "GET",
+      params
+    );
+  }
+
+  async getJetstreamStatus(): Promise<JetstreamStatusResponse> {
+    return await this.makeRequest<JetstreamStatusResponse>(
+      "social.slices.slice.getJetstreamStatus",
+      "GET"
+    );
+  }
+
+  async syncUserCollections(
+    params?: SyncUserCollectionsRequest
+  ): Promise<SyncUserCollectionsResult> {
+    const requestParams = { slice: this.sliceUri, ...params };
+    return await this.makeRequest<SyncUserCollectionsResult>(
+      "social.slices.slice.syncUserCollections",
+      "POST",
+      requestParams
     );
   }
 }
···
   }
 }
 
-class SliceSlicesSocialClient extends BaseClient {
+class ProfileActorSlicesSocialClient extends BaseClient {
   private readonly sliceUri: string;
 
   constructor(baseUrl: string, sliceUri: string, oauthClient?: OAuthClient) {
···
   }
 
   async listRecords(
-    params?: ListRecordsParams<SocialSlicesSliceSortFields>
-  ): Promise<ListRecordsResponse<SocialSlicesSlice>> {
+    params?: ListRecordsParams<SocialSlicesActorProfileSortFields>
+  ): Promise<ListRecordsResponse<SocialSlicesActorProfile>> {
     const requestParams = { ...params, slice: this.sliceUri };
-    return await this.makeRequest<ListRecordsResponse<SocialSlicesSlice>>(
-      "social.slices.slice.listRecords",
-      "GET",
-      requestParams
-    );
+    return await this.makeRequest<
+      ListRecordsResponse<SocialSlicesActorProfile>
+    >("social.slices.actor.profile.listRecords", "GET", requestParams);
   }
 
   async getRecord(
     params: GetRecordParams
-  ): Promise<RecordResponse<SocialSlicesSlice>> {
+  ): Promise<RecordResponse<SocialSlicesActorProfile>> {
     const requestParams = { ...params, slice: this.sliceUri };
-    return await this.makeRequest<RecordResponse<SocialSlicesSlice>>(
-      "social.slices.slice.getRecord",
+    return await this.makeRequest<RecordResponse<SocialSlicesActorProfile>>(
+      "social.slices.actor.profile.getRecord",
       "GET",
       requestParams
     );
   }
 
   async searchRecords(
-    params: SearchRecordsParams<SocialSlicesSliceSortFields>
-  ): Promise<ListRecordsResponse<SocialSlicesSlice>> {
+    params: SearchRecordsParams<SocialSlicesActorProfileSortFields>
+  ): Promise<ListRecordsResponse<SocialSlicesActorProfile>> {
     const requestParams = { ...params, slice: this.sliceUri };
-    return await this.makeRequest<ListRecordsResponse<SocialSlicesSlice>>(
-      "social.slices.slice.searchRecords",
-      "GET",
-      requestParams
-    );
+    return await this.makeRequest<
+      ListRecordsResponse<SocialSlicesActorProfile>
+    >("social.slices.actor.profile.searchRecords", "GET", requestParams);
   }
 
   async createRecord(
-    record: SocialSlicesSlice,
+    record: SocialSlicesActorProfile,
     useSelfRkey?: boolean
   ): Promise<{ uri: string; cid: string }> {
-    const recordValue = { $type: "social.slices.slice", ...record };
+    const recordValue = { $type: "social.slices.actor.profile", ...record };
     const payload = {
       slice: this.sliceUri,
       ...(useSelfRkey ? { rkey: "self" } : {}),
       record: recordValue,
     };
     return await this.makeRequest<{ uri: string; cid: string }>(
-      "social.slices.slice.createRecord",
+      "social.slices.actor.profile.createRecord",
       "POST",
       payload
     );
···
 
   async updateRecord(
     rkey: string,
-    record: SocialSlicesSlice
+    record: SocialSlicesActorProfile
   ): Promise<{ uri: string; cid: string }> {
-    const recordValue = { $type: "social.slices.slice", ...record };
+    const recordValue = { $type: "social.slices.actor.profile", ...record };
     const payload = {
       slice: this.sliceUri,
       rkey,
       record: recordValue,
     };
     return await this.makeRequest<{ uri: string; cid: string }>(
-      "social.slices.slice.updateRecord",
+      "social.slices.actor.profile.updateRecord",
       "POST",
       payload
     );
···
 
   async deleteRecord(rkey: string): Promise<void> {
     return await this.makeRequest<void>(
-      "social.slices.slice.deleteRecord",
+      "social.slices.actor.profile.deleteRecord",
       "POST",
       { rkey }
     );
   }
-
-  async codegen(request: CodegenXrpcRequest): Promise<CodegenXrpcResponse> {
-    return await this.makeRequest<CodegenXrpcResponse>(
-      "social.slices.slice.codegen",
-      "POST",
-      request
-    );
-  }
-
-  async stats(params: SliceStatsParams): Promise<SliceStatsOutput> {
-    return await this.makeRequest<SliceStatsOutput>(
-      "social.slices.slice.stats",
-      "POST",
-      params
-    );
-  }
+}
 
-  async records(params: SliceRecordsParams): Promise<SliceRecordsOutput> {
-    return await this.makeRequest<SliceRecordsOutput>(
-      "social.slices.slice.records",
-      "POST",
-      params
-    );
-  }
+class ActorSlicesSocialClient extends BaseClient {
+  readonly profile: ProfileActorSlicesSocialClient;
+  private readonly sliceUri: string;
 
-  async getActors(params?: GetActorsParams): Promise<GetActorsResponse> {
-    const requestParams = { ...params, slice: this.sliceUri };
-    return await this.makeRequest<GetActorsResponse>(
-      "social.slices.slice.getActors",
-      "GET",
-      requestParams
-    );
-  }
-
-  async startSync(params: BulkSyncParams): Promise<SyncJobResponse> {
-    const requestParams = { ...params, slice: this.sliceUri };
-    return await this.makeRequest<SyncJobResponse>(
-      "social.slices.slice.startSync",
-      "POST",
-      requestParams
-    );
-  }
-
-  async getJobStatus(params: GetJobStatusParams): Promise<JobStatus> {
-    return await this.makeRequest<JobStatus>(
-      "social.slices.slice.getJobStatus",
-      "GET",
-      params
-    );
-  }
-
-  async getJobHistory(
-    params: GetJobHistoryParams
-  ): Promise<GetJobHistoryResponse> {
-    return await this.makeRequest<GetJobHistoryResponse>(
-      "social.slices.slice.getJobHistory",
-      "GET",
-      params
-    );
-  }
-
-  async getJetstreamStatus(): Promise<JetstreamStatusResponse> {
-    return await this.makeRequest<JetstreamStatusResponse>(
-      "social.slices.slice.getJetstreamStatus",
-      "GET"
-    );
-  }
-
-  async syncUserCollections(
-    params?: SyncUserCollectionsRequest
-  ): Promise<SyncUserCollectionsResult> {
-    const requestParams = { slice: this.sliceUri, ...params };
-    return await this.makeRequest<SyncUserCollectionsResult>(
-      "social.slices.slice.syncUserCollections",
-      "POST",
-      requestParams
+  constructor(baseUrl: string, sliceUri: string, oauthClient?: OAuthClient) {
+    super(baseUrl, oauthClient);
+    this.sliceUri = sliceUri;
+    this.profile = new ProfileActorSlicesSocialClient(
+      baseUrl,
+      sliceUri,
+      oauthClient
     );
   }
 }
 
 class SlicesSocialClient extends BaseClient {
+  readonly slice: SliceSlicesSocialClient;
+  readonly lexicon: LexiconSlicesSocialClient;
   readonly actor: ActorSlicesSocialClient;
-  readonly lexicon: LexiconSlicesSocialClient;
-  readonly slice: SliceSlicesSocialClient;
   private readonly sliceUri: string;
 
   constructor(baseUrl: string, sliceUri: string, oauthClient?: OAuthClient) {
     super(baseUrl, oauthClient);
     this.sliceUri = sliceUri;
-    this.actor = new ActorSlicesSocialClient(baseUrl, sliceUri, oauthClient);
+    this.slice = new SliceSlicesSocialClient(baseUrl, sliceUri, oauthClient);
     this.lexicon = new LexiconSlicesSocialClient(
       baseUrl,
       sliceUri,
       oauthClient
     );
-    this.slice = new SliceSlicesSocialClient(baseUrl, sliceUri, oauthClient);
+    this.actor = new ActorSlicesSocialClient(baseUrl, sliceUri, oauthClient);
   }
 }
 
···
     return await response.json();
   }
 }
+
+// Utility function to convert BlobRef to CDN URL using record context
+export function recordBlobToCdnUrl<T>(
+  record: RecordResponse<T>,
+  blobRef: BlobRef,
+  preset?: "avatar" | "banner" | "feed_thumbnail" | "feed_fullsize",
+  cdnBaseUrl?: string
+): string {
+  const cdnBase = cdnBaseUrl || "https://cdn.bsky.app/img";
+  const sizePreset = preset || "feed_fullsize";
+  const cid = blobRef.ref.$link;
+  return `${cdnBase}/${sizePreset}/plain/${record.did}/${cid}@jpeg`;
+}

frontend/src/components/Layout.tsx

···
 interface LayoutProps {
   title?: string;
   children: JSX.Element | JSX.Element[];
-  currentUser?: { handle?: string; isAuthenticated: boolean };
+  currentUser?: { handle?: string; isAuthenticated: boolean; avatar?: string };
 }
 
 export function Layout({
···
             <div className="flex items-center space-x-4">
               {currentUser?.isAuthenticated ? (
                 <div className="flex items-center space-x-3">
+                  {currentUser.avatar && (
+                    <img
+                      src={currentUser.avatar}
+                      alt="Profile avatar"
+                      className="w-6 h-6 rounded-full"
+                    />
+                  )}
                   <span className="text-sm text-gray-600">
-                    {currentUser.handle ? `@${currentUser.handle}` : "Authenticated User"}
+                    {currentUser.handle
+                      ? `@${currentUser.handle}`
+                      : "Authenticated User"}
                   </span>
                   <a
                     href="/settings"
···
             </div>
           </div>
         </nav>
-        <main className="max-w-5xl mx-auto mt-8 px-4 pb-16 min-h-[calc(100vh-200px)]">{children}</main>
+        <main className="max-w-5xl mx-auto mt-8 px-4 pb-16 min-h-[calc(100vh-200px)]">
+          {children}
+        </main>
       </body>
     </html>
   );

frontend/src/pages/IndexPage.tsx

···
               data.
             </p>
             <button
+              type="button"
               className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded"
               hx-get="/dialogs/create-slice"
               hx-target="body"

frontend/src/routes/middleware.ts

···
-import { sessionStore } from "../config.ts";
+import { sessionStore, atprotoClient } from "../config.ts";
+import { recordBlobToCdnUrl } from "../client.ts";
 
 export interface AuthenticatedUser {
   handle?: string;
   sub?: string;
   isAuthenticated: boolean;
+  avatar?: string;
 }
 
 export interface RouteContext {
···
 export async function withAuth(req: Request): Promise<RouteContext> {
   // Get current user info from session store
   const currentUser = await sessionStore.getCurrentUser(req);
+
+  // If user is authenticated, try to fetch their Bluesky profile avatar
+  if (currentUser.isAuthenticated && currentUser.sub) {
+    try {
+      // Try to get the user's Bluesky profile from external collections
+      const profileRecords =
+        await atprotoClient.app.bsky.actor.profile.listRecords({
+          authors: [currentUser.sub],
+          limit: 1,
+        });
+
+      if (profileRecords.records && profileRecords.records.length > 0) {
+        const profileRecord = profileRecords.records[0];
+        if (profileRecord.value.avatar) {
+          // Convert BlobRef to CDN URL for avatar
+          currentUser.avatar = recordBlobToCdnUrl(
+            profileRecord,
+            profileRecord.value.avatar,
+            "avatar"
+          );
+        }
+      }
+    } catch (error) {
+      console.log("Could not fetch user avatar:", error);
+      // Continue without avatar - this is non-critical
+    }
+  }
+
   return {
     currentUser,
   };
···
   if (!context.currentUser.isAuthenticated) {
     return new Response("", {
       status: 401,
-      headers: { 
+      headers: {
         "HX-Redirect": "/login",
-        "Location": "/login"
+        Location: "/login",
       },
     });
   }

lexicons/app/bsky/actor/profile.json

···
+{
+  "lexicon": 1,
+  "id": "app.bsky.actor.profile",
+  "defs": {
+    "main": {
+      "key": "literal:self",
+      "type": "record",
+      "record": {
+        "type": "object",
+        "properties": {
+          "avatar": {
+            "type": "blob",
+            "accept": [
+              "image/png",
+              "image/jpeg"
+            ],
+            "maxSize": 1000000,
+            "description": "Small image to be displayed next to posts from account. AKA, 'profile picture'"
+          },
+          "banner": {
+            "type": "blob",
+            "accept": [
+              "image/png",
+              "image/jpeg"
+            ],
+            "maxSize": 1000000,
+            "description": "Larger horizontal image to display behind profile view."
+          },
+          "labels": {
+            "refs": [
+              "com.atproto.label.defs#selfLabels"
+            ],
+            "type": "union",
+            "description": "Self-label values, specific to the Bluesky application, on the overall account."
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "datetime"
+          },
+          "pinnedPost": {
+            "ref": "com.atproto.repo.strongRef",
+            "type": "ref"
+          },
+          "description": {
+            "type": "string",
+            "maxLength": 2560,
+            "description": "Free-form profile description text.",
+            "maxGraphemes": 256
+          },
+          "displayName": {
+            "type": "string",
+            "maxLength": 640,
+            "maxGraphemes": 64
+          },
+          "joinedViaStarterPack": {
+            "ref": "com.atproto.repo.strongRef",
+            "type": "ref"
+          }
+        }
+      },
+      "description": "A declaration of a Bluesky account profile."
+    }
+  }
+}

lexicons/com/atproto/label/defs.json

···
+{
+  "lexicon": 1,
+  "id": "com.atproto.label.defs",
+  "defs": {
+    "label": {
+      "type": "object",
+      "required": [
+        "src",
+        "uri",
+        "val",
+        "cts"
+      ],
+      "properties": {
+        "cid": {
+          "type": "string",
+          "format": "cid",
+          "description": "Optionally, CID specifying the specific version of 'uri' resource this label applies to."
+        },
+        "cts": {
+          "type": "string",
+          "format": "datetime",
+          "description": "Timestamp when this label was created."
+        },
+        "exp": {
+          "type": "string",
+          "format": "datetime",
+          "description": "Timestamp at which this label expires (no longer applies)."
+        },
+        "neg": {
+          "type": "boolean",
+          "description": "If true, this is a negation label, overwriting a previous label."
+        },
+        "sig": {
+          "type": "bytes",
+          "description": "Signature of dag-cbor encoded label."
+        },
+        "src": {
+          "type": "string",
+          "format": "did",
+          "description": "DID of the actor who created this label."
+        },
+        "uri": {
+          "type": "string",
+          "format": "uri",
+          "description": "AT URI of the record, repository (account), or other resource that this label applies to."
+        },
+        "val": {
+          "type": "string",
+          "maxLength": 128,
+          "description": "The short string name of the value or type of this label."
+        },
+        "ver": {
+          "type": "integer",
+          "description": "The AT Protocol version of the label object."
+        }
+      },
+      "description": "Metadata tag on an atproto resource (eg, repo or record)."
+    },
+    "selfLabel": {
+      "type": "object",
+      "required": [
+        "val"
+      ],
+      "properties": {
+        "val": {
+          "type": "string",
+          "maxLength": 128,
+          "description": "The short string name of the value or type of this label."
+        }
+      },
+      "description": "Metadata tag on an atproto record, published by the author within the record. Note that schemas should use #selfLabels, not #selfLabel."
+    },
+    "labelValue": {
+      "type": "string",
+      "knownValues": [
+        "!hide",
+        "!no-promote",
+        "!warn",
+        "!no-unauthenticated",
+        "dmca-violation",
+        "doxxing",
+        "porn",
+        "sexual",
+        "nudity",
+        "nsfl",
+        "gore"
+      ]
+    },
+    "selfLabels": {
+      "type": "object",
+      "required": [
+        "values"
+      ],
+      "properties": {
+        "values": {
+          "type": "array",
+          "items": {
+            "ref": "#selfLabel",
+            "type": "ref"
+          },
+          "maxLength": 10
+        }
+      },
+      "description": "Metadata tags on an atproto record, published by the author within the record."
+    },
+    "labelValueDefinition": {
+      "type": "object",
+      "required": [
+        "identifier",
+        "severity",
+        "blurs",
+        "locales"
+      ],
+      "properties": {
+        "blurs": {
+          "type": "string",
+          "description": "What should this label hide in the UI, if applied? 'content' hides all of the target; 'media' hides the images/video/audio; 'none' hides nothing.",
+          "knownValues": [
+            "content",
+            "media",
+            "none"
+          ]
+        },
+        "locales": {
+          "type": "array",
+          "items": {
+            "ref": "#labelValueDefinitionStrings",
+            "type": "ref"
+          }
+        },
+        "severity": {
+          "type": "string",
+          "description": "How should a client visually convey this label? 'inform' means neutral and informational; 'alert' means negative and warning; 'none' means show nothing.",
+          "knownValues": [
+            "inform",
+            "alert",
+            "none"
+          ]
+        },
+        "adultOnly": {
+          "type": "boolean",
+          "description": "Does the user need to have adult content enabled in order to configure this label?"
+        },
+        "identifier": {
+          "type": "string",
+          "maxLength": 100,
+          "description": "The value of the label being defined. Must only include lowercase ascii and the '-' character ([a-z-]+).",
+          "maxGraphemes": 100
+        },
+        "defaultSetting": {
+          "type": "string",
+          "default": "warn",
+          "description": "The default setting for this label.",
+          "knownValues": [
+            "ignore",
+            "warn",
+            "hide"
+          ]
+        }
+      },
+      "description": "Declares a label value and its expected interpretations and behaviors."
+    },
+    "labelValueDefinitionStrings": {
+      "type": "object",
+      "required": [
+        "lang",
+        "name",
+        "description"
+      ],
+      "properties": {
+        "lang": {
+          "type": "string",
+          "format": "language",
+          "description": "The code of the language these strings are written in."
+        },
+        "name": {
+          "type": "string",
+          "maxLength": 640,
+          "description": "A short human-readable name for the label.",
+          "maxGraphemes": 64
+        },
+        "description": {
+          "type": "string",
+          "maxLength": 100000,
+          "description": "A longer description of what the label means and why it might be applied.",
+          "maxGraphemes": 10000
+        }
+      },
+      "description": "Strings which describe the label in the UI, localized into a specific language."
+    }
+  }
+}

lexicons/com/atproto/repo/strongRef.json

···
+{
+  "lexicon": 1,
+  "id": "com.atproto.repo.strongRef",
+  "description": "A URI with a content-hash fingerprint.",
+  "defs": {
+    "main": {
+      "type": "object",
+      "required": [
+        "uri",
+        "cid"
+      ],
+      "properties": {
+        "cid": {
+          "type": "string",
+          "format": "cid"
+        },
+        "uri": {
+          "type": "string",
+          "format": "at-uri"
+        }
+      }
+    }
+  }
+}