From c90f975290f97f88980f86f89fac949127aaa56e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 2 Jan 2026 05:50:12 +0000
Subject: [PATCH 1/3] Initial plan


From 2e3e6d20d1eb12e0fd10409e06f4cfcb4c3a4a4d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 2 Jan 2026 05:56:30 +0000
Subject: [PATCH 2/3] Extract GettingStartedCard component from Session.vue

Co-authored-by: Seeeeeyo <43852124+Seeeeeyo@users.noreply.github.com>
---
 src/components/pages/Session.vue         |  92 +++----------------
 src/components/ui/GettingStartedCard.vue | 110 +++++++++++++++++++++++
 2 files changed, 120 insertions(+), 82 deletions(-)
 create mode 100644 src/components/ui/GettingStartedCard.vue

diff --git a/src/components/pages/Session.vue b/src/components/pages/Session.vue
index b0008fd..62f09a1 100644
--- a/src/components/pages/Session.vue
+++ b/src/components/pages/Session.vue
@@ -286,87 +286,10 @@
   
   
             <!-- Getting Started Section (shown when no files are loaded) -->
-            <div v-if="animations.length === 0 && smplSequences.length === 0 && !converting && Object.keys(markersDatasets).length === 0" class="getting-started-section mb-4">
-              <v-card dark class="pa-4" style="background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1);">
-                <div class="d-flex align-center mb-3">
-                  <v-icon color="primary" class="mr-2">mdi-information-outline</v-icon>
-                  <h3 class="text-subtitle-1">Getting Started</h3>
-                </div>
-  
-                <div class="text-caption mb-3">
-                  <strong>Import Methods:</strong>
-                </div>
-  
-                <div class="mb-3">
-                  <v-btn
-                    color="primary"
-                    small
-                    outlined
-                    block
-                    @click="showSampleSelectionDialog = true"
-                    class="mb-2"
-                  >
-                    <v-icon left small>mdi-play-circle</v-icon>
-                    Try Sample Data
-                  </v-btn>
-                  <div class="text-caption grey--text mb-3">
-                    Explore with pre-loaded motion capture data
-                  </div>
-  
-                </div>
-  
-                <v-divider class="my-3" style="opacity: 0.3;"></v-divider>
-  
-                <div class="text-caption mb-2">
-                  <strong>Workflow Options:</strong>
-                </div>
-  
-                <div class="workflow-steps text-caption">
-                  <div class="step-item mb-2">
-                    <div class="d-flex align-center">
-                      <v-icon x-small color="orange" class="mr-2">mdi-numeric-1-circle</v-icon>
-                      <span class="font-weight-medium">OpenSim Files</span>
-                    </div>
-                    <div class="ml-5 grey--text">
-                      Upload .osim model + .mot motion files
-                    </div>
-                  </div>
-  
-                  <div class="step-item mb-2">
-                    <div class="d-flex align-center">
-                      <v-icon x-small color="indigo" class="mr-2">mdi-numeric-2-circle</v-icon>
-                      <span class="font-weight-medium">Motion Data</span>
-                    </div>
-                    <div class="ml-5 grey--text">
-                      Load .json files or .trc marker files
-                    </div>
-                  </div>
-  
-                  <div class="step-item mb-2">
-                    <div class="d-flex align-center">
-                      <v-icon x-small color="green" class="mr-2">mdi-numeric-3-circle</v-icon>
-                      <span class="font-weight-medium">Enhance</span>
-                    </div>
-                    <div class="ml-5 grey--text">
-                      Add forces (.mot), video, or 3D models
-                    </div>
-                  </div>
-                </div>
-  
-                <v-divider class="my-3" style="opacity: 0.3;"></v-divider>
-  
-                <div class="text-caption mb-2">
-                  <strong>Tips:</strong>
-                </div>
-                <ul class="text-caption grey--text pl-4 mb-0">
-                  <li class="mb-1">Drag & drop files directly into the viewer (.json, .trc, .osim, .mot)</li>
-                  <li class="mb-1">Use Import button for batch uploads</li>
-                  <li class="mb-1">Multiple subjects can be loaded together</li>
-                  <li class="mb-1">.trc files can be loaded independently</li>
-                  <li class="mb-1">.mot force files are automatically detected and positioned at feet</li>
-                </ul>
-              </v-card>
-            </div>
+            <GettingStartedCard
+              :show="showGettingStarted"
+              @show-sample-selection="showSampleSelectionDialog = true"
+            />
   
             <!-- Legend -->
             <div class="legend flex-grow-1 mb-4">
@@ -3434,6 +3357,7 @@
   import VideoNavigation from '@/components/ui/VideoNavigation'
   import SpeedControl from '@/components/ui/SpeedControl'
   import CameraControls from '@/components/ui/CameraControls' // Added import
+  import GettingStartedCard from '@/components/ui/GettingStartedCard'
   import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
   import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
   import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'
@@ -3500,7 +3424,8 @@
       components: {
           VideoNavigation,
           SpeedControl,
-          CameraControls // Register component
+          CameraControls, // Register component
+          GettingStartedCard
       },
       data() {
           return {
@@ -3807,6 +3732,9 @@
           }
       },
               computed: {
+        showGettingStarted() {
+          return this.animations.length === 0 && this.smplSequences.length === 0 && !this.converting && Object.keys(this.markersDatasets).length === 0;
+        },
         videoControlsDisabled() {
           return (!this.trial && this.markerSpheres.length === 0) || this.frames.length === 0
         },
diff --git a/src/components/ui/GettingStartedCard.vue b/src/components/ui/GettingStartedCard.vue
new file mode 100644
index 0000000..0012926
--- /dev/null
+++ b/src/components/ui/GettingStartedCard.vue
@@ -0,0 +1,110 @@
+<template>
+  <div v-if="show" class="getting-started-section mb-4">
+    <v-card dark class="pa-4" style="background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1);">
+      <div class="d-flex align-center mb-3">
+        <v-icon color="primary" class="mr-2">mdi-information-outline</v-icon>
+        <h3 class="text-subtitle-1">Getting Started</h3>
+      </div>
+
+      <div class="text-caption mb-3">
+        <strong>Import Methods:</strong>
+      </div>
+
+      <div class="mb-3">
+        <v-btn
+          color="primary"
+          small
+          outlined
+          block
+          @click="$emit('show-sample-selection')"
+          class="mb-2"
+        >
+          <v-icon left small>mdi-play-circle</v-icon>
+          Try Sample Data
+        </v-btn>
+        <div class="text-caption grey--text mb-3">
+          Explore with pre-loaded motion capture data
+        </div>
+
+      </div>
+
+      <v-divider class="my-3" style="opacity: 0.3;"></v-divider>
+
+      <div class="text-caption mb-2">
+        <strong>Workflow Options:</strong>
+      </div>
+
+      <div class="workflow-steps text-caption">
+        <div class="step-item mb-2">
+          <div class="d-flex align-center">
+            <v-icon x-small color="orange" class="mr-2">mdi-numeric-1-circle</v-icon>
+            <span class="font-weight-medium">OpenSim Files</span>
+          </div>
+          <div class="ml-5 grey--text">
+            Upload .osim model + .mot motion files
+          </div>
+        </div>
+
+        <div class="step-item mb-2">
+          <div class="d-flex align-center">
+            <v-icon x-small color="indigo" class="mr-2">mdi-numeric-2-circle</v-icon>
+            <span class="font-weight-medium">Motion Data</span>
+          </div>
+          <div class="ml-5 grey--text">
+            Load .json files or .trc marker files
+          </div>
+        </div>
+
+        <div class="step-item mb-2">
+          <div class="d-flex align-center">
+            <v-icon x-small color="green" class="mr-2">mdi-numeric-3-circle</v-icon>
+            <span class="font-weight-medium">Enhance</span>
+          </div>
+          <div class="ml-5 grey--text">
+            Add forces (.mot), video, or 3D models
+          </div>
+        </div>
+      </div>
+
+      <v-divider class="my-3" style="opacity: 0.3;"></v-divider>
+
+      <div class="text-caption mb-2">
+        <strong>Tips:</strong>
+      </div>
+      <ul class="text-caption grey--text pl-4 mb-0">
+        <li class="mb-1">Drag & drop files directly into the viewer (.json, .trc, .osim, .mot)</li>
+        <li class="mb-1">Use Import button for batch uploads</li>
+        <li class="mb-1">Multiple subjects can be loaded together</li>
+        <li class="mb-1">.trc files can be loaded independently</li>
+        <li class="mb-1">.mot force files are automatically detected and positioned at feet</li>
+      </ul>
+    </v-card>
+  </div>
+</template>
+
+<script>
+/**
+ * GettingStartedCard Component
+ * 
+ * Displays introductory information and guidance when no files are loaded in the visualizer.
+ * Shows import methods, workflow options, and helpful tips for getting started.
+ * 
+ * @emits show-sample-selection - Emitted when the "Try Sample Data" button is clicked
+ */
+export default {
+  name: 'GettingStartedCard',
+  props: {
+    /**
+     * Controls whether the getting started card should be displayed
+     */
+    show: {
+      type: Boolean,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* Component-specific styles can be added here if needed */
+</style>

From 5c4ebfd102267047a435025657f57403481d9ca8 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 2 Jan 2026 06:00:24 +0000
Subject: [PATCH 3/3] Remove empty style block from GettingStartedCard
 component

Co-authored-by: Seeeeeyo <43852124+Seeeeeyo@users.noreply.github.com>
---
 src/components/ui/GettingStartedCard.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/ui/GettingStartedCard.vue b/src/components/ui/GettingStartedCard.vue
index 0012926..969d0c7 100644
--- a/src/components/ui/GettingStartedCard.vue
+++ b/src/components/ui/GettingStartedCard.vue
@@ -104,7 +104,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-/* Component-specific styles can be added here if needed */
-</style>