@agent-native/core 0.154.5 → 0.157.0

package/corpus/templates/calendar/shared/availability-schedule.ts

@@ -0,0 +1,64 @@
+import type { TimeSlot } from "./api.js";
+
+function timeToMinutes(value: string): number | null {
+  const match = /^(\d{1,2}):(\d{2})$/.exec(value);
+  if (!match) return null;
+  const hours = Number(match[1]);
+  const minutes = Number(match[2]);
+  if (hours > 23 || minutes > 59) return null;
+  return hours * 60 + minutes;
+}
+
+/** Returns the saved windows in chronological order with adjacent overlaps merged. */
+export function normalizeAvailabilitySlots(slots: TimeSlot[]): TimeSlot[] {
+  const valid = slots
+    .map((slot) => ({
+      slot,
+      start: timeToMinutes(slot.start),
+      end: timeToMinutes(slot.end),
+    }))
+    .filter(
+      (entry): entry is typeof entry & { start: number; end: number } =>
+        entry.start !== null && entry.end !== null && entry.start < entry.end,
+    )
+    .sort((a, b) => a.start - b.start || a.end - b.end);
+
+  const normalized: Array<{
+    slot: TimeSlot;
+    start: number;
+    end: number;
+  }> = [];
+  for (const entry of valid) {
+    const previous = normalized[normalized.length - 1];
+    if (previous && entry.start <= previous.end) {
+      const mergedEnd = Math.max(previous.end, entry.end);
+      previous.slot = {
+        ...previous.slot,
+        end: entry.end > previous.end ? entry.slot.end : previous.slot.end,
+      };
+      previous.end = mergedEnd;
+      continue;
+    }
+    normalized.push({ ...entry, slot: { ...entry.slot } });
+  }
+
+  return normalized.map(({ slot }) => slot);
+}
+
+export function availabilitySlotsOverlap(slots: TimeSlot[]): boolean {
+  const valid = slots
+    .map((slot) => ({
+      start: timeToMinutes(slot.start),
+      end: timeToMinutes(slot.end),
+    }))
+    .filter(
+      (entry): entry is { start: number; end: number } =>
+        entry.start !== null && entry.end !== null && entry.start < entry.end,
+    )
+    .sort((a, b) => a.start - b.start || a.end - b.end);
+
+  return valid.some((slot, index) => {
+    const previous = valid[index - 1];
+    return previous !== undefined && slot.start < previous.end;
+  });
+}

package/corpus/templates/calendar/shared/calendar-week.ts

@@ -0,0 +1,21 @@
+export type CalendarWeekStart = "sunday" | "monday";
+
+export type Weekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+export const DEFAULT_CALENDAR_WEEK_START: CalendarWeekStart = "sunday";
+
+export function isCalendarWeekStart(
+  value: unknown,
+): value is CalendarWeekStart {
+  return value === "sunday" || value === "monday";
+}
+
+export function getWeekStartsOn(
+  weekStart: CalendarWeekStart | null | undefined,
+): 0 | 1 {
+  return weekStart === "monday" ? 1 : 0;
+}
+
+export function getWeekdayOrder(weekStartsOn: 0 | 1): Weekday[] {
+  return weekStartsOn === 1 ? [1, 2, 3, 4, 5, 6, 0] : [0, 1, 2, 3, 4, 5, 6];
+}

package/corpus/templates/calendar/shared/settings.ts

@@ -0,0 +1,44 @@
+import type { Settings } from "./api.js";
+import {
+  DEFAULT_CALENDAR_WEEK_START,
+  isCalendarWeekStart,
+} from "./calendar-week.js";
+
+export const DEFAULT_SETTINGS: Settings = {
+  timezone: "America/New_York",
+  bookingPageTitle: "Book a Meeting",
+  bookingPageDescription: "Select a time that works for you.",
+  defaultEventDuration: 30,
+  weekStart: DEFAULT_CALENDAR_WEEK_START,
+};
+
+export function normalizeCalendarSettings(input: unknown): Settings {
+  const raw =
+    input && typeof input === "object"
+      ? (input as Partial<Settings>)
+      : ({} as Partial<Settings>);
+
+  return {
+    timezone:
+      typeof raw.timezone === "string"
+        ? raw.timezone
+        : DEFAULT_SETTINGS.timezone,
+    bookingPageTitle:
+      typeof raw.bookingPageTitle === "string"
+        ? raw.bookingPageTitle
+        : DEFAULT_SETTINGS.bookingPageTitle,
+    bookingPageDescription:
+      typeof raw.bookingPageDescription === "string"
+        ? raw.bookingPageDescription
+        : DEFAULT_SETTINGS.bookingPageDescription,
+    defaultEventDuration:
+      typeof raw.defaultEventDuration === "number" &&
+      Number.isFinite(raw.defaultEventDuration) &&
+      raw.defaultEventDuration > 0
+        ? raw.defaultEventDuration
+        : DEFAULT_SETTINGS.defaultEventDuration,
+    weekStart: isCalendarWeekStart(raw.weekStart)
+      ? raw.weekStart
+      : DEFAULT_SETTINGS.weekStart,
+  };
+}

package/corpus/templates/clips/AGENTS.md

@@ -31,6 +31,8 @@ video sharing app. The agent and the UI share the same SQL data and actions.
   secrets/OAuth/runtime config and obvious placeholders.
 - Use actions for recording metadata, transcripts, cleanup, summaries, chapters,
   comments, spaces/folders, meetings, and sharing. Never bypass access helpers.
+- Comment text accepts inline Markdown for emphasis, inline code, links, and
+  line breaks; headings and other block structures stay flattened in comments.
 - Recording start/stop/pause are UI gestures — browser capture needs user
   activation; navigate to the recording view instead of a server action.
 - Native transcript first; cloud transcription is fallback-only. Never hide a

package/corpus/templates/clips/actions/add-comment.ts

@@ -20,10 +20,13 @@ import { nanoid } from "../server/lib/recordings.js";
 
 export default defineAction({
   description:
-    "Add a comment to a recording at a specific video timestamp. For new threads, omit threadId/parentId. For replies, pass both.",
+    "Add a comment to a recording at a specific video timestamp. Comment text supports inline Markdown such as bold, italic, inline code, and links; headings are flattened in comment surfaces. For new threads, omit threadId/parentId. For replies, pass both.",
   schema: z.object({
     recordingId: z.string().describe("Recording ID"),
-    content: z.string().min(1).describe("Comment text"),
+    content: z
+      .string()
+      .min(1)
+      .describe("Comment text; inline Markdown is supported, without headings"),
     videoTimestampMs: z
       .number()
       .int()

package/corpus/templates/clips/actions/finalize-recording.ts

@@ -50,6 +50,10 @@ import {
 } from "../server/lib/resumable-session.js";
 import { resolveResumableUploadProvider } from "../server/lib/resumable-upload-provider.js";
 import { fetchS3ObjectByUrl } from "../server/lib/s3-upload-provider.js";
+import {
+  clearSeekableRepairPending,
+  markSeekableRepairPending,
+} from "../server/lib/seekable-media-state.js";
 import { isStreamingUploadDisabled } from "../server/lib/streaming-upload-mode.js";
 import {
   probeHasAudioStream,
@@ -59,7 +63,10 @@ import {
   requiresConfiguredVideoStorage,
   STORAGE_SETUP_REQUIRED_REASON,
 } from "../server/lib/video-storage.js";
-import { markRecordingSeekable } from "./lib/ensure-seekable-video.js";
+import {
+  isRemoteProviderUrl,
+  markRecordingSeekable,
+} from "./lib/ensure-seekable-video.js";
 
 // Recordings up to this size get their seekable rewrite applied inline during
 // finalize (we already hold the assembled bytes). Larger recordings are handed
@@ -398,6 +405,7 @@ async function persistPendingMediaVerification(params: {
       videoUrl: media.videoUrl,
       videoFormat: media.videoFormat,
       videoSizeBytes: media.videoSizeBytes,
+      mediaUpdatedAt: now,
       durationMs: media.finalDurationMs,
       width: media.finalWidth,
       height: media.finalHeight,
@@ -576,6 +584,7 @@ async function markRecordingReady(params: {
       videoUrl,
       videoFormat,
       videoSizeBytes,
+      mediaUpdatedAt: now,
       durationMs: finalDurationMs,
       width: finalWidth,
       height: finalHeight,
@@ -667,6 +676,12 @@ async function markRecordingReady(params: {
   if (seekableApplied) {
     // Uploaded bytes are already start-playable and seekable — remember it so
     // later reprocess sweeps skip this clip.
+    await clearSeekableRepairPending(id).catch((err) => {
+      console.warn("[finalize] failed to clear seekable repair marker", {
+        id,
+        error: err instanceof Error ? err.message : String(err),
+      });
+    });
     await markRecordingSeekable(id, videoUrl).catch((err) => {
       console.warn("[finalize] failed to write seekable marker", {
         id,
@@ -679,6 +694,17 @@ async function markRecordingReady(params: {
     // without a Cues index buffers on load and re-buffers on every seek. A
     // fresh self-dispatched request owns the repair so serverless runtimes do
     // not freeze it when this finalize request returns.
+    if (isRemoteProviderUrl(videoUrl)) {
+      await markSeekableRepairPending({
+        recordingId: id,
+        videoUrl,
+      }).catch((err) => {
+        console.warn("[finalize] failed to mark seekable repair pending", {
+          id,
+          error: err instanceof Error ? err.message : String(err),
+        });
+      });
+    }
     await dispatchPostFinalizeJob({
       recordingId: id,
       kind: "seekable",
@@ -1283,6 +1309,7 @@ export default defineAction({
         .set({
           status: "processing",
           uploadProgress: 100,
+          mediaUpdatedAt: new Date().toISOString(),
           updatedAt: new Date().toISOString(),
         })
         .where(eq(schema.recordings.id, id));
@@ -1303,6 +1330,7 @@ export default defineAction({
           .set({
             status: "failed",
             failureReason,
+            mediaUpdatedAt: now,
             updatedAt: now,
           })
           .where(eq(schema.recordings.id, id));
@@ -1623,6 +1651,7 @@ export default defineAction({
               hasAudio: finalHasAudio,
               hasCamera: finalHasCamera,
               uploadProgress: 0,
+              mediaUpdatedAt: now,
               updatedAt: now,
             })
             .where(eq(schema.recordings.id, id));
@@ -1657,6 +1686,7 @@ export default defineAction({
             hasAudio: finalHasAudio,
             hasCamera: finalHasCamera,
             uploadProgress: 100,
+            mediaUpdatedAt: now,
             updatedAt: now,
           })
           .where(eq(schema.recordings.id, id));

package/corpus/templates/clips/actions/get-recording-player-data.ts

@@ -40,6 +40,7 @@ import {
   countRecordingViews,
   parseSpaceIds,
 } from "../server/lib/recordings.js";
+import { isSeekableRepairPending } from "../server/lib/seekable-media-state.js";
 import { parseBrowserDiagnosticsRow } from "../shared/browser-diagnostics.js";
 import {
   CLIPS_BUILDER_CREDITS_STATE_KEY,
@@ -161,6 +162,7 @@ export default defineAction({
       cleanupStateRaw,
       builderCreditsRaw,
       verificationPending,
+      seekableRepairPending,
       viewCount,
       agentViewCount,
     ] = await Promise.all([
@@ -173,6 +175,12 @@ export default defineAction({
         recordingId: args.recordingId,
         recordingStatus: rec.status,
       }),
+      isSeekableRepairPending({
+        ownerEmail: rec.ownerEmail,
+        recordingId: args.recordingId,
+        recordingStatus: rec.status,
+        videoUrl: rec.videoUrl,
+      }),
       countRecordingViews(args.recordingId).catch(() => 0),
       countRecordingAgentViews(args.recordingId).catch(() => 0),
     ]);
@@ -336,6 +344,7 @@ export default defineAction({
         hasCamera: Boolean(rec.hasCamera),
         status: rec.status,
         verificationPending,
+        seekableRepairPending,
         uploadProgress: rec.uploadProgress,
         failureReason: rec.failureReason,
         // Don't leak the password to clients (especially to MCP hosts that

package/corpus/templates/clips/actions/lib/ensure-seekable-video.ts

@@ -31,6 +31,7 @@ import { getDb, schema } from "../../server/db/index.js";
 import { queueBuilderMediaCompression } from "../../server/lib/builder-media-compression.js";
 import { deleteRecordingMediaObjects } from "../../server/lib/recording-media-cleanup.js";
 import { ownerEmailMatches } from "../../server/lib/recordings.js";
+import { clearSeekableRepairPending } from "../../server/lib/seekable-media-state.js";
 import {
   makeSeekable,
   normalizeTimelineToMp4,
@@ -144,7 +145,7 @@ export async function fetchProviderBytes(
  * Ensure a single recording's stored media is seekable. Owner-scoped: pass the
  * resolved owner email so the DB lookup can only touch that owner's rows.
  */
-export async function ensureRecordingSeekable(params: {
+async function ensureRecordingSeekableInternal(params: {
   recordingId: string;
   ownerEmail: string;
   force?: boolean;
@@ -281,6 +282,7 @@ export async function ensureRecordingSeekable(params: {
       videoUrl: upload.url,
       videoFormat: outputFormat,
       videoSizeBytes: seekable.bytes.byteLength,
+      mediaUpdatedAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
     })
     .where(
@@ -340,3 +342,21 @@ export async function ensureRecordingSeekable(params: {
     videoUrl: upload.url,
   };
 }
+
+export async function ensureRecordingSeekable(params: {
+  recordingId: string;
+  ownerEmail: string;
+  force?: boolean;
+  normalizeTimeline?: boolean;
+}): Promise<EnsureSeekableResult> {
+  const result = await ensureRecordingSeekableInternal(params);
+  if (result.changed || result.status === "already-optimized") {
+    await clearSeekableRepairPending(params.recordingId).catch((err) => {
+      console.warn("[ensure-seekable-video] failed to clear pending marker", {
+        recordingId: params.recordingId,
+        error: err instanceof Error ? err.message : String(err),
+      });
+    });
+  }
+  return result;
+}

package/corpus/templates/clips/actions/reply-to-comment.ts

@@ -20,10 +20,13 @@ import { nanoid } from "../server/lib/recordings.js";
 
 export default defineAction({
   description:
-    "Reply to an existing comment. Looks up the thread and parent and delegates to add-comment.",
+    "Reply to an existing comment with inline Markdown text (without headings). Looks up the thread and parent and delegates to add-comment.",
   schema: z.object({
     commentId: z.string().describe("Comment ID to reply to"),
-    content: z.string().min(1).describe("Reply text"),
+    content: z
+      .string()
+      .min(1)
+      .describe("Reply text; inline Markdown is supported, without headings"),
     authorName: z.string().optional(),
   }),
   run: async (args) => {

package/corpus/templates/clips/actions/update-comment.ts

@@ -16,10 +16,17 @@ import { getDb, schema } from "../server/db/index.js";
 import { sameOwnerEmail } from "../server/lib/recordings.js";
 
 export default defineAction({
-  description: "Update a comment's text. Only the comment author can edit it.",
+  description:
+    "Update a comment's text. Inline Markdown is supported without headings. Only the comment author can edit it.",
   schema: z.object({
     id: z.string().describe("Comment ID"),
-    content: z.string().trim().min(1).describe("Updated comment text"),
+    content: z
+      .string()
+      .trim()
+      .min(1)
+      .describe(
+        "Updated comment text; inline Markdown is supported, without headings",
+      ),
   }),
   run: async (args) => {
     const userEmail = getRequestUserEmail();

package/corpus/templates/clips/app/components/library/search-bar.tsx

@@ -1,7 +1,7 @@
 import { useT } from "@agent-native/core/client/i18n";
 import { IconClock, IconSearch, IconX } from "@tabler/icons-react";
-import React, { useEffect, useRef, useState } from "react";
-import { useNavigate } from "react-router";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router";
 
 import { msToClock } from "@/components/player/scrubber";
 import {
@@ -10,6 +10,10 @@ import {
   PopoverContent,
 } from "@/components/ui/popover";
 import { useRecordingSearch, type SearchHit } from "@/hooks/use-library";
+import {
+  clearSearchFocusRequest,
+  hasSearchFocusRequest,
+} from "@/lib/search-focus";
 import { cn, shortcutLabel } from "@/lib/utils";
 
 function highlight(
@@ -64,22 +68,33 @@ function matchLabel(hit: SearchHit, t: ReturnType<typeof useT>): string {
 export function SearchBar({ className, side = "right" }: SearchBarProps) {
   const t = useT();
   const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
   const [query, setQuery] = useState("");
   const [open, setOpen] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
+  const routeRequestsFocus = hasSearchFocusRequest(searchParams);
 
   const { data, isFetching } = useRecordingSearch(query);
   const results: SearchHit[] = data?.results ?? [];
 
-  // Cmd+K / Ctrl+K and "/" global shortcuts to focus search
+  const focusSearchInput = useCallback(() => {
+    inputRef.current?.focus();
+    inputRef.current?.select();
+    setOpen(true);
+  }, []);
+
+  useEffect(() => {
+    if (!routeRequestsFocus) return;
+    const frame = requestAnimationFrame(() => {
+      focusSearchInput();
+      setSearchParams(clearSearchFocusRequest, { replace: true });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [focusSearchInput, routeRequestsFocus, setSearchParams]);
+
+  // "/" is the inline search shortcut. Cmd+K belongs to the app command menu.
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
-        e.preventDefault();
-        inputRef.current?.focus();
-        inputRef.current?.select();
-        setOpen(true);
-      }
       if (
         e.key === "/" &&
         !e.metaKey &&
@@ -90,9 +105,7 @@ export function SearchBar({ className, side = "right" }: SearchBarProps) {
         !(e.target as HTMLElement)?.isContentEditable
       ) {
         e.preventDefault();
-        inputRef.current?.focus();
-        inputRef.current?.select();
-        setOpen(true);
+        focusSearchInput();
       }
       if (e.key === "Escape") {
         setOpen(false);
@@ -101,7 +114,7 @@ export function SearchBar({ className, side = "right" }: SearchBarProps) {
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
-  }, []);
+  }, [focusSearchInput]);
 
   function pickResult(hit: SearchHit) {
     setOpen(false);

package/corpus/templates/clips/app/components/meetings/share-meeting-dialog.tsx

@@ -4,8 +4,15 @@ import {
   useActionQuery,
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
-import { IconLink, IconMail } from "@tabler/icons-react";
-import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { IconChevronDown, IconLink, IconMail } from "@tabler/icons-react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import { toast } from "sonner";
 
 import {
@@ -19,6 +26,12 @@ import {
   type SharesResponse,
   type Visibility,
 } from "@/components/sharing/share-ui";
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
 import {
   Popover,
   PopoverContent,
@@ -157,6 +170,56 @@ function LinkTab({
   const visibility: Visibility =
     (data?.visibility as Visibility | null) ?? "private";
   const isPublic = visibility === "public";
+  const sharesLoaded = data?.visibility != null;
+  const createAgentLink = useActionMutation("create-agent-resource-link");
+  const createAgentLinkAsyncRef = useRef(createAgentLink.mutateAsync);
+  const agentLinkRequestIdRef = useRef(0);
+  const [agentLink, setAgentLink] = useState("");
+  const [agentLinkError, setAgentLinkError] = useState(false);
+  const [agentDetailsOpen, setAgentDetailsOpen] = useState(false);
+
+  useEffect(() => {
+    createAgentLinkAsyncRef.current = createAgentLink.mutateAsync;
+  });
+
+  const loadAgentLink = useCallback(async () => {
+    const requestId = agentLinkRequestIdRef.current + 1;
+    agentLinkRequestIdRef.current = requestId;
+    setAgentLink("");
+    setAgentLinkError(false);
+
+    try {
+      const result = (await createAgentLinkAsyncRef.current({
+        resourceType: "meeting",
+        resourceId: meetingId,
+      })) as { contextUrl?: string };
+      if (agentLinkRequestIdRef.current !== requestId) return;
+      if (result?.contextUrl) setAgentLink(result.contextUrl);
+      else setAgentLinkError(true);
+    } catch {
+      if (agentLinkRequestIdRef.current === requestId) setAgentLinkError(true);
+    }
+  }, [meetingId]);
+
+  useEffect(() => {
+    setAgentLink("");
+    setAgentLinkError(false);
+    if (!sharesLoaded || isPublic) return;
+    void loadAgentLink();
+
+    return () => {
+      agentLinkRequestIdRef.current += 1;
+    };
+  }, [isPublic, loadAgentLink, meetingId, sharesLoaded, visibility]);
+
+  useEffect(() => {
+    if (isPublic) setAgentDetailsOpen(false);
+  }, [isPublic]);
+
+  const agentShareDisabled =
+    sharesQuery.isLoading ||
+    !sharesLoaded ||
+    (!isPublic && (createAgentLink.isPending || !agentLink));
 
   useEffect(() => {
     setIncludeTranscript(shareTranscript);
@@ -217,7 +280,15 @@ function LinkTab({
         />
       </div>
 
-      <CopyField label={t("clipsFinalRaw.shareLink")} value={shareUrl} />
+      <CopyField
+        label={
+          isPublic
+            ? t("clipsFinalRaw.shareLink")
+            : t("shareDialog.shareWithHumans")
+        }
+        value={shareUrl}
+        disabled={!sharesLoaded}
+      />
 
       {!isPublic && canManage ? (
         <MakePublicCard
@@ -229,6 +300,67 @@ function LinkTab({
           }
         />
       ) : null}
+
+      {!isPublic ? (
+        <Collapsible
+          open={agentDetailsOpen}
+          onOpenChange={setAgentDetailsOpen}
+          className="overflow-hidden rounded-md border border-border"
+        >
+          <CollapsibleTrigger asChild>
+            <button
+              type="button"
+              className="flex min-h-10 w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm font-medium transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+            >
+              <span className="flex min-w-0 items-center gap-2 truncate">
+                <IconLink
+                  aria-hidden="true"
+                  className="size-3.5 shrink-0 text-muted-foreground"
+                  strokeWidth={1.8}
+                />
+                {t("shareDialog.shareWithAgents")}
+              </span>
+              <IconChevronDown
+                aria-hidden="true"
+                className={`size-4 shrink-0 text-muted-foreground transition-transform ${agentDetailsOpen ? "rotate-180" : ""}`}
+              />
+            </button>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="clips-collapsible-content border-t border-border px-3 py-3">
+            <div className="space-y-2">
+              <CopyField
+                label={t("shareDialog.shareWithAgents")}
+                value={agentLink}
+                disabled={agentShareDisabled}
+              />
+              {sharesLoaded ? (
+                <>
+                  <p className="text-xs text-muted-foreground">
+                    {t("shareMeeting.agentLinkDescription")}
+                  </p>
+                  {agentLinkError ? (
+                    <div className="flex items-center justify-between gap-2 rounded-md border border-border bg-muted/30 px-3 py-2">
+                      <p className="text-xs text-muted-foreground">
+                        {t("shareDialog.agentLinkUnavailable")}
+                      </p>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-7"
+                        onClick={() => void loadAgentLink()}
+                        disabled={createAgentLink.isPending}
+                      >
+                        {t("shareDialog.retryAgentLink")}
+                      </Button>
+                    </div>
+                  ) : null}
+                </>
+              ) : null}
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      ) : null}
     </div>
   );
 }