fix chain modal

src/api.ts

@@ -8,6 +8,9 @@ import type {
   PromptMessage,
   TaskStatsOut,
   TaskAsset,
+  AwardSection,
+  ShowcaseDetail,
+  PromptRound,
 } from "./utils/type"
 import { BASE_URL, STORAGE_KEY } from "./utils/const"
 
@@ -206,6 +209,11 @@ export const Submission = {
     return res.data
   },
 
+  async getPromptChain(id: string): Promise<PromptRound[]> {
+    const res = await http.get(`/submission/${id}/prompt-chain`)
+    return res.data
+  },
+
   async delete(id: string) {
     const res = await http.delete("/submission/" + id)
     return res.data
@@ -282,6 +290,25 @@ export const Helper = {
   },
 }
 
+export const Showcase = {
+  async list(): Promise<AwardSection[]> {
+    const res = await http.get("/submission/showcase/")
+    return res.data
+  },
+
+  async getDetail(submissionId: string): Promise<ShowcaseDetail> {
+    const res = await http.get(`/submission/showcase/${submissionId}/`)
+    return res.data
+  },
+
+  async getPromptChain(submissionId: string): Promise<PromptRound[]> {
+    const res = await http.get(
+      `/submission/showcase/${submissionId}/prompt-chain/`,
+    )
+    return res.data
+  },
+}
+
 export const TaskAssets = {
   async listChallenge(display: number): Promise<TaskAsset[]> {
     return (await http.get<TaskAsset[]>(`/assets/challenge/${display}`)).data

src/components/submissions/ChainModal.vue

@@ -203,14 +203,13 @@
 import { computed, ref, watch } from "vue"
 import { NPopconfirm, NButton } from "naive-ui"
 import { Icon } from "@iconify/vue"
-import { Prompt } from "../../api"
+import { Prompt, Submission } from "../../api"
-import type { PromptMessage } from "../../utils/type"
+import type { PromptRound } from "../../utils/type"
 import { user, roleSuper } from "../../store/user"
 
 const props = defineProps<{
   show: boolean
-  userId: number
+  submissionId: string
-  taskId: number
   username?: string
 }>()
 
@@ -219,49 +218,12 @@ const canDelete = computed(() => roleSuper.value || (!!props.username && props.u
 defineEmits<{ "update:show": [value: boolean] }>()
 
 const loading = ref(false)
-const messages = ref<PromptMessage[]>([])
 const selectedRound = ref(0)
-
+type ChainRound = Omit<PromptRound, "source"> & {
-const rounds = computed(() => {
-  const result: {
-    question: string
   source: string | null
-    prompt_level: number | null
   assistantMsgId: number | null
-    html: string | null
-    css: string | null
-    js: string | null
-  }[] = []
-  for (const [i, msg] of messages.value.entries()) {
-    if (msg.role !== "user") continue
-    let html: string | null = null,
-      css: string | null = null,
-      js: string | null = null,
-      assistantMsgId: number | null = null
-    for (const reply of messages.value.slice(i + 1)) {
-      if (reply.role === "user") break
-      if (reply.role === "assistant") {
-        assistantMsgId = reply.id
-        if (reply.code_html) {
-          html = reply.code_html
-          css = reply.code_css
-          js = reply.code_js
 }
-        break
+const rounds = ref<ChainRound[]>([])
-      }
-    }
-    result.push({
-      question: msg.content,
-      source: msg.source ?? null,
-      prompt_level: msg.prompt_level ?? null,
-      assistantMsgId,
-      html,
-      css,
-      js,
-    })
-  }
-  return result
-})
 
 async function deleteRound(index: number) {
   const round = rounds.value[index]
@@ -291,24 +253,28 @@ const selectedPageHtml = computed(() => {
 })
 
 async function loadMessages() {
-  if (!props.userId || !props.taskId) return
+  if (!props.submissionId) return
   loading.value = true
-  messages.value = []
+  rounds.value = []
   selectedRound.value = 0
   try {
-    messages.value = await Prompt.getMessagesByUserTask(
+    const data = await Submission.getPromptChain(props.submissionId)
-      props.taskId,
+    rounds.value = data.map((round) => ({
-      props.userId,
+      ...round,
-    )
+      source: round.source ?? null,
+      assistantMsgId: round.assistant_msg_id ?? null,
+    }))
     const last = rounds.value.length - 1
     if (last >= 0) selectedRound.value = last
+  } catch {
+    rounds.value = []
   } finally {
     loading.value = false
   }
 }
 
 watch(
-  () => [props.show, props.userId, props.taskId] as const,
+  () => [props.show, props.submissionId] as const,
   ([visible]) => {
     if (visible) loadMessages()
   },

src/components/submissions/ExpandedSubTable.vue

@@ -36,7 +36,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   select: [id: string]
   delete: [row: SubmissionOut, parentId: string]
-  "show-chain": [userId: number, taskId: number, username: string]
+  "show-chain": [submissionId: string, username: string]
 }>()
 
 const isChallenge = computed(() => props.row.task_type === TASK_TYPE.Challenge)
@@ -91,7 +91,7 @@ const subColumns = computed((): DataTableColumn<SubmissionOut>[] => [
                   type: "primary",
                   onClick: (e: Event) => {
                     e.stopPropagation()
-                    emit("show-chain", r.userid, r.task_id, r.username)
+                    emit("show-chain", r.id, r.username)
                   },
                 },
                 () => "查看",

src/components/task/TaskPanel.vue

@@ -57,6 +57,14 @@
           </template>
           提交记录
         </n-tooltip>
+        <n-tooltip v-if="authed" trigger="hover">
+          <template #trigger>
+            <n-button text @click="$router.push({ name: 'showcase' })">
+              <Icon :width="16" icon="lucide:award"></Icon>
+            </n-button>
+          </template>
+          作品广场
+        </n-tooltip>
         <n-tooltip v-if="roleSuper" trigger="hover">
           <template #trigger>
             <n-button text @click="edit">

src/pages/Showcase.vue

@@ -0,0 +1,235 @@
+<template>
+  <main class="showcase">
+    <header class="header">
+      <div>
+        <n-h2 class="title">作品广场</n-h2>
+        <n-text depth="3">优秀作品展示</n-text>
+      </div>
+    </header>
+
+    <n-spin :show="loading">
+      <n-empty
+        v-if="!loading && awards.length === 0"
+        description="暂无展示作品"
+        class="empty"
+      />
+
+      <section
+        v-for="section in awards"
+        :key="section.id"
+        class="award-section"
+      >
+        <div class="section-header">
+          <n-h3 class="section-title">{{ section.name }}</n-h3>
+          <n-text v-if="section.description" depth="3" class="section-desc">
+            {{ section.description }}
+          </n-text>
+        </div>
+
+        <div class="card-grid">
+          <article
+            v-for="item in section.items"
+            :key="item.submission_id"
+            class="work-card"
+            @click="openDetail(item.submission_id)"
+          >
+            <div class="card-preview">
+              <iframe
+                :srcdoc="buildSrcdoc(item)"
+                sandbox="allow-scripts"
+                scrolling="no"
+                class="preview-iframe"
+              />
+              <div class="preview-overlay" />
+            </div>
+            <div class="card-info">
+              <n-flex justify="space-between" align="center" :wrap="false">
+                <n-text strong class="username">{{ item.username }}</n-text>
+                <n-flex align="center" :wrap="false" class="metric-row">
+                  <span class="metric">
+                    <Icon icon="lucide:star" :width="13" />
+                    {{ item.score.toFixed(1) }}
+                  </span>
+                  <span class="metric">
+                    <Icon icon="lucide:eye" :width="13" />
+                    {{ item.view_count }}
+                  </span>
+                </n-flex>
+              </n-flex>
+              <n-text depth="3" class="task-title">
+                {{ item.task_title }}
+              </n-text>
+            </div>
+          </article>
+        </div>
+      </section>
+    </n-spin>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue"
+import { useRouter } from "vue-router"
+import { Icon } from "@iconify/vue"
+import { Showcase } from "../api"
+import type { AwardSection, ShowcaseItem } from "../utils/type"
+
+const router = useRouter()
+const loading = ref(true)
+const awards = ref<AwardSection[]>([])
+
+function buildSrcdoc(item: ShowcaseItem): string {
+  const css = item.css ? `<style>${item.css}</style>` : ""
+  const js = item.js ? `<script>${item.js}<\/script>` : ""
+  return `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="/normalize.min.css" />${css}</head><body>${item.html ?? ""}${js}</body></html>`
+}
+
+function openDetail(id: string) {
+  router.push({ name: "showcase-detail", params: { id } })
+}
+
+async function init() {
+  try {
+    awards.value = await Showcase.list()
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(init)
+</script>
+
+<style scoped>
+.showcase {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 32px 20px 48px;
+}
+
+.header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin-bottom: 32px;
+}
+
+.title {
+  margin: 0 0 4px;
+}
+
+.empty {
+  margin-top: 72px;
+}
+
+.award-section {
+  margin-bottom: 48px;
+}
+
+.section-header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 16px;
+}
+
+.section-title {
+  margin: 0;
+}
+
+.section-desc {
+  font-size: 13px;
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 16px;
+}
+
+.work-card {
+  overflow: hidden;
+  border: 1px solid #e6e6e6;
+  border-radius: 8px;
+  background: #fff;
+  cursor: pointer;
+  transition:
+    box-shadow 0.2s ease,
+    transform 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.work-card:hover {
+  border-color: #c9dcff;
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
+  transform: translateY(-2px);
+}
+
+.card-preview {
+  position: relative;
+  height: 160px;
+  overflow: hidden;
+  background: #f7f8fa;
+}
+
+.preview-iframe {
+  width: 200%;
+  height: 200%;
+  border: none;
+  transform: scale(0.5);
+  transform-origin: top left;
+  pointer-events: none;
+}
+
+.preview-overlay {
+  position: absolute;
+  inset: 0;
+}
+
+.card-info {
+  min-height: 72px;
+  padding: 10px 12px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.username {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metric-row {
+  flex-shrink: 0;
+  gap: 8px;
+}
+
+.metric {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  color: #666;
+  font-size: 12px;
+  line-height: 1;
+}
+
+.task-title {
+  display: block;
+  margin-top: 4px;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 640px) {
+  .showcase {
+    padding: 24px 12px 36px;
+  }
+
+  .card-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

src/pages/ShowcaseDetail.vue

@@ -0,0 +1,415 @@
+<template>
+  <main v-if="detail" class="detail-layout">
+    <section class="preview-panel">
+      <div class="back-bar">
+        <n-button text @click="router.push({ name: 'showcase' })">
+          <template #icon>
+            <Icon icon="lucide:arrow-left" />
+          </template>
+          返回作品广场
+        </n-button>
+      </div>
+      <iframe ref="iframe" class="preview-iframe" sandbox="allow-scripts" />
+    </section>
+
+    <aside class="info-panel">
+      <div class="meta">
+        <n-h3 class="detail-title">{{ detail.task_title }}</n-h3>
+        <n-text depth="3">{{ detail.username }}</n-text>
+
+        <n-flex class="award-row" wrap>
+          <n-tag
+            v-for="award in detail.awards"
+            :key="award"
+            type="warning"
+            size="small"
+          >
+            {{ award }}
+          </n-tag>
+        </n-flex>
+
+        <div class="stat-row">
+          <div class="stat-item">
+            <Icon icon="lucide:star" :width="16" />
+            <span>{{ detail.score.toFixed(1) }}</span>
+          </div>
+          <div class="stat-item">
+            <Icon icon="lucide:eye" :width="16" />
+            <span>{{ detail.view_count }}</span>
+          </div>
+        </div>
+      </div>
+
+      <n-divider v-if="detail.has_prompt_chain" />
+
+      <n-collapse
+        v-if="detail.has_prompt_chain"
+        @update:expanded-names="onCollapseChange"
+      >
+        <n-collapse-item title="创作过程" name="chain">
+          <template #header-extra>
+            <n-text depth="3" class="collapse-extra">点击展开</n-text>
+          </template>
+          <n-spin :show="chainLoading">
+            <n-empty
+              v-if="!chainLoading && rounds.length === 0"
+              description="暂无记录"
+            />
+            <div v-else class="chain-layout">
+              <div class="round-list">
+                <button
+                  v-for="(round, i) in rounds"
+                  :key="i"
+                  class="round-item"
+                  :class="{ active: selectedRound === i }"
+                  type="button"
+                  @click="selectedRound = i"
+                >
+                  <span class="round-index">{{ i + 1 }}</span>
+                  <span class="round-content">
+                    <span class="round-text">{{ round.question }}</span>
+                    <span class="round-tags">
+                      <span class="tag-source">
+                        {{ round.source === "conversation" ? "对话" : "手动" }}
+                      </span>
+                      <span
+                        v-if="round.prompt_level"
+                        class="tag-level"
+                        :style="{ color: levelColors[round.prompt_level] }"
+                      >
+                        L{{ round.prompt_level }}
+                      </span>
+                    </span>
+                  </span>
+                </button>
+              </div>
+              <div class="round-preview">
+                <div class="round-preview-label">
+                  第 {{ selectedRound + 1 }} 轮效果
+                </div>
+                <iframe
+                  v-if="selectedRoundSrcdoc"
+                  :key="selectedRound"
+                  :srcdoc="selectedRoundSrcdoc"
+                  sandbox="allow-scripts"
+                  class="round-iframe"
+                />
+                <n-empty
+                  v-else
+                  description="该轮无网页代码"
+                  class="round-empty"
+                />
+              </div>
+            </div>
+          </n-spin>
+        </n-collapse-item>
+      </n-collapse>
+    </aside>
+  </main>
+
+  <div v-else-if="notFound" class="state">
+    <n-empty description="作品不存在" />
+  </div>
+
+  <div v-else class="state">
+    <n-spin />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from "vue"
+import { useRouter } from "vue-router"
+import { Icon } from "@iconify/vue"
+import { Showcase } from "../api"
+import type { PromptRound, ShowcaseDetail } from "../utils/type"
+
+const props = defineProps<{
+  id: string
+}>()
+
+const router = useRouter()
+const iframe = useTemplateRef<HTMLIFrameElement>("iframe")
+const detail = ref<ShowcaseDetail | null>(null)
+const notFound = ref(false)
+const rounds = ref<PromptRound[]>([])
+const chainLoading = ref(false)
+const selectedRound = ref(0)
+const chainLoaded = ref(false)
+
+const levelColors: Record<number, string> = {
+  1: "#888",
+  2: "#4f8f7f",
+  3: "#2f7bc1",
+  4: "#aa5f9f",
+  5: "#c48620",
+  6: "#c94f4f",
+}
+
+const selectedRoundSrcdoc = computed(() => {
+  const round = rounds.value[selectedRound.value]
+  if (!round?.html) return null
+  const style = round.css ? `<style>${round.css}</style>` : ""
+  const script = round.js ? `<script>${round.js}<\/script>` : ""
+  return `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="/normalize.min.css" />${style}</head><body>${round.html}${script}</body></html>`
+})
+
+function buildDetailHtml(d: ShowcaseDetail) {
+  const css = d.css ? `<style>${d.css}</style>` : ""
+  const js = d.js ? `<script>${d.js}<\/script>` : ""
+  return `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="/normalize.min.css" />${css}</head><body>${d.html ?? ""}${js}</body></html>`
+}
+
+function renderPreview() {
+  if (!iframe.value || !detail.value) return
+  const doc = iframe.value.contentDocument
+  if (!doc) return
+  doc.open()
+  doc.write(buildDetailHtml(detail.value))
+  doc.close()
+}
+
+async function loadChain() {
+  if (chainLoaded.value) return
+  chainLoading.value = true
+  try {
+    rounds.value = await Showcase.getPromptChain(props.id)
+    selectedRound.value = Math.max(0, rounds.value.length - 1)
+    chainLoaded.value = true
+  } finally {
+    chainLoading.value = false
+  }
+}
+
+function onCollapseChange(
+  names: string | number | Array<string | number> | null,
+) {
+  const expanded = Array.isArray(names) ? names : names == null ? [] : [names]
+  if (expanded.includes("chain")) void loadChain()
+}
+
+async function init() {
+  try {
+    detail.value = await Showcase.getDetail(props.id)
+    await nextTick()
+    renderPreview()
+  } catch {
+    notFound.value = true
+  }
+}
+
+watch(
+  () => detail.value,
+  (value) => {
+    if (value) renderPreview()
+  },
+)
+
+onMounted(init)
+</script>
+
+<style scoped>
+.detail-layout {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+  background: #fff;
+}
+
+.preview-panel {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  border-right: 1px solid #e6e6e6;
+}
+
+.back-bar {
+  flex-shrink: 0;
+  padding: 8px 12px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.preview-iframe {
+  width: 100%;
+  flex: 1;
+  border: none;
+}
+
+.info-panel {
+  width: 360px;
+  flex-shrink: 0;
+  padding: 20px 16px;
+  overflow-y: auto;
+}
+
+.meta {
+  display: flex;
+  flex-direction: column;
+}
+
+.detail-title {
+  margin: 0 0 4px;
+}
+
+.award-row {
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.stat-row {
+  display: flex;
+  gap: 18px;
+  margin-top: 14px;
+}
+
+.stat-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: #333;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.collapse-extra {
+  font-size: 12px;
+}
+
+.chain-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 12px;
+}
+
+.round-list {
+  display: flex;
+  max-height: 260px;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
+}
+
+.round-item {
+  display: flex;
+  width: 100%;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  background: #f9fafb;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.round-item.active {
+  border-color: #2080f0;
+  background: #e8f0fe;
+}
+
+.round-index {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: #9db7e8;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.round-item.active .round-index {
+  background: #2080f0;
+}
+
+.round-content {
+  min-width: 0;
+}
+
+.round-text {
+  display: block;
+  color: #333;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.round-tags {
+  display: flex;
+  gap: 5px;
+  margin-top: 5px;
+}
+
+.tag-source {
+  border-radius: 4px;
+  background: #eef1f4;
+  color: #666;
+  font-size: 10px;
+  line-height: 1.5;
+  padding: 1px 5px;
+}
+
+.tag-level {
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.round-preview {
+  display: flex;
+  min-height: 260px;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.round-preview-label {
+  color: #555;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.round-iframe {
+  min-height: 240px;
+  flex: 1;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  background: #fff;
+}
+
+.round-empty {
+  margin: auto;
+}
+
+.state {
+  display: flex;
+  min-height: 100vh;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+}
+
+@media (max-width: 760px) {
+  .detail-layout {
+    height: auto;
+    min-height: 100vh;
+    flex-direction: column;
+    overflow: visible;
+  }
+
+  .preview-panel {
+    min-height: 56vh;
+    border-right: none;
+    border-bottom: 1px solid #e6e6e6;
+  }
+
+  .info-panel {
+    width: auto;
+  }
+}
+</style>

src/pages/Submissions.vue

@@ -105,8 +105,7 @@
 
   <ChainModal
     v-model:show="chainModal"
-    :user-id="chainUserId"
+    :submission-id="chainSubmissionId"
-    :task-id="chainTaskId"
     :username="chainUsername"
   />
 </template>
@@ -159,8 +158,7 @@ const js = computed(() => submission.value.js)
 // Modal 状态
 const codeModal = ref(false)
 const chainModal = ref(false)
-const chainUserId = ref<number>(0)
+const chainSubmissionId = ref<string>("")
-const chainTaskId = ref<number>(0)
 const chainUsername = ref<string>("")
 
 // 展开行
@@ -203,9 +201,8 @@ async function clearAllFlags() {
   query.flag = null
 }
 
-function showChain(userId: number, taskId: number, username: string) {
+function showChain(submissionId: string, username: string) {
-  chainUserId.value = userId
+  chainSubmissionId.value = submissionId
-  chainTaskId.value = taskId
   chainUsername.value = username
   chainModal.value = true
 }
@@ -222,7 +219,8 @@ const columns: DataTableColumn<SubmissionOut>[] = [
         loading: expandedLoading.has(row.id),
         onSelect: (id) => getSubmissionByID(id),
         onDelete: (r, parentId) => handleDelete(r, parentId),
-        "onShow-chain": (userId, taskId, username) => showChain(userId, taskId, username),
+        "onShow-chain": (submissionId, username) =>
+          showChain(submissionId, username),
       }),
   },
   {

src/router.ts

@@ -25,6 +25,19 @@ const routes = [
     component: () => import("./pages/Submission.vue"),
     props: true,
   },
+  {
+    path: "/showcase",
+    name: "showcase",
+    component: () => import("./pages/Showcase.vue"),
+    meta: { auth: true },
+  },
+  {
+    path: "/showcase/:id",
+    name: "showcase-detail",
+    component: () => import("./pages/ShowcaseDetail.vue"),
+    props: true,
+    meta: { auth: true },
+  },
   {
     path: "/dashboard",
     name: "dashboard",
@@ -55,12 +68,10 @@ export const router = createRouter({
   routes,
 })
 
-router.beforeEach((to, from, next) => {
+router.beforeEach((to) => {
   const isLoggedIn = localStorage.getItem(STORAGE_KEY.LOGIN) === "true"
   if (to.meta.auth && !isLoggedIn) {
     loginModal.value = true
-    next(false)
+    return false
-  } else {
-    next()
   }
 })

src/utils/type.ts

@@ -160,3 +160,48 @@ export interface TaskStatsOut {
   classes: string[]
   top_viewed: TopViewedItem[]
 }
+
+export interface ShowcaseItem {
+  submission_id: string
+  username: string
+  task_title: string
+  task_display: number
+  score: number
+  view_count: number
+  html: string | null
+  css: string | null
+  js: string | null
+  has_prompt_chain: boolean
+}
+
+export interface AwardSection {
+  id: number
+  name: string
+  description: string
+  item_ordering: string
+  items: ShowcaseItem[]
+}
+
+export interface ShowcaseDetail {
+  submission_id: string
+  username: string
+  task_title: string
+  task_display: number
+  score: number
+  view_count: number
+  html: string | null
+  css: string | null
+  js: string | null
+  awards: string[]
+  has_prompt_chain: boolean
+}
+
+export interface PromptRound {
+  question: string
+  source: string
+  prompt_level: number | null
+  assistant_msg_id?: number | null
+  html: string | null
+  css: string | null
+  js: string | null
+}