diff --git a/components/src/utils/format.ts b/components/src/utils/format.ts
index 8b37ad13..a4a80b41 100644
--- a/components/src/utils/format.ts
+++ b/components/src/utils/format.ts
@@ -121,15 +121,16 @@ interface FormattedDateTime {
   formattedTime: string;
 }
 
-export const getDateAndTime = (timeMs?: number): FormattedDateTime => {
+export const getDateAndTime = (
+  timeMs?: number,
+  customFormat?: (date: Date, format: string) => string
+): FormattedDateTime => {
   if (!timeMs) {
     return { formattedDate: '', formattedTime: '' };
   }
   const date = new Date(timeMs);
-  const formattedDate = format(date, 'MMM dd, yyyy - ');
-  const formattedTime = format(date, 'HH:mm:ss');
   return {
-    formattedDate,
-    formattedTime,
+    formattedDate: customFormat ? customFormat(date, 'MMM dd, yyyy') : format(date, 'MMM dd, yyyy'),
+    formattedTime: customFormat ? customFormat(date, 'HH:mm:ss') : format(date, 'HH:mm:ss'),
   };
 };
diff --git a/plugin-system/src/components/Annotations/AnnotationEditorForm/AnnotationEditorForm.tsx b/plugin-system/src/components/Annotations/AnnotationEditorForm/AnnotationEditorForm.tsx
index bf44130c..16acc196 100644
--- a/plugin-system/src/components/Annotations/AnnotationEditorForm/AnnotationEditorForm.tsx
+++ b/plugin-system/src/components/Annotations/AnnotationEditorForm/AnnotationEditorForm.tsx
@@ -30,10 +30,9 @@ import InvertColorsIcon from 'mdi-material-ui/InvertColors';
 import { Action } from '@perses-dev/client';
 import { PluginEditor } from '../../PluginEditor';
 import { useValidationSchemas } from '../../../context';
+import { DEFAULT_ANNOTATION_COLOR } from '../constants';
 import { AnnotationPreview } from './AnnotationPreview';
 
-const DEFAULT_ANNOTATION_COLOR = '#FF6B6B';
-
 function FallbackPreview(): ReactElement {
   return <div>Error previewing annotations</div>;
 }
diff --git a/plugin-system/src/components/Annotations/AnnotationEditorForm/AnnotationPreview.tsx b/plugin-system/src/components/Annotations/AnnotationEditorForm/AnnotationPreview.tsx
index f0bcd30c..41ef9e0c 100644
--- a/plugin-system/src/components/Annotations/AnnotationEditorForm/AnnotationPreview.tsx
+++ b/plugin-system/src/components/Annotations/AnnotationEditorForm/AnnotationPreview.tsx
@@ -25,22 +25,9 @@ import {
   Stack,
   Typography,
 } from '@mui/material';
-import { useAnnotationData } from '@perses-dev/plugin-system';
-import { InfoTooltip, useTimeZone } from '@perses-dev/components';
+import { getDateAndTime, InfoTooltip, useTimeZone } from '@perses-dev/components';
 import AlertIcon from 'mdi-material-ui/Alert';
-
-const formatDate = (timeMs: number, format: (date: Date, format: string) => string): { date: string; time: string } => {
-  // Disallows NaN, Infinity, and -Infinity
-  if (!Number.isFinite(timeMs)) {
-    return { date: 'N/A', time: 'N/A' };
-  }
-
-  const d = new Date(timeMs);
-  return {
-    date: format(d, 'MMM dd, yyyy'),
-    time: format(d, 'HH:mm:ss'),
-  };
-};
+import { useAnnotationData } from '../../../runtime';
 
 interface AnnotationPreviewCardProps extends CardProps {
   value: AnnotationData;
@@ -48,8 +35,8 @@ interface AnnotationPreviewCardProps extends CardProps {
 }
 
 function AnnotationPreviewCard({ value, formatWithUserTimeZone, ...props }: AnnotationPreviewCardProps): ReactNode {
-  const start = formatDate(value.start, formatWithUserTimeZone);
-  const end = value.end !== undefined ? formatDate(value.start, formatWithUserTimeZone) : null;
+  const start = getDateAndTime(value.start, formatWithUserTimeZone);
+  const end = value.end !== undefined ? getDateAndTime(value.start, formatWithUserTimeZone) : null;
 
   const tags = useMemo(() => {
     return Object.entries(value.tags ?? []).map(([key, value]) => {
@@ -75,13 +62,13 @@ function AnnotationPreviewCard({ value, formatWithUserTimeZone, ...props }: Anno
 
         <Stack gap={0.5} direction="row">
           <Typography variant="caption">
-            {start.date} - <strong>{start.time}</strong>
+            {start.formattedDate} - <strong>{start.formattedTime}</strong>
           </Typography>
           {end && (
             <>
               <Typography variant="caption">{' → '}</Typography>
               <Typography variant="caption">
-                {end.date} - <strong>{end.time}</strong>
+                {end.formattedDate} - <strong>{end.formattedTime}</strong>
               </Typography>
             </>
           )}
diff --git a/plugin-system/src/components/Annotations/constants.ts b/plugin-system/src/components/Annotations/constants.ts
new file mode 100644
index 00000000..08f5f007
--- /dev/null
+++ b/plugin-system/src/components/Annotations/constants.ts
@@ -0,0 +1,14 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+export const DEFAULT_ANNOTATION_COLOR = '#FF6B6B';
diff --git a/plugin-system/src/components/Annotations/index.ts b/plugin-system/src/components/Annotations/index.ts
index 17f5ba3b..3748c934 100644
--- a/plugin-system/src/components/Annotations/index.ts
+++ b/plugin-system/src/components/Annotations/index.ts
@@ -12,3 +12,4 @@
 // limitations under the License.
 
 export * from './AnnotationEditorForm';
+export * from './constants';
diff --git a/plugin-system/src/model/annotations.ts b/plugin-system/src/model/annotations.ts
index 4bca20df..2fdb6518 100644
--- a/plugin-system/src/model/annotations.ts
+++ b/plugin-system/src/model/annotations.ts
@@ -12,7 +12,7 @@
 // limitations under the License.
 
 import { AbsoluteTimeRange, AnnotationData, UnknownSpec } from '@perses-dev/spec';
-import { DatasourceStore, VariableStateMap } from '@perses-dev/plugin-system';
+import { DatasourceStore, VariableStateMap } from '../runtime';
 import { Plugin } from './plugin-base';
 
 /**
diff --git a/plugin-system/src/model/log-queries.ts b/plugin-system/src/model/log-queries.ts
index 2a023917..7f24a922 100644
--- a/plugin-system/src/model/log-queries.ts
+++ b/plugin-system/src/model/log-queries.ts
@@ -12,7 +12,8 @@
 // limitations under the License.
 
 import { AbsoluteTimeRange, UnknownSpec, LogData, QueryDefinition } from '@perses-dev/spec';
-import { DatasourceStore, Plugin, VariableStateMap } from '@perses-dev/plugin-system';
+import { DatasourceStore, VariableStateMap } from '../runtime';
+import { Plugin } from './plugin-base';
 
 export interface LogQueryResult {
   logs: LogData;