fix: remove import saas

Explain Fail Well's purpose, its origins from Toyota Production System's
standardized work, and how it differs from micromanagement. Include
author attribution and footer navigation link.

pnpm-lock.yaml

@@ -122,7 +122,7 @@ importers:
         version: 1.3.0(@types/node@25.0.10)(@vitest/browser@1.3.0)(@vitest/ui@1.3.0)(jsdom@24.0.0)(sass@1.97.3)(terser@5.17.2)
       vue-tsc:
         specifier: ^3.2.3
-        version: 3.2.3(typescript@5.9.3)
+        version: 3.2.4(typescript@5.9.3)
       webdriverio:
         specifier: ^8.32.2
         version: 8.32.2(typescript@5.9.3)
@@ -881,10 +881,6 @@ packages:
     resolution: {integrity: sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  '@eslint-community/regexpp@4.5.1':
-    resolution: {integrity: sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
-
   '@eslint/eslintrc@2.1.4':
     resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -987,36 +983,42 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.6':
     resolution: {integrity: sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.6':
     resolution: {integrity: sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.6':
     resolution: {integrity: sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.6':
     resolution: {integrity: sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.6':
     resolution: {integrity: sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-win32-arm64@2.5.6':
     resolution: {integrity: sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==}
@@ -1128,26 +1130,31 @@ packages:
     resolution: {integrity: sha512-0fZBq27b+D7Ar5CQMofVN8sggOVhEtzFUwOwPppQt0k+VR+7UHMZZY4y+64WJ06XOhBTKXtQB/Sv0NwQMXyNAA==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.12.0':
     resolution: {integrity: sha512-eTvzUS3hhhlgeAv6bfigekzWZjaEX9xP9HhxB0Dvrdbkk5w/b+1Sxct2ZuDxNJKzsRStSq1EaEkVSEe7A7ipgQ==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-riscv64-gnu@4.12.0':
     resolution: {integrity: sha512-ix+qAB9qmrCRiaO71VFfY8rkiAZJL8zQRXveS27HS+pKdjwUfEhqo2+YF2oI+H/22Xsiski+qqwIBxVewLK7sw==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.12.0':
     resolution: {integrity: sha512-TenQhZVOtw/3qKOPa7d+QgkeM6xY0LtwzR8OplmyL5LrgTWIXpTQg2Q2ycBf8jm+SFW2Wt/DTn1gf7nFp3ssVA==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.12.0':
     resolution: {integrity: sha512-LfFdRhNnW0zdMvdCb5FNuWlls2WbbSridJvxOvYWgSBOYZtgBfW9UGNJG//rwMqTX1xQE9BAodvMH9tAusKDUw==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.12.0':
     resolution: {integrity: sha512-JPDxovheWNp6d7AHCgsUlkuCKvtu3RB55iNEkaQcf0ttsDU/JZF+iQnYcQJSk/7PtT4mjjVG8N1kpwnI9SLYaw==}
@@ -1391,8 +1398,8 @@ packages:
       typescript:
         optional: true
 
-  '@vue/language-core@3.2.3':
-    resolution: {integrity: sha512-VpN/GnYDzGLh44AI6i1OB/WsLXo6vwnl0EWHBelGc4TyC0yEq6azwNaed/+Tgr8anFlSdWYnMEkyHJDPe7ii7A==}
+  '@vue/language-core@3.2.4':
+    resolution: {integrity: sha512-bqBGuSG4KZM45KKTXzGtoCl9cWju5jsaBKaJJe3h5hRAAWpZUuj5G+L+eI01sPIkm4H6setKRlw7E85wLdDNew==}
 
   '@vue/reactivity@3.5.27':
     resolution: {integrity: sha512-vvorxn2KXfJ0nBEnj4GYshSgsyMNFnIQah/wczXlsNXt+ijhugmW+PpJ2cNPe4V6jpnBcs0MhCODKllWG+nvoQ==}
@@ -2217,10 +2224,6 @@ packages:
   fast-fifo@1.3.2:
     resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
 
-  fast-glob@3.2.12:
-    resolution: {integrity: sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==}
-    engines: {node: '>=8.6.0'}
-
   fast-glob@3.3.2:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
     engines: {node: '>=8.6.0'}
@@ -2402,6 +2405,7 @@ packages:
   glob@8.1.0:
     resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
     engines: {node: '>=12'}
+    deprecated: Glob versions prior to v9 are no longer supported
 
   global-directory@4.0.1:
     resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
@@ -4105,8 +4109,8 @@ packages:
     peerDependencies:
       vue: ^3.5.0
 
-  vue-tsc@3.2.3:
-    resolution: {integrity: sha512-1RdRB7rQXGFMdpo0aXf9spVzWEPGAk7PEb/ejHQwVrcuQA/HsGiixIc3uBQeqY2YjeEEgvr2ShQewBgcN4c1Cw==}
+  vue-tsc@3.2.4:
+    resolution: {integrity: sha512-xj3YCvSLNDKt1iF9OcImWHhmYcihVu9p4b9s4PGR/qp6yhW+tZJaypGxHScRyOrdnHvaOeF+YkZOdKwbgGvp5g==}
     hasBin: true
     peerDependencies:
       typescript: '>=5.0.0'
@@ -5203,8 +5207,6 @@ snapshots:
 
   '@eslint-community/regexpp@4.10.0': {}
 
-  '@eslint-community/regexpp@4.5.1': {}
-
   '@eslint/eslintrc@2.1.4':
     dependencies:
       ajv: 6.12.6
@@ -5538,7 +5540,7 @@ snapshots:
 
   '@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.9.3))(eslint@8.56.0)(typescript@5.9.3)':
     dependencies:
-      '@eslint-community/regexpp': 4.5.1
+      '@eslint-community/regexpp': 4.10.0
       '@typescript-eslint/parser': 6.21.0(eslint@8.56.0)(typescript@5.9.3)
       '@typescript-eslint/scope-manager': 6.21.0
       '@typescript-eslint/type-utils': 6.21.0(eslint@8.56.0)(typescript@5.9.3)
@@ -5620,7 +5622,7 @@ snapshots:
   '@typescript-eslint/visitor-keys@6.21.0':
     dependencies:
       '@typescript-eslint/types': 6.21.0
-      eslint-visitor-keys: 3.4.1
+      eslint-visitor-keys: 3.4.3
 
   '@ungap/structured-clone@1.2.0': {}
 
@@ -5745,7 +5747,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vue/language-core@3.2.3':
+  '@vue/language-core@3.2.4':
     dependencies:
       '@volar/language-core': 2.4.27
       '@vue/compiler-dom': 3.5.27
@@ -6746,14 +6748,6 @@ snapshots:
 
   fast-fifo@1.3.2: {}
 
-  fast-glob@3.2.12:
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.5
-
   fast-glob@3.3.2:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -7007,7 +7001,7 @@ snapshots:
     dependencies:
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.2.12
+      fast-glob: 3.3.2
       ignore: 5.2.4
       merge2: 1.4.1
       slash: 3.0.0
@@ -8667,10 +8661,10 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.27(typescript@5.9.3)
 
-  vue-tsc@3.2.3(typescript@5.9.3):
+  vue-tsc@3.2.4(typescript@5.9.3):
     dependencies:
       '@volar/typescript': 2.4.27
-      '@vue/language-core': 3.2.3
+      '@vue/language-core': 3.2.4
       typescript: 5.9.3
 
   vue@3.5.27(typescript@5.9.3):

src/App.vue

@@ -17,6 +17,8 @@ import { RouterLink, RouterView } from 'vue-router'
     </main>
 
     <footer>
+      <router-link to="/about">about</router-link>
+      <span class="separator">|</span>
       <a
         href="https://github.com/jcalixte/failwell/issues"
         target="_blank"
@@ -52,4 +54,9 @@ footer {
   text-align: right;
   font-size: 0.8rem;
 }
+
+footer .separator {
+  margin: 0 0.5rem;
+  color: #ccc;
+}
 </style>

src/assets/main.scss

@@ -1,7 +1,8 @@
 @charset "utf-8";
+@use "variables";
+@use '../../node_modules/bulma/bulma.sass';
+
 @import url('https://fonts.googleapis.com/css2?family=Oxygen+Mono&display=swap');
-@import "variables";
-@import '../../node_modules/bulma/bulma.sass';
 
 *,
 *::before,

src/modules/record/components/RecordControls.vue

@@ -183,7 +183,7 @@ onUnmounted(() => {
     <div class="column message">
       <p><kbd>s</kbd>: start record</p>
       <p><kbd>n</kbd>: next step</p>
-      <p><kbd>p</kbd>: pause</p>
+      <p><kbd>p</kbd>: pause/resume</p>
     </div>
   </div>
   <NewStepsForm

src/modules/record/components/StepRecord.vue

@@ -2,7 +2,7 @@
 import { useTaskStore } from '@/modules/task/stores/useTask.store'
 import { formatDiffInMinutes } from '@/shared/format-date'
 import { toISODate } from '@/shared/types/date'
-import { computed, onUnmounted, ref } from 'vue'
+import { computed, nextTick, onUnmounted, ref } from 'vue'
 import { useTaskRecordStore } from '../stores/useTaskRecordStore'
 import { is10PercentOffThanEstimation } from '@/modules/record/services/compare-with-estimation'
 
@@ -10,6 +10,7 @@ const props = defineProps<{
   taskId: string
   stepId: string
   stepNumber: number
+  isLastCompletedStep?: boolean
 }>()
 
 const taskStore = useTaskStore()
@@ -67,6 +68,39 @@ const isOffEstimation = computed(() => {
     duration: duration.value
   })
 })
+
+// Duration editing
+const isEditing = ref(false)
+const editedDuration = ref(0)
+const durationInputRef = ref<HTMLInputElement | null>(null)
+
+const isEditable = computed(
+  () => props.isLastCompletedStep && record.value && !record.value.end
+)
+
+function startEditing() {
+  editedDuration.value = duration.value ?? 0
+  isEditing.value = true
+  nextTick(() => {
+    durationInputRef.value?.focus()
+    durationInputRef.value?.select()
+  })
+}
+
+function confirmEdit() {
+  if (editedDuration.value >= 1) {
+    recordStore.updateStepDuration({
+      taskId: props.taskId,
+      stepId: props.stepId,
+      newDurationMinutes: editedDuration.value
+    })
+  }
+  isEditing.value = false
+}
+
+function cancelEdit() {
+  isEditing.value = false
+}
 </script>
 
 <template>
@@ -96,14 +130,41 @@ const isOffEstimation = computed(() => {
       {{ step.title }}
     </td>
     <td class="estimation minutes">{{ step.estimation }} min</td>
-    <td class="minutes" v-if="stepRecord">{{ duration }} min</td>
+    <td class="minutes" v-if="stepRecord">
+      <template v-if="isEditing">
+        <input
+          ref="durationInputRef"
+          type="number"
+          min="1"
+          v-model.number="editedDuration"
+          @blur="confirmEdit"
+          @keydown.enter="confirmEdit"
+          @keydown.escape="cancelEdit"
+          class="input is-small duration-input"
+        />
+        min
+      </template>
+      <span
+        v-else
+        :class="{ 'is-editable': isEditable }"
+        @click="isEditable && startEditing()"
+      >
+        {{ duration }} min
+      </span>
+    </td>
     <td v-else></td>
   </tr>
 </template>
 
 <style scoped lang="scss">
-@import '@/assets/variables';
+$family-monospace: 'Oxygen Mono', monospace;
 
+$family-primary: $family-monospace;
+$primary: #192a56;
+$info: #40739e;
+$link: #2f3640;
+$danger: #c23616;
+$warning: #fbc531;
 $blob-size: 15px;
 $blob-color: $link;
 
@@ -145,6 +206,19 @@ $blob-color: $link;
   .minutes {
     text-align: right;
   }
+
+  .is-editable {
+    cursor: pointer;
+    text-decoration: underline dotted;
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+
+  .duration-input {
+    width: 60px;
+    display: inline-block;
+  }
 }
 
 @keyframes pulse {

src/modules/record/components/TaskRecord.vue

@@ -32,6 +32,16 @@ useAppTitle(task.value?.title ?? '')
 
 const record = computed(() => recordStore.getTaskRecord(props.taskId))
 const recordNotes = computed(() => recordStore.getRecordNotes(props.taskId))
+
+const lastCompletedStepId = computed(() => {
+  if (!record.value || !task.value || !record.value.currentStepId) return null
+
+  const currentIndex = task.value.steps.findIndex(
+    (s) => s.id === record.value?.currentStepId
+  )
+
+  return currentIndex > 0 ? task.value.steps[currentIndex - 1].id : null
+})
 </script>
 
 <template>
@@ -65,6 +75,7 @@ const recordNotes = computed(() => recordStore.getRecordNotes(props.taskId))
           :key="step.id"
           :step-id="step.id"
           :step-number="key + 1"
+          :is-last-completed-step="step.id === lastCompletedStepId"
         />
       </tbody>
     </table>

src/modules/record/stores/useTaskRecordStore.ts

@@ -5,6 +5,7 @@ import type { Recordable } from '../interfaces/recordable'
 import type { TimeRange } from '../interfaces/time-range'
 import { TaskRecord } from '../models/task-record'
 import { addBreakTimeToStepRecords } from '../services/breaktime-service'
+import { isTimeSpeedUp } from '@/shared/format-date'
 
 export interface TaskRecordStoreState {
   records: { [recordId: string]: Recordable }
@@ -221,6 +222,51 @@ export const useTaskRecordStore = defineStore('task-record-store', {
           start: toISODate(new Date(latestStartDate))
         })
       }
+    },
+    updateStepDuration(params: {
+      taskId: string
+      stepId: string
+      newDurationMinutes: number
+    }) {
+      const record = this.records[params.taskId]
+      if (!record) return
+
+      const stepRecord = record.stepRecords[params.stepId]
+      if (!stepRecord?.end) return // Only completed steps
+
+      // Calculate new end time (in dev mode, units are seconds for faster testing)
+      const unitMultiplier = isTimeSpeedUp() ? 1 : 60
+      const startMs = new Date(stepRecord.start).getTime()
+      const newEndMs =
+        startMs + params.newDurationMinutes * unitMultiplier * 1000
+      const newEnd = toISODate(new Date(newEndMs))
+
+      // Build updated step records
+      const updatedStepRecords = { ...record.stepRecords }
+      updatedStepRecords[params.stepId] = {
+        ...stepRecord,
+        end: newEnd
+      }
+
+      // Adjust current step's start time for continuity, but only if new end is in the past
+      const currentStepId = record.currentStepId
+      const isNewEndInPast = newEndMs <= Date.now()
+      if (currentStepId && updatedStepRecords[currentStepId] && isNewEndInPast) {
+        updatedStepRecords[currentStepId] = {
+          ...updatedStepRecords[currentStepId],
+          start: newEnd
+        }
+      }
+
+      this.$patch({
+        records: {
+          ...this.records,
+          [params.taskId]: {
+            ...record,
+            stepRecords: updatedStepRecords
+          }
+        }
+      })
     }
   },
   getters: {

src/shared/format-date.ts

@@ -1,6 +1,6 @@
 import type { ISODate } from './types/date'
 
-const isTimeSpeedUp = () => process.env.NODE_ENV === 'development'
+export const isTimeSpeedUp = () => process.env.NODE_ENV === 'development'
 
 export const formatDate = (date: Date | string) =>
   new Date(date).toLocaleString()

src/views/AboutView.vue

@@ -1,15 +1,215 @@
 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
+  <div class="about container">
+    <div class="content">
+      <h1 class="title is-2">About Fail Well</h1>
+
+      <section class="section-block">
+        <h2 class="title is-4">What is Fail Well?</h2>
+        <p>
+          Fail Well is a tool designed to help developers and knowledge workers
+          understand the gap between their expectations and reality. When you
+          plan a task, you estimate how long each step will take. When you
+          execute it, you discover how long it actually takes. The difference
+          between the two is where learning happens.
+        </p>
+        <p>
+          This is not about being perfect. It's about being honest with
+          yourself, understanding your work better, and continuously improving
+          your ability to plan and execute.
+        </p>
+      </section>
+
+      <section class="section-block">
+        <h2 class="title is-4">Origins: Toyota Production System</h2>
+        <p>
+          Fail Well draws inspiration from
+          <strong
+            ><a
+              href="https://www.lean.org/lexicon-terms/standardized-work/"
+              target="_blank"
+              rel="noopener noreferrer"
+              >Standardized Work</a
+            ></strong
+          >, a core principle of the Toyota Production System (<a
+            href="https://thinking-people-system.house/"
+            target="_blank"
+            rel="noopener noreferrer"
+            >TPS</a
+          >). In manufacturing, standardized work means documenting the
+          best-known way to perform a task, including the expected time for each
+          step.
+        </p>
+        <p>
+          When reality differs from the standard, it reveals an opportunity:
+          either the process can be improved, or the standard needs updating.
+          This continuous feedback loop is at the heart of
+          <strong
+            ><a
+              href="https://www.lean.org/lexicon-terms/kaizen/"
+              target="_blank"
+              rel="noopener noreferrer"
+              >Kaizen</a
+            ></strong
+          >.
+        </p>
+        <p>
+          Fail Well brings this philosophy to knowledge work. By tracking your
+          planned steps and estimated times against actual execution, you create
+          your own feedback loop for improvement.
+        </p>
+      </section>
+
+      <section class="section-block">
+        <h2 class="title is-4">Understanding the Gap</h2>
+        <p>
+          We often misjudge how long tasks will take. Sometimes we
+          underestimate, sometimes we overestimate. The reasons vary:
+        </p>
+        <ul>
+          <li>Unexpected complexity or dependencies</li>
+          <li>Interruptions and context switching</li>
+          <li>Overconfidence or unfamiliarity with the problem</li>
+          <li>Missing prerequisites or unclear requirements</li>
+        </ul>
+        <p>
+          By systematically recording these gaps, patterns emerge. You start to
+          recognize which types of tasks you consistently misjudge and why. This
+          self-awareness is the foundation of better planning and execution.
+        </p>
+      </section>
+
+      <section class="section-block">
+        <h2 class="title is-4">A Tool for Critical Thinking</h2>
+        <p>
+          Fail Well encourages you to reflect on your own work. After completing
+          a task, you can review the history and ask yourself:
+        </p>
+        <ul>
+          <li>Why did this step take longer than expected?</li>
+          <li>What assumption was wrong?</li>
+          <li>What would I do differently next time?</li>
+          <li>Should I break this step into smaller parts?</li>
+        </ul>
+        <p>
+          This reflective practice transforms routine work into a learning
+          opportunity. Over time, you develop better intuition for estimating
+          and a clearer understanding of your own working patterns.
+        </p>
+      </section>
+
+      <section class="section-block">
+        <h2 class="title is-4">This is Not Micromanagement</h2>
+        <p>Let's be clear about what Fail Well is <strong>not</strong>.</p>
+        <p>
+          <strong>Micromanagement</strong> is when someone else tracks your
+          time, judges your performance, and uses that data against you. It
+          creates pressure, reduces autonomy, and often leads to gaming the
+          system rather than genuine improvement.
+        </p>
+        <p>
+          <strong>Fail Well is the opposite.</strong> It's a personal tool for
+          self-reflection. You control the data. You decide what to track and
+          what to learn from it. There's no external judgment, no performance
+          review, no one looking over your shoulder.
+        </p>
+        <p>
+          The goal is to understand your work better, make more realistic plans,
+          and reduce the frustration that comes from consistently missing
+          estimates.
+        </p>
+        <p>
+          When you track your own work for your own benefit, you're practicing
+          <strong>self-management</strong>, not submitting to micromanagement.
+        </p>
+        <p>
+          That's why Fail Well is local only, your data is not in the cloud. And
+          you decide to share records.
+        </p>
+      </section>
+
+      <section class="section-block">
+        <h2 class="title is-4">Getting Started</h2>
+        <p>Using Fail Well is simple:</p>
+        <ol>
+          <li>
+            <strong>Create a task</strong> with a list of steps and time
+            estimates (in minutes)
+          </li>
+          <li>
+            <strong>Record your execution</strong> by starting the timer and
+            marking steps as you complete them
+          </li>
+          <li>
+            <strong>Review the results</strong> to see where your estimates were
+            accurate and where they diverged
+          </li>
+          <li>
+            <strong>Duplicate and iterate</strong> on similar tasks to track
+            your improvement over time
+          </li>
+        </ol>
+        <p>
+          Start with small, well-defined tasks. As you get comfortable with the
+          process, you can apply it to larger projects by breaking them into
+          smaller pieces.
+        </p>
+      </section>
+
+      <section class="section-block author-section">
+        <h2 class="title is-4">Author</h2>
+        <p>
+          Fail Well was created by
+          <a
+            href="https://juliencalixte.eu"
+            target="_blank"
+            rel="noopener noreferrer"
+            >Julien Calixte</a
+          >.
+        </p>
+      </section>
+
+      <div class="back-link">
+        <router-link :to="{ name: 'home' }" class="button is-light">
+          Back to Home
+        </router-link>
+      </div>
+    </div>
   </div>
 </template>
 
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
+<style scoped>
+.about {
+  padding: 2rem 1rem;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.section-block {
+  margin-bottom: 2rem;
+}
+
+.section-block p {
+  margin-bottom: 1rem;
+  line-height: 1.7;
+}
+
+.section-block ul,
+.section-block ol {
+  margin-bottom: 1rem;
+  margin-left: 1.5rem;
+}
+
+.section-block li {
+  margin-bottom: 0.5rem;
+}
+
+.author-section {
+  padding-top: 1rem;
+  border-top: 1px solid #e0e0e0;
+}
+
+.back-link {
+  margin-top: 2rem;
+  text-align: center;
 }
 </style>

src/views/HomeView.vue

@@ -26,8 +26,11 @@ const extractTitleFromPaste = (
   return { title: null, content: text }
 }
 
-const handlePaste = (event: ClipboardEvent) => {
-  const clipboardText = event.clipboardData?.getData('text')
+const handlePaste = async (event?: ClipboardEvent) => {
+  const clipboardText = event
+    ? event.clipboardData?.getData('text')
+    : await navigator.clipboard.readText()
+
   if (!clipboardText) {
     return
   }
@@ -60,6 +63,17 @@ onUnmounted(() => {
   <main>
     <div class="content-tasks columns is-centered is-vcentered">
       <div class="new-task-container column">
+        <section v-if="!hasTask" class="description-hint">
+          <h1 class="title is-3">Welcome to Fail Well</h1>
+          <p class="subtitle is-6">Track your feedback loops during tasks.</p>
+          <div class="content">
+            <p>
+              Plan your steps with time estimates, then record how long they
+              actually take. Compare planned vs actual to better understand what
+              went wrong and what can be improved.
+            </p>
+          </div>
+        </section>
         <div class="buttons">
           <router-link :to="{ name: 'new-task' }" class="button is-primary">
             new task
@@ -71,10 +85,11 @@ onUnmounted(() => {
         <section class="message is-info paste-hint">
           <div class="message-body">
             Paste a list of items to directly create a new task
+            <button @click="handlePaste()" class="button is-info">Paste</button>
           </div>
         </section>
       </div>
-      <task-list class="column task-list" />
+      <task-list v-if="hasTask" class="column task-list" />
     </div>
     <!--
     <footer>
@@ -116,6 +131,15 @@ main {
   text-align: center;
 }
 
+.description-hint {
+  margin: 2rem 1rem;
+  padding: 1.5rem;
+  text-align: center;
+  background-color: #f5f5f5;
+  border-radius: 0.5rem;
+  max-width: 400px;
+}
+
 .task-list {
   max-height: 60vh;
   overflow-y: auto;