diff --git a/src/App.vue b/src/App.vue
index 92ede46..a1c288b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,19 +1,39 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useMacroplan } from './composables/useMacroplan'
+import PlanEditor from './components/PlanEditor.vue'
+import MacroplanGrid from './components/MacroplanGrid.vue'
+
+const { source, plan, error, resetToSample } = useMacroplan()
+</script>
 
 <template>
-  <main class="font-sans min-h-screen bg-base-200 flex items-center justify-center p-4">
-    <div class="card w-full max-w-md bg-base-100 shadow-xl">
-      <div class="card-body items-center text-center gap-3">
-        <img src="/favicon.svg" alt="" class="size-12" />
-        <h1 class="card-title text-3xl">Macroplan</h1>
-        <p class="text-base-content/70">
-          A week-granular, learning-oriented view of the features a team has
-          committed to deliver.
+  <div class="flex h-screen flex-col bg-base-200 font-sans text-base-content">
+    <header class="navbar min-h-0 gap-2 border-b border-base-300 bg-base-100 px-4 py-2">
+      <img src="/favicon.svg" alt="" class="size-6" />
+      <div class="flex-1">
+        <h1 class="text-lg font-semibold leading-tight">Macroplan</h1>
+        <p class="text-xs text-base-content/60 leading-tight">
+          A week-granular, learning-oriented record of what we committed to deliver.
         </p>
-        <div class="card-actions mt-2">
-          <button class="btn btn-primary">Get started</button>
-        </div>
       </div>
-    </div>
-  </main>
+      <button class="btn btn-ghost btn-sm" @click="resetToSample">Reset to sample</button>
+    </header>
+
+    <main class="flex min-h-0 flex-1 flex-col md:flex-row">
+      <section
+        class="flex min-h-0 flex-col border-base-300 max-md:h-2/5 max-md:border-b md:w-2/5 md:max-w-xl md:border-r"
+      >
+        <div class="px-4 py-2 text-xs font-semibold uppercase tracking-wide text-base-content/50">
+          Source (TOML)
+        </div>
+        <PlanEditor v-model="source" :error="error" class="min-h-0 flex-1" />
+      </section>
+
+      <section class="min-h-0 flex-1 overflow-auto p-4">
+        <h2 v-if="plan" class="mb-3 text-sm font-semibold text-base-content/70">{{ plan.title }}</h2>
+        <MacroplanGrid v-if="plan" :plan="plan" />
+        <p v-else class="text-sm text-base-content/60">Nothing to render yet — fix the source on the left.</p>
+      </section>
+    </main>
+  </div>
 </template>
diff --git a/src/components/MacroplanGrid.vue b/src/components/MacroplanGrid.vue
new file mode 100644
index 0000000..e65959e
--- /dev/null
+++ b/src/components/MacroplanGrid.vue
@@ -0,0 +1,341 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Plan, FeatureRow, MarkerKind } from '../model/types'
+import { weekLabel, type WeekId } from '../model/week'
+
+const props = defineProps<{ plan: Plan }>()
+
+type Tone = 'success' | 'warning' | 'error' | 'neutral'
+
+const GLYPH: Record<MarkerKind, string> = {
+  original: '◯',
+  reestimate: '△',
+  'delivered-on-time': '◉',
+  'delivered-late': '▲',
+}
+const MARKER_CLASS: Record<MarkerKind, string> = {
+  original: 'text-base-content/50',
+  reestimate: 'text-warning',
+  'delivered-on-time': 'text-success',
+  'delivered-late': 'text-error',
+}
+// When two markers land on the same week, the higher rank owns the cell.
+const RANK: Record<MarkerKind, number> = {
+  'delivered-late': 3,
+  'delivered-on-time': 3,
+  reestimate: 2,
+  original: 1,
+}
+const TONE_TEXT: Record<Tone, string> = {
+  success: 'text-success',
+  warning: 'text-warning',
+  error: 'text-error',
+  neutral: 'text-primary',
+}
+const TONE_BORDER: Record<Tone, string> = {
+  success: 'border-success',
+  warning: 'border-warning',
+  error: 'border-error',
+  neutral: 'border-primary',
+}
+const TONE_DOT: Record<Tone, string> = {
+  success: 'bg-success',
+  warning: 'bg-warning',
+  error: 'bg-error',
+  neutral: 'bg-base-300',
+}
+
+const weeks = computed(() => props.plan.weeks)
+
+const gridStyle = computed(() => ({
+  gridTemplateColumns: `minmax(7rem, max-content) repeat(${weeks.value.length}, var(--wk)) minmax(9rem, 1fr)`,
+}))
+
+function tone(row: FeatureRow): Tone {
+  if (row.delivered) return row.onTime ? 'success' : 'error'
+  if (row.status === 'green') return 'success'
+  if (row.status === 'orange') return 'warning'
+  if (row.status === 'red') return 'error'
+  return 'neutral'
+}
+
+function statusWord(row: FeatureRow): string {
+  return row.status === 'green'
+    ? 'on track'
+    : row.status === 'orange'
+      ? 'at risk'
+      : row.status === 'red'
+        ? 'blocked'
+        : 'in flight'
+}
+
+function markerAt(row: FeatureRow, w: WeekId): MarkerKind | null {
+  let best: MarkerKind | null = null
+  for (const m of row.markers) {
+    if (m.week === w && (best === null || RANK[m.kind] > RANK[best])) best = m.kind
+  }
+  return best
+}
+
+interface Cell {
+  inBar: boolean
+  isStart: boolean
+  glyph: string
+  glyphCls: string
+}
+
+// rows × weeks render matrix, computed once.
+const matrix = computed<Cell[][]>(() =>
+  props.plan.rows.map((row) =>
+    weeks.value.map((w) => {
+      const m = markerAt(row, w)
+      const inBar = w >= row.startWeek && w <= row.barEndWeek
+      return {
+        inBar,
+        isStart: inBar && w === row.startWeek,
+        glyph: m ? GLYPH[m] : '',
+        glyphCls: m ? MARKER_CLASS[m] : '',
+      }
+    }),
+  ),
+)
+
+// Per-week column metadata for headers + the now / milestone vertical rules.
+const cols = computed(() =>
+  weeks.value.map((w) => ({
+    w,
+    label: weekLabel(w),
+    isNow: props.plan.nowInRange && w === props.plan.nowWeek,
+    milestones: props.plan.milestones.filter((m) => m.week === w),
+  })),
+)
+
+function colClass(i: number): string {
+  const c = cols.value[i]
+  if (c.isNow) return 'col-now'
+  if (c.milestones.length) return 'col-ms'
+  return ''
+}
+
+function milestoneTitle(ms: Plan['milestones']): string {
+  return ms
+    .map((m) => (m.unmet.length ? `${m.name} — unmet: ${m.unmet.join(', ')}` : `${m.name} — all met`))
+    .join(' · ')
+}
+</script>
+
+<template>
+  <div class="overflow-auto rounded-box border border-base-300 bg-base-100">
+    <div class="plan-grid" :style="gridStyle">
+      <!-- header row -->
+      <div class="hcell corner">{{ plan.title }}</div>
+      <div
+        v-for="(c, ci) in cols"
+        :key="'h-' + c.w"
+        class="hcell wkhead"
+        :class="[colClass(ci), { 'now-head': c.isNow }]"
+      >
+        <span class="wklabel">{{ c.label }}</span>
+        <span v-if="c.isNow" class="badge-now">now</span>
+        <span
+          v-else-if="c.milestones.length"
+          class="badge-ms"
+          :title="milestoneTitle(c.milestones)"
+        >◆ {{ c.milestones[0].name
+          }}<span v-if="c.milestones.some((m) => m.unmet.length)" class="text-error"> !</span></span>
+      </div>
+      <div class="hcell learnhead">Learning / Status</div>
+
+      <!-- feature rows -->
+      <template v-for="(row, ri) in plan.rows" :key="row.name">
+        <div class="namecell border-l-4" :class="TONE_BORDER[tone(row)]">
+          <span class="truncate">{{ row.name }}</span>
+        </div>
+        <div
+          v-for="(cell, ci) in matrix[ri]"
+          :key="row.name + '-' + ci"
+          class="cell"
+          :class="colClass(ci)"
+        >
+          <i v-if="cell.inBar" class="bar" :class="TONE_TEXT[tone(row)]"></i>
+          <i v-if="cell.isStart" class="riser" :class="TONE_TEXT[tone(row)]"></i>
+          <span v-if="cell.glyph" class="glyph" :class="cell.glyphCls">{{ cell.glyph }}</span>
+        </div>
+        <div class="learncell">
+          <template v-if="row.delivered">
+            <span v-if="row.learning" class="note">{{ row.learning }}</span>
+            <span v-else class="muted">{{ row.onTime ? 'delivered on time' : 'delivered late' }}</span>
+          </template>
+          <template v-else>
+            <span class="dot" :class="TONE_DOT[tone(row)]"></span>
+            <span class="note" :title="row.note || ''">{{ row.note || statusWord(row) }}</span>
+          </template>
+        </div>
+      </template>
+    </div>
+  </div>
+
+  <!-- legend -->
+  <div class="legend">
+    <span><b class="text-base-content/50">◯</b> original estimate</span>
+    <span><b class="text-warning">△</b> re-estimate (slip)</span>
+    <span><b class="text-success">◉</b> on time</span>
+    <span><b class="text-error">▲</b> late</span>
+    <span><b>┣━</b> feature bar</span>
+    <span><b class="text-error">◆</b> milestone</span>
+    <span>vertical rule = now</span>
+  </div>
+</template>
+
+<style scoped>
+.plan-grid {
+  --wk: 2.5rem;
+  display: grid;
+  width: max-content;
+  min-width: 100%;
+  font-variant-ligatures: none;
+}
+
+.hcell {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  background: var(--color-base-200);
+  border-bottom: 1px solid var(--color-base-300);
+  padding: 0.4rem 0.5rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.corner {
+  left: 0;
+  z-index: 30;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.wkhead {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  line-height: 1.15;
+}
+.wklabel {
+  font-variant-numeric: tabular-nums;
+}
+.now-head {
+  color: var(--color-primary);
+}
+.badge-now {
+  font-size: 0.58rem;
+  font-weight: 700;
+  color: var(--color-primary);
+}
+.badge-ms {
+  font-size: 0.58rem;
+  font-weight: 600;
+  max-width: 6rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.learnhead {
+  text-align: left;
+}
+
+.namecell {
+  position: sticky;
+  left: 0;
+  z-index: 10;
+  background: var(--color-base-100);
+  display: flex;
+  align-items: center;
+  min-height: 2rem;
+  padding: 0 0.6rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  border-bottom: 1px solid var(--color-base-200);
+}
+.namecell .truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2rem;
+  border-bottom: 1px solid var(--color-base-200);
+}
+.bar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 2px;
+  transform: translateY(-50%);
+  background: currentColor;
+  opacity: 0.55;
+}
+.riser {
+  position: absolute;
+  left: 0;
+  top: 28%;
+  bottom: 28%;
+  width: 2px;
+  background: currentColor;
+  opacity: 0.55;
+}
+.glyph {
+  position: relative;
+  z-index: 1;
+  font-size: 0.95rem;
+  line-height: 1;
+}
+
+.learncell {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  min-height: 2rem;
+  padding: 0 0.6rem;
+  font-size: 0.72rem;
+  border-bottom: 1px solid var(--color-base-200);
+}
+.learncell .muted {
+  opacity: 0.5;
+}
+.learncell .note {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  opacity: 0.8;
+}
+.dot {
+  width: 0.6rem;
+  height: 0.6rem;
+  border-radius: 9999px;
+  flex: none;
+}
+
+.col-now {
+  border-left: 2px solid var(--color-primary);
+}
+.col-ms {
+  border-left: 2px dashed color-mix(in oklch, var(--color-base-content) 35%, transparent);
+}
+
+.legend {
+  margin-top: 0.75rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1.25rem;
+  font-size: 0.72rem;
+  opacity: 0.85;
+}
+.legend b {
+  font-weight: 700;
+}
+</style>
diff --git a/src/components/PlanEditor.vue b/src/components/PlanEditor.vue
new file mode 100644
index 0000000..e12b839
--- /dev/null
+++ b/src/components/PlanEditor.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+defineProps<{ modelValue: string; error: string | null }>()
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+
+function onInput(e: Event) {
+  emit('update:modelValue', (e.target as HTMLTextAreaElement).value)
+}
+</script>
+
+<template>
+  <div class="editor">
+    <textarea
+      class="editor-area"
+      :value="modelValue"
+      spellcheck="false"
+      autocapitalize="off"
+      autocorrect="off"
+      aria-label="Macroplan TOML source"
+      @input="onInput"
+    ></textarea>
+    <div v-if="error" class="editor-error" role="alert">
+      <span class="font-semibold">Can’t parse:</span> {{ error }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.editor {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+.editor-area {
+  flex: 1;
+  width: 100%;
+  resize: none;
+  border: none;
+  outline: none;
+  padding: 0.9rem 1rem;
+  background: var(--color-base-100);
+  color: var(--color-base-content);
+  font-family: inherit; /* Fira Code, from the global theme */
+  font-size: 0.8rem;
+  line-height: 1.6;
+  tab-size: 2;
+  white-space: pre;
+  overflow: auto;
+}
+.editor-error {
+  position: sticky;
+  bottom: 0;
+  padding: 0.6rem 1rem;
+  font-size: 0.74rem;
+  background: var(--color-error);
+  color: var(--color-error-content);
+  border-top: 1px solid color-mix(in oklch, black 12%, var(--color-error));
+}
+</style>
diff --git a/src/composables/useMacroplan.ts b/src/composables/useMacroplan.ts
new file mode 100644
index 0000000..682c1e0
--- /dev/null
+++ b/src/composables/useMacroplan.ts
@@ -0,0 +1,50 @@
+import { ref, computed, watch } from 'vue'
+import { parseMacroplan } from '../model/parse'
+import { buildPlan } from '../model/plan'
+import type { Plan } from '../model/types'
+import { SAMPLE_PLAN } from '../data/sample'
+
+const STORAGE_KEY = 'macroplan:source'
+
+/**
+ * Authoring state for a single Macroplan: the TOML source (autosaved to
+ * localStorage), the parsed Plan, and the current parse error. The last
+ * successfully-parsed Plan keeps rendering through transient typos (F3).
+ */
+export function useMacroplan() {
+  const source = ref(localStorage.getItem(STORAGE_KEY) ?? SAMPLE_PLAN)
+  const lastGood = ref<Plan | null>(null)
+
+  const parsed = computed<{ plan: Plan | null; error: string | null }>(() => {
+    try {
+      return { plan: buildPlan(parseMacroplan(source.value)), error: null }
+    } catch (e) {
+      return { plan: null, error: e instanceof Error ? e.message : String(e) }
+    }
+  })
+
+  watch(
+    parsed,
+    (p) => {
+      if (p.plan) lastGood.value = p.plan
+    },
+    { immediate: true },
+  )
+
+  watch(source, (v) => {
+    try {
+      localStorage.setItem(STORAGE_KEY, v)
+    } catch {
+      /* localStorage may be full or blocked — autosave is best-effort */
+    }
+  })
+
+  return {
+    source,
+    plan: computed(() => parsed.value.plan ?? lastGood.value),
+    error: computed(() => parsed.value.error),
+    resetToSample: () => {
+      source.value = SAMPLE_PLAN
+    },
+  }
+}