@opengeni/react 0.46.1 → 0.52.1

package/src/components/chat-composer.tsx

@@ -29,16 +29,23 @@ import {
   useChatComposerController,
   type ChatComposerMessages,
   type ComposerControlLinks,
+  type ResponsiveBasis,
 } from "./composer";
 import {
   ComposerTranscriptionControl,
   type ComposerTranscriptionControlProps,
 } from "./composer-transcription-control";
+import { TimelineAnnotationsChip } from "./timeline-annotations";
 
 export { OPEN_WORKSTREAM_CONTROL_EVENT };
 
 export type ChatComposerProps = {
   composer: ComposerState;
+  /**
+   * Measurement surface for responsive chrome. Defaults to the historical
+   * viewport breakpoints; opt into `container` for narrow embedded panels.
+   */
+  responsiveBasis?: ResponsiveBasis | undefined;
   /** Canonical workstream control, separate from lifecycle status. */
   effectiveControl?: EffectiveSessionControl | null | undefined;
   /** Waiting prompts already ahead of a normal Send. */
@@ -91,6 +98,7 @@ export type ChatComposerProps = {
  */
 export function ChatComposer({
   composer,
+  responsiveBasis,
   effectiveControl,
   queuedAheadCount,
   canControlWorkspace,
@@ -140,7 +148,7 @@ export function ChatComposer({
   const stackActions = hasControls && Boolean(actionsStart);
 
   return (
-    <Root controller={controller} className={className}>
+    <Root controller={controller} responsiveBasis={responsiveBasis} className={className}>
       <Frame>
         <CommandPalette />
         <Surface>
@@ -148,11 +156,26 @@ export function ChatComposer({
           <RestoredResources />
           <Attachments />
           {header}
+          {composer.annotations && composer.annotations.length > 0 ? (
+            <div className="px-3 pt-2 sm:px-4">
+              <TimelineAnnotationsChip
+                annotations={composer.annotations}
+                editable
+                focusAnnotationId={composer.annotationReviewTargetId}
+                onFocusConsumed={composer.clearAnnotationReviewTarget}
+                onUpdate={composer.updateAnnotation}
+                onRemove={composer.removeAnnotation}
+              />
+            </div>
+          ) : null}
           <Input placeholder={placeholder} autoFocus={autoFocus} />
           {controller.confirmState ? (
             <Confirmation />
           ) : (
-            <Footer className={stackActions ? "max-sm:flex-nowrap sm:flex-wrap" : undefined}>
+            <Footer
+              data-og-stack-actions={stackActions ? "" : undefined}
+              className={stackActions ? "max-sm:flex-nowrap sm:flex-wrap" : undefined}
+            >
               <LayoutGroup id="og-composer-footer">
                 {hasControls ? (
                   <Controls

package/src/components/code-editor.tsx

@@ -95,8 +95,13 @@ export type CodeEditorProps = {
   path: string;
   /** The decoded text contents to seed the editor with. */
   initialContents: string;
-  /** Persist the current buffer. Resolves when the write lands; rejects to surface an error. */
-  onSave: (contents: string) => Promise<unknown>;
+  /**
+   * Persist the current buffer against the exact contents it was edited from.
+   * The second argument is the immutable compare-and-swap baseline; hosts must
+   * not replace it with a newer remote snapshot or concurrent writes can be
+   * silently overwritten.
+   */
+  onSave: (contents: string, expectedContents: string) => Promise<unknown>;
   /** Explicitly overwrite after a visible expected-content conflict. */
   onOverwrite?: ((contents: string) => Promise<unknown>) | undefined;
   /** Re-read the selected file after a visible save conflict. */
@@ -115,6 +120,41 @@ export type CodeEditorProps = {
   className?: string | undefined;
 };
 
+export type EditorBufferState = {
+  path: string;
+  value: string;
+  baseline: string;
+};
+
+/**
+ * Reconcile a remote file snapshot without destroying unsaved local work.
+ *
+ * A different path is a new document and always resets. For the same path, a
+ * clean editor follows the remote snapshot while a dirty editor retains both
+ * its local value and the original CAS baseline. The eventual save will then
+ * either succeed against that baseline or surface a typed conflict.
+ */
+export function reconcileEditorBuffer(
+  current: EditorBufferState,
+  incoming: { path: string; contents: string },
+): EditorBufferState {
+  if (current.path === incoming.path && current.value !== current.baseline) {
+    return current;
+  }
+  if (
+    current.path === incoming.path &&
+    current.value === incoming.contents &&
+    current.baseline === incoming.contents
+  ) {
+    return current;
+  }
+  return {
+    path: incoming.path,
+    value: incoming.contents,
+    baseline: incoming.contents,
+  };
+}
+
 /**
  * The EDITABLE single-file pane: CodeMirror 6 with a per-language grammar chosen
  * from the filename, og-* themed, with dirty tracking and a save path wired to
@@ -143,42 +183,45 @@ export function CodeEditor({
   const [failed, setFailed] = useState(false);
   const [bundle, setBundle] = useState<EditorBundle | null>(null);
 
-  // The live buffer + the baseline it's compared against for dirtiness. The
-  // baseline resets whenever a *new* file is loaded (path/initialContents change)
-  // or after a successful save.
-  const [value, setValue] = useState(initialContents);
-  const [baseline, setBaseline] = useState(initialContents);
+  // The live buffer and its compare-and-swap baseline are one state value so a
+  // remote refresh cannot update one without the other.
+  const [buffer, setBuffer] = useState<EditorBufferState>(() => ({
+    path,
+    value: initialContents,
+    baseline: initialContents,
+  }));
+  const { value, baseline } = buffer;
   const [saving, setSaving] = useState(false);
   const [saveError, setSaveError] = useState<Error | null>(null);
   const [savedTick, setSavedTick] = useState(false);
+  const saveInFlightRef = useRef(false);
 
   const dirty = value !== baseline;
   const saveConflict =
     saveError !== null && (saveError as Error & { code?: unknown }).code === "file_write_conflict";
 
-  // Reload the buffer when the file identity changes. Guard on initialContents
-  // too so an external refresh of the SAME path (e.g. fs.changed re-read) reseeds
-  // a clean buffer — but only when the user hasn't got unsaved edits in flight.
-  // Fire the wake-on-edit intent at most once per opened file — reset on re-seed.
+  // Follow path changes and clean same-file refreshes. Dirty same-file buffers
+  // intentionally ignore remote snapshots: the original baseline must survive
+  // until guarded save, explicit reload, or navigation.
   const editIntentFiredRef = useRef(false);
-  const lastSeed = useRef<{ path: string; contents: string }>({ path, contents: initialContents });
   useEffect(() => {
-    const seedChanged =
-      lastSeed.current.path !== path || lastSeed.current.contents !== initialContents;
-    if (!seedChanged) return;
-    lastSeed.current = { path, contents: initialContents };
+    setBuffer((current) => reconcileEditorBuffer(current, { path, contents: initialContents }));
+  }, [path, initialContents]);
+
+  // A new document is a new edit-intent/error lifecycle. The normal
+  // SandboxFiles host also keys the component by path; this keeps standalone
+  // consumers correct without relying on that implementation detail.
+  useEffect(() => {
     editIntentFiredRef.current = false;
-    setValue(initialContents);
-    setBaseline(initialContents);
     setSaveError(null);
     setSavedTick(false);
-  }, [path, initialContents]);
+  }, [path]);
 
   // Record a buffer change: the FIRST divergence from the baseline is the edit
   // intent that warms the box (idempotent — latched per opened file).
   const noteEdit = useCallback(
     (next: string) => {
-      setValue(next);
+      setBuffer((current) => ({ ...current, value: next }));
       setSavedTick(false);
       if (!editIntentFiredRef.current && next !== baseline) {
         editIntentFiredRef.current = true;
@@ -246,40 +289,46 @@ export function CodeEditor({
   const saveRef = useRef<() => void>(() => {});
 
   const save = useCallback(async () => {
-    if (readOnly) return;
+    if (readOnly || saveInFlightRef.current) return;
     // Snapshot the buffer at call time so an in-flight edit can't race the write.
     const snapshot = value;
     if (snapshot === baseline) return; // nothing to persist
+    saveInFlightRef.current = true;
     setSaving(true);
     setSaveError(null);
     setSavedTick(false);
     try {
-      await onSave(snapshot);
-      setBaseline(snapshot);
-      lastSeed.current = { path, contents: snapshot };
+      await onSave(snapshot, baseline);
+      setBuffer((current) =>
+        current.path === path ? { ...current, baseline: snapshot } : current,
+      );
       setSavedTick(true);
     } catch (cause) {
       setSaveError(cause instanceof Error ? cause : new Error(String(cause)));
     } finally {
+      saveInFlightRef.current = false;
       setSaving(false);
     }
   }, [readOnly, value, baseline, onSave, path]);
 
   const overwrite = useCallback(async () => {
-    if (readOnly || !onOverwrite) return;
+    if (readOnly || !onOverwrite || saveInFlightRef.current) return;
     const snapshot = value;
     if (snapshot === baseline) return;
+    saveInFlightRef.current = true;
     setSaving(true);
     setSaveError(null);
     setSavedTick(false);
     try {
       await onOverwrite(snapshot);
-      setBaseline(snapshot);
-      lastSeed.current = { path, contents: snapshot };
+      setBuffer((current) =>
+        current.path === path ? { ...current, baseline: snapshot } : current,
+      );
       setSavedTick(true);
     } catch (cause) {
       setSaveError(cause instanceof Error ? cause : new Error(String(cause)));
     } finally {
+      saveInFlightRef.current = false;
       setSaving(false);
     }
   }, [readOnly, onOverwrite, value, baseline, path]);
@@ -306,10 +355,19 @@ export function CodeEditor({
 
   const Editor = bundle?.Editor;
 
+  const reload = useCallback(() => {
+    setBuffer({ path, value: initialContents, baseline: initialContents });
+    editIntentFiredRef.current = false;
+    setSaveError(null);
+    setSavedTick(false);
+    onReload?.();
+  }, [initialContents, onReload, path]);
+
   return (
     <div
       className={cn("flex h-full min-h-0 flex-col", className)}
       data-opengeni-code-editor
+      data-opengeni-editor-dirty={dirty ? "true" : "false"}
       style={editorVars}
     >
       {/* Save bar: dirty indicator + status + the explicit Save button. */}
@@ -334,7 +392,9 @@ export function CodeEditor({
               {saveError.message}
             </span>
           )}
-          {!saveError && savedTick && <span className="text-og-xs text-og-status-idle">Saved</span>}
+          {!saveError && savedTick && !dirty && (
+            <span className="text-og-xs text-og-status-idle">Saved</span>
+          )}
           {readOnly ? (
             <span className="text-og-xs uppercase tracking-wide text-og-fg-subtle">Read-only</span>
           ) : !saveConflict ? (
@@ -375,8 +435,7 @@ export function CodeEditor({
               <button
                 type="button"
                 onClick={() => {
-                  setSaveError(null);
-                  onReload();
+                  reload();
                 }}
                 className="min-h-8 rounded-og-sm border border-og-border bg-og-surface-1 px-2 text-og-xs font-medium text-og-fg hover:bg-og-surface-2 pointer-coarse:min-h-11"
               >
@@ -458,7 +517,7 @@ function PlainTextarea({
         }
       }}
       aria-label="Plain text file editor"
-      className="h-full w-full resize-none bg-transparent p-2 font-og-mono text-og-sm text-og-fg outline-none"
+      className="h-full w-full resize-none bg-transparent p-2 font-og-mono text-og-sm text-og-fg outline-hidden"
     />
   );
 }

package/src/components/command-palette.tsx

@@ -101,7 +101,7 @@ export function CommandPalette({
                         {dangerLabel}
                       </span>
                     ) : null}
-                    <span className="truncate text-[12px] text-og-fg-subtle max-sm:hidden">
+                    <span className="og-command-description truncate text-[12px] text-og-fg-subtle max-sm:hidden">
                       {command.description}
                     </span>
                   </span>

package/src/components/composer-transcription-control.tsx

@@ -35,10 +35,12 @@ export type ComposerTranscriptionMessages = {
   stop: string;
   cancel: string;
   retry: string;
+  pauseRetrying: string;
   requestingPermission: string;
   recording: string;
   saving: string;
   transcribing: string;
+  retrying: string;
   recovered: string;
   recoveredTranscript: string;
   insertRecoveredTranscript: string;
@@ -61,10 +63,12 @@ const defaultMessages: ComposerTranscriptionMessages = {
   stop: "Stop and transcribe",
   cancel: "Cancel recording",
   retry: "Retry voice input",
+  pauseRetrying: "Pause automatic retry",
   requestingPermission: "Requesting microphone…",
   recording: "Recording. Press Escape to cancel.",
   saving: "Saving audio locally…",
   transcribing: "Transcribing…",
+  retrying: "Recording saved. Retrying automatically…",
   recovered: "Recording recovered and saved locally.",
   recoveredTranscript: "Transcript saved locally. Check your draft before inserting.",
   insertRecoveredTranscript: "Insert saved transcript",
@@ -138,6 +142,8 @@ export function ComposerTranscriptionControl({
     createOwnerId,
   });
   const { status } = transcription;
+  const retrying = status === "retrying";
+  const capturing = status === "requesting-permission" || status === "recording";
 
   const cancelTranscription = transcription.cancel;
   useEffect(() => {
@@ -146,14 +152,10 @@ export function ComposerTranscriptionControl({
       cancelTranscription();
     }
   }, [cancelTranscription, status, suppressed]);
-  const active =
-    status === "requesting-permission" ||
-    status === "recording" ||
-    status === "saving" ||
-    status === "transcribing";
+  const active = capturing || status === "saving" || status === "transcribing";
   const recoverable =
     transcription.hasRecoverableRecording &&
-    (status === "recovered" || status === "transcript-ready" || status === "error");
+    (retrying || status === "recovered" || status === "transcript-ready" || status === "error");
   const savedTranscript = status === "transcript-ready" && transcription.savedTranscript !== null;
   const unavailableMessage = composer.disabled
     ? messages.unavailableDisabled
@@ -175,13 +177,15 @@ export function ComposerTranscriptionControl({
           ? messages.saving
           : status === "transcribing"
             ? messages.transcribing
-            : status === "recovered"
-              ? messages.recovered
-              : status === "transcript-ready"
-                ? messages.recoveredTranscript
-                : status === "error"
-                  ? (errorMessage ?? messages.errorUnknown)
-                  : unavailableMessage;
+            : retrying
+              ? messages.retrying
+              : status === "recovered"
+                ? messages.recovered
+                : status === "transcript-ready"
+                  ? messages.recoveredTranscript
+                  : status === "error"
+                    ? (errorMessage ?? messages.errorUnknown)
+                    : unavailableMessage;
 
   function start(event: MouseEvent<HTMLButtonElement>) {
     if (unavailableMessage) {
@@ -200,8 +204,15 @@ export function ComposerTranscriptionControl({
           animate={{ opacity: 1, width: "auto" }}
           exit={{ opacity: 0, width: 0 }}
           transition={{ duration: 0.36, ease: [0.22, 1, 0.36, 1] }}
-          className={cn("inline-flex min-w-0 overflow-hidden", className)}
+          className={cn(
+            "inline-flex min-w-0 overflow-hidden",
+            // Mobile capture mode reserves the footer for this control. Keep the
+            // shell itself from shrinking and clipping its trailing actions.
+            capturing && "shrink-0",
+            className,
+          )}
           data-transcription-status={status}
+          data-transcription-capturing={capturing ? "" : undefined}
         >
           <span className="inline-flex min-w-0 items-center gap-1.5">
             <AnimatePresence mode="popLayout" initial={false}>
@@ -217,23 +228,39 @@ export function ComposerTranscriptionControl({
                     "bg-og-surface-2/70 pl-2 pr-1 pointer-coarse:h-11",
                   )}
                 >
-                  <span className="max-w-44 truncate text-og-xs text-og-fg-muted max-sm:max-w-28">
+                  <span className="og-transcription-recovered-label max-w-44 truncate text-og-xs text-og-fg-muted max-sm:max-w-28">
                     {savedTranscript
                       ? (errorMessage ?? messages.recoveredTranscript)
-                      : status === "error"
-                        ? (errorMessage ?? messages.errorRetryable)
-                        : messages.recovered}
+                      : retrying
+                        ? messages.retrying
+                        : status === "error"
+                          ? (errorMessage ?? messages.errorRetryable)
+                          : messages.recovered}
                   </span>
-                  <Tip tip={savedTranscript ? messages.insertRecoveredTranscript : messages.retry}>
+                  <Tip
+                    tip={
+                      savedTranscript
+                        ? messages.insertRecoveredTranscript
+                        : retrying
+                          ? messages.pauseRetrying
+                          : messages.retry
+                    }
+                  >
                     <button
                       type="button"
                       onClick={() =>
                         savedTranscript
                           ? void transcription.insertSavedTranscript()
-                          : transcription.retry()
+                          : retrying
+                            ? transcription.cancel()
+                            : transcription.retry()
                       }
                       aria-label={
-                        savedTranscript ? messages.insertRecoveredTranscript : messages.retry
+                        savedTranscript
+                          ? messages.insertRecoveredTranscript
+                          : retrying
+                            ? messages.pauseRetrying
+                            : messages.retry
                       }
                       className={cn(
                         "inline-flex size-7 shrink-0 items-center justify-center rounded-og-sm",
@@ -243,6 +270,8 @@ export function ComposerTranscriptionControl({
                     >
                       {savedTranscript ? (
                         <ClipboardPasteIcon className="size-3.5" />
+                      ) : retrying ? (
+                        <SquareIcon className="size-3.5" />
                       ) : (
                         <RefreshCwIcon className="size-3.5" />
                       )}
@@ -366,7 +395,7 @@ export function ComposerTranscriptionControl({
               <Tip tip={errorMessage}>
                 <span
                   aria-hidden="true"
-                  className="max-w-40 truncate text-og-xs text-og-status-failed max-sm:max-w-24"
+                  className="og-transcription-error-label max-w-40 truncate text-og-xs text-og-status-failed max-sm:max-w-24"
                 >
                   {errorMessage}
                 </span>

package/src/components/composer.tsx

@@ -45,6 +45,10 @@ import {
   type SlashCommandContext,
 } from "../hooks/use-slash-commands";
 import { cn } from "../lib/cn";
+import {
+  ComposerResponsiveContext,
+  type ResponsiveBasis,
+} from "../lib/composer-responsive-context";
 import { composerSubmissionErrorMessage, formatBytes, formatRelativeTime } from "../lib/format";
 import type { PickerModelRow } from "../model-policy";
 import { OPEN_WORKSTREAM_CONTROL_EVENT } from "../workstream-control-event";
@@ -53,6 +57,7 @@ import { ModelPicker as ModelPickerView } from "./model-picker";
 import { TooltipProvider } from "./tooltip";
 
 export { OPEN_WORKSTREAM_CONTROL_EVENT };
+export type { ResponsiveBasis } from "../lib/composer-responsive-context";
 
 function ComposerTip({
   tip,
@@ -743,29 +748,43 @@ function isRecord(value: unknown): value is Record<string, unknown> {
 export type ComposerRootProps = Omit<ComponentPropsWithoutRef<"div">, "children"> & {
   controller: ChatComposerController;
   children: ReactNode;
+  /**
+   * Measurement surface for responsive composer chrome. `viewport` preserves
+   * the existing breakpoint behavior; `container` responds to this root's
+   * inline size and also bounds composer-owned portalled menus to it.
+   */
+  responsiveBasis?: ResponsiveBasis | undefined;
 };
 
 export const Root = forwardRef<HTMLDivElement, ComposerRootProps>(function ComposerRoot(
-  { controller, children, className, style, ...props },
+  { controller, children, className, style, responsiveBasis = "viewport", ...props },
   forwardedRef,
 ) {
+  const responsiveRootRef = useRef<HTMLDivElement | null>(null);
+  const responsiveContext = useMemo(
+    () => ({ responsiveBasis, rootRef: responsiveRootRef }),
+    [responsiveBasis],
+  );
   // Provider stays on Root so optional Radix tip surfaces (voice input) work.
   // Ordinary composer actions use native `title` via ComposerTip to avoid
   // pulling Popper into every tip hotspot.
   return (
     <ComposerContext.Provider value={controller}>
-      <TooltipProvider delayDuration={300}>
-        <div
-          {...props}
-          ref={mergeRefs(controller.rootRef, forwardedRef)}
-          data-og-composer-id={controller.id}
-          className={cn("og-root", className)}
-          style={{ paddingBottom: "env(safe-area-inset-bottom)", ...style }}
-        >
-          {children}
-          <ComposerAnnouncements />
-        </div>
-      </TooltipProvider>
+      <ComposerResponsiveContext.Provider value={responsiveContext}>
+        <TooltipProvider delayDuration={300}>
+          <div
+            {...props}
+            ref={mergeRefs(controller.rootRef, responsiveRootRef, forwardedRef)}
+            data-og-composer-id={controller.id}
+            data-og-responsive-basis={responsiveBasis}
+            className={cn("og-root og-composer", className)}
+            style={{ paddingBottom: "env(safe-area-inset-bottom)", ...style }}
+          >
+            {children}
+            <ComposerAnnouncements />
+          </div>
+        </TooltipProvider>
+      </ComposerResponsiveContext.Provider>
     </ComposerContext.Provider>
   );
 });
@@ -957,8 +976,8 @@ export const Input = forwardRef<HTMLTextAreaElement, ComposerInputProps>(functio
         paletteOpen ? `${controller.listboxId}-option-${controller.palette.highlight}` : undefined
       }
       className={cn(
-        "block w-full resize-none bg-transparent px-3.5 pt-3 pb-1 text-og-composer md:px-4 md:text-og-composer-wide pointer-coarse:min-h-11",
-        "text-og-fg placeholder:text-og-fg-subtle focus:outline-none focus-visible:outline-none",
+        "og-composer-input block w-full resize-none bg-transparent px-3.5 pt-3 pb-1 text-og-composer md:px-4 md:text-og-composer-wide pointer-coarse:min-h-11",
+        "text-og-fg placeholder:text-og-fg-subtle focus:outline-hidden focus-visible:outline-hidden",
         "disabled:cursor-not-allowed disabled:opacity-60",
         className,
       )}
@@ -992,7 +1011,7 @@ export const Footer = forwardRef<HTMLDivElement, ComposerFooterProps>(function C
       {...props}
       ref={ref}
       className={cn(
-        "flex items-end gap-1.5 px-2 pb-2 pt-0.5 sm:px-2.5 sm:pb-2.5",
+        "og-composer-footer flex items-end gap-1.5 px-2 pb-2 pt-0.5 sm:px-2.5 sm:pb-2.5",
         // Mobile: one control row — never wrap into a second toolbar line.
         "max-sm:flex-nowrap max-sm:items-center max-sm:gap-1",
         className,
@@ -1010,7 +1029,7 @@ export const Controls = forwardRef<HTMLSpanElement, ComposerControlsProps>(
         {...props}
         ref={ref}
         className={cn(
-          "flex min-w-0 flex-1 flex-wrap items-center gap-1.5",
+          "og-composer-controls flex min-w-0 flex-1 flex-wrap items-center gap-1.5",
           "max-sm:flex-nowrap max-sm:gap-1",
           className,
         )}
@@ -1030,7 +1049,10 @@ export const Hint = forwardRef<HTMLSpanElement, ComposerHintProps>(function Comp
     <span
       {...props}
       ref={ref}
-      className={cn("min-w-0 flex-1 px-1.5 text-og-xs text-og-fg-subtle max-sm:hidden", className)}
+      className={cn(
+        "og-composer-hint min-w-0 flex-1 px-1.5 text-og-xs text-og-fg-subtle max-sm:hidden",
+        className,
+      )}
     >
       {children ?? controller.messages.keyboardHint}
     </span>
@@ -1048,7 +1070,7 @@ export const Actions = forwardRef<HTMLSpanElement, ComposerActionsProps>(functio
       {...props}
       ref={ref}
       className={cn(
-        "ml-auto flex shrink-0 items-center gap-1.5",
+        "og-composer-actions ml-auto flex shrink-0 items-center gap-1.5",
         "max-sm:flex-nowrap max-sm:gap-1",
         className,
       )}
@@ -1386,8 +1408,12 @@ function WorkstreamPausedStrip({
           ) : (
             <PlayIcon className="size-3.5 fill-current" />
           )}
-          <span className="hidden min-[400px]:inline">{messages.resumeThisWorkstream}</span>
-          <span className="min-[400px]:hidden">{messages.resumeShort}</span>
+          <span className="og-composer-resume-label-long hidden min-[400px]:inline">
+            {messages.resumeThisWorkstream}
+          </span>
+          <span className="og-composer-resume-label-short min-[400px]:hidden">
+            {messages.resumeShort}
+          </span>
         </button>
         <button
           type="button"
@@ -1412,7 +1438,7 @@ function WorkstreamPausedStrip({
                 {blockerHref(entry, controlLinks) ? (
                   <a
                     href={blockerHref(entry, controlLinks)}
-                    className="font-medium text-og-fg underline decoration-og-border-strong underline-offset-2 hover:text-og-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-ring/40"
+                    className="font-medium text-og-fg underline decoration-og-border-strong underline-offset-2 hover:text-og-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-ring/40"
                   >
                     {entry.displayName}
                   </a>
@@ -1582,7 +1608,7 @@ function AttachmentChips({
   onRetry?: ((id: string) => void) | undefined;
 }) {
   return (
-    <div className="flex flex-wrap gap-2 border-b border-og-border px-3 py-2">
+    <div className="flex flex-wrap gap-2 px-3 py-2">
       {attachments.map((attachment) => {
         const failed = attachment.status === "failed";
         const statusText =