Kantor Kita
Tampilan terbaru mengikuti referensi kantor hangat: kayu terang, lantai parket, tanaman berdaun, kursi berbantalan dan sofa sage. Avatar chibi memakai kepala oval, rambut bervolume, wajah sederhana, badan membulat serta rig animasi yang sama. Panel putih gading memakai aksen hijau tua. Referensi gambar menjadi arahan gaya, bukan jaminan kesamaan render. Catatan gaya maket/soft block di bawah adalah riwayat perkembangan.
Seluruh teks antarmuka memakai bahasa Inggris.
Maket kantor empat lantai dengan 13 anggota tim, ruang kerja terbuka, dan pengelolaan tugas lokal. Nama dan peran mengikuti daftar pengguna. Denah, furnitur, dan figur orang adalah interpretasi ilustratif, bukan pengukuran atau potret asli.
Tampilannya meniru maket arsitek dari karton: warna krem, garis tinta di tepi benda, satu aksen merah bata. Avatar bergaya balok seperti Roblox, dengan kepala kubus, badan kotak, lengan dan kaki bersendi, serta wajah sederhana. Tiap anggota memakai varian perempuan berambut panjang atau varian laki-laki berambut pendek, sesuai daftar tim. Semua tetap ilustratif, bukan potret rupa asli. Animasi bekerja, ngobrol, minum, menelepon, dan rutinitas lain tetap berjalan.
Label, pemilih tim, detail, log, dan tugas menampilkan inisial anggota. Identitas penyimpanan tetap memakai nama lengkap agar tugas serta pilihan musholla yang sudah disimpan tetap cocok.
Menjelajahi kantor
- 01: barber, kursi dan cermin, area tunggu, parkiran mobil dan motor.
- 02: dapur, kompor, bak cuci, kulkas, dan dua meja makan bersama.
- 03: ruang kerja terbuka dengan empat kelompok meja di atas karpet masing-masing. Papan ide memisahkan Leadership dan Marketing & Business, rak rendah memisahkan Engineering & Design dan Customer Service. Ada ruang rapat kaca, dua phone booth, ruang pantry & lounge berdinding kaca, musholla, lampu gantung, dan jendela.
- 04: rooftop garden mengikuti referensi keempat: lantai kayu, lounge di bawah pergola, meja bersama dengan kursi sage, coffee bar, planter di tepi, dan lentera hangat. Meja biliar tetap tersedia. Tim memilih tempat secara acak, termasuk sofa, meja, biliar, dan coffee bar; akses tangga tetap di kiri.
- View whole building: keempat lantai terlihat dengan tangga dua bentang di sisi kiri yang menyambungkan tiap lantai. Klik salah satu lantai untuk masuk. Di tampilan ini keempat lantai tersusun rapat seperti gedung sungguhan: lantai 1 sampai 3 berdinding kaca, tangga ada di menara kaca di sisi kiri, dan sisi parkir lantai 1 dibiarkan terbuka untuk keluar-masuk kendaraan, dengan jalan masuk ke jalan raya. Isi lantai tetap terlihat menembus kaca; klik kaca suatu lantai untuk masuk ke lantai itu. Perpindahan antara satu lantai dan seluruh gedung memakai animasi kamera sekitar 1,4 detik: saat keluar, lantai-lantai lain meluncur masuk menyusun gedung; saat masuk, lantai lain bergeser menjauh. Animasi dilewati bila sistem meminta gerakan dikurangi, dan berhenti seketika bila layar disentuh atau diseret. Tampilan ini juga menampilkan alas kota bundar dengan jalan, pohon, gedung-gedung lain (yang dekat dibuat rendah agar kantor tidak tertutup), awan yang bergerak pelan di kejauhan, dan burung yang terbang berputar. Saat satu lantai dipilih, yang tampil hanya lantai itu; tangga luar dan orang yang sedang di tangga hanya terlihat di tampilan seluruh gedung.
Seret untuk memutar dan memiringkan kamera. Shift + seret atau klik kanan untuk menggeser, scroll atau cubit trackpad untuk zoom, geser dua jari ke samping untuk memutar. Di layar sentuh: satu jari memutar, dua jari mencubit dan menggeser. Keyboard: panah memutar/memiringkan, W A S D menggeser, Q/E zoom. Tombol +, −, Rotate, dan Reset tetap tersedia.
Kamera karakter: pilih anggota tim, lalu First-person view (sudut orang pertama) atau Follow from behind. Seret atau tombol panah untuk menoleh, scroll atau cubit untuk jarak kamera belakang. Kamera ikut berpindah lantai saat karakter naik atau turun tangga. Tekan Esc, Exit camera, atau Reset untuk kembali ke tampilan maket.
Ruang rapat, kedua phone booth, musholla, serta ruang pantry & lounge (berdinding kaca) punya pintu yang terbuka sendiri saat seseorang mendekat, lalu menutup kembali.
Di lantai 3 tim punya rutinitas sendiri: menghampiri rekan untuk ngobrol, ambil minum di pantry, rehat di lounge, menelepon di phone booth, membaca papan ide, rapat kecil berdua atau bertiga, atau berdiri meregangkan badan. Bubble bergantian menandai siapa yang bicara. Paling banyak empat orang meninggalkan meja sekaligus, dan karakter dengan tugas aktif lebih jarang beranjak. Routine: on/off menghentikan kegiatan baru; yang sedang berlangsung diselesaikan lalu kembali ke meja. Rutinitas mati secara bawaan bila sistem meminta gerakan dikurangi.
Office log mencatat kegiatan simulasi dan perubahan status tugas, terbaru di atas. Isinya kejadian simulasi, bukan pesan dari AI. Di layar kecil log dibuka lewat tombol Log.
Prayer time mengantar anggota yang sudah dicentang Join at prayer time (di panel detail karakter) ke musholla. Tidak ada yang dicentang secara bawaan, dan tidak ada yang dikirim otomatis. Pilihan disimpan di browser ini. Musholla memuat delapan sajadah.
Lunch, To the rooftop, dan Back to work memindahkan tim melalui jalur tangga 3D yang terlihat. Kamera dan lantai yang sedang dilihat tidak berubah saat perintah aktivitas diberikan, termasuk Prayer time. Dari tampilan seluruh gedung, perjalanan dapat diamati tanpa pindah tampilan. Jika tujuan berubah saat di tangga, karakter mencapai bordes berikutnya sebelum menuju tujuan baru. Pause menghentikan perjalanan di posisi saat ini. Animasi tidak menyelesaikan tugas.
Music memutar instrumental santai sintetis (chord lembut, bass, dan melodi pada 72 BPM), dibuat melalui Web Audio tanpa file atau layanan audio eksternal. Klik lagi untuk menghentikannya. Slider Vol. menyimpan volume di browser. Musik selalu mati saat halaman baru dimuat; perlu klik pengguna untuk mulai. Jeda simulasi tidak menghentikan musik.
Jalankan dari direktori proyek:
python3 -m http.server 4173 --bind 127.0.0.1 --directory public
Buka http://127.0.0.1:4173. Internet diperlukan untuk memuat Three.js dari CDN dan font Archivo serta IBM Plex Mono dari Google Fonts.
Mengelola tugas
- Klik Tasks di bagian atas atau pilih karakter lalu View / assign tasks.
- Isi pekerjaan, penanggung jawab, dan instruksi opsional. Tugas masuk antrean.
- Klik Start task. Satu karakter hanya dapat memiliki satu tugas aktif. Karakter kembali ke mejanya di lantai 3.
- Isi hasil pekerjaan, lalu klik Save result & finish. Waktu simulasi tidak menyelesaikan tugas secara otomatis.
- Gunakan filter status atau penanggung jawab untuk mencari tugas. Show character menutup panel dan membuka lantai tempat karakter berada.
- Klik Export tasks untuk mengunduh salinan JSON. Impor belum tersedia.
Tugas disimpan dalam localStorage untuk alamat browser ini. Tidak ada sinkronisasi antarperangkat. Menghapus data situs juga menghapus tugas. Jika penyimpanan gagal, perubahan tidak diterapkan; data rusak tidak ditimpa secara otomatis.
Tugas dengan nama karakter prototipe lama tetap disimpan dan dapat dipindahkan ke anggota tim baru. Tugas aktif yang dipindahkan kembali ke antrean; hasil tugas selesai tetap dipertahankan.
Server tugas dan agen AI
Dengan server, tugas disimpan di data/tasks.json dan anggota yang tersambung ke agen AI mengerjakan tugasnya sendiri. Saat ini Social Media Specialist dan Customer Service; daftarnya ada di server/agents.js. Anggota lain tetap simulasi dengan status yang diubah manual.
cp .env.example .env # isi ANTHROPIC_API_KEY dari console.anthropic.com → API Keys
npm start # atau: node server/server.js (Node 22+)
Buka http://127.0.0.1:3000.
- Tugas untuk anggota yang tersambung ke agen AI berjalan sendiri: Queued → In progress → Needs review. Baca hasil lalu pilih Approve & finish, atau isi Revision comments dan klik Request revision. Revisi kembali ke antrean; draf sebelumnya tersimpan di Draft history. Agen tidak memposting apa pun.
- Tanpa
ANTHROPIC_API_KEY, server berjalan dalam dry run: hasilnya teks contoh berlabel jelas, bukan output AI. Label nama anggota yang tersambung ke agen AI memiliki titik hijau dan panel detailnya menampilkan mode yang dipakai.
- Jika Claude gagal (koneksi, key salah, saldo habis), tugas kembali ke antrean dengan pesan error dan tombol Try again.
- Pada kunjungan pertama ke server yang masih kosong, tugas yang tersimpan di browser dipindahkan ke server.
- Server belum memiliki login, sehingga hanya mendengarkan di 127.0.0.1 (laptop ini). Jangan dibuka ke jaringan sebelum ada autentikasi.
.env dan data/ tidak masuk git.- Tanpa server (misalnya
python3 -m http.server atau Live Server), aplikasi tetap berjalan seperti sebelumnya dengan localStorage.
Tugas terlihat langsung di kantor:
- Balon ucapan: karakter berkata "On it!" saat tugasnya dimulai dan "Done!" saat selesai. Agen AI menampilkan "Drafting…" selama bekerja.
- Task board di lantai 3 (dulu idea board, menghadap depan) menampilkan hingga lima tugas terbuka dengan inisial dan statusnya.
- Ringkasan di atas Office log: jumlah orang yang sedang mengerjakan tugas, yang bebas, dan tugas selesai hari ini.
Ketiganya juga berjalan tanpa server (tugas dari localStorage).
Model bawaan adalah claude-sonnet-5-5; ganti dengan ANTHROPIC_MODEL di .env. tests/server.cjs menguji alur dry run dari awal sampai akhir, tugas manual, penjaga API, persistensi, dan jalur error agen; tes ini menyalakan servernya sendiri.
Struktur
public/index.html: struktur halaman dan panel tugas.public/office.js: empat lantai 3D, data tim, pergerakan, kamera, dan integrasi tugas.public/office.css: navigasi lantai, panel anggota, dan kontrol responsif.public/tasks.js: tugas, validasi, penyimpanan, filter, dan ekspor.public/tasks.css: panel tugas responsif, fokus keyboard, dan gaya formulir.public/music.js: komposisi instrumental, kontrol putar/mati, dan volume.server/server.js: server lokal (file statis + API tugas) dan pekerja agen AI.server/agents.js: anggota yang tersambung ke agen AI beserta instruksinya.
Pemeriksaan browser
tests/avatar-stairs.cjs memeriksa varian avatar, inisial, kompatibilitas tugas, posisi 3D saat naik/turun tangga, jeda, perubahan tujuan, kamera yang tetap, musik, volume tersimpan, serta layout 375/768/1440px. Jalankan dengan node tests/avatar-stairs.cjs; konfigurasi Playwright sama seperti tes di bawah. OFFICE_URL dapat digunakan untuk alamat server selain port 4173.
tests/office.cjs menguji jumlah tim, pergantian lantai, klik lantai dari tampilan gedung, kamera karakter (mata, belakang, ikut ke lantai lain, Esc), pintu otomatis, orbit/geser/zoom kamera, rutinitas otomatis (meninggalkan meja, ngobrol, batas empat orang), log kantor, musholla dengan pilihan per orang, pilihan karakter, tugas, perjalanan makan/rooftop/kembali, tampilan responsif, dan pemindahan tugas lama. Jalankan server lokal terlebih dahulu, kemudian node tests/office.cjs dengan Playwright dan Chromium tersedia. Jika Playwright terpasang di luar proyek, set PLAYWRIGHT_MODULE ke direktori modul tersebut. Tambahkan --visual untuk hanya memeriksa lantai dan mengambil tangkapan layar. Browser pengujian memakai konteks terpisah dari data pengguna.
Member and division instructions
Select an avatar or initials in Team member. The detail sheet shows Active task, its instructions, and View / assign tasks. A brick-red underline marks an avatar with an active task; its accessible label and tooltip include the task title. The task remains visible while the character travels or takes a break. Completing it or returning it to the queue removes the marker.
Under Send instructions to, choose the selected person, their division, or Choose people… for a custom group. Meet together, Lunch, Rooftop, and Back to work apply only to that selection and preserve the current camera. The footer still commands the whole team. Meeting places are reserved before anyone moves; an invitation that exceeds the available six seats is rejected without moving a partial group. Explicit meetings last until participants receive another command, such as Back to work. Tasks remain manually managed.
tests/member-commands.cjs covers selection scope, room capacity, empty selection, meeting arrival, camera preservation, active-task display and responsive detail panels. Use the same Playwright setup as the other tests.
Soft-block avatars
Heads, torsos, limbs, hair and shoes now use rounded block geometry shared between characters. Joint poses blend over time instead of snapping between walking, sitting and activities. Small weight shifts, breathing, alternating typing/mouse poses and head turns vary by person. Characters slow down near their final destination. Barber characters share the rounded shapes and pose blending. Gender assignments, initials and task identities are unchanged.
tests/soft-avatar.cjs exercises character cameras, stairs, pause and arrival at lunch, with screenshots of the new figures. tests/member-commands.cjs remains the regression check for instructions and active tasks.
Evening building overview
View whole building now uses a closer camera, navy panels, warm floor lights and a muted dusk sky. Individual floors keep the warm daylight interior. Navigation thumbnails are captured from the actual 3D floors at startup. Counts show team members currently on each floor, excluding people on the stairs and barber visitors; they are not online-presence indicators. Mobile navigation uses compact floor labels and counts instead of thumbnails. No analytics or account controls are implied.
tests/building-view.cjs checks thumbnail loading, counts, clicking a floor through the facade, theme switching and 375/768/1440px layouts.
Pembaruan review dan keandalan tugas
Hasil manual dan komentar revisi disimpan sementara di sessionStorage tab browser, sehingga pembaruan daftar serta reload tidak menghapus tulisan yang belum dikirim. Komentar revisi terikat ke versi draf. Persetujuan memakai versi tugas agar tampilan lama tidak menyetujui draf yang sudah berubah.
Worker memakai identitas eksekusi: hasil atau error terlambat tidak mengubah tugas yang sudah dialihkan. API memvalidasi penanggung jawab dan batas satu tugas aktif per orang. Jalankan ulang server setelah memperbarui kode backend.
Office life
Tombol Office life membuka panel kegiatan dan pembagian tugas. Teks antarmuka tetap bahasa Inggris.
- Moka, kucing kantor: berkeliling di workspace, tidur di sofa dan mengunjungi meja anggota tanpa tugas aktif. Klik kucing dalam tampilan lantai 3 atau Pet the office cat untuk mengelusnya. Pause menghentikan gerakannya; Routine: off menghentikan perjalanan baru.
- Celebrate finished tasks: anggota mengangkat tangan sebentar ketika tugas manual selesai atau draf AI disetujui. Draf yang masih menunggu review tidak memicu selebrasi. Bisa dimatikan; gerak selebrasi dilewati untuk preferensi reduced motion.
- Team habits: anggota punya kecenderungan rutinitas yang berbeda: kopi, papan ide, lounge, ngobrol, peregangan atau menyiram tanaman. Ini kepribadian simulasi, bukan informasi tentang orang aslinya.
- Lighting: bawaan mengikuti jam perangkat: pagi 06–12, siang 12–16, sore 16–19, malam 19–06. Bisa memilih suasana manual. Suasana diperbarui setiap menit; cahaya hangat kantor menyala pada sore dan malam. Pilihan pencahayaan dan selebrasi disimpan di browser.
- Coffee break: pilih dua anggota untuk pergi ke pantry bersama, lalu kembali ke meja setelah keduanya tiba dan beristirahat. Dua tempat pantry harus tersedia. Jika keduanya tersambung ke agen AI (saat ini KR dan KS), isi topik dan centang Ask both AI agents for feedback. Server membuat dua permintaan model berurutan; agen kedua membaca tanggapan pertama. Tanpa API key, catatan berlabel dry run. Download notes menyimpan catatan sebagai teks; catatan tidak otomatis disimpan ke tugas atau dipublikasikan.
- Division brief: pilih divisi, isi tujuan dan fakta, lalu Preview task allocation. Pembagian mengikuti peran anggota, satu tugas per orang. Mengubah brief membatalkan preview lama. Create these tasks menyimpan seluruh pembagian sekaligus di server atau localStorage. Anggota dengan agen AI mengambil tugas otomatis; anggota lain tetap manual. Pembagian ini memakai aturan peran, bukan klaim bahwa planner AI sudah menilai dependensi tugas.
Jalankan ulang server dan reload halaman setelah perubahan. tests/office-life.cjs memeriksa penyimpanan batch, feedback coffee break, unduhan, interaksi/jeda kucing, kebiasaan, selebrasi, pencahayaan tersimpan, panel responsif dan pembagian tugas tanpa server. Tes memakai server sementara dalam dry-run dan tidak memanggil AI berbayar.
Work board, review, decorations and tours
Di Office life, Work board membuka pekerjaan nyata beserta draf, pertanyaan agen dan hasil selesai. Filter status membantu menemukan pekerjaan yang perlu ditinjau. Open task membawa ke tugas yang tepat; Discuss this draft membuka rapat review. Papan 3D di workspace juga dapat diklik, dan kini menampilkan pekerjaan selesai bersama tugas yang menunggu review/keputusan. Monitor meja menampilkan status tugas pemiliknya; klik sisi depan monitor untuk membuka tugas anggota tersebut. Anggota tanpa tugas menampilkan Idle. Finished di monitor adalah status tugas, bukan kehadiran online.
Review meeting memakai draf yang sudah ada. Pilih tugas dan 1–6 anggota; kursi ruang rapat diperiksa sebelum siapa pun dipindahkan. Anggota tetap di ruang rapat sampai diberi perintah baru atau Send invitees back to work. Centang Ask connected agents for feedback jika ingin masukan AI; saat ini KR dan KS. Anggota lainnya hadir sebagai simulasi. Server mengirim satu permintaan model per anggota tersambung, berurutan, dengan draf, instruksi asli dan masukan sebelumnya. Catatan menyebut versi draf sumber; permintaan dari versi lama ditolak dan perubahan selama review diberi penanda. Review tidak mengubah tugas, menyetujui, merevisi atau menerbitkan hasil. Persetujuan dan revisi tetap dilakukan lewat Tasks. Catatan dapat diunduh sebagai teks; tanpa key, hasil berlabel DRY RUN.
Di Appearance & tours, pilih warna kursi/karpet, warna daun tanaman, dan salah satu poster kantor. Team colours / Original greens memulihkan warna bawaan. Pilihan tersimpan di browser, bukan di server. Dekorasi tidak memindahkan furnitur atau mengubah jalur berjalan.
Outside the windows menawarkan Clear, Rain, dan Sunset. Hujan merupakan simulasi visual di luar footprint gedung, bukan cuaca sungguhan. Sunset memberi cahaya sore tanpa mengubah pilihan Lighting yang disimpan; Clear mengembalikan pencahayaan pilihan itu. Play rain sound memainkan noise tersaring lewat Web Audio; volumenya tersimpan. Audio selalu mati setelah reload dan dimulai dengan klik pengguna. Suara hujan dan Music memiliki kontrol terpisah.
Camera tours menyediakan orbit workspace, mengikuti Moka, dan orbit gedung. Klik Start camera tour untuk menutup panel dan mulai; Stop tour, Escape, drag, wheel, keyboard kamera, pemilihan lantai/anggota, atau kontrol kamera menghentikan tur. Pause menjeda tur serta hujan visual. Reduced motion memberikan sudut kamera diam dan tetes hujan tanpa animasi.
tests/office-studio.cjs menggunakan server sementara dalam dry-run untuk memeriksa status/klik monitor, papan hasil, navigasi tugas, review versi draf, dekorasi tersimpan, cuaca/audio, tur, gangguan kamera manual, viewport 375/768/1440px dan reduced motion. public/studio.js mengelola panel serta audio; public/studio.css menata panel; geometri, cuaca dan kamera tetap di public/office.js.
tests/server.cjs memeriksa siklus draf, revisi, persetujuan, dan pemulihan tulisan setelah polling/reload dengan dry-run. tests/worker-reliability.cjs memakai provider lokal tiruan untuk memeriksa error terlambat setelah pengalihan tugas. Pengujian ini tidak memanggil AI berbayar.
Kantor Kita is an interactive 3D paper-model visualization of a four-floor office housing a 13-person team, combined with a simple local task tracker for that team.