@caido-utils/frontend 0.1.0

package/dist/components/BaseDialog.d.vue.ts

@@ -0,0 +1,64 @@
+type __VLS_Props = {
+    title: string;
+    width: string;
+    showBack?: boolean;
+    showFooter?: boolean;
+    actionLabel?: string;
+    actionIcon?: string;
+    actionDisabled?: boolean;
+    actionLoading?: boolean;
+    cancelLabel?: string;
+    contentClass?: string;
+};
+declare var __VLS_26: {}, __VLS_28: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_26) => any;
+} & {
+    footer?: (props: typeof __VLS_28) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    showBack: boolean;
+    showFooter: boolean;
+    actionLabel: string;
+    actionDisabled: boolean;
+    actionLoading: boolean;
+    cancelLabel: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    showBack: boolean;
+    showFooter: boolean;
+    actionLabel: string;
+    actionDisabled: boolean;
+    actionLoading: boolean;
+    cancelLabel: string;
+}>>>, {
+    showBack: boolean;
+    showFooter: boolean;
+    actionLabel: string;
+    actionDisabled: boolean;
+    actionLoading: boolean;
+    cancelLabel: string;
+}, {}>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/BaseDialog.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import Button from "primevue/button";
+import Dialog from "primevue/dialog";
+
+withDefaults(
+  defineProps<{
+    title: string;
+    width: string;
+    showBack?: boolean;
+    showFooter?: boolean;
+    actionLabel?: string;
+    actionIcon?: string;
+    actionDisabled?: boolean;
+    actionLoading?: boolean;
+    cancelLabel?: string;
+    contentClass?: string;
+  }>(),
+  {
+    showBack: false,
+    showFooter: true,
+    actionLabel: "Confirm",
+    actionDisabled: false,
+    actionLoading: false,
+    cancelLabel: "Cancel",
+  },
+);
+
+const emit = defineEmits<{
+  close: [];
+  back: [];
+  action: [];
+}>();
+</script>
+
+<template>
+  <Dialog
+    :visible="true"
+    modal
+    :closable="false"
+    :style="{ width }"
+    :content-class="contentClass"
+    @update:visible="emit('close')"
+  >
+    <template #header>
+      <div class="flex items-center justify-between w-full">
+        <div class="flex items-center gap-3">
+          <Button
+            v-if="showBack"
+            icon="fas fa-arrow-left"
+            text
+            severity="secondary"
+            size="small"
+            @click="emit('back')"
+          />
+          <span class="font-semibold text-lg">{{ title }}</span>
+        </div>
+        <Button
+          icon="fas fa-times"
+          text
+          severity="secondary"
+          size="small"
+          @click="emit('close')"
+        />
+      </div>
+    </template>
+
+    <slot />
+
+    <template v-if="showFooter" #footer>
+      <slot name="footer">
+        <div class="flex justify-end gap-2">
+          <Button
+            :label="cancelLabel"
+            severity="secondary"
+            text
+            @click="emit('close')"
+          />
+          <Button
+            :label="actionLabel"
+            :icon="actionIcon"
+            :disabled="actionDisabled"
+            :loading="actionLoading"
+            @click="emit('action')"
+          />
+        </div>
+      </slot>
+    </template>
+  </Dialog>
+</template>

package/dist/components/BaseDialog.vue.d.ts

@@ -0,0 +1,64 @@
+type __VLS_Props = {
+    title: string;
+    width: string;
+    showBack?: boolean;
+    showFooter?: boolean;
+    actionLabel?: string;
+    actionIcon?: string;
+    actionDisabled?: boolean;
+    actionLoading?: boolean;
+    cancelLabel?: string;
+    contentClass?: string;
+};
+declare var __VLS_26: {}, __VLS_28: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_26) => any;
+} & {
+    footer?: (props: typeof __VLS_28) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    showBack: boolean;
+    showFooter: boolean;
+    actionLabel: string;
+    actionDisabled: boolean;
+    actionLoading: boolean;
+    cancelLabel: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    showBack: boolean;
+    showFooter: boolean;
+    actionLabel: string;
+    actionDisabled: boolean;
+    actionLoading: boolean;
+    cancelLabel: string;
+}>>>, {
+    showBack: boolean;
+    showFooter: boolean;
+    actionLabel: string;
+    actionDisabled: boolean;
+    actionLoading: boolean;
+    cancelLabel: string;
+}, {}>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/Card.d.vue.ts

@@ -0,0 +1,12 @@
+declare var __VLS_7: any, __VLS_8: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Card.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import PrimeCard from "primevue/card";
+
+defineOptions({
+  inheritAttrs: false,
+});
+</script>
+
+<template>
+  <PrimeCard
+    v-bind="$attrs"
+    :pt="{
+      body: { class: 'h-full p-0' },
+      content: { class: 'h-full flex flex-col' },
+    }"
+  >
+    <template v-for="(_, slot) in $slots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope || {}" />
+    </template>
+  </PrimeCard>
+</template>

package/dist/components/Card.vue.d.ts

@@ -0,0 +1,12 @@
+declare var __VLS_7: any, __VLS_8: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Table.d.vue.ts

@@ -0,0 +1,32 @@
+declare const _default: <T extends Record<string, unknown>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{}>>, never>, never> & {
+        items: T[];
+        selected: T[];
+        columns: {
+            key: string;
+            header: string;
+            width: string;
+            sortable?: boolean;
+            sortType?: "string" | "number" | "date";
+        }[];
+        rowKey: (item: T) => string;
+        activeKey?: string;
+        emptyMessage?: string;
+        selectable?: boolean;
+    } & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        [x: string]: ((props: {
+            item: any;
+            value: any;
+        }) => any) | undefined;
+    };
+    emit: ((evt: "update:selected", value: T[]) => void) & ((evt: "row-click", item: T) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/Table.vue

@@ -0,0 +1,320 @@
+<script setup lang="ts" generic="T extends Record<string, unknown>">
+import VirtualScroller from "primevue/virtualscroller";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+
+type SortType = "string" | "number" | "date";
+
+type Column = {
+  key: string;
+  header: string;
+  width: string;
+  sortable?: boolean;
+  sortType?: SortType;
+};
+
+type SortOrder = "asc" | "desc" | undefined;
+
+const props = withDefaults(
+  defineProps<{
+    items: T[];
+    selected: T[];
+    columns: Column[];
+    rowKey: (item: T) => string;
+    activeKey?: string;
+    emptyMessage?: string;
+    selectable?: boolean;
+  }>(),
+  { selectable: false },
+);
+
+const emit = defineEmits<{
+  "update:selected": [value: T[]];
+  "row-click": [item: T];
+}>();
+
+const selectedKeys = ref(new Set<string>());
+
+watch(
+  () => props.selected,
+  (val) => {
+    const keys = new Set<string>();
+    for (const item of val) {
+      keys.add(props.rowKey(item));
+    }
+    selectedKeys.value = keys;
+  },
+  { immediate: true },
+);
+
+function syncSelection() {
+  const result: T[] = [];
+  for (const item of props.items) {
+    if (selectedKeys.value.has(props.rowKey(item))) {
+      result.push(item);
+    }
+  }
+  emit("update:selected", result);
+}
+
+function toggleSelection(item: T) {
+  const key = props.rowKey(item);
+  if (selectedKeys.value.has(key)) {
+    selectedKeys.value.delete(key);
+  } else {
+    selectedKeys.value.add(key);
+  }
+  syncSelection();
+}
+
+function toggleAll() {
+  if (selectedKeys.value.size === props.items.length) {
+    selectedKeys.value.clear();
+  } else {
+    for (const item of props.items) {
+      selectedKeys.value.add(props.rowKey(item));
+    }
+  }
+  syncSelection();
+}
+
+const allSelected = computed(
+  () =>
+    props.items.length > 0 && selectedKeys.value.size === props.items.length,
+);
+
+function onRowClick(item: T) {
+  emit("row-click", item);
+}
+
+function isSelected(item: T): boolean {
+  return selectedKeys.value.has(props.rowKey(item));
+}
+
+function isActive(item: T): boolean {
+  if (props.activeKey === undefined) return false;
+  return props.rowKey(item) === props.activeKey;
+}
+
+const sortKey = ref<string | undefined>(undefined);
+const sortOrder = ref<SortOrder>(undefined);
+
+function toggleSort(col: Column) {
+  if (!col.sortable) return;
+
+  if (sortKey.value !== col.key) {
+    sortKey.value = col.key;
+    sortOrder.value = "asc";
+  } else if (sortOrder.value === "asc") {
+    sortOrder.value = "desc";
+  } else {
+    sortKey.value = undefined;
+    sortOrder.value = undefined;
+  }
+}
+
+const sortedItems = computed(() => {
+  if (sortKey.value === undefined || sortOrder.value === undefined) {
+    return props.items;
+  }
+
+  const key = sortKey.value;
+  const col = props.columns.find((c) => c.key === key);
+  const type = col?.sortType ?? "string";
+  const dir = sortOrder.value === "asc" ? 1 : -1;
+  const sorted = [...props.items];
+
+  sorted.sort((a, b) => {
+    const aVal = a[key];
+    const bVal = b[key];
+
+    if (aVal === undefined || aVal === "") return 1;
+    if (bVal === undefined || bVal === "") return -1;
+
+    if (type === "number") {
+      return (Number(aVal) - Number(bVal)) * dir;
+    }
+
+    if (type === "date") {
+      return (
+        (new Date(String(aVal)).getTime() - new Date(String(bVal)).getTime()) *
+        dir
+      );
+    }
+
+    return String(aVal).localeCompare(String(bVal)) * dir;
+  });
+
+  return sorted;
+});
+
+const VIRTUAL_THRESHOLD = 100;
+const useVirtual = computed(
+  () => sortedItems.value.length >= VIRTUAL_THRESHOLD,
+);
+
+const scrollerKey = ref(0);
+const containerRef = ref<HTMLElement>();
+let resizeObserver: ResizeObserver | undefined;
+
+onMounted(() => {
+  if (containerRef.value === undefined) return;
+  resizeObserver = new ResizeObserver((entries) => {
+    const entry = entries[0];
+    if (entry !== undefined && entry.contentRect.height > 0) {
+      scrollerKey.value++;
+    }
+  });
+  resizeObserver.observe(containerRef.value);
+});
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+});
+</script>
+
+<template>
+  <div class="h-full flex flex-col min-h-0">
+    <table class="w-full border-collapse" :style="{ tableLayout: 'fixed' }">
+      <thead>
+        <tr>
+          <th
+            v-if="selectable"
+            class="w-8 px-2 py-1.5 bg-surface-900 sticky top-0 z-10"
+          >
+            <div
+              class="w-3.5 h-3.5 rounded-sm border cursor-pointer flex items-center justify-center transition-colors"
+              :class="
+                allSelected
+                  ? 'bg-amber-500 border-amber-500'
+                  : 'border-surface-500 hover:border-surface-300'
+              "
+              @click="toggleAll()"
+            >
+              <i
+                v-if="allSelected"
+                class="fas fa-check text-[8px] text-white"
+              />
+            </div>
+          </th>
+          <th
+            v-for="col in columns"
+            :key="col.key"
+            class="px-2.5 py-1.5 font-mono text-sm font-semibold text-surface-300 text-left bg-surface-900 border-b border-surface-700/50 sticky top-0 z-10 select-none"
+            :class="
+              col.sortable
+                ? 'cursor-pointer hover:text-surface-100 transition-colors'
+                : ''
+            "
+            :style="{ width: col.width }"
+            @click="toggleSort(col)"
+          >
+            <span class="flex items-center gap-1.5">
+              {{ col.header }}
+              <i
+                v-if="col.sortable && sortKey === col.key"
+                :class="[
+                  'fas text-[9px]',
+                  sortOrder === 'asc' ? 'fa-chevron-up' : 'fa-chevron-down',
+                ]"
+              />
+            </span>
+          </th>
+        </tr>
+      </thead>
+    </table>
+    <div
+      ref="containerRef"
+      class="flex-1 min-h-0"
+      :class="useVirtual ? 'overflow-hidden' : 'overflow-y-auto'"
+    >
+      <div
+        v-if="sortedItems.length === 0"
+        class="flex flex-col items-center justify-center h-full gap-3 text-surface-500"
+      >
+        <i class="fas fa-inbox text-3xl text-surface-600" />
+        <span class="text-sm">{{ emptyMessage ?? "No data" }}</span>
+      </div>
+      <VirtualScroller
+        v-else
+        :key="scrollerKey"
+        :items="sortedItems"
+        :item-size="33"
+        :disabled="!useVirtual"
+        class="h-full"
+      >
+        <template
+          #content="{
+            items: visibleItems,
+            styleClass,
+            contentRef,
+            contentStyle,
+          }"
+        >
+          <table
+            :ref="contentRef"
+            :class="styleClass"
+            class="w-full border-collapse"
+            :style="{ tableLayout: 'fixed', ...contentStyle }"
+          >
+            <colgroup>
+              <col v-if="selectable" style="width: 32px" />
+              <col
+                v-for="col in columns"
+                :key="col.key"
+                :style="{ width: col.width }"
+              />
+            </colgroup>
+            <tbody>
+              <tr
+                v-for="item in visibleItems as T[]"
+                :key="rowKey(item)"
+                class="cursor-pointer transition-colors"
+                :class="[
+                  isActive(item)
+                    ? 'bg-amber-400/15 hover:bg-amber-400/25'
+                    : isSelected(item)
+                      ? 'bg-amber-400/10 hover:bg-amber-400/15'
+                      : 'even:bg-white/[0.02] hover:bg-white/[0.04]',
+                ]"
+                @click="onRowClick(item)"
+              >
+                <td
+                  v-if="selectable"
+                  class="px-2 py-1.5 border-b border-surface-700/50"
+                  @click.stop="toggleSelection(item)"
+                >
+                  <div
+                    class="w-3.5 h-3.5 rounded-sm border cursor-pointer flex items-center justify-center transition-colors"
+                    :class="
+                      isSelected(item)
+                        ? 'bg-amber-500 border-amber-500'
+                        : 'border-surface-600 hover:border-surface-400'
+                    "
+                  >
+                    <i
+                      v-if="isSelected(item)"
+                      class="fas fa-check text-[8px] text-white"
+                    />
+                  </div>
+                </td>
+                <td
+                  v-for="col in columns"
+                  :key="col.key"
+                  class="px-2.5 py-1.5 font-mono text-[13px] font-medium text-surface-200 overflow-hidden text-ellipsis whitespace-nowrap border-b border-surface-700/50"
+                >
+                  <slot
+                    :name="`cell-${col.key}`"
+                    :item="item"
+                    :value="item[col.key]"
+                  >
+                    <span class="truncate block">{{ item[col.key] }}</span>
+                  </slot>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </template>
+      </VirtualScroller>
+    </div>
+  </div>
+</template>

package/dist/components/Table.vue.d.ts

@@ -0,0 +1,32 @@
+declare const _default: <T extends Record<string, unknown>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{}>>, never>, never> & {
+        items: T[];
+        selected: T[];
+        columns: {
+            key: string;
+            header: string;
+            width: string;
+            sortable?: boolean;
+            sortType?: "string" | "number" | "date";
+        }[];
+        rowKey: (item: T) => string;
+        activeKey?: string;
+        emptyMessage?: string;
+        selectable?: boolean;
+    } & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        [x: string]: ((props: {
+            item: any;
+            value: any;
+        }) => any) | undefined;
+    };
+    emit: ((evt: "update:selected", value: T[]) => void) & ((evt: "row-click", item: T) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export { default as BaseDialog } from "./BaseDialog.vue";
+export { default as Card } from "./Card.vue";
+export { default as Table } from "./Table.vue";

package/dist/components/index.js

@@ -0,0 +1,3 @@
+export { default as BaseDialog } from "./BaseDialog.vue";
+export { default as Card } from "./Card.vue";
+export { default as Table } from "./Table.vue";

package/dist/composables/index.d.ts

@@ -0,0 +1,2 @@
+export { useDialogManager } from "./useDialogManager";
+export { useFrontend } from "./useFrontend";

package/dist/composables/index.js

@@ -0,0 +1,2 @@
+export { useDialogManager } from "./useDialogManager.js";
+export { useFrontend } from "./useFrontend.js";

package/dist/composables/useDialogManager.d.ts

@@ -0,0 +1,14 @@
+import { type Ref } from "vue";
+interface DialogState<TType extends string> {
+    type: TType;
+    data: unknown;
+}
+interface DialogManager<TType extends string> {
+    activeDialog: Ref<DialogState<TType> | undefined>;
+    openDialog: <T = void>(type: TType, data?: T) => void;
+    closeDialog: () => void;
+    isDialogOpen: (type: TType) => boolean;
+    getDialogData: <T>() => T | undefined;
+}
+export declare function useDialogManager<TType extends string>(): DialogManager<TType>;
+export {};

package/dist/composables/useDialogManager.js

@@ -0,0 +1,23 @@
+import { ref } from "vue";
+export function useDialogManager() {
+  const activeDialog = ref();
+  const openDialog = (type, data) => {
+    activeDialog.value = { type, data };
+  };
+  const closeDialog = () => {
+    activeDialog.value = void 0;
+  };
+  const isDialogOpen = (type) => {
+    return activeDialog.value?.type === type;
+  };
+  const getDialogData = () => {
+    return activeDialog.value?.data;
+  };
+  return {
+    activeDialog,
+    openDialog,
+    closeDialog,
+    isDialogOpen,
+    getDialogData
+  };
+}

package/dist/composables/useFrontend.d.ts

@@ -0,0 +1,9 @@
+import type { Caido } from "@caido/sdk-frontend";
+import type { EditorView } from "@codemirror/view";
+export declare function useFrontend(sdk: Caido): {
+    getEditorView: (showErrors?: boolean) => EditorView | undefined;
+    getEditorContent: () => string | undefined;
+    getSelectedText: () => string | undefined;
+    setEditorContent: (content: string, showErrors?: boolean) => boolean;
+    getReplayRequestId: () => string | undefined;
+};

package/dist/composables/useFrontend.js

@@ -0,0 +1,64 @@
+export function useFrontend(sdk) {
+  const getEditorView = (showErrors = false) => {
+    const editor = sdk.window.getActiveEditor();
+    if (editor === void 0) {
+      if (showErrors) {
+        sdk.window.showToast("No active editor", { variant: "error" });
+      }
+      return void 0;
+    }
+    const view = editor.getEditorView();
+    if (view === void 0) {
+      if (showErrors) {
+        sdk.window.showToast("Could not access editor view", {
+          variant: "error"
+        });
+      }
+      return void 0;
+    }
+    return view;
+  };
+  const getEditorContent = () => {
+    const view = getEditorView();
+    if (view === void 0) return void 0;
+    return view.state.doc.toString();
+  };
+  const getSelectedText = () => {
+    const view = getEditorView();
+    if (view === void 0) return void 0;
+    const { from, to } = view.state.selection.main;
+    if (from === to) return void 0;
+    return view.state.sliceDoc(from, to);
+  };
+  const setEditorContent = (content, showErrors = false) => {
+    const view = getEditorView(showErrors);
+    if (view === void 0) return false;
+    view.dispatch({
+      changes: {
+        from: 0,
+        to: view.state.doc.length,
+        insert: content
+      }
+    });
+    return true;
+  };
+  const getReplayRequestId = () => {
+    const session = sdk.replay.getCurrentSession();
+    if (!session || session.entryIds.length === 0) {
+      return void 0;
+    }
+    const lastEntryId = session.entryIds[session.entryIds.length - 1];
+    if (lastEntryId === void 0) {
+      return void 0;
+    }
+    const entry = sdk.replay.getEntry(lastEntryId);
+    return entry?.requestId;
+  };
+  return {
+    getEditorView,
+    getEditorContent,
+    getSelectedText,
+    setEditorContent,
+    getReplayRequestId
+  };
+}

package/dist/utils/ctx.d.ts

@@ -0,0 +1,8 @@
+import type { CommandContext } from "@caido/sdk-frontend";
+/**
+ * Get the request ID from a command context.
+ * Works with RequestContext (replay), RequestRowContext (http history),
+ * and ResponseContext.
+ * Throws if the context doesn't contain a request or the request hasn't been sent yet.
+ */
+export declare function getRequestId(context: CommandContext): string;

package/dist/utils/ctx.js

@@ -0,0 +1,21 @@
+export function getRequestId(context) {
+  switch (context.type) {
+    case "RequestContext": {
+      if (!context.request.id) {
+        throw new Error("Request must be sent first");
+      }
+      return context.request.id;
+    }
+    case "RequestRowContext": {
+      if (context.requests.length === 0) {
+        throw new Error("No request selected");
+      }
+      return context.requests[0].id;
+    }
+    case "ResponseContext": {
+      return context.request.id;
+    }
+    default:
+      throw new Error("Can't get request ID from this context");
+  }
+}

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export { getRequestId } from "./ctx";

package/dist/utils/index.js

@@ -0,0 +1 @@
+export { getRequestId } from "./ctx.js";

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@caido-utils/frontend",
+  "version": "0.1.0",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "import": "./dist/utils/index.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js"
+    },
+    "./composables": {
+      "types": "./dist/composables/index.d.ts",
+      "import": "./dist/composables/index.js"
+    }
+  },
+  "peerDependencies": {
+    "@caido/sdk-frontend": ">=0.54.0",
+    "@codemirror/view": ">=6.0.0",
+    "primevue": ">=4.0.0",
+    "vue": ">=3.4.0"
+  },
+  "devDependencies": {
+    "@caido/sdk-frontend": "0.54.2-beta.15",
+    "@codemirror/view": "6.28.1",
+    "primevue": "4.1.0",
+    "typescript": "^5.5.4",
+    "unbuild": "^3.6.1",
+    "vue": "3.4.37",
+    "vue-tsc": "^2.0.29"
+  },
+  "scripts": {
+    "build": "unbuild"
+  }
+}